@freehold/design-tokens 0.0.1

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 (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +129 -0
  3. package/dist/index.d.mts +253 -0
  4. package/dist/index.d.ts +253 -0
  5. package/dist/index.js +372 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +338 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/tokens.css +132 -0
  10. package/package.json +45 -0
package/dist/index.mjs ADDED
@@ -0,0 +1,338 @@
1
+ // src/colors.ts
2
+ var colors = {
3
+ // Background colors
4
+ background: {
5
+ primary: "#FAF9F6",
6
+ // Warm white
7
+ secondary: "#F5F3EF",
8
+ // Slightly darker warm white
9
+ tertiary: "#EFECE6",
10
+ // Card backgrounds
11
+ elevated: "#FFFFFF"
12
+ // Elevated surfaces
13
+ },
14
+ // Sand accent palette
15
+ sand: {
16
+ 50: "#F9F7F4",
17
+ 100: "#F2EDE6",
18
+ 200: "#E5DDD1",
19
+ 300: "#D4C8B8",
20
+ 400: "#C4B49E",
21
+ 500: "#B8A48E",
22
+ // Primary sand accent
23
+ 600: "#A08A6E",
24
+ 700: "#86715A",
25
+ 800: "#6B5A48",
26
+ 900: "#544737"
27
+ },
28
+ // Text colors
29
+ text: {
30
+ primary: "#2C2824",
31
+ // Near-black warm
32
+ secondary: "#5C574F",
33
+ // Muted for secondary text
34
+ tertiary: "#8A847A",
35
+ // Even more muted
36
+ inverse: "#FAF9F6"
37
+ // For dark backgrounds
38
+ },
39
+ // Status colors
40
+ status: {
41
+ pending: {
42
+ background: "#FEF3C7",
43
+ text: "#92400E",
44
+ border: "#FCD34D",
45
+ dot: "#D4B86A"
46
+ },
47
+ approved: {
48
+ background: "#D1FAE5",
49
+ text: "#065F46",
50
+ border: "#6EE7B7",
51
+ dot: "#8DB580"
52
+ },
53
+ paid: {
54
+ background: "#DBEAFE",
55
+ text: "#1E40AF",
56
+ border: "#93C5FD",
57
+ dot: "#60A5FA"
58
+ },
59
+ error: {
60
+ background: "#FEE2E2",
61
+ text: "#991B1B",
62
+ border: "#FCA5A5",
63
+ dot: "#C4796B"
64
+ },
65
+ success: {
66
+ background: "#D1FAE5",
67
+ text: "#065F46",
68
+ border: "#6EE7B7",
69
+ dot: "#8DB580"
70
+ },
71
+ warning: {
72
+ background: "#FEF3C7",
73
+ text: "#92400E",
74
+ border: "#FCD34D",
75
+ dot: "#D4B86A"
76
+ }
77
+ },
78
+ // Semantic colors
79
+ semantic: {
80
+ success: "#8DB580",
81
+ warning: "#D4B86A",
82
+ error: "#C4796B",
83
+ info: "#60A5FA"
84
+ },
85
+ // Border colors
86
+ border: {
87
+ subtle: "rgba(184, 164, 142, 0.15)",
88
+ default: "rgba(184, 164, 142, 0.25)",
89
+ strong: "rgba(184, 164, 142, 0.4)"
90
+ }
91
+ };
92
+
93
+ // src/typography.ts
94
+ var typography = {
95
+ fonts: {
96
+ heading: '"DM Serif Display", Georgia, serif',
97
+ body: '"DM Sans", system-ui, sans-serif',
98
+ mono: '"JetBrains Mono", Consolas, monospace'
99
+ },
100
+ fontSizes: {
101
+ xs: "0.75rem",
102
+ // 12px
103
+ sm: "0.875rem",
104
+ // 14px
105
+ base: "1rem",
106
+ // 16px
107
+ lg: "1.125rem",
108
+ // 18px
109
+ xl: "1.25rem",
110
+ // 20px
111
+ "2xl": "1.5rem",
112
+ // 24px
113
+ "3xl": "1.875rem",
114
+ // 30px
115
+ "4xl": "2.25rem",
116
+ // 36px
117
+ "5xl": "3rem"
118
+ // 48px
119
+ },
120
+ fontWeights: {
121
+ normal: "400",
122
+ medium: "500",
123
+ semibold: "600",
124
+ bold: "700"
125
+ },
126
+ lineHeights: {
127
+ tight: "1.25",
128
+ snug: "1.375",
129
+ normal: "1.5",
130
+ relaxed: "1.625",
131
+ loose: "2"
132
+ },
133
+ letterSpacing: {
134
+ tighter: "-0.05em",
135
+ tight: "-0.025em",
136
+ normal: "0",
137
+ wide: "0.025em",
138
+ wider: "0.05em"
139
+ }
140
+ };
141
+
142
+ // src/spacing.ts
143
+ var spacing = {
144
+ 0: "0",
145
+ 0.5: "0.125rem",
146
+ // 2px
147
+ 1: "0.25rem",
148
+ // 4px
149
+ 1.5: "0.375rem",
150
+ // 6px
151
+ 2: "0.5rem",
152
+ // 8px (base unit)
153
+ 2.5: "0.625rem",
154
+ // 10px
155
+ 3: "0.75rem",
156
+ // 12px
157
+ 3.5: "0.875rem",
158
+ // 14px
159
+ 4: "1rem",
160
+ // 16px (2 units)
161
+ 5: "1.25rem",
162
+ // 20px
163
+ 6: "1.5rem",
164
+ // 24px (3 units)
165
+ 7: "1.75rem",
166
+ // 28px
167
+ 8: "2rem",
168
+ // 32px (4 units)
169
+ 9: "2.25rem",
170
+ // 36px
171
+ 10: "2.5rem",
172
+ // 40px (5 units)
173
+ 11: "2.75rem",
174
+ // 44px
175
+ 12: "3rem",
176
+ // 48px (6 units)
177
+ 14: "3.5rem",
178
+ // 56px
179
+ 16: "4rem",
180
+ // 64px (8 units)
181
+ 20: "5rem",
182
+ // 80px
183
+ 24: "6rem",
184
+ // 96px
185
+ 28: "7rem",
186
+ // 112px
187
+ 32: "8rem"
188
+ // 128px
189
+ };
190
+ var radii = {
191
+ none: "0",
192
+ sm: "0.5rem",
193
+ // 8px (buttons, sidebar items)
194
+ default: "0.5rem",
195
+ // 8px (buttons)
196
+ md: "0.625rem",
197
+ // 10px (inner cards, inputs, icon containers)
198
+ lg: "0.875rem",
199
+ // 14px (outer cards, feature cards)
200
+ xl: "1rem",
201
+ // 16px (dashboard wrapper)
202
+ "2xl": "1.5rem",
203
+ // 24px
204
+ full: "9999px"
205
+ // Pills, badges, avatars
206
+ };
207
+ var radiiPx = {
208
+ none: 0,
209
+ sm: 8,
210
+ default: 8,
211
+ md: 10,
212
+ lg: 14,
213
+ xl: 16,
214
+ "2xl": 24,
215
+ full: 9999
216
+ };
217
+
218
+ // src/shadows.ts
219
+ var shadows = {
220
+ none: "none",
221
+ sm: `
222
+ 0 1px 2px 0 rgba(184, 164, 142, 0.05),
223
+ 0 1px 3px 0 rgba(44, 40, 36, 0.04)
224
+ `.trim().replace(/\s+/g, " "),
225
+ default: `
226
+ 0 2px 4px 0 rgba(184, 164, 142, 0.08),
227
+ 0 4px 8px 0 rgba(44, 40, 36, 0.04)
228
+ `.trim().replace(/\s+/g, " "),
229
+ md: `
230
+ 0 4px 6px -1px rgba(184, 164, 142, 0.1),
231
+ 0 6px 12px -2px rgba(44, 40, 36, 0.05)
232
+ `.trim().replace(/\s+/g, " "),
233
+ lg: `
234
+ 0 8px 16px -4px rgba(184, 164, 142, 0.12),
235
+ 0 12px 24px -6px rgba(44, 40, 36, 0.06)
236
+ `.trim().replace(/\s+/g, " "),
237
+ xl: `
238
+ 0 16px 32px -8px rgba(184, 164, 142, 0.15),
239
+ 0 24px 48px -12px rgba(44, 40, 36, 0.08)
240
+ `.trim().replace(/\s+/g, " "),
241
+ // Elevated card shadow
242
+ elevated: `
243
+ 0 4px 8px 0 rgba(184, 164, 142, 0.08),
244
+ 0 8px 16px -4px rgba(44, 40, 36, 0.06)
245
+ `.trim().replace(/\s+/g, " "),
246
+ // Hover state shadow
247
+ hover: "0 2px 8px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.05)",
248
+ // Button shadow
249
+ button: "0 2px 8px rgba(26,26,26,0.12)",
250
+ // Card wrapper shadow
251
+ card: "0 4px 24px rgba(26,26,26,0.04), 0 12px 48px rgba(26,26,26,0.03)",
252
+ // Inner shadow for inputs
253
+ inner: "inset 0 1px 2px 0 rgba(184, 164, 142, 0.06)"
254
+ };
255
+
256
+ // src/animations.ts
257
+ var animations = {
258
+ durations: {
259
+ fast: "150ms",
260
+ default: "200ms",
261
+ slow: "350ms",
262
+ slower: "500ms"
263
+ },
264
+ easings: {
265
+ default: "cubic-bezier(0.4, 0, 0.2, 1)",
266
+ in: "cubic-bezier(0.4, 0, 1, 1)",
267
+ out: "cubic-bezier(0, 0, 0.2, 1)",
268
+ inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
269
+ bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
270
+ },
271
+ transitions: {
272
+ fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
273
+ default: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
274
+ slow: "350ms cubic-bezier(0.4, 0, 0.2, 1)"
275
+ },
276
+ // Hover lift transform
277
+ hoverLift: "translateY(-2px)"
278
+ };
279
+
280
+ // src/index.ts
281
+ var tailwindPreset = {
282
+ colors: {
283
+ background: {
284
+ primary: "#FAF9F6",
285
+ secondary: "#F5F3EF",
286
+ tertiary: "#EFECE6",
287
+ elevated: "#FFFFFF"
288
+ },
289
+ sand: {
290
+ 50: "#F9F7F4",
291
+ 100: "#F2EDE6",
292
+ 200: "#E5DDD1",
293
+ 300: "#D4C8B8",
294
+ 400: "#C4B49E",
295
+ 500: "#B8A48E",
296
+ 600: "#A08A6E",
297
+ 700: "#86715A",
298
+ 800: "#6B5A48",
299
+ 900: "#544737"
300
+ },
301
+ text: {
302
+ primary: "#2C2824",
303
+ secondary: "#5C574F",
304
+ tertiary: "#8A847A",
305
+ inverse: "#FAF9F6"
306
+ },
307
+ status: {
308
+ pending: "#FEF3C7",
309
+ approved: "#D1FAE5",
310
+ paid: "#DBEAFE",
311
+ error: "#FEE2E2"
312
+ }
313
+ },
314
+ fontFamily: {
315
+ heading: ['"DM Serif Display"', "Georgia", "serif"],
316
+ body: ['"DM Sans"', "system-ui", "sans-serif"],
317
+ mono: ['"JetBrains Mono"', "Consolas", "monospace"]
318
+ },
319
+ borderRadius: {
320
+ sm: "0.25rem",
321
+ DEFAULT: "0.5rem",
322
+ md: "0.625rem",
323
+ lg: "0.875rem",
324
+ xl: "1rem",
325
+ "2xl": "1.5rem"
326
+ }
327
+ };
328
+ export {
329
+ animations,
330
+ colors,
331
+ radii,
332
+ radiiPx,
333
+ shadows,
334
+ spacing,
335
+ tailwindPreset,
336
+ typography
337
+ };
338
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/colors.ts","../src/typography.ts","../src/spacing.ts","../src/shadows.ts","../src/animations.ts","../src/index.ts"],"sourcesContent":["export const colors = {\n // Background colors\n background: {\n primary: '#FAF9F6', // Warm white\n secondary: '#F5F3EF', // Slightly darker warm white\n tertiary: '#EFECE6', // Card backgrounds\n elevated: '#FFFFFF', // Elevated surfaces\n },\n\n // Sand accent palette\n sand: {\n 50: '#F9F7F4',\n 100: '#F2EDE6',\n 200: '#E5DDD1',\n 300: '#D4C8B8',\n 400: '#C4B49E',\n 500: '#B8A48E', // Primary sand accent\n 600: '#A08A6E',\n 700: '#86715A',\n 800: '#6B5A48',\n 900: '#544737',\n },\n\n // Text colors\n text: {\n primary: '#2C2824', // Near-black warm\n secondary: '#5C574F', // Muted for secondary text\n tertiary: '#8A847A', // Even more muted\n inverse: '#FAF9F6', // For dark backgrounds\n },\n\n // Status colors\n status: {\n pending: {\n background: '#FEF3C7',\n text: '#92400E',\n border: '#FCD34D',\n dot: '#D4B86A',\n },\n approved: {\n background: '#D1FAE5',\n text: '#065F46',\n border: '#6EE7B7',\n dot: '#8DB580',\n },\n paid: {\n background: '#DBEAFE',\n text: '#1E40AF',\n border: '#93C5FD',\n dot: '#60A5FA',\n },\n error: {\n background: '#FEE2E2',\n text: '#991B1B',\n border: '#FCA5A5',\n dot: '#C4796B',\n },\n success: {\n background: '#D1FAE5',\n text: '#065F46',\n border: '#6EE7B7',\n dot: '#8DB580',\n },\n warning: {\n background: '#FEF3C7',\n text: '#92400E',\n border: '#FCD34D',\n dot: '#D4B86A',\n },\n },\n\n // Semantic colors\n semantic: {\n success: '#8DB580',\n warning: '#D4B86A',\n error: '#C4796B',\n info: '#60A5FA',\n },\n\n // Border colors\n border: {\n subtle: 'rgba(184, 164, 142, 0.15)',\n default: 'rgba(184, 164, 142, 0.25)',\n strong: 'rgba(184, 164, 142, 0.4)',\n },\n} as const\n\nexport type Colors = typeof colors\n","export const typography = {\n fonts: {\n heading: '\"DM Serif Display\", Georgia, serif',\n body: '\"DM Sans\", system-ui, sans-serif',\n mono: '\"JetBrains Mono\", Consolas, monospace',\n },\n\n fontSizes: {\n xs: '0.75rem', // 12px\n sm: '0.875rem', // 14px\n base: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '1.5rem', // 24px\n '3xl': '1.875rem', // 30px\n '4xl': '2.25rem', // 36px\n '5xl': '3rem', // 48px\n },\n\n fontWeights: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n\n lineHeights: {\n tight: '1.25',\n snug: '1.375',\n normal: '1.5',\n relaxed: '1.625',\n loose: '2',\n },\n\n letterSpacing: {\n tighter: '-0.05em',\n tight: '-0.025em',\n normal: '0',\n wide: '0.025em',\n wider: '0.05em',\n },\n} as const\n\nexport type Typography = typeof typography\n","// 8px base unit system\nexport const spacing = {\n 0: '0',\n 0.5: '0.125rem', // 2px\n 1: '0.25rem', // 4px\n 1.5: '0.375rem', // 6px\n 2: '0.5rem', // 8px (base unit)\n 2.5: '0.625rem', // 10px\n 3: '0.75rem', // 12px\n 3.5: '0.875rem', // 14px\n 4: '1rem', // 16px (2 units)\n 5: '1.25rem', // 20px\n 6: '1.5rem', // 24px (3 units)\n 7: '1.75rem', // 28px\n 8: '2rem', // 32px (4 units)\n 9: '2.25rem', // 36px\n 10: '2.5rem', // 40px (5 units)\n 11: '2.75rem', // 44px\n 12: '3rem', // 48px (6 units)\n 14: '3.5rem', // 56px\n 16: '4rem', // 64px (8 units)\n 20: '5rem', // 80px\n 24: '6rem', // 96px\n 28: '7rem', // 112px\n 32: '8rem', // 128px\n} as const\n\nexport const radii = {\n none: '0',\n sm: '0.5rem', // 8px (buttons, sidebar items)\n default: '0.5rem', // 8px (buttons)\n md: '0.625rem', // 10px (inner cards, inputs, icon containers)\n lg: '0.875rem', // 14px (outer cards, feature cards)\n xl: '1rem', // 16px (dashboard wrapper)\n '2xl': '1.5rem', // 24px\n full: '9999px', // Pills, badges, avatars\n} as const\n\n// Pixel values for CSS-in-JS\nexport const radiiPx = {\n none: 0,\n sm: 8,\n default: 8,\n md: 10,\n lg: 14,\n xl: 16,\n '2xl': 24,\n full: 9999,\n} as const\n\nexport type Spacing = typeof spacing\nexport type Radii = typeof radii\nexport type RadiiPx = typeof radiiPx\n","// Warm-tinted dual-layer shadows\nexport const shadows = {\n none: 'none',\n\n sm: `\n 0 1px 2px 0 rgba(184, 164, 142, 0.05),\n 0 1px 3px 0 rgba(44, 40, 36, 0.04)\n `.trim().replace(/\\s+/g, ' '),\n\n default: `\n 0 2px 4px 0 rgba(184, 164, 142, 0.08),\n 0 4px 8px 0 rgba(44, 40, 36, 0.04)\n `.trim().replace(/\\s+/g, ' '),\n\n md: `\n 0 4px 6px -1px rgba(184, 164, 142, 0.1),\n 0 6px 12px -2px rgba(44, 40, 36, 0.05)\n `.trim().replace(/\\s+/g, ' '),\n\n lg: `\n 0 8px 16px -4px rgba(184, 164, 142, 0.12),\n 0 12px 24px -6px rgba(44, 40, 36, 0.06)\n `.trim().replace(/\\s+/g, ' '),\n\n xl: `\n 0 16px 32px -8px rgba(184, 164, 142, 0.15),\n 0 24px 48px -12px rgba(44, 40, 36, 0.08)\n `.trim().replace(/\\s+/g, ' '),\n\n // Elevated card shadow\n elevated: `\n 0 4px 8px 0 rgba(184, 164, 142, 0.08),\n 0 8px 16px -4px rgba(44, 40, 36, 0.06)\n `.trim().replace(/\\s+/g, ' '),\n\n // Hover state shadow\n hover: '0 2px 8px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.05)',\n\n // Button shadow\n button: '0 2px 8px rgba(26,26,26,0.12)',\n\n // Card wrapper shadow\n card: '0 4px 24px rgba(26,26,26,0.04), 0 12px 48px rgba(26,26,26,0.03)',\n\n // Inner shadow for inputs\n inner: 'inset 0 1px 2px 0 rgba(184, 164, 142, 0.06)',\n} as const\n\nexport type Shadows = typeof shadows\n","export const animations = {\n durations: {\n fast: '150ms',\n default: '200ms',\n slow: '350ms',\n slower: '500ms',\n },\n\n easings: {\n default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n in: 'cubic-bezier(0.4, 0, 1, 1)',\n out: 'cubic-bezier(0, 0, 0.2, 1)',\n inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n },\n\n transitions: {\n fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',\n default: '200ms cubic-bezier(0.4, 0, 0.2, 1)',\n slow: '350ms cubic-bezier(0.4, 0, 0.2, 1)',\n },\n\n // Hover lift transform\n hoverLift: 'translateY(-2px)',\n} as const\n\nexport type Animations = typeof animations\n","export { colors, type Colors } from './colors'\nexport { typography, type Typography } from './typography'\nexport { spacing, radii, radiiPx, type Spacing, type Radii, type RadiiPx } from './spacing'\nexport { shadows, type Shadows } from './shadows'\nexport { animations, type Animations } from './animations'\n\n// Tailwind plugin helper\nexport const tailwindPreset = {\n colors: {\n background: {\n primary: '#FAF9F6',\n secondary: '#F5F3EF',\n tertiary: '#EFECE6',\n elevated: '#FFFFFF',\n },\n sand: {\n 50: '#F9F7F4',\n 100: '#F2EDE6',\n 200: '#E5DDD1',\n 300: '#D4C8B8',\n 400: '#C4B49E',\n 500: '#B8A48E',\n 600: '#A08A6E',\n 700: '#86715A',\n 800: '#6B5A48',\n 900: '#544737',\n },\n text: {\n primary: '#2C2824',\n secondary: '#5C574F',\n tertiary: '#8A847A',\n inverse: '#FAF9F6',\n },\n status: {\n pending: '#FEF3C7',\n approved: '#D1FAE5',\n paid: '#DBEAFE',\n error: '#FEE2E2',\n },\n },\n fontFamily: {\n heading: ['\"DM Serif Display\"', 'Georgia', 'serif'],\n body: ['\"DM Sans\"', 'system-ui', 'sans-serif'],\n mono: ['\"JetBrains Mono\"', 'Consolas', 'monospace'],\n },\n borderRadius: {\n sm: '0.25rem',\n DEFAULT: '0.5rem',\n md: '0.625rem',\n lg: '0.875rem',\n xl: '1rem',\n '2xl': '1.5rem',\n },\n}\n"],"mappings":"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","names":[]}
package/dist/tokens.css ADDED
@@ -0,0 +1,132 @@
1
+ /* Auto-generated by @freehold/design-tokens — do not edit */
2
+ :root {
3
+ --fh-color-background-primary: #FAF9F6;
4
+ --fh-color-background-secondary: #F5F3EF;
5
+ --fh-color-background-tertiary: #EFECE6;
6
+ --fh-color-background-elevated: #FFFFFF;
7
+ --fh-color-sand-50: #F9F7F4;
8
+ --fh-color-sand-100: #F2EDE6;
9
+ --fh-color-sand-200: #E5DDD1;
10
+ --fh-color-sand-300: #D4C8B8;
11
+ --fh-color-sand-400: #C4B49E;
12
+ --fh-color-sand-500: #B8A48E;
13
+ --fh-color-sand-600: #A08A6E;
14
+ --fh-color-sand-700: #86715A;
15
+ --fh-color-sand-800: #6B5A48;
16
+ --fh-color-sand-900: #544737;
17
+ --fh-color-text-primary: #2C2824;
18
+ --fh-color-text-secondary: #5C574F;
19
+ --fh-color-text-tertiary: #8A847A;
20
+ --fh-color-text-inverse: #FAF9F6;
21
+ --fh-color-status-pending-background: #FEF3C7;
22
+ --fh-color-status-pending-text: #92400E;
23
+ --fh-color-status-pending-border: #FCD34D;
24
+ --fh-color-status-pending-dot: #D4B86A;
25
+ --fh-color-status-approved-background: #D1FAE5;
26
+ --fh-color-status-approved-text: #065F46;
27
+ --fh-color-status-approved-border: #6EE7B7;
28
+ --fh-color-status-approved-dot: #8DB580;
29
+ --fh-color-status-paid-background: #DBEAFE;
30
+ --fh-color-status-paid-text: #1E40AF;
31
+ --fh-color-status-paid-border: #93C5FD;
32
+ --fh-color-status-paid-dot: #60A5FA;
33
+ --fh-color-status-error-background: #FEE2E2;
34
+ --fh-color-status-error-text: #991B1B;
35
+ --fh-color-status-error-border: #FCA5A5;
36
+ --fh-color-status-error-dot: #C4796B;
37
+ --fh-color-status-success-background: #D1FAE5;
38
+ --fh-color-status-success-text: #065F46;
39
+ --fh-color-status-success-border: #6EE7B7;
40
+ --fh-color-status-success-dot: #8DB580;
41
+ --fh-color-status-warning-background: #FEF3C7;
42
+ --fh-color-status-warning-text: #92400E;
43
+ --fh-color-status-warning-border: #FCD34D;
44
+ --fh-color-status-warning-dot: #D4B86A;
45
+ --fh-color-semantic-success: #8DB580;
46
+ --fh-color-semantic-warning: #D4B86A;
47
+ --fh-color-semantic-error: #C4796B;
48
+ --fh-color-semantic-info: #60A5FA;
49
+ --fh-color-border-subtle: rgba(184, 164, 142, 0.15);
50
+ --fh-color-border-default: rgba(184, 164, 142, 0.25);
51
+ --fh-color-border-strong: rgba(184, 164, 142, 0.4);
52
+ --fh-font-heading: "DM Serif Display", Georgia, serif;
53
+ --fh-font-body: "DM Sans", system-ui, sans-serif;
54
+ --fh-font-mono: "JetBrains Mono", Consolas, monospace;
55
+ --fh-font-size-xs: 0.75rem;
56
+ --fh-font-size-sm: 0.875rem;
57
+ --fh-font-size-base: 1rem;
58
+ --fh-font-size-lg: 1.125rem;
59
+ --fh-font-size-xl: 1.25rem;
60
+ --fh-font-size-2xl: 1.5rem;
61
+ --fh-font-size-3xl: 1.875rem;
62
+ --fh-font-size-4xl: 2.25rem;
63
+ --fh-font-size-5xl: 3rem;
64
+ --fh-font-weight-normal: 400;
65
+ --fh-font-weight-medium: 500;
66
+ --fh-font-weight-semibold: 600;
67
+ --fh-font-weight-bold: 700;
68
+ --fh-line-height-tight: 1.25;
69
+ --fh-line-height-snug: 1.375;
70
+ --fh-line-height-normal: 1.5;
71
+ --fh-line-height-relaxed: 1.625;
72
+ --fh-line-height-loose: 2;
73
+ --fh-letter-spacing-tighter: -0.05em;
74
+ --fh-letter-spacing-tight: -0.025em;
75
+ --fh-letter-spacing-normal: 0;
76
+ --fh-letter-spacing-wide: 0.025em;
77
+ --fh-letter-spacing-wider: 0.05em;
78
+ --fh-spacing-0: 0;
79
+ --fh-spacing-1: 0.25rem;
80
+ --fh-spacing-2: 0.5rem;
81
+ --fh-spacing-3: 0.75rem;
82
+ --fh-spacing-4: 1rem;
83
+ --fh-spacing-5: 1.25rem;
84
+ --fh-spacing-6: 1.5rem;
85
+ --fh-spacing-7: 1.75rem;
86
+ --fh-spacing-8: 2rem;
87
+ --fh-spacing-9: 2.25rem;
88
+ --fh-spacing-10: 2.5rem;
89
+ --fh-spacing-11: 2.75rem;
90
+ --fh-spacing-12: 3rem;
91
+ --fh-spacing-14: 3.5rem;
92
+ --fh-spacing-16: 4rem;
93
+ --fh-spacing-20: 5rem;
94
+ --fh-spacing-24: 6rem;
95
+ --fh-spacing-28: 7rem;
96
+ --fh-spacing-32: 8rem;
97
+ --fh-spacing-0.5: 0.125rem;
98
+ --fh-spacing-1.5: 0.375rem;
99
+ --fh-spacing-2.5: 0.625rem;
100
+ --fh-spacing-3.5: 0.875rem;
101
+ --fh-radius-none: 0;
102
+ --fh-radius-sm: 0.5rem;
103
+ --fh-radius-default: 0.5rem;
104
+ --fh-radius-md: 0.625rem;
105
+ --fh-radius-lg: 0.875rem;
106
+ --fh-radius-xl: 1rem;
107
+ --fh-radius-2xl: 1.5rem;
108
+ --fh-radius-full: 9999px;
109
+ --fh-shadow-none: none;
110
+ --fh-shadow-sm: 0 1px 2px 0 rgba(184, 164, 142, 0.05), 0 1px 3px 0 rgba(44, 40, 36, 0.04);
111
+ --fh-shadow-default: 0 2px 4px 0 rgba(184, 164, 142, 0.08), 0 4px 8px 0 rgba(44, 40, 36, 0.04);
112
+ --fh-shadow-md: 0 4px 6px -1px rgba(184, 164, 142, 0.1), 0 6px 12px -2px rgba(44, 40, 36, 0.05);
113
+ --fh-shadow-lg: 0 8px 16px -4px rgba(184, 164, 142, 0.12), 0 12px 24px -6px rgba(44, 40, 36, 0.06);
114
+ --fh-shadow-xl: 0 16px 32px -8px rgba(184, 164, 142, 0.15), 0 24px 48px -12px rgba(44, 40, 36, 0.08);
115
+ --fh-shadow-elevated: 0 4px 8px 0 rgba(184, 164, 142, 0.08), 0 8px 16px -4px rgba(44, 40, 36, 0.06);
116
+ --fh-shadow-hover: 0 2px 8px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.05);
117
+ --fh-shadow-button: 0 2px 8px rgba(26,26,26,0.12);
118
+ --fh-shadow-card: 0 4px 24px rgba(26,26,26,0.04), 0 12px 48px rgba(26,26,26,0.03);
119
+ --fh-shadow-inner: inset 0 1px 2px 0 rgba(184, 164, 142, 0.06);
120
+ --fh-duration-fast: 150ms;
121
+ --fh-duration-default: 200ms;
122
+ --fh-duration-slow: 350ms;
123
+ --fh-duration-slower: 500ms;
124
+ --fh-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
125
+ --fh-easing-in: cubic-bezier(0.4, 0, 1, 1);
126
+ --fh-easing-out: cubic-bezier(0, 0, 0.2, 1);
127
+ --fh-easing-inOut: cubic-bezier(0.4, 0, 0.2, 1);
128
+ --fh-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
129
+ --fh-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
130
+ --fh-transition-default: 200ms cubic-bezier(0.4, 0, 0.2, 1);
131
+ --fh-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
132
+ }
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@freehold/design-tokens",
3
+ "version": "0.0.1",
4
+ "description": "Design tokens for Freehold UI",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/Hamilton8560/freehold.git",
9
+ "directory": "packages/design-tokens"
10
+ },
11
+ "keywords": [
12
+ "design-tokens",
13
+ "css-variables",
14
+ "tailwindcss",
15
+ "theme"
16
+ ],
17
+ "main": "./dist/index.js",
18
+ "module": "./dist/index.mjs",
19
+ "types": "./dist/index.d.ts",
20
+ "exports": {
21
+ ".": {
22
+ "types": "./dist/index.d.ts",
23
+ "import": "./dist/index.mjs",
24
+ "require": "./dist/index.js"
25
+ },
26
+ "./css": "./dist/tokens.css"
27
+ },
28
+ "files": [
29
+ "dist",
30
+ "LICENSE",
31
+ "README.md"
32
+ ],
33
+ "devDependencies": {
34
+ "tsup": "^8.3.5",
35
+ "typescript": "^5.7.2"
36
+ },
37
+ "publishConfig": {
38
+ "access": "public"
39
+ },
40
+ "scripts": {
41
+ "build": "tsup && node scripts/generate-css.mjs",
42
+ "dev": "tsup --watch",
43
+ "clean": "rm -rf dist"
44
+ }
45
+ }