@servicetitan/hammer-token 2.1.1 → 2.3.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 (51) hide show
  1. package/.turbo/turbo-build.log +4 -1
  2. package/CHANGELOG.md +20 -0
  3. package/build/web/core/component-variables.scss +139 -0
  4. package/build/web/core/component.js +645 -0
  5. package/build/web/core/component.scss +69 -0
  6. package/build/web/core/css-utils/border.css +49 -29
  7. package/build/web/core/css-utils/color.css +231 -103
  8. package/build/web/core/css-utils/font.css +45 -43
  9. package/build/web/core/css-utils/spacing.css +71 -1
  10. package/build/web/core/css-utils/utils.css +576 -368
  11. package/build/web/core/index.js +2 -1
  12. package/build/web/core/raw.js +34 -24
  13. package/build/web/core/semantic-variables.scss +34 -24
  14. package/build/web/core/semantic.js +74 -24
  15. package/build/web/core/semantic.scss +16 -11
  16. package/config.js +97 -23
  17. package/package.json +3 -2
  18. package/src/global/primitive/breakpoint.js +19 -0
  19. package/src/global/primitive/color.js +231 -0
  20. package/src/global/primitive/duration.js +16 -0
  21. package/src/global/primitive/font.js +60 -0
  22. package/src/global/primitive/radius.js +31 -0
  23. package/src/global/primitive/size.js +55 -0
  24. package/src/global/primitive/transition.js +16 -0
  25. package/src/theme/core/background.js +170 -0
  26. package/src/theme/core/border.js +103 -0
  27. package/src/theme/core/component/button.js +708 -0
  28. package/src/theme/core/component/checkbox.js +405 -0
  29. package/src/theme/core/focus.js +35 -0
  30. package/src/theme/core/foreground.js +148 -0
  31. package/src/theme/core/overlay.js +137 -0
  32. package/src/theme/core/shadow.js +29 -0
  33. package/src/theme/core/status.js +49 -0
  34. package/src/theme/core/typography.js +82 -0
  35. package/src/utils/css-utils-format-utils.js +104 -34
  36. package/type/types.ts +75 -0
  37. package/src/global/primitive/breakpoint.json +0 -19
  38. package/src/global/primitive/color.json +0 -231
  39. package/src/global/primitive/duration.json +0 -16
  40. package/src/global/primitive/font.json +0 -60
  41. package/src/global/primitive/radius.json +0 -31
  42. package/src/global/primitive/size.json +0 -55
  43. package/src/global/primitive/transition.json +0 -16
  44. package/src/theme/core/background.json +0 -144
  45. package/src/theme/core/border.json +0 -87
  46. package/src/theme/core/focus.json +0 -31
  47. package/src/theme/core/foreground.json +0 -132
  48. package/src/theme/core/overlay.json +0 -134
  49. package/src/theme/core/shadow.json +0 -25
  50. package/src/theme/core/status.json +0 -46
  51. package/src/theme/core/typography.json +0 -79
package/src/theme/core/component/checkbox.js ADDED
@@ -0,0 +1,405 @@
1
+ /* eslint-disable @typescript-eslint/no-var-requires */
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 ADDED
@@ -0,0 +1,35 @@
1
+ /* eslint-disable @typescript-eslint/no-var-requires */
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 ADDED
@@ -0,0 +1,148 @@
1
+ /* eslint-disable @typescript-eslint/no-var-requires */
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 ADDED
@@ -0,0 +1,137 @@
1
+ /* eslint-disable @typescript-eslint/no-var-requires */
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
+ };