@nordcode/ui 1.0.12 → 1.1.0

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.
@@ -12,11 +12,11 @@
12
12
  --font-weight-active: 600;
13
13
  --font-weight-strong: 600;
14
14
 
15
- --line-height-large: 3.4ex;
16
- --line-height-base: 3ex;
17
- --line-height-small: 2.4ex;
15
+ --line-height-large: 1.75;
16
+ --line-height-base: 1.5;
17
+ --line-height-small: 1.2;
18
18
 
19
- --tracking-base: 0ch;
19
+ --tracking-base: normal;
20
20
  --tracking-tight: -0.04ch;
21
21
  --tracking-wide: 0.06ch;
22
22
 
@@ -57,12 +57,67 @@
57
57
 
58
58
  /* SHADOWS */
59
59
 
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%);
60
+ --shadow-inset: inset 0.3px 1px 2px 0px
61
+ color-mix(in oklch, var(--shadow-color), transparent 50%), inset 0.9px 3px 6px -4px
62
+ color-mix(in oklch, var(--shadow-color), transparent 60.5%);
61
63
 
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%);
64
+ --shadow-nearest: 0.3px 1px 2px 0px
65
+ color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -4px
66
+ color-mix(in oklch, var(--shadow-color), transparent 60.5%);
67
+ --shadow-near:
68
+ 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -1.33px color-mix(
69
+ in oklch,
70
+ var(--shadow-color),
71
+ transparent 60.5%
72
+ ), 2.7px 9px 18px -2.67px color-mix(
73
+ in oklch,
74
+ var(--shadow-color),
75
+ transparent 68.78999999999999%
76
+ ), 8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
77
+ --shadow-medium:
78
+ 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -0.8px color-mix(
79
+ in oklch,
80
+ var(--shadow-color),
81
+ transparent 60.5%
82
+ ), 2.7px 9px 18px -1.6px color-mix(
83
+ in oklch,
84
+ var(--shadow-color),
85
+ transparent 68.78999999999999%
86
+ ), 8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -3.2px color-mix(
87
+ in oklch,
88
+ var(--shadow-color),
89
+ transparent 80.52%
90
+ ), 72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
91
+ --shadow-far:
92
+ 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), 0.9px 3px 6px -0.5px color-mix(
93
+ in oklch,
94
+ var(--shadow-color),
95
+ transparent 60.5%
96
+ ), 2.7px 9px 18px -1px color-mix(
97
+ in oklch,
98
+ var(--shadow-color),
99
+ transparent 68.78999999999999%
100
+ ), 8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -2px color-mix(
101
+ in oklch,
102
+ var(--shadow-color),
103
+ transparent 80.52%
104
+ ), 72.9px 243px 486px -2.5px color-mix(
105
+ in oklch,
106
+ var(--shadow-color),
107
+ transparent 84.61%
108
+ ), 218.7px 729px 1458px -3px color-mix(
109
+ in oklch,
110
+ var(--shadow-color),
111
+ transparent 87.85%
112
+ ), 656.1px 2187px 4374px -3.5px color-mix(
113
+ in oklch,
114
+ var(--shadow-color),
115
+ transparent 90.4%
116
+ ), 1968.3px 6561px 13122px -4px color-mix(
117
+ in oklch,
118
+ var(--shadow-color),
119
+ transparent 92.41%
120
+ );
66
121
  /* Light Theme */
67
122
 
68
123
  --shadow-color-light: oklch(80% 0.03 265);
@@ -77,309 +132,569 @@
77
132
  --lightness-min: 0.03;
78
133
  --lightness-diff: calc(var(--lightness-max) - var(--lightness-min));
79
134
  --lightness-contrast-cutoff: calc(var(--lightness-min) + var(--lightness-diff) * 0.5 + 0.05);
80
- --neutral-chroma-scale: 0.25;
135
+ --neutral-chroma-scale: 0.95;
81
136
  --transparency-weaker: 0.8;
82
137
  --c-brand-primary: 0.3;
83
138
  --h-brand-primary: 265;
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));
87
139
  --l-brand-primary-light: 0.56;
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);
140
+ --color-brand-primary-base-light: oklch(
141
+ var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary)
142
+ );
143
+ --color-brand-primary-emphasis-light: oklch(
144
+ calc(var(--l-brand-primary-light) * 0.85) calc(var(--c-brand-primary) * 1.1)
145
+ var(--h-brand-primary)
146
+ );
147
+ --color-brand-primary-surface-light: oklch(
148
+ calc(var(--lightness-max) - 0.1 + var(--l-brand-primary-light) / 10)
149
+ calc(var(--c-brand-primary) * 0.25) var(--h-brand-primary)
150
+ );
151
+ --color-brand-primary-contrast-lightness-light: calc(
152
+ var(--lightness-max) -
153
+ (
154
+ var(--lightness-diff) *
155
+ min(
156
+ max(
157
+ (var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) *
158
+ 1000000,
159
+ 0
160
+ ),
161
+ 1
162
+ )
163
+ )
164
+ );
165
+ --color-brand-primary-contrast-light: oklch(
166
+ var(--color-brand-primary-contrast-lightness-light) calc(var(--c-brand-primary) * 0.25)
167
+ var(--h-brand-primary)
168
+ );
169
+ --color-brand-primary-hover-light: oklch(
170
+ var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary) /
171
+ calc(var(--transparency-weaker) / 10)
172
+ );
102
173
  --l-brand-primary-dark: 0.75;
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);
174
+ --color-brand-primary-base-dark: oklch(
175
+ var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary)
176
+ );
177
+ --color-brand-primary-emphasis-dark: oklch(
178
+ calc(var(--l-brand-primary-dark) * 1.25) calc(var(--c-brand-primary) * 1.1)
179
+ var(--h-brand-primary)
180
+ );
181
+ --color-brand-primary-surface-dark: oklch(
182
+ calc(var(--lightness-min) + var(--l-brand-primary-dark) / 3)
183
+ calc(var(--c-brand-primary) * 0.25) var(--h-brand-primary)
184
+ );
185
+ --color-brand-primary-contrast-lightness-dark: calc(
186
+ var(--lightness-max) -
187
+ (
188
+ var(--lightness-diff) *
189
+ min(
190
+ max(
191
+ (var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) *
192
+ 1000000,
193
+ 0
194
+ ),
195
+ 1
196
+ )
197
+ )
198
+ );
199
+ --color-brand-primary-contrast-dark: oklch(
200
+ var(--color-brand-primary-contrast-lightness-dark) calc(var(--c-brand-primary) * 0.25)
201
+ var(--h-brand-primary)
202
+ );
203
+ --color-brand-primary-hover-dark: oklch(
204
+ var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary) /
205
+ calc(var(--transparency-weaker) / 10)
206
+ );
117
207
  --c-brand-secondary: 0.4;
118
208
  --h-brand-secondary: 215;
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));
122
209
  --l-brand-secondary-light: 0.51;
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);
210
+ --color-brand-secondary-base-light: oklch(
211
+ var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary)
212
+ );
213
+ --color-brand-secondary-emphasis-light: oklch(
214
+ calc(var(--l-brand-secondary-light) * 0.85) calc(var(--c-brand-secondary) * 1.1)
215
+ var(--h-brand-secondary)
216
+ );
217
+ --color-brand-secondary-surface-light: oklch(
218
+ calc(var(--lightness-max) - 0.1 + var(--l-brand-secondary-light) / 10)
219
+ calc(var(--c-brand-secondary) * 0.25) var(--h-brand-secondary)
220
+ );
221
+ --color-brand-secondary-contrast-lightness-light: calc(
222
+ var(--lightness-max) -
223
+ (
224
+ var(--lightness-diff) *
225
+ min(
226
+ max(
227
+ (var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) *
228
+ 1000000,
229
+ 0
230
+ ),
231
+ 1
232
+ )
233
+ )
234
+ );
235
+ --color-brand-secondary-contrast-light: oklch(
236
+ var(--color-brand-secondary-contrast-lightness-light)
237
+ calc(var(--c-brand-secondary) * 0.25) var(--h-brand-secondary)
238
+ );
239
+ --color-brand-secondary-hover-light: oklch(
240
+ var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary) /
241
+ calc(var(--transparency-weaker) / 10)
242
+ );
137
243
  --l-brand-secondary-dark: 0.76;
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);
244
+ --color-brand-secondary-base-dark: oklch(
245
+ var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary)
246
+ );
247
+ --color-brand-secondary-emphasis-dark: oklch(
248
+ calc(var(--l-brand-secondary-dark) * 1.25) calc(var(--c-brand-secondary) * 1.1)
249
+ var(--h-brand-secondary)
250
+ );
251
+ --color-brand-secondary-surface-dark: oklch(
252
+ calc(var(--lightness-min) + var(--l-brand-secondary-dark) / 3)
253
+ calc(var(--c-brand-secondary) * 0.25) var(--h-brand-secondary)
254
+ );
255
+ --color-brand-secondary-contrast-lightness-dark: calc(
256
+ var(--lightness-max) -
257
+ (
258
+ var(--lightness-diff) *
259
+ min(
260
+ max(
261
+ (var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) *
262
+ 1000000,
263
+ 0
264
+ ),
265
+ 1
266
+ )
267
+ )
268
+ );
269
+ --color-brand-secondary-contrast-dark: oklch(
270
+ var(--color-brand-secondary-contrast-lightness-dark)
271
+ calc(var(--c-brand-secondary) * 0.25) var(--h-brand-secondary)
272
+ );
273
+ --color-brand-secondary-hover-dark: oklch(
274
+ var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary) /
275
+ calc(var(--transparency-weaker) / 10)
276
+ );
152
277
  --l-text-light: 0.28;
153
278
  --c-text-light: 0.03;
154
279
  --h-text-light: var(--h-brand-primary);
155
- --scale-text-light: 0.1;
156
- --color-text-neutral-chroma-light: calc(var(--c-text-light) * var(--neutral-chroma-scale));
157
- --color-text-contrast-light: oklch(var(--lightness-max) var(--color-text-neutral-chroma-light) var(--h-text-light));
280
+ --scale-text-light: 1.25;
158
281
  --color-text-base-light: oklch(var(--l-text-light) var(--c-text-light) var(--h-text-light));
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%));
165
- --color-text-on-emphasis-light: var(--color-text-contrast-light);
166
- --color-text-hover-light: color-mix(in oklch,
167
- var(--color-text-base-light) calc(var(--transparency-weaker) * 10%),
168
- transparent);
282
+ --color-text-muted-light: oklch(
283
+ calc(var(--l-text-light) * var(--scale-text-light))
284
+ calc(var(--c-text-light) * var(--neutral-chroma-scale)) var(--h-text-light)
285
+ );
286
+ --color-text-subtle-light: oklch(
287
+ calc(var(--l-text-light) * var(--scale-text-light) * var(--scale-text-light))
288
+ calc(
289
+ var(--c-text-light) *
290
+ var(--neutral-chroma-scale) *
291
+ var(--neutral-chroma-scale)
292
+ )
293
+ var(--h-text-light)
294
+ );
295
+ --color-text-on-emphasis-light: oklch(
296
+ var(--lightness-max) var(--c-text-light) var(--h-text-light)
297
+ );
298
+ --color-text-hover-light: oklch(
299
+ var(--l-text-light) var(--c-text-light) var(--h-text-light) /
300
+ calc(var(--transparency-weaker) / 10)
301
+ );
169
302
  --l-text-dark: 0.88;
170
303
  --c-text-dark: 0.05;
171
304
  --h-text-dark: var(--h-brand-primary);
172
- --color-text-neutral-chroma-dark: calc(var(--c-text-dark) * var(--neutral-chroma-scale));
173
- --color-text-contrast-dark: oklch(var(--lightness-min) var(--color-text-neutral-chroma-dark) var(--h-text-dark));
305
+ --scale-text-dark: 0.88;
174
306
  --color-text-base-dark: oklch(var(--l-text-dark) var(--c-text-dark) var(--h-text-dark));
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%);
181
- --color-text-on-emphasis-dark: var(--color-text-contrast-dark);
182
- --color-text-hover-dark: color-mix(in oklch,
183
- var(--color-text-base-dark) calc(var(--transparency-weaker) * 10%),
184
- transparent);
307
+ --color-text-muted-dark: oklch(
308
+ calc(var(--l-text-dark) * var(--scale-text-dark))
309
+ calc(var(--c-text-dark) * var(--scale-text-dark)) var(--h-text-dark)
310
+ );
311
+ --color-text-subtle-dark: oklch(
312
+ calc(var(--l-text-dark) * var(--scale-text-dark) * var(--scale-text-dark))
313
+ calc(var(--c-text-dark) * var(--scale-text-dark) * var(--scale-text-dark))
314
+ var(--h-text-dark)
315
+ );
316
+ --color-text-on-emphasis-dark: oklch(
317
+ var(--lightness-min) var(--c-text-dark) var(--h-text-dark)
318
+ );
319
+ --color-text-hover-dark: oklch(
320
+ var(--l-text-dark) var(--c-text-dark) var(--h-text-dark) /
321
+ calc(var(--transparency-weaker) / 10)
322
+ );
185
323
  --l-surface-light: 0.99;
186
324
  --c-surface-light: 0.03;
187
325
  --h-surface-light: var(--h-brand-primary);
188
- --scale-surface-light: 0.02;
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%));
198
- --color-surface-emphasis-light: var(--color-surface-contrast-light);
326
+ --scale-surface-light: 0.98;
327
+ --color-surface-base-light: oklch(
328
+ var(--l-surface-light) var(--c-surface-light) var(--h-surface-light)
329
+ );
330
+ --color-surface-muted-light: oklch(
331
+ calc(var(--l-surface-light) * var(--scale-surface-light))
332
+ calc(var(--c-surface-light) * var(--neutral-chroma-scale)) var(--h-surface-light)
333
+ );
334
+ --color-surface-subtle-light: oklch(
335
+ calc(var(--l-surface-light) * var(--scale-surface-light) * var(--scale-surface-light))
336
+ calc(
337
+ var(--c-surface-light) *
338
+ var(--neutral-chroma-scale) *
339
+ var(--neutral-chroma-scale)
340
+ )
341
+ var(--h-surface-light)
342
+ );
343
+ --color-surface-emphasis-light: oklch(
344
+ var(--lightness-min) var(--c-surface-light) var(--h-surface-light)
345
+ );
199
346
  --l-surface-dark: 0.15;
200
347
  --c-surface-dark: 0.05;
201
348
  --h-surface-dark: var(--h-brand-primary);
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%);
211
- --color-surface-emphasis-dark: var(--color-surface-contrast-dark);
349
+ --scale-surface-dark: 1.3;
350
+ --color-surface-base-dark: oklch(
351
+ var(--l-surface-dark) var(--c-surface-dark) var(--h-surface-dark)
352
+ );
353
+ --color-surface-muted-dark: oklch(
354
+ calc(var(--l-surface-dark) * var(--scale-surface-dark))
355
+ calc(var(--c-surface-dark) * var(--neutral-chroma-scale)) var(--h-surface-dark)
356
+ );
357
+ --color-surface-subtle-dark: oklch(
358
+ calc(var(--l-surface-dark) * var(--scale-surface-dark) * var(--scale-surface-dark))
359
+ calc(
360
+ var(--c-surface-dark) *
361
+ var(--neutral-chroma-scale) *
362
+ var(--neutral-chroma-scale)
363
+ )
364
+ var(--h-surface-dark)
365
+ );
366
+ --color-surface-emphasis-dark: oklch(
367
+ var(--lightness-max) var(--c-surface-dark) var(--h-surface-dark)
368
+ );
212
369
  --l-border-light: 0.87;
213
370
  --c-border-light: 0.03;
214
371
  --h-border-light: var(--h-brand-primary);
215
- --scale-border-light: 0.1;
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%));
225
- --color-border-on-emphasis-light: var(--color-border-contrast-light);
226
- --color-border-hover-light: color-mix(in oklch,
227
- var(--color-border-base-light) calc(var(--transparency-weaker) * 10%),
228
- transparent);
372
+ --scale-border-light: 1.025;
373
+ --color-border-base-light: oklch(
374
+ var(--l-border-light) var(--c-border-light) var(--h-border-light)
375
+ );
376
+ --color-border-muted-light: oklch(
377
+ calc(var(--l-border-light) * var(--scale-border-light))
378
+ calc(var(--c-border-light) * var(--neutral-chroma-scale)) var(--h-border-light)
379
+ );
380
+ --color-border-subtle-light: oklch(
381
+ calc(var(--l-border-light) * var(--scale-border-light) * var(--scale-border-light))
382
+ calc(
383
+ var(--c-border-light) *
384
+ var(--neutral-chroma-scale) *
385
+ var(--neutral-chroma-scale)
386
+ )
387
+ var(--h-border-light)
388
+ );
389
+ --color-border-on-emphasis-light: oklch(
390
+ var(--lightness-max) var(--c-border-light) var(--h-border-light)
391
+ );
392
+ --color-border-hover-light: oklch(
393
+ var(--l-border-light) var(--c-border-light) var(--h-border-light) /
394
+ calc(var(--transparency-weaker) / 10)
395
+ );
229
396
  --l-border-dark: 0.3;
230
397
  --c-border-dark: 0.05;
398
+ --scale-border-dark: 0.98;
231
399
  --h-border-dark: var(--h-brand-primary);
232
- --color-border-neutral-chroma-dark: calc(var(--c-border-dark) * var(--neutral-chroma-scale));
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%);
241
- --color-border-on-emphasis-dark: var(--color-border-contrast-dark);
242
- --color-border-hover-dark: color-mix(in oklch,
243
- var(--color-border-base-dark) calc(var(--transparency-weaker) * 10%),
244
- transparent);
400
+ --color-border-base-dark: oklch(
401
+ var(--l-border-dark) var(--c-border-dark) var(--h-border-dark)
402
+ );
403
+ --color-border-muted-dark: oklch(
404
+ calc(var(--l-border-dark) * var(--scale-border-dark))
405
+ calc(var(--c-border-dark) * var(--neutral-chroma-scale)) var(--h-border-dark)
406
+ );
407
+ --color-border-subtle-dark: oklch(
408
+ calc(var(--l-border-dark) * var(--scale-border-dark) * var(--scale-border-dark))
409
+ calc(
410
+ var(--c-border-dark) *
411
+ var(--neutral-chroma-scale) *
412
+ var(--neutral-chroma-scale)
413
+ )
414
+ var(--h-border-dark)
415
+ );
416
+ --color-border-on-emphasis-dark: oklch(
417
+ var(--lightness-min) var(--c-border-dark) var(--h-border-dark)
418
+ );
419
+ --color-border-hover-dark: oklch(
420
+ var(--l-border-dark) var(--c-border-dark) var(--h-border-dark) /
421
+ calc(var(--transparency-weaker) / 10)
422
+ );
245
423
  --c-status-success: 0.3;
246
424
  --h-status-success: 142;
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));
250
425
  --l-status-success-light: 0.56;
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);
426
+ --color-status-success-base-light: oklch(
427
+ var(--l-status-success-light) var(--c-status-success) var(--h-status-success)
428
+ );
429
+ --color-status-success-emphasis-light: oklch(
430
+ calc(var(--l-status-success-light) * 0.85) calc(var(--c-status-success) * 1.1)
431
+ var(--h-status-success)
432
+ );
433
+ --color-status-success-surface-light: oklch(
434
+ calc(var(--lightness-max) - 0.1 + var(--l-status-success-light) / 10)
435
+ calc(var(--c-status-success) * 0.25) var(--h-status-success)
436
+ );
437
+ --color-status-success-contrast-lightness-light: calc(
438
+ var(--lightness-max) -
439
+ (
440
+ var(--lightness-diff) *
441
+ min(
442
+ max(
443
+ (var(--l-status-success-light) - var(--lightness-contrast-cutoff)) *
444
+ 1000000,
445
+ 0
446
+ ),
447
+ 1
448
+ )
449
+ )
450
+ );
451
+ --color-status-success-contrast-light: oklch(
452
+ var(--color-status-success-contrast-lightness-light)
453
+ calc(var(--c-status-success) * 0.25) var(--h-status-success)
454
+ );
455
+ --color-status-success-hover-light: oklch(
456
+ var(--l-status-success-light) var(--c-status-success) var(--h-status-success) /
457
+ calc(var(--transparency-weaker) / 10)
458
+ );
265
459
  --l-status-success-dark: 0.75;
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);
460
+ --color-status-success-base-dark: oklch(
461
+ var(--l-status-success-dark) var(--c-status-success) var(--h-status-success)
462
+ );
463
+ --color-status-success-emphasis-dark: oklch(
464
+ calc(var(--l-status-success-dark) * 1.25) calc(var(--c-status-success) * 1.1)
465
+ var(--h-status-success)
466
+ );
467
+ --color-status-success-surface-dark: oklch(
468
+ calc(var(--lightness-min) + var(--l-status-success-dark) / 3)
469
+ calc(var(--c-status-success) * 0.25) var(--h-status-success)
470
+ );
471
+ --color-status-success-contrast-lightness-dark: calc(
472
+ var(--lightness-max) -
473
+ (
474
+ var(--lightness-diff) *
475
+ min(
476
+ max(
477
+ (var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) *
478
+ 1000000,
479
+ 0
480
+ ),
481
+ 1
482
+ )
483
+ )
484
+ );
485
+ --color-status-success-contrast-dark: oklch(
486
+ var(--color-status-success-contrast-lightness-dark) calc(var(--c-status-success) * 0.25)
487
+ var(--h-status-success)
488
+ );
489
+ --color-status-success-hover-dark: oklch(
490
+ var(--l-status-success-dark) var(--c-status-success) var(--h-status-success) /
491
+ calc(var(--transparency-weaker) / 10)
492
+ );
280
493
  --c-status-warning: 0.3;
281
494
  --h-status-warning: 97;
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));
285
495
  --l-status-warning-light: 0.56;
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);
496
+ --color-status-warning-base-light: oklch(
497
+ var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning)
498
+ );
499
+ --color-status-warning-emphasis-light: oklch(
500
+ calc(var(--l-status-warning-light) * 0.85) calc(var(--c-status-warning) * 1.1)
501
+ var(--h-status-warning)
502
+ );
503
+ --color-status-warning-surface-light: oklch(
504
+ calc(var(--lightness-max) - 0.1 + var(--l-status-warning-light) / 10)
505
+ calc(var(--c-status-warning) * 0.25) var(--h-status-warning)
506
+ );
507
+ --color-status-warning-contrast-lightness-light: calc(
508
+ var(--lightness-max) -
509
+ (
510
+ var(--lightness-diff) *
511
+ min(
512
+ max(
513
+ (var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) *
514
+ 1000000,
515
+ 0
516
+ ),
517
+ 1
518
+ )
519
+ )
520
+ );
521
+ --color-status-warning-contrast-light: oklch(
522
+ var(--color-status-warning-contrast-lightness-light)
523
+ calc(var(--c-status-warning) * 0.25) var(--h-status-warning)
524
+ );
525
+ --color-status-warning-hover-light: oklch(
526
+ var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning) /
527
+ calc(var(--transparency-weaker) / 10)
528
+ );
300
529
  --l-status-warning-dark: 0.75;
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);
530
+ --color-status-warning-base-dark: oklch(
531
+ var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning)
532
+ );
533
+ --color-status-warning-emphasis-dark: oklch(
534
+ calc(var(--l-status-warning-dark) * 1.25) calc(var(--c-status-warning) * 1.1)
535
+ var(--h-status-warning)
536
+ );
537
+ --color-status-warning-surface-dark: oklch(
538
+ calc(var(--lightness-min) + var(--l-status-warning-dark) / 3)
539
+ calc(var(--c-status-warning) * 0.25) var(--h-status-warning)
540
+ );
541
+ --color-status-warning-contrast-lightness-dark: calc(
542
+ var(--lightness-max) -
543
+ (
544
+ var(--lightness-diff) *
545
+ min(
546
+ max(
547
+ (var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) *
548
+ 1000000,
549
+ 0
550
+ ),
551
+ 1
552
+ )
553
+ )
554
+ );
555
+ --color-status-warning-contrast-dark: oklch(
556
+ var(--color-status-warning-contrast-lightness-dark) calc(var(--c-status-warning) * 0.25)
557
+ var(--h-status-warning)
558
+ );
559
+ --color-status-warning-hover-dark: oklch(
560
+ var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning) /
561
+ calc(var(--transparency-weaker) / 10)
562
+ );
315
563
  --c-status-danger: 0.3;
316
564
  --h-status-danger: 32;
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));
320
565
  --l-status-danger-light: 0.56;
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);
566
+ --color-status-danger-base-light: oklch(
567
+ var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger)
568
+ );
569
+ --color-status-danger-emphasis-light: oklch(
570
+ calc(var(--l-status-danger-light) * 0.85) calc(var(--c-status-danger) * 1.1)
571
+ var(--h-status-danger)
572
+ );
573
+ --color-status-danger-surface-light: oklch(
574
+ calc(var(--lightness-max) - 0.1 + var(--l-status-danger-light) / 10)
575
+ calc(var(--c-status-danger) * 0.25) var(--h-status-danger)
576
+ );
577
+ --color-status-danger-contrast-lightness-light: calc(
578
+ var(--lightness-max) -
579
+ (
580
+ var(--lightness-diff) *
581
+ min(
582
+ max(
583
+ (var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) *
584
+ 1000000,
585
+ 0
586
+ ),
587
+ 1
588
+ )
589
+ )
590
+ );
591
+ --color-status-danger-contrast-light: oklch(
592
+ var(--color-status-danger-contrast-lightness-light) calc(var(--c-status-danger) * 0.25)
593
+ var(--h-status-danger)
594
+ );
595
+ --color-status-danger-hover-light: oklch(
596
+ var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger) /
597
+ calc(var(--transparency-weaker) / 10)
598
+ );
335
599
  --l-status-danger-dark: 0.75;
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);
600
+ --color-status-danger-base-dark: oklch(
601
+ var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger)
602
+ );
603
+ --color-status-danger-emphasis-dark: oklch(
604
+ calc(var(--l-status-danger-dark) * 1.25) calc(var(--c-status-danger) * 1.1)
605
+ var(--h-status-danger)
606
+ );
607
+ --color-status-danger-surface-dark: oklch(
608
+ calc(var(--lightness-min) + var(--l-status-danger-dark) / 3)
609
+ calc(var(--c-status-danger) * 0.25) var(--h-status-danger)
610
+ );
611
+ --color-status-danger-contrast-lightness-dark: calc(
612
+ var(--lightness-max) -
613
+ (
614
+ var(--lightness-diff) *
615
+ min(
616
+ max(
617
+ (var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) *
618
+ 1000000,
619
+ 0
620
+ ),
621
+ 1
622
+ )
623
+ )
624
+ );
625
+ --color-status-danger-contrast-dark: oklch(
626
+ var(--color-status-danger-contrast-lightness-dark) calc(var(--c-status-danger) * 0.25)
627
+ var(--h-status-danger)
628
+ );
629
+ --color-status-danger-hover-dark: oklch(
630
+ var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger) /
631
+ calc(var(--transparency-weaker) / 10)
632
+ );
350
633
  --c-status-info: 0.3;
351
634
  --h-status-info: 245;
352
- --color-status-info-neutral-chroma: calc(var(--c-status-info) * var(--neutral-chroma-scale));
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));
355
635
  --l-status-info-light: 0.56;
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);
636
+ --color-status-info-base-light: oklch(
637
+ var(--l-status-info-light) var(--c-status-info) var(--h-status-info)
638
+ );
639
+ --color-status-info-emphasis-light: oklch(
640
+ calc(var(--l-status-info-light) * 0.85) calc(var(--c-status-info) * 1.1)
641
+ var(--h-status-info)
642
+ );
643
+ --color-status-info-surface-light: oklch(
644
+ calc(var(--lightness-max) - 0.1 + var(--l-status-info-light) / 10)
645
+ calc(var(--c-status-info) * 0.25) var(--h-status-info)
646
+ );
647
+ --color-status-info-contrast-lightness-light: calc(
648
+ var(--lightness-max) -
649
+ (
650
+ var(--lightness-diff) *
651
+ min(
652
+ max(
653
+ (var(--l-status-info-light) - var(--lightness-contrast-cutoff)) *
654
+ 1000000,
655
+ 0
656
+ ),
657
+ 1
658
+ )
659
+ )
660
+ );
661
+ --color-status-info-contrast-light: oklch(
662
+ var(--color-status-info-contrast-lightness-light) calc(var(--c-status-info) * 0.25)
663
+ var(--h-status-info)
664
+ );
665
+ --color-status-info-hover-light: oklch(
666
+ var(--l-status-info-light) var(--c-status-info) var(--h-status-info) /
667
+ calc(var(--transparency-weaker) / 10)
668
+ );
370
669
  --l-status-info-dark: 0.75;
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);
670
+ --color-status-info-base-dark: oklch(
671
+ var(--l-status-info-dark) var(--c-status-info) var(--h-status-info)
672
+ );
673
+ --color-status-info-emphasis-dark: oklch(
674
+ calc(var(--l-status-info-dark) * 1.25) calc(var(--c-status-info) * 1.1)
675
+ var(--h-status-info)
676
+ );
677
+ --color-status-info-surface-dark: oklch(
678
+ calc(var(--lightness-min) + var(--l-status-info-dark) / 3)
679
+ calc(var(--c-status-info) * 0.25) var(--h-status-info)
680
+ );
681
+ --color-status-info-contrast-lightness-dark: calc(
682
+ var(--lightness-max) -
683
+ (
684
+ var(--lightness-diff) *
685
+ min(
686
+ max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0),
687
+ 1
688
+ )
689
+ )
690
+ );
691
+ --color-status-info-contrast-dark: oklch(
692
+ var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * 0.25)
693
+ var(--h-status-info)
694
+ );
695
+ --color-status-info-hover-dark: oklch(
696
+ var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) /
697
+ calc(var(--transparency-weaker) / 10)
698
+ );
384
699
  }
385
700
  }