@northstar-js/tokens 0.1.0 → 0.2.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.
Files changed (11) hide show
  1. package/dist/index.d.ts +328 -4
  2. package/dist/index.js +328 -4
  3. package/dist/tailwind.css +16 -0
  4. package/dist/tokens.css +275 -0
  5. package/dist/tokens.json +328 -4
  6. package/package.json +1 -1
  7. package/src/component.json +2 -1
  8. package/src/primitive.json +1 -0
  9. package/src/scales.json +566 -76
  10. package/src/semantic.day.json +94 -0
  11. package/src/semantic.night.json +94 -0
package/dist/tokens.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --ns-gray-6: #656A75;
12
12
  --ns-gray-7: #464C56;
13
13
  --ns-gray-8: #06080C;
14
+ --ns-gray-pale: #F4F6F8;
14
15
  --ns-night-0: #08090C;
15
16
  --ns-night-1: #0D0F13;
16
17
  --ns-night-2: #14161B;
@@ -61,6 +62,25 @@
61
62
  --ns-space-40: 40px;
62
63
  --ns-space-48: 48px;
63
64
  --ns-space-64: 64px;
65
+ --ns-spacing-inline-icon: 6px;
66
+ --ns-spacing-inline-label: 6px;
67
+ --ns-spacing-inline-toolbar: 4px;
68
+ --ns-spacing-stack: 12px;
69
+ --ns-spacing-stack-tight: 8px;
70
+ --ns-spacing-control-button-x: 16px;
71
+ --ns-spacing-control-field-x: 12px;
72
+ --ns-spacing-card-padding: 20px;
73
+ --ns-spacing-row-y: 8px;
74
+ --ns-spacing-row-x: 12px;
75
+ --ns-spacing-section: 40px;
76
+ --ns-spacing-section-phone: 32px;
77
+ --ns-spacing-page-margin-phone: 16px;
78
+ --ns-spacing-page-margin-tablet: 24px;
79
+ --ns-spacing-page-margin-desktop: 48px;
80
+ --ns-spacing-page-gutter-phone: 16px;
81
+ --ns-spacing-page-gutter-tablet: 20px;
82
+ --ns-spacing-page-gutter-desktop: 24px;
83
+ --ns-spacing-page-content-max: 1280px;
64
84
  --ns-size-control-sm: 28px;
65
85
  --ns-size-control-md: 32px;
66
86
  --ns-size-control-lg: 36px;
@@ -75,17 +95,32 @@
75
95
  --ns-density-compact-control-height: 28px;
76
96
  --ns-density-compact-row-height: 32px;
77
97
  --ns-density-compact-row-padding: 4px;
98
+ --ns-density-compact-card-padding: 16px;
99
+ --ns-density-compact-stack-gap: 8px;
100
+ --ns-density-compact-section-gap: 32px;
78
101
  --ns-density-control-height: 32px;
79
102
  --ns-density-row-height: 36px;
80
103
  --ns-density-row-padding: 6px;
104
+ --ns-density-card-padding: 20px;
105
+ --ns-density-stack-gap: 12px;
106
+ --ns-density-section-gap: 40px;
81
107
  --ns-density-comfortable-control-height: 36px;
82
108
  --ns-density-comfortable-row-height: 40px;
83
109
  --ns-density-comfortable-row-padding: 8px;
110
+ --ns-density-comfortable-card-padding: 24px;
111
+ --ns-density-comfortable-stack-gap: 16px;
112
+ --ns-density-comfortable-section-gap: 48px;
84
113
  --ns-radius-4: 4px;
85
114
  --ns-radius-6: 6px;
86
115
  --ns-radius-8: 8px;
87
116
  --ns-radius-12: 12px;
88
117
  --ns-radius-full: 9999px;
118
+ --ns-radius-control-pill: 9999px;
119
+ --ns-radius-control-rounded: 6px;
120
+ --ns-radius-glass-panel: 10px;
121
+ --ns-radius-glass-bar: 10px;
122
+ --ns-radius-glass-control: 7px;
123
+ --ns-radius-glass-inner: 6px;
89
124
  --ns-z-banner: 30;
90
125
  --ns-z-dropdown: 40;
91
126
  --ns-z-popover: 50;
@@ -97,10 +132,41 @@
97
132
  --ns-motion-duration-200: 200ms;
98
133
  --ns-motion-duration-320: 320ms;
99
134
  --ns-motion-duration-600: 600ms;
135
+ --ns-motion-duration-press: 90ms;
136
+ --ns-motion-duration-release: 280ms;
137
+ --ns-motion-duration-settle: 420ms;
138
+ --ns-motion-duration-micro: 180ms;
139
+ --ns-motion-duration-layout: 560ms;
140
+ --ns-motion-duration-reveal: 700ms;
141
+ --ns-motion-duration-stagger: 45ms;
100
142
  --ns-motion-easing-settle: cubic-bezier(0.2, 0, 0, 1);
101
143
  --ns-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
102
144
  --ns-motion-easing-travel: cubic-bezier(0.4, 0, 0.2, 1);
103
145
  --ns-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
146
+ --ns-motion-easing-glide: cubic-bezier(0.22, 1, 0.36, 1);
147
+ --ns-motion-easing-hover: cubic-bezier(0.45, 0, 0.25, 1);
148
+ --ns-motion-spring-press: cubic-bezier(0.3, 0, 0.5, 1);
149
+ --ns-motion-spring-release: cubic-bezier(0.34, 1.56, 0.64, 1);
150
+ --ns-motion-spring-settle: cubic-bezier(0.22, 1.24, 0.36, 1);
151
+ --ns-motion-spring-layout: cubic-bezier(0.32, 0.72, 0, 1);
152
+ --ns-material-blur-sm: 8px;
153
+ --ns-material-blur-md: 16px;
154
+ --ns-material-blur-lg: 28px;
155
+ --ns-material-saturate: 1.7;
156
+ --ns-material-lift: -2px;
157
+ --ns-material-press: 0.97;
158
+ --ns-material-spin-sweep: 700ms;
159
+ --ns-material-spin-sweep-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
160
+ --ns-material-spin-turn: 16deg;
161
+ --ns-material-spin-angle: 200deg;
162
+ --ns-material-spin-press: 0.985;
163
+ --ns-material-liquid-scale-sm: 14;
164
+ --ns-material-liquid-scale-md: 28;
165
+ --ns-material-liquid-scale-lg: 44;
166
+ --ns-material-liquid-bevel: 0.16;
167
+ --ns-material-liquid-aberration: 2;
168
+ --ns-material-liquid-frost: 0.6px;
169
+ --ns-material-liquid-fallback-blur: 14px;
104
170
  --ns-color-ground: #08090C;
105
171
  --ns-color-surface-1: #0D0F13;
106
172
  --ns-color-surface-2: #14161B;
@@ -130,8 +196,72 @@
130
196
  --ns-elevation-1: none;
131
197
  --ns-elevation-2: none;
132
198
  --ns-elevation-3: none;
199
+ --ns-material-glass-fill: rgba(20, 22, 27, 0.4);
200
+ --ns-material-glass-tint: rgba(147, 180, 224, 0.06);
201
+ --ns-material-glass-edge: rgba(232, 234, 238, 0.12);
202
+ --ns-material-glass-rim: rgba(255, 255, 255, 0.16);
203
+ --ns-material-glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%);
204
+ --ns-material-solid: #14161B;
205
+ --ns-material-glow: rgba(147, 180, 224, 0.35);
206
+ --ns-material-spotlight: rgba(147, 180, 224, 0.16);
207
+ --ns-material-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
208
+ --ns-material-hairline: rgba(232, 234, 238, 0.06);
209
+ --ns-material-spin-stop-1: #C9CED5;
210
+ --ns-material-spin-stop-2: #F0F2F5;
211
+ --ns-material-spin-stop-3: #B5BBC4;
212
+ --ns-material-spin-stop-4: #E4E7EB;
213
+ --ns-material-spin-stop-5: #AEB5BE;
214
+ --ns-material-spin-stop-6: #EAEDF0;
215
+ --ns-material-spin-stop-7: #B8BEC7;
216
+ --ns-material-spin-signal-stop-1: #A9C0E2;
217
+ --ns-material-spin-signal-stop-2: #D7E3F4;
218
+ --ns-material-spin-signal-stop-3: #8FAAD2;
219
+ --ns-material-spin-signal-stop-4: #C6D6EE;
220
+ --ns-material-spin-signal-stop-5: #88A4CE;
221
+ --ns-material-spin-signal-stop-6: #CCDBF0;
222
+ --ns-material-spin-signal-stop-7: #93ADD4;
223
+ --ns-material-spin-ink: #0B0E12;
224
+ --ns-material-spin-signal-ink: #06080C;
225
+ --ns-material-spin-grain-dark: rgba(0, 0, 0, 0.05);
226
+ --ns-material-spin-grain-light: rgba(255, 255, 255, 0.05);
227
+ --ns-material-spin-signal-grain-light: rgba(255, 255, 255, 0.06);
228
+ --ns-material-spin-emboss: rgba(255, 255, 255, 0.4);
229
+ --ns-material-spin-sheen: rgba(255, 255, 255, 0.38);
230
+ --ns-material-spin-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
231
+ --ns-material-spin-shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
232
+ --ns-material-spin-ghost: 0.16;
233
+ --ns-material-spin-ghost-edge: rgba(255, 255, 255, 0.1);
234
+ --ns-material-spin-matte: #1B1E24;
235
+ --ns-material-spin-matte-ink: #848A94;
236
+ --ns-material-liquid-tint: rgba(147, 180, 224, 0.05);
237
+ --ns-material-liquid-highlight: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
238
+ --ns-material-liquid-rim: rgba(255, 255, 255, 0.22);
239
+ --ns-material-liquid-rim-low: rgba(255, 255, 255, 0.06);
240
+ --ns-material-liquid-inner: rgba(255, 255, 255, 0.05);
241
+ --ns-material-liquid-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
242
+ --ns-material-texture-light: rgba(255, 255, 255, 0.03);
243
+ --ns-material-texture-dark: rgba(0, 0, 0, 0.16);
244
+ --ns-material-texture-top: rgba(255, 255, 255, 0.055);
245
+ --ns-material-texture-bevel-hi: rgba(255, 255, 255, 0.075);
246
+ --ns-material-texture-bevel-lo: rgba(0, 0, 0, 0.32);
247
+ --ns-material-texture-signal-light: rgba(255, 255, 255, 0.1);
248
+ --ns-material-texture-signal-dark: rgba(6, 8, 12, 0.045);
249
+ --ns-material-texture-signal-top: rgba(255, 255, 255, 0.22);
250
+ --ns-material-texture-signal-bevel-hi: rgba(255, 255, 255, 0.5);
251
+ --ns-material-texture-signal-bevel-lo: rgba(6, 8, 12, 0.2);
252
+ --ns-backdrop-ground: #08090C;
253
+ --ns-backdrop-ink: #E8EAEE;
254
+ --ns-backdrop-signal: #93B4E0;
255
+ --ns-backdrop-line: #2B2F38;
256
+ --ns-backdrop-faint: #1E2128;
257
+ --ns-backdrop-glow-nebula: 0.13;
258
+ --ns-backdrop-glow-haze: 0.04;
259
+ --ns-backdrop-glow-core: 0.12;
260
+ --ns-backdrop-glow-core-soft: 0.03;
261
+ --ns-backdrop-glow-band: 0.08;
133
262
  --ns-button-primary-bg: #93B4E0;
134
263
  --ns-button-primary-fg: #06080C;
264
+ --ns-button-primary-hover: #B9CEEA;
135
265
  }
136
266
 
137
267
  [data-theme="day"] {
@@ -165,8 +295,72 @@
165
295
  --ns-elevation-1: 0 1px 2px rgba(6, 8, 12, 0.06);
166
296
  --ns-elevation-2: 0 4px 12px rgba(6, 8, 12, 0.08);
167
297
  --ns-elevation-3: 0 12px 32px rgba(6, 8, 12, 0.12);
298
+ --ns-material-glass-fill: rgba(255, 255, 255, 0.5);
299
+ --ns-material-glass-tint: rgba(147, 180, 224, 0.08);
300
+ --ns-material-glass-edge: rgba(6, 8, 12, 0.08);
301
+ --ns-material-glass-rim: rgba(255, 255, 255, 0.95);
302
+ --ns-material-glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%);
303
+ --ns-material-solid: #FFFFFF;
304
+ --ns-material-glow: rgba(47, 93, 154, 0.24);
305
+ --ns-material-spotlight: rgba(47, 93, 154, 0.09);
306
+ --ns-material-shadow: 0 16px 40px -12px rgba(6, 8, 12, 0.18);
307
+ --ns-material-hairline: rgba(6, 8, 12, 0.06);
308
+ --ns-material-spin-stop-1: #C9CED5;
309
+ --ns-material-spin-stop-2: #F0F2F5;
310
+ --ns-material-spin-stop-3: #B5BBC4;
311
+ --ns-material-spin-stop-4: #E4E7EB;
312
+ --ns-material-spin-stop-5: #AEB5BE;
313
+ --ns-material-spin-stop-6: #EAEDF0;
314
+ --ns-material-spin-stop-7: #B8BEC7;
315
+ --ns-material-spin-signal-stop-1: #A9C0E2;
316
+ --ns-material-spin-signal-stop-2: #D7E3F4;
317
+ --ns-material-spin-signal-stop-3: #8FAAD2;
318
+ --ns-material-spin-signal-stop-4: #C6D6EE;
319
+ --ns-material-spin-signal-stop-5: #88A4CE;
320
+ --ns-material-spin-signal-stop-6: #CCDBF0;
321
+ --ns-material-spin-signal-stop-7: #93ADD4;
322
+ --ns-material-spin-ink: #0B0E12;
323
+ --ns-material-spin-signal-ink: #06080C;
324
+ --ns-material-spin-grain-dark: rgba(0, 0, 0, 0.05);
325
+ --ns-material-spin-grain-light: rgba(255, 255, 255, 0.05);
326
+ --ns-material-spin-signal-grain-light: rgba(255, 255, 255, 0.06);
327
+ --ns-material-spin-emboss: rgba(255, 255, 255, 0.4);
328
+ --ns-material-spin-sheen: rgba(255, 255, 255, 0.38);
329
+ --ns-material-spin-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(6, 8, 12, 0.2), 0 1px 3px rgba(6, 8, 12, 0.14);
330
+ --ns-material-spin-shadow-press: inset 0 1px 2px rgba(6, 8, 12, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(6, 8, 12, 0.2), 0 1px 1px rgba(6, 8, 12, 0.08);
331
+ --ns-material-spin-ghost: 0.4;
332
+ --ns-material-spin-ghost-edge: rgba(6, 8, 12, 0.08);
333
+ --ns-material-spin-matte: #E9ECEF;
334
+ --ns-material-spin-matte-ink: #6B717B;
335
+ --ns-material-liquid-tint: rgba(147, 180, 224, 0.10);
336
+ --ns-material-liquid-highlight: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
337
+ --ns-material-liquid-rim: rgba(255, 255, 255, 0.95);
338
+ --ns-material-liquid-rim-low: rgba(6, 8, 12, 0.06);
339
+ --ns-material-liquid-inner: rgba(255, 255, 255, 0.5);
340
+ --ns-material-liquid-shadow: 0 10px 30px -12px rgba(6, 8, 12, 0.16);
341
+ --ns-material-texture-light: rgba(255, 255, 255, 0.5);
342
+ --ns-material-texture-dark: rgba(6, 8, 12, 0.03);
343
+ --ns-material-texture-top: rgba(255, 255, 255, 0.8);
344
+ --ns-material-texture-bevel-hi: rgba(255, 255, 255, 0.95);
345
+ --ns-material-texture-bevel-lo: rgba(6, 8, 12, 0.08);
346
+ --ns-material-texture-signal-light: rgba(255, 255, 255, 0.12);
347
+ --ns-material-texture-signal-dark: rgba(6, 8, 12, 0.04);
348
+ --ns-material-texture-signal-top: rgba(255, 255, 255, 0.26);
349
+ --ns-material-texture-signal-bevel-hi: rgba(255, 255, 255, 0.6);
350
+ --ns-material-texture-signal-bevel-lo: rgba(6, 8, 12, 0.14);
351
+ --ns-backdrop-ground: #F4F6F8;
352
+ --ns-backdrop-ink: #464C56;
353
+ --ns-backdrop-signal: #2F5D9A;
354
+ --ns-backdrop-line: #D4D8DD;
355
+ --ns-backdrop-faint: #E6E8EB;
356
+ --ns-backdrop-glow-nebula: 0.24;
357
+ --ns-backdrop-glow-haze: 0.1;
358
+ --ns-backdrop-glow-core: 0.22;
359
+ --ns-backdrop-glow-core-soft: 0.07;
360
+ --ns-backdrop-glow-band: 0.18;
168
361
  --ns-button-primary-bg: #93B4E0;
169
362
  --ns-button-primary-fg: #06080C;
363
+ --ns-button-primary-hover: #B9CEEA;
170
364
  }
171
365
 
172
366
  @media (prefers-color-scheme: light) {
@@ -201,8 +395,72 @@
201
395
  --ns-elevation-1: 0 1px 2px rgba(6, 8, 12, 0.06);
202
396
  --ns-elevation-2: 0 4px 12px rgba(6, 8, 12, 0.08);
203
397
  --ns-elevation-3: 0 12px 32px rgba(6, 8, 12, 0.12);
398
+ --ns-material-glass-fill: rgba(255, 255, 255, 0.5);
399
+ --ns-material-glass-tint: rgba(147, 180, 224, 0.08);
400
+ --ns-material-glass-edge: rgba(6, 8, 12, 0.08);
401
+ --ns-material-glass-rim: rgba(255, 255, 255, 0.95);
402
+ --ns-material-glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%);
403
+ --ns-material-solid: #FFFFFF;
404
+ --ns-material-glow: rgba(47, 93, 154, 0.24);
405
+ --ns-material-spotlight: rgba(47, 93, 154, 0.09);
406
+ --ns-material-shadow: 0 16px 40px -12px rgba(6, 8, 12, 0.18);
407
+ --ns-material-hairline: rgba(6, 8, 12, 0.06);
408
+ --ns-material-spin-stop-1: #C9CED5;
409
+ --ns-material-spin-stop-2: #F0F2F5;
410
+ --ns-material-spin-stop-3: #B5BBC4;
411
+ --ns-material-spin-stop-4: #E4E7EB;
412
+ --ns-material-spin-stop-5: #AEB5BE;
413
+ --ns-material-spin-stop-6: #EAEDF0;
414
+ --ns-material-spin-stop-7: #B8BEC7;
415
+ --ns-material-spin-signal-stop-1: #A9C0E2;
416
+ --ns-material-spin-signal-stop-2: #D7E3F4;
417
+ --ns-material-spin-signal-stop-3: #8FAAD2;
418
+ --ns-material-spin-signal-stop-4: #C6D6EE;
419
+ --ns-material-spin-signal-stop-5: #88A4CE;
420
+ --ns-material-spin-signal-stop-6: #CCDBF0;
421
+ --ns-material-spin-signal-stop-7: #93ADD4;
422
+ --ns-material-spin-ink: #0B0E12;
423
+ --ns-material-spin-signal-ink: #06080C;
424
+ --ns-material-spin-grain-dark: rgba(0, 0, 0, 0.05);
425
+ --ns-material-spin-grain-light: rgba(255, 255, 255, 0.05);
426
+ --ns-material-spin-signal-grain-light: rgba(255, 255, 255, 0.06);
427
+ --ns-material-spin-emboss: rgba(255, 255, 255, 0.4);
428
+ --ns-material-spin-sheen: rgba(255, 255, 255, 0.38);
429
+ --ns-material-spin-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(6, 8, 12, 0.2), 0 1px 3px rgba(6, 8, 12, 0.14);
430
+ --ns-material-spin-shadow-press: inset 0 1px 2px rgba(6, 8, 12, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(6, 8, 12, 0.2), 0 1px 1px rgba(6, 8, 12, 0.08);
431
+ --ns-material-spin-ghost: 0.4;
432
+ --ns-material-spin-ghost-edge: rgba(6, 8, 12, 0.08);
433
+ --ns-material-spin-matte: #E9ECEF;
434
+ --ns-material-spin-matte-ink: #6B717B;
435
+ --ns-material-liquid-tint: rgba(147, 180, 224, 0.10);
436
+ --ns-material-liquid-highlight: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
437
+ --ns-material-liquid-rim: rgba(255, 255, 255, 0.95);
438
+ --ns-material-liquid-rim-low: rgba(6, 8, 12, 0.06);
439
+ --ns-material-liquid-inner: rgba(255, 255, 255, 0.5);
440
+ --ns-material-liquid-shadow: 0 10px 30px -12px rgba(6, 8, 12, 0.16);
441
+ --ns-material-texture-light: rgba(255, 255, 255, 0.5);
442
+ --ns-material-texture-dark: rgba(6, 8, 12, 0.03);
443
+ --ns-material-texture-top: rgba(255, 255, 255, 0.8);
444
+ --ns-material-texture-bevel-hi: rgba(255, 255, 255, 0.95);
445
+ --ns-material-texture-bevel-lo: rgba(6, 8, 12, 0.08);
446
+ --ns-material-texture-signal-light: rgba(255, 255, 255, 0.12);
447
+ --ns-material-texture-signal-dark: rgba(6, 8, 12, 0.04);
448
+ --ns-material-texture-signal-top: rgba(255, 255, 255, 0.26);
449
+ --ns-material-texture-signal-bevel-hi: rgba(255, 255, 255, 0.6);
450
+ --ns-material-texture-signal-bevel-lo: rgba(6, 8, 12, 0.14);
451
+ --ns-backdrop-ground: #F4F6F8;
452
+ --ns-backdrop-ink: #464C56;
453
+ --ns-backdrop-signal: #2F5D9A;
454
+ --ns-backdrop-line: #D4D8DD;
455
+ --ns-backdrop-faint: #E6E8EB;
456
+ --ns-backdrop-glow-nebula: 0.24;
457
+ --ns-backdrop-glow-haze: 0.1;
458
+ --ns-backdrop-glow-core: 0.22;
459
+ --ns-backdrop-glow-core-soft: 0.07;
460
+ --ns-backdrop-glow-band: 0.18;
204
461
  --ns-button-primary-bg: #93B4E0;
205
462
  --ns-button-primary-fg: #06080C;
463
+ --ns-button-primary-hover: #B9CEEA;
206
464
  }
207
465
  }
208
466
 
@@ -212,5 +470,22 @@
212
470
  --ns-motion-duration-200: 0ms;
213
471
  --ns-motion-duration-320: 0ms;
214
472
  --ns-motion-duration-600: 0ms;
473
+ --ns-motion-duration-press: 0ms;
474
+ --ns-motion-duration-release: 0ms;
475
+ --ns-motion-duration-settle: 0ms;
476
+ --ns-motion-duration-micro: 0ms;
477
+ --ns-motion-duration-layout: 0ms;
478
+ --ns-motion-duration-reveal: 0ms;
479
+ --ns-motion-duration-stagger: 0ms;
480
+ --ns-material-spin-sweep: 0ms;
481
+ }
482
+ }
483
+
484
+ @media (prefers-reduced-transparency: reduce) {
485
+ :root,
486
+ [data-theme] {
487
+ --ns-material-glass-fill: var(--ns-material-solid);
488
+ --ns-material-glass-tint: var(--ns-material-solid);
489
+ --ns-material-liquid-tint: var(--ns-material-solid);
215
490
  }
216
491
  }