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