@autonomys/design-tokens 1.4.18

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 (18) hide show
  1. package/README.md +97 -0
  2. package/dist/css/utilities.css +1919 -0
  3. package/dist/css/variables.css +244 -0
  4. package/dist/index.css +2164 -0
  5. package/dist/index.d.ts +452 -0
  6. package/dist/index.esm.js +557 -0
  7. package/dist/index.esm.js.map +1 -0
  8. package/dist/index.js +565 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/tokens/colors.d.ts +307 -0
  11. package/dist/tokens/colors.js +192 -0
  12. package/dist/tokens/shadows.d.ts +66 -0
  13. package/dist/tokens/shadows.js +40 -0
  14. package/dist/tokens/spacing.d.ts +159 -0
  15. package/dist/tokens/spacing.js +100 -0
  16. package/dist/tokens/typography.d.ts +361 -0
  17. package/dist/tokens/typography.js +205 -0
  18. package/package.json +48 -0
package/dist/tokens/spacing.d.ts ADDED
@@ -0,0 +1,159 @@
1
+ /**
2
+ * Auto Design Spacing Tokens
3
+ *
4
+ * These spacing tokens define the standard spacing values
5
+ * to be used throughout the application for consistent layout.
6
+ */
7
+ export declare const baseSpacing = 0.25;
8
+ export declare const spacing: {
9
+ '0': string;
10
+ '1': string;
11
+ '2': string;
12
+ '3': string;
13
+ '4': string;
14
+ '5': string;
15
+ '6': string;
16
+ '8': string;
17
+ '10': string;
18
+ '12': string;
19
+ '16': string;
20
+ '20': string;
21
+ '24': string;
22
+ '32': string;
23
+ '40': string;
24
+ '48': string;
25
+ '56': string;
26
+ '64': string;
27
+ };
28
+ export declare const semanticSpacing: {
29
+ componentXS: string;
30
+ componentSM: string;
31
+ componentMD: string;
32
+ componentLG: string;
33
+ componentXL: string;
34
+ layoutXS: string;
35
+ layoutSM: string;
36
+ layoutMD: string;
37
+ layoutLG: string;
38
+ layoutXL: string;
39
+ layout2XL: string;
40
+ insetXS: string;
41
+ insetSM: string;
42
+ insetMD: string;
43
+ insetLG: string;
44
+ insetXL: string;
45
+ stackXS: string;
46
+ stackSM: string;
47
+ stackMD: string;
48
+ stackLG: string;
49
+ stackXL: string;
50
+ inlineXS: string;
51
+ inlineSM: string;
52
+ inlineMD: string;
53
+ inlineLG: string;
54
+ inlineXL: string;
55
+ };
56
+ export declare const breakpoints: {
57
+ xs: string;
58
+ sm: string;
59
+ md: string;
60
+ lg: string;
61
+ xl: string;
62
+ '2xl': string;
63
+ };
64
+ export declare const containerWidths: {
65
+ sm: string;
66
+ md: string;
67
+ lg: string;
68
+ xl: string;
69
+ '2xl': string;
70
+ };
71
+ export declare const borderRadius: {
72
+ none: string;
73
+ sm: string;
74
+ DEFAULT: string;
75
+ md: string;
76
+ lg: string;
77
+ xl: string;
78
+ '2xl': string;
79
+ '3xl': string;
80
+ full: string;
81
+ };
82
+ declare const _default: {
83
+ baseSpacing: number;
84
+ spacing: {
85
+ '0': string;
86
+ '1': string;
87
+ '2': string;
88
+ '3': string;
89
+ '4': string;
90
+ '5': string;
91
+ '6': string;
92
+ '8': string;
93
+ '10': string;
94
+ '12': string;
95
+ '16': string;
96
+ '20': string;
97
+ '24': string;
98
+ '32': string;
99
+ '40': string;
100
+ '48': string;
101
+ '56': string;
102
+ '64': string;
103
+ };
104
+ semanticSpacing: {
105
+ componentXS: string;
106
+ componentSM: string;
107
+ componentMD: string;
108
+ componentLG: string;
109
+ componentXL: string;
110
+ layoutXS: string;
111
+ layoutSM: string;
112
+ layoutMD: string;
113
+ layoutLG: string;
114
+ layoutXL: string;
115
+ layout2XL: string;
116
+ insetXS: string;
117
+ insetSM: string;
118
+ insetMD: string;
119
+ insetLG: string;
120
+ insetXL: string;
121
+ stackXS: string;
122
+ stackSM: string;
123
+ stackMD: string;
124
+ stackLG: string;
125
+ stackXL: string;
126
+ inlineXS: string;
127
+ inlineSM: string;
128
+ inlineMD: string;
129
+ inlineLG: string;
130
+ inlineXL: string;
131
+ };
132
+ breakpoints: {
133
+ xs: string;
134
+ sm: string;
135
+ md: string;
136
+ lg: string;
137
+ xl: string;
138
+ '2xl': string;
139
+ };
140
+ containerWidths: {
141
+ sm: string;
142
+ md: string;
143
+ lg: string;
144
+ xl: string;
145
+ '2xl': string;
146
+ };
147
+ borderRadius: {
148
+ none: string;
149
+ sm: string;
150
+ DEFAULT: string;
151
+ md: string;
152
+ lg: string;
153
+ xl: string;
154
+ '2xl': string;
155
+ '3xl': string;
156
+ full: string;
157
+ };
158
+ };
159
+ export default _default;
package/dist/tokens/spacing.js ADDED
@@ -0,0 +1,100 @@
1
+ /**
2
+ * Auto Design Spacing Tokens
3
+ *
4
+ * These spacing tokens define the standard spacing values
5
+ * to be used throughout the application for consistent layout.
6
+ */
7
+ // Base spacing unit (4px)
8
+ export const baseSpacing = 0.25;
9
+ // Spacing scale
10
+ export const spacing = {
11
+ '0': '0',
12
+ '1': `${baseSpacing * 1}rem`, // 4px
13
+ '2': `${baseSpacing * 2}rem`, // 8px
14
+ '3': `${baseSpacing * 3}rem`, // 12px
15
+ '4': `${baseSpacing * 4}rem`, // 16px
16
+ '5': `${baseSpacing * 5}rem`, // 20px
17
+ '6': `${baseSpacing * 6}rem`, // 24px
18
+ '8': `${baseSpacing * 8}rem`, // 32px
19
+ '10': `${baseSpacing * 10}rem`, // 40px
20
+ '12': `${baseSpacing * 12}rem`, // 48px
21
+ '16': `${baseSpacing * 16}rem`, // 64px
22
+ '20': `${baseSpacing * 20}rem`, // 80px
23
+ '24': `${baseSpacing * 24}rem`, // 96px
24
+ '32': `${baseSpacing * 32}rem`, // 128px
25
+ '40': `${baseSpacing * 40}rem`, // 160px
26
+ '48': `${baseSpacing * 48}rem`, // 192px
27
+ '56': `${baseSpacing * 56}rem`, // 224px
28
+ '64': `${baseSpacing * 64}rem`, // 256px
29
+ };
30
+ // Semantic spacing
31
+ export const semanticSpacing = {
32
+ // Component spacing
33
+ componentXS: spacing['1'], // 4px
34
+ componentSM: spacing['2'], // 8px
35
+ componentMD: spacing['4'], // 16px
36
+ componentLG: spacing['6'], // 24px
37
+ componentXL: spacing['8'], // 32px
38
+ // Layout spacing
39
+ layoutXS: spacing['4'], // 16px
40
+ layoutSM: spacing['6'], // 24px
41
+ layoutMD: spacing['8'], // 32px
42
+ layoutLG: spacing['12'], // 48px
43
+ layoutXL: spacing['16'], // 64px
44
+ layout2XL: spacing['24'], // 96px
45
+ // Inset (padding)
46
+ insetXS: spacing['1'], // 4px
47
+ insetSM: spacing['2'], // 8px
48
+ insetMD: spacing['4'], // 16px
49
+ insetLG: spacing['6'], // 24px
50
+ insetXL: spacing['8'], // 32px
51
+ // Stack (vertical spacing)
52
+ stackXS: spacing['1'], // 4px
53
+ stackSM: spacing['2'], // 8px
54
+ stackMD: spacing['4'], // 16px
55
+ stackLG: spacing['8'], // 32px
56
+ stackXL: spacing['12'], // 48px
57
+ // Inline (horizontal spacing)
58
+ inlineXS: spacing['1'], // 4px
59
+ inlineSM: spacing['2'], // 8px
60
+ inlineMD: spacing['4'], // 16px
61
+ inlineLG: spacing['6'], // 24px
62
+ inlineXL: spacing['8'], // 32px
63
+ };
64
+ // Breakpoints
65
+ export const breakpoints = {
66
+ xs: '0px',
67
+ sm: '640px',
68
+ md: '768px',
69
+ lg: '1024px',
70
+ xl: '1280px',
71
+ '2xl': '1536px',
72
+ };
73
+ // Container max widths
74
+ export const containerWidths = {
75
+ sm: '640px',
76
+ md: '768px',
77
+ lg: '1024px',
78
+ xl: '1280px',
79
+ '2xl': '1536px',
80
+ };
81
+ // Border radius values
82
+ export const borderRadius = {
83
+ none: '0',
84
+ sm: '0.125rem', // 2px
85
+ DEFAULT: '0.25rem', // 4px
86
+ md: '0.375rem', // 6px
87
+ lg: '0.5rem', // 8px
88
+ xl: '0.75rem', // 12px
89
+ '2xl': '1rem', // 16px
90
+ '3xl': '1.5rem', // 24px
91
+ full: '9999px',
92
+ };
93
+ export default {
94
+ baseSpacing,
95
+ spacing,
96
+ semanticSpacing,
97
+ breakpoints,
98
+ containerWidths,
99
+ borderRadius,
100
+ };
package/dist/tokens/typography.d.ts ADDED
@@ -0,0 +1,361 @@
1
+ /**
2
+ * Auto Design Typography Tokens
3
+ *
4
+ * These typography tokens are derived from the application's design system
5
+ * and match the font styles used throughout the codebase.
6
+ */
7
+ export declare const fontFamilies: {
8
+ sans: string;
9
+ mono: string;
10
+ display: string;
11
+ body: string;
12
+ };
13
+ export declare const fontSizes: {
14
+ xs: string;
15
+ sm: string;
16
+ base: string;
17
+ lg: string;
18
+ xl: string;
19
+ "2xl": string;
20
+ "3xl": string;
21
+ "4xl": string;
22
+ "5xl": string;
23
+ title1: string;
24
+ title2: string;
25
+ title3: string;
26
+ bodyLg: string;
27
+ bodyMd: string;
28
+ bodySm: string;
29
+ buttonLg: string;
30
+ buttonMd: string;
31
+ preTitle: string;
32
+ detail: string;
33
+ };
34
+ export declare const fontWeights: {
35
+ extralight: number;
36
+ light: number;
37
+ normal: number;
38
+ medium: number;
39
+ semibold: number;
40
+ bold: number;
41
+ extrabold: number;
42
+ };
43
+ export declare const lineHeights: {
44
+ none: number;
45
+ tight: number;
46
+ snug: number;
47
+ normal: number;
48
+ relaxed: number;
49
+ loose: number;
50
+ };
51
+ export declare const letterSpacings: {
52
+ tighter: string;
53
+ tight: string;
54
+ normal: string;
55
+ wide: string;
56
+ wider: string;
57
+ widest: string;
58
+ };
59
+ export declare const textStyles: {
60
+ h1: {
61
+ fontFamily: string;
62
+ fontSize: string;
63
+ fontWeight: number;
64
+ lineHeight: number;
65
+ letterSpacing: string;
66
+ };
67
+ h2: {
68
+ fontFamily: string;
69
+ fontSize: string;
70
+ fontWeight: number;
71
+ lineHeight: number;
72
+ letterSpacing: string;
73
+ };
74
+ h3: {
75
+ fontFamily: string;
76
+ fontSize: string;
77
+ fontWeight: number;
78
+ lineHeight: number;
79
+ letterSpacing: string;
80
+ };
81
+ h4: {
82
+ fontFamily: string;
83
+ fontSize: string;
84
+ fontWeight: number;
85
+ lineHeight: number;
86
+ letterSpacing: string;
87
+ };
88
+ bodyLarge: {
89
+ fontFamily: string;
90
+ fontSize: string;
91
+ fontWeight: number;
92
+ lineHeight: number;
93
+ letterSpacing: string;
94
+ };
95
+ bodyDefault: {
96
+ fontFamily: string;
97
+ fontSize: string;
98
+ fontWeight: number;
99
+ lineHeight: number;
100
+ letterSpacing: string;
101
+ };
102
+ bodySmall: {
103
+ fontFamily: string;
104
+ fontSize: string;
105
+ fontWeight: number;
106
+ lineHeight: number;
107
+ letterSpacing: string;
108
+ };
109
+ bodyXSmall: {
110
+ fontFamily: string;
111
+ fontSize: string;
112
+ fontWeight: number;
113
+ lineHeight: number;
114
+ letterSpacing: string;
115
+ };
116
+ buttonLarge: {
117
+ fontFamily: string;
118
+ fontSize: string;
119
+ fontWeight: number;
120
+ lineHeight: number;
121
+ letterSpacing: string;
122
+ textTransform: string;
123
+ };
124
+ buttonDefault: {
125
+ fontFamily: string;
126
+ fontSize: string;
127
+ fontWeight: number;
128
+ lineHeight: number;
129
+ letterSpacing: string;
130
+ textTransform: string;
131
+ };
132
+ buttonSmall: {
133
+ fontFamily: string;
134
+ fontSize: string;
135
+ fontWeight: number;
136
+ lineHeight: number;
137
+ letterSpacing: string;
138
+ textTransform: string;
139
+ };
140
+ label: {
141
+ fontFamily: string;
142
+ fontSize: string;
143
+ fontWeight: number;
144
+ lineHeight: number;
145
+ letterSpacing: string;
146
+ };
147
+ caption: {
148
+ fontFamily: string;
149
+ fontSize: string;
150
+ fontWeight: number;
151
+ lineHeight: number;
152
+ letterSpacing: string;
153
+ };
154
+ code: {
155
+ fontFamily: string;
156
+ fontSize: string;
157
+ fontWeight: number;
158
+ lineHeight: number;
159
+ letterSpacing: string;
160
+ };
161
+ title1: {
162
+ fontFamily: string;
163
+ fontSize: string;
164
+ fontWeight: number;
165
+ lineHeight: number;
166
+ letterSpacing: string;
167
+ };
168
+ title2: {
169
+ fontFamily: string;
170
+ fontSize: string;
171
+ fontWeight: number;
172
+ lineHeight: number;
173
+ letterSpacing: string;
174
+ };
175
+ title3: {
176
+ fontFamily: string;
177
+ fontSize: string;
178
+ fontWeight: number;
179
+ lineHeight: number;
180
+ letterSpacing: string;
181
+ };
182
+ };
183
+ declare const _default: {
184
+ fontFamilies: {
185
+ sans: string;
186
+ mono: string;
187
+ display: string;
188
+ body: string;
189
+ };
190
+ fontSizes: {
191
+ xs: string;
192
+ sm: string;
193
+ base: string;
194
+ lg: string;
195
+ xl: string;
196
+ "2xl": string;
197
+ "3xl": string;
198
+ "4xl": string;
199
+ "5xl": string;
200
+ title1: string;
201
+ title2: string;
202
+ title3: string;
203
+ bodyLg: string;
204
+ bodyMd: string;
205
+ bodySm: string;
206
+ buttonLg: string;
207
+ buttonMd: string;
208
+ preTitle: string;
209
+ detail: string;
210
+ };
211
+ fontWeights: {
212
+ extralight: number;
213
+ light: number;
214
+ normal: number;
215
+ medium: number;
216
+ semibold: number;
217
+ bold: number;
218
+ extrabold: number;
219
+ };
220
+ lineHeights: {
221
+ none: number;
222
+ tight: number;
223
+ snug: number;
224
+ normal: number;
225
+ relaxed: number;
226
+ loose: number;
227
+ };
228
+ letterSpacings: {
229
+ tighter: string;
230
+ tight: string;
231
+ normal: string;
232
+ wide: string;
233
+ wider: string;
234
+ widest: string;
235
+ };
236
+ textStyles: {
237
+ h1: {
238
+ fontFamily: string;
239
+ fontSize: string;
240
+ fontWeight: number;
241
+ lineHeight: number;
242
+ letterSpacing: string;
243
+ };
244
+ h2: {
245
+ fontFamily: string;
246
+ fontSize: string;
247
+ fontWeight: number;
248
+ lineHeight: number;
249
+ letterSpacing: string;
250
+ };
251
+ h3: {
252
+ fontFamily: string;
253
+ fontSize: string;
254
+ fontWeight: number;
255
+ lineHeight: number;
256
+ letterSpacing: string;
257
+ };
258
+ h4: {
259
+ fontFamily: string;
260
+ fontSize: string;
261
+ fontWeight: number;
262
+ lineHeight: number;
263
+ letterSpacing: string;
264
+ };
265
+ bodyLarge: {
266
+ fontFamily: string;
267
+ fontSize: string;
268
+ fontWeight: number;
269
+ lineHeight: number;
270
+ letterSpacing: string;
271
+ };
272
+ bodyDefault: {
273
+ fontFamily: string;
274
+ fontSize: string;
275
+ fontWeight: number;
276
+ lineHeight: number;
277
+ letterSpacing: string;
278
+ };
279
+ bodySmall: {
280
+ fontFamily: string;
281
+ fontSize: string;
282
+ fontWeight: number;
283
+ lineHeight: number;
284
+ letterSpacing: string;
285
+ };
286
+ bodyXSmall: {
287
+ fontFamily: string;
288
+ fontSize: string;
289
+ fontWeight: number;
290
+ lineHeight: number;
291
+ letterSpacing: string;
292
+ };
293
+ buttonLarge: {
294
+ fontFamily: string;
295
+ fontSize: string;
296
+ fontWeight: number;
297
+ lineHeight: number;
298
+ letterSpacing: string;
299
+ textTransform: string;
300
+ };
301
+ buttonDefault: {
302
+ fontFamily: string;
303
+ fontSize: string;
304
+ fontWeight: number;
305
+ lineHeight: number;
306
+ letterSpacing: string;
307
+ textTransform: string;
308
+ };
309
+ buttonSmall: {
310
+ fontFamily: string;
311
+ fontSize: string;
312
+ fontWeight: number;
313
+ lineHeight: number;
314
+ letterSpacing: string;
315
+ textTransform: string;
316
+ };
317
+ label: {
318
+ fontFamily: string;
319
+ fontSize: string;
320
+ fontWeight: number;
321
+ lineHeight: number;
322
+ letterSpacing: string;
323
+ };
324
+ caption: {
325
+ fontFamily: string;
326
+ fontSize: string;
327
+ fontWeight: number;
328
+ lineHeight: number;
329
+ letterSpacing: string;
330
+ };
331
+ code: {
332
+ fontFamily: string;
333
+ fontSize: string;
334
+ fontWeight: number;
335
+ lineHeight: number;
336
+ letterSpacing: string;
337
+ };
338
+ title1: {
339
+ fontFamily: string;
340
+ fontSize: string;
341
+ fontWeight: number;
342
+ lineHeight: number;
343
+ letterSpacing: string;
344
+ };
345
+ title2: {
346
+ fontFamily: string;
347
+ fontSize: string;
348
+ fontWeight: number;
349
+ lineHeight: number;
350
+ letterSpacing: string;
351
+ };
352
+ title3: {
353
+ fontFamily: string;
354
+ fontSize: string;
355
+ fontWeight: number;
356
+ lineHeight: number;
357
+ letterSpacing: string;
358
+ };
359
+ };
360
+ };
361
+ export default _default;