@seed-design/lynx-css 0.10.2 → 0.11.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 (59) hide show
  1. package/all.css +1214 -179
  2. package/all.min.css +1 -1
  3. package/base.css +1 -1
  4. package/base.min.css +1 -1
  5. package/package.json +9 -3
  6. package/recipes/accordion.css +10 -0
  7. package/recipes/accordion.d.ts +1 -1
  8. package/recipes/accordion.mjs +4 -0
  9. package/recipes/action-button.css +21 -13
  10. package/recipes/action-button.mjs +30 -11
  11. package/recipes/callout.css +18 -0
  12. package/recipes/callout.d.ts +4 -0
  13. package/recipes/callout.mjs +30 -1
  14. package/recipes/checkbox.css +18 -6
  15. package/recipes/checkbox.d.ts +1 -1
  16. package/recipes/checkbox.mjs +4 -0
  17. package/recipes/checkmark.css +10 -6
  18. package/recipes/chip.css +18 -0
  19. package/recipes/chip.mjs +30 -0
  20. package/recipes/input-button.css +209 -0
  21. package/recipes/input-button.d.ts +40 -0
  22. package/recipes/input-button.mjs +99 -0
  23. package/recipes/list-header.css +22 -0
  24. package/recipes/list-header.d.ts +22 -0
  25. package/recipes/list-header.mjs +29 -0
  26. package/recipes/list-item.css +120 -0
  27. package/recipes/list-item.d.ts +32 -0
  28. package/recipes/list-item.mjs +93 -0
  29. package/recipes/list.css +5 -0
  30. package/recipes/list.d.ts +19 -0
  31. package/recipes/list.mjs +22 -0
  32. package/recipes/menu-item.css +119 -0
  33. package/recipes/menu-item.d.ts +36 -0
  34. package/recipes/menu-item.mjs +91 -0
  35. package/recipes/menu-sheet-item.css +69 -0
  36. package/recipes/menu-sheet-item.d.ts +32 -0
  37. package/recipes/menu-sheet-item.mjs +69 -0
  38. package/recipes/menu-sheet.css +104 -0
  39. package/recipes/menu-sheet.d.ts +28 -0
  40. package/recipes/menu-sheet.mjs +88 -0
  41. package/recipes/menu.css +101 -0
  42. package/recipes/menu.d.ts +32 -0
  43. package/recipes/menu.mjs +85 -0
  44. package/recipes/page-banner.css +136 -99
  45. package/recipes/page-banner.d.ts +4 -0
  46. package/recipes/page-banner.mjs +61 -1
  47. package/recipes/radio.css +3 -0
  48. package/recipes/radiomark.css +4 -1
  49. package/recipes/reaction-button.css +145 -0
  50. package/recipes/reaction-button.d.ts +40 -0
  51. package/recipes/reaction-button.mjs +101 -0
  52. package/recipes/segmented-control.css +16 -2
  53. package/recipes/segmented-control.d.ts +1 -1
  54. package/recipes/segmented-control.mjs +8 -0
  55. package/recipes/select-box.css +12 -0
  56. package/recipes/select-box.d.ts +1 -1
  57. package/recipes/select-box.mjs +4 -0
  58. package/scale-feedback/index.d.ts +2 -0
  59. package/scale-feedback/index.mjs +3 -0
package/recipes/page-banner.css CHANGED
@@ -7,7 +7,7 @@
7
7
  padding-left: var(--seed-dimension-x4);
8
8
  padding-right: var(--seed-dimension-x4);
9
9
  padding-top: var(--seed-dimension-x2_5);
10
- padding-bottom: var(--seed-dimension-x2_5)
10
+ padding-bottom: var(--seed-dimension-x2_5);
11
11
  }
12
12
  .seed-page-banner__content {
13
13
  display: flex;
@@ -17,23 +17,23 @@
17
17
  justify-content: space-between;
18
18
  flex-grow: 1;
19
19
  flex-shrink: 1;
20
- gap: var(--seed-dimension-x1_5)
20
+ gap: var(--seed-dimension-x1_5);
21
21
  }
22
22
  .seed-page-banner__body {
23
23
  flex-grow: 1;
24
24
  flex-shrink: 1;
25
- line-height: var(--seed-line-height-t4)
25
+ line-height: var(--seed-line-height-t4);
26
26
  }
27
27
  .seed-page-banner__title {
28
28
  flex-shrink: 0;
29
29
  font-size: var(--seed-font-size-t4);
30
30
  line-height: var(--seed-line-height-t4);
31
- font-weight: var(--seed-font-weight-bold)
31
+ font-weight: var(--seed-font-weight-bold);
32
32
  }
33
33
  .seed-page-banner__description {
34
34
  font-size: var(--seed-font-size-t4);
35
35
  line-height: var(--seed-line-height-t4);
36
- font-weight: var(--seed-font-weight-medium)
36
+ font-weight: var(--seed-font-weight-medium);
37
37
  }
38
38
  .seed-page-banner__button {
39
39
  display: flex;
@@ -50,7 +50,7 @@
50
50
  font-size: var(--seed-font-size-t3);
51
51
  line-height: var(--seed-line-height-t3);
52
52
  font-weight: var(--seed-font-weight-bold);
53
- border-radius: var(--seed-radius-r1)
53
+ border-radius: var(--seed-radius-r1);
54
54
  }
55
55
  .seed-page-banner__closeButton {
56
56
  flex-grow: 0;
@@ -67,291 +67,328 @@
67
67
  margin-bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -0.5);
68
68
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -0.5 + var(--seed-dimension-x2));
69
69
  border-radius: var(--seed-radius-r2);
70
- background-color: var(--seed-color-bg-transparent)
70
+ background-color: var(--seed-color-bg-transparent);
71
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
72
+ }
73
+ .seed-page-banner__closeButton:active {
74
+ background-color: var(--seed-color-bg-transparent-pressed);
71
75
  }
72
76
  .seed-page-banner__prefixIcon {
73
77
  flex-shrink: 0;
74
78
  width: var(--seed-dimension-x4);
75
79
  height: var(--seed-dimension-x4);
76
80
  margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * 0.5 - var(--seed-dimension-x2_5));
77
- margin-right: var(--seed-dimension-x2)
81
+ margin-right: var(--seed-dimension-x2);
78
82
  }
79
83
  .seed-page-banner__suffixIcon {
80
84
  flex-shrink: 0;
81
85
  align-self: center;
82
86
  width: var(--seed-dimension-x4);
83
87
  height: var(--seed-dimension-x4);
84
- margin-left: var(--seed-dimension-x2)
88
+ margin-left: var(--seed-dimension-x2);
85
89
  }
86
90
  .seed-page-banner__closeButtonIcon {
87
91
  flex-shrink: 0;
88
92
  width: var(--seed-dimension-x4);
89
- height: var(--seed-dimension-x4)
93
+ height: var(--seed-dimension-x4);
90
94
  }
91
95
  .seed-page-banner__closeButton--closeButtonPressed_true {
92
- background-color: var(--seed-color-bg-transparent-pressed)
96
+ background-color: var(--seed-color-bg-transparent-pressed);
97
+ }
98
+ .seed-page-banner__root--tone_neutral-variant_weak-interactive_true:active {
99
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
100
+ }
101
+ .seed-page-banner__root--tone_neutral-variant_solid-interactive_true:active {
102
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
103
+ }
104
+ .seed-page-banner__root--tone_informative-variant_weak-interactive_true:active {
105
+ background-color: var(--seed-color-bg-informative-weak-pressed);
106
+ }
107
+ .seed-page-banner__root--tone_informative-variant_solid-interactive_true:active {
108
+ background-color: var(--seed-color-bg-informative-solid-pressed);
109
+ }
110
+ .seed-page-banner__root--tone_positive-variant_weak-interactive_true:active {
111
+ background-color: var(--seed-color-bg-positive-weak-pressed);
112
+ }
113
+ .seed-page-banner__root--tone_positive-variant_solid-interactive_true:active {
114
+ background-color: var(--seed-color-bg-positive-solid-pressed);
115
+ }
116
+ .seed-page-banner__root--tone_warning-variant_weak-interactive_true:active {
117
+ background-color: var(--seed-color-bg-warning-weak-pressed);
118
+ }
119
+ .seed-page-banner__root--tone_warning-variant_solid-interactive_true:active {
120
+ background-color: var(--seed-color-bg-warning-solid-pressed);
121
+ }
122
+ .seed-page-banner__root--tone_critical-variant_weak-interactive_true:active {
123
+ background-color: var(--seed-color-bg-critical-weak-pressed);
124
+ }
125
+ .seed-page-banner__root--tone_critical-variant_solid-interactive_true:active {
126
+ background-color: var(--seed-color-bg-critical-solid-pressed);
127
+ }
128
+ .seed-page-banner__root--tone_magic-variant_weak-interactive_true:active {
129
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
93
130
  }
94
131
  .seed-page-banner__root--tone_neutral-variant_weak {
95
- background-color: var(--seed-color-bg-neutral-weak)
132
+ background-color: var(--seed-color-bg-neutral-weak);
96
133
  }
97
134
  .seed-page-banner__title--tone_neutral-variant_weak {
98
- color: var(--seed-color-fg-neutral)
135
+ color: var(--seed-color-fg-neutral);
99
136
  }
100
137
  .seed-page-banner__description--tone_neutral-variant_weak {
101
- color: var(--seed-color-fg-neutral)
138
+ color: var(--seed-color-fg-neutral);
102
139
  }
103
140
  .seed-page-banner__button--tone_neutral-variant_weak {
104
- color: var(--seed-color-fg-neutral)
141
+ color: var(--seed-color-fg-neutral);
105
142
  }
106
143
  .seed-page-banner__prefixIcon--tone_neutral-variant_weak {
107
- color: var(--seed-color-fg-neutral)
144
+ color: var(--seed-color-fg-neutral);
108
145
  }
109
146
  .seed-page-banner__suffixIcon--tone_neutral-variant_weak {
110
- color: var(--seed-color-fg-neutral)
147
+ color: var(--seed-color-fg-neutral);
111
148
  }
112
149
  .seed-page-banner__closeButtonIcon--tone_neutral-variant_weak {
113
- color: var(--seed-color-fg-neutral)
150
+ color: var(--seed-color-fg-neutral);
114
151
  }
115
152
  .seed-page-banner__root--tone_neutral-variant_solid {
116
- background-color: var(--seed-color-bg-neutral-inverted)
153
+ background-color: var(--seed-color-bg-neutral-inverted);
117
154
  }
118
155
  .seed-page-banner__title--tone_neutral-variant_solid {
119
- color: var(--seed-color-fg-neutral-inverted)
156
+ color: var(--seed-color-fg-neutral-inverted);
120
157
  }
121
158
  .seed-page-banner__description--tone_neutral-variant_solid {
122
- color: var(--seed-color-fg-neutral-inverted)
159
+ color: var(--seed-color-fg-neutral-inverted);
123
160
  }
124
161
  .seed-page-banner__button--tone_neutral-variant_solid {
125
- color: var(--seed-color-fg-neutral-inverted)
162
+ color: var(--seed-color-fg-neutral-inverted);
126
163
  }
127
164
  .seed-page-banner__prefixIcon--tone_neutral-variant_solid {
128
- color: var(--seed-color-fg-neutral-inverted)
165
+ color: var(--seed-color-fg-neutral-inverted);
129
166
  }
130
167
  .seed-page-banner__suffixIcon--tone_neutral-variant_solid {
131
- color: var(--seed-color-fg-neutral-inverted)
168
+ color: var(--seed-color-fg-neutral-inverted);
132
169
  }
133
170
  .seed-page-banner__closeButtonIcon--tone_neutral-variant_solid {
134
- color: var(--seed-color-fg-neutral-inverted)
171
+ color: var(--seed-color-fg-neutral-inverted);
135
172
  }
136
173
  .seed-page-banner__root--tone_informative-variant_weak {
137
- background-color: var(--seed-color-bg-informative-weak)
174
+ background-color: var(--seed-color-bg-informative-weak);
138
175
  }
139
176
  .seed-page-banner__title--tone_informative-variant_weak {
140
- color: var(--seed-color-fg-informative-contrast)
177
+ color: var(--seed-color-fg-informative-contrast);
141
178
  }
142
179
  .seed-page-banner__description--tone_informative-variant_weak {
143
- color: var(--seed-color-fg-informative-contrast)
180
+ color: var(--seed-color-fg-informative-contrast);
144
181
  }
145
182
  .seed-page-banner__button--tone_informative-variant_weak {
146
- color: var(--seed-color-fg-informative-contrast)
183
+ color: var(--seed-color-fg-informative-contrast);
147
184
  }
148
185
  .seed-page-banner__prefixIcon--tone_informative-variant_weak {
149
- color: var(--seed-color-fg-informative-contrast)
186
+ color: var(--seed-color-fg-informative-contrast);
150
187
  }
151
188
  .seed-page-banner__suffixIcon--tone_informative-variant_weak {
152
- color: var(--seed-color-fg-informative-contrast)
189
+ color: var(--seed-color-fg-informative-contrast);
153
190
  }
154
191
  .seed-page-banner__closeButtonIcon--tone_informative-variant_weak {
155
- color: var(--seed-color-fg-informative-contrast)
192
+ color: var(--seed-color-fg-informative-contrast);
156
193
  }
157
194
  .seed-page-banner__root--tone_informative-variant_solid {
158
- background-color: var(--seed-color-bg-informative-solid)
195
+ background-color: var(--seed-color-bg-informative-solid);
159
196
  }
160
197
  .seed-page-banner__title--tone_informative-variant_solid {
161
- color: var(--seed-color-palette-static-white)
198
+ color: var(--seed-color-palette-static-white);
162
199
  }
163
200
  .seed-page-banner__description--tone_informative-variant_solid {
164
- color: var(--seed-color-palette-static-white)
201
+ color: var(--seed-color-palette-static-white);
165
202
  }
166
203
  .seed-page-banner__button--tone_informative-variant_solid {
167
- color: var(--seed-color-palette-static-white)
204
+ color: var(--seed-color-palette-static-white);
168
205
  }
169
206
  .seed-page-banner__prefixIcon--tone_informative-variant_solid {
170
- color: var(--seed-color-palette-static-white)
207
+ color: var(--seed-color-palette-static-white);
171
208
  }
172
209
  .seed-page-banner__suffixIcon--tone_informative-variant_solid {
173
- color: var(--seed-color-palette-static-white)
210
+ color: var(--seed-color-palette-static-white);
174
211
  }
175
212
  .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
176
- color: var(--seed-color-palette-static-white)
213
+ color: var(--seed-color-palette-static-white);
177
214
  }
178
215
  .seed-page-banner__root--tone_positive-variant_weak {
179
- background-color: var(--seed-color-bg-positive-weak)
216
+ background-color: var(--seed-color-bg-positive-weak);
180
217
  }
181
218
  .seed-page-banner__title--tone_positive-variant_weak {
182
- color: var(--seed-color-fg-positive-contrast)
219
+ color: var(--seed-color-fg-positive-contrast);
183
220
  }
184
221
  .seed-page-banner__description--tone_positive-variant_weak {
185
- color: var(--seed-color-fg-positive-contrast)
222
+ color: var(--seed-color-fg-positive-contrast);
186
223
  }
187
224
  .seed-page-banner__button--tone_positive-variant_weak {
188
- color: var(--seed-color-fg-positive-contrast)
225
+ color: var(--seed-color-fg-positive-contrast);
189
226
  }
190
227
  .seed-page-banner__prefixIcon--tone_positive-variant_weak {
191
- color: var(--seed-color-fg-positive-contrast)
228
+ color: var(--seed-color-fg-positive-contrast);
192
229
  }
193
230
  .seed-page-banner__suffixIcon--tone_positive-variant_weak {
194
- color: var(--seed-color-fg-positive-contrast)
231
+ color: var(--seed-color-fg-positive-contrast);
195
232
  }
196
233
  .seed-page-banner__closeButtonIcon--tone_positive-variant_weak {
197
- color: var(--seed-color-fg-positive-contrast)
234
+ color: var(--seed-color-fg-positive-contrast);
198
235
  }
199
236
  .seed-page-banner__root--tone_positive-variant_solid {
200
- background-color: var(--seed-color-bg-positive-solid)
237
+ background-color: var(--seed-color-bg-positive-solid);
201
238
  }
202
239
  .seed-page-banner__title--tone_positive-variant_solid {
203
- color: var(--seed-color-palette-static-white)
240
+ color: var(--seed-color-palette-static-white);
204
241
  }
205
242
  .seed-page-banner__description--tone_positive-variant_solid {
206
- color: var(--seed-color-palette-static-white)
243
+ color: var(--seed-color-palette-static-white);
207
244
  }
208
245
  .seed-page-banner__button--tone_positive-variant_solid {
209
- color: var(--seed-color-palette-static-white)
246
+ color: var(--seed-color-palette-static-white);
210
247
  }
211
248
  .seed-page-banner__prefixIcon--tone_positive-variant_solid {
212
- color: var(--seed-color-palette-static-white)
249
+ color: var(--seed-color-palette-static-white);
213
250
  }
214
251
  .seed-page-banner__suffixIcon--tone_positive-variant_solid {
215
- color: var(--seed-color-palette-static-white)
252
+ color: var(--seed-color-palette-static-white);
216
253
  }
217
254
  .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
218
- color: var(--seed-color-palette-static-white)
255
+ color: var(--seed-color-palette-static-white);
219
256
  }
220
257
  .seed-page-banner__root--tone_warning-variant_weak {
221
- background-color: var(--seed-color-bg-warning-weak)
258
+ background-color: var(--seed-color-bg-warning-weak);
222
259
  }
223
260
  .seed-page-banner__title--tone_warning-variant_weak {
224
- color: var(--seed-color-fg-warning-contrast)
261
+ color: var(--seed-color-fg-warning-contrast);
225
262
  }
226
263
  .seed-page-banner__description--tone_warning-variant_weak {
227
- color: var(--seed-color-fg-warning-contrast)
264
+ color: var(--seed-color-fg-warning-contrast);
228
265
  }
229
266
  .seed-page-banner__button--tone_warning-variant_weak {
230
- color: var(--seed-color-fg-warning-contrast)
267
+ color: var(--seed-color-fg-warning-contrast);
231
268
  }
232
269
  .seed-page-banner__prefixIcon--tone_warning-variant_weak {
233
- color: var(--seed-color-fg-warning-contrast)
270
+ color: var(--seed-color-fg-warning-contrast);
234
271
  }
235
272
  .seed-page-banner__suffixIcon--tone_warning-variant_weak {
236
- color: var(--seed-color-fg-warning-contrast)
273
+ color: var(--seed-color-fg-warning-contrast);
237
274
  }
238
275
  .seed-page-banner__closeButtonIcon--tone_warning-variant_weak {
239
- color: var(--seed-color-fg-warning-contrast)
276
+ color: var(--seed-color-fg-warning-contrast);
240
277
  }
241
278
  .seed-page-banner__root--tone_warning-variant_solid {
242
- background-color: var(--seed-color-bg-warning-solid)
279
+ background-color: var(--seed-color-bg-warning-solid);
243
280
  }
244
281
  .seed-page-banner__title--tone_warning-variant_solid {
245
- color: var(--seed-color-palette-static-black-alpha-900)
282
+ color: var(--seed-color-palette-static-black-alpha-900);
246
283
  }
247
284
  .seed-page-banner__description--tone_warning-variant_solid {
248
- color: var(--seed-color-palette-static-black-alpha-900)
285
+ color: var(--seed-color-palette-static-black-alpha-900);
249
286
  }
250
287
  .seed-page-banner__button--tone_warning-variant_solid {
251
- color: var(--seed-color-palette-static-black-alpha-900)
288
+ color: var(--seed-color-palette-static-black-alpha-900);
252
289
  }
253
290
  .seed-page-banner__prefixIcon--tone_warning-variant_solid {
254
- color: var(--seed-color-palette-static-black-alpha-900)
291
+ color: var(--seed-color-palette-static-black-alpha-900);
255
292
  }
256
293
  .seed-page-banner__suffixIcon--tone_warning-variant_solid {
257
- color: var(--seed-color-palette-static-black-alpha-900)
294
+ color: var(--seed-color-palette-static-black-alpha-900);
258
295
  }
259
296
  .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
260
- color: var(--seed-color-palette-static-black-alpha-900)
297
+ color: var(--seed-color-palette-static-black-alpha-900);
261
298
  }
262
299
  .seed-page-banner__root--tone_critical-variant_weak {
263
- background-color: var(--seed-color-bg-critical-weak)
300
+ background-color: var(--seed-color-bg-critical-weak);
264
301
  }
265
302
  .seed-page-banner__title--tone_critical-variant_weak {
266
- color: var(--seed-color-fg-critical-contrast)
303
+ color: var(--seed-color-fg-critical-contrast);
267
304
  }
268
305
  .seed-page-banner__description--tone_critical-variant_weak {
269
- color: var(--seed-color-fg-critical-contrast)
306
+ color: var(--seed-color-fg-critical-contrast);
270
307
  }
271
308
  .seed-page-banner__button--tone_critical-variant_weak {
272
- color: var(--seed-color-fg-critical-contrast)
309
+ color: var(--seed-color-fg-critical-contrast);
273
310
  }
274
311
  .seed-page-banner__prefixIcon--tone_critical-variant_weak {
275
- color: var(--seed-color-fg-critical-contrast)
312
+ color: var(--seed-color-fg-critical-contrast);
276
313
  }
277
314
  .seed-page-banner__suffixIcon--tone_critical-variant_weak {
278
- color: var(--seed-color-fg-critical-contrast)
315
+ color: var(--seed-color-fg-critical-contrast);
279
316
  }
280
317
  .seed-page-banner__closeButtonIcon--tone_critical-variant_weak {
281
- color: var(--seed-color-fg-critical-contrast)
318
+ color: var(--seed-color-fg-critical-contrast);
282
319
  }
283
320
  .seed-page-banner__root--tone_critical-variant_solid {
284
- background-color: var(--seed-color-bg-critical-solid)
321
+ background-color: var(--seed-color-bg-critical-solid);
285
322
  }
286
323
  .seed-page-banner__title--tone_critical-variant_solid {
287
- color: var(--seed-color-palette-static-white)
324
+ color: var(--seed-color-palette-static-white);
288
325
  }
289
326
  .seed-page-banner__description--tone_critical-variant_solid {
290
- color: var(--seed-color-palette-static-white)
327
+ color: var(--seed-color-palette-static-white);
291
328
  }
292
329
  .seed-page-banner__button--tone_critical-variant_solid {
293
- color: var(--seed-color-palette-static-white)
330
+ color: var(--seed-color-palette-static-white);
294
331
  }
295
332
  .seed-page-banner__prefixIcon--tone_critical-variant_solid {
296
- color: var(--seed-color-palette-static-white)
333
+ color: var(--seed-color-palette-static-white);
297
334
  }
298
335
  .seed-page-banner__suffixIcon--tone_critical-variant_solid {
299
- color: var(--seed-color-palette-static-white)
336
+ color: var(--seed-color-palette-static-white);
300
337
  }
301
338
  .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
302
- color: var(--seed-color-palette-static-white)
339
+ color: var(--seed-color-palette-static-white);
303
340
  }
304
341
  .seed-page-banner__root--tone_magic-variant_weak {
305
- background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic))
342
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
306
343
  }
307
344
  .seed-page-banner__title--tone_magic-variant_weak {
308
- color: var(--seed-color-fg-neutral)
345
+ color: var(--seed-color-fg-neutral);
309
346
  }
310
347
  .seed-page-banner__description--tone_magic-variant_weak {
311
- color: var(--seed-color-fg-neutral)
348
+ color: var(--seed-color-fg-neutral);
312
349
  }
313
350
  .seed-page-banner__button--tone_magic-variant_weak {
314
- color: var(--seed-color-fg-neutral)
351
+ color: var(--seed-color-fg-neutral);
315
352
  }
316
353
  .seed-page-banner__prefixIcon--tone_magic-variant_weak {
317
- color: var(--seed-color-fg-neutral)
354
+ color: var(--seed-color-fg-neutral);
318
355
  }
319
356
  .seed-page-banner__suffixIcon--tone_magic-variant_weak {
320
- color: var(--seed-color-fg-neutral)
357
+ color: var(--seed-color-fg-neutral);
321
358
  }
322
359
  .seed-page-banner__closeButtonIcon--tone_magic-variant_weak {
323
- color: var(--seed-color-fg-neutral)
360
+ color: var(--seed-color-fg-neutral);
324
361
  }
325
362
  .seed-page-banner__root--tone_neutral-variant_weak-pressed_true {
326
- background-color: var(--seed-color-bg-neutral-weak-pressed)
363
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
327
364
  }
328
365
  .seed-page-banner__root--tone_neutral-variant_solid-pressed_true {
329
- background-color: var(--seed-color-bg-neutral-inverted-pressed)
366
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
330
367
  }
331
368
  .seed-page-banner__root--tone_informative-variant_weak-pressed_true {
332
- background-color: var(--seed-color-bg-informative-weak-pressed)
369
+ background-color: var(--seed-color-bg-informative-weak-pressed);
333
370
  }
334
371
  .seed-page-banner__root--tone_informative-variant_solid-pressed_true {
335
- background-color: var(--seed-color-bg-informative-solid-pressed)
372
+ background-color: var(--seed-color-bg-informative-solid-pressed);
336
373
  }
337
374
  .seed-page-banner__root--tone_positive-variant_weak-pressed_true {
338
- background-color: var(--seed-color-bg-positive-weak-pressed)
375
+ background-color: var(--seed-color-bg-positive-weak-pressed);
339
376
  }
340
377
  .seed-page-banner__root--tone_positive-variant_solid-pressed_true {
341
- background-color: var(--seed-color-bg-positive-solid-pressed)
378
+ background-color: var(--seed-color-bg-positive-solid-pressed);
342
379
  }
343
380
  .seed-page-banner__root--tone_warning-variant_weak-pressed_true {
344
- background-color: var(--seed-color-bg-warning-weak-pressed)
381
+ background-color: var(--seed-color-bg-warning-weak-pressed);
345
382
  }
346
383
  .seed-page-banner__root--tone_warning-variant_solid-pressed_true {
347
- background-color: var(--seed-color-bg-warning-solid-pressed)
384
+ background-color: var(--seed-color-bg-warning-solid-pressed);
348
385
  }
349
386
  .seed-page-banner__root--tone_critical-variant_weak-pressed_true {
350
- background-color: var(--seed-color-bg-critical-weak-pressed)
387
+ background-color: var(--seed-color-bg-critical-weak-pressed);
351
388
  }
352
389
  .seed-page-banner__root--tone_critical-variant_solid-pressed_true {
353
- background-color: var(--seed-color-bg-critical-solid-pressed)
390
+ background-color: var(--seed-color-bg-critical-solid-pressed);
354
391
  }
355
392
  .seed-page-banner__root--tone_magic-variant_weak-pressed_true {
356
- background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed))
393
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
357
394
  }
package/recipes/page-banner.d.ts CHANGED
@@ -11,6 +11,10 @@ declare interface PageBannerVariant {
11
11
  * @default false
12
12
  */
13
13
  pressed: boolean;
14
+ /**
15
+ * @default false
16
+ */
17
+ interactive: boolean;
14
18
  /**
15
19
  * @default false
16
20
  */
package/recipes/page-banner.mjs CHANGED
@@ -48,10 +48,66 @@ const defaultVariant = {
48
48
  "tone": "neutral",
49
49
  "variant": "weak",
50
50
  "pressed": false,
51
- "closeButtonPressed": false
51
+ "closeButtonPressed": false,
52
+ "interactive": false
52
53
  };
53
54
 
54
55
  const compoundVariants = [
56
+ {
57
+ "tone": "neutral",
58
+ "variant": "weak",
59
+ "interactive": true
60
+ },
61
+ {
62
+ "tone": "neutral",
63
+ "variant": "solid",
64
+ "interactive": true
65
+ },
66
+ {
67
+ "tone": "informative",
68
+ "variant": "weak",
69
+ "interactive": true
70
+ },
71
+ {
72
+ "tone": "informative",
73
+ "variant": "solid",
74
+ "interactive": true
75
+ },
76
+ {
77
+ "tone": "positive",
78
+ "variant": "weak",
79
+ "interactive": true
80
+ },
81
+ {
82
+ "tone": "positive",
83
+ "variant": "solid",
84
+ "interactive": true
85
+ },
86
+ {
87
+ "tone": "warning",
88
+ "variant": "weak",
89
+ "interactive": true
90
+ },
91
+ {
92
+ "tone": "warning",
93
+ "variant": "solid",
94
+ "interactive": true
95
+ },
96
+ {
97
+ "tone": "critical",
98
+ "variant": "weak",
99
+ "interactive": true
100
+ },
101
+ {
102
+ "tone": "critical",
103
+ "variant": "solid",
104
+ "interactive": true
105
+ },
106
+ {
107
+ "tone": "magic",
108
+ "variant": "weak",
109
+ "interactive": true
110
+ },
55
111
  {
56
112
  "tone": "neutral",
57
113
  "variant": "weak"
@@ -170,6 +226,10 @@ export const pageBannerVariantMap = {
170
226
  true,
171
227
  false
172
228
  ],
229
+ "interactive": [
230
+ true,
231
+ false
232
+ ],
173
233
  "closeButtonPressed": [
174
234
  true,
175
235
  false
package/recipes/radio.css CHANGED
@@ -37,4 +37,7 @@
37
37
  }
38
38
  .seed-radio__label--disabled_true {
39
39
  color: var(--seed-color-fg-disabled)
40
+ }
41
+ .seed-radio__root--disabled_false:active .seed-radiomark__root {
42
+ background-color: var(--seed-radiomark-pressed-color)
40
43
  }
package/recipes/radiomark.css CHANGED
@@ -8,7 +8,8 @@
8
8
  border-style: solid;
9
9
  border-color: var(--seed-color-stroke-neutral-weak);
10
10
  border-radius: var(--seed-radius-full);
11
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
11
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
12
+ --seed-radiomark-pressed-color: var(--seed-color-bg-transparent-pressed)
12
13
  }
13
14
  .seed-radiomark__icon {
14
15
  border-radius: var(--seed-radius-full)
@@ -34,6 +35,7 @@
34
35
  }
35
36
  .seed-radiomark__root--tone_brand-checked_true-disabled_false {
36
37
  background-color: var(--seed-color-bg-brand-solid);
38
+ --seed-radiomark-pressed-color: var(--seed-color-bg-brand-solid-pressed);
37
39
  border-width: 0px;
38
40
  border-color: #00000000
39
41
  }
@@ -43,6 +45,7 @@
43
45
  }
44
46
  .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
45
47
  background-color: var(--seed-color-bg-neutral-inverted);
48
+ --seed-radiomark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed);
46
49
  border-width: 0px;
47
50
  border-color: #00000000
48
51
  }