Skip to content

Commit c5a4bd5

Browse files
kaeizenkaeizen
committed
fix button hover states
1 parent 3a381ce commit c5a4bd5

File tree

3 files changed

+33
-23
lines changed

3 files changed

+33
-23
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,10 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
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: 7 additions & 0 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);
@@ -236,6 +237,12 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
236237
padding: cssvar(block-background-padding-parent-hover);
237238
}
238239
}
240+
// Inherit parent-hover/normal state colors when hovering over a block.
241+
:where(.stk-hover-parent:hover) .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+
}
239246

240247
// Images
241248
.stk-img-wrapper {

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

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -48,45 +48,45 @@ 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);
64-
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-parent-hover, cssvar(button-background-color));
65-
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-parent-hover, cssvar(button-background-color));
63+
#{ '--stk-button-background-color' }: var(--stk-button-background-color-parent-hover, #008de4);
64+
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-parent-hover, #008de4);
65+
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-parent-hover, #008de4);
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);
87-
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
88-
#{ '--stk-accent-color-hover' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
89-
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-current-hover, cssvar(button-background-color));
86+
#{ '--stk-button-background-color' }: var(--stk-button-background-color-current-hover, #008de4);
87+
#{ '--stk-button-text-color' }: var(--stk-button-plain-text-color-current-hover, #008de4);
88+
#{ '--stk-accent-color-hover' }: var(--stk-button-plain-text-color-current-hover, #008de4);
89+
#{ '--stk-accent-color' }: var(--stk-button-plain-text-color-current-hover, #008de4);
9090
}
9191
}
9292

0 commit comments

Comments
 (0)