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

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 (76) hide show
  1. package/CHANGELOG.md +29 -1
  2. package/README.md +222 -0
  3. package/build/web/core/component-variables.scss +114 -130
  4. package/build/web/core/component.d.ts +65 -0
  5. package/build/web/core/component.js +248 -267
  6. package/build/web/core/component.scss +63 -69
  7. package/build/web/core/css-utils/a2-border.css +39 -41
  8. package/build/web/core/css-utils/a2-color.css +351 -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 +418 -292
  12. package/build/web/core/css-utils/border.css +39 -41
  13. package/build/web/core/css-utils/color.css +351 -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 +418 -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 +287 -220
  24. package/build/web/core/semantic.d.ts +194 -0
  25. package/build/web/core/semantic.js +875 -347
  26. package/build/web/core/semantic.scss +192 -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 +981 -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/button.tokens.json +752 -0
  43. package/src/theme/core/component/checkbox.tokens.json +292 -0
  44. package/src/theme/core/focus.tokens.json +48 -0
  45. package/src/theme/core/foreground.tokens.json +288 -0
  46. package/src/theme/core/shadow.tokens.json +43 -0
  47. package/src/theme/core/status.tokens.json +70 -0
  48. package/src/theme/core/typography.tokens.json +100 -0
  49. package/src/utils/copy-css-utils-cli.js +13 -0
  50. package/src/utils/css-utils-format-utils.js +98 -1
  51. package/src/utils/sd-build-configs.js +372 -0
  52. package/src/utils/sd-formats.js +752 -0
  53. package/src/utils/sd-transforms.js +126 -0
  54. package/src/utils/token-helpers.js +555 -0
  55. package/tsconfig.json +18 -0
  56. package/.turbo/turbo-build.log +0 -37
  57. package/build/web/core/raw.js +0 -234
  58. package/src/global/primitive/breakpoint.js +0 -19
  59. package/src/global/primitive/color.js +0 -231
  60. package/src/global/primitive/duration.js +0 -16
  61. package/src/global/primitive/font.js +0 -60
  62. package/src/global/primitive/radius.js +0 -31
  63. package/src/global/primitive/size.js +0 -55
  64. package/src/global/primitive/transition.js +0 -16
  65. package/src/theme/core/background.js +0 -170
  66. package/src/theme/core/border.js +0 -103
  67. package/src/theme/core/charts.js +0 -464
  68. package/src/theme/core/component/button.js +0 -708
  69. package/src/theme/core/component/checkbox.js +0 -405
  70. package/src/theme/core/focus.js +0 -35
  71. package/src/theme/core/foreground.js +0 -148
  72. package/src/theme/core/overlay.js +0 -137
  73. package/src/theme/core/shadow.js +0 -29
  74. package/src/theme/core/status.js +0 -49
  75. package/src/theme/core/typography.js +0 -82
  76. package/type/types.ts +0 -344
package/src/theme/core/component/checkbox.tokens.json ADDED
@@ -0,0 +1,292 @@
1
+ {
2
+ "checkbox": {
3
+ "checked": {
4
+ "foreground": {
5
+ "color": {
6
+ "$root": {
7
+ "$type": "color",
8
+ "$value": "{foreground.color.primary}",
9
+ "$extensions": {
10
+ "appearance": {
11
+ "light": {
12
+ "$type": "color",
13
+ "$value": "{foreground.color.primary}"
14
+ },
15
+ "dark": {
16
+ "$type": "color",
17
+ "$value": "{foreground.color.primary}"
18
+ }
19
+ }
20
+ }
21
+ },
22
+ "hover": {
23
+ "$type": "color",
24
+ "$value": "{foreground.color.primary.hover}",
25
+ "$extensions": {
26
+ "appearance": {
27
+ "light": {
28
+ "$type": "color",
29
+ "$value": "{foreground.color.primary.hover}"
30
+ },
31
+ "dark": {
32
+ "$type": "color",
33
+ "$value": "{foreground.color.primary.hover}"
34
+ }
35
+ }
36
+ }
37
+ },
38
+ "active": {
39
+ "$type": "color",
40
+ "$value": "{foreground.color.primary.active}",
41
+ "$extensions": {
42
+ "appearance": {
43
+ "light": {
44
+ "$type": "color",
45
+ "$value": "{foreground.color.primary.active}"
46
+ },
47
+ "dark": {
48
+ "$type": "color",
49
+ "$value": "{foreground.color.primary.active}"
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
55
+ },
56
+ "background": {
57
+ "color": {
58
+ "hover": {
59
+ "$type": "color",
60
+ "$value": "{background.color.transparent.primary.hover}",
61
+ "$extensions": {
62
+ "appearance": {
63
+ "light": {
64
+ "$type": "color",
65
+ "$value": "{background.color.transparent.primary.hover}"
66
+ },
67
+ "dark": {
68
+ "$type": "color",
69
+ "$value": "{background.color.transparent.primary.hover}"
70
+ }
71
+ }
72
+ }
73
+ }
74
+ }
75
+ },
76
+ "border": {
77
+ "radius": {
78
+ "$type": "dimension",
79
+ "$value": "{border.radius.small}"
80
+ }
81
+ },
82
+ "focus-ring": {
83
+ "color": {
84
+ "$type": "color",
85
+ "$value": "{focus.ring.color.default}",
86
+ "$extensions": {
87
+ "appearance": {
88
+ "light": {
89
+ "$type": "color",
90
+ "$value": "{focus.ring.color.default}"
91
+ },
92
+ "dark": {
93
+ "$type": "color",
94
+ "$value": "{focus.ring.color.default}"
95
+ }
96
+ }
97
+ }
98
+ }
99
+ }
100
+ },
101
+ "unchecked": {
102
+ "background": {
103
+ "color": {
104
+ "hover": {
105
+ "$type": "color",
106
+ "$value": "{background.color.transparent.default.hover}",
107
+ "$extensions": {
108
+ "appearance": {
109
+ "light": {
110
+ "$type": "color",
111
+ "$value": "{background.color.transparent.default.hover}"
112
+ },
113
+ "dark": {
114
+ "$type": "color",
115
+ "$value": "{background.color.transparent.default.hover}"
116
+ }
117
+ }
118
+ }
119
+ }
120
+ }
121
+ },
122
+ "border": {
123
+ "radius": {
124
+ "$type": "dimension",
125
+ "$value": "{border.radius.small}"
126
+ }
127
+ },
128
+ "focus-ring": {
129
+ "color": {
130
+ "$type": "color",
131
+ "$value": "{focus.ring.color.default}",
132
+ "$extensions": {
133
+ "appearance": {
134
+ "light": {
135
+ "$type": "color",
136
+ "$value": "{focus.ring.color.default}"
137
+ },
138
+ "dark": {
139
+ "$type": "color",
140
+ "$value": "{focus.ring.color.default}"
141
+ }
142
+ }
143
+ }
144
+ }
145
+ }
146
+ },
147
+ "checked-error": {
148
+ "foreground": {
149
+ "color": {
150
+ "$root": {
151
+ "$type": "color",
152
+ "$value": "{foreground.color.danger}",
153
+ "$extensions": {
154
+ "appearance": {
155
+ "light": {
156
+ "$type": "color",
157
+ "$value": "{foreground.color.danger}"
158
+ },
159
+ "dark": {
160
+ "$type": "color",
161
+ "$value": "{foreground.color.danger}"
162
+ }
163
+ }
164
+ }
165
+ },
166
+ "hover": {
167
+ "$type": "color",
168
+ "$value": "{foreground.color.danger.hover}",
169
+ "$extensions": {
170
+ "appearance": {
171
+ "light": {
172
+ "$type": "color",
173
+ "$value": "{foreground.color.danger.hover}"
174
+ },
175
+ "dark": {
176
+ "$type": "color",
177
+ "$value": "{foreground.color.danger.hover}"
178
+ }
179
+ }
180
+ }
181
+ },
182
+ "active": {
183
+ "$type": "color",
184
+ "$value": "{foreground.color.danger.active}",
185
+ "$extensions": {
186
+ "appearance": {
187
+ "light": {
188
+ "$type": "color",
189
+ "$value": "{foreground.color.danger.active}"
190
+ },
191
+ "dark": {
192
+ "$type": "color",
193
+ "$value": "{foreground.color.danger.active}"
194
+ }
195
+ }
196
+ }
197
+ }
198
+ }
199
+ },
200
+ "background": {
201
+ "color": {
202
+ "hover": {
203
+ "$type": "color",
204
+ "$value": "{background.color.transparent.danger.hover}",
205
+ "$extensions": {
206
+ "appearance": {
207
+ "light": {
208
+ "$type": "color",
209
+ "$value": "{background.color.transparent.danger.hover}"
210
+ },
211
+ "dark": {
212
+ "$type": "color",
213
+ "$value": "{background.color.transparent.danger.hover}"
214
+ }
215
+ }
216
+ }
217
+ }
218
+ }
219
+ },
220
+ "border": {
221
+ "radius": {
222
+ "$type": "dimension",
223
+ "$value": "{border.radius.small}"
224
+ }
225
+ },
226
+ "focus-ring": {
227
+ "color": {
228
+ "$type": "color",
229
+ "$value": "{focus.ring.color.danger}",
230
+ "$extensions": {
231
+ "appearance": {
232
+ "light": {
233
+ "$type": "color",
234
+ "$value": "{focus.ring.color.danger}"
235
+ },
236
+ "dark": {
237
+ "$type": "color",
238
+ "$value": "{focus.ring.color.danger}"
239
+ }
240
+ }
241
+ }
242
+ }
243
+ }
244
+ },
245
+ "unchecked-error": {
246
+ "background": {
247
+ "color": {
248
+ "hover": {
249
+ "$type": "color",
250
+ "$value": "{background.color.transparent.danger.hover}",
251
+ "$extensions": {
252
+ "appearance": {
253
+ "light": {
254
+ "$type": "color",
255
+ "$value": "{background.color.transparent.danger.hover}"
256
+ },
257
+ "dark": {
258
+ "$type": "color",
259
+ "$value": "{background.color.transparent.danger.hover}"
260
+ }
261
+ }
262
+ }
263
+ }
264
+ }
265
+ },
266
+ "border": {
267
+ "radius": {
268
+ "$type": "dimension",
269
+ "$value": "{border.radius.small}"
270
+ }
271
+ },
272
+ "focus-ring": {
273
+ "color": {
274
+ "$type": "color",
275
+ "$value": "{focus.ring.color.danger}",
276
+ "$extensions": {
277
+ "appearance": {
278
+ "light": {
279
+ "$type": "color",
280
+ "$value": "{focus.ring.color.danger}"
281
+ },
282
+ "dark": {
283
+ "$type": "color",
284
+ "$value": "{focus.ring.color.danger}"
285
+ }
286
+ }
287
+ }
288
+ }
289
+ }
290
+ }
291
+ }
292
+ }
package/src/theme/core/focus.tokens.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "focus": {
3
+ "ring": {
4
+ "color": {
5
+ "default": {
6
+ "$type": "color",
7
+ "$value": "{color.blue.500}",
8
+ "$extensions": {
9
+ "appearance": {
10
+ "light": {
11
+ "$type": "color",
12
+ "$value": "{color.blue.500}"
13
+ },
14
+ "dark": {
15
+ "$type": "color",
16
+ "$value": "{color.blue.300}"
17
+ }
18
+ }
19
+ }
20
+ },
21
+ "danger": {
22
+ "$type": "color",
23
+ "$value": "{color.red.500}",
24
+ "$extensions": {
25
+ "appearance": {
26
+ "light": {
27
+ "$type": "color",
28
+ "$value": "{color.red.500}"
29
+ },
30
+ "dark": {
31
+ "$type": "color",
32
+ "$value": "{color.red.300}"
33
+ }
34
+ }
35
+ }
36
+ }
37
+ },
38
+ "width": {
39
+ "$type": "dimension",
40
+ "$value": "{size.1}"
41
+ },
42
+ "style": {
43
+ "$type": "strokeStyle",
44
+ "$value": "solid"
45
+ }
46
+ }
47
+ }
48
+ }
package/src/theme/core/foreground.tokens.json ADDED
@@ -0,0 +1,288 @@
1
+ {
2
+ "foreground": {
3
+ "color": {
4
+ "default": {
5
+ "$type": "color",
6
+ "$value": "{color.neutral.950}",
7
+ "$extensions": {
8
+ "appearance": {
9
+ "light": {
10
+ "$type": "color",
11
+ "$value": "{color.neutral.950}"
12
+ },
13
+ "dark": {
14
+ "$type": "color",
15
+ "$value": "{color.neutral.0}"
16
+ }
17
+ }
18
+ }
19
+ },
20
+ "subdued": {
21
+ "$type": "color",
22
+ "$value": "{color.neutral.90}",
23
+ "$extensions": {
24
+ "appearance": {
25
+ "light": {
26
+ "$type": "color",
27
+ "$value": "{color.neutral.90}"
28
+ },
29
+ "dark": {
30
+ "$type": "color",
31
+ "$value": "{color.neutral.70}"
32
+ }
33
+ }
34
+ }
35
+ },
36
+ "primary": {
37
+ "$root": {
38
+ "$type": "color",
39
+ "$value": "{color.blue.500}",
40
+ "$extensions": {
41
+ "appearance": {
42
+ "light": {
43
+ "$type": "color",
44
+ "$value": "{color.blue.500}"
45
+ },
46
+ "dark": {
47
+ "$type": "color",
48
+ "$value": "{color.blue.300}"
49
+ }
50
+ }
51
+ }
52
+ },
53
+ "hover": {
54
+ "$type": "color",
55
+ "$value": "{color.blue.600}",
56
+ "$extensions": {
57
+ "appearance": {
58
+ "light": {
59
+ "$type": "color",
60
+ "$value": "{color.blue.600}"
61
+ },
62
+ "dark": {
63
+ "$type": "color",
64
+ "$value": "{color.blue.200}"
65
+ }
66
+ }
67
+ }
68
+ },
69
+ "active": {
70
+ "$type": "color",
71
+ "$value": "{color.blue.600}",
72
+ "$extensions": {
73
+ "appearance": {
74
+ "light": {
75
+ "$type": "color",
76
+ "$value": "{color.blue.600}"
77
+ },
78
+ "dark": {
79
+ "$type": "color",
80
+ "$value": "{color.blue.200}"
81
+ }
82
+ }
83
+ }
84
+ }
85
+ },
86
+ "danger": {
87
+ "$root": {
88
+ "$type": "color",
89
+ "$value": "{status.color.danger}",
90
+ "$extensions": {
91
+ "appearance": {
92
+ "light": {
93
+ "$type": "color",
94
+ "$value": "{status.color.danger}"
95
+ },
96
+ "dark": {
97
+ "$type": "color",
98
+ "$value": "{status.color.danger}"
99
+ }
100
+ }
101
+ }
102
+ },
103
+ "hover": {
104
+ "$type": "color",
105
+ "$value": "{color.red.600}",
106
+ "$extensions": {
107
+ "appearance": {
108
+ "light": {
109
+ "$type": "color",
110
+ "$value": "{color.red.600}"
111
+ },
112
+ "dark": {
113
+ "$type": "color",
114
+ "$value": "{status.color.danger}"
115
+ }
116
+ }
117
+ }
118
+ },
119
+ "active": {
120
+ "$type": "color",
121
+ "$value": "{color.red.600}",
122
+ "$extensions": {
123
+ "appearance": {
124
+ "light": {
125
+ "$type": "color",
126
+ "$value": "{color.red.600}"
127
+ },
128
+ "dark": {
129
+ "$type": "color",
130
+ "$value": "{status.color.danger}"
131
+ }
132
+ }
133
+ }
134
+ }
135
+ },
136
+ "inverted": {
137
+ "$type": "color",
138
+ "$value": "{color.neutral.0}",
139
+ "$extensions": {
140
+ "appearance": {
141
+ "light": {
142
+ "$type": "color",
143
+ "$value": "{color.neutral.0}"
144
+ },
145
+ "dark": {
146
+ "$type": "color",
147
+ "$value": "{color.neutral.950}"
148
+ }
149
+ }
150
+ }
151
+ },
152
+ "on": {
153
+ "primary": {
154
+ "$root": {
155
+ "$type": "color",
156
+ "$value": "{color.neutral.0}",
157
+ "$extensions": {
158
+ "appearance": {
159
+ "light": {
160
+ "$type": "color",
161
+ "$value": "{color.neutral.0}"
162
+ },
163
+ "dark": {
164
+ "$type": "color",
165
+ "$value": "{color.neutral.950}"
166
+ }
167
+ }
168
+ }
169
+ },
170
+ "hover": {
171
+ "$type": "color",
172
+ "$value": "{color.neutral.0}",
173
+ "$extensions": {
174
+ "appearance": {
175
+ "light": {
176
+ "$type": "color",
177
+ "$value": "{color.neutral.0}"
178
+ },
179
+ "dark": {
180
+ "$type": "color",
181
+ "$value": "{color.neutral.950}"
182
+ }
183
+ }
184
+ }
185
+ },
186
+ "active": {
187
+ "$type": "color",
188
+ "$value": "{color.neutral.0}",
189
+ "$extensions": {
190
+ "appearance": {
191
+ "light": {
192
+ "$type": "color",
193
+ "$value": "{color.neutral.0}"
194
+ },
195
+ "dark": {
196
+ "$type": "color",
197
+ "$value": "{color.neutral.950}"
198
+ }
199
+ }
200
+ }
201
+ }
202
+ },
203
+ "danger": {
204
+ "$root": {
205
+ "$type": "color",
206
+ "$value": "{color.neutral.0}",
207
+ "$extensions": {
208
+ "appearance": {
209
+ "light": {
210
+ "$type": "color",
211
+ "$value": "{color.neutral.0}"
212
+ },
213
+ "dark": {
214
+ "$type": "color",
215
+ "$value": "{color.neutral.950}"
216
+ }
217
+ }
218
+ }
219
+ },
220
+ "subdued": {
221
+ "$type": "color",
222
+ "$value": "{color.red.600}",
223
+ "$extensions": {
224
+ "appearance": {
225
+ "light": {
226
+ "$type": "color",
227
+ "$value": "{color.red.600}"
228
+ },
229
+ "dark": {
230
+ "$type": "color",
231
+ "$value": "{color.neutral.0}"
232
+ }
233
+ }
234
+ }
235
+ },
236
+ "hover": {
237
+ "$type": "color",
238
+ "$value": "{color.neutral.0}",
239
+ "$extensions": {
240
+ "appearance": {
241
+ "light": {
242
+ "$type": "color",
243
+ "$value": "{color.neutral.0}"
244
+ },
245
+ "dark": {
246
+ "$type": "color",
247
+ "$value": "{color.neutral.950}"
248
+ }
249
+ }
250
+ }
251
+ },
252
+ "active": {
253
+ "$type": "color",
254
+ "$value": "{color.neutral.0}",
255
+ "$extensions": {
256
+ "appearance": {
257
+ "light": {
258
+ "$type": "color",
259
+ "$value": "{color.neutral.0}"
260
+ },
261
+ "dark": {
262
+ "$type": "color",
263
+ "$value": "{color.neutral.950}"
264
+ }
265
+ }
266
+ }
267
+ }
268
+ },
269
+ "warning": {
270
+ "$type": "color",
271
+ "$value": "{color.neutral.950}",
272
+ "$extensions": {
273
+ "appearance": {
274
+ "light": {
275
+ "$type": "color",
276
+ "$value": "{color.neutral.950}"
277
+ },
278
+ "dark": {
279
+ "$type": "color",
280
+ "$value": "{color.neutral.950}"
281
+ }
282
+ }
283
+ }
284
+ }
285
+ }
286
+ }
287
+ }
288
+ }
package/src/theme/core/shadow.tokens.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "shadow": {
3
+ "color": {
4
+ "$type": "color",
5
+ "$value": {
6
+ "color": "{color.neutral.400}",
7
+ "alpha": 0.08
8
+ },
9
+ "$extensions": {
10
+ "appearance": {
11
+ "light": {
12
+ "$type": "color",
13
+ "$value": {
14
+ "color": "{color.neutral.400}",
15
+ "alpha": 0.08
16
+ }
17
+ },
18
+ "dark": {
19
+ "$type": "color",
20
+ "$value": {
21
+ "color": "{color.neutral.0}",
22
+ "alpha": 0.08
23
+ }
24
+ }
25
+ }
26
+ }
27
+ },
28
+ "size": {
29
+ "flat": {
30
+ "$type": "dimension",
31
+ "$value": "{size.0} {size.0} {size.0}"
32
+ },
33
+ "float": {
34
+ "$type": "dimension",
35
+ "$value": "{size.0} {size.half} {size.2}"
36
+ },
37
+ "overlay": {
38
+ "$type": "dimension",
39
+ "$value": "{size.0} {size.2} {size.6}"
40
+ }
41
+ }
42
+ }
43
+ }