@servicetitan/hammer-token 0.0.0-rc-1.47.0-20251104205759 → 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.js DELETED
@@ -1,405 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-require-imports */
2
- const { foreground } = require("../foreground");
3
- const { overlay } = require("../overlay");
4
- const tinycolor = require("tinycolor2");
5
-
6
- module.exports = {
7
- checkbox: {
8
- default: {
9
- unchecked: {
10
- fill: {
11
- color: {
12
- default: {
13
- value: foreground.color.default.value,
14
- attributes: {
15
- appearance: {
16
- dark: {
17
- value:
18
- foreground.color.default.attributes.appearance.dark.value,
19
- },
20
- },
21
- },
22
- },
23
- hover: {
24
- value: foreground.color.default.value,
25
- attributes: {
26
- appearance: {
27
- dark: {
28
- value:
29
- foreground.color.default.attributes.appearance.dark.value,
30
- },
31
- },
32
- },
33
- },
34
- active: {
35
- value: foreground.color.default.value,
36
- attributes: {
37
- appearance: {
38
- dark: {
39
- value:
40
- foreground.color.default.attributes.appearance.dark.value,
41
- },
42
- },
43
- },
44
- },
45
- },
46
- },
47
- background: {
48
- color: {
49
- default: {
50
- value: "transparent",
51
- attributes: {
52
- appearance: {
53
- dark: {
54
- value: "transparent",
55
- },
56
- },
57
- },
58
- },
59
- hover: {
60
- value: tinycolor(overlay.color.hover.default.value.slice(0, -2))
61
- .setAlpha(0.08)
62
- .toHex8String(),
63
- attributes: {
64
- appearance: {
65
- dark: {
66
- value: tinycolor(
67
- overlay.color.hover.default.attributes.appearance.dark.value.slice(
68
- 0,
69
- -2,
70
- ),
71
- )
72
- .setAlpha(0.08)
73
- .toHex8String(),
74
- },
75
- },
76
- },
77
- },
78
- active: {
79
- value: tinycolor(overlay.color.active.default.value.slice(0, -2))
80
- .setAlpha(0.16)
81
- .toHex8String(),
82
- attributes: {
83
- appearance: {
84
- dark: {
85
- value: tinycolor(
86
- overlay.color.active.default.attributes.appearance.dark.value.slice(
87
- 0,
88
- -2,
89
- ),
90
- )
91
- .setAlpha(0.16)
92
- .toHex8String(),
93
- },
94
- },
95
- },
96
- },
97
- },
98
- },
99
- },
100
- checked: {
101
- fill: {
102
- color: {
103
- default: {
104
- value: foreground.color.primary.value,
105
- attributes: {
106
- appearance: {
107
- dark: {
108
- value:
109
- foreground.color.primary.attributes.appearance.dark.value,
110
- },
111
- },
112
- },
113
- },
114
- hover: {
115
- value: tinycolor
116
- .mix(
117
- foreground.color.hover.primary.value,
118
- overlay.color.hover.primary.value,
119
- 20,
120
- )
121
- .toHex8String(),
122
- attributes: {
123
- appearance: {
124
- dark: {
125
- value: tinycolor
126
- .mix(
127
- foreground.color.hover.primary.attributes.appearance
128
- .dark.value,
129
- overlay.color.hover.primary.attributes.appearance.dark
130
- .value,
131
- 16,
132
- )
133
- .toHex8String(),
134
- },
135
- },
136
- },
137
- },
138
- active: {
139
- value: tinycolor
140
- .mix(
141
- foreground.color.hover.primary.value,
142
- overlay.color.active.primary.value,
143
- 40,
144
- )
145
- .toHex8String(),
146
- attributes: {
147
- appearance: {
148
- dark: {
149
- value: tinycolor
150
- .mix(
151
- foreground.color.active.primary.attributes.appearance
152
- .dark.value,
153
- overlay.color.active.primary.attributes.appearance.dark
154
- .value,
155
- 16,
156
- )
157
- .toHex8String(),
158
- },
159
- },
160
- },
161
- },
162
- },
163
- },
164
- background: {
165
- color: {
166
- default: {
167
- value: "transparent",
168
- attributes: {
169
- appearance: {
170
- dark: {
171
- value: "transparent",
172
- },
173
- },
174
- },
175
- },
176
- hover: {
177
- value: tinycolor(overlay.color.hover.primary.value.slice(0, -2))
178
- .setAlpha(0.08)
179
- .toHex8String(),
180
- attributes: {
181
- appearance: {
182
- dark: {
183
- value: tinycolor(
184
- overlay.color.hover.primary.attributes.appearance.dark.value.slice(
185
- 0,
186
- -2,
187
- ),
188
- )
189
- .setAlpha(0.08)
190
- .toHex8String(),
191
- },
192
- },
193
- },
194
- },
195
- active: {
196
- value: tinycolor(overlay.color.active.primary.value.slice(0, -2))
197
- .setAlpha(0.16)
198
- .toHex8String(),
199
- attributes: {
200
- appearance: {
201
- dark: {
202
- value: tinycolor(
203
- overlay.color.active.primary.attributes.appearance.dark.value.slice(
204
- 0,
205
- -2,
206
- ),
207
- )
208
- .setAlpha(0.16)
209
- .toHex8String(),
210
- },
211
- },
212
- },
213
- },
214
- },
215
- },
216
- },
217
- "unchecked-error": {
218
- fill: {
219
- color: {
220
- default: {
221
- value: foreground.color.danger.value,
222
- attributes: {
223
- appearance: {
224
- dark: {
225
- value:
226
- foreground.color.danger.attributes.appearance.dark.value,
227
- },
228
- },
229
- },
230
- },
231
- hover: {
232
- value: foreground.color.hover.danger.value,
233
- attributes: {
234
- appearance: {
235
- dark: {
236
- value:
237
- foreground.color.hover.danger.attributes.appearance.dark
238
- .value,
239
- },
240
- },
241
- },
242
- },
243
- active: {
244
- value: foreground.color.active.danger.value,
245
- attributes: {
246
- appearance: {
247
- dark: {
248
- value:
249
- foreground.color.active.danger.attributes.appearance.dark
250
- .value,
251
- },
252
- },
253
- },
254
- },
255
- },
256
- },
257
- background: {
258
- color: {
259
- default: {
260
- value: "transparent",
261
- attributes: {
262
- appearance: {
263
- dark: {
264
- value: "transparent",
265
- },
266
- },
267
- },
268
- },
269
- hover: {
270
- value: tinycolor(overlay.color.hover.danger.value.slice(0, -2))
271
- .setAlpha(0.06)
272
- .toHex8String(),
273
- attributes: {
274
- appearance: {
275
- dark: {
276
- value: tinycolor(
277
- overlay.color.hover.danger.attributes.appearance.dark.value.slice(
278
- 0,
279
- -2,
280
- ),
281
- )
282
- .setAlpha(0.1)
283
- .toHex8String(),
284
- },
285
- },
286
- },
287
- },
288
- active: {
289
- value: tinycolor(overlay.color.active.danger.value.slice(0, -2))
290
- .setAlpha(0.18)
291
- .toHex8String(),
292
- attributes: {
293
- appearance: {
294
- dark: {
295
- value: tinycolor(
296
- overlay.color.active.danger.attributes.appearance.dark.value.slice(
297
- 0,
298
- -2,
299
- ),
300
- )
301
- .setAlpha(0.25)
302
- .toHex8String(),
303
- },
304
- },
305
- },
306
- },
307
- },
308
- },
309
- },
310
- "checked-error": {
311
- fill: {
312
- color: {
313
- default: {
314
- value: foreground.color.danger.value,
315
- attributes: {
316
- appearance: {
317
- dark: {
318
- value:
319
- foreground.color.danger.attributes.appearance.dark.value,
320
- },
321
- },
322
- },
323
- },
324
- hover: {
325
- value: foreground.color.hover.danger.value,
326
- attributes: {
327
- appearance: {
328
- dark: {
329
- value:
330
- foreground.color.hover.danger.attributes.appearance.dark
331
- .value,
332
- },
333
- },
334
- },
335
- },
336
- active: {
337
- value: foreground.color.active.danger.value,
338
- attributes: {
339
- appearance: {
340
- dark: {
341
- value:
342
- foreground.color.active.danger.attributes.appearance.dark
343
- .value,
344
- },
345
- },
346
- },
347
- },
348
- },
349
- },
350
- background: {
351
- color: {
352
- default: {
353
- value: "transparent",
354
- attributes: {
355
- appearance: {
356
- dark: {
357
- value: "transparent",
358
- },
359
- },
360
- },
361
- },
362
- hover: {
363
- value: tinycolor(overlay.color.hover.danger.value.slice(0, -2))
364
- .setAlpha(0.06)
365
- .toHex8String(),
366
- attributes: {
367
- appearance: {
368
- dark: {
369
- value: tinycolor(
370
- overlay.color.hover.danger.attributes.appearance.dark.value.slice(
371
- 0,
372
- -2,
373
- ),
374
- )
375
- .setAlpha(0.1)
376
- .toHex8String(),
377
- },
378
- },
379
- },
380
- },
381
- active: {
382
- value: tinycolor(overlay.color.active.danger.value.slice(0, -2))
383
- .setAlpha(0.18)
384
- .toHex8String(),
385
- attributes: {
386
- appearance: {
387
- dark: {
388
- value: tinycolor(
389
- overlay.color.active.danger.attributes.appearance.dark.value.slice(
390
- 0,
391
- -2,
392
- ),
393
- )
394
- .setAlpha(0.25)
395
- .toHex8String(),
396
- },
397
- },
398
- },
399
- },
400
- },
401
- },
402
- },
403
- },
404
- },
405
- };
package/src/theme/core/focus.js DELETED
@@ -1,35 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-require-imports */
2
- const { color } = require("../../global/primitive/color");
3
- const { size } = require("../../global/primitive/size");
4
-
5
- module.exports = {
6
- focus: {
7
- ring: {
8
- color: {
9
- default: {
10
- value: color.blue["500"].value,
11
- attributes: {
12
- appearance: {
13
- dark: {
14
- value: color.blue["300"].value,
15
- },
16
- },
17
- },
18
- },
19
- danger: {
20
- value: color.red["500"].value,
21
- attributes: {
22
- appearance: {
23
- dark: {
24
- value: color.red["300"].value,
25
- },
26
- },
27
- },
28
- },
29
- },
30
- width: {
31
- value: size["1"].value,
32
- },
33
- },
34
- },
35
- };
package/src/theme/core/foreground.js DELETED
@@ -1,148 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-require-imports */
2
- const { color } = require("../../global/primitive/color");
3
- const { status } = require("./status");
4
-
5
- module.exports = {
6
- foreground: {
7
- color: {
8
- default: {
9
- value: color.neutral["400"].value,
10
- attributes: {
11
- appearance: {
12
- dark: {
13
- value: color.neutral["0"].value,
14
- },
15
- },
16
- },
17
- },
18
- subdued: {
19
- value: color.neutral["90"].value,
20
- attributes: {
21
- appearance: {
22
- dark: {
23
- value: color.neutral["70"].value,
24
- },
25
- },
26
- },
27
- },
28
- primary: {
29
- value: color.blue["500"].value,
30
- attributes: {
31
- appearance: {
32
- dark: {
33
- value: color.blue["300"].value,
34
- },
35
- },
36
- },
37
- },
38
- danger: {
39
- value: status.color.danger.value,
40
- attributes: {
41
- appearance: {
42
- dark: {
43
- value: status.color.danger.attributes.appearance.dark.value,
44
- },
45
- },
46
- },
47
- },
48
- inverted: {
49
- value: color.neutral["0"].value,
50
- attributes: {
51
- appearance: {
52
- dark: {
53
- value: color.neutral["400"].value,
54
- },
55
- },
56
- },
57
- },
58
- on: {
59
- primary: {
60
- value: color.neutral["0"].value,
61
- attributes: {
62
- appearance: {
63
- dark: {
64
- value: color.neutral["400"].value,
65
- },
66
- },
67
- },
68
- },
69
- danger: {
70
- default: {
71
- value: color.neutral["0"].value,
72
- attributes: {
73
- appearance: {
74
- dark: {
75
- value: color.neutral["400"].value,
76
- },
77
- },
78
- },
79
- },
80
- subdued: {
81
- value: color.red["600"].value,
82
- attributes: {
83
- appearance: {
84
- dark: {
85
- value: color.neutral["0"].value,
86
- },
87
- },
88
- },
89
- },
90
- },
91
- warning: {
92
- value: color.neutral["400"].value,
93
- attributes: {
94
- appearance: {
95
- dark: {
96
- value: color.neutral["400"].value,
97
- },
98
- },
99
- },
100
- },
101
- },
102
- active: {
103
- primary: {
104
- value: color.blue["600"].value,
105
- attributes: {
106
- appearance: {
107
- dark: {
108
- value: color.blue["200"].value,
109
- },
110
- },
111
- },
112
- },
113
- danger: {
114
- value: color.red["600"].value,
115
- attributes: {
116
- appearance: {
117
- dark: {
118
- value: status.color.danger.attributes.appearance.dark.value,
119
- },
120
- },
121
- },
122
- },
123
- },
124
- hover: {
125
- primary: {
126
- value: color.blue["600"].value,
127
- attributes: {
128
- appearance: {
129
- dark: {
130
- value: color.blue["200"].value,
131
- },
132
- },
133
- },
134
- },
135
- danger: {
136
- value: color.red["600"].value,
137
- attributes: {
138
- appearance: {
139
- dark: {
140
- value: status.color.danger.attributes.appearance.dark.value,
141
- },
142
- },
143
- },
144
- },
145
- },
146
- },
147
- },
148
- };
package/src/theme/core/overlay.js DELETED
@@ -1,137 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-require-imports */
2
- const { color } = require("../../global/primitive/color");
3
-
4
- module.exports = {
5
- overlay: {
6
- color: {
7
- active: {
8
- default: {
9
- value: `${color.neutral["400"].value}29`,
10
- attributes: {
11
- appearance: {
12
- dark: {
13
- value: `${color.neutral[0].value}29`,
14
- },
15
- },
16
- },
17
- },
18
- primary: {
19
- value: `${color.blue["500"].value}4D`,
20
- attributes: {
21
- appearance: {
22
- dark: {
23
- value: `${color.blue["300"].value}40`,
24
- },
25
- },
26
- },
27
- },
28
- danger: {
29
- value: `${color.red["500"].value}4D`,
30
- attributes: {
31
- appearance: {
32
- dark: {
33
- value: `${color.red["400"].value}40`,
34
- },
35
- },
36
- },
37
- },
38
- on: {
39
- default: {
40
- value: `${color.neutral["400"].value}29`,
41
- attributes: {
42
- appearance: {
43
- dark: {
44
- value: `${color.neutral["400"].value}29`,
45
- },
46
- },
47
- },
48
- },
49
- primary: {
50
- value: `${color.neutral["400"].value}66`,
51
- attributes: {
52
- appearance: {
53
- dark: {
54
- value: `${color.neutral["400"].value}29`,
55
- },
56
- },
57
- },
58
- },
59
- danger: {
60
- value: `${color.neutral["400"].value}66`,
61
- attributes: {
62
- appearance: {
63
- dark: {
64
- value: `${color.neutral["400"].value}29`,
65
- },
66
- },
67
- },
68
- },
69
- },
70
- },
71
- hover: {
72
- default: {
73
- value: `${color.neutral["400"].value}14`,
74
- attributes: {
75
- appearance: {
76
- dark: {
77
- value: `${color.neutral["0"].value}14`,
78
- },
79
- },
80
- },
81
- },
82
- primary: {
83
- value: `${color.blue["500"].value}1A`,
84
- attributes: {
85
- appearance: {
86
- dark: {
87
- value: `${color.blue["300"].value}1A`,
88
- },
89
- },
90
- },
91
- },
92
- danger: {
93
- value: `${color.red["500"].value}1A`,
94
- attributes: {
95
- appearance: {
96
- dark: {
97
- value: `${color.red["400"].value}26`,
98
- },
99
- },
100
- },
101
- },
102
- on: {
103
- default: {
104
- value: `${color.neutral["400"].value}14`,
105
- attributes: {
106
- appearance: {
107
- dark: {
108
- value: `${color.neutral["0"].value}14`,
109
- },
110
- },
111
- },
112
- },
113
- primary: {
114
- value: `${color.neutral["400"].value}33`,
115
- attributes: {
116
- appearance: {
117
- dark: {
118
- value: `${color.neutral["0"].value}29`,
119
- },
120
- },
121
- },
122
- },
123
- danger: {
124
- value: `${color.neutral["400"].value}33`,
125
- attributes: {
126
- appearance: {
127
- dark: {
128
- value: `${color.neutral["0"].value}29`,
129
- },
130
- },
131
- },
132
- },
133
- },
134
- },
135
- },
136
- },
137
- };