@servicetitan/hammer-token 0.5.2 → 0.7.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 +24 -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 +21 -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.6.0 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.6.0 lint /home/runner/work/hammer/hammer/packages/hammer-token
3
3
  > eslint
4
4
 
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v0.7.0 (Mon Jun 03 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - ANV-1392: Fix CSS Utils / Font file and add fallback values [#486](https://github.com/servicetitan/hammer/pull/486) ([@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
+
13
+ # v0.6.0 (Fri May 31 2024)
14
+
15
+ #### ✨ New Feature
16
+
17
+ - 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))
18
+
19
+ #### Authors: 1
20
+
21
+ - Derek Watson ([@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
22
+
23
+ ---
24
+
1
25
  # v0.5.2 (Fri May 03 2024)
2
26
 
3
27
  #### 🏠 Internal
package/build/web/core/css-utils/border.css ADDED
@@ -0,0 +1,13 @@
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)}
6
+ .border-radius-circular {border-radius: 100%}
7
+ .border-radius-none {border-radius: var(--size-0, 0rem)}
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, 0.0625rem)}
12
+ .border-width-none {border-width: var(--size-0, 0rem)}
13
+ .border-width-strong {border-width: var(--size-half, 0.125rem)}
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, #141414)}
3
+ .anv-themeprovider-core-dark .bg-disabled {background-color: var(--color-neutral-100, #606162)}
4
+ .anv-themeprovider-core-dark .bg-inverted-default {background-color: var(--color-neutral-20, #fafafa)}
5
+ .anv-themeprovider-core-dark .bg-inverted-strong {background-color: var(--color-neutral-0, #ffffff)}
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, #78bbfa)}
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, #ff745f)}
21
+ .anv-themeprovider-core-dark .bg-status-info {background-color: var(--color-blue-300, #78bbfa)}
22
+ .anv-themeprovider-core-dark .bg-status-success {background-color: var(--color-green-300, #49cc93)}
23
+ .anv-themeprovider-core-dark .bg-status-warning {background-color: var(--color-yellow-300, #ffe278)}
24
+ .anv-themeprovider-core-dark .bg-strong {background-color: var(--color-neutral-300, #2d2e31)}
25
+ .anv-themeprovider-core-dark .bg-stronger {background-color: var(--color-neutral-200, #444445)}
26
+ .anv-themeprovider-core-dark .bg-strongest {background-color: var(--color-neutral-90, #737475)}
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, #78bbfa)}
29
+ .anv-themeprovider-core-dark .border-color-status-success {border-color: var(--color-green-300, #49cc93)}
30
+ .anv-themeprovider-core-dark .border-color-status-warning {border-color: var(--color-yellow-300, #ffe278)}
31
+ .anv-themeprovider-core-dark .c-danger {color: #ff745f}
32
+ .anv-themeprovider-core-dark .c-default {color: var(--color-neutral-0, #ffffff)}
33
+ .anv-themeprovider-core-dark .c-inverted {color: var(--color-neutral-400, #141414)}
34
+ .anv-themeprovider-core-dark .c-on-danger {color: var(--color-neutral-400, #141414)}
35
+ .anv-themeprovider-core-dark .c-on-primary {color: var(--color-neutral-400, #141414)}
36
+ .anv-themeprovider-core-dark .c-on-warning {color: var(--color-neutral-400, #141414)}
37
+ .anv-themeprovider-core-dark .c-primary {color: var(--color-blue-300, #78bbfa)}
38
+ .anv-themeprovider-core-dark .c-status-danger {color: var(--color-red-300, #ff745f)}
39
+ .anv-themeprovider-core-dark .c-status-info {color: var(--color-blue-300, #78bbfa)}
40
+ .anv-themeprovider-core-dark .c-status-success {color: var(--color-green-300, #49cc93)}
41
+ .anv-themeprovider-core-dark .c-status-warning {color: var(--color-yellow-300, #ffe278)}
42
+ .anv-themeprovider-core-dark .c-subdued {color: var(--color-neutral-70, #bcbcbd)}
43
+ .bg-danger-default {background-color: var(--status-color-danger, #e13212)}
44
+ .bg-default {background-color: var(--color-neutral-0, #ffffff)}
45
+ .bg-disabled {background-color: var(--color-neutral-100, #606162)}
46
+ .bg-inverted-default {background-color: var(--color-neutral-300, #2d2e31)}
47
+ .bg-inverted-strong {background-color: var(--color-neutral-400, #141414)}
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, #0265dc)}
61
+ .bg-primary-subdued {background-color: var(--color-blue-100, #e0f2ff)}
62
+ .bg-status-danger {background-color: var(--color-red-500, #e13212)}
63
+ .bg-status-info {background-color: var(--color-blue-500, #0265dc)}
64
+ .bg-status-success {background-color: var(--color-green-500, #007a4d)}
65
+ .bg-status-warning {background-color: var(--color-yellow-500, #ffbe00)}
66
+ .bg-strong {background-color: var(--color-neutral-30, #f7f7f7)}
67
+ .bg-stronger {background-color: var(--color-neutral-50, #eeeeee)}
68
+ .bg-strongest {background-color: var(--color-neutral-70, #bcbcbd)}
69
+ .bg-warning-default {background-color: var(--status-color-warning, #ffbe00)}
70
+ .border-color-danger {border-color: var(--status-color-danger, #e13212)}
71
+ .border-color-default {border-color: var(--color-neutral-80, #949596)}
72
+ .border-color-primary {border-color: var(--status-color-info, #0265dc)}
73
+ .border-color-status-info {border-color: var(--color-blue-500, #0265dc)}
74
+ .border-color-status-success {border-color: var(--color-green-500, #007a4d)}
75
+ .border-color-status-warning {border-color: var(--color-yellow-500, #ffbe00)}
76
+ .border-color-strong {border-color: var(--color-neutral-200, #444445)}
77
+ .border-color-subdued {border-color: var(--color-neutral-60, #dfe0e1)}
78
+ .c-danger {color: var(--status-color-danger, #e13212)}
79
+ .c-default {color: var(--color-neutral-400, #141414)}
80
+ .c-inverted {color: var(--color-neutral-0, #ffffff)}
81
+ .c-on-danger {color: var(--color-neutral-0, #ffffff)}
82
+ .c-on-primary {color: var(--color-neutral-0, #ffffff)}
83
+ .c-on-warning {color: var(--color-neutral-400, #141414)}
84
+ .c-primary {color: var(--color-blue-500, #0265dc)}
85
+ .c-status-danger {color: var(--color-red-500, #e13212)}
86
+ .c-status-info {color: var(--color-blue-500, #0265dc)}
87
+ .c-status-success {color: var(--color-green-500, #007a4d)}
88
+ .c-status-warning {color: var(--color-yellow-500, #ffbe00)}
89
+ .c-subdued {color: var(--color-neutral-90, #737475)}
package/build/web/core/css-utils/font.css ADDED
@@ -0,0 +1,21 @@
1
+ .ff-heading {font-family: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif)}
2
+ .ff-label {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
3
+ .ff-paragraph {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
4
+ .fs-heading-default {font-size: var(--font-size-500, 1.25rem)}
5
+ .fs-heading-large {font-size: var(--font-size-600, 1.5rem)}
6
+ .fs-heading-small {font-size: var(--font-size-400, 1rem)}
7
+ .fs-heading-xlarge {font-size: var(--font-size-800, 2rem)}
8
+ .fs-heading-xsmall {font-size: var(--font-size-300, 0.875rem)}
9
+ .fs-label-default {font-size: var(--font-size-300, 0.875rem)}
10
+ .fs-label-large {font-size: var(--font-size-400, 1rem)}
11
+ .fs-label-small {font-size: var(--font-size-200, 0.75rem)}
12
+ .fs-label-xlarge {font-size: var(--font-size-500, 1.25rem)}
13
+ .fs-label-xsmall {font-size: var(--font-size-100, 0.625rem)}
14
+ .fs-paragraph-default {font-size: var(--font-size-400, 1rem)}
15
+ .fs-paragraph-large {font-size: var(--font-size-500, 1.25rem)}
16
+ .fs-paragraph-small {font-size: var(--font-size-300, 0.875rem)}
17
+ .fs-paragraph-xlarge {font-size: var(--font-size-600, 1.5rem)}
18
+ .fs-paragraph-xsmall {font-size: var(--font-size-200, 0.75rem)}
19
+ .fw-heading {font-weight: var(--font-weight-bold, 700)}
20
+ .fw-label {font-weight: var(--font-weight-semibold, 600)}
21
+ .fw-paragraph {font-weight: var(--font-weight-normal, 400)}
package/build/web/core/css-utils/spacing.css ADDED
@@ -0,0 +1,204 @@
1
+ .m-block-0 {margin-block: var(--size-0, 0rem)}
2
+ .m-block-1 {margin-block: var(--size-1, 0.25rem)}
3
+ .m-block-10 {margin-block: var(--size-10, 2.5rem)}
4
+ .m-block-11 {margin-block: var(--size-11, 2.75rem)}
5
+ .m-block-12 {margin-block: var(--size-12, 3rem)}
6
+ .m-block-13 {margin-block: var(--size-13, 3.25rem)}
7
+ .m-block-14 {margin-block: var(--size-14, 3.5rem)}
8
+ .m-block-2 {margin-block: var(--size-2, 0.5rem)}
9
+ .m-block-3 {margin-block: var(--size-3, 0.75rem)}
10
+ .m-block-4 {margin-block: var(--size-4, 1rem)}
11
+ .m-block-5 {margin-block: var(--size-5, 1.25rem)}
12
+ .m-block-6 {margin-block: var(--size-6, 1.5rem)}
13
+ .m-block-7 {margin-block: var(--size-7, 1.75rem)}
14
+ .m-block-8 {margin-block: var(--size-8, 2rem)}
15
+ .m-block-9 {margin-block: var(--size-9, 2.25rem)}
16
+ .m-block-end-0 {margin-block-end: var(--size-0, 0rem)}
17
+ .m-block-end-1 {margin-block-end: var(--size-1, 0.25rem)}
18
+ .m-block-end-10 {margin-block-end: var(--size-10, 2.5rem)}
19
+ .m-block-end-11 {margin-block-end: var(--size-11, 2.75rem)}
20
+ .m-block-end-12 {margin-block-end: var(--size-12, 3rem)}
21
+ .m-block-end-13 {margin-block-end: var(--size-13, 3.25rem)}
22
+ .m-block-end-14 {margin-block-end: var(--size-14, 3.5rem)}
23
+ .m-block-end-2 {margin-block-end: var(--size-2, 0.5rem)}
24
+ .m-block-end-3 {margin-block-end: var(--size-3, 0.75rem)}
25
+ .m-block-end-4 {margin-block-end: var(--size-4, 1rem)}
26
+ .m-block-end-5 {margin-block-end: var(--size-5, 1.25rem)}
27
+ .m-block-end-6 {margin-block-end: var(--size-6, 1.5rem)}
28
+ .m-block-end-7 {margin-block-end: var(--size-7, 1.75rem)}
29
+ .m-block-end-8 {margin-block-end: var(--size-8, 2rem)}
30
+ .m-block-end-9 {margin-block-end: var(--size-9, 2.25rem)}
31
+ .m-block-end-half {margin-block-end: var(--size-half, 0.125rem)}
32
+ .m-block-end-quarter {margin-block-end: var(--size-quarter, 0.0625rem)}
33
+ .m-block-half {margin-block: var(--size-half, 0.125rem)}
34
+ .m-block-quarter {margin-block: var(--size-quarter, 0.0625rem)}
35
+ .m-block-start-0 {margin-block-start: var(--size-0, 0rem)}
36
+ .m-block-start-1 {margin-block-start: var(--size-1, 0.25rem)}
37
+ .m-block-start-10 {margin-block-start: var(--size-10, 2.5rem)}
38
+ .m-block-start-11 {margin-block-start: var(--size-11, 2.75rem)}
39
+ .m-block-start-12 {margin-block-start: var(--size-12, 3rem)}
40
+ .m-block-start-13 {margin-block-start: var(--size-13, 3.25rem)}
41
+ .m-block-start-14 {margin-block-start: var(--size-14, 3.5rem)}
42
+ .m-block-start-2 {margin-block-start: var(--size-2, 0.5rem)}
43
+ .m-block-start-3 {margin-block-start: var(--size-3, 0.75rem)}
44
+ .m-block-start-4 {margin-block-start: var(--size-4, 1rem)}
45
+ .m-block-start-5 {margin-block-start: var(--size-5, 1.25rem)}
46
+ .m-block-start-6 {margin-block-start: var(--size-6, 1.5rem)}
47
+ .m-block-start-7 {margin-block-start: var(--size-7, 1.75rem)}
48
+ .m-block-start-8 {margin-block-start: var(--size-8, 2rem)}
49
+ .m-block-start-9 {margin-block-start: var(--size-9, 2.25rem)}
50
+ .m-block-start-half {margin-block-start: var(--size-half, 0.125rem)}
51
+ .m-block-start-quarter {margin-block-start: var(--size-quarter, 0.0625rem)}
52
+ .m-inline-0 {margin-inline: var(--size-0, 0rem)}
53
+ .m-inline-1 {margin-inline: var(--size-1, 0.25rem)}
54
+ .m-inline-10 {margin-inline: var(--size-10, 2.5rem)}
55
+ .m-inline-11 {margin-inline: var(--size-11, 2.75rem)}
56
+ .m-inline-12 {margin-inline: var(--size-12, 3rem)}
57
+ .m-inline-13 {margin-inline: var(--size-13, 3.25rem)}
58
+ .m-inline-14 {margin-inline: var(--size-14, 3.5rem)}
59
+ .m-inline-2 {margin-inline: var(--size-2, 0.5rem)}
60
+ .m-inline-3 {margin-inline: var(--size-3, 0.75rem)}
61
+ .m-inline-4 {margin-inline: var(--size-4, 1rem)}
62
+ .m-inline-5 {margin-inline: var(--size-5, 1.25rem)}
63
+ .m-inline-6 {margin-inline: var(--size-6, 1.5rem)}
64
+ .m-inline-7 {margin-inline: var(--size-7, 1.75rem)}
65
+ .m-inline-8 {margin-inline: var(--size-8, 2rem)}
66
+ .m-inline-9 {margin-inline: var(--size-9, 2.25rem)}
67
+ .m-inline-end-0 {margin-inline-end: var(--size-0, 0rem)}
68
+ .m-inline-end-1 {margin-inline-end: var(--size-1, 0.25rem)}
69
+ .m-inline-end-10 {margin-inline-end: var(--size-10, 2.5rem)}
70
+ .m-inline-end-11 {margin-inline-end: var(--size-11, 2.75rem)}
71
+ .m-inline-end-12 {margin-inline-end: var(--size-12, 3rem)}
72
+ .m-inline-end-13 {margin-inline-end: var(--size-13, 3.25rem)}
73
+ .m-inline-end-14 {margin-inline-end: var(--size-14, 3.5rem)}
74
+ .m-inline-end-2 {margin-inline-end: var(--size-2, 0.5rem)}
75
+ .m-inline-end-3 {margin-inline-end: var(--size-3, 0.75rem)}
76
+ .m-inline-end-4 {margin-inline-end: var(--size-4, 1rem)}
77
+ .m-inline-end-5 {margin-inline-end: var(--size-5, 1.25rem)}
78
+ .m-inline-end-6 {margin-inline-end: var(--size-6, 1.5rem)}
79
+ .m-inline-end-7 {margin-inline-end: var(--size-7, 1.75rem)}
80
+ .m-inline-end-8 {margin-inline-end: var(--size-8, 2rem)}
81
+ .m-inline-end-9 {margin-inline-end: var(--size-9, 2.25rem)}
82
+ .m-inline-end-half {margin-inline-end: var(--size-half, 0.125rem)}
83
+ .m-inline-end-quarter {margin-inline-end: var(--size-quarter, 0.0625rem)}
84
+ .m-inline-half {margin-inline: var(--size-half, 0.125rem)}
85
+ .m-inline-quarter {margin-inline: var(--size-quarter, 0.0625rem)}
86
+ .m-inline-start-0 {margin-inline-start: var(--size-0, 0rem)}
87
+ .m-inline-start-1 {margin-inline-start: var(--size-1, 0.25rem)}
88
+ .m-inline-start-10 {margin-inline-start: var(--size-10, 2.5rem)}
89
+ .m-inline-start-11 {margin-inline-start: var(--size-11, 2.75rem)}
90
+ .m-inline-start-12 {margin-inline-start: var(--size-12, 3rem)}
91
+ .m-inline-start-13 {margin-inline-start: var(--size-13, 3.25rem)}
92
+ .m-inline-start-14 {margin-inline-start: var(--size-14, 3.5rem)}
93
+ .m-inline-start-2 {margin-inline-start: var(--size-2, 0.5rem)}
94
+ .m-inline-start-3 {margin-inline-start: var(--size-3, 0.75rem)}
95
+ .m-inline-start-4 {margin-inline-start: var(--size-4, 1rem)}
96
+ .m-inline-start-5 {margin-inline-start: var(--size-5, 1.25rem)}
97
+ .m-inline-start-6 {margin-inline-start: var(--size-6, 1.5rem)}
98
+ .m-inline-start-7 {margin-inline-start: var(--size-7, 1.75rem)}
99
+ .m-inline-start-8 {margin-inline-start: var(--size-8, 2rem)}
100
+ .m-inline-start-9 {margin-inline-start: var(--size-9, 2.25rem)}
101
+ .m-inline-start-half {margin-inline-start: var(--size-half, 0.125rem)}
102
+ .m-inline-start-quarter {margin-inline-start: var(--size-quarter, 0.0625rem)}
103
+ .p-block-0 {padding-block: var(--size-0, 0rem)}
104
+ .p-block-1 {padding-block: var(--size-1, 0.25rem)}
105
+ .p-block-10 {padding-block: var(--size-10, 2.5rem)}
106
+ .p-block-11 {padding-block: var(--size-11, 2.75rem)}
107
+ .p-block-12 {padding-block: var(--size-12, 3rem)}
108
+ .p-block-13 {padding-block: var(--size-13, 3.25rem)}
109
+ .p-block-14 {padding-block: var(--size-14, 3.5rem)}
110
+ .p-block-2 {padding-block: var(--size-2, 0.5rem)}
111
+ .p-block-3 {padding-block: var(--size-3, 0.75rem)}
112
+ .p-block-4 {padding-block: var(--size-4, 1rem)}
113
+ .p-block-5 {padding-block: var(--size-5, 1.25rem)}
114
+ .p-block-6 {padding-block: var(--size-6, 1.5rem)}
115
+ .p-block-7 {padding-block: var(--size-7, 1.75rem)}
116
+ .p-block-8 {padding-block: var(--size-8, 2rem)}
117
+ .p-block-9 {padding-block: var(--size-9, 2.25rem)}
118
+ .p-block-end-0 {padding-block-end: var(--size-0, 0rem)}
119
+ .p-block-end-1 {padding-block-end: var(--size-1, 0.25rem)}
120
+ .p-block-end-10 {padding-block-end: var(--size-10, 2.5rem)}
121
+ .p-block-end-11 {padding-block-end: var(--size-11, 2.75rem)}
122
+ .p-block-end-12 {padding-block-end: var(--size-12, 3rem)}
123
+ .p-block-end-13 {padding-block-end: var(--size-13, 3.25rem)}
124
+ .p-block-end-14 {padding-block-end: var(--size-14, 3.5rem)}
125
+ .p-block-end-2 {padding-block-end: var(--size-2, 0.5rem)}
126
+ .p-block-end-3 {padding-block-end: var(--size-3, 0.75rem)}
127
+ .p-block-end-4 {padding-block-end: var(--size-4, 1rem)}
128
+ .p-block-end-5 {padding-block-end: var(--size-5, 1.25rem)}
129
+ .p-block-end-6 {padding-block-end: var(--size-6, 1.5rem)}
130
+ .p-block-end-7 {padding-block-end: var(--size-7, 1.75rem)}
131
+ .p-block-end-8 {padding-block-end: var(--size-8, 2rem)}
132
+ .p-block-end-9 {padding-block-end: var(--size-9, 2.25rem)}
133
+ .p-block-end-half {padding-block-end: var(--size-half, 0.125rem)}
134
+ .p-block-end-quarter {padding-block-end: var(--size-quarter, 0.0625rem)}
135
+ .p-block-half {padding-block: var(--size-half, 0.125rem)}
136
+ .p-block-quarter {padding-block: var(--size-quarter, 0.0625rem)}
137
+ .p-block-start-0 {padding-block-start: var(--size-0, 0rem)}
138
+ .p-block-start-1 {padding-block-start: var(--size-1, 0.25rem)}
139
+ .p-block-start-10 {padding-block-start: var(--size-10, 2.5rem)}
140
+ .p-block-start-11 {padding-block-start: var(--size-11, 2.75rem)}
141
+ .p-block-start-12 {padding-block-start: var(--size-12, 3rem)}
142
+ .p-block-start-13 {padding-block-start: var(--size-13, 3.25rem)}
143
+ .p-block-start-14 {padding-block-start: var(--size-14, 3.5rem)}
144
+ .p-block-start-2 {padding-block-start: var(--size-2, 0.5rem)}
145
+ .p-block-start-3 {padding-block-start: var(--size-3, 0.75rem)}
146
+ .p-block-start-4 {padding-block-start: var(--size-4, 1rem)}
147
+ .p-block-start-5 {padding-block-start: var(--size-5, 1.25rem)}
148
+ .p-block-start-6 {padding-block-start: var(--size-6, 1.5rem)}
149
+ .p-block-start-7 {padding-block-start: var(--size-7, 1.75rem)}
150
+ .p-block-start-8 {padding-block-start: var(--size-8, 2rem)}
151
+ .p-block-start-9 {padding-block-start: var(--size-9, 2.25rem)}
152
+ .p-block-start-half {padding-block-start: var(--size-half, 0.125rem)}
153
+ .p-block-start-quarter {padding-block-start: var(--size-quarter, 0.0625rem)}
154
+ .p-inline-0 {padding-inline: var(--size-0, 0rem)}
155
+ .p-inline-1 {padding-inline: var(--size-1, 0.25rem)}
156
+ .p-inline-10 {padding-inline: var(--size-10, 2.5rem)}
157
+ .p-inline-11 {padding-inline: var(--size-11, 2.75rem)}
158
+ .p-inline-12 {padding-inline: var(--size-12, 3rem)}
159
+ .p-inline-13 {padding-inline: var(--size-13, 3.25rem)}
160
+ .p-inline-14 {padding-inline: var(--size-14, 3.5rem)}
161
+ .p-inline-2 {padding-inline: var(--size-2, 0.5rem)}
162
+ .p-inline-3 {padding-inline: var(--size-3, 0.75rem)}
163
+ .p-inline-4 {padding-inline: var(--size-4, 1rem)}
164
+ .p-inline-5 {padding-inline: var(--size-5, 1.25rem)}
165
+ .p-inline-6 {padding-inline: var(--size-6, 1.5rem)}
166
+ .p-inline-7 {padding-inline: var(--size-7, 1.75rem)}
167
+ .p-inline-8 {padding-inline: var(--size-8, 2rem)}
168
+ .p-inline-9 {padding-inline: var(--size-9, 2.25rem)}
169
+ .p-inline-end-0 {padding-inline-end: var(--size-0, 0rem)}
170
+ .p-inline-end-1 {padding-inline-end: var(--size-1, 0.25rem)}
171
+ .p-inline-end-10 {padding-inline-end: var(--size-10, 2.5rem)}
172
+ .p-inline-end-11 {padding-inline-end: var(--size-11, 2.75rem)}
173
+ .p-inline-end-12 {padding-inline-end: var(--size-12, 3rem)}
174
+ .p-inline-end-13 {padding-inline-end: var(--size-13, 3.25rem)}
175
+ .p-inline-end-14 {padding-inline-end: var(--size-14, 3.5rem)}
176
+ .p-inline-end-2 {padding-inline-end: var(--size-2, 0.5rem)}
177
+ .p-inline-end-3 {padding-inline-end: var(--size-3, 0.75rem)}
178
+ .p-inline-end-4 {padding-inline-end: var(--size-4, 1rem)}
179
+ .p-inline-end-5 {padding-inline-end: var(--size-5, 1.25rem)}
180
+ .p-inline-end-6 {padding-inline-end: var(--size-6, 1.5rem)}
181
+ .p-inline-end-7 {padding-inline-end: var(--size-7, 1.75rem)}
182
+ .p-inline-end-8 {padding-inline-end: var(--size-8, 2rem)}
183
+ .p-inline-end-9 {padding-inline-end: var(--size-9, 2.25rem)}
184
+ .p-inline-end-half {padding-inline-end: var(--size-half, 0.125rem)}
185
+ .p-inline-end-quarter {padding-inline-end: var(--size-quarter, 0.0625rem)}
186
+ .p-inline-half {padding-inline: var(--size-half, 0.125rem)}
187
+ .p-inline-quarter {padding-inline: var(--size-quarter, 0.0625rem)}
188
+ .p-inline-start-0 {padding-inline-start: var(--size-0, 0rem)}
189
+ .p-inline-start-1 {padding-inline-start: var(--size-1, 0.25rem)}
190
+ .p-inline-start-10 {padding-inline-start: var(--size-10, 2.5rem)}
191
+ .p-inline-start-11 {padding-inline-start: var(--size-11, 2.75rem)}
192
+ .p-inline-start-12 {padding-inline-start: var(--size-12, 3rem)}
193
+ .p-inline-start-13 {padding-inline-start: var(--size-13, 3.25rem)}
194
+ .p-inline-start-14 {padding-inline-start: var(--size-14, 3.5rem)}
195
+ .p-inline-start-2 {padding-inline-start: var(--size-2, 0.5rem)}
196
+ .p-inline-start-3 {padding-inline-start: var(--size-3, 0.75rem)}
197
+ .p-inline-start-4 {padding-inline-start: var(--size-4, 1rem)}
198
+ .p-inline-start-5 {padding-inline-start: var(--size-5, 1.25rem)}
199
+ .p-inline-start-6 {padding-inline-start: var(--size-6, 1.5rem)}
200
+ .p-inline-start-7 {padding-inline-start: var(--size-7, 1.75rem)}
201
+ .p-inline-start-8 {padding-inline-start: var(--size-8, 2rem)}
202
+ .p-inline-start-9 {padding-inline-start: var(--size-9, 2.25rem)}
203
+ .p-inline-start-half {padding-inline-start: var(--size-half, 0.125rem)}
204
+ .p-inline-start-quarter {padding-inline-start: var(--size-quarter, 0.0625rem)}
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, #141414)}
3
+ .anv-themeprovider-core-dark .bg-disabled {background-color: var(--color-neutral-100, #606162)}
4
+ .anv-themeprovider-core-dark .bg-inverted-default {background-color: var(--color-neutral-20, #fafafa)}
5
+ .anv-themeprovider-core-dark .bg-inverted-strong {background-color: var(--color-neutral-0, #ffffff)}
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, #78bbfa)}
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, #ff745f)}
21
+ .anv-themeprovider-core-dark .bg-status-info {background-color: var(--color-blue-300, #78bbfa)}
22
+ .anv-themeprovider-core-dark .bg-status-success {background-color: var(--color-green-300, #49cc93)}
23
+ .anv-themeprovider-core-dark .bg-status-warning {background-color: var(--color-yellow-300, #ffe278)}
24
+ .anv-themeprovider-core-dark .bg-strong {background-color: var(--color-neutral-300, #2d2e31)}
25
+ .anv-themeprovider-core-dark .bg-stronger {background-color: var(--color-neutral-200, #444445)}
26
+ .anv-themeprovider-core-dark .bg-strongest {background-color: var(--color-neutral-90, #737475)}
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, #78bbfa)}
29
+ .anv-themeprovider-core-dark .border-color-status-success {border-color: var(--color-green-300, #49cc93)}
30
+ .anv-themeprovider-core-dark .border-color-status-warning {border-color: var(--color-yellow-300, #ffe278)}
31
+ .anv-themeprovider-core-dark .c-danger {color: #ff745f}
32
+ .anv-themeprovider-core-dark .c-default {color: var(--color-neutral-0, #ffffff)}
33
+ .anv-themeprovider-core-dark .c-inverted {color: var(--color-neutral-400, #141414)}
34
+ .anv-themeprovider-core-dark .c-on-danger {color: var(--color-neutral-400, #141414)}
35
+ .anv-themeprovider-core-dark .c-on-primary {color: var(--color-neutral-400, #141414)}
36
+ .anv-themeprovider-core-dark .c-on-warning {color: var(--color-neutral-400, #141414)}
37
+ .anv-themeprovider-core-dark .c-primary {color: var(--color-blue-300, #78bbfa)}
38
+ .anv-themeprovider-core-dark .c-status-danger {color: var(--color-red-300, #ff745f)}
39
+ .anv-themeprovider-core-dark .c-status-info {color: var(--color-blue-300, #78bbfa)}
40
+ .anv-themeprovider-core-dark .c-status-success {color: var(--color-green-300, #49cc93)}
41
+ .anv-themeprovider-core-dark .c-status-warning {color: var(--color-yellow-300, #ffe278)}
42
+ .anv-themeprovider-core-dark .c-subdued {color: var(--color-neutral-70, #bcbcbd)}
43
+ .bg-danger-default {background-color: var(--status-color-danger, #e13212)}
44
+ .bg-default {background-color: var(--color-neutral-0, #ffffff)}
45
+ .bg-disabled {background-color: var(--color-neutral-100, #606162)}
46
+ .bg-inverted-default {background-color: var(--color-neutral-300, #2d2e31)}
47
+ .bg-inverted-strong {background-color: var(--color-neutral-400, #141414)}
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, #0265dc)}
61
+ .bg-primary-subdued {background-color: var(--color-blue-100, #e0f2ff)}
62
+ .bg-status-danger {background-color: var(--color-red-500, #e13212)}
63
+ .bg-status-info {background-color: var(--color-blue-500, #0265dc)}
64
+ .bg-status-success {background-color: var(--color-green-500, #007a4d)}
65
+ .bg-status-warning {background-color: var(--color-yellow-500, #ffbe00)}
66
+ .bg-strong {background-color: var(--color-neutral-30, #f7f7f7)}
67
+ .bg-stronger {background-color: var(--color-neutral-50, #eeeeee)}
68
+ .bg-strongest {background-color: var(--color-neutral-70, #bcbcbd)}
69
+ .bg-warning-default {background-color: var(--status-color-warning, #ffbe00)}
70
+ .border-color-danger {border-color: var(--status-color-danger, #e13212)}
71
+ .border-color-default {border-color: var(--color-neutral-80, #949596)}
72
+ .border-color-primary {border-color: var(--status-color-info, #0265dc)}
73
+ .border-color-status-info {border-color: var(--color-blue-500, #0265dc)}
74
+ .border-color-status-success {border-color: var(--color-green-500, #007a4d)}
75
+ .border-color-status-warning {border-color: var(--color-yellow-500, #ffbe00)}
76
+ .border-color-strong {border-color: var(--color-neutral-200, #444445)}
77
+ .border-color-subdued {border-color: var(--color-neutral-60, #dfe0e1)}
78
+ .border-radius-circular {border-radius: 100%}
79
+ .border-radius-none {border-radius: var(--size-0, 0rem)}
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, 0.0625rem)}
84
+ .border-width-none {border-width: var(--size-0, 0rem)}
85
+ .border-width-strong {border-width: var(--size-half, 0.125rem)}
86
+ .c-danger {color: var(--status-color-danger, #e13212)}
87
+ .c-default {color: var(--color-neutral-400, #141414)}
88
+ .c-inverted {color: var(--color-neutral-0, #ffffff)}
89
+ .c-on-danger {color: var(--color-neutral-0, #ffffff)}
90
+ .c-on-primary {color: var(--color-neutral-0, #ffffff)}
91
+ .c-on-warning {color: var(--color-neutral-400, #141414)}
92
+ .c-primary {color: var(--color-blue-500, #0265dc)}
93
+ .c-status-danger {color: var(--color-red-500, #e13212)}
94
+ .c-status-info {color: var(--color-blue-500, #0265dc)}
95
+ .c-status-success {color: var(--color-green-500, #007a4d)}
96
+ .c-status-warning {color: var(--color-yellow-500, #ffbe00)}
97
+ .c-subdued {color: var(--color-neutral-90, #737475)}
98
+ .ff-heading {font-family: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif)}
99
+ .ff-label {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
100
+ .ff-paragraph {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
101
+ .fs-heading-default {font-size: var(--font-size-500, 1.25rem)}
102
+ .fs-heading-large {font-size: var(--font-size-600, 1.5rem)}
103
+ .fs-heading-small {font-size: var(--font-size-400, 1rem)}
104
+ .fs-heading-xlarge {font-size: var(--font-size-800, 2rem)}
105
+ .fs-heading-xsmall {font-size: var(--font-size-300, 0.875rem)}
106
+ .fs-label-default {font-size: var(--font-size-300, 0.875rem)}
107
+ .fs-label-large {font-size: var(--font-size-400, 1rem)}
108
+ .fs-label-small {font-size: var(--font-size-200, 0.75rem)}
109
+ .fs-label-xlarge {font-size: var(--font-size-500, 1.25rem)}
110
+ .fs-label-xsmall {font-size: var(--font-size-100, 0.625rem)}
111
+ .fs-paragraph-default {font-size: var(--font-size-400, 1rem)}
112
+ .fs-paragraph-large {font-size: var(--font-size-500, 1.25rem)}
113
+ .fs-paragraph-small {font-size: var(--font-size-300, 0.875rem)}
114
+ .fs-paragraph-xlarge {font-size: var(--font-size-600, 1.5rem)}
115
+ .fs-paragraph-xsmall {font-size: var(--font-size-200, 0.75rem)}
116
+ .fw-heading {font-weight: var(--font-weight-bold, 700)}
117
+ .fw-label {font-weight: var(--font-weight-semibold, 600)}
118
+ .fw-paragraph {font-weight: var(--font-weight-normal, 400)}
119
+ .m-block-0 {margin-block: var(--size-0, 0rem)}
120
+ .m-block-1 {margin-block: var(--size-1, 0.25rem)}
121
+ .m-block-10 {margin-block: var(--size-10, 2.5rem)}
122
+ .m-block-11 {margin-block: var(--size-11, 2.75rem)}
123
+ .m-block-12 {margin-block: var(--size-12, 3rem)}
124
+ .m-block-13 {margin-block: var(--size-13, 3.25rem)}
125
+ .m-block-14 {margin-block: var(--size-14, 3.5rem)}
126
+ .m-block-2 {margin-block: var(--size-2, 0.5rem)}
127
+ .m-block-3 {margin-block: var(--size-3, 0.75rem)}
128
+ .m-block-4 {margin-block: var(--size-4, 1rem)}
129
+ .m-block-5 {margin-block: var(--size-5, 1.25rem)}
130
+ .m-block-6 {margin-block: var(--size-6, 1.5rem)}
131
+ .m-block-7 {margin-block: var(--size-7, 1.75rem)}
132
+ .m-block-8 {margin-block: var(--size-8, 2rem)}
133
+ .m-block-9 {margin-block: var(--size-9, 2.25rem)}
134
+ .m-block-end-0 {margin-block-end: var(--size-0, 0rem)}
135
+ .m-block-end-1 {margin-block-end: var(--size-1, 0.25rem)}
136
+ .m-block-end-10 {margin-block-end: var(--size-10, 2.5rem)}
137
+ .m-block-end-11 {margin-block-end: var(--size-11, 2.75rem)}
138
+ .m-block-end-12 {margin-block-end: var(--size-12, 3rem)}
139
+ .m-block-end-13 {margin-block-end: var(--size-13, 3.25rem)}
140
+ .m-block-end-14 {margin-block-end: var(--size-14, 3.5rem)}
141
+ .m-block-end-2 {margin-block-end: var(--size-2, 0.5rem)}
142
+ .m-block-end-3 {margin-block-end: var(--size-3, 0.75rem)}
143
+ .m-block-end-4 {margin-block-end: var(--size-4, 1rem)}
144
+ .m-block-end-5 {margin-block-end: var(--size-5, 1.25rem)}
145
+ .m-block-end-6 {margin-block-end: var(--size-6, 1.5rem)}
146
+ .m-block-end-7 {margin-block-end: var(--size-7, 1.75rem)}
147
+ .m-block-end-8 {margin-block-end: var(--size-8, 2rem)}
148
+ .m-block-end-9 {margin-block-end: var(--size-9, 2.25rem)}
149
+ .m-block-end-half {margin-block-end: var(--size-half, 0.125rem)}
150
+ .m-block-end-quarter {margin-block-end: var(--size-quarter, 0.0625rem)}
151
+ .m-block-half {margin-block: var(--size-half, 0.125rem)}
152
+ .m-block-quarter {margin-block: var(--size-quarter, 0.0625rem)}
153
+ .m-block-start-0 {margin-block-start: var(--size-0, 0rem)}
154
+ .m-block-start-1 {margin-block-start: var(--size-1, 0.25rem)}
155
+ .m-block-start-10 {margin-block-start: var(--size-10, 2.5rem)}
156
+ .m-block-start-11 {margin-block-start: var(--size-11, 2.75rem)}
157
+ .m-block-start-12 {margin-block-start: var(--size-12, 3rem)}
158
+ .m-block-start-13 {margin-block-start: var(--size-13, 3.25rem)}
159
+ .m-block-start-14 {margin-block-start: var(--size-14, 3.5rem)}
160
+ .m-block-start-2 {margin-block-start: var(--size-2, 0.5rem)}
161
+ .m-block-start-3 {margin-block-start: var(--size-3, 0.75rem)}
162
+ .m-block-start-4 {margin-block-start: var(--size-4, 1rem)}
163
+ .m-block-start-5 {margin-block-start: var(--size-5, 1.25rem)}
164
+ .m-block-start-6 {margin-block-start: var(--size-6, 1.5rem)}
165
+ .m-block-start-7 {margin-block-start: var(--size-7, 1.75rem)}
166
+ .m-block-start-8 {margin-block-start: var(--size-8, 2rem)}
167
+ .m-block-start-9 {margin-block-start: var(--size-9, 2.25rem)}
168
+ .m-block-start-half {margin-block-start: var(--size-half, 0.125rem)}
169
+ .m-block-start-quarter {margin-block-start: var(--size-quarter, 0.0625rem)}
170
+ .m-inline-0 {margin-inline: var(--size-0, 0rem)}
171
+ .m-inline-1 {margin-inline: var(--size-1, 0.25rem)}
172
+ .m-inline-10 {margin-inline: var(--size-10, 2.5rem)}
173
+ .m-inline-11 {margin-inline: var(--size-11, 2.75rem)}
174
+ .m-inline-12 {margin-inline: var(--size-12, 3rem)}
175
+ .m-inline-13 {margin-inline: var(--size-13, 3.25rem)}
176
+ .m-inline-14 {margin-inline: var(--size-14, 3.5rem)}
177
+ .m-inline-2 {margin-inline: var(--size-2, 0.5rem)}
178
+ .m-inline-3 {margin-inline: var(--size-3, 0.75rem)}
179
+ .m-inline-4 {margin-inline: var(--size-4, 1rem)}
180
+ .m-inline-5 {margin-inline: var(--size-5, 1.25rem)}
181
+ .m-inline-6 {margin-inline: var(--size-6, 1.5rem)}
182
+ .m-inline-7 {margin-inline: var(--size-7, 1.75rem)}
183
+ .m-inline-8 {margin-inline: var(--size-8, 2rem)}
184
+ .m-inline-9 {margin-inline: var(--size-9, 2.25rem)}
185
+ .m-inline-end-0 {margin-inline-end: var(--size-0, 0rem)}
186
+ .m-inline-end-1 {margin-inline-end: var(--size-1, 0.25rem)}
187
+ .m-inline-end-10 {margin-inline-end: var(--size-10, 2.5rem)}
188
+ .m-inline-end-11 {margin-inline-end: var(--size-11, 2.75rem)}
189
+ .m-inline-end-12 {margin-inline-end: var(--size-12, 3rem)}
190
+ .m-inline-end-13 {margin-inline-end: var(--size-13, 3.25rem)}
191
+ .m-inline-end-14 {margin-inline-end: var(--size-14, 3.5rem)}
192
+ .m-inline-end-2 {margin-inline-end: var(--size-2, 0.5rem)}
193
+ .m-inline-end-3 {margin-inline-end: var(--size-3, 0.75rem)}
194
+ .m-inline-end-4 {margin-inline-end: var(--size-4, 1rem)}
195
+ .m-inline-end-5 {margin-inline-end: var(--size-5, 1.25rem)}
196
+ .m-inline-end-6 {margin-inline-end: var(--size-6, 1.5rem)}
197
+ .m-inline-end-7 {margin-inline-end: var(--size-7, 1.75rem)}
198
+ .m-inline-end-8 {margin-inline-end: var(--size-8, 2rem)}
199
+ .m-inline-end-9 {margin-inline-end: var(--size-9, 2.25rem)}
200
+ .m-inline-end-half {margin-inline-end: var(--size-half, 0.125rem)}
201
+ .m-inline-end-quarter {margin-inline-end: var(--size-quarter, 0.0625rem)}
202
+ .m-inline-half {margin-inline: var(--size-half, 0.125rem)}
203
+ .m-inline-quarter {margin-inline: var(--size-quarter, 0.0625rem)}
204
+ .m-inline-start-0 {margin-inline-start: var(--size-0, 0rem)}
205
+ .m-inline-start-1 {margin-inline-start: var(--size-1, 0.25rem)}
206
+ .m-inline-start-10 {margin-inline-start: var(--size-10, 2.5rem)}
207
+ .m-inline-start-11 {margin-inline-start: var(--size-11, 2.75rem)}
208
+ .m-inline-start-12 {margin-inline-start: var(--size-12, 3rem)}
209
+ .m-inline-start-13 {margin-inline-start: var(--size-13, 3.25rem)}
210
+ .m-inline-start-14 {margin-inline-start: var(--size-14, 3.5rem)}
211
+ .m-inline-start-2 {margin-inline-start: var(--size-2, 0.5rem)}
212
+ .m-inline-start-3 {margin-inline-start: var(--size-3, 0.75rem)}
213
+ .m-inline-start-4 {margin-inline-start: var(--size-4, 1rem)}
214
+ .m-inline-start-5 {margin-inline-start: var(--size-5, 1.25rem)}
215
+ .m-inline-start-6 {margin-inline-start: var(--size-6, 1.5rem)}
216
+ .m-inline-start-7 {margin-inline-start: var(--size-7, 1.75rem)}
217
+ .m-inline-start-8 {margin-inline-start: var(--size-8, 2rem)}
218
+ .m-inline-start-9 {margin-inline-start: var(--size-9, 2.25rem)}
219
+ .m-inline-start-half {margin-inline-start: var(--size-half, 0.125rem)}
220
+ .m-inline-start-quarter {margin-inline-start: var(--size-quarter, 0.0625rem)}
221
+ .p-block-0 {padding-block: var(--size-0, 0rem)}
222
+ .p-block-1 {padding-block: var(--size-1, 0.25rem)}
223
+ .p-block-10 {padding-block: var(--size-10, 2.5rem)}
224
+ .p-block-11 {padding-block: var(--size-11, 2.75rem)}
225
+ .p-block-12 {padding-block: var(--size-12, 3rem)}
226
+ .p-block-13 {padding-block: var(--size-13, 3.25rem)}
227
+ .p-block-14 {padding-block: var(--size-14, 3.5rem)}
228
+ .p-block-2 {padding-block: var(--size-2, 0.5rem)}
229
+ .p-block-3 {padding-block: var(--size-3, 0.75rem)}
230
+ .p-block-4 {padding-block: var(--size-4, 1rem)}
231
+ .p-block-5 {padding-block: var(--size-5, 1.25rem)}
232
+ .p-block-6 {padding-block: var(--size-6, 1.5rem)}
233
+ .p-block-7 {padding-block: var(--size-7, 1.75rem)}
234
+ .p-block-8 {padding-block: var(--size-8, 2rem)}
235
+ .p-block-9 {padding-block: var(--size-9, 2.25rem)}
236
+ .p-block-end-0 {padding-block-end: var(--size-0, 0rem)}
237
+ .p-block-end-1 {padding-block-end: var(--size-1, 0.25rem)}
238
+ .p-block-end-10 {padding-block-end: var(--size-10, 2.5rem)}
239
+ .p-block-end-11 {padding-block-end: var(--size-11, 2.75rem)}
240
+ .p-block-end-12 {padding-block-end: var(--size-12, 3rem)}
241
+ .p-block-end-13 {padding-block-end: var(--size-13, 3.25rem)}
242
+ .p-block-end-14 {padding-block-end: var(--size-14, 3.5rem)}
243
+ .p-block-end-2 {padding-block-end: var(--size-2, 0.5rem)}
244
+ .p-block-end-3 {padding-block-end: var(--size-3, 0.75rem)}
245
+ .p-block-end-4 {padding-block-end: var(--size-4, 1rem)}
246
+ .p-block-end-5 {padding-block-end: var(--size-5, 1.25rem)}
247
+ .p-block-end-6 {padding-block-end: var(--size-6, 1.5rem)}
248
+ .p-block-end-7 {padding-block-end: var(--size-7, 1.75rem)}
249
+ .p-block-end-8 {padding-block-end: var(--size-8, 2rem)}
250
+ .p-block-end-9 {padding-block-end: var(--size-9, 2.25rem)}
251
+ .p-block-end-half {padding-block-end: var(--size-half, 0.125rem)}
252
+ .p-block-end-quarter {padding-block-end: var(--size-quarter, 0.0625rem)}
253
+ .p-block-half {padding-block: var(--size-half, 0.125rem)}
254
+ .p-block-quarter {padding-block: var(--size-quarter, 0.0625rem)}
255
+ .p-block-start-0 {padding-block-start: var(--size-0, 0rem)}
256
+ .p-block-start-1 {padding-block-start: var(--size-1, 0.25rem)}
257
+ .p-block-start-10 {padding-block-start: var(--size-10, 2.5rem)}
258
+ .p-block-start-11 {padding-block-start: var(--size-11, 2.75rem)}
259
+ .p-block-start-12 {padding-block-start: var(--size-12, 3rem)}
260
+ .p-block-start-13 {padding-block-start: var(--size-13, 3.25rem)}
261
+ .p-block-start-14 {padding-block-start: var(--size-14, 3.5rem)}
262
+ .p-block-start-2 {padding-block-start: var(--size-2, 0.5rem)}
263
+ .p-block-start-3 {padding-block-start: var(--size-3, 0.75rem)}
264
+ .p-block-start-4 {padding-block-start: var(--size-4, 1rem)}
265
+ .p-block-start-5 {padding-block-start: var(--size-5, 1.25rem)}
266
+ .p-block-start-6 {padding-block-start: var(--size-6, 1.5rem)}
267
+ .p-block-start-7 {padding-block-start: var(--size-7, 1.75rem)}
268
+ .p-block-start-8 {padding-block-start: var(--size-8, 2rem)}
269
+ .p-block-start-9 {padding-block-start: var(--size-9, 2.25rem)}
270
+ .p-block-start-half {padding-block-start: var(--size-half, 0.125rem)}
271
+ .p-block-start-quarter {padding-block-start: var(--size-quarter, 0.0625rem)}
272
+ .p-inline-0 {padding-inline: var(--size-0, 0rem)}
273
+ .p-inline-1 {padding-inline: var(--size-1, 0.25rem)}
274
+ .p-inline-10 {padding-inline: var(--size-10, 2.5rem)}
275
+ .p-inline-11 {padding-inline: var(--size-11, 2.75rem)}
276
+ .p-inline-12 {padding-inline: var(--size-12, 3rem)}
277
+ .p-inline-13 {padding-inline: var(--size-13, 3.25rem)}
278
+ .p-inline-14 {padding-inline: var(--size-14, 3.5rem)}
279
+ .p-inline-2 {padding-inline: var(--size-2, 0.5rem)}
280
+ .p-inline-3 {padding-inline: var(--size-3, 0.75rem)}
281
+ .p-inline-4 {padding-inline: var(--size-4, 1rem)}
282
+ .p-inline-5 {padding-inline: var(--size-5, 1.25rem)}
283
+ .p-inline-6 {padding-inline: var(--size-6, 1.5rem)}
284
+ .p-inline-7 {padding-inline: var(--size-7, 1.75rem)}
285
+ .p-inline-8 {padding-inline: var(--size-8, 2rem)}
286
+ .p-inline-9 {padding-inline: var(--size-9, 2.25rem)}
287
+ .p-inline-end-0 {padding-inline-end: var(--size-0, 0rem)}
288
+ .p-inline-end-1 {padding-inline-end: var(--size-1, 0.25rem)}
289
+ .p-inline-end-10 {padding-inline-end: var(--size-10, 2.5rem)}
290
+ .p-inline-end-11 {padding-inline-end: var(--size-11, 2.75rem)}
291
+ .p-inline-end-12 {padding-inline-end: var(--size-12, 3rem)}
292
+ .p-inline-end-13 {padding-inline-end: var(--size-13, 3.25rem)}
293
+ .p-inline-end-14 {padding-inline-end: var(--size-14, 3.5rem)}
294
+ .p-inline-end-2 {padding-inline-end: var(--size-2, 0.5rem)}
295
+ .p-inline-end-3 {padding-inline-end: var(--size-3, 0.75rem)}
296
+ .p-inline-end-4 {padding-inline-end: var(--size-4, 1rem)}
297
+ .p-inline-end-5 {padding-inline-end: var(--size-5, 1.25rem)}
298
+ .p-inline-end-6 {padding-inline-end: var(--size-6, 1.5rem)}
299
+ .p-inline-end-7 {padding-inline-end: var(--size-7, 1.75rem)}
300
+ .p-inline-end-8 {padding-inline-end: var(--size-8, 2rem)}
301
+ .p-inline-end-9 {padding-inline-end: var(--size-9, 2.25rem)}
302
+ .p-inline-end-half {padding-inline-end: var(--size-half, 0.125rem)}
303
+ .p-inline-end-quarter {padding-inline-end: var(--size-quarter, 0.0625rem)}
304
+ .p-inline-half {padding-inline: var(--size-half, 0.125rem)}
305
+ .p-inline-quarter {padding-inline: var(--size-quarter, 0.0625rem)}
306
+ .p-inline-start-0 {padding-inline-start: var(--size-0, 0rem)}
307
+ .p-inline-start-1 {padding-inline-start: var(--size-1, 0.25rem)}
308
+ .p-inline-start-10 {padding-inline-start: var(--size-10, 2.5rem)}
309
+ .p-inline-start-11 {padding-inline-start: var(--size-11, 2.75rem)}
310
+ .p-inline-start-12 {padding-inline-start: var(--size-12, 3rem)}
311
+ .p-inline-start-13 {padding-inline-start: var(--size-13, 3.25rem)}
312
+ .p-inline-start-14 {padding-inline-start: var(--size-14, 3.5rem)}
313
+ .p-inline-start-2 {padding-inline-start: var(--size-2, 0.5rem)}
314
+ .p-inline-start-3 {padding-inline-start: var(--size-3, 0.75rem)}
315
+ .p-inline-start-4 {padding-inline-start: var(--size-4, 1rem)}
316
+ .p-inline-start-5 {padding-inline-start: var(--size-5, 1.25rem)}
317
+ .p-inline-start-6 {padding-inline-start: var(--size-6, 1.5rem)}
318
+ .p-inline-start-7 {padding-inline-start: var(--size-7, 1.75rem)}
319
+ .p-inline-start-8 {padding-inline-start: var(--size-8, 2rem)}
320
+ .p-inline-start-9 {padding-inline-start: var(--size-9, 2.25rem)}
321
+ .p-inline-start-half {padding-inline-start: var(--size-half, 0.125rem)}
322
+ .p-inline-start-quarter {padding-inline-start: var(--size-quarter, 0.0625rem)}
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, value);
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/font") ||
200
+ token.filePath.includes("typography")
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.7.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": "26c2dd1999bb7d25f55990841dbc2ae88f0d4665"
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}, ${ref.value})`;
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, value) => {
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}, ${value})}`,
169
+ );
170
+ classes.push(
171
+ `.p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name}, ${value})}`,
172
+ );
173
+ });
174
+
175
+ return classes;
176
+ };
177
+
178
+ module.exports = {
179
+ cssUtilsFormatter,
180
+ getVarValue,
181
+ generateBorderClasses,
182
+ generateColorClasses,
183
+ generateFontClasses,
184
+ generateSpacingClasses,
185
+ };