@sublimee/tokens 0.1.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.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Juan Figueroa
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,370 @@
1
+ # @sublimee/tokens
2
+
3
+ The semantic design token system for Sublime. Define your aesthetic once, use it everywhere.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ pnpm add @sublimee/tokens
9
+ ```
10
+
11
+ ## Quick Start
12
+
13
+ ```css
14
+ /* In your app's global CSS */
15
+ @import "@sublimee/tokens";
16
+
17
+ /* Override with your brand (optional) */
18
+ :root {
19
+ --sublime-color-interactive-accent: #ec4899;
20
+ --sublime-radius-button: 9999px;
21
+ }
22
+ ```
23
+
24
+ ```tsx
25
+ // Use in components
26
+ <button className="bg-[var(--sublime-color-surface-1)] text-[var(--sublime-color-text-primary)]">
27
+ Click me
28
+ </button>
29
+ ```
30
+
31
+ ---
32
+
33
+ ## Philosophy
34
+
35
+ **"Describe purpose, not appearance."**
36
+
37
+ Traditional approaches hardcode values:
38
+ ```css
39
+ /* Bad: Hardcoded, breaks in dark mode */
40
+ .button { background: white; color: black; }
41
+ ```
42
+
43
+ Sublime uses semantic tokens:
44
+ ```css
45
+ /* Good: Adapts to theme context */
46
+ .button {
47
+ background: var(--sublime-color-surface-1);
48
+ color: var(--sublime-color-text-primary);
49
+ }
50
+ ```
51
+
52
+ Tokens describe **what something is**, not **how it looks**:
53
+ - `surface-1` = elevated container (could be white in light mode, gray-900 in dark)
54
+ - `text-primary` = main text (could be black in light mode, white in dark)
55
+ - `interactive-accent` = brand color for CTAs (your pink, their blue, etc.)
56
+
57
+ ---
58
+
59
+ ## Token Categories
60
+
61
+ ### Colors (`--sublime-color-*`)
62
+
63
+ #### Surface Colors
64
+ Background colors for containers, cards, pages.
65
+
66
+ | Token | Purpose |
67
+ |-------|---------|
68
+ | `--sublime-color-surface-0` | Page background (base layer) |
69
+ | `--sublime-color-surface-1` | Elevated surfaces (cards, modals) |
70
+ | `--sublime-color-surface-2` | Higher elevation |
71
+ | `--sublime-color-surface-inset` | Depressed surfaces (inputs, wells) |
72
+
73
+ Each has hover/active states:
74
+ - `--sublime-color-surface-1-hover`
75
+ - `--sublime-color-surface-1-active`
76
+
77
+ #### Text Colors
78
+ Content colors by emphasis level.
79
+
80
+ | Token | Purpose |
81
+ |-------|---------|
82
+ | `--sublime-color-text-primary` | Headings, important text |
83
+ | `--sublime-color-text-secondary` | Body text, descriptions |
84
+ | `--sublime-color-text-muted` | Captions, placeholders |
85
+ | `--sublime-color-text-disabled` | Disabled state |
86
+ | `--sublime-color-text-accent` | Links, highlights |
87
+
88
+ Each has an `-inverse` variant for use on dark surfaces.
89
+
90
+ #### Border Colors
91
+ Dividers, outlines, input borders.
92
+
93
+ | Token | Purpose |
94
+ |-------|---------|
95
+ | `--sublime-color-border-primary` | Main borders |
96
+ | `--sublime-color-border-secondary` | Subtle dividers |
97
+ | `--sublime-color-border-accent` | Focused/active states |
98
+ | `--sublime-color-border-error` | Error states |
99
+
100
+ #### Interactive Colors
101
+ Buttons, links, controls.
102
+
103
+ | Token | Purpose |
104
+ |-------|---------|
105
+ | `--sublime-color-interactive-primary` | High-emphasis actions |
106
+ | `--sublime-color-interactive-secondary` | Medium-emphasis actions |
107
+ | `--sublime-color-interactive-ghost` | Low-emphasis actions |
108
+ | `--sublime-color-interactive-accent` | Brand color actions |
109
+
110
+ Each has hover, active, and text variants:
111
+ - `--sublime-color-interactive-primary-hover`
112
+ - `--sublime-color-interactive-primary-active`
113
+ - `--sublime-color-interactive-primary-text`
114
+
115
+ #### Status Colors
116
+ Feedback states.
117
+
118
+ | Token | Purpose |
119
+ |-------|---------|
120
+ | `--sublime-color-status-error` | Errors, destructive actions |
121
+ | `--sublime-color-status-warning` | Warnings, cautions |
122
+ | `--sublime-color-status-success` | Success, confirmations |
123
+ | `--sublime-color-status-info` | Information, tips |
124
+
125
+ Each has hover and background variants.
126
+
127
+ #### Focus & Selection
128
+
129
+ | Token | Purpose |
130
+ |-------|---------|
131
+ | `--sublime-color-focus-ring` | Keyboard focus indicator |
132
+ | `--sublime-color-focus-ring-offset` | Ring background |
133
+ | `--sublime-color-selection-bg` | Text selection background |
134
+ | `--sublime-color-selection-text` | Selected text color |
135
+
136
+ #### Overlays
137
+
138
+ | Token | Purpose |
139
+ |-------|---------|
140
+ | `--sublime-color-overlay-light` | Light backdrops |
141
+ | `--sublime-color-overlay-dark` | Dark backdrops |
142
+ | `--sublime-color-overlay-scrim` | Modal overlays |
143
+
144
+ ### Spacing (`--sublime-space-*`)
145
+
146
+ Base-4 spacing scale:
147
+
148
+ ```
149
+ --sublime-space-1: 0.25rem (4px)
150
+ --sublime-space-2: 0.5rem (8px)
151
+ --sublime-space-3: 0.75rem (12px)
152
+ --sublime-space-4: 1rem (16px)
153
+ --sublime-space-6: 1.5rem (24px)
154
+ --sublime-space-8: 2rem (32px)
155
+ ```
156
+
157
+ Component-specific aliases:
158
+ - `--sublime-space-button-x`
159
+ - `--sublime-space-button-y`
160
+ - `--sublime-space-card-padding`
161
+
162
+ ### Shadows (`--sublime-shadow-*`)
163
+
164
+ Elevation system:
165
+
166
+ ```
167
+ --sublime-shadow-xs (subtle)
168
+ --sublime-shadow-sm (cards)
169
+ --sublime-shadow-md (elevated cards)
170
+ --sublime-shadow-lg (modals)
171
+ --sublime-shadow-xl (dialogs)
172
+ ```
173
+
174
+ Component-specific aliases:
175
+ - `--sublime-shadow-button`
176
+ - `--sublime-shadow-card`
177
+ - `--sublime-shadow-focus-ring`
178
+
179
+ ### Border Radius (`--sublime-radius-*`)
180
+
181
+ ```
182
+ --sublime-radius-sm (4px)
183
+ --sublime-radius-md (6px)
184
+ --sublime-radius-lg (8px)
185
+ --sublime-radius-xl (12px)
186
+ --sublime-radius-2xl (16px)
187
+ --sublime-radius-full (pill/circle)
188
+ ```
189
+
190
+ Component-specific aliases:
191
+ - `--sublime-radius-button`
192
+ - `--sublime-radius-card`
193
+ - `--sublime-radius-input`
194
+
195
+ ### Typography (`--sublime-font-*`)
196
+
197
+ ```
198
+ --sublime-font-family-sans
199
+ --sublime-font-family-mono
200
+
201
+ --sublime-font-size-xs (12px)
202
+ --sublime-font-size-sm (14px)
203
+ --sublime-font-size-md (16px)
204
+ --sublime-font-size-lg (18px)
205
+ --sublime-font-size-xl (20px)
206
+
207
+ --sublime-font-weight-medium
208
+ --sublime-font-weight-semibold
209
+ --sublime-font-weight-bold
210
+
211
+ --sublime-line-height-tight
212
+ --sublime-line-height-normal
213
+ --sublime-line-height-relaxed
214
+ ```
215
+
216
+ ### Animation (`--sublime-duration-*`, `--sublime-ease-*`)
217
+
218
+ ```
219
+ --sublime-duration-fast: 100ms
220
+ --sublime-duration-normal: 150ms
221
+ --sublime-duration-slow: 200ms
222
+
223
+ --sublime-ease-out: cubic-bezier(0, 0, 0.2, 1)
224
+ --sublime-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)
225
+ ```
226
+
227
+ Component-specific aliases:
228
+ - `--sublime-transition-button`
229
+ - `--sublime-transition-color`
230
+ - `--sublime-transition-transform`
231
+
232
+ ---
233
+
234
+ ## Dark Mode
235
+
236
+ All color tokens have dark variants that activate via:
237
+
238
+ 1. `.dark` class on ancestor
239
+ 2. `[data-theme="dark"]` attribute on ancestor
240
+ 3. `prefers-color-scheme: dark` media query (fallback)
241
+
242
+ ```css
243
+ /* Automatic dark mode */
244
+ <html class="dark">
245
+ <body class="bg-[var(--sublime-color-surface-0)]">
246
+ <!-- All components render in dark mode -->
247
+ </body>
248
+ </html>
249
+ ```
250
+
251
+ ---
252
+
253
+ ## Customization
254
+
255
+ ### Method 1: Override Specific Tokens
256
+
257
+ ```css
258
+ @import "@sublimee/tokens";
259
+
260
+ :root {
261
+ /* Your brand pink */
262
+ --sublime-color-interactive-accent: #ec4899;
263
+ --sublime-color-interactive-accent-hover: #db2777;
264
+
265
+ /* Pill-shaped buttons */
266
+ --sublime-radius-button: 9999px;
267
+
268
+ /* Softer shadows */
269
+ --sublime-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08);
270
+ }
271
+
272
+ .dark {
273
+ /* Lighter accent in dark mode for contrast */
274
+ --sublime-color-interactive-accent: #f472b6;
275
+ }
276
+ ```
277
+
278
+ ### Method 2: Complete Theme Override
279
+
280
+ Replace all tokens for a completely custom aesthetic:
281
+
282
+ ```css
283
+ @import "@sublimee/tokens"; /* Import defaults first */
284
+
285
+ :root {
286
+ /* Then override everything */
287
+ --sublime-color-surface-0: #fafaf9;
288
+ --sublime-color-surface-1: #ffffff;
289
+ /* ... etc */
290
+ }
291
+ ```
292
+
293
+ ### Method 3: Component-Specific Overrides
294
+
295
+ ```css
296
+ /* Only change buttons */
297
+ .btn-custom {
298
+ --sublime-color-interactive-primary: #your-color;
299
+ }
300
+ ```
301
+
302
+ ---
303
+
304
+ ## Usage with Tailwind
305
+
306
+ ### Arbitrary Values
307
+
308
+ ```tsx
309
+ <button className="bg-[var(--sublime-color-surface-1)]">
310
+ Click
311
+ </button>
312
+ ```
313
+
314
+ ### Custom Utilities (Recommended)
315
+
316
+ Add to your Tailwind config:
317
+
318
+ ```js
319
+ // tailwind.config.js
320
+ module.exports = {
321
+ theme: {
322
+ extend: {
323
+ colors: {
324
+ sublime: {
325
+ surface: {
326
+ 0: 'var(--sublime-color-surface-0)',
327
+ 1: 'var(--sublime-color-surface-1)',
328
+ },
329
+ text: {
330
+ primary: 'var(--sublime-color-text-primary)',
331
+ },
332
+ },
333
+ },
334
+ },
335
+ },
336
+ };
337
+ ```
338
+
339
+ Then use:
340
+
341
+ ```tsx
342
+ <button className="bg-sublime-surface-1 text-sublime-text-primary">
343
+ Click
344
+ </button>
345
+ ```
346
+
347
+ ---
348
+
349
+ ## Token Reference Table
350
+
351
+ See [TOKENS.md](./TOKENS.md) for the complete token reference.
352
+
353
+ ---
354
+
355
+ ## TypeScript
356
+
357
+ Token names can be typed for IDE autocomplete:
358
+
359
+ ```tsx
360
+ import type { SublimeColorToken, SublimeSpaceToken } from '@sublimee/tokens';
361
+
362
+ // Token names as string literals for type safety
363
+ const color: SublimeColorToken = '--sublime-color-surface-1';
364
+ ```
365
+
366
+ ---
367
+
368
+ ## License
369
+
370
+ MIT
@@ -0,0 +1,25 @@
1
+ /**
2
+ * @sublimee/tokens
3
+ * Semantic design tokens for the Sublime design system
4
+ *
5
+ * This file exports TypeScript types for token names.
6
+ * The actual CSS tokens are in tokens.css
7
+ */
8
+ type SublimeSurfaceToken = '--sublime-color-surface-0' | '--sublime-color-surface-0-hover' | '--sublime-color-surface-0-active' | '--sublime-color-surface-1' | '--sublime-color-surface-1-hover' | '--sublime-color-surface-1-active' | '--sublime-color-surface-2' | '--sublime-color-surface-2-hover' | '--sublime-color-surface-2-active' | '--sublime-color-surface-inset' | '--sublime-color-surface-inset-hover' | '--sublime-color-surface-inset-active';
9
+ type SublimeTextToken = '--sublime-color-text-primary' | '--sublime-color-text-primary-inverse' | '--sublime-color-text-secondary' | '--sublime-color-text-secondary-inverse' | '--sublime-color-text-muted' | '--sublime-color-text-muted-inverse' | '--sublime-color-text-disabled' | '--sublime-color-text-disabled-inverse' | '--sublime-color-text-accent' | '--sublime-color-text-accent-hover';
10
+ type SublimeBorderToken = '--sublime-color-border-primary' | '--sublime-color-border-primary-hover' | '--sublime-color-border-primary-active' | '--sublime-color-border-secondary' | '--sublime-color-border-accent' | '--sublime-color-border-error' | '--sublime-color-border-success';
11
+ type SublimeInteractiveToken = '--sublime-color-interactive-primary' | '--sublime-color-interactive-primary-hover' | '--sublime-color-interactive-primary-active' | '--sublime-color-interactive-primary-text' | '--sublime-color-interactive-secondary' | '--sublime-color-interactive-secondary-hover' | '--sublime-color-interactive-secondary-active' | '--sublime-color-interactive-secondary-text' | '--sublime-color-interactive-ghost' | '--sublime-color-interactive-ghost-hover' | '--sublime-color-interactive-ghost-active' | '--sublime-color-interactive-ghost-text' | '--sublime-color-interactive-accent' | '--sublime-color-interactive-accent-hover' | '--sublime-color-interactive-accent-active' | '--sublime-color-interactive-accent-text';
12
+ type SublimeStatusToken = '--sublime-color-status-error' | '--sublime-color-status-error-hover' | '--sublime-color-status-error-bg' | '--sublime-color-status-warning' | '--sublime-color-status-warning-hover' | '--sublime-color-status-warning-bg' | '--sublime-color-status-success' | '--sublime-color-status-success-hover' | '--sublime-color-status-success-bg' | '--sublime-color-status-info' | '--sublime-color-status-info-hover' | '--sublime-color-status-info-bg';
13
+ type SublimeFocusToken = '--sublime-color-focus-ring' | '--sublime-color-focus-ring-offset' | '--sublime-color-selection-bg' | '--sublime-color-selection-text';
14
+ type SublimeOverlayToken = '--sublime-color-overlay-light' | '--sublime-color-overlay-dark' | '--sublime-color-overlay-scrim';
15
+ type SublimeColorToken = SublimeSurfaceToken | SublimeTextToken | SublimeBorderToken | SublimeInteractiveToken | SublimeStatusToken | SublimeFocusToken | SublimeOverlayToken;
16
+ type SublimeSpaceToken = '--sublime-space-0' | '--sublime-space-1' | '--sublime-space-2' | '--sublime-space-3' | '--sublime-space-4' | '--sublime-space-5' | '--sublime-space-6' | '--sublime-space-8' | '--sublime-space-10' | '--sublime-space-12' | '--sublime-space-16' | '--sublime-space-20' | '--sublime-space-24' | '--sublime-space-button-x' | '--sublime-space-button-y' | '--sublime-space-input-x' | '--sublime-space-input-y' | '--sublime-space-card-padding' | '--sublime-size-icon-sm' | '--sublime-size-icon-md' | '--sublime-size-icon-lg' | '--sublime-size-button-height-sm' | '--sublime-size-button-height-md' | '--sublime-size-button-height-lg' | '--sublime-size-touch-target';
17
+ type SublimeShadowToken = '--sublime-shadow-none' | '--sublime-shadow-xs' | '--sublime-shadow-sm' | '--sublime-shadow-md' | '--sublime-shadow-lg' | '--sublime-shadow-xl' | '--sublime-shadow-button' | '--sublime-shadow-button-hover' | '--sublime-shadow-button-active' | '--sublime-shadow-card' | '--sublime-shadow-card-hover' | '--sublime-shadow-focus-ring';
18
+ type SublimeRadiusToken = '--sublime-radius-none' | '--sublime-radius-sm' | '--sublime-radius-md' | '--sublime-radius-lg' | '--sublime-radius-xl' | '--sublime-radius-2xl' | '--sublime-radius-full' | '--sublime-radius-button' | '--sublime-radius-input' | '--sublime-radius-card';
19
+ type SublimeFontToken = '--sublime-font-family-sans' | '--sublime-font-family-mono' | '--sublime-font-size-xs' | '--sublime-font-size-sm' | '--sublime-font-size-md' | '--sublime-font-size-lg' | '--sublime-font-size-xl' | '--sublime-font-weight-normal' | '--sublime-font-weight-medium' | '--sublime-font-weight-semibold' | '--sublime-font-weight-bold' | '--sublime-line-height-tight' | '--sublime-line-height-normal' | '--sublime-line-height-relaxed';
20
+ type SublimeDurationToken = '--sublime-duration-instant' | '--sublime-duration-fast' | '--sublime-duration-normal' | '--sublime-duration-slow' | '--sublime-duration-slower';
21
+ type SublimeEaseToken = '--sublime-ease-linear' | '--sublime-ease-in' | '--sublime-ease-out' | '--sublime-ease-in-out' | '--sublime-ease-spring';
22
+ type SublimeTransitionToken = '--sublime-transition-button' | '--sublime-transition-color' | '--sublime-transition-transform' | '--sublime-transition-shadow';
23
+ type SublimeToken = SublimeColorToken | SublimeSpaceToken | SublimeShadowToken | SublimeRadiusToken | SublimeFontToken | SublimeDurationToken | SublimeEaseToken | SublimeTransitionToken;
24
+
25
+ export type { SublimeBorderToken, SublimeColorToken, SublimeDurationToken, SublimeEaseToken, SublimeFocusToken, SublimeFontToken, SublimeInteractiveToken, SublimeOverlayToken, SublimeRadiusToken, SublimeShadowToken, SublimeSpaceToken, SublimeStatusToken, SublimeSurfaceToken, SublimeTextToken, SublimeToken, SublimeTransitionToken };
@@ -0,0 +1,25 @@
1
+ /**
2
+ * @sublimee/tokens
3
+ * Semantic design tokens for the Sublime design system
4
+ *
5
+ * This file exports TypeScript types for token names.
6
+ * The actual CSS tokens are in tokens.css
7
+ */
8
+ type SublimeSurfaceToken = '--sublime-color-surface-0' | '--sublime-color-surface-0-hover' | '--sublime-color-surface-0-active' | '--sublime-color-surface-1' | '--sublime-color-surface-1-hover' | '--sublime-color-surface-1-active' | '--sublime-color-surface-2' | '--sublime-color-surface-2-hover' | '--sublime-color-surface-2-active' | '--sublime-color-surface-inset' | '--sublime-color-surface-inset-hover' | '--sublime-color-surface-inset-active';
9
+ type SublimeTextToken = '--sublime-color-text-primary' | '--sublime-color-text-primary-inverse' | '--sublime-color-text-secondary' | '--sublime-color-text-secondary-inverse' | '--sublime-color-text-muted' | '--sublime-color-text-muted-inverse' | '--sublime-color-text-disabled' | '--sublime-color-text-disabled-inverse' | '--sublime-color-text-accent' | '--sublime-color-text-accent-hover';
10
+ type SublimeBorderToken = '--sublime-color-border-primary' | '--sublime-color-border-primary-hover' | '--sublime-color-border-primary-active' | '--sublime-color-border-secondary' | '--sublime-color-border-accent' | '--sublime-color-border-error' | '--sublime-color-border-success';
11
+ type SublimeInteractiveToken = '--sublime-color-interactive-primary' | '--sublime-color-interactive-primary-hover' | '--sublime-color-interactive-primary-active' | '--sublime-color-interactive-primary-text' | '--sublime-color-interactive-secondary' | '--sublime-color-interactive-secondary-hover' | '--sublime-color-interactive-secondary-active' | '--sublime-color-interactive-secondary-text' | '--sublime-color-interactive-ghost' | '--sublime-color-interactive-ghost-hover' | '--sublime-color-interactive-ghost-active' | '--sublime-color-interactive-ghost-text' | '--sublime-color-interactive-accent' | '--sublime-color-interactive-accent-hover' | '--sublime-color-interactive-accent-active' | '--sublime-color-interactive-accent-text';
12
+ type SublimeStatusToken = '--sublime-color-status-error' | '--sublime-color-status-error-hover' | '--sublime-color-status-error-bg' | '--sublime-color-status-warning' | '--sublime-color-status-warning-hover' | '--sublime-color-status-warning-bg' | '--sublime-color-status-success' | '--sublime-color-status-success-hover' | '--sublime-color-status-success-bg' | '--sublime-color-status-info' | '--sublime-color-status-info-hover' | '--sublime-color-status-info-bg';
13
+ type SublimeFocusToken = '--sublime-color-focus-ring' | '--sublime-color-focus-ring-offset' | '--sublime-color-selection-bg' | '--sublime-color-selection-text';
14
+ type SublimeOverlayToken = '--sublime-color-overlay-light' | '--sublime-color-overlay-dark' | '--sublime-color-overlay-scrim';
15
+ type SublimeColorToken = SublimeSurfaceToken | SublimeTextToken | SublimeBorderToken | SublimeInteractiveToken | SublimeStatusToken | SublimeFocusToken | SublimeOverlayToken;
16
+ type SublimeSpaceToken = '--sublime-space-0' | '--sublime-space-1' | '--sublime-space-2' | '--sublime-space-3' | '--sublime-space-4' | '--sublime-space-5' | '--sublime-space-6' | '--sublime-space-8' | '--sublime-space-10' | '--sublime-space-12' | '--sublime-space-16' | '--sublime-space-20' | '--sublime-space-24' | '--sublime-space-button-x' | '--sublime-space-button-y' | '--sublime-space-input-x' | '--sublime-space-input-y' | '--sublime-space-card-padding' | '--sublime-size-icon-sm' | '--sublime-size-icon-md' | '--sublime-size-icon-lg' | '--sublime-size-button-height-sm' | '--sublime-size-button-height-md' | '--sublime-size-button-height-lg' | '--sublime-size-touch-target';
17
+ type SublimeShadowToken = '--sublime-shadow-none' | '--sublime-shadow-xs' | '--sublime-shadow-sm' | '--sublime-shadow-md' | '--sublime-shadow-lg' | '--sublime-shadow-xl' | '--sublime-shadow-button' | '--sublime-shadow-button-hover' | '--sublime-shadow-button-active' | '--sublime-shadow-card' | '--sublime-shadow-card-hover' | '--sublime-shadow-focus-ring';
18
+ type SublimeRadiusToken = '--sublime-radius-none' | '--sublime-radius-sm' | '--sublime-radius-md' | '--sublime-radius-lg' | '--sublime-radius-xl' | '--sublime-radius-2xl' | '--sublime-radius-full' | '--sublime-radius-button' | '--sublime-radius-input' | '--sublime-radius-card';
19
+ type SublimeFontToken = '--sublime-font-family-sans' | '--sublime-font-family-mono' | '--sublime-font-size-xs' | '--sublime-font-size-sm' | '--sublime-font-size-md' | '--sublime-font-size-lg' | '--sublime-font-size-xl' | '--sublime-font-weight-normal' | '--sublime-font-weight-medium' | '--sublime-font-weight-semibold' | '--sublime-font-weight-bold' | '--sublime-line-height-tight' | '--sublime-line-height-normal' | '--sublime-line-height-relaxed';
20
+ type SublimeDurationToken = '--sublime-duration-instant' | '--sublime-duration-fast' | '--sublime-duration-normal' | '--sublime-duration-slow' | '--sublime-duration-slower';
21
+ type SublimeEaseToken = '--sublime-ease-linear' | '--sublime-ease-in' | '--sublime-ease-out' | '--sublime-ease-in-out' | '--sublime-ease-spring';
22
+ type SublimeTransitionToken = '--sublime-transition-button' | '--sublime-transition-color' | '--sublime-transition-transform' | '--sublime-transition-shadow';
23
+ type SublimeToken = SublimeColorToken | SublimeSpaceToken | SublimeShadowToken | SublimeRadiusToken | SublimeFontToken | SublimeDurationToken | SublimeEaseToken | SublimeTransitionToken;
24
+
25
+ export type { SublimeBorderToken, SublimeColorToken, SublimeDurationToken, SublimeEaseToken, SublimeFocusToken, SublimeFontToken, SublimeInteractiveToken, SublimeOverlayToken, SublimeRadiusToken, SublimeShadowToken, SublimeSpaceToken, SublimeStatusToken, SublimeSurfaceToken, SublimeTextToken, SublimeToken, SublimeTransitionToken };
package/dist/index.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __copyProps = (to, from, except, desc) => {
7
+ if (from && typeof from === "object" || typeof from === "function") {
8
+ for (let key of __getOwnPropNames(from))
9
+ if (!__hasOwnProp.call(to, key) && key !== except)
10
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
+ }
12
+ return to;
13
+ };
14
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/index.ts
17
+ var index_exports = {};
18
+ module.exports = __toCommonJS(index_exports);
package/dist/index.mjs ADDED
File without changes