@vsn-ux/gaia-styles 0.5.19 → 0.6.1

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 (97) hide show
  1. package/dist/all-10pt.css +514 -226
  2. package/dist/all-no-reset-10pt.css +507 -225
  3. package/dist/all-no-reset.css +507 -225
  4. package/dist/all.css +514 -226
  5. package/dist/base.css +1 -1
  6. package/dist/components/avatar.css +11 -2
  7. package/dist/components/badge.css +45 -12
  8. package/dist/components/button.css +19 -3
  9. package/dist/components/calendar.css +52 -20
  10. package/dist/components/card.css +112 -9
  11. package/dist/components/checkbox.css +17 -2
  12. package/dist/components/container.css +1 -1
  13. package/dist/components/datepicker.css +90 -1
  14. package/dist/components/dropdown.css +108 -4
  15. package/dist/components/form-field.css +19 -3
  16. package/dist/components/input.css +17 -2
  17. package/dist/components/link.css +22 -3
  18. package/dist/components/menu.css +102 -5
  19. package/dist/components/modal.css +12 -3
  20. package/dist/components/notification.css +14 -5
  21. package/dist/components/progress-bar.css +5 -5
  22. package/dist/components/progress-indicator.css +19 -4
  23. package/dist/components/quick-filter-button.css +18 -2
  24. package/dist/components/radio.css +25 -7
  25. package/dist/components/segmented-control.css +20 -5
  26. package/dist/components/select.css +49 -7
  27. package/dist/components/switch.css +22 -9
  28. package/dist/components/tabs.css +19 -3
  29. package/dist/components/tag.css +31 -16
  30. package/dist/components/text-area.css +17 -2
  31. package/dist/components/text-size.css +14 -14
  32. package/dist/components/tooltip.css +19 -7
  33. package/dist/components.css +293 -132
  34. package/dist/design-tokens.css +214 -93
  35. package/dist/design-tokens.d.ts +294 -197
  36. package/dist/design-tokens.js +552 -2153
  37. package/dist/docs/Avatar.md +52 -0
  38. package/dist/docs/Badge.md +60 -0
  39. package/dist/docs/Button.md +60 -0
  40. package/dist/docs/Calendar.md +468 -0
  41. package/dist/docs/Card.md +57 -0
  42. package/dist/docs/Checkbox.md +112 -0
  43. package/dist/docs/Container.md +62 -0
  44. package/dist/docs/Datepicker.md +107 -0
  45. package/dist/docs/Dropdown.md +152 -0
  46. package/dist/docs/FormField.md +101 -0
  47. package/dist/docs/Input.md +84 -0
  48. package/dist/docs/Link.md +109 -0
  49. package/dist/docs/Menu.md +316 -0
  50. package/dist/docs/Modal.md +337 -0
  51. package/dist/docs/Notification.md +341 -0
  52. package/dist/docs/ProgressBar.md +87 -0
  53. package/dist/docs/ProgressIndicator.md +217 -0
  54. package/dist/docs/QuickFilterButton.md +74 -0
  55. package/dist/docs/Radio.md +106 -0
  56. package/dist/docs/SegmentedControl.md +69 -0
  57. package/dist/docs/Select.md +411 -0
  58. package/dist/docs/Switch.md +97 -0
  59. package/dist/docs/Tabs.md +129 -0
  60. package/dist/docs/Tag.md +154 -0
  61. package/dist/docs/TextArea.md +51 -0
  62. package/dist/docs/TextSize.md +63 -0
  63. package/dist/docs/Tooltip.md +95 -0
  64. package/dist/reset.css +8 -2
  65. package/package.json +33 -32
  66. package/src/design-tokens/desktop-overrides.json +62 -0
  67. package/src/design-tokens/dtcg-tokens.json +1345 -184
  68. package/src/design-tokens/resolver.json +22 -0
  69. package/src/styles/all-10pt.css +1 -0
  70. package/src/styles/all-no-reset-10pt.css +1 -0
  71. package/src/styles/all-no-reset.css +1 -0
  72. package/src/styles/all.css +1 -0
  73. package/src/styles/components/badge.css +6 -6
  74. package/src/styles/components/button.css +2 -2
  75. package/src/styles/components/calendar.css +4 -4
  76. package/src/styles/components/card.css +8 -4
  77. package/src/styles/components/checkbox.css +1 -1
  78. package/src/styles/components/datepicker.css +1 -1
  79. package/src/styles/components/dropdown.css +2 -2
  80. package/src/styles/components/form-field.css +1 -1
  81. package/src/styles/components/input.css +1 -1
  82. package/src/styles/components/link.css +1 -1
  83. package/src/styles/components/menu.css +2 -2
  84. package/src/styles/components/notification.css +1 -1
  85. package/src/styles/components/progress-bar.css +1 -1
  86. package/src/styles/components/progress-indicator.css +1 -1
  87. package/src/styles/components/quick-filter-button.css +1 -1
  88. package/src/styles/components/radio.css +1 -1
  89. package/src/styles/components/segmented-control.css +3 -3
  90. package/src/styles/components/select.css +1 -1
  91. package/src/styles/components/switch.css +3 -3
  92. package/src/styles/components/tabs.css +2 -2
  93. package/src/styles/components/tag.css +12 -17
  94. package/src/styles/components/text-area.css +1 -1
  95. package/src/styles/components/text-size.css +7 -7
  96. package/src/styles/theme.css +16 -8
  97. package/src/styles/utilities.css +34 -0
package/dist/design-tokens.css CHANGED
@@ -3,87 +3,160 @@
3
3
  * ------------------------------------------- */
4
4
 
5
5
  :root, :host {
6
- --ga-color-black: #000000;
6
+ --ga-color-black: #000;
7
7
  --ga-color-blue-10: #edf4fe;
8
+ --ga-color-information-accent: var(--ga-color-utility-blue-accent);
9
+ --ga-color-surface-information: var(--ga-color-information-accent);
10
+ --ga-color-utility-blue-accent: var(--ga-color-blue-10);
8
11
  --ga-color-blue-40: #93bbf9;
12
+ --ga-color-utility-blue: var(--ga-color-blue-40);
9
13
  --ga-color-blue-60: #366af6;
10
- --ga-color-blue-70: #1f4ddb;
14
+ --ga-color-border-information: var(--ga-color-information);
15
+ --ga-color-icon-information: var(--ga-color-information);
16
+ --ga-color-information: var(--ga-color-blue-60);
11
17
  --ga-color-border-action: var(--ga-color-primary);
12
18
  --ga-color-border-action-hover: var(--ga-color-primary-60);
13
19
  --ga-color-border-action-hover-2: var(--ga-color-secondary-30);
14
20
  --ga-color-border-disabled: var(--ga-color-neutral);
15
21
  --ga-color-border-error: var(--ga-color-error);
16
22
  --ga-color-border-focus: var(--ga-color-primary);
17
- --ga-color-border-information: var(--ga-color-information);
18
23
  --ga-color-border-primary: var(--ga-color-neutral-60);
19
24
  --ga-color-border-secondary: var(--ga-color-secondary-30);
20
25
  --ga-color-border-selected: var(--ga-color-green-60);
21
26
  --ga-color-border-success: var(--ga-color-success);
22
27
  --ga-color-border-tertiary: var(--ga-color-neutral);
23
28
  --ga-color-border-warning: var(--ga-color-warning);
29
+ --ga-color-categorical-graph-01: #6769d8;
30
+ --ga-color-categorical-graph-02: #479fc6;
31
+ --ga-color-categorical-graph-03: var(--ga-color-teal-70);
32
+ --ga-color-categorical-graph-04: #c0497d;
33
+ --ga-color-categorical-graph-05: #041255;
34
+ --ga-color-categorical-graph-06: #dc756b;
35
+ --ga-color-categorical-graph-07: var(--ga-color-rose-40);
36
+ --ga-color-categorical-graph-08: #984319;
37
+ --ga-color-categorical-graph-09: var(--ga-color-indigo-40);
38
+ --ga-color-categorical-graph-10: #610f08;
24
39
  --ga-color-cyan-60: #377ea0;
40
+ --ga-color-icon-action-hover: var(--ga-color-primary-60);
41
+ --ga-color-primary-60: var(--ga-color-cyan-60);
42
+ --ga-color-surface-progress-2: var(--ga-color-primary-60);
25
43
  --ga-color-cyan-70: #2a6480;
44
+ --ga-color-primary-70: var(--ga-color-cyan-70);
45
+ --ga-color-surface-progress: var(--ga-color-primary-70);
46
+ --ga-color-text-body-secondary: var(--ga-color-primary-70);
26
47
  --ga-color-cyan-80: #1f4e66;
48
+ --ga-color-icon-action: var(--ga-color-primary);
49
+ --ga-color-primary: var(--ga-color-cyan-80);
50
+ --ga-color-surface-action: var(--ga-color-primary);
51
+ --ga-color-text-action: var(--ga-color-primary);
27
52
  --ga-color-cyan-90: #133445;
53
+ --ga-color-icon-primary: var(--ga-color-primary-90);
54
+ --ga-color-primary-90: var(--ga-color-cyan-90);
55
+ --ga-color-surface-action-hover: var(--ga-color-primary-90);
56
+ --ga-color-text-action-hover: var(--ga-color-primary-90);
57
+ --ga-color-text-body: var(--ga-color-primary-90);
58
+ --ga-color-text-error: var(--ga-color-primary-90);
59
+ --ga-color-text-headings: var(--ga-color-primary-90);
60
+ --ga-color-text-information: var(--ga-color-primary-90);
61
+ --ga-color-text-success: var(--ga-color-primary-90);
62
+ --ga-color-text-warning: var(--ga-color-primary-90);
63
+ --ga-color-diverging-graph-01: #281986;
64
+ --ga-color-diverging-graph-02: #3d37a3;
65
+ --ga-color-diverging-graph-03: #504fba;
66
+ --ga-color-diverging-graph-04: #6769d8;
67
+ --ga-color-diverging-graph-05: #8489f5;
68
+ --ga-color-diverging-graph-06: var(--ga-color-indigo-40);
69
+ --ga-color-diverging-graph-07: #c5cbfb;
70
+ --ga-color-diverging-graph-08: var(--ga-color-indigo-10);
71
+ --ga-color-diverging-graph-09: var(--ga-color-teal-30);
72
+ --ga-color-diverging-graph-10: var(--ga-color-teal-40);
73
+ --ga-color-diverging-graph-11: var(--ga-color-teal-50);
74
+ --ga-color-diverging-graph-12: var(--ga-color-teal-60);
75
+ --ga-color-diverging-graph-13: var(--ga-color-teal-70);
76
+ --ga-color-diverging-graph-14: var(--ga-color-teal-80);
77
+ --ga-color-diverging-graph-15: var(--ga-color-teal-90);
28
78
  --ga-color-error: var(--ga-color-red-60);
29
- --ga-color-error-light: var(--ga-color-utility-red-light);
79
+ --ga-color-icon-error: var(--ga-color-error);
80
+ --ga-color-error-accent: var(--ga-color-utility-red-accent);
30
81
  --ga-color-green-10: #eef5ee;
82
+ --ga-color-success-accent: var(--ga-color-utility-green-accent);
83
+ --ga-color-surface-selected: var(--ga-color-green-10);
84
+ --ga-color-surface-success: var(--ga-color-success-accent);
85
+ --ga-color-utility-green-accent: var(--ga-color-green-10);
31
86
  --ga-color-green-40: #9bc59b;
87
+ --ga-color-utility-green: var(--ga-color-green-40);
32
88
  --ga-color-green-60: #448548;
33
- --ga-color-green-70: #2e6b31;
89
+ --ga-color-icon-success: var(--ga-color-success);
90
+ --ga-color-success: var(--ga-color-green-60);
34
91
  --ga-color-grey-10: #f2f2f2;
92
+ --ga-color-utility-grey-accent: var(--ga-color-grey-10);
35
93
  --ga-color-grey-40: #b9b9b9;
36
- --ga-color-icon-action: var(--ga-color-primary);
37
- --ga-color-icon-action-hover: var(--ga-color-primary-60);
94
+ --ga-color-text-disabled: var(--ga-color-utility-grey);
95
+ --ga-color-utility-grey: var(--ga-color-grey-40);
38
96
  --ga-color-icon-disabled: var(--ga-color-neutral);
39
- --ga-color-icon-error: var(--ga-color-error);
40
- --ga-color-icon-information: var(--ga-color-information);
41
97
  --ga-color-icon-on-action: var(--ga-color-secondary);
42
98
  --ga-color-icon-on-disabled: var(--ga-color-neutral-60);
43
99
  --ga-color-icon-on-primary: var(--ga-color-white);
44
- --ga-color-icon-pictograms-pictogram-emphasis: #377ea03d;
45
- --ga-color-icon-pictograms-pictogram-fill: #b9b9b914;
46
- --ga-color-icon-primary: var(--ga-color-primary-90);
47
- --ga-color-icon-success: var(--ga-color-success);
48
100
  --ga-color-icon-warning: var(--ga-color-warning);
49
101
  --ga-color-indigo-10: #f0f2fe;
102
+ --ga-color-utility-indigo-accent: var(--ga-color-indigo-10);
50
103
  --ga-color-indigo-40: #adb4f9;
51
- --ga-color-information: var(--ga-color-blue-60);
52
- --ga-color-information-light: var(--ga-color-utility-blue-light);
104
+ --ga-color-utility-indigo: var(--ga-color-indigo-40);
53
105
  --ga-color-lime-10: #edf6dd;
106
+ --ga-color-utility-lime-accent: var(--ga-color-lime-10);
54
107
  --ga-color-lime-40: #a5c656;
108
+ --ga-color-utility-lime: var(--ga-color-lime-40);
55
109
  --ga-color-miscellaneous-overlay: #70778891;
56
110
  --ga-color-miscellaneous-skeleton-element: var(--ga-color-neutral-10);
57
111
  --ga-color-miscellaneous-skeleton-highlight: var(--ga-color-neutral-20);
58
112
  --ga-color-neutral: var(--ga-color-neutral-30);
59
113
  --ga-color-neutral-10: #f2f3f5;
114
+ --ga-color-surface-page: var(--ga-color-neutral-10);
60
115
  --ga-color-neutral-20: #e2e4e9;
116
+ --ga-color-surface-container: var(--ga-color-neutral-20);
117
+ --ga-color-surface-disabled: var(--ga-color-neutral-20);
61
118
  --ga-color-neutral-30: #cccfd7;
62
- --ga-color-neutral-50: #8f95a4;
63
119
  --ga-color-neutral-60: #6f7687;
120
+ --ga-color-surface-disable-selected: var(--ga-color-neutral-60);
121
+ --ga-color-text-disable-selected: var(--ga-color-neutral-60);
122
+ --ga-color-text-on-disabled: var(--ga-color-neutral-60);
64
123
  --ga-color-orange-10: #fcf0e7;
124
+ --ga-color-secondary-10: var(--ga-color-orange-10);
125
+ --ga-color-surface-warning: var(--ga-color-utility-orange-accent);
126
+ --ga-color-text-on-action: var(--ga-color-secondary-10);
127
+ --ga-color-utility-orange-accent: var(--ga-color-orange-10);
128
+ --ga-color-warning-accent: var(--ga-color-utility-orange-accent);
65
129
  --ga-color-orange-20: #fae0ce;
130
+ --ga-color-secondary: var(--ga-color-orange-20);
131
+ --ga-color-surface-action-hover-2: var(--ga-color-orange-20);
132
+ --ga-color-text-menu: var(--ga-color-secondary);
66
133
  --ga-color-orange-30: #f5c3a1;
134
+ --ga-color-secondary-30: var(--ga-color-orange-30);
135
+ --ga-color-surface-highlight: var(--ga-color-secondary-30);
67
136
  --ga-color-orange-40: #f2a676;
137
+ --ga-color-utility-orange: var(--ga-color-orange-40);
68
138
  --ga-color-orange-60: #bb5822;
139
+ --ga-color-warning: var(--ga-color-orange-60);
69
140
  --ga-color-pink-10: #fbeefc;
141
+ --ga-color-utility-pink-accent: var(--ga-color-pink-10);
70
142
  --ga-color-pink-40: #e79dee;
71
- --ga-color-primary: var(--ga-color-cyan-80);
72
- --ga-color-primary-60: var(--ga-color-cyan-60);
73
- --ga-color-primary-70: var(--ga-color-cyan-70);
74
- --ga-color-primary-90: var(--ga-color-cyan-90);
143
+ --ga-color-utility-pink: var(--ga-color-pink-40);
75
144
  --ga-color-purple-10: #f3f1fe;
145
+ --ga-color-utility-purple-accent: var(--ga-color-purple-10);
76
146
  --ga-color-purple-40: #c3acf9;
147
+ --ga-color-utility-purple: var(--ga-color-purple-40);
77
148
  --ga-color-purple-80: #591ab5;
149
+ --ga-color-text-link-visited: var(--ga-color-purple-80);
78
150
  --ga-color-red-10: #fcf1ee;
151
+ --ga-color-surface-error: var(--ga-color-utility-red-accent);
152
+ --ga-color-utility-red-accent: var(--ga-color-red-10);
79
153
  --ga-color-red-40: #eca79e;
154
+ --ga-color-utility-red: var(--ga-color-red-40);
80
155
  --ga-color-red-60: #cc453e;
81
- --ga-color-red-70: #b0241d;
82
156
  --ga-color-rose-10: #fcf0f4;
157
+ --ga-color-utility-rose-accent: var(--ga-color-rose-10);
83
158
  --ga-color-rose-40: #efa1bd;
84
- --ga-color-secondary: var(--ga-color-orange-20);
85
- --ga-color-secondary-10: var(--ga-color-orange-10);
86
- --ga-color-secondary-30: var(--ga-color-orange-30);
159
+ --ga-color-utility-rose: var(--ga-color-rose-40);
87
160
  --ga-color-sequential-graph-10: var(--ga-color-teal-10);
88
161
  --ga-color-sequential-graph-20: var(--ga-color-teal-20);
89
162
  --ga-color-sequential-graph-30: var(--ga-color-teal-30);
@@ -94,74 +167,36 @@
94
167
  --ga-color-sequential-graph-80: var(--ga-color-teal-80);
95
168
  --ga-color-sequential-graph-90: var(--ga-color-teal-90);
96
169
  --ga-color-sequential-graph-100: var(--ga-color-teal-100);
97
- --ga-color-success: var(--ga-color-green-60);
98
- --ga-color-success-light: var(--ga-color-utility-green-light);
99
- --ga-color-surface-action: var(--ga-color-primary);
100
- --ga-color-surface-action-hover: var(--ga-color-primary-90);
101
- --ga-color-surface-action-hover-2: var(--ga-color-orange-20);
102
- --ga-color-surface-disable-selected: var(--ga-color-neutral-60);
103
- --ga-color-surface-disabled: var(--ga-color-neutral-20);
104
- --ga-color-surface-error: var(--ga-color-utility-red-light);
105
- --ga-color-surface-information: var(--ga-color-information-light);
106
- --ga-color-surface-page: var(--ga-color-neutral-10);
107
170
  --ga-color-surface-primary: var(--ga-color-white);
108
- --ga-color-surface-selected: var(--ga-color-green-10);
109
- --ga-color-surface-success: var(--ga-color-success-light);
110
- --ga-color-surface-warning: var(--ga-color-utility-orange-light);
111
171
  --ga-color-teal-10: #ecf5f4;
172
+ --ga-color-utility-teal-accent: var(--ga-color-teal-10);
112
173
  --ga-color-teal-20: #d5e8e6;
113
174
  --ga-color-teal-30: #b4d7d4;
114
175
  --ga-color-teal-40: #92c3c0;
176
+ --ga-color-utility-teal: var(--ga-color-teal-40);
115
177
  --ga-color-teal-50: #51a39e;
116
178
  --ga-color-teal-60: #3a837e;
117
179
  --ga-color-teal-70: #2c6764;
118
180
  --ga-color-teal-80: #21514e;
119
181
  --ga-color-teal-90: #143734;
120
182
  --ga-color-teal-100: #081f1f;
121
- --ga-color-text-action: var(--ga-color-primary);
122
- --ga-color-text-action-hover: var(--ga-color-primary-90);
123
- --ga-color-text-body: var(--ga-color-primary-90);
124
- --ga-color-text-body-secondary: var(--ga-color-primary-70);
125
- --ga-color-text-disable-selected: var(--ga-color-neutral-60);
126
- --ga-color-text-disabled: var(--ga-color-utility-grey);
127
- --ga-color-text-error: var(--ga-color-primary-90);
128
- --ga-color-text-headings: var(--ga-color-primary-90);
129
- --ga-color-text-information: var(--ga-color-primary-90);
130
- --ga-color-text-link-visited: var(--ga-color-purple-80);
131
- --ga-color-text-menu: var(--ga-color-secondary);
132
- --ga-color-text-on-action: var(--ga-color-secondary-10);
133
- --ga-color-text-on-disabled: var(--ga-color-neutral-60);
134
- --ga-color-text-success: var(--ga-color-primary-90);
135
- --ga-color-text-warning: var(--ga-color-primary-90);
136
- --ga-color-utility-blue: var(--ga-color-blue-40);
137
- --ga-color-utility-blue-light: var(--ga-color-blue-10);
138
- --ga-color-utility-green: var(--ga-color-green-40);
139
- --ga-color-utility-green-light: var(--ga-color-green-10);
140
- --ga-color-utility-grey: var(--ga-color-grey-40);
141
- --ga-color-utility-grey-light: var(--ga-color-grey-10);
142
- --ga-color-utility-indigo: var(--ga-color-indigo-40);
143
- --ga-color-utility-indigo-light: var(--ga-color-indigo-10);
144
- --ga-color-utility-lime: var(--ga-color-lime-40);
145
- --ga-color-utility-lime-light: var(--ga-color-lime-10);
146
- --ga-color-utility-orange: var(--ga-color-orange-40);
147
- --ga-color-utility-orange-light: var(--ga-color-orange-10);
148
- --ga-color-utility-pink: var(--ga-color-pink-40);
149
- --ga-color-utility-pink-light: var(--ga-color-pink-10);
150
- --ga-color-utility-purple: var(--ga-color-purple-40);
151
- --ga-color-utility-purple-light: var(--ga-color-purple-10);
152
- --ga-color-utility-red: var(--ga-color-red-40);
153
- --ga-color-utility-red-light: var(--ga-color-red-10);
154
- --ga-color-utility-rose: var(--ga-color-rose-40);
155
- --ga-color-utility-rose-light: var(--ga-color-rose-10);
156
- --ga-color-utility-teal: var(--ga-color-teal-40);
157
- --ga-color-utility-teal-light: var(--ga-color-teal-10);
158
- --ga-color-utility-yellow: var(--ga-color-yellow-40);
159
- --ga-color-utility-yellow-light: var(--ga-color-yellow-10);
160
- --ga-color-warning: var(--ga-color-orange-60);
161
- --ga-color-warning-light: var(--ga-color-utility-orange-light);
162
- --ga-color-white: #ffffff;
163
- --ga-color-yellow-10: #fdf5ae;
164
- --ga-color-yellow-40: #e1b402;
183
+ --ga-color-white: #fff;
184
+ --ga-duration-0: 0ms;
185
+ --ga-duration-fast: 100ms;
186
+ --ga-transition-state: var(--ga-duration-fast) 0ms var(--ga-easing-standard);
187
+ --ga-duration-instant: 50ms;
188
+ --ga-transition-hover: var(--ga-duration-instant) 0ms var(--ga-easing-standard);
189
+ --ga-duration-moderate: 150ms;
190
+ --ga-transition-dismiss: var(--ga-duration-moderate) 0ms var(--ga-easing-exit);
191
+ --ga-transition-reveal: var(--ga-duration-moderate) 0ms var(--ga-easing-entrance);
192
+ --ga-duration-slow: 250ms;
193
+ --ga-transition-overlay-in: var(--ga-duration-slow) 0ms var(--ga-easing-entrance);
194
+ --ga-transition-overlay-out: var(--ga-duration-slow) 0ms var(--ga-easing-exit);
195
+ --ga-duration-slower: 400ms;
196
+ --ga-transition-backdrop: var(--ga-duration-slower) 0ms var(--ga-easing-standard);
197
+ --ga-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9);
198
+ --ga-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
199
+ --ga-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
165
200
  --ga-font-family-primary: "Inter", -system-ui, sans-serif;
166
201
  --ga-font-weight-bold: 700;
167
202
  --ga-font-weight-medium: 500;
@@ -170,6 +205,46 @@
170
205
  --ga-radius: 4px;
171
206
  --ga-radius-round: 999px;
172
207
  --ga-radius-sharp: 0.02rem;
208
+ --ga-shadow-east: -2px 0 5px 0 #1334451a, -8px 0 8px 0 #13344517, -19px 0 11px 0 #1334450d, -34px 0 14px 0 #13344503, -53px 0 15px 0 #13344500;
209
+ --ga-shadow-north: 0 4px 8px 0 #1334451a, 0 15px 15px 0 #13344517, 0 34px 21px 0 #1334450d, 0 61px 24px 0 #13344503, 0 95px 27px 0 #13344500;
210
+ --ga-shadow-south: 0 -1px 1px 0 #13344514, 0 -2px 2px 0 #13344512, 0 -6px 3px 0 #1334450a, 0 -10px 4px 0 #13344503, 0 -15px 4px 0 #13344500;
211
+ --ga-shadow-west: 1px 0 3px 0 #1334451a, 5px 0 5px 0 #13344517, 12px 0 7px 0 #1334450d, 21px 0 8px 0 #13344503, 33px 0 9px 0 #13344500;
212
+ --ga-size-0: 0;
213
+ --ga-size-1: 0.0625rem;
214
+ --ga-size-2: 0.125rem;
215
+ --ga-size-4: 0.25rem;
216
+ --ga-size-6: 0.375rem;
217
+ --ga-size-8: 0.5rem;
218
+ --ga-size-10: 0.625rem;
219
+ --ga-size-11: 0.6875rem;
220
+ --ga-size-12: 0.75rem;
221
+ --ga-size-14: 0.875rem;
222
+ --ga-size-16: 1rem;
223
+ --ga-size-18: 1.125rem;
224
+ --ga-size-20: 1.25rem;
225
+ --ga-size-24: 1.5rem;
226
+ --ga-size-28: 1.75rem;
227
+ --ga-size-32: 2rem;
228
+ --ga-size-36: 2.25rem;
229
+ --ga-size-40: 2.5rem;
230
+ --ga-size-44: 2.75rem;
231
+ --ga-size-48: 3rem;
232
+ --ga-size-56: 3.5rem;
233
+ --ga-size-64: 4rem;
234
+ --ga-size-80: 5rem;
235
+ --ga-size-96: 6rem;
236
+ --ga-size-112: 7rem;
237
+ --ga-size-128: 8rem;
238
+ --ga-size-144: 9rem;
239
+ --ga-size-160: 10rem;
240
+ --ga-size-192: 12rem;
241
+ --ga-size-224: 14rem;
242
+ --ga-size-256: 16rem;
243
+ --ga-size-288: 18rem;
244
+ --ga-size-320: 20rem;
245
+ --ga-size-352: 22rem;
246
+ --ga-size-384: 24rem;
247
+ --ga-size-416: 26rem;
173
248
  --ga-size-border-width-lg: 4px;
174
249
  --ga-size-border-width-md: 2px;
175
250
  --ga-size-border-width-none: 0;
@@ -190,31 +265,77 @@
190
265
  --ga-size-spacing-13: 10rem;
191
266
  --ga-text-2xl-font-size: 1.5rem;
192
267
  --ga-text-2xl-font-style: normal;
193
- --ga-text-2xl-line-height: 2.25rem;
194
- --ga-text-2xl-tracking: -0.019rem;
195
- --ga-text-3xl-font-size: 2.25rem;
268
+ --ga-text-2xl-line-height: 2rem;
269
+ --ga-text-2xl-font-family: inherit;
270
+ --ga-text-2xl-font-weight: 400;
271
+ --ga-text-2xl-letter-spacing: -0.019rem;
272
+ --ga-text-2xl: var(--ga-text-2xl-font-style) var(--ga-text-2xl-font-weight) var(--ga-text-2xl-font-size)/var(--ga-text-2xl-line-height) var(--ga-text-2xl-font-family);
273
+ --ga-text-3xl-font-size: 2rem;
196
274
  --ga-text-3xl-font-style: normal;
197
- --ga-text-3xl-line-height: 3.5rem;
198
- --ga-text-3xl-tracking: -0.022rem;
275
+ --ga-text-3xl-line-height: 2.5rem;
276
+ --ga-text-3xl-font-family: inherit;
277
+ --ga-text-3xl-font-weight: 400;
278
+ --ga-text-3xl-letter-spacing: -0.022rem;
279
+ --ga-text-3xl: var(--ga-text-3xl-font-style) var(--ga-text-3xl-font-weight) var(--ga-text-3xl-font-size)/var(--ga-text-3xl-line-height) var(--ga-text-3xl-font-family);
199
280
  --ga-text-lg-font-size: 1rem;
200
281
  --ga-text-lg-font-style: normal;
201
282
  --ga-text-lg-line-height: 1.5rem;
202
- --ga-text-lg-tracking: -0.011rem;
283
+ --ga-text-lg-font-family: inherit;
284
+ --ga-text-lg-font-weight: 400;
285
+ --ga-text-lg-letter-spacing: -0.011rem;
286
+ --ga-text-lg: var(--ga-text-lg-font-style) var(--ga-text-lg-font-weight) var(--ga-text-lg-font-size)/var(--ga-text-lg-line-height) var(--ga-text-lg-font-family);
203
287
  --ga-text-md-font-size: 0.875rem;
204
288
  --ga-text-md-font-style: normal;
205
289
  --ga-text-md-line-height: 1.25rem;
206
- --ga-text-md-tracking: -0.006rem;
290
+ --ga-text-md-font-family: inherit;
291
+ --ga-text-md-font-weight: 400;
292
+ --ga-text-md-letter-spacing: -0.006rem;
293
+ --ga-text-md: var(--ga-text-md-font-style) var(--ga-text-md-font-weight) var(--ga-text-md-font-size)/var(--ga-text-md-line-height) var(--ga-text-md-font-family);
207
294
  --ga-text-sm-font-size: 0.75rem;
208
295
  --ga-text-sm-font-style: normal;
209
296
  --ga-text-sm-line-height: 1.25rem;
210
- --ga-text-sm-tracking: 0;
211
- --ga-text-xl-font-size: 1.25rem;
297
+ --ga-text-sm-font-family: inherit;
298
+ --ga-text-sm-font-weight: 400;
299
+ --ga-text-sm-letter-spacing: 0;
300
+ --ga-text-sm: var(--ga-text-sm-font-style) var(--ga-text-sm-font-weight) var(--ga-text-sm-font-size)/var(--ga-text-sm-line-height) var(--ga-text-sm-font-family);
301
+ --ga-text-xl-font-size: 1.125rem;
212
302
  --ga-text-xl-font-style: normal;
213
- --ga-text-xl-line-height: 2rem;
214
- --ga-text-xl-tracking: -0.017rem;
303
+ --ga-text-xl-line-height: 1.5rem;
304
+ --ga-text-xl-font-family: inherit;
305
+ --ga-text-xl-font-weight: 400;
306
+ --ga-text-xl-letter-spacing: -0.017rem;
307
+ --ga-text-xl: var(--ga-text-xl-font-style) var(--ga-text-xl-font-weight) var(--ga-text-xl-font-size)/var(--ga-text-xl-line-height) var(--ga-text-xl-font-family);
215
308
  --ga-text-xs-font-size: 0.6875rem;
216
309
  --ga-text-xs-font-style: normal;
217
310
  --ga-text-xs-line-height: 1rem;
218
- --ga-text-xs-tracking: 0.005rem;
311
+ --ga-text-xs-font-family: inherit;
312
+ --ga-text-xs-font-weight: 400;
313
+ --ga-text-xs-letter-spacing: 0.005rem;
314
+ --ga-text-xs: var(--ga-text-xs-font-style) var(--ga-text-xs-font-weight) var(--ga-text-xs-font-size)/var(--ga-text-xs-line-height) var(--ga-text-xs-font-family);
219
315
  }
220
316
 
317
+ @media (width >= 48rem) {
318
+ :root, :host {
319
+ --ga-text-2xl-font-size: 1.5rem;
320
+ --ga-text-2xl-font-style: normal;
321
+ --ga-text-2xl-line-height: 2.5rem;
322
+ --ga-text-2xl-font-family: inherit;
323
+ --ga-text-2xl-font-weight: 400;
324
+ --ga-text-2xl-letter-spacing: -0.019rem;
325
+ --ga-text-2xl: var(--ga-text-2xl-font-style) var(--ga-text-2xl-font-weight) var(--ga-text-2xl-font-size)/var(--ga-text-2xl-line-height) var(--ga-text-2xl-font-family);
326
+ --ga-text-3xl-font-size: 2.25rem;
327
+ --ga-text-3xl-font-style: normal;
328
+ --ga-text-3xl-line-height: 3rem;
329
+ --ga-text-3xl-font-family: inherit;
330
+ --ga-text-3xl-font-weight: 400;
331
+ --ga-text-3xl-letter-spacing: -0.022rem;
332
+ --ga-text-3xl: var(--ga-text-3xl-font-style) var(--ga-text-3xl-font-weight) var(--ga-text-3xl-font-size)/var(--ga-text-3xl-line-height) var(--ga-text-3xl-font-family);
333
+ --ga-text-xl-font-size: 1.25rem;
334
+ --ga-text-xl-font-style: normal;
335
+ --ga-text-xl-line-height: 2rem;
336
+ --ga-text-xl-font-family: inherit;
337
+ --ga-text-xl-font-weight: 400;
338
+ --ga-text-xl-letter-spacing: -0.017rem;
339
+ --ga-text-xl: var(--ga-text-xl-font-style) var(--ga-text-xl-font-weight) var(--ga-text-xl-font-size)/var(--ga-text-xl-line-height) var(--ga-text-xl-font-family);
340
+ }
341
+ }