@mkatogui/uds-tokens 0.2.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 (7) hide show
  1. package/README.md +104 -0
  2. package/dist/index.d.ts +343 -0
  3. package/dist/index.js +344 -0
  4. package/dist/index.mjs +341 -0
  5. package/dist/tokens.css +617 -0
  6. package/dist/tokens.json +670 -0
  7. package/package.json +29 -0
package/README.md ADDED
@@ -0,0 +1,104 @@
1
+ # @mkatogui/uds-tokens
2
+
3
+ 496 W3C DTCG design tokens from the [Universal Design System](https://github.com/mkatogui/universal-design-system) -- CSS custom properties, JavaScript/TypeScript objects, and flat JSON.
4
+
5
+ Includes 9 structural palettes (minimal-saas, ai-futuristic, gradient-startup, corporate, apple-minimal, illustration, dashboard, bold-lifestyle, minimal-corporate) with light and dark mode support.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install @mkatogui/uds-tokens
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### CSS Custom Properties
16
+
17
+ Import the CSS file to get all tokens as custom properties on `:root`, plus palette overrides via `[data-theme]` selectors.
18
+
19
+ ```css
20
+ /* In your CSS or PostCSS entry */
21
+ @import '@mkatogui/uds-tokens/css';
22
+ ```
23
+
24
+ ```html
25
+ <!-- Apply a palette -->
26
+ <body data-theme="corporate">
27
+ <h1 style="color: var(--color-semantic-brand-primary)">Hello</h1>
28
+ </body>
29
+ ```
30
+
31
+ ### JavaScript / TypeScript
32
+
33
+ Import the token object for type-safe access. Each leaf value is a `var()` reference with a fallback to the resolved default.
34
+
35
+ ```js
36
+ // ESM
37
+ import { tokens } from '@mkatogui/uds-tokens';
38
+
39
+ // CommonJS
40
+ const { tokens } = require('@mkatogui/uds-tokens');
41
+ ```
42
+
43
+ ```typescript
44
+ import { tokens, type Tokens } from '@mkatogui/uds-tokens';
45
+
46
+ // Autocomplete and type checking
47
+ const brand = tokens.color.semantic.brand.primary;
48
+ // => "var(--color-semantic-brand-primary, #2563EB)"
49
+
50
+ const gap = tokens.spacing['4'];
51
+ // => "var(--spacing-4, 16px)"
52
+ ```
53
+
54
+ ### JSON
55
+
56
+ Import the flat JSON for tooling integrations (Style Dictionary, Figma plugins, etc.).
57
+
58
+ ```js
59
+ import tokensJSON from '@mkatogui/uds-tokens/json';
60
+ ```
61
+
62
+ ## Token Categories
63
+
64
+ | Category | Prefix | Examples |
65
+ |-------------|---------------------|------------------------------------|
66
+ | Color | `--color-*` | `--color-primitive-blue-500`, `--color-semantic-brand-primary` |
67
+ | Spacing | `--spacing-*` | `--spacing-1` (4px) through `--spacing-32` (128px) |
68
+ | Typography | `--font-size-*` | `--font-size-body-md`, `--font-size-display-xl` |
69
+ | Font Family | `--font-family-*` | `--font-family-sans`, `--font-family-mono` |
70
+ | Shadow | `--shadow-*` | `--shadow-sm`, `--shadow-lg` |
71
+ | Radius | `--radius-*` | `--radius-sm`, `--radius-full` |
72
+ | Motion | `--motion-*` | `--motion-duration-fast`, `--motion-easing-default` |
73
+ | Z-Index | `--zIndex-*` | `--zIndex-modal`, `--zIndex-tooltip` |
74
+ | Layout | `--layout-*` | `--layout-container-xl`, `--layout-sidebar-default` |
75
+ | Component | `--component-*` | `--component-avatar-md`, `--component-toast-max_width` |
76
+
77
+ ## Palettes
78
+
79
+ Apply any palette with the `data-theme` attribute. Each palette overrides color, radius, shadow, and display font tokens.
80
+
81
+ ```html
82
+ <div data-theme="ai-futuristic">...</div>
83
+ <div data-theme="corporate">...</div>
84
+ <div data-theme="gradient-startup">...</div>
85
+ ```
86
+
87
+ For dark mode, add the `.dark` class:
88
+
89
+ ```html
90
+ <div data-theme="corporate" class="dark">...</div>
91
+ ```
92
+
93
+ ## Build from Source
94
+
95
+ ```bash
96
+ cd packages/tokens
97
+ npm run build
98
+ ```
99
+
100
+ This reads `../../tokens/design-tokens.json`, resolves all token references, and outputs the `dist/` artifacts.
101
+
102
+ ## License
103
+
104
+ MIT
package/dist/index.d.ts ADDED
@@ -0,0 +1,343 @@
1
+ /**
2
+ * Universal Design System -- TypeScript Token Types
3
+ * Auto-generated by @katonometrica/uds-tokens build script
4
+ */
5
+
6
+ export declare const tokens: {
7
+ readonly color: {
8
+ readonly primitive: {
9
+ readonly blue: {
10
+ readonly '50': string;
11
+ readonly '100': string;
12
+ readonly '200': string;
13
+ readonly '300': string;
14
+ readonly '400': string;
15
+ readonly '500': string;
16
+ readonly '600': string;
17
+ readonly '700': string;
18
+ readonly '800': string;
19
+ readonly '900': string;
20
+ readonly '950': string;
21
+ };
22
+ readonly purple: {
23
+ readonly '50': string;
24
+ readonly '100': string;
25
+ readonly '200': string;
26
+ readonly '400': string;
27
+ readonly '500': string;
28
+ readonly '600': string;
29
+ readonly '700': string;
30
+ readonly '800': string;
31
+ readonly '900': string;
32
+ };
33
+ readonly green: {
34
+ readonly '50': string;
35
+ readonly '100': string;
36
+ readonly '400': string;
37
+ readonly '500': string;
38
+ readonly '600': string;
39
+ readonly '700': string;
40
+ };
41
+ readonly red: {
42
+ readonly '50': string;
43
+ readonly '100': string;
44
+ readonly '400': string;
45
+ readonly '500': string;
46
+ readonly '600': string;
47
+ readonly '700': string;
48
+ };
49
+ readonly amber: {
50
+ readonly '50': string;
51
+ readonly '100': string;
52
+ readonly '400': string;
53
+ readonly '500': string;
54
+ readonly '600': string;
55
+ readonly '700': string;
56
+ };
57
+ readonly cyan: {
58
+ readonly '400': string;
59
+ readonly '500': string;
60
+ readonly '600': string;
61
+ };
62
+ readonly 'neon-green': {
63
+ readonly '500': string;
64
+ };
65
+ readonly pink: {
66
+ readonly '500': string;
67
+ readonly '600': string;
68
+ };
69
+ readonly neutral: {
70
+ readonly '0': string;
71
+ readonly '50': string;
72
+ readonly '100': string;
73
+ readonly '150': string;
74
+ readonly '200': string;
75
+ readonly '300': string;
76
+ readonly '400': string;
77
+ readonly '500': string;
78
+ readonly '600': string;
79
+ readonly '700': string;
80
+ readonly '800': string;
81
+ readonly '850': string;
82
+ readonly '900': string;
83
+ readonly '1000': string;
84
+ };
85
+ readonly navy: {
86
+ readonly '700': string;
87
+ readonly '800': string;
88
+ readonly '900': string;
89
+ };
90
+ };
91
+ readonly semantic: {
92
+ readonly bg: {
93
+ readonly primary: string;
94
+ readonly secondary: string;
95
+ readonly tertiary: string;
96
+ readonly inverse: string;
97
+ };
98
+ readonly text: {
99
+ readonly primary: string;
100
+ readonly secondary: string;
101
+ readonly tertiary: string;
102
+ readonly 'on-brand': string;
103
+ };
104
+ readonly border: {
105
+ readonly default: string;
106
+ readonly input: string;
107
+ readonly subtle: string;
108
+ };
109
+ readonly brand: {
110
+ readonly primary: string;
111
+ readonly secondary: string;
112
+ readonly accent: string;
113
+ readonly muted: string;
114
+ };
115
+ readonly success: string;
116
+ readonly 'success-bg': string;
117
+ readonly warning: string;
118
+ readonly 'warning-bg': string;
119
+ readonly error: string;
120
+ readonly 'error-bg': string;
121
+ readonly info: string;
122
+ readonly 'info-bg': string;
123
+ readonly 'surface-default': string;
124
+ readonly 'surface-hover': string;
125
+ readonly 'surface-active': string;
126
+ readonly 'text-disabled': string;
127
+ readonly 'border-strong': string;
128
+ readonly overlay: string;
129
+ };
130
+ readonly chart: {
131
+ readonly '1': string;
132
+ readonly '2': string;
133
+ readonly '3': string;
134
+ readonly '4': string;
135
+ readonly '5': string;
136
+ readonly '6': string;
137
+ readonly '7': string;
138
+ readonly '8': string;
139
+ };
140
+ };
141
+ readonly typography: {
142
+ readonly fontFamily: {
143
+ readonly sans: string;
144
+ readonly display: string;
145
+ readonly mono: string;
146
+ readonly serif: string;
147
+ };
148
+ readonly fontWeight: {
149
+ readonly regular: string;
150
+ readonly medium: string;
151
+ readonly semibold: string;
152
+ readonly bold: string;
153
+ readonly extrabold: string;
154
+ };
155
+ readonly fontSize: {
156
+ readonly 'display-xl': string;
157
+ readonly 'display-lg': string;
158
+ readonly 'display-md': string;
159
+ readonly 'heading-lg': string;
160
+ readonly 'heading-md': string;
161
+ readonly 'heading-sm': string;
162
+ readonly 'body-lg': string;
163
+ readonly 'body-md': string;
164
+ readonly 'body-sm': string;
165
+ readonly label: string;
166
+ };
167
+ readonly lineHeight: {
168
+ readonly display: string;
169
+ readonly heading: string;
170
+ readonly body: string;
171
+ readonly tight: string;
172
+ };
173
+ };
174
+ readonly spacing: {
175
+ readonly '1': string;
176
+ readonly '2': string;
177
+ readonly '3': string;
178
+ readonly '4': string;
179
+ readonly '5': string;
180
+ readonly '6': string;
181
+ readonly '8': string;
182
+ readonly '10': string;
183
+ readonly '12': string;
184
+ readonly '16': string;
185
+ readonly '20': string;
186
+ readonly '24': string;
187
+ readonly '32': string;
188
+ };
189
+ readonly size: {
190
+ readonly 'container-max': string;
191
+ readonly 'container-narrow': string;
192
+ readonly 'container-wide': string;
193
+ readonly 'icon-sm': string;
194
+ readonly 'icon-md': string;
195
+ readonly 'icon-lg': string;
196
+ readonly 'icon-xl': string;
197
+ };
198
+ readonly shadow: {
199
+ readonly xs: string;
200
+ readonly sm: string;
201
+ readonly md: string;
202
+ readonly lg: string;
203
+ readonly xl: string;
204
+ };
205
+ readonly motion: {
206
+ readonly duration: {
207
+ readonly instant: string;
208
+ readonly fast: string;
209
+ readonly normal: string;
210
+ readonly slow: string;
211
+ readonly slower: string;
212
+ readonly slowest: string;
213
+ };
214
+ readonly easing: {
215
+ readonly default: string;
216
+ readonly in: string;
217
+ readonly out: string;
218
+ readonly spring: string;
219
+ };
220
+ };
221
+ readonly opacity: {
222
+ readonly disabled: string;
223
+ readonly muted: string;
224
+ readonly subtle: string;
225
+ readonly overlay: string;
226
+ };
227
+ readonly breakpoint: {
228
+ readonly sm: string;
229
+ readonly md: string;
230
+ readonly lg: string;
231
+ readonly xl: string;
232
+ readonly '2xl': string;
233
+ };
234
+ readonly component: {
235
+ readonly tabs: {
236
+ readonly height_md: string;
237
+ readonly height_sm: string;
238
+ readonly indicator_width: string;
239
+ };
240
+ readonly accordion: {
241
+ readonly trigger_height: string;
242
+ readonly content_padding: string;
243
+ };
244
+ readonly tooltip: {
245
+ readonly max_width: string;
246
+ readonly padding_simple: string;
247
+ readonly padding_rich: string;
248
+ readonly delay: string;
249
+ };
250
+ readonly toast: {
251
+ readonly min_width: string;
252
+ readonly max_width: string;
253
+ readonly duration_default: string;
254
+ readonly max_visible: string;
255
+ };
256
+ readonly avatar: {
257
+ readonly xs: string;
258
+ readonly sm: string;
259
+ readonly md: string;
260
+ readonly lg: string;
261
+ readonly xl: string;
262
+ readonly status_dot_border: string;
263
+ };
264
+ readonly data_table: {
265
+ readonly row_compact: string;
266
+ readonly row_default: string;
267
+ readonly row_comfortable: string;
268
+ readonly header_height: string;
269
+ };
270
+ readonly pagination: {
271
+ readonly button_size: string;
272
+ };
273
+ readonly skeleton: {
274
+ readonly animation_duration: string;
275
+ readonly line_height: string;
276
+ readonly line_gap: string;
277
+ };
278
+ };
279
+ readonly radius: {
280
+ readonly sm: string;
281
+ readonly md: string;
282
+ readonly lg: string;
283
+ readonly xl: string;
284
+ readonly '2xl': string;
285
+ readonly full: string;
286
+ };
287
+ readonly zIndex: {
288
+ readonly dropdown: string;
289
+ readonly sticky: string;
290
+ readonly overlay: string;
291
+ readonly modal: string;
292
+ readonly toast: string;
293
+ readonly tooltip: string;
294
+ readonly system: string;
295
+ };
296
+ readonly 'font-weight': {
297
+ readonly regular: string;
298
+ readonly medium: string;
299
+ readonly semibold: string;
300
+ readonly bold: string;
301
+ readonly extrabold: string;
302
+ };
303
+ readonly 'line-height': {
304
+ readonly tight: string;
305
+ readonly normal: string;
306
+ readonly relaxed: string;
307
+ readonly loose: string;
308
+ };
309
+ readonly border: {
310
+ readonly 'width-thin': string;
311
+ readonly 'width-medium': string;
312
+ readonly 'width-thick': string;
313
+ };
314
+ readonly icon: {
315
+ readonly sm: string;
316
+ readonly md: string;
317
+ readonly lg: string;
318
+ readonly xl: string;
319
+ };
320
+ readonly layout: {
321
+ readonly breakpoint: {
322
+ readonly sm: string;
323
+ readonly md: string;
324
+ readonly lg: string;
325
+ readonly xl: string;
326
+ readonly '2xl': string;
327
+ };
328
+ readonly container: {
329
+ readonly sm: string;
330
+ readonly md: string;
331
+ readonly lg: string;
332
+ readonly xl: string;
333
+ readonly full: string;
334
+ };
335
+ readonly sidebar: {
336
+ readonly collapsed: string;
337
+ readonly default: string;
338
+ readonly wide: string;
339
+ };
340
+ };
341
+ };
342
+
343
+ export type Tokens = typeof tokens;