Skip to content

Commit 11aef9b

Browse files
kaeizenkaeizen
committed
add body class for color schemes and spacing
1 parent 8bbe710 commit 11aef9b

File tree

21 files changed

+673
-520
lines changed

21 files changed

+673
-520
lines changed

‎src/block/countdown/style.scss‎

Lines changed: 24 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,26 @@
6659
display: none;
6760
margin: 0;
6861
}
62+
63+
:where(.stk-has-color-schemes) {
64+
.stk-block-countdown__digit {
65+
color: var(--stk-accent-color);
66+
&:where(:hover) {
67+
color: var(--stk-accent-color-hover, var(--stk-accent-color));
68+
}
69+
}
70+
.stk-block-countdown__divider-wrapper {
71+
.stk-block-countdown__divider-colon {
72+
color: var(--stk-accent-color);
73+
&:where(:hover) {
74+
color: var(--stk-accent-color-hover, var(--stk-accent-color));
75+
}
76+
}
77+
.stk-block-countdown__divider-line {
78+
background-color: var(--stk-accent-color);
79+
&:where(:hover) {
80+
background-color: var(--stk-accent-color-hover, var(--stk-accent-color));
81+
}
82+
}
83+
}
84+
}

‎src/block/divider/style.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@
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+
:where(.stk-has-color-schemes) {
11+
.stk-block.stk-block-divider {
12+
hr.stk-block-divider__hr,
13+
.stk-block-divider__dot {
14+
background: var(--stk-accent-color, #ddd);
15+
&:where(:hover) {
16+
background: var(--stk-accent-color-hover, var(--stk-accent-color, #ddd));
17+
}
918
}
1019
}
1120
}

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

Lines changed: 0 additions & 3 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 {

‎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: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,20 @@ 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+
:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {
24+
.stk-block-number-box__container,
25+
div.stk-block-number-box__text {
26+
color: var(--stk-button-text-color, #fff);
2027
&:where(:hover) {
21-
#{ '--stk-button-background-color' }: cssvar(button-background-color-hover);
22-
#{ '--stk-button-text-color' }: cssvar(button-text-color-hover);
28+
background: var(--stk-button-background-color-hover, cssvar(button-background-color));
29+
color: var(--stk-button-text-color-hover, var(--stk-button-text-color, #fff));
2330
}
2431
}
2532
}

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

Lines changed: 6 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,12 @@
4746
}
4847
}
4948

49+
:where(.stk-has-color-schemes) {
50+
.stk-block-progress-bar {
51+
--progress-color-1: var(--stk-accent-color);
52+
}
53+
}
54+
5055
@media (prefers-reduced-motion) {
5156
.stk-progress-bar {
5257
&.stk--with-animation {

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

Lines changed: 6 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,12 @@
5554
}
5655
}
5756

57+
:where(.stk-has-color-schemes) {
58+
.stk-block-progress-circle {
59+
--progress-color-1: var(--stk-accent-color);
60+
}
61+
}
62+
5863
@media (prefers-reduced-motion) {
5964
.stk-progress-circle {
6065
&.stk--with-animation {

‎src/block/table-of-contents/style.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,16 @@
3737
margin-block-start: 0;
3838
margin-block-end: 0;
3939
}
40+
}
4041

41-
// Add this so that it inherits the color from global color schemes.
42-
::marker {
43-
color: var(--stk-accent-color);
44-
&:where(:hover) {
45-
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
42+
:where(.stk-has-color-schemes) {
43+
.stk-block-table-of-contents {
44+
// Add this so that it inherits the color from global color schemes.
45+
::marker {
46+
color: var(--stk-accent-color);
47+
&:where(:hover) {
48+
#{ '--stk-accent-color' }: var(--stk-accent-color-hover);
49+
}
4650
}
4751
}
4852
}

‎src/block/timeline/style.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
--gap: 16px;
99
--line-dot-size: 11px;
1010
--line-dot-border-radius: 100%;
11-
--line-accent-bg-color: var(--stk-accent-color, #000);
11+
--line-accent-bg-color: #000;
1212
--line-accent-bg-color-2: var(--line-accent-bg-color, #000);
1313
--line-accent-bg-location: 50%;
1414
--line-bg-color: #eee;
@@ -20,6 +20,12 @@
2020
margin-block-start: 0 !important;
2121
}
2222

23+
:where(.stk-has-color-schemes) {
24+
.stk-block-timeline {
25+
--line-accent-bg-color: var(--stk-accent-color, #000);
26+
}
27+
}
28+
2329
// iOS polyfill for timeline accent color
2430
// For tablet and mobile, fill timeline lines with accent color
2531
@include tablet-mobile {

‎src/plugins/global-settings/buttons-and-icons/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-buttons-and-
371371
}, 10 )
372372

373373
export const GlobalButtonsAndIconsStyles = () => {
374-
const styles = useBlockLayoutEditorLoader( 'stackable/global-buttons-and-icons' )
374+
const styles = useBlockLayoutEditorLoader( 'stackable/global-buttons-and-icons', 'buttons-and-icons' )
375375

376376
return styles
377377
}

0 commit comments

Comments
 (0)