@servicetitan/hammer-token 0.0.0-rc-1.48.0-20251104214834 → 0.0.0-rc-3.0.0-20260127161418

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 (80) hide show
  1. package/CHANGELOG.md +37 -1
  2. package/README.md +222 -0
  3. package/build/web/core/component-variables.scss +176 -130
  4. package/build/web/core/component.d.ts +96 -0
  5. package/build/web/core/component.js +574 -252
  6. package/build/web/core/component.scss +94 -69
  7. package/build/web/core/css-utils/a2-border.css +39 -41
  8. package/build/web/core/css-utils/a2-color.css +367 -227
  9. package/build/web/core/css-utils/a2-font.css +0 -2
  10. package/build/web/core/css-utils/a2-spacing.css +0 -2
  11. package/build/web/core/css-utils/a2-utils.css +434 -292
  12. package/build/web/core/css-utils/border.css +39 -41
  13. package/build/web/core/css-utils/color.css +367 -227
  14. package/build/web/core/css-utils/font.css +0 -2
  15. package/build/web/core/css-utils/spacing.css +0 -2
  16. package/build/web/core/css-utils/utils.css +434 -292
  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 +130 -71
  20. package/build/web/core/primitive.d.ts +185 -0
  21. package/build/web/core/primitive.js +328 -72
  22. package/build/web/core/primitive.scss +183 -124
  23. package/build/web/core/semantic-variables.scss +295 -220
  24. package/build/web/core/semantic.d.ts +198 -0
  25. package/build/web/core/semantic.js +913 -341
  26. package/build/web/core/semantic.scss +196 -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 -496
  31. package/package.json +5 -4
  32. package/src/global/primitive/breakpoint.tokens.json +39 -0
  33. package/src/global/primitive/color.tokens.json +536 -0
  34. package/src/global/primitive/duration.tokens.json +32 -0
  35. package/src/global/primitive/font.tokens.json +103 -0
  36. package/src/global/primitive/radius.tokens.json +67 -0
  37. package/src/global/primitive/size.tokens.json +123 -0
  38. package/src/global/primitive/transition.tokens.json +20 -0
  39. package/src/theme/core/background.tokens.json +1058 -0
  40. package/src/theme/core/border.tokens.json +148 -0
  41. package/src/theme/core/charts.tokens.json +802 -0
  42. package/src/theme/core/component/alert.tokens.json +180 -0
  43. package/src/theme/core/component/announcement.tokens.json +186 -0
  44. package/src/theme/core/component/avatar.tokens.json +132 -0
  45. package/src/theme/core/component/badge.tokens.json +40 -0
  46. package/src/theme/core/component/button.tokens.json +752 -0
  47. package/src/theme/core/component/checkbox.tokens.json +292 -0
  48. package/src/theme/core/focus.tokens.json +48 -0
  49. package/src/theme/core/foreground.tokens.json +306 -0
  50. package/src/theme/core/shadow.tokens.json +43 -0
  51. package/src/theme/core/status.tokens.json +70 -0
  52. package/src/theme/core/typography.tokens.json +100 -0
  53. package/src/utils/copy-css-utils-cli.js +13 -0
  54. package/src/utils/css-utils-format-utils.js +98 -1
  55. package/src/utils/sd-build-configs.js +372 -0
  56. package/src/utils/sd-formats.js +752 -0
  57. package/src/utils/sd-transforms.js +126 -0
  58. package/src/utils/token-helpers.js +555 -0
  59. package/tsconfig.json +18 -0
  60. package/.turbo/turbo-build.log +0 -37
  61. package/build/web/core/raw.js +0 -234
  62. package/src/global/primitive/breakpoint.js +0 -19
  63. package/src/global/primitive/color.js +0 -231
  64. package/src/global/primitive/duration.js +0 -16
  65. package/src/global/primitive/font.js +0 -60
  66. package/src/global/primitive/radius.js +0 -31
  67. package/src/global/primitive/size.js +0 -55
  68. package/src/global/primitive/transition.js +0 -16
  69. package/src/theme/core/background.js +0 -170
  70. package/src/theme/core/border.js +0 -103
  71. package/src/theme/core/charts.js +0 -464
  72. package/src/theme/core/component/button.js +0 -708
  73. package/src/theme/core/component/checkbox.js +0 -405
  74. package/src/theme/core/focus.js +0 -35
  75. package/src/theme/core/foreground.js +0 -148
  76. package/src/theme/core/overlay.js +0 -137
  77. package/src/theme/core/shadow.js +0 -29
  78. package/src/theme/core/status.js +0 -49
  79. package/src/theme/core/typography.js +0 -82
  80. package/type/types.ts +0 -344
package/build/web/core/semantic-variables.scss CHANGED
@@ -1,252 +1,327 @@
1
1
  $light: (
2
- background-color: #ffffff,
3
- background-color-strong: #f7f7f7,
4
- background-color-stronger: #eeeeee,
5
- background-color-strongest: #bcbcbd,
6
- background-color-primary: #0265DC,
7
- background-color-primary-subdued: #E0F2FF,
8
- background-color-success: #007A4D,
9
- background-color-success-subdued: #CEF8E0,
10
- background-color-danger: #e13212,
11
- background-color-danger-subdued: #ffece9,
12
- background-color-warning: #ffbe00,
13
- background-color-disabled: #606162,
14
- background-color-inverted: #2d2e31,
15
- background-color-inverted-strong: #141414,
16
- border-color: #949596,
17
- border-color-subdued: #dfe0e1,
18
- border-color-strong: #444445,
19
- border-color-primary: #0265DC,
20
- border-color-success: #007A4D,
21
- border-color-danger: #e13212,
22
- charts-monochrome-01-color: #3892F3,
23
- charts-monochrome-01-stroke: transparent,
24
- charts-monochrome-01-pattern: solid,
2
+ status-color-info: var(--a2-color-blue-500, #1a82ff),
3
+ status-color-danger: var(--a2-color-red-500, #ff3914),
4
+ status-color-success: var(--a2-color-green-500, #09a569),
5
+ status-color-warning: var(--a2-color-yellow-500, #d6a000),
6
+ background-color-default: var(--a2-color-neutral-0, #ffffff),
7
+ background-color-default-hover: var(--a2-color-neutral-10, #fcfcfc),
8
+ background-color-default-active: var(--a2-color-neutral-30, #f6f6f6),
9
+ background-color-secondary: #0404040F,
10
+ background-color-secondary-hover: #04040414,
11
+ background-color-secondary-active: #04040429,
12
+ background-color-secondary-strong: #1a1a1a0F,
13
+ background-color-secondary-strong-hover: #1a1a1a14,
14
+ background-color-secondary-strong-active: #1a1a1a29,
15
+ background-color-transparent-default: "rgba(0, 0, 0, 0)",
16
+ background-color-transparent-default-hover: #8b8b8b14,
17
+ background-color-transparent-default-active: #8b8b8b29,
18
+ background-color-transparent-primary: "rgba(0, 0, 0, 0)",
19
+ background-color-transparent-primary-hover: #1a82ff1A,
20
+ background-color-transparent-primary-active: #1a82ff4D,
21
+ background-color-transparent-danger: "rgba(0, 0, 0, 0)",
22
+ background-color-transparent-danger-hover: #ff39141A,
23
+ background-color-transparent-danger-active: #ff39144D,
24
+ background-color-strong: var(--a2-color-neutral-30, #f6f6f6),
25
+ background-color-strong-hover: var(--a2-color-neutral-50, #eeeeee),
26
+ background-color-strong-active: var(--a2-color-neutral-60, #ebebeb),
27
+ background-color-stronger: var(--a2-color-neutral-70, #e8e8e8),
28
+ background-color-stronger-hover: var(--a2-color-neutral-90, #e2e2e2),
29
+ background-color-stronger-active: var(--a2-color-neutral-100, #dfdfdf),
30
+ background-color-strongest: var(--a2-color-neutral-70, #e8e8e8),
31
+ background-color-strongest-hover: var(--a2-color-neutral-90, #e2e2e2),
32
+ background-color-strongest-active: var(--a2-color-neutral-100, #dfdfdf),
33
+ background-color-primary: var(--a2-color-blue-500, #1a82ff),
34
+ background-color-primary-hover: var(--a2-color-blue-600, #0065de),
35
+ background-color-primary-active: var(--a2-color-blue-700, #004da9),
36
+ background-color-primary-subdued: var(--a2-color-blue-100, #cce3ff),
37
+ background-color-primary-subdued-hover: var(--a2-color-blue-200, #9ecaff),
38
+ background-color-primary-subdued-active: var(--a2-color-blue-300, #70b1ff),
39
+ background-color-success: var(--a2-status-color-success, var(--a2-color-green-500, #09a569)),
40
+ background-color-success-hover: var(--a2-color-green-700, #05613e),
41
+ background-color-success-active: var(--a2-color-green-700, #05613e),
42
+ background-color-success-subdued: var(--a2-color-green-100, #b8f5dd),
43
+ background-color-success-subdued-hover: var(--a2-color-green-700, #05613e),
44
+ background-color-success-subdued-active: var(--a2-color-green-700, #05613e),
45
+ background-color-danger: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
46
+ background-color-danger-hover: var(--a2-color-red-600, #d62100),
47
+ background-color-danger-active: var(--a2-color-red-700, #a31900),
48
+ background-color-danger-subdued: var(--a2-color-red-100, #ffd4cc),
49
+ background-color-danger-subdued-hover: var(--a2-color-red-200, #ffac9e),
50
+ background-color-danger-subdued-active: var(--a2-color-red-300, #ff8974),
51
+ background-color-warning: var(--a2-status-color-warning, var(--a2-color-yellow-500, #d6a000)),
52
+ background-color-warning-hover: var(--a2-color-yellow-600, #a87d00),
53
+ background-color-warning-active: var(--a2-color-yellow-600, #a87d00),
54
+ background-color-warning-subdued: var(--a2-color-yellow-100, #fff0c2),
55
+ background-color-warning-subdued-hover: var(--a2-color-yellow-600, #a87d00),
56
+ background-color-warning-subdued-active: var(--a2-color-yellow-600, #a87d00),
57
+ background-color-disabled: var(--a2-color-neutral-100, #dfdfdf),
58
+ background-color-inverted: var(--a2-color-neutral-300, #a8a8a8),
59
+ background-color-inverted-hover: var(--a2-color-neutral-300, #a8a8a8),
60
+ background-color-inverted-active: var(--a2-color-neutral-300, #a8a8a8),
61
+ background-color-inverted-strong: var(--a2-color-neutral-400, #8b8b8b),
62
+ background-color-inverted-strong-hover: var(--a2-color-neutral-300, #a8a8a8),
63
+ background-color-inverted-strong-active: var(--a2-color-neutral-300, #a8a8a8),
64
+ border-color-default: var(--a2-color-neutral-80, #e5e5e5),
65
+ border-color-subdued: var(--a2-color-neutral-60, #ebebeb),
66
+ border-color-strong: var(--a2-color-neutral-200, #c4c4c4),
67
+ border-color-primary: var(--a2-status-color-info, var(--a2-color-blue-500, #1a82ff)),
68
+ border-color-success: var(--a2-status-color-success, var(--a2-color-green-500, #09a569)),
69
+ border-color-danger: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
70
+ charts-monochrome-01-color: #3892f3,
71
+ charts-monochrome-01-stroke-color: "rgba(0, 0, 0, 0)",
25
72
  charts-monochrome-02-color: #08389c,
26
- charts-monochrome-02-stroke: transparent,
27
- charts-monochrome-02-pattern: solid,
28
- charts-monochrome-03-color: #F2F9FF,
29
- charts-monochrome-03-stroke: #3892F3,
30
- charts-monochrome-03-pattern: striped,
31
- charts-monochrome-04-color: #F2F9FF,
32
- charts-monochrome-04-stroke: #3892F3,
33
- charts-monochrome-04-pattern: solid,
34
- charts-categorical-10-color: #D57A5C,
35
- charts-categorical-10-stroke: transparent,
36
- charts-categorical-10-pattern: solid,
37
- charts-categorical-01-color: #3892F3,
38
- charts-categorical-01-stroke: transparent,
39
- charts-categorical-01-pattern: solid,
73
+ charts-monochrome-02-stroke-color: "rgba(0, 0, 0, 0)",
74
+ charts-monochrome-03-color: #f2f9ff,
75
+ charts-monochrome-03-stroke-color: #3892f3,
76
+ charts-monochrome-04-color: #f2f9ff,
77
+ charts-monochrome-04-stroke-color: #3892f3,
78
+ charts-categorical-10-color: #d57a5c,
79
+ charts-categorical-10-stroke-color: "rgba(0, 0, 0, 0)",
80
+ charts-categorical-01-color: #3892f3,
81
+ charts-categorical-01-stroke-color: "rgba(0, 0, 0, 0)",
40
82
  charts-categorical-02-color: #08389c,
41
- charts-categorical-02-stroke: transparent,
42
- charts-categorical-02-pattern: solid,
43
- charts-categorical-03-color: #0FA2B8,
44
- charts-categorical-03-stroke: transparent,
45
- charts-categorical-03-pattern: solid,
46
- charts-categorical-04-color: #907AF5,
47
- charts-categorical-04-stroke: transparent,
48
- charts-categorical-04-pattern: solid,
49
- charts-categorical-05-color: #DE52CE,
50
- charts-categorical-05-stroke: transparent,
51
- charts-categorical-05-pattern: solid,
52
- charts-categorical-06-color: #C2185B,
53
- charts-categorical-06-stroke: transparent,
54
- charts-categorical-06-pattern: solid,
55
- charts-categorical-07-color: #759E15,
56
- charts-categorical-07-stroke: transparent,
57
- charts-categorical-07-pattern: solid,
58
- charts-categorical-08-color: #AC6400,
59
- charts-categorical-08-stroke: transparent,
60
- charts-categorical-08-pattern: solid,
61
- charts-categorical-09-color: #EB7200,
62
- charts-categorical-09-stroke: transparent,
63
- charts-categorical-09-pattern: solid,
64
- charts-status-success-color: #007A4D,
65
- charts-status-success-stroke: transparent,
66
- charts-status-success-pattern: solid,
83
+ charts-categorical-02-stroke-color: "rgba(0, 0, 0, 0)",
84
+ charts-categorical-03-color: #0fa2b8,
85
+ charts-categorical-03-stroke-color: "rgba(0, 0, 0, 0)",
86
+ charts-categorical-04-color: #907af5,
87
+ charts-categorical-04-stroke-color: "rgba(0, 0, 0, 0)",
88
+ charts-categorical-05-color: #de52ce,
89
+ charts-categorical-05-stroke-color: "rgba(0, 0, 0, 0)",
90
+ charts-categorical-06-color: #c2185b,
91
+ charts-categorical-06-stroke-color: "rgba(0, 0, 0, 0)",
92
+ charts-categorical-07-color: #759e15,
93
+ charts-categorical-07-stroke-color: "rgba(0, 0, 0, 0)",
94
+ charts-categorical-08-color: #ac6400,
95
+ charts-categorical-08-stroke-color: "rgba(0, 0, 0, 0)",
96
+ charts-categorical-09-color: #eb7200,
97
+ charts-categorical-09-stroke-color: "rgba(0, 0, 0, 0)",
98
+ charts-status-success-color: #007a4d,
99
+ charts-status-success-stroke-color: "rgba(0, 0, 0, 0)",
67
100
  charts-status-warning-color: #ffbe00,
68
- charts-status-warning-stroke: transparent,
69
- charts-status-warning-pattern: solid,
101
+ charts-status-warning-stroke-color: "rgba(0, 0, 0, 0)",
70
102
  charts-status-danger-color: #e13212,
71
- charts-status-danger-stroke: transparent,
72
- charts-status-danger-pattern: solid,
103
+ charts-status-danger-stroke-color: "rgba(0, 0, 0, 0)",
73
104
  charts-status-neutral-color: #ffffff,
74
- charts-status-neutral-stroke: #8C9CA5,
75
- charts-status-neutral-pattern: striped,
76
- focus-ring-color: #0265DC,
77
- focus-ring-color-danger: #e13212,
78
- foreground-color: #141414,
79
- foreground-color-subdued: #737475,
80
- foreground-color-primary: #0265DC,
81
- foreground-color-danger: #e13212,
82
- foreground-color-inverted: #ffffff,
83
- foreground-color-on-primary: #ffffff,
84
- foreground-color-on-danger: #ffffff,
85
- foreground-color-on-danger-subdued: #bf2a00,
86
- foreground-color-on-warning: #141414,
87
- foreground-color-active-primary: #004491,
88
- foreground-color-active-danger: #bf2a00,
89
- foreground-color-hover-primary: #004491,
90
- foreground-color-hover-danger: #bf2a00,
91
- overlay-color-active: #14141429,
92
- overlay-color-active-primary: #0265DC4D,
93
- overlay-color-active-danger: #e132124D,
94
- overlay-color-active-on: #14141429,
95
- overlay-color-active-on-primary: #14141466,
96
- overlay-color-active-on-danger: #14141466,
97
- overlay-color-hover: #14141414,
98
- overlay-color-hover-primary: #0265DC1A,
99
- overlay-color-hover-danger: #e132121A,
100
- overlay-color-hover-on: #14141414,
101
- overlay-color-hover-on-primary: #14141433,
102
- overlay-color-hover-on-danger: #14141433,
103
- shadow-color: #14141414,
104
- status-color-info: #0265DC,
105
- status-color-danger: #e13212,
106
- status-color-success: #007A4D,
107
- status-color-warning: #ffbe00,
105
+ charts-status-neutral-stroke-color: #8c9ca5,
106
+ focus-ring-color-default: var(--a2-color-blue-500, #1a82ff),
107
+ focus-ring-color-danger: var(--a2-color-red-500, #ff3914),
108
+ foreground-color-default: var(--a2-color-neutral-950, #040404),
109
+ foreground-color-subdued: var(--a2-color-neutral-90, #e2e2e2),
110
+ foreground-color-primary: var(--a2-color-blue-500, #1a82ff),
111
+ foreground-color-primary-hover: var(--a2-color-blue-600, #0065de),
112
+ foreground-color-primary-active: var(--a2-color-blue-600, #0065de),
113
+ foreground-color-danger: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
114
+ foreground-color-danger-hover: var(--a2-color-red-600, #d62100),
115
+ foreground-color-danger-active: var(--a2-color-red-600, #d62100),
116
+ foreground-color-inverted: var(--a2-color-neutral-0, #ffffff),
117
+ foreground-color-on-primary: var(--a2-color-neutral-0, #ffffff),
118
+ foreground-color-on-primary-hover: var(--a2-color-neutral-0, #ffffff),
119
+ foreground-color-on-primary-active: var(--a2-color-neutral-0, #ffffff),
120
+ foreground-color-on-success: var(--a2-color-neutral-0, #ffffff),
121
+ foreground-color-on-danger: var(--a2-color-neutral-0, #ffffff),
122
+ foreground-color-on-danger-subdued: var(--a2-color-red-600, #d62100),
123
+ foreground-color-on-danger-hover: var(--a2-color-neutral-0, #ffffff),
124
+ foreground-color-on-danger-active: var(--a2-color-neutral-0, #ffffff),
125
+ foreground-color-on-warning: var(--a2-color-neutral-950, #040404),
126
+ shadow-color: #8b8b8b14,
108
127
  );
109
128
  $dark: (
110
- background-color: #141414,
111
- background-color-strong: #2d2e31,
112
- background-color-stronger: #444445,
113
- background-color-strongest: #737475,
114
- background-color-primary: #78BBFA,
115
- background-color-primary-subdued: #78BBFA33,
116
- background-color-success: #49CC93,
117
- background-color-success-subdued: #49CC9333,
118
- background-color-danger: #ff745f,
119
- background-color-danger-subdued: #ff745f33,
120
- background-color-warning: #ffe278,
121
- background-color-disabled: #606162,
122
- background-color-inverted: #fafafa,
123
- background-color-inverted-strong: #ffffff,
124
- border-color: #606162,
125
- border-color-subdued: #444445,
126
- border-color-strong: #dfe0e1,
127
- border-color-primary: #78BBFA,
128
- border-color-success: #49CC93,
129
- border-color-danger: #ff745f,
129
+ status-color-info: var(--a2-color-blue-100, #cce3ff),
130
+ status-color-danger: var(--a2-color-red-100, #ffd4cc),
131
+ status-color-success: var(--a2-color-green-100, #b8f5dd),
132
+ status-color-warning: var(--a2-color-yellow-100, #fff0c2),
133
+ background-color-default: var(--a2-color-neutral-400, #8b8b8b),
134
+ background-color-default-hover: var(--a2-color-neutral-30, #f6f6f6),
135
+ background-color-default-active: var(--a2-color-neutral-10, #fcfcfc),
136
+ background-color-secondary: #ffffff0F,
137
+ background-color-secondary-hover: #ffffff14,
138
+ background-color-secondary-active: #ffffff29,
139
+ background-color-secondary-strong: #ffffff0F,
140
+ background-color-secondary-strong-hover: #ffffff14,
141
+ background-color-secondary-strong-active: #ffffff29,
142
+ background-color-transparent-default: "rgba(0, 0, 0, 0)",
143
+ background-color-transparent-default-hover: #ffffff14,
144
+ background-color-transparent-default-active: #ffffff29,
145
+ background-color-transparent-primary: "rgba(0, 0, 0, 0)",
146
+ background-color-transparent-primary-hover: #70b1ff1A,
147
+ background-color-transparent-primary-active: #70b1ff40,
148
+ background-color-transparent-danger: "rgba(0, 0, 0, 0)",
149
+ background-color-transparent-danger-hover: #ff89741A,
150
+ background-color-transparent-danger-active: #ff897440,
151
+ background-color-strong: var(--a2-color-neutral-300, #a8a8a8),
152
+ background-color-strong-hover: var(--a2-color-neutral-900, #1a1a1a),
153
+ background-color-strong-active: var(--a2-color-neutral-800, #292929),
154
+ background-color-stronger: var(--a2-color-neutral-800, #292929),
155
+ background-color-stronger-hover: var(--a2-color-neutral-700, #404040),
156
+ background-color-stronger-active: var(--a2-color-neutral-600, #545454),
157
+ background-color-strongest: var(--a2-color-neutral-90, #e2e2e2),
158
+ background-color-strongest-hover: var(--a2-color-neutral-10, #fcfcfc),
159
+ background-color-strongest-active: var(--a2-color-neutral-900, #1a1a1a),
160
+ background-color-primary: var(--a2-color-blue-300, #70b1ff),
161
+ background-color-primary-hover: var(--a2-color-blue-200, #9ecaff),
162
+ background-color-primary-active: var(--a2-color-blue-100, #cce3ff),
163
+ background-color-primary-subdued: #70b1ff33,
164
+ background-color-primary-subdued-hover: var(--a2-color-blue-800, #003472),
165
+ background-color-primary-subdued-active: var(--a2-color-blue-700, #004da9),
166
+ background-color-success: var(--a2-status-color-success, var(--a2-color-green-500, #09a569)),
167
+ background-color-success-hover: var(--a2-color-green-100, #b8f5dd),
168
+ background-color-success-active: var(--a2-color-green-100, #b8f5dd),
169
+ background-color-success-subdued: #3be3a233,
170
+ background-color-success-subdued-hover: var(--a2-color-green-100, #b8f5dd),
171
+ background-color-success-subdued-active: var(--a2-color-green-100, #b8f5dd),
172
+ background-color-danger: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
173
+ background-color-danger-hover: var(--a2-color-red-200, #ffac9e),
174
+ background-color-danger-active: var(--a2-color-red-100, #ffd4cc),
175
+ background-color-danger-subdued: #ff897433,
176
+ background-color-danger-subdued-hover: var(--a2-color-red-600, #d62100),
177
+ background-color-danger-subdued-active: var(--a2-color-red-800, #731100),
178
+ background-color-warning: var(--a2-status-color-warning, var(--a2-color-yellow-500, #d6a000)),
179
+ background-color-warning-hover: var(--a2-color-yellow-100, #fff0c2),
180
+ background-color-warning-active: var(--a2-color-yellow-100, #fff0c2),
181
+ background-color-warning-subdued: #ffcf4233,
182
+ background-color-warning-subdued-hover: var(--a2-color-yellow-100, #fff0c2),
183
+ background-color-warning-subdued-active: var(--a2-color-yellow-100, #fff0c2),
184
+ background-color-disabled: var(--a2-color-neutral-100, #dfdfdf),
185
+ background-color-inverted: var(--a2-color-neutral-20, #f9f9f9),
186
+ background-color-inverted-hover: var(--a2-color-neutral-20, #f9f9f9),
187
+ background-color-inverted-active: var(--a2-color-neutral-20, #f9f9f9),
188
+ background-color-inverted-strong: var(--a2-color-neutral-0, #ffffff),
189
+ background-color-inverted-strong-hover: var(--a2-color-neutral-20, #f9f9f9),
190
+ background-color-inverted-strong-active: var(--a2-color-neutral-20, #f9f9f9),
191
+ border-color-default: var(--a2-color-neutral-100, #dfdfdf),
192
+ border-color-subdued: var(--a2-color-neutral-200, #c4c4c4),
193
+ border-color-strong: var(--a2-color-neutral-60, #ebebeb),
194
+ border-color-primary: var(--a2-status-color-info, var(--a2-color-blue-500, #1a82ff)),
195
+ border-color-success: var(--a2-status-color-success, var(--a2-color-green-500, #09a569)),
196
+ border-color-danger: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
130
197
  charts-monochrome-01-color: #8AC3FF,
131
- charts-monochrome-01-stroke: transparent,
132
- charts-monochrome-01-pattern: solid,
198
+ charts-monochrome-01-stroke-color: rgba(0, 0, 0, 0),
133
199
  charts-monochrome-02-color: #3476FF,
134
- charts-monochrome-02-stroke: transparent,
135
- charts-monochrome-02-pattern: solid,
200
+ charts-monochrome-02-stroke-color: rgba(0, 0, 0, 0),
136
201
  charts-monochrome-03-color: #141414,
137
- charts-monochrome-03-stroke: #8AC3FF,
138
- charts-monochrome-03-pattern: striped,
202
+ charts-monochrome-03-stroke-color: #8AC3FF,
139
203
  charts-monochrome-04-color: #F2F9FF,
140
- charts-monochrome-04-stroke: #8AC3FF,
141
- charts-monochrome-04-pattern: solid,
204
+ charts-monochrome-04-stroke-color: #8AC3FF,
142
205
  charts-categorical-10-color: #D99078,
143
- charts-categorical-10-stroke: transparent,
144
- charts-categorical-10-pattern: solid,
206
+ charts-categorical-10-stroke-color: rgba(0, 0, 0, 0),
145
207
  charts-categorical-01-color: #3892F3,
146
- charts-categorical-01-stroke: transparent,
147
- charts-categorical-01-pattern: solid,
208
+ charts-categorical-01-stroke-color: rgba(0, 0, 0, 0),
148
209
  charts-categorical-02-color: #3476FF,
149
- charts-categorical-02-stroke: transparent,
150
- charts-categorical-02-pattern: solid,
210
+ charts-categorical-02-stroke-color: rgba(0, 0, 0, 0),
151
211
  charts-categorical-03-color: #C6F6FF,
152
- charts-categorical-03-stroke: transparent,
153
- charts-categorical-03-pattern: solid,
212
+ charts-categorical-03-stroke-color: rgba(0, 0, 0, 0),
154
213
  charts-categorical-04-color: #C6B8F4,
155
- charts-categorical-04-stroke: transparent,
156
- charts-categorical-04-pattern: solid,
214
+ charts-categorical-04-stroke-color: rgba(0, 0, 0, 0),
157
215
  charts-categorical-05-color: #D949A9,
158
- charts-categorical-05-stroke: transparent,
159
- charts-categorical-05-pattern: solid,
216
+ charts-categorical-05-stroke-color: rgba(0, 0, 0, 0),
160
217
  charts-categorical-06-color: #ED1369,
161
- charts-categorical-06-stroke: transparent,
162
- charts-categorical-06-pattern: solid,
218
+ charts-categorical-06-stroke-color: rgba(0, 0, 0, 0),
163
219
  charts-categorical-07-color: #8CC30B,
164
- charts-categorical-07-stroke: transparent,
165
- charts-categorical-07-pattern: solid,
220
+ charts-categorical-07-stroke-color: rgba(0, 0, 0, 0),
166
221
  charts-categorical-08-color: #B36800,
167
- charts-categorical-08-stroke: transparent,
168
- charts-categorical-08-pattern: solid,
222
+ charts-categorical-08-stroke-color: rgba(0, 0, 0, 0),
169
223
  charts-categorical-09-color: #FFA037,
170
- charts-categorical-09-stroke: transparent,
171
- charts-categorical-09-pattern: solid,
224
+ charts-categorical-09-stroke-color: rgba(0, 0, 0, 0),
172
225
  charts-status-success-color: #49CC93,
173
- charts-status-success-stroke: transparent,
174
- charts-status-success-pattern: solid,
226
+ charts-status-success-stroke-color: rgba(0, 0, 0, 0),
175
227
  charts-status-warning-color: #ffe278,
176
- charts-status-warning-stroke: transparent,
177
- charts-status-warning-pattern: solid,
228
+ charts-status-warning-stroke-color: rgba(0, 0, 0, 0),
178
229
  charts-status-danger-color: #ff745f,
179
- charts-status-danger-stroke: transparent,
180
- charts-status-danger-pattern: solid,
230
+ charts-status-danger-stroke-color: rgba(0, 0, 0, 0),
181
231
  charts-status-neutral-color: #141414,
182
- charts-status-neutral-stroke: #B4C1C8,
183
- charts-status-neutral-pattern: striped,
184
- focus-ring-color: #78BBFA,
185
- focus-ring-color-danger: #ff745f,
186
- foreground-color: #ffffff,
187
- foreground-color-subdued: #bcbcbd,
188
- foreground-color-primary: #78BBFA,
189
- foreground-color-danger: #ff745f,
190
- foreground-color-inverted: #141414,
191
- foreground-color-on-primary: #141414,
192
- foreground-color-on-danger: #141414,
193
- foreground-color-on-danger-subdued: #ffffff,
194
- foreground-color-on-warning: #141414,
195
- foreground-color-active-primary: #B5DEFF,
196
- foreground-color-active-danger: #ff745f,
197
- foreground-color-hover-primary: #B5DEFF,
198
- foreground-color-hover-danger: #ff745f,
199
- overlay-color-active: #ffffff29,
200
- overlay-color-active-primary: #78BBFA40,
201
- overlay-color-active-danger: #f94d3240,
202
- overlay-color-active-on: #14141429,
203
- overlay-color-active-on-primary: #14141429,
204
- overlay-color-active-on-danger: #14141429,
205
- overlay-color-hover: #ffffff14,
206
- overlay-color-hover-primary: #78BBFA1A,
207
- overlay-color-hover-danger: #f94d3226,
208
- overlay-color-hover-on: #ffffff14,
209
- overlay-color-hover-on-primary: #ffffff29,
210
- overlay-color-hover-on-danger: #ffffff29,
232
+ charts-status-neutral-stroke-color: #B4C1C8,
233
+ focus-ring-color-default: var(--a2-color-blue-300, #70b1ff),
234
+ focus-ring-color-danger: var(--a2-color-red-300, #ff8974),
235
+ foreground-color-default: var(--a2-color-neutral-0, #ffffff),
236
+ foreground-color-subdued: var(--a2-color-neutral-70, #e8e8e8),
237
+ foreground-color-primary: var(--a2-color-blue-300, #70b1ff),
238
+ foreground-color-primary-hover: var(--a2-color-blue-200, #9ecaff),
239
+ foreground-color-primary-active: var(--a2-color-blue-200, #9ecaff),
240
+ foreground-color-danger: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
241
+ foreground-color-danger-hover: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
242
+ foreground-color-danger-active: var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)),
243
+ foreground-color-inverted: var(--a2-color-neutral-950, #040404),
244
+ foreground-color-on-primary: var(--a2-color-neutral-950, #040404),
245
+ foreground-color-on-primary-hover: var(--a2-color-neutral-950, #040404),
246
+ foreground-color-on-primary-active: var(--a2-color-neutral-950, #040404),
247
+ foreground-color-on-success: var(--a2-color-neutral-950, #040404),
248
+ foreground-color-on-danger: var(--a2-color-neutral-950, #040404),
249
+ foreground-color-on-danger-subdued: var(--a2-color-neutral-0, #ffffff),
250
+ foreground-color-on-danger-hover: var(--a2-color-neutral-950, #040404),
251
+ foreground-color-on-danger-active: var(--a2-color-neutral-950, #040404),
252
+ foreground-color-on-warning: var(--a2-color-neutral-950, #040404),
211
253
  shadow-color: #ffffff14,
212
- status-color-info: #78BBFA,
213
- status-color-danger: #ff745f,
214
- status-color-success: #49CC93,
215
- status-color-warning: #ffe278,
216
254
  );
217
255
  $nonColor: (
218
- border-radius-none: 0,
219
- border-radius-small: 0.1875rem,
220
- border-radius-medium: 0.375rem,
221
- border-radius-large: 0.75rem,
222
- border-radius-xlarge: 1.5rem,
256
+ border-radius-none: 0rem,
257
+ border-radius-small: var(--a2-radius-1, 0.1875rem),
258
+ border-radius-medium: var(--a2-radius-2, 0.375rem),
259
+ border-radius-large: var(--a2-radius-4, 0.75rem),
260
+ border-radius-xlarge: var(--a2-radius-8, 1.5rem),
223
261
  border-radius-circular: 100%,
224
262
  border-width-none: 0rem,
225
- border-width: 0.0625rem,
226
- border-width-strong: 0.125rem,
227
- focus-ring-width: 0.25rem,
228
- shadow-size-flat: 0rem 0rem 0rem,
229
- shadow-size-float: 0rem 0.125rem 0.5rem,
230
- shadow-size-overlay: 0rem 0.5rem 1.5rem,
231
- typography-paragraph-size-xsmall: 0.75rem,
232
- typography-paragraph-size-small: 0.875rem,
233
- typography-paragraph-size: 1rem,
234
- typography-paragraph-size-large: 1.25rem,
235
- typography-paragraph-size-xlarge: 1.5rem,
236
- typography-paragraph-font-weight: 400,
237
- typography-paragraph-font-family: "'Nunito Sans', sans-serif",
238
- typography-heading-size-xsmall: 0.875rem,
239
- typography-heading-size-small: 1rem,
240
- typography-heading-size: 1.25rem,
241
- typography-heading-size-large: 1.5rem,
242
- typography-heading-size-xlarge: 2rem,
243
- typography-heading-font-weight: 700,
244
- typography-heading-font-family: "'Sofia Pro', SofiaPro, sans-serif",
245
- typography-label-size-xsmall: 0.625rem,
246
- typography-label-size-small: 0.75rem,
247
- typography-label-size: 0.875rem,
248
- typography-label-size-large: 1rem,
249
- typography-label-size-xlarge: 1.25rem,
250
- typography-label-font-weight: 600,
251
- typography-label-font-family: "'Nunito Sans', sans-serif",
263
+ border-width-default: var(--a2-size-quarter, 0.0625rem),
264
+ border-width-strong: var(--a2-size-half, 0.125rem),
265
+ charts-monochrome-01-stroke-style: solid,
266
+ charts-monochrome-01-pattern: solid,
267
+ charts-monochrome-02-stroke-style: solid,
268
+ charts-monochrome-02-pattern: solid,
269
+ charts-monochrome-03-stroke-style: solid,
270
+ charts-monochrome-03-pattern: striped,
271
+ charts-monochrome-04-stroke-style: solid,
272
+ charts-monochrome-04-pattern: solid,
273
+ charts-categorical-10-stroke-style: solid,
274
+ charts-categorical-10-pattern: solid,
275
+ charts-categorical-01-stroke-style: solid,
276
+ charts-categorical-01-pattern: solid,
277
+ charts-categorical-02-stroke-style: solid,
278
+ charts-categorical-02-pattern: solid,
279
+ charts-categorical-03-stroke-style: solid,
280
+ charts-categorical-03-pattern: solid,
281
+ charts-categorical-04-stroke-style: solid,
282
+ charts-categorical-04-pattern: solid,
283
+ charts-categorical-05-stroke-style: solid,
284
+ charts-categorical-05-pattern: solid,
285
+ charts-categorical-06-stroke-style: solid,
286
+ charts-categorical-06-pattern: solid,
287
+ charts-categorical-07-stroke-style: solid,
288
+ charts-categorical-07-pattern: solid,
289
+ charts-categorical-08-stroke-style: solid,
290
+ charts-categorical-08-pattern: solid,
291
+ charts-categorical-09-stroke-style: solid,
292
+ charts-categorical-09-pattern: solid,
293
+ charts-status-success-stroke-style: solid,
294
+ charts-status-success-pattern: solid,
295
+ charts-status-warning-stroke-style: solid,
296
+ charts-status-warning-pattern: solid,
297
+ charts-status-danger-stroke-style: solid,
298
+ charts-status-danger-pattern: solid,
299
+ charts-status-neutral-stroke-style: solid,
300
+ charts-status-neutral-pattern: striped,
301
+ focus-ring-width: var(--a2-size-1, 0.25rem),
302
+ focus-ring-style: solid,
303
+ shadow-size-flat: var(--a2-size-0, 0rem) var(--a2-size-0, 0rem) var(--a2-size-0, 0rem),
304
+ shadow-size-float: var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem),
305
+ shadow-size-overlay: var(--a2-size-0, 0rem) var(--a2-size-2, 0.5rem) var(--a2-size-6, 1.5rem),
306
+ typography-paragraph-size-xsmall: var(--a2-font-size-200, 0.75rem),
307
+ typography-paragraph-size-small: var(--a2-font-size-300, 0.875rem),
308
+ typography-paragraph-size-default: var(--a2-font-size-400, 1rem),
309
+ typography-paragraph-size-large: var(--a2-font-size-500, 1.25rem),
310
+ typography-paragraph-size-xlarge: var(--a2-font-size-600, 1.5rem),
311
+ typography-paragraph-font-weight: var(--a2-font-weight-normal, 400),
312
+ typography-paragraph-font-family: var(--a2-font-family-base, "'Nunito Sans', sans-serif"),
313
+ typography-heading-size-xsmall: var(--a2-font-size-300, 0.875rem),
314
+ typography-heading-size-small: var(--a2-font-size-400, 1rem),
315
+ typography-heading-size-default: var(--a2-font-size-500, 1.25rem),
316
+ typography-heading-size-large: var(--a2-font-size-600, 1.5rem),
317
+ typography-heading-size-xlarge: var(--a2-font-size-800, 2rem),
318
+ typography-heading-font-weight: var(--a2-font-weight-bold, 700),
319
+ typography-heading-font-family: var(--a2-font-family-display, "'Sofia Pro', SofiaPro, sans-serif"),
320
+ typography-label-size-xsmall: var(--a2-font-size-100, 0.625rem),
321
+ typography-label-size-small: var(--a2-font-size-200, 0.75rem),
322
+ typography-label-size-default: var(--a2-font-size-300, 0.875rem),
323
+ typography-label-size-large: var(--a2-font-size-400, 1rem),
324
+ typography-label-size-xlarge: var(--a2-font-size-500, 1.25rem),
325
+ typography-label-font-weight: var(--a2-font-weight-semibold, 600),
326
+ typography-label-font-family: var(--a2-font-family-base, "'Nunito Sans', sans-serif"),
252
327
  );