@seed-design/lynx-css 0.10.1 → 0.11.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 (58) hide show
  1. package/all.css +1219 -179
  2. package/all.min.css +1 -1
  3. package/package.json +9 -3
  4. package/recipes/accordion.css +10 -0
  5. package/recipes/accordion.d.ts +1 -1
  6. package/recipes/accordion.mjs +4 -0
  7. package/recipes/action-button.css +21 -13
  8. package/recipes/action-button.mjs +30 -11
  9. package/recipes/callout.css +18 -0
  10. package/recipes/callout.d.ts +4 -0
  11. package/recipes/callout.mjs +30 -1
  12. package/recipes/checkbox.css +18 -6
  13. package/recipes/checkbox.d.ts +1 -1
  14. package/recipes/checkbox.mjs +4 -0
  15. package/recipes/checkmark.css +10 -6
  16. package/recipes/chip.css +18 -0
  17. package/recipes/chip.mjs +30 -0
  18. package/recipes/input-button.css +209 -0
  19. package/recipes/input-button.d.ts +40 -0
  20. package/recipes/input-button.mjs +99 -0
  21. package/recipes/list-header.css +22 -0
  22. package/recipes/list-header.d.ts +22 -0
  23. package/recipes/list-header.mjs +29 -0
  24. package/recipes/list-item.css +120 -0
  25. package/recipes/list-item.d.ts +32 -0
  26. package/recipes/list-item.mjs +93 -0
  27. package/recipes/list.css +5 -0
  28. package/recipes/list.d.ts +19 -0
  29. package/recipes/list.mjs +22 -0
  30. package/recipes/menu-item.css +119 -0
  31. package/recipes/menu-item.d.ts +36 -0
  32. package/recipes/menu-item.mjs +91 -0
  33. package/recipes/menu-sheet-item.css +69 -0
  34. package/recipes/menu-sheet-item.d.ts +32 -0
  35. package/recipes/menu-sheet-item.mjs +69 -0
  36. package/recipes/menu-sheet.css +104 -0
  37. package/recipes/menu-sheet.d.ts +28 -0
  38. package/recipes/menu-sheet.mjs +88 -0
  39. package/recipes/menu.css +101 -0
  40. package/recipes/menu.d.ts +32 -0
  41. package/recipes/menu.mjs +85 -0
  42. package/recipes/page-banner.css +136 -99
  43. package/recipes/page-banner.d.ts +4 -0
  44. package/recipes/page-banner.mjs +61 -1
  45. package/recipes/radio.css +3 -0
  46. package/recipes/radiomark.css +4 -1
  47. package/recipes/reaction-button.css +145 -0
  48. package/recipes/reaction-button.d.ts +40 -0
  49. package/recipes/reaction-button.mjs +101 -0
  50. package/recipes/segmented-control.css +16 -2
  51. package/recipes/segmented-control.d.ts +1 -1
  52. package/recipes/segmented-control.mjs +8 -0
  53. package/recipes/select-box.css +12 -0
  54. package/recipes/select-box.d.ts +1 -1
  55. package/recipes/select-box.mjs +4 -0
  56. package/recipes/text-input.css +66 -59
  57. package/scale-feedback/index.d.ts +2 -0
  58. package/scale-feedback/index.mjs +3 -0
package/recipes/menu.css ADDED
@@ -0,0 +1,101 @@
1
+ .seed-menu__positioner {
2
+ position: absolute;
3
+ top: 0;
4
+ left: 0;
5
+ width: 100%;
6
+ height: 100%;
7
+ z-index: 0
8
+ }
9
+ .seed-menu__backdrop {
10
+ position: absolute;
11
+ top: 0;
12
+ right: 0;
13
+ bottom: 0;
14
+ left: 0
15
+ }
16
+ .seed-menu__content {
17
+ position: absolute;
18
+ display: flex;
19
+ flex-direction: column;
20
+ border-radius: var(--seed-radius-r5);
21
+ background-color: var(--seed-color-bg-layer-floating);
22
+ box-shadow: var(--seed-shadow-s3);
23
+ overflow: hidden;
24
+ transition-property: opacity, transform
25
+ }
26
+ .seed-menu__scrollArea {
27
+ width: 100%;
28
+ max-height: 480px
29
+ }
30
+ .seed-menu__scrollContent {
31
+ display: flex;
32
+ flex-direction: column;
33
+ padding-top: var(--seed-dimension-x2);
34
+ padding-bottom: var(--seed-dimension-x2);
35
+ gap: var(--seed-dimension-x2)
36
+ }
37
+ .seed-menu__group {
38
+ display: flex;
39
+ flex-direction: column;
40
+ flex-shrink: 0
41
+ }
42
+ .seed-menu__groupLabel {
43
+ color: var(--seed-color-fg-neutral-subtle);
44
+ flex-shrink: 0
45
+ }
46
+ .seed-menu__separator {
47
+ height: 1px;
48
+ flex-shrink: 0;
49
+ margin-left: var(--seed-dimension-x4);
50
+ margin-right: var(--seed-dimension-x4);
51
+ margin-bottom: var(--seed-dimension-x2);
52
+ background-color: var(--seed-color-stroke-neutral-muted)
53
+ }
54
+ .seed-menu__content--size_medium {
55
+ width: 240px
56
+ }
57
+ .seed-menu__groupLabel--size_medium {
58
+ padding-top: var(--seed-dimension-x2_5);
59
+ padding-bottom: var(--seed-dimension-x2_5);
60
+ padding-left: var(--seed-dimension-x4);
61
+ padding-right: var(--seed-dimension-x4);
62
+ font-size: var(--seed-font-size-t4);
63
+ line-height: var(--seed-line-height-t4);
64
+ font-weight: var(--seed-font-weight-medium)
65
+ }
66
+ .seed-menu__content--size_small {
67
+ width: 200px
68
+ }
69
+ .seed-menu__groupLabel--size_small {
70
+ padding-top: var(--seed-dimension-x2);
71
+ padding-bottom: var(--seed-dimension-x2);
72
+ padding-left: var(--seed-dimension-x4);
73
+ padding-right: var(--seed-dimension-x4);
74
+ font-size: var(--seed-font-size-t3);
75
+ line-height: var(--seed-line-height-t3);
76
+ font-weight: var(--seed-font-weight-regular)
77
+ }
78
+ .seed-menu__content--open_true {
79
+ opacity: 1;
80
+ transform: scale(1);
81
+ transition-duration: var(--seed-duration-d3);
82
+ transition-timing-function: var(--seed-timing-function-enter)
83
+ }
84
+ .seed-menu__content--open_false {
85
+ opacity: 0;
86
+ transform: scale(0.95);
87
+ transition-duration: var(--seed-duration-d2);
88
+ transition-timing-function: var(--seed-timing-function-exit)
89
+ }
90
+ .seed-menu__content--positioned_false {
91
+ opacity: 0;
92
+ transform: scale(1);
93
+ transition-duration: 0s
94
+ }
95
+ .seed-menu__content--open_true-positioned_true {
96
+ animation-name: seed-enter;
97
+ animation-duration: var(--seed-duration-d3);
98
+ animation-timing-function: var(--seed-timing-function-enter);
99
+ --seed-enter-opacity: 0;
100
+ --seed-enter-scale: 0.95
101
+ }
package/recipes/menu.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ declare interface MenuVariant {
2
+ /**
3
+ * @default "medium"
4
+ */
5
+ size: "medium" | "small";
6
+ /**
7
+ * @default false
8
+ */
9
+ open: boolean;
10
+ /**
11
+ * @default false
12
+ */
13
+ positioned: boolean;
14
+ }
15
+
16
+ declare type MenuVariantMap = {
17
+ [key in keyof MenuVariant]: Array<MenuVariant[key]>;
18
+ };
19
+
20
+ export declare type MenuVariantProps = Partial<MenuVariant>;
21
+
22
+ export declare type MenuSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
23
+
24
+ export declare const menuVariantMap: MenuVariantMap;
25
+
26
+ export declare const menu: ((
27
+ props?: MenuVariantProps,
28
+ ) => Record<MenuSlotName, string>) & {
29
+ splitVariantProps: <T extends MenuVariantProps>(
30
+ props: T,
31
+ ) => [MenuVariantProps, Omit<T, keyof MenuVariantProps>];
32
+ }
package/recipes/menu.mjs ADDED
@@ -0,0 +1,85 @@
1
+ import './menu.css';
2
+ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
+
4
+ const menuSlotNames = [
5
+ [
6
+ "positioner",
7
+ "seed-menu__positioner"
8
+ ],
9
+ [
10
+ "backdrop",
11
+ "seed-menu__backdrop"
12
+ ],
13
+ [
14
+ "content",
15
+ "seed-menu__content"
16
+ ],
17
+ [
18
+ "scrollArea",
19
+ "seed-menu__scrollArea"
20
+ ],
21
+ [
22
+ "scrollContent",
23
+ "seed-menu__scrollContent"
24
+ ],
25
+ [
26
+ "group",
27
+ "seed-menu__group"
28
+ ],
29
+ [
30
+ "groupLabel",
31
+ "seed-menu__groupLabel"
32
+ ],
33
+ [
34
+ "separator",
35
+ "seed-menu__separator"
36
+ ]
37
+ ];
38
+
39
+ const defaultVariant = {
40
+ "size": "medium",
41
+ "open": false,
42
+ "positioned": false
43
+ };
44
+
45
+ const compoundVariants = [
46
+ {
47
+ "positioned": false
48
+ },
49
+ {
50
+ "open": true,
51
+ "positioned": true
52
+ }
53
+ ];
54
+
55
+ export const menuVariantMap = {
56
+ "size": [
57
+ "medium",
58
+ "small"
59
+ ],
60
+ "open": [
61
+ true,
62
+ false
63
+ ],
64
+ "positioned": [
65
+ true,
66
+ false
67
+ ]
68
+ };
69
+
70
+ export const menuVariantKeys = Object.keys(menuVariantMap);
71
+
72
+ export function menu(props) {
73
+ return Object.fromEntries(
74
+ menuSlotNames.map(([slot, className]) => {
75
+ return [
76
+ slot,
77
+ createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
78
+ ];
79
+ }),
80
+ );
81
+ }
82
+
83
+ Object.assign(menu, { splitVariantProps: (props) => splitVariantProps(props, menuVariantMap) });
84
+
85
+ // @recipe(seed): menu
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
  }