@servicetitan/hammer-token 1.3.0 → 1.3.2

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 (12) hide show
  1. package/.turbo/turbo-build.log +2 -1
  2. package/.turbo/turbo-lint.log +1 -1
  3. package/CHANGELOG.md +25 -1
  4. package/build/web/core/css-utils/border.css +5 -5
  5. package/build/web/core/css-utils/color.css +47 -89
  6. package/build/web/core/css-utils/utils.css +47 -89
  7. package/build/web/core/semantic-variables.scss +150 -0
  8. package/config.js +39 -1
  9. package/package.json +2 -2
  10. package/src/utils/copy-css-utils-cli.js +11 -23
  11. package/src/utils/css-utils-format-utils.js +9 -17
  12. package/type/types.ts +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @servicetitan/hammer-token@1.2.0 build /home/runner/work/hammer/hammer/packages/hammer-token
2
+ > @servicetitan/hammer-token@1.3.1 build /home/runner/work/hammer/hammer/packages/hammer-token
3
3
  > node ./config.js
4
4
 
5
5
 
@@ -13,6 +13,7 @@ css
13
13
  scss
14
14
  ✔︎ build/web/core/primitive.scss
15
15
  ✔︎ build/web/core/semantic.scss
16
+ ✔︎ build/web/core/semantic-variables.scss
16
17
 
17
18
  tsLight
18
19
  ✔︎ build/web/core/primitive.js
package/.turbo/turbo-lint.log CHANGED
@@ -1,4 +1,4 @@
1
1
 
2
- > @servicetitan/hammer-token@1.2.0 lint /home/runner/work/hammer/hammer/packages/hammer-token
2
+ > @servicetitan/hammer-token@1.3.1 lint /home/runner/work/hammer/hammer/packages/hammer-token
3
3
  > eslint
4
4
 
package/CHANGELOG.md CHANGED
@@ -1,6 +1,30 @@
1
+ # v1.3.2 (Mon Oct 28 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - ANV-2216: Fix CSS var not being available in certain conditions, theme tokens to not override each other with different versions values [#776](https://github.com/servicetitan/hammer/pull/776) ([@tounsoo](https://github.com/tounsoo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Ben Ho ([@tounsoo](https://github.com/tounsoo))
10
+
11
+ ---
12
+
13
+ # v1.3.1 (Mon Oct 28 2024)
14
+
15
+ #### 📝 Documentation
16
+
17
+ - HOTFIX: Changelog updates after release mishap [#784](https://github.com/servicetitan/hammer/pull/784) ([@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
18
+
19
+ #### Authors: 1
20
+
21
+ - Derek Watson ([@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
22
+
23
+ ---
24
+
1
25
  # v1.3.0 (Fri Oct 25 2024)
2
26
 
3
- #### 🏠 Internal
27
+ #### ✨ New Feature
4
28
 
5
29
  - ANV-2021: Add sr-only class to css-utils [#773](https://github.com/servicetitan/hammer/pull/773) ([@tounsoo](https://github.com/tounsoo))
6
30
 
package/build/web/core/css-utils/border.css CHANGED
@@ -1,8 +1,8 @@
1
- .border-color-danger {border-color: var(--status-color-danger, #e13212)}
2
- .border-color-default {border-color: var(--color-neutral-80, #949596)}
3
- .border-color-primary {border-color: var(--status-color-info, #0265dc)}
4
- .border-color-strong {border-color: var(--color-neutral-200, #444445)}
5
- .border-color-subdued {border-color: var(--color-neutral-60, #dfe0e1)}
1
+ .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
2
+ .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
3
+ .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
4
+ .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
5
+ .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
6
6
  .border-radius-circular {border-radius: 100%}
7
7
  .border-radius-none {border-radius: var(--size-0, 0rem)}
8
8
  .border-radius-pill {border-radius: 500px}
package/build/web/core/css-utils/color.css CHANGED
@@ -1,89 +1,47 @@
1
- .bg-danger-default {background-color: var(--status-color-danger, #e13212)}
2
- .bg-default {background-color: var(--color-neutral-0, #ffffff)}
3
- .bg-disabled {background-color: var(--color-neutral-100, #606162)}
4
- .bg-inverted-default {background-color: var(--color-neutral-300, #2d2e31)}
5
- .bg-inverted-strong {background-color: var(--color-neutral-400, #141414)}
6
- .bg-overlay-active-danger {background-color: #e132124D}
7
- .bg-overlay-active-default {background-color: #14141429}
8
- .bg-overlay-active-on-danger {background-color: #14141429}
9
- .bg-overlay-active-on-default {background-color: #14141429}
10
- .bg-overlay-active-on-primary {background-color: #14141429}
11
- .bg-overlay-active-primary {background-color: #0265dc4D}
12
- .bg-overlay-hover-danger {background-color: #e132121A}
13
- .bg-overlay-hover-default {background-color: #14141414}
14
- .bg-overlay-hover-on-danger {background-color: #ffffff29}
15
- .bg-overlay-hover-on-default {background-color: #14141414}
16
- .bg-overlay-hover-on-primary {background-color: #ffffff29}
17
- .bg-overlay-hover-primary {background-color: #0265dc1A}
18
- .bg-primary-default {background-color: var(--color-blue-500, #0265dc)}
19
- .bg-primary-subdued {background-color: var(--color-blue-100, #e0f2ff)}
20
- .bg-status-danger {background-color: var(--color-red-500, #e13212)}
21
- .bg-status-info {background-color: var(--color-blue-500, #0265dc)}
22
- .bg-status-success {background-color: var(--color-green-500, #007a4d)}
23
- .bg-status-warning {background-color: var(--color-yellow-500, #ffbe00)}
24
- .bg-strong {background-color: var(--color-neutral-30, #f7f7f7)}
25
- .bg-stronger {background-color: var(--color-neutral-50, #eeeeee)}
26
- .bg-strongest {background-color: var(--color-neutral-70, #bcbcbd)}
27
- .bg-warning-default {background-color: var(--status-color-warning, #ffbe00)}
28
- .border-color-danger {border-color: var(--status-color-danger, #e13212)}
29
- .border-color-default {border-color: var(--color-neutral-80, #949596)}
30
- .border-color-primary {border-color: var(--status-color-info, #0265dc)}
31
- .border-color-status-info {border-color: var(--color-blue-500, #0265dc)}
32
- .border-color-status-success {border-color: var(--color-green-500, #007a4d)}
33
- .border-color-status-warning {border-color: var(--color-yellow-500, #ffbe00)}
34
- .border-color-strong {border-color: var(--color-neutral-200, #444445)}
35
- .border-color-subdued {border-color: var(--color-neutral-60, #dfe0e1)}
36
- .c-danger {color: var(--status-color-danger, #e13212)}
37
- .c-default {color: var(--color-neutral-400, #141414)}
38
- .c-inverted {color: var(--color-neutral-0, #ffffff)}
39
- .c-on-danger {color: var(--color-neutral-0, #ffffff)}
40
- .c-on-primary {color: var(--color-neutral-0, #ffffff)}
41
- .c-on-warning {color: var(--color-neutral-400, #141414)}
42
- .c-primary {color: var(--color-blue-500, #0265dc)}
43
- .c-status-danger {color: var(--color-red-500, #e13212)}
44
- .c-status-info {color: var(--color-blue-500, #0265dc)}
45
- .c-status-success {color: var(--color-green-500, #007a4d)}
46
- .c-status-warning {color: var(--color-yellow-500, #ffbe00)}
47
- .c-subdued {color: var(--color-neutral-90, #737475)}
48
- .hammer-themeprovider-core-dark .bg-danger-default {background-color: #ff745f}
49
- .hammer-themeprovider-core-dark .bg-default {background-color: var(--color-neutral-400, #141414)}
50
- .hammer-themeprovider-core-dark .bg-disabled {background-color: var(--color-neutral-100, #606162)}
51
- .hammer-themeprovider-core-dark .bg-inverted-default {background-color: var(--color-neutral-20, #fafafa)}
52
- .hammer-themeprovider-core-dark .bg-inverted-strong {background-color: var(--color-neutral-0, #ffffff)}
53
- .hammer-themeprovider-core-dark .bg-overlay-active-danger {background-color: #ff745f40}
54
- .hammer-themeprovider-core-dark .bg-overlay-active-default {background-color: #ffffff29}
55
- .hammer-themeprovider-core-dark .bg-overlay-active-on-danger {background-color: #14141429}
56
- .hammer-themeprovider-core-dark .bg-overlay-active-on-default {background-color: #14141429}
57
- .hammer-themeprovider-core-dark .bg-overlay-active-on-primary {background-color: #14141429}
58
- .hammer-themeprovider-core-dark .bg-overlay-active-primary {background-color: #78bbfa40}
59
- .hammer-themeprovider-core-dark .bg-overlay-hover-danger {background-color: #ff745f1A}
60
- .hammer-themeprovider-core-dark .bg-overlay-hover-default {background-color: #ffffff14}
61
- .hammer-themeprovider-core-dark .bg-overlay-hover-on-danger {background-color: #ffffff29}
62
- .hammer-themeprovider-core-dark .bg-overlay-hover-on-default {background-color: #ffffff14}
63
- .hammer-themeprovider-core-dark .bg-overlay-hover-on-primary {background-color: #ffffff29}
64
- .hammer-themeprovider-core-dark .bg-overlay-hover-primary {background-color: #78bbfa1A}
65
- .hammer-themeprovider-core-dark .bg-primary-default {background-color: var(--color-blue-300, #78bbfa)}
66
- .hammer-themeprovider-core-dark .bg-primary-subdued {background-color: #78bbfa33}
67
- .hammer-themeprovider-core-dark .bg-status-danger {background-color: var(--color-red-300, #ff745f)}
68
- .hammer-themeprovider-core-dark .bg-status-info {background-color: var(--color-blue-300, #78bbfa)}
69
- .hammer-themeprovider-core-dark .bg-status-success {background-color: var(--color-green-300, #49cc93)}
70
- .hammer-themeprovider-core-dark .bg-status-warning {background-color: var(--color-yellow-300, #ffe278)}
71
- .hammer-themeprovider-core-dark .bg-strong {background-color: var(--color-neutral-300, #2d2e31)}
72
- .hammer-themeprovider-core-dark .bg-stronger {background-color: var(--color-neutral-200, #444445)}
73
- .hammer-themeprovider-core-dark .bg-strongest {background-color: var(--color-neutral-90, #737475)}
74
- .hammer-themeprovider-core-dark .bg-warning-default {background-color: #ffe278}
75
- .hammer-themeprovider-core-dark .border-color-status-info {border-color: var(--color-blue-300, #78bbfa)}
76
- .hammer-themeprovider-core-dark .border-color-status-success {border-color: var(--color-green-300, #49cc93)}
77
- .hammer-themeprovider-core-dark .border-color-status-warning {border-color: var(--color-yellow-300, #ffe278)}
78
- .hammer-themeprovider-core-dark .c-danger {color: #ff745f}
79
- .hammer-themeprovider-core-dark .c-default {color: var(--color-neutral-0, #ffffff)}
80
- .hammer-themeprovider-core-dark .c-inverted {color: var(--color-neutral-400, #141414)}
81
- .hammer-themeprovider-core-dark .c-on-danger {color: var(--color-neutral-400, #141414)}
82
- .hammer-themeprovider-core-dark .c-on-primary {color: var(--color-neutral-400, #141414)}
83
- .hammer-themeprovider-core-dark .c-on-warning {color: var(--color-neutral-400, #141414)}
84
- .hammer-themeprovider-core-dark .c-primary {color: var(--color-blue-300, #78bbfa)}
85
- .hammer-themeprovider-core-dark .c-status-danger {color: var(--color-red-300, #ff745f)}
86
- .hammer-themeprovider-core-dark .c-status-info {color: var(--color-blue-300, #78bbfa)}
87
- .hammer-themeprovider-core-dark .c-status-success {color: var(--color-green-300, #49cc93)}
88
- .hammer-themeprovider-core-dark .c-status-warning {color: var(--color-yellow-300, #ffe278)}
89
- .hammer-themeprovider-core-dark .c-subdued {color: var(--color-neutral-70, #bcbcbd)}
1
+ .bg-danger-default {background-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
2
+ .bg-default {background-color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
3
+ .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
4
+ .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
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)}
7
+ .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
8
+ .bg-overlay-active-on-danger {background-color: light-dark(#14141429, #14141429)}
9
+ .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
10
+ .bg-overlay-active-on-primary {background-color: light-dark(#14141429, #14141429)}
11
+ .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
12
+ .bg-overlay-hover-danger {background-color: light-dark(#e132121A, #ff745f1A)}
13
+ .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
14
+ .bg-overlay-hover-on-danger {background-color: light-dark(#ffffff29, #ffffff29)}
15
+ .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
16
+ .bg-overlay-hover-on-primary {background-color: light-dark(#ffffff29, #ffffff29)}
17
+ .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
18
+ .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
19
+ .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
20
+ .bg-status-danger {background-color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
21
+ .bg-status-info {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
22
+ .bg-status-success {background-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
23
+ .bg-status-warning {background-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
24
+ .bg-strong {background-color: light-dark(var(--color-neutral-30, #f7f7f7), var(--color-neutral-300, #2d2e31))}
25
+ .bg-stronger {background-color: light-dark(var(--color-neutral-50, #eeeeee), var(--color-neutral-200, #444445))}
26
+ .bg-strongest {background-color: light-dark(var(--color-neutral-70, #bcbcbd), var(--color-neutral-90, #737475))}
27
+ .bg-warning-default {background-color: light-dark(var(--status-color-warning, #ffbe00), #ffe278)}
28
+ .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
29
+ .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
30
+ .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
31
+ .border-color-status-info {border-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
32
+ .border-color-status-success {border-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
33
+ .border-color-status-warning {border-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
34
+ .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
35
+ .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
36
+ .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
37
+ .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
38
+ .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
39
+ .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
40
+ .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
41
+ .c-on-warning {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-400, #141414))}
42
+ .c-primary {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
43
+ .c-status-danger {color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
44
+ .c-status-info {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
45
+ .c-status-success {color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
46
+ .c-status-warning {color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
47
+ .c-subdued {color: light-dark(var(--color-neutral-90, #737475), var(--color-neutral-70, #bcbcbd))}
package/build/web/core/css-utils/utils.css CHANGED
@@ -1,38 +1,38 @@
1
- .bg-danger-default {background-color: var(--status-color-danger, #e13212)}
2
- .bg-default {background-color: var(--color-neutral-0, #ffffff)}
3
- .bg-disabled {background-color: var(--color-neutral-100, #606162)}
4
- .bg-inverted-default {background-color: var(--color-neutral-300, #2d2e31)}
5
- .bg-inverted-strong {background-color: var(--color-neutral-400, #141414)}
6
- .bg-overlay-active-danger {background-color: #e132124D}
7
- .bg-overlay-active-default {background-color: #14141429}
8
- .bg-overlay-active-on-danger {background-color: #14141429}
9
- .bg-overlay-active-on-default {background-color: #14141429}
10
- .bg-overlay-active-on-primary {background-color: #14141429}
11
- .bg-overlay-active-primary {background-color: #0265dc4D}
12
- .bg-overlay-hover-danger {background-color: #e132121A}
13
- .bg-overlay-hover-default {background-color: #14141414}
14
- .bg-overlay-hover-on-danger {background-color: #ffffff29}
15
- .bg-overlay-hover-on-default {background-color: #14141414}
16
- .bg-overlay-hover-on-primary {background-color: #ffffff29}
17
- .bg-overlay-hover-primary {background-color: #0265dc1A}
18
- .bg-primary-default {background-color: var(--color-blue-500, #0265dc)}
19
- .bg-primary-subdued {background-color: var(--color-blue-100, #e0f2ff)}
20
- .bg-status-danger {background-color: var(--color-red-500, #e13212)}
21
- .bg-status-info {background-color: var(--color-blue-500, #0265dc)}
22
- .bg-status-success {background-color: var(--color-green-500, #007a4d)}
23
- .bg-status-warning {background-color: var(--color-yellow-500, #ffbe00)}
24
- .bg-strong {background-color: var(--color-neutral-30, #f7f7f7)}
25
- .bg-stronger {background-color: var(--color-neutral-50, #eeeeee)}
26
- .bg-strongest {background-color: var(--color-neutral-70, #bcbcbd)}
27
- .bg-warning-default {background-color: var(--status-color-warning, #ffbe00)}
28
- .border-color-danger {border-color: var(--status-color-danger, #e13212)}
29
- .border-color-default {border-color: var(--color-neutral-80, #949596)}
30
- .border-color-primary {border-color: var(--status-color-info, #0265dc)}
31
- .border-color-status-info {border-color: var(--color-blue-500, #0265dc)}
32
- .border-color-status-success {border-color: var(--color-green-500, #007a4d)}
33
- .border-color-status-warning {border-color: var(--color-yellow-500, #ffbe00)}
34
- .border-color-strong {border-color: var(--color-neutral-200, #444445)}
35
- .border-color-subdued {border-color: var(--color-neutral-60, #dfe0e1)}
1
+ .bg-danger-default {background-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
2
+ .bg-default {background-color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
3
+ .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
4
+ .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
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)}
7
+ .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
8
+ .bg-overlay-active-on-danger {background-color: light-dark(#14141429, #14141429)}
9
+ .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
10
+ .bg-overlay-active-on-primary {background-color: light-dark(#14141429, #14141429)}
11
+ .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
12
+ .bg-overlay-hover-danger {background-color: light-dark(#e132121A, #ff745f1A)}
13
+ .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
14
+ .bg-overlay-hover-on-danger {background-color: light-dark(#ffffff29, #ffffff29)}
15
+ .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
16
+ .bg-overlay-hover-on-primary {background-color: light-dark(#ffffff29, #ffffff29)}
17
+ .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
18
+ .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
19
+ .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
20
+ .bg-status-danger {background-color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
21
+ .bg-status-info {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
22
+ .bg-status-success {background-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
23
+ .bg-status-warning {background-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
24
+ .bg-strong {background-color: light-dark(var(--color-neutral-30, #f7f7f7), var(--color-neutral-300, #2d2e31))}
25
+ .bg-stronger {background-color: light-dark(var(--color-neutral-50, #eeeeee), var(--color-neutral-200, #444445))}
26
+ .bg-strongest {background-color: light-dark(var(--color-neutral-70, #bcbcbd), var(--color-neutral-90, #737475))}
27
+ .bg-warning-default {background-color: light-dark(var(--status-color-warning, #ffbe00), #ffe278)}
28
+ .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
29
+ .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
30
+ .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
31
+ .border-color-status-info {border-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
32
+ .border-color-status-success {border-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
33
+ .border-color-status-warning {border-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
34
+ .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
35
+ .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
36
36
  .border-radius-circular {border-radius: 100%}
37
37
  .border-radius-none {border-radius: var(--size-0, 0rem)}
38
38
  .border-radius-pill {border-radius: 500px}
@@ -41,18 +41,18 @@
41
41
  .border-width-default {border-width: var(--size-quarter, 0.0625rem)}
42
42
  .border-width-none {border-width: var(--size-0, 0rem)}
43
43
  .border-width-strong {border-width: var(--size-half, 0.125rem)}
44
- .c-danger {color: var(--status-color-danger, #e13212)}
45
- .c-default {color: var(--color-neutral-400, #141414)}
46
- .c-inverted {color: var(--color-neutral-0, #ffffff)}
47
- .c-on-danger {color: var(--color-neutral-0, #ffffff)}
48
- .c-on-primary {color: var(--color-neutral-0, #ffffff)}
49
- .c-on-warning {color: var(--color-neutral-400, #141414)}
50
- .c-primary {color: var(--color-blue-500, #0265dc)}
51
- .c-status-danger {color: var(--color-red-500, #e13212)}
52
- .c-status-info {color: var(--color-blue-500, #0265dc)}
53
- .c-status-success {color: var(--color-green-500, #007a4d)}
54
- .c-status-warning {color: var(--color-yellow-500, #ffbe00)}
55
- .c-subdued {color: var(--color-neutral-90, #737475)}
44
+ .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
45
+ .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
46
+ .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
47
+ .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
48
+ .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
49
+ .c-on-warning {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-400, #141414))}
50
+ .c-primary {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
51
+ .c-status-danger {color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
52
+ .c-status-info {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
53
+ .c-status-success {color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
54
+ .c-status-warning {color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
55
+ .c-subdued {color: light-dark(var(--color-neutral-90, #737475), var(--color-neutral-70, #bcbcbd))}
56
56
  .ff-heading {font-family: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif)}
57
57
  .ff-label {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
58
58
  .ff-paragraph {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
@@ -74,48 +74,6 @@
74
74
  .fw-heading {font-weight: var(--font-weight-bold, 700)}
75
75
  .fw-label {font-weight: var(--font-weight-semibold, 600)}
76
76
  .fw-paragraph {font-weight: var(--font-weight-normal, 400)}
77
- .hammer-themeprovider-core-dark .bg-danger-default {background-color: #ff745f}
78
- .hammer-themeprovider-core-dark .bg-default {background-color: var(--color-neutral-400, #141414)}
79
- .hammer-themeprovider-core-dark .bg-disabled {background-color: var(--color-neutral-100, #606162)}
80
- .hammer-themeprovider-core-dark .bg-inverted-default {background-color: var(--color-neutral-20, #fafafa)}
81
- .hammer-themeprovider-core-dark .bg-inverted-strong {background-color: var(--color-neutral-0, #ffffff)}
82
- .hammer-themeprovider-core-dark .bg-overlay-active-danger {background-color: #ff745f40}
83
- .hammer-themeprovider-core-dark .bg-overlay-active-default {background-color: #ffffff29}
84
- .hammer-themeprovider-core-dark .bg-overlay-active-on-danger {background-color: #14141429}
85
- .hammer-themeprovider-core-dark .bg-overlay-active-on-default {background-color: #14141429}
86
- .hammer-themeprovider-core-dark .bg-overlay-active-on-primary {background-color: #14141429}
87
- .hammer-themeprovider-core-dark .bg-overlay-active-primary {background-color: #78bbfa40}
88
- .hammer-themeprovider-core-dark .bg-overlay-hover-danger {background-color: #ff745f1A}
89
- .hammer-themeprovider-core-dark .bg-overlay-hover-default {background-color: #ffffff14}
90
- .hammer-themeprovider-core-dark .bg-overlay-hover-on-danger {background-color: #ffffff29}
91
- .hammer-themeprovider-core-dark .bg-overlay-hover-on-default {background-color: #ffffff14}
92
- .hammer-themeprovider-core-dark .bg-overlay-hover-on-primary {background-color: #ffffff29}
93
- .hammer-themeprovider-core-dark .bg-overlay-hover-primary {background-color: #78bbfa1A}
94
- .hammer-themeprovider-core-dark .bg-primary-default {background-color: var(--color-blue-300, #78bbfa)}
95
- .hammer-themeprovider-core-dark .bg-primary-subdued {background-color: #78bbfa33}
96
- .hammer-themeprovider-core-dark .bg-status-danger {background-color: var(--color-red-300, #ff745f)}
97
- .hammer-themeprovider-core-dark .bg-status-info {background-color: var(--color-blue-300, #78bbfa)}
98
- .hammer-themeprovider-core-dark .bg-status-success {background-color: var(--color-green-300, #49cc93)}
99
- .hammer-themeprovider-core-dark .bg-status-warning {background-color: var(--color-yellow-300, #ffe278)}
100
- .hammer-themeprovider-core-dark .bg-strong {background-color: var(--color-neutral-300, #2d2e31)}
101
- .hammer-themeprovider-core-dark .bg-stronger {background-color: var(--color-neutral-200, #444445)}
102
- .hammer-themeprovider-core-dark .bg-strongest {background-color: var(--color-neutral-90, #737475)}
103
- .hammer-themeprovider-core-dark .bg-warning-default {background-color: #ffe278}
104
- .hammer-themeprovider-core-dark .border-color-status-info {border-color: var(--color-blue-300, #78bbfa)}
105
- .hammer-themeprovider-core-dark .border-color-status-success {border-color: var(--color-green-300, #49cc93)}
106
- .hammer-themeprovider-core-dark .border-color-status-warning {border-color: var(--color-yellow-300, #ffe278)}
107
- .hammer-themeprovider-core-dark .c-danger {color: #ff745f}
108
- .hammer-themeprovider-core-dark .c-default {color: var(--color-neutral-0, #ffffff)}
109
- .hammer-themeprovider-core-dark .c-inverted {color: var(--color-neutral-400, #141414)}
110
- .hammer-themeprovider-core-dark .c-on-danger {color: var(--color-neutral-400, #141414)}
111
- .hammer-themeprovider-core-dark .c-on-primary {color: var(--color-neutral-400, #141414)}
112
- .hammer-themeprovider-core-dark .c-on-warning {color: var(--color-neutral-400, #141414)}
113
- .hammer-themeprovider-core-dark .c-primary {color: var(--color-blue-300, #78bbfa)}
114
- .hammer-themeprovider-core-dark .c-status-danger {color: var(--color-red-300, #ff745f)}
115
- .hammer-themeprovider-core-dark .c-status-info {color: var(--color-blue-300, #78bbfa)}
116
- .hammer-themeprovider-core-dark .c-status-success {color: var(--color-green-300, #49cc93)}
117
- .hammer-themeprovider-core-dark .c-status-warning {color: var(--color-yellow-300, #ffe278)}
118
- .hammer-themeprovider-core-dark .c-subdued {color: var(--color-neutral-70, #bcbcbd)}
119
77
  .m-block-0 {margin-block: var(--size-0, 0rem)}
120
78
  .m-block-1 {margin-block: var(--size-1, 0.25rem)}
121
79
  .m-block-10 {margin-block: var(--size-10, 2.5rem)}
package/build/web/core/semantic-variables.scss ADDED
@@ -0,0 +1,150 @@
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-danger: #e13212,
9
+ background-color-warning: #ffbe00,
10
+ background-color-disabled: #606162,
11
+ background-color-inverted: #2d2e31,
12
+ background-color-inverted-strong: #141414,
13
+ border-radius-none: 0rem,
14
+ border-radius-rounded: 0.375rem,
15
+ border-radius-rounded-strong: 1rem,
16
+ border-radius-pill: 500px,
17
+ border-radius-circular: 100%,
18
+ border-width-none: 0rem,
19
+ border-width: 0.0625rem,
20
+ border-width-strong: 0.125rem,
21
+ border-color: #949596,
22
+ border-color-subdued: #dfe0e1,
23
+ border-color-strong: #444445,
24
+ border-color-primary: #0265dc,
25
+ border-color-danger: #e13212,
26
+ focus-ring-color: #0265dc,
27
+ focus-ring-color-danger: #e13212,
28
+ focus-ring-width: 0.25rem,
29
+ foreground-color: #141414,
30
+ foreground-color-subdued: #737475,
31
+ foreground-color-primary: #0265dc,
32
+ foreground-color-danger: #e13212,
33
+ foreground-color-inverted: #ffffff,
34
+ foreground-color-on-primary: #ffffff,
35
+ foreground-color-on-danger: #ffffff,
36
+ foreground-color-on-warning: #141414,
37
+ overlay-color-active: #14141429,
38
+ overlay-color-active-primary: #0265dc4D,
39
+ overlay-color-active-danger: #e132124D,
40
+ overlay-color-active-on: #14141429,
41
+ overlay-color-active-on-primary: #14141429,
42
+ overlay-color-active-on-danger: #14141429,
43
+ overlay-color-hover: #14141414,
44
+ overlay-color-hover-primary: #0265dc1A,
45
+ overlay-color-hover-danger: #e132121A,
46
+ overlay-color-hover-on: #14141414,
47
+ overlay-color-hover-on-primary: #ffffff29,
48
+ overlay-color-hover-on-danger: #ffffff29,
49
+ shadow-color: #14141414,
50
+ shadow-size-flat: 0rem 0rem 0rem,
51
+ shadow-size-float: 0rem 0.125rem 0.5rem,
52
+ shadow-size-overlay: 0rem 0.5rem 1.5rem,
53
+ status-color-info: #0265dc,
54
+ status-color-danger: #e13212,
55
+ status-color-success: #007a4d,
56
+ status-color-warning: #ffbe00,
57
+ typography-paragraph-size-xsmall: 0.75rem,
58
+ typography-paragraph-size-small: 0.875rem,
59
+ typography-paragraph-size: 1rem,
60
+ typography-paragraph-size-large: 1.25rem,
61
+ typography-paragraph-size-xlarge: 1.5rem,
62
+ typography-paragraph-font-weight: 400,
63
+ typography-heading-size-xsmall: 0.875rem,
64
+ typography-heading-size-small: 1rem,
65
+ typography-heading-size: 1.25rem,
66
+ typography-heading-size-large: 1.5rem,
67
+ typography-heading-size-xlarge: 2rem,
68
+ typography-heading-font-weight: 700,
69
+ typography-label-size-xsmall: 0.625rem,
70
+ typography-label-size-small: 0.75rem,
71
+ typography-label-size: 0.875rem,
72
+ typography-label-size-large: 1rem,
73
+ typography-label-size-xlarge: 1.25rem,
74
+ typography-label-font-weight: 600,
75
+ );
76
+ $dark: (
77
+ background-color: #141414,
78
+ background-color-strong: #2d2e31,
79
+ background-color-stronger: #444445,
80
+ background-color-strongest: #737475,
81
+ background-color-primary: #78bbfa,
82
+ background-color-primary-subdued: #78bbfa33,
83
+ background-color-danger: #ff745f,
84
+ background-color-warning: #ffe278,
85
+ background-color-disabled: #606162,
86
+ background-color-inverted: #fafafa,
87
+ background-color-inverted-strong: #ffffff,
88
+ border-radius-none: 0rem,
89
+ border-radius-rounded: 0.375rem,
90
+ border-radius-rounded-strong: 1rem,
91
+ border-radius-pill: 500px,
92
+ border-radius-circular: 100%,
93
+ border-width-none: 0rem,
94
+ border-width: 0.0625rem,
95
+ border-width-strong: 0.125rem,
96
+ border-color: #606162,
97
+ border-color-subdued: #444445,
98
+ border-color-strong: #dfe0e1,
99
+ border-color-primary: #78bbfa,
100
+ border-color-danger: #ff745f,
101
+ focus-ring-color: #78bbfa,
102
+ focus-ring-color-danger: #ff745f,
103
+ focus-ring-width: 0.25rem,
104
+ foreground-color: #ffffff,
105
+ foreground-color-subdued: #bcbcbd,
106
+ foreground-color-primary: #78bbfa,
107
+ foreground-color-danger: #ff745f,
108
+ foreground-color-inverted: #141414,
109
+ foreground-color-on-primary: #141414,
110
+ foreground-color-on-danger: #141414,
111
+ foreground-color-on-warning: #141414,
112
+ overlay-color-active: #ffffff29,
113
+ overlay-color-active-primary: #78bbfa40,
114
+ overlay-color-active-danger: #ff745f40,
115
+ overlay-color-active-on: #14141429,
116
+ overlay-color-active-on-primary: #14141429,
117
+ overlay-color-active-on-danger: #14141429,
118
+ overlay-color-hover: #ffffff14,
119
+ overlay-color-hover-primary: #78bbfa1A,
120
+ overlay-color-hover-danger: #ff745f1A,
121
+ overlay-color-hover-on: #ffffff14,
122
+ overlay-color-hover-on-primary: #ffffff29,
123
+ overlay-color-hover-on-danger: #ffffff29,
124
+ shadow-color: #ffffff14,
125
+ shadow-size-flat: 0rem 0rem 0rem,
126
+ shadow-size-float: 0rem 0.125rem 0.5rem,
127
+ shadow-size-overlay: 0rem 0.5rem 1.5rem,
128
+ status-color-info: #78bbfa,
129
+ status-color-danger: #ff745f,
130
+ status-color-success: #49cc93,
131
+ status-color-warning: #ffe278,
132
+ typography-paragraph-size-xsmall: 0.75rem,
133
+ typography-paragraph-size-small: 0.875rem,
134
+ typography-paragraph-size: 1rem,
135
+ typography-paragraph-size-large: 1.25rem,
136
+ typography-paragraph-size-xlarge: 1.5rem,
137
+ typography-paragraph-font-weight: 400,
138
+ typography-heading-size-xsmall: 0.875rem,
139
+ typography-heading-size-small: 1rem,
140
+ typography-heading-size: 1.25rem,
141
+ typography-heading-size-large: 1.5rem,
142
+ typography-heading-size-xlarge: 2rem,
143
+ typography-heading-font-weight: 700,
144
+ typography-label-size-xsmall: 0.625rem,
145
+ typography-label-size-small: 0.75rem,
146
+ typography-label-size: 0.875rem,
147
+ typography-label-size-large: 1rem,
148
+ typography-label-size-xlarge: 1.25rem,
149
+ typography-label-font-weight: 600,
150
+ );
package/config.js CHANGED
@@ -26,6 +26,33 @@ StyleDictionary.registerFormat({
26
26
  },
27
27
  });
28
28
 
29
+ StyleDictionary.registerFormat({
30
+ name: `custom/semantic-variables`,
31
+ formatter: function ({ dictionary }) {
32
+ const light = dictionary.allTokens
33
+ .filter((token) => !token.name.includes("font-family"))
34
+ .map((token) => {
35
+ let value = token.value;
36
+ let name = `${token.name.replace("-default", "")}`;
37
+ return ` ${name}: ${value},`;
38
+ })
39
+ .join(`\n`);
40
+ const dark = dictionary.allTokens
41
+ .filter((token) => !token.name.includes("font-family"))
42
+ .map((token) => {
43
+ let value = token.value;
44
+ let name = `${token.name.replace("-default", "")}`;
45
+ if (token.attributes.appearance) {
46
+ return ` ${name}: ${token.attributes.appearance.dark.value},`;
47
+ }
48
+ return ` ${name}: ${value},`;
49
+ })
50
+ .join(`\n`);
51
+
52
+ return [`$light: (`, light, `);`, `$dark: (`, dark, `);`].join(`\n`);
53
+ },
54
+ });
55
+
29
56
  StyleDictionary.registerFormat({
30
57
  name: `custom/es6`,
31
58
  formatter: function ({ dictionary }) {
@@ -100,6 +127,10 @@ StyleDictionary.registerFormat({
100
127
  let darkValue = getVarValue(dictionary, token, true);
101
128
  return generateColorClasses(name, value, darkValue);
102
129
  }
130
+ if (name.startsWith("border-color")) {
131
+ let darkValue = getVarValue(dictionary, token, true);
132
+ return generateBorderClasses(name, value, darkValue);
133
+ }
103
134
  if (name.startsWith("border")) {
104
135
  return generateBorderClasses(name, value);
105
136
  }
@@ -129,7 +160,7 @@ StyleDictionary.registerFormat({
129
160
  StyleDictionary.registerFormat({
130
161
  name: `custom/CSSUtils/Borders`,
131
162
  formatter: function ({ dictionary }) {
132
- return cssUtilsFormatter(dictionary, generateBorderClasses);
163
+ return cssUtilsFormatter(dictionary, generateBorderClasses, true);
133
164
  },
134
165
  });
135
166
 
@@ -235,6 +266,13 @@ themes.forEach((theme) => {
235
266
  return token.filePath.startsWith(`src/theme/${theme}`);
236
267
  },
237
268
  },
269
+ {
270
+ destination: "semantic-variables.scss",
271
+ format: "custom/semantic-variables",
272
+ filter: function (token) {
273
+ return token.filePath.startsWith(`src/theme/${theme}`);
274
+ },
275
+ },
238
276
  ],
239
277
  },
240
278
  tsLight: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/hammer-token",
3
- "version": "1.3.0",
3
+ "version": "1.3.2",
4
4
  "description": "",
5
5
  "main": "build/web/index.js",
6
6
  "types": "build/web/index.d.ts",
@@ -21,5 +21,5 @@
21
21
  "fs-extra": "^11.2.0",
22
22
  "style-dictionary": "^3"
23
23
  },
24
- "gitHead": "a2044ec10f73bad2c40a42826a05be9d99cf77b4"
24
+ "gitHead": "67ec1c21583e12f47579ca8d507cdd0bcf3e40fb"
25
25
  }
package/src/utils/copy-css-utils-cli.js CHANGED
@@ -9,38 +9,26 @@ function run() {
9
9
  .command("copy-css-utils")
10
10
  .description("Copy the CSS Utils files from hammer-token into your project")
11
11
  .argument("<string>", "directory to copy CSS utils files to")
12
- .option(
13
- "-p, --prefix <char>",
14
- "optionally override prefix from 'hammer-' to a custom one",
15
- )
16
- .action((dir, options) => {
12
+ .action((dir) => {
17
13
  console.log(`Copying CSS Utils files to: ${dir}`);
18
14
  const cssUtilsFilesPathString = path.resolve(
19
15
  __dirname,
20
16
  "../../build/web/core/css-utils",
21
17
  );
22
18
  fs.cpSync(cssUtilsFilesPathString, dir, { recursive: true });
23
- if (options.prefix) {
24
- console.log(`Replacing ".hammer-" with ".${options.prefix}-"`);
25
- const copiedFiles = fs.readdirSync(dir, { encoding: "utf-8" });
26
- copiedFiles.forEach((file) => {
27
- const fileWithDir = `${dir}/${file}`;
28
- fs.readFile(fileWithDir, "utf-8", (err, contents) => {
29
- if (err) {
30
- return console.error(err);
31
- }
19
+ const copiedFiles = fs.readdirSync(dir, { encoding: "utf-8" });
20
+ copiedFiles.forEach((file) => {
21
+ const fileWithDir = `${dir}/${file}`;
22
+ fs.readFile(fileWithDir, "utf-8", (err, contents) => {
23
+ if (err) {
24
+ return console.error(err);
25
+ }
32
26
 
33
- const contentsWithNewPrefix = contents.replace(
34
- /hammer/gi,
35
- options.prefix,
36
- );
37
-
38
- fs.writeFile(fileWithDir, contentsWithNewPrefix, "utf-8", (e) => {
39
- if (e) console.log(e);
40
- });
27
+ fs.writeFile(fileWithDir, contents, "utf-8", (e) => {
28
+ if (e) console.log(e);
41
29
  });
42
30
  });
43
- }
31
+ });
44
32
  });
45
33
 
46
34
  program.parse();
package/src/utils/css-utils-format-utils.js CHANGED
@@ -1,5 +1,3 @@
1
- const DARK_MODE_CLASS = ".hammer-themeprovider-core-dark";
2
-
3
1
  const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
4
2
  return dictionary.allTokens
5
3
  .map((token) => {
@@ -70,7 +68,7 @@ const getVarValue = (dictionary, token, isDarkValue) => {
70
68
  return value.replaceAll('"', "");
71
69
  };
72
70
 
73
- const generateBorderClasses = (name, value) => {
71
+ const generateBorderClasses = (name, value, darkValue) => {
74
72
  const classes = [];
75
73
 
76
74
  if (name.startsWith("border-radius")) {
@@ -78,7 +76,7 @@ const generateBorderClasses = (name, value) => {
78
76
  } else if (name.startsWith("border-width")) {
79
77
  classes.push(`.${name} {border-width: ${value}}`);
80
78
  } else if (name.startsWith("border-color")) {
81
- classes.push(`.${name} {border-color: ${value}}`);
79
+ classes.push(`.${name} {border-color: light-dark(${value}, ${darkValue})}`);
82
80
  }
83
81
 
84
82
  return classes;
@@ -89,18 +87,15 @@ const generateColorClasses = (name, value, darkValue) => {
89
87
 
90
88
  if (name.startsWith("background-color")) {
91
89
  classes.push(
92
- `.${name.replace("background-color", "bg")} {background-color: ${value}}`,
93
- `${DARK_MODE_CLASS} .${name.replace("background-color", "bg")} {background-color: ${darkValue}}`,
90
+ `.${name.replace("background-color", "bg")} {background-color: light-dark(${value}, ${darkValue})}`,
94
91
  );
95
92
  } else if (name.startsWith("foreground-color")) {
96
93
  classes.push(
97
- `.${name.replace("foreground-color", "c")} {color: ${value}}`,
98
- `${DARK_MODE_CLASS} .${name.replace("foreground-color", "c")} {color: ${darkValue}}`,
94
+ `.${name.replace("foreground-color", "c")} {color: light-dark(${value}, ${darkValue})}`,
99
95
  );
100
96
  } else if (name.startsWith("overlay-color")) {
101
97
  classes.push(
102
- `.${name.replace("overlay-color", "bg-overlay")} {background-color: ${value}}`,
103
- `${DARK_MODE_CLASS} .${name.replace("overlay-color", "bg-overlay")} {background-color: ${darkValue}}`,
98
+ `.${name.replace("overlay-color", "bg-overlay")} {background-color: light-dark(${value}, ${darkValue})}`,
104
99
  );
105
100
  // primitives
106
101
  // } else if (name.startsWith("color")) {
@@ -110,19 +105,16 @@ const generateColorClasses = (name, value, darkValue) => {
110
105
  // );
111
106
  } else if (name.startsWith("status-color")) {
112
107
  classes.push(
113
- `.${name.replace("status-color", "c-status")} {color: ${value}}`,
114
- `.${name.replace("status-color", "bg-status")} {background-color: ${value}}`,
115
- `${DARK_MODE_CLASS} .${name.replace("status-color", "c-status")} {color: ${darkValue}}`,
116
- `${DARK_MODE_CLASS} .${name.replace("status-color", "bg-status")} {background-color: ${darkValue}}`,
108
+ `.${name.replace("status-color", "c-status")} {color: light-dark(${value}, ${darkValue})}`,
109
+ `.${name.replace("status-color", "bg-status")} {background-color: light-dark(${value}, ${darkValue})}`,
117
110
  );
118
111
  if (!name.includes("danger")) {
119
112
  classes.push(
120
- `.${name.replace("status-color", "border-color-status")} {border-color: ${value}}`,
121
- `${DARK_MODE_CLASS} .${name.replace("status-color", "border-color-status")} {border-color: ${darkValue}}`,
113
+ `.${name.replace("status-color", "border-color-status")} {border-color: light-dark(${value}, ${darkValue})}`,
122
114
  );
123
115
  }
124
116
  } else if (name.startsWith("border-color")) {
125
- classes.push(`.${name} {border-color: ${value}}`);
117
+ classes.push(`.${name} {border-color: light-dark(${value}, ${darkValue})}`);
126
118
  }
127
119
 
128
120
  return classes;
package/type/types.ts CHANGED
@@ -2,7 +2,7 @@ export type TokenObj = {
2
2
  value: string;
3
3
  attributes?: {
4
4
  appearance?: {
5
- dark?: {
5
+ dark: {
6
6
  value: string;
7
7
  };
8
8
  };