@orange-halo/tokens 1.0.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/dist/themes/dark.css +127 -0
- package/dist/themes/light.css +46 -0
- package/dist/tokens.css +399 -0
- package/dist/tokens.js +422 -0
- package/dist/tokens.json +667 -0
- package/package.json +40 -0
- package/tokens/component.tokens.json +184 -0
- package/tokens/global.tokens.json +230 -0
- package/tokens/semantic.tokens.json +219 -0
- package/tokens/themes/dark.tokens.json +73 -0
- package/tokens/themes/light.tokens.json +57 -0
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Semantic Design Tokens — Orange Halo Visual DNA. Purpose-driven warmth.",
|
|
3
|
+
"color": {
|
|
4
|
+
"brand": {
|
|
5
|
+
"$description": "Brand colors — Orange Halo warmth",
|
|
6
|
+
"primary": { "$type": "color", "$value": "{color.orange.900}", "$description": "Primary brand action — WCAG AA" },
|
|
7
|
+
"primaryHover": { "$type": "color", "$value": "{color.orange.950}", "$description": "Hover state" },
|
|
8
|
+
"primaryActive": { "$type": "color", "$value": "{color.orange.950}", "$description": "Active/pressed state" },
|
|
9
|
+
"primarySubtle": { "$type": "color", "$value": "{color.orange.50}", "$description": "Subtle tint" },
|
|
10
|
+
"primaryMuted": { "$type": "color", "$value": "{color.orange.100}", "$description": "Background tint" },
|
|
11
|
+
"highlight": { "$type": "color", "$value": "{color.honey.400}", "$description": "Golden accent" },
|
|
12
|
+
"highlightSubtle": { "$type": "color", "$value": "{color.honey.100}" }
|
|
13
|
+
},
|
|
14
|
+
"accent": {
|
|
15
|
+
"$description": "Blue accent — modern counterbalance for CTAs",
|
|
16
|
+
"default": { "$type": "color", "$value": "{color.blue.500}", "$description": "Signature blue accent" },
|
|
17
|
+
"hover": { "$type": "color", "$value": "{color.blue.600}" },
|
|
18
|
+
"active": { "$type": "color", "$value": "{color.blue.700}" },
|
|
19
|
+
"subtle": { "$type": "color", "$value": "{color.blue.50}" },
|
|
20
|
+
"muted": { "$type": "color", "$value": "{color.blue.100}" },
|
|
21
|
+
"shadow": { "$type": "color", "$value": "{color.blue.200}", "$description": "Chunky shadow for accent" }
|
|
22
|
+
},
|
|
23
|
+
"feedback": {
|
|
24
|
+
"$description": "Feedback colors — warm-tinted",
|
|
25
|
+
"success": { "$type": "color", "$value": "{color.green.600}" },
|
|
26
|
+
"successSubtle": { "$type": "color", "$value": "{color.green.50}" },
|
|
27
|
+
"successMuted": { "$type": "color", "$value": "{color.green.100}" },
|
|
28
|
+
"error": { "$type": "color", "$value": "{color.red.600}" },
|
|
29
|
+
"errorHover": { "$type": "color", "$value": "{color.red.700}", "$description": "Error hover/active state" },
|
|
30
|
+
"errorSubtle": { "$type": "color", "$value": "{color.red.50}" },
|
|
31
|
+
"errorMuted": { "$type": "color", "$value": "{color.red.100}" },
|
|
32
|
+
"errorShadow": { "$type": "color", "$value": "{shadow.chunky.error}", "$description": "Error shadow color" },
|
|
33
|
+
"warning": { "$type": "color", "$value": "{color.honey.700}" },
|
|
34
|
+
"warningSubtle": { "$type": "color", "$value": "{color.honey.50}" },
|
|
35
|
+
"warningMuted": { "$type": "color", "$value": "{color.honey.100}" },
|
|
36
|
+
"info": { "$type": "color", "$value": "{color.blue.500}" },
|
|
37
|
+
"infoSubtle": { "$type": "color", "$value": "{color.blue.50}" },
|
|
38
|
+
"infoMuted": { "$type": "color", "$value": "{color.blue.100}" }
|
|
39
|
+
},
|
|
40
|
+
"surface": {
|
|
41
|
+
"$description": "Surface system — designed surfaces, not flat planes",
|
|
42
|
+
"base": { "$type": "color", "$value": "{color.warm.cream}", "$description": "Page background — warm off-white" },
|
|
43
|
+
"raised": { "$type": "color", "$value": "{color.warm.linen}", "$description": "Cards, panels — slight lift" },
|
|
44
|
+
"sunlit": { "$type": "color", "$value": "{color.warm.cream}", "$description": "Featured — use with gradient" },
|
|
45
|
+
"inset": { "$type": "color", "$value": "{color.warm.parchment}", "$description": "Inputs, wells — pressed in" },
|
|
46
|
+
"white": { "$type": "color", "$value": "{color.white}", "$description": "Pure white for focus/highlight states" },
|
|
47
|
+
"overlay": { "$type": "color", "$value": "rgba(61, 50, 41, 0.4)", "$description": "Modal backdrop — warm" },
|
|
48
|
+
"disabled": { "$type": "color", "$value": "{color.warm.sand}", "$description": "Quiet disabled" },
|
|
49
|
+
"hover": { "$type": "color", "$value": "#FFF4E6", "$description": "Warm hover tint" },
|
|
50
|
+
"activePressed": { "$type": "color", "$value": "#F0EBE3", "$description": "Active/pressed surface" }
|
|
51
|
+
},
|
|
52
|
+
"border": {
|
|
53
|
+
"$description": "Border colors — visible and intentional",
|
|
54
|
+
"default": { "$type": "color", "$value": "{color.warm.sand}", "$description": "Standard border" },
|
|
55
|
+
"subtle": { "$type": "color", "$value": "{color.warm.parchment}", "$description": "Subtle dividers" },
|
|
56
|
+
"emphasis": { "$type": "color", "$value": "{color.warm.driftwood}", "$description": "Strong border for form elements" },
|
|
57
|
+
"hover": { "$type": "color", "$value": "{color.terracotta.600}", "$description": "Hover border — darker for feedback" },
|
|
58
|
+
"focus": { "$type": "color", "$value": "{color.orange.900}", "$description": "Focus ring — warm orange" },
|
|
59
|
+
"focusInner": { "$type": "color", "$value": "{color.orange.900}", "$description": "Inner focus ring" },
|
|
60
|
+
"disabled": { "$type": "color", "$value": "{color.warm.parchment}" },
|
|
61
|
+
"brand": { "$type": "color", "$value": "rgba(197, 67, 0, 0.25)", "$description": "Brand-tinted border" }
|
|
62
|
+
},
|
|
63
|
+
"text": {
|
|
64
|
+
"$description": "Text colors — calm and readable, not stark",
|
|
65
|
+
"primary": { "$type": "color", "$value": "{color.warm.walnut}", "$description": "Primary text — warm brown" },
|
|
66
|
+
"secondary": { "$type": "color", "$value": "{color.warm.driftwood}", "$description": "Secondary text" },
|
|
67
|
+
"disabled": { "$type": "color", "$value": "{color.warm.dune}", "$description": "Disabled text" },
|
|
68
|
+
"inverse": { "$type": "color", "$value": "{color.warm.cream}", "$description": "On dark backgrounds" },
|
|
69
|
+
"link": { "$type": "color", "$value": "{color.orange.900}", "$description": "Link text" },
|
|
70
|
+
"linkHover": { "$type": "color", "$value": "{color.orange.950}", "$description": "Link hover" },
|
|
71
|
+
"brand": { "$type": "color", "$value": "{color.orange.900}" },
|
|
72
|
+
"onBrand": { "$type": "color", "$value": "{color.white}", "$description": "Light text on dark brand bg" },
|
|
73
|
+
"onAccent": { "$type": "color", "$value": "{color.white}", "$description": "Light text on dark accent bg" }
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"typography": {
|
|
77
|
+
"$description": "Bricolage Grotesque — playful, crafted, warm",
|
|
78
|
+
"heading": {
|
|
79
|
+
"fontFamily": { "$type": "fontFamily", "$value": "{font.family.display}" },
|
|
80
|
+
"h1": {
|
|
81
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.4xl}" },
|
|
82
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.bold}" },
|
|
83
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.tight}" },
|
|
84
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.tighter}" }
|
|
85
|
+
},
|
|
86
|
+
"h2": {
|
|
87
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.3xl}" },
|
|
88
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" },
|
|
89
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.tight}" },
|
|
90
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.tight}" }
|
|
91
|
+
},
|
|
92
|
+
"h3": {
|
|
93
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.2xl}" },
|
|
94
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" },
|
|
95
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.snug}" },
|
|
96
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.tight}" }
|
|
97
|
+
},
|
|
98
|
+
"h4": {
|
|
99
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.xl}" },
|
|
100
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
|
|
101
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.snug}" },
|
|
102
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.normal}" }
|
|
103
|
+
},
|
|
104
|
+
"h5": {
|
|
105
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.lg}" },
|
|
106
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
|
|
107
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" }
|
|
108
|
+
},
|
|
109
|
+
"h6": {
|
|
110
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.base}" },
|
|
111
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
|
|
112
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" }
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"body": {
|
|
116
|
+
"fontFamily": { "$type": "fontFamily", "$value": "{font.family.sans}" },
|
|
117
|
+
"lg": {
|
|
118
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.lg}" },
|
|
119
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.normal}" },
|
|
120
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.relaxed}" }
|
|
121
|
+
},
|
|
122
|
+
"base": {
|
|
123
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.base}" },
|
|
124
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.normal}" },
|
|
125
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" }
|
|
126
|
+
},
|
|
127
|
+
"sm": {
|
|
128
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
|
|
129
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.normal}" },
|
|
130
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" },
|
|
131
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" }
|
|
132
|
+
},
|
|
133
|
+
"xs": {
|
|
134
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.xs}" },
|
|
135
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.normal}" },
|
|
136
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" },
|
|
137
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" }
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
"label": {
|
|
141
|
+
"fontFamily": { "$type": "fontFamily", "$value": "{font.family.sans}" },
|
|
142
|
+
"base": {
|
|
143
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
|
|
144
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
|
|
145
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}", "$description": "1.5 for WCAG 1.4.12" },
|
|
146
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" }
|
|
147
|
+
},
|
|
148
|
+
"sm": {
|
|
149
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.xs}" },
|
|
150
|
+
"fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
|
|
151
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}", "$description": "1.5 for WCAG 1.4.12" },
|
|
152
|
+
"letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" }
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
"code": {
|
|
156
|
+
"fontFamily": { "$type": "fontFamily", "$value": "{font.family.mono}" },
|
|
157
|
+
"fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
|
|
158
|
+
"lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" }
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
"spacing": {
|
|
162
|
+
"layout": {
|
|
163
|
+
"$description": "Generous layout spacing",
|
|
164
|
+
"page": { "$type": "dimension", "$value": "{spacing.6}" },
|
|
165
|
+
"section": { "$type": "dimension", "$value": "{spacing.12}" },
|
|
166
|
+
"stack": { "$type": "dimension", "$value": "{spacing.5}" },
|
|
167
|
+
"inline": { "$type": "dimension", "$value": "{spacing.4}" }
|
|
168
|
+
},
|
|
169
|
+
"component": {
|
|
170
|
+
"$description": "Component-level spacing",
|
|
171
|
+
"xs": { "$type": "dimension", "$value": "{spacing.1-5}" },
|
|
172
|
+
"sm": { "$type": "dimension", "$value": "{spacing.2-5}" },
|
|
173
|
+
"md": { "$type": "dimension", "$value": "{spacing.3-5}" },
|
|
174
|
+
"lg": { "$type": "dimension", "$value": "{spacing.5}" },
|
|
175
|
+
"xl": { "$type": "dimension", "$value": "{spacing.7}" }
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"shape": {
|
|
179
|
+
"$description": "Friendly soft corners",
|
|
180
|
+
"interactive": { "$type": "dimension", "$value": "{radius.sm}", "$description": "Buttons, inputs (6px)" },
|
|
181
|
+
"container": { "$type": "dimension", "$value": "{radius.md}", "$description": "Cards, panels (10px)" },
|
|
182
|
+
"large": { "$type": "dimension", "$value": "{radius.lg}", "$description": "Modals (14px)" },
|
|
183
|
+
"small": { "$type": "dimension", "$value": "{radius.xs}", "$description": "Chips, tags (4px)" },
|
|
184
|
+
"pill": { "$type": "dimension", "$value": "{radius.full}", "$description": "Badges, avatars" }
|
|
185
|
+
},
|
|
186
|
+
"elevation": {
|
|
187
|
+
"$description": "Warm shadows with visible depth",
|
|
188
|
+
"none": { "$type": "shadow", "$value": "{shadow.none}" },
|
|
189
|
+
"soft": { "$type": "shadow", "$value": "{shadow.soft}", "$description": "Cards, raised elements" },
|
|
190
|
+
"medium": { "$type": "shadow", "$value": "{shadow.medium}", "$description": "Dropdowns, popovers" },
|
|
191
|
+
"strong": { "$type": "shadow", "$value": "{shadow.strong}", "$description": "Modals, dialogs" },
|
|
192
|
+
"glow": { "$type": "shadow", "$value": "{shadow.glow}", "$description": "Focus ring" },
|
|
193
|
+
"inset": { "$type": "shadow", "$value": "{shadow.inset}", "$description": "Inputs, wells" }
|
|
194
|
+
},
|
|
195
|
+
"motion": {
|
|
196
|
+
"$description": "Relaxed, playful motion",
|
|
197
|
+
"quick": { "$type": "duration", "$value": "{motion.duration.quick}" },
|
|
198
|
+
"snappy": { "$type": "duration", "$value": "{motion.duration.snappy}" },
|
|
199
|
+
"gentle": { "$type": "duration", "$value": "{motion.duration.gentle}" },
|
|
200
|
+
"relaxed": { "$type": "duration", "$value": "{motion.duration.relaxed}" },
|
|
201
|
+
"slow": { "$type": "duration", "$value": "{motion.duration.slow}" },
|
|
202
|
+
"easeGentle": { "$type": "cubicBezier", "$value": "{motion.easing.gentle}" },
|
|
203
|
+
"easeOut": { "$type": "cubicBezier", "$value": "{motion.easing.out}" },
|
|
204
|
+
"easePlayful": { "$type": "cubicBezier", "$value": "{motion.easing.playful}" }
|
|
205
|
+
},
|
|
206
|
+
"shadow": {
|
|
207
|
+
"$description": "Chunky offset shadows for playful tactile feel",
|
|
208
|
+
"primary": { "$type": "color", "$value": "{shadow.chunky.primary}", "$description": "Primary buttons" },
|
|
209
|
+
"secondary": { "$type": "color", "$value": "{shadow.chunky.secondary}", "$description": "Secondary/form elements" },
|
|
210
|
+
"accent": { "$type": "color", "$value": "{shadow.chunky.accent}", "$description": "Accent buttons" },
|
|
211
|
+
"error": { "$type": "color", "$value": "{shadow.chunky.error}", "$description": "Error state" }
|
|
212
|
+
},
|
|
213
|
+
"focus": {
|
|
214
|
+
"$description": "Warm, friendly focus ring",
|
|
215
|
+
"ringWidth": { "$type": "dimension", "$value": "3px" },
|
|
216
|
+
"ringColor": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)" },
|
|
217
|
+
"glowColor": { "$type": "color", "$value": "rgba(197, 67, 0, 0.15)" }
|
|
218
|
+
}
|
|
219
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Dark Theme — warm walnut base, cozy evening Orange Halo",
|
|
3
|
+
"color": {
|
|
4
|
+
"brand": {
|
|
5
|
+
"$description": "Lighter orange for dark backgrounds",
|
|
6
|
+
"primary": { "$type": "color", "$value": "#E8A838", "$description": "Honey gold (5.2:1 on walnut)" },
|
|
7
|
+
"primaryHover": { "$type": "color", "$value": "#F0B848" },
|
|
8
|
+
"primaryActive": { "$type": "color", "$value": "#D4922C" },
|
|
9
|
+
"primarySubtle": { "$type": "color", "$value": "#3D3229" },
|
|
10
|
+
"primaryMuted": { "$type": "color", "$value": "#4A3D32" },
|
|
11
|
+
"highlight": { "$type": "color", "$value": "#F0C860" },
|
|
12
|
+
"highlightSubtle": { "$type": "color", "$value": "#3D3829" }
|
|
13
|
+
},
|
|
14
|
+
"accent": {
|
|
15
|
+
"$description": "Lighter eucalyptus for dark backgrounds",
|
|
16
|
+
"default": { "$type": "color", "$value": "#7AA3A4", "$description": "Light teal (4.8:1)" },
|
|
17
|
+
"hover": { "$type": "color", "$value": "#8FB4B5" },
|
|
18
|
+
"subtle": { "$type": "color", "$value": "#2A3636" },
|
|
19
|
+
"muted": { "$type": "color", "$value": "#344242" }
|
|
20
|
+
},
|
|
21
|
+
"feedback": {
|
|
22
|
+
"success": { "$type": "color", "$value": "#7AB87C", "$description": "Light green (5.0:1)" },
|
|
23
|
+
"successSubtle": { "$type": "color", "$value": "#2A3629" },
|
|
24
|
+
"error": { "$type": "color", "$value": "#E08F8D", "$description": "Light red (5.0:1 on base, 5.0:1 on raised)" },
|
|
25
|
+
"errorSubtle": { "$type": "color", "$value": "#3D2A29" },
|
|
26
|
+
"warning": { "$type": "color", "$value": "#E8B050", "$description": "Light amber (5.4:1)" },
|
|
27
|
+
"warningSubtle": { "$type": "color", "$value": "#3D3529" },
|
|
28
|
+
"info": { "$type": "color", "$value": "#7AA3A4" },
|
|
29
|
+
"infoSubtle": { "$type": "color", "$value": "#2A3636" }
|
|
30
|
+
},
|
|
31
|
+
"surface": {
|
|
32
|
+
"$description": "Warm dark surfaces",
|
|
33
|
+
"base": { "$type": "color", "$value": "#2A2420", "$description": "Deep walnut" },
|
|
34
|
+
"raised": { "$type": "color", "$value": "#3D3229", "$description": "Warm dark card" },
|
|
35
|
+
"sunlit": { "$type": "color", "$value": "#44382C", "$description": "Slightly warmer than raised — use with gradient overlay" },
|
|
36
|
+
"inset": { "$type": "color", "$value": "#1F1A17", "$description": "Darker inset" },
|
|
37
|
+
"white": { "$type": "color", "$value": "#F5F0E8", "$description": "Flips to warm white in dark" },
|
|
38
|
+
"overlay": { "$type": "color", "$value": "rgba(15, 12, 10, 0.7)" },
|
|
39
|
+
"hover": { "$type": "color", "$value": "#4A3F33", "$description": "Distinct hover — lighter than raised" },
|
|
40
|
+
"activePressed": { "$type": "color", "$value": "#352E28" },
|
|
41
|
+
"disabled": { "$type": "color", "$value": "#352E28" }
|
|
42
|
+
},
|
|
43
|
+
"border": {
|
|
44
|
+
"default": { "$type": "color", "$value": "#8A7A68", "$description": "3.7:1 on base, 3.0:1 on raised — passes WCAG 1.4.11" },
|
|
45
|
+
"subtle": { "$type": "color", "$value": "#6B5D4D", "$description": "Decorative dividers only — below 3:1, not for UI component boundaries" },
|
|
46
|
+
"emphasis": { "$type": "color", "$value": "#A09080", "$description": "4.9:1 on base, 4.0:1 on raised — inputs, secondary buttons" },
|
|
47
|
+
"focus": { "$type": "color", "$value": "#E8A838" },
|
|
48
|
+
"brand": { "$type": "color", "$value": "rgba(232, 168, 56, 0.3)" }
|
|
49
|
+
},
|
|
50
|
+
"text": {
|
|
51
|
+
"$description": "Warm light text on dark",
|
|
52
|
+
"primary": { "$type": "color", "$value": "#F5F0E8", "$description": "Warm white (12.4:1)" },
|
|
53
|
+
"secondary": { "$type": "color", "$value": "#C9C1B4", "$description": "Dune (6.8:1)" },
|
|
54
|
+
"disabled": { "$type": "color", "$value": "#6B5D4D" },
|
|
55
|
+
"inverse": { "$type": "color", "$value": "#2A2420" },
|
|
56
|
+
"link": { "$type": "color", "$value": "#E8A838" },
|
|
57
|
+
"linkHover": { "$type": "color", "$value": "#F0B848" },
|
|
58
|
+
"onBrand": { "$type": "color", "$value": "#2A2420", "$description": "Dark text on light brand bg (7.5:1)" },
|
|
59
|
+
"onAccent": { "$type": "color", "$value": "#2A2420", "$description": "Dark text on light accent bg (5.8:1)" }
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"focus": {
|
|
63
|
+
"ringColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.4)" },
|
|
64
|
+
"glowColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.2)" }
|
|
65
|
+
},
|
|
66
|
+
"shadow": {
|
|
67
|
+
"$description": "Dark mode shadows - lighter for visibility",
|
|
68
|
+
"inset": { "$type": "shadow", "$value": "inset 0 1px 3px rgba(0, 0, 0, 0.3)" },
|
|
69
|
+
"soft": { "$type": "shadow", "$value": "0 2px 8px rgba(0, 0, 0, 0.25)" },
|
|
70
|
+
"medium": { "$type": "shadow", "$value": "0 4px 16px rgba(0, 0, 0, 0.3)" },
|
|
71
|
+
"chunkyInset": { "$type": "shadow", "$value": "inset 3px 3px 0 0 rgba(0, 0, 0, 0.2)", "$description": "Chunky input shadow" }
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Light Theme — warm cream base, the default Orange Halo experience",
|
|
3
|
+
"color": {
|
|
4
|
+
"brand": {
|
|
5
|
+
"primary": { "$type": "color", "$value": "{color.orange.900}" },
|
|
6
|
+
"primaryHover": { "$type": "color", "$value": "{color.orange.950}" },
|
|
7
|
+
"primaryActive": { "$type": "color", "$value": "{color.orange.950}" },
|
|
8
|
+
"primarySubtle": { "$type": "color", "$value": "{color.orange.50}" },
|
|
9
|
+
"primaryMuted": { "$type": "color", "$value": "{color.orange.100}" },
|
|
10
|
+
"highlight": { "$type": "color", "$value": "{color.honey.400}" },
|
|
11
|
+
"highlightSubtle": { "$type": "color", "$value": "{color.honey.100}" }
|
|
12
|
+
},
|
|
13
|
+
"accent": {
|
|
14
|
+
"default": { "$type": "color", "$value": "{color.eucalyptus.500}" },
|
|
15
|
+
"hover": { "$type": "color", "$value": "{color.eucalyptus.600}" },
|
|
16
|
+
"subtle": { "$type": "color", "$value": "{color.eucalyptus.50}" },
|
|
17
|
+
"muted": { "$type": "color", "$value": "{color.eucalyptus.100}" }
|
|
18
|
+
},
|
|
19
|
+
"feedback": {
|
|
20
|
+
"success": { "$type": "color", "$value": "{color.green.600}" },
|
|
21
|
+
"successSubtle": { "$type": "color", "$value": "{color.green.50}" },
|
|
22
|
+
"error": { "$type": "color", "$value": "{color.red.600}" },
|
|
23
|
+
"errorSubtle": { "$type": "color", "$value": "{color.red.50}" },
|
|
24
|
+
"warning": { "$type": "color", "$value": "{color.honey.700}" },
|
|
25
|
+
"warningSubtle": { "$type": "color", "$value": "{color.honey.50}" },
|
|
26
|
+
"info": { "$type": "color", "$value": "{color.eucalyptus.600}" },
|
|
27
|
+
"infoSubtle": { "$type": "color", "$value": "{color.eucalyptus.50}" }
|
|
28
|
+
},
|
|
29
|
+
"surface": {
|
|
30
|
+
"base": { "$type": "color", "$value": "{color.warm.cream}" },
|
|
31
|
+
"raised": { "$type": "color", "$value": "{color.warm.linen}" },
|
|
32
|
+
"sunlit": { "$type": "color", "$value": "{color.warm.cream}" },
|
|
33
|
+
"inset": { "$type": "color", "$value": "{color.warm.parchment}" },
|
|
34
|
+
"overlay": { "$type": "color", "$value": "rgba(61, 50, 41, 0.4)" },
|
|
35
|
+
"disabled": { "$type": "color", "$value": "{color.warm.sand}" }
|
|
36
|
+
},
|
|
37
|
+
"border": {
|
|
38
|
+
"default": { "$type": "color", "$value": "{color.warm.sand}" },
|
|
39
|
+
"subtle": { "$type": "color", "$value": "{color.warm.parchment}" },
|
|
40
|
+
"emphasis": { "$type": "color", "$value": "{color.warm.dune}" },
|
|
41
|
+
"focus": { "$type": "color", "$value": "{color.orange.900}" },
|
|
42
|
+
"brand": { "$type": "color", "$value": "rgba(197, 67, 0, 0.25)" }
|
|
43
|
+
},
|
|
44
|
+
"text": {
|
|
45
|
+
"primary": { "$type": "color", "$value": "{color.warm.walnut}" },
|
|
46
|
+
"secondary": { "$type": "color", "$value": "{color.warm.driftwood}" },
|
|
47
|
+
"disabled": { "$type": "color", "$value": "{color.warm.dune}" },
|
|
48
|
+
"inverse": { "$type": "color", "$value": "{color.warm.cream}" },
|
|
49
|
+
"link": { "$type": "color", "$value": "{color.orange.900}" },
|
|
50
|
+
"linkHover": { "$type": "color", "$value": "{color.orange.950}" }
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"focus": {
|
|
54
|
+
"ringColor": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)" },
|
|
55
|
+
"glowColor": { "$type": "color", "$value": "rgba(197, 67, 0, 0.15)" }
|
|
56
|
+
}
|
|
57
|
+
}
|