@northstar-js/tokens 0.0.0-stage → 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 (13) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.d.ts +638 -0
  3. package/dist/index.js +632 -0
  4. package/dist/tailwind.css +96 -0
  5. package/dist/tokens.css +491 -0
  6. package/dist/tokens.json +629 -0
  7. package/package.json +40 -3
  8. package/src/component.json +11 -0
  9. package/src/primitive.json +39 -0
  10. package/src/scales.json +622 -0
  11. package/src/semantic.day.json +146 -0
  12. package/src/semantic.night.json +147 -0
  13. package/README.md +0 -3
package/dist/tailwind.css ADDED
@@ -0,0 +1,96 @@
1
+ /* @northstar-js/tokens — Tailwind v4 theme. Generated. */
2
+ @import "./tokens.css";
3
+
4
+ @theme inline {
5
+ --color-ground: var(--ns-color-ground);
6
+ --color-surface-1: var(--ns-color-surface-1);
7
+ --color-surface-2: var(--ns-color-surface-2);
8
+ --color-surface-3: var(--ns-color-surface-3);
9
+ --color-line-1: var(--ns-color-line-1);
10
+ --color-line-2: var(--ns-color-line-2);
11
+ --color-text-1: var(--ns-color-text-1);
12
+ --color-text-2: var(--ns-color-text-2);
13
+ --color-text-3: var(--ns-color-text-3);
14
+ --color-signal: var(--ns-color-signal);
15
+ --color-signal-fill: var(--ns-color-signal-fill);
16
+ --color-signal-wash: var(--ns-color-signal-wash);
17
+ --color-signal-edge: var(--ns-color-signal-edge);
18
+ --color-focus: var(--ns-color-focus);
19
+ --color-focus-halo: var(--ns-color-focus-halo);
20
+ --color-data-star: var(--ns-color-data-star);
21
+ --color-data-node: var(--ns-color-data-node);
22
+ --color-data-band: var(--ns-color-data-band);
23
+ --color-data-horizon: var(--ns-color-data-horizon);
24
+ --color-data-meridian: var(--ns-color-data-meridian);
25
+ --color-data-graticule: var(--ns-color-data-graticule);
26
+ --color-data-likert-1: var(--ns-color-data-likert-1);
27
+ --color-data-likert-2: var(--ns-color-data-likert-2);
28
+ --color-data-likert-3: var(--ns-color-data-likert-3);
29
+ --color-data-likert-4: var(--ns-color-data-likert-4);
30
+ --color-data-likert-5: var(--ns-color-data-likert-5);
31
+ --shadow-1: var(--ns-elevation-1);
32
+ --shadow-2: var(--ns-elevation-2);
33
+ --shadow-3: var(--ns-elevation-3);
34
+ --color-button-primary-bg: var(--ns-button-primary-bg);
35
+ --color-button-primary-fg: var(--ns-button-primary-fg);
36
+ --color-button-primary-hover: var(--ns-button-primary-hover);
37
+ --font-ui: var(--ns-font-family-ui);
38
+ --font-mono: var(--ns-font-family-mono);
39
+ --font-weight-regular: var(--ns-font-weight-regular);
40
+ --font-weight-medium: var(--ns-font-weight-medium);
41
+ --font-weight-semibold: var(--ns-font-weight-semibold);
42
+ --text-11: var(--ns-font-size-11);
43
+ --text-11--line-height: var(--ns-font-line-height-11);
44
+ --text-12: var(--ns-font-size-12);
45
+ --text-12--line-height: var(--ns-font-line-height-12);
46
+ --text-13: var(--ns-font-size-13);
47
+ --text-13--line-height: var(--ns-font-line-height-13);
48
+ --text-15: var(--ns-font-size-15);
49
+ --text-15--line-height: var(--ns-font-line-height-15);
50
+ --text-18: var(--ns-font-size-18);
51
+ --text-18--line-height: var(--ns-font-line-height-18);
52
+ --text-24: var(--ns-font-size-24);
53
+ --text-24--line-height: var(--ns-font-line-height-24);
54
+ --text-32: var(--ns-font-size-32);
55
+ --text-32--line-height: var(--ns-font-line-height-32);
56
+ --text-48: var(--ns-font-size-48);
57
+ --text-48--line-height: var(--ns-font-line-height-48);
58
+ --text-base: var(--ns-font-size-base);
59
+ --text-base--line-height: var(--ns-font-line-height-13);
60
+ --spacing-2: var(--ns-space-2);
61
+ --spacing-4: var(--ns-space-4);
62
+ --spacing-6: var(--ns-space-6);
63
+ --spacing-8: var(--ns-space-8);
64
+ --spacing-12: var(--ns-space-12);
65
+ --spacing-16: var(--ns-space-16);
66
+ --spacing-20: var(--ns-space-20);
67
+ --spacing-24: var(--ns-space-24);
68
+ --spacing-32: var(--ns-space-32);
69
+ --spacing-40: var(--ns-space-40);
70
+ --spacing-48: var(--ns-space-48);
71
+ --spacing-64: var(--ns-space-64);
72
+ --radius-4: var(--ns-radius-4);
73
+ --radius-6: var(--ns-radius-6);
74
+ --radius-8: var(--ns-radius-8);
75
+ --radius-12: var(--ns-radius-12);
76
+ --radius-full: var(--ns-radius-full);
77
+ --radius-control-pill: var(--ns-radius-control-pill);
78
+ --radius-control-rounded: var(--ns-radius-control-rounded);
79
+ --radius-glass-panel: var(--ns-radius-glass-panel);
80
+ --radius-glass-bar: var(--ns-radius-glass-bar);
81
+ --radius-glass-control: var(--ns-radius-glass-control);
82
+ --radius-glass-inner: var(--ns-radius-glass-inner);
83
+ --ease-settle: var(--ns-motion-easing-settle);
84
+ --ease-enter: var(--ns-motion-easing-enter);
85
+ --ease-travel: var(--ns-motion-easing-travel);
86
+ --ease-exit: var(--ns-motion-easing-exit);
87
+ --ease-glide: var(--ns-motion-easing-glide);
88
+ --ease-hover: var(--ns-motion-easing-hover);
89
+ --ease-spring-press: var(--ns-motion-spring-press);
90
+ --ease-spring-release: var(--ns-motion-spring-release);
91
+ --ease-spring-settle: var(--ns-motion-spring-settle);
92
+ --ease-spring-layout: var(--ns-motion-spring-layout);
93
+ --blur-glass-sm: var(--ns-material-blur-sm);
94
+ --blur-glass-md: var(--ns-material-blur-md);
95
+ --blur-glass-lg: var(--ns-material-blur-lg);
96
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,491 @@
1
+ /* @northstar-js/tokens — generated from src/*.json. Do not edit. */
2
+ :root,
3
+ [data-theme="night"] {
4
+ color-scheme: dark;
5
+ --ns-gray-0: #FFFFFF;
6
+ --ns-gray-1: #F8F9FA;
7
+ --ns-gray-2: #F1F3F5;
8
+ --ns-gray-3: #E9ECEF;
9
+ --ns-gray-4: #E6E8EB;
10
+ --ns-gray-5: #D4D8DD;
11
+ --ns-gray-6: #656A75;
12
+ --ns-gray-7: #464C56;
13
+ --ns-gray-8: #06080C;
14
+ --ns-gray-pale: #F4F6F8;
15
+ --ns-night-0: #08090C;
16
+ --ns-night-1: #0D0F13;
17
+ --ns-night-2: #14161B;
18
+ --ns-night-3: #1B1E24;
19
+ --ns-night-4: #1E2128;
20
+ --ns-night-5: #2B2F38;
21
+ --ns-night-6: #848A94;
22
+ --ns-night-7: #A9AEB8;
23
+ --ns-night-8: #E8EAEE;
24
+ --ns-glacier-100: #EDF3FB;
25
+ --ns-glacier-200: #B9CEEA;
26
+ --ns-glacier-300: #93B4E0;
27
+ --ns-glacier-700: #2F5D9A;
28
+ --ns-glacier-alpha-12: rgba(147, 180, 224, 0.12);
29
+ --ns-glacier-alpha-35: rgba(147, 180, 224, 0.35);
30
+ --ns-font-family-ui: Inter, ui-sans-serif, system-ui, sans-serif;
31
+ --ns-font-family-mono: 'IBM Plex Mono', ui-monospace, monospace;
32
+ --ns-font-weight-regular: 400;
33
+ --ns-font-weight-medium: 500;
34
+ --ns-font-weight-semibold: 600;
35
+ --ns-font-size-11: 11px;
36
+ --ns-font-size-12: 12px;
37
+ --ns-font-size-13: 13px;
38
+ --ns-font-size-15: 15px;
39
+ --ns-font-size-18: 18px;
40
+ --ns-font-size-24: 24px;
41
+ --ns-font-size-32: 32px;
42
+ --ns-font-size-48: 48px;
43
+ --ns-font-size-base: 13px;
44
+ --ns-font-line-height-11: 16px;
45
+ --ns-font-line-height-12: 18px;
46
+ --ns-font-line-height-13: 20px;
47
+ --ns-font-line-height-15: 22px;
48
+ --ns-font-line-height-18: 26px;
49
+ --ns-font-line-height-24: 32px;
50
+ --ns-font-line-height-32: 40px;
51
+ --ns-font-line-height-48: 52px;
52
+ --ns-font-numeric-figures: tabular-nums;
53
+ --ns-space-2: 2px;
54
+ --ns-space-4: 4px;
55
+ --ns-space-6: 6px;
56
+ --ns-space-8: 8px;
57
+ --ns-space-12: 12px;
58
+ --ns-space-16: 16px;
59
+ --ns-space-20: 20px;
60
+ --ns-space-24: 24px;
61
+ --ns-space-32: 32px;
62
+ --ns-space-40: 40px;
63
+ --ns-space-48: 48px;
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;
84
+ --ns-size-control-sm: 28px;
85
+ --ns-size-control-md: 32px;
86
+ --ns-size-control-lg: 36px;
87
+ --ns-size-control-xl: 44px;
88
+ --ns-size-row-sm: 32px;
89
+ --ns-size-row-md: 36px;
90
+ --ns-size-row-lg: 40px;
91
+ --ns-size-icon-sm: 16px;
92
+ --ns-size-icon-md: 20px;
93
+ --ns-size-icon-lg: 24px;
94
+ --ns-size-target-coarse: 44px;
95
+ --ns-density-compact-control-height: 28px;
96
+ --ns-density-compact-row-height: 32px;
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;
101
+ --ns-density-control-height: 32px;
102
+ --ns-density-row-height: 36px;
103
+ --ns-density-row-padding: 6px;
104
+ --ns-density-card-padding: 20px;
105
+ --ns-density-stack-gap: 12px;
106
+ --ns-density-section-gap: 40px;
107
+ --ns-density-comfortable-control-height: 36px;
108
+ --ns-density-comfortable-row-height: 40px;
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;
113
+ --ns-radius-4: 4px;
114
+ --ns-radius-6: 6px;
115
+ --ns-radius-8: 8px;
116
+ --ns-radius-12: 12px;
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;
124
+ --ns-z-banner: 30;
125
+ --ns-z-dropdown: 40;
126
+ --ns-z-popover: 50;
127
+ --ns-z-sheet: 60;
128
+ --ns-z-dialog: 70;
129
+ --ns-z-toast: 80;
130
+ --ns-z-tooltip: 90;
131
+ --ns-motion-duration-120: 120ms;
132
+ --ns-motion-duration-200: 200ms;
133
+ --ns-motion-duration-320: 320ms;
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;
142
+ --ns-motion-easing-settle: cubic-bezier(0.2, 0, 0, 1);
143
+ --ns-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
144
+ --ns-motion-easing-travel: cubic-bezier(0.4, 0, 0.2, 1);
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;
170
+ --ns-color-ground: #08090C;
171
+ --ns-color-surface-1: #0D0F13;
172
+ --ns-color-surface-2: #14161B;
173
+ --ns-color-surface-3: #1B1E24;
174
+ --ns-color-line-1: #1E2128;
175
+ --ns-color-line-2: #2B2F38;
176
+ --ns-color-text-1: #E8EAEE;
177
+ --ns-color-text-2: #A9AEB8;
178
+ --ns-color-text-3: #848A94;
179
+ --ns-color-signal: #93B4E0;
180
+ --ns-color-signal-fill: #93B4E0;
181
+ --ns-color-signal-wash: rgba(147, 180, 224, 0.12);
182
+ --ns-color-signal-edge: #93B4E0;
183
+ --ns-color-focus: #93B4E0;
184
+ --ns-color-focus-halo: transparent;
185
+ --ns-color-data-star: #E8EAEE;
186
+ --ns-color-data-node: #93B4E0;
187
+ --ns-color-data-band: rgba(147, 180, 224, 0.35);
188
+ --ns-color-data-horizon: #93B4E0;
189
+ --ns-color-data-meridian: #2B2F38;
190
+ --ns-color-data-graticule: #1E2128;
191
+ --ns-color-data-likert-1: #2B2F38;
192
+ --ns-color-data-likert-2: #848A94;
193
+ --ns-color-data-likert-3: #A9AEB8;
194
+ --ns-color-data-likert-4: #93B4E0;
195
+ --ns-color-data-likert-5: #EDF3FB;
196
+ --ns-elevation-1: none;
197
+ --ns-elevation-2: none;
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;
262
+ --ns-button-primary-bg: #93B4E0;
263
+ --ns-button-primary-fg: #06080C;
264
+ --ns-button-primary-hover: #B9CEEA;
265
+ }
266
+
267
+ [data-theme="day"] {
268
+ color-scheme: light;
269
+ --ns-color-ground: #FFFFFF;
270
+ --ns-color-surface-1: #F8F9FA;
271
+ --ns-color-surface-2: #F1F3F5;
272
+ --ns-color-surface-3: #E9ECEF;
273
+ --ns-color-line-1: #E6E8EB;
274
+ --ns-color-line-2: #D4D8DD;
275
+ --ns-color-text-1: #06080C;
276
+ --ns-color-text-2: #464C56;
277
+ --ns-color-text-3: #656A75;
278
+ --ns-color-signal: #2F5D9A;
279
+ --ns-color-signal-fill: #93B4E0;
280
+ --ns-color-signal-wash: #EDF3FB;
281
+ --ns-color-signal-edge: #B9CEEA;
282
+ --ns-color-focus: #2F5D9A;
283
+ --ns-color-focus-halo: rgba(147, 180, 224, 0.35);
284
+ --ns-color-data-star: #06080C;
285
+ --ns-color-data-node: #2F5D9A;
286
+ --ns-color-data-band: rgba(147, 180, 224, 0.35);
287
+ --ns-color-data-horizon: #2F5D9A;
288
+ --ns-color-data-meridian: #D4D8DD;
289
+ --ns-color-data-graticule: #E6E8EB;
290
+ --ns-color-data-likert-1: #E6E8EB;
291
+ --ns-color-data-likert-2: #D4D8DD;
292
+ --ns-color-data-likert-3: #B9CEEA;
293
+ --ns-color-data-likert-4: #93B4E0;
294
+ --ns-color-data-likert-5: #2F5D9A;
295
+ --ns-elevation-1: 0 1px 2px rgba(6, 8, 12, 0.06);
296
+ --ns-elevation-2: 0 4px 12px rgba(6, 8, 12, 0.08);
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;
361
+ --ns-button-primary-bg: #93B4E0;
362
+ --ns-button-primary-fg: #06080C;
363
+ --ns-button-primary-hover: #B9CEEA;
364
+ }
365
+
366
+ @media (prefers-color-scheme: light) {
367
+ :root:not([data-theme]) {
368
+ color-scheme: light;
369
+ --ns-color-ground: #FFFFFF;
370
+ --ns-color-surface-1: #F8F9FA;
371
+ --ns-color-surface-2: #F1F3F5;
372
+ --ns-color-surface-3: #E9ECEF;
373
+ --ns-color-line-1: #E6E8EB;
374
+ --ns-color-line-2: #D4D8DD;
375
+ --ns-color-text-1: #06080C;
376
+ --ns-color-text-2: #464C56;
377
+ --ns-color-text-3: #656A75;
378
+ --ns-color-signal: #2F5D9A;
379
+ --ns-color-signal-fill: #93B4E0;
380
+ --ns-color-signal-wash: #EDF3FB;
381
+ --ns-color-signal-edge: #B9CEEA;
382
+ --ns-color-focus: #2F5D9A;
383
+ --ns-color-focus-halo: rgba(147, 180, 224, 0.35);
384
+ --ns-color-data-star: #06080C;
385
+ --ns-color-data-node: #2F5D9A;
386
+ --ns-color-data-band: rgba(147, 180, 224, 0.35);
387
+ --ns-color-data-horizon: #2F5D9A;
388
+ --ns-color-data-meridian: #D4D8DD;
389
+ --ns-color-data-graticule: #E6E8EB;
390
+ --ns-color-data-likert-1: #E6E8EB;
391
+ --ns-color-data-likert-2: #D4D8DD;
392
+ --ns-color-data-likert-3: #B9CEEA;
393
+ --ns-color-data-likert-4: #93B4E0;
394
+ --ns-color-data-likert-5: #2F5D9A;
395
+ --ns-elevation-1: 0 1px 2px rgba(6, 8, 12, 0.06);
396
+ --ns-elevation-2: 0 4px 12px rgba(6, 8, 12, 0.08);
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;
461
+ --ns-button-primary-bg: #93B4E0;
462
+ --ns-button-primary-fg: #06080C;
463
+ --ns-button-primary-hover: #B9CEEA;
464
+ }
465
+ }
466
+
467
+ @media (prefers-reduced-motion: reduce) {
468
+ :root {
469
+ --ns-motion-duration-120: 0ms;
470
+ --ns-motion-duration-200: 0ms;
471
+ --ns-motion-duration-320: 0ms;
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);
490
+ }
491
+ }