@nebutra/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.
- package/LICENSE +676 -0
- package/README.md +149 -0
- package/package.json +52 -0
- package/style-dictionary.config.mjs +697 -0
- package/tokens/core.json +207 -0
- package/tokens/semantic.json +86 -0
- package/tokens/themes/dark-dense.json +48 -0
- package/tokens/themes/dark.json +216 -0
- package/tokens/themes/gradient.json +44 -0
- package/tokens/themes/light.json +243 -0
- package/tokens/themes/minimal.json +47 -0
- package/tokens/themes/neon.json +69 -0
- package/tokens/themes/ocean.json +44 -0
- package/tokens/themes/vibrant.json +54 -0
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Light mode theme — 12-step functional scales (Geist-style) + shadcn HSL semantics + Geist DS scale + elevation. Mirrors :root in @nebutra/tokens/styles.css.",
|
|
4
|
+
"scale": {
|
|
5
|
+
"neutral": {
|
|
6
|
+
"1": { "$value": "{color.white}", "$type": "color", "$description": "app background" },
|
|
7
|
+
"2": {
|
|
8
|
+
"$value": "{color.nebutra-neutral.50}",
|
|
9
|
+
"$type": "color",
|
|
10
|
+
"$description": "subtle background"
|
|
11
|
+
},
|
|
12
|
+
"3": {
|
|
13
|
+
"$value": "{color.nebutra-neutral.100}",
|
|
14
|
+
"$type": "color",
|
|
15
|
+
"$description": "component bg default"
|
|
16
|
+
},
|
|
17
|
+
"4": {
|
|
18
|
+
"$value": "{color.nebutra-neutral.200}",
|
|
19
|
+
"$type": "color",
|
|
20
|
+
"$description": "component bg hover"
|
|
21
|
+
},
|
|
22
|
+
"5": {
|
|
23
|
+
"$value": "{color.nebutra-neutral.300}",
|
|
24
|
+
"$type": "color",
|
|
25
|
+
"$description": "component bg active"
|
|
26
|
+
},
|
|
27
|
+
"6": {
|
|
28
|
+
"$value": "{color.nebutra-neutral.200}",
|
|
29
|
+
"$type": "color",
|
|
30
|
+
"$description": "subtle border"
|
|
31
|
+
},
|
|
32
|
+
"7": {
|
|
33
|
+
"$value": "{color.nebutra-neutral.300}",
|
|
34
|
+
"$type": "color",
|
|
35
|
+
"$description": "default border"
|
|
36
|
+
},
|
|
37
|
+
"8": {
|
|
38
|
+
"$value": "{color.nebutra-neutral.400}",
|
|
39
|
+
"$type": "color",
|
|
40
|
+
"$description": "hovered border"
|
|
41
|
+
},
|
|
42
|
+
"9": {
|
|
43
|
+
"$value": "{color.nebutra-neutral.500}",
|
|
44
|
+
"$type": "color",
|
|
45
|
+
"$description": "solid fill"
|
|
46
|
+
},
|
|
47
|
+
"10": {
|
|
48
|
+
"$value": "{color.nebutra-neutral.600}",
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$description": "solid fill hover"
|
|
51
|
+
},
|
|
52
|
+
"11": {
|
|
53
|
+
"$value": "{color.nebutra-neutral.700}",
|
|
54
|
+
"$type": "color",
|
|
55
|
+
"$description": "secondary text"
|
|
56
|
+
},
|
|
57
|
+
"12": {
|
|
58
|
+
"$value": "{color.nebutra-neutral.900}",
|
|
59
|
+
"$type": "color",
|
|
60
|
+
"$description": "primary text"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
"blue": {
|
|
64
|
+
"1": { "$value": "{color.nebutra-blue.50}", "$type": "color" },
|
|
65
|
+
"2": { "$value": "{color.nebutra-blue.100}", "$type": "color" },
|
|
66
|
+
"3": { "$value": "{color.nebutra-blue.200}", "$type": "color" },
|
|
67
|
+
"4": { "$value": "{color.nebutra-blue.300}", "$type": "color" },
|
|
68
|
+
"5": { "$value": "{color.nebutra-blue.400}", "$type": "color" },
|
|
69
|
+
"6": { "$value": "{color.nebutra-blue.200}", "$type": "color" },
|
|
70
|
+
"7": { "$value": "{color.nebutra-blue.300}", "$type": "color" },
|
|
71
|
+
"8": { "$value": "{color.nebutra-blue.400}", "$type": "color" },
|
|
72
|
+
"9": {
|
|
73
|
+
"$value": "{color.nebutra-blue.500}",
|
|
74
|
+
"$type": "color",
|
|
75
|
+
"$description": "solid fill — main brand"
|
|
76
|
+
},
|
|
77
|
+
"10": { "$value": "{color.nebutra-blue.600}", "$type": "color" },
|
|
78
|
+
"11": { "$value": "{color.nebutra-blue.700}", "$type": "color" },
|
|
79
|
+
"12": { "$value": "{color.nebutra-blue.900}", "$type": "color" }
|
|
80
|
+
},
|
|
81
|
+
"cyan": {
|
|
82
|
+
"1": { "$value": "{color.nebutra-cyan.50}", "$type": "color" },
|
|
83
|
+
"2": { "$value": "{color.nebutra-cyan.100}", "$type": "color" },
|
|
84
|
+
"3": { "$value": "{color.nebutra-cyan.200}", "$type": "color" },
|
|
85
|
+
"4": { "$value": "{color.nebutra-cyan.300}", "$type": "color" },
|
|
86
|
+
"5": { "$value": "{color.nebutra-cyan.400}", "$type": "color" },
|
|
87
|
+
"6": { "$value": "{color.nebutra-cyan.200}", "$type": "color" },
|
|
88
|
+
"7": { "$value": "{color.nebutra-cyan.300}", "$type": "color" },
|
|
89
|
+
"8": { "$value": "{color.nebutra-cyan.400}", "$type": "color" },
|
|
90
|
+
"9": { "$value": "{color.nebutra-cyan.500}", "$type": "color" },
|
|
91
|
+
"10": { "$value": "{color.nebutra-cyan.600}", "$type": "color" },
|
|
92
|
+
"11": { "$value": "{color.nebutra-cyan.700}", "$type": "color" },
|
|
93
|
+
"12": { "$value": "{color.nebutra-cyan.900}", "$type": "color" }
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
"shadcn": {
|
|
97
|
+
"background": {
|
|
98
|
+
"$value": "0 0% 100%",
|
|
99
|
+
"$type": "string",
|
|
100
|
+
"$description": "HSL channel triple — consume via hsl(var(--background))"
|
|
101
|
+
},
|
|
102
|
+
"foreground": { "$value": "222 47% 11%", "$type": "string" },
|
|
103
|
+
"card": { "$value": "0 0% 100%", "$type": "string" },
|
|
104
|
+
"card-foreground": { "$value": "222 47% 11%", "$type": "string" },
|
|
105
|
+
"popover": { "$value": "0 0% 100%", "$type": "string" },
|
|
106
|
+
"popover-foreground": { "$value": "222 47% 11%", "$type": "string" },
|
|
107
|
+
"primary": {
|
|
108
|
+
"$value": "228 85% 56%",
|
|
109
|
+
"$type": "string",
|
|
110
|
+
"$description": "Softer brand blue #254bfa"
|
|
111
|
+
},
|
|
112
|
+
"primary-foreground": { "$value": "0 0% 100%", "$type": "string" },
|
|
113
|
+
"secondary": { "$value": "210 40% 96%", "$type": "string" },
|
|
114
|
+
"secondary-foreground": { "$value": "222 47% 11%", "$type": "string" },
|
|
115
|
+
"muted": { "$value": "210 40% 96%", "$type": "string" },
|
|
116
|
+
"muted-foreground": { "$value": "215 25% 45%", "$type": "string" },
|
|
117
|
+
"accent": { "$value": "228 100% 97%", "$type": "string" },
|
|
118
|
+
"accent-foreground": {
|
|
119
|
+
"$value": "228 85% 56%",
|
|
120
|
+
"$type": "string",
|
|
121
|
+
"$description": "Softer brand blue — desaturated to match --primary, avoids 100% saturation glare on focus/accent"
|
|
122
|
+
},
|
|
123
|
+
"destructive": { "$value": "0 84% 45%", "$type": "string" },
|
|
124
|
+
"destructive-foreground": { "$value": "0 0% 100%", "$type": "string" },
|
|
125
|
+
"success": { "$value": "142 71% 29%", "$type": "string" },
|
|
126
|
+
"success-foreground": { "$value": "0 0% 100%", "$type": "string" },
|
|
127
|
+
"warning": { "$value": "38 92% 50%", "$type": "string" },
|
|
128
|
+
"warning-foreground": { "$value": "222 47% 11%", "$type": "string" },
|
|
129
|
+
"info": { "$value": "228 85% 56%", "$type": "string" },
|
|
130
|
+
"info-foreground": { "$value": "0 0% 100%", "$type": "string" },
|
|
131
|
+
"border": { "$value": "240 5.9% 90%", "$type": "string" },
|
|
132
|
+
"input": { "$value": "240 5.9% 90%", "$type": "string" },
|
|
133
|
+
"ring": {
|
|
134
|
+
"$value": "222 47% 11%",
|
|
135
|
+
"$type": "string",
|
|
136
|
+
"$description": "Focus ring — neutral foreground (Vercel/Linear/Cursor 2026 pattern). Brand blue is reserved for selected/active states; focus indication is chrome and stays neutral. Consumed by global :focus-visible outline as hsl(var(--ring) / 0.5)."
|
|
137
|
+
},
|
|
138
|
+
"sidebar": { "$value": "210 40% 98%", "$type": "string" },
|
|
139
|
+
"sidebar-foreground": { "$value": "215 25% 27%", "$type": "string" },
|
|
140
|
+
"sidebar-primary": { "$value": "228 85% 56%", "$type": "string" },
|
|
141
|
+
"sidebar-primary-foreground": { "$value": "0 0% 100%", "$type": "string" },
|
|
142
|
+
"sidebar-accent": { "$value": "228 100% 97%", "$type": "string" },
|
|
143
|
+
"sidebar-accent-foreground": { "$value": "228 85% 56%", "$type": "string" },
|
|
144
|
+
"sidebar-border": { "$value": "214 32% 91%", "$type": "string" },
|
|
145
|
+
"sidebar-ring": { "$value": "228 85% 56%", "$type": "string" },
|
|
146
|
+
"chart-1": { "$value": "228 100% 50%", "$type": "string" },
|
|
147
|
+
"chart-2": { "$value": "168 91% 49%", "$type": "string" },
|
|
148
|
+
"chart-3": { "$value": "263 70% 66%", "$type": "string" },
|
|
149
|
+
"chart-4": { "$value": "168 91% 70%", "$type": "string" },
|
|
150
|
+
"chart-5": { "$value": "228 100% 35%", "$type": "string" }
|
|
151
|
+
},
|
|
152
|
+
"ds": {
|
|
153
|
+
"$description": "Geist Design System color scale. sRGB hsla() fallbacks for legacy engines; oklch() overrides emitted via @supports wrapper for ds-gray-*.",
|
|
154
|
+
"blue-200": { "$value": "oklch(96.29% 0.0195 250.59)", "$type": "color" },
|
|
155
|
+
"blue-700": { "$value": "oklch(57.61% 0.2508 258.23)", "$type": "color" },
|
|
156
|
+
"blue-900": { "$value": "oklch(53.18% 0.2399 256.9900584162342)", "$type": "color" },
|
|
157
|
+
"red-200": { "$value": "oklch(95.41% 0.0299 14.252646656611997)", "$type": "color" },
|
|
158
|
+
"red-700": { "$value": "oklch(62.56% 0.2524 23.03)", "$type": "color" },
|
|
159
|
+
"red-900": { "$value": "oklch(54.99% 0.232 25.29)", "$type": "color" },
|
|
160
|
+
"amber-200": { "$value": "oklch(96.81% 0.0495 90.24227879900472)", "$type": "color" },
|
|
161
|
+
"amber-700": { "$value": "oklch(81.87% 0.1969 76.46)", "$type": "color" },
|
|
162
|
+
"amber-900": { "$value": "oklch(52.79% 0.1496 54.65)", "$type": "color" },
|
|
163
|
+
"green-200": { "$value": "oklch(96.92% 0.037 147.15)", "$type": "color" },
|
|
164
|
+
"green-700": { "$value": "oklch(64.58% 0.1746 147.27)", "$type": "color" },
|
|
165
|
+
"green-900": { "$value": "oklch(51.75% 0.1453 147.65)", "$type": "color" },
|
|
166
|
+
"teal-300": { "$value": "oklch(94.92% 0.0478 182.07)", "$type": "color" },
|
|
167
|
+
"teal-700": { "$value": "oklch(64.92% 0.1572 181.95)", "$type": "color" },
|
|
168
|
+
"teal-900": { "$value": "oklch(52.08% 0.1251 182.93)", "$type": "color" },
|
|
169
|
+
"purple-200": { "$value": "oklch(96.73% 0.0228 309.8)", "$type": "color" },
|
|
170
|
+
"purple-700": { "$value": "oklch(55.5% 0.3008 306.12)", "$type": "color" },
|
|
171
|
+
"purple-900": { "$value": "oklch(47.18% 0.2579 304)", "$type": "color" },
|
|
172
|
+
"pink-300": { "$value": "oklch(93.83% 0.0451 356.29)", "$type": "color" },
|
|
173
|
+
"pink-700": { "$value": "oklch(63.52% 0.238 1.01)", "$type": "color" },
|
|
174
|
+
"pink-900": { "$value": "oklch(53.5% 0.2058 2.84)", "$type": "color" },
|
|
175
|
+
"gray-100": {
|
|
176
|
+
"$value": "hsla(0, 0%, 95%, 1)",
|
|
177
|
+
"$type": "color",
|
|
178
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.953 0 0)" }
|
|
179
|
+
},
|
|
180
|
+
"gray-200": {
|
|
181
|
+
"$value": "hsla(0, 0%, 92%, 1)",
|
|
182
|
+
"$type": "color",
|
|
183
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.929 0 0)" }
|
|
184
|
+
},
|
|
185
|
+
"gray-500": {
|
|
186
|
+
"$value": "hsla(0, 0%, 79%, 1)",
|
|
187
|
+
"$type": "color",
|
|
188
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.81 0 0)" }
|
|
189
|
+
},
|
|
190
|
+
"gray-600": {
|
|
191
|
+
"$value": "hsla(0, 0%, 66%, 1)",
|
|
192
|
+
"$type": "color",
|
|
193
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.69 0 0)" }
|
|
194
|
+
},
|
|
195
|
+
"gray-700": {
|
|
196
|
+
"$value": "hsla(0, 0%, 56%, 1)",
|
|
197
|
+
"$type": "color",
|
|
198
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.598 0 0)" }
|
|
199
|
+
},
|
|
200
|
+
"gray-1000": {
|
|
201
|
+
"$value": "hsla(0, 0%, 9%, 1)",
|
|
202
|
+
"$type": "color",
|
|
203
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.215 0 0)" }
|
|
204
|
+
},
|
|
205
|
+
"background-100": {
|
|
206
|
+
"$value": "hsla(0, 0%, 100%, 1)",
|
|
207
|
+
"$type": "color",
|
|
208
|
+
"$extensions": { "com.nebutra.oklch": "oklch(1 0 0)" }
|
|
209
|
+
},
|
|
210
|
+
"trial-start": { "$value": "rgb(0, 112, 243)", "$type": "color" },
|
|
211
|
+
"trial-end": { "$value": "rgb(248, 28, 229)", "$type": "color" },
|
|
212
|
+
"turbo-start": { "$value": "#ff1e56", "$type": "color" },
|
|
213
|
+
"turbo-end": { "$value": "#0096ff", "$type": "color" }
|
|
214
|
+
},
|
|
215
|
+
"elevation": {
|
|
216
|
+
"xs": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "$type": "shadow" },
|
|
217
|
+
"sm": {
|
|
218
|
+
"$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
219
|
+
"$type": "shadow"
|
|
220
|
+
},
|
|
221
|
+
"md": {
|
|
222
|
+
"$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
223
|
+
"$type": "shadow"
|
|
224
|
+
},
|
|
225
|
+
"lg": {
|
|
226
|
+
"$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
227
|
+
"$type": "shadow"
|
|
228
|
+
},
|
|
229
|
+
"xl": {
|
|
230
|
+
"$value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
231
|
+
"$type": "shadow"
|
|
232
|
+
},
|
|
233
|
+
"2xl": { "$value": "0 25px 50px -12px rgb(0 0 0 / 0.25)", "$type": "shadow" },
|
|
234
|
+
"brand": {
|
|
235
|
+
"$value": "0 0 0 1px rgb(0 51 254 / 0.15), 0 4px 20px -2px rgb(0 51 254 / 0.2)",
|
|
236
|
+
"$type": "shadow"
|
|
237
|
+
},
|
|
238
|
+
"brand-lg": {
|
|
239
|
+
"$value": "0 0 0 1px rgb(0 51 254 / 0.2), 0 8px 40px -4px rgb(0 51 254 / 0.3)",
|
|
240
|
+
"$type": "shadow"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Minimal — Blog/Portfolio. Near-black primary, serif heading. Mirrors [data-theme=minimal].",
|
|
4
|
+
"theme": "minimal",
|
|
5
|
+
"color": {
|
|
6
|
+
"primary": { "$value": "oklch(0.21 0.006 285.9)", "$type": "color" },
|
|
7
|
+
"primary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
8
|
+
"secondary": { "$value": "oklch(0.442 0.017 285.9)", "$type": "color" },
|
|
9
|
+
"secondary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
10
|
+
"accent": { "$value": "oklch(0.552 0.016 286)", "$type": "color" },
|
|
11
|
+
"accent-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
12
|
+
"background": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
13
|
+
"foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
14
|
+
"card": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
15
|
+
"card-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
16
|
+
"popover": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
17
|
+
"popover-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
18
|
+
"muted": { "$value": "oklch(0.967 0.001 286)", "$type": "color" },
|
|
19
|
+
"muted-foreground": { "$value": "oklch(0.552 0.016 286)", "$type": "color" },
|
|
20
|
+
"border": { "$value": "oklch(0.922 0.004 286)", "$type": "color" },
|
|
21
|
+
"input": { "$value": "oklch(0.922 0.004 286)", "$type": "color" },
|
|
22
|
+
"ring": { "$value": "oklch(0.21 0.006 285.9)", "$type": "color" },
|
|
23
|
+
"primary-hover": {
|
|
24
|
+
"$value": "color-mix(in oklch, oklch(0.21 0.006 285.9), white 20%)",
|
|
25
|
+
"$type": "color"
|
|
26
|
+
},
|
|
27
|
+
"primary-active": {
|
|
28
|
+
"$value": "color-mix(in oklch, oklch(0.21 0.006 285.9), white 10%)",
|
|
29
|
+
"$type": "color"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"radius": {
|
|
33
|
+
"sm": { "$value": "0.25rem", "$type": "dimension" },
|
|
34
|
+
"md": { "$value": "0.375rem", "$type": "dimension" },
|
|
35
|
+
"lg": { "$value": "0.5rem", "$type": "dimension" },
|
|
36
|
+
"xl": { "$value": "0.75rem", "$type": "dimension" }
|
|
37
|
+
},
|
|
38
|
+
"fontFamily": {
|
|
39
|
+
"heading": { "$value": "\"Playfair Display\", ui-serif, Georgia, serif", "$type": "fontFamily" }
|
|
40
|
+
},
|
|
41
|
+
"shadow": {
|
|
42
|
+
"sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.03)", "$type": "shadow" },
|
|
43
|
+
"md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.07)", "$type": "shadow" },
|
|
44
|
+
"lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.07)", "$type": "shadow" },
|
|
45
|
+
"xl": { "$value": "0 20px 25px -5px rgb(0 0 0 / 0.07)", "$type": "shadow" }
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Neon — default AI SaaS theme. Mirrors @theme block in packages/design/theme/themes.css. Dark surface + neon-blue primary.",
|
|
4
|
+
"theme": "neon",
|
|
5
|
+
"color": {
|
|
6
|
+
"primary": { "$value": "oklch(0.452 0.313 264.1)", "$type": "color" },
|
|
7
|
+
"primary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
8
|
+
"secondary": { "$value": "oklch(0.715 0.143 215.2)", "$type": "color" },
|
|
9
|
+
"secondary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
10
|
+
"accent": { "$value": "oklch(0.714 0.203 264.1)", "$type": "color" },
|
|
11
|
+
"accent-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
12
|
+
"background": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
13
|
+
"foreground": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
14
|
+
"card": { "$value": "oklch(0.212 0.006 285.9)", "$type": "color" },
|
|
15
|
+
"card-foreground": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
16
|
+
"popover": { "$value": "oklch(0.212 0.006 285.9)", "$type": "color" },
|
|
17
|
+
"popover-foreground": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
18
|
+
"muted": { "$value": "oklch(0.274 0.006 286)", "$type": "color" },
|
|
19
|
+
"muted-foreground": { "$value": "oklch(0.705 0.015 286)", "$type": "color" },
|
|
20
|
+
"border": { "$value": "oklch(0.274 0.006 286)", "$type": "color" },
|
|
21
|
+
"input": { "$value": "oklch(0.274 0.006 286)", "$type": "color" },
|
|
22
|
+
"ring": { "$value": "oklch(0.452 0.313 264.1)", "$type": "color" },
|
|
23
|
+
"destructive": { "$value": "oklch(0.577 0.245 27.3)", "$type": "color" },
|
|
24
|
+
"destructive-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
25
|
+
"success": { "$value": "oklch(0.723 0.219 149.6)", "$type": "color" },
|
|
26
|
+
"success-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
27
|
+
"warning": { "$value": "oklch(0.769 0.189 70.1)", "$type": "color" },
|
|
28
|
+
"warning-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
29
|
+
"info": { "$value": "oklch(0.623 0.214 259.1)", "$type": "color" },
|
|
30
|
+
"info-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
31
|
+
"primary-hover": {
|
|
32
|
+
"$value": "color-mix(in oklch, oklch(0.452 0.313 264.1), white 15%)",
|
|
33
|
+
"$type": "color"
|
|
34
|
+
},
|
|
35
|
+
"primary-active": {
|
|
36
|
+
"$value": "color-mix(in oklch, oklch(0.452 0.313 264.1), black 10%)",
|
|
37
|
+
"$type": "color"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"radius": {
|
|
41
|
+
"sm": { "$value": "0.25rem", "$type": "dimension" },
|
|
42
|
+
"md": { "$value": "0.375rem", "$type": "dimension" },
|
|
43
|
+
"lg": { "$value": "0.5rem", "$type": "dimension" },
|
|
44
|
+
"xl": { "$value": "0.75rem", "$type": "dimension" },
|
|
45
|
+
"full": { "$value": "9999px", "$type": "dimension" }
|
|
46
|
+
},
|
|
47
|
+
"fontFamily": {
|
|
48
|
+
"sans": { "$value": "\"Inter\", ui-sans-serif, system-ui, sans-serif", "$type": "fontFamily" },
|
|
49
|
+
"mono": {
|
|
50
|
+
"$value": "\"JetBrains Mono\", \"Fira Code\", ui-monospace, monospace",
|
|
51
|
+
"$type": "fontFamily"
|
|
52
|
+
},
|
|
53
|
+
"heading": {
|
|
54
|
+
"$value": "\"Inter\", ui-sans-serif, system-ui, sans-serif",
|
|
55
|
+
"$type": "fontFamily"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
"shadow": {
|
|
59
|
+
"sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.5)", "$type": "shadow" },
|
|
60
|
+
"md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.5)", "$type": "shadow" },
|
|
61
|
+
"lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.5)", "$type": "shadow" },
|
|
62
|
+
"xl": { "$value": "0 20px 25px -5px rgb(0 0 0 / 0.5)", "$type": "shadow" }
|
|
63
|
+
},
|
|
64
|
+
"transition": {
|
|
65
|
+
"fast": { "$value": "150ms cubic-bezier(0.4, 0, 0.2, 1)", "$type": "transition" },
|
|
66
|
+
"normal": { "$value": "250ms cubic-bezier(0.4, 0, 0.2, 1)", "$type": "transition" },
|
|
67
|
+
"slow": { "$value": "400ms cubic-bezier(0.4, 0, 0.2, 1)", "$type": "transition" }
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Ocean — Community theme. Cyan-sea palette on tinted background. Mirrors [data-theme=ocean].",
|
|
4
|
+
"theme": "ocean",
|
|
5
|
+
"color": {
|
|
6
|
+
"primary": { "$value": "oklch(0.609 0.126 199.8)", "$type": "color" },
|
|
7
|
+
"primary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
8
|
+
"secondary": { "$value": "oklch(0.715 0.143 215.2)", "$type": "color" },
|
|
9
|
+
"secondary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
10
|
+
"accent": { "$value": "oklch(0.777 0.152 181.9)", "$type": "color" },
|
|
11
|
+
"accent-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
12
|
+
"background": { "$value": "oklch(0.982 0.018 180.7)", "$type": "color" },
|
|
13
|
+
"foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
14
|
+
"card": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
15
|
+
"card-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
16
|
+
"popover": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
17
|
+
"popover-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
18
|
+
"muted": { "$value": "oklch(0.953 0.024 184)", "$type": "color" },
|
|
19
|
+
"muted-foreground": { "$value": "oklch(0.442 0.017 285.9)", "$type": "color" },
|
|
20
|
+
"border": { "$value": "oklch(0.905 0.032 185)", "$type": "color" },
|
|
21
|
+
"input": { "$value": "oklch(0.905 0.032 185)", "$type": "color" },
|
|
22
|
+
"ring": { "$value": "oklch(0.609 0.126 199.8)", "$type": "color" },
|
|
23
|
+
"primary-hover": {
|
|
24
|
+
"$value": "color-mix(in oklch, oklch(0.609 0.126 199.8), black 10%)",
|
|
25
|
+
"$type": "color"
|
|
26
|
+
},
|
|
27
|
+
"primary-active": {
|
|
28
|
+
"$value": "color-mix(in oklch, oklch(0.609 0.126 199.8), black 20%)",
|
|
29
|
+
"$type": "color"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"radius": {
|
|
33
|
+
"sm": { "$value": "0.375rem", "$type": "dimension" },
|
|
34
|
+
"md": { "$value": "0.5rem", "$type": "dimension" },
|
|
35
|
+
"lg": { "$value": "0.75rem", "$type": "dimension" },
|
|
36
|
+
"xl": { "$value": "1rem", "$type": "dimension" }
|
|
37
|
+
},
|
|
38
|
+
"shadow": {
|
|
39
|
+
"sm": { "$value": "0 1px 2px 0 rgb(8 145 178 / 0.08)", "$type": "shadow" },
|
|
40
|
+
"md": { "$value": "0 4px 6px -1px rgb(8 145 178 / 0.12)", "$type": "shadow" },
|
|
41
|
+
"lg": { "$value": "0 10px 15px -3px rgb(8 145 178 / 0.12)", "$type": "shadow" },
|
|
42
|
+
"xl": { "$value": "0 20px 25px -5px rgb(8 145 178 / 0.12)", "$type": "shadow" }
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Vibrant — Creative UI/UX. Orange primary + Space Grotesk + extra-rounded radii. Mirrors [data-theme=vibrant].",
|
|
4
|
+
"theme": "vibrant",
|
|
5
|
+
"color": {
|
|
6
|
+
"primary": { "$value": "oklch(0.705 0.213 47.6)", "$type": "color" },
|
|
7
|
+
"primary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
8
|
+
"secondary": { "$value": "oklch(0.769 0.189 70.1)", "$type": "color" },
|
|
9
|
+
"secondary-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
10
|
+
"accent": { "$value": "oklch(0.645 0.246 16.4)", "$type": "color" },
|
|
11
|
+
"accent-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
12
|
+
"background": { "$value": "oklch(0.991 0.015 95.3)", "$type": "color" },
|
|
13
|
+
"foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
14
|
+
"card": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
15
|
+
"card-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
16
|
+
"popover": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
17
|
+
"popover-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
18
|
+
"muted": { "$value": "oklch(0.967 0.012 90)", "$type": "color" },
|
|
19
|
+
"muted-foreground": { "$value": "oklch(0.552 0.016 286)", "$type": "color" },
|
|
20
|
+
"border": { "$value": "oklch(0.922 0.008 80)", "$type": "color" },
|
|
21
|
+
"input": { "$value": "oklch(0.922 0.008 80)", "$type": "color" },
|
|
22
|
+
"ring": { "$value": "oklch(0.705 0.213 47.6)", "$type": "color" },
|
|
23
|
+
"primary-hover": {
|
|
24
|
+
"$value": "color-mix(in oklch, oklch(0.705 0.213 47.6), black 10%)",
|
|
25
|
+
"$type": "color"
|
|
26
|
+
},
|
|
27
|
+
"primary-active": {
|
|
28
|
+
"$value": "color-mix(in oklch, oklch(0.705 0.213 47.6), black 20%)",
|
|
29
|
+
"$type": "color"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"radius": {
|
|
33
|
+
"sm": { "$value": "0.75rem", "$type": "dimension" },
|
|
34
|
+
"md": { "$value": "1rem", "$type": "dimension" },
|
|
35
|
+
"lg": { "$value": "1.5rem", "$type": "dimension" },
|
|
36
|
+
"xl": { "$value": "9999px", "$type": "dimension" }
|
|
37
|
+
},
|
|
38
|
+
"fontFamily": {
|
|
39
|
+
"sans": {
|
|
40
|
+
"$value": "\"Space Grotesk\", ui-sans-serif, system-ui, sans-serif",
|
|
41
|
+
"$type": "fontFamily"
|
|
42
|
+
},
|
|
43
|
+
"heading": {
|
|
44
|
+
"$value": "\"Space Grotesk\", ui-sans-serif, system-ui, sans-serif",
|
|
45
|
+
"$type": "fontFamily"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"shadow": {
|
|
49
|
+
"sm": { "$value": "0 1px 3px 0 rgb(249 115 22 / 0.1)", "$type": "shadow" },
|
|
50
|
+
"md": { "$value": "0 4px 6px -1px rgb(249 115 22 / 0.15)", "$type": "shadow" },
|
|
51
|
+
"lg": { "$value": "0 10px 15px -3px rgb(249 115 22 / 0.15)", "$type": "shadow" },
|
|
52
|
+
"xl": { "$value": "0 20px 25px -5px rgb(249 115 22 / 0.15)", "$type": "shadow" }
|
|
53
|
+
}
|
|
54
|
+
}
|