Skip to content

Commit a29aa63

Browse files
kaeizenkaeizen
authored
fix (Global Color Schemes): Fix button CSS issues (#3468)
* fix css * fix button hover states * fix plain button * fix hover
1 parent 05d6884 commit a29aa63

6 files changed

Lines changed: 40 additions & 23 deletions

File tree

‎src/block/icon-list-item/style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.stk-block-icon-list-item {
22
list-style-type: none !important;
3-
--stk-icon-list-marker-color: var(--stk-accent-color);
43
&:where(:hover) {
54
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
65
}

‎src/block/icon-list/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Important, we can't use flex since it causes issues with columns.
22
.stk-block-icon-list {
3+
--stk-icon-list-marker-color: var(--stk-accent-color);
34
.stk-block-icon-list--grid:is(ul, ol) {
45
display: grid;
56
grid-template-columns: repeat(var(--stk-icon-list-column-count, 1), 1fr);

‎src/plugins/global-settings/color-schemes/index.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,7 @@ public function generate_css_rules( $scheme, $mode = '' ) {
426426
}
427427

428428
$inherited_value = $this->get_inherited_value( $scheme[ $property ], $state, $mode );
429-
if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) ) {
429+
if ( $state === 'desktopHover' && ! $this->has_value( $scheme, $property, $state ) && $mode === 'container' ) {
430430
$decls[ $state ][ $css_property ] = $inherited_value;
431431
}
432432

‎src/plugins/global-settings/color-schemes/utils.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,15 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
9898
decls.desktopHover.push( `${ customProperty }-parent-hover: ${ inheritedValue };` )
9999
}
100100

101-
if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue ) {
101+
if ( state === 'desktopHover' && ! scheme[ property ]?.[ state ] && inheritedValue && mode === 'container' ) {
102102
decls[ state ].push( `${ customProperty }${ suffix }: ${ inheritedValue };` )
103103
}
104104

105105
if ( currentHoverState !== 'normal' ) {
106-
const currentHover = mode === '' && currentHoverState === 'parent-hover' ? '' : `-${ currentHoverState }`
106+
const currentHover = mode === '' && currentHoverState === 'parent-hover' ? ''
107+
: ( currentHoverState === 'hover' && ! scheme[ property ]?.desktopHover ) ? '-parent-hover'
108+
: `-${ currentHoverState }`
109+
107110
decls.desktopHover.push( `${ customProperty }-current-hover: var(${ customProperty }${ currentHover });` )
108111
}
109112

‎src/styles/block-design-system-blocks.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@
135135
&:not(.is-style-link, .is-style-ghost) .stk-button::before {
136136
border-width: cssvar(button-border-width-parent-hover);
137137
box-shadow: cssvar(button-box-shadow-parent-hover);
138+
138139
}
139140
&.is-style-ghost .stk-button::before {
140141
border-width: cssvar(button-ghost-border-width-parent-hover);
@@ -204,7 +205,8 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
204205

205206
// Block Background
206207
.stk-block-background {
207-
background: cssvar(block-background-color) center center;
208+
background-color: cssvar(block-background-color);
209+
background-image: cssvar(block-background-color);
208210
border-radius: cssvar(block-background-border-radius);
209211
box-shadow: cssvar(block-background-box-shadow);
210212
&:not(.stk--no-padding) {
@@ -214,7 +216,8 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
214216
}
215217
}
216218
&:hover {
217-
background: var(--stk-block-background-color-hover, cssvar(block-background-color)) center center;
219+
background-color: var(--stk-block-background-color-hover, cssvar(block-background-color));
220+
background-image: var(--stk-block-background-color-hover, cssvar(block-background-color));
218221
}
219222
}
220223

@@ -234,6 +237,17 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
234237
padding: cssvar(block-background-padding-parent-hover);
235238
}
236239
}
240+
// Inherit parent-hover/normal state colors when hovering over a block.
241+
.stk-block-background {
242+
#{ '--stk-button-background-color-hover' }: var(--stk-button-background-color);
243+
#{ '--stk-button-text-color-hover' }: var(--stk-button-text-color);
244+
#{ '--stk-button-outline-color-hover' }: var(--stk-button-outline-color);
245+
}
246+
// :where(.stk-hover-parent:hover) .stk-block-background {
247+
// #{ '--stk-button-background-color-hover' }: var(--stk-button-background-color);
248+
// #{ '--stk-button-text-color-hover' }: var(--stk-button-text-color);
249+
// #{ '--stk-button-outline-color-hover' }: var(--stk-button-outline-color);
250+
// }
237251

238252
// Images
239253
.stk-img-wrapper {

‎src/styles/editor-block-design-system.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -48,42 +48,42 @@ div.stk-block > :is(h1,h2,h3,h4,h5,h6) {
4848
.stk--is-hovered > .stk-hover-parent :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
4949
&:not(.is-style-link, .is-style-ghost, .is-style-plain) .stk-button {
5050
background: var(--stk-button-background-color-parent-hover, cssvar(button-background-color));
51-
#{ '--stk-button-text-color' }: cssvar(button-text-color-parent-hover);
52-
#{ '--stk-accent-color' }: cssvar(button-text-color-parent-hover);
51+
#{ '--stk-button-text-color' }: var(--stk-button-text-color-parent-hover, #fff);
52+
#{ '--stk-accent-color' }: var(--stk-button-text-color-parent-hover, #fff);
5353
}
5454
&.is-style-link .stk-button {
55-
#{ '--stk-accent-color' }: cssvar(link-color-parent-hover);
55+
#{ '--stk-accent-color' }: var(--stk-link-color-parent-hover);
5656
}
5757
&.is-style-ghost .stk-button {
58-
#{ '--stk-button-text-color' }: cssvar(button-outline-color-parent-hover);
59-
#{ '--stk-button-outline-color' }: cssvar(button-outline-color-parent-hover);
60-
#{ '--stk-accent-color' }: cssvar(button-outline-color-parent-hover);
58+
#{ '--stk-button-outline-color' }: var(--stk-button-outline-color-parent-hover, #008de4);
59+
#{ '--stk-button-text-color' }: var(--stk-button-outline-color-parent-hover, #008de4);
60+
#{ '--stk-accent-color' }: var(--stk-button-outline-color-parent-hover, #008de4);
6161
}
6262
&.is-style-plain .stk-button {
63-
#{ '--stk-button-background-color' }: cssvar(button-background-color-parent-hover);
63+
#{ '--stk-button-background-color' }: var(--stk-button-background-color-parent-hover, #008de4);
6464
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-parent-hover, cssvar(button-background-color));
6565
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-parent-hover, cssvar(button-background-color));
6666
}
6767
}
6868
.is-selected > .stk--is-hovered:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
6969
&:not(.is-style-link, .is-style-ghost, .is-style-plain) .stk-button {
7070
background: var(--stk-button-background-color-current-hover, cssvar(button-background-color));
71-
#{ '--stk-button-text-color' }: cssvar(button-text-color-current-hover);
72-
#{ '--stk-accent-color-hover' }: cssvar(button-text-color-current-hover);
73-
#{ '--stk-accent-color' }: cssvar(button-text-color-current-hover);
71+
#{ '--stk-button-text-color' }: var(--stk-button-text-color-current-hover, #fff);
72+
#{ '--stk-accent-color-hover' }: var(--stk-button-text-color-current-hover, #fff);
73+
#{ '--stk-accent-color' }: var(--stk-button-text-color-current-hover, #fff);
7474
}
7575
&.is-style-link .stk-button {
76-
#{ '--stk-accent-color-hover' }: cssvar(link-color-current-hover);
77-
#{ '--stk-accent-color' }: cssvar(link-color-current-hover);
76+
#{ '--stk-accent-color-hover' }: var(--stk-link-color-current-hover);
77+
#{ '--stk-accent-color' }: var(--stk-link-color-current-hover);
7878
}
7979
&.is-style-ghost .stk-button {
80-
#{ '--stk-button-text-color' }: cssvar(button-outline-color-current-hover);
81-
#{ '--stk-button-outline-color' }: cssvar(button-outline-color-current-hover);
82-
#{ '--stk-accent-color-hover' }: cssvar(button-outline-color-current-hover);
83-
#{ '--stk-accent-color' }: cssvar(button-outline-color-current-hover);
80+
#{ '--stk-button-outline-color' }: var(--stk-button-outline-color-current-hover, #008de4);
81+
#{ '--stk-button-text-color' }: var(--stk-button-outline-color-current-hover, #008de4);
82+
#{ '--stk-accent-color-hover' }: var(--stk-button-outline-color-current-hover, #008de4);
83+
#{ '--stk-accent-color' }: var(--stk-button-outline-color-current-hover, #008de4);
8484
}
8585
&.is-style-plain .stk-button {
86-
#{ '--stk-button-background-color' }: cssvar(button-background-color-current-hover);
86+
#{ '--stk-button-background-color' }: var(--stk-button-background-color-current-hover, #008de4);
8787
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
8888
#{ '--stk-accent-color-hover' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
8989
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));

0 commit comments

Comments
 (0)