@oxyhq/bloom 0.75.0 → 0.76.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/lib/commonjs/theme/color-policy.js +19 -12
- package/lib/commonjs/theme/color-policy.js.map +1 -1
- package/lib/module/theme/color-policy.js +19 -12
- package/lib/module/theme/color-policy.js.map +1 -1
- package/lib/typescript/commonjs/theme/color-policy.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-policy.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/theme/__tests__/__fixtures__/golden-resolved-tokens.json +130 -130
- package/src/theme/__tests__/__snapshots__/visual-gallery.test.tsx.snap +104 -104
- package/src/theme/color-policy.ts +19 -17
|
@@ -10,32 +10,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
10
10
|
"borderLight": "rgb(84 68 50)",
|
|
11
11
|
"card": "rgb(40 30 17)",
|
|
12
12
|
"contrast50": "rgb(51 40 27)",
|
|
13
|
-
"error": "rgb(
|
|
13
|
+
"error": "rgb(218 52 55)",
|
|
14
14
|
"icon": "rgb(217 195 171)",
|
|
15
|
-
"iconActive": "rgb(
|
|
16
|
-
"info": "rgb(
|
|
15
|
+
"iconActive": "rgb(163 103 0)",
|
|
16
|
+
"info": "rgb(33 112 228)",
|
|
17
17
|
"negative": "rgb(255 180 171)",
|
|
18
18
|
"negativeForeground": "rgb(105 0 5)",
|
|
19
19
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
20
20
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
21
21
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
22
|
-
"primary": "rgb(
|
|
22
|
+
"primary": "rgb(163 103 0)",
|
|
23
23
|
"primaryDark": "rgb(21 12 3)",
|
|
24
|
-
"primaryForeground": "rgb(
|
|
24
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
25
25
|
"primaryLight": "rgb(36 26 14)",
|
|
26
26
|
"primarySubtle": "rgba(202, 129, 0, 0.24)",
|
|
27
27
|
"primarySubtleForeground": "rgb(255 221 184)",
|
|
28
28
|
"secondary": "rgb(0 213 255)",
|
|
29
29
|
"secondaryForeground": "rgb(0 0 0)",
|
|
30
30
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
31
|
-
"success": "rgb(
|
|
31
|
+
"success": "rgb(0 133 91)",
|
|
32
32
|
"tertiary": "rgb(111 128 255)",
|
|
33
33
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
34
34
|
"text": "rgb(244 223 203)",
|
|
35
35
|
"textSecondary": "rgb(217 195 171)",
|
|
36
36
|
"textTertiary": "rgb(161 141 120)",
|
|
37
|
-
"tint": "rgb(
|
|
38
|
-
"warning": "rgb(
|
|
37
|
+
"tint": "rgb(163 103 0)",
|
|
38
|
+
"warning": "rgb(163 103 0)",
|
|
39
39
|
},
|
|
40
40
|
"amber/light": {
|
|
41
41
|
"background": "rgb(255 241 229)",
|
|
@@ -80,32 +80,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
80
80
|
"borderLight": "rgb(62 72 82)",
|
|
81
81
|
"card": "rgb(25 32 40)",
|
|
82
82
|
"contrast50": "rgb(36 43 51)",
|
|
83
|
-
"error": "rgb(
|
|
83
|
+
"error": "rgb(218 52 55)",
|
|
84
84
|
"icon": "rgb(190 199 212)",
|
|
85
|
-
"iconActive": "rgb(
|
|
86
|
-
"info": "rgb(
|
|
85
|
+
"iconActive": "rgb(0 121 192)",
|
|
86
|
+
"info": "rgb(33 112 228)",
|
|
87
87
|
"negative": "rgb(255 180 171)",
|
|
88
88
|
"negativeForeground": "rgb(105 0 5)",
|
|
89
89
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
90
90
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
91
91
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
92
|
-
"primary": "rgb(
|
|
92
|
+
"primary": "rgb(0 121 192)",
|
|
93
93
|
"primaryDark": "rgb(8 15 22)",
|
|
94
|
-
"primaryForeground": "rgb(
|
|
94
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
95
95
|
"primaryLight": "rgb(21 28 36)",
|
|
96
96
|
"primarySubtle": "rgba(0, 151, 237, 0.24)",
|
|
97
97
|
"primarySubtleForeground": "rgb(207 229 255)",
|
|
98
98
|
"secondary": "rgb(247 81 63)",
|
|
99
99
|
"secondaryForeground": "rgb(0 0 0)",
|
|
100
100
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
101
|
-
"success": "rgb(
|
|
101
|
+
"success": "rgb(0 133 91)",
|
|
102
102
|
"tertiary": "rgb(252 220 0)",
|
|
103
103
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
104
104
|
"text": "rgb(220 227 238)",
|
|
105
105
|
"textSecondary": "rgb(190 199 212)",
|
|
106
106
|
"textTertiary": "rgb(136 146 158)",
|
|
107
|
-
"tint": "rgb(
|
|
108
|
-
"warning": "rgb(
|
|
107
|
+
"tint": "rgb(0 121 192)",
|
|
108
|
+
"warning": "rgb(163 103 0)",
|
|
109
109
|
},
|
|
110
110
|
"blue/light": {
|
|
111
111
|
"background": "rgb(237 244 255)",
|
|
@@ -150,32 +150,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
150
150
|
"borderLight": "rgb(65 73 57)",
|
|
151
151
|
"card": "rgb(28 33 22)",
|
|
152
152
|
"contrast50": "rgb(38 44 32)",
|
|
153
|
-
"error": "rgb(
|
|
153
|
+
"error": "rgb(218 52 55)",
|
|
154
154
|
"icon": "rgb(193 202 180)",
|
|
155
|
-
"iconActive": "rgb(
|
|
156
|
-
"info": "rgb(
|
|
155
|
+
"iconActive": "rgb(69 131 0)",
|
|
156
|
+
"info": "rgb(33 112 228)",
|
|
157
157
|
"negative": "rgb(255 180 171)",
|
|
158
158
|
"negativeForeground": "rgb(105 0 5)",
|
|
159
159
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
160
160
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
161
161
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
162
|
-
"primary": "rgb(
|
|
162
|
+
"primary": "rgb(69 131 0)",
|
|
163
163
|
"primaryDark": "rgb(10 16 6)",
|
|
164
|
-
"primaryForeground": "rgb(
|
|
164
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
165
165
|
"primaryLight": "rgb(24 29 18)",
|
|
166
166
|
"primarySubtle": "rgba(87, 163, 0, 0.24)",
|
|
167
167
|
"primarySubtleForeground": "rgb(138 254 0)",
|
|
168
168
|
"secondary": "rgb(122 125 255)",
|
|
169
169
|
"secondaryForeground": "rgb(0 0 0)",
|
|
170
170
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
171
|
-
"success": "rgb(
|
|
171
|
+
"success": "rgb(0 133 91)",
|
|
172
172
|
"tertiary": "rgb(232 76 188)",
|
|
173
173
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
174
174
|
"text": "rgb(223 229 211)",
|
|
175
175
|
"textSecondary": "rgb(193 202 180)",
|
|
176
176
|
"textTertiary": "rgb(139 148 128)",
|
|
177
|
-
"tint": "rgb(
|
|
178
|
-
"warning": "rgb(
|
|
177
|
+
"tint": "rgb(69 131 0)",
|
|
178
|
+
"warning": "rgb(163 103 0)",
|
|
179
179
|
},
|
|
180
180
|
"faircoin/light": {
|
|
181
181
|
"background": "rgb(240 246 227)",
|
|
@@ -220,32 +220,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
220
220
|
"borderLight": "rgb(59 74 65)",
|
|
221
221
|
"card": "rgb(23 34 28)",
|
|
222
222
|
"contrast50": "rgb(33 44 38)",
|
|
223
|
-
"error": "rgb(
|
|
223
|
+
"error": "rgb(218 52 55)",
|
|
224
224
|
"icon": "rgb(186 203 191)",
|
|
225
|
-
"iconActive": "rgb(
|
|
226
|
-
"info": "rgb(
|
|
225
|
+
"iconActive": "rgb(0 133 91)",
|
|
226
|
+
"info": "rgb(33 112 228)",
|
|
227
227
|
"negative": "rgb(255 180 171)",
|
|
228
228
|
"negativeForeground": "rgb(105 0 5)",
|
|
229
229
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
230
230
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
231
231
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
232
|
-
"primary": "rgb(
|
|
232
|
+
"primary": "rgb(0 133 91)",
|
|
233
233
|
"primaryDark": "rgb(6 16 11)",
|
|
234
|
-
"primaryForeground": "rgb(
|
|
234
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
235
235
|
"primaryLight": "rgb(19 30 24)",
|
|
236
236
|
"primarySubtle": "rgba(0, 165, 114, 0.24)",
|
|
237
237
|
"primarySubtleForeground": "rgb(71 255 184)",
|
|
238
238
|
"secondary": "rgb(247 76 101)",
|
|
239
239
|
"secondaryForeground": "rgb(0 0 0)",
|
|
240
240
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
241
|
-
"success": "rgb(
|
|
241
|
+
"success": "rgb(0 133 91)",
|
|
242
242
|
"tertiary": "rgb(189 94 255)",
|
|
243
243
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
244
244
|
"text": "rgb(217 230 220)",
|
|
245
245
|
"textSecondary": "rgb(186 203 191)",
|
|
246
246
|
"textTertiary": "rgb(132 149 138)",
|
|
247
|
-
"tint": "rgb(
|
|
248
|
-
"warning": "rgb(
|
|
247
|
+
"tint": "rgb(0 133 91)",
|
|
248
|
+
"warning": "rgb(163 103 0)",
|
|
249
249
|
},
|
|
250
250
|
"green/light": {
|
|
251
251
|
"background": "rgb(234 247 237)",
|
|
@@ -290,32 +290,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
290
290
|
"borderLight": "rgb(57 74 71)",
|
|
291
291
|
"card": "rgb(21 34 32)",
|
|
292
292
|
"contrast50": "rgb(32 44 42)",
|
|
293
|
-
"error": "rgb(
|
|
293
|
+
"error": "rgb(218 52 55)",
|
|
294
294
|
"icon": "rgb(184 202 198)",
|
|
295
|
-
"iconActive": "rgb(
|
|
296
|
-
"info": "rgb(
|
|
295
|
+
"iconActive": "rgb(0 131 118)",
|
|
296
|
+
"info": "rgb(33 112 228)",
|
|
297
297
|
"negative": "rgb(255 180 171)",
|
|
298
298
|
"negativeForeground": "rgb(105 0 5)",
|
|
299
299
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
300
300
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
301
301
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
302
|
-
"primary": "rgb(
|
|
302
|
+
"primary": "rgb(0 131 118)",
|
|
303
303
|
"primaryDark": "rgb(5 16 14)",
|
|
304
|
-
"primaryForeground": "rgb(
|
|
304
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
305
305
|
"primaryLight": "rgb(17 30 28)",
|
|
306
306
|
"primarySubtle": "rgba(0, 163, 146, 0.24)",
|
|
307
307
|
"primarySubtleForeground": "rgb(0 254 229)",
|
|
308
308
|
"secondary": "rgb(244 86 35)",
|
|
309
309
|
"secondaryForeground": "rgb(0 0 0)",
|
|
310
310
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
311
|
-
"success": "rgb(
|
|
311
|
+
"success": "rgb(0 133 91)",
|
|
312
312
|
"tertiary": "rgb(227 85 221)",
|
|
313
313
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
314
314
|
"text": "rgb(215 230 225)",
|
|
315
315
|
"textSecondary": "rgb(184 202 198)",
|
|
316
316
|
"textTertiary": "rgb(130 148 144)",
|
|
317
|
-
"tint": "rgb(
|
|
318
|
-
"warning": "rgb(
|
|
317
|
+
"tint": "rgb(0 131 118)",
|
|
318
|
+
"warning": "rgb(163 103 0)",
|
|
319
319
|
},
|
|
320
320
|
"mint/light": {
|
|
321
321
|
"background": "rgb(232 247 242)",
|
|
@@ -360,32 +360,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
360
360
|
"borderLight": "rgb(87 66 56)",
|
|
361
361
|
"card": "rgb(43 28 21)",
|
|
362
362
|
"contrast50": "rgb(54 39 31)",
|
|
363
|
-
"error": "rgb(
|
|
363
|
+
"error": "rgb(218 52 55)",
|
|
364
364
|
"icon": "rgb(223 192 178)",
|
|
365
|
-
"iconActive": "rgb(
|
|
366
|
-
"info": "rgb(
|
|
365
|
+
"iconActive": "rgb(192 84 0)",
|
|
366
|
+
"info": "rgb(33 112 228)",
|
|
367
367
|
"negative": "rgb(255 180 171)",
|
|
368
368
|
"negativeForeground": "rgb(105 0 5)",
|
|
369
369
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
370
370
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
371
371
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
372
|
-
"primary": "rgb(
|
|
372
|
+
"primary": "rgb(192 84 0)",
|
|
373
373
|
"primaryDark": "rgb(23 11 5)",
|
|
374
|
-
"primaryForeground": "rgb(
|
|
374
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
375
375
|
"primaryLight": "rgb(38 24 17)",
|
|
376
376
|
"primarySubtle": "rgba(237, 105, 0, 0.24)",
|
|
377
377
|
"primarySubtleForeground": "rgb(255 219 202)",
|
|
378
378
|
"secondary": "rgb(0 255 254)",
|
|
379
379
|
"secondaryForeground": "rgb(0 0 0)",
|
|
380
380
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
381
|
-
"success": "rgb(
|
|
381
|
+
"success": "rgb(0 133 91)",
|
|
382
382
|
"tertiary": "rgb(114 127 255)",
|
|
383
383
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
384
384
|
"text": "rgb(248 221 209)",
|
|
385
385
|
"textSecondary": "rgb(223 192 178)",
|
|
386
386
|
"textTertiary": "rgb(166 139 126)",
|
|
387
|
-
"tint": "rgb(
|
|
388
|
-
"warning": "rgb(
|
|
387
|
+
"tint": "rgb(192 84 0)",
|
|
388
|
+
"warning": "rgb(163 103 0)",
|
|
389
389
|
},
|
|
390
390
|
"orange/light": {
|
|
391
391
|
"background": "rgb(255 241 235)",
|
|
@@ -430,32 +430,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
430
430
|
"borderLight": "rgb(79 67 80)",
|
|
431
431
|
"card": "rgb(37 29 38)",
|
|
432
432
|
"contrast50": "rgb(48 39 49)",
|
|
433
|
-
"error": "rgb(
|
|
433
|
+
"error": "rgb(218 52 55)",
|
|
434
434
|
"icon": "rgb(210 193 210)",
|
|
435
|
-
"iconActive": "rgb(
|
|
436
|
-
"info": "rgb(
|
|
435
|
+
"iconActive": "rgb(191 0 244)",
|
|
436
|
+
"info": "rgb(33 112 228)",
|
|
437
437
|
"negative": "rgb(255 180 171)",
|
|
438
438
|
"negativeForeground": "rgb(105 0 5)",
|
|
439
439
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
440
440
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
441
441
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
442
|
-
"primary": "rgb(
|
|
442
|
+
"primary": "rgb(191 0 244)",
|
|
443
443
|
"primaryDark": "rgb(19 12 20)",
|
|
444
|
-
"primaryForeground": "rgb(
|
|
444
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
445
445
|
"primaryLight": "rgb(33 25 34)",
|
|
446
446
|
"primarySubtle": "rgba(213, 86, 255, 0.24)",
|
|
447
447
|
"primarySubtleForeground": "rgb(251 215 255)",
|
|
448
448
|
"secondary": "rgb(0 253 200)",
|
|
449
449
|
"secondaryForeground": "rgb(0 0 0)",
|
|
450
450
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
451
|
-
"success": "rgb(
|
|
451
|
+
"success": "rgb(0 133 91)",
|
|
452
452
|
"tertiary": "rgb(142 249 86)",
|
|
453
453
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
454
454
|
"text": "rgb(237 222 235)",
|
|
455
455
|
"textSecondary": "rgb(210 193 210)",
|
|
456
456
|
"textTertiary": "rgb(155 140 155)",
|
|
457
|
-
"tint": "rgb(
|
|
458
|
-
"warning": "rgb(
|
|
457
|
+
"tint": "rgb(191 0 244)",
|
|
458
|
+
"warning": "rgb(163 103 0)",
|
|
459
459
|
},
|
|
460
460
|
"oxy/light": {
|
|
461
461
|
"background": "rgb(255 239 253)",
|
|
@@ -500,32 +500,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
500
500
|
"borderLight": "rgb(85 65 72)",
|
|
501
501
|
"card": "rgb(41 28 33)",
|
|
502
502
|
"contrast50": "rgb(53 38 43)",
|
|
503
|
-
"error": "rgb(
|
|
503
|
+
"error": "rgb(218 52 55)",
|
|
504
504
|
"icon": "rgb(219 191 200)",
|
|
505
|
-
"iconActive": "rgb(
|
|
506
|
-
"info": "rgb(
|
|
505
|
+
"iconActive": "rgb(224 0 136)",
|
|
506
|
+
"info": "rgb(33 112 228)",
|
|
507
507
|
"negative": "rgb(255 180 171)",
|
|
508
508
|
"negativeForeground": "rgb(105 0 5)",
|
|
509
509
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
510
510
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
511
511
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
512
|
-
"primary": "rgb(
|
|
512
|
+
"primary": "rgb(224 0 136)",
|
|
513
513
|
"primaryDark": "rgb(23 11 15)",
|
|
514
|
-
"primaryForeground": "rgb(
|
|
514
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
515
515
|
"primaryLight": "rgb(37 24 29)",
|
|
516
516
|
"primarySubtle": "rgba(255, 69, 163, 0.24)",
|
|
517
517
|
"primarySubtleForeground": "rgb(255 217 228)",
|
|
518
518
|
"secondary": "rgb(0 237 255)",
|
|
519
519
|
"secondaryForeground": "rgb(0 0 0)",
|
|
520
520
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
521
|
-
"success": "rgb(
|
|
521
|
+
"success": "rgb(0 133 91)",
|
|
522
522
|
"tertiary": "rgb(100 250 110)",
|
|
523
523
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
524
524
|
"text": "rgb(245 220 227)",
|
|
525
525
|
"textSecondary": "rgb(219 191 200)",
|
|
526
526
|
"textTertiary": "rgb(163 138 146)",
|
|
527
|
-
"tint": "rgb(
|
|
528
|
-
"warning": "rgb(
|
|
527
|
+
"tint": "rgb(224 0 136)",
|
|
528
|
+
"warning": "rgb(163 103 0)",
|
|
529
529
|
},
|
|
530
530
|
"pink/light": {
|
|
531
531
|
"background": "rgb(255 240 243)",
|
|
@@ -570,32 +570,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
570
570
|
"borderLight": "rgb(73 68 83)",
|
|
571
571
|
"card": "rgb(33 30 40)",
|
|
572
572
|
"contrast50": "rgb(44 40 51)",
|
|
573
|
-
"error": "rgb(
|
|
573
|
+
"error": "rgb(218 52 55)",
|
|
574
574
|
"icon": "rgb(203 195 213)",
|
|
575
|
-
"iconActive": "rgb(
|
|
576
|
-
"info": "rgb(
|
|
575
|
+
"iconActive": "rgb(134 77 255)",
|
|
576
|
+
"info": "rgb(33 112 228)",
|
|
577
577
|
"negative": "rgb(255 180 171)",
|
|
578
578
|
"negativeForeground": "rgb(105 0 5)",
|
|
579
579
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
580
580
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
581
581
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
582
|
-
"primary": "rgb(
|
|
582
|
+
"primary": "rgb(134 77 255)",
|
|
583
583
|
"primaryDark": "rgb(16 13 22)",
|
|
584
|
-
"primaryForeground": "rgb(
|
|
584
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
585
585
|
"primaryLight": "rgb(29 26 36)",
|
|
586
586
|
"primarySubtle": "rgba(160, 120, 255, 0.24)",
|
|
587
587
|
"primarySubtleForeground": "rgb(233 221 255)",
|
|
588
588
|
"secondary": "rgb(254 199 0)",
|
|
589
589
|
"secondaryForeground": "rgb(0 0 0)",
|
|
590
590
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
591
|
-
"success": "rgb(
|
|
591
|
+
"success": "rgb(0 133 91)",
|
|
592
592
|
"tertiary": "rgb(118 245 94)",
|
|
593
593
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
594
594
|
"text": "rgb(231 224 238)",
|
|
595
595
|
"textSecondary": "rgb(203 195 213)",
|
|
596
596
|
"textTertiary": "rgb(148 142 159)",
|
|
597
|
-
"tint": "rgb(
|
|
598
|
-
"warning": "rgb(
|
|
597
|
+
"tint": "rgb(134 77 255)",
|
|
598
|
+
"warning": "rgb(163 103 0)",
|
|
599
599
|
},
|
|
600
600
|
"purple/light": {
|
|
601
601
|
"background": "rgb(248 241 255)",
|
|
@@ -640,32 +640,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
640
640
|
"borderLight": "rgb(88 65 63)",
|
|
641
641
|
"card": "rgb(43 28 26)",
|
|
642
642
|
"contrast50": "rgb(54 38 37)",
|
|
643
|
-
"error": "rgb(
|
|
643
|
+
"error": "rgb(218 52 55)",
|
|
644
644
|
"icon": "rgb(223 191 188)",
|
|
645
|
-
"iconActive": "rgb(
|
|
646
|
-
"info": "rgb(
|
|
645
|
+
"iconActive": "rgb(234 0 37)",
|
|
646
|
+
"info": "rgb(33 112 228)",
|
|
647
647
|
"negative": "rgb(255 180 171)",
|
|
648
648
|
"negativeForeground": "rgb(105 0 5)",
|
|
649
649
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
650
650
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
651
651
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
652
|
-
"primary": "rgb(
|
|
652
|
+
"primary": "rgb(234 0 37)",
|
|
653
653
|
"primaryDark": "rgb(24 11 10)",
|
|
654
|
-
"primaryForeground": "rgb(
|
|
654
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
655
655
|
"primaryLight": "rgb(39 24 23)",
|
|
656
656
|
"primarySubtle": "rgba(255, 84, 81, 0.24)",
|
|
657
657
|
"primarySubtleForeground": "rgb(255 218 215)",
|
|
658
658
|
"secondary": "rgb(0 193 253)",
|
|
659
659
|
"secondaryForeground": "rgb(0 0 0)",
|
|
660
660
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
661
|
-
"success": "rgb(
|
|
661
|
+
"success": "rgb(0 133 91)",
|
|
662
662
|
"tertiary": "rgb(90 250 115)",
|
|
663
663
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
664
664
|
"text": "rgb(249 220 217)",
|
|
665
665
|
"textSecondary": "rgb(223 191 188)",
|
|
666
666
|
"textTertiary": "rgb(167 138 136)",
|
|
667
|
-
"tint": "rgb(
|
|
668
|
-
"warning": "rgb(
|
|
667
|
+
"tint": "rgb(234 0 37)",
|
|
668
|
+
"warning": "rgb(163 103 0)",
|
|
669
669
|
},
|
|
670
670
|
"red/light": {
|
|
671
671
|
"background": "rgb(255 240 239)",
|
|
@@ -710,32 +710,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
710
710
|
"borderLight": "rgb(61 72 81)",
|
|
711
711
|
"card": "rgb(24 33 39)",
|
|
712
712
|
"contrast50": "rgb(34 43 50)",
|
|
713
|
-
"error": "rgb(
|
|
713
|
+
"error": "rgb(218 52 55)",
|
|
714
714
|
"icon": "rgb(188 200 211)",
|
|
715
|
-
"iconActive": "rgb(
|
|
716
|
-
"info": "rgb(
|
|
715
|
+
"iconActive": "rgb(0 124 177)",
|
|
716
|
+
"info": "rgb(33 112 228)",
|
|
717
717
|
"negative": "rgb(255 180 171)",
|
|
718
718
|
"negativeForeground": "rgb(105 0 5)",
|
|
719
719
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
720
720
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
721
721
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
722
|
-
"primary": "rgb(
|
|
722
|
+
"primary": "rgb(0 124 177)",
|
|
723
723
|
"primaryDark": "rgb(7 15 21)",
|
|
724
|
-
"primaryForeground": "rgb(
|
|
724
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
725
725
|
"primaryLight": "rgb(20 29 35)",
|
|
726
726
|
"primarySubtle": "rgba(0, 154, 218, 0.24)",
|
|
727
727
|
"primarySubtleForeground": "rgb(201 230 255)",
|
|
728
728
|
"secondary": "rgb(246 83 51)",
|
|
729
729
|
"secondaryForeground": "rgb(0 0 0)",
|
|
730
730
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
731
|
-
"success": "rgb(
|
|
731
|
+
"success": "rgb(0 133 91)",
|
|
732
732
|
"tertiary": "rgb(253 200 0)",
|
|
733
733
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
734
734
|
"text": "rgb(219 227 237)",
|
|
735
735
|
"textSecondary": "rgb(188 200 211)",
|
|
736
736
|
"textTertiary": "rgb(134 146 157)",
|
|
737
|
-
"tint": "rgb(
|
|
738
|
-
"warning": "rgb(
|
|
737
|
+
"tint": "rgb(0 124 177)",
|
|
738
|
+
"warning": "rgb(163 103 0)",
|
|
739
739
|
},
|
|
740
740
|
"sky/light": {
|
|
741
741
|
"background": "rgb(236 245 254)",
|
|
@@ -780,32 +780,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
780
780
|
"borderLight": "rgb(57 73 77)",
|
|
781
781
|
"card": "rgb(21 34 36)",
|
|
782
782
|
"contrast50": "rgb(32 44 46)",
|
|
783
|
-
"error": "rgb(
|
|
783
|
+
"error": "rgb(218 52 55)",
|
|
784
784
|
"icon": "rgb(184 202 205)",
|
|
785
|
-
"iconActive": "rgb(
|
|
786
|
-
"info": "rgb(
|
|
785
|
+
"iconActive": "rgb(0 129 143)",
|
|
786
|
+
"info": "rgb(33 112 228)",
|
|
787
787
|
"negative": "rgb(255 180 171)",
|
|
788
788
|
"negativeForeground": "rgb(105 0 5)",
|
|
789
789
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
790
790
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
791
791
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
792
|
-
"primary": "rgb(
|
|
792
|
+
"primary": "rgb(0 129 143)",
|
|
793
793
|
"primaryDark": "rgb(5 16 18)",
|
|
794
|
-
"primaryForeground": "rgb(
|
|
794
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
795
795
|
"primaryLight": "rgb(17 29 32)",
|
|
796
796
|
"primarySubtle": "rgba(0, 159, 177, 0.24)",
|
|
797
797
|
"primarySubtleForeground": "rgb(154 240 255)",
|
|
798
798
|
"secondary": "rgb(243 74 143)",
|
|
799
799
|
"secondaryForeground": "rgb(0 0 0)",
|
|
800
800
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
801
|
-
"success": "rgb(
|
|
801
|
+
"success": "rgb(0 133 91)",
|
|
802
802
|
"tertiary": "rgb(253 144 0)",
|
|
803
803
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
804
804
|
"text": "rgb(215 229 232)",
|
|
805
805
|
"textSecondary": "rgb(184 202 205)",
|
|
806
806
|
"textTertiary": "rgb(131 148 151)",
|
|
807
|
-
"tint": "rgb(
|
|
808
|
-
"warning": "rgb(
|
|
807
|
+
"tint": "rgb(0 129 143)",
|
|
808
|
+
"warning": "rgb(163 103 0)",
|
|
809
809
|
},
|
|
810
810
|
"teal/light": {
|
|
811
811
|
"background": "rgb(233 246 249)",
|
|
@@ -850,32 +850,32 @@ exports[`theme.colors snapshot for all presets (catches unintended palette shift
|
|
|
850
850
|
"borderLight": "rgb(79 70 49)",
|
|
851
851
|
"card": "rgb(37 31 17)",
|
|
852
852
|
"contrast50": "rgb(48 41 26)",
|
|
853
|
-
"error": "rgb(
|
|
853
|
+
"error": "rgb(218 52 55)",
|
|
854
854
|
"icon": "rgb(211 197 170)",
|
|
855
|
-
"iconActive": "rgb(
|
|
856
|
-
"info": "rgb(
|
|
855
|
+
"iconActive": "rgb(147 111 0)",
|
|
856
|
+
"info": "rgb(33 112 228)",
|
|
857
857
|
"negative": "rgb(255 180 171)",
|
|
858
858
|
"negativeForeground": "rgb(105 0 5)",
|
|
859
859
|
"negativeSubtle": "rgba(239, 68, 68, 0.24)",
|
|
860
860
|
"negativeSubtleForeground": "rgb(255 179 173)",
|
|
861
861
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
862
|
-
"primary": "rgb(
|
|
862
|
+
"primary": "rgb(147 111 0)",
|
|
863
863
|
"primaryDark": "rgb(19 13 3)",
|
|
864
|
-
"primaryForeground": "rgb(
|
|
864
|
+
"primaryForeground": "rgb(255 255 255)",
|
|
865
865
|
"primaryLight": "rgb(33 27 13)",
|
|
866
866
|
"primarySubtle": "rgba(182, 138, 0, 0.24)",
|
|
867
867
|
"primarySubtleForeground": "rgb(255 223 154)",
|
|
868
868
|
"secondary": "rgb(0 186 255)",
|
|
869
869
|
"secondaryForeground": "rgb(0 0 0)",
|
|
870
870
|
"shadow": "rgba(0, 0, 0, 0.3)",
|
|
871
|
-
"success": "rgb(
|
|
871
|
+
"success": "rgb(0 133 91)",
|
|
872
872
|
"tertiary": "rgb(149 115 255)",
|
|
873
873
|
"tertiaryForeground": "rgb(0 0 0)",
|
|
874
874
|
"text": "rgb(238 225 202)",
|
|
875
875
|
"textSecondary": "rgb(211 197 170)",
|
|
876
876
|
"textTertiary": "rgb(156 143 119)",
|
|
877
|
-
"tint": "rgb(
|
|
878
|
-
"warning": "rgb(
|
|
877
|
+
"tint": "rgb(147 111 0)",
|
|
878
|
+
"warning": "rgb(163 103 0)",
|
|
879
879
|
},
|
|
880
880
|
"yellow/light": {
|
|
881
881
|
"background": "rgb(255 242 221)",
|
|
@@ -94,8 +94,14 @@ const noLegibleForeground = (argb: number): boolean =>
|
|
|
94
94
|
/** The tone a white-label fill sits at in LIGHT mode. */
|
|
95
95
|
const LIGHT_FILL_TONE = 45;
|
|
96
96
|
|
|
97
|
-
/**
|
|
98
|
-
const
|
|
97
|
+
/** The tone a white-label fill sits at in DARK: the ceiling white text allows. */
|
|
98
|
+
const DARK_FILL_TONE = 49;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* No dark-mode ACCENT sits below this. Some hues peak dark — violet at tone 33 —
|
|
102
|
+
* and rendering one there gives a slab rather than a highlight.
|
|
103
|
+
*/
|
|
104
|
+
const DARK_ACCENT_FLOOR = 58;
|
|
99
105
|
|
|
100
106
|
/**
|
|
101
107
|
* Accent fills sit at their hue's PEAK tone in dark — where the hue is most
|
|
@@ -246,19 +252,15 @@ export function buildPolicyTokens(
|
|
|
246
252
|
): PolicyTokens {
|
|
247
253
|
const seed = Hct.fromInt(argbFromHex(seedHex));
|
|
248
254
|
|
|
249
|
-
//
|
|
250
|
-
//
|
|
251
|
-
//
|
|
252
|
-
//
|
|
253
|
-
//
|
|
254
|
-
//
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
const primary = fillPair(
|
|
259
|
-
brandPalette,
|
|
260
|
-
isDark ? Math.max(seed.tone, DARK_FLOOR) : LIGHT_FILL_TONE,
|
|
261
|
-
);
|
|
255
|
+
// Max chroma at a tone that carries a WHITE label, in both modes.
|
|
256
|
+
//
|
|
257
|
+
// The brand fill is what a compose button, a Follow button, an avatar and the
|
|
258
|
+
// user's own chat bubble paint with, and those carry white text. White needs
|
|
259
|
+
// tone <= 49, so that is the ceiling — in dark as much as in light. Letting the
|
|
260
|
+
// dark fill sit at the seed's own tone instead makes it brighter, but every one
|
|
261
|
+
// of those labels turns black, which costs more than the brightness buys.
|
|
262
|
+
const brandPalette = TonalPalette.fromHueAndChroma(seed.hue, 200);
|
|
263
|
+
const primary = fillPair(brandPalette, isDark ? DARK_FILL_TONE : LIGHT_FILL_TONE);
|
|
262
264
|
|
|
263
265
|
const tokens: PolicyTokens = {
|
|
264
266
|
'--primary': primary.fill,
|
|
@@ -309,7 +311,7 @@ export function buildPolicyTokens(
|
|
|
309
311
|
// black. The accent chroma cap already keeps these hues out of neon territory,
|
|
310
312
|
// and the hue itself is the caller's brand rather than ours to move. The
|
|
311
313
|
// analyzer still runs where it was designed to, inside `color-roles`.
|
|
312
|
-
const tone = isDark ? Math.max(peakTone(hue),
|
|
314
|
+
const tone = isDark ? Math.max(peakTone(hue), DARK_ACCENT_FLOOR) : LIGHT_FILL_TONE;
|
|
313
315
|
const pair = fillPair(fillPalette, tone);
|
|
314
316
|
tokens[`--${role}`] = pair.fill;
|
|
315
317
|
tokens[`--${role}-foreground`] = pair.foreground;
|
|
@@ -336,7 +338,7 @@ export function buildPolicyTokens(
|
|
|
336
338
|
for (const [role, hex] of Object.entries(STATUS_SEEDS)) {
|
|
337
339
|
const status = Hct.fromInt(argbFromHex(hex));
|
|
338
340
|
const palette = TonalPalette.fromHueAndChroma(status.hue, status.chroma);
|
|
339
|
-
const pair = fillPair(palette, isDark ?
|
|
341
|
+
const pair = fillPair(palette, isDark ? DARK_FILL_TONE : LIGHT_FILL_TONE);
|
|
340
342
|
tokens[`--${role}`] = pair.fill;
|
|
341
343
|
tokens[`--${role}-foreground`] = pair.foreground;
|
|
342
344
|
tokens[`--${role}-text`] = rgb(
|