@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 +21 -0
- package/README.md +370 -0
- package/dist/index.d.mts +25 -0
- package/dist/index.d.ts +25 -0
- package/dist/index.js +18 -0
- package/dist/index.mjs +0 -0
- package/dist/tokens.css +449 -0
- package/package.json +49 -0
- package/src/index.ts +202 -0
- package/src/tokens.css +449 -0
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
|
package/dist/index.d.mts
ADDED
|
@@ -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.d.ts
ADDED
|
@@ -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
|