@assure-one/design-system 0.1.1 → 0.3.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 +1161 -428
  2. package/dist/index.js +6114 -4845
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/dist/tokens/index.d.ts +258 -300
  6. package/dist/tokens/index.js +172 -181
  7. package/dist/tokens/index.js.map +1 -1
  8. package/package.json +42 -3
package/dist/tokens/index.js CHANGED
@@ -1,51 +1,90 @@
1
1
  // src/tokens/reference.ts
2
2
  var colors = {
3
- midnightInk: "#02093a",
4
- canvasDark: "#000000",
5
- ghostWhite: "#f6f5f4",
6
- paperWhite: "#ffffff",
7
- deepGraphite: "#0b0b0b",
8
- blueFrost: "#62aef0",
9
- oceanGlimmer: "#0075de",
10
- skySurge: "#097fe8",
11
- actionIndigo: "#455dd3",
12
- alertRed: "#f77463",
13
- teamTeal: "#2a9d99",
14
- sunnyYellow: "#ffc95e",
15
- warmUmber: "#b18164",
16
- coralBurst: "#ff8a33",
17
- fuchsiaFlare: "#ff83dd",
18
- grapeGlow: "#ad6ded",
19
- harvestGold: "#ffb110",
20
- hotChili: "#f64932",
21
- forestGreen: "#1aae39",
22
- coolGray: "#c6c6c5",
23
- deepSlate: "#615d59",
24
- inputBorderGray: "#dddddd",
25
- offWhite: "#f2f9ff"
3
+ /* Surfaces */
4
+ bg: "#FDFDFC",
5
+ bg2: "#F7F7F5",
6
+ bg3: "#F0F0ED",
7
+ surface: "#FFFFFF",
8
+ surface2: "#FAFAF8",
9
+ /* Foreground */
10
+ fg: "#0A0A0A",
11
+ fg2: "#38383B",
12
+ fg3: "#6B6B70",
13
+ fg4: "#9A9AA0",
14
+ fg5: "#C4C4C8",
15
+ /* Rules */
16
+ rule: "#EAEAE6",
17
+ ruleSoft: "#F0F0EC",
18
+ ruleStrong: "#DADAD4",
19
+ /* Accent (cyan) */
20
+ accent: "#0066FF",
21
+ accent2: "#0052CC",
22
+ accentTint: "#E8F0FF",
23
+ accentHover: "#005BE6",
24
+ accentActive: "#004FCC",
25
+ /* Pro (purple) */
26
+ proBg: "#F4F1FF",
27
+ proBgHover: "#EEE9FF",
28
+ proBgActive: "#E4DDFF",
29
+ proFg: "#6C42F8",
30
+ proHover: "#5E35F2",
31
+ proActive: "#5127E8",
32
+ proDisabled: "#B7A7F3",
33
+ proLine: "#7B5BD8",
34
+ /* Disabled */
35
+ fgDisabled: "#A7A7AC",
36
+ bgDisabled: "#F3F3F1",
37
+ /* Status */
38
+ successFg: "#1F7A3D",
39
+ successBg: "#EAF6EE",
40
+ successLine: "#C5E5CF",
41
+ warningFg: "#B45F0A",
42
+ warningBg: "#FFF3E5",
43
+ warningLine: "#F5D5A8",
44
+ dangerFg: "#C43838",
45
+ dangerBg: "#FBEAEA",
46
+ dangerLine: "#ECC5C5",
47
+ /* On-brand */
48
+ fgOnAccent: "#FFFFFF",
49
+ fgOnPro: "#FFFFFF"
26
50
  };
27
51
  var typography = {
28
52
  family: {
29
- sans: "'NotionInter', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
30
- serif: "'Lyon Text', Georgia, ui-serif, serif",
31
- mono: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace"
32
- },
33
- scale: {
34
- caption: { size: "12px", leading: 1.5, tracking: "0.01px" },
35
- bodySm: { size: "14px", leading: 1.43, tracking: "-0.006px" },
36
- body: { size: "15px", leading: 1.33, tracking: "-0.006px" },
37
- subheading: { size: "20px", leading: 1.35, tracking: "-0.011px" },
38
- headingSm: { size: "22px", leading: 1.33, tracking: "-0.024px" },
39
- heading: { size: "26px", leading: 1.27, tracking: "-0.033px" },
40
- headingLg: { size: "40px", leading: 1.23, tracking: "-0.035px" },
41
- display: { size: "64px", leading: 0.83, tracking: "-0.036px" }
53
+ display: '"Geist", "Inter", -apple-system, system-ui, sans-serif',
54
+ body: '"Inter", -apple-system, system-ui, sans-serif',
55
+ mono: '"Geist Mono", "JetBrains Mono", ui-monospace, monospace'
42
56
  },
43
57
  weight: {
44
58
  regular: 400,
45
59
  medium: 500,
46
60
  semibold: 600,
47
61
  bold: 700
48
- }
62
+ },
63
+ /* Universal entrance ease — applies to every motion primitive */
64
+ ease: "cubic-bezier(0.2, 0.8, 0.2, 1)"
65
+ };
66
+ var radii = {
67
+ btn: "7px",
68
+ input: "7px",
69
+ pill: "5px",
70
+ card: "12px",
71
+ icon: "4px",
72
+ full: "9999px"
73
+ };
74
+ var shadows = {
75
+ quiet: "0 1px 2px rgba(10,10,10,0.03)",
76
+ card: "0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)",
77
+ pop: "0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)",
78
+ focusRing: "0 0 0 2px rgba(0, 102, 255, 0.18)"
79
+ };
80
+ var overlays = {
81
+ hover: "rgba(10, 10, 10, 0.03)",
82
+ active: "rgba(10, 10, 10, 0.05)"
83
+ };
84
+ var layout = {
85
+ shellSidebarWidth: "256px",
86
+ shellHeaderHeight: "56px",
87
+ contentPad: "32px"
49
88
  };
50
89
  var spacing = {
51
90
  unit: "4px",
@@ -63,32 +102,35 @@ var spacing = {
63
102
  80: "80px",
64
103
  180: "180px"
65
104
  };
66
- var radii = {
67
- md: "5px",
68
- lg: "8px",
69
- xl: "12px",
70
- full: "9999px",
71
- cards: "12px",
72
- badges: "9999px",
73
- inputs: "4px",
74
- buttons: "8px",
75
- general: "5px"
76
- };
77
- var shadows = {
78
- 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"
79
- };
80
105
  var surfaces = {
81
- canvasDark: "#000000",
82
- midnightInk: "#02093a",
83
- paperWhite: "#ffffff",
84
- ghostWhite: "#f6f5f4"
106
+ bg: "#FDFDFC",
107
+ bg2: "#F7F7F5",
108
+ surface: "#FFFFFF",
109
+ surface2: "#FAFAF8"
110
+ };
111
+ var motion = {
112
+ ease: {
113
+ outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)",
114
+ out: "cubic-bezier(0.16, 1, 0.3, 1)",
115
+ in: "cubic-bezier(0.7, 0, 0.84, 0)",
116
+ inOut: "cubic-bezier(0.65, 0, 0.35, 1)"
117
+ },
118
+ duration: {
119
+ instant: "100ms",
120
+ fast: "150ms",
121
+ normal: "250ms",
122
+ slow: "400ms"
123
+ }
85
124
  };
86
125
  var reference = {
87
126
  colors,
88
127
  typography,
89
- spacing,
90
128
  radii,
91
129
  shadows,
130
+ overlays,
131
+ layout,
132
+ motion,
133
+ spacing,
92
134
  surfaces
93
135
  };
94
136
 
@@ -96,93 +138,76 @@ var reference = {
96
138
  var systemTokens = {
97
139
  color: {
98
140
  /* Surfaces */
99
- canvas: "var(--color-canvas)",
141
+ bg: "var(--color-bg)",
142
+ bg2: "var(--color-bg-2)",
143
+ bg3: "var(--color-bg-3)",
100
144
  surface: "var(--color-surface)",
101
- surfaceRaised: "var(--color-surface-raised)",
102
- surfaceSunken: "var(--color-surface-sunken)",
103
- surfaceOverlay: "var(--color-surface-overlay)",
145
+ surface2: "var(--color-surface-2)",
104
146
  /* Foreground */
105
147
  fg: "var(--color-fg)",
106
- fgStrong: "var(--color-fg-strong)",
107
- fgMuted: "var(--color-fg-muted)",
108
- fgSubtle: "var(--color-fg-subtle)",
148
+ fg2: "var(--color-fg-2)",
149
+ fg3: "var(--color-fg-3)",
150
+ fg4: "var(--color-fg-4)",
151
+ fg5: "var(--color-fg-5)",
152
+ /* Rules */
153
+ rule: "var(--color-rule)",
154
+ ruleSoft: "var(--color-rule-soft)",
155
+ ruleStrong: "var(--color-rule-strong)",
156
+ /* Accent (cyan) */
157
+ accent: "var(--color-accent)",
158
+ accent2: "var(--color-accent-2)",
159
+ accentTint: "var(--color-accent-tint)",
160
+ accentHover: "var(--color-accent-hover)",
161
+ accentActive: "var(--color-accent-active)",
162
+ accentRing: "var(--color-accent-ring)",
163
+ /* Pro (purple) */
164
+ proBg: "var(--color-pro-bg)",
165
+ proBgHover: "var(--color-pro-bg-hover)",
166
+ proBgActive: "var(--color-pro-bg-active)",
167
+ proFg: "var(--color-pro-fg)",
168
+ proHover: "var(--color-pro-hover)",
169
+ proActive: "var(--color-pro-active)",
170
+ proDisabled: "var(--color-pro-disabled)",
171
+ proLine: "var(--color-pro-line)",
172
+ proRing: "var(--color-pro-ring)",
173
+ /* On-brand */
174
+ fgOnAccent: "var(--color-fg-on-accent)",
175
+ fgOnPro: "var(--color-fg-on-pro)",
176
+ /* Disabled */
109
177
  fgDisabled: "var(--color-fg-disabled)",
110
- fgOnBrand: "var(--color-fg-on-brand)",
111
- fgOnDark: "var(--color-fg-on-dark)",
112
- fgOnLight: "var(--color-fg-on-light)",
113
- /* Borders */
114
- border: "var(--color-border)",
115
- borderStrong: "var(--color-border-strong)",
116
- borderInput: "var(--color-border-input)",
117
- borderFocus: "var(--color-border-focus)",
118
- /* Brand · primary action */
119
- brand: "var(--color-brand)",
120
- brandHover: "var(--color-brand-hover)",
121
- brandActive: "var(--color-brand-active)",
122
- brandFg: "var(--color-brand-fg)",
123
- /* Interactive · links */
124
- link: "var(--color-link)",
125
- linkHover: "var(--color-link-hover)",
178
+ bgDisabled: "var(--color-bg-disabled)",
179
+ /* Overlays */
180
+ overlayHover: "var(--color-overlay-hover)",
181
+ overlayActive: "var(--color-overlay-active)",
126
182
  /* Status */
127
- success: "var(--color-success)",
128
- successSubtle: "var(--color-success-subtle)",
129
183
  successFg: "var(--color-success-fg)",
130
- warning: "var(--color-warning)",
131
- warningSubtle: "var(--color-warning-subtle)",
184
+ successBg: "var(--color-success-bg)",
185
+ successLine: "var(--color-success-line)",
132
186
  warningFg: "var(--color-warning-fg)",
133
- danger: "var(--color-danger)",
134
- dangerSubtle: "var(--color-danger-subtle)",
187
+ warningBg: "var(--color-warning-bg)",
188
+ warningLine: "var(--color-warning-line)",
135
189
  dangerFg: "var(--color-danger-fg)",
136
- info: "var(--color-info)",
137
- infoSubtle: "var(--color-info-subtle)",
138
- infoFg: "var(--color-info-fg)",
139
- /* Decorative accents (Notion's playful palette) */
140
- accentCoral: "var(--color-accent-coral)",
141
- accentFuchsia: "var(--color-accent-fuchsia)",
142
- accentGrape: "var(--color-accent-grape)",
143
- accentTeal: "var(--color-accent-teal)",
144
- accentSunny: "var(--color-accent-sunny)",
145
- accentUmber: "var(--color-accent-umber)",
146
- accentFrost: "var(--color-accent-frost)"
147
- },
148
- radius: {
149
- md: "var(--radius-md)",
150
- lg: "var(--radius-lg)",
151
- xl: "var(--radius-xl)",
152
- full: "var(--radius-full)",
153
- /* Component-specific role radii */
154
- cards: "var(--radius-cards)",
155
- badges: "var(--radius-badges)",
156
- inputs: "var(--radius-inputs)",
157
- buttons: "var(--radius-buttons)",
158
- general: "var(--radius-general)"
190
+ dangerBg: "var(--color-danger-bg)",
191
+ dangerLine: "var(--color-danger-line)"
159
192
  },
160
193
  shadow: {
161
- subtle: "var(--shadow-subtle)",
162
- focus: "var(--shadow-focus)"
194
+ quiet: "var(--shadow-quiet)",
195
+ card: "var(--shadow-card)",
196
+ pop: "var(--shadow-pop)",
197
+ focusRing: "var(--shadow-focus-ring)"
163
198
  },
164
- spacing: {
165
- 4: "var(--spacing-4)",
166
- 8: "var(--spacing-8)",
167
- 12: "var(--spacing-12)",
168
- 16: "var(--spacing-16)",
169
- 20: "var(--spacing-20)",
170
- 24: "var(--spacing-24)",
171
- 28: "var(--spacing-28)",
172
- 32: "var(--spacing-32)",
173
- 36: "var(--spacing-36)",
174
- 40: "var(--spacing-40)",
175
- 64: "var(--spacing-64)",
176
- 80: "var(--spacing-80)",
177
- 180: "var(--spacing-180)",
178
- sectionGap: "var(--section-gap)",
179
- cardPadding: "var(--card-padding)",
180
- elementGap: "var(--element-gap)"
199
+ radius: {
200
+ btn: "var(--radius-btn)",
201
+ input: "var(--radius-input)",
202
+ pill: "var(--radius-pill)",
203
+ card: "var(--radius-card)",
204
+ icon: "var(--radius-icon)",
205
+ full: "var(--radius-full)"
181
206
  },
182
207
  type: {
183
208
  family: {
184
- sans: "var(--font-sans)",
185
- serif: "var(--font-serif)",
209
+ display: "var(--font-display)",
210
+ body: "var(--font-body)",
186
211
  mono: "var(--font-mono)"
187
212
  },
188
213
  weight: {
@@ -190,60 +215,26 @@ var systemTokens = {
190
215
  medium: "var(--font-weight-medium)",
191
216
  semibold: "var(--font-weight-semibold)",
192
217
  bold: "var(--font-weight-bold)"
193
- },
194
- role: {
195
- caption: {
196
- size: "var(--text-caption)",
197
- leading: "var(--leading-caption)",
198
- tracking: "var(--tracking-caption)"
199
- },
200
- bodySm: {
201
- size: "var(--text-body-sm)",
202
- leading: "var(--leading-body-sm)",
203
- tracking: "var(--tracking-body-sm)"
204
- },
205
- body: {
206
- size: "var(--text-body)",
207
- leading: "var(--leading-body)",
208
- tracking: "var(--tracking-body)"
209
- },
210
- subheading: {
211
- size: "var(--text-subheading)",
212
- leading: "var(--leading-subheading)",
213
- tracking: "var(--tracking-subheading)"
214
- },
215
- headingSm: {
216
- size: "var(--text-heading-sm)",
217
- leading: "var(--leading-heading-sm)",
218
- tracking: "var(--tracking-heading-sm)"
219
- },
220
- heading: {
221
- size: "var(--text-heading)",
222
- leading: "var(--leading-heading)",
223
- tracking: "var(--tracking-heading)"
224
- },
225
- headingLg: {
226
- size: "var(--text-heading-lg)",
227
- leading: "var(--leading-heading-lg)",
228
- tracking: "var(--tracking-heading-lg)"
229
- },
230
- display: {
231
- size: "var(--text-display)",
232
- leading: "var(--leading-display)",
233
- tracking: "var(--tracking-display)"
234
- }
235
218
  }
236
219
  },
237
- duration: {
238
- instant: "var(--duration-instant)",
239
- fast: "var(--duration-fast)",
240
- normal: "var(--duration-normal)",
241
- slow: "var(--duration-slow)"
220
+ motion: {
221
+ ease: {
222
+ outQuart: "var(--ease-out-quart)",
223
+ out: "var(--ease-out)",
224
+ in: "var(--ease-in)",
225
+ inOut: "var(--ease-in-out)"
226
+ },
227
+ duration: {
228
+ instant: "var(--duration-instant)",
229
+ fast: "var(--duration-fast)",
230
+ normal: "var(--duration-normal)",
231
+ slow: "var(--duration-slow)"
232
+ }
242
233
  },
243
- ease: {
244
- out: "var(--ease-out)",
245
- in: "var(--ease-in)",
246
- inOut: "var(--ease-in-out)"
234
+ layout: {
235
+ shellSidebarWidth: "var(--shell-sidebar-w)",
236
+ shellHeaderHeight: "var(--shell-header-h)",
237
+ contentPad: "var(--content-pad)"
247
238
  },
248
239
  z: {
249
240
  base: "var(--z-base)",
@@ -256,6 +247,6 @@ var systemTokens = {
256
247
  }
257
248
  };
258
249
 
259
- export { colors, radii, reference, shadows, spacing, surfaces, systemTokens, typography };
250
+ export { colors, layout, motion, overlays, radii, reference, shadows, spacing, surfaces, systemTokens, typography };
260
251
  //# sourceMappingURL=index.js.map
261
252
  //# sourceMappingURL=index.js.map
package/dist/tokens/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/tokens/reference.ts","../../src/tokens/system.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Reference tokens — Notion's named palette. Programmatic access for theme\n * switching, Figma sync, design tools, etc. Components should NOT consume\n * these directly; use system tokens (./system.ts) instead.\n *\n * Source: Notion design system reference (refero.design).\n * Brand colors will diverge later — only `system.ts` should change.\n */\n\nexport const colors = {\n midnightInk: \"#02093a\",\n canvasDark: \"#000000\",\n ghostWhite: \"#f6f5f4\",\n paperWhite: \"#ffffff\",\n deepGraphite: \"#0b0b0b\",\n blueFrost: \"#62aef0\",\n oceanGlimmer: \"#0075de\",\n skySurge: \"#097fe8\",\n actionIndigo: \"#455dd3\",\n alertRed: \"#f77463\",\n teamTeal: \"#2a9d99\",\n sunnyYellow: \"#ffc95e\",\n warmUmber: \"#b18164\",\n coralBurst: \"#ff8a33\",\n fuchsiaFlare: \"#ff83dd\",\n grapeGlow: \"#ad6ded\",\n harvestGold: \"#ffb110\",\n hotChili: \"#f64932\",\n forestGreen: \"#1aae39\",\n coolGray: \"#c6c6c5\",\n deepSlate: \"#615d59\",\n inputBorderGray: \"#dddddd\",\n offWhite: \"#f2f9ff\",\n} as const;\n\nexport const typography = {\n family: {\n sans: \"'NotionInter', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n serif: \"'Lyon Text', Georgia, ui-serif, serif\",\n mono: \"'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace\",\n },\n scale: {\n caption: { size: \"12px\", leading: 1.5, tracking: \"0.01px\" },\n bodySm: { size: \"14px\", leading: 1.43, tracking: \"-0.006px\" },\n body: { size: \"15px\", leading: 1.33, tracking: \"-0.006px\" },\n subheading: { size: \"20px\", leading: 1.35, tracking: \"-0.011px\" },\n headingSm: { size: \"22px\", leading: 1.33, tracking: \"-0.024px\" },\n heading: { size: \"26px\", leading: 1.27, tracking: \"-0.033px\" },\n headingLg: { size: \"40px\", leading: 1.23, tracking: \"-0.035px\" },\n display: { size: \"64px\", leading: 0.83, tracking: \"-0.036px\" },\n },\n weight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n },\n} as const;\n\nexport const spacing = {\n unit: \"4px\",\n 4: \"4px\",\n 8: \"8px\",\n 12: \"12px\",\n 16: \"16px\",\n 20: \"20px\",\n 24: \"24px\",\n 28: \"28px\",\n 32: \"32px\",\n 36: \"36px\",\n 40: \"40px\",\n 64: \"64px\",\n 80: \"80px\",\n 180: \"180px\",\n} as const;\n\nexport const radii = {\n md: \"5px\",\n lg: \"8px\",\n xl: \"12px\",\n full: \"9999px\",\n cards: \"12px\",\n badges: \"9999px\",\n inputs: \"4px\",\n buttons: \"8px\",\n general: \"5px\",\n} as const;\n\nexport const shadows = {\n subtle:\n \"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\",\n} as const;\n\nexport const surfaces = {\n canvasDark: \"#000000\",\n midnightInk: \"#02093a\",\n paperWhite: \"#ffffff\",\n ghostWhite: \"#f6f5f4\",\n} as const;\n\nexport const reference = {\n colors,\n typography,\n spacing,\n radii,\n shadows,\n surfaces,\n} as const;\n\nexport type ReferenceTokens = typeof reference;\nexport type ColorName = keyof typeof colors;\n","/**\n * System tokens — semantic mappings. These are the names components use.\n * Re-mapped per theme via `.dark` class. The CSS variable equivalents\n * live in `./tokens.css`.\n */\n\nexport const systemTokens = {\n color: {\n /* Surfaces */\n canvas: \"var(--color-canvas)\",\n surface: \"var(--color-surface)\",\n surfaceRaised: \"var(--color-surface-raised)\",\n surfaceSunken: \"var(--color-surface-sunken)\",\n surfaceOverlay: \"var(--color-surface-overlay)\",\n\n /* Foreground */\n fg: \"var(--color-fg)\",\n fgStrong: \"var(--color-fg-strong)\",\n fgMuted: \"var(--color-fg-muted)\",\n fgSubtle: \"var(--color-fg-subtle)\",\n fgDisabled: \"var(--color-fg-disabled)\",\n fgOnBrand: \"var(--color-fg-on-brand)\",\n fgOnDark: \"var(--color-fg-on-dark)\",\n fgOnLight: \"var(--color-fg-on-light)\",\n\n /* Borders */\n border: \"var(--color-border)\",\n borderStrong: \"var(--color-border-strong)\",\n borderInput: \"var(--color-border-input)\",\n borderFocus: \"var(--color-border-focus)\",\n\n /* Brand · primary action */\n brand: \"var(--color-brand)\",\n brandHover: \"var(--color-brand-hover)\",\n brandActive: \"var(--color-brand-active)\",\n brandFg: \"var(--color-brand-fg)\",\n\n /* Interactive · links */\n link: \"var(--color-link)\",\n linkHover: \"var(--color-link-hover)\",\n\n /* Status */\n success: \"var(--color-success)\",\n successSubtle: \"var(--color-success-subtle)\",\n successFg: \"var(--color-success-fg)\",\n warning: \"var(--color-warning)\",\n warningSubtle: \"var(--color-warning-subtle)\",\n warningFg: \"var(--color-warning-fg)\",\n danger: \"var(--color-danger)\",\n dangerSubtle: \"var(--color-danger-subtle)\",\n dangerFg: \"var(--color-danger-fg)\",\n info: \"var(--color-info)\",\n infoSubtle: \"var(--color-info-subtle)\",\n infoFg: \"var(--color-info-fg)\",\n\n /* Decorative accents (Notion's playful palette) */\n accentCoral: \"var(--color-accent-coral)\",\n accentFuchsia: \"var(--color-accent-fuchsia)\",\n accentGrape: \"var(--color-accent-grape)\",\n accentTeal: \"var(--color-accent-teal)\",\n accentSunny: \"var(--color-accent-sunny)\",\n accentUmber: \"var(--color-accent-umber)\",\n accentFrost: \"var(--color-accent-frost)\",\n },\n\n radius: {\n md: \"var(--radius-md)\",\n lg: \"var(--radius-lg)\",\n xl: \"var(--radius-xl)\",\n full: \"var(--radius-full)\",\n /* Component-specific role radii */\n cards: \"var(--radius-cards)\",\n badges: \"var(--radius-badges)\",\n inputs: \"var(--radius-inputs)\",\n buttons: \"var(--radius-buttons)\",\n general: \"var(--radius-general)\",\n },\n\n shadow: {\n subtle: \"var(--shadow-subtle)\",\n focus: \"var(--shadow-focus)\",\n },\n\n spacing: {\n 4: \"var(--spacing-4)\",\n 8: \"var(--spacing-8)\",\n 12: \"var(--spacing-12)\",\n 16: \"var(--spacing-16)\",\n 20: \"var(--spacing-20)\",\n 24: \"var(--spacing-24)\",\n 28: \"var(--spacing-28)\",\n 32: \"var(--spacing-32)\",\n 36: \"var(--spacing-36)\",\n 40: \"var(--spacing-40)\",\n 64: \"var(--spacing-64)\",\n 80: \"var(--spacing-80)\",\n 180: \"var(--spacing-180)\",\n sectionGap: \"var(--section-gap)\",\n cardPadding: \"var(--card-padding)\",\n elementGap: \"var(--element-gap)\",\n },\n\n type: {\n family: {\n sans: \"var(--font-sans)\",\n serif: \"var(--font-serif)\",\n mono: \"var(--font-mono)\",\n },\n weight: {\n regular: \"var(--font-weight-regular)\",\n medium: \"var(--font-weight-medium)\",\n semibold: \"var(--font-weight-semibold)\",\n bold: \"var(--font-weight-bold)\",\n },\n role: {\n caption: {\n size: \"var(--text-caption)\",\n leading: \"var(--leading-caption)\",\n tracking: \"var(--tracking-caption)\",\n },\n bodySm: {\n size: \"var(--text-body-sm)\",\n leading: \"var(--leading-body-sm)\",\n tracking: \"var(--tracking-body-sm)\",\n },\n body: {\n size: \"var(--text-body)\",\n leading: \"var(--leading-body)\",\n tracking: \"var(--tracking-body)\",\n },\n subheading: {\n size: \"var(--text-subheading)\",\n leading: \"var(--leading-subheading)\",\n tracking: \"var(--tracking-subheading)\",\n },\n headingSm: {\n size: \"var(--text-heading-sm)\",\n leading: \"var(--leading-heading-sm)\",\n tracking: \"var(--tracking-heading-sm)\",\n },\n heading: {\n size: \"var(--text-heading)\",\n leading: \"var(--leading-heading)\",\n tracking: \"var(--tracking-heading)\",\n },\n headingLg: {\n size: \"var(--text-heading-lg)\",\n leading: \"var(--leading-heading-lg)\",\n tracking: \"var(--tracking-heading-lg)\",\n },\n display: {\n size: \"var(--text-display)\",\n leading: \"var(--leading-display)\",\n tracking: \"var(--tracking-display)\",\n },\n },\n },\n\n duration: {\n instant: \"var(--duration-instant)\",\n fast: \"var(--duration-fast)\",\n normal: \"var(--duration-normal)\",\n slow: \"var(--duration-slow)\",\n },\n\n ease: {\n out: \"var(--ease-out)\",\n in: \"var(--ease-in)\",\n inOut: \"var(--ease-in-out)\",\n },\n\n z: {\n base: \"var(--z-base)\",\n dropdown: \"var(--z-dropdown)\",\n sticky: \"var(--z-sticky)\",\n overlay: \"var(--z-overlay)\",\n modal: \"var(--z-modal)\",\n toast: \"var(--z-toast)\",\n tooltip: \"var(--z-tooltip)\",\n },\n} as const;\n\nexport type SystemTokens = typeof systemTokens;\n"]}
1
+ {"version":3,"sources":["../../src/tokens/reference.ts","../../src/tokens/system.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Reference tokens — Assure Pro raw palette.\n *\n * Programmatic access for theme switching, Figma sync, design tools, etc.\n * Components should NOT consume these directly; use system tokens (./system.ts)\n * or the CSS variables in ./tokens.css.\n *\n * Source: assure-pro-spec/mockups/_shared.css\n */\n\nexport const colors = {\n /* Surfaces */\n bg: \"#FDFDFC\",\n bg2: \"#F7F7F5\",\n bg3: \"#F0F0ED\",\n surface: \"#FFFFFF\",\n surface2: \"#FAFAF8\",\n\n /* Foreground */\n fg: \"#0A0A0A\",\n fg2: \"#38383B\",\n fg3: \"#6B6B70\",\n fg4: \"#9A9AA0\",\n fg5: \"#C4C4C8\",\n\n /* Rules */\n rule: \"#EAEAE6\",\n ruleSoft: \"#F0F0EC\",\n ruleStrong: \"#DADAD4\",\n\n /* Accent (cyan) */\n accent: \"#0066FF\",\n accent2: \"#0052CC\",\n accentTint: \"#E8F0FF\",\n accentHover: \"#005BE6\",\n accentActive: \"#004FCC\",\n\n /* Pro (purple) */\n proBg: \"#F4F1FF\",\n proBgHover: \"#EEE9FF\",\n proBgActive: \"#E4DDFF\",\n proFg: \"#6C42F8\",\n proHover: \"#5E35F2\",\n proActive: \"#5127E8\",\n proDisabled: \"#B7A7F3\",\n proLine: \"#7B5BD8\",\n\n /* Disabled */\n fgDisabled: \"#A7A7AC\",\n bgDisabled: \"#F3F3F1\",\n\n /* Status */\n successFg: \"#1F7A3D\",\n successBg: \"#EAF6EE\",\n successLine: \"#C5E5CF\",\n warningFg: \"#B45F0A\",\n warningBg: \"#FFF3E5\",\n warningLine: \"#F5D5A8\",\n dangerFg: \"#C43838\",\n dangerBg: \"#FBEAEA\",\n dangerLine: \"#ECC5C5\",\n\n /* On-brand */\n fgOnAccent: \"#FFFFFF\",\n fgOnPro: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n family: {\n display: '\"Geist\", \"Inter\", -apple-system, system-ui, sans-serif',\n body: '\"Inter\", -apple-system, system-ui, sans-serif',\n mono: '\"Geist Mono\", \"JetBrains Mono\", ui-monospace, monospace',\n },\n weight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n },\n /* Universal entrance ease — applies to every motion primitive */\n ease: \"cubic-bezier(0.2, 0.8, 0.2, 1)\",\n} as const;\n\nexport const radii = {\n btn: \"7px\",\n input: \"7px\",\n pill: \"5px\",\n card: \"12px\",\n icon: \"4px\",\n full: \"9999px\",\n} as const;\n\nexport const shadows = {\n quiet: \"0 1px 2px rgba(10,10,10,0.03)\",\n card: \"0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)\",\n pop: \"0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)\",\n focusRing: \"0 0 0 2px rgba(0, 102, 255, 0.18)\",\n} as const;\n\nexport const overlays = {\n hover: \"rgba(10, 10, 10, 0.03)\",\n active: \"rgba(10, 10, 10, 0.05)\",\n} as const;\n\nexport const layout = {\n shellSidebarWidth: \"256px\",\n shellHeaderHeight: \"56px\",\n contentPad: \"32px\",\n} as const;\n\n/**\n * Spacing — 4px base scale. Assure Pro uses arbitrary values in most cases;\n * this scale is exposed for programmatic access (e.g. design-tool sync).\n */\nexport const spacing = {\n unit: \"4px\",\n 4: \"4px\",\n 8: \"8px\",\n 12: \"12px\",\n 16: \"16px\",\n 20: \"20px\",\n 24: \"24px\",\n 28: \"28px\",\n 32: \"32px\",\n 36: \"36px\",\n 40: \"40px\",\n 64: \"64px\",\n 80: \"80px\",\n 180: \"180px\",\n} as const;\n\n/**\n * Surface palette — the four canonical layers. Mirrors --color-bg / -2 /\n * --color-surface / --color-surface-2.\n */\nexport const surfaces = {\n bg: \"#FDFDFC\",\n bg2: \"#F7F7F5\",\n surface: \"#FFFFFF\",\n surface2: \"#FAFAF8\",\n} as const;\n\nexport const motion = {\n ease: {\n outQuart: \"cubic-bezier(0.2, 0.8, 0.2, 1)\",\n out: \"cubic-bezier(0.16, 1, 0.3, 1)\",\n in: \"cubic-bezier(0.7, 0, 0.84, 0)\",\n inOut: \"cubic-bezier(0.65, 0, 0.35, 1)\",\n },\n duration: {\n instant: \"100ms\",\n fast: \"150ms\",\n normal: \"250ms\",\n slow: \"400ms\",\n },\n} as const;\n\nexport const reference = {\n colors,\n typography,\n radii,\n shadows,\n overlays,\n layout,\n motion,\n spacing,\n surfaces,\n} as const;\n\nexport type ReferenceTokens = typeof reference;\nexport type ColorName = keyof typeof colors;\n","/**\n * System tokens — Assure Pro semantic mappings as CSS variable references.\n *\n * Use these from JS (e.g. inline styles, Storybook decorators, motion configs)\n * when you can't use a Tailwind utility class. Component CSS should prefer the\n * generated utilities (`bg-bg`, `text-fg-2`, `border-rule`, `bg-pro-fg`, etc.)\n * which Tailwind 4 emits from `--color-*` tokens declared in ./tokens.css.\n *\n * Themes (.dark) re-map the underlying CSS variables; these references stay valid.\n */\n\nexport const systemTokens = {\n color: {\n /* Surfaces */\n bg: \"var(--color-bg)\",\n bg2: \"var(--color-bg-2)\",\n bg3: \"var(--color-bg-3)\",\n surface: \"var(--color-surface)\",\n surface2: \"var(--color-surface-2)\",\n\n /* Foreground */\n fg: \"var(--color-fg)\",\n fg2: \"var(--color-fg-2)\",\n fg3: \"var(--color-fg-3)\",\n fg4: \"var(--color-fg-4)\",\n fg5: \"var(--color-fg-5)\",\n\n /* Rules */\n rule: \"var(--color-rule)\",\n ruleSoft: \"var(--color-rule-soft)\",\n ruleStrong: \"var(--color-rule-strong)\",\n\n /* Accent (cyan) */\n accent: \"var(--color-accent)\",\n accent2: \"var(--color-accent-2)\",\n accentTint: \"var(--color-accent-tint)\",\n accentHover: \"var(--color-accent-hover)\",\n accentActive: \"var(--color-accent-active)\",\n accentRing: \"var(--color-accent-ring)\",\n\n /* Pro (purple) */\n proBg: \"var(--color-pro-bg)\",\n proBgHover: \"var(--color-pro-bg-hover)\",\n proBgActive: \"var(--color-pro-bg-active)\",\n proFg: \"var(--color-pro-fg)\",\n proHover: \"var(--color-pro-hover)\",\n proActive: \"var(--color-pro-active)\",\n proDisabled: \"var(--color-pro-disabled)\",\n proLine: \"var(--color-pro-line)\",\n proRing: \"var(--color-pro-ring)\",\n\n /* On-brand */\n fgOnAccent: \"var(--color-fg-on-accent)\",\n fgOnPro: \"var(--color-fg-on-pro)\",\n\n /* Disabled */\n fgDisabled: \"var(--color-fg-disabled)\",\n bgDisabled: \"var(--color-bg-disabled)\",\n\n /* Overlays */\n overlayHover: \"var(--color-overlay-hover)\",\n overlayActive: \"var(--color-overlay-active)\",\n\n /* Status */\n successFg: \"var(--color-success-fg)\",\n successBg: \"var(--color-success-bg)\",\n successLine: \"var(--color-success-line)\",\n warningFg: \"var(--color-warning-fg)\",\n warningBg: \"var(--color-warning-bg)\",\n warningLine: \"var(--color-warning-line)\",\n dangerFg: \"var(--color-danger-fg)\",\n dangerBg: \"var(--color-danger-bg)\",\n dangerLine: \"var(--color-danger-line)\",\n },\n\n shadow: {\n quiet: \"var(--shadow-quiet)\",\n card: \"var(--shadow-card)\",\n pop: \"var(--shadow-pop)\",\n focusRing: \"var(--shadow-focus-ring)\",\n },\n\n radius: {\n btn: \"var(--radius-btn)\",\n input: \"var(--radius-input)\",\n pill: \"var(--radius-pill)\",\n card: \"var(--radius-card)\",\n icon: \"var(--radius-icon)\",\n full: \"var(--radius-full)\",\n },\n\n type: {\n family: {\n display: \"var(--font-display)\",\n body: \"var(--font-body)\",\n mono: \"var(--font-mono)\",\n },\n weight: {\n regular: \"var(--font-weight-regular)\",\n medium: \"var(--font-weight-medium)\",\n semibold: \"var(--font-weight-semibold)\",\n bold: \"var(--font-weight-bold)\",\n },\n },\n\n motion: {\n ease: {\n outQuart: \"var(--ease-out-quart)\",\n out: \"var(--ease-out)\",\n in: \"var(--ease-in)\",\n inOut: \"var(--ease-in-out)\",\n },\n duration: {\n instant: \"var(--duration-instant)\",\n fast: \"var(--duration-fast)\",\n normal: \"var(--duration-normal)\",\n slow: \"var(--duration-slow)\",\n },\n },\n\n layout: {\n shellSidebarWidth: \"var(--shell-sidebar-w)\",\n shellHeaderHeight: \"var(--shell-header-h)\",\n contentPad: \"var(--content-pad)\",\n },\n\n z: {\n base: \"var(--z-base)\",\n dropdown: \"var(--z-dropdown)\",\n sticky: \"var(--z-sticky)\",\n overlay: \"var(--z-overlay)\",\n modal: \"var(--z-modal)\",\n toast: \"var(--z-toast)\",\n tooltip: \"var(--z-tooltip)\",\n },\n} as const;\n\nexport type SystemTokens = typeof systemTokens;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@assure-one/design-system",
3
- "version": "0.1.1",
3
+ "version": "0.3.0",
4
4
  "description": "Assure One design system — tokens, primitives, and patterns for the Assure Suite.",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,
@@ -44,8 +44,39 @@
44
44
  }
45
45
  },
46
46
  "dependencies": {
47
+ "@radix-ui/react-accordion": "^1.2.12",
48
+ "@radix-ui/react-alert-dialog": "^1.1.15",
49
+ "@radix-ui/react-aspect-ratio": "^1.1.8",
50
+ "@radix-ui/react-avatar": "^1.1.11",
51
+ "@radix-ui/react-checkbox": "^1.3.3",
52
+ "@radix-ui/react-collapsible": "^1.1.12",
53
+ "@radix-ui/react-context-menu": "^2.2.16",
54
+ "@radix-ui/react-dialog": "^1.1.15",
55
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
56
+ "@radix-ui/react-hover-card": "^1.1.15",
57
+ "@radix-ui/react-label": "^2.1.8",
58
+ "@radix-ui/react-popover": "^1.1.15",
59
+ "@radix-ui/react-progress": "^1.1.8",
60
+ "@radix-ui/react-radio-group": "^1.3.8",
61
+ "@radix-ui/react-scroll-area": "^1.2.10",
62
+ "@radix-ui/react-select": "^2.2.6",
63
+ "@radix-ui/react-separator": "^1.1.8",
64
+ "@radix-ui/react-slider": "^1.3.6",
65
+ "@radix-ui/react-slot": "^1.2.4",
66
+ "@radix-ui/react-switch": "^1.2.6",
67
+ "@radix-ui/react-tabs": "^1.1.13",
68
+ "@radix-ui/react-toggle-group": "^1.1.11",
69
+ "@radix-ui/react-toolbar": "^1.1.11",
70
+ "@radix-ui/react-tooltip": "^1.2.8",
71
+ "@radix-ui/react-visually-hidden": "^1.2.4",
72
+ "class-variance-authority": "^0.7.1",
47
73
  "clsx": "^2.1.1",
48
- "tailwind-merge": "^2.6.0"
74
+ "cmdk": "^1.1.1",
75
+ "date-fns": "^4.1.0",
76
+ "input-otp": "^1.4.2",
77
+ "react-day-picker": "^10.0.0",
78
+ "tailwind-merge": "^2.6.0",
79
+ "tw-animate-css": "^1.4.0"
49
80
  },
50
81
  "devDependencies": {
51
82
  "@changesets/cli": "^2.27.12",
@@ -56,6 +87,7 @@
56
87
  "@storybook/blocks": "^8.5.0",
57
88
  "@storybook/react": "^8.5.0",
58
89
  "@storybook/react-vite": "^8.5.0",
90
+ "@storybook/test-runner": "^0.19.1",
59
91
  "@tailwindcss/cli": "^4.0.0",
60
92
  "@tailwindcss/vite": "^4.0.0",
61
93
  "@types/node": "^22.10.0",
@@ -64,12 +96,16 @@
64
96
  "@typescript-eslint/eslint-plugin": "^8.20.0",
65
97
  "@typescript-eslint/parser": "^8.20.0",
66
98
  "@vitejs/plugin-react": "^4.3.4",
99
+ "axe-playwright": "^2.2.2",
100
+ "concurrently": "^9.2.1",
67
101
  "eslint": "^9.18.0",
68
102
  "eslint-plugin-jsx-a11y": "^6.10.2",
69
103
  "eslint-plugin-react": "^7.37.4",
70
104
  "eslint-plugin-react-hooks": "^5.1.0",
71
105
  "eslint-plugin-storybook": "^0.11.2",
106
+ "http-server": "^14.1.1",
72
107
  "next": "16.1.6",
108
+ "playwright": "^1.59.1",
73
109
  "prettier": "^3.4.2",
74
110
  "prettier-plugin-tailwindcss": "^0.6.10",
75
111
  "react": "^19.0.0",
@@ -78,7 +114,8 @@
78
114
  "tailwindcss": "^4.0.0",
79
115
  "tsup": "^8.3.5",
80
116
  "typescript": "^5.7.3",
81
- "vite": "^6.0.7"
117
+ "vite": "^6.0.7",
118
+ "wait-on": "^9.0.6"
82
119
  },
83
120
  "engines": {
84
121
  "node": ">=22"
@@ -90,6 +127,8 @@
90
127
  "dev:css": "tailwindcss -i ./src/tokens/tokens.css -o ./dist/styles.css --watch",
91
128
  "storybook": "storybook dev -p 6006",
92
129
  "build-storybook": "storybook build",
130
+ "test-storybook": "test-storybook --url http://127.0.0.1:6006",
131
+ "test-storybook:ci": "concurrently -k -s first -n \"sb,test\" -c \"magenta,blue\" \"http-server storybook-static -p 6006 -s\" \"wait-on tcp:127.0.0.1:6006 && test-storybook --url http://127.0.0.1:6006\"",
93
132
  "typecheck": "tsc --noEmit",
94
133
  "lint": "eslint src",
95
134
  "format": "prettier --write src",