@assure-one/design-system 0.1.1 → 0.4.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 (8) hide show
  1. package/dist/index.d.ts +1264 -428
  2. package/dist/index.js +7025 -5229
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/dist/tokens/index.d.ts +259 -300
  6. package/dist/tokens/index.js +173 -181
  7. package/dist/tokens/index.js.map +1 -1
  8. package/package.json +42 -3
package/dist/tokens/index.d.ts CHANGED
@@ -1,83 +1,58 @@
1
1
  /**
2
- * Reference tokens — Notion's named palette. Programmatic access for theme
3
- * switching, Figma sync, design tools, etc. Components should NOT consume
4
- * these directly; use system tokens (./system.ts) instead.
2
+ * Reference tokens — Assure Pro raw palette.
5
3
  *
6
- * Source: Notion design system reference (refero.design).
7
- * Brand colors will diverge later — only `system.ts` should change.
4
+ * Programmatic access for theme switching, Figma sync, design tools, etc.
5
+ * Components should NOT consume these directly; use system tokens (./system.ts)
6
+ * or the CSS variables in ./tokens.css.
7
+ *
8
+ * Source: assure-pro-spec/mockups/_shared.css
8
9
  */
9
10
  declare const colors: {
10
- readonly midnightInk: "#02093a";
11
- readonly canvasDark: "#000000";
12
- readonly ghostWhite: "#f6f5f4";
13
- readonly paperWhite: "#ffffff";
14
- readonly deepGraphite: "#0b0b0b";
15
- readonly blueFrost: "#62aef0";
16
- readonly oceanGlimmer: "#0075de";
17
- readonly skySurge: "#097fe8";
18
- readonly actionIndigo: "#455dd3";
19
- readonly alertRed: "#f77463";
20
- readonly teamTeal: "#2a9d99";
21
- readonly sunnyYellow: "#ffc95e";
22
- readonly warmUmber: "#b18164";
23
- readonly coralBurst: "#ff8a33";
24
- readonly fuchsiaFlare: "#ff83dd";
25
- readonly grapeGlow: "#ad6ded";
26
- readonly harvestGold: "#ffb110";
27
- readonly hotChili: "#f64932";
28
- readonly forestGreen: "#1aae39";
29
- readonly coolGray: "#c6c6c5";
30
- readonly deepSlate: "#615d59";
31
- readonly inputBorderGray: "#dddddd";
32
- readonly offWhite: "#f2f9ff";
11
+ readonly bg: "#FDFDFC";
12
+ readonly bg2: "#F7F7F5";
13
+ readonly bg3: "#F0F0ED";
14
+ readonly surface: "#FFFFFF";
15
+ readonly surface2: "#FAFAF8";
16
+ readonly fg: "#0A0A0A";
17
+ readonly fg2: "#38383B";
18
+ readonly fg3: "#6B6B70";
19
+ readonly fg4: "#9A9AA0";
20
+ readonly fg5: "#C4C4C8";
21
+ readonly rule: "#EAEAE6";
22
+ readonly ruleSoft: "#F0F0EC";
23
+ readonly ruleStrong: "#DADAD4";
24
+ readonly accent: "#0066FF";
25
+ readonly accent2: "#0052CC";
26
+ readonly accentTint: "#E8F0FF";
27
+ readonly accentHover: "#005BE6";
28
+ readonly accentActive: "#004FCC";
29
+ readonly proBg: "#F4F1FF";
30
+ readonly proBgHover: "#EEE9FF";
31
+ readonly proBgActive: "#E4DDFF";
32
+ readonly proFg: "#6C42F8";
33
+ readonly proHover: "#5E35F2";
34
+ readonly proActive: "#5127E8";
35
+ readonly proDisabled: "#B7A7F3";
36
+ readonly proLine: "#7B5BD8";
37
+ readonly fgDisabled: "#A7A7AC";
38
+ readonly bgDisabled: "#F3F3F1";
39
+ readonly successFg: "#1F7A3D";
40
+ readonly successBg: "#EAF6EE";
41
+ readonly successLine: "#C5E5CF";
42
+ readonly warningFg: "#B45F0A";
43
+ readonly warningBg: "#FFF3E5";
44
+ readonly warningLine: "#F5D5A8";
45
+ readonly dangerFg: "#C43838";
46
+ readonly dangerBg: "#FBEAEA";
47
+ readonly dangerLine: "#ECC5C5";
48
+ readonly fgOnAccent: "#FFFFFF";
49
+ readonly fgOnPro: "#FFFFFF";
33
50
  };
34
51
  declare const typography: {
35
52
  readonly family: {
36
- readonly sans: "'NotionInter', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
37
- readonly serif: "'Lyon Text', Georgia, ui-serif, serif";
38
- readonly mono: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace";
39
- };
40
- readonly scale: {
41
- readonly caption: {
42
- readonly size: "12px";
43
- readonly leading: 1.5;
44
- readonly tracking: "0.01px";
45
- };
46
- readonly bodySm: {
47
- readonly size: "14px";
48
- readonly leading: 1.43;
49
- readonly tracking: "-0.006px";
50
- };
51
- readonly body: {
52
- readonly size: "15px";
53
- readonly leading: 1.33;
54
- readonly tracking: "-0.006px";
55
- };
56
- readonly subheading: {
57
- readonly size: "20px";
58
- readonly leading: 1.35;
59
- readonly tracking: "-0.011px";
60
- };
61
- readonly headingSm: {
62
- readonly size: "22px";
63
- readonly leading: 1.33;
64
- readonly tracking: "-0.024px";
65
- };
66
- readonly heading: {
67
- readonly size: "26px";
68
- readonly leading: 1.27;
69
- readonly tracking: "-0.033px";
70
- };
71
- readonly headingLg: {
72
- readonly size: "40px";
73
- readonly leading: 1.23;
74
- readonly tracking: "-0.035px";
75
- };
76
- readonly display: {
77
- readonly size: "64px";
78
- readonly leading: 0.83;
79
- readonly tracking: "-0.036px";
80
- };
53
+ readonly display: "\"Geist\", \"Inter\", -apple-system, system-ui, sans-serif";
54
+ readonly body: "\"Inter\", -apple-system, system-ui, sans-serif";
55
+ readonly mono: "\"Geist Mono\", \"JetBrains Mono\", ui-monospace, monospace";
81
56
  };
82
57
  readonly weight: {
83
58
  readonly regular: 400;
@@ -85,7 +60,35 @@ declare const typography: {
85
60
  readonly semibold: 600;
86
61
  readonly bold: 700;
87
62
  };
63
+ readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
64
+ };
65
+ declare const radii: {
66
+ readonly btn: "7px";
67
+ readonly input: "7px";
68
+ readonly pill: "5px";
69
+ readonly card: "12px";
70
+ readonly icon: "4px";
71
+ readonly full: "9999px";
72
+ };
73
+ declare const shadows: {
74
+ readonly quiet: "0 1px 2px rgba(10,10,10,0.03)";
75
+ readonly card: "0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)";
76
+ readonly pop: "0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)";
77
+ readonly focusRing: "0 0 0 2px rgba(0, 102, 255, 0.18)";
88
78
  };
79
+ declare const overlays: {
80
+ readonly hover: "rgba(10, 10, 10, 0.03)";
81
+ readonly active: "rgba(10, 10, 10, 0.05)";
82
+ };
83
+ declare const layout: {
84
+ readonly shellSidebarWidth: "256px";
85
+ readonly shellHeaderHeight: "56px";
86
+ readonly contentPad: "32px";
87
+ };
88
+ /**
89
+ * Spacing — 4px base scale. Assure Pro uses arbitrary values in most cases;
90
+ * this scale is exposed for programmatic access (e.g. design-tool sync).
91
+ */
89
92
  declare const spacing: {
90
93
  readonly unit: "4px";
91
94
  readonly 4: "4px";
@@ -102,99 +105,77 @@ declare const spacing: {
102
105
  readonly 80: "80px";
103
106
  readonly 180: "180px";
104
107
  };
105
- declare const radii: {
106
- readonly md: "5px";
107
- readonly lg: "8px";
108
- readonly xl: "12px";
109
- readonly full: "9999px";
110
- readonly cards: "12px";
111
- readonly badges: "9999px";
112
- readonly inputs: "4px";
113
- readonly buttons: "8px";
114
- readonly general: "5px";
115
- };
116
- declare const shadows: {
117
- readonly subtle: "rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px";
118
- };
108
+ /**
109
+ * Surface palette — the four canonical layers. Mirrors --color-bg / -2 /
110
+ * --color-surface / --color-surface-2.
111
+ */
119
112
  declare const surfaces: {
120
- readonly canvasDark: "#000000";
121
- readonly midnightInk: "#02093a";
122
- readonly paperWhite: "#ffffff";
123
- readonly ghostWhite: "#f6f5f4";
113
+ readonly bg: "#FDFDFC";
114
+ readonly bg2: "#F7F7F5";
115
+ readonly surface: "#FFFFFF";
116
+ readonly surface2: "#FAFAF8";
117
+ };
118
+ declare const motion: {
119
+ readonly ease: {
120
+ readonly outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)";
121
+ readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
122
+ readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
123
+ readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
124
+ };
125
+ readonly duration: {
126
+ readonly instant: "100ms";
127
+ readonly fast: "150ms";
128
+ readonly normal: "250ms";
129
+ readonly slow: "400ms";
130
+ };
124
131
  };
125
132
  declare const reference: {
126
133
  readonly colors: {
127
- readonly midnightInk: "#02093a";
128
- readonly canvasDark: "#000000";
129
- readonly ghostWhite: "#f6f5f4";
130
- readonly paperWhite: "#ffffff";
131
- readonly deepGraphite: "#0b0b0b";
132
- readonly blueFrost: "#62aef0";
133
- readonly oceanGlimmer: "#0075de";
134
- readonly skySurge: "#097fe8";
135
- readonly actionIndigo: "#455dd3";
136
- readonly alertRed: "#f77463";
137
- readonly teamTeal: "#2a9d99";
138
- readonly sunnyYellow: "#ffc95e";
139
- readonly warmUmber: "#b18164";
140
- readonly coralBurst: "#ff8a33";
141
- readonly fuchsiaFlare: "#ff83dd";
142
- readonly grapeGlow: "#ad6ded";
143
- readonly harvestGold: "#ffb110";
144
- readonly hotChili: "#f64932";
145
- readonly forestGreen: "#1aae39";
146
- readonly coolGray: "#c6c6c5";
147
- readonly deepSlate: "#615d59";
148
- readonly inputBorderGray: "#dddddd";
149
- readonly offWhite: "#f2f9ff";
134
+ readonly bg: "#FDFDFC";
135
+ readonly bg2: "#F7F7F5";
136
+ readonly bg3: "#F0F0ED";
137
+ readonly surface: "#FFFFFF";
138
+ readonly surface2: "#FAFAF8";
139
+ readonly fg: "#0A0A0A";
140
+ readonly fg2: "#38383B";
141
+ readonly fg3: "#6B6B70";
142
+ readonly fg4: "#9A9AA0";
143
+ readonly fg5: "#C4C4C8";
144
+ readonly rule: "#EAEAE6";
145
+ readonly ruleSoft: "#F0F0EC";
146
+ readonly ruleStrong: "#DADAD4";
147
+ readonly accent: "#0066FF";
148
+ readonly accent2: "#0052CC";
149
+ readonly accentTint: "#E8F0FF";
150
+ readonly accentHover: "#005BE6";
151
+ readonly accentActive: "#004FCC";
152
+ readonly proBg: "#F4F1FF";
153
+ readonly proBgHover: "#EEE9FF";
154
+ readonly proBgActive: "#E4DDFF";
155
+ readonly proFg: "#6C42F8";
156
+ readonly proHover: "#5E35F2";
157
+ readonly proActive: "#5127E8";
158
+ readonly proDisabled: "#B7A7F3";
159
+ readonly proLine: "#7B5BD8";
160
+ readonly fgDisabled: "#A7A7AC";
161
+ readonly bgDisabled: "#F3F3F1";
162
+ readonly successFg: "#1F7A3D";
163
+ readonly successBg: "#EAF6EE";
164
+ readonly successLine: "#C5E5CF";
165
+ readonly warningFg: "#B45F0A";
166
+ readonly warningBg: "#FFF3E5";
167
+ readonly warningLine: "#F5D5A8";
168
+ readonly dangerFg: "#C43838";
169
+ readonly dangerBg: "#FBEAEA";
170
+ readonly dangerLine: "#ECC5C5";
171
+ readonly fgOnAccent: "#FFFFFF";
172
+ readonly fgOnPro: "#FFFFFF";
150
173
  };
151
174
  readonly typography: {
152
175
  readonly family: {
153
- readonly sans: "'NotionInter', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
154
- readonly serif: "'Lyon Text', Georgia, ui-serif, serif";
155
- readonly mono: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace";
156
- };
157
- readonly scale: {
158
- readonly caption: {
159
- readonly size: "12px";
160
- readonly leading: 1.5;
161
- readonly tracking: "0.01px";
162
- };
163
- readonly bodySm: {
164
- readonly size: "14px";
165
- readonly leading: 1.43;
166
- readonly tracking: "-0.006px";
167
- };
168
- readonly body: {
169
- readonly size: "15px";
170
- readonly leading: 1.33;
171
- readonly tracking: "-0.006px";
172
- };
173
- readonly subheading: {
174
- readonly size: "20px";
175
- readonly leading: 1.35;
176
- readonly tracking: "-0.011px";
177
- };
178
- readonly headingSm: {
179
- readonly size: "22px";
180
- readonly leading: 1.33;
181
- readonly tracking: "-0.024px";
182
- };
183
- readonly heading: {
184
- readonly size: "26px";
185
- readonly leading: 1.27;
186
- readonly tracking: "-0.033px";
187
- };
188
- readonly headingLg: {
189
- readonly size: "40px";
190
- readonly leading: 1.23;
191
- readonly tracking: "-0.035px";
192
- };
193
- readonly display: {
194
- readonly size: "64px";
195
- readonly leading: 0.83;
196
- readonly tracking: "-0.036px";
197
- };
176
+ readonly display: "\"Geist\", \"Inter\", -apple-system, system-ui, sans-serif";
177
+ readonly body: "\"Inter\", -apple-system, system-ui, sans-serif";
178
+ readonly mono: "\"Geist Mono\", \"JetBrains Mono\", ui-monospace, monospace";
198
179
  };
199
180
  readonly weight: {
200
181
  readonly regular: 400;
@@ -202,6 +183,44 @@ declare const reference: {
202
183
  readonly semibold: 600;
203
184
  readonly bold: 700;
204
185
  };
186
+ readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
187
+ };
188
+ readonly radii: {
189
+ readonly btn: "7px";
190
+ readonly input: "7px";
191
+ readonly pill: "5px";
192
+ readonly card: "12px";
193
+ readonly icon: "4px";
194
+ readonly full: "9999px";
195
+ };
196
+ readonly shadows: {
197
+ readonly quiet: "0 1px 2px rgba(10,10,10,0.03)";
198
+ readonly card: "0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)";
199
+ readonly pop: "0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)";
200
+ readonly focusRing: "0 0 0 2px rgba(0, 102, 255, 0.18)";
201
+ };
202
+ readonly overlays: {
203
+ readonly hover: "rgba(10, 10, 10, 0.03)";
204
+ readonly active: "rgba(10, 10, 10, 0.05)";
205
+ };
206
+ readonly layout: {
207
+ readonly shellSidebarWidth: "256px";
208
+ readonly shellHeaderHeight: "56px";
209
+ readonly contentPad: "32px";
210
+ };
211
+ readonly motion: {
212
+ readonly ease: {
213
+ readonly outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)";
214
+ readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
215
+ readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
216
+ readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
217
+ };
218
+ readonly duration: {
219
+ readonly instant: "100ms";
220
+ readonly fast: "150ms";
221
+ readonly normal: "250ms";
222
+ readonly slow: "400ms";
223
+ };
205
224
  };
206
225
  readonly spacing: {
207
226
  readonly unit: "4px";
@@ -219,117 +238,90 @@ declare const reference: {
219
238
  readonly 80: "80px";
220
239
  readonly 180: "180px";
221
240
  };
222
- readonly radii: {
223
- readonly md: "5px";
224
- readonly lg: "8px";
225
- readonly xl: "12px";
226
- readonly full: "9999px";
227
- readonly cards: "12px";
228
- readonly badges: "9999px";
229
- readonly inputs: "4px";
230
- readonly buttons: "8px";
231
- readonly general: "5px";
232
- };
233
- readonly shadows: {
234
- readonly subtle: "rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px";
235
- };
236
241
  readonly surfaces: {
237
- readonly canvasDark: "#000000";
238
- readonly midnightInk: "#02093a";
239
- readonly paperWhite: "#ffffff";
240
- readonly ghostWhite: "#f6f5f4";
242
+ readonly bg: "#FDFDFC";
243
+ readonly bg2: "#F7F7F5";
244
+ readonly surface: "#FFFFFF";
245
+ readonly surface2: "#FAFAF8";
241
246
  };
242
247
  };
243
248
  type ReferenceTokens = typeof reference;
244
249
  type ColorName = keyof typeof colors;
245
250
 
246
251
  /**
247
- * System tokens — semantic mappings. These are the names components use.
248
- * Re-mapped per theme via `.dark` class. The CSS variable equivalents
249
- * live in `./tokens.css`.
252
+ * System tokens — Assure Pro semantic mappings as CSS variable references.
253
+ *
254
+ * Use these from JS (e.g. inline styles, Storybook decorators, motion configs)
255
+ * when you can't use a Tailwind utility class. Component CSS should prefer the
256
+ * generated utilities (`bg-bg`, `text-fg-2`, `border-rule`, `bg-pro-fg`, etc.)
257
+ * which Tailwind 4 emits from `--color-*` tokens declared in ./tokens.css.
258
+ *
259
+ * Themes (.dark) re-map the underlying CSS variables; these references stay valid.
250
260
  */
251
261
  declare const systemTokens: {
252
262
  readonly color: {
253
- readonly canvas: "var(--color-canvas)";
263
+ readonly bg: "var(--color-bg)";
264
+ readonly bg2: "var(--color-bg-2)";
265
+ readonly bg3: "var(--color-bg-3)";
254
266
  readonly surface: "var(--color-surface)";
255
- readonly surfaceRaised: "var(--color-surface-raised)";
256
- readonly surfaceSunken: "var(--color-surface-sunken)";
257
- readonly surfaceOverlay: "var(--color-surface-overlay)";
267
+ readonly surface2: "var(--color-surface-2)";
258
268
  readonly fg: "var(--color-fg)";
259
- readonly fgStrong: "var(--color-fg-strong)";
260
- readonly fgMuted: "var(--color-fg-muted)";
261
- readonly fgSubtle: "var(--color-fg-subtle)";
269
+ readonly fg2: "var(--color-fg-2)";
270
+ readonly fg3: "var(--color-fg-3)";
271
+ readonly fg4: "var(--color-fg-4)";
272
+ readonly fg5: "var(--color-fg-5)";
273
+ readonly rule: "var(--color-rule)";
274
+ readonly ruleSoft: "var(--color-rule-soft)";
275
+ readonly ruleStrong: "var(--color-rule-strong)";
276
+ readonly accent: "var(--color-accent)";
277
+ readonly accent2: "var(--color-accent-2)";
278
+ readonly accentTint: "var(--color-accent-tint)";
279
+ readonly accentHover: "var(--color-accent-hover)";
280
+ readonly accentActive: "var(--color-accent-active)";
281
+ readonly accentRing: "var(--color-accent-ring)";
282
+ readonly proBg: "var(--color-pro-bg)";
283
+ readonly proBgHover: "var(--color-pro-bg-hover)";
284
+ readonly proBgActive: "var(--color-pro-bg-active)";
285
+ readonly proFg: "var(--color-pro-fg)";
286
+ readonly proHover: "var(--color-pro-hover)";
287
+ readonly proActive: "var(--color-pro-active)";
288
+ readonly proDisabled: "var(--color-pro-disabled)";
289
+ readonly proLine: "var(--color-pro-line)";
290
+ readonly proRing: "var(--color-pro-ring)";
291
+ readonly fgOnAccent: "var(--color-fg-on-accent)";
292
+ readonly fgOnPro: "var(--color-fg-on-pro)";
262
293
  readonly fgDisabled: "var(--color-fg-disabled)";
263
- readonly fgOnBrand: "var(--color-fg-on-brand)";
264
- readonly fgOnDark: "var(--color-fg-on-dark)";
265
- readonly fgOnLight: "var(--color-fg-on-light)";
266
- readonly border: "var(--color-border)";
267
- readonly borderStrong: "var(--color-border-strong)";
268
- readonly borderInput: "var(--color-border-input)";
269
- readonly borderFocus: "var(--color-border-focus)";
270
- readonly brand: "var(--color-brand)";
271
- readonly brandHover: "var(--color-brand-hover)";
272
- readonly brandActive: "var(--color-brand-active)";
273
- readonly brandFg: "var(--color-brand-fg)";
274
- readonly link: "var(--color-link)";
275
- readonly linkHover: "var(--color-link-hover)";
276
- readonly success: "var(--color-success)";
277
- readonly successSubtle: "var(--color-success-subtle)";
294
+ readonly bgDisabled: "var(--color-bg-disabled)";
295
+ readonly overlayHover: "var(--color-overlay-hover)";
296
+ readonly overlayActive: "var(--color-overlay-active)";
278
297
  readonly successFg: "var(--color-success-fg)";
279
- readonly warning: "var(--color-warning)";
280
- readonly warningSubtle: "var(--color-warning-subtle)";
298
+ readonly successBg: "var(--color-success-bg)";
299
+ readonly successLine: "var(--color-success-line)";
281
300
  readonly warningFg: "var(--color-warning-fg)";
282
- readonly danger: "var(--color-danger)";
283
- readonly dangerSubtle: "var(--color-danger-subtle)";
301
+ readonly warningBg: "var(--color-warning-bg)";
302
+ readonly warningLine: "var(--color-warning-line)";
284
303
  readonly dangerFg: "var(--color-danger-fg)";
285
- readonly info: "var(--color-info)";
286
- readonly infoSubtle: "var(--color-info-subtle)";
287
- readonly infoFg: "var(--color-info-fg)";
288
- readonly accentCoral: "var(--color-accent-coral)";
289
- readonly accentFuchsia: "var(--color-accent-fuchsia)";
290
- readonly accentGrape: "var(--color-accent-grape)";
291
- readonly accentTeal: "var(--color-accent-teal)";
292
- readonly accentSunny: "var(--color-accent-sunny)";
293
- readonly accentUmber: "var(--color-accent-umber)";
294
- readonly accentFrost: "var(--color-accent-frost)";
295
- };
296
- readonly radius: {
297
- readonly md: "var(--radius-md)";
298
- readonly lg: "var(--radius-lg)";
299
- readonly xl: "var(--radius-xl)";
300
- readonly full: "var(--radius-full)";
301
- readonly cards: "var(--radius-cards)";
302
- readonly badges: "var(--radius-badges)";
303
- readonly inputs: "var(--radius-inputs)";
304
- readonly buttons: "var(--radius-buttons)";
305
- readonly general: "var(--radius-general)";
304
+ readonly dangerBg: "var(--color-danger-bg)";
305
+ readonly dangerLine: "var(--color-danger-line)";
306
306
  };
307
307
  readonly shadow: {
308
- readonly subtle: "var(--shadow-subtle)";
309
- readonly focus: "var(--shadow-focus)";
308
+ readonly quiet: "var(--shadow-quiet)";
309
+ readonly card: "var(--shadow-card)";
310
+ readonly pop: "var(--shadow-pop)";
311
+ readonly focusRing: "var(--shadow-focus-ring)";
310
312
  };
311
- readonly spacing: {
312
- readonly 4: "var(--spacing-4)";
313
- readonly 8: "var(--spacing-8)";
314
- readonly 12: "var(--spacing-12)";
315
- readonly 16: "var(--spacing-16)";
316
- readonly 20: "var(--spacing-20)";
317
- readonly 24: "var(--spacing-24)";
318
- readonly 28: "var(--spacing-28)";
319
- readonly 32: "var(--spacing-32)";
320
- readonly 36: "var(--spacing-36)";
321
- readonly 40: "var(--spacing-40)";
322
- readonly 64: "var(--spacing-64)";
323
- readonly 80: "var(--spacing-80)";
324
- readonly 180: "var(--spacing-180)";
325
- readonly sectionGap: "var(--section-gap)";
326
- readonly cardPadding: "var(--card-padding)";
327
- readonly elementGap: "var(--element-gap)";
313
+ readonly radius: {
314
+ readonly btn: "var(--radius-btn)";
315
+ readonly input: "var(--radius-input)";
316
+ readonly pill: "var(--radius-pill)";
317
+ readonly card: "var(--radius-card)";
318
+ readonly icon: "var(--radius-icon)";
319
+ readonly full: "var(--radius-full)";
328
320
  };
329
321
  readonly type: {
330
322
  readonly family: {
331
- readonly sans: "var(--font-sans)";
332
- readonly serif: "var(--font-serif)";
323
+ readonly display: "var(--font-display)";
324
+ readonly body: "var(--font-body)";
333
325
  readonly mono: "var(--font-mono)";
334
326
  };
335
327
  readonly weight: {
@@ -338,59 +330,26 @@ declare const systemTokens: {
338
330
  readonly semibold: "var(--font-weight-semibold)";
339
331
  readonly bold: "var(--font-weight-bold)";
340
332
  };
341
- readonly role: {
342
- readonly caption: {
343
- readonly size: "var(--text-caption)";
344
- readonly leading: "var(--leading-caption)";
345
- readonly tracking: "var(--tracking-caption)";
346
- };
347
- readonly bodySm: {
348
- readonly size: "var(--text-body-sm)";
349
- readonly leading: "var(--leading-body-sm)";
350
- readonly tracking: "var(--tracking-body-sm)";
351
- };
352
- readonly body: {
353
- readonly size: "var(--text-body)";
354
- readonly leading: "var(--leading-body)";
355
- readonly tracking: "var(--tracking-body)";
356
- };
357
- readonly subheading: {
358
- readonly size: "var(--text-subheading)";
359
- readonly leading: "var(--leading-subheading)";
360
- readonly tracking: "var(--tracking-subheading)";
361
- };
362
- readonly headingSm: {
363
- readonly size: "var(--text-heading-sm)";
364
- readonly leading: "var(--leading-heading-sm)";
365
- readonly tracking: "var(--tracking-heading-sm)";
366
- };
367
- readonly heading: {
368
- readonly size: "var(--text-heading)";
369
- readonly leading: "var(--leading-heading)";
370
- readonly tracking: "var(--tracking-heading)";
371
- };
372
- readonly headingLg: {
373
- readonly size: "var(--text-heading-lg)";
374
- readonly leading: "var(--leading-heading-lg)";
375
- readonly tracking: "var(--tracking-heading-lg)";
376
- };
377
- readonly display: {
378
- readonly size: "var(--text-display)";
379
- readonly leading: "var(--leading-display)";
380
- readonly tracking: "var(--tracking-display)";
381
- };
382
- };
383
333
  };
384
- readonly duration: {
385
- readonly instant: "var(--duration-instant)";
386
- readonly fast: "var(--duration-fast)";
387
- readonly normal: "var(--duration-normal)";
388
- readonly slow: "var(--duration-slow)";
334
+ readonly motion: {
335
+ readonly ease: {
336
+ readonly outQuart: "var(--ease-out-quart)";
337
+ readonly out: "var(--ease-out)";
338
+ readonly in: "var(--ease-in)";
339
+ readonly inOut: "var(--ease-in-out)";
340
+ };
341
+ readonly duration: {
342
+ readonly instant: "var(--duration-instant)";
343
+ readonly fast: "var(--duration-fast)";
344
+ readonly normal: "var(--duration-normal)";
345
+ readonly slow: "var(--duration-slow)";
346
+ };
389
347
  };
390
- readonly ease: {
391
- readonly out: "var(--ease-out)";
392
- readonly in: "var(--ease-in)";
393
- readonly inOut: "var(--ease-in-out)";
348
+ readonly layout: {
349
+ readonly shellSidebarWidth: "var(--shell-sidebar-w)";
350
+ readonly shellSidebarRailWidth: "var(--shell-sidebar-w-rail)";
351
+ readonly shellHeaderHeight: "var(--shell-header-h)";
352
+ readonly contentPad: "var(--content-pad)";
394
353
  };
395
354
  readonly z: {
396
355
  readonly base: "var(--z-base)";
@@ -404,4 +363,4 @@ declare const systemTokens: {
404
363
  };
405
364
  type SystemTokens = typeof systemTokens;
406
365
 
407
- export { type ColorName, type ReferenceTokens, type SystemTokens, colors, radii, reference, shadows, spacing, surfaces, systemTokens, typography };
366
+ export { type ColorName, type ReferenceTokens, type SystemTokens, colors, layout, motion, overlays, radii, reference, shadows, spacing, surfaces, systemTokens, typography };