@latty-ds/tokens 0.2.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 (21) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +225 -0
  3. package/dist/configure.d.ts +54 -0
  4. package/dist/configure.js +371 -0
  5. package/dist/constants/colors.constants.d.ts +43 -0
  6. package/dist/constants/index.d.ts +8 -0
  7. package/dist/constants/spacing.constants.d.ts +15 -0
  8. package/dist/constants/tokens.constants.d.ts +2 -0
  9. package/dist/elevation/elevation.d.ts +29 -0
  10. package/dist/elevation/index.d.ts +8 -0
  11. package/dist/index.js +1 -0
  12. package/dist/semantic.css +294 -0
  13. package/dist/tokens.css +192 -0
  14. package/dist/tokens.js +1 -0
  15. package/dist/tokens.json +377 -0
  16. package/dist/types/index.d.ts +8 -0
  17. package/dist/types/palette.types.d.ts +84 -0
  18. package/dist/types/public-types.d.ts +68 -0
  19. package/dist/types/spacing.types.d.ts +33 -0
  20. package/dist/types/utils.d.ts +6 -0
  21. package/package.json +64 -0
package/dist/constants/colors.constants.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Standard color palette steps from lightest (50) to darkest (900).
3
+ * These steps are used across all color palettes for consistency.
4
+ */
5
+ export declare const STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
6
+ /**
7
+ * OKLCH lightness values for each palette step (semantic colors).
8
+ * Defines the perceptual lightness progression from 50 (lightest) to 900 (darkest).
9
+ * Values range from 0 (black) to 1 (white).
10
+ */
11
+ export declare const L_BY_STEP: {
12
+ 50: number;
13
+ 100: number;
14
+ 200: number;
15
+ 300: number;
16
+ 400: number;
17
+ 500: number;
18
+ 600: number;
19
+ 700: number;
20
+ 800: number;
21
+ 900: number;
22
+ };
23
+ /**
24
+ * OKLCH lightness values for neutral (grayscale) palette.
25
+ * Slightly higher lightness values to ensure better readability and contrast.
26
+ */
27
+ export declare const L_BY_STEP_NEUTRAL: {
28
+ 50: number;
29
+ 100: number;
30
+ 200: number;
31
+ 300: number;
32
+ 400: number;
33
+ 500: number;
34
+ 600: number;
35
+ 700: number;
36
+ 800: number;
37
+ 900: number;
38
+ };
39
+ /**
40
+ * Semantic color names available in the design system.
41
+ * These colors are generated from base hex values and support muted variants.
42
+ */
43
+ export declare const COLOR_NAMES: readonly ["error", "info", "primary", "secondary", "success", "warning"];
package/dist/constants/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Design system constants for color and spacing token generation.
3
+ *
4
+ * @module constants
5
+ */
6
+ export * from './colors.constants';
7
+ export * from './spacing.constants';
8
+ export * from './tokens.constants';
package/dist/constants/spacing.constants.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Base spacing unit in pixels.
3
+ * All spacing values are multiples of this base (4px grid system).
4
+ */
5
+ export declare const SPACE_BASE_PX: 4;
6
+ /**
7
+ * Maximum spacing step index (0-24).
8
+ * Provides 25 spacing values from 0px to 96px.
9
+ */
10
+ export declare const SPACE_STEPS: 24;
11
+ /**
12
+ * Base font size for rem calculations.
13
+ * Standard browser default (16px = 1rem).
14
+ */
15
+ export declare const REM_BASE_PX: 16;
package/dist/constants/tokens.constants.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const DEFAULT_BORDER_RADIUS: "0.5rem";
2
+ export declare const DEFAULT_FONT_FAMILY: "\"Hanken Grotesk\", sans-serif";
package/dist/elevation/elevation.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import type { PaletteFlat } from '../types/';
2
+ /**
3
+ * Elevation level type (0-5)
4
+ */
5
+ export type ElevationLevel = '0' | '1' | '2' | '3' | '4' | '5';
6
+ /**
7
+ * Elevation tokens mapping levels to box-shadow values
8
+ */
9
+ export type ElevationTokens = Record<ElevationLevel, string>;
10
+ /**
11
+ * Generates elevation (box-shadow) tokens using the neutral color palette.
12
+ * Creates 6 levels of elevation from flat (0) to maximum shadow (5).
13
+ *
14
+ * The shadows use the neutral palette to ensure they match the design system's
15
+ * color scheme and maintain consistency across light/dark modes.
16
+ *
17
+ * @param neutral - The neutral color palette from the token system
18
+ * @returns ElevationTokens object with shadow values for each level
19
+ *
20
+ * @example
21
+ * ```typescript
22
+ * const neutral = { "900": "#171717", "800": "#262626", ... };
23
+ * const elevation = buildElevation(neutral);
24
+ * // elevation["0"] === "none"
25
+ * // elevation["1"] === "0 1px 3px 0 rgb(23 23 23 / 0.1), ..."
26
+ * // elevation["2"] === "0 4px 6px -1px rgb(23 23 23 / 0.1), ..."
27
+ * ```
28
+ */
29
+ export declare const buildElevation: (neutral: PaletteFlat) => ElevationTokens;
package/dist/elevation/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Elevation token generation.
3
+ * Provides box-shadow values based on the neutral color palette.
4
+ *
5
+ * @module elevation
6
+ */
7
+ export { buildElevation } from './elevation';
8
+ export type { ElevationLevel, ElevationTokens } from './elevation';
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from "./tokens.js";
package/dist/semantic.css ADDED
@@ -0,0 +1,294 @@
1
+ /* Semantic tokens */
2
+ :root {
3
+ --lt-bg-default: var(--lt-color-white);
4
+ --lt-bg-error: var(--lt-color-error-500);
5
+ --lt-bg-error-subtle: var(--lt-color-error-100);
6
+ --lt-bg-info: var(--lt-color-info-500);
7
+ --lt-bg-info-subtle: var(--lt-color-info-100);
8
+ --lt-bg-inverse: var(--lt-color-neutral-900);
9
+ --lt-bg-neutral-subtle: var(--lt-color-neutral-100);
10
+ --lt-bg-overlay: var(--lt-color-neutral-200);
11
+ --lt-bg-primary: var(--lt-color-primary-500);
12
+ --lt-bg-primary-subtle: var(--lt-color-primary-100);
13
+ --lt-bg-secondary: var(--lt-color-secondary-500);
14
+ --lt-bg-secondary-subtle: var(--lt-color-secondary-100);
15
+ --lt-bg-subtle: var(--lt-color-neutral-50);
16
+ --lt-bg-success: var(--lt-color-success-500);
17
+ --lt-bg-success-subtle: var(--lt-color-success-100);
18
+ --lt-bg-surface: var(--lt-color-neutral-100);
19
+ --lt-bg-warning: var(--lt-color-warning-500);
20
+ --lt-bg-warning-subtle: var(--lt-color-warning-100);
21
+ --lt-border-default: var(--lt-color-neutral-200);
22
+ --lt-border-error: var(--lt-color-error-200);
23
+ --lt-border-error-strong: var(--lt-color-error-500);
24
+ --lt-border-focus: var(--lt-color-primary-200);
25
+ --lt-border-info: var(--lt-color-info-200);
26
+ --lt-border-info-strong: var(--lt-color-info-500);
27
+ --lt-border-primary: var(--lt-color-primary-200);
28
+ --lt-border-primary-strong: var(--lt-color-primary-500);
29
+ --lt-border-secondary: var(--lt-color-secondary-200);
30
+ --lt-border-secondary-strong: var(--lt-color-secondary-500);
31
+ --lt-border-strong: var(--lt-color-neutral-400);
32
+ --lt-border-subtle: var(--lt-color-neutral-100);
33
+ --lt-border-success: var(--lt-color-success-200);
34
+ --lt-border-success-strong: var(--lt-color-success-500);
35
+ --lt-border-warning: var(--lt-color-warning-200);
36
+ --lt-border-warning-strong: var(--lt-color-warning-500);
37
+ --lt-interactive-error-bg: var(--lt-color-error-500);
38
+ --lt-interactive-error-bg-active: var(--lt-color-error-700);
39
+ --lt-interactive-error-bg-hover: var(--lt-color-error-600);
40
+ --lt-interactive-info-bg: var(--lt-color-info-500);
41
+ --lt-interactive-info-bg-active: var(--lt-color-info-700);
42
+ --lt-interactive-info-bg-hover: var(--lt-color-info-600);
43
+ --lt-interactive-primary-bg: var(--lt-color-primary-500);
44
+ --lt-interactive-primary-bg-active: var(--lt-color-primary-700);
45
+ --lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
46
+ --lt-interactive-secondary-bg: var(--lt-color-secondary-500);
47
+ --lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
48
+ --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
49
+ --lt-interactive-success-bg: var(--lt-color-success-500);
50
+ --lt-interactive-success-bg-active: var(--lt-color-success-700);
51
+ --lt-interactive-success-bg-hover: var(--lt-color-success-600);
52
+ --lt-interactive-warning-bg: var(--lt-color-warning-500);
53
+ --lt-interactive-warning-bg-active: var(--lt-color-warning-700);
54
+ --lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
55
+ --lt-text-default: var(--lt-color-neutral-900);
56
+ --lt-text-disabled: var(--lt-color-neutral-400);
57
+ --lt-text-error: var(--lt-color-error-700);
58
+ --lt-text-info: var(--lt-color-info-700);
59
+ --lt-text-inverse: var(--lt-color-white);
60
+ --lt-text-muted: var(--lt-color-neutral-400);
61
+ --lt-text-neutral: var(--lt-color-neutral-700);
62
+ --lt-text-on-error: var(--lt-color-white);
63
+ --lt-text-on-info: var(--lt-color-white);
64
+ --lt-text-on-primary: var(--lt-color-neutral-900);
65
+ --lt-text-on-secondary: var(--lt-color-white);
66
+ --lt-text-on-success: var(--lt-color-white);
67
+ --lt-text-on-warning: var(--lt-color-warning-800);
68
+ --lt-text-primary: var(--lt-color-primary-700);
69
+ --lt-text-secondary: var(--lt-color-secondary-700);
70
+ --lt-text-subtle: var(--lt-color-neutral-600);
71
+ --lt-text-success: var(--lt-color-success-700);
72
+ --lt-text-warning: var(--lt-color-warning-700);
73
+ }
74
+
75
+ @media (prefers-color-scheme: dark) {
76
+ :root {
77
+ --lt-bg-default: var(--lt-color-neutral-900);
78
+ --lt-bg-error: var(--lt-color-error-500);
79
+ --lt-bg-error-subtle: var(--lt-color-error-900);
80
+ --lt-bg-info: var(--lt-color-info-500);
81
+ --lt-bg-info-subtle: var(--lt-color-info-900);
82
+ --lt-bg-inverse: var(--lt-color-neutral-50);
83
+ --lt-bg-neutral-subtle: var(--lt-color-neutral-800);
84
+ --lt-bg-overlay: var(--lt-color-neutral-700);
85
+ --lt-bg-primary: var(--lt-color-primary-500);
86
+ --lt-bg-primary-subtle: var(--lt-color-primary-900);
87
+ --lt-bg-secondary: var(--lt-color-secondary-500);
88
+ --lt-bg-secondary-subtle: var(--lt-color-secondary-900);
89
+ --lt-bg-subtle: var(--lt-color-neutral-800);
90
+ --lt-bg-success: var(--lt-color-success-500);
91
+ --lt-bg-success-subtle: var(--lt-color-success-900);
92
+ --lt-bg-surface: var(--lt-color-neutral-800);
93
+ --lt-bg-warning: var(--lt-color-warning-500);
94
+ --lt-bg-warning-subtle: var(--lt-color-warning-900);
95
+ --lt-border-default: var(--lt-color-neutral-700);
96
+ --lt-border-error: var(--lt-color-error-700);
97
+ --lt-border-error-strong: var(--lt-color-error-500);
98
+ --lt-border-focus: var(--lt-color-primary-400);
99
+ --lt-border-info: var(--lt-color-info-700);
100
+ --lt-border-info-strong: var(--lt-color-info-500);
101
+ --lt-border-primary: var(--lt-color-primary-700);
102
+ --lt-border-primary-strong: var(--lt-color-primary-500);
103
+ --lt-border-secondary: var(--lt-color-secondary-700);
104
+ --lt-border-secondary-strong: var(--lt-color-secondary-500);
105
+ --lt-border-strong: var(--lt-color-neutral-500);
106
+ --lt-border-subtle: var(--lt-color-neutral-800);
107
+ --lt-border-success: var(--lt-color-success-700);
108
+ --lt-border-success-strong: var(--lt-color-success-500);
109
+ --lt-border-warning: var(--lt-color-warning-700);
110
+ --lt-border-warning-strong: var(--lt-color-warning-500);
111
+ --lt-interactive-error-bg: var(--lt-color-error-400);
112
+ --lt-interactive-error-bg-active: var(--lt-color-error-500);
113
+ --lt-interactive-error-bg-hover: var(--lt-color-error-300);
114
+ --lt-interactive-info-bg: var(--lt-color-info-400);
115
+ --lt-interactive-info-bg-active: var(--lt-color-info-500);
116
+ --lt-interactive-info-bg-hover: var(--lt-color-info-300);
117
+ --lt-interactive-primary-bg: var(--lt-color-primary-400);
118
+ --lt-interactive-primary-bg-active: var(--lt-color-primary-500);
119
+ --lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
120
+ --lt-interactive-secondary-bg: var(--lt-color-secondary-400);
121
+ --lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
122
+ --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
123
+ --lt-interactive-success-bg: var(--lt-color-success-400);
124
+ --lt-interactive-success-bg-active: var(--lt-color-success-500);
125
+ --lt-interactive-success-bg-hover: var(--lt-color-success-300);
126
+ --lt-interactive-warning-bg: var(--lt-color-warning-400);
127
+ --lt-interactive-warning-bg-active: var(--lt-color-warning-500);
128
+ --lt-interactive-warning-bg-hover: var(--lt-color-warning-300);
129
+ --lt-text-default: var(--lt-color-neutral-100);
130
+ --lt-text-disabled: var(--lt-color-neutral-600);
131
+ --lt-text-error: var(--lt-color-error-300);
132
+ --lt-text-info: var(--lt-color-info-300);
133
+ --lt-text-inverse: var(--lt-color-neutral-900);
134
+ --lt-text-muted: var(--lt-color-neutral-500);
135
+ --lt-text-neutral: var(--lt-color-neutral-200);
136
+ --lt-text-on-error: var(--lt-color-white);
137
+ --lt-text-on-info: var(--lt-color-white);
138
+ --lt-text-on-primary: var(--lt-color-neutral-900);
139
+ --lt-text-on-secondary: var(--lt-color-white);
140
+ --lt-text-on-success: var(--lt-color-white);
141
+ --lt-text-on-warning: var(--lt-color-white);
142
+ --lt-text-primary: var(--lt-color-primary-300);
143
+ --lt-text-secondary: var(--lt-color-secondary-300);
144
+ --lt-text-subtle: var(--lt-color-neutral-300);
145
+ --lt-text-success: var(--lt-color-success-300);
146
+ --lt-text-warning: var(--lt-color-warning-300);
147
+ }
148
+ }
149
+
150
+ [data-theme="dark"] {
151
+ --lt-bg-default: var(--lt-color-neutral-900);
152
+ --lt-bg-error: var(--lt-color-error-500);
153
+ --lt-bg-error-subtle: var(--lt-color-error-900);
154
+ --lt-bg-info: var(--lt-color-info-500);
155
+ --lt-bg-info-subtle: var(--lt-color-info-900);
156
+ --lt-bg-inverse: var(--lt-color-neutral-50);
157
+ --lt-bg-neutral-subtle: var(--lt-color-neutral-800);
158
+ --lt-bg-overlay: var(--lt-color-neutral-700);
159
+ --lt-bg-primary: var(--lt-color-primary-500);
160
+ --lt-bg-primary-subtle: var(--lt-color-primary-900);
161
+ --lt-bg-secondary: var(--lt-color-secondary-500);
162
+ --lt-bg-secondary-subtle: var(--lt-color-secondary-900);
163
+ --lt-bg-subtle: var(--lt-color-neutral-800);
164
+ --lt-bg-success: var(--lt-color-success-500);
165
+ --lt-bg-success-subtle: var(--lt-color-success-900);
166
+ --lt-bg-surface: var(--lt-color-neutral-800);
167
+ --lt-bg-warning: var(--lt-color-warning-500);
168
+ --lt-bg-warning-subtle: var(--lt-color-warning-900);
169
+ --lt-border-default: var(--lt-color-neutral-700);
170
+ --lt-border-error: var(--lt-color-error-700);
171
+ --lt-border-error-strong: var(--lt-color-error-500);
172
+ --lt-border-focus: var(--lt-color-primary-400);
173
+ --lt-border-info: var(--lt-color-info-700);
174
+ --lt-border-info-strong: var(--lt-color-info-500);
175
+ --lt-border-primary: var(--lt-color-primary-700);
176
+ --lt-border-primary-strong: var(--lt-color-primary-500);
177
+ --lt-border-secondary: var(--lt-color-secondary-700);
178
+ --lt-border-secondary-strong: var(--lt-color-secondary-500);
179
+ --lt-border-strong: var(--lt-color-neutral-500);
180
+ --lt-border-subtle: var(--lt-color-neutral-800);
181
+ --lt-border-success: var(--lt-color-success-700);
182
+ --lt-border-success-strong: var(--lt-color-success-500);
183
+ --lt-border-warning: var(--lt-color-warning-700);
184
+ --lt-border-warning-strong: var(--lt-color-warning-500);
185
+ --lt-interactive-error-bg: var(--lt-color-error-400);
186
+ --lt-interactive-error-bg-active: var(--lt-color-error-500);
187
+ --lt-interactive-error-bg-hover: var(--lt-color-error-300);
188
+ --lt-interactive-info-bg: var(--lt-color-info-400);
189
+ --lt-interactive-info-bg-active: var(--lt-color-info-500);
190
+ --lt-interactive-info-bg-hover: var(--lt-color-info-300);
191
+ --lt-interactive-primary-bg: var(--lt-color-primary-400);
192
+ --lt-interactive-primary-bg-active: var(--lt-color-primary-500);
193
+ --lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
194
+ --lt-interactive-secondary-bg: var(--lt-color-secondary-400);
195
+ --lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
196
+ --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
197
+ --lt-interactive-success-bg: var(--lt-color-success-400);
198
+ --lt-interactive-success-bg-active: var(--lt-color-success-500);
199
+ --lt-interactive-success-bg-hover: var(--lt-color-success-300);
200
+ --lt-interactive-warning-bg: var(--lt-color-warning-400);
201
+ --lt-interactive-warning-bg-active: var(--lt-color-warning-500);
202
+ --lt-interactive-warning-bg-hover: var(--lt-color-warning-300);
203
+ --lt-text-default: var(--lt-color-neutral-100);
204
+ --lt-text-disabled: var(--lt-color-neutral-600);
205
+ --lt-text-error: var(--lt-color-error-300);
206
+ --lt-text-info: var(--lt-color-info-300);
207
+ --lt-text-inverse: var(--lt-color-neutral-900);
208
+ --lt-text-muted: var(--lt-color-neutral-500);
209
+ --lt-text-neutral: var(--lt-color-neutral-200);
210
+ --lt-text-on-error: var(--lt-color-white);
211
+ --lt-text-on-info: var(--lt-color-white);
212
+ --lt-text-on-primary: var(--lt-color-neutral-900);
213
+ --lt-text-on-secondary: var(--lt-color-white);
214
+ --lt-text-on-success: var(--lt-color-white);
215
+ --lt-text-on-warning: var(--lt-color-white);
216
+ --lt-text-primary: var(--lt-color-primary-300);
217
+ --lt-text-secondary: var(--lt-color-secondary-300);
218
+ --lt-text-subtle: var(--lt-color-neutral-300);
219
+ --lt-text-success: var(--lt-color-success-300);
220
+ --lt-text-warning: var(--lt-color-warning-300);
221
+ }
222
+
223
+ [data-theme="light"] {
224
+ --lt-bg-default: var(--lt-color-white);
225
+ --lt-bg-error: var(--lt-color-error-500);
226
+ --lt-bg-error-subtle: var(--lt-color-error-100);
227
+ --lt-bg-info: var(--lt-color-info-500);
228
+ --lt-bg-info-subtle: var(--lt-color-info-100);
229
+ --lt-bg-inverse: var(--lt-color-neutral-900);
230
+ --lt-bg-neutral-subtle: var(--lt-color-neutral-100);
231
+ --lt-bg-overlay: var(--lt-color-neutral-200);
232
+ --lt-bg-primary: var(--lt-color-primary-500);
233
+ --lt-bg-primary-subtle: var(--lt-color-primary-100);
234
+ --lt-bg-secondary: var(--lt-color-secondary-500);
235
+ --lt-bg-secondary-subtle: var(--lt-color-secondary-100);
236
+ --lt-bg-subtle: var(--lt-color-neutral-50);
237
+ --lt-bg-success: var(--lt-color-success-500);
238
+ --lt-bg-success-subtle: var(--lt-color-success-100);
239
+ --lt-bg-surface: var(--lt-color-neutral-100);
240
+ --lt-bg-warning: var(--lt-color-warning-500);
241
+ --lt-bg-warning-subtle: var(--lt-color-warning-100);
242
+ --lt-border-default: var(--lt-color-neutral-200);
243
+ --lt-border-error: var(--lt-color-error-200);
244
+ --lt-border-error-strong: var(--lt-color-error-500);
245
+ --lt-border-focus: var(--lt-color-primary-200);
246
+ --lt-border-info: var(--lt-color-info-200);
247
+ --lt-border-info-strong: var(--lt-color-info-500);
248
+ --lt-border-primary: var(--lt-color-primary-200);
249
+ --lt-border-primary-strong: var(--lt-color-primary-500);
250
+ --lt-border-secondary: var(--lt-color-secondary-200);
251
+ --lt-border-secondary-strong: var(--lt-color-secondary-500);
252
+ --lt-border-strong: var(--lt-color-neutral-400);
253
+ --lt-border-subtle: var(--lt-color-neutral-100);
254
+ --lt-border-success: var(--lt-color-success-200);
255
+ --lt-border-success-strong: var(--lt-color-success-500);
256
+ --lt-border-warning: var(--lt-color-warning-200);
257
+ --lt-border-warning-strong: var(--lt-color-warning-500);
258
+ --lt-interactive-error-bg: var(--lt-color-error-500);
259
+ --lt-interactive-error-bg-active: var(--lt-color-error-700);
260
+ --lt-interactive-error-bg-hover: var(--lt-color-error-600);
261
+ --lt-interactive-info-bg: var(--lt-color-info-500);
262
+ --lt-interactive-info-bg-active: var(--lt-color-info-700);
263
+ --lt-interactive-info-bg-hover: var(--lt-color-info-600);
264
+ --lt-interactive-primary-bg: var(--lt-color-primary-500);
265
+ --lt-interactive-primary-bg-active: var(--lt-color-primary-700);
266
+ --lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
267
+ --lt-interactive-secondary-bg: var(--lt-color-secondary-500);
268
+ --lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
269
+ --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
270
+ --lt-interactive-success-bg: var(--lt-color-success-500);
271
+ --lt-interactive-success-bg-active: var(--lt-color-success-700);
272
+ --lt-interactive-success-bg-hover: var(--lt-color-success-600);
273
+ --lt-interactive-warning-bg: var(--lt-color-warning-500);
274
+ --lt-interactive-warning-bg-active: var(--lt-color-warning-700);
275
+ --lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
276
+ --lt-text-default: var(--lt-color-neutral-900);
277
+ --lt-text-disabled: var(--lt-color-neutral-400);
278
+ --lt-text-error: var(--lt-color-error-700);
279
+ --lt-text-info: var(--lt-color-info-700);
280
+ --lt-text-inverse: var(--lt-color-white);
281
+ --lt-text-muted: var(--lt-color-neutral-400);
282
+ --lt-text-neutral: var(--lt-color-neutral-700);
283
+ --lt-text-on-error: var(--lt-color-white);
284
+ --lt-text-on-info: var(--lt-color-white);
285
+ --lt-text-on-primary: var(--lt-color-neutral-900);
286
+ --lt-text-on-secondary: var(--lt-color-white);
287
+ --lt-text-on-success: var(--lt-color-white);
288
+ --lt-text-on-warning: var(--lt-color-warning-800);
289
+ --lt-text-primary: var(--lt-color-primary-700);
290
+ --lt-text-secondary: var(--lt-color-secondary-700);
291
+ --lt-text-subtle: var(--lt-color-neutral-600);
292
+ --lt-text-success: var(--lt-color-success-700);
293
+ --lt-text-warning: var(--lt-color-warning-700);
294
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,192 @@
1
+ :root{
2
+ --lt-border-radius: 0.5rem;
3
+ --lt-color-black: #000000;
4
+ --lt-color-error-100: #ffc8c1;
5
+ --lt-color-error-200: #ffa198;
6
+ --lt-color-error-300: #ff847b;
7
+ --lt-color-error-400: #ff6560;
8
+ --lt-color-error-50: #f3e4e2;
9
+ --lt-color-error-500: #ef4444;
10
+ --lt-color-error-600: #cb2d31;
11
+ --lt-color-error-700: #950e18;
12
+ --lt-color-error-800: #5a312e;
13
+ --lt-color-error-900: #3f1917;
14
+ --lt-color-error-muted-100: #e6dad8;
15
+ --lt-color-error-muted-200: #d6c3c1;
16
+ --lt-color-error-muted-300: #cdb4b2;
17
+ --lt-color-error-muted-400: #bfa4a1;
18
+ --lt-color-error-muted-50: #e9e7e7;
19
+ --lt-color-error-muted-500: #ab908d;
20
+ --lt-color-error-muted-600: #8d7572;
21
+ --lt-color-error-muted-700: #624e4c;
22
+ --lt-color-error-muted-800: #4c3d3b;
23
+ --lt-color-error-muted-900: #2d2423;
24
+ --lt-color-info-100: #bce4fe;
25
+ --lt-color-info-200: #8fd2fd;
26
+ --lt-color-info-300: #6ac7ff;
27
+ --lt-color-info-400: #43b9fa;
28
+ --lt-color-info-50: #e1e9ef;
29
+ --lt-color-info-500: #0ea5e9;
30
+ --lt-color-info-600: #0087c4;
31
+ --lt-color-info-700: #005c8d;
32
+ --lt-color-info-800: #1e465d;
33
+ --lt-color-info-900: #082a3c;
34
+ --lt-color-info-muted-100: #d9e0e5;
35
+ --lt-color-info-muted-200: #c5d0d7;
36
+ --lt-color-info-muted-300: #b8c6cf;
37
+ --lt-color-info-muted-400: #aab9c4;
38
+ --lt-color-info-muted-50: #e7e8e9;
39
+ --lt-color-info-muted-500: #99a9b3;
40
+ --lt-color-info-muted-600: #7a8993;
41
+ --lt-color-info-muted-700: #4f5b63;
42
+ --lt-color-info-muted-800: #3d464c;
43
+ --lt-color-info-muted-900: #22272a;
44
+ --lt-color-neutral-100: #f3f3f3;
45
+ --lt-color-neutral-200: #e4e4e4;
46
+ --lt-color-neutral-300: #cacaca;
47
+ --lt-color-neutral-400: #ababab;
48
+ --lt-color-neutral-50: #fafafa;
49
+ --lt-color-neutral-500: #868686;
50
+ --lt-color-neutral-600: #696969;
51
+ --lt-color-neutral-700: #4d4d4d;
52
+ --lt-color-neutral-800: #333333;
53
+ --lt-color-neutral-900: #1b1b1b;
54
+ --lt-color-primary-100: #ffd4b5;
55
+ --lt-color-primary-200: #ffbb87;
56
+ --lt-color-primary-300: #ffa860;
57
+ --lt-color-primary-400: #ff9539;
58
+ --lt-color-primary-50: #f0e5df;
59
+ --lt-color-primary-500: #ff8200;
60
+ --lt-color-primary-600: #d56400;
61
+ --lt-color-primary-700: #963b00;
62
+ --lt-color-primary-800: #5e3c25;
63
+ --lt-color-primary-900: #3c1d05;
64
+ --lt-color-primary-muted-100: #e8dfda;
65
+ --lt-color-primary-muted-200: #dfd1c8;
66
+ --lt-color-primary-muted-300: #dac8bd;
67
+ --lt-color-primary-muted-400: #d2beb2;
68
+ --lt-color-primary-muted-50: #e9e7e6;
69
+ --lt-color-primary-muted-500: #c6b1a5;
70
+ --lt-color-primary-muted-600: #a08e82;
71
+ --lt-color-primary-muted-700: #6b5c53;
72
+ --lt-color-primary-muted-800: #50453e;
73
+ --lt-color-primary-muted-900: #2b2521;
74
+ --lt-color-secondary-100: #cbd2ff;
75
+ --lt-color-secondary-200: #a3acf7;
76
+ --lt-color-secondary-300: #8a93f4;
77
+ --lt-color-secondary-400: #7076e5;
78
+ --lt-color-secondary-50: #e5e7f1;
79
+ --lt-color-secondary-500: #5252c5;
80
+ --lt-color-secondary-600: #4544ad;
81
+ --lt-color-secondary-700: #333187;
82
+ --lt-color-secondary-800: #2e3254;
83
+ --lt-color-secondary-900: #202343;
84
+ --lt-color-secondary-muted-100: #d5d7df;
85
+ --lt-color-secondary-muted-200: #b4b7c4;
86
+ --lt-color-secondary-muted-300: #a0a3b3;
87
+ --lt-color-secondary-muted-400: #898c9e;
88
+ --lt-color-secondary-muted-50: #e7e8e9;
89
+ --lt-color-secondary-muted-500: #6c6f81;
90
+ --lt-color-secondary-muted-600: #5a5d6d;
91
+ --lt-color-secondary-muted-700: #414351;
92
+ --lt-color-secondary-muted-800: #363742;
93
+ --lt-color-secondary-muted-900: #25262c;
94
+ --lt-color-success-100: #beedc6;
95
+ --lt-color-success-200: #94e4a4;
96
+ --lt-color-success-300: #70df8b;
97
+ --lt-color-success-400: #4bd573;
98
+ --lt-color-success-50: #e1ebe2;
99
+ --lt-color-success-500: #22c55e;
100
+ --lt-color-success-600: #00a244;
101
+ --lt-color-success-700: #006f22;
102
+ --lt-color-success-800: #2b4d32;
103
+ --lt-color-success-900: #0c2e16;
104
+ --lt-color-success-muted-100: #dbe3dc;
105
+ --lt-color-success-muted-200: #cad7cc;
106
+ --lt-color-success-muted-300: #bfcfc1;
107
+ --lt-color-success-muted-400: #b3c5b6;
108
+ --lt-color-success-muted-50: #e7e8e7;
109
+ --lt-color-success-muted-500: #a5b8a8;
110
+ --lt-color-success-muted-600: #839586;
111
+ --lt-color-success-muted-700: #546256;
112
+ --lt-color-success-muted-800: #404a41;
113
+ --lt-color-success-muted-900: #222823;
114
+ --lt-color-warning-100: #f5e0b5;
115
+ --lt-color-warning-200: #f6d289;
116
+ --lt-color-warning-300: #f9c962;
117
+ --lt-color-warning-400: #f7bf3a;
118
+ --lt-color-warning-50: #ece7de;
119
+ --lt-color-warning-500: #eeb308;
120
+ --lt-color-warning-600: #c38e00;
121
+ --lt-color-warning-700: #845a00;
122
+ --lt-color-warning-800: #584720;
123
+ --lt-color-warning-900: #332400;
124
+ --lt-color-warning-muted-100: #e7e4dc;
125
+ --lt-color-warning-muted-200: #e2dcd0;
126
+ --lt-color-warning-muted-300: #ded7c8;
127
+ --lt-color-warning-muted-400: #dad1c0;
128
+ --lt-color-warning-muted-50: #e8e8e6;
129
+ --lt-color-warning-muted-500: #d2c9b8;
130
+ --lt-color-warning-muted-600: #a9a090;
131
+ --lt-color-warning-muted-700: #6d6659;
132
+ --lt-color-warning-muted-800: #504c42;
133
+ --lt-color-warning-muted-900: #292621;
134
+ --lt-color-white: #FFFFFF;
135
+ --lt-elevation-0: none;
136
+ --lt-elevation-1: 0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06);
137
+ --lt-elevation-2: 0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06);
138
+ --lt-elevation-3: 0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05);
139
+ --lt-elevation-4: 0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04);
140
+ --lt-elevation-5: 0 25px 50px -12px rgb(27 27 27 / 0.25);
141
+ --lt-spacing-px-0: 0px;
142
+ --lt-spacing-px-1: 4px;
143
+ --lt-spacing-px-10: 40px;
144
+ --lt-spacing-px-11: 44px;
145
+ --lt-spacing-px-12: 48px;
146
+ --lt-spacing-px-13: 52px;
147
+ --lt-spacing-px-14: 56px;
148
+ --lt-spacing-px-15: 60px;
149
+ --lt-spacing-px-16: 64px;
150
+ --lt-spacing-px-17: 68px;
151
+ --lt-spacing-px-18: 72px;
152
+ --lt-spacing-px-19: 76px;
153
+ --lt-spacing-px-2: 8px;
154
+ --lt-spacing-px-20: 80px;
155
+ --lt-spacing-px-21: 84px;
156
+ --lt-spacing-px-22: 88px;
157
+ --lt-spacing-px-23: 92px;
158
+ --lt-spacing-px-24: 96px;
159
+ --lt-spacing-px-3: 12px;
160
+ --lt-spacing-px-4: 16px;
161
+ --lt-spacing-px-5: 20px;
162
+ --lt-spacing-px-6: 24px;
163
+ --lt-spacing-px-7: 28px;
164
+ --lt-spacing-px-8: 32px;
165
+ --lt-spacing-px-9: 36px;
166
+ --lt-spacing-0: 0rem;
167
+ --lt-spacing-1: 0.25rem;
168
+ --lt-spacing-10: 2.5rem;
169
+ --lt-spacing-11: 2.75rem;
170
+ --lt-spacing-12: 3rem;
171
+ --lt-spacing-13: 3.25rem;
172
+ --lt-spacing-14: 3.5rem;
173
+ --lt-spacing-15: 3.75rem;
174
+ --lt-spacing-16: 4rem;
175
+ --lt-spacing-17: 4.25rem;
176
+ --lt-spacing-18: 4.5rem;
177
+ --lt-spacing-19: 4.75rem;
178
+ --lt-spacing-2: 0.5rem;
179
+ --lt-spacing-20: 5rem;
180
+ --lt-spacing-21: 5.25rem;
181
+ --lt-spacing-22: 5.5rem;
182
+ --lt-spacing-23: 5.75rem;
183
+ --lt-spacing-24: 6rem;
184
+ --lt-spacing-3: 0.75rem;
185
+ --lt-spacing-4: 1rem;
186
+ --lt-spacing-5: 1.25rem;
187
+ --lt-spacing-6: 1.5rem;
188
+ --lt-spacing-7: 1.75rem;
189
+ --lt-spacing-8: 2rem;
190
+ --lt-spacing-9: 2.25rem;
191
+ --lt-typography-fontFamily: "Hanken Grotesk", sans-serif;
192
+ }
package/dist/tokens.js ADDED
@@ -0,0 +1 @@
1
+ export const tokens = {"color":{"primary":{"50":"#f0e5df","100":"#ffd4b5","200":"#ffbb87","300":"#ffa860","400":"#ff9539","500":"#ff8200","600":"#d56400","700":"#963b00","800":"#5e3c25","900":"#3c1d05"},"primary-muted":{"50":"#e9e7e6","100":"#e8dfda","200":"#dfd1c8","300":"#dac8bd","400":"#d2beb2","500":"#c6b1a5","600":"#a08e82","700":"#6b5c53","800":"#50453e","900":"#2b2521"},"secondary":{"50":"#e5e7f1","100":"#cbd2ff","200":"#a3acf7","300":"#8a93f4","400":"#7076e5","500":"#5252c5","600":"#4544ad","700":"#333187","800":"#2e3254","900":"#202343"},"secondary-muted":{"50":"#e7e8e9","100":"#d5d7df","200":"#b4b7c4","300":"#a0a3b3","400":"#898c9e","500":"#6c6f81","600":"#5a5d6d","700":"#414351","800":"#363742","900":"#25262c"},"success":{"50":"#e1ebe2","100":"#beedc6","200":"#94e4a4","300":"#70df8b","400":"#4bd573","500":"#22c55e","600":"#00a244","700":"#006f22","800":"#2b4d32","900":"#0c2e16"},"success-muted":{"50":"#e7e8e7","100":"#dbe3dc","200":"#cad7cc","300":"#bfcfc1","400":"#b3c5b6","500":"#a5b8a8","600":"#839586","700":"#546256","800":"#404a41","900":"#222823"},"warning":{"50":"#ece7de","100":"#f5e0b5","200":"#f6d289","300":"#f9c962","400":"#f7bf3a","500":"#eeb308","600":"#c38e00","700":"#845a00","800":"#584720","900":"#332400"},"warning-muted":{"50":"#e8e8e6","100":"#e7e4dc","200":"#e2dcd0","300":"#ded7c8","400":"#dad1c0","500":"#d2c9b8","600":"#a9a090","700":"#6d6659","800":"#504c42","900":"#292621"},"error":{"50":"#f3e4e2","100":"#ffc8c1","200":"#ffa198","300":"#ff847b","400":"#ff6560","500":"#ef4444","600":"#cb2d31","700":"#950e18","800":"#5a312e","900":"#3f1917"},"error-muted":{"50":"#e9e7e7","100":"#e6dad8","200":"#d6c3c1","300":"#cdb4b2","400":"#bfa4a1","500":"#ab908d","600":"#8d7572","700":"#624e4c","800":"#4c3d3b","900":"#2d2423"},"info":{"50":"#e1e9ef","100":"#bce4fe","200":"#8fd2fd","300":"#6ac7ff","400":"#43b9fa","500":"#0ea5e9","600":"#0087c4","700":"#005c8d","800":"#1e465d","900":"#082a3c"},"info-muted":{"50":"#e7e8e9","100":"#d9e0e5","200":"#c5d0d7","300":"#b8c6cf","400":"#aab9c4","500":"#99a9b3","600":"#7a8993","700":"#4f5b63","800":"#3d464c","900":"#22272a"},"neutral":{"50":"#fafafa","100":"#f3f3f3","200":"#e4e4e4","300":"#cacaca","400":"#ababab","500":"#868686","600":"#696969","700":"#4d4d4d","800":"#333333","900":"#1b1b1b"},"white":"#FFFFFF","black":"#000000"},"spacing":{"px":{"0":"0px","1":"4px","2":"8px","3":"12px","4":"16px","5":"20px","6":"24px","7":"28px","8":"32px","9":"36px","10":"40px","11":"44px","12":"48px","13":"52px","14":"56px","15":"60px","16":"64px","17":"68px","18":"72px","19":"76px","20":"80px","21":"84px","22":"88px","23":"92px","24":"96px"},"rem":{"0":"0rem","1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","7":"1.75rem","8":"2rem","9":"2.25rem","10":"2.5rem","11":"2.75rem","12":"3rem","13":"3.25rem","14":"3.5rem","15":"3.75rem","16":"4rem","17":"4.25rem","18":"4.5rem","19":"4.75rem","20":"5rem","21":"5.25rem","22":"5.5rem","23":"5.75rem","24":"6rem"}},"border":{"radius":"0.5rem","square":false},"typography":{"fontFamily":"\"Hanken Grotesk\", sans-serif"},"elevation":{"0":"none","1":"0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06)","2":"0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06)","3":"0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05)","4":"0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04)","5":"0 25px 50px -12px rgb(27 27 27 / 0.25)"},"semantic":{"text-default":"color-neutral-900","text-subtle":"color-neutral-600","text-muted":"color-neutral-400","text-disabled":"color-neutral-400","text-inverse":"color-white","text-neutral":"color-neutral-700","text-primary":"color-primary-700","text-on-primary":"color-neutral-900","text-on-warning":"color-warning-800","text-secondary":"color-secondary-700","text-on-secondary":"color-white","text-success":"color-success-700","text-on-success":"color-white","text-warning":"color-warning-700","text-error":"color-error-700","text-on-error":"color-white","text-info":"color-info-700","text-on-info":"color-white","bg-default":"color-white","bg-subtle":"color-neutral-50","bg-surface":"color-neutral-100","bg-overlay":"color-neutral-200","bg-inverse":"color-neutral-900","bg-neutral-subtle":"color-neutral-100","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-100","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-100","bg-success":"color-success-500","bg-success-subtle":"color-success-100","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-100","bg-error":"color-error-500","bg-error-subtle":"color-error-100","bg-info":"color-info-500","bg-info-subtle":"color-info-100","border-default":"color-neutral-200","border-strong":"color-neutral-400","border-subtle":"color-neutral-100","border-focus":"color-primary-200","border-primary":"color-primary-200","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-200","border-secondary-strong":"color-secondary-500","border-success":"color-success-200","border-success-strong":"color-success-500","border-warning":"color-warning-200","border-warning-strong":"color-warning-500","border-error":"color-error-200","border-error-strong":"color-error-500","border-info":"color-info-200","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-500","interactive-primary-bg-hover":"color-primary-600","interactive-primary-bg-active":"color-primary-700","interactive-secondary-bg":"color-secondary-500","interactive-secondary-bg-hover":"color-secondary-600","interactive-secondary-bg-active":"color-secondary-700","interactive-success-bg":"color-success-500","interactive-success-bg-hover":"color-success-600","interactive-success-bg-active":"color-success-700","interactive-warning-bg":"color-warning-500","interactive-warning-bg-hover":"color-warning-600","interactive-warning-bg-active":"color-warning-700","interactive-error-bg":"color-error-500","interactive-error-bg-hover":"color-error-600","interactive-error-bg-active":"color-error-700","interactive-info-bg":"color-info-500","interactive-info-bg-hover":"color-info-600","interactive-info-bg-active":"color-info-700"},"semanticDark":{"text-default":"color-neutral-100","text-subtle":"color-neutral-300","text-muted":"color-neutral-500","text-disabled":"color-neutral-600","text-inverse":"color-neutral-900","text-neutral":"color-neutral-200","text-primary":"color-primary-300","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-300","text-on-secondary":"color-white","text-success":"color-success-300","text-on-success":"color-white","text-warning":"color-warning-300","text-on-warning":"color-white","text-error":"color-error-300","text-on-error":"color-white","text-info":"color-info-300","text-on-info":"color-white","bg-default":"color-neutral-900","bg-subtle":"color-neutral-800","bg-surface":"color-neutral-800","bg-overlay":"color-neutral-700","bg-inverse":"color-neutral-50","bg-neutral-subtle":"color-neutral-800","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-900","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-900","bg-success":"color-success-500","bg-success-subtle":"color-success-900","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-900","bg-error":"color-error-500","bg-error-subtle":"color-error-900","bg-info":"color-info-500","bg-info-subtle":"color-info-900","border-default":"color-neutral-700","border-strong":"color-neutral-500","border-subtle":"color-neutral-800","border-focus":"color-primary-400","border-primary":"color-primary-700","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-700","border-secondary-strong":"color-secondary-500","border-success":"color-success-700","border-success-strong":"color-success-500","border-warning":"color-warning-700","border-warning-strong":"color-warning-500","border-error":"color-error-700","border-error-strong":"color-error-500","border-info":"color-info-700","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-400","interactive-primary-bg-hover":"color-primary-300","interactive-primary-bg-active":"color-primary-500","interactive-secondary-bg":"color-secondary-400","interactive-secondary-bg-hover":"color-secondary-300","interactive-secondary-bg-active":"color-secondary-500","interactive-success-bg":"color-success-400","interactive-success-bg-hover":"color-success-300","interactive-success-bg-active":"color-success-500","interactive-warning-bg":"color-warning-400","interactive-warning-bg-hover":"color-warning-300","interactive-warning-bg-active":"color-warning-500","interactive-error-bg":"color-error-400","interactive-error-bg-hover":"color-error-300","interactive-error-bg-active":"color-error-500","interactive-info-bg":"color-info-400","interactive-info-bg-hover":"color-info-300","interactive-info-bg-active":"color-info-500"}};