Decibel: add button styles (#6567)

Co-authored-by: Jason Crist <jcrist@pbking.com>
This commit is contained in:
Vicente Canales 2022-09-15 16:24:58 -03:00 committed by GitHub
parent 92c8132215
commit 50fd74133a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 6 deletions

View file

@ -43,7 +43,7 @@ if ( ! function_exists( 'block_canvas_styles' ) ) :
// Register theme stylesheet.
wp_register_style(
'block_canvas-style',
get_template_directory_uri() . '/style.css',
get_stylesheet_directory_uri() . '/style.css',
array(),
wp_get_theme()->get( 'Version' )
);

View file

@ -50,3 +50,13 @@ GNU General Public License for more details.
padding-right: var(--wp--preset--spacing--50);
padding-left: var(--wp--preset--spacing--50);
}
/*
* Control the hover stylings of outline block style.
* Unnecessary once block styles are configurable via theme.json
*/
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--background);
border-color: var(--wp--preset--color--secondary);
}

View file

@ -43,7 +43,7 @@ if ( ! function_exists( 'decibel_styles' ) ) :
// Register theme stylesheet.
wp_register_style(
'decibel-style',
get_template_directory_uri() . '/style.css',
get_stylesheet_directory_uri() . '/style.css',
array(),
wp_get_theme()->get( 'Version' )
);

View file

@ -27,4 +27,11 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
padding-bottom: var(--wp--custom--gap--vertical);
padding-right: var(--wp--custom--gap--horizontal);
padding-left: var(--wp--custom--gap--horizontal);
}
/*
* Control the hover stylings of outline block style.
*/
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
background-color: var(--wp--preset--color--primary);
}

View file

@ -150,16 +150,34 @@
"button": {
":hover": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--background)"
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--foreground)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--foreground)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--foreground)"
},
"outline": {
"color": "var(--wp--preset--color--secondary)",
"width": "2px",
"style": "dotted",
"offset": "2px"
}
},
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--foreground)"
"background": "var(--wp--preset--color--foreground)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"textTransform": "uppercase"