@orange-halo/tokens 2.0.0 → 2.2.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 (27) hide show
  1. package/contrast-pairs.json +187 -30
  2. package/contrast.js +11 -2
  3. package/dist/brands/hood-dark.css +74 -0
  4. package/dist/brands/hood-dark.json +723 -0
  5. package/dist/brands/hood.css +434 -0
  6. package/dist/brands/hood.json +723 -0
  7. package/dist/brands/orange-halo-dark.css +78 -0
  8. package/dist/brands/orange-halo-dark.json +857 -0
  9. package/dist/brands/orange-halo.css +512 -0
  10. package/dist/brands/orange-halo.json +857 -0
  11. package/dist/themes/dark.css +11 -0
  12. package/dist/themes/dark.json +146 -72
  13. package/dist/tokens.css +113 -62
  14. package/dist/tokens.js +131 -64
  15. package/dist/tokens.json +146 -72
  16. package/package.json +3 -4
  17. package/tokens/brands/hood/brand.json +7 -0
  18. package/tokens/brands/hood/dark.tokens.json +295 -0
  19. package/tokens/brands/hood/light.tokens.json +875 -0
  20. package/tokens/brands/hood/palette.tokens.json +187 -0
  21. package/tokens/brands/orange-halo/brand.json +7 -0
  22. package/tokens/{themes → brands/orange-halo}/dark.tokens.json +57 -7
  23. package/tokens/{semantic.tokens.json → brands/orange-halo/light.tokens.json} +128 -3
  24. package/tokens/{global.tokens.json → brands/orange-halo/palette.tokens.json} +83 -205
  25. package/tokens/{component.tokens.json → core/component.tokens.json} +205 -51
  26. package/tokens/core/scales.tokens.json +170 -0
  27. package/dist/themes/light.css +0 -47
package/tokens/brands/hood/dark.tokens.json ADDED
@@ -0,0 +1,295 @@
1
+ {
2
+ "$description": "Hood tier 2, dark mode: the default look, after fraser-hood.co.uk/gig-history. Sets every tier 2 colour.",
3
+ "color": {
4
+ "brand": {
5
+ "primary": {
6
+ "$type": "color",
7
+ "$value": "{color.white}"
8
+ },
9
+ "primaryHover": {
10
+ "$type": "color",
11
+ "$value": "{color.grey.200}"
12
+ },
13
+ "primaryActive": {
14
+ "$type": "color",
15
+ "$value": "{color.grey.300}"
16
+ },
17
+ "primarySubtle": {
18
+ "$type": "color",
19
+ "$value": "{color.grey.800}"
20
+ },
21
+ "highlight": {
22
+ "$type": "color",
23
+ "$value": "{color.grey.100}"
24
+ },
25
+ "highlightSubtle": {
26
+ "$type": "color",
27
+ "$value": "{color.grey.750}"
28
+ }
29
+ },
30
+ "accent": {
31
+ "default": {
32
+ "$type": "color",
33
+ "$value": "{color.blue.300}"
34
+ },
35
+ "hover": {
36
+ "$type": "color",
37
+ "$value": "{color.blue.200}"
38
+ },
39
+ "active": {
40
+ "$type": "color",
41
+ "$value": "{color.blue.300}"
42
+ },
43
+ "subtle": {
44
+ "$type": "color",
45
+ "$value": "{color.blue.900}"
46
+ },
47
+ "shadow": {
48
+ "$type": "color",
49
+ "$value": "{color.blue.900}"
50
+ }
51
+ },
52
+ "feedback": {
53
+ "success": {
54
+ "$type": "color",
55
+ "$value": "{color.green.300}"
56
+ },
57
+ "successSubtle": {
58
+ "$type": "color",
59
+ "$value": "{color.green.900}"
60
+ },
61
+ "error": {
62
+ "$type": "color",
63
+ "$value": "{color.red.300}"
64
+ },
65
+ "errorHover": {
66
+ "$type": "color",
67
+ "$value": "{color.red.100}"
68
+ },
69
+ "errorSubtle": {
70
+ "$type": "color",
71
+ "$value": "{color.red.900}"
72
+ },
73
+ "errorShadow": {
74
+ "$type": "color",
75
+ "$value": "{color.red.900}"
76
+ },
77
+ "warning": {
78
+ "$type": "color",
79
+ "$value": "{color.amber.300}"
80
+ },
81
+ "warningSubtle": {
82
+ "$type": "color",
83
+ "$value": "{color.amber.900}"
84
+ },
85
+ "info": {
86
+ "$type": "color",
87
+ "$value": "{color.blue.300}"
88
+ },
89
+ "infoSubtle": {
90
+ "$type": "color",
91
+ "$value": "{color.blue.900}"
92
+ }
93
+ },
94
+ "surface": {
95
+ "base": {
96
+ "$type": "color",
97
+ "$value": "{color.grey.850}"
98
+ },
99
+ "raised": {
100
+ "$type": "color",
101
+ "$value": "{color.grey.800}"
102
+ },
103
+ "sunlit": {
104
+ "$type": "color",
105
+ "$value": "{color.grey.800}"
106
+ },
107
+ "inset": {
108
+ "$type": "color",
109
+ "$value": "{color.grey.900}"
110
+ },
111
+ "highlight": {
112
+ "$type": "color",
113
+ "$value": "{color.grey.750}"
114
+ },
115
+ "overlay": {
116
+ "$type": "color",
117
+ "$value": "rgba(0, 0, 0, 0.7)"
118
+ },
119
+ "disabled": {
120
+ "$type": "color",
121
+ "$value": "{color.grey.800}"
122
+ },
123
+ "hover": {
124
+ "$type": "color",
125
+ "$value": "{color.grey.750}"
126
+ },
127
+ "activePressed": {
128
+ "$type": "color",
129
+ "$value": "{color.grey.700}"
130
+ },
131
+ "featuredStart": {
132
+ "$type": "color",
133
+ "$value": "{color.grey.750}"
134
+ },
135
+ "featuredMid": {
136
+ "$type": "color",
137
+ "$value": "{color.grey.800}"
138
+ },
139
+ "featuredEnd": {
140
+ "$type": "color",
141
+ "$value": "{color.grey.800}"
142
+ },
143
+ "sheen": {
144
+ "$type": "color",
145
+ "$value": "rgba(255, 255, 255, 0.03)"
146
+ },
147
+ "backdrop": {
148
+ "$type": "color",
149
+ "$value": "rgba(0, 0, 0, 0.75)"
150
+ }
151
+ },
152
+ "border": {
153
+ "default": {
154
+ "$type": "color",
155
+ "$value": "{color.grey.750}"
156
+ },
157
+ "subtle": {
158
+ "$type": "color",
159
+ "$value": "{color.grey.800}"
160
+ },
161
+ "emphasis": {
162
+ "$type": "color",
163
+ "$value": "{color.grey.500}"
164
+ },
165
+ "strong": {
166
+ "$type": "color",
167
+ "$value": "{color.grey.650}"
168
+ },
169
+ "hover": {
170
+ "$type": "color",
171
+ "$value": "{color.grey.100}"
172
+ },
173
+ "disabled": {
174
+ "$type": "color",
175
+ "$value": "{color.grey.800}"
176
+ },
177
+ "brand": {
178
+ "$type": "color",
179
+ "$value": "rgba(255, 255, 255, 0.25)"
180
+ },
181
+ "brandHover": {
182
+ "$type": "color",
183
+ "$value": "rgba(255, 255, 255, 0.45)"
184
+ },
185
+ "divider": {
186
+ "$type": "color",
187
+ "$value": "{color.grey.750}"
188
+ }
189
+ },
190
+ "text": {
191
+ "primary": {
192
+ "$type": "color",
193
+ "$value": "{color.grey.100}"
194
+ },
195
+ "secondary": {
196
+ "$type": "color",
197
+ "$value": "{color.grey.500}"
198
+ },
199
+ "disabled": {
200
+ "$type": "color",
201
+ "$value": "{color.grey.650}"
202
+ },
203
+ "inverse": {
204
+ "$type": "color",
205
+ "$value": "{color.grey.850}"
206
+ },
207
+ "link": {
208
+ "$type": "color",
209
+ "$value": "{color.white}"
210
+ },
211
+ "linkHover": {
212
+ "$type": "color",
213
+ "$value": "{color.grey.300}"
214
+ },
215
+ "linkRaised": {
216
+ "$type": "color",
217
+ "$value": "{color.white}"
218
+ },
219
+ "brand": {
220
+ "$type": "color",
221
+ "$value": "{color.white}"
222
+ },
223
+ "onBrand": {
224
+ "$type": "color",
225
+ "$value": "{color.grey.850}"
226
+ },
227
+ "onAccent": {
228
+ "$type": "color",
229
+ "$value": "{color.grey.850}"
230
+ },
231
+ "onSuccess": {
232
+ "$type": "color",
233
+ "$value": "{color.grey.850}"
234
+ },
235
+ "onError": {
236
+ "$type": "color",
237
+ "$value": "{color.grey.850}"
238
+ },
239
+ "onWarning": {
240
+ "$type": "color",
241
+ "$value": "{color.grey.850}"
242
+ },
243
+ "onInfo": {
244
+ "$type": "color",
245
+ "$value": "{color.grey.850}"
246
+ }
247
+ }
248
+ },
249
+ "shadow": {
250
+ "primary": {
251
+ "$type": "color",
252
+ "$value": "{color.black}"
253
+ },
254
+ "secondary": {
255
+ "$type": "color",
256
+ "$value": "{color.black}"
257
+ },
258
+ "accent": {
259
+ "$type": "color",
260
+ "$value": "{color.black}"
261
+ },
262
+ "error": {
263
+ "$type": "color",
264
+ "$value": "{color.black}"
265
+ },
266
+ "neutral": {
267
+ "$type": "color",
268
+ "$value": "{color.black}"
269
+ },
270
+ "neutralHover": {
271
+ "$type": "color",
272
+ "$value": "{color.black}"
273
+ },
274
+ "overlay": {
275
+ "$type": "color",
276
+ "$value": "{color.black}"
277
+ },
278
+ "field": {
279
+ "$type": "color",
280
+ "$value": "{color.black}"
281
+ }
282
+ },
283
+ "focus": {
284
+ "ringColor": {
285
+ "$type": "color",
286
+ "$value": "{color.white}",
287
+ "$description": "Solid focus outline, as on the site: white on dark, near-black on light"
288
+ },
289
+ "glowColor": {
290
+ "$type": "color",
291
+ "$value": "rgba(255, 255, 255, 0)",
292
+ "$description": "No glow: the outline is the indicator"
293
+ }
294
+ }
295
+ }