Skip to content

Commit e67e673

Browse files
rtkaahortkaaho
authored
Sprinkles: Support passing style objects as property values (#303)
1 parent 1c88d2c commit e67e673

File tree

5 files changed

+181
-31
lines changed

5 files changed

+181
-31
lines changed

‎.changeset/tall-horses-appear.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
'@vanilla-extract/sprinkles': minor
3+
---
4+
5+
Support passing style objects as property values.
6+
7+
For more complicated styles, values can now be entire style objects. This works especially well when combined with CSS Variables.
8+
9+
```ts
10+
import { createVar } from '@vanilla-extract/css';
11+
import { createAtomicStyles } from '@vanilla-extract/sprinkles';
12+
13+
const alpha = createVar();
14+
15+
const responsiveStyles = createAtomicStyles({
16+
properties: {
17+
background: {
18+
red: {
19+
vars: { [alpha]: '1' },
20+
background: `rgba(255, 0, 0, ${alpha})`
21+
},
22+
},
23+
backgroundOpacity: {
24+
1: { vars: { [alpha]: '1' } },
25+
0.1: { vars: { [alpha]: '0.1' } },
26+
},
27+
// etc.
28+
}
29+
});
30+
```

‎fixtures/sprinkles/src/styles.css.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { globalStyle } from '@vanilla-extract/css';
1+
import { globalStyle, createVar } from '@vanilla-extract/css';
22
import {
33
createAtomicStyles,
44
createAtomsFn,
55
createMapValueFn,
66
createNormalizeValueFn,
77
} from '@vanilla-extract/sprinkles';
88

9+
const alpha = createVar();
10+
911
const responsiveStyles = createAtomicStyles({
1012
defaultCondition: 'mobile',
1113
conditions: {
@@ -29,6 +31,18 @@ const responsiveStyles = createAtomicStyles({
2931
small: '10px',
3032
medium: '20px',
3133
},
34+
background: {
35+
red: {
36+
vars: { [alpha]: '1' },
37+
background: `rgba(255, 0, 0, ${alpha})`,
38+
},
39+
},
40+
backgroundOpacity: {
41+
1: { vars: { [alpha]: '1' } },
42+
0.1: { vars: { [alpha]: '0.1' } },
43+
0.2: { vars: { [alpha]: '0.2' } },
44+
0.3: { vars: { [alpha]: '0.3' } },
45+
},
3246
},
3347
});
3448

@@ -41,6 +55,8 @@ export const normalizeResponsiveValue =
4155
export const preComposedAtoms = atoms({
4256
display: 'block',
4357
paddingTop: 'small',
58+
background: 'red',
59+
backgroundOpacity: { mobile: 0.1, tablet: 0.2, desktop: 0.3 },
4460
});
4561

4662
export const preComposedAtomsUsedInSelector = atoms({

‎packages/sprinkles/README.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,11 +365,38 @@ const responsiveStyles = createAtomicStyles({
365365
});
366366
```
367367

368+
For more complicated styles, values can even be entire style objects. This works especially well when combined with CSS Variables.
369+
370+
> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.
371+
372+
```ts
373+
import { createVar } from '@vanilla-extract/css';
374+
import { createAtomicStyles } from '@vanilla-extract/sprinkles';
375+
376+
const alpha = createVar();
377+
378+
const responsiveStyles = createAtomicStyles({
379+
properties: {
380+
background: {
381+
red: {
382+
vars: { [alpha]: '1' },
383+
background: `rgba(255, 0, 0, ${alpha})`
384+
},
385+
},
386+
backgroundOpacity: {
387+
1: { vars: { [alpha]: '1' } },
388+
0.1: { vars: { [alpha]: '0.1' } },
389+
},
390+
// etc.
391+
}
392+
});
393+
```
394+
368395
#### `shorthands`
369396

370397
Maps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.
371398

372-
**Note that shorthands are evaluated in the order that they were defined in your config.** Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.
399+
> 💡 Shorthands are evaluated in the order that they were defined in your config. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.
373400
374401
```ts
375402
import { createAtomicStyles } from '@vanilla-extract/sprinkles';

‎packages/sprinkles/src/index.ts‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { style, CSSProperties, composeStyles } from '@vanilla-extract/css';
1+
import {
2+
style,
3+
CSSProperties,
4+
composeStyles,
5+
StyleRule,
6+
} from '@vanilla-extract/css';
27
import { addRecipe } from '@vanilla-extract/css/recipe';
38

49
import {
@@ -20,7 +25,11 @@ type BaseConditions = { [conditionName: string]: Condition };
2025

2126
type AtomicProperties = {
2227
[Property in keyof CSSProperties]?:
23-
| Record<string, CSSProperties[Property]>
28+
| Record<
29+
string,
30+
| CSSProperties[Property]
31+
| Omit<StyleRule, 'selectors' | '@media' | '@supports'>
32+
>
2433
| ReadonlyArray<CSSProperties[Property]>;
2534
};
2635

@@ -220,7 +229,7 @@ export function createAtomicStyles(options: any): any {
220229

221230
const processValue = (
222231
valueName: keyof typeof property,
223-
value: string | number,
232+
value: string | number | StyleRule,
224233
) => {
225234
if ('conditions' in options) {
226235
styles[key].values[valueName] = {
@@ -233,9 +242,13 @@ export function createAtomicStyles(options: any): any {
233242
conditionName as keyof typeof options.conditions
234243
];
235244

236-
let styleValue = {
237-
[key]: value,
238-
} as any;
245+
let styleValue: any = {};
246+
247+
if (typeof value === 'object') {
248+
styleValue = value;
249+
} else {
250+
styleValue[key] = value;
251+
}
239252

240253
if (condition['@supports']) {
241254
styleValue = {

‎tests/E2E/__snapshots__/stylesheets.test.ts.snap‎

Lines changed: 87 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,144 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Stylesheet sprinkles - esbuild should create valid stylesheet 1`] = `
4-
".styles_display_flex_mobile__1j5zl920{display:flex}.styles_display_none_mobile__1j5zl924{display:none}.styles_display_block_mobile__1j5zl928{display:block}.styles_paddingTop_small_mobile__1j5zl92c{padding-top:10px}.styles_paddingTop_medium_mobile__1j5zl92g{padding-top:20px}body>.styles__1j5zl92l{background:red}@media screen and (min-width: 768px){.styles_display_flex_tablet__1j5zl921{display:flex}.styles_display_none_tablet__1j5zl925{display:none}.styles_display_block_tablet__1j5zl929{display:block}.styles_paddingTop_small_tablet__1j5zl92d{padding-top:10px}.styles_paddingTop_medium_tablet__1j5zl92h{padding-top:20px}}@media screen and (min-width: 1024px){.styles_display_flex_desktop__1j5zl922{display:flex}.styles_display_none_desktop__1j5zl926{display:none}.styles_display_block_desktop__1j5zl92a{display:block}.styles_paddingTop_small_desktop__1j5zl92e{padding-top:10px}.styles_paddingTop_medium_desktop__1j5zl92i{padding-top:20px}@supports not (display: grid){[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl923{display:flex}[data-dark-mode] .styles_display_none_darkDesktop__1j5zl927{display:none}[data-dark-mode] .styles_display_block_darkDesktop__1j5zl92b{display:block}[data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92f{padding-top:10px}[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92j{padding-top:20px}}}
4+
".styles_display_flex_mobile__1j5zl921{display:flex}.styles_display_none_mobile__1j5zl925{display:none}.styles_display_block_mobile__1j5zl929{display:block}.styles_paddingTop_small_mobile__1j5zl92d{padding-top:10px}.styles_paddingTop_medium_mobile__1j5zl92h{padding-top:20px}.styles_background_red_mobile__1j5zl92l{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_mobile__1j5zl92p{--_1j5zl920: 1}.styles_backgroundOpacity_0\\\\.1_mobile__1j5zl92t{--_1j5zl920: .1}.styles_backgroundOpacity_0\\\\.2_mobile__1j5zl92x{--_1j5zl920: .2}.styles_backgroundOpacity_0\\\\.3_mobile__1j5zl9211{--_1j5zl920: .3}body>.styles__1j5zl9216{background:red}@media screen and (min-width: 768px){.styles_display_flex_tablet__1j5zl922{display:flex}.styles_display_none_tablet__1j5zl926{display:none}.styles_display_block_tablet__1j5zl92a{display:block}.styles_paddingTop_small_tablet__1j5zl92e{padding-top:10px}.styles_paddingTop_medium_tablet__1j5zl92i{padding-top:20px}.styles_background_red_tablet__1j5zl92m{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_tablet__1j5zl92q{--_1j5zl920: 1}.styles_backgroundOpacity_0\\\\.1_tablet__1j5zl92u{--_1j5zl920: .1}.styles_backgroundOpacity_0\\\\.2_tablet__1j5zl92y{--_1j5zl920: .2}.styles_backgroundOpacity_0\\\\.3_tablet__1j5zl9212{--_1j5zl920: .3}}@media screen and (min-width: 1024px){.styles_display_flex_desktop__1j5zl923{display:flex}.styles_display_none_desktop__1j5zl927{display:none}.styles_display_block_desktop__1j5zl92b{display:block}.styles_paddingTop_small_desktop__1j5zl92f{padding-top:10px}.styles_paddingTop_medium_desktop__1j5zl92j{padding-top:20px}.styles_background_red_desktop__1j5zl92n{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_desktop__1j5zl92r{--_1j5zl920: 1}.styles_backgroundOpacity_0\\\\.1_desktop__1j5zl92v{--_1j5zl920: .1}.styles_backgroundOpacity_0\\\\.2_desktop__1j5zl92z{--_1j5zl920: .2}.styles_backgroundOpacity_0\\\\.3_desktop__1j5zl9213{--_1j5zl920: .3}@supports not (display: grid){[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl924{display:flex}[data-dark-mode] .styles_display_none_darkDesktop__1j5zl928{display:none}[data-dark-mode] .styles_display_block_darkDesktop__1j5zl92c{display:block}[data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92g{padding-top:10px}[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92k{padding-top:20px}[data-dark-mode] .styles_background_red_darkDesktop__1j5zl92o{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92s{--_1j5zl920: 1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.1_darkDesktop__1j5zl92w{--_1j5zl920: .1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.2_darkDesktop__1j5zl9210{--_1j5zl920: .2}[data-dark-mode] .styles_backgroundOpacity_0\\\\.3_darkDesktop__1j5zl9214{--_1j5zl920: .3}}}
55
"
66
`;
77

8-
exports[`Stylesheet sprinkles - vite should create valid stylesheet 1`] = `".styles_display_flex_mobile__1j5zl920{display:flex}.styles_display_none_mobile__1j5zl924{display:none}.styles_display_block_mobile__1j5zl928{display:block}.styles_paddingTop_small_mobile__1j5zl92c{padding-top:10px}.styles_paddingTop_medium_mobile__1j5zl92g{padding-top:20px}body>.styles__1j5zl92l{background:red}@media screen and (min-width:768px){.styles_display_flex_tablet__1j5zl921{display:flex}.styles_display_none_tablet__1j5zl925{display:none}.styles_display_block_tablet__1j5zl929{display:block}.styles_paddingTop_small_tablet__1j5zl92d{padding-top:10px}.styles_paddingTop_medium_tablet__1j5zl92h{padding-top:20px}}@media screen and (min-width:1024px){.styles_display_flex_desktop__1j5zl922{display:flex}.styles_display_none_desktop__1j5zl926{display:none}.styles_display_block_desktop__1j5zl92a{display:block}.styles_paddingTop_small_desktop__1j5zl92e{padding-top:10px}.styles_paddingTop_medium_desktop__1j5zl92i{padding-top:20px}@supports not (display:grid){[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl923{display:flex}[data-dark-mode] .styles_display_none_darkDesktop__1j5zl927{display:none}[data-dark-mode] .styles_display_block_darkDesktop__1j5zl92b{display:block}[data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92f{padding-top:10px}[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92j{padding-top:20px}}}"`;
8+
exports[`Stylesheet sprinkles - vite should create valid stylesheet 1`] = `".styles_display_flex_mobile__1j5zl921{display:flex}.styles_display_none_mobile__1j5zl925{display:none}.styles_display_block_mobile__1j5zl929{display:block}.styles_paddingTop_small_mobile__1j5zl92d{padding-top:10px}.styles_paddingTop_medium_mobile__1j5zl92h{padding-top:20px}.styles_background_red_mobile__1j5zl92l{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_mobile__1j5zl92p{--_1j5zl920:1}.styles_backgroundOpacity_0\\\\.1_mobile__1j5zl92t{--_1j5zl920:0.1}.styles_backgroundOpacity_0\\\\.2_mobile__1j5zl92x{--_1j5zl920:0.2}.styles_backgroundOpacity_0\\\\.3_mobile__1j5zl9211{--_1j5zl920:0.3}body>.styles__1j5zl9216{background:red}@media screen and (min-width:768px){.styles_display_flex_tablet__1j5zl922{display:flex}.styles_display_none_tablet__1j5zl926{display:none}.styles_display_block_tablet__1j5zl92a{display:block}.styles_paddingTop_small_tablet__1j5zl92e{padding-top:10px}.styles_paddingTop_medium_tablet__1j5zl92i{padding-top:20px}.styles_background_red_tablet__1j5zl92m{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_tablet__1j5zl92q{--_1j5zl920:1}.styles_backgroundOpacity_0\\\\.1_tablet__1j5zl92u{--_1j5zl920:0.1}.styles_backgroundOpacity_0\\\\.2_tablet__1j5zl92y{--_1j5zl920:0.2}.styles_backgroundOpacity_0\\\\.3_tablet__1j5zl9212{--_1j5zl920:0.3}}@media screen and (min-width:1024px){.styles_display_flex_desktop__1j5zl923{display:flex}.styles_display_none_desktop__1j5zl927{display:none}.styles_display_block_desktop__1j5zl92b{display:block}.styles_paddingTop_small_desktop__1j5zl92f{padding-top:10px}.styles_paddingTop_medium_desktop__1j5zl92j{padding-top:20px}.styles_background_red_desktop__1j5zl92n{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_desktop__1j5zl92r{--_1j5zl920:1}.styles_backgroundOpacity_0\\\\.1_desktop__1j5zl92v{--_1j5zl920:0.1}.styles_backgroundOpacity_0\\\\.2_desktop__1j5zl92z{--_1j5zl920:0.2}.styles_backgroundOpacity_0\\\\.3_desktop__1j5zl9213{--_1j5zl920:0.3}@supports not (display:grid){[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl924{display:flex}[data-dark-mode] .styles_display_none_darkDesktop__1j5zl928{display:none}[data-dark-mode] .styles_display_block_darkDesktop__1j5zl92c{display:block}[data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92g{padding-top:10px}[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92k{padding-top:20px}[data-dark-mode] .styles_background_red_darkDesktop__1j5zl92o{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92s{--_1j5zl920:1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.1_darkDesktop__1j5zl92w{--_1j5zl920:0.1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.2_darkDesktop__1j5zl9210{--_1j5zl920:0.2}[data-dark-mode] .styles_backgroundOpacity_0\\\\.3_darkDesktop__1j5zl9214{--_1j5zl920:0.3}}}"`;
99

1010
exports[`Stylesheet sprinkles - webpack should create valid stylesheet 1`] = `
11-
".styles_display_flex_mobile__3nw5tz0 {
11+
".styles_display_flex_mobile__3nw5tz1 {
1212
display: flex;
1313
}
14-
.styles_display_none_mobile__3nw5tz4 {
14+
.styles_display_none_mobile__3nw5tz5 {
1515
display: none;
1616
}
17-
.styles_display_block_mobile__3nw5tz8 {
17+
.styles_display_block_mobile__3nw5tz9 {
1818
display: block;
1919
}
20-
.styles_paddingTop_small_mobile__3nw5tzc {
20+
.styles_paddingTop_small_mobile__3nw5tzd {
2121
padding-top: 10px;
2222
}
23-
.styles_paddingTop_medium_mobile__3nw5tzg {
23+
.styles_paddingTop_medium_mobile__3nw5tzh {
2424
padding-top: 20px;
2525
}
26-
body > .styles__3nw5tzl {
26+
.styles_background_red_mobile__3nw5tzl {
27+
--alpha__3nw5tz0: 1;
28+
background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
29+
}
30+
.styles_backgroundOpacity_1_mobile__3nw5tzp {
31+
--alpha__3nw5tz0: 1;
32+
}
33+
.styles_backgroundOpacity_0\\\\.1_mobile__3nw5tzt {
34+
--alpha__3nw5tz0: 0.1;
35+
}
36+
.styles_backgroundOpacity_0\\\\.2_mobile__3nw5tzx {
37+
--alpha__3nw5tz0: 0.2;
38+
}
39+
.styles_backgroundOpacity_0\\\\.3_mobile__3nw5tz11 {
40+
--alpha__3nw5tz0: 0.3;
41+
}
42+
body > .styles__3nw5tz16 {
2743
background: red;
2844
}
2945
@media screen and (min-width: 768px) {
30-
.styles_display_flex_tablet__3nw5tz1 {
46+
.styles_display_flex_tablet__3nw5tz2 {
3147
display: flex;
3248
}
33-
.styles_display_none_tablet__3nw5tz5 {
49+
.styles_display_none_tablet__3nw5tz6 {
3450
display: none;
3551
}
36-
.styles_display_block_tablet__3nw5tz9 {
52+
.styles_display_block_tablet__3nw5tza {
3753
display: block;
3854
}
39-
.styles_paddingTop_small_tablet__3nw5tzd {
55+
.styles_paddingTop_small_tablet__3nw5tze {
4056
padding-top: 10px;
4157
}
42-
.styles_paddingTop_medium_tablet__3nw5tzh {
58+
.styles_paddingTop_medium_tablet__3nw5tzi {
4359
padding-top: 20px;
4460
}
61+
.styles_background_red_tablet__3nw5tzm {
62+
--alpha__3nw5tz0: 1;
63+
background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
64+
}
65+
.styles_backgroundOpacity_1_tablet__3nw5tzq {
66+
--alpha__3nw5tz0: 1;
67+
}
68+
.styles_backgroundOpacity_0\\\\.1_tablet__3nw5tzu {
69+
--alpha__3nw5tz0: 0.1;
70+
}
71+
.styles_backgroundOpacity_0\\\\.2_tablet__3nw5tzy {
72+
--alpha__3nw5tz0: 0.2;
73+
}
74+
.styles_backgroundOpacity_0\\\\.3_tablet__3nw5tz12 {
75+
--alpha__3nw5tz0: 0.3;
76+
}
4577
}
4678
@media screen and (min-width: 1024px) {
47-
.styles_display_flex_desktop__3nw5tz2 {
79+
.styles_display_flex_desktop__3nw5tz3 {
4880
display: flex;
4981
}
50-
.styles_display_none_desktop__3nw5tz6 {
82+
.styles_display_none_desktop__3nw5tz7 {
5183
display: none;
5284
}
53-
.styles_display_block_desktop__3nw5tza {
85+
.styles_display_block_desktop__3nw5tzb {
5486
display: block;
5587
}
56-
.styles_paddingTop_small_desktop__3nw5tze {
88+
.styles_paddingTop_small_desktop__3nw5tzf {
5789
padding-top: 10px;
5890
}
59-
.styles_paddingTop_medium_desktop__3nw5tzi {
91+
.styles_paddingTop_medium_desktop__3nw5tzj {
6092
padding-top: 20px;
6193
}
94+
.styles_background_red_desktop__3nw5tzn {
95+
--alpha__3nw5tz0: 1;
96+
background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
97+
}
98+
.styles_backgroundOpacity_1_desktop__3nw5tzr {
99+
--alpha__3nw5tz0: 1;
100+
}
101+
.styles_backgroundOpacity_0\\\\.1_desktop__3nw5tzv {
102+
--alpha__3nw5tz0: 0.1;
103+
}
104+
.styles_backgroundOpacity_0\\\\.2_desktop__3nw5tzz {
105+
--alpha__3nw5tz0: 0.2;
106+
}
107+
.styles_backgroundOpacity_0\\\\.3_desktop__3nw5tz13 {
108+
--alpha__3nw5tz0: 0.3;
109+
}
62110
@supports not (display: grid) {
63-
[data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz3 {
111+
[data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz4 {
64112
display: flex;
65113
}
66-
[data-dark-mode] .styles_display_none_darkDesktop__3nw5tz7 {
114+
[data-dark-mode] .styles_display_none_darkDesktop__3nw5tz8 {
67115
display: none;
68116
}
69-
[data-dark-mode] .styles_display_block_darkDesktop__3nw5tzb {
117+
[data-dark-mode] .styles_display_block_darkDesktop__3nw5tzc {
70118
display: block;
71119
}
72-
[data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzf {
120+
[data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzg {
73121
padding-top: 10px;
74122
}
75-
[data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzj {
123+
[data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzk {
76124
padding-top: 20px;
77125
}
126+
[data-dark-mode] .styles_background_red_darkDesktop__3nw5tzo {
127+
--alpha__3nw5tz0: 1;
128+
background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
129+
}
130+
[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__3nw5tzs {
131+
--alpha__3nw5tz0: 1;
132+
}
133+
[data-dark-mode] .styles_backgroundOpacity_0\\\\.1_darkDesktop__3nw5tzw {
134+
--alpha__3nw5tz0: 0.1;
135+
}
136+
[data-dark-mode] .styles_backgroundOpacity_0\\\\.2_darkDesktop__3nw5tz10 {
137+
--alpha__3nw5tz0: 0.2;
138+
}
139+
[data-dark-mode] .styles_backgroundOpacity_0\\\\.3_darkDesktop__3nw5tz14 {
140+
--alpha__3nw5tz0: 0.3;
141+
}
78142
}
79143
}
80144

0 commit comments

Comments
 (0)