@servicetitan/hammer-token 0.5.2 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/.turbo/turbo-build.log +8 -1
  2. package/.turbo/turbo-lint.log +1 -1
  3. package/CHANGELOG.md +12 -0
  4. package/build/web/core/css-utils/border.css +13 -0
  5. package/build/web/core/css-utils/color.css +89 -0
  6. package/build/web/core/css-utils/font.css +0 -0
  7. package/build/web/core/css-utils/spacing.css +204 -0
  8. package/build/web/core/css-utils/utils.css +322 -0
  9. package/config.js +124 -0
  10. package/package.json +2 -2
  11. package/src/utils/css-utils-format-utils.js +185 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,8 +1,15 @@
1
1
 
2
- > @servicetitan/hammer-token@0.5.1 build /home/runner/work/hammer/hammer/packages/hammer-token
2
+ > @servicetitan/hammer-token@0.5.2 build /home/runner/work/hammer/hammer/packages/hammer-token
3
3
  > node ./config.js
4
4
 
5
5
 
6
+ css
7
+ ✔︎ build/web/core/css-utils/utils.css
8
+ ✔︎ build/web/core/css-utils/border.css
9
+ ✔︎ build/web/core/css-utils/color.css
10
+ ✔︎ build/web/core/css-utils/font.css
11
+ ✔︎ build/web/core/css-utils/spacing.css
12
+
6
13
  scss
7
14
  ✔︎ build/web/core/primitive.scss
8
15
  ✔︎ build/web/core/semantic.scss
package/.turbo/turbo-lint.log CHANGED
@@ -1,4 +1,4 @@
1
1
 
2
- > @servicetitan/hammer-token@0.5.1 lint /home/runner/work/hammer/hammer/packages/hammer-token
2
+ > @servicetitan/hammer-token@0.5.2 lint /home/runner/work/hammer/hammer/packages/hammer-token
3
3
  > eslint
4
4
 
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.6.0 (Fri May 31 2024)
2
+
3
+ #### ✨ New Feature
4
+
5
+ - ANV-1392: CSS Utils in `hammer-token` [#479](https://github.com/servicetitan/hammer/pull/479) ([@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
6
+
7
+ #### Authors: 1
8
+
9
+ - Derek Watson ([@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
10
+
11
+ ---
12
+
1
13
  # v0.5.2 (Fri May 03 2024)
2
14
 
3
15
  #### 🏠 Internal
package/build/web/core/css-utils/border.css ADDED
@@ -0,0 +1,13 @@
1
+ .border-color-danger {border-color: var(--status-color-danger)}
2
+ .border-color-default {border-color: var(--color-neutral-80)}
3
+ .border-color-primary {border-color: var(--status-color-info)}
4
+ .border-color-strong {border-color: var(--color-neutral-200)}
5
+ .border-color-subdued {border-color: var(--color-neutral-60)}
6
+ .border-radius-circular {border-radius: 100%}
7
+ .border-radius-none {border-radius: var(--size-0)}
8
+ .border-radius-pill {border-radius: 500px}
9
+ .border-radius-rounded {border-radius: 0.375rem}
10
+ .border-radius-rounded-strong {border-radius: 1rem}
11
+ .border-width-default {border-width: var(--size-quarter)}
12
+ .border-width-none {border-width: var(--size-0)}
13
+ .border-width-strong {border-width: var(--size-half)}
package/build/web/core/css-utils/color.css ADDED
@@ -0,0 +1,89 @@
1
+ .anv-themeprovider-core-dark .bg-danger-default {background-color: #ff745f}
2
+ .anv-themeprovider-core-dark .bg-default {background-color: var(--color-neutral-400)}
3
+ .anv-themeprovider-core-dark .bg-disabled {background-color: var(--color-neutral-100)}
4
+ .anv-themeprovider-core-dark .bg-inverted-default {background-color: var(--color-neutral-20)}
5
+ .anv-themeprovider-core-dark .bg-inverted-strong {background-color: var(--color-neutral-0)}
6
+ .anv-themeprovider-core-dark .bg-overlay-active-danger {background-color: #ff745f40}
7
+ .anv-themeprovider-core-dark .bg-overlay-active-default {background-color: #ffffff29}
8
+ .anv-themeprovider-core-dark .bg-overlay-active-on-danger {background-color: #14141429}
9
+ .anv-themeprovider-core-dark .bg-overlay-active-on-default {background-color: #14141429}
10
+ .anv-themeprovider-core-dark .bg-overlay-active-on-primary {background-color: #14141429}
11
+ .anv-themeprovider-core-dark .bg-overlay-active-primary {background-color: #78bbfa40}
12
+ .anv-themeprovider-core-dark .bg-overlay-hover-danger {background-color: #ff745f1A}
13
+ .anv-themeprovider-core-dark .bg-overlay-hover-default {background-color: #ffffff14}
14
+ .anv-themeprovider-core-dark .bg-overlay-hover-on-danger {background-color: #ffffff29}
15
+ .anv-themeprovider-core-dark .bg-overlay-hover-on-default {background-color: #ffffff14}
16
+ .anv-themeprovider-core-dark .bg-overlay-hover-on-primary {background-color: #ffffff29}
17
+ .anv-themeprovider-core-dark .bg-overlay-hover-primary {background-color: #78bbfa1A}
18
+ .anv-themeprovider-core-dark .bg-primary-default {background-color: var(--color-blue-300)}
19
+ .anv-themeprovider-core-dark .bg-primary-subdued {background-color: #78bbfa33}
20
+ .anv-themeprovider-core-dark .bg-status-danger {background-color: var(--color-red-300)}
21
+ .anv-themeprovider-core-dark .bg-status-info {background-color: var(--color-blue-300)}
22
+ .anv-themeprovider-core-dark .bg-status-success {background-color: var(--color-green-300)}
23
+ .anv-themeprovider-core-dark .bg-status-warning {background-color: var(--color-yellow-300)}
24
+ .anv-themeprovider-core-dark .bg-strong {background-color: var(--color-neutral-300)}
25
+ .anv-themeprovider-core-dark .bg-stronger {background-color: var(--color-neutral-200)}
26
+ .anv-themeprovider-core-dark .bg-strongest {background-color: var(--color-neutral-90)}
27
+ .anv-themeprovider-core-dark .bg-warning-default {background-color: #ffe278}
28
+ .anv-themeprovider-core-dark .border-color-status-info {border-color: var(--color-blue-300)}
29
+ .anv-themeprovider-core-dark .border-color-status-success {border-color: var(--color-green-300)}
30
+ .anv-themeprovider-core-dark .border-color-status-warning {border-color: var(--color-yellow-300)}
31
+ .anv-themeprovider-core-dark .c-danger {color: #ff745f}
32
+ .anv-themeprovider-core-dark .c-default {color: var(--color-neutral-0)}
33
+ .anv-themeprovider-core-dark .c-inverted {color: var(--color-neutral-400)}
34
+ .anv-themeprovider-core-dark .c-on-danger {color: var(--color-neutral-400)}
35
+ .anv-themeprovider-core-dark .c-on-primary {color: var(--color-neutral-400)}
36
+ .anv-themeprovider-core-dark .c-on-warning {color: var(--color-neutral-400)}
37
+ .anv-themeprovider-core-dark .c-primary {color: var(--color-blue-300)}
38
+ .anv-themeprovider-core-dark .c-status-danger {color: var(--color-red-300)}
39
+ .anv-themeprovider-core-dark .c-status-info {color: var(--color-blue-300)}
40
+ .anv-themeprovider-core-dark .c-status-success {color: var(--color-green-300)}
41
+ .anv-themeprovider-core-dark .c-status-warning {color: var(--color-yellow-300)}
42
+ .anv-themeprovider-core-dark .c-subdued {color: var(--color-neutral-70)}
43
+ .bg-danger-default {background-color: var(--status-color-danger)}
44
+ .bg-default {background-color: var(--color-neutral-0)}
45
+ .bg-disabled {background-color: var(--color-neutral-100)}
46
+ .bg-inverted-default {background-color: var(--color-neutral-300)}
47
+ .bg-inverted-strong {background-color: var(--color-neutral-400)}
48
+ .bg-overlay-active-danger {background-color: #e132124D}
49
+ .bg-overlay-active-default {background-color: #14141429}
50
+ .bg-overlay-active-on-danger {background-color: #14141429}
51
+ .bg-overlay-active-on-default {background-color: #14141429}
52
+ .bg-overlay-active-on-primary {background-color: #14141429}
53
+ .bg-overlay-active-primary {background-color: #0265dc4D}
54
+ .bg-overlay-hover-danger {background-color: #e132121A}
55
+ .bg-overlay-hover-default {background-color: #14141414}
56
+ .bg-overlay-hover-on-danger {background-color: #ffffff29}
57
+ .bg-overlay-hover-on-default {background-color: #14141414}
58
+ .bg-overlay-hover-on-primary {background-color: #ffffff29}
59
+ .bg-overlay-hover-primary {background-color: #0265dc1A}
60
+ .bg-primary-default {background-color: var(--color-blue-500)}
61
+ .bg-primary-subdued {background-color: var(--color-blue-100)}
62
+ .bg-status-danger {background-color: var(--color-red-500)}
63
+ .bg-status-info {background-color: var(--color-blue-500)}
64
+ .bg-status-success {background-color: var(--color-green-500)}
65
+ .bg-status-warning {background-color: var(--color-yellow-500)}
66
+ .bg-strong {background-color: var(--color-neutral-30)}
67
+ .bg-stronger {background-color: var(--color-neutral-50)}
68
+ .bg-strongest {background-color: var(--color-neutral-70)}
69
+ .bg-warning-default {background-color: var(--status-color-warning)}
70
+ .border-color-danger {border-color: var(--status-color-danger)}
71
+ .border-color-default {border-color: var(--color-neutral-80)}
72
+ .border-color-primary {border-color: var(--status-color-info)}
73
+ .border-color-status-info {border-color: var(--color-blue-500)}
74
+ .border-color-status-success {border-color: var(--color-green-500)}
75
+ .border-color-status-warning {border-color: var(--color-yellow-500)}
76
+ .border-color-strong {border-color: var(--color-neutral-200)}
77
+ .border-color-subdued {border-color: var(--color-neutral-60)}
78
+ .c-danger {color: var(--status-color-danger)}
79
+ .c-default {color: var(--color-neutral-400)}
80
+ .c-inverted {color: var(--color-neutral-0)}
81
+ .c-on-danger {color: var(--color-neutral-0)}
82
+ .c-on-primary {color: var(--color-neutral-0)}
83
+ .c-on-warning {color: var(--color-neutral-400)}
84
+ .c-primary {color: var(--color-blue-500)}
85
+ .c-status-danger {color: var(--color-red-500)}
86
+ .c-status-info {color: var(--color-blue-500)}
87
+ .c-status-success {color: var(--color-green-500)}
88
+ .c-status-warning {color: var(--color-yellow-500)}
89
+ .c-subdued {color: var(--color-neutral-90)}
package/build/web/core/css-utils/font.css ADDED
File without changes
package/build/web/core/css-utils/spacing.css ADDED
@@ -0,0 +1,204 @@
1
+ .m-block-0 {margin-block: var(--size-0)}
2
+ .m-block-1 {margin-block: var(--size-1)}
3
+ .m-block-10 {margin-block: var(--size-10)}
4
+ .m-block-11 {margin-block: var(--size-11)}
5
+ .m-block-12 {margin-block: var(--size-12)}
6
+ .m-block-13 {margin-block: var(--size-13)}
7
+ .m-block-14 {margin-block: var(--size-14)}
8
+ .m-block-2 {margin-block: var(--size-2)}
9
+ .m-block-3 {margin-block: var(--size-3)}
10
+ .m-block-4 {margin-block: var(--size-4)}
11
+ .m-block-5 {margin-block: var(--size-5)}
12
+ .m-block-6 {margin-block: var(--size-6)}
13
+ .m-block-7 {margin-block: var(--size-7)}
14
+ .m-block-8 {margin-block: var(--size-8)}
15
+ .m-block-9 {margin-block: var(--size-9)}
16
+ .m-block-end-0 {margin-block-end: var(--size-0)}
17
+ .m-block-end-1 {margin-block-end: var(--size-1)}
18
+ .m-block-end-10 {margin-block-end: var(--size-10)}
19
+ .m-block-end-11 {margin-block-end: var(--size-11)}
20
+ .m-block-end-12 {margin-block-end: var(--size-12)}
21
+ .m-block-end-13 {margin-block-end: var(--size-13)}
22
+ .m-block-end-14 {margin-block-end: var(--size-14)}
23
+ .m-block-end-2 {margin-block-end: var(--size-2)}
24
+ .m-block-end-3 {margin-block-end: var(--size-3)}
25
+ .m-block-end-4 {margin-block-end: var(--size-4)}
26
+ .m-block-end-5 {margin-block-end: var(--size-5)}
27
+ .m-block-end-6 {margin-block-end: var(--size-6)}
28
+ .m-block-end-7 {margin-block-end: var(--size-7)}
29
+ .m-block-end-8 {margin-block-end: var(--size-8)}
30
+ .m-block-end-9 {margin-block-end: var(--size-9)}
31
+ .m-block-end-half {margin-block-end: var(--size-half)}
32
+ .m-block-end-quarter {margin-block-end: var(--size-quarter)}
33
+ .m-block-half {margin-block: var(--size-half)}
34
+ .m-block-quarter {margin-block: var(--size-quarter)}
35
+ .m-block-start-0 {margin-block-start: var(--size-0)}
36
+ .m-block-start-1 {margin-block-start: var(--size-1)}
37
+ .m-block-start-10 {margin-block-start: var(--size-10)}
38
+ .m-block-start-11 {margin-block-start: var(--size-11)}
39
+ .m-block-start-12 {margin-block-start: var(--size-12)}
40
+ .m-block-start-13 {margin-block-start: var(--size-13)}
41
+ .m-block-start-14 {margin-block-start: var(--size-14)}
42
+ .m-block-start-2 {margin-block-start: var(--size-2)}
43
+ .m-block-start-3 {margin-block-start: var(--size-3)}
44
+ .m-block-start-4 {margin-block-start: var(--size-4)}
45
+ .m-block-start-5 {margin-block-start: var(--size-5)}
46
+ .m-block-start-6 {margin-block-start: var(--size-6)}
47
+ .m-block-start-7 {margin-block-start: var(--size-7)}
48
+ .m-block-start-8 {margin-block-start: var(--size-8)}
49
+ .m-block-start-9 {margin-block-start: var(--size-9)}
50
+ .m-block-start-half {margin-block-start: var(--size-half)}
51
+ .m-block-start-quarter {margin-block-start: var(--size-quarter)}
52
+ .m-inline-0 {margin-inline: var(--size-0)}
53
+ .m-inline-1 {margin-inline: var(--size-1)}
54
+ .m-inline-10 {margin-inline: var(--size-10)}
55
+ .m-inline-11 {margin-inline: var(--size-11)}
56
+ .m-inline-12 {margin-inline: var(--size-12)}
57
+ .m-inline-13 {margin-inline: var(--size-13)}
58
+ .m-inline-14 {margin-inline: var(--size-14)}
59
+ .m-inline-2 {margin-inline: var(--size-2)}
60
+ .m-inline-3 {margin-inline: var(--size-3)}
61
+ .m-inline-4 {margin-inline: var(--size-4)}
62
+ .m-inline-5 {margin-inline: var(--size-5)}
63
+ .m-inline-6 {margin-inline: var(--size-6)}
64
+ .m-inline-7 {margin-inline: var(--size-7)}
65
+ .m-inline-8 {margin-inline: var(--size-8)}
66
+ .m-inline-9 {margin-inline: var(--size-9)}
67
+ .m-inline-end-0 {margin-inline-end: var(--size-0)}
68
+ .m-inline-end-1 {margin-inline-end: var(--size-1)}
69
+ .m-inline-end-10 {margin-inline-end: var(--size-10)}
70
+ .m-inline-end-11 {margin-inline-end: var(--size-11)}
71
+ .m-inline-end-12 {margin-inline-end: var(--size-12)}
72
+ .m-inline-end-13 {margin-inline-end: var(--size-13)}
73
+ .m-inline-end-14 {margin-inline-end: var(--size-14)}
74
+ .m-inline-end-2 {margin-inline-end: var(--size-2)}
75
+ .m-inline-end-3 {margin-inline-end: var(--size-3)}
76
+ .m-inline-end-4 {margin-inline-end: var(--size-4)}
77
+ .m-inline-end-5 {margin-inline-end: var(--size-5)}
78
+ .m-inline-end-6 {margin-inline-end: var(--size-6)}
79
+ .m-inline-end-7 {margin-inline-end: var(--size-7)}
80
+ .m-inline-end-8 {margin-inline-end: var(--size-8)}
81
+ .m-inline-end-9 {margin-inline-end: var(--size-9)}
82
+ .m-inline-end-half {margin-inline-end: var(--size-half)}
83
+ .m-inline-end-quarter {margin-inline-end: var(--size-quarter)}
84
+ .m-inline-half {margin-inline: var(--size-half)}
85
+ .m-inline-quarter {margin-inline: var(--size-quarter)}
86
+ .m-inline-start-0 {margin-inline-start: var(--size-0)}
87
+ .m-inline-start-1 {margin-inline-start: var(--size-1)}
88
+ .m-inline-start-10 {margin-inline-start: var(--size-10)}
89
+ .m-inline-start-11 {margin-inline-start: var(--size-11)}
90
+ .m-inline-start-12 {margin-inline-start: var(--size-12)}
91
+ .m-inline-start-13 {margin-inline-start: var(--size-13)}
92
+ .m-inline-start-14 {margin-inline-start: var(--size-14)}
93
+ .m-inline-start-2 {margin-inline-start: var(--size-2)}
94
+ .m-inline-start-3 {margin-inline-start: var(--size-3)}
95
+ .m-inline-start-4 {margin-inline-start: var(--size-4)}
96
+ .m-inline-start-5 {margin-inline-start: var(--size-5)}
97
+ .m-inline-start-6 {margin-inline-start: var(--size-6)}
98
+ .m-inline-start-7 {margin-inline-start: var(--size-7)}
99
+ .m-inline-start-8 {margin-inline-start: var(--size-8)}
100
+ .m-inline-start-9 {margin-inline-start: var(--size-9)}
101
+ .m-inline-start-half {margin-inline-start: var(--size-half)}
102
+ .m-inline-start-quarter {margin-inline-start: var(--size-quarter)}
103
+ .p-block-0 {padding-block: var(--size-0)}
104
+ .p-block-1 {padding-block: var(--size-1)}
105
+ .p-block-10 {padding-block: var(--size-10)}
106
+ .p-block-11 {padding-block: var(--size-11)}
107
+ .p-block-12 {padding-block: var(--size-12)}
108
+ .p-block-13 {padding-block: var(--size-13)}
109
+ .p-block-14 {padding-block: var(--size-14)}
110
+ .p-block-2 {padding-block: var(--size-2)}
111
+ .p-block-3 {padding-block: var(--size-3)}
112
+ .p-block-4 {padding-block: var(--size-4)}
113
+ .p-block-5 {padding-block: var(--size-5)}
114
+ .p-block-6 {padding-block: var(--size-6)}
115
+ .p-block-7 {padding-block: var(--size-7)}
116
+ .p-block-8 {padding-block: var(--size-8)}
117
+ .p-block-9 {padding-block: var(--size-9)}
118
+ .p-block-end-0 {padding-block-end: var(--size-0)}
119
+ .p-block-end-1 {padding-block-end: var(--size-1)}
120
+ .p-block-end-10 {padding-block-end: var(--size-10)}
121
+ .p-block-end-11 {padding-block-end: var(--size-11)}
122
+ .p-block-end-12 {padding-block-end: var(--size-12)}
123
+ .p-block-end-13 {padding-block-end: var(--size-13)}
124
+ .p-block-end-14 {padding-block-end: var(--size-14)}
125
+ .p-block-end-2 {padding-block-end: var(--size-2)}
126
+ .p-block-end-3 {padding-block-end: var(--size-3)}
127
+ .p-block-end-4 {padding-block-end: var(--size-4)}
128
+ .p-block-end-5 {padding-block-end: var(--size-5)}
129
+ .p-block-end-6 {padding-block-end: var(--size-6)}
130
+ .p-block-end-7 {padding-block-end: var(--size-7)}
131
+ .p-block-end-8 {padding-block-end: var(--size-8)}
132
+ .p-block-end-9 {padding-block-end: var(--size-9)}
133
+ .p-block-end-half {padding-block-end: var(--size-half)}
134
+ .p-block-end-quarter {padding-block-end: var(--size-quarter)}
135
+ .p-block-half {padding-block: var(--size-half)}
136
+ .p-block-quarter {padding-block: var(--size-quarter)}
137
+ .p-block-start-0 {padding-block-start: var(--size-0)}
138
+ .p-block-start-1 {padding-block-start: var(--size-1)}
139
+ .p-block-start-10 {padding-block-start: var(--size-10)}
140
+ .p-block-start-11 {padding-block-start: var(--size-11)}
141
+ .p-block-start-12 {padding-block-start: var(--size-12)}
142
+ .p-block-start-13 {padding-block-start: var(--size-13)}
143
+ .p-block-start-14 {padding-block-start: var(--size-14)}
144
+ .p-block-start-2 {padding-block-start: var(--size-2)}
145
+ .p-block-start-3 {padding-block-start: var(--size-3)}
146
+ .p-block-start-4 {padding-block-start: var(--size-4)}
147
+ .p-block-start-5 {padding-block-start: var(--size-5)}
148
+ .p-block-start-6 {padding-block-start: var(--size-6)}
149
+ .p-block-start-7 {padding-block-start: var(--size-7)}
150
+ .p-block-start-8 {padding-block-start: var(--size-8)}
151
+ .p-block-start-9 {padding-block-start: var(--size-9)}
152
+ .p-block-start-half {padding-block-start: var(--size-half)}
153
+ .p-block-start-quarter {padding-block-start: var(--size-quarter)}
154
+ .p-inline-0 {padding-inline: var(--size-0)}
155
+ .p-inline-1 {padding-inline: var(--size-1)}
156
+ .p-inline-10 {padding-inline: var(--size-10)}
157
+ .p-inline-11 {padding-inline: var(--size-11)}
158
+ .p-inline-12 {padding-inline: var(--size-12)}
159
+ .p-inline-13 {padding-inline: var(--size-13)}
160
+ .p-inline-14 {padding-inline: var(--size-14)}
161
+ .p-inline-2 {padding-inline: var(--size-2)}
162
+ .p-inline-3 {padding-inline: var(--size-3)}
163
+ .p-inline-4 {padding-inline: var(--size-4)}
164
+ .p-inline-5 {padding-inline: var(--size-5)}
165
+ .p-inline-6 {padding-inline: var(--size-6)}
166
+ .p-inline-7 {padding-inline: var(--size-7)}
167
+ .p-inline-8 {padding-inline: var(--size-8)}
168
+ .p-inline-9 {padding-inline: var(--size-9)}
169
+ .p-inline-end-0 {padding-inline-end: var(--size-0)}
170
+ .p-inline-end-1 {padding-inline-end: var(--size-1)}
171
+ .p-inline-end-10 {padding-inline-end: var(--size-10)}
172
+ .p-inline-end-11 {padding-inline-end: var(--size-11)}
173
+ .p-inline-end-12 {padding-inline-end: var(--size-12)}
174
+ .p-inline-end-13 {padding-inline-end: var(--size-13)}
175
+ .p-inline-end-14 {padding-inline-end: var(--size-14)}
176
+ .p-inline-end-2 {padding-inline-end: var(--size-2)}
177
+ .p-inline-end-3 {padding-inline-end: var(--size-3)}
178
+ .p-inline-end-4 {padding-inline-end: var(--size-4)}
179
+ .p-inline-end-5 {padding-inline-end: var(--size-5)}
180
+ .p-inline-end-6 {padding-inline-end: var(--size-6)}
181
+ .p-inline-end-7 {padding-inline-end: var(--size-7)}
182
+ .p-inline-end-8 {padding-inline-end: var(--size-8)}
183
+ .p-inline-end-9 {padding-inline-end: var(--size-9)}
184
+ .p-inline-end-half {padding-inline-end: var(--size-half)}
185
+ .p-inline-end-quarter {padding-inline-end: var(--size-quarter)}
186
+ .p-inline-half {padding-inline: var(--size-half)}
187
+ .p-inline-quarter {padding-inline: var(--size-quarter)}
188
+ .p-inline-start-0 {padding-inline-start: var(--size-0)}
189
+ .p-inline-start-1 {padding-inline-start: var(--size-1)}
190
+ .p-inline-start-10 {padding-inline-start: var(--size-10)}
191
+ .p-inline-start-11 {padding-inline-start: var(--size-11)}
192
+ .p-inline-start-12 {padding-inline-start: var(--size-12)}
193
+ .p-inline-start-13 {padding-inline-start: var(--size-13)}
194
+ .p-inline-start-14 {padding-inline-start: var(--size-14)}
195
+ .p-inline-start-2 {padding-inline-start: var(--size-2)}
196
+ .p-inline-start-3 {padding-inline-start: var(--size-3)}
197
+ .p-inline-start-4 {padding-inline-start: var(--size-4)}
198
+ .p-inline-start-5 {padding-inline-start: var(--size-5)}
199
+ .p-inline-start-6 {padding-inline-start: var(--size-6)}
200
+ .p-inline-start-7 {padding-inline-start: var(--size-7)}
201
+ .p-inline-start-8 {padding-inline-start: var(--size-8)}
202
+ .p-inline-start-9 {padding-inline-start: var(--size-9)}
203
+ .p-inline-start-half {padding-inline-start: var(--size-half)}
204
+ .p-inline-start-quarter {padding-inline-start: var(--size-quarter)}
package/build/web/core/css-utils/utils.css ADDED
@@ -0,0 +1,322 @@
1
+ .anv-themeprovider-core-dark .bg-danger-default {background-color: #ff745f}
2
+ .anv-themeprovider-core-dark .bg-default {background-color: var(--color-neutral-400)}
3
+ .anv-themeprovider-core-dark .bg-disabled {background-color: var(--color-neutral-100)}
4
+ .anv-themeprovider-core-dark .bg-inverted-default {background-color: var(--color-neutral-20)}
5
+ .anv-themeprovider-core-dark .bg-inverted-strong {background-color: var(--color-neutral-0)}
6
+ .anv-themeprovider-core-dark .bg-overlay-active-danger {background-color: #ff745f40}
7
+ .anv-themeprovider-core-dark .bg-overlay-active-default {background-color: #ffffff29}
8
+ .anv-themeprovider-core-dark .bg-overlay-active-on-danger {background-color: #14141429}
9
+ .anv-themeprovider-core-dark .bg-overlay-active-on-default {background-color: #14141429}
10
+ .anv-themeprovider-core-dark .bg-overlay-active-on-primary {background-color: #14141429}
11
+ .anv-themeprovider-core-dark .bg-overlay-active-primary {background-color: #78bbfa40}
12
+ .anv-themeprovider-core-dark .bg-overlay-hover-danger {background-color: #ff745f1A}
13
+ .anv-themeprovider-core-dark .bg-overlay-hover-default {background-color: #ffffff14}
14
+ .anv-themeprovider-core-dark .bg-overlay-hover-on-danger {background-color: #ffffff29}
15
+ .anv-themeprovider-core-dark .bg-overlay-hover-on-default {background-color: #ffffff14}
16
+ .anv-themeprovider-core-dark .bg-overlay-hover-on-primary {background-color: #ffffff29}
17
+ .anv-themeprovider-core-dark .bg-overlay-hover-primary {background-color: #78bbfa1A}
18
+ .anv-themeprovider-core-dark .bg-primary-default {background-color: var(--color-blue-300)}
19
+ .anv-themeprovider-core-dark .bg-primary-subdued {background-color: #78bbfa33}
20
+ .anv-themeprovider-core-dark .bg-status-danger {background-color: var(--color-red-300)}
21
+ .anv-themeprovider-core-dark .bg-status-info {background-color: var(--color-blue-300)}
22
+ .anv-themeprovider-core-dark .bg-status-success {background-color: var(--color-green-300)}
23
+ .anv-themeprovider-core-dark .bg-status-warning {background-color: var(--color-yellow-300)}
24
+ .anv-themeprovider-core-dark .bg-strong {background-color: var(--color-neutral-300)}
25
+ .anv-themeprovider-core-dark .bg-stronger {background-color: var(--color-neutral-200)}
26
+ .anv-themeprovider-core-dark .bg-strongest {background-color: var(--color-neutral-90)}
27
+ .anv-themeprovider-core-dark .bg-warning-default {background-color: #ffe278}
28
+ .anv-themeprovider-core-dark .border-color-status-info {border-color: var(--color-blue-300)}
29
+ .anv-themeprovider-core-dark .border-color-status-success {border-color: var(--color-green-300)}
30
+ .anv-themeprovider-core-dark .border-color-status-warning {border-color: var(--color-yellow-300)}
31
+ .anv-themeprovider-core-dark .c-danger {color: #ff745f}
32
+ .anv-themeprovider-core-dark .c-default {color: var(--color-neutral-0)}
33
+ .anv-themeprovider-core-dark .c-inverted {color: var(--color-neutral-400)}
34
+ .anv-themeprovider-core-dark .c-on-danger {color: var(--color-neutral-400)}
35
+ .anv-themeprovider-core-dark .c-on-primary {color: var(--color-neutral-400)}
36
+ .anv-themeprovider-core-dark .c-on-warning {color: var(--color-neutral-400)}
37
+ .anv-themeprovider-core-dark .c-primary {color: var(--color-blue-300)}
38
+ .anv-themeprovider-core-dark .c-status-danger {color: var(--color-red-300)}
39
+ .anv-themeprovider-core-dark .c-status-info {color: var(--color-blue-300)}
40
+ .anv-themeprovider-core-dark .c-status-success {color: var(--color-green-300)}
41
+ .anv-themeprovider-core-dark .c-status-warning {color: var(--color-yellow-300)}
42
+ .anv-themeprovider-core-dark .c-subdued {color: var(--color-neutral-70)}
43
+ .bg-danger-default {background-color: var(--status-color-danger)}
44
+ .bg-default {background-color: var(--color-neutral-0)}
45
+ .bg-disabled {background-color: var(--color-neutral-100)}
46
+ .bg-inverted-default {background-color: var(--color-neutral-300)}
47
+ .bg-inverted-strong {background-color: var(--color-neutral-400)}
48
+ .bg-overlay-active-danger {background-color: #e132124D}
49
+ .bg-overlay-active-default {background-color: #14141429}
50
+ .bg-overlay-active-on-danger {background-color: #14141429}
51
+ .bg-overlay-active-on-default {background-color: #14141429}
52
+ .bg-overlay-active-on-primary {background-color: #14141429}
53
+ .bg-overlay-active-primary {background-color: #0265dc4D}
54
+ .bg-overlay-hover-danger {background-color: #e132121A}
55
+ .bg-overlay-hover-default {background-color: #14141414}
56
+ .bg-overlay-hover-on-danger {background-color: #ffffff29}
57
+ .bg-overlay-hover-on-default {background-color: #14141414}
58
+ .bg-overlay-hover-on-primary {background-color: #ffffff29}
59
+ .bg-overlay-hover-primary {background-color: #0265dc1A}
60
+ .bg-primary-default {background-color: var(--color-blue-500)}
61
+ .bg-primary-subdued {background-color: var(--color-blue-100)}
62
+ .bg-status-danger {background-color: var(--color-red-500)}
63
+ .bg-status-info {background-color: var(--color-blue-500)}
64
+ .bg-status-success {background-color: var(--color-green-500)}
65
+ .bg-status-warning {background-color: var(--color-yellow-500)}
66
+ .bg-strong {background-color: var(--color-neutral-30)}
67
+ .bg-stronger {background-color: var(--color-neutral-50)}
68
+ .bg-strongest {background-color: var(--color-neutral-70)}
69
+ .bg-warning-default {background-color: var(--status-color-warning)}
70
+ .border-color-danger {border-color: var(--status-color-danger)}
71
+ .border-color-default {border-color: var(--color-neutral-80)}
72
+ .border-color-primary {border-color: var(--status-color-info)}
73
+ .border-color-status-info {border-color: var(--color-blue-500)}
74
+ .border-color-status-success {border-color: var(--color-green-500)}
75
+ .border-color-status-warning {border-color: var(--color-yellow-500)}
76
+ .border-color-strong {border-color: var(--color-neutral-200)}
77
+ .border-color-subdued {border-color: var(--color-neutral-60)}
78
+ .border-radius-circular {border-radius: 100%}
79
+ .border-radius-none {border-radius: var(--size-0)}
80
+ .border-radius-pill {border-radius: 500px}
81
+ .border-radius-rounded {border-radius: 0.375rem}
82
+ .border-radius-rounded-strong {border-radius: 1rem}
83
+ .border-width-default {border-width: var(--size-quarter)}
84
+ .border-width-none {border-width: var(--size-0)}
85
+ .border-width-strong {border-width: var(--size-half)}
86
+ .c-danger {color: var(--status-color-danger)}
87
+ .c-default {color: var(--color-neutral-400)}
88
+ .c-inverted {color: var(--color-neutral-0)}
89
+ .c-on-danger {color: var(--color-neutral-0)}
90
+ .c-on-primary {color: var(--color-neutral-0)}
91
+ .c-on-warning {color: var(--color-neutral-400)}
92
+ .c-primary {color: var(--color-blue-500)}
93
+ .c-status-danger {color: var(--color-red-500)}
94
+ .c-status-info {color: var(--color-blue-500)}
95
+ .c-status-success {color: var(--color-green-500)}
96
+ .c-status-warning {color: var(--color-yellow-500)}
97
+ .c-subdued {color: var(--color-neutral-90)}
98
+ .ff-heading {font-family: var(--font-family-display)}
99
+ .ff-label {font-family: var(--font-family-base)}
100
+ .ff-paragraph {font-family: var(--font-family-base)}
101
+ .fs-heading-default {font-size: var(--font-size-500)}
102
+ .fs-heading-large {font-size: var(--font-size-600)}
103
+ .fs-heading-small {font-size: var(--font-size-400)}
104
+ .fs-heading-xlarge {font-size: var(--font-size-800)}
105
+ .fs-heading-xsmall {font-size: var(--font-size-300)}
106
+ .fs-label-default {font-size: var(--font-size-300)}
107
+ .fs-label-large {font-size: var(--font-size-400)}
108
+ .fs-label-small {font-size: var(--font-size-200)}
109
+ .fs-label-xlarge {font-size: var(--font-size-500)}
110
+ .fs-label-xsmall {font-size: var(--font-size-100)}
111
+ .fs-paragraph-default {font-size: var(--font-size-400)}
112
+ .fs-paragraph-large {font-size: var(--font-size-500)}
113
+ .fs-paragraph-small {font-size: var(--font-size-300)}
114
+ .fs-paragraph-xlarge {font-size: var(--font-size-600)}
115
+ .fs-paragraph-xsmall {font-size: var(--font-size-200)}
116
+ .fw-heading {font-weight: var(--font-weight-bold)}
117
+ .fw-label {font-weight: var(--font-weight-semibold)}
118
+ .fw-paragraph {font-weight: var(--font-weight-normal)}
119
+ .m-block-0 {margin-block: var(--size-0)}
120
+ .m-block-1 {margin-block: var(--size-1)}
121
+ .m-block-10 {margin-block: var(--size-10)}
122
+ .m-block-11 {margin-block: var(--size-11)}
123
+ .m-block-12 {margin-block: var(--size-12)}
124
+ .m-block-13 {margin-block: var(--size-13)}
125
+ .m-block-14 {margin-block: var(--size-14)}
126
+ .m-block-2 {margin-block: var(--size-2)}
127
+ .m-block-3 {margin-block: var(--size-3)}
128
+ .m-block-4 {margin-block: var(--size-4)}
129
+ .m-block-5 {margin-block: var(--size-5)}
130
+ .m-block-6 {margin-block: var(--size-6)}
131
+ .m-block-7 {margin-block: var(--size-7)}
132
+ .m-block-8 {margin-block: var(--size-8)}
133
+ .m-block-9 {margin-block: var(--size-9)}
134
+ .m-block-end-0 {margin-block-end: var(--size-0)}
135
+ .m-block-end-1 {margin-block-end: var(--size-1)}
136
+ .m-block-end-10 {margin-block-end: var(--size-10)}
137
+ .m-block-end-11 {margin-block-end: var(--size-11)}
138
+ .m-block-end-12 {margin-block-end: var(--size-12)}
139
+ .m-block-end-13 {margin-block-end: var(--size-13)}
140
+ .m-block-end-14 {margin-block-end: var(--size-14)}
141
+ .m-block-end-2 {margin-block-end: var(--size-2)}
142
+ .m-block-end-3 {margin-block-end: var(--size-3)}
143
+ .m-block-end-4 {margin-block-end: var(--size-4)}
144
+ .m-block-end-5 {margin-block-end: var(--size-5)}
145
+ .m-block-end-6 {margin-block-end: var(--size-6)}
146
+ .m-block-end-7 {margin-block-end: var(--size-7)}
147
+ .m-block-end-8 {margin-block-end: var(--size-8)}
148
+ .m-block-end-9 {margin-block-end: var(--size-9)}
149
+ .m-block-end-half {margin-block-end: var(--size-half)}
150
+ .m-block-end-quarter {margin-block-end: var(--size-quarter)}
151
+ .m-block-half {margin-block: var(--size-half)}
152
+ .m-block-quarter {margin-block: var(--size-quarter)}
153
+ .m-block-start-0 {margin-block-start: var(--size-0)}
154
+ .m-block-start-1 {margin-block-start: var(--size-1)}
155
+ .m-block-start-10 {margin-block-start: var(--size-10)}
156
+ .m-block-start-11 {margin-block-start: var(--size-11)}
157
+ .m-block-start-12 {margin-block-start: var(--size-12)}
158
+ .m-block-start-13 {margin-block-start: var(--size-13)}
159
+ .m-block-start-14 {margin-block-start: var(--size-14)}
160
+ .m-block-start-2 {margin-block-start: var(--size-2)}
161
+ .m-block-start-3 {margin-block-start: var(--size-3)}
162
+ .m-block-start-4 {margin-block-start: var(--size-4)}
163
+ .m-block-start-5 {margin-block-start: var(--size-5)}
164
+ .m-block-start-6 {margin-block-start: var(--size-6)}
165
+ .m-block-start-7 {margin-block-start: var(--size-7)}
166
+ .m-block-start-8 {margin-block-start: var(--size-8)}
167
+ .m-block-start-9 {margin-block-start: var(--size-9)}
168
+ .m-block-start-half {margin-block-start: var(--size-half)}
169
+ .m-block-start-quarter {margin-block-start: var(--size-quarter)}
170
+ .m-inline-0 {margin-inline: var(--size-0)}
171
+ .m-inline-1 {margin-inline: var(--size-1)}
172
+ .m-inline-10 {margin-inline: var(--size-10)}
173
+ .m-inline-11 {margin-inline: var(--size-11)}
174
+ .m-inline-12 {margin-inline: var(--size-12)}
175
+ .m-inline-13 {margin-inline: var(--size-13)}
176
+ .m-inline-14 {margin-inline: var(--size-14)}
177
+ .m-inline-2 {margin-inline: var(--size-2)}
178
+ .m-inline-3 {margin-inline: var(--size-3)}
179
+ .m-inline-4 {margin-inline: var(--size-4)}
180
+ .m-inline-5 {margin-inline: var(--size-5)}
181
+ .m-inline-6 {margin-inline: var(--size-6)}
182
+ .m-inline-7 {margin-inline: var(--size-7)}
183
+ .m-inline-8 {margin-inline: var(--size-8)}
184
+ .m-inline-9 {margin-inline: var(--size-9)}
185
+ .m-inline-end-0 {margin-inline-end: var(--size-0)}
186
+ .m-inline-end-1 {margin-inline-end: var(--size-1)}
187
+ .m-inline-end-10 {margin-inline-end: var(--size-10)}
188
+ .m-inline-end-11 {margin-inline-end: var(--size-11)}
189
+ .m-inline-end-12 {margin-inline-end: var(--size-12)}
190
+ .m-inline-end-13 {margin-inline-end: var(--size-13)}
191
+ .m-inline-end-14 {margin-inline-end: var(--size-14)}
192
+ .m-inline-end-2 {margin-inline-end: var(--size-2)}
193
+ .m-inline-end-3 {margin-inline-end: var(--size-3)}
194
+ .m-inline-end-4 {margin-inline-end: var(--size-4)}
195
+ .m-inline-end-5 {margin-inline-end: var(--size-5)}
196
+ .m-inline-end-6 {margin-inline-end: var(--size-6)}
197
+ .m-inline-end-7 {margin-inline-end: var(--size-7)}
198
+ .m-inline-end-8 {margin-inline-end: var(--size-8)}
199
+ .m-inline-end-9 {margin-inline-end: var(--size-9)}
200
+ .m-inline-end-half {margin-inline-end: var(--size-half)}
201
+ .m-inline-end-quarter {margin-inline-end: var(--size-quarter)}
202
+ .m-inline-half {margin-inline: var(--size-half)}
203
+ .m-inline-quarter {margin-inline: var(--size-quarter)}
204
+ .m-inline-start-0 {margin-inline-start: var(--size-0)}
205
+ .m-inline-start-1 {margin-inline-start: var(--size-1)}
206
+ .m-inline-start-10 {margin-inline-start: var(--size-10)}
207
+ .m-inline-start-11 {margin-inline-start: var(--size-11)}
208
+ .m-inline-start-12 {margin-inline-start: var(--size-12)}
209
+ .m-inline-start-13 {margin-inline-start: var(--size-13)}
210
+ .m-inline-start-14 {margin-inline-start: var(--size-14)}
211
+ .m-inline-start-2 {margin-inline-start: var(--size-2)}
212
+ .m-inline-start-3 {margin-inline-start: var(--size-3)}
213
+ .m-inline-start-4 {margin-inline-start: var(--size-4)}
214
+ .m-inline-start-5 {margin-inline-start: var(--size-5)}
215
+ .m-inline-start-6 {margin-inline-start: var(--size-6)}
216
+ .m-inline-start-7 {margin-inline-start: var(--size-7)}
217
+ .m-inline-start-8 {margin-inline-start: var(--size-8)}
218
+ .m-inline-start-9 {margin-inline-start: var(--size-9)}
219
+ .m-inline-start-half {margin-inline-start: var(--size-half)}
220
+ .m-inline-start-quarter {margin-inline-start: var(--size-quarter)}
221
+ .p-block-0 {padding-block: var(--size-0)}
222
+ .p-block-1 {padding-block: var(--size-1)}
223
+ .p-block-10 {padding-block: var(--size-10)}
224
+ .p-block-11 {padding-block: var(--size-11)}
225
+ .p-block-12 {padding-block: var(--size-12)}
226
+ .p-block-13 {padding-block: var(--size-13)}
227
+ .p-block-14 {padding-block: var(--size-14)}
228
+ .p-block-2 {padding-block: var(--size-2)}
229
+ .p-block-3 {padding-block: var(--size-3)}
230
+ .p-block-4 {padding-block: var(--size-4)}
231
+ .p-block-5 {padding-block: var(--size-5)}
232
+ .p-block-6 {padding-block: var(--size-6)}
233
+ .p-block-7 {padding-block: var(--size-7)}
234
+ .p-block-8 {padding-block: var(--size-8)}
235
+ .p-block-9 {padding-block: var(--size-9)}
236
+ .p-block-end-0 {padding-block-end: var(--size-0)}
237
+ .p-block-end-1 {padding-block-end: var(--size-1)}
238
+ .p-block-end-10 {padding-block-end: var(--size-10)}
239
+ .p-block-end-11 {padding-block-end: var(--size-11)}
240
+ .p-block-end-12 {padding-block-end: var(--size-12)}
241
+ .p-block-end-13 {padding-block-end: var(--size-13)}
242
+ .p-block-end-14 {padding-block-end: var(--size-14)}
243
+ .p-block-end-2 {padding-block-end: var(--size-2)}
244
+ .p-block-end-3 {padding-block-end: var(--size-3)}
245
+ .p-block-end-4 {padding-block-end: var(--size-4)}
246
+ .p-block-end-5 {padding-block-end: var(--size-5)}
247
+ .p-block-end-6 {padding-block-end: var(--size-6)}
248
+ .p-block-end-7 {padding-block-end: var(--size-7)}
249
+ .p-block-end-8 {padding-block-end: var(--size-8)}
250
+ .p-block-end-9 {padding-block-end: var(--size-9)}
251
+ .p-block-end-half {padding-block-end: var(--size-half)}
252
+ .p-block-end-quarter {padding-block-end: var(--size-quarter)}
253
+ .p-block-half {padding-block: var(--size-half)}
254
+ .p-block-quarter {padding-block: var(--size-quarter)}
255
+ .p-block-start-0 {padding-block-start: var(--size-0)}
256
+ .p-block-start-1 {padding-block-start: var(--size-1)}
257
+ .p-block-start-10 {padding-block-start: var(--size-10)}
258
+ .p-block-start-11 {padding-block-start: var(--size-11)}
259
+ .p-block-start-12 {padding-block-start: var(--size-12)}
260
+ .p-block-start-13 {padding-block-start: var(--size-13)}
261
+ .p-block-start-14 {padding-block-start: var(--size-14)}
262
+ .p-block-start-2 {padding-block-start: var(--size-2)}
263
+ .p-block-start-3 {padding-block-start: var(--size-3)}
264
+ .p-block-start-4 {padding-block-start: var(--size-4)}
265
+ .p-block-start-5 {padding-block-start: var(--size-5)}
266
+ .p-block-start-6 {padding-block-start: var(--size-6)}
267
+ .p-block-start-7 {padding-block-start: var(--size-7)}
268
+ .p-block-start-8 {padding-block-start: var(--size-8)}
269
+ .p-block-start-9 {padding-block-start: var(--size-9)}
270
+ .p-block-start-half {padding-block-start: var(--size-half)}
271
+ .p-block-start-quarter {padding-block-start: var(--size-quarter)}
272
+ .p-inline-0 {padding-inline: var(--size-0)}
273
+ .p-inline-1 {padding-inline: var(--size-1)}
274
+ .p-inline-10 {padding-inline: var(--size-10)}
275
+ .p-inline-11 {padding-inline: var(--size-11)}
276
+ .p-inline-12 {padding-inline: var(--size-12)}
277
+ .p-inline-13 {padding-inline: var(--size-13)}
278
+ .p-inline-14 {padding-inline: var(--size-14)}
279
+ .p-inline-2 {padding-inline: var(--size-2)}
280
+ .p-inline-3 {padding-inline: var(--size-3)}
281
+ .p-inline-4 {padding-inline: var(--size-4)}
282
+ .p-inline-5 {padding-inline: var(--size-5)}
283
+ .p-inline-6 {padding-inline: var(--size-6)}
284
+ .p-inline-7 {padding-inline: var(--size-7)}
285
+ .p-inline-8 {padding-inline: var(--size-8)}
286
+ .p-inline-9 {padding-inline: var(--size-9)}
287
+ .p-inline-end-0 {padding-inline-end: var(--size-0)}
288
+ .p-inline-end-1 {padding-inline-end: var(--size-1)}
289
+ .p-inline-end-10 {padding-inline-end: var(--size-10)}
290
+ .p-inline-end-11 {padding-inline-end: var(--size-11)}
291
+ .p-inline-end-12 {padding-inline-end: var(--size-12)}
292
+ .p-inline-end-13 {padding-inline-end: var(--size-13)}
293
+ .p-inline-end-14 {padding-inline-end: var(--size-14)}
294
+ .p-inline-end-2 {padding-inline-end: var(--size-2)}
295
+ .p-inline-end-3 {padding-inline-end: var(--size-3)}
296
+ .p-inline-end-4 {padding-inline-end: var(--size-4)}
297
+ .p-inline-end-5 {padding-inline-end: var(--size-5)}
298
+ .p-inline-end-6 {padding-inline-end: var(--size-6)}
299
+ .p-inline-end-7 {padding-inline-end: var(--size-7)}
300
+ .p-inline-end-8 {padding-inline-end: var(--size-8)}
301
+ .p-inline-end-9 {padding-inline-end: var(--size-9)}
302
+ .p-inline-end-half {padding-inline-end: var(--size-half)}
303
+ .p-inline-end-quarter {padding-inline-end: var(--size-quarter)}
304
+ .p-inline-half {padding-inline: var(--size-half)}
305
+ .p-inline-quarter {padding-inline: var(--size-quarter)}
306
+ .p-inline-start-0 {padding-inline-start: var(--size-0)}
307
+ .p-inline-start-1 {padding-inline-start: var(--size-1)}
308
+ .p-inline-start-10 {padding-inline-start: var(--size-10)}
309
+ .p-inline-start-11 {padding-inline-start: var(--size-11)}
310
+ .p-inline-start-12 {padding-inline-start: var(--size-12)}
311
+ .p-inline-start-13 {padding-inline-start: var(--size-13)}
312
+ .p-inline-start-14 {padding-inline-start: var(--size-14)}
313
+ .p-inline-start-2 {padding-inline-start: var(--size-2)}
314
+ .p-inline-start-3 {padding-inline-start: var(--size-3)}
315
+ .p-inline-start-4 {padding-inline-start: var(--size-4)}
316
+ .p-inline-start-5 {padding-inline-start: var(--size-5)}
317
+ .p-inline-start-6 {padding-inline-start: var(--size-6)}
318
+ .p-inline-start-7 {padding-inline-start: var(--size-7)}
319
+ .p-inline-start-8 {padding-inline-start: var(--size-8)}
320
+ .p-inline-start-9 {padding-inline-start: var(--size-9)}
321
+ .p-inline-start-half {padding-inline-start: var(--size-half)}
322
+ .p-inline-start-quarter {padding-inline-start: var(--size-quarter)}
package/config.js CHANGED
@@ -1,5 +1,14 @@
1
+ /* eslint-disable @typescript-eslint/no-var-requires */
1
2
  const StyleDictionary = require("style-dictionary");
2
3
  const fs = require("fs-extra");
4
+ const {
5
+ cssUtilsFormatter,
6
+ getVarValue,
7
+ generateBorderClasses,
8
+ generateColorClasses,
9
+ generateFontClasses,
10
+ generateSpacingClasses,
11
+ } = require("./src/utils/css-utils-format-utils");
3
12
 
4
13
  StyleDictionary.registerFormat({
5
14
  name: `custom/SCSSVariable`,
@@ -73,6 +82,71 @@ StyleDictionary.registerFormat({
73
82
  },
74
83
  });
75
84
 
85
+ StyleDictionary.registerFormat({
86
+ name: `custom/CSSUtils/All`,
87
+ formatter: function ({ dictionary }) {
88
+ return dictionary.allTokens
89
+ .map((token) => {
90
+ let value = getVarValue(dictionary, token);
91
+ let name = `${token.name.replace("Default", "")}`;
92
+
93
+ if (
94
+ // name.startsWith("color") || // primitives
95
+ name.startsWith("status-color") ||
96
+ name.startsWith("foreground-color") ||
97
+ name.startsWith("background-color") ||
98
+ name.startsWith("overlay-color")
99
+ ) {
100
+ let darkValue = getVarValue(dictionary, token, true);
101
+ return generateColorClasses(name, value, darkValue);
102
+ }
103
+ if (name.startsWith("border")) {
104
+ return generateBorderClasses(name, value);
105
+ }
106
+ if (name.startsWith("typography")) {
107
+ return generateFontClasses(name, value);
108
+ }
109
+ if (name.startsWith("size")) {
110
+ return generateSpacingClasses(name);
111
+ }
112
+ return null;
113
+ })
114
+ .flat()
115
+ .filter((t) => t != null)
116
+ .map((t) => `${t}`)
117
+ .sort((a, b) => a.localeCompare(b))
118
+ .join(`\n`);
119
+ },
120
+ });
121
+
122
+ StyleDictionary.registerFormat({
123
+ name: `custom/CSSUtils/Borders`,
124
+ formatter: function ({ dictionary }) {
125
+ return cssUtilsFormatter(dictionary, generateBorderClasses);
126
+ },
127
+ });
128
+
129
+ StyleDictionary.registerFormat({
130
+ name: `custom/CSSUtils/Colors`,
131
+ formatter: function ({ dictionary }) {
132
+ return cssUtilsFormatter(dictionary, generateColorClasses, true);
133
+ },
134
+ });
135
+
136
+ StyleDictionary.registerFormat({
137
+ name: `custom/CSSUtils/Fonts`,
138
+ formatter: function ({ dictionary }) {
139
+ return cssUtilsFormatter(dictionary, generateFontClasses);
140
+ },
141
+ });
142
+
143
+ StyleDictionary.registerFormat({
144
+ name: `custom/CSSUtils/Spacing`,
145
+ formatter: function ({ dictionary }) {
146
+ return cssUtilsFormatter(dictionary, generateSpacingClasses);
147
+ },
148
+ });
149
+
76
150
  const getDirectories = (source) =>
77
151
  fs
78
152
  .readdirSync(source, { withFileTypes: true })
@@ -86,6 +160,56 @@ themes.forEach((theme) => {
86
160
  source: [`src/theme/${theme}/*.json`],
87
161
  include: ["src/global/primitive/*.json"],
88
162
  platforms: {
163
+ css: {
164
+ transformGroup: "css",
165
+ buildPath: `build/web/${theme}/css-utils/`,
166
+ files: [
167
+ {
168
+ destination: "utils.css",
169
+ format: "custom/CSSUtils/All",
170
+ },
171
+ {
172
+ destination: "border.css",
173
+ format: "custom/CSSUtils/Borders",
174
+ filter: function (token) {
175
+ return (
176
+ token.filePath.includes("border") ||
177
+ // referenced tokens
178
+ token.filePath.includes("primitive/color") ||
179
+ token.filePath.includes("primitive/size") ||
180
+ token.filePath.includes("status")
181
+ );
182
+ },
183
+ },
184
+ {
185
+ destination: "color.css",
186
+ format: "custom/CSSUtils/Colors",
187
+ filter: function (token) {
188
+ return (
189
+ token.filePath.includes("primitive/color") ||
190
+ token.name.includes("color")
191
+ );
192
+ },
193
+ },
194
+ {
195
+ destination: "font.css",
196
+ format: "custom/CSSUtils/Fonts",
197
+ filter: function (token) {
198
+ return (
199
+ token.filePath.includes("primitive/typography") ||
200
+ token.filePath.includes("font")
201
+ );
202
+ },
203
+ },
204
+ {
205
+ destination: "spacing.css",
206
+ format: "custom/CSSUtils/Spacing",
207
+ filter: function (token) {
208
+ return token.filePath.includes("primitive/size");
209
+ },
210
+ },
211
+ ],
212
+ },
89
213
  scss: {
90
214
  transformGroup: "scss",
91
215
  buildPath: `build/web/${theme}/`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/hammer-token",
3
- "version": "0.5.2",
3
+ "version": "0.6.0",
4
4
  "description": "",
5
5
  "main": "build/web/index.js",
6
6
  "types": "build/web/index.d.ts",
@@ -15,5 +15,5 @@
15
15
  "fs-extra": "^11.2.0",
16
16
  "style-dictionary": "latest"
17
17
  },
18
- "gitHead": "540e374959aca8288e2abf633a4df1393a0e6e0d"
18
+ "gitHead": "9ba1adf73891b157006273a81e1936682f75e3a6"
19
19
  }
package/src/utils/css-utils-format-utils.js ADDED
@@ -0,0 +1,185 @@
1
+ const DARK_MODE_CLASS = ".anv-themeprovider-core-dark";
2
+
3
+ const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
4
+ return dictionary.allTokens
5
+ .map((token) => {
6
+ let value = getVarValue(dictionary, token);
7
+ const name = `${token.name.replace("Default", "")}`;
8
+ if (hasDarkValues && token.attributes.appearance) {
9
+ const darkValue = getVarValue(dictionary, token, true);
10
+ return generateFn(name, value, darkValue);
11
+ }
12
+ return generateFn(name, value);
13
+ })
14
+ .flat()
15
+ .map((t) => `${t}`)
16
+ .sort((a, b) => a.localeCompare(b))
17
+ .join(`\n`);
18
+ };
19
+
20
+ const getNewValueFromRef = (value, ref) => {
21
+ return value.replace(ref.value, function () {
22
+ // fallback for nested vars
23
+ if (ref.name === undefined) {
24
+ return `${ref.value}`;
25
+ } else {
26
+ return `var(--${ref.name})`;
27
+ }
28
+ });
29
+ };
30
+
31
+ const colorHasAlphaValue = (value) => {
32
+ // e.g. var(--something)44 isn't valid
33
+ return /\)[\d]+/.test(value);
34
+ };
35
+
36
+ /**
37
+ * Allow for CSS var instead of static value
38
+ */
39
+ const getVarValue = (dictionary, token, isDarkValue) => {
40
+ let value;
41
+
42
+ if (isDarkValue) {
43
+ value = JSON.stringify(token.attributes.appearance.dark.value);
44
+ if (
45
+ dictionary.usesReference(token.original.attributes.appearance.dark.value)
46
+ ) {
47
+ const refs = dictionary.getReferences(
48
+ token.original.attributes.appearance.dark.value,
49
+ );
50
+ refs.forEach((ref) => {
51
+ const newValue = getNewValueFromRef(value, ref);
52
+ if (colorHasAlphaValue(newValue) === false) {
53
+ value = newValue;
54
+ }
55
+ });
56
+ }
57
+ } else {
58
+ value = JSON.stringify(token.value);
59
+ if (dictionary.usesReference(token.original.value)) {
60
+ const refs = dictionary.getReferences(token.original.value);
61
+ refs.forEach((ref) => {
62
+ const newValue = getNewValueFromRef(value, ref);
63
+ if (colorHasAlphaValue(newValue) === false) {
64
+ value = newValue;
65
+ }
66
+ });
67
+ }
68
+ }
69
+
70
+ return value.replaceAll('"', "");
71
+ };
72
+
73
+ const generateBorderClasses = (name, value) => {
74
+ const classes = [];
75
+
76
+ if (name.startsWith("border-radius")) {
77
+ classes.push(`.${name} {border-radius: ${value}}`);
78
+ } else if (name.startsWith("border-width")) {
79
+ classes.push(`.${name} {border-width: ${value}}`);
80
+ } else if (name.startsWith("border-color")) {
81
+ classes.push(`.${name} {border-color: ${value}}`);
82
+ }
83
+
84
+ return classes;
85
+ };
86
+
87
+ const generateColorClasses = (name, value, darkValue) => {
88
+ const classes = [];
89
+
90
+ if (name.startsWith("background-color")) {
91
+ classes.push(
92
+ `.${name.replace("background-color", "bg")} {background-color: ${value}}`,
93
+ `${DARK_MODE_CLASS} .${name.replace("background-color", "bg")} {background-color: ${darkValue}}`,
94
+ );
95
+ } else if (name.startsWith("foreground-color")) {
96
+ classes.push(
97
+ `.${name.replace("foreground-color", "c")} {color: ${value}}`,
98
+ `${DARK_MODE_CLASS} .${name.replace("foreground-color", "c")} {color: ${darkValue}}`,
99
+ );
100
+ } else if (name.startsWith("overlay-color")) {
101
+ 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}}`,
104
+ );
105
+ // primitives
106
+ // } else if (name.startsWith("color")) {
107
+ // classes.push(
108
+ // `.${name.replace("color", "c")} {color: ${value}}`,
109
+ // `.${name.replace("color", "bg")} {background-color: ${value}}`,
110
+ // );
111
+ } else if (name.startsWith("status-color")) {
112
+ 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}}`,
117
+ );
118
+ if (!name.includes("danger")) {
119
+ 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}}`,
122
+ );
123
+ }
124
+ } else if (name.startsWith("border-color")) {
125
+ classes.push(`.${name} {border-color: ${value}}`);
126
+ }
127
+
128
+ return classes;
129
+ };
130
+
131
+ const generateFontClasses = (name, value) => {
132
+ const classes = [];
133
+
134
+ if (name.startsWith("typography")) {
135
+ if (name.includes("-font-family")) {
136
+ classes.push(
137
+ `.${name.replace("typography", "ff").replace("-font-family", "")} {font-family: ${value}}`,
138
+ );
139
+ } else if (name.includes("-font-weight")) {
140
+ classes.push(
141
+ `.${name.replace("typography", "fw").replace("-font-weight", "")} {font-weight: ${value}}`,
142
+ );
143
+ } else if (name.includes("-size")) {
144
+ classes.push(
145
+ `.${name.replace("typography", "fs").replace("-size", "")} {font-size: ${value}}`,
146
+ );
147
+ }
148
+ }
149
+
150
+ return classes;
151
+ };
152
+
153
+ const generateSpacingClasses = (name) => {
154
+ const nameWithoutPrefix = name.substring(name.indexOf("-"));
155
+
156
+ const directions = [
157
+ "inline-start",
158
+ "inline-end",
159
+ "block-start",
160
+ "block-end",
161
+ "block",
162
+ "inline",
163
+ ];
164
+ const classes = [];
165
+
166
+ directions.forEach((direction) => {
167
+ classes.push(
168
+ `.m-${direction}${nameWithoutPrefix} {margin-${direction}: var(--${name})}`,
169
+ );
170
+ classes.push(
171
+ `.p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name})}`,
172
+ );
173
+ });
174
+
175
+ return classes;
176
+ };
177
+
178
+ module.exports = {
179
+ cssUtilsFormatter,
180
+ getVarValue,
181
+ generateBorderClasses,
182
+ generateColorClasses,
183
+ generateFontClasses,
184
+ generateSpacingClasses,
185
+ };