@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
package/tokens/core.json
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Nebutra primitive (core) tokens — W3C DTCG draft. SSOT for the design system. Edits here propagate to packages/design/tokens/styles.css, packages/design/theme/themes.css, and TS bridges via Style Dictionary.",
|
|
4
|
+
"color": {
|
|
5
|
+
"nebutra-blue": {
|
|
6
|
+
"50": { "$value": "#f0f4ff", "$type": "color" },
|
|
7
|
+
"100": { "$value": "#dbe4ff", "$type": "color" },
|
|
8
|
+
"200": { "$value": "#bac8ff", "$type": "color" },
|
|
9
|
+
"300": { "$value": "#91a7ff", "$type": "color" },
|
|
10
|
+
"400": { "$value": "#5c7cfa", "$type": "color" },
|
|
11
|
+
"500": {
|
|
12
|
+
"$value": "#0033fe",
|
|
13
|
+
"$type": "color",
|
|
14
|
+
"$description": "Base brand color — 云毓蓝",
|
|
15
|
+
"$extensions": {
|
|
16
|
+
"com.nebutra.display-p3": "color(display-p3 0.03 0.19 0.99)"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"600": { "$value": "#002ad4", "$type": "color" },
|
|
20
|
+
"700": { "$value": "#0021ab", "$type": "color" },
|
|
21
|
+
"800": { "$value": "#001882", "$type": "color" },
|
|
22
|
+
"900": { "$value": "#000f59", "$type": "color" },
|
|
23
|
+
"950": { "$value": "#000830", "$type": "color" }
|
|
24
|
+
},
|
|
25
|
+
"nebutra-cyan": {
|
|
26
|
+
"50": { "$value": "#e6fff8", "$type": "color" },
|
|
27
|
+
"100": { "$value": "#b3ffec", "$type": "color" },
|
|
28
|
+
"200": { "$value": "#80ffe0", "$type": "color" },
|
|
29
|
+
"300": { "$value": "#4dfcd4", "$type": "color" },
|
|
30
|
+
"400": { "$value": "#1af7c8", "$type": "color" },
|
|
31
|
+
"500": {
|
|
32
|
+
"$value": "#0bf1c3",
|
|
33
|
+
"$type": "color",
|
|
34
|
+
"$description": "Base brand accent — 云毓青",
|
|
35
|
+
"$extensions": {
|
|
36
|
+
"com.nebutra.display-p3": "color(display-p3 0.07 0.94 0.79)"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"600": { "$value": "#09c9a3", "$type": "color" },
|
|
40
|
+
"700": { "$value": "#07a183", "$type": "color" },
|
|
41
|
+
"800": { "$value": "#057963", "$type": "color" },
|
|
42
|
+
"900": { "$value": "#035143", "$type": "color" },
|
|
43
|
+
"950": { "$value": "#012923", "$type": "color" }
|
|
44
|
+
},
|
|
45
|
+
"nebutra-neutral": {
|
|
46
|
+
"$description": "Slate (Tailwind) — cool blue-undertone gray. SSOT decision: Slate over Zinc. See docs/design-system/token-drift-audit.md.",
|
|
47
|
+
"50": { "$value": "#f8fafc", "$type": "color" },
|
|
48
|
+
"100": { "$value": "#f1f5f9", "$type": "color" },
|
|
49
|
+
"200": { "$value": "#e2e8f0", "$type": "color" },
|
|
50
|
+
"300": { "$value": "#cbd5e1", "$type": "color" },
|
|
51
|
+
"400": { "$value": "#94a3b8", "$type": "color" },
|
|
52
|
+
"500": { "$value": "#64748b", "$type": "color" },
|
|
53
|
+
"600": { "$value": "#475569", "$type": "color" },
|
|
54
|
+
"700": { "$value": "#334155", "$type": "color" },
|
|
55
|
+
"800": { "$value": "#1e293b", "$type": "color" },
|
|
56
|
+
"900": { "$value": "#0f172a", "$type": "color" },
|
|
57
|
+
"950": { "$value": "#020617", "$type": "color" }
|
|
58
|
+
},
|
|
59
|
+
"nebutra-gray": {
|
|
60
|
+
"$description": "Pure neutral (Tailwind neutral) — zero hue, zero saturation. Used where blue undertone clashes — primarily dark-mode borders, dividers, and elevation hairlines.",
|
|
61
|
+
"50": { "$value": "#fafafa", "$type": "color" },
|
|
62
|
+
"100": { "$value": "#f5f5f5", "$type": "color" },
|
|
63
|
+
"200": { "$value": "#e5e5e5", "$type": "color" },
|
|
64
|
+
"300": { "$value": "#d4d4d4", "$type": "color" },
|
|
65
|
+
"400": { "$value": "#a3a3a3", "$type": "color" },
|
|
66
|
+
"500": { "$value": "#737373", "$type": "color" },
|
|
67
|
+
"600": { "$value": "#525252", "$type": "color" },
|
|
68
|
+
"700": { "$value": "#404040", "$type": "color" },
|
|
69
|
+
"800": { "$value": "#262626", "$type": "color" },
|
|
70
|
+
"900": { "$value": "#171717", "$type": "color" },
|
|
71
|
+
"950": { "$value": "#0a0a0a", "$type": "color" }
|
|
72
|
+
},
|
|
73
|
+
"white": { "$value": "#ffffff", "$type": "color" },
|
|
74
|
+
"black": { "$value": "#000000", "$type": "color" },
|
|
75
|
+
"tertiary-purple": {
|
|
76
|
+
"$value": "#8b5cf6",
|
|
77
|
+
"$type": "color",
|
|
78
|
+
"$description": "Tertiary accent — data viz, infrastructure tags"
|
|
79
|
+
},
|
|
80
|
+
"status": {
|
|
81
|
+
"danger": { "$value": "#ef4444", "$type": "color" },
|
|
82
|
+
"warning": { "$value": "#f59e0b", "$type": "color" },
|
|
83
|
+
"success": {
|
|
84
|
+
"$value": "#22c55e",
|
|
85
|
+
"$type": "color",
|
|
86
|
+
"$description": "Tailwind green-500 — VI manual canonical success color (replaces drifted #10b981 emerald)."
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
"size": {
|
|
91
|
+
"container": {
|
|
92
|
+
"text": {
|
|
93
|
+
"$value": "896px",
|
|
94
|
+
"$type": "dimension",
|
|
95
|
+
"$description": "Reading-focused (hero copy, FAQ)"
|
|
96
|
+
},
|
|
97
|
+
"content": { "$value": "1152px", "$type": "dimension", "$description": "Pricing, blog" },
|
|
98
|
+
"wide": { "$value": "1400px", "$type": "dimension", "$description": "Feature bento, navbar" }
|
|
99
|
+
},
|
|
100
|
+
"radius": {
|
|
101
|
+
"none": { "$value": "0", "$type": "dimension" },
|
|
102
|
+
"sm": { "$value": "0.25rem", "$type": "dimension" },
|
|
103
|
+
"md": { "$value": "0.375rem", "$type": "dimension" },
|
|
104
|
+
"lg": { "$value": "0.5rem", "$type": "dimension" },
|
|
105
|
+
"xl": { "$value": "0.75rem", "$type": "dimension" },
|
|
106
|
+
"2xl": { "$value": "1rem", "$type": "dimension" },
|
|
107
|
+
"3xl": { "$value": "1.5rem", "$type": "dimension" },
|
|
108
|
+
"full": { "$value": "9999px", "$type": "dimension" },
|
|
109
|
+
"button": {
|
|
110
|
+
"$value": "0.5rem",
|
|
111
|
+
"$type": "dimension",
|
|
112
|
+
"$description": "2026 button radius — Vercel/Linear/Cursor consensus"
|
|
113
|
+
},
|
|
114
|
+
"card": { "$value": "0.75rem", "$type": "dimension", "$description": "2026 card radius" },
|
|
115
|
+
"panel": {
|
|
116
|
+
"$value": "1rem",
|
|
117
|
+
"$type": "dimension",
|
|
118
|
+
"$description": "2026 bento/hero panel radius"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
"duration": {
|
|
123
|
+
"$description": "Four-rail motion duration scale (2026-05-14 governance). Names denote intent, not relative speed: micro = momentary feedback, flow = state transition, reveal = content unveil, cinematic = hero entrance.",
|
|
124
|
+
"micro": {
|
|
125
|
+
"$value": "100ms",
|
|
126
|
+
"$type": "duration",
|
|
127
|
+
"$description": "Micro-feedback: hover, focus, toggle, button press"
|
|
128
|
+
},
|
|
129
|
+
"flow": {
|
|
130
|
+
"$value": "200ms",
|
|
131
|
+
"$type": "duration",
|
|
132
|
+
"$description": "State flow: modal open, dropdown reveal, tab switch, default page transition"
|
|
133
|
+
},
|
|
134
|
+
"reveal": {
|
|
135
|
+
"$value": "300ms",
|
|
136
|
+
"$type": "duration",
|
|
137
|
+
"$description": "Content unveil: slide-in, expand, accordion, drawer"
|
|
138
|
+
},
|
|
139
|
+
"cinematic": {
|
|
140
|
+
"$value": "500ms",
|
|
141
|
+
"$type": "duration",
|
|
142
|
+
"$description": "Hero-grade entrance: landing reveal, large delight moments"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"easing": {
|
|
146
|
+
"in": { "$value": "cubic-bezier(0.4, 0, 1, 1)", "$type": "cubicBezier" },
|
|
147
|
+
"out": { "$value": "cubic-bezier(0, 0, 0.2, 1)", "$type": "cubicBezier" },
|
|
148
|
+
"in-out": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "cubicBezier" },
|
|
149
|
+
"spring": { "$value": "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "$type": "cubicBezier" }
|
|
150
|
+
},
|
|
151
|
+
"tracking": {
|
|
152
|
+
"$description": "Letter-spacing tokens — 2026 SaaS hero typography (Vercel Geist consensus).",
|
|
153
|
+
"display": { "$value": "-0.04em", "$type": "string", "$description": "Hero H1" },
|
|
154
|
+
"heading": { "$value": "-0.03em", "$type": "string", "$description": "Section H2/H3" },
|
|
155
|
+
"tight": { "$value": "-0.015em", "$type": "string", "$description": "Body emphasis" }
|
|
156
|
+
},
|
|
157
|
+
"leading": {
|
|
158
|
+
"$description": "Line-height tokens.",
|
|
159
|
+
"display": { "$value": "1.05", "$type": "string" },
|
|
160
|
+
"heading": { "$value": "1.15", "$type": "string" }
|
|
161
|
+
},
|
|
162
|
+
"ring": {
|
|
163
|
+
"$description": "Inset ring shorthand recipes — replaces shadow-2xl elevation per 2026 convention.",
|
|
164
|
+
"hairline": {
|
|
165
|
+
"$value": "inset 0 0 0 1px rgb(255 255 255 / 0.04)",
|
|
166
|
+
"$type": "string",
|
|
167
|
+
"$description": "Etched-glass hairline (light mode value, dark mode override in themes/dark.json)"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
"overlay": {
|
|
171
|
+
"$description": "Translucent surface overlays — used for dot patterns, subtle mesh tints, glass effects. Already-resolved color values (not aliases) so they work in any rgb()/rgba()/style context.",
|
|
172
|
+
"faint": {
|
|
173
|
+
"$value": "rgb(0 0 0 / 0.06)",
|
|
174
|
+
"$type": "color",
|
|
175
|
+
"$description": "Light-mode faint overlay (6% black)"
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"fontFamily": {
|
|
179
|
+
"$description": "Geist + Geist Mono primary (Vercel typography) with Noto Sans SC / PingFang SC / Microsoft YaHei CJK fallbacks. Replaces Poppins per VI 2026 update.",
|
|
180
|
+
"sans": {
|
|
181
|
+
"$value": "\"Geist\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
|
|
182
|
+
"$type": "fontFamily"
|
|
183
|
+
},
|
|
184
|
+
"cn": {
|
|
185
|
+
"$value": "\"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", \"vivo Sans\", sans-serif",
|
|
186
|
+
"$type": "fontFamily"
|
|
187
|
+
},
|
|
188
|
+
"display": { "$value": "\"Geist\", \"Noto Sans SC\", sans-serif", "$type": "fontFamily" },
|
|
189
|
+
"heading": { "$value": "\"Geist\", \"Noto Sans SC\", sans-serif", "$type": "fontFamily" },
|
|
190
|
+
"mono": {
|
|
191
|
+
"$value": "\"Geist Mono\", \"Fira Code\", ui-monospace, Consolas, \"Courier New\", monospace",
|
|
192
|
+
"$type": "fontFamily"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
"transition": {
|
|
196
|
+
"$description": "Composite tokens (W3C DTCG composite type). Combine duration + easing into a single value for the `transition` shorthand and a multi-stop `focus-ring` recipe.",
|
|
197
|
+
"default": {
|
|
198
|
+
"$type": "transition",
|
|
199
|
+
"$value": {
|
|
200
|
+
"duration": "200ms",
|
|
201
|
+
"timingFunction": "ease-out",
|
|
202
|
+
"delay": "0ms"
|
|
203
|
+
},
|
|
204
|
+
"$description": "Default state-flow transition — 200ms ease-out (matches {duration.flow}). Used by --transition shorthand."
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Semantic-level tokens — reference core via {color.x.y} aliases. Layer 2 of the cascade. Mode-agnostic; light/dark overrides live in tokens/themes/.",
|
|
4
|
+
"brand": {
|
|
5
|
+
"primary": {
|
|
6
|
+
"$value": "{color.nebutra-blue.500}",
|
|
7
|
+
"$type": "color",
|
|
8
|
+
"$description": "Brand primary — 云毓蓝"
|
|
9
|
+
},
|
|
10
|
+
"accent": {
|
|
11
|
+
"$value": "{color.nebutra-cyan.500}",
|
|
12
|
+
"$type": "color",
|
|
13
|
+
"$description": "Brand accent — 云毓青"
|
|
14
|
+
},
|
|
15
|
+
"tertiary": { "$value": "{color.tertiary-purple}", "$type": "color" },
|
|
16
|
+
"gradient": {
|
|
17
|
+
"primary": {
|
|
18
|
+
"$value": "linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%)",
|
|
19
|
+
"$type": "gradient",
|
|
20
|
+
"$description": "Brand gradient — Logo standard 135°"
|
|
21
|
+
},
|
|
22
|
+
"reverse": {
|
|
23
|
+
"$value": "linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%)",
|
|
24
|
+
"$type": "gradient"
|
|
25
|
+
},
|
|
26
|
+
"vertical": {
|
|
27
|
+
"$value": "linear-gradient(180deg, #0033fe 0%, #0bf1c3 100%)",
|
|
28
|
+
"$type": "gradient"
|
|
29
|
+
},
|
|
30
|
+
"radial": {
|
|
31
|
+
"$value": "radial-gradient(circle, #0bf1c3 0%, #0033fe 100%)",
|
|
32
|
+
"$type": "gradient"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"status": {
|
|
37
|
+
"danger": { "$value": "{color.status.danger}", "$type": "color" },
|
|
38
|
+
"warning": { "$value": "{color.status.warning}", "$type": "color" },
|
|
39
|
+
"success": { "$value": "{color.status.success}", "$type": "color" },
|
|
40
|
+
"info": {
|
|
41
|
+
"$value": "{brand.primary}",
|
|
42
|
+
"$type": "color",
|
|
43
|
+
"$description": "VI: Info = Brand Blue"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"container": {
|
|
47
|
+
"text": { "$value": "{size.container.text}", "$type": "dimension" },
|
|
48
|
+
"content": { "$value": "{size.container.content}", "$type": "dimension" },
|
|
49
|
+
"wide": { "$value": "{size.container.wide}", "$type": "dimension" }
|
|
50
|
+
},
|
|
51
|
+
"radius": {
|
|
52
|
+
"default": {
|
|
53
|
+
"$value": "{size.radius.md}",
|
|
54
|
+
"$type": "dimension",
|
|
55
|
+
"$description": "Geist-matching 6px"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
"motion": {
|
|
59
|
+
"$description": "Semantic motion layer — references the four-rail duration scale in core.json. Component code should consume these (or Tailwind duration-micro / duration-flow / duration-reveal / duration-cinematic utilities), never raw ms.",
|
|
60
|
+
"duration": {
|
|
61
|
+
"micro": { "$value": "{duration.micro}", "$type": "duration" },
|
|
62
|
+
"flow": { "$value": "{duration.flow}", "$type": "duration" },
|
|
63
|
+
"reveal": { "$value": "{duration.reveal}", "$type": "duration" },
|
|
64
|
+
"cinematic": { "$value": "{duration.cinematic}", "$type": "duration" }
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"transition": {
|
|
68
|
+
"duration": {
|
|
69
|
+
"$value": "{duration.flow}",
|
|
70
|
+
"$type": "duration",
|
|
71
|
+
"$description": "Default transition duration — 200ms flow rail."
|
|
72
|
+
},
|
|
73
|
+
"easing": {
|
|
74
|
+
"$value": "ease-out",
|
|
75
|
+
"$type": "string",
|
|
76
|
+
"$description": "ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1)."
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
"focusRing": {
|
|
80
|
+
"default": {
|
|
81
|
+
"$type": "string",
|
|
82
|
+
"$value": "0 0 0 2px hsl(var(--ring) / 0.4)",
|
|
83
|
+
"$description": "Single-layer translucent focus ring (2026 pattern). Legacy box-shadow consumers stay compatible; modern surfaces should prefer the global :focus-visible outline rule in static/base.css."
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Dark-dense — DevOps Dashboard. Compact radii, monospace font, green primary. Mirrors [data-theme=dark-dense].",
|
|
4
|
+
"theme": "dark-dense",
|
|
5
|
+
"color": {
|
|
6
|
+
"primary": { "$value": "oklch(0.696 0.17 162.5)", "$type": "color" },
|
|
7
|
+
"primary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
8
|
+
"secondary": { "$value": "oklch(0.527 0.154 163.2)", "$type": "color" },
|
|
9
|
+
"secondary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
10
|
+
"accent": { "$value": "oklch(0.765 0.163 163.4)", "$type": "color" },
|
|
11
|
+
"accent-foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
12
|
+
"background": { "$value": "oklch(0.112 0 0)", "$type": "color" },
|
|
13
|
+
"foreground": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
14
|
+
"card": { "$value": "oklch(0.162 0.004 285.9)", "$type": "color" },
|
|
15
|
+
"card-foreground": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
16
|
+
"popover": { "$value": "oklch(0.162 0.004 285.9)", "$type": "color" },
|
|
17
|
+
"popover-foreground": { "$value": "oklch(0.985 0 0)", "$type": "color" },
|
|
18
|
+
"muted": { "$value": "oklch(0.215 0.006 285.9)", "$type": "color" },
|
|
19
|
+
"muted-foreground": { "$value": "oklch(0.705 0.015 286)", "$type": "color" },
|
|
20
|
+
"border": { "$value": "oklch(0.215 0.006 285.9)", "$type": "color" },
|
|
21
|
+
"input": { "$value": "oklch(0.215 0.006 285.9)", "$type": "color" },
|
|
22
|
+
"ring": { "$value": "oklch(0.696 0.17 162.5)", "$type": "color" },
|
|
23
|
+
"primary-hover": {
|
|
24
|
+
"$value": "color-mix(in oklch, oklch(0.696 0.17 162.5), white 15%)",
|
|
25
|
+
"$type": "color"
|
|
26
|
+
},
|
|
27
|
+
"primary-active": {
|
|
28
|
+
"$value": "color-mix(in oklch, oklch(0.696 0.17 162.5), black 10%)",
|
|
29
|
+
"$type": "color"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"radius": {
|
|
33
|
+
"sm": { "$value": "0.125rem", "$type": "dimension" },
|
|
34
|
+
"md": { "$value": "0.25rem", "$type": "dimension" },
|
|
35
|
+
"lg": { "$value": "0.25rem", "$type": "dimension" },
|
|
36
|
+
"xl": { "$value": "0.375rem", "$type": "dimension" }
|
|
37
|
+
},
|
|
38
|
+
"fontFamily": {
|
|
39
|
+
"sans": {
|
|
40
|
+
"$value": "\"JetBrains Mono\", \"Fira Code\", ui-monospace, monospace",
|
|
41
|
+
"$type": "fontFamily"
|
|
42
|
+
},
|
|
43
|
+
"heading": {
|
|
44
|
+
"$value": "\"JetBrains Mono\", \"Fira Code\", ui-monospace, monospace",
|
|
45
|
+
"$type": "fontFamily"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Dark mode theme — 12-step scales inverted (1=darkest, 12=lightest) + shadcn HSL semantics + dark-mode brand alias overrides. Mirrors .dark in @nebutra/tokens/styles.css.",
|
|
4
|
+
"brand": {
|
|
5
|
+
"$description": "Dark-mode brand alias overrides. In dark mode the visible brand fills shift to lighter steps for AA contrast on dark surfaces.",
|
|
6
|
+
"primary": {
|
|
7
|
+
"$value": "{color.nebutra-blue.400}",
|
|
8
|
+
"$type": "color",
|
|
9
|
+
"$description": "Dark-mode brand primary — visible against dark surfaces (uses --blue-9 = nebutra-blue-400)."
|
|
10
|
+
},
|
|
11
|
+
"accent": {
|
|
12
|
+
"$value": "{color.nebutra-cyan.400}",
|
|
13
|
+
"$type": "color",
|
|
14
|
+
"$description": "Dark-mode brand accent — visible against dark surfaces (uses --cyan-9 = nebutra-cyan-400)."
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"status": {
|
|
18
|
+
"info": {
|
|
19
|
+
"$value": "{color.nebutra-blue.400}",
|
|
20
|
+
"$type": "color",
|
|
21
|
+
"$description": "Dark-mode info color — equals dark brand-primary."
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"ring": {
|
|
25
|
+
"hairline": {
|
|
26
|
+
"$value": "inset 0 0 0 1px rgb(255 255 255 / 0.06)",
|
|
27
|
+
"$type": "string",
|
|
28
|
+
"$description": "Hairline override — more visible on dark background"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"overlay": {
|
|
32
|
+
"faint": {
|
|
33
|
+
"$value": "rgb(255 255 255 / 0.06)",
|
|
34
|
+
"$type": "color",
|
|
35
|
+
"$description": "Dark-mode faint overlay (6% white) — inverted from light"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"scale": {
|
|
39
|
+
"neutral": {
|
|
40
|
+
"1": { "$value": "{color.nebutra-neutral.950}", "$type": "color" },
|
|
41
|
+
"2": { "$value": "{color.nebutra-neutral.900}", "$type": "color" },
|
|
42
|
+
"3": { "$value": "{color.nebutra-neutral.800}", "$type": "color" },
|
|
43
|
+
"4": { "$value": "{color.nebutra-neutral.700}", "$type": "color" },
|
|
44
|
+
"5": { "$value": "{color.nebutra-neutral.600}", "$type": "color" },
|
|
45
|
+
"6": { "$value": "{color.nebutra-gray.900}", "$type": "color" },
|
|
46
|
+
"7": { "$value": "{color.nebutra-gray.800}", "$type": "color" },
|
|
47
|
+
"8": { "$value": "{color.nebutra-gray.700}", "$type": "color" },
|
|
48
|
+
"9": { "$value": "{color.nebutra-neutral.400}", "$type": "color" },
|
|
49
|
+
"10": { "$value": "{color.nebutra-neutral.300}", "$type": "color" },
|
|
50
|
+
"11": { "$value": "{color.nebutra-neutral.200}", "$type": "color" },
|
|
51
|
+
"12": { "$value": "{color.nebutra-neutral.50}", "$type": "color" }
|
|
52
|
+
},
|
|
53
|
+
"blue": {
|
|
54
|
+
"1": { "$value": "{color.nebutra-blue.950}", "$type": "color" },
|
|
55
|
+
"2": { "$value": "{color.nebutra-blue.900}", "$type": "color" },
|
|
56
|
+
"3": { "$value": "{color.nebutra-blue.800}", "$type": "color" },
|
|
57
|
+
"4": { "$value": "{color.nebutra-blue.700}", "$type": "color" },
|
|
58
|
+
"5": { "$value": "{color.nebutra-blue.600}", "$type": "color" },
|
|
59
|
+
"6": { "$value": "{color.nebutra-blue.800}", "$type": "color" },
|
|
60
|
+
"7": { "$value": "{color.nebutra-blue.700}", "$type": "color" },
|
|
61
|
+
"8": { "$value": "{color.nebutra-blue.600}", "$type": "color" },
|
|
62
|
+
"9": { "$value": "{color.nebutra-blue.400}", "$type": "color" },
|
|
63
|
+
"10": { "$value": "{color.nebutra-blue.300}", "$type": "color" },
|
|
64
|
+
"11": { "$value": "{color.nebutra-blue.200}", "$type": "color" },
|
|
65
|
+
"12": { "$value": "{color.nebutra-blue.100}", "$type": "color" }
|
|
66
|
+
},
|
|
67
|
+
"cyan": {
|
|
68
|
+
"1": { "$value": "{color.nebutra-cyan.950}", "$type": "color" },
|
|
69
|
+
"2": { "$value": "{color.nebutra-cyan.900}", "$type": "color" },
|
|
70
|
+
"3": { "$value": "{color.nebutra-cyan.800}", "$type": "color" },
|
|
71
|
+
"4": { "$value": "{color.nebutra-cyan.700}", "$type": "color" },
|
|
72
|
+
"5": { "$value": "{color.nebutra-cyan.600}", "$type": "color" },
|
|
73
|
+
"6": { "$value": "{color.nebutra-cyan.800}", "$type": "color" },
|
|
74
|
+
"7": { "$value": "{color.nebutra-cyan.700}", "$type": "color" },
|
|
75
|
+
"8": { "$value": "{color.nebutra-cyan.600}", "$type": "color" },
|
|
76
|
+
"9": { "$value": "{color.nebutra-cyan.400}", "$type": "color" },
|
|
77
|
+
"10": { "$value": "{color.nebutra-cyan.300}", "$type": "color" },
|
|
78
|
+
"11": { "$value": "{color.nebutra-cyan.200}", "$type": "color" },
|
|
79
|
+
"12": { "$value": "{color.nebutra-cyan.100}", "$type": "color" }
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"shadcn": {
|
|
83
|
+
"background": { "$value": "222 47% 4%", "$type": "string" },
|
|
84
|
+
"foreground": { "$value": "210 40% 98%", "$type": "string" },
|
|
85
|
+
"card": { "$value": "222 47% 7%", "$type": "string" },
|
|
86
|
+
"card-foreground": { "$value": "210 40% 98%", "$type": "string" },
|
|
87
|
+
"popover": { "$value": "222 47% 7%", "$type": "string" },
|
|
88
|
+
"popover-foreground": { "$value": "210 40% 98%", "$type": "string" },
|
|
89
|
+
"primary": { "$value": "228 90% 72%", "$type": "string" },
|
|
90
|
+
"primary-foreground": { "$value": "222 47% 4%", "$type": "string" },
|
|
91
|
+
"secondary": { "$value": "217 33% 17%", "$type": "string" },
|
|
92
|
+
"secondary-foreground": { "$value": "210 40% 98%", "$type": "string" },
|
|
93
|
+
"muted": { "$value": "217 33% 17%", "$type": "string" },
|
|
94
|
+
"muted-foreground": { "$value": "215 20% 65%", "$type": "string" },
|
|
95
|
+
"accent": { "$value": "228 100% 12%", "$type": "string" },
|
|
96
|
+
"accent-foreground": { "$value": "228 95% 67%", "$type": "string" },
|
|
97
|
+
"destructive": { "$value": "0 63% 31%", "$type": "string" },
|
|
98
|
+
"destructive-foreground": { "$value": "210 40% 98%", "$type": "string" },
|
|
99
|
+
"success": { "$value": "142 76% 36%", "$type": "string" },
|
|
100
|
+
"success-foreground": { "$value": "222 47% 4%", "$type": "string" },
|
|
101
|
+
"warning": { "$value": "38 80% 45%", "$type": "string" },
|
|
102
|
+
"warning-foreground": { "$value": "222 47% 4%", "$type": "string" },
|
|
103
|
+
"info": { "$value": "228 95% 67%", "$type": "string" },
|
|
104
|
+
"info-foreground": { "$value": "222 47% 4%", "$type": "string" },
|
|
105
|
+
"border": { "$value": "0 0% 14.9%", "$type": "string" },
|
|
106
|
+
"input": { "$value": "0 0% 14.9%", "$type": "string" },
|
|
107
|
+
"ring": {
|
|
108
|
+
"$value": "0 0% 88%",
|
|
109
|
+
"$type": "string",
|
|
110
|
+
"$description": "Focus ring (dark mode) — neutral light gray. Mirrors light-mode neutral foreground choice."
|
|
111
|
+
},
|
|
112
|
+
"sidebar": { "$value": "222 47% 6%", "$type": "string" },
|
|
113
|
+
"sidebar-foreground": { "$value": "210 40% 96%", "$type": "string" },
|
|
114
|
+
"sidebar-primary": { "$value": "228 95% 67%", "$type": "string" },
|
|
115
|
+
"sidebar-primary-foreground": { "$value": "222 47% 4%", "$type": "string" },
|
|
116
|
+
"sidebar-accent": { "$value": "228 100% 12%", "$type": "string" },
|
|
117
|
+
"sidebar-accent-foreground": { "$value": "228 95% 67%", "$type": "string" },
|
|
118
|
+
"sidebar-border": { "$value": "0 0% 14.9%", "$type": "string" },
|
|
119
|
+
"sidebar-ring": { "$value": "228 95% 67%", "$type": "string" },
|
|
120
|
+
"chart-1": { "$value": "228 95% 67%", "$type": "string" },
|
|
121
|
+
"chart-2": { "$value": "168 96% 54%", "$type": "string" },
|
|
122
|
+
"chart-3": { "$value": "228 100% 82%", "$type": "string" },
|
|
123
|
+
"chart-4": { "$value": "168 100% 75%", "$type": "string" },
|
|
124
|
+
"chart-5": { "$value": "228 100% 50%", "$type": "string" }
|
|
125
|
+
},
|
|
126
|
+
"ds": {
|
|
127
|
+
"blue-200": { "$value": "oklch(25.45% 0.0811 255.8)", "$type": "color" },
|
|
128
|
+
"blue-700": { "$value": "oklch(57.61% 0.2321 258.23)", "$type": "color" },
|
|
129
|
+
"blue-900": { "$value": "oklch(71.7% 0.1648 250.79360374054167)", "$type": "color" },
|
|
130
|
+
"red-200": { "$value": "oklch(25.93% 0.0834 19.02)", "$type": "color" },
|
|
131
|
+
"red-700": { "$value": "oklch(62.56% 0.2234 23.03)", "$type": "color" },
|
|
132
|
+
"red-900": { "$value": "oklch(69.96% 0.2136 22.03)", "$type": "color" },
|
|
133
|
+
"amber-200": { "$value": "oklch(24.95% 0.0642 64.78)", "$type": "color" },
|
|
134
|
+
"amber-700": { "$value": "oklch(81.87% 0.1969 76.46)", "$type": "color" },
|
|
135
|
+
"amber-900": { "$value": "oklch(77.21% 0.1991 64.28)", "$type": "color" },
|
|
136
|
+
"green-200": { "$value": "oklch(27.12% 0.0895 150.09)", "$type": "color" },
|
|
137
|
+
"green-700": { "$value": "oklch(64.58% 0.199 147.27)", "$type": "color" },
|
|
138
|
+
"green-900": { "$value": "oklch(73.1% 0.2158 148.29)", "$type": "color" },
|
|
139
|
+
"teal-300": { "$value": "oklch(31.5% 0.0767 180.99)", "$type": "color" },
|
|
140
|
+
"teal-700": { "$value": "oklch(64.92% 0.1403 181.95)", "$type": "color" },
|
|
141
|
+
"teal-900": { "$value": "oklch(74.56% 0.1765 182.8)", "$type": "color" },
|
|
142
|
+
"purple-200": { "$value": "oklch(25.91% 0.0921 314.41)", "$type": "color" },
|
|
143
|
+
"purple-700": { "$value": "oklch(55.5% 0.2186 306.12)", "$type": "color" },
|
|
144
|
+
"purple-900": { "$value": "oklch(69.87% 0.2037 309.51)", "$type": "color" },
|
|
145
|
+
"pink-300": { "$value": "oklch(31.15% 0.1067 355.93)", "$type": "color" },
|
|
146
|
+
"pink-700": { "$value": "oklch(63.52% 0.2346 1.01)", "$type": "color" },
|
|
147
|
+
"pink-900": { "$value": "oklch(69.36% 0.2223 3.91)", "$type": "color" },
|
|
148
|
+
"gray-100": {
|
|
149
|
+
"$value": "hsla(0, 0%, 10%, 1)",
|
|
150
|
+
"$type": "color",
|
|
151
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.232 0 0)" }
|
|
152
|
+
},
|
|
153
|
+
"gray-200": {
|
|
154
|
+
"$value": "hsla(0, 0%, 12%, 1)",
|
|
155
|
+
"$type": "color",
|
|
156
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.259 0 0)" }
|
|
157
|
+
},
|
|
158
|
+
"gray-500": {
|
|
159
|
+
"$value": "hsla(0, 0%, 27%, 1)",
|
|
160
|
+
"$type": "color",
|
|
161
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.409 0 0)" }
|
|
162
|
+
},
|
|
163
|
+
"gray-600": {
|
|
164
|
+
"$value": "hsla(0, 0%, 53%, 1)",
|
|
165
|
+
"$type": "color",
|
|
166
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.59 0 0)" }
|
|
167
|
+
},
|
|
168
|
+
"gray-700": {
|
|
169
|
+
"$value": "hsla(0, 0%, 56%, 1)",
|
|
170
|
+
"$type": "color",
|
|
171
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.598 0 0)" }
|
|
172
|
+
},
|
|
173
|
+
"gray-1000": {
|
|
174
|
+
"$value": "hsla(0, 0%, 93%, 1)",
|
|
175
|
+
"$type": "color",
|
|
176
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.94 0 0)" }
|
|
177
|
+
},
|
|
178
|
+
"background-100": {
|
|
179
|
+
"$value": "hsla(0, 0%, 4%, 1)",
|
|
180
|
+
"$type": "color",
|
|
181
|
+
"$extensions": { "com.nebutra.oklch": "oklch(0.143 0 0)" }
|
|
182
|
+
},
|
|
183
|
+
"trial-start": { "$value": "rgb(0, 112, 243)", "$type": "color" },
|
|
184
|
+
"trial-end": { "$value": "rgb(248, 28, 229)", "$type": "color" },
|
|
185
|
+
"turbo-start": { "$value": "#ff1e56", "$type": "color" },
|
|
186
|
+
"turbo-end": { "$value": "#0096ff", "$type": "color" }
|
|
187
|
+
},
|
|
188
|
+
"elevation": {
|
|
189
|
+
"xs": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.3)", "$type": "shadow" },
|
|
190
|
+
"sm": {
|
|
191
|
+
"$value": "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4)",
|
|
192
|
+
"$type": "shadow"
|
|
193
|
+
},
|
|
194
|
+
"md": {
|
|
195
|
+
"$value": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
|
|
196
|
+
"$type": "shadow"
|
|
197
|
+
},
|
|
198
|
+
"lg": {
|
|
199
|
+
"$value": "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)",
|
|
200
|
+
"$type": "shadow"
|
|
201
|
+
},
|
|
202
|
+
"xl": {
|
|
203
|
+
"$value": "0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6)",
|
|
204
|
+
"$type": "shadow"
|
|
205
|
+
},
|
|
206
|
+
"2xl": { "$value": "0 25px 50px -12px rgb(0 0 0 / 0.8)", "$type": "shadow" },
|
|
207
|
+
"brand": {
|
|
208
|
+
"$value": "0 0 0 1px rgb(92 124 250 / 0.25), 0 4px 20px -2px rgb(92 124 250 / 0.3)",
|
|
209
|
+
"$type": "shadow"
|
|
210
|
+
},
|
|
211
|
+
"brand-lg": {
|
|
212
|
+
"$value": "0 0 0 1px rgb(92 124 250 / 0.3), 0 8px 40px -4px rgb(92 124 250 / 0.4)",
|
|
213
|
+
"$type": "shadow"
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"$description": "Gradient — Marketing/Growth theme. Light surface + brand-blue primary. Mirrors [data-theme=gradient].",
|
|
4
|
+
"theme": "gradient",
|
|
5
|
+
"color": {
|
|
6
|
+
"primary": { "$value": "oklch(0.546 0.245 262.9)", "$type": "color" },
|
|
7
|
+
"primary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
8
|
+
"secondary": { "$value": "oklch(0.707 0.165 254.6)", "$type": "color" },
|
|
9
|
+
"secondary-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
10
|
+
"accent": { "$value": "oklch(0.623 0.214 259.1)", "$type": "color" },
|
|
11
|
+
"accent-foreground": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
12
|
+
"background": { "$value": "oklch(1 0 0)", "$type": "color" },
|
|
13
|
+
"foreground": { "$value": "oklch(0.141 0.005 285.9)", "$type": "color" },
|
|
14
|
+
"card": { "$value": "oklch(0.985 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.546 0.245 262.9)", "$type": "color" },
|
|
23
|
+
"primary-hover": {
|
|
24
|
+
"$value": "color-mix(in oklch, oklch(0.546 0.245 262.9), black 10%)",
|
|
25
|
+
"$type": "color"
|
|
26
|
+
},
|
|
27
|
+
"primary-active": {
|
|
28
|
+
"$value": "color-mix(in oklch, oklch(0.546 0.245 262.9), 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(0 0 0 / 0.05)", "$type": "shadow" },
|
|
40
|
+
"md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1)", "$type": "shadow" },
|
|
41
|
+
"lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1)", "$type": "shadow" },
|
|
42
|
+
"xl": { "$value": "0 20px 25px -5px rgb(0 0 0 / 0.1)", "$type": "shadow" }
|
|
43
|
+
}
|
|
44
|
+
}
|