Skip to content

Commit 80b4b7d

Browse files
kaeizenkaeizen
authored
Fix (Color Schemes and Spacing): wrap new styles with classnames for color schemes and spacing (#3476)
* add body class for color schemes and spacing * fix spacing and borders, buttons and icons in frontend * add wrapper to other blocks, add dev notes, separate buttons * add hover on parent-hover * add image filter hover on parent-hover * fix typo
1 parent 8bbe710 commit 80b4b7d

26 files changed

Lines changed: 767 additions & 512 deletions

File tree

‎src/block/columns/editor.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@
2828

2929
.stk-block-columns > .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
3030
column-gap: var(--stk-column-gap, 0px);
31-
row-gap: var(--stk-columns-row-gap, 0px);
31+
}
32+
33+
// These are styles added from the global spacing and borders.
34+
:where(.stk-has-design-system-spacing-and-borders) {
35+
.stk-block-columns > .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
36+
row-gap: var(--stk-columns-row-gap, 0px);
37+
}
3238
}
3339

3440
// For Firefox polyfill

‎src/block/columns/style.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,20 @@
99
}
1010

1111
.stk-block-columns > .stk-block-content {
12-
--stk-column-gap: var(--stk-columns-column-gap, 0px); // For nested columns, this takes precedence.
12+
--stk-column-gap: 0px; // For nested columns, this takes precedence.
1313
column-gap: var(--stk-column-gap);
14-
row-gap: var(--stk-columns-row-gap, 0px);
1514
margin-left: auto;
1615
margin-right: auto;
1716
}
1817

18+
// These are styles added from the global spacing and borders.
19+
:where(.stk-has-design-system-spacing-and-borders) {
20+
.stk-block-columns > .stk-block-content {
21+
--stk-column-gap: var(--stk-columns-column-gap, 0px); // For nested columns, this takes precedence.
22+
row-gap: var(--stk-columns-row-gap, 0px);
23+
}
24+
}
25+
1926
// Add a 0 specificity style to set the default column order. This is to prevent
2027
// the column order from spilling to nested blocks.
2128
// Target the stk-column-wrapper to also include blocks with column innerblocks

‎src/block/countdown/style.scss‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@
2727
.stk-block-countdown__digit {
2828
font-size: 40px;
2929
height: 50%;
30-
color: var(--stk-accent-color);
31-
&:where(:hover) {
32-
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
33-
}
3430
}
3531

3632
.stk-block-countdown__label,
@@ -43,16 +39,13 @@
4339
align-items: center;
4440
justify-content: center;
4541
.stk-block-countdown__divider-colon {
46-
color: var(--stk-accent-color, #000);
42+
color: #000;
4743
display: flex;
4844
position: relative;
4945
justify-content: center;
5046
line-height: 1;
5147
font-size: 45px;
5248
top: -12px;
53-
&:where(:hover) {
54-
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
55-
}
5649
}
5750

5851
.stk-block-countdown__divider-line {
@@ -66,3 +59,27 @@
6659
display: none;
6760
margin: 0;
6861
}
62+
63+
// These are styles added from the global color schemes.
64+
:where(.stk-has-color-schemes) {
65+
.stk-block-countdown__digit {
66+
color: var(--stk-accent-color);
67+
&:where(:hover) {
68+
color: var(--stk-accent-color-hover, var(--stk-accent-color));
69+
}
70+
}
71+
.stk-block-countdown__divider-wrapper {
72+
.stk-block-countdown__divider-colon {
73+
color: var(--stk-accent-color);
74+
&:where(:hover) {
75+
color: var(--stk-accent-color-hover, var(--stk-accent-color));
76+
}
77+
}
78+
.stk-block-countdown__divider-line {
79+
background-color: var(--stk-accent-color);
80+
&:where(:hover) {
81+
background-color: var(--stk-accent-color-hover, var(--stk-accent-color));
82+
}
83+
}
84+
}
85+
}

‎src/block/divider/style.scss‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,19 @@
33
.stk-block.stk-block-divider {
44
hr.stk-block-divider__hr,
55
.stk-block-divider__dot {
6-
background: var(--stk-accent-color, #ddd);
7-
&:where(:hover) {
8-
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
6+
background: #ddd;
7+
}
8+
}
9+
10+
// These are styles added from the global color schemes.
11+
:where(.stk-has-color-schemes) {
12+
.stk-block.stk-block-divider {
13+
hr.stk-block-divider__hr,
14+
.stk-block-divider__dot {
15+
background: var(--stk-accent-color, #ddd);
16+
&:where(:hover) {
17+
background: var(--stk-accent-color-hover, var(--stk-accent-color, #ddd));
18+
}
919
}
1020
}
1121
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
.stk-block-icon-list-item {
22
list-style-type: none !important;
3-
&:where(:hover) {
4-
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
5-
}
63
}
74
.stk-block-icon-list.stk-block {
85
.wp-block-stackable-icon-list-item:not(:last-child)::after {
@@ -87,7 +84,9 @@
8784
.stk-block-icon-list-item__marker::before {
8885
content: counter(stk-icon-list-counter, var(--stk-list-style-type, decimal)) ". ";
8986
display: block;
90-
font-size: var(--stk-icon-list-icon-size, 16px);
87+
// In Global Buttons and Icons, we renamed `--stk-icon-height` to `--stk-icon-list-icon-size`.
88+
// Keep the `--stk-icon-height` for backward compatibility.
89+
font-size: var(--stk-icon-height, var(--stk-icon-list-icon-size, 16px));
9190
color: var(--stk-icon-list-marker-color);
9291
transform: rotate(var(--stk-icon-list-icon-rotation, 0deg));
9392
opacity: var(--stk-icon-list-icon-opacity, 1);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@
1616
top: 0;
1717
left: 0;
1818
height: 1em;
19-
width: var(--stk-icon-list-icon-size, 1em);
19+
// In Global Buttons and Icons, we renamed `--stk-icon-height` to `--stk-icon-list-icon-size`.
20+
// Keep the `--stk-icon-height` for backward compatibility.
21+
width: var(--stk-icon-height, var(--stk-icon-list-icon-size, 1em));
2022
cursor: copy;
21-
margin-left: calc(var(--stk-icon-list-icon-size, 1em) * -1);
23+
margin-left: calc(var(--stk-icon-height, var(--stk-icon-list-icon-size, 1em)) * -1);
2224
}
2325
}
2426

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
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);
43
.stk-block-icon-list--grid:is(ul, ol) {
54
display: grid;
65
grid-template-columns: repeat(var(--stk-icon-list-column-count, 1), 1fr);
@@ -88,3 +87,14 @@
8887
margin-bottom: 0;
8988
}
9089
}
90+
91+
:where(.stk-has-color-schemes) {
92+
.stk-block-icon-list {
93+
--stk-icon-list-marker-color: var(--stk-accent-color);
94+
:where(.stk-block-icon-list-item) {
95+
&:where(:hover) {
96+
--stk-icon-list-marker-color: var(--stk-accent-color-hover, var(--stk-accent-color));
97+
}
98+
}
99+
}
100+
}

‎src/block/number-box/style.scss‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,21 @@ div.stk-block-number-box__text {
1313
.stk-block-number-box__container,
1414
div.stk-block-number-box__text {
1515
background: cssvar(button-background-color);
16-
color: var(--stk-button-text-color, #fff);
16+
color: #fff;
1717
border-radius: 100%;
1818
width: 96px;
1919
height: 96px;
20+
}
21+
}
22+
23+
// These are styles added from the global color schemes.
24+
:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {
25+
.stk-block-number-box__container,
26+
div.stk-block-number-box__text {
27+
color: var(--stk-button-text-color, #fff);
2028
&:where(:hover) {
21-
#{ '--stk-button-background-color' }: cssvar(button-background-color-hover);
22-
#{ '--stk-button-text-color' }: cssvar(button-text-color-hover);
29+
background: var(--stk-button-background-color-hover, cssvar(button-background-color));
30+
color: var(--stk-button-text-color-hover, var(--stk-button-text-color, #fff));
2331
}
2432
}
2533
}

‎src/block/progress-bar/style.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
border-radius: var(--progress-border-radius, 0);
1212
background-color: var(--progress-background, #f0f0f0);
1313
overflow: hidden;
14-
--progress-color-1: var(--stk-accent-color);
1514
.stk-progress-bar__bar {
1615
// percentage = ( progressValue (%) / progressMax ) * 100
1716
--progress-percent: calc(( var(--progress-value, 50%) / var(--progress-max, 100)) * 100);
@@ -47,6 +46,13 @@
4746
}
4847
}
4948

49+
// These are styles added from the global color schemes.
50+
:where(.stk-has-color-schemes) {
51+
.stk-block-progress-bar {
52+
--progress-color-1: var(--stk-accent-color);
53+
}
54+
}
55+
5056
@media (prefers-reduced-motion) {
5157
.stk-progress-bar {
5258
&.stk--with-animation {

‎src/block/progress-circle/style.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
position: relative;
55
height: var(--progress-size, 150px);
66
width: var(--progress-size, 150px);
7-
--progress-color-1: var(--stk-accent-color);
87
svg {
98
height: var(--progress-size, 150px);
109
width: var(--progress-size, 150px);
@@ -55,6 +54,13 @@
5554
}
5655
}
5756

57+
// These are styles added from the global color schemes.
58+
:where(.stk-has-color-schemes) {
59+
.stk-block-progress-circle {
60+
--progress-color-1: var(--stk-accent-color);
61+
}
62+
}
63+
5864
@media (prefers-reduced-motion) {
5965
.stk-progress-circle {
6066
&.stk--with-animation {

0 commit comments

Comments
 (0)