@tydavidson/design-system 1.2.7 → 1.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +2 -529
- package/dist/index.d.ts +2 -529
- package/dist/tokens/index.d.mts +529 -0
- package/dist/tokens/index.d.ts +529 -0
- package/dist/tokens/index.js +282 -0
- package/dist/tokens/index.js.map +1 -0
- package/dist/tokens/index.mjs +275 -0
- package/dist/tokens/index.mjs.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/tokens/colors.ts
|
|
4
|
+
var colors = {
|
|
5
|
+
// Base colors
|
|
6
|
+
brand: {
|
|
7
|
+
25: "hsl(var(--brand-25))",
|
|
8
|
+
50: "hsl(var(--brand-50))",
|
|
9
|
+
100: "hsl(var(--brand-100))",
|
|
10
|
+
200: "hsl(var(--brand-200))",
|
|
11
|
+
300: "hsl(var(--brand-300))",
|
|
12
|
+
400: "hsl(var(--brand-400))",
|
|
13
|
+
500: "hsl(var(--brand-500))",
|
|
14
|
+
600: "hsl(var(--brand-600))",
|
|
15
|
+
700: "hsl(var(--brand-700))",
|
|
16
|
+
800: "hsl(var(--brand-800))",
|
|
17
|
+
900: "hsl(var(--brand-900))",
|
|
18
|
+
950: "hsl(var(--brand-950))"
|
|
19
|
+
},
|
|
20
|
+
error: {
|
|
21
|
+
25: "hsl(var(--error-25))",
|
|
22
|
+
50: "hsl(var(--error-50))",
|
|
23
|
+
100: "hsl(var(--error-100))",
|
|
24
|
+
200: "hsl(var(--error-200))",
|
|
25
|
+
300: "hsl(var(--error-300))",
|
|
26
|
+
400: "hsl(var(--error-400))",
|
|
27
|
+
500: "hsl(var(--error-500))",
|
|
28
|
+
600: "hsl(var(--error-600))",
|
|
29
|
+
700: "hsl(var(--error-700))",
|
|
30
|
+
800: "hsl(var(--error-800))",
|
|
31
|
+
900: "hsl(var(--error-900))",
|
|
32
|
+
950: "hsl(var(--error-950))"
|
|
33
|
+
},
|
|
34
|
+
warning: {
|
|
35
|
+
25: "hsl(var(--warning-25))",
|
|
36
|
+
50: "hsl(var(--warning-50))",
|
|
37
|
+
100: "hsl(var(--warning-100))",
|
|
38
|
+
200: "hsl(var(--warning-200))",
|
|
39
|
+
300: "hsl(var(--warning-300))",
|
|
40
|
+
400: "hsl(var(--warning-400))",
|
|
41
|
+
500: "hsl(var(--warning-500))",
|
|
42
|
+
600: "hsl(var(--warning-600))",
|
|
43
|
+
700: "hsl(var(--warning-700))",
|
|
44
|
+
800: "hsl(var(--warning-800))",
|
|
45
|
+
900: "hsl(var(--warning-900))",
|
|
46
|
+
950: "hsl(var(--warning-950))"
|
|
47
|
+
},
|
|
48
|
+
success: {
|
|
49
|
+
25: "hsl(var(--success-25))",
|
|
50
|
+
50: "hsl(var(--success-50))",
|
|
51
|
+
100: "hsl(var(--success-100))",
|
|
52
|
+
200: "hsl(var(--success-200))",
|
|
53
|
+
300: "hsl(var(--success-300))",
|
|
54
|
+
400: "hsl(var(--success-400))",
|
|
55
|
+
500: "hsl(var(--success-500))",
|
|
56
|
+
600: "hsl(var(--success-600))",
|
|
57
|
+
700: "hsl(var(--success-700))",
|
|
58
|
+
800: "hsl(var(--success-800))",
|
|
59
|
+
900: "hsl(var(--success-900))",
|
|
60
|
+
950: "hsl(var(--success-950))"
|
|
61
|
+
},
|
|
62
|
+
gray: {
|
|
63
|
+
25: "hsl(var(--gray-25))",
|
|
64
|
+
50: "hsl(var(--gray-50))",
|
|
65
|
+
100: "hsl(var(--gray-100))",
|
|
66
|
+
200: "hsl(var(--gray-200))",
|
|
67
|
+
300: "hsl(var(--gray-300))",
|
|
68
|
+
400: "hsl(var(--gray-400))",
|
|
69
|
+
500: "hsl(var(--gray-500))",
|
|
70
|
+
600: "hsl(var(--gray-600))",
|
|
71
|
+
700: "hsl(var(--gray-700))",
|
|
72
|
+
800: "hsl(var(--gray-800))",
|
|
73
|
+
900: "hsl(var(--gray-900))",
|
|
74
|
+
950: "hsl(var(--gray-950))"
|
|
75
|
+
},
|
|
76
|
+
// Semantic tokens
|
|
77
|
+
text: {
|
|
78
|
+
primary: "hsl(var(--foreground))",
|
|
79
|
+
secondary: "hsl(var(--muted-foreground))",
|
|
80
|
+
tertiary: "hsl(var(--muted-foreground))",
|
|
81
|
+
disabled: "hsl(var(--muted-foreground))",
|
|
82
|
+
brand: "hsl(var(--brand-700))",
|
|
83
|
+
"on-brand": "hsl(var(--brand-50))",
|
|
84
|
+
error: "hsl(var(--error-600))",
|
|
85
|
+
warning: "hsl(var(--warning-600))",
|
|
86
|
+
success: "hsl(var(--success-600))"
|
|
87
|
+
},
|
|
88
|
+
background: {
|
|
89
|
+
primary: "hsl(var(--background))",
|
|
90
|
+
secondary: "hsl(var(--secondary))",
|
|
91
|
+
tertiary: "hsl(var(--muted))",
|
|
92
|
+
brand: "hsl(var(--brand-50))",
|
|
93
|
+
error: "hsl(var(--error-50))",
|
|
94
|
+
warning: "hsl(var(--warning-50))",
|
|
95
|
+
success: "hsl(var(--success-50))",
|
|
96
|
+
card: "hsl(var(--card))"
|
|
97
|
+
},
|
|
98
|
+
border: {
|
|
99
|
+
primary: "hsl(var(--border))",
|
|
100
|
+
secondary: "hsl(var(--input))",
|
|
101
|
+
tertiary: "hsl(var(--accent))",
|
|
102
|
+
brand: "hsl(var(--brand-300))",
|
|
103
|
+
error: "hsl(var(--error-300))",
|
|
104
|
+
warning: "hsl(var(--warning-300))",
|
|
105
|
+
success: "hsl(var(--success-300))"
|
|
106
|
+
},
|
|
107
|
+
focus: {
|
|
108
|
+
ring: "hsl(var(--ring))",
|
|
109
|
+
brand: "hsl(var(--brand-500))",
|
|
110
|
+
error: "hsl(var(--error-500))",
|
|
111
|
+
warning: "hsl(var(--warning-500))",
|
|
112
|
+
success: "hsl(var(--success-500))"
|
|
113
|
+
},
|
|
114
|
+
// Component-specific
|
|
115
|
+
button: {
|
|
116
|
+
primary: {
|
|
117
|
+
bg: "hsl(var(--brand-600))",
|
|
118
|
+
text: "white",
|
|
119
|
+
hover: "hsl(var(--brand-700))",
|
|
120
|
+
focus: "hsl(var(--brand-500))"
|
|
121
|
+
},
|
|
122
|
+
secondary: {
|
|
123
|
+
bg: "transparent",
|
|
124
|
+
text: "hsl(var(--brand-700))",
|
|
125
|
+
border: "hsl(var(--brand-300))",
|
|
126
|
+
hover: "hsl(var(--brand-50))",
|
|
127
|
+
focus: "hsl(var(--brand-500))"
|
|
128
|
+
},
|
|
129
|
+
tertiary: {
|
|
130
|
+
bg: "transparent",
|
|
131
|
+
text: "hsl(var(--brand-700))",
|
|
132
|
+
hover: "hsl(var(--brand-50))",
|
|
133
|
+
focus: "hsl(var(--brand-500))"
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
// src/tokens/typography.ts
|
|
139
|
+
var typography = {
|
|
140
|
+
fontFamily: {
|
|
141
|
+
sans: ["var(--font-inter)", "sans-serif"]
|
|
142
|
+
},
|
|
143
|
+
fontWeight: {
|
|
144
|
+
regular: "400",
|
|
145
|
+
medium: "500",
|
|
146
|
+
semibold: "600",
|
|
147
|
+
bold: "700"
|
|
148
|
+
},
|
|
149
|
+
fontSize: {
|
|
150
|
+
// Display sizes
|
|
151
|
+
"display-2xl": ["4.5rem", { lineHeight: "5.625rem", letterSpacing: "-0.02em" }],
|
|
152
|
+
"display-xl": ["3.75rem", { lineHeight: "4.5rem", letterSpacing: "-0.02em" }],
|
|
153
|
+
"display-lg": ["3rem", { lineHeight: "3.75rem", letterSpacing: "-0.02em" }],
|
|
154
|
+
"display-md": ["2.25rem", { lineHeight: "2.75rem", letterSpacing: "-0.02em" }],
|
|
155
|
+
"display-sm": ["1.875rem", { lineHeight: "2.375rem", letterSpacing: "-0.02em" }],
|
|
156
|
+
"display-xs": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.02em" }],
|
|
157
|
+
// Text sizes
|
|
158
|
+
"text-xl": ["1.25rem", { lineHeight: "1.875rem" }],
|
|
159
|
+
"text-lg": ["1.125rem", { lineHeight: "1.75rem" }],
|
|
160
|
+
"text-md": ["1rem", { lineHeight: "1.5rem" }],
|
|
161
|
+
"text-sm": ["0.875rem", { lineHeight: "1.25rem" }],
|
|
162
|
+
"text-xs": ["0.75rem", { lineHeight: "1.125rem" }]
|
|
163
|
+
},
|
|
164
|
+
// Predefined style combinations
|
|
165
|
+
styles: {
|
|
166
|
+
h1: "text-display-md font-bold",
|
|
167
|
+
h2: "text-display-sm font-bold",
|
|
168
|
+
h3: "text-display-xs font-bold",
|
|
169
|
+
h4: "text-text-xl font-semibold",
|
|
170
|
+
h5: "text-text-lg font-semibold",
|
|
171
|
+
h6: "text-text-md font-semibold",
|
|
172
|
+
// Body text
|
|
173
|
+
body: "text-text-md font-regular",
|
|
174
|
+
"body-large": "text-text-lg font-regular",
|
|
175
|
+
"body-small": "text-text-sm font-regular",
|
|
176
|
+
// Special styles
|
|
177
|
+
caption: "text-text-xs font-medium",
|
|
178
|
+
overline: "text-text-xs font-medium uppercase tracking-wider",
|
|
179
|
+
label: "text-text-sm font-medium"
|
|
180
|
+
},
|
|
181
|
+
// For semantic variants
|
|
182
|
+
variants: {
|
|
183
|
+
italic: "italic",
|
|
184
|
+
underline: "underline"
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
// src/tokens/spacing.ts
|
|
189
|
+
var spacing = {
|
|
190
|
+
// We don't need to redefine the base spacing scale
|
|
191
|
+
// as we'll use Tailwind's defaults
|
|
192
|
+
// Semantic spacing that maps to Tailwind's scale
|
|
193
|
+
layout: {
|
|
194
|
+
page: "6",
|
|
195
|
+
// maps to Tailwind's spacing-6 (1.5rem, 24px)
|
|
196
|
+
section: "8",
|
|
197
|
+
// maps to Tailwind's spacing-8 (2rem, 32px)
|
|
198
|
+
subsection: "4",
|
|
199
|
+
// maps to Tailwind's spacing-4 (1rem, 16px)
|
|
200
|
+
inline: "2"
|
|
201
|
+
// maps to Tailwind's spacing-2 (0.5rem, 8px)
|
|
202
|
+
},
|
|
203
|
+
// Component-specific spacing that maps to Tailwind's scale
|
|
204
|
+
component: {
|
|
205
|
+
xxs: "1",
|
|
206
|
+
// maps to Tailwind's spacing-1 (0.25rem, 4px)
|
|
207
|
+
xs: "2",
|
|
208
|
+
// maps to Tailwind's spacing-2 (0.5rem, 8px)
|
|
209
|
+
sm: "3",
|
|
210
|
+
// maps to Tailwind's spacing-3 (0.75rem, 12px)
|
|
211
|
+
md: "4",
|
|
212
|
+
// maps to Tailwind's spacing-4 (1rem, 16px)
|
|
213
|
+
lg: "6",
|
|
214
|
+
// maps to Tailwind's spacing-6 (1.5rem, 24px)
|
|
215
|
+
xl: "8",
|
|
216
|
+
// maps to Tailwind's spacing-8 (2rem, 32px)
|
|
217
|
+
xxl: "12"
|
|
218
|
+
// maps to Tailwind's spacing-12 (3rem, 48px)
|
|
219
|
+
},
|
|
220
|
+
// Any custom spacing values not in Tailwind's default scale
|
|
221
|
+
// would be defined here for extending in the Tailwind config
|
|
222
|
+
custom: {
|
|
223
|
+
// Example: '4.5': '1.125rem', // 18px
|
|
224
|
+
}
|
|
225
|
+
};
|
|
226
|
+
|
|
227
|
+
// src/tokens/radius.ts
|
|
228
|
+
var radius = {
|
|
229
|
+
// Semantic radius values using CSS variables
|
|
230
|
+
default: "var(--radius)",
|
|
231
|
+
card: "var(--radius)",
|
|
232
|
+
button: "var(--radius)",
|
|
233
|
+
input: "var(--radius)",
|
|
234
|
+
badge: "var(--radius)",
|
|
235
|
+
// Shape variants
|
|
236
|
+
pill: "9999px",
|
|
237
|
+
circle: "50%",
|
|
238
|
+
// Any custom radius values to extend Tailwind's defaults
|
|
239
|
+
// would be defined here
|
|
240
|
+
custom: {
|
|
241
|
+
// Example: 'medium': '0.375rem', // 6px
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
// src/tokens/shadows.ts
|
|
246
|
+
var shadows = {
|
|
247
|
+
// Base shadow values
|
|
248
|
+
none: "none",
|
|
249
|
+
xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
250
|
+
sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
251
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
252
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
253
|
+
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
254
|
+
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
255
|
+
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
|
256
|
+
// Semantic shadow values
|
|
257
|
+
"elevation-low": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
258
|
+
"elevation-medium": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
259
|
+
"elevation-high": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
260
|
+
// Component specific
|
|
261
|
+
card: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
262
|
+
dropdown: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
263
|
+
modal: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
// src/tokens/index.ts
|
|
267
|
+
var tokens = {
|
|
268
|
+
colors,
|
|
269
|
+
typography,
|
|
270
|
+
spacing,
|
|
271
|
+
radius,
|
|
272
|
+
shadows
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
exports.colors = colors;
|
|
276
|
+
exports.radius = radius;
|
|
277
|
+
exports.shadows = shadows;
|
|
278
|
+
exports.spacing = spacing;
|
|
279
|
+
exports.tokens = tokens;
|
|
280
|
+
exports.typography = typography;
|
|
281
|
+
//# sourceMappingURL=index.js.map
|
|
282
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/tokens/colors.ts","../../src/tokens/typography.ts","../../src/tokens/spacing.ts","../../src/tokens/radius.ts","../../src/tokens/shadows.ts","../../src/tokens/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Color token definitions based on the design system\n */\n\nexport const colors = {\n // Base colors\n brand: {\n 25: 'hsl(var(--brand-25))',\n 50: 'hsl(var(--brand-50))',\n 100: 'hsl(var(--brand-100))',\n 200: 'hsl(var(--brand-200))',\n 300: 'hsl(var(--brand-300))',\n 400: 'hsl(var(--brand-400))',\n 500: 'hsl(var(--brand-500))',\n 600: 'hsl(var(--brand-600))',\n 700: 'hsl(var(--brand-700))',\n 800: 'hsl(var(--brand-800))',\n 900: 'hsl(var(--brand-900))',\n 950: 'hsl(var(--brand-950))',\n },\n error: {\n 25: 'hsl(var(--error-25))',\n 50: 'hsl(var(--error-50))',\n 100: 'hsl(var(--error-100))',\n 200: 'hsl(var(--error-200))',\n 300: 'hsl(var(--error-300))',\n 400: 'hsl(var(--error-400))',\n 500: 'hsl(var(--error-500))',\n 600: 'hsl(var(--error-600))',\n 700: 'hsl(var(--error-700))',\n 800: 'hsl(var(--error-800))',\n 900: 'hsl(var(--error-900))',\n 950: 'hsl(var(--error-950))',\n },\n warning: {\n 25: 'hsl(var(--warning-25))',\n 50: 'hsl(var(--warning-50))',\n 100: 'hsl(var(--warning-100))',\n 200: 'hsl(var(--warning-200))',\n 300: 'hsl(var(--warning-300))',\n 400: 'hsl(var(--warning-400))',\n 500: 'hsl(var(--warning-500))',\n 600: 'hsl(var(--warning-600))',\n 700: 'hsl(var(--warning-700))',\n 800: 'hsl(var(--warning-800))',\n 900: 'hsl(var(--warning-900))',\n 950: 'hsl(var(--warning-950))',\n },\n success: {\n 25: 'hsl(var(--success-25))',\n 50: 'hsl(var(--success-50))',\n 100: 'hsl(var(--success-100))',\n 200: 'hsl(var(--success-200))',\n 300: 'hsl(var(--success-300))',\n 400: 'hsl(var(--success-400))',\n 500: 'hsl(var(--success-500))',\n 600: 'hsl(var(--success-600))',\n 700: 'hsl(var(--success-700))',\n 800: 'hsl(var(--success-800))',\n 900: 'hsl(var(--success-900))',\n 950: 'hsl(var(--success-950))',\n },\n gray: {\n 25: 'hsl(var(--gray-25))',\n 50: 'hsl(var(--gray-50))',\n 100: 'hsl(var(--gray-100))',\n 200: 'hsl(var(--gray-200))',\n 300: 'hsl(var(--gray-300))',\n 400: 'hsl(var(--gray-400))',\n 500: 'hsl(var(--gray-500))',\n 600: 'hsl(var(--gray-600))',\n 700: 'hsl(var(--gray-700))',\n 800: 'hsl(var(--gray-800))',\n 900: 'hsl(var(--gray-900))',\n 950: 'hsl(var(--gray-950))',\n },\n \n // Semantic tokens\n text: {\n primary: 'hsl(var(--foreground))',\n secondary: 'hsl(var(--muted-foreground))',\n tertiary: 'hsl(var(--muted-foreground))',\n disabled: 'hsl(var(--muted-foreground))',\n brand: 'hsl(var(--brand-700))',\n 'on-brand': 'hsl(var(--brand-50))',\n error: 'hsl(var(--error-600))',\n warning: 'hsl(var(--warning-600))',\n success: 'hsl(var(--success-600))',\n },\n background: {\n primary: 'hsl(var(--background))',\n secondary: 'hsl(var(--secondary))',\n tertiary: 'hsl(var(--muted))',\n brand: 'hsl(var(--brand-50))',\n error: 'hsl(var(--error-50))',\n warning: 'hsl(var(--warning-50))',\n success: 'hsl(var(--success-50))',\n card: 'hsl(var(--card))',\n },\n border: {\n primary: 'hsl(var(--border))',\n secondary: 'hsl(var(--input))',\n tertiary: 'hsl(var(--accent))',\n brand: 'hsl(var(--brand-300))',\n error: 'hsl(var(--error-300))',\n warning: 'hsl(var(--warning-300))',\n success: 'hsl(var(--success-300))',\n },\n focus: {\n ring: 'hsl(var(--ring))',\n brand: 'hsl(var(--brand-500))',\n error: 'hsl(var(--error-500))',\n warning: 'hsl(var(--warning-500))',\n success: 'hsl(var(--success-500))',\n },\n \n // Component-specific\n button: {\n primary: {\n bg: 'hsl(var(--brand-600))',\n text: 'white',\n hover: 'hsl(var(--brand-700))',\n focus: 'hsl(var(--brand-500))',\n },\n secondary: {\n bg: 'transparent',\n text: 'hsl(var(--brand-700))',\n border: 'hsl(var(--brand-300))',\n hover: 'hsl(var(--brand-50))',\n focus: 'hsl(var(--brand-500))',\n },\n tertiary: {\n bg: 'transparent',\n text: 'hsl(var(--brand-700))',\n hover: 'hsl(var(--brand-50))',\n focus: 'hsl(var(--brand-500))',\n },\n },\n};\n\nexport type Colors = typeof colors;","/**\n * Typography token definitions based on the design system\n */\n\nexport const typography = {\n fontFamily: {\n sans: ['var(--font-inter)', 'sans-serif'],\n },\n fontWeight: {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n fontSize: {\n // Display sizes\n 'display-2xl': ['4.5rem', { lineHeight: '5.625rem', letterSpacing: '-0.02em' }],\n 'display-xl': ['3.75rem', { lineHeight: '4.5rem', letterSpacing: '-0.02em' }],\n 'display-lg': ['3rem', { lineHeight: '3.75rem', letterSpacing: '-0.02em' }],\n 'display-md': ['2.25rem', { lineHeight: '2.75rem', letterSpacing: '-0.02em' }],\n 'display-sm': ['1.875rem', { lineHeight: '2.375rem', letterSpacing: '-0.02em' }],\n 'display-xs': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.02em' }],\n \n // Text sizes\n 'text-xl': ['1.25rem', { lineHeight: '1.875rem' }],\n 'text-lg': ['1.125rem', { lineHeight: '1.75rem' }],\n 'text-md': ['1rem', { lineHeight: '1.5rem' }],\n 'text-sm': ['0.875rem', { lineHeight: '1.25rem' }],\n 'text-xs': ['0.75rem', { lineHeight: '1.125rem' }],\n },\n // Predefined style combinations\n styles: {\n h1: 'text-display-md font-bold',\n h2: 'text-display-sm font-bold',\n h3: 'text-display-xs font-bold',\n h4: 'text-text-xl font-semibold',\n h5: 'text-text-lg font-semibold',\n h6: 'text-text-md font-semibold',\n \n // Body text\n body: 'text-text-md font-regular',\n 'body-large': 'text-text-lg font-regular',\n 'body-small': 'text-text-sm font-regular',\n \n // Special styles\n caption: 'text-text-xs font-medium',\n overline: 'text-text-xs font-medium uppercase tracking-wider',\n label: 'text-text-sm font-medium',\n },\n // For semantic variants\n variants: {\n italic: 'italic',\n underline: 'underline',\n },\n};\n\nexport type Typography = typeof typography;","/**\n * Spacing tokens used throughout the application\n * \n * Note: This extends Tailwind's default spacing values rather than replacing them.\n * We only define semantic values here that map to Tailwind's spacing scale.\n */\n\nexport const spacing = {\n // We don't need to redefine the base spacing scale\n // as we'll use Tailwind's defaults\n \n // Semantic spacing that maps to Tailwind's scale\n layout: {\n page: '6', // maps to Tailwind's spacing-6 (1.5rem, 24px)\n section: '8', // maps to Tailwind's spacing-8 (2rem, 32px)\n subsection: '4', // maps to Tailwind's spacing-4 (1rem, 16px)\n inline: '2', // maps to Tailwind's spacing-2 (0.5rem, 8px)\n },\n \n // Component-specific spacing that maps to Tailwind's scale\n component: {\n xxs: '1', // maps to Tailwind's spacing-1 (0.25rem, 4px)\n xs: '2', // maps to Tailwind's spacing-2 (0.5rem, 8px)\n sm: '3', // maps to Tailwind's spacing-3 (0.75rem, 12px)\n md: '4', // maps to Tailwind's spacing-4 (1rem, 16px)\n lg: '6', // maps to Tailwind's spacing-6 (1.5rem, 24px)\n xl: '8', // maps to Tailwind's spacing-8 (2rem, 32px)\n xxl: '12', // maps to Tailwind's spacing-12 (3rem, 48px)\n },\n \n // Any custom spacing values not in Tailwind's default scale\n // would be defined here for extending in the Tailwind config\n custom: {\n // Example: '4.5': '1.125rem', // 18px\n }\n};\n\nexport type Spacing = typeof spacing;","/**\n * Border radius tokens used throughout the application\n * \n * Note: This uses Tailwind's default radius naming but maps to our semantic values\n * defined by CSS variables. We don't override Tailwind's defaults but use\n * the semantic mappings for component consistency.\n */\n\nexport const radius = {\n // Semantic radius values using CSS variables\n default: 'var(--radius)',\n card: 'var(--radius)',\n button: 'var(--radius)',\n input: 'var(--radius)',\n badge: 'var(--radius)',\n \n // Shape variants\n pill: '9999px',\n circle: '50%',\n \n // Any custom radius values to extend Tailwind's defaults\n // would be defined here\n custom: {\n // Example: 'medium': '0.375rem', // 6px\n }\n};\n\nexport type Radius = typeof radius;","/**\n * Shadow tokens used throughout the application\n */\n\nexport const shadows = {\n // Base shadow values\n none: 'none',\n xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n \n // Semantic shadow values\n 'elevation-low': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n 'elevation-medium': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n 'elevation-high': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n \n // Component specific\n card: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n dropdown: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n modal: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n};\n\nexport type Shadows = typeof shadows;","/**\n * Re-exports all token definitions for easy consumption\n */\n\nexport * from './colors';\nexport * from './typography';\nexport * from './spacing';\nexport * from './radius';\nexport * from './shadows';\n\n// Export a consolidated tokens object\nimport { colors } from './colors';\nimport { typography } from './typography';\nimport { spacing } from './spacing';\nimport { radius } from './radius';\nimport { shadows } from './shadows';\n\nexport const tokens = {\n colors,\n typography,\n spacing,\n radius,\n shadows,\n};\n\nexport type Tokens = typeof tokens;"]}
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
// src/tokens/colors.ts
|
|
2
|
+
var colors = {
|
|
3
|
+
// Base colors
|
|
4
|
+
brand: {
|
|
5
|
+
25: "hsl(var(--brand-25))",
|
|
6
|
+
50: "hsl(var(--brand-50))",
|
|
7
|
+
100: "hsl(var(--brand-100))",
|
|
8
|
+
200: "hsl(var(--brand-200))",
|
|
9
|
+
300: "hsl(var(--brand-300))",
|
|
10
|
+
400: "hsl(var(--brand-400))",
|
|
11
|
+
500: "hsl(var(--brand-500))",
|
|
12
|
+
600: "hsl(var(--brand-600))",
|
|
13
|
+
700: "hsl(var(--brand-700))",
|
|
14
|
+
800: "hsl(var(--brand-800))",
|
|
15
|
+
900: "hsl(var(--brand-900))",
|
|
16
|
+
950: "hsl(var(--brand-950))"
|
|
17
|
+
},
|
|
18
|
+
error: {
|
|
19
|
+
25: "hsl(var(--error-25))",
|
|
20
|
+
50: "hsl(var(--error-50))",
|
|
21
|
+
100: "hsl(var(--error-100))",
|
|
22
|
+
200: "hsl(var(--error-200))",
|
|
23
|
+
300: "hsl(var(--error-300))",
|
|
24
|
+
400: "hsl(var(--error-400))",
|
|
25
|
+
500: "hsl(var(--error-500))",
|
|
26
|
+
600: "hsl(var(--error-600))",
|
|
27
|
+
700: "hsl(var(--error-700))",
|
|
28
|
+
800: "hsl(var(--error-800))",
|
|
29
|
+
900: "hsl(var(--error-900))",
|
|
30
|
+
950: "hsl(var(--error-950))"
|
|
31
|
+
},
|
|
32
|
+
warning: {
|
|
33
|
+
25: "hsl(var(--warning-25))",
|
|
34
|
+
50: "hsl(var(--warning-50))",
|
|
35
|
+
100: "hsl(var(--warning-100))",
|
|
36
|
+
200: "hsl(var(--warning-200))",
|
|
37
|
+
300: "hsl(var(--warning-300))",
|
|
38
|
+
400: "hsl(var(--warning-400))",
|
|
39
|
+
500: "hsl(var(--warning-500))",
|
|
40
|
+
600: "hsl(var(--warning-600))",
|
|
41
|
+
700: "hsl(var(--warning-700))",
|
|
42
|
+
800: "hsl(var(--warning-800))",
|
|
43
|
+
900: "hsl(var(--warning-900))",
|
|
44
|
+
950: "hsl(var(--warning-950))"
|
|
45
|
+
},
|
|
46
|
+
success: {
|
|
47
|
+
25: "hsl(var(--success-25))",
|
|
48
|
+
50: "hsl(var(--success-50))",
|
|
49
|
+
100: "hsl(var(--success-100))",
|
|
50
|
+
200: "hsl(var(--success-200))",
|
|
51
|
+
300: "hsl(var(--success-300))",
|
|
52
|
+
400: "hsl(var(--success-400))",
|
|
53
|
+
500: "hsl(var(--success-500))",
|
|
54
|
+
600: "hsl(var(--success-600))",
|
|
55
|
+
700: "hsl(var(--success-700))",
|
|
56
|
+
800: "hsl(var(--success-800))",
|
|
57
|
+
900: "hsl(var(--success-900))",
|
|
58
|
+
950: "hsl(var(--success-950))"
|
|
59
|
+
},
|
|
60
|
+
gray: {
|
|
61
|
+
25: "hsl(var(--gray-25))",
|
|
62
|
+
50: "hsl(var(--gray-50))",
|
|
63
|
+
100: "hsl(var(--gray-100))",
|
|
64
|
+
200: "hsl(var(--gray-200))",
|
|
65
|
+
300: "hsl(var(--gray-300))",
|
|
66
|
+
400: "hsl(var(--gray-400))",
|
|
67
|
+
500: "hsl(var(--gray-500))",
|
|
68
|
+
600: "hsl(var(--gray-600))",
|
|
69
|
+
700: "hsl(var(--gray-700))",
|
|
70
|
+
800: "hsl(var(--gray-800))",
|
|
71
|
+
900: "hsl(var(--gray-900))",
|
|
72
|
+
950: "hsl(var(--gray-950))"
|
|
73
|
+
},
|
|
74
|
+
// Semantic tokens
|
|
75
|
+
text: {
|
|
76
|
+
primary: "hsl(var(--foreground))",
|
|
77
|
+
secondary: "hsl(var(--muted-foreground))",
|
|
78
|
+
tertiary: "hsl(var(--muted-foreground))",
|
|
79
|
+
disabled: "hsl(var(--muted-foreground))",
|
|
80
|
+
brand: "hsl(var(--brand-700))",
|
|
81
|
+
"on-brand": "hsl(var(--brand-50))",
|
|
82
|
+
error: "hsl(var(--error-600))",
|
|
83
|
+
warning: "hsl(var(--warning-600))",
|
|
84
|
+
success: "hsl(var(--success-600))"
|
|
85
|
+
},
|
|
86
|
+
background: {
|
|
87
|
+
primary: "hsl(var(--background))",
|
|
88
|
+
secondary: "hsl(var(--secondary))",
|
|
89
|
+
tertiary: "hsl(var(--muted))",
|
|
90
|
+
brand: "hsl(var(--brand-50))",
|
|
91
|
+
error: "hsl(var(--error-50))",
|
|
92
|
+
warning: "hsl(var(--warning-50))",
|
|
93
|
+
success: "hsl(var(--success-50))",
|
|
94
|
+
card: "hsl(var(--card))"
|
|
95
|
+
},
|
|
96
|
+
border: {
|
|
97
|
+
primary: "hsl(var(--border))",
|
|
98
|
+
secondary: "hsl(var(--input))",
|
|
99
|
+
tertiary: "hsl(var(--accent))",
|
|
100
|
+
brand: "hsl(var(--brand-300))",
|
|
101
|
+
error: "hsl(var(--error-300))",
|
|
102
|
+
warning: "hsl(var(--warning-300))",
|
|
103
|
+
success: "hsl(var(--success-300))"
|
|
104
|
+
},
|
|
105
|
+
focus: {
|
|
106
|
+
ring: "hsl(var(--ring))",
|
|
107
|
+
brand: "hsl(var(--brand-500))",
|
|
108
|
+
error: "hsl(var(--error-500))",
|
|
109
|
+
warning: "hsl(var(--warning-500))",
|
|
110
|
+
success: "hsl(var(--success-500))"
|
|
111
|
+
},
|
|
112
|
+
// Component-specific
|
|
113
|
+
button: {
|
|
114
|
+
primary: {
|
|
115
|
+
bg: "hsl(var(--brand-600))",
|
|
116
|
+
text: "white",
|
|
117
|
+
hover: "hsl(var(--brand-700))",
|
|
118
|
+
focus: "hsl(var(--brand-500))"
|
|
119
|
+
},
|
|
120
|
+
secondary: {
|
|
121
|
+
bg: "transparent",
|
|
122
|
+
text: "hsl(var(--brand-700))",
|
|
123
|
+
border: "hsl(var(--brand-300))",
|
|
124
|
+
hover: "hsl(var(--brand-50))",
|
|
125
|
+
focus: "hsl(var(--brand-500))"
|
|
126
|
+
},
|
|
127
|
+
tertiary: {
|
|
128
|
+
bg: "transparent",
|
|
129
|
+
text: "hsl(var(--brand-700))",
|
|
130
|
+
hover: "hsl(var(--brand-50))",
|
|
131
|
+
focus: "hsl(var(--brand-500))"
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
// src/tokens/typography.ts
|
|
137
|
+
var typography = {
|
|
138
|
+
fontFamily: {
|
|
139
|
+
sans: ["var(--font-inter)", "sans-serif"]
|
|
140
|
+
},
|
|
141
|
+
fontWeight: {
|
|
142
|
+
regular: "400",
|
|
143
|
+
medium: "500",
|
|
144
|
+
semibold: "600",
|
|
145
|
+
bold: "700"
|
|
146
|
+
},
|
|
147
|
+
fontSize: {
|
|
148
|
+
// Display sizes
|
|
149
|
+
"display-2xl": ["4.5rem", { lineHeight: "5.625rem", letterSpacing: "-0.02em" }],
|
|
150
|
+
"display-xl": ["3.75rem", { lineHeight: "4.5rem", letterSpacing: "-0.02em" }],
|
|
151
|
+
"display-lg": ["3rem", { lineHeight: "3.75rem", letterSpacing: "-0.02em" }],
|
|
152
|
+
"display-md": ["2.25rem", { lineHeight: "2.75rem", letterSpacing: "-0.02em" }],
|
|
153
|
+
"display-sm": ["1.875rem", { lineHeight: "2.375rem", letterSpacing: "-0.02em" }],
|
|
154
|
+
"display-xs": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.02em" }],
|
|
155
|
+
// Text sizes
|
|
156
|
+
"text-xl": ["1.25rem", { lineHeight: "1.875rem" }],
|
|
157
|
+
"text-lg": ["1.125rem", { lineHeight: "1.75rem" }],
|
|
158
|
+
"text-md": ["1rem", { lineHeight: "1.5rem" }],
|
|
159
|
+
"text-sm": ["0.875rem", { lineHeight: "1.25rem" }],
|
|
160
|
+
"text-xs": ["0.75rem", { lineHeight: "1.125rem" }]
|
|
161
|
+
},
|
|
162
|
+
// Predefined style combinations
|
|
163
|
+
styles: {
|
|
164
|
+
h1: "text-display-md font-bold",
|
|
165
|
+
h2: "text-display-sm font-bold",
|
|
166
|
+
h3: "text-display-xs font-bold",
|
|
167
|
+
h4: "text-text-xl font-semibold",
|
|
168
|
+
h5: "text-text-lg font-semibold",
|
|
169
|
+
h6: "text-text-md font-semibold",
|
|
170
|
+
// Body text
|
|
171
|
+
body: "text-text-md font-regular",
|
|
172
|
+
"body-large": "text-text-lg font-regular",
|
|
173
|
+
"body-small": "text-text-sm font-regular",
|
|
174
|
+
// Special styles
|
|
175
|
+
caption: "text-text-xs font-medium",
|
|
176
|
+
overline: "text-text-xs font-medium uppercase tracking-wider",
|
|
177
|
+
label: "text-text-sm font-medium"
|
|
178
|
+
},
|
|
179
|
+
// For semantic variants
|
|
180
|
+
variants: {
|
|
181
|
+
italic: "italic",
|
|
182
|
+
underline: "underline"
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
// src/tokens/spacing.ts
|
|
187
|
+
var spacing = {
|
|
188
|
+
// We don't need to redefine the base spacing scale
|
|
189
|
+
// as we'll use Tailwind's defaults
|
|
190
|
+
// Semantic spacing that maps to Tailwind's scale
|
|
191
|
+
layout: {
|
|
192
|
+
page: "6",
|
|
193
|
+
// maps to Tailwind's spacing-6 (1.5rem, 24px)
|
|
194
|
+
section: "8",
|
|
195
|
+
// maps to Tailwind's spacing-8 (2rem, 32px)
|
|
196
|
+
subsection: "4",
|
|
197
|
+
// maps to Tailwind's spacing-4 (1rem, 16px)
|
|
198
|
+
inline: "2"
|
|
199
|
+
// maps to Tailwind's spacing-2 (0.5rem, 8px)
|
|
200
|
+
},
|
|
201
|
+
// Component-specific spacing that maps to Tailwind's scale
|
|
202
|
+
component: {
|
|
203
|
+
xxs: "1",
|
|
204
|
+
// maps to Tailwind's spacing-1 (0.25rem, 4px)
|
|
205
|
+
xs: "2",
|
|
206
|
+
// maps to Tailwind's spacing-2 (0.5rem, 8px)
|
|
207
|
+
sm: "3",
|
|
208
|
+
// maps to Tailwind's spacing-3 (0.75rem, 12px)
|
|
209
|
+
md: "4",
|
|
210
|
+
// maps to Tailwind's spacing-4 (1rem, 16px)
|
|
211
|
+
lg: "6",
|
|
212
|
+
// maps to Tailwind's spacing-6 (1.5rem, 24px)
|
|
213
|
+
xl: "8",
|
|
214
|
+
// maps to Tailwind's spacing-8 (2rem, 32px)
|
|
215
|
+
xxl: "12"
|
|
216
|
+
// maps to Tailwind's spacing-12 (3rem, 48px)
|
|
217
|
+
},
|
|
218
|
+
// Any custom spacing values not in Tailwind's default scale
|
|
219
|
+
// would be defined here for extending in the Tailwind config
|
|
220
|
+
custom: {
|
|
221
|
+
// Example: '4.5': '1.125rem', // 18px
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
// src/tokens/radius.ts
|
|
226
|
+
var radius = {
|
|
227
|
+
// Semantic radius values using CSS variables
|
|
228
|
+
default: "var(--radius)",
|
|
229
|
+
card: "var(--radius)",
|
|
230
|
+
button: "var(--radius)",
|
|
231
|
+
input: "var(--radius)",
|
|
232
|
+
badge: "var(--radius)",
|
|
233
|
+
// Shape variants
|
|
234
|
+
pill: "9999px",
|
|
235
|
+
circle: "50%",
|
|
236
|
+
// Any custom radius values to extend Tailwind's defaults
|
|
237
|
+
// would be defined here
|
|
238
|
+
custom: {
|
|
239
|
+
// Example: 'medium': '0.375rem', // 6px
|
|
240
|
+
}
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
// src/tokens/shadows.ts
|
|
244
|
+
var shadows = {
|
|
245
|
+
// Base shadow values
|
|
246
|
+
none: "none",
|
|
247
|
+
xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
248
|
+
sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
249
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
250
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
251
|
+
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
252
|
+
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
253
|
+
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
|
254
|
+
// Semantic shadow values
|
|
255
|
+
"elevation-low": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
256
|
+
"elevation-medium": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
257
|
+
"elevation-high": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
258
|
+
// Component specific
|
|
259
|
+
card: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
260
|
+
dropdown: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
261
|
+
modal: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
262
|
+
};
|
|
263
|
+
|
|
264
|
+
// src/tokens/index.ts
|
|
265
|
+
var tokens = {
|
|
266
|
+
colors,
|
|
267
|
+
typography,
|
|
268
|
+
spacing,
|
|
269
|
+
radius,
|
|
270
|
+
shadows
|
|
271
|
+
};
|
|
272
|
+
|
|
273
|
+
export { colors, radius, shadows, spacing, tokens, typography };
|
|
274
|
+
//# sourceMappingURL=index.mjs.map
|
|
275
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/tokens/colors.ts","../../src/tokens/typography.ts","../../src/tokens/spacing.ts","../../src/tokens/radius.ts","../../src/tokens/shadows.ts","../../src/tokens/index.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Color token definitions based on the design system\n */\n\nexport const colors = {\n // Base colors\n brand: {\n 25: 'hsl(var(--brand-25))',\n 50: 'hsl(var(--brand-50))',\n 100: 'hsl(var(--brand-100))',\n 200: 'hsl(var(--brand-200))',\n 300: 'hsl(var(--brand-300))',\n 400: 'hsl(var(--brand-400))',\n 500: 'hsl(var(--brand-500))',\n 600: 'hsl(var(--brand-600))',\n 700: 'hsl(var(--brand-700))',\n 800: 'hsl(var(--brand-800))',\n 900: 'hsl(var(--brand-900))',\n 950: 'hsl(var(--brand-950))',\n },\n error: {\n 25: 'hsl(var(--error-25))',\n 50: 'hsl(var(--error-50))',\n 100: 'hsl(var(--error-100))',\n 200: 'hsl(var(--error-200))',\n 300: 'hsl(var(--error-300))',\n 400: 'hsl(var(--error-400))',\n 500: 'hsl(var(--error-500))',\n 600: 'hsl(var(--error-600))',\n 700: 'hsl(var(--error-700))',\n 800: 'hsl(var(--error-800))',\n 900: 'hsl(var(--error-900))',\n 950: 'hsl(var(--error-950))',\n },\n warning: {\n 25: 'hsl(var(--warning-25))',\n 50: 'hsl(var(--warning-50))',\n 100: 'hsl(var(--warning-100))',\n 200: 'hsl(var(--warning-200))',\n 300: 'hsl(var(--warning-300))',\n 400: 'hsl(var(--warning-400))',\n 500: 'hsl(var(--warning-500))',\n 600: 'hsl(var(--warning-600))',\n 700: 'hsl(var(--warning-700))',\n 800: 'hsl(var(--warning-800))',\n 900: 'hsl(var(--warning-900))',\n 950: 'hsl(var(--warning-950))',\n },\n success: {\n 25: 'hsl(var(--success-25))',\n 50: 'hsl(var(--success-50))',\n 100: 'hsl(var(--success-100))',\n 200: 'hsl(var(--success-200))',\n 300: 'hsl(var(--success-300))',\n 400: 'hsl(var(--success-400))',\n 500: 'hsl(var(--success-500))',\n 600: 'hsl(var(--success-600))',\n 700: 'hsl(var(--success-700))',\n 800: 'hsl(var(--success-800))',\n 900: 'hsl(var(--success-900))',\n 950: 'hsl(var(--success-950))',\n },\n gray: {\n 25: 'hsl(var(--gray-25))',\n 50: 'hsl(var(--gray-50))',\n 100: 'hsl(var(--gray-100))',\n 200: 'hsl(var(--gray-200))',\n 300: 'hsl(var(--gray-300))',\n 400: 'hsl(var(--gray-400))',\n 500: 'hsl(var(--gray-500))',\n 600: 'hsl(var(--gray-600))',\n 700: 'hsl(var(--gray-700))',\n 800: 'hsl(var(--gray-800))',\n 900: 'hsl(var(--gray-900))',\n 950: 'hsl(var(--gray-950))',\n },\n \n // Semantic tokens\n text: {\n primary: 'hsl(var(--foreground))',\n secondary: 'hsl(var(--muted-foreground))',\n tertiary: 'hsl(var(--muted-foreground))',\n disabled: 'hsl(var(--muted-foreground))',\n brand: 'hsl(var(--brand-700))',\n 'on-brand': 'hsl(var(--brand-50))',\n error: 'hsl(var(--error-600))',\n warning: 'hsl(var(--warning-600))',\n success: 'hsl(var(--success-600))',\n },\n background: {\n primary: 'hsl(var(--background))',\n secondary: 'hsl(var(--secondary))',\n tertiary: 'hsl(var(--muted))',\n brand: 'hsl(var(--brand-50))',\n error: 'hsl(var(--error-50))',\n warning: 'hsl(var(--warning-50))',\n success: 'hsl(var(--success-50))',\n card: 'hsl(var(--card))',\n },\n border: {\n primary: 'hsl(var(--border))',\n secondary: 'hsl(var(--input))',\n tertiary: 'hsl(var(--accent))',\n brand: 'hsl(var(--brand-300))',\n error: 'hsl(var(--error-300))',\n warning: 'hsl(var(--warning-300))',\n success: 'hsl(var(--success-300))',\n },\n focus: {\n ring: 'hsl(var(--ring))',\n brand: 'hsl(var(--brand-500))',\n error: 'hsl(var(--error-500))',\n warning: 'hsl(var(--warning-500))',\n success: 'hsl(var(--success-500))',\n },\n \n // Component-specific\n button: {\n primary: {\n bg: 'hsl(var(--brand-600))',\n text: 'white',\n hover: 'hsl(var(--brand-700))',\n focus: 'hsl(var(--brand-500))',\n },\n secondary: {\n bg: 'transparent',\n text: 'hsl(var(--brand-700))',\n border: 'hsl(var(--brand-300))',\n hover: 'hsl(var(--brand-50))',\n focus: 'hsl(var(--brand-500))',\n },\n tertiary: {\n bg: 'transparent',\n text: 'hsl(var(--brand-700))',\n hover: 'hsl(var(--brand-50))',\n focus: 'hsl(var(--brand-500))',\n },\n },\n};\n\nexport type Colors = typeof colors;","/**\n * Typography token definitions based on the design system\n */\n\nexport const typography = {\n fontFamily: {\n sans: ['var(--font-inter)', 'sans-serif'],\n },\n fontWeight: {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n fontSize: {\n // Display sizes\n 'display-2xl': ['4.5rem', { lineHeight: '5.625rem', letterSpacing: '-0.02em' }],\n 'display-xl': ['3.75rem', { lineHeight: '4.5rem', letterSpacing: '-0.02em' }],\n 'display-lg': ['3rem', { lineHeight: '3.75rem', letterSpacing: '-0.02em' }],\n 'display-md': ['2.25rem', { lineHeight: '2.75rem', letterSpacing: '-0.02em' }],\n 'display-sm': ['1.875rem', { lineHeight: '2.375rem', letterSpacing: '-0.02em' }],\n 'display-xs': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.02em' }],\n \n // Text sizes\n 'text-xl': ['1.25rem', { lineHeight: '1.875rem' }],\n 'text-lg': ['1.125rem', { lineHeight: '1.75rem' }],\n 'text-md': ['1rem', { lineHeight: '1.5rem' }],\n 'text-sm': ['0.875rem', { lineHeight: '1.25rem' }],\n 'text-xs': ['0.75rem', { lineHeight: '1.125rem' }],\n },\n // Predefined style combinations\n styles: {\n h1: 'text-display-md font-bold',\n h2: 'text-display-sm font-bold',\n h3: 'text-display-xs font-bold',\n h4: 'text-text-xl font-semibold',\n h5: 'text-text-lg font-semibold',\n h6: 'text-text-md font-semibold',\n \n // Body text\n body: 'text-text-md font-regular',\n 'body-large': 'text-text-lg font-regular',\n 'body-small': 'text-text-sm font-regular',\n \n // Special styles\n caption: 'text-text-xs font-medium',\n overline: 'text-text-xs font-medium uppercase tracking-wider',\n label: 'text-text-sm font-medium',\n },\n // For semantic variants\n variants: {\n italic: 'italic',\n underline: 'underline',\n },\n};\n\nexport type Typography = typeof typography;","/**\n * Spacing tokens used throughout the application\n * \n * Note: This extends Tailwind's default spacing values rather than replacing them.\n * We only define semantic values here that map to Tailwind's spacing scale.\n */\n\nexport const spacing = {\n // We don't need to redefine the base spacing scale\n // as we'll use Tailwind's defaults\n \n // Semantic spacing that maps to Tailwind's scale\n layout: {\n page: '6', // maps to Tailwind's spacing-6 (1.5rem, 24px)\n section: '8', // maps to Tailwind's spacing-8 (2rem, 32px)\n subsection: '4', // maps to Tailwind's spacing-4 (1rem, 16px)\n inline: '2', // maps to Tailwind's spacing-2 (0.5rem, 8px)\n },\n \n // Component-specific spacing that maps to Tailwind's scale\n component: {\n xxs: '1', // maps to Tailwind's spacing-1 (0.25rem, 4px)\n xs: '2', // maps to Tailwind's spacing-2 (0.5rem, 8px)\n sm: '3', // maps to Tailwind's spacing-3 (0.75rem, 12px)\n md: '4', // maps to Tailwind's spacing-4 (1rem, 16px)\n lg: '6', // maps to Tailwind's spacing-6 (1.5rem, 24px)\n xl: '8', // maps to Tailwind's spacing-8 (2rem, 32px)\n xxl: '12', // maps to Tailwind's spacing-12 (3rem, 48px)\n },\n \n // Any custom spacing values not in Tailwind's default scale\n // would be defined here for extending in the Tailwind config\n custom: {\n // Example: '4.5': '1.125rem', // 18px\n }\n};\n\nexport type Spacing = typeof spacing;","/**\n * Border radius tokens used throughout the application\n * \n * Note: This uses Tailwind's default radius naming but maps to our semantic values\n * defined by CSS variables. We don't override Tailwind's defaults but use\n * the semantic mappings for component consistency.\n */\n\nexport const radius = {\n // Semantic radius values using CSS variables\n default: 'var(--radius)',\n card: 'var(--radius)',\n button: 'var(--radius)',\n input: 'var(--radius)',\n badge: 'var(--radius)',\n \n // Shape variants\n pill: '9999px',\n circle: '50%',\n \n // Any custom radius values to extend Tailwind's defaults\n // would be defined here\n custom: {\n // Example: 'medium': '0.375rem', // 6px\n }\n};\n\nexport type Radius = typeof radius;","/**\n * Shadow tokens used throughout the application\n */\n\nexport const shadows = {\n // Base shadow values\n none: 'none',\n xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n \n // Semantic shadow values\n 'elevation-low': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n 'elevation-medium': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n 'elevation-high': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n \n // Component specific\n card: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n dropdown: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n modal: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n};\n\nexport type Shadows = typeof shadows;","/**\n * Re-exports all token definitions for easy consumption\n */\n\nexport * from './colors';\nexport * from './typography';\nexport * from './spacing';\nexport * from './radius';\nexport * from './shadows';\n\n// Export a consolidated tokens object\nimport { colors } from './colors';\nimport { typography } from './typography';\nimport { spacing } from './spacing';\nimport { radius } from './radius';\nimport { shadows } from './shadows';\n\nexport const tokens = {\n colors,\n typography,\n spacing,\n radius,\n shadows,\n};\n\nexport type Tokens = typeof tokens;"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tydavidson/design-system",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.9",
|
|
4
4
|
"description": "Float Design System with email components and theme system",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"import": "./dist/tokens/index.mjs",
|
|
27
27
|
"require": "./dist/tokens/index.js"
|
|
28
28
|
},
|
|
29
|
-
"./
|
|
29
|
+
"./styles/globals.css": "./dist/styles/globals.css"
|
|
30
30
|
},
|
|
31
31
|
"files": [
|
|
32
32
|
"dist",
|