@jrgermain/stylesheet 0.3.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/index.css +139 -302
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/components/accordion.css +10 -18
  7. package/src/styles/components/app.css +2 -10
  8. package/src/styles/components/field.css +5 -10
  9. package/src/styles/components/quote.css +1 -5
  10. package/src/styles/components/switch.css +3 -11
  11. package/src/styles/components/text.css +3 -4
  12. package/src/styles/shared/base-alert.css +1 -5
  13. package/src/styles/shared/base-dialog.css +2 -7
  14. package/src/styles/utils/variables.css +123 -241
  15. package/src/tokens.js +141 -0
package/dist/index.css CHANGED
@@ -35,126 +35,122 @@ img, picture, video, iframe {
35
35
  }
36
36
 
37
37
  :root, ::backdrop {
38
- --opacity-low: 20%;
39
- --opacity-medium: 40%;
40
- --opacity-high: 70%;
41
- --opacity-disabled: 65%;
42
- --color-brand-1: oklch(15% 55% 275deg);
43
- --color-brand-2: oklch(25% 52% 275deg);
44
- --color-brand-3: oklch(35% 52% 275deg);
45
- --color-brand-4: oklch(45% 55% 275deg);
46
- --color-brand-5: oklch(55% 52% 275deg);
47
- --color-brand-6: oklch(65% 50% 275deg);
48
- --color-brand-7: oklch(75% 45% 275deg);
49
- --color-brand-8: oklch(85% 42% 275deg);
50
- --color-brand-9: oklch(95% 36% 275deg);
51
- --color-brand-transparent: oklch(55% 52% 275deg / var(--opacity-medium));
52
- --color-brand-extra-transparent: oklch(55% 52% 275deg / var(--opacity-low));
53
- --color-red-1: oklch(15% 55% 30deg);
54
- --color-red-2: oklch(25% 52% 30deg);
55
- --color-red-3: oklch(35% 54% 30deg);
56
- --color-red-4: oklch(45% 50% 30deg);
57
- --color-red-5: oklch(55% 50% 30deg);
58
- --color-red-6: oklch(65% 50% 30deg);
59
- --color-red-7: oklch(75% 45% 30deg);
60
- --color-red-8: oklch(85% 45% 30deg);
61
- --color-red-9: oklch(95% 38% 30deg);
62
- --color-red-transparent: oklch(55% 50% 30deg / var(--opacity-medium));
63
- --color-red-extra-transparent: oklch(55% 50% 30deg / var(--opacity-low));
64
- --color-orange-1: oklch(15% 60% 55deg);
65
- --color-orange-2: oklch(25% 60% 55deg);
66
- --color-orange-3: oklch(35% 55% 55deg);
67
- --color-orange-4: oklch(45% 50% 55deg);
68
- --color-orange-5: oklch(55% 50% 55deg);
69
- --color-orange-6: oklch(65% 40% 55deg);
70
- --color-orange-7: oklch(75% 40% 55deg);
71
- --color-orange-8: oklch(85% 40% 55deg);
72
- --color-orange-9: oklch(95% 38% 55deg);
73
- --color-orange-transparent: oklch(55% 50% 55deg / var(--opacity-medium));
74
- --color-orange-extra-transparent: oklch(55% 50% 55deg / var(--opacity-low));
75
- --color-yellow-1: oklch(15% 55% 88deg);
76
- --color-yellow-2: oklch(25% 55% 88deg);
77
- --color-yellow-3: oklch(35% 55% 88deg);
78
- --color-yellow-4: oklch(45% 45% 88deg);
79
- --color-yellow-5: oklch(55% 45% 88deg);
80
- --color-yellow-6: oklch(65% 40% 88deg);
81
- --color-yellow-7: oklch(75% 36% 88deg);
82
- --color-yellow-8: oklch(85% 30% 88deg);
83
- --color-yellow-9: oklch(95% 28% 88deg);
84
- --color-yellow-transparent: oklch(55% 45% 88deg / var(--opacity-medium));
85
- --color-yellow-extra-transparent: oklch(55% 45% 88deg / var(--opacity-low));
86
- --color-green-1: oklch(15% 55% 133deg);
87
- --color-green-2: oklch(25% 50% 133deg);
88
- --color-green-3: oklch(35% 48% 133deg);
89
- --color-green-4: oklch(45% 46% 133deg);
90
- --color-green-5: oklch(55% 46% 133deg);
91
- --color-green-6: oklch(65% 46% 133deg);
92
- --color-green-7: oklch(75% 46% 133deg);
93
- --color-green-8: oklch(85% 40% 133deg);
94
- --color-green-9: oklch(95% 20% 133deg);
95
- --color-green-transparent: oklch(55% 46% 133deg / var(--opacity-medium));
96
- --color-green-extra-transparent: oklch(55% 46% 133deg / var(--opacity-low));
97
- --color-sky-1: oklch(15% 55% 195deg);
98
- --color-sky-2: oklch(25% 55% 195deg);
99
- --color-sky-3: oklch(35% 50% 195deg);
100
- --color-sky-4: oklch(45% 50% 195deg);
101
- --color-sky-5: oklch(55% 52% 195deg);
102
- --color-sky-6: oklch(65% 45% 195deg);
103
- --color-sky-7: oklch(75% 35% 195deg);
104
- --color-sky-8: oklch(85% 25% 195deg);
105
- --color-sky-9: oklch(95% 12% 195deg);
106
- --color-sky-transparent: oklch(55% 52% 195deg / var(--opacity-medium));
107
- --color-sky-extra-transparent: oklch(55% 52% 195deg / var(--opacity-low));
108
- --color-blue-1: oklch(15% 52% 260deg);
109
- --color-blue-2: oklch(25% 48% 260deg);
110
- --color-blue-3: oklch(35% 46% 260deg);
111
- --color-blue-4: oklch(45% 48% 260deg);
112
- --color-blue-5: oklch(55% 50% 260deg);
113
- --color-blue-6: oklch(65% 52% 260deg);
114
- --color-blue-7: oklch(75% 48% 260deg);
115
- --color-blue-8: oklch(85% 45% 260deg);
116
- --color-blue-9: oklch(95% 42% 260deg);
117
- --color-blue-transparent: oklch(55% 50% 260deg / var(--opacity-medium));
118
- --color-blue-extra-transparent: oklch(55% 50% 260deg / var(--opacity-low));
119
- --color-purple-1: oklch(15% 55% 310deg);
120
- --color-purple-2: oklch(25% 55% 310deg);
121
- --color-purple-3: oklch(35% 53% 310deg);
122
- --color-purple-4: oklch(45% 52% 310deg);
123
- --color-purple-5: oklch(55% 52% 310deg);
124
- --color-purple-6: oklch(65% 51% 310deg);
125
- --color-purple-7: oklch(75% 42% 310deg);
126
- --color-purple-8: oklch(85% 42% 310deg);
127
- --color-purple-9: oklch(95% 40% 310deg);
128
- --color-purple-transparent: oklch(55% 52% 310deg / var(--opacity-medium));
129
- --color-purple-extra-transparent: oklch(55% 52% 310deg / var(--opacity-low));
130
- --color-magenta-1: oklch(15% 55% 356deg);
131
- --color-magenta-2: oklch(25% 55% 356deg);
132
- --color-magenta-3: oklch(35% 54% 356deg);
133
- --color-magenta-4: oklch(45% 46% 356deg);
134
- --color-magenta-5: oklch(55% 50% 356deg);
135
- --color-magenta-6: oklch(65% 48% 356deg);
136
- --color-magenta-7: oklch(75% 42% 356deg);
137
- --color-magenta-8: oklch(85% 36% 356deg);
138
- --color-magenta-9: oklch(95% 34% 356deg);
139
- --color-magenta-transparent: oklch(55% 50% 356deg / var(--opacity-medium));
140
- --color-magenta-extra-transparent: oklch(55% 50% 356deg / var(--opacity-low));
141
- --color-gray-1: oklch(15% 2% 263deg);
142
- --color-gray-2: oklch(25% 2% 263deg);
143
- --color-gray-3: oklch(35% 2% 263deg);
144
- --color-gray-4: oklch(45% 2% 263deg);
145
- --color-gray-5: oklch(55% 2% 263deg);
146
- --color-gray-6: oklch(65% 2% 263deg);
147
- --color-gray-7: oklch(75% 2% 263deg);
148
- --color-gray-8: oklch(85% 2% 263deg);
149
- --color-gray-9: oklch(95% 2% 263deg);
150
- --color-gray-transparent: oklch(55% 2% 263deg / var(--opacity-medium));
151
- --color-gray-extra-transparent: oklch(55% 2% 263deg / var(--opacity-low));
152
- --color-body: oklch(98.5% 0.8% 263deg);
153
- --color-body-alt: white;
154
- --color-body-text: oklch(10% 2% 263deg);
155
- --color-body-text-alt: oklch(38% 2% 263deg);
156
- --color-shadow: oklch(40% 2% 263deg / 15%);
157
- --color-outline: oklch(89% 2% 263deg);
38
+ --color-brand-1: var(--lightningcss-light, #08003b) var(--lightningcss-dark, #e5edff);
39
+ --color-brand-2: var(--lightningcss-light, #190074) var(--lightningcss-dark, #bbc9ff);
40
+ --color-brand-3: var(--lightningcss-light, #290fa3) var(--lightningcss-dark, #93a4ff);
41
+ --color-brand-4: var(--lightningcss-light, #3c35cb) var(--lightningcss-dark, #6f7dff);
42
+ --color-brand-5: #545be7;
43
+ --color-brand-6: var(--lightningcss-light, #6f7dff) var(--lightningcss-dark, #3c35cb);
44
+ --color-brand-7: var(--lightningcss-light, #93a4ff) var(--lightningcss-dark, #290fa3);
45
+ --color-brand-8: var(--lightningcss-light, #bbc9ff) var(--lightningcss-dark, #190074);
46
+ --color-brand-9: var(--lightningcss-light, #e5edff) var(--lightningcss-dark, #08003b);
47
+ --color-brand-transparent: var(--lightningcss-light, #545be766) var(--lightningcss-dark, #545be780);
48
+ --color-brand-extra-transparent: var(--lightningcss-light, #545be733) var(--lightningcss-dark, #545be759);
49
+ --color-red-1: var(--lightningcss-light, #240000) var(--lightningcss-dark, #ffe3dc);
50
+ --color-red-2: var(--lightningcss-light, #4d0000) var(--lightningcss-dark, #ffb4a5);
51
+ --color-red-3: var(--lightningcss-light, #7a0000) var(--lightningcss-dark, #ff7c68);
52
+ --color-red-4: var(--lightningcss-light, #a90000) var(--lightningcss-dark, #f0503d);
53
+ --color-red-5: #cc2a1b;
54
+ --color-red-6: var(--lightningcss-light, #f0503d) var(--lightningcss-dark, #a90000);
55
+ --color-red-7: var(--lightningcss-light, #ff7c68) var(--lightningcss-dark, #7a0000);
56
+ --color-red-8: var(--lightningcss-light, #ffb4a5) var(--lightningcss-dark, #4d0000);
57
+ --color-red-9: var(--lightningcss-light, #ffe3dc) var(--lightningcss-dark, #240000);
58
+ --color-red-transparent: var(--lightningcss-light, #cc2a1b66) var(--lightningcss-dark, #cc2a1b80);
59
+ --color-red-extra-transparent: var(--lightningcss-light, #cc2a1b33) var(--lightningcss-dark, #cc2a1b59);
60
+ --color-orange-1: var(--lightningcss-light, #1c0300) var(--lightningcss-dark, #ffe6cc);
61
+ --color-orange-2: var(--lightningcss-light, #3e1200) var(--lightningcss-dark, #ffb87e);
62
+ --color-orange-3: var(--lightningcss-light, #632500) var(--lightningcss-dark, #f98f3a);
63
+ --color-orange-4: var(--lightningcss-light, #8b3a00) var(--lightningcss-dark, #d76f04);
64
+ --color-orange-5: #b45100;
65
+ --color-orange-6: var(--lightningcss-light, #d76f04) var(--lightningcss-dark, #8b3a00);
66
+ --color-orange-7: var(--lightningcss-light, #f98f3a) var(--lightningcss-dark, #632500);
67
+ --color-orange-8: var(--lightningcss-light, #ffb87e) var(--lightningcss-dark, #3e1200);
68
+ --color-orange-9: var(--lightningcss-light, #ffe6cc) var(--lightningcss-dark, #1c0300);
69
+ --color-orange-transparent: var(--lightningcss-light, #b4510066) var(--lightningcss-dark, #b4510080);
70
+ --color-orange-extra-transparent: var(--lightningcss-light, #b4510033) var(--lightningcss-dark, #b4510059);
71
+ --color-yellow-1: var(--lightningcss-light, #140900) var(--lightningcss-dark, #f8edc1);
72
+ --color-yellow-2: var(--lightningcss-light, #2f1e00) var(--lightningcss-dark, #efcb72);
73
+ --color-yellow-3: var(--lightningcss-light, #4e3700) var(--lightningcss-dark, #dfb22b);
74
+ --color-yellow-4: var(--lightningcss-light, #7a5700) var(--lightningcss-dark, #c89808);
75
+ --color-yellow-5: #a57c00;
76
+ --color-yellow-6: var(--lightningcss-light, #c89808) var(--lightningcss-dark, #7a5700);
77
+ --color-yellow-7: var(--lightningcss-light, #dfb22b) var(--lightningcss-dark, #4e3700);
78
+ --color-yellow-8: var(--lightningcss-light, #efcb72) var(--lightningcss-dark, #2f1e00);
79
+ --color-yellow-9: var(--lightningcss-light, #f8edc1) var(--lightningcss-dark, #140900);
80
+ --color-yellow-transparent: var(--lightningcss-light, #a57c0066) var(--lightningcss-dark, #a57c0080);
81
+ --color-yellow-extra-transparent: var(--lightningcss-light, #a57c0033) var(--lightningcss-dark, #a57c0059);
82
+ --color-green-1: var(--lightningcss-light, #011000) var(--lightningcss-dark, #dafbc4);
83
+ --color-green-2: var(--lightningcss-light, #0c2a00) var(--lightningcss-dark, #a4e472);
84
+ --color-green-3: var(--lightningcss-light, #1d4600) var(--lightningcss-dark, #7dc53a);
85
+ --color-green-4: var(--lightningcss-light, #2f6500) var(--lightningcss-dark, #5fa500);
86
+ --color-green-5: #438500;
87
+ --color-green-6: var(--lightningcss-light, #5fa500) var(--lightningcss-dark, #2f6500);
88
+ --color-green-7: var(--lightningcss-light, #7dc53a) var(--lightningcss-dark, #1d4600);
89
+ --color-green-8: var(--lightningcss-light, #a4e472) var(--lightningcss-dark, #0c2a00);
90
+ --color-green-9: var(--lightningcss-light, #dafbc4) var(--lightningcss-dark, #011000);
91
+ --color-green-transparent: var(--lightningcss-light, #43850066) var(--lightningcss-dark, #43850080);
92
+ --color-green-extra-transparent: var(--lightningcss-light, #43850033) var(--lightningcss-dark, #43850059);
93
+ --color-sky-1: var(--lightningcss-light, #001011) var(--lightningcss-dark, #caf9f8);
94
+ --color-sky-2: var(--lightningcss-light, #002a2b) var(--lightningcss-dark, #76e2e2);
95
+ --color-sky-3: var(--lightningcss-light, #004747) var(--lightningcss-dark, #00c8c9);
96
+ --color-sky-4: var(--lightningcss-light, #006566) var(--lightningcss-dark, #00a7a8);
97
+ --color-sky-5: #008586;
98
+ --color-sky-6: var(--lightningcss-light, #00a7a8) var(--lightningcss-dark, #006566);
99
+ --color-sky-7: var(--lightningcss-light, #00c8c9) var(--lightningcss-dark, #004747);
100
+ --color-sky-8: var(--lightningcss-light, #76e2e2) var(--lightningcss-dark, #002a2b);
101
+ --color-sky-9: var(--lightningcss-light, #caf9f8) var(--lightningcss-dark, #001011);
102
+ --color-sky-transparent: var(--lightningcss-light, #00858666) var(--lightningcss-dark, #00858680);
103
+ --color-sky-extra-transparent: var(--lightningcss-light, #00858633) var(--lightningcss-dark, #00858659);
104
+ --color-blue-1: var(--lightningcss-light, #00003e) var(--lightningcss-dark, #ddf0ff);
105
+ --color-blue-2: var(--lightningcss-light, #00007a) var(--lightningcss-dark, #a9cfff);
106
+ --color-blue-3: var(--lightningcss-light, #002b97) var(--lightningcss-dark, #74adff);
107
+ --color-blue-4: var(--lightningcss-light, #004abd) var(--lightningcss-dark, #3988ff);
108
+ --color-blue-5: #1c69e3;
109
+ --color-blue-6: var(--lightningcss-light, #3988ff) var(--lightningcss-dark, #004abd);
110
+ --color-blue-7: var(--lightningcss-light, #74adff) var(--lightningcss-dark, #002b97);
111
+ --color-blue-8: var(--lightningcss-light, #a9cfff) var(--lightningcss-dark, #00007a);
112
+ --color-blue-9: var(--lightningcss-light, #ddf0ff) var(--lightningcss-dark, #00003e);
113
+ --color-blue-transparent: var(--lightningcss-light, #1c69e366) var(--lightningcss-dark, #1c69e380);
114
+ --color-blue-extra-transparent: var(--lightningcss-light, #1c69e333) var(--lightningcss-dark, #1c69e359);
115
+ --color-purple-1: var(--lightningcss-light, #170029) var(--lightningcss-dark, #fbe4ff);
116
+ --color-purple-2: var(--lightningcss-light, #370054) var(--lightningcss-dark, #e8b6ff);
117
+ --color-purple-3: var(--lightningcss-light, #5a0085) var(--lightningcss-dark, #ce8dfc);
118
+ --color-purple-4: var(--lightningcss-light, #7819a8) var(--lightningcss-dark, #b562ea);
119
+ --color-purple-5: #9640ca;
120
+ --color-purple-6: var(--lightningcss-light, #b562ea) var(--lightningcss-dark, #7819a8);
121
+ --color-purple-7: var(--lightningcss-light, #ce8dfc) var(--lightningcss-dark, #5a0085);
122
+ --color-purple-8: var(--lightningcss-light, #e8b6ff) var(--lightningcss-dark, #370054);
123
+ --color-purple-9: var(--lightningcss-light, #fbe4ff) var(--lightningcss-dark, #170029);
124
+ --color-purple-transparent: var(--lightningcss-light, #9640ca66) var(--lightningcss-dark, #9640ca80);
125
+ --color-purple-extra-transparent: var(--lightningcss-light, #9640ca33) var(--lightningcss-dark, #9640ca59);
126
+ --color-magenta-1: var(--lightningcss-light, #21000c) var(--lightningcss-dark, #ffe1f0);
127
+ --color-magenta-2: var(--lightningcss-light, #480023) var(--lightningcss-dark, #ffadd0);
128
+ --color-magenta-3: var(--lightningcss-light, #73003d) var(--lightningcss-dark, #fe7cb1);
129
+ --color-magenta-4: var(--lightningcss-light, #9b0058) var(--lightningcss-dark, #e45193);
130
+ --color-magenta-5: #c32775;
131
+ --color-magenta-6: var(--lightningcss-light, #e45193) var(--lightningcss-dark, #9b0058);
132
+ --color-magenta-7: var(--lightningcss-light, #fe7cb1) var(--lightningcss-dark, #73003d);
133
+ --color-magenta-8: var(--lightningcss-light, #ffadd0) var(--lightningcss-dark, #480023);
134
+ --color-magenta-9: var(--lightningcss-light, #ffe1f0) var(--lightningcss-dark, #21000c);
135
+ --color-magenta-transparent: var(--lightningcss-light, #c3277566) var(--lightningcss-dark, #c3277580);
136
+ --color-magenta-extra-transparent: var(--lightningcss-light, #c3277533) var(--lightningcss-dark, #c3277559);
137
+ --color-gray-1: var(--lightningcss-light, #090b0f) var(--lightningcss-dark, #eceff4);
138
+ --color-gray-2: var(--lightningcss-light, #202226) var(--lightningcss-dark, #cbced3);
139
+ --color-gray-3: var(--lightningcss-light, #383b3f) var(--lightningcss-dark, #abaeb3);
140
+ --color-gray-4: var(--lightningcss-light, #53555a) var(--lightningcss-dark, #8d8f94);
141
+ --color-gray-5: #6f7276;
142
+ --color-gray-6: var(--lightningcss-light, #8d8f94) var(--lightningcss-dark, #53555a);
143
+ --color-gray-7: var(--lightningcss-light, #abaeb3) var(--lightningcss-dark, #383b3f);
144
+ --color-gray-8: var(--lightningcss-light, #cbced3) var(--lightningcss-dark, #202226);
145
+ --color-gray-9: var(--lightningcss-light, #eceff4) var(--lightningcss-dark, #090b0f);
146
+ --color-gray-transparent: var(--lightningcss-light, #6f727666) var(--lightningcss-dark, #6f727680);
147
+ --color-gray-extra-transparent: var(--lightningcss-light, #6f727633) var(--lightningcss-dark, #6f727659);
148
+ --color-body: var(--lightningcss-light, #f9fafc) var(--lightningcss-dark, #14161a);
149
+ --color-body-alt: var(--lightningcss-light, #fff) var(--lightningcss-dark, #010203);
150
+ --color-body-text: var(--lightningcss-light, #030305) var(--lightningcss-dark, #fff);
151
+ --color-body-text-alt: var(--lightningcss-light, #404247) var(--lightningcss-dark, #ccced0);
152
+ --color-shadow: var(--lightningcss-light, #45484c26) var(--lightningcss-dark, #00000166);
153
+ --color-outline: var(--lightningcss-light, #d8dbe0) var(--lightningcss-dark, #434549);
158
154
  --font-size-xs: clamp(.6944rem, .6855rem + .0446vw, .72rem);
159
155
  --font-size-s: clamp(.8331rem, .8099rem + .1163vw, .9rem);
160
156
  --font-size-m: clamp(1rem, .9565rem + .2174vw, 1.125rem);
@@ -169,7 +165,7 @@ img, picture, video, iframe {
169
165
  --font-weight-bold: 700;
170
166
  --font-weight-black: 900;
171
167
  --font-family-body: "Avenir Next", avenir, corbel, source-sans-pro, "DejaVu Sans", ui-sans-serif, sans-serif;
172
- --font-family-heading: seravek, "Gill Sans Nova", verdana, "DejaVu Sans", source-sans-pro, ui-sans-serif, sans-serif;
168
+ --font-family-heading: seravek, "Gill Sans Nova", cantarell, verdana, "DejaVu Sans", ui-sans-serif, sans-serif;
173
169
  --font-family-mono: ui-monospace, "Source Code Pro", ui-monospace, monospace;
174
170
  --space-3xs: clamp(4px, 3.6528px + .1087vw, 5px);
175
171
  --space-2xs: clamp(8px, 7.6528px + .1087vw, 9px);
@@ -198,101 +194,7 @@ img, picture, video, iframe {
198
194
  --border-m: 2px;
199
195
  --border-l: 5px;
200
196
  --border-xl: 8px;
201
- }
202
-
203
- @media (prefers-color-scheme: dark) {
204
- :is(:root, ::backdrop) {
205
- --color-brand-9: oklch(15% 55% 275deg);
206
- --color-brand-8: oklch(25% 52% 275deg);
207
- --color-brand-7: oklch(35% 52% 275deg);
208
- --color-brand-6: oklch(45% 55% 275deg);
209
- --color-brand-4: oklch(65% 50% 275deg);
210
- --color-brand-3: oklch(75% 45% 275deg);
211
- --color-brand-2: oklch(85% 42% 275deg);
212
- --color-brand-1: oklch(95% 36% 275deg);
213
- --color-red-9: oklch(15% 55% 30deg);
214
- --color-red-8: oklch(25% 52% 30deg);
215
- --color-red-7: oklch(35% 54% 30deg);
216
- --color-red-6: oklch(45% 50% 30deg);
217
- --color-red-4: oklch(65% 50% 30deg);
218
- --color-red-3: oklch(75% 45% 30deg);
219
- --color-red-2: oklch(85% 45% 30deg);
220
- --color-red-1: oklch(95% 38% 30deg);
221
- --color-orange-9: oklch(15% 60% 55deg);
222
- --color-orange-8: oklch(25% 60% 55deg);
223
- --color-orange-7: oklch(35% 55% 55deg);
224
- --color-orange-6: oklch(45% 50% 55deg);
225
- --color-orange-4: oklch(65% 40% 55deg);
226
- --color-orange-3: oklch(75% 40% 55deg);
227
- --color-orange-2: oklch(85% 40% 55deg);
228
- --color-orange-1: oklch(95% 38% 55deg);
229
- --color-yellow-9: oklch(15% 55% 88deg);
230
- --color-yellow-8: oklch(25% 55% 88deg);
231
- --color-yellow-7: oklch(35% 55% 88deg);
232
- --color-yellow-6: oklch(45% 45% 88deg);
233
- --color-yellow-4: oklch(65% 40% 88deg);
234
- --color-yellow-3: oklch(75% 36% 88deg);
235
- --color-yellow-2: oklch(85% 30% 88deg);
236
- --color-yellow-1: oklch(95% 28% 88deg);
237
- --color-green-9: oklch(15% 55% 133deg);
238
- --color-green-8: oklch(25% 50% 133deg);
239
- --color-green-7: oklch(35% 48% 133deg);
240
- --color-green-6: oklch(45% 46% 133deg);
241
- --color-green-4: oklch(65% 46% 133deg);
242
- --color-green-3: oklch(75% 46% 133deg);
243
- --color-green-2: oklch(85% 40% 133deg);
244
- --color-green-1: oklch(95% 20% 133deg);
245
- --color-sky-9: oklch(15% 55% 195deg);
246
- --color-sky-8: oklch(25% 55% 195deg);
247
- --color-sky-7: oklch(35% 50% 195deg);
248
- --color-sky-6: oklch(45% 50% 195deg);
249
- --color-sky-4: oklch(65% 45% 195deg);
250
- --color-sky-3: oklch(75% 35% 195deg);
251
- --color-sky-2: oklch(85% 25% 195deg);
252
- --color-sky-1: oklch(95% 12% 195deg);
253
- --color-blue-9: oklch(15% 52% 260deg);
254
- --color-blue-8: oklch(25% 48% 260deg);
255
- --color-blue-7: oklch(35% 46% 260deg);
256
- --color-blue-6: oklch(45% 48% 260deg);
257
- --color-blue-4: oklch(65% 52% 260deg);
258
- --color-blue-3: oklch(75% 48% 260deg);
259
- --color-blue-2: oklch(85% 45% 260deg);
260
- --color-blue-1: oklch(95% 42% 260deg);
261
- --color-purple-9: oklch(15% 55% 310deg);
262
- --color-purple-8: oklch(25% 55% 310deg);
263
- --color-purple-7: oklch(35% 53% 310deg);
264
- --color-purple-6: oklch(45% 52% 310deg);
265
- --color-purple-4: oklch(65% 51% 310deg);
266
- --color-purple-3: oklch(75% 42% 310deg);
267
- --color-purple-2: oklch(85% 42% 310deg);
268
- --color-purple-1: oklch(95% 40% 310deg);
269
- --color-magenta-9: oklch(15% 55% 356deg);
270
- --color-magenta-8: oklch(25% 55% 356deg);
271
- --color-magenta-7: oklch(35% 54% 356deg);
272
- --color-magenta-6: oklch(45% 46% 356deg);
273
- --color-magenta-4: oklch(65% 48% 356deg);
274
- --color-magenta-3: oklch(75% 42% 356deg);
275
- --color-magenta-2: oklch(85% 36% 356deg);
276
- --color-magenta-1: oklch(95% 34% 356deg);
277
- --color-gray-9: oklch(15% 2% 263deg);
278
- --color-gray-8: oklch(25% 2% 263deg);
279
- --color-gray-7: oklch(35% 2% 263deg);
280
- --color-gray-6: oklch(45% 2% 263deg);
281
- --color-gray-4: oklch(65% 2% 263deg);
282
- --color-gray-3: oklch(75% 2% 263deg);
283
- --color-gray-2: oklch(85% 2% 263deg);
284
- --color-gray-1: oklch(95% 2% 263deg);
285
- --color-body: oklch(20% 2% 263deg);
286
- --color-body-alt: oklch(8% 2% 263deg);
287
- --color-body-text: white;
288
- --color-body-text-alt: oklch(85% 1% 263deg);
289
- --color-shadow: oklch(5% 2% 263deg / 40%);
290
- --color-outline: oklch(39% 2% 263deg);
291
- --opacity-low: 35%;
292
- --opacity-medium: 50%;
293
- --opacity-high: 80%;
294
- --opacity-disabled: 50%;
295
- }
197
+ --opacity-disabled: var(--lightningcss-light, .65) var(--lightningcss-dark, .5);
296
198
  }
297
199
 
298
200
  .alert, .banner {
@@ -343,16 +245,10 @@ img, picture, video, iframe {
343
245
  z-index: 1;
344
246
  border-radius: var(--radius-full);
345
247
  border: 3px solid var(--alert-border-start-color);
346
- background-color: #fffe;
248
+ background-color: var(--lightningcss-light, #fffe) var(--lightningcss-dark, #000e);
347
249
  scale: .75;
348
250
  }
349
251
 
350
- @media (prefers-color-scheme: dark) {
351
- :is(.alert, .banner):after {
352
- background-color: #000e;
353
- }
354
- }
355
-
356
252
  :is(.alert, .banner).error {
357
253
  --alert-bg-color: var(--color-red-9);
358
254
  --alert-border-start-color: var(--color-red-5);
@@ -411,9 +307,9 @@ img, picture, video, iframe {
411
307
  --dialog-ending-opacity: 0;
412
308
  --dialog-ending-transform: translateY(-4px) scale(.97);
413
309
  --dialog-backdrop-starting-opacity: 0;
414
- --dialog-backdrop-open-opacity: .75;
310
+ --dialog-backdrop-open-opacity: var(--lightningcss-light, .75) var(--lightningcss-dark, .85);
415
311
  --dialog-backdrop-ending-opacity: 0;
416
- --dialog-backdrop-color: var(--color-gray-2);
312
+ --dialog-backdrop-color: var(--lightningcss-light, var(--color-gray-2)) var(--lightningcss-dark, var(--color-gray-8));
417
313
  }
418
314
 
419
315
  @media (prefers-reduced-motion) {
@@ -423,13 +319,6 @@ img, picture, video, iframe {
423
319
  }
424
320
  }
425
321
 
426
- @media (prefers-color-scheme: dark) {
427
- :is(.modal, .drawer, .modal::backdrop, .drawer::backdrop) {
428
- --dialog-backdrop-color: var(--color-gray-8);
429
- --dialog-backdrop-open-opacity: .85;
430
- }
431
- }
432
-
433
322
  .modal, .drawer {
434
323
  box-shadow: var(--shadow-xl);
435
324
  border: var(--border-s) solid var(--color-outline);
@@ -558,7 +447,6 @@ img, picture, video, iframe {
558
447
  }
559
448
 
560
449
  .accordion details[open] summary {
561
- color: var(--color-brand-3);
562
450
  border-block-end-color: var(--color-outline);
563
451
  margin-block-end: var(--space-xs);
564
452
  }
@@ -567,6 +455,10 @@ img, picture, video, iframe {
567
455
  rotate: none;
568
456
  }
569
457
 
458
+ .accordion details[open] summary:not(:active, .active, :hover, .hover) {
459
+ color: var(--color-brand-3);
460
+ }
461
+
570
462
  .accordion summary {
571
463
  font-family: var(--font-family-heading);
572
464
  font-size: var(--font-size-m);
@@ -595,11 +487,11 @@ img, picture, video, iframe {
595
487
  }
596
488
 
597
489
  .accordion summary:is(:hover, .hover) {
598
- color: var(--color-brand-4) !important;
490
+ color: var(--lightningcss-light, var(--color-brand-4)) var(--lightningcss-dark, var(--color-brand-2));
599
491
  }
600
492
 
601
493
  .accordion summary:is(:active, .active) {
602
- color: var(--color-brand-2) !important;
494
+ color: var(--lightningcss-light, var(--color-brand-2)) var(--lightningcss-dark, var(--color-brand-4));
603
495
  }
604
496
 
605
497
  .accordion summary::-webkit-details-marker {
@@ -607,7 +499,7 @@ img, picture, video, iframe {
607
499
  }
608
500
 
609
501
  .accordion summary:before {
610
- content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");
502
+ content: var(--lightningcss-light, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E")) var(--lightningcss-dark, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E"));
611
503
  width: 1em;
612
504
  height: 1em;
613
505
  margin: auto;
@@ -633,20 +525,6 @@ img, picture, video, iframe {
633
525
  }
634
526
  }
635
527
 
636
- @media (prefers-color-scheme: dark) {
637
- .accordion summary:is(:hover, .hover) {
638
- color: var(--color-brand-2) !important;
639
- }
640
-
641
- .accordion summary:is(:active, .active) {
642
- color: var(--color-brand-4) !important;
643
- }
644
-
645
- .accordion summary:before {
646
- content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");
647
- }
648
- }
649
-
650
528
  .accordion.subtle details {
651
529
  box-shadow: none;
652
530
  padding-inline: var(--space-2xs);
@@ -692,7 +570,7 @@ img, picture, video, iframe {
692
570
  .app-header {
693
571
  height: var(--app-header-height);
694
572
  width: 100%;
695
- color: var(--color-brand-3);
573
+ color: var(--lightningcss-light, var(--color-brand-3)) var(--lightningcss-dark, var(--color-brand-2));
696
574
  background-color: var(--color-body-alt);
697
575
  border-bottom: var(--border-l) solid var(--color-brand-transparent);
698
576
  box-shadow: var(--shadow-s);
@@ -701,12 +579,6 @@ img, picture, video, iframe {
701
579
  left: 0;
702
580
  }
703
581
 
704
- @media (prefers-color-scheme: dark) {
705
- .app-header {
706
- color: var(--color-brand-2);
707
- }
708
- }
709
-
710
582
  .app-header-content {
711
583
  width: 100%;
712
584
  height: 100%;
@@ -966,19 +838,13 @@ img, picture, video, iframe {
966
838
  -webkit-backdrop-filter: blur(24px) saturate(120%);
967
839
  backdrop-filter: blur(24px) saturate(120%);
968
840
  z-index: 9;
969
- background-color: #fffc;
841
+ background-color: var(--lightningcss-light, #fffc) var(--lightningcss-dark, #000a);
970
842
  border-right: 0;
971
843
  width: 100vw;
972
844
  position: fixed;
973
845
  left: 0;
974
846
  }
975
847
 
976
- @media (prefers-color-scheme: dark) {
977
- .app-sidebar {
978
- background-color: #000c;
979
- }
980
- }
981
-
982
848
  .app-sidebar:after {
983
849
  content: initial;
984
850
  }
@@ -1781,7 +1647,7 @@ img, picture, video, iframe {
1781
1647
  border: var(--border-s) solid var(--color-outline);
1782
1648
  padding: var(--field-padding);
1783
1649
  border-radius: var(--field-radius);
1784
- background-color: #fff;
1650
+ background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
1785
1651
  font-family: inherit;
1786
1652
  font-size: 1em;
1787
1653
  transition-property: color, box-shadow, border-color;
@@ -1789,12 +1655,6 @@ img, picture, video, iframe {
1789
1655
  transition-timing-function: ease;
1790
1656
  }
1791
1657
 
1792
- @media (prefers-color-scheme: dark) {
1793
- :is(.field input:not([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), .field select, .field textarea) {
1794
- background-color: #000;
1795
- }
1796
- }
1797
-
1798
1658
  :is(.field input:not([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), .field select, .field textarea):focus {
1799
1659
  border-color: var(--color-brand-5);
1800
1660
  box-shadow: 0 0 0 .1em var(--color-brand-5), 0 0 0 calc(.2em + var(--border-s)) var(--color-brand-transparent);
@@ -1853,21 +1713,15 @@ img, picture, video, iframe {
1853
1713
  }
1854
1714
 
1855
1715
  .field select {
1716
+ background-image: var(--lightningcss-light, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E")) var(--lightningcss-dark, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E"));
1856
1717
  cursor: pointer;
1857
1718
  appearance: none;
1858
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");
1859
1719
  background-position: right .25em center;
1860
1720
  background-repeat: no-repeat;
1861
1721
  background-size: auto 75%;
1862
1722
  padding-inline-end: calc(2 * var(--space-2xs) + 1em);
1863
1723
  }
1864
1724
 
1865
- @media (prefers-color-scheme: dark) {
1866
- .field select {
1867
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");
1868
- }
1869
- }
1870
-
1871
1725
  .field select:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
1872
1726
  background-position: .25em 50%;
1873
1727
  }
@@ -2420,7 +2274,7 @@ progress.progress {
2420
2274
  }
2421
2275
 
2422
2276
  .quote, .markdown-output blockquote {
2423
- color: var(--color-gray-4);
2277
+ color: var(--color-body-text-alt);
2424
2278
  border-inline-start: var(--border-l) solid var(--color-gray-transparent);
2425
2279
  padding: var(--space-3xs);
2426
2280
  line-height: 1.25;
@@ -2433,12 +2287,6 @@ progress.progress {
2433
2287
  position: relative;
2434
2288
  }
2435
2289
 
2436
- @media (prefers-color-scheme: dark) {
2437
- :is(.quote, .markdown-output blockquote) {
2438
- color: var(--color-gray-2);
2439
- }
2440
- }
2441
-
2442
2290
  :is(.quote, .markdown-output blockquote) footer {
2443
2291
  font-size: var(--font-size-s);
2444
2292
  font-style: initial;
@@ -2671,7 +2519,7 @@ input[type="checkbox"].switch, label.switch input[type="checkbox"] {
2671
2519
  print-color-adjust: exact;
2672
2520
  appearance: none;
2673
2521
  border-radius: var(--radius-full);
2674
- background-color: var(--color-gray-8);
2522
+ background-color: var(--lightningcss-light, var(--color-gray-8)) var(--lightningcss-dark, var(--color-gray-5));
2675
2523
  border: .1em solid var(--color-gray-7);
2676
2524
  cursor: pointer;
2677
2525
  flex: none;
@@ -2712,8 +2560,8 @@ input[type="checkbox"].switch, label.switch input[type="checkbox"] {
2712
2560
  }
2713
2561
 
2714
2562
  :is(input[type="checkbox"].switch, label.switch input[type="checkbox"]):checked {
2715
- background-color: var(--color-brand-6);
2716
- border-color: var(--color-brand-5);
2563
+ background-color: var(--lightningcss-light, var(--color-brand-6)) var(--lightningcss-dark, var(--color-brand-5));
2564
+ border-color: var(--lightningcss-light, var(--color-brand-5)) var(--lightningcss-dark, var(--color-brand-6));
2717
2565
  }
2718
2566
 
2719
2567
  :is(input[type="checkbox"].switch, label.switch input[type="checkbox"]):checked:after {
@@ -2728,16 +2576,6 @@ input[type="checkbox"].switch, label.switch input[type="checkbox"] {
2728
2576
  transform: translateX(-1.2em);
2729
2577
  }
2730
2578
 
2731
- @media (prefers-color-scheme: dark) {
2732
- :is(input[type="checkbox"].switch, label.switch input[type="checkbox"]) {
2733
- background-color: var(--color-gray-5);
2734
- }
2735
-
2736
- :is(input[type="checkbox"].switch, label.switch input[type="checkbox"]):checked {
2737
- background-color: var(--color-brand-5);
2738
- }
2739
- }
2740
-
2741
2579
  input[type="checkbox"].switch.small, label.switch.small input[type="checkbox"] {
2742
2580
  font-size: .8rem;
2743
2581
  }
@@ -2848,7 +2686,7 @@ table.table, .markdown-output table {
2848
2686
  -webkit-text-decoration-color: var(--color-gray-6);
2849
2687
  text-decoration-color: var(--color-gray-6);
2850
2688
  text-underline-offset: .1em;
2851
- display: inline-block;
2689
+ display: inline;
2852
2690
  }
2853
2691
 
2854
2692
  .bold, .markdown-output strong, .markdown-output b {
@@ -2896,10 +2734,9 @@ table.table, .markdown-output table {
2896
2734
  background-color: var(--color-gray-extra-transparent);
2897
2735
  color: var(--color-gray-1);
2898
2736
  border-radius: var(--radius-s);
2899
- margin: 0 .25ch;
2900
- padding: 0 .5ch;
2737
+ padding: .25ch .5ch;
2901
2738
  font-size: .9em;
2902
- display: inline-block;
2739
+ display: inline;
2903
2740
  }
2904
2741
 
2905
2742
  :is(.code, .markdown-output code).invert {