@loworbitstudio/visor-core 0.3.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 (9) hide show
  1. package/README.md +179 -0
  2. package/dist/index.css +8 -0
  3. package/dist/primitives.css +194 -0
  4. package/dist/semantic.css +170 -0
  5. package/dist/themes/dark.css +272 -0
  6. package/dist/themes/light.css +122 -0
  7. package/dist/tokens.css +769 -0
  8. package/package.json +51 -0
  9. package/src/types.ts +303 -0
package/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "@loworbitstudio/visor-core",
3
+ "version": "0.3.0",
4
+ "description": "Design tokens for the Visor design system — CSS custom properties for theming.",
5
+ "type": "module",
6
+ "main": "./dist/index.css",
7
+ "exports": {
8
+ ".": "./dist/index.css",
9
+ "./css": "./dist/index.css",
10
+ "./tokens": "./dist/tokens.css",
11
+ "./primitives": "./dist/primitives.css",
12
+ "./semantic": "./dist/semantic.css",
13
+ "./themes/light": "./dist/themes/light.css",
14
+ "./themes/dark": "./dist/themes/dark.css",
15
+ "./types": "./src/types.ts"
16
+ },
17
+ "scripts": {
18
+ "build": "tsx src/generate/generate-css.ts",
19
+ "validate": "tsx src/generate/validate.ts",
20
+ "typecheck": "tsc --noEmit",
21
+ "test": "vitest run"
22
+ },
23
+ "files": [
24
+ "dist/",
25
+ "src/types.ts"
26
+ ],
27
+ "keywords": [
28
+ "design-tokens",
29
+ "design-system",
30
+ "visor",
31
+ "css-variables"
32
+ ],
33
+ "license": "MIT",
34
+ "repository": {
35
+ "type": "git",
36
+ "url": "https://github.com/low-orbit-studio/visor.git"
37
+ },
38
+ "homepage": "https://visor.loworbit.studio",
39
+ "bugs": {
40
+ "url": "https://github.com/low-orbit-studio/visor/issues"
41
+ },
42
+ "publishConfig": {
43
+ "access": "public"
44
+ },
45
+ "devDependencies": {
46
+ "@types/node": "^22.0.0",
47
+ "tsx": "^4.19.2",
48
+ "typescript": "^5.7.2",
49
+ "vitest": "^4.1.2"
50
+ }
51
+ }
package/src/types.ts ADDED
@@ -0,0 +1,303 @@
1
+ /**
2
+ * @loworbitstudio/visor-core — Type Exports
3
+ *
4
+ * TypeScript types and constants for all token names.
5
+ * Provides autocomplete when referencing token names programmatically.
6
+ *
7
+ * Usage:
8
+ * import { TOKEN_TEXT_PRIMARY } from "@loworbitstudio/visor-core/types"
9
+ * element.style.setProperty(TOKEN_TEXT_PRIMARY, "#000")
10
+ */
11
+
12
+ // ============================================================
13
+ // Primitive Token Constants
14
+ // ============================================================
15
+
16
+ // Colors
17
+ export const TOKEN_COLOR_GRAY_50 = "--color-gray-50" as const;
18
+ export const TOKEN_COLOR_GRAY_100 = "--color-gray-100" as const;
19
+ export const TOKEN_COLOR_GRAY_200 = "--color-gray-200" as const;
20
+ export const TOKEN_COLOR_GRAY_300 = "--color-gray-300" as const;
21
+ export const TOKEN_COLOR_GRAY_400 = "--color-gray-400" as const;
22
+ export const TOKEN_COLOR_GRAY_500 = "--color-gray-500" as const;
23
+ export const TOKEN_COLOR_GRAY_600 = "--color-gray-600" as const;
24
+ export const TOKEN_COLOR_GRAY_700 = "--color-gray-700" as const;
25
+ export const TOKEN_COLOR_GRAY_800 = "--color-gray-800" as const;
26
+ export const TOKEN_COLOR_GRAY_900 = "--color-gray-900" as const;
27
+ export const TOKEN_COLOR_GRAY_950 = "--color-gray-950" as const;
28
+ export const TOKEN_COLOR_WHITE = "--color-white" as const;
29
+ export const TOKEN_COLOR_BLACK = "--color-black" as const;
30
+
31
+ export const TOKEN_COLOR_BLUE_50 = "--color-blue-50" as const;
32
+ export const TOKEN_COLOR_BLUE_100 = "--color-blue-100" as const;
33
+ export const TOKEN_COLOR_BLUE_200 = "--color-blue-200" as const;
34
+ export const TOKEN_COLOR_BLUE_300 = "--color-blue-300" as const;
35
+ export const TOKEN_COLOR_BLUE_400 = "--color-blue-400" as const;
36
+ export const TOKEN_COLOR_BLUE_500 = "--color-blue-500" as const;
37
+ export const TOKEN_COLOR_BLUE_600 = "--color-blue-600" as const;
38
+ export const TOKEN_COLOR_BLUE_700 = "--color-blue-700" as const;
39
+ export const TOKEN_COLOR_BLUE_800 = "--color-blue-800" as const;
40
+ export const TOKEN_COLOR_BLUE_900 = "--color-blue-900" as const;
41
+
42
+ export const TOKEN_COLOR_GREEN_50 = "--color-green-50" as const;
43
+ export const TOKEN_COLOR_GREEN_500 = "--color-green-500" as const;
44
+ export const TOKEN_COLOR_GREEN_600 = "--color-green-600" as const;
45
+ export const TOKEN_COLOR_GREEN_700 = "--color-green-700" as const;
46
+
47
+ export const TOKEN_COLOR_AMBER_50 = "--color-amber-50" as const;
48
+ export const TOKEN_COLOR_AMBER_500 = "--color-amber-500" as const;
49
+ export const TOKEN_COLOR_AMBER_600 = "--color-amber-600" as const;
50
+ export const TOKEN_COLOR_AMBER_700 = "--color-amber-700" as const;
51
+
52
+ export const TOKEN_COLOR_RED_50 = "--color-red-50" as const;
53
+ export const TOKEN_COLOR_RED_500 = "--color-red-500" as const;
54
+ export const TOKEN_COLOR_RED_600 = "--color-red-600" as const;
55
+ export const TOKEN_COLOR_RED_700 = "--color-red-700" as const;
56
+
57
+ export const TOKEN_COLOR_SKY_50 = "--color-sky-50" as const;
58
+ export const TOKEN_COLOR_SKY_500 = "--color-sky-500" as const;
59
+ export const TOKEN_COLOR_SKY_600 = "--color-sky-600" as const;
60
+ export const TOKEN_COLOR_SKY_700 = "--color-sky-700" as const;
61
+
62
+ // Spacing
63
+ export const TOKEN_SPACING_0 = "--spacing-0" as const;
64
+ export const TOKEN_SPACING_1 = "--spacing-1" as const;
65
+ export const TOKEN_SPACING_2 = "--spacing-2" as const;
66
+ export const TOKEN_SPACING_3 = "--spacing-3" as const;
67
+ export const TOKEN_SPACING_3_5 = "--spacing-3_5" as const;
68
+ export const TOKEN_SPACING_4 = "--spacing-4" as const;
69
+ export const TOKEN_SPACING_4_5 = "--spacing-4_5" as const;
70
+ export const TOKEN_SPACING_5 = "--spacing-5" as const;
71
+ export const TOKEN_SPACING_6 = "--spacing-6" as const;
72
+ export const TOKEN_SPACING_8 = "--spacing-8" as const;
73
+ export const TOKEN_SPACING_10 = "--spacing-10" as const;
74
+ export const TOKEN_SPACING_12 = "--spacing-12" as const;
75
+ export const TOKEN_SPACING_16 = "--spacing-16" as const;
76
+ export const TOKEN_SPACING_20 = "--spacing-20" as const;
77
+ export const TOKEN_SPACING_24 = "--spacing-24" as const;
78
+
79
+ // Border Radius
80
+ export const TOKEN_RADIUS_NONE = "--radius-none" as const;
81
+ export const TOKEN_RADIUS_SM = "--radius-sm" as const;
82
+ export const TOKEN_RADIUS_MD = "--radius-md" as const;
83
+ export const TOKEN_RADIUS_LG = "--radius-lg" as const;
84
+ export const TOKEN_RADIUS_XL = "--radius-xl" as const;
85
+ export const TOKEN_RADIUS_2XL = "--radius-2xl" as const;
86
+ export const TOKEN_RADIUS_3XL = "--radius-3xl" as const;
87
+ export const TOKEN_RADIUS_FULL = "--radius-full" as const;
88
+
89
+ // Font Sizes
90
+ export const TOKEN_FONT_SIZE_XS = "--font-size-xs" as const;
91
+ export const TOKEN_FONT_SIZE_SM = "--font-size-sm" as const;
92
+ export const TOKEN_FONT_SIZE_BASE = "--font-size-base" as const;
93
+ export const TOKEN_FONT_SIZE_LG = "--font-size-lg" as const;
94
+ export const TOKEN_FONT_SIZE_XL = "--font-size-xl" as const;
95
+ export const TOKEN_FONT_SIZE_2XL = "--font-size-2xl" as const;
96
+ export const TOKEN_FONT_SIZE_3XL = "--font-size-3xl" as const;
97
+ export const TOKEN_FONT_SIZE_4XL = "--font-size-4xl" as const;
98
+
99
+ // Font Weights
100
+ export const TOKEN_FONT_WEIGHT_NORMAL = "--font-weight-normal" as const;
101
+ export const TOKEN_FONT_WEIGHT_MEDIUM = "--font-weight-medium" as const;
102
+ export const TOKEN_FONT_WEIGHT_SEMIBOLD = "--font-weight-semibold" as const;
103
+ export const TOKEN_FONT_WEIGHT_BOLD = "--font-weight-bold" as const;
104
+
105
+ // Shadows
106
+ export const TOKEN_SHADOW_XS = "--shadow-xs" as const;
107
+ export const TOKEN_SHADOW_SM = "--shadow-sm" as const;
108
+ export const TOKEN_SHADOW_MD = "--shadow-md" as const;
109
+ export const TOKEN_SHADOW_LG = "--shadow-lg" as const;
110
+ export const TOKEN_SHADOW_XL = "--shadow-xl" as const;
111
+
112
+ // Overlay
113
+ export const TOKEN_OVERLAY_BG = "--overlay-bg" as const;
114
+
115
+ // Focus Ring
116
+ export const TOKEN_FOCUS_RING_WIDTH = "--focus-ring-width" as const;
117
+ export const TOKEN_FOCUS_RING_OFFSET = "--focus-ring-offset" as const;
118
+
119
+ // Z-Index
120
+ export const TOKEN_Z_BASE = "--z-base" as const;
121
+ export const TOKEN_Z_RAISED = "--z-raised" as const;
122
+ export const TOKEN_Z_DROPDOWN = "--z-dropdown" as const;
123
+ export const TOKEN_Z_STICKY = "--z-sticky" as const;
124
+ export const TOKEN_Z_MODAL = "--z-modal" as const;
125
+ export const TOKEN_Z_POPOVER = "--z-popover" as const;
126
+ export const TOKEN_Z_TOAST = "--z-toast" as const;
127
+
128
+ // ============================================================
129
+ // Semantic Token Constants
130
+ // ============================================================
131
+
132
+ // Text
133
+ export const TOKEN_TEXT_PRIMARY = "--text-primary" as const;
134
+ export const TOKEN_TEXT_SECONDARY = "--text-secondary" as const;
135
+ export const TOKEN_TEXT_TERTIARY = "--text-tertiary" as const;
136
+ export const TOKEN_TEXT_DISABLED = "--text-disabled" as const;
137
+ export const TOKEN_TEXT_INVERSE = "--text-inverse" as const;
138
+ export const TOKEN_TEXT_INVERSE_SECONDARY = "--text-inverse-secondary" as const;
139
+ export const TOKEN_TEXT_LINK = "--text-link" as const;
140
+ export const TOKEN_TEXT_LINK_HOVER = "--text-link-hover" as const;
141
+ export const TOKEN_TEXT_SUCCESS = "--text-success" as const;
142
+ export const TOKEN_TEXT_WARNING = "--text-warning" as const;
143
+ export const TOKEN_TEXT_ERROR = "--text-error" as const;
144
+ export const TOKEN_TEXT_INFO = "--text-info" as const;
145
+
146
+ // Surface
147
+ export const TOKEN_SURFACE_PAGE = "--surface-page" as const;
148
+ export const TOKEN_SURFACE_CARD = "--surface-card" as const;
149
+ export const TOKEN_SURFACE_SUBTLE = "--surface-subtle" as const;
150
+ export const TOKEN_SURFACE_MUTED = "--surface-muted" as const;
151
+ export const TOKEN_SURFACE_OVERLAY = "--surface-overlay" as const;
152
+ export const TOKEN_SURFACE_INTERACTIVE_DEFAULT = "--surface-interactive-default" as const;
153
+ export const TOKEN_SURFACE_INTERACTIVE_HOVER = "--surface-interactive-hover" as const;
154
+ export const TOKEN_SURFACE_INTERACTIVE_ACTIVE = "--surface-interactive-active" as const;
155
+ export const TOKEN_SURFACE_INTERACTIVE_DISABLED = "--surface-interactive-disabled" as const;
156
+ export const TOKEN_SURFACE_ACCENT_SUBTLE = "--surface-accent-subtle" as const;
157
+ export const TOKEN_SURFACE_ACCENT_DEFAULT = "--surface-accent-default" as const;
158
+ export const TOKEN_SURFACE_ACCENT_STRONG = "--surface-accent-strong" as const;
159
+ export const TOKEN_SURFACE_SUCCESS_SUBTLE = "--surface-success-subtle" as const;
160
+ export const TOKEN_SURFACE_SUCCESS_DEFAULT = "--surface-success-default" as const;
161
+ export const TOKEN_SURFACE_WARNING_SUBTLE = "--surface-warning-subtle" as const;
162
+ export const TOKEN_SURFACE_WARNING_DEFAULT = "--surface-warning-default" as const;
163
+ export const TOKEN_SURFACE_ERROR_SUBTLE = "--surface-error-subtle" as const;
164
+ export const TOKEN_SURFACE_ERROR_DEFAULT = "--surface-error-default" as const;
165
+ export const TOKEN_SURFACE_INFO_SUBTLE = "--surface-info-subtle" as const;
166
+ export const TOKEN_SURFACE_INFO_DEFAULT = "--surface-info-default" as const;
167
+
168
+ // Border
169
+ export const TOKEN_BORDER_DEFAULT = "--border-default" as const;
170
+ export const TOKEN_BORDER_MUTED = "--border-muted" as const;
171
+ export const TOKEN_BORDER_STRONG = "--border-strong" as const;
172
+ export const TOKEN_BORDER_FOCUS = "--border-focus" as const;
173
+ export const TOKEN_BORDER_DISABLED = "--border-disabled" as const;
174
+ export const TOKEN_BORDER_SUCCESS = "--border-success" as const;
175
+ export const TOKEN_BORDER_WARNING = "--border-warning" as const;
176
+ export const TOKEN_BORDER_ERROR = "--border-error" as const;
177
+ export const TOKEN_BORDER_INFO = "--border-info" as const;
178
+
179
+ // Interactive
180
+ export const TOKEN_INTERACTIVE_PRIMARY_BG = "--interactive-primary-bg" as const;
181
+ export const TOKEN_INTERACTIVE_PRIMARY_BG_HOVER = "--interactive-primary-bg-hover" as const;
182
+ export const TOKEN_INTERACTIVE_PRIMARY_BG_ACTIVE = "--interactive-primary-bg-active" as const;
183
+ export const TOKEN_INTERACTIVE_PRIMARY_TEXT = "--interactive-primary-text" as const;
184
+ export const TOKEN_INTERACTIVE_SECONDARY_BG = "--interactive-secondary-bg" as const;
185
+ export const TOKEN_INTERACTIVE_SECONDARY_BG_HOVER = "--interactive-secondary-bg-hover" as const;
186
+ export const TOKEN_INTERACTIVE_SECONDARY_BG_ACTIVE = "--interactive-secondary-bg-active" as const;
187
+ export const TOKEN_INTERACTIVE_SECONDARY_TEXT = "--interactive-secondary-text" as const;
188
+ export const TOKEN_INTERACTIVE_SECONDARY_BORDER = "--interactive-secondary-border" as const;
189
+ export const TOKEN_INTERACTIVE_DESTRUCTIVE_BG = "--interactive-destructive-bg" as const;
190
+ export const TOKEN_INTERACTIVE_DESTRUCTIVE_BG_HOVER = "--interactive-destructive-bg-hover" as const;
191
+ export const TOKEN_INTERACTIVE_DESTRUCTIVE_TEXT = "--interactive-destructive-text" as const;
192
+ export const TOKEN_INTERACTIVE_GHOST_BG = "--interactive-ghost-bg" as const;
193
+ export const TOKEN_INTERACTIVE_GHOST_BG_HOVER = "--interactive-ghost-bg-hover" as const;
194
+
195
+ // ============================================================
196
+ // Token Name Union Types
197
+ // ============================================================
198
+
199
+ export type PrimitiveColorToken =
200
+ | typeof TOKEN_COLOR_GRAY_50
201
+ | typeof TOKEN_COLOR_GRAY_100
202
+ | typeof TOKEN_COLOR_GRAY_200
203
+ | typeof TOKEN_COLOR_GRAY_300
204
+ | typeof TOKEN_COLOR_GRAY_400
205
+ | typeof TOKEN_COLOR_GRAY_500
206
+ | typeof TOKEN_COLOR_GRAY_600
207
+ | typeof TOKEN_COLOR_GRAY_700
208
+ | typeof TOKEN_COLOR_GRAY_800
209
+ | typeof TOKEN_COLOR_GRAY_900
210
+ | typeof TOKEN_COLOR_GRAY_950
211
+ | typeof TOKEN_COLOR_WHITE
212
+ | typeof TOKEN_COLOR_BLACK
213
+ | typeof TOKEN_COLOR_BLUE_50
214
+ | typeof TOKEN_COLOR_BLUE_100
215
+ | typeof TOKEN_COLOR_BLUE_200
216
+ | typeof TOKEN_COLOR_BLUE_300
217
+ | typeof TOKEN_COLOR_BLUE_400
218
+ | typeof TOKEN_COLOR_BLUE_500
219
+ | typeof TOKEN_COLOR_BLUE_600
220
+ | typeof TOKEN_COLOR_BLUE_700
221
+ | typeof TOKEN_COLOR_BLUE_800
222
+ | typeof TOKEN_COLOR_BLUE_900
223
+ | typeof TOKEN_COLOR_GREEN_50
224
+ | typeof TOKEN_COLOR_GREEN_500
225
+ | typeof TOKEN_COLOR_GREEN_600
226
+ | typeof TOKEN_COLOR_GREEN_700
227
+ | typeof TOKEN_COLOR_AMBER_50
228
+ | typeof TOKEN_COLOR_AMBER_500
229
+ | typeof TOKEN_COLOR_AMBER_600
230
+ | typeof TOKEN_COLOR_AMBER_700
231
+ | typeof TOKEN_COLOR_RED_50
232
+ | typeof TOKEN_COLOR_RED_500
233
+ | typeof TOKEN_COLOR_RED_600
234
+ | typeof TOKEN_COLOR_RED_700
235
+ | typeof TOKEN_COLOR_SKY_50
236
+ | typeof TOKEN_COLOR_SKY_500
237
+ | typeof TOKEN_COLOR_SKY_600
238
+ | typeof TOKEN_COLOR_SKY_700;
239
+
240
+ export type TextToken =
241
+ | typeof TOKEN_TEXT_PRIMARY
242
+ | typeof TOKEN_TEXT_SECONDARY
243
+ | typeof TOKEN_TEXT_TERTIARY
244
+ | typeof TOKEN_TEXT_DISABLED
245
+ | typeof TOKEN_TEXT_INVERSE
246
+ | typeof TOKEN_TEXT_INVERSE_SECONDARY
247
+ | typeof TOKEN_TEXT_LINK
248
+ | typeof TOKEN_TEXT_LINK_HOVER
249
+ | typeof TOKEN_TEXT_SUCCESS
250
+ | typeof TOKEN_TEXT_WARNING
251
+ | typeof TOKEN_TEXT_ERROR
252
+ | typeof TOKEN_TEXT_INFO;
253
+
254
+ export type SurfaceToken =
255
+ | typeof TOKEN_SURFACE_PAGE
256
+ | typeof TOKEN_SURFACE_CARD
257
+ | typeof TOKEN_SURFACE_SUBTLE
258
+ | typeof TOKEN_SURFACE_MUTED
259
+ | typeof TOKEN_SURFACE_OVERLAY
260
+ | typeof TOKEN_SURFACE_INTERACTIVE_DEFAULT
261
+ | typeof TOKEN_SURFACE_INTERACTIVE_HOVER
262
+ | typeof TOKEN_SURFACE_INTERACTIVE_ACTIVE
263
+ | typeof TOKEN_SURFACE_INTERACTIVE_DISABLED
264
+ | typeof TOKEN_SURFACE_ACCENT_SUBTLE
265
+ | typeof TOKEN_SURFACE_ACCENT_DEFAULT
266
+ | typeof TOKEN_SURFACE_ACCENT_STRONG
267
+ | typeof TOKEN_SURFACE_SUCCESS_SUBTLE
268
+ | typeof TOKEN_SURFACE_SUCCESS_DEFAULT
269
+ | typeof TOKEN_SURFACE_WARNING_SUBTLE
270
+ | typeof TOKEN_SURFACE_WARNING_DEFAULT
271
+ | typeof TOKEN_SURFACE_ERROR_SUBTLE
272
+ | typeof TOKEN_SURFACE_ERROR_DEFAULT
273
+ | typeof TOKEN_SURFACE_INFO_SUBTLE
274
+ | typeof TOKEN_SURFACE_INFO_DEFAULT;
275
+
276
+ export type BorderToken =
277
+ | typeof TOKEN_BORDER_DEFAULT
278
+ | typeof TOKEN_BORDER_MUTED
279
+ | typeof TOKEN_BORDER_STRONG
280
+ | typeof TOKEN_BORDER_FOCUS
281
+ | typeof TOKEN_BORDER_DISABLED
282
+ | typeof TOKEN_BORDER_SUCCESS
283
+ | typeof TOKEN_BORDER_WARNING
284
+ | typeof TOKEN_BORDER_ERROR
285
+ | typeof TOKEN_BORDER_INFO;
286
+
287
+ export type InteractiveToken =
288
+ | typeof TOKEN_INTERACTIVE_PRIMARY_BG
289
+ | typeof TOKEN_INTERACTIVE_PRIMARY_BG_HOVER
290
+ | typeof TOKEN_INTERACTIVE_PRIMARY_BG_ACTIVE
291
+ | typeof TOKEN_INTERACTIVE_PRIMARY_TEXT
292
+ | typeof TOKEN_INTERACTIVE_SECONDARY_BG
293
+ | typeof TOKEN_INTERACTIVE_SECONDARY_BG_HOVER
294
+ | typeof TOKEN_INTERACTIVE_SECONDARY_BG_ACTIVE
295
+ | typeof TOKEN_INTERACTIVE_SECONDARY_TEXT
296
+ | typeof TOKEN_INTERACTIVE_SECONDARY_BORDER
297
+ | typeof TOKEN_INTERACTIVE_DESTRUCTIVE_BG
298
+ | typeof TOKEN_INTERACTIVE_DESTRUCTIVE_BG_HOVER
299
+ | typeof TOKEN_INTERACTIVE_DESTRUCTIVE_TEXT
300
+ | typeof TOKEN_INTERACTIVE_GHOST_BG
301
+ | typeof TOKEN_INTERACTIVE_GHOST_BG_HOVER;
302
+
303
+ export type VisorToken = PrimitiveColorToken | TextToken | SurfaceToken | BorderToken | InteractiveToken;