@servicetitan/hammer-token 2.1.1 → 2.3.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 (51) hide show
  1. package/.turbo/turbo-build.log +4 -1
  2. package/CHANGELOG.md +20 -0
  3. package/build/web/core/component-variables.scss +139 -0
  4. package/build/web/core/component.js +645 -0
  5. package/build/web/core/component.scss +69 -0
  6. package/build/web/core/css-utils/border.css +49 -29
  7. package/build/web/core/css-utils/color.css +231 -103
  8. package/build/web/core/css-utils/font.css +45 -43
  9. package/build/web/core/css-utils/spacing.css +71 -1
  10. package/build/web/core/css-utils/utils.css +576 -368
  11. package/build/web/core/index.js +2 -1
  12. package/build/web/core/raw.js +34 -24
  13. package/build/web/core/semantic-variables.scss +34 -24
  14. package/build/web/core/semantic.js +74 -24
  15. package/build/web/core/semantic.scss +16 -11
  16. package/config.js +97 -23
  17. package/package.json +3 -2
  18. package/src/global/primitive/breakpoint.js +19 -0
  19. package/src/global/primitive/color.js +231 -0
  20. package/src/global/primitive/duration.js +16 -0
  21. package/src/global/primitive/font.js +60 -0
  22. package/src/global/primitive/radius.js +31 -0
  23. package/src/global/primitive/size.js +55 -0
  24. package/src/global/primitive/transition.js +16 -0
  25. package/src/theme/core/background.js +170 -0
  26. package/src/theme/core/border.js +103 -0
  27. package/src/theme/core/component/button.js +708 -0
  28. package/src/theme/core/component/checkbox.js +405 -0
  29. package/src/theme/core/focus.js +35 -0
  30. package/src/theme/core/foreground.js +148 -0
  31. package/src/theme/core/overlay.js +137 -0
  32. package/src/theme/core/shadow.js +29 -0
  33. package/src/theme/core/status.js +49 -0
  34. package/src/theme/core/typography.js +82 -0
  35. package/src/utils/css-utils-format-utils.js +104 -34
  36. package/type/types.ts +75 -0
  37. package/src/global/primitive/breakpoint.json +0 -19
  38. package/src/global/primitive/color.json +0 -231
  39. package/src/global/primitive/duration.json +0 -16
  40. package/src/global/primitive/font.json +0 -60
  41. package/src/global/primitive/radius.json +0 -31
  42. package/src/global/primitive/size.json +0 -55
  43. package/src/global/primitive/transition.json +0 -16
  44. package/src/theme/core/background.json +0 -144
  45. package/src/theme/core/border.json +0 -87
  46. package/src/theme/core/focus.json +0 -31
  47. package/src/theme/core/foreground.json +0 -132
  48. package/src/theme/core/overlay.json +0 -134
  49. package/src/theme/core/shadow.json +0 -25
  50. package/src/theme/core/status.json +0 -46
  51. package/src/theme/core/typography.json +0 -79
package/build/web/core/css-utils/border.css CHANGED
@@ -1,33 +1,53 @@
1
1
  @layer starter, reset, base, state, application;
2
-
3
- .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
4
- .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
5
- .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
6
- .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
7
- .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
8
- .border-radius-circular {border-radius: 100%}
9
- .border-radius-large {border-radius: var(--radius-4, 0.75rem)}
10
- .border-radius-medium {border-radius: var(--radius-2, 0.375rem)}
11
- .border-radius-none {border-radius: var(--radius-0, 0)}
12
- .border-radius-small {border-radius: var(--radius-1, 0.1875rem)}
13
- .border-radius-xlarge {border-radius: var(--radius-8, 1.5rem)}
14
- .border-width-default {border-width: var(--size-quarter, 0.0625rem)}
15
- .border-width-none {border-width: var(--size-0, 0rem)}
16
- .border-width-strong {border-width: var(--size-half, 0.125rem)}
17
2
 
3
+ .border-color-danger {border-color: var(--border-color-danger, #e13212)}
4
+ .border-color-default {border-color: var(--border-color, #949596)}
5
+ .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
6
+ .border-color-strong {border-color: var(--border-color-strong, #444445)}
7
+ .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
8
+ .border-color-success {border-color: var(--border-color-success, #007A4D)}
9
+ .border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
10
+ .border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
11
+ .border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
12
+ .border-radius-none {border-radius: var(--border-radius-none, 0)}
13
+ .border-radius-small {border-radius: var(--border-radius-small, 0.1875rem)}
14
+ .border-radius-xlarge {border-radius: var(--border-radius-xlarge, 1.5rem)}
15
+ .border-width-default {border-width: var(--border-width, 0.0625rem)}
16
+ .border-width-none {border-width: var(--border-width-none, 0rem)}
17
+ .border-width-strong {border-width: var(--border-width-strong, 0.125rem)}
18
+
19
+ @supports (color: light-dark(#fff, #000)) {
20
+ .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
21
+ .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
22
+ .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
23
+ .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
24
+ .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
25
+ .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
26
+ }
27
+
18
28
  @layer application {
19
- .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
20
- .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
21
- .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
22
- .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
23
- .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
24
- .border-radius-circular {border-radius: 100%}
25
- .border-radius-large {border-radius: var(--radius-4, 0.75rem)}
26
- .border-radius-medium {border-radius: var(--radius-2, 0.375rem)}
27
- .border-radius-none {border-radius: var(--radius-0, 0)}
28
- .border-radius-small {border-radius: var(--radius-1, 0.1875rem)}
29
- .border-radius-xlarge {border-radius: var(--radius-8, 1.5rem)}
30
- .border-width-default {border-width: var(--size-quarter, 0.0625rem)}
31
- .border-width-none {border-width: var(--size-0, 0rem)}
32
- .border-width-strong {border-width: var(--size-half, 0.125rem)}
29
+ .border-color-danger {border-color: var(--border-color-danger, #e13212)}
30
+ .border-color-default {border-color: var(--border-color, #949596)}
31
+ .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
32
+ .border-color-strong {border-color: var(--border-color-strong, #444445)}
33
+ .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
34
+ .border-color-success {border-color: var(--border-color-success, #007A4D)}
35
+ .border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
36
+ .border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
37
+ .border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
38
+ .border-radius-none {border-radius: var(--border-radius-none, 0)}
39
+ .border-radius-small {border-radius: var(--border-radius-small, 0.1875rem)}
40
+ .border-radius-xlarge {border-radius: var(--border-radius-xlarge, 1.5rem)}
41
+ .border-width-default {border-width: var(--border-width, 0.0625rem)}
42
+ .border-width-none {border-width: var(--border-width-none, 0rem)}
43
+ .border-width-strong {border-width: var(--border-width-strong, 0.125rem)}
44
+
45
+ @supports (color: light-dark(#fff, #000)) {
46
+ .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
47
+ .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
48
+ .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
49
+ .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
50
+ .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
51
+ .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
52
+ }
33
53
  }
package/build/web/core/css-utils/color.css CHANGED
@@ -1,107 +1,235 @@
1
1
  @layer starter, reset, base, state, application;
2
-
3
- .bg-danger-default {background-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
4
- .bg-default {background-color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
5
- .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
6
- .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
7
- .bg-inverted-strong {background-color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
8
- .bg-overlay-active-danger {background-color: light-dark(#e132122E, #ff745f40)}
9
- .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
10
- .bg-overlay-active-on-danger {background-color: light-dark(#14141466, #14141429)}
11
- .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
12
- .bg-overlay-active-on-primary {background-color: light-dark(#14141466, #14141429)}
13
- .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
14
- .bg-overlay-hover-danger {background-color: light-dark(#e132120F, #ff745f1A)}
15
- .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
16
- .bg-overlay-hover-on-danger {background-color: light-dark(#14141433, #ffffff29)}
17
- .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
18
- .bg-overlay-hover-on-primary {background-color: light-dark(#14141433, #ffffff29)}
19
- .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
20
- .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
21
- .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
22
- .bg-status-danger {background-color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
23
- .bg-status-info {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
24
- .bg-status-success {background-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
25
- .bg-status-warning {background-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
26
- .bg-strong {background-color: light-dark(var(--color-neutral-30, #f7f7f7), var(--color-neutral-300, #2d2e31))}
27
- .bg-stronger {background-color: light-dark(var(--color-neutral-50, #eeeeee), var(--color-neutral-200, #444445))}
28
- .bg-strongest {background-color: light-dark(var(--color-neutral-70, #bcbcbd), var(--color-neutral-90, #737475))}
29
- .bg-warning-default {background-color: light-dark(var(--status-color-warning, #ffbe00), #ffe278)}
30
- .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
31
- .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
32
- .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
33
- .border-color-status-info {border-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
34
- .border-color-status-success {border-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
35
- .border-color-status-warning {border-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
36
- .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
37
- .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
38
- .c-active-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
39
- .c-active-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
40
- .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
41
- .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
42
- .c-hover-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
43
- .c-hover-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
44
- .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
45
- .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
46
- .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
47
- .c-on-warning {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-400, #141414))}
48
- .c-primary {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
49
- .c-status-danger {color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
50
- .c-status-info {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
51
- .c-status-success {color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
52
- .c-status-warning {color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
53
- .c-subdued {color: light-dark(var(--color-neutral-90, #737475), var(--color-neutral-70, #bcbcbd))}
54
2
 
3
+ .bg-danger-default {background-color: var(--background-color-danger, #e13212)}
4
+ .bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
5
+ .bg-default {background-color: var(--background-color, #ffffff)}
6
+ .bg-disabled {background-color: var(--background-color-disabled, #606162)}
7
+ .bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
8
+ .bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
9
+ .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
10
+ .bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
11
+ .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
12
+ .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
13
+ .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
14
+ .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
15
+ .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
16
+ .bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
17
+ .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
18
+ .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
19
+ .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
20
+ .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
21
+ .bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
22
+ .bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
23
+ .bg-status-danger {background-color: var(--status-color-danger, #e13212)}
24
+ .bg-status-info {background-color: var(--status-color-info, #0265DC)}
25
+ .bg-status-success {background-color: var(--status-color-success, #007A4D)}
26
+ .bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
27
+ .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
28
+ .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
29
+ .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
30
+ .bg-success-default {background-color: var(--background-color-success, #007A4D)}
31
+ .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
32
+ .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
33
+ .border-color-danger {border-color: var(--border-color-danger, #e13212)}
34
+ .border-color-default {border-color: var(--border-color, #949596)}
35
+ .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
36
+ .border-color-status-info {border-color: var(--status-color-info, #0265DC)}
37
+ .border-color-status-success {border-color: var(--status-color-success, #007A4D)}
38
+ .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
39
+ .border-color-strong {border-color: var(--border-color-strong, #444445)}
40
+ .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
41
+ .border-color-success {border-color: var(--border-color-success, #007A4D)}
42
+ .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
43
+ .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
44
+ .c-danger {color: var(--foreground-color-danger, #e13212)}
45
+ .c-default {color: var(--foreground-color, #141414)}
46
+ .c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
47
+ .c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
48
+ .c-inverted {color: var(--foreground-color-inverted, #ffffff)}
49
+ .c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
50
+ .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
51
+ .c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
52
+ .c-on-warning {color: var(--foreground-color-on-warning, #141414)}
53
+ .c-primary {color: var(--foreground-color-primary, #0265DC)}
54
+ .c-status-danger {color: var(--status-color-danger, #e13212)}
55
+ .c-status-info {color: var(--status-color-info, #0265DC)}
56
+ .c-status-success {color: var(--status-color-success, #007A4D)}
57
+ .c-status-warning {color: var(--status-color-warning, #ffbe00)}
58
+ .c-subdued {color: var(--foreground-color-subdued, #737475)}
59
+
60
+ @supports (color: light-dark(#fff, #000)) {
61
+ .bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
62
+ .bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
63
+ .bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
64
+ .bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
65
+ .bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
66
+ .bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
67
+ .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
68
+ .bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
69
+ .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
70
+ .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
71
+ .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
72
+ .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
73
+ .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
74
+ .bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
75
+ .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
76
+ .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
77
+ .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
78
+ .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
79
+ .bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
80
+ .bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
81
+ .bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
82
+ .bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
83
+ .bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
84
+ .bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
85
+ .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
86
+ .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
87
+ .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
88
+ .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
89
+ .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
90
+ .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
91
+ .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
92
+ .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
93
+ .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
94
+ .border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
95
+ .border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
96
+ .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
97
+ .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
98
+ .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
99
+ .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
100
+ .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
101
+ .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
102
+ .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
103
+ .c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
104
+ .c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
105
+ .c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
106
+ .c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
107
+ .c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
108
+ .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
109
+ .c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
110
+ .c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
111
+ .c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
112
+ .c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
113
+ .c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
114
+ .c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
115
+ .c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
116
+ .c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
117
+ }
118
+
55
119
  @layer application {
56
- .bg-danger-default {background-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
57
- .bg-default {background-color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
58
- .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
59
- .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
60
- .bg-inverted-strong {background-color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
61
- .bg-overlay-active-danger {background-color: light-dark(#e132122E, #ff745f40)}
62
- .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
63
- .bg-overlay-active-on-danger {background-color: light-dark(#14141466, #14141429)}
64
- .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
65
- .bg-overlay-active-on-primary {background-color: light-dark(#14141466, #14141429)}
66
- .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
67
- .bg-overlay-hover-danger {background-color: light-dark(#e132120F, #ff745f1A)}
68
- .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
69
- .bg-overlay-hover-on-danger {background-color: light-dark(#14141433, #ffffff29)}
70
- .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
71
- .bg-overlay-hover-on-primary {background-color: light-dark(#14141433, #ffffff29)}
72
- .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
73
- .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
74
- .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
75
- .bg-status-danger {background-color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
76
- .bg-status-info {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
77
- .bg-status-success {background-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
78
- .bg-status-warning {background-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
79
- .bg-strong {background-color: light-dark(var(--color-neutral-30, #f7f7f7), var(--color-neutral-300, #2d2e31))}
80
- .bg-stronger {background-color: light-dark(var(--color-neutral-50, #eeeeee), var(--color-neutral-200, #444445))}
81
- .bg-strongest {background-color: light-dark(var(--color-neutral-70, #bcbcbd), var(--color-neutral-90, #737475))}
82
- .bg-warning-default {background-color: light-dark(var(--status-color-warning, #ffbe00), #ffe278)}
83
- .border-color-danger {border-color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
84
- .border-color-default {border-color: light-dark(var(--color-neutral-80, #949596), var(--color-neutral-100, #606162))}
85
- .border-color-primary {border-color: light-dark(var(--status-color-info, #0265dc), #78bbfa)}
86
- .border-color-status-info {border-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
87
- .border-color-status-success {border-color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
88
- .border-color-status-warning {border-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
89
- .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
90
- .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
91
- .c-active-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
92
- .c-active-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
93
- .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
94
- .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
95
- .c-hover-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
96
- .c-hover-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
97
- .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
98
- .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
99
- .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
100
- .c-on-warning {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-400, #141414))}
101
- .c-primary {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
102
- .c-status-danger {color: light-dark(var(--color-red-500, #e13212), var(--color-red-300, #ff745f))}
103
- .c-status-info {color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
104
- .c-status-success {color: light-dark(var(--color-green-500, #007a4d), var(--color-green-300, #49cc93))}
105
- .c-status-warning {color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
106
- .c-subdued {color: light-dark(var(--color-neutral-90, #737475), var(--color-neutral-70, #bcbcbd))}
120
+ .bg-danger-default {background-color: var(--background-color-danger, #e13212)}
121
+ .bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
122
+ .bg-default {background-color: var(--background-color, #ffffff)}
123
+ .bg-disabled {background-color: var(--background-color-disabled, #606162)}
124
+ .bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
125
+ .bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
126
+ .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
127
+ .bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
128
+ .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
129
+ .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
130
+ .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
131
+ .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
132
+ .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
133
+ .bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
134
+ .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
135
+ .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
136
+ .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
137
+ .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
138
+ .bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
139
+ .bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
140
+ .bg-status-danger {background-color: var(--status-color-danger, #e13212)}
141
+ .bg-status-info {background-color: var(--status-color-info, #0265DC)}
142
+ .bg-status-success {background-color: var(--status-color-success, #007A4D)}
143
+ .bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
144
+ .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
145
+ .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
146
+ .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
147
+ .bg-success-default {background-color: var(--background-color-success, #007A4D)}
148
+ .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
149
+ .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
150
+ .border-color-danger {border-color: var(--border-color-danger, #e13212)}
151
+ .border-color-default {border-color: var(--border-color, #949596)}
152
+ .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
153
+ .border-color-status-info {border-color: var(--status-color-info, #0265DC)}
154
+ .border-color-status-success {border-color: var(--status-color-success, #007A4D)}
155
+ .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
156
+ .border-color-strong {border-color: var(--border-color-strong, #444445)}
157
+ .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
158
+ .border-color-success {border-color: var(--border-color-success, #007A4D)}
159
+ .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
160
+ .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
161
+ .c-danger {color: var(--foreground-color-danger, #e13212)}
162
+ .c-default {color: var(--foreground-color, #141414)}
163
+ .c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
164
+ .c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
165
+ .c-inverted {color: var(--foreground-color-inverted, #ffffff)}
166
+ .c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
167
+ .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
168
+ .c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
169
+ .c-on-warning {color: var(--foreground-color-on-warning, #141414)}
170
+ .c-primary {color: var(--foreground-color-primary, #0265DC)}
171
+ .c-status-danger {color: var(--status-color-danger, #e13212)}
172
+ .c-status-info {color: var(--status-color-info, #0265DC)}
173
+ .c-status-success {color: var(--status-color-success, #007A4D)}
174
+ .c-status-warning {color: var(--status-color-warning, #ffbe00)}
175
+ .c-subdued {color: var(--foreground-color-subdued, #737475)}
176
+
177
+ @supports (color: light-dark(#fff, #000)) {
178
+ .bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
179
+ .bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
180
+ .bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
181
+ .bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
182
+ .bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
183
+ .bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
184
+ .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
185
+ .bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
186
+ .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
187
+ .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
188
+ .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
189
+ .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
190
+ .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
191
+ .bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
192
+ .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
193
+ .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
194
+ .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
195
+ .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
196
+ .bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
197
+ .bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
198
+ .bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
199
+ .bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
200
+ .bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
201
+ .bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
202
+ .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
203
+ .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
204
+ .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
205
+ .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
206
+ .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
207
+ .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
208
+ .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
209
+ .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
210
+ .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
211
+ .border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
212
+ .border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
213
+ .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
214
+ .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
215
+ .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
216
+ .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
217
+ .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
218
+ .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
219
+ .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
220
+ .c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
221
+ .c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
222
+ .c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
223
+ .c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
224
+ .c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
225
+ .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
226
+ .c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
227
+ .c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
228
+ .c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
229
+ .c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
230
+ .c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
231
+ .c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
232
+ .c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
233
+ .c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
234
+ }
107
235
  }
package/build/web/core/css-utils/font.css CHANGED
@@ -1,47 +1,49 @@
1
1
  @layer starter, reset, base, state, application;
2
-
3
- .ff-heading {font-family: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif)}
4
- .ff-label {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
5
- .ff-paragraph {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
6
- .fs-heading-default {font-size: var(--font-size-500, 1.25rem)}
7
- .fs-heading-large {font-size: var(--font-size-600, 1.5rem)}
8
- .fs-heading-small {font-size: var(--font-size-400, 1rem)}
9
- .fs-heading-xlarge {font-size: var(--font-size-800, 2rem)}
10
- .fs-heading-xsmall {font-size: var(--font-size-300, 0.875rem)}
11
- .fs-label-default {font-size: var(--font-size-300, 0.875rem)}
12
- .fs-label-large {font-size: var(--font-size-400, 1rem)}
13
- .fs-label-small {font-size: var(--font-size-200, 0.75rem)}
14
- .fs-label-xlarge {font-size: var(--font-size-500, 1.25rem)}
15
- .fs-label-xsmall {font-size: var(--font-size-100, 0.625rem)}
16
- .fs-paragraph-default {font-size: var(--font-size-400, 1rem)}
17
- .fs-paragraph-large {font-size: var(--font-size-500, 1.25rem)}
18
- .fs-paragraph-small {font-size: var(--font-size-300, 0.875rem)}
19
- .fs-paragraph-xlarge {font-size: var(--font-size-600, 1.5rem)}
20
- .fs-paragraph-xsmall {font-size: var(--font-size-200, 0.75rem)}
21
- .fw-heading {font-weight: var(--font-weight-bold, 700)}
22
- .fw-label {font-weight: var(--font-weight-semibold, 600)}
23
- .fw-paragraph {font-weight: var(--font-weight-normal, 400)}
24
2
 
3
+ .ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
4
+ .ff-label {font-family: 'Nunito Sans', sans-serif}
5
+ .ff-paragraph {font-family: 'Nunito Sans', sans-serif}
6
+ .fs-heading-default {font-size: 1.25rem}
7
+ .fs-heading-large {font-size: 1.5rem}
8
+ .fs-heading-small {font-size: 1rem}
9
+ .fs-heading-xlarge {font-size: 2rem}
10
+ .fs-heading-xsmall {font-size: 0.875rem}
11
+ .fs-label-default {font-size: 0.875rem}
12
+ .fs-label-large {font-size: 1rem}
13
+ .fs-label-small {font-size: 0.75rem}
14
+ .fs-label-xlarge {font-size: 1.25rem}
15
+ .fs-label-xsmall {font-size: 0.625rem}
16
+ .fs-paragraph-default {font-size: 1rem}
17
+ .fs-paragraph-large {font-size: 1.25rem}
18
+ .fs-paragraph-small {font-size: 0.875rem}
19
+ .fs-paragraph-xlarge {font-size: 1.5rem}
20
+ .fs-paragraph-xsmall {font-size: 0.75rem}
21
+ .fw-heading {font-weight: 700}
22
+ .fw-label {font-weight: 600}
23
+ .fw-paragraph {font-weight: 400}
24
+
25
+
25
26
  @layer application {
26
- .ff-heading {font-family: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif)}
27
- .ff-label {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
28
- .ff-paragraph {font-family: var(--font-family-base, 'Nunito Sans', sans-serif)}
29
- .fs-heading-default {font-size: var(--font-size-500, 1.25rem)}
30
- .fs-heading-large {font-size: var(--font-size-600, 1.5rem)}
31
- .fs-heading-small {font-size: var(--font-size-400, 1rem)}
32
- .fs-heading-xlarge {font-size: var(--font-size-800, 2rem)}
33
- .fs-heading-xsmall {font-size: var(--font-size-300, 0.875rem)}
34
- .fs-label-default {font-size: var(--font-size-300, 0.875rem)}
35
- .fs-label-large {font-size: var(--font-size-400, 1rem)}
36
- .fs-label-small {font-size: var(--font-size-200, 0.75rem)}
37
- .fs-label-xlarge {font-size: var(--font-size-500, 1.25rem)}
38
- .fs-label-xsmall {font-size: var(--font-size-100, 0.625rem)}
39
- .fs-paragraph-default {font-size: var(--font-size-400, 1rem)}
40
- .fs-paragraph-large {font-size: var(--font-size-500, 1.25rem)}
41
- .fs-paragraph-small {font-size: var(--font-size-300, 0.875rem)}
42
- .fs-paragraph-xlarge {font-size: var(--font-size-600, 1.5rem)}
43
- .fs-paragraph-xsmall {font-size: var(--font-size-200, 0.75rem)}
44
- .fw-heading {font-weight: var(--font-weight-bold, 700)}
45
- .fw-label {font-weight: var(--font-weight-semibold, 600)}
46
- .fw-paragraph {font-weight: var(--font-weight-normal, 400)}
27
+ .ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
28
+ .ff-label {font-family: 'Nunito Sans', sans-serif}
29
+ .ff-paragraph {font-family: 'Nunito Sans', sans-serif}
30
+ .fs-heading-default {font-size: 1.25rem}
31
+ .fs-heading-large {font-size: 1.5rem}
32
+ .fs-heading-small {font-size: 1rem}
33
+ .fs-heading-xlarge {font-size: 2rem}
34
+ .fs-heading-xsmall {font-size: 0.875rem}
35
+ .fs-label-default {font-size: 0.875rem}
36
+ .fs-label-large {font-size: 1rem}
37
+ .fs-label-small {font-size: 0.75rem}
38
+ .fs-label-xlarge {font-size: 1.25rem}
39
+ .fs-label-xsmall {font-size: 0.625rem}
40
+ .fs-paragraph-default {font-size: 1rem}
41
+ .fs-paragraph-large {font-size: 1.25rem}
42
+ .fs-paragraph-small {font-size: 0.875rem}
43
+ .fs-paragraph-xlarge {font-size: 1.5rem}
44
+ .fs-paragraph-xsmall {font-size: 0.75rem}
45
+ .fw-heading {font-weight: 700}
46
+ .fw-label {font-weight: 600}
47
+ .fw-paragraph {font-weight: 400}
48
+
47
49
  }