@servicetitan/hammer-token 2.5.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/CHANGELOG.md +50 -0
  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 +47 -45
  8. package/build/web/core/css-utils/a2-color.css +443 -227
  9. package/build/web/core/css-utils/a2-font.css +0 -2
  10. package/build/web/core/css-utils/a2-spacing.css +476 -478
  11. package/build/web/core/css-utils/a2-utils.css +992 -772
  12. package/build/web/core/css-utils/border.css +47 -45
  13. package/build/web/core/css-utils/color.css +443 -227
  14. package/build/web/core/css-utils/font.css +0 -2
  15. package/build/web/core/css-utils/spacing.css +476 -478
  16. package/build/web/core/css-utils/utils.css +992 -772
  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/index.js +0 -1
  29. package/build/web/types.d.ts +17 -0
  30. package/config.js +121 -497
  31. package/eslint.config.mjs +11 -1
  32. package/package.json +15 -5
  33. package/src/global/primitive/breakpoint.tokens.json +54 -0
  34. package/src/global/primitive/color.tokens.json +1092 -0
  35. package/src/global/primitive/duration.tokens.json +44 -0
  36. package/src/global/primitive/font.tokens.json +151 -0
  37. package/src/global/primitive/radius.tokens.json +94 -0
  38. package/src/global/primitive/size.tokens.json +174 -0
  39. package/src/global/primitive/transition.tokens.json +32 -0
  40. package/src/theme/core/background.tokens.json +1312 -0
  41. package/src/theme/core/border.tokens.json +192 -0
  42. package/src/theme/core/chart.tokens.json +982 -0
  43. package/src/theme/core/component/ai-mark.tokens.json +20 -0
  44. package/src/theme/core/component/alert.tokens.json +261 -0
  45. package/src/theme/core/component/announcement.tokens.json +460 -0
  46. package/src/theme/core/component/avatar.tokens.json +137 -0
  47. package/src/theme/core/component/badge.tokens.json +42 -0
  48. package/src/theme/core/component/breadcrumb.tokens.json +42 -0
  49. package/src/theme/core/component/button-toggle.tokens.json +428 -0
  50. package/src/theme/core/component/button.tokens.json +941 -0
  51. package/src/theme/core/component/calendar.tokens.json +391 -0
  52. package/src/theme/core/component/card.tokens.json +107 -0
  53. package/src/theme/core/component/checkbox.tokens.json +631 -0
  54. package/src/theme/core/component/chip.tokens.json +169 -0
  55. package/src/theme/core/component/combobox.tokens.json +269 -0
  56. package/src/theme/core/component/details.tokens.json +152 -0
  57. package/src/theme/core/component/dialog.tokens.json +87 -0
  58. package/src/theme/core/component/divider.tokens.json +23 -0
  59. package/src/theme/core/component/dnd.tokens.json +208 -0
  60. package/src/theme/core/component/drawer.tokens.json +61 -0
  61. package/src/theme/core/component/drilldown.tokens.json +61 -0
  62. package/src/theme/core/component/edit-card.tokens.json +381 -0
  63. package/src/theme/core/component/field-label.tokens.json +42 -0
  64. package/src/theme/core/component/field-message.tokens.json +74 -0
  65. package/src/theme/core/component/icon.tokens.json +42 -0
  66. package/src/theme/core/component/link.tokens.json +108 -0
  67. package/src/theme/core/component/list-view.tokens.json +82 -0
  68. package/src/theme/core/component/listbox.tokens.json +283 -0
  69. package/src/theme/core/component/menu.tokens.json +230 -0
  70. package/src/theme/core/component/overflow.tokens.json +84 -0
  71. package/src/theme/core/component/page.tokens.json +377 -0
  72. package/src/theme/core/component/pagination.tokens.json +63 -0
  73. package/src/theme/core/component/popover.tokens.json +122 -0
  74. package/src/theme/core/component/progress-bar.tokens.json +133 -0
  75. package/src/theme/core/component/radio.tokens.json +631 -0
  76. package/src/theme/core/component/segmented-control.tokens.json +175 -0
  77. package/src/theme/core/component/select-card.tokens.json +943 -0
  78. package/src/theme/core/component/side-nav.tokens.json +349 -0
  79. package/src/theme/core/component/skeleton.tokens.json +42 -0
  80. package/src/theme/core/component/spinner.tokens.json +96 -0
  81. package/src/theme/core/component/status-icon.tokens.json +164 -0
  82. package/src/theme/core/component/stepper.tokens.json +484 -0
  83. package/src/theme/core/component/switch.tokens.json +285 -0
  84. package/src/theme/core/component/tab.tokens.json +192 -0
  85. package/src/theme/core/component/text-field.tokens.json +160 -0
  86. package/src/theme/core/component/text.tokens.json +59 -0
  87. package/src/theme/core/component/toast.tokens.json +343 -0
  88. package/src/theme/core/component/toolbar.tokens.json +114 -0
  89. package/src/theme/core/component/tooltip.tokens.json +61 -0
  90. package/src/theme/core/focus.tokens.json +56 -0
  91. package/src/theme/core/foreground.tokens.json +416 -0
  92. package/src/theme/core/gradient.tokens.json +41 -0
  93. package/src/theme/core/opacity.tokens.json +25 -0
  94. package/src/theme/core/shadow.tokens.json +81 -0
  95. package/src/theme/core/status.tokens.json +74 -0
  96. package/src/theme/core/typography.tokens.json +163 -0
  97. package/src/utils/__tests__/css-utils-format-utils.test.js +312 -0
  98. package/src/utils/__tests__/sd-build-configs.test.js +306 -0
  99. package/src/utils/__tests__/sd-formats.test.js +950 -0
  100. package/src/utils/__tests__/sd-transforms.test.js +336 -0
  101. package/src/utils/__tests__/token-helpers.test.js +1160 -0
  102. package/src/utils/copy-css-utils-cli.js +13 -1
  103. package/src/utils/css-utils-format-utils.js +105 -176
  104. package/src/utils/figma/__tests__/sync-gradient.test.js +561 -0
  105. package/src/utils/figma/__tests__/token-conversion.test.js +117 -0
  106. package/src/utils/figma/__tests__/token-resolution.test.js +231 -0
  107. package/src/utils/figma/auth.js +355 -0
  108. package/src/utils/figma/constants.js +22 -0
  109. package/src/utils/figma/errors.js +80 -0
  110. package/src/utils/figma/figma-api.js +1069 -0
  111. package/src/utils/figma/get-token.js +348 -0
  112. package/src/utils/figma/sync-components.js +909 -0
  113. package/src/utils/figma/sync-main.js +692 -0
  114. package/src/utils/figma/sync-orchestration.js +683 -0
  115. package/src/utils/figma/sync-primitives.js +230 -0
  116. package/src/utils/figma/sync-semantic.js +1056 -0
  117. package/src/utils/figma/token-conversion.js +340 -0
  118. package/src/utils/figma/token-parsing.js +186 -0
  119. package/src/utils/figma/token-resolution.js +569 -0
  120. package/src/utils/figma/utils.js +199 -0
  121. package/src/utils/sd-build-configs.js +305 -0
  122. package/src/utils/sd-formats.js +965 -0
  123. package/src/utils/sd-transforms.js +165 -0
  124. package/src/utils/token-helpers.js +848 -0
  125. package/tsconfig.json +18 -0
  126. package/vitest.config.js +17 -0
  127. package/.turbo/turbo-build.log +0 -37
  128. package/build/web/core/raw.js +0 -234
  129. package/src/global/primitive/breakpoint.js +0 -19
  130. package/src/global/primitive/color.js +0 -231
  131. package/src/global/primitive/duration.js +0 -16
  132. package/src/global/primitive/font.js +0 -60
  133. package/src/global/primitive/radius.js +0 -31
  134. package/src/global/primitive/size.js +0 -55
  135. package/src/global/primitive/transition.js +0 -16
  136. package/src/theme/core/background.js +0 -170
  137. package/src/theme/core/border.js +0 -103
  138. package/src/theme/core/charts.js +0 -464
  139. package/src/theme/core/component/button.js +0 -708
  140. package/src/theme/core/component/checkbox.js +0 -405
  141. package/src/theme/core/focus.js +0 -35
  142. package/src/theme/core/foreground.js +0 -148
  143. package/src/theme/core/overlay.js +0 -137
  144. package/src/theme/core/shadow.js +0 -29
  145. package/src/theme/core/status.js +0 -49
  146. package/src/theme/core/typography.js +0 -82
  147. package/type/types.ts +0 -344
package/build/web/core/semantic.scss CHANGED
@@ -1,140 +1,219 @@
1
- $background-color: var(--background-color, #ffffff);
2
- $background-color-strong: var(--background-color-strong, #f7f7f7);
3
- $background-color-stronger: var(--background-color-stronger, #eeeeee);
4
- $background-color-strongest: var(--background-color-strongest, #bcbcbd);
5
- $background-color-primary: var(--background-color-primary, #0265DC);
6
- $background-color-primary-subdued: var(--background-color-primary-subdued, #E0F2FF);
7
- $background-color-success: var(--background-color-success, #007A4D);
8
- $background-color-success-subdued: var(--background-color-success-subdued, #CEF8E0);
9
- $background-color-danger: var(--background-color-danger, #e13212);
10
- $background-color-danger-subdued: var(--background-color-danger-subdued, #ffece9);
11
- $background-color-warning: var(--background-color-warning, #ffbe00);
12
- $background-color-disabled: var(--background-color-disabled, #606162);
13
- $background-color-inverted: var(--background-color-inverted, #2d2e31);
14
- $background-color-inverted-strong: var(--background-color-inverted-strong, #141414);
15
- $border-radius-none: 0;
16
- $border-radius-small: 0.1875rem;
17
- $border-radius-medium: 0.375rem;
18
- $border-radius-large: 0.75rem;
19
- $border-radius-xlarge: 1.5rem;
20
- $border-radius-circular: 100%;
21
- $border-width-none: 0rem;
22
- $border-width: 0.0625rem;
23
- $border-width-strong: 0.125rem;
24
- $border-color: var(--border-color, #949596);
25
- $border-color-subdued: var(--border-color-subdued, #dfe0e1);
26
- $border-color-strong: var(--border-color-strong, #444445);
27
- $border-color-primary: var(--border-color-primary, #0265DC);
28
- $border-color-success: var(--border-color-success, #007A4D);
29
- $border-color-danger: var(--border-color-danger, #e13212);
30
- $charts-monochrome-01-color: var(--charts-monochrome-01-color, #3892F3);
31
- $charts-monochrome-01-stroke: var(--charts-monochrome-01-stroke, transparent);
32
- $charts-monochrome-01-pattern: solid;
33
- $charts-monochrome-02-color: var(--charts-monochrome-02-color, #08389c);
34
- $charts-monochrome-02-stroke: var(--charts-monochrome-02-stroke, transparent);
35
- $charts-monochrome-02-pattern: solid;
36
- $charts-monochrome-03-color: var(--charts-monochrome-03-color, #F2F9FF);
37
- $charts-monochrome-03-stroke: var(--charts-monochrome-03-stroke, #3892F3);
38
- $charts-monochrome-03-pattern: striped;
39
- $charts-monochrome-04-color: var(--charts-monochrome-04-color, #F2F9FF);
40
- $charts-monochrome-04-stroke: var(--charts-monochrome-04-stroke, #3892F3);
41
- $charts-monochrome-04-pattern: solid;
42
- $charts-categorical-10-color: var(--charts-categorical-10-color, #D57A5C);
43
- $charts-categorical-10-stroke: var(--charts-categorical-10-stroke, transparent);
44
- $charts-categorical-10-pattern: solid;
45
- $charts-categorical-01-color: var(--charts-categorical-01-color, #3892F3);
46
- $charts-categorical-01-stroke: var(--charts-categorical-01-stroke, transparent);
47
- $charts-categorical-01-pattern: solid;
48
- $charts-categorical-02-color: var(--charts-categorical-02-color, #08389c);
49
- $charts-categorical-02-stroke: var(--charts-categorical-02-stroke, transparent);
50
- $charts-categorical-02-pattern: solid;
51
- $charts-categorical-03-color: var(--charts-categorical-03-color, #0FA2B8);
52
- $charts-categorical-03-stroke: var(--charts-categorical-03-stroke, transparent);
53
- $charts-categorical-03-pattern: solid;
54
- $charts-categorical-04-color: var(--charts-categorical-04-color, #907AF5);
55
- $charts-categorical-04-stroke: var(--charts-categorical-04-stroke, transparent);
56
- $charts-categorical-04-pattern: solid;
57
- $charts-categorical-05-color: var(--charts-categorical-05-color, #DE52CE);
58
- $charts-categorical-05-stroke: var(--charts-categorical-05-stroke, transparent);
59
- $charts-categorical-05-pattern: solid;
60
- $charts-categorical-06-color: var(--charts-categorical-06-color, #C2185B);
61
- $charts-categorical-06-stroke: var(--charts-categorical-06-stroke, transparent);
62
- $charts-categorical-06-pattern: solid;
63
- $charts-categorical-07-color: var(--charts-categorical-07-color, #759E15);
64
- $charts-categorical-07-stroke: var(--charts-categorical-07-stroke, transparent);
65
- $charts-categorical-07-pattern: solid;
66
- $charts-categorical-08-color: var(--charts-categorical-08-color, #AC6400);
67
- $charts-categorical-08-stroke: var(--charts-categorical-08-stroke, transparent);
68
- $charts-categorical-08-pattern: solid;
69
- $charts-categorical-09-color: var(--charts-categorical-09-color, #EB7200);
70
- $charts-categorical-09-stroke: var(--charts-categorical-09-stroke, transparent);
71
- $charts-categorical-09-pattern: solid;
72
- $charts-status-success-color: var(--charts-status-success-color, #007A4D);
73
- $charts-status-success-stroke: var(--charts-status-success-stroke, transparent);
74
- $charts-status-success-pattern: solid;
75
- $charts-status-warning-color: var(--charts-status-warning-color, #ffbe00);
76
- $charts-status-warning-stroke: var(--charts-status-warning-stroke, transparent);
77
- $charts-status-warning-pattern: solid;
78
- $charts-status-danger-color: var(--charts-status-danger-color, #e13212);
79
- $charts-status-danger-stroke: var(--charts-status-danger-stroke, transparent);
80
- $charts-status-danger-pattern: solid;
81
- $charts-status-neutral-color: var(--charts-status-neutral-color, #ffffff);
82
- $charts-status-neutral-stroke: var(--charts-status-neutral-stroke, #8C9CA5);
83
- $charts-status-neutral-pattern: striped;
84
- $focus-ring-color: var(--focus-ring-color, #0265DC);
85
- $focus-ring-color-danger: var(--focus-ring-color-danger, #e13212);
86
- $focus-ring-width: 0.25rem;
87
- $foreground-color: var(--foreground-color, #141414);
88
- $foreground-color-subdued: var(--foreground-color-subdued, #737475);
89
- $foreground-color-primary: var(--foreground-color-primary, #0265DC);
90
- $foreground-color-danger: var(--foreground-color-danger, #e13212);
91
- $foreground-color-inverted: var(--foreground-color-inverted, #ffffff);
92
- $foreground-color-on-primary: var(--foreground-color-on-primary, #ffffff);
93
- $foreground-color-on-danger: var(--foreground-color-on-danger, #ffffff);
94
- $foreground-color-on-danger-subdued: var(--foreground-color-on-danger-subdued, #bf2a00);
95
- $foreground-color-on-warning: var(--foreground-color-on-warning, #141414);
96
- $foreground-color-active-primary: var(--foreground-color-active-primary, #004491);
97
- $foreground-color-active-danger: var(--foreground-color-active-danger, #bf2a00);
98
- $foreground-color-hover-primary: var(--foreground-color-hover-primary, #004491);
99
- $foreground-color-hover-danger: var(--foreground-color-hover-danger, #bf2a00);
100
- $overlay-color-active: var(--overlay-color-active, #14141429);
101
- $overlay-color-active-primary: var(--overlay-color-active-primary, #0265DC4D);
102
- $overlay-color-active-danger: var(--overlay-color-active-danger, #e132124D);
103
- $overlay-color-active-on: var(--overlay-color-active-on, #14141429);
104
- $overlay-color-active-on-primary: var(--overlay-color-active-on-primary, #14141466);
105
- $overlay-color-active-on-danger: var(--overlay-color-active-on-danger, #14141466);
106
- $overlay-color-hover: var(--overlay-color-hover, #14141414);
107
- $overlay-color-hover-primary: var(--overlay-color-hover-primary, #0265DC1A);
108
- $overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132121A);
109
- $overlay-color-hover-on: var(--overlay-color-hover-on, #14141414);
110
- $overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #14141433);
111
- $overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #14141433);
112
- $shadow-color: var(--shadow-color, #14141414);
113
- $shadow-size-flat: 0rem 0rem 0rem;
114
- $shadow-size-float: 0rem 0.125rem 0.5rem;
115
- $shadow-size-overlay: 0rem 0.5rem 1.5rem;
116
- $status-color-info: var(--status-color-info, #0265DC);
117
- $status-color-danger: var(--status-color-danger, #e13212);
118
- $status-color-success: var(--status-color-success, #007A4D);
119
- $status-color-warning: var(--status-color-warning, #ffbe00);
120
- $typography-paragraph-size-xsmall: 0.75rem;
121
- $typography-paragraph-size-small: 0.875rem;
122
- $typography-paragraph-size: 1rem;
123
- $typography-paragraph-size-large: 1.25rem;
124
- $typography-paragraph-size-xlarge: 1.5rem;
125
- $typography-paragraph-font-weight: 400;
126
- $typography-paragraph-font-family: var(--typography-paragraph-font-family, 'Nunito Sans', sans-serif);
127
- $typography-heading-size-xsmall: 0.875rem;
128
- $typography-heading-size-small: 1rem;
129
- $typography-heading-size: 1.25rem;
130
- $typography-heading-size-large: 1.5rem;
131
- $typography-heading-size-xlarge: 2rem;
132
- $typography-heading-font-weight: 700;
133
- $typography-heading-font-family: var(--typography-heading-font-family, 'Sofia Pro', SofiaPro, sans-serif);
134
- $typography-label-size-xsmall: 0.625rem;
135
- $typography-label-size-small: 0.75rem;
136
- $typography-label-size: 0.875rem;
137
- $typography-label-size-large: 1rem;
138
- $typography-label-size-xlarge: 1.25rem;
139
- $typography-label-font-weight: 600;
140
- $typography-label-font-family: var(--typography-label-font-family, 'Nunito Sans', sans-serif);
1
+ $status-color-info: var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)));
2
+ $status-color-danger: var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)));
3
+ $status-color-success: var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085)));
4
+ $status-color-warning: var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278)));
5
+ $background-color-default: var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
6
+ $background-color-default-hover: var(--a2-background-color-default-hover, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
7
+ $background-color-default-active: var(--a2-background-color-default-active, light-dark(var(--a2-color-neutral-40, #f1f1f1), var(--a2-color-neutral-700, #404040)));
8
+ $background-color-secondary: 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)));
9
+ $background-color-secondary-hover: 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)));
10
+ $background-color-secondary-active: 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)));
11
+ $background-color-secondary-strong: 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)));
12
+ $background-color-secondary-strong-hover: 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)));
13
+ $background-color-secondary-strong-active: 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)));
14
+ $background-color-transparent-default: var(--a2-background-color-transparent-default, rgba(0, 0, 0, 0));
15
+ $background-color-transparent-default-hover: 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)));
16
+ $background-color-transparent-default-active: 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)));
17
+ $background-color-transparent-primary: var(--a2-background-color-transparent-primary, rgba(0, 0, 0, 0));
18
+ $background-color-transparent-primary-hover: 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)));
19
+ $background-color-transparent-primary-active: 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)));
20
+ $background-color-transparent-danger: var(--a2-background-color-transparent-danger, rgba(0, 0, 0, 0));
21
+ $background-color-transparent-danger-hover: 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)));
22
+ $background-color-transparent-danger-active: 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)));
23
+ $background-color-strong: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
24
+ $background-color-strong-hover: var(--a2-background-color-strong-hover, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040)));
25
+ $background-color-strong-active: var(--a2-background-color-strong-active, light-dark(var(--a2-color-neutral-70, #e8e8e8), var(--a2-color-neutral-600, #545454)));
26
+ $background-color-stronger: var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040)));
27
+ $background-color-stronger-hover: var(--a2-background-color-stronger-hover, light-dark(var(--a2-color-neutral-90, #e5e5e5), var(--a2-color-neutral-600, #545454)));
28
+ $background-color-stronger-active: var(--a2-background-color-stronger-active, light-dark(var(--a2-color-neutral-100, #dfdfdf), var(--a2-color-neutral-500, #707070)));
29
+ $background-color-strongest: var(--a2-background-color-strongest, light-dark(var(--a2-color-neutral-200, #c4c4c4), var(--a2-color-neutral-500, #707070)));
30
+ $background-color-strongest-hover: var(--a2-background-color-strongest-hover, light-dark(var(--a2-color-neutral-300, #a8a8a8), var(--a2-color-neutral-400, #8b8b8b)));
31
+ $background-color-strongest-active: var(--a2-background-color-strongest-active, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-300, #a8a8a8)));
32
+ $background-color-primary: var(--a2-background-color-primary, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
33
+ $background-color-primary-hover: var(--a2-background-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff)));
34
+ $background-color-primary-active: var(--a2-background-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-100, #cce3ff)));
35
+ $background-color-primary-subdued: 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)));
36
+ $background-color-primary-subdued-hover: 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)));
37
+ $background-color-primary-subdued-active: 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)));
38
+ $background-color-primary-faint: var(--a2-background-color-primary-faint, light-dark(var(--a2-color-blue-10, #fafcff), var(--a2-color-blue-950, #000b19)));
39
+ $background-color-primary-faint-hover: var(--a2-background-color-primary-faint-hover, light-dark(var(--a2-color-blue-50, #e6f1ff), var(--a2-color-blue-800, #003472)));
40
+ $background-color-primary-faint-active: var(--a2-background-color-primary-faint-active, light-dark(var(--a2-color-blue-100, #cce3ff), var(--a2-color-blue-700, #1d4ca3)));
41
+ $background-color-success: var(--a2-background-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085))));
42
+ $background-color-success-hover: var(--a2-background-color-success-hover, light-dark(var(--a2-color-green-700, #05613e), var(--a2-color-green-300, #3be3a2)));
43
+ $background-color-success-active: var(--a2-background-color-success-active, light-dark(var(--a2-color-green-800, #04482e), var(--a2-color-green-50, #d3fded)));
44
+ $background-color-success-subdued: 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)));
45
+ $background-color-success-subdued-hover: 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)));
46
+ $background-color-success-subdued-active: 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)));
47
+ $background-color-success-faint: var(--a2-background-color-success-faint, light-dark(var(--a2-color-green-10, #f5fefb), var(--a2-color-green-950, #010f0a)));
48
+ $background-color-success-faint-hover: var(--a2-background-color-success-faint-hover, light-dark(var(--a2-color-green-50, #d3fded), var(--a2-color-green-800, #04482e)));
49
+ $background-color-success-faint-active: var(--a2-background-color-success-faint-active, light-dark(var(--a2-color-green-100, #b8f5dd), var(--a2-color-green-700, #05613e)));
50
+ $background-color-danger: var(--a2-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
51
+ $background-color-danger-hover: var(--a2-background-color-danger-hover, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-300, #ff8670)));
52
+ $background-color-danger-active: var(--a2-background-color-danger-active, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-red-200, #ffac9e)));
53
+ $background-color-danger-subdued: 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)));
54
+ $background-color-danger-subdued-hover: 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)));
55
+ $background-color-danger-subdued-active: 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)));
56
+ $background-color-danger-faint: var(--a2-background-color-danger-faint, light-dark(var(--a2-color-red-10, #fffbfa), var(--a2-color-red-950, #0a0200)));
57
+ $background-color-danger-faint-hover: var(--a2-background-color-danger-faint-hover, light-dark(var(--a2-color-red-50, #ffe9e5), var(--a2-color-red-800, #731100)));
58
+ $background-color-danger-faint-active: var(--a2-background-color-danger-faint-active, light-dark(var(--a2-color-red-100, #ffd4cc), var(--a2-color-red-700, #a31900)));
59
+ $background-color-warning: var(--a2-background-color-warning, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278))));
60
+ $background-color-warning-hover: var(--a2-background-color-warning-hover, light-dark(var(--a2-color-yellow-600, #de9500), var(--a2-color-yellow-100, #fff9e2)));
61
+ $background-color-warning-active: var(--a2-background-color-warning-active, light-dark(var(--a2-color-yellow-600, #de9500), var(--a2-color-yellow-100, #fff9e2)));
62
+ $background-color-warning-subdued: 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)));
63
+ $background-color-warning-subdued-hover: 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)));
64
+ $background-color-warning-subdued-active: 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)));
65
+ $background-color-warning-faint: var(--a2-background-color-warning-faint, light-dark(var(--a2-color-yellow-10, #fffef8), var(--a2-color-yellow-950, #191100)));
66
+ $background-color-warning-faint-hover: var(--a2-background-color-warning-faint-hover, light-dark(var(--a2-color-yellow-50, #fffcf0), var(--a2-color-yellow-800, #704b00)));
67
+ $background-color-warning-faint-active: var(--a2-background-color-warning-faint-active, light-dark(var(--a2-color-yellow-100, #fff9e2), var(--a2-color-yellow-700, #c98600)));
68
+ $background-color-disabled: var(--a2-background-color-disabled, light-dark(var(--a2-color-neutral-600, #545454), var(--a2-color-neutral-500, #707070)));
69
+ $background-color-inverted: var(--a2-background-color-inverted, light-dark(var(--a2-color-neutral-800, #292929), var(--a2-color-neutral-20, #f9f9f9)));
70
+ $background-color-inverted-hover: var(--a2-background-color-inverted-hover, light-dark(var(--a2-color-neutral-800, #292929), var(--a2-color-neutral-20, #f9f9f9)));
71
+ $background-color-inverted-active: var(--a2-background-color-inverted-active, light-dark(var(--a2-color-neutral-800, #292929), var(--a2-color-neutral-20, #f9f9f9)));
72
+ $background-color-inverted-strong: var(--a2-background-color-inverted-strong, light-dark(var(--a2-color-neutral-900, #1a1a1a), var(--a2-color-neutral-0, #ffffff)));
73
+ $background-color-inverted-strong-hover: var(--a2-background-color-inverted-strong-hover, light-dark(var(--a2-color-neutral-900, #1a1a1a), var(--a2-color-neutral-0, #ffffff)));
74
+ $background-color-inverted-strong-active: var(--a2-background-color-inverted-strong-active, light-dark(var(--a2-color-neutral-900, #1a1a1a), var(--a2-color-neutral-0, #ffffff)));
75
+ $border-radius-none: var(--a2-border-radius-none, var(--a2-radius-0, 0rem));
76
+ $border-radius-small: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem));
77
+ $border-radius-medium: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem));
78
+ $border-radius-large: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
79
+ $border-radius-xlarge: var(--a2-border-radius-xlarge, var(--a2-radius-8, 1.5rem));
80
+ $border-radius-circular: var(--a2-border-radius-circular, 100%);
81
+ $border-width-none: var(--a2-border-width-none, var(--a2-size-0, 0rem));
82
+ $border-width-default: var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem));
83
+ $border-width-strong: var(--a2-border-width-strong, var(--a2-size-half, 0.125rem));
84
+ $border-color-default: var(--a2-border-color-default, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-600, #545454)));
85
+ $border-color-subdued: var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040)));
86
+ $border-color-strong: var(--a2-border-color-strong, light-dark(var(--a2-color-neutral-700, #404040), var(--a2-color-neutral-80, #e6e6e6)));
87
+ $border-color-primary: var(--a2-border-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-200, #9ecaff)));
88
+ $border-color-success: var(--a2-border-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-200, #70ebbc)));
89
+ $border-color-warning: var(--a2-border-color-warning, light-dark(var(--a2-color-yellow-700, #c98600), var(--a2-color-yellow-200, #fff0b1)));
90
+ $border-color-danger: var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e)));
91
+ $chart-monochrome-01-fill-color: var(--a2-chart-monochrome-01-fill-color, light-dark(#3892f3, #8AC3FF));
92
+ $chart-monochrome-01-fill-pattern: var(--a2-chart-monochrome-01-fill-pattern, solid);
93
+ $chart-monochrome-01-stroke-color: var(--a2-chart-monochrome-01-stroke-color, rgba(0, 0, 0, 0));
94
+ $chart-monochrome-01-stroke-style: var(--a2-chart-monochrome-01-stroke-style, solid);
95
+ $chart-monochrome-02-fill-color: var(--a2-chart-monochrome-02-fill-color, light-dark(#08389c, #3476FF));
96
+ $chart-monochrome-02-fill-pattern: var(--a2-chart-monochrome-02-fill-pattern, solid);
97
+ $chart-monochrome-02-stroke-color: var(--a2-chart-monochrome-02-stroke-color, rgba(0, 0, 0, 0));
98
+ $chart-monochrome-02-stroke-style: var(--a2-chart-monochrome-02-stroke-style, solid);
99
+ $chart-monochrome-03-fill-color: var(--a2-chart-monochrome-03-fill-color, light-dark(#f2f9ff, #141414));
100
+ $chart-monochrome-03-fill-pattern: var(--a2-chart-monochrome-03-fill-pattern, striped);
101
+ $chart-monochrome-03-stroke-color: var(--a2-chart-monochrome-03-stroke-color, light-dark(#3892f3, #8AC3FF));
102
+ $chart-monochrome-03-stroke-style: var(--a2-chart-monochrome-03-stroke-style, solid);
103
+ $chart-monochrome-04-fill-color: var(--a2-chart-monochrome-04-fill-color, #f2f9ff);
104
+ $chart-monochrome-04-fill-pattern: var(--a2-chart-monochrome-04-fill-pattern, solid);
105
+ $chart-monochrome-04-stroke-color: var(--a2-chart-monochrome-04-stroke-color, light-dark(#3892f3, #8AC3FF));
106
+ $chart-monochrome-04-stroke-style: var(--a2-chart-monochrome-04-stroke-style, solid);
107
+ $chart-categorical-10-fill-color: var(--a2-chart-categorical-10-fill-color, light-dark(#d57a5c, #D99078));
108
+ $chart-categorical-10-fill-pattern: var(--a2-chart-categorical-10-fill-pattern, solid);
109
+ $chart-categorical-10-stroke-color: var(--a2-chart-categorical-10-stroke-color, rgba(0, 0, 0, 0));
110
+ $chart-categorical-10-stroke-style: var(--a2-chart-categorical-10-stroke-style, solid);
111
+ $chart-categorical-01-fill-color: var(--a2-chart-categorical-01-fill-color, #3892f3);
112
+ $chart-categorical-01-fill-pattern: var(--a2-chart-categorical-01-fill-pattern, solid);
113
+ $chart-categorical-01-stroke-color: var(--a2-chart-categorical-01-stroke-color, rgba(0, 0, 0, 0));
114
+ $chart-categorical-01-stroke-style: var(--a2-chart-categorical-01-stroke-style, solid);
115
+ $chart-categorical-02-fill-color: var(--a2-chart-categorical-02-fill-color, light-dark(#08389c, #3476FF));
116
+ $chart-categorical-02-fill-pattern: var(--a2-chart-categorical-02-fill-pattern, solid);
117
+ $chart-categorical-02-stroke-color: var(--a2-chart-categorical-02-stroke-color, rgba(0, 0, 0, 0));
118
+ $chart-categorical-02-stroke-style: var(--a2-chart-categorical-02-stroke-style, solid);
119
+ $chart-categorical-03-fill-color: var(--a2-chart-categorical-03-fill-color, light-dark(#0fa2b8, #C6F6FF));
120
+ $chart-categorical-03-fill-pattern: var(--a2-chart-categorical-03-fill-pattern, solid);
121
+ $chart-categorical-03-stroke-color: var(--a2-chart-categorical-03-stroke-color, rgba(0, 0, 0, 0));
122
+ $chart-categorical-03-stroke-style: var(--a2-chart-categorical-03-stroke-style, solid);
123
+ $chart-categorical-04-fill-color: var(--a2-chart-categorical-04-fill-color, light-dark(#907af5, #C6B8F4));
124
+ $chart-categorical-04-fill-pattern: var(--a2-chart-categorical-04-fill-pattern, solid);
125
+ $chart-categorical-04-stroke-color: var(--a2-chart-categorical-04-stroke-color, rgba(0, 0, 0, 0));
126
+ $chart-categorical-04-stroke-style: var(--a2-chart-categorical-04-stroke-style, solid);
127
+ $chart-categorical-05-fill-color: var(--a2-chart-categorical-05-fill-color, light-dark(#de52ce, #D949A9));
128
+ $chart-categorical-05-fill-pattern: var(--a2-chart-categorical-05-fill-pattern, solid);
129
+ $chart-categorical-05-stroke-color: var(--a2-chart-categorical-05-stroke-color, rgba(0, 0, 0, 0));
130
+ $chart-categorical-05-stroke-style: var(--a2-chart-categorical-05-stroke-style, solid);
131
+ $chart-categorical-06-fill-color: var(--a2-chart-categorical-06-fill-color, light-dark(#c2185b, #ED1369));
132
+ $chart-categorical-06-fill-pattern: var(--a2-chart-categorical-06-fill-pattern, solid);
133
+ $chart-categorical-06-stroke-color: var(--a2-chart-categorical-06-stroke-color, rgba(0, 0, 0, 0));
134
+ $chart-categorical-06-stroke-style: var(--a2-chart-categorical-06-stroke-style, solid);
135
+ $chart-categorical-07-fill-color: var(--a2-chart-categorical-07-fill-color, light-dark(#759e15, #8CC30B));
136
+ $chart-categorical-07-fill-pattern: var(--a2-chart-categorical-07-fill-pattern, solid);
137
+ $chart-categorical-07-stroke-color: var(--a2-chart-categorical-07-stroke-color, rgba(0, 0, 0, 0));
138
+ $chart-categorical-07-stroke-style: var(--a2-chart-categorical-07-stroke-style, solid);
139
+ $chart-categorical-08-fill-color: var(--a2-chart-categorical-08-fill-color, light-dark(#ac6400, #B36800));
140
+ $chart-categorical-08-fill-pattern: var(--a2-chart-categorical-08-fill-pattern, solid);
141
+ $chart-categorical-08-stroke-color: var(--a2-chart-categorical-08-stroke-color, rgba(0, 0, 0, 0));
142
+ $chart-categorical-08-stroke-style: var(--a2-chart-categorical-08-stroke-style, solid);
143
+ $chart-categorical-09-fill-color: var(--a2-chart-categorical-09-fill-color, light-dark(#eb7200, #FFA037));
144
+ $chart-categorical-09-fill-pattern: var(--a2-chart-categorical-09-fill-pattern, solid);
145
+ $chart-categorical-09-stroke-color: var(--a2-chart-categorical-09-stroke-color, rgba(0, 0, 0, 0));
146
+ $chart-categorical-09-stroke-style: var(--a2-chart-categorical-09-stroke-style, solid);
147
+ $chart-status-success-fill-color: var(--a2-chart-status-success-fill-color, light-dark(#007a4d, #49CC93));
148
+ $chart-status-success-fill-pattern: var(--a2-chart-status-success-fill-pattern, solid);
149
+ $chart-status-success-stroke-color: var(--a2-chart-status-success-stroke-color, rgba(0, 0, 0, 0));
150
+ $chart-status-success-stroke-style: var(--a2-chart-status-success-stroke-style, solid);
151
+ $chart-status-warning-fill-color: var(--a2-chart-status-warning-fill-color, light-dark(#ffbe00, #ffe278));
152
+ $chart-status-warning-fill-pattern: var(--a2-chart-status-warning-fill-pattern, solid);
153
+ $chart-status-warning-stroke-color: var(--a2-chart-status-warning-stroke-color, rgba(0, 0, 0, 0));
154
+ $chart-status-warning-stroke-style: var(--a2-chart-status-warning-stroke-style, solid);
155
+ $chart-status-danger-fill-color: var(--a2-chart-status-danger-fill-color, light-dark(#e13212, #ff745f));
156
+ $chart-status-danger-fill-pattern: var(--a2-chart-status-danger-fill-pattern, solid);
157
+ $chart-status-danger-stroke-color: var(--a2-chart-status-danger-stroke-color, rgba(0, 0, 0, 0));
158
+ $chart-status-danger-stroke-style: var(--a2-chart-status-danger-stroke-style, solid);
159
+ $chart-status-neutral-fill-color: var(--a2-chart-status-neutral-fill-color, light-dark(#ffffff, #141414));
160
+ $chart-status-neutral-stroke-color: var(--a2-chart-status-neutral-stroke-color, light-dark(#8c9ca5, #B4C1C8));
161
+ $chart-status-neutral-stroke-style: var(--a2-chart-status-neutral-stroke-style, solid);
162
+ $focus-ring-color-default: var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
163
+ $focus-ring-color-danger: var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
164
+ $focus-ring-width: var(--a2-focus-ring-width, var(--a2-size-1, 0.25rem));
165
+ $focus-ring-style: var(--a2-focus-ring-style, solid);
166
+ $foreground-color-default: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
167
+ $foreground-color-default-hover: var(--a2-foreground-color-default-hover, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
168
+ $foreground-color-default-active: var(--a2-foreground-color-default-active, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
169
+ $foreground-color-subdued: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
170
+ $foreground-color-subdued-hover: var(--a2-foreground-color-subdued-hover, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
171
+ $foreground-color-subdued-active: var(--a2-foreground-color-subdued-active, light-dark(var(--a2-color-neutral-600, #545454), var(--a2-color-neutral-100, #dfdfdf)));
172
+ $foreground-color-primary: var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)));
173
+ $foreground-color-primary-hover: var(--a2-foreground-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff)));
174
+ $foreground-color-primary-active: var(--a2-foreground-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-200, #9ecaff)));
175
+ $foreground-color-danger: var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)));
176
+ $foreground-color-danger-hover: var(--a2-foreground-color-danger-hover, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-300, #ff8670)));
177
+ $foreground-color-danger-active: var(--a2-foreground-color-danger-active, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-red-200, #ffac9e)));
178
+ $foreground-color-inverted: var(--a2-foreground-color-inverted, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
179
+ $foreground-color-on-primary: var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
180
+ $foreground-color-on-primary-hover: var(--a2-foreground-color-on-primary-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
181
+ $foreground-color-on-primary-active: var(--a2-foreground-color-on-primary-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
182
+ $foreground-color-on-success: var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
183
+ $foreground-color-on-danger: var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
184
+ $foreground-color-on-danger-subdued: var(--a2-foreground-color-on-danger-subdued, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-neutral-0, #ffffff)));
185
+ $foreground-color-on-danger-subdued-hover: var(--a2-foreground-color-on-danger-subdued-hover, light-dark(var(--a2-color-red-800, #731100), var(--a2-color-neutral-0, #ffffff)));
186
+ $foreground-color-on-danger-subdued-active: var(--a2-foreground-color-on-danger-subdued-active, light-dark(var(--a2-color-red-900, #470b00), var(--a2-color-neutral-0, #ffffff)));
187
+ $foreground-color-on-danger-hover: var(--a2-foreground-color-on-danger-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
188
+ $foreground-color-on-danger-active: var(--a2-foreground-color-on-danger-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
189
+ $foreground-color-on-warning: var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a));
190
+ $gradient-primary: var(--a2-gradient-primary, light-dark(linear-gradient(90deg, var(--a2-color-blue-600, #0265dc) 0%, var(--a2-color-cyan-300, #45d8f2) 100%), linear-gradient(90deg, var(--a2-color-cyan-300, #45d8f2) 0%, var(--a2-color-cyan-50, #daf7fc) 100%)));
191
+ $opacity-disabled: var(--a2-opacity-disabled, 0.6);
192
+ $opacity-disabled-strong: var(--a2-opacity-disabled-strong, 0.4);
193
+ $opacity-disabled-stronger: var(--a2-opacity-disabled-stronger, 0.2);
194
+ $shadow-color-default: var(--a2-shadow-color-default, light-dark(color-mix(in srgb, var(--a2-color-neutral-900, #1a1a1a) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
195
+ $shadow-color-strong: var(--a2-shadow-color-strong, light-dark(color-mix(in srgb, var(--a2-color-neutral-950, #040404) 24%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 24%, transparent)));
196
+ $shadow-size-flat: var(--a2-shadow-size-flat, var(--a2-size-0, 0rem) var(--a2-size-0, 0rem) var(--a2-size-0, 0rem));
197
+ $shadow-size-float: var(--a2-shadow-size-float, var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem));
198
+ $shadow-size-overlay: var(--a2-shadow-size-overlay, var(--a2-size-0, 0rem) var(--a2-size-2, 0.5rem) var(--a2-size-6, 1.5rem));
199
+ $typography-paragraph-size-xsmall: var(--a2-typography-paragraph-size-xsmall, var(--a2-font-size-200, 0.75rem));
200
+ $typography-paragraph-size-small: var(--a2-typography-paragraph-size-small, var(--a2-font-size-300, 0.875rem));
201
+ $typography-paragraph-size-default: var(--a2-typography-paragraph-size-default, var(--a2-font-size-400, 1rem));
202
+ $typography-paragraph-size-large: var(--a2-typography-paragraph-size-large, var(--a2-font-size-500, 1.25rem));
203
+ $typography-paragraph-size-xlarge: var(--a2-typography-paragraph-size-xlarge, var(--a2-font-size-600, 1.5rem));
204
+ $typography-paragraph-font-weight: var(--a2-typography-paragraph-font-weight, var(--a2-font-weight-normal, 400));
205
+ $typography-paragraph-font-family: var(--a2-typography-paragraph-font-family, var(--a2-font-family-base, 'Nunito Sans', sans-serif));
206
+ $typography-heading-size-xsmall: var(--a2-typography-heading-size-xsmall, var(--a2-font-size-300, 0.875rem));
207
+ $typography-heading-size-small: var(--a2-typography-heading-size-small, var(--a2-font-size-400, 1rem));
208
+ $typography-heading-size-default: var(--a2-typography-heading-size-default, var(--a2-font-size-500, 1.25rem));
209
+ $typography-heading-size-large: var(--a2-typography-heading-size-large, var(--a2-font-size-600, 1.5rem));
210
+ $typography-heading-size-xlarge: var(--a2-typography-heading-size-xlarge, var(--a2-font-size-800, 2rem));
211
+ $typography-heading-font-weight: var(--a2-typography-heading-font-weight, var(--a2-font-weight-bold, 700));
212
+ $typography-heading-font-family: var(--a2-typography-heading-font-family, var(--a2-font-family-display, 'Sofia Pro', SofiaPro, sans-serif));
213
+ $typography-label-size-xsmall: var(--a2-typography-label-size-xsmall, var(--a2-font-size-100, 0.625rem));
214
+ $typography-label-size-small: var(--a2-typography-label-size-small, var(--a2-font-size-200, 0.75rem));
215
+ $typography-label-size-default: var(--a2-typography-label-size-default, var(--a2-font-size-300, 0.875rem));
216
+ $typography-label-size-large: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
217
+ $typography-label-size-xlarge: var(--a2-typography-label-size-xlarge, var(--a2-font-size-500, 1.25rem));
218
+ $typography-label-font-weight: var(--a2-typography-label-font-weight, var(--a2-font-weight-semibold, 600));
219
+ $typography-label-font-family: var(--a2-typography-label-font-family, var(--a2-font-family-base, 'Nunito Sans', sans-serif));
package/build/web/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import Token from '../../type/types';
2
- declare const core: Token;
3
- export { Token }
4
- export { core }
1
+ export * from './types';
2
+ import * as core from './core';
3
+ export { core };
package/build/web/index.js CHANGED
@@ -1,3 +1,2 @@
1
1
  import * as core from './core';
2
- export * as Token from '../../type/types';
3
2
  export { core };
package/build/web/types.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ export type TokenObj = {
2
+ value: string;
3
+ extensions?: {
4
+ appearance?: {
5
+ dark: {
6
+ value: string;
7
+ };
8
+ };
9
+ };
10
+ };
11
+
12
+ export type Token = {
13
+ primitive: any;
14
+ semantic: any;
15
+ component: any;
16
+ name: string;
17
+ };