@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/build/web/core/css-utils/color.css CHANGED
@@ -1,235 +1,223 @@
1
- @layer starter, reset, base, state, application;
2
-
3
- .bg-danger-default {background-color: var(--background-color-danger, #e13212)}
4
- .bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
5
- .bg-default {background-color: var(--background-color, #ffffff)}
6
- .bg-disabled {background-color: var(--background-color-disabled, #606162)}
7
- .bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
8
- .bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
9
- .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
10
- .bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
11
- .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
12
- .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
13
- .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
14
- .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
15
- .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
16
- .bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
17
- .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
18
- .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
19
- .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
20
- .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
21
- .bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
22
- .bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
23
- .bg-status-danger {background-color: var(--status-color-danger, #e13212)}
24
- .bg-status-info {background-color: var(--status-color-info, #0265DC)}
25
- .bg-status-success {background-color: var(--status-color-success, #007A4D)}
26
- .bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
27
- .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
28
- .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
29
- .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
30
- .bg-success-default {background-color: var(--background-color-success, #007A4D)}
31
- .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
32
- .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
33
- .border-color-danger {border-color: var(--border-color-danger, #e13212)}
34
- .border-color-default {border-color: var(--border-color, #949596)}
35
- .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
36
- .border-color-status-info {border-color: var(--status-color-info, #0265DC)}
37
- .border-color-status-success {border-color: var(--status-color-success, #007A4D)}
38
- .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
39
- .border-color-strong {border-color: var(--border-color-strong, #444445)}
40
- .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
41
- .border-color-success {border-color: var(--border-color-success, #007A4D)}
42
- .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
43
- .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
44
- .c-danger {color: var(--foreground-color-danger, #e13212)}
45
- .c-default {color: var(--foreground-color, #141414)}
46
- .c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
47
- .c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
48
- .c-inverted {color: var(--foreground-color-inverted, #ffffff)}
49
- .c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
50
- .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
51
- .c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
52
- .c-on-warning {color: var(--foreground-color-on-warning, #141414)}
53
- .c-primary {color: var(--foreground-color-primary, #0265DC)}
54
- .c-status-danger {color: var(--status-color-danger, #e13212)}
55
- .c-status-info {color: var(--status-color-info, #0265DC)}
56
- .c-status-success {color: var(--status-color-success, #007A4D)}
57
- .c-status-warning {color: var(--status-color-warning, #ffbe00)}
58
- .c-subdued {color: var(--foreground-color-subdued, #737475)}
59
-
1
+ .bg-danger {background-color: var(--a2-background-color-danger, var(--a2-status-color-danger, var(--a2-color-red-600, #d62100)))}
2
+ .bg-danger-active {background-color: var(--a2-background-color-danger-active, var(--a2-color-red-800, #731100))}
3
+ .bg-danger-faint {background-color: var(--a2-background-color-danger-faint, var(--a2-color-red-10, #fffbfa))}
4
+ .bg-danger-faint-active {background-color: var(--a2-background-color-danger-faint-active, var(--a2-color-red-100, #ffd4cc))}
5
+ .bg-danger-faint-hover {background-color: var(--a2-background-color-danger-faint-hover, var(--a2-color-red-50, #ffe9e5))}
6
+ .bg-danger-hover {background-color: var(--a2-background-color-danger-hover, var(--a2-color-red-700, #a31900))}
7
+ .bg-danger-subdued {background-color: var(--a2-background-color-danger-subdued, var(--a2-color-red-50, #ffe9e5))}
8
+ .bg-danger-subdued-active {background-color: var(--a2-background-color-danger-subdued-active, var(--a2-color-red-200, #ffac9e))}
9
+ .bg-danger-subdued-hover {background-color: var(--a2-background-color-danger-subdued-hover, var(--a2-color-red-100, #ffd4cc))}
10
+ .bg-default {background-color: var(--a2-background-color-default, var(--a2-color-neutral-0, #ffffff))}
11
+ .bg-default-active {background-color: var(--a2-background-color-default-active, var(--a2-color-neutral-40, #f1f1f1))}
12
+ .bg-default-hover {background-color: var(--a2-background-color-default-hover, var(--a2-color-neutral-20, #f9f9f9))}
13
+ .bg-disabled {background-color: var(--a2-background-color-disabled, var(--a2-color-neutral-600, #545454))}
14
+ .bg-inverted {background-color: var(--a2-background-color-inverted, var(--a2-color-neutral-800, #292929))}
15
+ .bg-inverted-active {background-color: var(--a2-background-color-inverted-active, var(--a2-color-neutral-800, #292929))}
16
+ .bg-inverted-hover {background-color: var(--a2-background-color-inverted-hover, var(--a2-color-neutral-800, #292929))}
17
+ .bg-inverted-strong {background-color: var(--a2-background-color-inverted-strong, var(--a2-color-neutral-900, #1a1a1a))}
18
+ .bg-inverted-strong-active {background-color: var(--a2-background-color-inverted-strong-active, var(--a2-color-neutral-900, #1a1a1a))}
19
+ .bg-inverted-strong-hover {background-color: var(--a2-background-color-inverted-strong-hover, var(--a2-color-neutral-900, #1a1a1a))}
20
+ .bg-primary {background-color: var(--a2-background-color-primary, var(--a2-status-color-info, var(--a2-color-blue-600, #0265dc)))}
21
+ .bg-primary-active {background-color: var(--a2-background-color-primary-active, var(--a2-color-blue-800, #003472))}
22
+ .bg-primary-faint {background-color: var(--a2-background-color-primary-faint, var(--a2-color-blue-10, #fafcff))}
23
+ .bg-primary-faint-active {background-color: var(--a2-background-color-primary-faint-active, var(--a2-color-blue-100, #cce3ff))}
24
+ .bg-primary-faint-hover {background-color: var(--a2-background-color-primary-faint-hover, var(--a2-color-blue-50, #e6f1ff))}
25
+ .bg-primary-hover {background-color: var(--a2-background-color-primary-hover, var(--a2-color-blue-700, #1d4ca3))}
26
+ .bg-primary-subdued {background-color: var(--a2-background-color-primary-subdued, var(--a2-color-blue-50, #e6f1ff))}
27
+ .bg-primary-subdued-active {background-color: var(--a2-background-color-primary-subdued-active, var(--a2-color-blue-200, #9ecaff))}
28
+ .bg-primary-subdued-hover {background-color: var(--a2-background-color-primary-subdued-hover, var(--a2-color-blue-100, #cce3ff))}
29
+ .bg-secondary {background-color: var(--a2-background-color-secondary, color-mix(in srgb, var(--a2-color-neutral-950, #040404) 6%, transparent))}
30
+ .bg-secondary-active {background-color: var(--a2-background-color-secondary-active, color-mix(in srgb, var(--a2-color-neutral-950, #040404) 16%, transparent))}
31
+ .bg-secondary-hover {background-color: var(--a2-background-color-secondary-hover, color-mix(in srgb, var(--a2-color-neutral-950, #040404) 8%, transparent))}
32
+ .bg-secondary-strong {background-color: var(--a2-background-color-secondary-strong, color-mix(in srgb, var(--a2-color-neutral-950, #040404) 15%, transparent))}
33
+ .bg-secondary-strong-active {background-color: var(--a2-background-color-secondary-strong-active, color-mix(in srgb, var(--a2-color-neutral-950, #040404) 30%, transparent))}
34
+ .bg-secondary-strong-hover {background-color: var(--a2-background-color-secondary-strong-hover, color-mix(in srgb, var(--a2-color-neutral-950, #040404) 25%, transparent))}
35
+ .bg-status-danger {background-color: var(--a2-status-color-danger, var(--a2-color-red-600, #d62100))}
36
+ .bg-status-info {background-color: var(--a2-status-color-info, var(--a2-color-blue-600, #0265dc))}
37
+ .bg-status-success {background-color: var(--a2-status-color-success, var(--a2-color-green-600, #077e50))}
38
+ .bg-status-warning {background-color: var(--a2-status-color-warning, var(--a2-color-yellow-500, #ffbe00))}
39
+ .bg-strong {background-color: var(--a2-background-color-strong, var(--a2-color-neutral-20, #f9f9f9))}
40
+ .bg-strong-active {background-color: var(--a2-background-color-strong-active, var(--a2-color-neutral-70, #e8e8e8))}
41
+ .bg-strong-hover {background-color: var(--a2-background-color-strong-hover, var(--a2-color-neutral-50, #eeeeee))}
42
+ .bg-stronger {background-color: var(--a2-background-color-stronger, var(--a2-color-neutral-50, #eeeeee))}
43
+ .bg-stronger-active {background-color: var(--a2-background-color-stronger-active, var(--a2-color-neutral-100, #dfdfdf))}
44
+ .bg-stronger-hover {background-color: var(--a2-background-color-stronger-hover, var(--a2-color-neutral-90, #e5e5e5))}
45
+ .bg-strongest {background-color: var(--a2-background-color-strongest, var(--a2-color-neutral-200, #c4c4c4))}
46
+ .bg-strongest-active {background-color: var(--a2-background-color-strongest-active, var(--a2-color-neutral-400, #8b8b8b))}
47
+ .bg-strongest-hover {background-color: var(--a2-background-color-strongest-hover, var(--a2-color-neutral-300, #a8a8a8))}
48
+ .bg-success {background-color: var(--a2-background-color-success, var(--a2-status-color-success, var(--a2-color-green-600, #077e50)))}
49
+ .bg-success-active {background-color: var(--a2-background-color-success-active, var(--a2-color-green-800, #04482e))}
50
+ .bg-success-faint {background-color: var(--a2-background-color-success-faint, var(--a2-color-green-10, #f5fefb))}
51
+ .bg-success-faint-active {background-color: var(--a2-background-color-success-faint-active, var(--a2-color-green-100, #b8f5dd))}
52
+ .bg-success-faint-hover {background-color: var(--a2-background-color-success-faint-hover, var(--a2-color-green-50, #d3fded))}
53
+ .bg-success-hover {background-color: var(--a2-background-color-success-hover, var(--a2-color-green-700, #05613e))}
54
+ .bg-success-subdued {background-color: var(--a2-background-color-success-subdued, var(--a2-color-green-50, #d3fded))}
55
+ .bg-success-subdued-active {background-color: var(--a2-background-color-success-subdued-active, var(--a2-color-green-200, #70ebbc))}
56
+ .bg-success-subdued-hover {background-color: var(--a2-background-color-success-subdued-hover, var(--a2-color-green-100, #b8f5dd))}
57
+ .bg-transparent-danger {background-color: var(--a2-background-color-transparent-danger, rgba(0, 0, 0, 0))}
58
+ .bg-transparent-danger-active {background-color: var(--a2-background-color-transparent-danger-active, color-mix(in srgb, var(--a2-color-red-500, #ff3914) 30%, transparent))}
59
+ .bg-transparent-danger-hover {background-color: var(--a2-background-color-transparent-danger-hover, color-mix(in srgb, var(--a2-color-red-500, #ff3914) 10%, transparent))}
60
+ .bg-transparent-default {background-color: var(--a2-background-color-transparent-default, rgba(0, 0, 0, 0))}
61
+ .bg-transparent-default-active {background-color: var(--a2-background-color-transparent-default-active, color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 16%, transparent))}
62
+ .bg-transparent-default-hover {background-color: var(--a2-background-color-transparent-default-hover, color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 8%, transparent))}
63
+ .bg-transparent-primary {background-color: var(--a2-background-color-transparent-primary, rgba(0, 0, 0, 0))}
64
+ .bg-transparent-primary-active {background-color: var(--a2-background-color-transparent-primary-active, color-mix(in srgb, var(--a2-color-blue-500, #1a82ff) 30%, transparent))}
65
+ .bg-transparent-primary-hover {background-color: var(--a2-background-color-transparent-primary-hover, color-mix(in srgb, var(--a2-color-blue-500, #1a82ff) 10%, transparent))}
66
+ .bg-warning {background-color: var(--a2-background-color-warning, var(--a2-status-color-warning, var(--a2-color-yellow-500, #ffbe00)))}
67
+ .bg-warning-active {background-color: var(--a2-background-color-warning-active, var(--a2-color-yellow-600, #de9500))}
68
+ .bg-warning-faint {background-color: var(--a2-background-color-warning-faint, var(--a2-color-yellow-10, #fffef8))}
69
+ .bg-warning-faint-active {background-color: var(--a2-background-color-warning-faint-active, var(--a2-color-yellow-100, #fff9e2))}
70
+ .bg-warning-faint-hover {background-color: var(--a2-background-color-warning-faint-hover, var(--a2-color-yellow-50, #fffcf0))}
71
+ .bg-warning-hover {background-color: var(--a2-background-color-warning-hover, var(--a2-color-yellow-600, #de9500))}
72
+ .bg-warning-subdued {background-color: var(--a2-background-color-warning-subdued, var(--a2-color-yellow-100, #fff9e2))}
73
+ .bg-warning-subdued-active {background-color: var(--a2-background-color-warning-subdued-active, var(--a2-color-yellow-300, #ffe278))}
74
+ .bg-warning-subdued-hover {background-color: var(--a2-background-color-warning-subdued-hover, var(--a2-color-yellow-200, #fff0b1))}
75
+ .border-color-danger {border-color: var(--a2-border-color-danger, var(--a2-color-red-600, #d62100))}
76
+ .border-color-default {border-color: var(--a2-border-color-default, var(--a2-color-neutral-400, #8b8b8b))}
77
+ .border-color-primary {border-color: var(--a2-border-color-primary, var(--a2-color-blue-600, #0265dc))}
78
+ .border-color-status-info {border-color: var(--a2-status-color-info, var(--a2-color-blue-600, #0265dc))}
79
+ .border-color-status-success {border-color: var(--a2-status-color-success, var(--a2-color-green-600, #077e50))}
80
+ .border-color-status-warning {border-color: var(--a2-status-color-warning, var(--a2-color-yellow-500, #ffbe00))}
81
+ .border-color-strong {border-color: var(--a2-border-color-strong, var(--a2-color-neutral-700, #404040))}
82
+ .border-color-subdued {border-color: var(--a2-border-color-subdued, var(--a2-color-neutral-80, #e6e6e6))}
83
+ .border-color-success {border-color: var(--a2-border-color-success, var(--a2-color-green-600, #077e50))}
84
+ .border-color-warning {border-color: var(--a2-border-color-warning, var(--a2-color-yellow-700, #c98600))}
85
+ .c-danger {color: var(--a2-foreground-color-danger, var(--a2-color-red-600, #d62100))}
86
+ .c-danger-active {color: var(--a2-foreground-color-danger-active, var(--a2-color-red-800, #731100))}
87
+ .c-danger-hover {color: var(--a2-foreground-color-danger-hover, var(--a2-color-red-700, #a31900))}
88
+ .c-default {color: var(--a2-foreground-color-default, var(--a2-color-neutral-950, #040404))}
89
+ .c-default-active {color: var(--a2-foreground-color-default-active, var(--a2-color-neutral-950, #040404))}
90
+ .c-default-hover {color: var(--a2-foreground-color-default-hover, var(--a2-color-neutral-950, #040404))}
91
+ .c-inverted {color: var(--a2-foreground-color-inverted, var(--a2-color-neutral-0, #ffffff))}
92
+ .c-on-danger {color: var(--a2-foreground-color-on-danger, var(--a2-color-neutral-0, #ffffff))}
93
+ .c-on-danger-active {color: var(--a2-foreground-color-on-danger-active, var(--a2-color-neutral-0, #ffffff))}
94
+ .c-on-danger-hover {color: var(--a2-foreground-color-on-danger-hover, var(--a2-color-neutral-0, #ffffff))}
95
+ .c-on-danger-subdued {color: var(--a2-foreground-color-on-danger-subdued, var(--a2-color-red-700, #a31900))}
96
+ .c-on-danger-subdued-active {color: var(--a2-foreground-color-on-danger-subdued-active, var(--a2-color-red-900, #470b00))}
97
+ .c-on-danger-subdued-hover {color: var(--a2-foreground-color-on-danger-subdued-hover, var(--a2-color-red-800, #731100))}
98
+ .c-on-primary {color: var(--a2-foreground-color-on-primary, var(--a2-color-neutral-0, #ffffff))}
99
+ .c-on-primary-active {color: var(--a2-foreground-color-on-primary-active, var(--a2-color-neutral-0, #ffffff))}
100
+ .c-on-primary-hover {color: var(--a2-foreground-color-on-primary-hover, var(--a2-color-neutral-0, #ffffff))}
101
+ .c-on-success {color: var(--a2-foreground-color-on-success, var(--a2-color-neutral-0, #ffffff))}
102
+ .c-on-warning {color: var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a))}
103
+ .c-primary {color: var(--a2-foreground-color-primary, var(--a2-color-blue-600, #0265dc))}
104
+ .c-primary-active {color: var(--a2-foreground-color-primary-active, var(--a2-color-blue-800, #003472))}
105
+ .c-primary-hover {color: var(--a2-foreground-color-primary-hover, var(--a2-color-blue-700, #1d4ca3))}
106
+ .c-status-danger {color: var(--a2-status-color-danger, var(--a2-color-red-600, #d62100))}
107
+ .c-status-info {color: var(--a2-status-color-info, var(--a2-color-blue-600, #0265dc))}
108
+ .c-status-success {color: var(--a2-status-color-success, var(--a2-color-green-600, #077e50))}
109
+ .c-status-warning {color: var(--a2-status-color-warning, var(--a2-color-yellow-500, #ffbe00))}
110
+ .c-subdued {color: var(--a2-foreground-color-subdued, var(--a2-color-neutral-500, #707070))}
111
+ .c-subdued-active {color: var(--a2-foreground-color-subdued-active, var(--a2-color-neutral-600, #545454))}
112
+ .c-subdued-hover {color: var(--a2-foreground-color-subdued-hover, var(--a2-color-neutral-500, #707070))}
60
113
  @supports (color: light-dark(#fff, #000)) {
61
- .bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
62
- .bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
63
- .bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
64
- .bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
65
- .bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
66
- .bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
67
- .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
68
- .bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
69
- .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
70
- .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
71
- .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
72
- .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
73
- .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
74
- .bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
75
- .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
76
- .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
77
- .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
78
- .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
79
- .bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
80
- .bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
81
- .bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
82
- .bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
83
- .bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
84
- .bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
85
- .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
86
- .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
87
- .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
88
- .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
89
- .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
90
- .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
91
- .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
92
- .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
93
- .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
94
- .border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
95
- .border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
96
- .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
97
- .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
98
- .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
99
- .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
100
- .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
101
- .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
102
- .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
103
- .c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
104
- .c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
105
- .c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
106
- .c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
107
- .c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
108
- .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
109
- .c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
110
- .c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
111
- .c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
112
- .c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
113
- .c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
114
- .c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
115
- .c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
116
- .c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
117
- }
118
-
119
- @layer application {
120
- .bg-danger-default {background-color: var(--background-color-danger, #e13212)}
121
- .bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
122
- .bg-default {background-color: var(--background-color, #ffffff)}
123
- .bg-disabled {background-color: var(--background-color-disabled, #606162)}
124
- .bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
125
- .bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
126
- .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
127
- .bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
128
- .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
129
- .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
130
- .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
131
- .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
132
- .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
133
- .bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
134
- .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
135
- .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
136
- .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
137
- .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
138
- .bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
139
- .bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
140
- .bg-status-danger {background-color: var(--status-color-danger, #e13212)}
141
- .bg-status-info {background-color: var(--status-color-info, #0265DC)}
142
- .bg-status-success {background-color: var(--status-color-success, #007A4D)}
143
- .bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
144
- .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
145
- .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
146
- .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
147
- .bg-success-default {background-color: var(--background-color-success, #007A4D)}
148
- .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
149
- .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
150
- .border-color-danger {border-color: var(--border-color-danger, #e13212)}
151
- .border-color-default {border-color: var(--border-color, #949596)}
152
- .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
153
- .border-color-status-info {border-color: var(--status-color-info, #0265DC)}
154
- .border-color-status-success {border-color: var(--status-color-success, #007A4D)}
155
- .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
156
- .border-color-strong {border-color: var(--border-color-strong, #444445)}
157
- .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
158
- .border-color-success {border-color: var(--border-color-success, #007A4D)}
159
- .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
160
- .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
161
- .c-danger {color: var(--foreground-color-danger, #e13212)}
162
- .c-default {color: var(--foreground-color, #141414)}
163
- .c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
164
- .c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
165
- .c-inverted {color: var(--foreground-color-inverted, #ffffff)}
166
- .c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
167
- .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
168
- .c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
169
- .c-on-warning {color: var(--foreground-color-on-warning, #141414)}
170
- .c-primary {color: var(--foreground-color-primary, #0265DC)}
171
- .c-status-danger {color: var(--status-color-danger, #e13212)}
172
- .c-status-info {color: var(--status-color-info, #0265DC)}
173
- .c-status-success {color: var(--status-color-success, #007A4D)}
174
- .c-status-warning {color: var(--status-color-warning, #ffbe00)}
175
- .c-subdued {color: var(--foreground-color-subdued, #737475)}
176
-
177
- @supports (color: light-dark(#fff, #000)) {
178
- .bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
179
- .bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
180
- .bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
181
- .bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
182
- .bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
183
- .bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
184
- .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
185
- .bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
186
- .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
187
- .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
188
- .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
189
- .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
190
- .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
191
- .bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
192
- .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
193
- .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
194
- .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
195
- .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
196
- .bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
197
- .bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
198
- .bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
199
- .bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
200
- .bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
201
- .bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
202
- .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
203
- .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
204
- .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
205
- .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
206
- .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
207
- .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
208
- .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
209
- .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
210
- .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
211
- .border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
212
- .border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
213
- .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
214
- .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
215
- .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
216
- .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
217
- .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
218
- .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
219
- .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
220
- .c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
221
- .c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
222
- .c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
223
- .c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
224
- .c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
225
- .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
226
- .c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
227
- .c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
228
- .c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
229
- .c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
230
- .c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
231
- .c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
232
- .c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
233
- .c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
234
- }
114
+ .bg-danger {background-color: var(--a2-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))))}
115
+ .bg-danger-active {background-color: var(--a2-background-color-danger-active, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-red-200, #ffac9e)))}
116
+ .bg-danger-faint {background-color: var(--a2-background-color-danger-faint, light-dark(var(--a2-color-red-10, #fffbfa), var(--a2-color-red-950, #0a0200)))}
117
+ .bg-danger-faint-active {background-color: var(--a2-background-color-danger-faint-active, light-dark(var(--a2-color-red-100, #ffd4cc), var(--a2-color-red-700, #a31900)))}
118
+ .bg-danger-faint-hover {background-color: var(--a2-background-color-danger-faint-hover, light-dark(var(--a2-color-red-50, #ffe9e5), var(--a2-color-red-800, #731100)))}
119
+ .bg-danger-hover {background-color: var(--a2-background-color-danger-hover, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-300, #ff8670)))}
120
+ .bg-danger-subdued {background-color: var(--a2-background-color-danger-subdued, light-dark(var(--a2-color-red-50, #ffe9e5), color-mix(in srgb, var(--a2-color-red-300, #ff8670) 20%, transparent)))}
121
+ .bg-danger-subdued-active {background-color: var(--a2-background-color-danger-subdued-active, light-dark(var(--a2-color-red-200, #ffac9e), color-mix(in srgb, var(--a2-color-red-300, #ff8670) 40%, transparent)))}
122
+ .bg-danger-subdued-hover {background-color: var(--a2-background-color-danger-subdued-hover, light-dark(var(--a2-color-red-100, #ffd4cc), color-mix(in srgb, var(--a2-color-red-300, #ff8670) 30%, transparent)))}
123
+ .bg-default {background-color: var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
124
+ .bg-default-active {background-color: var(--a2-background-color-default-active, light-dark(var(--a2-color-neutral-40, #f1f1f1), var(--a2-color-neutral-700, #404040)))}
125
+ .bg-default-hover {background-color: var(--a2-background-color-default-hover, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)))}
126
+ .bg-disabled {background-color: var(--a2-background-color-disabled, light-dark(var(--a2-color-neutral-600, #545454), var(--a2-color-neutral-500, #707070)))}
127
+ .bg-inverted {background-color: var(--a2-background-color-inverted, light-dark(var(--a2-color-neutral-800, #292929), var(--a2-color-neutral-20, #f9f9f9)))}
128
+ .bg-inverted-active {background-color: var(--a2-background-color-inverted-active, light-dark(var(--a2-color-neutral-800, #292929), var(--a2-color-neutral-20, #f9f9f9)))}
129
+ .bg-inverted-hover {background-color: var(--a2-background-color-inverted-hover, light-dark(var(--a2-color-neutral-800, #292929), var(--a2-color-neutral-20, #f9f9f9)))}
130
+ .bg-inverted-strong {background-color: var(--a2-background-color-inverted-strong, light-dark(var(--a2-color-neutral-900, #1a1a1a), var(--a2-color-neutral-0, #ffffff)))}
131
+ .bg-inverted-strong-active {background-color: var(--a2-background-color-inverted-strong-active, light-dark(var(--a2-color-neutral-900, #1a1a1a), var(--a2-color-neutral-0, #ffffff)))}
132
+ .bg-inverted-strong-hover {background-color: var(--a2-background-color-inverted-strong-hover, light-dark(var(--a2-color-neutral-900, #1a1a1a), var(--a2-color-neutral-0, #ffffff)))}
133
+ .bg-primary {background-color: var(--a2-background-color-primary, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))))}
134
+ .bg-primary-active {background-color: var(--a2-background-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-100, #cce3ff)))}
135
+ .bg-primary-faint {background-color: var(--a2-background-color-primary-faint, light-dark(var(--a2-color-blue-10, #fafcff), var(--a2-color-blue-950, #000b19)))}
136
+ .bg-primary-faint-active {background-color: var(--a2-background-color-primary-faint-active, light-dark(var(--a2-color-blue-100, #cce3ff), var(--a2-color-blue-700, #1d4ca3)))}
137
+ .bg-primary-faint-hover {background-color: var(--a2-background-color-primary-faint-hover, light-dark(var(--a2-color-blue-50, #e6f1ff), var(--a2-color-blue-800, #003472)))}
138
+ .bg-primary-hover {background-color: var(--a2-background-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff)))}
139
+ .bg-primary-subdued {background-color: var(--a2-background-color-primary-subdued, light-dark(var(--a2-color-blue-50, #e6f1ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 20%, transparent)))}
140
+ .bg-primary-subdued-active {background-color: var(--a2-background-color-primary-subdued-active, light-dark(var(--a2-color-blue-200, #9ecaff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 40%, transparent)))}
141
+ .bg-primary-subdued-hover {background-color: var(--a2-background-color-primary-subdued-hover, light-dark(var(--a2-color-blue-100, #cce3ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 30%, transparent)))}
142
+ .bg-secondary {background-color: var(--a2-background-color-secondary, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 6%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)))}
143
+ .bg-secondary-active {background-color: var(--a2-background-color-secondary-active, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 16%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 16%, transparent)))}
144
+ .bg-secondary-hover {background-color: var(--a2-background-color-secondary-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 12%, transparent)))}
145
+ .bg-secondary-strong {background-color: var(--a2-background-color-secondary-strong, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 15%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 55%, transparent)))}
146
+ .bg-secondary-strong-active {background-color: var(--a2-background-color-secondary-strong-active, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 30%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 75%, transparent)))}
147
+ .bg-secondary-strong-hover {background-color: var(--a2-background-color-secondary-strong-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 25%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 65%, transparent)))}
148
+ .bg-status-danger {background-color: var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))}
149
+ .bg-status-info {background-color: var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))}
150
+ .bg-status-success {background-color: var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085)))}
151
+ .bg-status-warning {background-color: var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278)))}
152
+ .bg-strong {background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)))}
153
+ .bg-strong-active {background-color: var(--a2-background-color-strong-active, light-dark(var(--a2-color-neutral-70, #e8e8e8), var(--a2-color-neutral-600, #545454)))}
154
+ .bg-strong-hover {background-color: var(--a2-background-color-strong-hover, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040)))}
155
+ .bg-stronger {background-color: var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040)))}
156
+ .bg-stronger-active {background-color: var(--a2-background-color-stronger-active, light-dark(var(--a2-color-neutral-100, #dfdfdf), var(--a2-color-neutral-500, #707070)))}
157
+ .bg-stronger-hover {background-color: var(--a2-background-color-stronger-hover, light-dark(var(--a2-color-neutral-90, #e5e5e5), var(--a2-color-neutral-600, #545454)))}
158
+ .bg-strongest {background-color: var(--a2-background-color-strongest, light-dark(var(--a2-color-neutral-200, #c4c4c4), var(--a2-color-neutral-500, #707070)))}
159
+ .bg-strongest-active {background-color: var(--a2-background-color-strongest-active, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-300, #a8a8a8)))}
160
+ .bg-strongest-hover {background-color: var(--a2-background-color-strongest-hover, light-dark(var(--a2-color-neutral-300, #a8a8a8), var(--a2-color-neutral-400, #8b8b8b)))}
161
+ .bg-success {background-color: var(--a2-background-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085))))}
162
+ .bg-success-active {background-color: var(--a2-background-color-success-active, light-dark(var(--a2-color-green-800, #04482e), var(--a2-color-green-50, #d3fded)))}
163
+ .bg-success-faint {background-color: var(--a2-background-color-success-faint, light-dark(var(--a2-color-green-10, #f5fefb), var(--a2-color-green-950, #010f0a)))}
164
+ .bg-success-faint-active {background-color: var(--a2-background-color-success-faint-active, light-dark(var(--a2-color-green-100, #b8f5dd), var(--a2-color-green-700, #05613e)))}
165
+ .bg-success-faint-hover {background-color: var(--a2-background-color-success-faint-hover, light-dark(var(--a2-color-green-50, #d3fded), var(--a2-color-green-800, #04482e)))}
166
+ .bg-success-hover {background-color: var(--a2-background-color-success-hover, light-dark(var(--a2-color-green-700, #05613e), var(--a2-color-green-300, #3be3a2)))}
167
+ .bg-success-subdued {background-color: var(--a2-background-color-success-subdued, light-dark(var(--a2-color-green-50, #d3fded), color-mix(in srgb, var(--a2-color-green-300, #3be3a2) 20%, transparent)))}
168
+ .bg-success-subdued-active {background-color: var(--a2-background-color-success-subdued-active, light-dark(var(--a2-color-green-200, #70ebbc), color-mix(in srgb, var(--a2-color-green-300, #3be3a2) 40%, transparent)))}
169
+ .bg-success-subdued-hover {background-color: var(--a2-background-color-success-subdued-hover, light-dark(var(--a2-color-green-100, #b8f5dd), color-mix(in srgb, var(--a2-color-green-300, #3be3a2) 30%, transparent)))}
170
+ .bg-transparent-danger-active {background-color: var(--a2-background-color-transparent-danger-active, light-dark(color-mix(in srgb, var(--a2-color-red-500, #ff3914) 30%, transparent), color-mix(in srgb, var(--a2-color-red-300, #ff8670) 25%, transparent)))}
171
+ .bg-transparent-danger-hover {background-color: var(--a2-background-color-transparent-danger-hover, light-dark(color-mix(in srgb, var(--a2-color-red-500, #ff3914) 10%, transparent), color-mix(in srgb, var(--a2-color-red-300, #ff8670) 10%, transparent)))}
172
+ .bg-transparent-default-active {background-color: var(--a2-background-color-transparent-default-active, light-dark(color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 16%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 16%, transparent)))}
173
+ .bg-transparent-default-hover {background-color: var(--a2-background-color-transparent-default-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)))}
174
+ .bg-transparent-primary-active {background-color: var(--a2-background-color-transparent-primary-active, light-dark(color-mix(in srgb, var(--a2-color-blue-500, #1a82ff) 30%, transparent), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 25%, transparent)))}
175
+ .bg-transparent-primary-hover {background-color: var(--a2-background-color-transparent-primary-hover, light-dark(color-mix(in srgb, var(--a2-color-blue-500, #1a82ff) 10%, transparent), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 10%, transparent)))}
176
+ .bg-warning {background-color: var(--a2-background-color-warning, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278))))}
177
+ .bg-warning-active {background-color: var(--a2-background-color-warning-active, light-dark(var(--a2-color-yellow-600, #de9500), var(--a2-color-yellow-100, #fff9e2)))}
178
+ .bg-warning-faint {background-color: var(--a2-background-color-warning-faint, light-dark(var(--a2-color-yellow-10, #fffef8), var(--a2-color-yellow-950, #191100)))}
179
+ .bg-warning-faint-active {background-color: var(--a2-background-color-warning-faint-active, light-dark(var(--a2-color-yellow-100, #fff9e2), var(--a2-color-yellow-700, #c98600)))}
180
+ .bg-warning-faint-hover {background-color: var(--a2-background-color-warning-faint-hover, light-dark(var(--a2-color-yellow-50, #fffcf0), var(--a2-color-yellow-800, #704b00)))}
181
+ .bg-warning-hover {background-color: var(--a2-background-color-warning-hover, light-dark(var(--a2-color-yellow-600, #de9500), var(--a2-color-yellow-100, #fff9e2)))}
182
+ .bg-warning-subdued {background-color: var(--a2-background-color-warning-subdued, light-dark(var(--a2-color-yellow-100, #fff9e2), color-mix(in srgb, var(--a2-color-yellow-400, #ffc902) 20%, transparent)))}
183
+ .bg-warning-subdued-active {background-color: var(--a2-background-color-warning-subdued-active, light-dark(var(--a2-color-yellow-300, #ffe278), color-mix(in srgb, var(--a2-color-yellow-400, #ffc902) 40%, transparent)))}
184
+ .bg-warning-subdued-hover {background-color: var(--a2-background-color-warning-subdued-hover, light-dark(var(--a2-color-yellow-200, #fff0b1), color-mix(in srgb, var(--a2-color-yellow-400, #ffc902) 30%, transparent)))}
185
+ .border-color-danger {border-color: var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e)))}
186
+ .border-color-default {border-color: var(--a2-border-color-default, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-600, #545454)))}
187
+ .border-color-primary {border-color: var(--a2-border-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-200, #9ecaff)))}
188
+ .border-color-status-info {border-color: var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))}
189
+ .border-color-status-success {border-color: var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085)))}
190
+ .border-color-status-warning {border-color: var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278)))}
191
+ .border-color-strong {border-color: var(--a2-border-color-strong, light-dark(var(--a2-color-neutral-700, #404040), var(--a2-color-neutral-80, #e6e6e6)))}
192
+ .border-color-subdued {border-color: var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040)))}
193
+ .border-color-success {border-color: var(--a2-border-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-200, #70ebbc)))}
194
+ .border-color-warning {border-color: var(--a2-border-color-warning, light-dark(var(--a2-color-yellow-700, #c98600), var(--a2-color-yellow-200, #fff0b1)))}
195
+ .c-danger {color: var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))}
196
+ .c-danger-active {color: var(--a2-foreground-color-danger-active, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-red-200, #ffac9e)))}
197
+ .c-danger-hover {color: var(--a2-foreground-color-danger-hover, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-300, #ff8670)))}
198
+ .c-default {color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)))}
199
+ .c-default-active {color: var(--a2-foreground-color-default-active, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)))}
200
+ .c-default-hover {color: var(--a2-foreground-color-default-hover, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)))}
201
+ .c-inverted {color: var(--a2-foreground-color-inverted, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
202
+ .c-on-danger {color: var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
203
+ .c-on-danger-active {color: var(--a2-foreground-color-on-danger-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
204
+ .c-on-danger-hover {color: var(--a2-foreground-color-on-danger-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
205
+ .c-on-danger-subdued {color: var(--a2-foreground-color-on-danger-subdued, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-neutral-0, #ffffff)))}
206
+ .c-on-danger-subdued-active {color: var(--a2-foreground-color-on-danger-subdued-active, light-dark(var(--a2-color-red-900, #470b00), var(--a2-color-neutral-0, #ffffff)))}
207
+ .c-on-danger-subdued-hover {color: var(--a2-foreground-color-on-danger-subdued-hover, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-neutral-0, #ffffff)))}
208
+ .c-on-primary {color: var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
209
+ .c-on-primary-active {color: var(--a2-foreground-color-on-primary-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
210
+ .c-on-primary-hover {color: var(--a2-foreground-color-on-primary-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
211
+ .c-on-success {color: var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))}
212
+ .c-on-warning {color: var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a))}
213
+ .c-primary {color: var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))}
214
+ .c-primary-active {color: var(--a2-foreground-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-200, #9ecaff)))}
215
+ .c-primary-hover {color: var(--a2-foreground-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff)))}
216
+ .c-status-danger {color: var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))}
217
+ .c-status-info {color: var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))}
218
+ .c-status-success {color: var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085)))}
219
+ .c-status-warning {color: var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278)))}
220
+ .c-subdued {color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)))}
221
+ .c-subdued-active {color: var(--a2-foreground-color-subdued-active, light-dark(var(--a2-color-neutral-600, #545454), var(--a2-color-neutral-100, #dfdfdf)))}
222
+ .c-subdued-hover {color: var(--a2-foreground-color-subdued-hover, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)))}
235
223
  }
package/build/web/core/css-utils/font.css CHANGED
@@ -1,5 +1,3 @@
1
- @layer starter, reset, base, state, application;
2
-
3
1
  .ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
4
2
  .ff-label {font-family: 'Nunito Sans', sans-serif}
5
3
  .ff-paragraph {font-family: 'Nunito Sans', sans-serif}
@@ -20,30 +18,4 @@
20
18
  .fs-paragraph-xsmall {font-size: 0.75rem}
21
19
  .fw-heading {font-weight: 700}
22
20
  .fw-label {font-weight: 600}
23
- .fw-paragraph {font-weight: 400}
24
-
25
-
26
- @layer application {
27
- .ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
28
- .ff-label {font-family: 'Nunito Sans', sans-serif}
29
- .ff-paragraph {font-family: 'Nunito Sans', sans-serif}
30
- .fs-heading-default {font-size: 1.25rem}
31
- .fs-heading-large {font-size: 1.5rem}
32
- .fs-heading-small {font-size: 1rem}
33
- .fs-heading-xlarge {font-size: 2rem}
34
- .fs-heading-xsmall {font-size: 0.875rem}
35
- .fs-label-default {font-size: 0.875rem}
36
- .fs-label-large {font-size: 1rem}
37
- .fs-label-small {font-size: 0.75rem}
38
- .fs-label-xlarge {font-size: 1.25rem}
39
- .fs-label-xsmall {font-size: 0.625rem}
40
- .fs-paragraph-default {font-size: 1rem}
41
- .fs-paragraph-large {font-size: 1.25rem}
42
- .fs-paragraph-small {font-size: 0.875rem}
43
- .fs-paragraph-xlarge {font-size: 1.5rem}
44
- .fs-paragraph-xsmall {font-size: 0.75rem}
45
- .fw-heading {font-weight: 700}
46
- .fw-label {font-weight: 600}
47
- .fw-paragraph {font-weight: 400}
48
-
49
- }
21
+ .fw-paragraph {font-weight: 400}