@servicetitan/hammer-token 2.0.0 → 2.0.1

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 (11) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +6 -0
  3. package/build/web/core/css-utils/color.css +10 -6
  4. package/build/web/core/css-utils/utils.css +10 -6
  5. package/build/web/core/raw.js +14 -6
  6. package/build/web/core/semantic-variables.scss +14 -6
  7. package/build/web/core/semantic.js +46 -6
  8. package/build/web/core/semantic.scss +10 -6
  9. package/package.json +1 -1
  10. package/src/theme/core/foreground.json +44 -0
  11. package/src/theme/core/overlay.json +6 -6
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @servicetitan/hammer-token@2.0.0 build /home/runner/work/hammer/hammer/packages/hammer-token
2
+ > @servicetitan/hammer-token@2.0.1 build /home/runner/work/hammer/hammer/packages/hammer-token
3
3
  > node ./config.js
4
4
 
5
5
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @servicetitan/hammer-token
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#957](https://github.com/servicetitan/hammer/pull/957) [`850ef84`](https://github.com/servicetitan/hammer/commit/850ef84820a8d29b066dcc91a75512f8a23ac7bf) Thanks [@tounsoo](https://github.com/tounsoo)! - Add additional foreground tokens and update overlay tokens to enhance color accessibility- Update Button, Listbox, Calendar, SideNav, Link to use the new tokens
8
+
3
9
  ## 2.0.0
4
10
 
5
11
  ### Major Changes
package/build/web/core/css-utils/color.css CHANGED
@@ -3,17 +3,17 @@
3
3
  .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
4
4
  .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
5
5
  .bg-inverted-strong {background-color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
6
- .bg-overlay-active-danger {background-color: light-dark(#e132124D, #ff745f40)}
6
+ .bg-overlay-active-danger {background-color: light-dark(#e132122E, #ff745f40)}
7
7
  .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
8
- .bg-overlay-active-on-danger {background-color: light-dark(#14141429, #14141429)}
8
+ .bg-overlay-active-on-danger {background-color: light-dark(#14141466, #14141429)}
9
9
  .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
10
- .bg-overlay-active-on-primary {background-color: light-dark(#14141429, #14141429)}
10
+ .bg-overlay-active-on-primary {background-color: light-dark(#14141466, #14141429)}
11
11
  .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
12
- .bg-overlay-hover-danger {background-color: light-dark(#e132121A, #ff745f1A)}
12
+ .bg-overlay-hover-danger {background-color: light-dark(#e132120F, #ff745f1A)}
13
13
  .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
14
- .bg-overlay-hover-on-danger {background-color: light-dark(#ffffff29, #ffffff29)}
14
+ .bg-overlay-hover-on-danger {background-color: light-dark(#14141433, #ffffff29)}
15
15
  .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
16
- .bg-overlay-hover-on-primary {background-color: light-dark(#ffffff29, #ffffff29)}
16
+ .bg-overlay-hover-on-primary {background-color: light-dark(#14141433, #ffffff29)}
17
17
  .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
18
18
  .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
19
19
  .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
@@ -33,8 +33,12 @@
33
33
  .border-color-status-warning {border-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
34
34
  .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
35
35
  .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
36
+ .c-active-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
37
+ .c-active-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
36
38
  .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
37
39
  .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
40
+ .c-hover-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
41
+ .c-hover-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
38
42
  .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
39
43
  .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
40
44
  .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
package/build/web/core/css-utils/utils.css CHANGED
@@ -3,17 +3,17 @@
3
3
  .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
4
4
  .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
5
5
  .bg-inverted-strong {background-color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
6
- .bg-overlay-active-danger {background-color: light-dark(#e132124D, #ff745f40)}
6
+ .bg-overlay-active-danger {background-color: light-dark(#e132122E, #ff745f40)}
7
7
  .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
8
- .bg-overlay-active-on-danger {background-color: light-dark(#14141429, #14141429)}
8
+ .bg-overlay-active-on-danger {background-color: light-dark(#14141466, #14141429)}
9
9
  .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
10
- .bg-overlay-active-on-primary {background-color: light-dark(#14141429, #14141429)}
10
+ .bg-overlay-active-on-primary {background-color: light-dark(#14141466, #14141429)}
11
11
  .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
12
- .bg-overlay-hover-danger {background-color: light-dark(#e132121A, #ff745f1A)}
12
+ .bg-overlay-hover-danger {background-color: light-dark(#e132120F, #ff745f1A)}
13
13
  .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
14
- .bg-overlay-hover-on-danger {background-color: light-dark(#ffffff29, #ffffff29)}
14
+ .bg-overlay-hover-on-danger {background-color: light-dark(#14141433, #ffffff29)}
15
15
  .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
16
- .bg-overlay-hover-on-primary {background-color: light-dark(#ffffff29, #ffffff29)}
16
+ .bg-overlay-hover-on-primary {background-color: light-dark(#14141433, #ffffff29)}
17
17
  .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
18
18
  .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
19
19
  .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
@@ -42,8 +42,12 @@
42
42
  .border-width-default {border-width: var(--size-quarter, 0.0625rem)}
43
43
  .border-width-none {border-width: var(--size-0, 0rem)}
44
44
  .border-width-strong {border-width: var(--size-half, 0.125rem)}
45
+ .c-active-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
46
+ .c-active-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
45
47
  .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
46
48
  .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
49
+ .c-hover-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
50
+ .c-hover-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
47
51
  .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
48
52
  .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
49
53
  .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
package/build/web/core/raw.js CHANGED
@@ -61,18 +61,22 @@ export const light = {
61
61
  ForegroundColorOnPrimary: "#ffffff",
62
62
  ForegroundColorOnDanger: "#ffffff",
63
63
  ForegroundColorOnWarning: "#141414",
64
+ ForegroundColorActivePrimary: "#004491",
65
+ ForegroundColorActiveDanger: "#bf2a00",
66
+ ForegroundColorHoverPrimary: "#004491",
67
+ ForegroundColorHoverDanger: "#bf2a00",
64
68
  OverlayColorActive: "#14141429",
65
69
  OverlayColorActivePrimary: "#0265dc4D",
66
- OverlayColorActiveDanger: "#e132124D",
70
+ OverlayColorActiveDanger: "#e132122E",
67
71
  OverlayColorActiveOn: "#14141429",
68
- OverlayColorActiveOnPrimary: "#14141429",
69
- OverlayColorActiveOnDanger: "#14141429",
72
+ OverlayColorActiveOnPrimary: "#14141466",
73
+ OverlayColorActiveOnDanger: "#14141466",
70
74
  OverlayColorHover: "#14141414",
71
75
  OverlayColorHoverPrimary: "#0265dc1A",
72
- OverlayColorHoverDanger: "#e132121A",
76
+ OverlayColorHoverDanger: "#e132120F",
73
77
  OverlayColorHoverOn: "#14141414",
74
- OverlayColorHoverOnPrimary: "#ffffff29",
75
- OverlayColorHoverOnDanger: "#ffffff29",
78
+ OverlayColorHoverOnPrimary: "#14141433",
79
+ OverlayColorHoverOnDanger: "#14141433",
76
80
  ShadowColor: "#14141414",
77
81
  StatusColorInfo: "#0265dc",
78
82
  StatusColorDanger: "#e13212",
@@ -106,6 +110,10 @@ export const dark = {
106
110
  ForegroundColorOnPrimary: "#141414",
107
111
  ForegroundColorOnDanger: "#141414",
108
112
  ForegroundColorOnWarning: "#141414",
113
+ ForegroundColorActivePrimary: "#b5deff",
114
+ ForegroundColorActiveDanger: "#ff745f",
115
+ ForegroundColorHoverPrimary: "#b5deff",
116
+ ForegroundColorHoverDanger: "#ff745f",
109
117
  OverlayColorActive: "#ffffff29",
110
118
  OverlayColorActivePrimary: "#78bbfa40",
111
119
  OverlayColorActiveDanger: "#ff745f40",
package/build/web/core/semantic-variables.scss CHANGED
@@ -25,18 +25,22 @@ $light: (
25
25
  foreground-color-on-primary: #ffffff,
26
26
  foreground-color-on-danger: #ffffff,
27
27
  foreground-color-on-warning: #141414,
28
+ foreground-color-active-primary: #004491,
29
+ foreground-color-active-danger: #bf2a00,
30
+ foreground-color-hover-primary: #004491,
31
+ foreground-color-hover-danger: #bf2a00,
28
32
  overlay-color-active: #14141429,
29
33
  overlay-color-active-primary: #0265dc4D,
30
- overlay-color-active-danger: #e132124D,
34
+ overlay-color-active-danger: #e132122E,
31
35
  overlay-color-active-on: #14141429,
32
- overlay-color-active-on-primary: #14141429,
33
- overlay-color-active-on-danger: #14141429,
36
+ overlay-color-active-on-primary: #14141466,
37
+ overlay-color-active-on-danger: #14141466,
34
38
  overlay-color-hover: #14141414,
35
39
  overlay-color-hover-primary: #0265dc1A,
36
- overlay-color-hover-danger: #e132121A,
40
+ overlay-color-hover-danger: #e132120F,
37
41
  overlay-color-hover-on: #14141414,
38
- overlay-color-hover-on-primary: #ffffff29,
39
- overlay-color-hover-on-danger: #ffffff29,
42
+ overlay-color-hover-on-primary: #14141433,
43
+ overlay-color-hover-on-danger: #14141433,
40
44
  shadow-color: #14141414,
41
45
  status-color-info: #0265dc,
42
46
  status-color-danger: #e13212,
@@ -70,6 +74,10 @@ $dark: (
70
74
  foreground-color-on-primary: #141414,
71
75
  foreground-color-on-danger: #141414,
72
76
  foreground-color-on-warning: #141414,
77
+ foreground-color-active-primary: #b5deff,
78
+ foreground-color-active-danger: #ff745f,
79
+ foreground-color-hover-primary: #b5deff,
80
+ foreground-color-hover-danger: #ff745f,
73
81
  overlay-color-active: #ffffff29,
74
82
  overlay-color-active-primary: #78bbfa40,
75
83
  overlay-color-active-danger: #ff745f40,
package/build/web/core/semantic.js CHANGED
@@ -268,6 +268,46 @@ export const ForegroundColorOnWarning = {
268
268
  }
269
269
  }
270
270
  };
271
+ export const ForegroundColorActivePrimary = {
272
+ value: "#004491",
273
+ attributes: {
274
+ appearance: {
275
+ dark: {
276
+ value: "#b5deff"
277
+ }
278
+ }
279
+ }
280
+ };
281
+ export const ForegroundColorActiveDanger = {
282
+ value: "#bf2a00",
283
+ attributes: {
284
+ appearance: {
285
+ dark: {
286
+ value: "#ff745f"
287
+ }
288
+ }
289
+ }
290
+ };
291
+ export const ForegroundColorHoverPrimary = {
292
+ value: "#004491",
293
+ attributes: {
294
+ appearance: {
295
+ dark: {
296
+ value: "#b5deff"
297
+ }
298
+ }
299
+ }
300
+ };
301
+ export const ForegroundColorHoverDanger = {
302
+ value: "#bf2a00",
303
+ attributes: {
304
+ appearance: {
305
+ dark: {
306
+ value: "#ff745f"
307
+ }
308
+ }
309
+ }
310
+ };
271
311
  export const OverlayColorActive = {
272
312
  value: "#14141429",
273
313
  attributes: {
@@ -289,7 +329,7 @@ export const OverlayColorActivePrimary = {
289
329
  }
290
330
  };
291
331
  export const OverlayColorActiveDanger = {
292
- value: "#e132124D",
332
+ value: "#e132122E",
293
333
  attributes: {
294
334
  appearance: {
295
335
  dark: {
@@ -309,7 +349,7 @@ export const OverlayColorActiveOn = {
309
349
  }
310
350
  };
311
351
  export const OverlayColorActiveOnPrimary = {
312
- value: "#14141429",
352
+ value: "#14141466",
313
353
  attributes: {
314
354
  appearance: {
315
355
  dark: {
@@ -319,7 +359,7 @@ export const OverlayColorActiveOnPrimary = {
319
359
  }
320
360
  };
321
361
  export const OverlayColorActiveOnDanger = {
322
- value: "#14141429",
362
+ value: "#14141466",
323
363
  attributes: {
324
364
  appearance: {
325
365
  dark: {
@@ -349,7 +389,7 @@ export const OverlayColorHoverPrimary = {
349
389
  }
350
390
  };
351
391
  export const OverlayColorHoverDanger = {
352
- value: "#e132121A",
392
+ value: "#e132120F",
353
393
  attributes: {
354
394
  appearance: {
355
395
  dark: {
@@ -369,7 +409,7 @@ export const OverlayColorHoverOn = {
369
409
  }
370
410
  };
371
411
  export const OverlayColorHoverOnPrimary = {
372
- value: "#ffffff29",
412
+ value: "#14141433",
373
413
  attributes: {
374
414
  appearance: {
375
415
  dark: {
@@ -379,7 +419,7 @@ export const OverlayColorHoverOnPrimary = {
379
419
  }
380
420
  };
381
421
  export const OverlayColorHoverOnDanger = {
382
- value: "#ffffff29",
422
+ value: "#14141433",
383
423
  attributes: {
384
424
  appearance: {
385
425
  dark: {
package/build/web/core/semantic.scss CHANGED
@@ -34,18 +34,22 @@ $foreground-color-inverted: var(--foreground-color-inverted, #ffffff);
34
34
  $foreground-color-on-primary: var(--foreground-color-on-primary, #ffffff);
35
35
  $foreground-color-on-danger: var(--foreground-color-on-danger, #ffffff);
36
36
  $foreground-color-on-warning: var(--foreground-color-on-warning, #141414);
37
+ $foreground-color-active-primary: var(--foreground-color-active-primary, #004491);
38
+ $foreground-color-active-danger: var(--foreground-color-active-danger, #bf2a00);
39
+ $foreground-color-hover-primary: var(--foreground-color-hover-primary, #004491);
40
+ $foreground-color-hover-danger: var(--foreground-color-hover-danger, #bf2a00);
37
41
  $overlay-color-active: var(--overlay-color-active, #14141429);
38
42
  $overlay-color-active-primary: var(--overlay-color-active-primary, #0265dc4D);
39
- $overlay-color-active-danger: var(--overlay-color-active-danger, #e132124D);
43
+ $overlay-color-active-danger: var(--overlay-color-active-danger, #e132122E);
40
44
  $overlay-color-active-on: var(--overlay-color-active-on, #14141429);
41
- $overlay-color-active-on-primary: var(--overlay-color-active-on-primary, #14141429);
42
- $overlay-color-active-on-danger: var(--overlay-color-active-on-danger, #14141429);
45
+ $overlay-color-active-on-primary: var(--overlay-color-active-on-primary, #14141466);
46
+ $overlay-color-active-on-danger: var(--overlay-color-active-on-danger, #14141466);
43
47
  $overlay-color-hover: var(--overlay-color-hover, #14141414);
44
48
  $overlay-color-hover-primary: var(--overlay-color-hover-primary, #0265dc1A);
45
- $overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132121A);
49
+ $overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132120F);
46
50
  $overlay-color-hover-on: var(--overlay-color-hover-on, #14141414);
47
- $overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #ffffff29);
48
- $overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #ffffff29);
51
+ $overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #14141433);
52
+ $overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #14141433);
49
53
  $shadow-color: var(--shadow-color, #14141414);
50
54
  $shadow-size-flat: 0rem 0rem 0rem;
51
55
  $shadow-size-float: 0rem 0.125rem 0.5rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/hammer-token",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "",
5
5
  "main": "build/web/index.js",
6
6
  "types": "build/web/index.d.ts",
package/src/theme/core/foreground.json CHANGED
@@ -82,6 +82,50 @@
82
82
  }
83
83
  }
84
84
  }
85
+ },
86
+ "active": {
87
+ "primary": {
88
+ "value": "{color.blue.600}",
89
+ "attributes": {
90
+ "appearance": {
91
+ "dark": {
92
+ "value": "{color.blue.200}"
93
+ }
94
+ }
95
+ }
96
+ },
97
+ "danger": {
98
+ "value": "{color.red.600}",
99
+ "attributes": {
100
+ "appearance": {
101
+ "dark": {
102
+ "value": "{status.color.danger.attributes.appearance.dark}"
103
+ }
104
+ }
105
+ }
106
+ }
107
+ },
108
+ "hover": {
109
+ "primary": {
110
+ "value": "{color.blue.600}",
111
+ "attributes": {
112
+ "appearance": {
113
+ "dark": {
114
+ "value": "{color.blue.200}"
115
+ }
116
+ }
117
+ }
118
+ },
119
+ "danger": {
120
+ "value": "{color.red.600}",
121
+ "attributes": {
122
+ "appearance": {
123
+ "dark": {
124
+ "value": "{status.color.danger.attributes.appearance.dark}"
125
+ }
126
+ }
127
+ }
128
+ }
85
129
  }
86
130
  }
87
131
  }
package/src/theme/core/overlay.json CHANGED
@@ -23,7 +23,7 @@
23
23
  }
24
24
  },
25
25
  "danger": {
26
- "value": "{color.red.500}4D",
26
+ "value": "{color.red.500}2E",
27
27
  "attributes": {
28
28
  "appearance": {
29
29
  "dark": {
@@ -44,7 +44,7 @@
44
44
  }
45
45
  },
46
46
  "primary": {
47
- "value": "{color.neutral.400}29",
47
+ "value": "{color.neutral.400}66",
48
48
  "attributes": {
49
49
  "appearance": {
50
50
  "dark": {
@@ -54,7 +54,7 @@
54
54
  }
55
55
  },
56
56
  "danger": {
57
- "value": "{color.neutral.400}29",
57
+ "value": "{color.neutral.400}66",
58
58
  "attributes": {
59
59
  "appearance": {
60
60
  "dark": {
@@ -87,7 +87,7 @@
87
87
  }
88
88
  },
89
89
  "danger": {
90
- "value": "{color.red.500}1A",
90
+ "value": "{color.red.500}0F",
91
91
  "attributes": {
92
92
  "appearance": {
93
93
  "dark": {
@@ -108,7 +108,7 @@
108
108
  }
109
109
  },
110
110
  "primary": {
111
- "value": "{color.neutral.0}29",
111
+ "value": "{color.neutral.400}33",
112
112
  "attributes": {
113
113
  "appearance": {
114
114
  "dark": {
@@ -118,7 +118,7 @@
118
118
  }
119
119
  },
120
120
  "danger": {
121
- "value": "{color.neutral.0}29",
121
+ "value": "{color.neutral.400}33",
122
122
  "attributes": {
123
123
  "appearance": {
124
124
  "dark": {