@kwtv/components 0.3.0 → 0.5.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 (49) hide show
  1. package/README.md +35 -0
  2. package/package.json +2 -2
  3. package/src/astro/Accordion.astro +10 -6
  4. package/src/astro/AccordionItem.astro +47 -43
  5. package/src/astro/ActiveFilterTags.astro +29 -25
  6. package/src/astro/Alert.astro +46 -41
  7. package/src/astro/Badge.astro +80 -76
  8. package/src/astro/Band.astro +104 -58
  9. package/src/astro/Breadcrumb.astro +33 -29
  10. package/src/astro/Button.astro +132 -128
  11. package/src/astro/Card.astro +64 -60
  12. package/src/astro/CartLine.astro +59 -55
  13. package/src/astro/Checkbox.astro +37 -32
  14. package/src/astro/Chip.astro +68 -64
  15. package/src/astro/DotGrid.astro +50 -46
  16. package/src/astro/EmptyState.astro +26 -22
  17. package/src/astro/FilterGroup.astro +29 -25
  18. package/src/astro/Filters.astro +50 -46
  19. package/src/astro/Footer.astro +179 -175
  20. package/src/astro/FooterColumn.astro +39 -35
  21. package/src/astro/Header.astro +67 -63
  22. package/src/astro/Icon.astro +1 -1
  23. package/src/astro/IconButton.astro +64 -60
  24. package/src/astro/Marquee.astro +33 -29
  25. package/src/astro/NavDropdown.astro +120 -116
  26. package/src/astro/NavLink.astro +59 -55
  27. package/src/astro/Newsletter.astro +58 -54
  28. package/src/astro/Pager.astro +43 -39
  29. package/src/astro/PickCard.astro +72 -68
  30. package/src/astro/ProductCard.astro +120 -116
  31. package/src/astro/Radio.astro +36 -32
  32. package/src/astro/Skeleton.astro +43 -39
  33. package/src/astro/Social.astro +26 -22
  34. package/src/astro/StepIndicator.astro +55 -51
  35. package/src/astro/Sticker.astro +50 -46
  36. package/src/astro/Swatch.astro +44 -40
  37. package/src/astro/Table.astro +58 -54
  38. package/src/astro/TableCard.astro +39 -35
  39. package/src/astro/TextField.astro +92 -88
  40. package/src/astro/Totals.astro +39 -35
  41. package/src/react/Drawer.css +60 -56
  42. package/src/react/Modal.css +97 -93
  43. package/src/react/NewsCarousel.css +108 -104
  44. package/src/react/QuantityStepper.css +84 -80
  45. package/src/react/Select.css +159 -155
  46. package/src/react/Toast.css +128 -124
  47. package/src/styles/base.css +30 -26
  48. package/src/styles/controls.css +183 -179
  49. package/src/styles/motion.css +203 -199
package/src/astro/FilterGroup.astro CHANGED
@@ -25,33 +25,37 @@ const classes = ["ui-filtergroup", className].filter(Boolean).join(" ");
25
25
  </fieldset>
26
26
 
27
27
  <style>
28
- .ui-filtergroup {
29
- margin: 0;
30
- padding: var(--space-3) 0 0;
31
- border: 0;
32
- /* More space above the rule than below it, so the rule belongs to this group's top edge. */
33
- margin-top: var(--space-4);
34
- border-top: 1px solid var(--border);
35
- }
28
+ @layer reset, tokens, base, components, motion, utilities;
36
29
 
37
- .ui-filtergroup:first-of-type {
38
- margin-top: 0;
39
- border-top: 0;
40
- padding-top: 0;
41
- }
30
+ @layer components {
31
+ .ui-filtergroup {
32
+ margin: 0;
33
+ padding: var(--space-3) 0 0;
34
+ border: 0;
35
+ /* More space above the rule than below it, so the rule belongs to this group's top edge. */
36
+ margin-top: var(--space-4);
37
+ border-top: 1px solid var(--border);
38
+ }
42
39
 
43
- .ui-filtergroup__title {
44
- padding: 0;
45
- margin-bottom: var(--space-2);
46
- font-family: var(--font-sans);
47
- font-size: var(--text-sm);
48
- font-weight: var(--weight-semibold);
49
- color: var(--text);
50
- }
40
+ .ui-filtergroup:first-of-type {
41
+ margin-top: 0;
42
+ border-top: 0;
43
+ padding-top: 0;
44
+ }
45
+
46
+ .ui-filtergroup__title {
47
+ padding: 0;
48
+ margin-bottom: var(--space-2);
49
+ font-family: var(--font-sans);
50
+ font-size: var(--text-sm);
51
+ font-weight: var(--weight-semibold);
52
+ color: var(--text);
53
+ }
51
54
 
52
- .ui-filtergroup__options {
53
- display: flex;
54
- flex-direction: column;
55
- gap: var(--space-2);
55
+ .ui-filtergroup__options {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: var(--space-2);
59
+ }
56
60
  }
57
61
  </style>
package/src/astro/Filters.astro CHANGED
@@ -35,56 +35,60 @@ const classes = ["ui-filters", className].filter(Boolean).join(" ");
35
35
  </aside>
36
36
 
37
37
  <style>
38
- .ui-filters {
39
- width: 232px;
40
- display: flex;
41
- flex-direction: column;
42
- }
38
+ @layer reset, tokens, base, components, motion, utilities;
43
39
 
44
- .ui-filterbar {
45
- display: flex;
46
- align-items: center;
47
- justify-content: space-between;
48
- gap: var(--space-3);
49
- padding-bottom: var(--space-3);
50
- margin-bottom: var(--space-1);
51
- }
40
+ @layer components {
41
+ .ui-filters {
42
+ width: 232px;
43
+ display: flex;
44
+ flex-direction: column;
45
+ }
52
46
 
53
- .ui-eyebrow {
54
- font-family: var(--font-mono);
55
- font-size: var(--text-2xs);
56
- font-weight: var(--weight-semibold);
57
- letter-spacing: var(--tracking-widest);
58
- text-transform: uppercase;
59
- color: var(--text-muted);
60
- }
47
+ .ui-filterbar {
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: space-between;
51
+ gap: var(--space-3);
52
+ padding-bottom: var(--space-3);
53
+ margin-bottom: var(--space-1);
54
+ }
61
55
 
62
- /* A ghost-weight clear action. Kept local so the sidebar needs no button
63
- import; the consumer may slot in a Button ghost instead. */
64
- .ui-filters__clear {
65
- padding: var(--space-1-5) var(--space-2);
66
- background: transparent;
67
- border: 0;
68
- border-radius: var(--radius-sm);
69
- font-family: var(--font-sans);
70
- font-size: var(--text-xs);
71
- font-weight: var(--weight-semibold);
72
- color: var(--link);
73
- cursor: pointer;
74
- }
75
- .ui-filters__clear:hover {
76
- background: var(--surface-hover);
77
- color: var(--link-hover);
78
- }
79
- .ui-filters__clear:focus-visible {
80
- outline: 2px solid var(--focus);
81
- outline-offset: 2px;
82
- box-shadow: 0 0 0 4px var(--focus-outer);
83
- }
56
+ .ui-eyebrow {
57
+ font-family: var(--font-mono);
58
+ font-size: var(--text-2xs);
59
+ font-weight: var(--weight-semibold);
60
+ letter-spacing: var(--tracking-widest);
61
+ text-transform: uppercase;
62
+ color: var(--text-muted);
63
+ }
84
64
 
85
- @media (max-width: 700px) {
86
- .ui-filters {
87
- width: 100%;
65
+ /* A ghost-weight clear action. Kept local so the sidebar needs no button */
66
+ /* import; the consumer may slot in a Button ghost instead. */
67
+ .ui-filters__clear {
68
+ padding: var(--space-1-5) var(--space-2);
69
+ background: transparent;
70
+ border: 0;
71
+ border-radius: var(--radius-sm);
72
+ font-family: var(--font-sans);
73
+ font-size: var(--text-xs);
74
+ font-weight: var(--weight-semibold);
75
+ color: var(--link);
76
+ cursor: pointer;
77
+ }
78
+ .ui-filters__clear:hover {
79
+ background: var(--surface-hover);
80
+ color: var(--link-hover);
81
+ }
82
+ .ui-filters__clear:focus-visible {
83
+ outline: 2px solid var(--focus);
84
+ outline-offset: 2px;
85
+ box-shadow: 0 0 0 4px var(--focus-outer);
86
+ }
87
+
88
+ @media (max-width: 700px) {
89
+ .ui-filters {
90
+ width: 100%;
91
+ }
88
92
  }
89
93
  }
90
94
  </style>
package/src/astro/Footer.astro CHANGED
@@ -58,193 +58,197 @@ const classes = ["ui-footer", `ui-footer--${variant}`, className]
58
58
  </footer>
59
59
 
60
60
  <style>
61
- .ui-footer {
62
- display: grid;
63
- grid-template-columns: 1.5fr 1fr 1.3fr;
64
- gap: var(--space-10);
65
- padding: var(--space-10);
66
- background: var(--surface-inverse);
67
- color: var(--surface-inverse-fg);
68
- }
69
-
70
- .ui-footer__brandblock {
71
- display: flex;
72
- flex-direction: column;
73
- gap: var(--space-3);
74
- }
75
-
76
- .ui-footer__brand {
77
- font-family: var(--font-sans);
78
- font-size: var(--text-xl);
79
- font-weight: var(--weight-bold);
80
- letter-spacing: var(--tracking-tight);
81
- color: var(--ivory-xlight);
82
- }
83
- .ui-footer__brand :global(span) {
84
- font-weight: var(--weight-regular);
85
- color: var(--surface-inverse-muted);
86
- }
87
-
88
- .ui-footer__addr {
89
- font-size: var(--text-sm);
90
- line-height: var(--leading-sm);
91
- color: var(--surface-inverse-fg);
92
- }
93
- .ui-footer__addr :global(a) {
94
- color: inherit;
95
- text-decoration: underline;
96
- text-underline-offset: 2px;
97
- }
61
+ @layer reset, tokens, base, components, motion, utilities;
62
+
63
+ @layer components {
64
+ .ui-footer {
65
+ display: grid;
66
+ grid-template-columns: 1.5fr 1fr 1.3fr;
67
+ gap: var(--space-10);
68
+ padding: var(--space-10);
69
+ background: var(--surface-inverse);
70
+ color: var(--surface-inverse-fg);
71
+ }
98
72
 
99
- .ui-footer__social {
100
- display: flex;
101
- gap: var(--space-1);
102
- margin-top: var(--space-1);
103
- }
73
+ .ui-footer__brandblock {
74
+ display: flex;
75
+ flex-direction: column;
76
+ gap: var(--space-3);
77
+ }
104
78
 
105
- /* The bottom bar spans all columns. */
106
- .ui-footer__bar {
107
- grid-column: 1 / -1;
108
- display: flex;
109
- align-items: center;
110
- justify-content: space-between;
111
- gap: var(--space-4);
112
- flex-wrap: wrap;
113
- margin-top: var(--space-4);
114
- padding-top: var(--space-5);
115
- border-top: 1px solid var(--surface-inverse-border);
116
- font-size: var(--text-xs);
117
- color: var(--surface-inverse-muted);
118
- }
79
+ .ui-footer__brand {
80
+ font-family: var(--font-sans);
81
+ font-size: var(--text-xl);
82
+ font-weight: var(--weight-bold);
83
+ letter-spacing: var(--tracking-tight);
84
+ color: var(--ivory-xlight);
85
+ }
86
+ .ui-footer__brand :global(span) {
87
+ font-weight: var(--weight-regular);
88
+ color: var(--surface-inverse-muted);
89
+ }
119
90
 
120
- .ui-footer__policies {
121
- display: flex;
122
- flex-wrap: wrap;
123
- gap: var(--space-4);
124
- }
125
- .ui-footer__bar :global(a) {
126
- color: var(--surface-inverse-fg);
127
- text-decoration: underline;
128
- text-underline-offset: 2px;
129
- }
130
- .ui-footer__bar :global(a:hover) {
131
- color: var(--ivory-xlight);
132
- }
133
- .ui-footer__bar :global(a:focus-visible) {
134
- outline: 2px solid var(--ivory-xlight);
135
- outline-offset: 2px;
136
- border-radius: var(--radius-sm);
137
- }
91
+ .ui-footer__addr {
92
+ font-size: var(--text-sm);
93
+ line-height: var(--leading-sm);
94
+ color: var(--surface-inverse-fg);
95
+ }
96
+ .ui-footer__addr :global(a) {
97
+ color: inherit;
98
+ text-decoration: underline;
99
+ text-underline-offset: 2px;
100
+ }
138
101
 
139
- /* Pin the stacked state in component explorers and constrained shells. */
140
- .ui-footer--mobile {
141
- grid-template-columns: 1fr;
142
- gap: var(--space-6);
143
- padding: var(--space-6);
144
- border-radius: 0 0 var(--radius-lg) var(--radius-lg);
145
- }
146
- .ui-footer--mobile .ui-footer__bar {
147
- flex-direction: column;
148
- align-items: flex-start;
149
- gap: var(--space-3);
150
- margin-top: var(--space-2);
151
- padding-top: var(--space-5);
152
- }
153
- .ui-footer--mobile .ui-footer__policies {
154
- row-gap: var(--space-3);
155
- }
102
+ .ui-footer__social {
103
+ display: flex;
104
+ gap: var(--space-1);
105
+ margin-top: var(--space-1);
106
+ }
156
107
 
157
- /* The club-site footer interleaves contact details and social links on
158
- compact screens, so its brand block participates in the outer layout. */
159
- .ui-footer--mobile.ui-footer--site {
160
- display: flex;
161
- flex-direction: column;
162
- }
163
- .ui-footer--mobile.ui-footer--site .ui-footer__brandblock {
164
- display: contents;
165
- }
166
- .ui-footer--mobile.ui-footer--site .ui-footer__brand {
167
- order: 1;
168
- font-size: var(--text-lg);
169
- font-weight: var(--weight-regular);
170
- color: var(--surface-inverse-muted);
171
- }
172
- .ui-footer--mobile.ui-footer--site .ui-footer__addr {
173
- order: 2;
174
- }
175
- .ui-footer--mobile.ui-footer--site :global(.ui-footer__contact) {
176
- order: 3;
177
- gap: var(--space-2);
178
- margin-top: calc(var(--space-6) * -1 + var(--space-2));
179
- }
180
- .ui-footer--mobile.ui-footer--site
181
- :global(.ui-footer__contact .ui-footer__title),
182
- .ui-footer--mobile.ui-footer--site :global(.ui-footer__desktop-only) {
183
- display: none;
184
- }
185
- .ui-footer--mobile.ui-footer--site .ui-footer__social {
186
- order: 4;
187
- gap: var(--space-3);
188
- margin-top: var(--space-1);
189
- }
190
- .ui-footer--mobile.ui-footer--site .ui-footer__social :global(.ui-social) {
191
- width: 48px;
192
- height: 48px;
193
- border: 1px solid var(--surface-inverse-border);
194
- border-radius: var(--radius-full);
195
- }
196
- .ui-footer--mobile.ui-footer--site :global(.ui-footer__newsletter) {
197
- order: 5;
198
- gap: var(--space-4);
199
- margin-top: var(--space-4);
200
- }
201
- .ui-footer--mobile.ui-footer--site .ui-footer__bar {
202
- order: 6;
203
- }
204
- .ui-footer--mobile.ui-footer--site :global(.ui-news) {
205
- flex-direction: column;
206
- max-width: none;
207
- gap: var(--space-3);
208
- }
209
- .ui-footer--mobile.ui-footer--site :global(.ui-news__btn) {
210
- background: var(--ivory-xlight);
211
- }
108
+ /* The bottom bar spans all columns. */
109
+ .ui-footer__bar {
110
+ grid-column: 1 / -1;
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: space-between;
114
+ gap: var(--space-4);
115
+ flex-wrap: wrap;
116
+ margin-top: var(--space-4);
117
+ padding-top: var(--space-5);
118
+ border-top: 1px solid var(--surface-inverse-border);
119
+ font-size: var(--text-xs);
120
+ color: var(--surface-inverse-muted);
121
+ }
212
122
 
213
- .ui-footer--mobile.ui-footer--shop {
214
- gap: var(--space-6);
215
- }
216
- .ui-footer--mobile.ui-footer--shop .ui-footer__brandblock {
217
- gap: var(--space-5);
218
- }
219
- .ui-footer--mobile.ui-footer--shop .ui-footer__brand {
220
- font-size: var(--text-md);
221
- }
222
- .ui-footer--mobile.ui-footer--shop .ui-footer__brand :global(span) {
223
- font-weight: inherit;
224
- color: inherit;
225
- }
226
- .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links) {
227
- gap: var(--space-4);
228
- }
229
- .ui-footer--mobile.ui-footer--shop
230
- :global(.ui-footer__shop-links .ui-footer__title) {
231
- display: none;
232
- }
233
- .ui-footer--mobile.ui-footer--shop .ui-footer__social:empty {
234
- display: none;
235
- }
123
+ .ui-footer__policies {
124
+ display: flex;
125
+ flex-wrap: wrap;
126
+ gap: var(--space-4);
127
+ }
128
+ .ui-footer__bar :global(a) {
129
+ color: var(--surface-inverse-fg);
130
+ text-decoration: underline;
131
+ text-underline-offset: 2px;
132
+ }
133
+ .ui-footer__bar :global(a:hover) {
134
+ color: var(--ivory-xlight);
135
+ }
136
+ .ui-footer__bar :global(a:focus-visible) {
137
+ outline: 2px solid var(--ivory-xlight);
138
+ outline-offset: 2px;
139
+ border-radius: var(--radius-sm);
140
+ }
236
141
 
237
- /* Stacks on mobile. */
238
- @media (max-width: 700px) {
239
- .ui-footer:not(.ui-footer--mobile) {
142
+ /* Pin the stacked state in component explorers and constrained shells. */
143
+ .ui-footer--mobile {
240
144
  grid-template-columns: 1fr;
241
- gap: var(--space-8);
242
- padding: var(--space-6) var(--space-4);
145
+ gap: var(--space-6);
146
+ padding: var(--space-6);
147
+ border-radius: 0 0 var(--radius-lg) var(--radius-lg);
243
148
  }
244
- .ui-footer:not(.ui-footer--mobile) .ui-footer__bar {
149
+ .ui-footer--mobile .ui-footer__bar {
245
150
  flex-direction: column;
246
151
  align-items: flex-start;
247
152
  gap: var(--space-3);
153
+ margin-top: var(--space-2);
154
+ padding-top: var(--space-5);
155
+ }
156
+ .ui-footer--mobile .ui-footer__policies {
157
+ row-gap: var(--space-3);
158
+ }
159
+
160
+ /* The club-site footer interleaves contact details and social links on */
161
+ /* compact screens, so its brand block participates in the outer layout. */
162
+ .ui-footer--mobile.ui-footer--site {
163
+ display: flex;
164
+ flex-direction: column;
165
+ }
166
+ .ui-footer--mobile.ui-footer--site .ui-footer__brandblock {
167
+ display: contents;
168
+ }
169
+ .ui-footer--mobile.ui-footer--site .ui-footer__brand {
170
+ order: 1;
171
+ font-size: var(--text-lg);
172
+ font-weight: var(--weight-regular);
173
+ color: var(--surface-inverse-muted);
174
+ }
175
+ .ui-footer--mobile.ui-footer--site .ui-footer__addr {
176
+ order: 2;
177
+ }
178
+ .ui-footer--mobile.ui-footer--site :global(.ui-footer__contact) {
179
+ order: 3;
180
+ gap: var(--space-2);
181
+ margin-top: calc(var(--space-6) * -1 + var(--space-2));
182
+ }
183
+ .ui-footer--mobile.ui-footer--site
184
+ :global(.ui-footer__contact .ui-footer__title),
185
+ .ui-footer--mobile.ui-footer--site :global(.ui-footer__desktop-only) {
186
+ display: none;
187
+ }
188
+ .ui-footer--mobile.ui-footer--site .ui-footer__social {
189
+ order: 4;
190
+ gap: var(--space-3);
191
+ margin-top: var(--space-1);
192
+ }
193
+ .ui-footer--mobile.ui-footer--site .ui-footer__social :global(.ui-social) {
194
+ width: 48px;
195
+ height: 48px;
196
+ border: 1px solid var(--surface-inverse-border);
197
+ border-radius: var(--radius-full);
198
+ }
199
+ .ui-footer--mobile.ui-footer--site :global(.ui-footer__newsletter) {
200
+ order: 5;
201
+ gap: var(--space-4);
202
+ margin-top: var(--space-4);
203
+ }
204
+ .ui-footer--mobile.ui-footer--site .ui-footer__bar {
205
+ order: 6;
206
+ }
207
+ .ui-footer--mobile.ui-footer--site :global(.ui-news) {
208
+ flex-direction: column;
209
+ max-width: none;
210
+ gap: var(--space-3);
211
+ }
212
+ .ui-footer--mobile.ui-footer--site :global(.ui-news__btn) {
213
+ background: var(--ivory-xlight);
214
+ }
215
+
216
+ .ui-footer--mobile.ui-footer--shop {
217
+ gap: var(--space-6);
218
+ }
219
+ .ui-footer--mobile.ui-footer--shop .ui-footer__brandblock {
220
+ gap: var(--space-5);
221
+ }
222
+ .ui-footer--mobile.ui-footer--shop .ui-footer__brand {
223
+ font-size: var(--text-md);
224
+ }
225
+ .ui-footer--mobile.ui-footer--shop .ui-footer__brand :global(span) {
226
+ font-weight: inherit;
227
+ color: inherit;
228
+ }
229
+ .ui-footer--mobile.ui-footer--shop :global(.ui-footer__shop-links) {
230
+ gap: var(--space-4);
231
+ }
232
+ .ui-footer--mobile.ui-footer--shop
233
+ :global(.ui-footer__shop-links .ui-footer__title) {
234
+ display: none;
235
+ }
236
+ .ui-footer--mobile.ui-footer--shop .ui-footer__social:empty {
237
+ display: none;
238
+ }
239
+
240
+ /* Stacks on mobile. */
241
+ @media (max-width: 700px) {
242
+ .ui-footer:not(.ui-footer--mobile) {
243
+ grid-template-columns: 1fr;
244
+ gap: var(--space-8);
245
+ padding: var(--space-6) var(--space-4);
246
+ }
247
+ .ui-footer:not(.ui-footer--mobile) .ui-footer__bar {
248
+ flex-direction: column;
249
+ align-items: flex-start;
250
+ gap: var(--space-3);
251
+ }
248
252
  }
249
253
  }
250
254
  </style>
package/src/astro/FooterColumn.astro CHANGED
@@ -19,46 +19,50 @@ const classes = ["ui-footer__col", className].filter(Boolean).join(" ");
19
19
  </div>
20
20
 
21
21
  <style>
22
- .ui-footer__col {
23
- display: flex;
24
- flex-direction: column;
25
- gap: var(--space-2-5, var(--space-2));
26
- }
22
+ @layer reset, tokens, base, components, motion, utilities;
27
23
 
28
- .ui-footer__title {
29
- font-family: var(--font-mono);
30
- font-size: var(--text-2xs);
31
- font-weight: var(--weight-semibold);
32
- text-transform: uppercase;
33
- letter-spacing: var(--tracking-widest);
34
- color: var(--sage-light);
35
- margin-bottom: var(--space-1);
36
- }
24
+ @layer components {
25
+ .ui-footer__col {
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: var(--space-2-5, var(--space-2));
29
+ }
37
30
 
38
- .ui-footer__col :global(a),
39
- .ui-footer__col :global(.ui-footer__note) {
40
- font-size: var(--text-sm);
41
- line-height: var(--leading-sm);
42
- color: var(--ivory-light);
43
- }
31
+ .ui-footer__title {
32
+ font-family: var(--font-mono);
33
+ font-size: var(--text-2xs);
34
+ font-weight: var(--weight-semibold);
35
+ text-transform: uppercase;
36
+ letter-spacing: var(--tracking-widest);
37
+ color: var(--sage-light);
38
+ margin-bottom: var(--space-1);
39
+ }
44
40
 
45
- .ui-footer__col :global(a) {
46
- text-decoration: underline;
47
- text-underline-offset: 2px;
48
- transition: color var(--duration-fast) var(--ease-standard);
49
- }
50
- .ui-footer__col :global(a:hover) {
51
- color: var(--ivory-xlight);
52
- }
53
- .ui-footer__col :global(a:focus-visible) {
54
- outline: 2px solid var(--ivory-xlight);
55
- outline-offset: 2px;
56
- border-radius: var(--radius-sm);
57
- }
41
+ .ui-footer__col :global(a),
42
+ .ui-footer__col :global(.ui-footer__note) {
43
+ font-size: var(--text-sm);
44
+ line-height: var(--leading-sm);
45
+ color: var(--ivory-light);
46
+ }
58
47
 
59
- @media (prefers-reduced-motion: reduce) {
60
48
  .ui-footer__col :global(a) {
61
- transition: none;
49
+ text-decoration: underline;
50
+ text-underline-offset: 2px;
51
+ transition: color var(--duration-fast) var(--ease-standard);
52
+ }
53
+ .ui-footer__col :global(a:hover) {
54
+ color: var(--ivory-xlight);
55
+ }
56
+ .ui-footer__col :global(a:focus-visible) {
57
+ outline: 2px solid var(--ivory-xlight);
58
+ outline-offset: 2px;
59
+ border-radius: var(--radius-sm);
60
+ }
61
+
62
+ @media (prefers-reduced-motion: reduce) {
63
+ .ui-footer__col :global(a) {
64
+ transition: none;
65
+ }
62
66
  }
63
67
  }
64
68
  </style>