@nordcode/ui 1.0.3 → 1.0.4

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 (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/out/bundle.css +25 -40
  3. package/out/bundle_configless.css +5 -5
  4. package/out/colors.css +0 -5
  5. package/out/complete.css +178 -168
  6. package/out/complete_configless.css +158 -133
  7. package/package.json +2 -1
  8. package/src/styles/components/alerts.css +20 -0
  9. package/src/styles/components/bundle.css +4 -3
  10. package/src/styles/components/buttons.css +4 -0
  11. package/src/styles/config/config.css +253 -696
  12. package/src/styles/theme/colors.css +0 -13
  13. package/src/styles/utils/base.css +5 -0
package/src/styles/config/config.css CHANGED
@@ -56,72 +56,22 @@
56
56
  --border-radius-round: 1e5px;
57
57
 
58
58
  /* SHADOWS */
59
- /* Light Theme */
60
59
 
61
- --shadow-inset-light: inset 0.24px 0.8px 1.6px 0px oklch(80% 0.03 265 / 30%), inset 0.31px
62
- 1.04px 2.08px -4px oklch(80% 0.03 265 / 25.5%);
60
+ --shadow-inset: inset 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), inset 0.9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
63
61
 
64
- --shadow-nearest-light: 0.24px 0.8px 1.6px 0px oklch(80% 0.03 265 / 30%), 0.31px 1.04px
65
- 2.08px -4px oklch(80% 0.03 265 / 25.5%);
66
- --shadow-near-light:
67
- 0.24px 0.8px 1.6px 0px oklch(80% 0.03 265 / 30%),
68
- 0.31px 1.04px 2.08px -1.33px oklch(80% 0.03 265 / 25.5%),
69
- 0.41px 1.35px 2.7px -2.67px oklch(80% 0.03 265 / 21.67%),
70
- 0.53px 1.76px 3.52px -4px oklch(80% 0.03 265 / 18.42%);
71
- --shadow-medium-light:
72
- 0.24px 0.8px 1.6px 0px oklch(80% 0.03 265 / 30%),
73
- 0.31px 1.04px 2.08px -0.8px oklch(80% 0.03 265 / 25.5%),
74
- 0.41px 1.35px 2.7px -1.6px oklch(80% 0.03 265 / 21.67%),
75
- 0.53px 1.76px 3.52px -2.4px oklch(80% 0.03 265 / 18.42%),
76
- 0.68px 2.28px 4.56px -3.2px oklch(80% 0.03 265 / 15.66%),
77
- 0.89px 2.97px 5.94px -4px oklch(80% 0.03 265 / 13.31%);
78
- --shadow-far-light:
79
- 0.24px 0.8px 1.6px 0px oklch(80% 0.03 265 / 30%),
80
- 0.31px 1.04px 2.08px -0.5px oklch(80% 0.03 265 / 25.5%),
81
- 0.41px 1.35px 2.7px -1px oklch(80% 0.03 265 / 21.67%),
82
- 0.53px 1.76px 3.52px -1.5px oklch(80% 0.03 265 / 18.42%),
83
- 0.68px 2.28px 4.56px -2px oklch(80% 0.03 265 / 15.66%),
84
- 0.89px 2.97px 5.94px -2.5px oklch(80% 0.03 265 / 13.31%),
85
- 1.16px 3.86px 7.72px -3px oklch(80% 0.03 265 / 11.31%),
86
- 1.51px 5.02px 10.04px -3.5px oklch(80% 0.03 265 / 9.62%),
87
- 1.96px 6.53px 13.06px -4px oklch(80% 0.03 265 / 8.17%);
62
+ --shadow-nearest: 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
63
+ --shadow-near: 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -1.33px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -2.67px color-mix(in oklch, var(--shadow-color), transparent 68.78999999999999%), 8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
64
+ --shadow-medium: 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -0.8px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1.6px color-mix(in oklch, var(--shadow-color), transparent 68.78999999999999%), 8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -3.2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
65
+ --shadow-far: 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -0.5px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1px color-mix(in oklch, var(--shadow-color), transparent 68.78999999999999%), 8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -2.5px color-mix(in oklch, var(--shadow-color), transparent 84.61%), 218.7px 729px 1458px -3px color-mix(in oklch, var(--shadow-color), transparent 87.85%), 656.1px 2187px 4374px -3.5px color-mix(in oklch, var(--shadow-color), transparent 90.4%), 1968.3px 6561px 13122px -4px color-mix(in oklch, var(--shadow-color), transparent 92.41%);
66
+ /* Light Theme */
88
67
 
89
68
  --shadow-color-light: oklch(80% 0.03 265);
90
69
  --shadow-color-light-lch: 80% 0.03 265;
91
70
 
92
71
  /* Dark Theme */
93
72
 
94
- --shadow-inset-dark:
95
- inset inset 0.24px 0.8px 1.6px 0px oklch(30% 0.05 265 / 30%),
96
- inset 0.31px 1.04px 2.08px -4px oklch(30% 0.05 265 / 25.5%);
97
-
98
- --shadow-nearest-dark: 0.24px 0.8px 1.6px 0px oklch(30% 0.05 265 / 30%), 0.31px 1.04px
99
- 2.08px -4px oklch(30% 0.05 265 / 25.5%);
100
- --shadow-near-dark:
101
- 0.24px 0.8px 1.6px 0px oklch(30% 0.05 265 / 30%),
102
- 0.31px 1.04px 2.08px -1.33px oklch(30% 0.05 265 / 25.5%),
103
- 0.41px 1.35px 2.7px -2.67px oklch(30% 0.05 265 / 21.67%),
104
- 0.53px 1.76px 3.52px -4px oklch(30% 0.05 265 / 18.42%);
105
- --shadow-medium-dark:
106
- 0.24px 0.8px 1.6px 0px oklch(30% 0.05 265 / 30%),
107
- 0.31px 1.04px 2.08px -0.8px oklch(30% 0.05 265 / 25.5%),
108
- 0.41px 1.35px 2.7px -1.6px oklch(30% 0.05 265 / 21.67%),
109
- 0.53px 1.76px 3.52px -2.4px oklch(30% 0.05 265 / 18.42%),
110
- 0.68px 2.28px 4.56px -3.2px oklch(30% 0.05 265 / 15.66%),
111
- 0.89px 2.97px 5.94px -4px oklch(30% 0.05 265 / 13.31%);
112
- --shadow-far-dark:
113
- 0.24px 0.8px 1.6px 0px oklch(30% 0.05 265 / 30%),
114
- 0.31px 1.04px 2.08px -0.5px oklch(30% 0.05 265 / 25.5%),
115
- 0.41px 1.35px 2.7px -1px oklch(30% 0.05 265 / 21.67%),
116
- 0.53px 1.76px 3.52px -1.5px oklch(30% 0.05 265 / 18.42%),
117
- 0.68px 2.28px 4.56px -2px oklch(30% 0.05 265 / 15.66%),
118
- 0.89px 2.97px 5.94px -2.5px oklch(30% 0.05 265 / 13.31%),
119
- 1.16px 3.86px 7.72px -3px oklch(30% 0.05 265 / 11.31%),
120
- 1.51px 5.02px 10.04px -3.5px oklch(30% 0.05 265 / 9.62%),
121
- 1.96px 6.53px 13.06px -4px oklch(30% 0.05 265 / 8.17%);
122
-
123
- --shadow-color-dark: oklch(30% 0.05 265);
124
- --shadow-color-dark-lch: 30% 0.05 265;
73
+ --shadow-color-dark: oklch(24% 0.05 265);
74
+ --shadow-color-dark-lch: 24% 0.05 265;
125
75
 
126
76
  --lightness-max: 0.99;
127
77
  --lightness-min: 0.03;
@@ -131,698 +81,305 @@
131
81
  --transparency-weaker: 0.8;
132
82
  --c-brand-primary: 0.3;
133
83
  --h-brand-primary: 265;
134
- --color-brand-primary-neutral-chroma: calc(
135
- var(--c-brand-primary) *
136
- var(--neutral-chroma-scale)
137
- );
138
- --color-brand-primary-white: oklch(
139
- var(--lightness-max) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary)
140
- );
141
- --color-brand-primary-black: oklch(
142
- var(--lightness-min) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary)
143
- );
84
+ --color-brand-primary-neutral-chroma: calc(var(--c-brand-primary) * var(--neutral-chroma-scale));
85
+ --color-brand-primary-white: oklch(var(--lightness-max) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
86
+ --color-brand-primary-black: oklch(var(--lightness-min) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
144
87
  --l-brand-primary-light: 0.56;
145
- --color-brand-primary-base-light: oklch(
146
- var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary)
147
- );
148
- --color-brand-primary-emphasis-light: color-mix(
149
- in oklch,
150
- oklch(
151
- var(--l-brand-primary-light) calc(1.25 * var(--c-brand-primary))
152
- var(--h-brand-primary)
153
- ),
154
- var(--color-brand-primary-black) 15%
155
- );
156
- --color-brand-primary-surface-light: color-mix(
157
- in oklch,
158
- oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary)),
159
- var(--color-brand-primary-white) 96%
160
- );
161
- --color-brand-primary-contrast-lightness-light: calc(
162
- var(--lightness-max) -
163
- (
164
- var(--lightness-diff) *
165
- min(
166
- max(
167
- (var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) *
168
- 1000000,
169
- 0
170
- ),
171
- 1
172
- )
173
- )
174
- );
175
- --color-brand-primary-contrast-light: oklch(
176
- var(--color-brand-primary-contrast-lightness-light)
177
- var(--color-brand-primary-neutral-chroma) var(--h-brand-primary)
178
- );
179
- --color-brand-primary-hover-light: color-mix(
180
- in oklch,
181
- var(--color-brand-primary-base-light) calc(var(--transparency-weaker) * 10%),
182
- transparent
183
- );
88
+ --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
89
+ --color-brand-primary-emphasis-light: color-mix(in oklch,
90
+ oklch(var(--l-brand-primary-light) calc(1.25 * var(--c-brand-primary)) var(--h-brand-primary)),
91
+ var(--color-brand-primary-black) 15%);
92
+ --color-brand-primary-surface-light: color-mix(in oklch,
93
+ oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary)),
94
+ var(--color-brand-primary-white) 96%);
95
+ --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000,
96
+ 0),
97
+ 1)));
98
+ --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
99
+ --color-brand-primary-hover-light: color-mix(in oklch,
100
+ var(--color-brand-primary-base-light) calc(var(--transparency-weaker) * 10%),
101
+ transparent);
184
102
  --l-brand-primary-dark: 0.75;
185
- --color-brand-primary-base-dark: oklch(
186
- var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary)
187
- );
188
- --color-brand-primary-emphasis-dark: color-mix(
189
- in oklch,
190
- oklch(
191
- var(--l-brand-primary-dark) calc(1.25 * var(--c-brand-primary))
192
- var(--h-brand-primary)
193
- ),
194
- var(--color-brand-primary-white) 15%
195
- );
196
- --color-brand-primary-surface-dark: color-mix(
197
- in oklch,
198
- oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary)),
199
- var(--color-brand-primary-black) 65%
200
- );
201
- --color-brand-primary-contrast-lightness-dark: calc(
202
- var(--lightness-max) -
203
- (
204
- var(--lightness-diff) *
205
- min(
206
- max(
207
- (var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) *
208
- 1000000,
209
- 0
210
- ),
211
- 1
212
- )
213
- )
214
- );
215
- --color-brand-primary-contrast-dark: oklch(
216
- var(--color-brand-primary-contrast-lightness-dark)
217
- var(--color-brand-primary-neutral-chroma) var(--h-brand-primary)
218
- );
219
- --color-brand-primary-hover-dark: color-mix(
220
- in oklch,
221
- var(--color-brand-primary-base-dark) calc(var(--transparency-weaker) * 10%),
222
- transparent
223
- );
103
+ --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
104
+ --color-brand-primary-emphasis-dark: color-mix(in oklch,
105
+ oklch(var(--l-brand-primary-dark) calc(1.25 * var(--c-brand-primary)) var(--h-brand-primary)),
106
+ var(--color-brand-primary-white) 15%);
107
+ --color-brand-primary-surface-dark: color-mix(in oklch,
108
+ oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary)),
109
+ var(--color-brand-primary-black) 65%);
110
+ --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000,
111
+ 0),
112
+ 1)));
113
+ --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
114
+ --color-brand-primary-hover-dark: color-mix(in oklch,
115
+ var(--color-brand-primary-base-dark) calc(var(--transparency-weaker) * 10%),
116
+ transparent);
224
117
  --c-brand-secondary: 0.4;
225
118
  --h-brand-secondary: 215;
226
- --color-brand-secondary-neutral-chroma: calc(
227
- var(--c-brand-secondary) *
228
- var(--neutral-chroma-scale)
229
- );
230
- --color-brand-secondary-white: oklch(
231
- var(--lightness-max) var(--color-brand-secondary-neutral-chroma)
232
- var(--h-brand-secondary)
233
- );
234
- --color-brand-secondary-black: oklch(
235
- var(--lightness-min) var(--color-brand-secondary-neutral-chroma)
236
- var(--h-brand-secondary)
237
- );
119
+ --color-brand-secondary-neutral-chroma: calc(var(--c-brand-secondary) * var(--neutral-chroma-scale));
120
+ --color-brand-secondary-white: oklch(var(--lightness-max) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
121
+ --color-brand-secondary-black: oklch(var(--lightness-min) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
238
122
  --l-brand-secondary-light: 0.51;
239
- --color-brand-secondary-base-light: oklch(
240
- var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary)
241
- );
242
- --color-brand-secondary-emphasis-light: color-mix(
243
- in oklch,
244
- oklch(
245
- var(--l-brand-secondary-light) calc(1.25 * var(--c-brand-secondary))
246
- var(--h-brand-secondary)
247
- ),
248
- var(--color-brand-secondary-black) 15%
249
- );
250
- --color-brand-secondary-surface-light: color-mix(
251
- in oklch,
252
- oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary)),
253
- var(--color-brand-secondary-white) 96%
254
- );
255
- --color-brand-secondary-contrast-lightness-light: calc(
256
- var(--lightness-max) -
257
- (
258
- var(--lightness-diff) *
259
- min(
260
- max(
261
- (var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) *
262
- 1000000,
263
- 0
264
- ),
265
- 1
266
- )
267
- )
268
- );
269
- --color-brand-secondary-contrast-light: oklch(
270
- var(--color-brand-secondary-contrast-lightness-light)
271
- var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary)
272
- );
273
- --color-brand-secondary-hover-light: color-mix(
274
- in oklch,
275
- var(--color-brand-secondary-base-light) calc(var(--transparency-weaker) * 10%),
276
- transparent
277
- );
123
+ --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
124
+ --color-brand-secondary-emphasis-light: color-mix(in oklch,
125
+ oklch(var(--l-brand-secondary-light) calc(1.25 * var(--c-brand-secondary)) var(--h-brand-secondary)),
126
+ var(--color-brand-secondary-black) 15%);
127
+ --color-brand-secondary-surface-light: color-mix(in oklch,
128
+ oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary)),
129
+ var(--color-brand-secondary-white) 96%);
130
+ --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000,
131
+ 0),
132
+ 1)));
133
+ --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
134
+ --color-brand-secondary-hover-light: color-mix(in oklch,
135
+ var(--color-brand-secondary-base-light) calc(var(--transparency-weaker) * 10%),
136
+ transparent);
278
137
  --l-brand-secondary-dark: 0.76;
279
- --color-brand-secondary-base-dark: oklch(
280
- var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary)
281
- );
282
- --color-brand-secondary-emphasis-dark: color-mix(
283
- in oklch,
284
- oklch(
285
- var(--l-brand-secondary-dark) calc(1.25 * var(--c-brand-secondary))
286
- var(--h-brand-secondary)
287
- ),
288
- var(--color-brand-secondary-white) 15%
289
- );
290
- --color-brand-secondary-surface-dark: color-mix(
291
- in oklch,
292
- oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary)),
293
- var(--color-brand-secondary-black) 65%
294
- );
295
- --color-brand-secondary-contrast-lightness-dark: calc(
296
- var(--lightness-max) -
297
- (
298
- var(--lightness-diff) *
299
- min(
300
- max(
301
- (var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) *
302
- 1000000,
303
- 0
304
- ),
305
- 1
306
- )
307
- )
308
- );
309
- --color-brand-secondary-contrast-dark: oklch(
310
- var(--color-brand-secondary-contrast-lightness-dark)
311
- var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary)
312
- );
313
- --color-brand-secondary-hover-dark: color-mix(
314
- in oklch,
315
- var(--color-brand-secondary-base-dark) calc(var(--transparency-weaker) * 10%),
316
- transparent
317
- );
138
+ --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
139
+ --color-brand-secondary-emphasis-dark: color-mix(in oklch,
140
+ oklch(var(--l-brand-secondary-dark) calc(1.25 * var(--c-brand-secondary)) var(--h-brand-secondary)),
141
+ var(--color-brand-secondary-white) 15%);
142
+ --color-brand-secondary-surface-dark: color-mix(in oklch,
143
+ oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary)),
144
+ var(--color-brand-secondary-black) 65%);
145
+ --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000,
146
+ 0),
147
+ 1)));
148
+ --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
149
+ --color-brand-secondary-hover-dark: color-mix(in oklch,
150
+ var(--color-brand-secondary-base-dark) calc(var(--transparency-weaker) * 10%),
151
+ transparent);
318
152
  --l-text-light: 0.28;
319
153
  --c-text-light: 0.03;
320
154
  --h-text-light: var(--h-brand-primary);
321
155
  --scale-text-light: 0.1;
322
156
  --color-text-neutral-chroma-light: calc(var(--c-text-light) * var(--neutral-chroma-scale));
323
- --color-text-contrast-light: oklch(
324
- var(--lightness-max) var(--color-text-neutral-chroma-light) var(--h-text-light)
325
- );
157
+ --color-text-contrast-light: oklch(var(--lightness-max) var(--color-text-neutral-chroma-light) var(--h-text-light));
326
158
  --color-text-base-light: oklch(var(--l-text-light) var(--c-text-light) var(--h-text-light));
327
- --color-text-muted-light: color-mix(
328
- in oklch,
329
- var(--color-text-base-light),
330
- var(--color-text-contrast-light) calc(var(--scale-text-light) * 100%)
331
- );
332
- --color-text-subtle-light: color-mix(
333
- in oklch,
334
- var(--color-text-base-light),
335
- var(--color-text-contrast-light) calc(var(--scale-text-light) * 2 * 100%)
336
- );
159
+ --color-text-muted-light: color-mix(in oklch,
160
+ var(--color-text-base-light),
161
+ var(--color-text-contrast-light) calc(var(--scale-text-light) * 100%));
162
+ --color-text-subtle-light: color-mix(in oklch,
163
+ var(--color-text-base-light),
164
+ var(--color-text-contrast-light) calc(var(--scale-text-light) * 2 * 100%));
337
165
  --color-text-on-emphasis-light: var(--color-text-contrast-light);
338
- --color-text-hover-light: color-mix(
339
- in oklch,
340
- var(--color-text-base-light) calc(var(--transparency-weaker) * 10%),
341
- transparent
342
- );
166
+ --color-text-hover-light: color-mix(in oklch,
167
+ var(--color-text-base-light) calc(var(--transparency-weaker) * 10%),
168
+ transparent);
343
169
  --l-text-dark: 0.88;
344
170
  --c-text-dark: 0.05;
345
171
  --h-text-dark: var(--h-brand-primary);
346
172
  --color-text-neutral-chroma-dark: calc(var(--c-text-dark) * var(--neutral-chroma-scale));
347
- --color-text-contrast-dark: oklch(
348
- var(--lightness-min) var(--color-text-neutral-chroma-dark) var(--h-text-dark)
349
- );
173
+ --color-text-contrast-dark: oklch(var(--lightness-min) var(--color-text-neutral-chroma-dark) var(--h-text-dark));
350
174
  --color-text-base-dark: oklch(var(--l-text-dark) var(--c-text-dark) var(--h-text-dark));
351
- --color-text-muted-dark: color-mix(
352
- in oklch,
353
- var(--color-text-base-dark),
354
- var(--color-text-contrast-dark) 12%
355
- );
356
- --color-text-subtle-dark: color-mix(
357
- in oklch,
358
- var(--color-text-base-dark),
359
- var(--color-text-contrast-dark) 24%
360
- );
175
+ --color-text-muted-dark: color-mix(in oklch,
176
+ var(--color-text-base-dark),
177
+ var(--color-text-contrast-dark) 12%);
178
+ --color-text-subtle-dark: color-mix(in oklch,
179
+ var(--color-text-base-dark),
180
+ var(--color-text-contrast-dark) 24%);
361
181
  --color-text-on-emphasis-dark: var(--color-text-contrast-dark);
362
- --color-text-hover-dark: color-mix(
363
- in oklch,
364
- var(--color-text-base-dark) calc(var(--transparency-weaker) * 10%),
365
- transparent
366
- );
182
+ --color-text-hover-dark: color-mix(in oklch,
183
+ var(--color-text-base-dark) calc(var(--transparency-weaker) * 10%),
184
+ transparent);
367
185
  --l-surface-light: 0.99;
368
186
  --c-surface-light: 0.03;
369
187
  --h-surface-light: var(--h-brand-primary);
370
188
  --scale-surface-light: 0.02;
371
- --color-surface-neutral-chroma-light: calc(
372
- var(--c-surface-light) *
373
- var(--neutral-chroma-scale)
374
- );
375
- --color-surface-contrast-light: oklch(
376
- var(--lightness-min) var(--color-surface-neutral-chroma-light) var(--h-surface-light)
377
- );
378
- --color-surface-base-light: oklch(
379
- var(--l-surface-light) var(--c-surface-light) var(--h-surface-light)
380
- );
381
- --color-surface-muted-light: color-mix(
382
- in oklch,
383
- var(--color-surface-base-light),
384
- var(--color-surface-contrast-light) calc(var(--scale-surface-light) * 100%)
385
- );
386
- --color-surface-subtle-light: color-mix(
387
- in oklch,
388
- var(--color-surface-base-light),
389
- var(--color-surface-contrast-light) calc(var(--scale-surface-light) * 2 * 100%)
390
- );
189
+ --color-surface-neutral-chroma-light: calc(var(--c-surface-light) * var(--neutral-chroma-scale));
190
+ --color-surface-contrast-light: oklch(var(--lightness-min) var(--color-surface-neutral-chroma-light) var(--h-surface-light));
191
+ --color-surface-base-light: oklch(var(--l-surface-light) var(--c-surface-light) var(--h-surface-light));
192
+ --color-surface-muted-light: color-mix(in oklch,
193
+ var(--color-surface-base-light),
194
+ var(--color-surface-contrast-light) calc(var(--scale-surface-light) * 100%));
195
+ --color-surface-subtle-light: color-mix(in oklch,
196
+ var(--color-surface-base-light),
197
+ var(--color-surface-contrast-light) calc(var(--scale-surface-light) * 2 * 100%));
391
198
  --color-surface-emphasis-light: var(--color-surface-contrast-light);
392
199
  --l-surface-dark: 0.15;
393
200
  --c-surface-dark: 0.05;
394
201
  --h-surface-dark: var(--h-brand-primary);
395
- --color-surface-neutral-chroma-dark: calc(
396
- var(--c-surface-dark) *
397
- var(--neutral-chroma-scale)
398
- );
399
- --color-surface-contrast-dark: oklch(
400
- var(--lightness-max) var(--color-surface-neutral-chroma-dark) var(--h-surface-dark)
401
- );
402
- --color-surface-base-dark: oklch(
403
- var(--l-surface-dark) var(--c-surface-dark) var(--h-surface-dark)
404
- );
405
- --color-surface-muted-dark: color-mix(
406
- in oklch,
407
- var(--color-surface-base-dark),
408
- var(--color-surface-contrast-dark) 6%
409
- );
410
- --color-surface-subtle-dark: color-mix(
411
- in oklch,
412
- var(--color-surface-base-dark),
413
- var(--color-surface-contrast-dark) 12%
414
- );
202
+ --color-surface-neutral-chroma-dark: calc(var(--c-surface-dark) * var(--neutral-chroma-scale));
203
+ --color-surface-contrast-dark: oklch(var(--lightness-max) var(--color-surface-neutral-chroma-dark) var(--h-surface-dark));
204
+ --color-surface-base-dark: oklch(var(--l-surface-dark) var(--c-surface-dark) var(--h-surface-dark));
205
+ --color-surface-muted-dark: color-mix(in oklch,
206
+ var(--color-surface-base-dark),
207
+ var(--color-surface-contrast-dark) 6%);
208
+ --color-surface-subtle-dark: color-mix(in oklch,
209
+ var(--color-surface-base-dark),
210
+ var(--color-surface-contrast-dark) 12%);
415
211
  --color-surface-emphasis-dark: var(--color-surface-contrast-dark);
416
212
  --l-border-light: 0.87;
417
213
  --c-border-light: 0.03;
418
214
  --h-border-light: var(--h-brand-primary);
419
215
  --scale-border-light: 0.1;
420
- --color-border-neutral-chroma-light: calc(
421
- var(--c-border-light) *
422
- var(--neutral-chroma-scale)
423
- );
424
- --color-border-contrast-light: oklch(
425
- var(--lightness-max) var(--color-border-neutral-chroma-light) var(--h-border-light)
426
- );
427
- --color-border-base-light: oklch(
428
- var(--l-border-light) var(--c-border-light) var(--h-border-light)
429
- );
430
- --color-border-muted-light: color-mix(
431
- in oklch,
432
- var(--color-border-base-light),
433
- var(--color-border-contrast-light) calc(var(--scale-border-light) * 100%)
434
- );
435
- --color-border-subtle-light: color-mix(
436
- in oklch,
437
- var(--color-border-base-light),
438
- var(--color-border-contrast-light) calc(var(--scale-border-light) * 2 * 100%)
439
- );
216
+ --color-border-neutral-chroma-light: calc(var(--c-border-light) * var(--neutral-chroma-scale));
217
+ --color-border-contrast-light: oklch(var(--lightness-max) var(--color-border-neutral-chroma-light) var(--h-border-light));
218
+ --color-border-base-light: oklch(var(--l-border-light) var(--c-border-light) var(--h-border-light));
219
+ --color-border-muted-light: color-mix(in oklch,
220
+ var(--color-border-base-light),
221
+ var(--color-border-contrast-light) calc(var(--scale-border-light) * 100%));
222
+ --color-border-subtle-light: color-mix(in oklch,
223
+ var(--color-border-base-light),
224
+ var(--color-border-contrast-light) calc(var(--scale-border-light) * 2 * 100%));
440
225
  --color-border-on-emphasis-light: var(--color-border-contrast-light);
441
- --color-border-hover-light: color-mix(
442
- in oklch,
443
- var(--color-border-base-light) calc(var(--transparency-weaker) * 10%),
444
- transparent
445
- );
226
+ --color-border-hover-light: color-mix(in oklch,
227
+ var(--color-border-base-light) calc(var(--transparency-weaker) * 10%),
228
+ transparent);
446
229
  --l-border-dark: 0.3;
447
230
  --c-border-dark: 0.05;
448
231
  --h-border-dark: var(--h-brand-primary);
449
232
  --color-border-neutral-chroma-dark: calc(var(--c-border-dark) * var(--neutral-chroma-scale));
450
- --color-border-contrast-dark: oklch(
451
- var(--lightness-min) var(--color-border-neutral-chroma-dark) var(--h-border-dark)
452
- );
453
- --color-border-base-dark: oklch(
454
- var(--l-border-dark) var(--c-border-dark) var(--h-border-dark)
455
- );
456
- --color-border-muted-dark: color-mix(
457
- in oklch,
458
- var(--color-border-base-dark),
459
- var(--color-border-contrast-dark) 12%
460
- );
461
- --color-border-subtle-dark: color-mix(
462
- in oklch,
463
- var(--color-border-base-dark),
464
- var(--color-border-contrast-dark) 24%
465
- );
233
+ --color-border-contrast-dark: oklch(var(--lightness-min) var(--color-border-neutral-chroma-dark) var(--h-border-dark));
234
+ --color-border-base-dark: oklch(var(--l-border-dark) var(--c-border-dark) var(--h-border-dark));
235
+ --color-border-muted-dark: color-mix(in oklch,
236
+ var(--color-border-base-dark),
237
+ var(--color-border-contrast-dark) 12%);
238
+ --color-border-subtle-dark: color-mix(in oklch,
239
+ var(--color-border-base-dark),
240
+ var(--color-border-contrast-dark) 24%);
466
241
  --color-border-on-emphasis-dark: var(--color-border-contrast-dark);
467
- --color-border-hover-dark: color-mix(
468
- in oklch,
469
- var(--color-border-base-dark) calc(var(--transparency-weaker) * 10%),
470
- transparent
471
- );
242
+ --color-border-hover-dark: color-mix(in oklch,
243
+ var(--color-border-base-dark) calc(var(--transparency-weaker) * 10%),
244
+ transparent);
472
245
  --c-status-success: 0.3;
473
246
  --h-status-success: 142;
474
- --color-status-success-neutral-chroma: calc(
475
- var(--c-status-success) *
476
- var(--neutral-chroma-scale)
477
- );
478
- --color-status-success-white: oklch(
479
- var(--lightness-max) var(--color-status-success-neutral-chroma) var(--h-status-success)
480
- );
481
- --color-status-success-black: oklch(
482
- var(--lightness-min) var(--color-status-success-neutral-chroma) var(--h-status-success)
483
- );
247
+ --color-status-success-neutral-chroma: calc(var(--c-status-success) * var(--neutral-chroma-scale));
248
+ --color-status-success-white: oklch(var(--lightness-max) var(--color-status-success-neutral-chroma) var(--h-status-success));
249
+ --color-status-success-black: oklch(var(--lightness-min) var(--color-status-success-neutral-chroma) var(--h-status-success));
484
250
  --l-status-success-light: 0.56;
485
- --color-status-success-base-light: oklch(
486
- var(--l-status-success-light) var(--c-status-success) var(--h-status-success)
487
- );
488
- --color-status-success-emphasis-light: color-mix(
489
- in oklch,
490
- oklch(
491
- var(--l-status-success-light) calc(1.25 * var(--c-status-success))
492
- var(--h-status-success)
493
- ),
494
- var(--color-status-success-black) 15%
495
- );
496
- --color-status-success-surface-light: color-mix(
497
- in oklch,
498
- oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success)),
499
- var(--color-status-success-white) 96%
500
- );
501
- --color-status-success-contrast-lightness-light: calc(
502
- var(--lightness-max) -
503
- (
504
- var(--lightness-diff) *
505
- min(
506
- max(
507
- (var(--l-status-success-light) - var(--lightness-contrast-cutoff)) *
508
- 1000000,
509
- 0
510
- ),
511
- 1
512
- )
513
- )
514
- );
515
- --color-status-success-contrast-light: oklch(
516
- var(--color-status-success-contrast-lightness-light)
517
- var(--color-status-success-neutral-chroma) var(--h-status-success)
518
- );
519
- --color-status-success-hover-light: color-mix(
520
- in oklch,
521
- var(--color-status-success-base-light) calc(var(--transparency-weaker) * 10%),
522
- transparent
523
- );
251
+ --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
252
+ --color-status-success-emphasis-light: color-mix(in oklch,
253
+ oklch(var(--l-status-success-light) calc(1.25 * var(--c-status-success)) var(--h-status-success)),
254
+ var(--color-status-success-black) 15%);
255
+ --color-status-success-surface-light: color-mix(in oklch,
256
+ oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success)),
257
+ var(--color-status-success-white) 96%);
258
+ --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000,
259
+ 0),
260
+ 1)));
261
+ --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) var(--color-status-success-neutral-chroma) var(--h-status-success));
262
+ --color-status-success-hover-light: color-mix(in oklch,
263
+ var(--color-status-success-base-light) calc(var(--transparency-weaker) * 10%),
264
+ transparent);
524
265
  --l-status-success-dark: 0.75;
525
- --color-status-success-base-dark: oklch(
526
- var(--l-status-success-dark) var(--c-status-success) var(--h-status-success)
527
- );
528
- --color-status-success-emphasis-dark: color-mix(
529
- in oklch,
530
- oklch(
531
- var(--l-status-success-dark) calc(1.25 * var(--c-status-success))
532
- var(--h-status-success)
533
- ),
534
- var(--color-status-success-white) 15%
535
- );
536
- --color-status-success-surface-dark: color-mix(
537
- in oklch,
538
- oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success)),
539
- var(--color-status-success-black) 65%
540
- );
541
- --color-status-success-contrast-lightness-dark: calc(
542
- var(--lightness-max) -
543
- (
544
- var(--lightness-diff) *
545
- min(
546
- max(
547
- (var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) *
548
- 1000000,
549
- 0
550
- ),
551
- 1
552
- )
553
- )
554
- );
555
- --color-status-success-contrast-dark: oklch(
556
- var(--color-status-success-contrast-lightness-dark)
557
- var(--color-status-success-neutral-chroma) var(--h-status-success)
558
- );
559
- --color-status-success-hover-dark: color-mix(
560
- in oklch,
561
- var(--color-status-success-base-dark) calc(var(--transparency-weaker) * 10%),
562
- transparent
563
- );
266
+ --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
267
+ --color-status-success-emphasis-dark: color-mix(in oklch,
268
+ oklch(var(--l-status-success-dark) calc(1.25 * var(--c-status-success)) var(--h-status-success)),
269
+ var(--color-status-success-white) 15%);
270
+ --color-status-success-surface-dark: color-mix(in oklch,
271
+ oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success)),
272
+ var(--color-status-success-black) 65%);
273
+ --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000,
274
+ 0),
275
+ 1)));
276
+ --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) var(--color-status-success-neutral-chroma) var(--h-status-success));
277
+ --color-status-success-hover-dark: color-mix(in oklch,
278
+ var(--color-status-success-base-dark) calc(var(--transparency-weaker) * 10%),
279
+ transparent);
564
280
  --c-status-warning: 0.3;
565
281
  --h-status-warning: 97;
566
- --color-status-warning-neutral-chroma: calc(
567
- var(--c-status-warning) *
568
- var(--neutral-chroma-scale)
569
- );
570
- --color-status-warning-white: oklch(
571
- var(--lightness-max) var(--color-status-warning-neutral-chroma) var(--h-status-warning)
572
- );
573
- --color-status-warning-black: oklch(
574
- var(--lightness-min) var(--color-status-warning-neutral-chroma) var(--h-status-warning)
575
- );
282
+ --color-status-warning-neutral-chroma: calc(var(--c-status-warning) * var(--neutral-chroma-scale));
283
+ --color-status-warning-white: oklch(var(--lightness-max) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
284
+ --color-status-warning-black: oklch(var(--lightness-min) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
576
285
  --l-status-warning-light: 0.56;
577
- --color-status-warning-base-light: oklch(
578
- var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning)
579
- );
580
- --color-status-warning-emphasis-light: color-mix(
581
- in oklch,
582
- oklch(
583
- var(--l-status-warning-light) calc(1.25 * var(--c-status-warning))
584
- var(--h-status-warning)
585
- ),
586
- var(--color-status-warning-black) 15%
587
- );
588
- --color-status-warning-surface-light: color-mix(
589
- in oklch,
590
- oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning)),
591
- var(--color-status-warning-white) 96%
592
- );
593
- --color-status-warning-contrast-lightness-light: calc(
594
- var(--lightness-max) -
595
- (
596
- var(--lightness-diff) *
597
- min(
598
- max(
599
- (var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) *
600
- 1000000,
601
- 0
602
- ),
603
- 1
604
- )
605
- )
606
- );
607
- --color-status-warning-contrast-light: oklch(
608
- var(--color-status-warning-contrast-lightness-light)
609
- var(--color-status-warning-neutral-chroma) var(--h-status-warning)
610
- );
611
- --color-status-warning-hover-light: color-mix(
612
- in oklch,
613
- var(--color-status-warning-base-light) calc(var(--transparency-weaker) * 10%),
614
- transparent
615
- );
286
+ --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
287
+ --color-status-warning-emphasis-light: color-mix(in oklch,
288
+ oklch(var(--l-status-warning-light) calc(1.25 * var(--c-status-warning)) var(--h-status-warning)),
289
+ var(--color-status-warning-black) 15%);
290
+ --color-status-warning-surface-light: color-mix(in oklch,
291
+ oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning)),
292
+ var(--color-status-warning-white) 96%);
293
+ --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000,
294
+ 0),
295
+ 1)));
296
+ --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
297
+ --color-status-warning-hover-light: color-mix(in oklch,
298
+ var(--color-status-warning-base-light) calc(var(--transparency-weaker) * 10%),
299
+ transparent);
616
300
  --l-status-warning-dark: 0.75;
617
- --color-status-warning-base-dark: oklch(
618
- var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning)
619
- );
620
- --color-status-warning-emphasis-dark: color-mix(
621
- in oklch,
622
- oklch(
623
- var(--l-status-warning-dark) calc(1.25 * var(--c-status-warning))
624
- var(--h-status-warning)
625
- ),
626
- var(--color-status-warning-white) 15%
627
- );
628
- --color-status-warning-surface-dark: color-mix(
629
- in oklch,
630
- oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning)),
631
- var(--color-status-warning-black) 65%
632
- );
633
- --color-status-warning-contrast-lightness-dark: calc(
634
- var(--lightness-max) -
635
- (
636
- var(--lightness-diff) *
637
- min(
638
- max(
639
- (var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) *
640
- 1000000,
641
- 0
642
- ),
643
- 1
644
- )
645
- )
646
- );
647
- --color-status-warning-contrast-dark: oklch(
648
- var(--color-status-warning-contrast-lightness-dark)
649
- var(--color-status-warning-neutral-chroma) var(--h-status-warning)
650
- );
651
- --color-status-warning-hover-dark: color-mix(
652
- in oklch,
653
- var(--color-status-warning-base-dark) calc(var(--transparency-weaker) * 10%),
654
- transparent
655
- );
301
+ --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
302
+ --color-status-warning-emphasis-dark: color-mix(in oklch,
303
+ oklch(var(--l-status-warning-dark) calc(1.25 * var(--c-status-warning)) var(--h-status-warning)),
304
+ var(--color-status-warning-white) 15%);
305
+ --color-status-warning-surface-dark: color-mix(in oklch,
306
+ oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning)),
307
+ var(--color-status-warning-black) 65%);
308
+ --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000,
309
+ 0),
310
+ 1)));
311
+ --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
312
+ --color-status-warning-hover-dark: color-mix(in oklch,
313
+ var(--color-status-warning-base-dark) calc(var(--transparency-weaker) * 10%),
314
+ transparent);
656
315
  --c-status-danger: 0.3;
657
316
  --h-status-danger: 32;
658
- --color-status-danger-neutral-chroma: calc(
659
- var(--c-status-danger) *
660
- var(--neutral-chroma-scale)
661
- );
662
- --color-status-danger-white: oklch(
663
- var(--lightness-max) var(--color-status-danger-neutral-chroma) var(--h-status-danger)
664
- );
665
- --color-status-danger-black: oklch(
666
- var(--lightness-min) var(--color-status-danger-neutral-chroma) var(--h-status-danger)
667
- );
317
+ --color-status-danger-neutral-chroma: calc(var(--c-status-danger) * var(--neutral-chroma-scale));
318
+ --color-status-danger-white: oklch(var(--lightness-max) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
319
+ --color-status-danger-black: oklch(var(--lightness-min) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
668
320
  --l-status-danger-light: 0.56;
669
- --color-status-danger-base-light: oklch(
670
- var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger)
671
- );
672
- --color-status-danger-emphasis-light: color-mix(
673
- in oklch,
674
- oklch(
675
- var(--l-status-danger-light) calc(1.25 * var(--c-status-danger))
676
- var(--h-status-danger)
677
- ),
678
- var(--color-status-danger-black) 15%
679
- );
680
- --color-status-danger-surface-light: color-mix(
681
- in oklch,
682
- oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger)),
683
- var(--color-status-danger-white) 96%
684
- );
685
- --color-status-danger-contrast-lightness-light: calc(
686
- var(--lightness-max) -
687
- (
688
- var(--lightness-diff) *
689
- min(
690
- max(
691
- (var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) *
692
- 1000000,
693
- 0
694
- ),
695
- 1
696
- )
697
- )
698
- );
699
- --color-status-danger-contrast-light: oklch(
700
- var(--color-status-danger-contrast-lightness-light)
701
- var(--color-status-danger-neutral-chroma) var(--h-status-danger)
702
- );
703
- --color-status-danger-hover-light: color-mix(
704
- in oklch,
705
- var(--color-status-danger-base-light) calc(var(--transparency-weaker) * 10%),
706
- transparent
707
- );
321
+ --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
322
+ --color-status-danger-emphasis-light: color-mix(in oklch,
323
+ oklch(var(--l-status-danger-light) calc(1.25 * var(--c-status-danger)) var(--h-status-danger)),
324
+ var(--color-status-danger-black) 15%);
325
+ --color-status-danger-surface-light: color-mix(in oklch,
326
+ oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger)),
327
+ var(--color-status-danger-white) 96%);
328
+ --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000,
329
+ 0),
330
+ 1)));
331
+ --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
332
+ --color-status-danger-hover-light: color-mix(in oklch,
333
+ var(--color-status-danger-base-light) calc(var(--transparency-weaker) * 10%),
334
+ transparent);
708
335
  --l-status-danger-dark: 0.75;
709
- --color-status-danger-base-dark: oklch(
710
- var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger)
711
- );
712
- --color-status-danger-emphasis-dark: color-mix(
713
- in oklch,
714
- oklch(
715
- var(--l-status-danger-dark) calc(1.25 * var(--c-status-danger))
716
- var(--h-status-danger)
717
- ),
718
- var(--color-status-danger-white) 15%
719
- );
720
- --color-status-danger-surface-dark: color-mix(
721
- in oklch,
722
- oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger)),
723
- var(--color-status-danger-black) 65%
724
- );
725
- --color-status-danger-contrast-lightness-dark: calc(
726
- var(--lightness-max) -
727
- (
728
- var(--lightness-diff) *
729
- min(
730
- max(
731
- (var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) *
732
- 1000000,
733
- 0
734
- ),
735
- 1
736
- )
737
- )
738
- );
739
- --color-status-danger-contrast-dark: oklch(
740
- var(--color-status-danger-contrast-lightness-dark)
741
- var(--color-status-danger-neutral-chroma) var(--h-status-danger)
742
- );
743
- --color-status-danger-hover-dark: color-mix(
744
- in oklch,
745
- var(--color-status-danger-base-dark) calc(var(--transparency-weaker) * 10%),
746
- transparent
747
- );
336
+ --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
337
+ --color-status-danger-emphasis-dark: color-mix(in oklch,
338
+ oklch(var(--l-status-danger-dark) calc(1.25 * var(--c-status-danger)) var(--h-status-danger)),
339
+ var(--color-status-danger-white) 15%);
340
+ --color-status-danger-surface-dark: color-mix(in oklch,
341
+ oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger)),
342
+ var(--color-status-danger-black) 65%);
343
+ --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000,
344
+ 0),
345
+ 1)));
346
+ --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
347
+ --color-status-danger-hover-dark: color-mix(in oklch,
348
+ var(--color-status-danger-base-dark) calc(var(--transparency-weaker) * 10%),
349
+ transparent);
748
350
  --c-status-info: 0.3;
749
351
  --h-status-info: 245;
750
352
  --color-status-info-neutral-chroma: calc(var(--c-status-info) * var(--neutral-chroma-scale));
751
- --color-status-info-white: oklch(
752
- var(--lightness-max) var(--color-status-info-neutral-chroma) var(--h-status-info)
753
- );
754
- --color-status-info-black: oklch(
755
- var(--lightness-min) var(--color-status-info-neutral-chroma) var(--h-status-info)
756
- );
353
+ --color-status-info-white: oklch(var(--lightness-max) var(--color-status-info-neutral-chroma) var(--h-status-info));
354
+ --color-status-info-black: oklch(var(--lightness-min) var(--color-status-info-neutral-chroma) var(--h-status-info));
757
355
  --l-status-info-light: 0.56;
758
- --color-status-info-base-light: oklch(
759
- var(--l-status-info-light) var(--c-status-info) var(--h-status-info)
760
- );
761
- --color-status-info-emphasis-light: color-mix(
762
- in oklch,
763
- oklch(var(--l-status-info-light) calc(1.25 * var(--c-status-info)) var(--h-status-info)),
764
- var(--color-status-info-black) 15%
765
- );
766
- --color-status-info-surface-light: color-mix(
767
- in oklch,
768
- oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info)),
769
- var(--color-status-info-white) 96%
770
- );
771
- --color-status-info-contrast-lightness-light: calc(
772
- var(--lightness-max) -
773
- (
774
- var(--lightness-diff) *
775
- min(
776
- max(
777
- (var(--l-status-info-light) - var(--lightness-contrast-cutoff)) *
778
- 1000000,
779
- 0
780
- ),
781
- 1
782
- )
783
- )
784
- );
785
- --color-status-info-contrast-light: oklch(
786
- var(--color-status-info-contrast-lightness-light)
787
- var(--color-status-info-neutral-chroma) var(--h-status-info)
788
- );
789
- --color-status-info-hover-light: color-mix(
790
- in oklch,
791
- var(--color-status-info-base-light) calc(var(--transparency-weaker) * 10%),
792
- transparent
793
- );
356
+ --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
357
+ --color-status-info-emphasis-light: color-mix(in oklch,
358
+ oklch(var(--l-status-info-light) calc(1.25 * var(--c-status-info)) var(--h-status-info)),
359
+ var(--color-status-info-black) 15%);
360
+ --color-status-info-surface-light: color-mix(in oklch,
361
+ oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info)),
362
+ var(--color-status-info-white) 96%);
363
+ --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000,
364
+ 0),
365
+ 1)));
366
+ --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) var(--color-status-info-neutral-chroma) var(--h-status-info));
367
+ --color-status-info-hover-light: color-mix(in oklch,
368
+ var(--color-status-info-base-light) calc(var(--transparency-weaker) * 10%),
369
+ transparent);
794
370
  --l-status-info-dark: 0.75;
795
- --color-status-info-base-dark: oklch(
796
- var(--l-status-info-dark) var(--c-status-info) var(--h-status-info)
797
- );
798
- --color-status-info-emphasis-dark: color-mix(
799
- in oklch,
800
- oklch(var(--l-status-info-dark) calc(1.25 * var(--c-status-info)) var(--h-status-info)),
801
- var(--color-status-info-white) 15%
802
- );
803
- --color-status-info-surface-dark: color-mix(
804
- in oklch,
805
- oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info)),
806
- var(--color-status-info-black) 65%
807
- );
808
- --color-status-info-contrast-lightness-dark: calc(
809
- var(--lightness-max) -
810
- (
811
- var(--lightness-diff) *
812
- min(
813
- max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0),
814
- 1
815
- )
816
- )
817
- );
818
- --color-status-info-contrast-dark: oklch(
819
- var(--color-status-info-contrast-lightness-dark) var(--color-status-info-neutral-chroma)
820
- var(--h-status-info)
821
- );
822
- --color-status-info-hover-dark: color-mix(
823
- in oklch,
824
- var(--color-status-info-base-dark) calc(var(--transparency-weaker) * 10%),
825
- transparent
826
- );
371
+ --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
372
+ --color-status-info-emphasis-dark: color-mix(in oklch,
373
+ oklch(var(--l-status-info-dark) calc(1.25 * var(--c-status-info)) var(--h-status-info)),
374
+ var(--color-status-info-white) 15%);
375
+ --color-status-info-surface-dark: color-mix(in oklch,
376
+ oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info)),
377
+ var(--color-status-info-black) 65%);
378
+ --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0),
379
+ 1)));
380
+ --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) var(--color-status-info-neutral-chroma) var(--h-status-info));
381
+ --color-status-info-hover-dark: color-mix(in oklch,
382
+ var(--color-status-info-base-dark) calc(var(--transparency-weaker) * 10%),
383
+ transparent);
827
384
  }
828
385
  }