@servicetitan/hammer-token 1.3.1 → 1.3.3
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.
- package/.turbo/turbo-build.log +3 -1
- package/.turbo/turbo-lint.log +1 -1
- package/CHANGELOG.md +24 -0
- package/build/web/core/css-utils/border.css +5 -5
- package/build/web/core/css-utils/color.css +47 -89
- package/build/web/core/css-utils/utils.css +47 -89
- package/build/web/core/primitive-variables.scss +115 -0
- package/build/web/core/semantic-variables.scss +150 -0
- package/config.js +62 -1
- package/package.json +2 -2
- package/src/utils/copy-css-utils-cli.js +11 -23
- package/src/utils/css-utils-format-utils.js +9 -17
- package/type/types.ts +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @servicetitan/hammer-token@1.3.
|
|
2
|
+
> @servicetitan/hammer-token@1.3.2 build /home/runner/work/hammer/hammer/packages/hammer-token
|
|
3
3
|
> node ./config.js
|
|
4
4
|
|
|
5
5
|
|
|
@@ -12,7 +12,9 @@ css
|
|
|
12
12
|
|
|
13
13
|
scss
|
|
14
14
|
✔︎ build/web/core/primitive.scss
|
|
15
|
+
✔︎ build/web/core/primitive-variables.scss
|
|
15
16
|
✔︎ build/web/core/semantic.scss
|
|
17
|
+
✔︎ build/web/core/semantic-variables.scss
|
|
16
18
|
|
|
17
19
|
tsLight
|
|
18
20
|
✔︎ build/web/core/primitive.js
|
package/.turbo/turbo-lint.log
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.3.3 (Tue Oct 29 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- NOTICK: Add missing primitive tokens and remove `color-scheme` setting in Theme Provider [#790](https://github.com/servicetitan/hammer/pull/790) ([@tounsoo](https://github.com/tounsoo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Ben Ho ([@tounsoo](https://github.com/tounsoo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.3.2 (Mon Oct 28 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- 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))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Ben Ho ([@tounsoo](https://github.com/tounsoo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.3.1 (Mon Oct 28 2024)
|
|
2
26
|
|
|
3
27
|
#### 📝 Documentation
|
|
@@ -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}
|
|
@@ -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))}
|
|
@@ -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)}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
$token: (
|
|
2
|
+
breakpoint-sm: 640px,
|
|
3
|
+
breakpoint-md: 768px,
|
|
4
|
+
breakpoint-lg: 1024px,
|
|
5
|
+
breakpoint-xl: 1280px,
|
|
6
|
+
breakpoint-xxl: 1536px,
|
|
7
|
+
color-blue-100: #e0f2ff,
|
|
8
|
+
color-blue-200: #b5deff,
|
|
9
|
+
color-blue-300: #78bbfa,
|
|
10
|
+
color-blue-400: #3892f3,
|
|
11
|
+
color-blue-500: #0265dc,
|
|
12
|
+
color-blue-600: #004491,
|
|
13
|
+
color-neutral-0: #ffffff,
|
|
14
|
+
color-neutral-10: #fcfcfc,
|
|
15
|
+
color-neutral-20: #fafafa,
|
|
16
|
+
color-neutral-30: #f7f7f7,
|
|
17
|
+
color-neutral-40: #f5f5f5,
|
|
18
|
+
color-neutral-50: #eeeeee,
|
|
19
|
+
color-neutral-60: #dfe0e1,
|
|
20
|
+
color-neutral-70: #bcbcbd,
|
|
21
|
+
color-neutral-80: #949596,
|
|
22
|
+
color-neutral-90: #737475,
|
|
23
|
+
color-neutral-100: #606162,
|
|
24
|
+
color-neutral-200: #444445,
|
|
25
|
+
color-neutral-300: #2d2e31,
|
|
26
|
+
color-neutral-400: #141414,
|
|
27
|
+
color-neutral-500: #040404,
|
|
28
|
+
color-blue-grey-100: #eaeff2,
|
|
29
|
+
color-blue-grey-200: #d0d8dd,
|
|
30
|
+
color-blue-grey-300: #b4c1c8,
|
|
31
|
+
color-blue-grey-400: #8c9ca5,
|
|
32
|
+
color-blue-grey-500: #6a7a85,
|
|
33
|
+
color-blue-grey-600: #576671,
|
|
34
|
+
color-orange-100: #ffeccc,
|
|
35
|
+
color-orange-200: #fdd291,
|
|
36
|
+
color-orange-300: #ffa037,
|
|
37
|
+
color-orange-400: #e46f00,
|
|
38
|
+
color-orange-500: #b14c00,
|
|
39
|
+
color-orange-600: #7a2f00,
|
|
40
|
+
color-yellow-100: #fff9e2,
|
|
41
|
+
color-yellow-200: #fff0b1,
|
|
42
|
+
color-yellow-300: #ffe278,
|
|
43
|
+
color-yellow-400: #ffc902,
|
|
44
|
+
color-yellow-500: #ffbe00,
|
|
45
|
+
color-yellow-600: #de9500,
|
|
46
|
+
color-green-100: #cef8e0,
|
|
47
|
+
color-green-200: #89ecbc,
|
|
48
|
+
color-green-300: #49cc93,
|
|
49
|
+
color-green-400: #15a46e,
|
|
50
|
+
color-green-500: #007a4d,
|
|
51
|
+
color-green-600: #005132,
|
|
52
|
+
color-cyan-100: #e3fcff,
|
|
53
|
+
color-cyan-200: #b1f3fa,
|
|
54
|
+
color-cyan-300: #13ceea,
|
|
55
|
+
color-cyan-400: #08bfdf,
|
|
56
|
+
color-cyan-500: #0ca5c0,
|
|
57
|
+
color-cyan-600: #038299,
|
|
58
|
+
color-purple-100: #f1edff,
|
|
59
|
+
color-purple-200: #c1b6f2,
|
|
60
|
+
color-purple-300: #8772e5,
|
|
61
|
+
color-purple-400: #6954c0,
|
|
62
|
+
color-purple-500: #4f3a9e,
|
|
63
|
+
color-purple-600: #422799,
|
|
64
|
+
color-red-100: #ffece9,
|
|
65
|
+
color-red-200: #ffb2a0,
|
|
66
|
+
color-red-300: #ff745f,
|
|
67
|
+
color-red-400: #f94d32,
|
|
68
|
+
color-red-500: #e13212,
|
|
69
|
+
color-red-600: #bf2a00,
|
|
70
|
+
color-magenta-100: #fbeaf5,
|
|
71
|
+
color-magenta-200: #faafe2,
|
|
72
|
+
color-magenta-300: #d949a9,
|
|
73
|
+
color-magenta-400: #b52d88,
|
|
74
|
+
color-magenta-500: #982071,
|
|
75
|
+
color-magenta-600: #7d165b,
|
|
76
|
+
duration: 200ms,
|
|
77
|
+
duration-instant: 0ms,
|
|
78
|
+
duration-fast: 100ms,
|
|
79
|
+
duration-slow: 300ms,
|
|
80
|
+
font-line-height-base: 1.5,
|
|
81
|
+
font-line-height-display: 1.25,
|
|
82
|
+
font-weight-normal: 400,
|
|
83
|
+
font-weight-semibold: 600,
|
|
84
|
+
font-weight-bold: 700,
|
|
85
|
+
font-size-100: 0.625rem,
|
|
86
|
+
font-size-200: 0.75rem,
|
|
87
|
+
font-size-300: 0.875rem,
|
|
88
|
+
font-size-400: 1rem,
|
|
89
|
+
font-size-500: 1.25rem,
|
|
90
|
+
font-size-600: 1.5rem,
|
|
91
|
+
font-size-700: 1.75rem,
|
|
92
|
+
font-size-800: 2rem,
|
|
93
|
+
font-size-900: 2.25rem,
|
|
94
|
+
size-0: 0rem,
|
|
95
|
+
size-1: 0.25rem,
|
|
96
|
+
size-2: 0.5rem,
|
|
97
|
+
size-3: 0.75rem,
|
|
98
|
+
size-4: 1rem,
|
|
99
|
+
size-5: 1.25rem,
|
|
100
|
+
size-6: 1.5rem,
|
|
101
|
+
size-7: 1.75rem,
|
|
102
|
+
size-8: 2rem,
|
|
103
|
+
size-9: 2.25rem,
|
|
104
|
+
size-10: 2.5rem,
|
|
105
|
+
size-11: 2.75rem,
|
|
106
|
+
size-12: 3rem,
|
|
107
|
+
size-13: 3.25rem,
|
|
108
|
+
size-14: 3.5rem,
|
|
109
|
+
size-quarter: 0.0625rem,
|
|
110
|
+
size-half: 0.125rem,
|
|
111
|
+
transition-ease: cubic-bezier(.4, 0, .2, 1),
|
|
112
|
+
transition-ease-in: cubic-bezier(.4, 0, 1, 1),
|
|
113
|
+
transition-ease-out: cubic-bezier(0, 0, .4, 1),
|
|
114
|
+
transition-ease-in-out: cubic-bezier(.4, 0, .6, 1),
|
|
115
|
+
);
|
|
@@ -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,49 @@ 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
|
+
|
|
56
|
+
StyleDictionary.registerFormat({
|
|
57
|
+
name: `custom/primitive-variables`,
|
|
58
|
+
formatter: function ({ dictionary }) {
|
|
59
|
+
const vars = dictionary.allTokens
|
|
60
|
+
.filter((token) => !token.name.includes("font-family"))
|
|
61
|
+
.map((token) => {
|
|
62
|
+
let value = token.value;
|
|
63
|
+
let name = `${token.name.replace("-default", "")}`;
|
|
64
|
+
return ` ${name}: ${value},`;
|
|
65
|
+
})
|
|
66
|
+
.join(`\n`);
|
|
67
|
+
|
|
68
|
+
return [`$token: (`, vars, `);`].join(`\n`);
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
|
|
29
72
|
StyleDictionary.registerFormat({
|
|
30
73
|
name: `custom/es6`,
|
|
31
74
|
formatter: function ({ dictionary }) {
|
|
@@ -100,6 +143,10 @@ StyleDictionary.registerFormat({
|
|
|
100
143
|
let darkValue = getVarValue(dictionary, token, true);
|
|
101
144
|
return generateColorClasses(name, value, darkValue);
|
|
102
145
|
}
|
|
146
|
+
if (name.startsWith("border-color")) {
|
|
147
|
+
let darkValue = getVarValue(dictionary, token, true);
|
|
148
|
+
return generateBorderClasses(name, value, darkValue);
|
|
149
|
+
}
|
|
103
150
|
if (name.startsWith("border")) {
|
|
104
151
|
return generateBorderClasses(name, value);
|
|
105
152
|
}
|
|
@@ -129,7 +176,7 @@ StyleDictionary.registerFormat({
|
|
|
129
176
|
StyleDictionary.registerFormat({
|
|
130
177
|
name: `custom/CSSUtils/Borders`,
|
|
131
178
|
formatter: function ({ dictionary }) {
|
|
132
|
-
return cssUtilsFormatter(dictionary, generateBorderClasses);
|
|
179
|
+
return cssUtilsFormatter(dictionary, generateBorderClasses, true);
|
|
133
180
|
},
|
|
134
181
|
});
|
|
135
182
|
|
|
@@ -228,6 +275,13 @@ themes.forEach((theme) => {
|
|
|
228
275
|
return token.filePath.startsWith("src/global/primitive");
|
|
229
276
|
},
|
|
230
277
|
},
|
|
278
|
+
{
|
|
279
|
+
destination: "primitive-variables.scss",
|
|
280
|
+
format: "custom/primitive-variables",
|
|
281
|
+
filter: function (token) {
|
|
282
|
+
return token.filePath.startsWith("src/global/primitive");
|
|
283
|
+
},
|
|
284
|
+
},
|
|
231
285
|
{
|
|
232
286
|
destination: "semantic.scss",
|
|
233
287
|
format: "custom/SCSSVariable",
|
|
@@ -235,6 +289,13 @@ themes.forEach((theme) => {
|
|
|
235
289
|
return token.filePath.startsWith(`src/theme/${theme}`);
|
|
236
290
|
},
|
|
237
291
|
},
|
|
292
|
+
{
|
|
293
|
+
destination: "semantic-variables.scss",
|
|
294
|
+
format: "custom/semantic-variables",
|
|
295
|
+
filter: function (token) {
|
|
296
|
+
return token.filePath.startsWith(`src/theme/${theme}`);
|
|
297
|
+
},
|
|
298
|
+
},
|
|
238
299
|
],
|
|
239
300
|
},
|
|
240
301
|
tsLight: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/hammer-token",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
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": "
|
|
24
|
+
"gitHead": "6de57636c71cb81ce85b7d33cf2c40def5b507fa"
|
|
25
25
|
}
|
|
@@ -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
|
-
.
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
34
|
-
|
|
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();
|
|
@@ -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;
|