@polyxd/ds-carbon 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.
@@ -0,0 +1,613 @@
1
+ {
2
+ "$description": "IBM Carbon system tier, light mode: the Carbon White theme (@carbon/themes@11.81.0) as carbon.theme.*, with component tokens (button, notification, status) and the @carbon/charts@1.27.20 categorical palette, plus Polyxd per-mode additions (polyxd.theme.*).",
3
+ "carbon": {
4
+ "theme": {
5
+ "$type": "color",
6
+ "background": {
7
+ "$value": "{carbon.color.white.0}"
8
+ },
9
+ "background-active": {
10
+ "$value": {
11
+ "colorSpace": "srgb",
12
+ "components": [
13
+ 0.552941,
14
+ 0.552941,
15
+ 0.552941
16
+ ],
17
+ "alpha": 0.5,
18
+ "hex": "#8d8d8d"
19
+ },
20
+ "$description": "carbon.color.gray.50 at alpha 0.5 (rgba(141, 141, 141, 0.5)); a literal because an alias cannot add alpha"
21
+ },
22
+ "background-brand": {
23
+ "$value": "{carbon.color.blue.60}"
24
+ },
25
+ "background-hover": {
26
+ "$value": {
27
+ "colorSpace": "srgb",
28
+ "components": [
29
+ 0.552941,
30
+ 0.552941,
31
+ 0.552941
32
+ ],
33
+ "alpha": 0.12,
34
+ "hex": "#8d8d8d"
35
+ },
36
+ "$description": "carbon.color.gray.50 at alpha 0.12 (rgba(141, 141, 141, 0.12)); a literal because an alias cannot add alpha"
37
+ },
38
+ "background-inverse": {
39
+ "$value": "{carbon.color.gray.80}"
40
+ },
41
+ "background-inverse-hover": {
42
+ "$value": "{carbon.color.gray.80-hover}"
43
+ },
44
+ "background-selected": {
45
+ "$value": {
46
+ "colorSpace": "srgb",
47
+ "components": [
48
+ 0.552941,
49
+ 0.552941,
50
+ 0.552941
51
+ ],
52
+ "alpha": 0.2,
53
+ "hex": "#8d8d8d"
54
+ },
55
+ "$description": "carbon.color.gray.50 at alpha 0.2 (rgba(141, 141, 141, 0.2)); a literal because an alias cannot add alpha"
56
+ },
57
+ "background-selected-hover": {
58
+ "$value": {
59
+ "colorSpace": "srgb",
60
+ "components": [
61
+ 0.552941,
62
+ 0.552941,
63
+ 0.552941
64
+ ],
65
+ "alpha": 0.32,
66
+ "hex": "#8d8d8d"
67
+ },
68
+ "$description": "carbon.color.gray.50 at alpha 0.32 (rgba(141, 141, 141, 0.32)); a literal because an alias cannot add alpha"
69
+ },
70
+ "border-disabled": {
71
+ "$value": "{carbon.color.gray.30}"
72
+ },
73
+ "border-interactive": {
74
+ "$value": "{carbon.color.blue.60}"
75
+ },
76
+ "border-inverse": {
77
+ "$value": "{carbon.color.gray.100}"
78
+ },
79
+ "border-strong-01": {
80
+ "$value": "{carbon.color.gray.50}"
81
+ },
82
+ "border-strong-02": {
83
+ "$value": "{carbon.color.gray.50}"
84
+ },
85
+ "border-strong-03": {
86
+ "$value": "{carbon.color.gray.50}"
87
+ },
88
+ "border-subtle-00": {
89
+ "$value": "{carbon.color.gray.20}"
90
+ },
91
+ "border-subtle-01": {
92
+ "$value": "{carbon.color.gray.30}"
93
+ },
94
+ "border-subtle-02": {
95
+ "$value": "{carbon.color.gray.20}"
96
+ },
97
+ "border-subtle-03": {
98
+ "$value": "{carbon.color.gray.30}"
99
+ },
100
+ "border-subtle-selected-01": {
101
+ "$value": "{carbon.color.gray.30}"
102
+ },
103
+ "border-subtle-selected-02": {
104
+ "$value": "{carbon.color.gray.30}"
105
+ },
106
+ "border-subtle-selected-03": {
107
+ "$value": "{carbon.color.gray.30}"
108
+ },
109
+ "border-tile-01": {
110
+ "$value": "{carbon.color.gray.30}"
111
+ },
112
+ "border-tile-02": {
113
+ "$value": "{carbon.color.gray.40}"
114
+ },
115
+ "border-tile-03": {
116
+ "$value": "{carbon.color.gray.30}"
117
+ },
118
+ "field-01": {
119
+ "$value": "{carbon.color.gray.10}"
120
+ },
121
+ "field-02": {
122
+ "$value": "{carbon.color.white.0}"
123
+ },
124
+ "field-03": {
125
+ "$value": "{carbon.color.gray.10}"
126
+ },
127
+ "field-hover-01": {
128
+ "$value": "{carbon.color.white.hover}"
129
+ },
130
+ "field-hover-02": {
131
+ "$value": "{carbon.color.white.hover}"
132
+ },
133
+ "field-hover-03": {
134
+ "$value": "{carbon.color.white.hover}"
135
+ },
136
+ "focus": {
137
+ "$value": "{carbon.color.blue.60}"
138
+ },
139
+ "focus-inset": {
140
+ "$value": "{carbon.color.white.0}"
141
+ },
142
+ "focus-inverse": {
143
+ "$value": "{carbon.color.white.0}"
144
+ },
145
+ "highlight": {
146
+ "$value": "{carbon.color.blue.20}"
147
+ },
148
+ "icon-disabled": {
149
+ "$value": {
150
+ "colorSpace": "srgb",
151
+ "components": [
152
+ 0.086275,
153
+ 0.086275,
154
+ 0.086275
155
+ ],
156
+ "alpha": 0.25,
157
+ "hex": "#161616"
158
+ },
159
+ "$description": "carbon.color.gray.100 at alpha 0.25 (rgba(22, 22, 22, 0.25)); a literal because an alias cannot add alpha"
160
+ },
161
+ "icon-interactive": {
162
+ "$value": "{carbon.color.blue.60}"
163
+ },
164
+ "icon-inverse": {
165
+ "$value": "{carbon.color.white.0}"
166
+ },
167
+ "icon-on-color": {
168
+ "$value": "{carbon.color.white.0}"
169
+ },
170
+ "icon-on-color-disabled": {
171
+ "$value": "{carbon.color.gray.50}"
172
+ },
173
+ "icon-primary": {
174
+ "$value": "{carbon.color.gray.100}"
175
+ },
176
+ "icon-secondary": {
177
+ "$value": "{carbon.color.gray.70}"
178
+ },
179
+ "interactive": {
180
+ "$value": "{carbon.color.blue.60}"
181
+ },
182
+ "layer-01": {
183
+ "$value": "{carbon.color.gray.10}"
184
+ },
185
+ "layer-02": {
186
+ "$value": "{carbon.color.white.0}"
187
+ },
188
+ "layer-03": {
189
+ "$value": "{carbon.color.gray.10}"
190
+ },
191
+ "layer-accent-01": {
192
+ "$value": "{carbon.color.gray.20}"
193
+ },
194
+ "layer-accent-02": {
195
+ "$value": "{carbon.color.gray.20}"
196
+ },
197
+ "layer-accent-03": {
198
+ "$value": "{carbon.color.gray.20}"
199
+ },
200
+ "layer-accent-active-01": {
201
+ "$value": "{carbon.color.gray.40}"
202
+ },
203
+ "layer-accent-active-02": {
204
+ "$value": "{carbon.color.gray.40}"
205
+ },
206
+ "layer-accent-active-03": {
207
+ "$value": "{carbon.color.gray.40}"
208
+ },
209
+ "layer-accent-hover-01": {
210
+ "$value": "{carbon.color.gray.20-hover}"
211
+ },
212
+ "layer-accent-hover-02": {
213
+ "$value": "{carbon.color.gray.20-hover}"
214
+ },
215
+ "layer-accent-hover-03": {
216
+ "$value": "{carbon.color.gray.20-hover}"
217
+ },
218
+ "layer-active-01": {
219
+ "$value": "{carbon.color.gray.30}"
220
+ },
221
+ "layer-active-02": {
222
+ "$value": "{carbon.color.gray.30}"
223
+ },
224
+ "layer-active-03": {
225
+ "$value": "{carbon.color.gray.30}"
226
+ },
227
+ "layer-background-01": {
228
+ "$value": "{carbon.color.white.0}"
229
+ },
230
+ "layer-background-02": {
231
+ "$value": "{carbon.color.gray.10}"
232
+ },
233
+ "layer-background-03": {
234
+ "$value": "{carbon.color.white.0}"
235
+ },
236
+ "layer-hover-01": {
237
+ "$value": "{carbon.color.white.hover}"
238
+ },
239
+ "layer-hover-02": {
240
+ "$value": "{carbon.color.white.hover}"
241
+ },
242
+ "layer-hover-03": {
243
+ "$value": "{carbon.color.white.hover}"
244
+ },
245
+ "layer-selected-01": {
246
+ "$value": "{carbon.color.gray.20}"
247
+ },
248
+ "layer-selected-02": {
249
+ "$value": "{carbon.color.gray.20}"
250
+ },
251
+ "layer-selected-03": {
252
+ "$value": "{carbon.color.gray.20}"
253
+ },
254
+ "layer-selected-disabled": {
255
+ "$value": "{carbon.color.gray.50}"
256
+ },
257
+ "layer-selected-hover-01": {
258
+ "$value": "{carbon.color.gray.20-hover}"
259
+ },
260
+ "layer-selected-hover-02": {
261
+ "$value": "{carbon.color.gray.20-hover}"
262
+ },
263
+ "layer-selected-hover-03": {
264
+ "$value": "{carbon.color.gray.20-hover}"
265
+ },
266
+ "layer-selected-inverse": {
267
+ "$value": "{carbon.color.gray.100}"
268
+ },
269
+ "link-inverse": {
270
+ "$value": "{carbon.color.blue.40}"
271
+ },
272
+ "link-inverse-active": {
273
+ "$value": "{carbon.color.gray.10}"
274
+ },
275
+ "link-inverse-hover": {
276
+ "$value": "{carbon.color.blue.30}"
277
+ },
278
+ "link-inverse-visited": {
279
+ "$value": "{carbon.color.purple.40}"
280
+ },
281
+ "link-primary": {
282
+ "$value": "{carbon.color.blue.60}"
283
+ },
284
+ "link-primary-hover": {
285
+ "$value": "{carbon.color.blue.70}"
286
+ },
287
+ "link-secondary": {
288
+ "$value": "{carbon.color.blue.70}"
289
+ },
290
+ "link-visited": {
291
+ "$value": "{carbon.color.purple.60}"
292
+ },
293
+ "overlay": {
294
+ "$value": {
295
+ "colorSpace": "srgb",
296
+ "components": [
297
+ 0,
298
+ 0,
299
+ 0
300
+ ],
301
+ "alpha": 0.6,
302
+ "hex": "#000000"
303
+ },
304
+ "$description": "carbon.color.black.100 at alpha 0.6 (rgba(0, 0, 0, 0.6)); a literal because an alias cannot add alpha"
305
+ },
306
+ "shadow": {
307
+ "$value": {
308
+ "colorSpace": "srgb",
309
+ "components": [
310
+ 0,
311
+ 0,
312
+ 0
313
+ ],
314
+ "alpha": 0.3,
315
+ "hex": "#000000"
316
+ },
317
+ "$description": "carbon.color.black.100 at alpha 0.3 (rgba(0, 0, 0, 0.3)); a literal because an alias cannot add alpha"
318
+ },
319
+ "skeleton-background": {
320
+ "$value": "{carbon.color.white.hover}"
321
+ },
322
+ "skeleton-element": {
323
+ "$value": "{carbon.color.gray.30}"
324
+ },
325
+ "support-caution-major": {
326
+ "$value": "{carbon.color.orange.40}"
327
+ },
328
+ "support-caution-minor": {
329
+ "$value": "{carbon.color.yellow.30}"
330
+ },
331
+ "support-caution-undefined": {
332
+ "$value": "{carbon.color.purple.60}"
333
+ },
334
+ "support-error": {
335
+ "$value": "{carbon.color.red.60}"
336
+ },
337
+ "support-error-inverse": {
338
+ "$value": "{carbon.color.red.50}"
339
+ },
340
+ "support-info": {
341
+ "$value": "{carbon.color.blue.70}"
342
+ },
343
+ "support-info-inverse": {
344
+ "$value": "{carbon.color.blue.50}"
345
+ },
346
+ "support-success": {
347
+ "$value": "{carbon.color.green.50}"
348
+ },
349
+ "support-success-inverse": {
350
+ "$value": "{carbon.color.green.40}"
351
+ },
352
+ "support-warning": {
353
+ "$value": "{carbon.color.yellow.30}"
354
+ },
355
+ "support-warning-inverse": {
356
+ "$value": "{carbon.color.yellow.30}"
357
+ },
358
+ "text-disabled": {
359
+ "$value": {
360
+ "colorSpace": "srgb",
361
+ "components": [
362
+ 0.086275,
363
+ 0.086275,
364
+ 0.086275
365
+ ],
366
+ "alpha": 0.25,
367
+ "hex": "#161616"
368
+ },
369
+ "$description": "carbon.color.gray.100 at alpha 0.25 (rgba(22, 22, 22, 0.25)); a literal because an alias cannot add alpha"
370
+ },
371
+ "text-error": {
372
+ "$value": "{carbon.color.red.60}"
373
+ },
374
+ "text-helper": {
375
+ "$value": "{carbon.color.gray.60}"
376
+ },
377
+ "text-inverse": {
378
+ "$value": "{carbon.color.white.0}"
379
+ },
380
+ "text-on-color": {
381
+ "$value": "{carbon.color.white.0}"
382
+ },
383
+ "text-on-color-disabled": {
384
+ "$value": "{carbon.color.gray.50}"
385
+ },
386
+ "text-placeholder": {
387
+ "$value": {
388
+ "colorSpace": "srgb",
389
+ "components": [
390
+ 0.086275,
391
+ 0.086275,
392
+ 0.086275
393
+ ],
394
+ "alpha": 0.4,
395
+ "hex": "#161616"
396
+ },
397
+ "$description": "carbon.color.gray.100 at alpha 0.4 (rgba(22, 22, 22, 0.4)); a literal because an alias cannot add alpha"
398
+ },
399
+ "text-primary": {
400
+ "$value": "{carbon.color.gray.100}"
401
+ },
402
+ "text-secondary": {
403
+ "$value": "{carbon.color.gray.70}"
404
+ },
405
+ "toggle-off": {
406
+ "$value": "{carbon.color.gray.50}"
407
+ },
408
+ "button-danger-active": {
409
+ "$value": "{carbon.color.red.80}"
410
+ },
411
+ "button-danger-hover": {
412
+ "$value": {
413
+ "colorSpace": "srgb",
414
+ "components": [
415
+ 0.721569,
416
+ 0.098039,
417
+ 0.129412
418
+ ],
419
+ "hex": "#b81921"
420
+ },
421
+ "$description": "#b81921: not a palette step"
422
+ },
423
+ "button-danger-primary": {
424
+ "$value": "{carbon.color.red.60}"
425
+ },
426
+ "button-danger-secondary": {
427
+ "$value": "{carbon.color.red.60}"
428
+ },
429
+ "button-disabled": {
430
+ "$value": "{carbon.color.gray.30}"
431
+ },
432
+ "button-primary": {
433
+ "$value": "{carbon.color.blue.60}"
434
+ },
435
+ "button-primary-active": {
436
+ "$value": "{carbon.color.blue.80}"
437
+ },
438
+ "button-primary-hover": {
439
+ "$value": "{carbon.color.blue.60-hover}"
440
+ },
441
+ "button-secondary": {
442
+ "$value": "{carbon.color.gray.80}"
443
+ },
444
+ "button-secondary-active": {
445
+ "$value": "{carbon.color.gray.60}"
446
+ },
447
+ "button-secondary-hover": {
448
+ "$value": "{carbon.color.gray.80-hover}"
449
+ },
450
+ "button-separator": {
451
+ "$value": "{carbon.color.gray.20}"
452
+ },
453
+ "button-tertiary": {
454
+ "$value": "{carbon.color.blue.60}"
455
+ },
456
+ "button-tertiary-active": {
457
+ "$value": "{carbon.color.blue.80}"
458
+ },
459
+ "button-tertiary-hover": {
460
+ "$value": "{carbon.color.blue.60-hover}"
461
+ },
462
+ "notification-action-hover": {
463
+ "$value": "{carbon.color.white.0}"
464
+ },
465
+ "notification-action-tertiary-inverse": {
466
+ "$value": "{carbon.color.white.0}"
467
+ },
468
+ "notification-action-tertiary-inverse-active": {
469
+ "$value": "{carbon.color.gray.30}"
470
+ },
471
+ "notification-action-tertiary-inverse-hover": {
472
+ "$value": "{carbon.color.gray.10}"
473
+ },
474
+ "notification-action-tertiary-inverse-text": {
475
+ "$value": "{carbon.color.gray.100}"
476
+ },
477
+ "notification-action-tertiary-inverse-text-on-color-disabled": {
478
+ "$value": {
479
+ "colorSpace": "srgb",
480
+ "components": [
481
+ 1,
482
+ 1,
483
+ 1
484
+ ],
485
+ "alpha": 0.25,
486
+ "hex": "#ffffff"
487
+ },
488
+ "$description": "carbon.color.white.0 at alpha 0.25 (rgba(255, 255, 255, 0.25)); a literal because an alias cannot add alpha"
489
+ },
490
+ "notification-background-error": {
491
+ "$value": "{carbon.color.red.10}"
492
+ },
493
+ "notification-background-info": {
494
+ "$value": "{carbon.color.blue.10}"
495
+ },
496
+ "notification-background-success": {
497
+ "$value": "{carbon.color.green.10}"
498
+ },
499
+ "notification-background-warning": {
500
+ "$value": "{carbon.color.yellow.10}"
501
+ },
502
+ "status-accessibility-background": {
503
+ "$value": "{carbon.color.white.0}"
504
+ },
505
+ "status-blue": {
506
+ "$value": "{carbon.color.blue.70}"
507
+ },
508
+ "status-gray": {
509
+ "$value": "{carbon.color.gray.60}"
510
+ },
511
+ "status-green": {
512
+ "$value": "{carbon.color.green.50}"
513
+ },
514
+ "status-orange": {
515
+ "$value": "{carbon.color.orange.40}"
516
+ },
517
+ "status-orange-outline": {
518
+ "$value": "{carbon.color.orange.60}"
519
+ },
520
+ "status-purple": {
521
+ "$value": "{carbon.color.purple.60}"
522
+ },
523
+ "status-red": {
524
+ "$value": "{carbon.color.red.60}"
525
+ },
526
+ "status-yellow": {
527
+ "$value": "{carbon.color.yellow.30}"
528
+ },
529
+ "status-yellow-outline": {
530
+ "$value": "{carbon.color.yellow.60}"
531
+ }
532
+ },
533
+ "data-viz": {
534
+ "categorical": {
535
+ "10": {
536
+ "$value": "{carbon.color.yellow.50}",
537
+ "$description": "#b28600 (a literal in @carbon/charts; equals carbon.color.yellow.50)"
538
+ },
539
+ "11": {
540
+ "$value": "{carbon.color.teal.50}"
541
+ },
542
+ "12": {
543
+ "$value": "{carbon.color.cyan.90}"
544
+ },
545
+ "13": {
546
+ "$value": "{carbon.color.orange.70}",
547
+ "$description": "#8a3800 (a literal in @carbon/charts; equals carbon.color.orange.70)"
548
+ },
549
+ "14": {
550
+ "$value": "{carbon.color.purple.50}"
551
+ },
552
+ "$type": "color",
553
+ "$description": "@carbon/charts@1.27.20 scss/_color-palette.scss, 14-colour categorical palette (option 1) for the white theme(s)",
554
+ "01": {
555
+ "$value": "{carbon.color.purple.70}"
556
+ },
557
+ "02": {
558
+ "$value": "{carbon.color.cyan.50}"
559
+ },
560
+ "03": {
561
+ "$value": "{carbon.color.teal.70}"
562
+ },
563
+ "04": {
564
+ "$value": "{carbon.color.magenta.70}"
565
+ },
566
+ "05": {
567
+ "$value": "{carbon.color.red.50}"
568
+ },
569
+ "06": {
570
+ "$value": "{carbon.color.red.90}"
571
+ },
572
+ "07": {
573
+ "$value": "{carbon.color.green.60}"
574
+ },
575
+ "08": {
576
+ "$value": "{carbon.color.blue.80}"
577
+ },
578
+ "09": {
579
+ "$value": "{carbon.color.magenta.50}"
580
+ }
581
+ }
582
+ }
583
+ },
584
+ "polyxd": {
585
+ "theme": {
586
+ "$type": "color",
587
+ "$description": "Polyxd per-mode additions: contrast adjustments and state opacities derived from Carbon theme tokens.",
588
+ "warning-emphasis": {
589
+ "$value": "{carbon.theme.status-yellow-outline}",
590
+ "$description": "Adjusted: $support-warning (#f1c21b) is 1.68:1 on $background (#ffffff), below 3:1. $status-yellow-outline (#8e6a00), Carbon's own outline for yellow status shapes on light themes, is 4.99:1."
591
+ },
592
+ "opacity": {
593
+ "$type": "number",
594
+ "hover": {
595
+ "$value": 0.12,
596
+ "$description": "Alpha of $background-hover (rgba(141, 141, 141, 0.12))"
597
+ },
598
+ "pressed": {
599
+ "$value": 0.5,
600
+ "$description": "Alpha of $background-active (rgba(141, 141, 141, 0.5))"
601
+ },
602
+ "focus": {
603
+ "$value": 0.12,
604
+ "$description": "Carbon marks focus with the $focus outline, not a fill; reuses the $background-hover alpha for renderers that paint a focus layer"
605
+ },
606
+ "disabled": {
607
+ "$value": 0.3,
608
+ "$description": "Adjusted: Carbon $text-disabled / $icon-disabled are text-primary at alpha 0.25 (rgba(22, 22, 22, 0.25)), below the contract minimum 0.3; raised to 0.3"
609
+ }
610
+ }
611
+ }
612
+ }
613
+ }