@servicetitan/hammer-token 2.5.2 → 3.0.1

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 (146) hide show
  1. package/CHANGELOG.md +52 -2
  2. package/README.md +332 -0
  3. package/build/web/core/component-variables.scss +1088 -131
  4. package/build/web/core/component.d.ts +558 -0
  5. package/build/web/core/component.js +6685 -249
  6. package/build/web/core/component.scss +557 -69
  7. package/build/web/core/css-utils/a2-border.css +23 -51
  8. package/build/web/core/css-utils/a2-color.css +221 -233
  9. package/build/web/core/css-utils/a2-font.css +1 -29
  10. package/build/web/core/css-utils/a2-spacing.css +238 -483
  11. package/build/web/core/css-utils/a2-utils.css +496 -781
  12. package/build/web/core/css-utils/border.css +23 -51
  13. package/build/web/core/css-utils/color.css +221 -233
  14. package/build/web/core/css-utils/font.css +1 -29
  15. package/build/web/core/css-utils/spacing.css +238 -483
  16. package/build/web/core/css-utils/utils.css +496 -781
  17. package/build/web/core/index.d.ts +6 -0
  18. package/build/web/core/index.js +1 -1
  19. package/build/web/core/primitive-variables.scss +148 -65
  20. package/build/web/core/primitive.d.ts +209 -0
  21. package/build/web/core/primitive.js +779 -61
  22. package/build/web/core/primitive.scss +207 -124
  23. package/build/web/core/semantic-variables.scss +363 -245
  24. package/build/web/core/semantic.d.ts +221 -0
  25. package/build/web/core/semantic.js +1592 -347
  26. package/build/web/core/semantic.scss +219 -140
  27. package/build/web/index.d.ts +3 -4
  28. package/build/web/types.d.ts +17 -0
  29. package/config.js +121 -496
  30. package/eslint.config.mjs +11 -1
  31. package/package.json +15 -5
  32. package/src/global/primitive/breakpoint.tokens.json +54 -0
  33. package/src/global/primitive/color.tokens.json +1092 -0
  34. package/src/global/primitive/duration.tokens.json +44 -0
  35. package/src/global/primitive/font.tokens.json +151 -0
  36. package/src/global/primitive/radius.tokens.json +94 -0
  37. package/src/global/primitive/size.tokens.json +174 -0
  38. package/src/global/primitive/transition.tokens.json +32 -0
  39. package/src/theme/core/background.tokens.json +1312 -0
  40. package/src/theme/core/border.tokens.json +192 -0
  41. package/src/theme/core/chart.tokens.json +982 -0
  42. package/src/theme/core/component/ai-mark.tokens.json +20 -0
  43. package/src/theme/core/component/alert.tokens.json +261 -0
  44. package/src/theme/core/component/announcement.tokens.json +460 -0
  45. package/src/theme/core/component/avatar.tokens.json +137 -0
  46. package/src/theme/core/component/badge.tokens.json +42 -0
  47. package/src/theme/core/component/breadcrumb.tokens.json +42 -0
  48. package/src/theme/core/component/button-toggle.tokens.json +428 -0
  49. package/src/theme/core/component/button.tokens.json +941 -0
  50. package/src/theme/core/component/calendar.tokens.json +391 -0
  51. package/src/theme/core/component/card.tokens.json +107 -0
  52. package/src/theme/core/component/checkbox.tokens.json +631 -0
  53. package/src/theme/core/component/chip.tokens.json +169 -0
  54. package/src/theme/core/component/combobox.tokens.json +269 -0
  55. package/src/theme/core/component/details.tokens.json +152 -0
  56. package/src/theme/core/component/dialog.tokens.json +87 -0
  57. package/src/theme/core/component/divider.tokens.json +23 -0
  58. package/src/theme/core/component/dnd.tokens.json +208 -0
  59. package/src/theme/core/component/drawer.tokens.json +61 -0
  60. package/src/theme/core/component/drilldown.tokens.json +61 -0
  61. package/src/theme/core/component/edit-card.tokens.json +381 -0
  62. package/src/theme/core/component/field-label.tokens.json +42 -0
  63. package/src/theme/core/component/field-message.tokens.json +65 -0
  64. package/src/theme/core/component/icon.tokens.json +42 -0
  65. package/src/theme/core/component/link.tokens.json +108 -0
  66. package/src/theme/core/component/list-view.tokens.json +82 -0
  67. package/src/theme/core/component/listbox.tokens.json +283 -0
  68. package/src/theme/core/component/menu.tokens.json +230 -0
  69. package/src/theme/core/component/overflow.tokens.json +84 -0
  70. package/src/theme/core/component/page.tokens.json +377 -0
  71. package/src/theme/core/component/pagination.tokens.json +63 -0
  72. package/src/theme/core/component/popover.tokens.json +122 -0
  73. package/src/theme/core/component/progress-bar.tokens.json +133 -0
  74. package/src/theme/core/component/radio.tokens.json +631 -0
  75. package/src/theme/core/component/segmented-control.tokens.json +175 -0
  76. package/src/theme/core/component/select-card.tokens.json +943 -0
  77. package/src/theme/core/component/side-nav.tokens.json +349 -0
  78. package/src/theme/core/component/skeleton.tokens.json +42 -0
  79. package/src/theme/core/component/spinner.tokens.json +96 -0
  80. package/src/theme/core/component/status-icon.tokens.json +164 -0
  81. package/src/theme/core/component/stepper.tokens.json +484 -0
  82. package/src/theme/core/component/switch.tokens.json +285 -0
  83. package/src/theme/core/component/tab.tokens.json +192 -0
  84. package/src/theme/core/component/text-field.tokens.json +160 -0
  85. package/src/theme/core/component/text.tokens.json +59 -0
  86. package/src/theme/core/component/toast.tokens.json +343 -0
  87. package/src/theme/core/component/toolbar.tokens.json +114 -0
  88. package/src/theme/core/component/tooltip.tokens.json +61 -0
  89. package/src/theme/core/focus.tokens.json +56 -0
  90. package/src/theme/core/foreground.tokens.json +416 -0
  91. package/src/theme/core/gradient.tokens.json +41 -0
  92. package/src/theme/core/opacity.tokens.json +25 -0
  93. package/src/theme/core/shadow.tokens.json +81 -0
  94. package/src/theme/core/status.tokens.json +74 -0
  95. package/src/theme/core/typography.tokens.json +163 -0
  96. package/src/utils/__tests__/css-utils-format-utils.test.js +312 -0
  97. package/src/utils/__tests__/sd-build-configs.test.js +306 -0
  98. package/src/utils/__tests__/sd-formats.test.js +942 -0
  99. package/src/utils/__tests__/sd-transforms.test.js +336 -0
  100. package/src/utils/__tests__/token-helpers.test.js +1160 -0
  101. package/src/utils/copy-css-utils-cli.js +13 -1
  102. package/src/utils/css-utils-format-utils.js +105 -176
  103. package/src/utils/figma/__tests__/sync-gradient.test.js +561 -0
  104. package/src/utils/figma/__tests__/token-conversion.test.js +117 -0
  105. package/src/utils/figma/__tests__/token-resolution.test.js +231 -0
  106. package/src/utils/figma/auth.js +355 -0
  107. package/src/utils/figma/constants.js +22 -0
  108. package/src/utils/figma/errors.js +80 -0
  109. package/src/utils/figma/figma-api.js +1069 -0
  110. package/src/utils/figma/get-token.js +348 -0
  111. package/src/utils/figma/sync-components.js +909 -0
  112. package/src/utils/figma/sync-main.js +692 -0
  113. package/src/utils/figma/sync-orchestration.js +683 -0
  114. package/src/utils/figma/sync-primitives.js +230 -0
  115. package/src/utils/figma/sync-semantic.js +1056 -0
  116. package/src/utils/figma/token-conversion.js +340 -0
  117. package/src/utils/figma/token-parsing.js +186 -0
  118. package/src/utils/figma/token-resolution.js +569 -0
  119. package/src/utils/figma/utils.js +199 -0
  120. package/src/utils/sd-build-configs.js +305 -0
  121. package/src/utils/sd-formats.js +948 -0
  122. package/src/utils/sd-transforms.js +165 -0
  123. package/src/utils/token-helpers.js +848 -0
  124. package/tsconfig.json +18 -0
  125. package/vitest.config.js +17 -0
  126. package/.turbo/turbo-build.log +0 -37
  127. package/build/web/core/raw.js +0 -234
  128. package/src/global/primitive/breakpoint.js +0 -19
  129. package/src/global/primitive/color.js +0 -231
  130. package/src/global/primitive/duration.js +0 -16
  131. package/src/global/primitive/font.js +0 -60
  132. package/src/global/primitive/radius.js +0 -31
  133. package/src/global/primitive/size.js +0 -55
  134. package/src/global/primitive/transition.js +0 -16
  135. package/src/theme/core/background.js +0 -170
  136. package/src/theme/core/border.js +0 -103
  137. package/src/theme/core/charts.js +0 -464
  138. package/src/theme/core/component/button.js +0 -708
  139. package/src/theme/core/component/checkbox.js +0 -405
  140. package/src/theme/core/focus.js +0 -35
  141. package/src/theme/core/foreground.js +0 -148
  142. package/src/theme/core/overlay.js +0 -137
  143. package/src/theme/core/shadow.js +0 -29
  144. package/src/theme/core/status.js +0 -49
  145. package/src/theme/core/typography.js +0 -82
  146. package/type/types.ts +0 -344
package/src/theme/core/component/button.js DELETED
@@ -1,708 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-require-imports */
2
- const { foreground } = require("../foreground");
3
- const { background } = require("../background");
4
- const { overlay } = require("../overlay");
5
- const { focus } = require("../focus");
6
- const { border } = require("../border");
7
- const { color } = require("../../../global/primitive/color");
8
- const tinycolor = require("tinycolor2");
9
-
10
- module.exports = {
11
- button: {
12
- primary: {
13
- foreground: {
14
- color: {
15
- default: {
16
- value: foreground.color.on.primary.value,
17
- attributes: {
18
- appearance: {
19
- dark: {
20
- value:
21
- foreground.color.on.primary.attributes.appearance.dark
22
- .value,
23
- },
24
- },
25
- },
26
- },
27
- hover: {
28
- value: foreground.color.on.primary.value,
29
- attributes: {
30
- appearance: {
31
- dark: {
32
- value:
33
- foreground.color.on.primary.attributes.appearance.dark
34
- .value,
35
- },
36
- },
37
- },
38
- },
39
- active: {
40
- value: foreground.color.on.primary.value,
41
- attributes: {
42
- appearance: {
43
- dark: {
44
- value:
45
- foreground.color.on.primary.attributes.appearance.dark
46
- .value,
47
- },
48
- },
49
- },
50
- },
51
- },
52
- },
53
- background: {
54
- color: {
55
- default: {
56
- value: background.color.primary.default.value,
57
- attributes: {
58
- appearance: {
59
- dark: {
60
- value:
61
- background.color.primary.default.attributes.appearance.dark
62
- .value,
63
- },
64
- },
65
- },
66
- },
67
- hover: {
68
- // Need to revisit once we have a solid color for overlay
69
- // potential solution: background.color.primary.hover.value
70
- value: tinycolor
71
- .mix(
72
- background.color.primary.default.value,
73
- overlay.color.hover.on.primary.value.slice(0, -2),
74
- 20,
75
- )
76
- .toHex8String(),
77
- attributes: {
78
- appearance: {
79
- dark: {
80
- // Need to revisit once we have a solid color for overlay
81
- value: tinycolor
82
- .mix(
83
- background.color.primary.default.attributes.appearance
84
- .dark.value,
85
- overlay.color.hover.on.primary.attributes.appearance.dark.value.slice(
86
- 0,
87
- -2,
88
- ),
89
- 16,
90
- )
91
- .toHex8String(),
92
- },
93
- },
94
- },
95
- },
96
- active: {
97
- // Need to revisit once we have a solid color for overlay
98
- value: tinycolor
99
- .mix(
100
- background.color.primary.default.value,
101
- overlay.color.active.on.primary.value.slice(0, -2),
102
- 40,
103
- )
104
- .toHex8String(),
105
- attributes: {
106
- appearance: {
107
- dark: {
108
- // Need to revisit once we have a solid color for overlay
109
- value: tinycolor
110
- .mix(
111
- background.color.primary.default.attributes.appearance
112
- .dark.value,
113
- overlay.color.active.on.primary.attributes.appearance.dark.value.slice(
114
- 0,
115
- -2,
116
- ),
117
- 16,
118
- )
119
- .toHex8String(),
120
- },
121
- },
122
- },
123
- },
124
- },
125
- },
126
- border: {
127
- color: {
128
- value: "transparent",
129
- attributes: {
130
- appearance: {
131
- dark: {
132
- value: "transparent",
133
- },
134
- },
135
- },
136
- },
137
- radius: {
138
- value: border.radius.medium.value,
139
- },
140
- },
141
- "focus-ring": {
142
- color: {
143
- value: focus.ring.color.default.value,
144
- attributes: {
145
- appearance: {
146
- dark: {
147
- value:
148
- focus.ring.color.default.attributes.appearance.dark.value,
149
- },
150
- },
151
- },
152
- },
153
- },
154
- },
155
- secondary: {
156
- foreground: {
157
- color: {
158
- default: {
159
- value: foreground.color.default.value,
160
- attributes: {
161
- appearance: {
162
- dark: {
163
- value:
164
- foreground.color.default.attributes.appearance.dark.value,
165
- },
166
- },
167
- },
168
- },
169
- hover: {
170
- value: foreground.color.default.value,
171
- attributes: {
172
- appearance: {
173
- dark: {
174
- value:
175
- foreground.color.default.attributes.appearance.dark.value,
176
- },
177
- },
178
- },
179
- },
180
- active: {
181
- value: foreground.color.default.value,
182
- attributes: {
183
- appearance: {
184
- dark: {
185
- value:
186
- foreground.color.default.attributes.appearance.dark.value,
187
- },
188
- },
189
- },
190
- },
191
- },
192
- },
193
- background: {
194
- color: {
195
- default: {
196
- value: tinycolor(color.neutral["500"].value)
197
- .setAlpha(0.06)
198
- .toHex8String(),
199
- attributes: {
200
- appearance: {
201
- dark: {
202
- value: tinycolor(color.neutral["0"].value)
203
- .setAlpha(0.06)
204
- .toHex8String(),
205
- },
206
- },
207
- },
208
- },
209
- hover: {
210
- // Need to revisit once we have a solid color for overlay
211
- value: tinycolor
212
- .mix(
213
- tinycolor(color.neutral["500"].value)
214
- .setAlpha(0.06)
215
- .toHex8String(),
216
- overlay.color.hover.default.value.slice(0, -2),
217
- 8,
218
- )
219
- .toHex8String(),
220
- attributes: {
221
- appearance: {
222
- dark: {
223
- // Need to revisit once we have a solid color for overlay
224
- value: tinycolor
225
- .mix(
226
- tinycolor(color.neutral["0"].value)
227
- .setAlpha(0.06)
228
- .toHex8String(),
229
- overlay.color.hover.default.attributes.appearance.dark.value.slice(
230
- 0,
231
- -2,
232
- ),
233
- 8,
234
- )
235
- .toHex8String(),
236
- },
237
- },
238
- },
239
- },
240
- active: {
241
- // Need to revisit once we have a solid color for overlay
242
- value: tinycolor
243
- .mix(
244
- tinycolor(color.neutral["500"].value)
245
- .setAlpha(0.06)
246
- .toHex8String(),
247
- overlay.color.active.default.value.slice(0, -2),
248
- 16,
249
- )
250
- .toHex8String(),
251
- attributes: {
252
- appearance: {
253
- dark: {
254
- // Need to revisit once we have a solid color for overlay
255
- value: tinycolor
256
- .mix(
257
- tinycolor(color.neutral["0"].value)
258
- .setAlpha(0.06)
259
- .toHex8String(),
260
- overlay.color.active.default.attributes.appearance.dark.value.slice(
261
- 0,
262
- -2,
263
- ),
264
- 16,
265
- )
266
- .toHex8String(),
267
- },
268
- },
269
- },
270
- },
271
- },
272
- },
273
- border: {
274
- color: {
275
- value: "transparent",
276
- attributes: {
277
- appearance: {
278
- dark: {
279
- value: "transparent",
280
- },
281
- },
282
- },
283
- },
284
- radius: {
285
- value: border.radius.medium.value,
286
- },
287
- },
288
- "focus-ring": {
289
- color: {
290
- value: focus.ring.color.default.value,
291
- attributes: {
292
- appearance: {
293
- dark: {
294
- value:
295
- focus.ring.color.default.attributes.appearance.dark.value,
296
- },
297
- },
298
- },
299
- },
300
- },
301
- },
302
- ghost: {
303
- foreground: {
304
- color: {
305
- default: {
306
- value: foreground.color.default.value,
307
- attributes: {
308
- appearance: {
309
- dark: {
310
- value:
311
- foreground.color.default.attributes.appearance.dark.value,
312
- },
313
- },
314
- },
315
- },
316
- hover: {
317
- value: foreground.color.default.value,
318
- attributes: {
319
- appearance: {
320
- dark: {
321
- value:
322
- foreground.color.default.attributes.appearance.dark.value,
323
- },
324
- },
325
- },
326
- },
327
- active: {
328
- value: foreground.color.default.value,
329
- attributes: {
330
- appearance: {
331
- dark: {
332
- value:
333
- foreground.color.default.attributes.appearance.dark.value,
334
- },
335
- },
336
- },
337
- },
338
- },
339
- },
340
- background: {
341
- color: {
342
- default: {
343
- value: "transparent",
344
- attributes: {
345
- appearance: {
346
- dark: {
347
- value: "transparent",
348
- },
349
- },
350
- },
351
- },
352
- hover: {
353
- // Need to revisit once we have a solid color for overlay
354
- value: tinycolor(overlay.color.hover.default.value.slice(0, -2))
355
- .setAlpha(0.08)
356
- .toHex8String(),
357
- attributes: {
358
- appearance: {
359
- dark: {
360
- // Need to revisit once we have a solid color for overlay
361
- value: tinycolor(
362
- overlay.color.hover.default.attributes.appearance.dark.value.slice(
363
- 0,
364
- -2,
365
- ),
366
- )
367
- .setAlpha(0.08)
368
- .toHex8String(),
369
- },
370
- },
371
- },
372
- },
373
- active: {
374
- // Need to revisit once we have a solid color for overlay
375
- value: tinycolor(overlay.color.active.default.value)
376
- .setAlpha(0.16)
377
- .toHex8String(),
378
- attributes: {
379
- appearance: {
380
- dark: {
381
- // Need to revisit once we have a solid color for overlay
382
- value: tinycolor(
383
- overlay.color.active.default.attributes.appearance.dark.value.slice(
384
- 0,
385
- -2,
386
- ),
387
- )
388
- .setAlpha(0.16)
389
- .toHex8String(),
390
- },
391
- },
392
- },
393
- },
394
- },
395
- },
396
- border: {
397
- color: {
398
- value: "transparent",
399
- attributes: {
400
- appearance: {
401
- dark: {
402
- value: "transparent",
403
- },
404
- },
405
- },
406
- },
407
- radius: {
408
- value: border.radius.medium.value,
409
- },
410
- },
411
- "focus-ring": {
412
- color: {
413
- value: focus.ring.color.default.value,
414
- attributes: {
415
- appearance: {
416
- dark: {
417
- value:
418
- focus.ring.color.default.attributes.appearance.dark.value,
419
- },
420
- },
421
- },
422
- },
423
- },
424
- },
425
- "danger-primary": {
426
- foreground: {
427
- color: {
428
- default: {
429
- value: foreground.color.on.danger.default.value,
430
- attributes: {
431
- appearance: {
432
- dark: {
433
- value:
434
- foreground.color.on.danger.default.attributes.appearance
435
- .dark.value,
436
- },
437
- },
438
- },
439
- },
440
- hover: {
441
- value: foreground.color.on.danger.default.value,
442
- attributes: {
443
- appearance: {
444
- dark: {
445
- value:
446
- foreground.color.on.danger.default.attributes.appearance
447
- .dark.value,
448
- },
449
- },
450
- },
451
- },
452
- active: {
453
- value: foreground.color.on.danger.default.value,
454
- attributes: {
455
- appearance: {
456
- dark: {
457
- value:
458
- foreground.color.on.danger.default.attributes.appearance
459
- .dark.value,
460
- },
461
- },
462
- },
463
- },
464
- },
465
- },
466
- background: {
467
- color: {
468
- default: {
469
- value: background.color.danger.default.value,
470
- attributes: {
471
- appearance: {
472
- dark: {
473
- value:
474
- background.color.danger.default.attributes.appearance.dark
475
- .value,
476
- },
477
- },
478
- },
479
- },
480
- hover: {
481
- // Need to revisit once we have a solid color for overlay
482
- value: tinycolor
483
- .mix(
484
- background.color.danger.default.value,
485
- overlay.color.hover.on.danger.value.slice(0, -2),
486
- 20,
487
- )
488
- .toHex8String(),
489
- attributes: {
490
- appearance: {
491
- dark: {
492
- // Need to revisit once we have a solid color for overlay
493
- value: tinycolor
494
- .mix(
495
- background.color.danger.default.attributes.appearance.dark
496
- .value,
497
- overlay.color.hover.on.danger.attributes.appearance.dark.value.slice(
498
- 0,
499
- -2,
500
- ),
501
- 16,
502
- )
503
- .toHex8String(),
504
- },
505
- },
506
- },
507
- },
508
- active: {
509
- // Need to revisit once we have a solid color for overlay
510
- value: tinycolor
511
- .mix(
512
- background.color.danger.default.value,
513
- overlay.color.active.on.danger.value.slice(0, -2),
514
- 40,
515
- )
516
- .toHex8String(),
517
- attributes: {
518
- appearance: {
519
- dark: {
520
- // Need to revisit once we have a solid color for overlay
521
- value: tinycolor
522
- .mix(
523
- background.color.danger.default.attributes.appearance.dark
524
- .value,
525
- overlay.color.active.on.danger.attributes.appearance.dark.value.slice(
526
- 0,
527
- -2,
528
- ),
529
- 16,
530
- )
531
- .toHex8String(),
532
- },
533
- },
534
- },
535
- },
536
- },
537
- },
538
- border: {
539
- color: {
540
- value: "transparent",
541
- attributes: {
542
- appearance: {
543
- dark: {
544
- value: "transparent",
545
- },
546
- },
547
- },
548
- },
549
- radius: {
550
- value: border.radius.medium.value,
551
- },
552
- },
553
- "focus-ring": {
554
- color: {
555
- value: focus.ring.color.danger.value,
556
- attributes: {
557
- appearance: {
558
- dark: {
559
- value: focus.ring.color.danger.attributes.appearance.dark.value,
560
- },
561
- },
562
- },
563
- },
564
- },
565
- },
566
- "danger-secondary": {
567
- foreground: {
568
- color: {
569
- default: {
570
- value: foreground.color.on.danger.subdued.value,
571
- attributes: {
572
- appearance: {
573
- dark: {
574
- value:
575
- foreground.color.on.danger.subdued.attributes.appearance
576
- .dark.value,
577
- },
578
- },
579
- },
580
- },
581
- hover: {
582
- value: foreground.color.hover.danger.value,
583
- attributes: {
584
- appearance: {
585
- dark: {
586
- value:
587
- foreground.color.hover.danger.attributes.appearance.dark
588
- .value,
589
- },
590
- },
591
- },
592
- },
593
- active: {
594
- value: foreground.color.active.danger.value,
595
- attributes: {
596
- appearance: {
597
- dark: {
598
- value:
599
- foreground.color.active.danger.attributes.appearance.dark
600
- .value,
601
- },
602
- },
603
- },
604
- },
605
- },
606
- },
607
- background: {
608
- color: {
609
- default: {
610
- value: background.color.danger.subdued.value,
611
- attributes: {
612
- appearance: {
613
- dark: {
614
- value:
615
- background.color.danger.subdued.attributes.appearance.dark
616
- .value,
617
- },
618
- },
619
- },
620
- },
621
- hover: {
622
- // Need to revisit once we have a solid color for overlay
623
- value: tinycolor
624
- .mix(
625
- background.color.danger.subdued.value,
626
- overlay.color.hover.danger.value.slice(0, -2),
627
- 10,
628
- )
629
- .toHex8String(),
630
- attributes: {
631
- appearance: {
632
- dark: {
633
- // Need to revisit once we have a solid color for overlay
634
- value: tinycolor
635
- .mix(
636
- background.color.danger.subdued.attributes.appearance.dark
637
- .value,
638
- overlay.color.hover.danger.attributes.appearance.dark.value.slice(
639
- 0,
640
- -2,
641
- ),
642
- 15,
643
- )
644
- .toHex8String(),
645
- },
646
- },
647
- },
648
- },
649
- active: {
650
- // Need to revisit once we have a solid color for overlay
651
- value: tinycolor
652
- .mix(
653
- background.color.danger.subdued.value,
654
- overlay.color.active.danger.value.slice(0, -2),
655
- 30,
656
- )
657
- .toHex8String(),
658
- attributes: {
659
- appearance: {
660
- dark: {
661
- // Need to revisit once we have a solid color for overlay
662
- value: tinycolor
663
- .mix(
664
- background.color.danger.subdued.attributes.appearance.dark
665
- .value,
666
- overlay.color.active.danger.attributes.appearance.dark.value.slice(
667
- 0,
668
- -2,
669
- ),
670
- 25,
671
- )
672
- .toHex8String(),
673
- },
674
- },
675
- },
676
- },
677
- },
678
- },
679
- border: {
680
- color: {
681
- value: "transparent",
682
- attributes: {
683
- appearance: {
684
- dark: {
685
- value: "transparent",
686
- },
687
- },
688
- },
689
- },
690
- radius: {
691
- value: border.radius.medium.value,
692
- },
693
- },
694
- "focus-ring": {
695
- color: {
696
- value: focus.ring.color.danger.value,
697
- attributes: {
698
- appearance: {
699
- dark: {
700
- value: focus.ring.color.danger.attributes.appearance.dark.value,
701
- },
702
- },
703
- },
704
- },
705
- },
706
- },
707
- },
708
- };