@cloudnyx/design-tokens 0.1.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 (6) hide show
  1. package/dist/tailwind-preset.js +132 -0
  2. package/dist/tokens.css +336 -0
  3. package/dist/tokens.d.ts +6 -0
  4. package/dist/tokens.js +537 -0
  5. package/dist/tokens.json +388 -0
  6. package/package.json +36 -0
package/dist/tailwind-preset.js ADDED
@@ -0,0 +1,132 @@
1
+ // Crystal Glasshouse Tailwind Preset — Auto-generated
2
+
3
+ /** @type {import('tailwindcss').Config} */
4
+ export default {
5
+ "theme": {
6
+ "extend": {
7
+ "colors": {
8
+ "accent": "var(--c-accent)",
9
+ "purple": "var(--c-purple)",
10
+ "tech": "var(--c-tech)",
11
+ "life": "var(--c-life)",
12
+ "bg": "var(--c-bg)",
13
+ "surface": "var(--c-surface)",
14
+ "border": "var(--c-border)",
15
+ "text-1": "var(--c-text-1)",
16
+ "text-2": "var(--c-text-2)",
17
+ "divider": "var(--c-divider)",
18
+ "success": "var(--c-success)",
19
+ "warning": "var(--c-warning)",
20
+ "error": "var(--c-error)",
21
+ "info": "var(--c-info)",
22
+ "paper": "var(--paper)",
23
+ "rose-deep": "var(--rose-deep)",
24
+ "purple-deep": "var(--purple-deep)",
25
+ "rose-light": "var(--rose-light)",
26
+ "violet-light": "var(--violet-light)",
27
+ "rose-bright": "var(--rose-bright)",
28
+ "sky-light": "var(--sky-light)",
29
+ "rose-mid": "var(--rose-mid)",
30
+ "rose-warm": "var(--rose-warm)",
31
+ "violet-warm": "var(--violet-warm)",
32
+ "purple-mid": "var(--purple-mid)",
33
+ "pink-pale": "var(--pink-pale)",
34
+ "violet-pale": "var(--violet-pale)",
35
+ "discover-bg": "var(--discover-bg)",
36
+ "rose-deep-light": "var(--rose-deep-light)",
37
+ "online": "var(--online)"
38
+ },
39
+ "spacing": {
40
+ "1": "1px",
41
+ "3": "3px",
42
+ "2xs": "2px",
43
+ "xs": "4px",
44
+ "xsh": "5px",
45
+ "sm-": "6px",
46
+ "sm": "8px",
47
+ "smh": "9px",
48
+ "sm2": "10px",
49
+ "sm2h": "11px",
50
+ "md-": "12px",
51
+ "md": "16px",
52
+ "mdh": "18px",
53
+ "lg-": "20px",
54
+ "lg": "24px",
55
+ "lgh": "26px",
56
+ "xl-": "28px",
57
+ "xl": "32px",
58
+ "xlh": "36px",
59
+ "2xl-": "40px",
60
+ "2xl": "48px",
61
+ "2xlh": "52px",
62
+ "3xl-": "56px",
63
+ "3xl": "64px",
64
+ "4xl": "80px",
65
+ "5xl": "96px",
66
+ "6xl": "120px"
67
+ },
68
+ "borderRadius": {
69
+ "2xs": "2px",
70
+ "xs": "4px",
71
+ "sm": "6px",
72
+ "md": "8px",
73
+ "lg": "10px",
74
+ "xl": "12px",
75
+ "2xl": "14px",
76
+ "3xl": "16px",
77
+ "4xl": "18px",
78
+ "5xl": "20px",
79
+ "6xl": "22px",
80
+ "full": "999px"
81
+ },
82
+ "zIndex": {
83
+ "base": "1",
84
+ "content": "4",
85
+ "content-high": "20",
86
+ "brand": "30",
87
+ "backdrop": "40",
88
+ "nav": "50",
89
+ "overlay": "60",
90
+ "modal": "70",
91
+ "toast": "80",
92
+ "transition": "200"
93
+ },
94
+ "fontWeight": {
95
+ "regular": "400",
96
+ "medium": "500",
97
+ "semibold": "600",
98
+ "bold": "700",
99
+ "extrabold": "800"
100
+ },
101
+ "fontFamily": {
102
+ "serif-cn": "\"Noto Serif SC\", serif",
103
+ "display": "\"Instrument Serif\", \"Noto Serif SC\", Georgia, serif",
104
+ "body": "\"Outfit\", \"Noto Sans SC\", system-ui, sans-serif"
105
+ },
106
+ "transitionTimingFunction": {
107
+ "viscous": "cubic-bezier(0.16, 1, 0.3, 1)",
108
+ "soft": "cubic-bezier(0.22, 0.61, 0.3, 1)",
109
+ "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
110
+ },
111
+ "transitionDuration": {
112
+ "micro": "80ms",
113
+ "fast": "150ms",
114
+ "normal": "250ms",
115
+ "slow": "400ms",
116
+ "spring": "500ms"
117
+ },
118
+ "boxShadow": {
119
+ "low": "0 4px 12px rgba(0, 0, 0, 0.06)",
120
+ "medium": "0 8px 24px rgba(0, 0, 0, 0.08)",
121
+ "high": "0 12px 40px rgba(0, 0, 0, 0.2)",
122
+ "rest": "0 4px 20px rgba(44, 42, 41, 0.04), 0 1px 3px rgba(44, 42, 41, 0.02)",
123
+ "hover": "0 8px 32px rgba(222, 135, 166, 0.12), 0 2px 6px rgba(44, 42, 41, 0.03)",
124
+ "float": "0 20px 48px rgba(0, 0, 0, 0.14)",
125
+ "image": "0 6px 24px rgba(44, 42, 41, 0.08)",
126
+ "soft": "0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 4px 16px -4px rgba(0, 0, 0, 0.06)",
127
+ "card-medium": "0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.08)",
128
+ "glow": "0 0 20px 2px rgba(236, 72, 153, 0.15)"
129
+ }
130
+ }
131
+ }
132
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,336 @@
1
+ /* Crystal Glasshouse Design Tokens — Auto-generated */
2
+
3
+ :root {
4
+ --c-accent: #DE87A6;
5
+ --c-accent-rgb: 222, 135, 166;
6
+ --c-purple: #A892E0;
7
+ --c-purple-rgb: 168, 146, 224;
8
+ --c-tech: #88C2D4;
9
+ --c-tech-rgb: 136, 194, 212;
10
+ --c-life: #F4BC85;
11
+ --c-life-rgb: 244, 188, 133;
12
+ --c-bg: #fdfbfe;
13
+ --c-bg-rgb: 253, 251, 254;
14
+ --c-surface: rgba(255, 255, 255, 0.78);
15
+ --c-border: rgba(255, 255, 255, 0.6);
16
+ --c-text-1: #334155;
17
+ --c-text-2: #64748b;
18
+ --c-divider: #f1f5f9;
19
+ --c-success: #34d399;
20
+ --c-warning: #f4bc85;
21
+ --c-error: #ef4444;
22
+ --c-info: #88c2d4;
23
+ --paper: #fdfbfe;
24
+ --rose-soft: 222, 135, 166;
25
+ --violet-soft: 168, 146, 224;
26
+ --sky-soft: 136, 194, 212;
27
+ --rose-deep: #c76a92;
28
+ --rose-deep-rgb: 199, 106, 146;
29
+ --purple-deep: #8b6bf0;
30
+ --purple-deep-rgb: 139, 107, 240;
31
+ --rose-light: #f9a8d4;
32
+ --rose-light-rgb: 249, 168, 212;
33
+ --violet-light: #c084fc;
34
+ --violet-light-rgb: 192, 132, 252;
35
+ --rose-bright: #f472b6;
36
+ --rose-bright-rgb: 244, 114, 182;
37
+ --sky-light: #7dd3fc;
38
+ --sky-light-rgb: 125, 211, 252;
39
+ --rose-mid: #f7b2d0;
40
+ --rose-warm: #ef93bd;
41
+ --violet-warm: #d98ed8;
42
+ --purple-mid: #c4a3f0;
43
+ --pink-pale: #ffd6e6;
44
+ --violet-pale: #e9d5ff;
45
+ --discover-bg: #f5f0fa;
46
+ --rose-deep-light: #f0b9d0;
47
+ --online: #34d399;
48
+ --background: 0 0% 100%;
49
+ --foreground: 222.2 84% 4.9%;
50
+ --primary: 330 81% 60%;
51
+ --primary-foreground: 210 40% 98%;
52
+ --secondary: 210 40% 96.1%;
53
+ --secondary-foreground: 222.2 47.4% 11.2%;
54
+ --accent: 330 81% 96%;
55
+ --accent-foreground: 222.2 47.4% 11.2%;
56
+ --card: 0 0% 100%;
57
+ --card-foreground: 222.2 84% 4.9%;
58
+ --border: 214.3 31.8% 91.4%;
59
+ --input: 214.3 31.8% 91.4%;
60
+ --ring: 330 81% 60%;
61
+ --destructive: 0 84.2% 60.2%;
62
+ --destructive-foreground: 210 40% 98%;
63
+ --muted: 210 40% 96.1%;
64
+ --muted-foreground: 215.4 16.3% 46.9%;
65
+ --glass-blur-subtle: blur(8px);
66
+ --glass-blur: blur(16px);
67
+ --glass-blur-medium: blur(20px);
68
+ --glass-blur-strong: blur(24px);
69
+ --glass-blur-card: blur(28px);
70
+ --glass-card-saturate: 1.7;
71
+ --glass-surface: rgba(255, 255, 255, 0.82);
72
+ --glass-surface-hover: rgba(255, 255, 255, 0.72);
73
+ --glass-surface-subtle: rgba(255, 255, 255, 0.2);
74
+ --glass-surface-dark: rgba(0, 0, 0, 0.05);
75
+ --glass-edge-strong: 2px solid rgba(255, 255, 255, 0.5);
76
+ --glass-edge-soft: 1px solid rgba(255, 255, 255, 0.25);
77
+ --glass-edge-inset: 1px solid rgba(0, 0, 0, 0.06);
78
+ --glass-accent-1: 236, 72, 153;
79
+ --glass-accent-2: 34, 211, 238;
80
+ --glass-vivid-bg: var(--glass-surface);
81
+ --glass-vivid-saturate: 1.25;
82
+ --glass-vivid-edge-top: var(--glass-edge-strong);
83
+ --glass-vivid-edge-bottom: var(--glass-edge-soft);
84
+ --glass-vivid-shadow: var(--shadow-high);
85
+ --clay-surface: rgba(245, 240, 236, 0.6);
86
+ --clay-inner: inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.05);
87
+ --clay-inner-strong: inset 0 3px 6px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.06);
88
+ --text-glass: #1a1a1a;
89
+ --text-glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
90
+ --text-glass-muted: rgba(26, 26, 26, 0.55);
91
+ --ink: var(--c-text-1, #334155);
92
+ --ink-2: var(--c-text-2, #64748b);
93
+ --shadow-low: 0 4px 12px rgba(0, 0, 0, 0.06);
94
+ --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.08);
95
+ --shadow-high: 0 12px 40px rgba(0, 0, 0, 0.2);
96
+ --shadow-rest: 0 4px 20px rgba(44, 42, 41, 0.04), 0 1px 3px rgba(44, 42, 41, 0.02);
97
+ --shadow-hover: 0 8px 32px rgba(222, 135, 166, 0.12), 0 2px 6px rgba(44, 42, 41, 0.03);
98
+ --shadow-float: 0 20px 48px rgba(0, 0, 0, 0.14);
99
+ --shadow-image: 0 6px 24px rgba(44, 42, 41, 0.08);
100
+ --shadow-soft: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
101
+ --shadow-card-medium: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.08);
102
+ --shadow-glow: 0 0 20px 2px rgba(236, 72, 153, 0.15);
103
+ --sp-1: 1px;
104
+ --sp-3: 3px;
105
+ --sp-2xs: 2px;
106
+ --sp-xs: 4px;
107
+ --sp-xsh: 5px;
108
+ --sp-sm-: 6px;
109
+ --sp-sm: 8px;
110
+ --sp-smh: 9px;
111
+ --sp-sm2: 10px;
112
+ --sp-sm2h: 11px;
113
+ --sp-md-: 12px;
114
+ --sp-md: 16px;
115
+ --sp-mdh: 18px;
116
+ --sp-lg-: 20px;
117
+ --sp-lg: 24px;
118
+ --sp-lgh: 26px;
119
+ --sp-xl-: 28px;
120
+ --sp-xl: 32px;
121
+ --sp-xlh: 36px;
122
+ --sp-2xl-: 40px;
123
+ --sp-2xl: 48px;
124
+ --sp-2xlh: 52px;
125
+ --sp-3xl-: 56px;
126
+ --sp-3xl: 64px;
127
+ --sp-4xl: 80px;
128
+ --sp-5xl: 96px;
129
+ --sp-6xl: 120px;
130
+ --radius-2xs: 2px;
131
+ --radius-xs: 4px;
132
+ --radius-sm: 6px;
133
+ --radius-md: 8px;
134
+ --radius-lg: 10px;
135
+ --radius-xl: 12px;
136
+ --radius-2xl: 14px;
137
+ --radius-3xl: 16px;
138
+ --radius-4xl: 18px;
139
+ --radius-5xl: 20px;
140
+ --radius-6xl: 22px;
141
+ --radius-full: 999px;
142
+ --ease-viscous: cubic-bezier(0.16, 1, 0.3, 1);
143
+ --ease-soft: cubic-bezier(0.22, 0.61, 0.3, 1);
144
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
145
+ --dur-micro: 80ms;
146
+ --dur-fast: 150ms;
147
+ --dur-normal: 250ms;
148
+ --dur-slow: 400ms;
149
+ --dur-spring: 500ms;
150
+ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
151
+ --t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
152
+ --t-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
153
+ --op-disabled: 0.4;
154
+ --op-muted: 0.55;
155
+ --op-soft: 0.65;
156
+ --op-medium: 0.75;
157
+ --op-strong: 0.85;
158
+ --op-full: 1;
159
+ --z-base: 1;
160
+ --z-content: 4;
161
+ --z-content-high: 20;
162
+ --z-brand: 30;
163
+ --z-backdrop: 40;
164
+ --z-nav: 50;
165
+ --z-overlay: 60;
166
+ --z-modal: 70;
167
+ --z-toast: 80;
168
+ --z-transition: 200;
169
+ --font-serif-cn: "Noto Serif SC", serif;
170
+ --font-display: "Instrument Serif", "Noto Serif SC", Georgia, serif;
171
+ --font-body: "Outfit", "Noto Sans SC", system-ui, sans-serif;
172
+ --fw-regular: 400;
173
+ --fw-medium: 500;
174
+ --fw-semibold: 600;
175
+ --fw-bold: 700;
176
+ --fw-extrabold: 800;
177
+ --focus-ring: 0 0 0 2px rgba(var(--c-accent-rgb), 0.3);
178
+ --focus-ring-lg: 0 0 0 4px rgba(var(--c-accent-rgb), 0.16);
179
+ --focus-ring-glow: 0 0 0 2px rgba(var(--c-accent-rgb), 0.3), 0 0 12px rgba(var(--c-accent-rgb), 0.15);
180
+ --grad-rose: linear-gradient(135deg, rgba(var(--glass-accent-1), 0.4), rgba(var(--glass-accent-1), 0.1));
181
+ --grad-cyan: linear-gradient(135deg, rgba(var(--glass-accent-2), 0.4), rgba(var(--glass-accent-2), 0.1));
182
+ --grad-purple: linear-gradient(135deg, rgba(var(--purple-deep-rgb), 0.4), rgba(var(--purple-deep-rgb), 0.1));
183
+ --j-grad: linear-gradient(145deg, #ff9dc6 0%, #e191d8 48%, #b488ff 100%);
184
+ --j-grad-radial: radial-gradient(118% 118% at 32% 24%, #ffcde4 0%, #ff9dc6 34%, #b488ff 100%);
185
+ --paper-ink: #2c2620;
186
+ --paper-ink-strong: #1f1a14;
187
+ --paper-ink-muted: #4a3528;
188
+ --paper-rose-rgb: 255, 220, 235;
189
+ --paper-brown-rgb: 80, 50, 30;
190
+ --void-bg: #0e0524;
191
+ --void-bg-rgb: 14, 5, 36;
192
+ --paper-dark: #1a1520;
193
+ --elysia-ink: #3b3550;
194
+ --elysia-ink-2: #7a7390;
195
+ --elysia-ink-3: #a9a2bc;
196
+ --elysia-dark-surface: #352a48;
197
+ --elysia-dark-surface-alt: #3a2e50;
198
+ --elysia-dot-border: #fff5fb;
199
+ --elysia-dot-border-dark: #1a1626;
200
+ --radius: 0.75rem;
201
+ --grid-gap: var(--sp-md);
202
+ --card-radius: 20px;
203
+ --sp-card-pad: 24px;
204
+ --sp-gutter: 24px;
205
+ --radius-card: var(--radius-3xl);
206
+ --radius-inner: var(--radius-xl);
207
+ --blur: 14px;
208
+ --widget-shadow-rgb: 120, 70, 110;
209
+ --shadow-base-rgb: 44, 42, 41;
210
+ }
211
+
212
+ .dark {
213
+ --c-bg: #0f0f17;
214
+ --c-bg-rgb: 15, 15, 23;
215
+ --c-surface: rgba(157, 117, 255, 0.06);
216
+ --c-border: rgba(255, 255, 255, 0.07);
217
+ --c-text-1: #e2e8f0;
218
+ --c-text-2: #94a3b8;
219
+ --c-divider: rgba(255, 255, 255, 0.06);
220
+ --paper: #0f0f17;
221
+ --rose-deep-rgb: 244, 169, 206;
222
+ --purple-deep-rgb: 184, 155, 232;
223
+ --rose-bright-rgb: 244, 169, 206;
224
+ --discover-bg: var(--void-bg);
225
+ --background: 0 0% 0%;
226
+ --foreground: 210 40% 98%;
227
+ --primary: 330 70% 65%;
228
+ --primary-foreground: 210 40% 98%;
229
+ --card: 240 6% 11%;
230
+ --card-foreground: 210 40% 98%;
231
+ --secondary: 240 5% 18%;
232
+ --secondary-foreground: 210 40% 98%;
233
+ --accent: 240 5% 18%;
234
+ --accent-foreground: 210 40% 98%;
235
+ --border: 240 4% 22%;
236
+ --input: 240 5% 18%;
237
+ --ring: 330 70% 65%;
238
+ --destructive: 0 62.8% 30.6%;
239
+ --destructive-foreground: 210 40% 98%;
240
+ --muted: 240 5% 18%;
241
+ --muted-foreground: 240 5% 64.9%;
242
+ --glass-surface: rgba(255, 255, 255, 0.08);
243
+ --glass-surface-hover: rgba(255, 255, 255, 0.14);
244
+ --glass-surface-subtle: rgba(255, 255, 255, 0.04);
245
+ --glass-surface-dark: rgba(0, 0, 0, 0.2);
246
+ --glass-edge-strong: 1px solid rgba(255, 255, 255, 0.12);
247
+ --glass-edge-soft: 1px solid rgba(255, 255, 255, 0.06);
248
+ --glass-vivid-bg: linear-gradient(135deg, rgba(46, 38, 78, 0.82) 0%, rgba(20, 17, 34, 0.76) 100%);
249
+ --glass-vivid-saturate: 1.15;
250
+ --glass-vivid-edge-top: 1px solid rgba(255, 255, 255, 0.16);
251
+ --glass-vivid-edge-bottom: 1px solid rgba(255, 255, 255, 0.05);
252
+ --glass-vivid-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
253
+ --clay-surface: rgba(35, 35, 42, 0.6);
254
+ --clay-inner: inset 0 2px 4px rgba(255, 255, 255, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
255
+ --clay-inner-strong: inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
256
+ --text-glass: #f0ece4;
257
+ --text-glass-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
258
+ --text-glass-muted: rgba(240, 236, 228, 0.55);
259
+ --ink: var(--c-text-1, #e2e8f0);
260
+ --ink-2: var(--c-text-2, #94a3b8);
261
+ --shadow-low: 0 4px 12px rgba(0, 0, 0, 0.2);
262
+ --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.25);
263
+ --shadow-high: 0 12px 32px rgba(0, 0, 0, 0.3);
264
+ --shadow-float: 0 20px 48px rgba(0, 0, 0, 0.35);
265
+ --shadow-rest: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
266
+ --shadow-hover: 0 8px 32px rgba(var(--purple-deep-rgb), 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
267
+ --shadow-image: 0 6px 24px rgba(0, 0, 0, 0.2);
268
+ --shadow-soft: 0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 4px 16px -4px rgba(0, 0, 0, 0.3);
269
+ --shadow-card-medium: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 8px 24px -4px rgba(0, 0, 0, 0.4);
270
+ --shadow-glow: 0 0 20px 2px rgba(236, 72, 153, 0.25);
271
+ --paper-ink: #d4cdd8;
272
+ --paper-ink-strong: #e8e0ee;
273
+ --paper-ink-muted: #a898b8;
274
+ --void-bg: #0a0318;
275
+ --void-bg-rgb: 10, 3, 24;
276
+ --paper-dark: #1a1520;
277
+ --elysia-ink: #ece8f6;
278
+ --elysia-ink-2: #a6a0c0;
279
+ --elysia-ink-3: #6e688a;
280
+ --elysia-dark-surface: #352a48;
281
+ --elysia-dark-surface-alt: #3a2e50;
282
+ --elysia-dot-border: #1a1626;
283
+ --elysia-dot-border-dark: #241b36;
284
+ --rose-deep-light: #f0b9d0;
285
+ }
286
+
287
+ @media (max-width: 768px), (pointer: coarse) {
288
+ :root {
289
+ --glass-blur-subtle: blur(4px);
290
+ --glass-blur: blur(8px);
291
+ --glass-blur-medium: blur(10px);
292
+ --glass-blur-strong: blur(12px);
293
+ --glass-blur-card: blur(14px);
294
+ --glass-card-saturate: 1.4;
295
+ }
296
+ }
297
+
298
+ [data-glass-theme="default"] {
299
+ --glass-accent-1: 236, 72, 153;
300
+ --glass-accent-2: 34, 211, 238;
301
+ }
302
+
303
+ [data-glass-theme="nature"] {
304
+ --glass-accent-1: 16, 185, 129;
305
+ --glass-accent-2: 34, 197, 94;
306
+ }
307
+
308
+ [data-glass-theme="sunset"] {
309
+ --glass-accent-1: 251, 146, 60;
310
+ --glass-accent-2: 251, 113, 133;
311
+ }
312
+
313
+ [data-glass-theme="ocean"] {
314
+ --glass-accent-1: 59, 130, 246;
315
+ --glass-accent-2: 129, 140, 248;
316
+ }
317
+
318
+ [data-glass-theme="lavender"] {
319
+ --glass-accent-1: 168, 85, 247;
320
+ --glass-accent-2: 139, 92, 246;
321
+ }
322
+
323
+ [data-glass-theme="cyberpunk"] {
324
+ --glass-accent-1: 34, 211, 238;
325
+ --glass-accent-2: 217, 70, 239;
326
+ }
327
+
328
+ [data-glass-theme="earthy"] {
329
+ --glass-accent-1: 245, 158, 11;
330
+ --glass-accent-2: 249, 115, 22;
331
+ }
332
+
333
+ [data-glass-theme="aurora_void"] {
334
+ --glass-accent-1: 167, 139, 250;
335
+ --glass-accent-2: 232, 121, 249;
336
+ }
package/dist/tokens.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ // Crystal Glasshouse Design Tokens — Auto-generated
2
+
3
+ export const tokens: Record<string, string>
4
+ export const darkTokens: Record<string, string>
5
+ export const themes: Record<string, { name: string } & Record<string, string>>
6
+ export const cssVarNames: string[]