@seed-design/css 1.2.16 → 2.1.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 (183) hide show
  1. package/all.css +4956 -1923
  2. package/all.layered.css +5922 -2881
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +348 -33
  6. package/base.layered.css +348 -33
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/breakpoints/index.d.ts +7 -0
  10. package/breakpoints/index.mjs +17 -0
  11. package/package.json +6 -1
  12. package/recipes/accordion.css +268 -0
  13. package/recipes/accordion.d.ts +33 -0
  14. package/recipes/accordion.layered.css +308 -0
  15. package/recipes/accordion.layered.mjs +94 -0
  16. package/recipes/accordion.mjs +94 -0
  17. package/recipes/action-button.css +56 -4
  18. package/recipes/action-button.d.ts +16 -0
  19. package/recipes/action-button.layered.css +60 -4
  20. package/recipes/app-bar.css +0 -3
  21. package/recipes/app-bar.d.ts +0 -4
  22. package/recipes/app-bar.layered.css +0 -4
  23. package/recipes/app-bar.layered.mjs +1 -5
  24. package/recipes/app-bar.mjs +1 -5
  25. package/recipes/app-screen.css +3 -0
  26. package/recipes/app-screen.layered.css +4 -0
  27. package/recipes/attachment-input-item.css +275 -0
  28. package/recipes/attachment-input-item.d.ts +24 -0
  29. package/recipes/attachment-input-item.layered.css +288 -0
  30. package/recipes/attachment-input-item.layered.mjs +79 -0
  31. package/recipes/attachment-input-item.mjs +79 -0
  32. package/recipes/attachment-input-trigger.css +71 -0
  33. package/recipes/attachment-input-trigger.d.ts +21 -0
  34. package/recipes/attachment-input-trigger.layered.css +85 -0
  35. package/recipes/attachment-input-trigger.layered.mjs +48 -0
  36. package/recipes/attachment-input-trigger.mjs +48 -0
  37. package/recipes/attachment-input.css +55 -0
  38. package/recipes/attachment-input.d.ts +21 -0
  39. package/recipes/attachment-input.layered.css +64 -0
  40. package/recipes/attachment-input.layered.mjs +48 -0
  41. package/recipes/attachment-input.mjs +48 -0
  42. package/recipes/avatar.d.ts +9 -0
  43. package/recipes/badge.d.ts +10 -0
  44. package/recipes/bottom-sheet.css +62 -5
  45. package/recipes/bottom-sheet.layered.css +67 -5
  46. package/recipes/callout.d.ts +7 -0
  47. package/recipes/checkmark.d.ts +3 -0
  48. package/recipes/chip-tabs.css +8 -52
  49. package/recipes/chip-tabs.d.ts +1 -1
  50. package/recipes/chip-tabs.layered.css +8 -62
  51. package/recipes/chip-tabs.layered.mjs +1 -2
  52. package/recipes/chip-tabs.mjs +1 -2
  53. package/recipes/chip.d.ts +4 -0
  54. package/recipes/contextual-floating-button.d.ts +6 -0
  55. package/recipes/dialog.css +14 -11
  56. package/recipes/dialog.layered.css +4 -0
  57. package/recipes/footer.css +44 -0
  58. package/recipes/footer.d.ts +24 -0
  59. package/recipes/footer.layered.css +52 -0
  60. package/recipes/footer.layered.mjs +39 -0
  61. package/recipes/footer.mjs +39 -0
  62. package/recipes/help-bubble.css +29 -1
  63. package/recipes/help-bubble.layered.css +34 -1
  64. package/recipes/image-frame.css +0 -3
  65. package/recipes/image-frame.d.ts +0 -4
  66. package/recipes/image-frame.layered.css +0 -4
  67. package/recipes/image-frame.layered.mjs +1 -6
  68. package/recipes/image-frame.mjs +1 -6
  69. package/recipes/input-button.css +176 -20
  70. package/recipes/input-button.d.ts +8 -1
  71. package/recipes/input-button.layered.css +197 -21
  72. package/recipes/input-button.layered.mjs +10 -2
  73. package/recipes/input-button.mjs +10 -2
  74. package/recipes/layout.css +25 -0
  75. package/recipes/layout.d.ts +24 -0
  76. package/recipes/layout.layered.css +25 -0
  77. package/recipes/layout.layered.mjs +44 -0
  78. package/recipes/layout.mjs +44 -0
  79. package/recipes/list-item.css +72 -4
  80. package/recipes/list-item.layered.css +84 -4
  81. package/recipes/menu-item.css +174 -0
  82. package/recipes/menu-item.d.ts +35 -0
  83. package/recipes/menu-item.layered.css +200 -0
  84. package/recipes/menu-item.layered.mjs +57 -0
  85. package/recipes/menu-item.mjs +57 -0
  86. package/recipes/menu-sheet-item.d.ts +6 -0
  87. package/recipes/menu-sheet.css +19 -1
  88. package/recipes/menu-sheet.layered.css +22 -1
  89. package/recipes/menu.css +119 -0
  90. package/recipes/menu.d.ts +28 -0
  91. package/recipes/menu.layered.css +139 -0
  92. package/recipes/menu.layered.mjs +56 -0
  93. package/recipes/menu.mjs +56 -0
  94. package/recipes/notification-badge.d.ts +3 -0
  95. package/recipes/page-banner.d.ts +5 -0
  96. package/recipes/progress-circle.d.ts +7 -0
  97. package/recipes/{selectBoxCheckmark.css → select-box-checkmark.css} +6 -6
  98. package/recipes/{selectBoxCheckmark.layered.css → select-box-checkmark.layered.css} +6 -6
  99. package/recipes/{selectBoxCheckmark.layered.mjs → select-box-checkmark.layered.mjs} +4 -4
  100. package/recipes/{selectBoxCheckmark.mjs → select-box-checkmark.mjs} +4 -4
  101. package/recipes/side-navigation-inset.css +4 -0
  102. package/recipes/side-navigation-inset.d.ts +19 -0
  103. package/recipes/side-navigation-inset.layered.css +6 -0
  104. package/recipes/side-navigation-inset.layered.mjs +22 -0
  105. package/recipes/side-navigation-inset.mjs +22 -0
  106. package/recipes/side-navigation-menu-item.css +135 -0
  107. package/recipes/side-navigation-menu-item.d.ts +21 -0
  108. package/recipes/side-navigation-menu-item.layered.css +156 -0
  109. package/recipes/side-navigation-menu-item.layered.mjs +48 -0
  110. package/recipes/side-navigation-menu-item.mjs +48 -0
  111. package/recipes/side-navigation.css +115 -0
  112. package/recipes/side-navigation.d.ts +24 -0
  113. package/recipes/side-navigation.layered.css +132 -0
  114. package/recipes/side-navigation.layered.mjs +63 -0
  115. package/recipes/side-navigation.mjs +63 -0
  116. package/recipes/side-panel.css +327 -0
  117. package/recipes/side-panel.d.ts +24 -0
  118. package/recipes/side-panel.layered.css +361 -0
  119. package/recipes/side-panel.layered.mjs +72 -0
  120. package/recipes/side-panel.mjs +72 -0
  121. package/recipes/skeleton.css +36 -2
  122. package/recipes/skeleton.d.ts +8 -0
  123. package/recipes/skeleton.layered.css +40 -2
  124. package/recipes/text-input.css +323 -52
  125. package/recipes/text-input.d.ts +8 -1
  126. package/recipes/text-input.layered.css +385 -51
  127. package/recipes/text-input.layered.mjs +18 -1
  128. package/recipes/text-input.mjs +18 -1
  129. package/recipes/text.css +180 -0
  130. package/recipes/text.d.ts +59 -1
  131. package/recipes/text.layered.css +216 -0
  132. package/recipes/text.layered.mjs +37 -1
  133. package/recipes/text.mjs +37 -1
  134. package/recipes/toggle-button.d.ts +3 -0
  135. package/vars/color/bg.d.ts +3 -1
  136. package/vars/color/bg.mjs +2 -0
  137. package/vars/color/stroke.d.ts +2 -2
  138. package/vars/color/stroke.mjs +2 -2
  139. package/vars/component/accordion-item.d.ts +132 -0
  140. package/vars/component/accordion-item.mjs +126 -0
  141. package/vars/component/accordion.d.ts +22 -0
  142. package/vars/component/accordion.mjs +16 -0
  143. package/vars/component/attachment-input-dropzone.d.ts +32 -0
  144. package/vars/component/attachment-input-dropzone.mjs +30 -0
  145. package/vars/component/attachment-input-item-action-button.d.ts +37 -0
  146. package/vars/component/attachment-input-item-action-button.mjs +37 -0
  147. package/vars/component/attachment-input-item-remove-button.d.ts +28 -0
  148. package/vars/component/attachment-input-item-remove-button.mjs +28 -0
  149. package/vars/component/attachment-input-item.d.ts +103 -0
  150. package/vars/component/attachment-input-item.mjs +102 -0
  151. package/vars/component/attachment-input-trigger.d.ts +46 -0
  152. package/vars/component/attachment-input-trigger.mjs +46 -0
  153. package/vars/component/attachment-input.d.ts +14 -0
  154. package/vars/component/attachment-input.mjs +12 -0
  155. package/vars/component/chip-tablist.d.ts +0 -7
  156. package/vars/component/chip-tablist.mjs +0 -7
  157. package/vars/component/image-frame.d.ts +1 -22
  158. package/vars/component/image-frame.mjs +1 -9
  159. package/vars/component/index.d.ts +12 -1
  160. package/vars/component/index.mjs +12 -1
  161. package/vars/component/input-button.d.ts +90 -17
  162. package/vars/component/input-button.mjs +84 -17
  163. package/vars/component/menu-item.d.ts +129 -0
  164. package/vars/component/menu-item.mjs +117 -0
  165. package/vars/component/menu.d.ts +68 -0
  166. package/vars/component/menu.mjs +60 -0
  167. package/vars/component/side-panel-close-button.d.ts +23 -0
  168. package/vars/component/side-panel-close-button.mjs +23 -0
  169. package/vars/component/side-panel.d.ts +94 -0
  170. package/vars/component/side-panel.mjs +83 -0
  171. package/vars/component/text-input.d.ts +92 -24
  172. package/vars/component/text-input.mjs +76 -24
  173. package/vars/component/typography.d.ts +414 -0
  174. package/vars/component/typography.mjs +324 -0
  175. package/vars/font-size.d.ts +17 -1
  176. package/vars/font-size.mjs +9 -1
  177. package/vars/gradient.d.ts +0 -8
  178. package/vars/gradient.mjs +0 -2
  179. package/vars/line-height.d.ts +17 -1
  180. package/vars/line-height.mjs +9 -1
  181. package/vars/component/chip-tab.d.ts +0 -162
  182. package/vars/component/chip-tab.mjs +0 -162
  183. /package/recipes/{selectBoxCheckmark.d.ts → select-box-checkmark.d.ts} +0 -0
package/base.css CHANGED
@@ -105,31 +105,158 @@
105
105
  border-bottom-width: var(--seed-box-border-bottom-width);
106
106
  border-left-width: var(--seed-box-border-left-width);
107
107
  border-right-width: var(--seed-box-border-right-width);
108
- --seed-box-padding: 0;
109
- --seed-box-padding-y: var(--seed-box-padding);
110
- --seed-box-padding-x: var(--seed-box-padding);
111
- --seed-box-padding-bottom: var(--seed-box-padding-y);
112
- --seed-box-padding-top: var(--seed-box-padding-y);
113
- --seed-box-padding-left: var(--seed-box-padding-x);
114
- --seed-box-padding-right: var(--seed-box-padding-x);
108
+ --seed-box-padding-base: 0;
109
+ --seed-box-padding-sm: var(--seed-box-padding-base);
110
+ --seed-box-padding-md: var(--seed-box-padding-sm);
111
+ --seed-box-padding-lg: var(--seed-box-padding-md);
112
+ --seed-box-padding-xl: var(--seed-box-padding-lg);
113
+ --seed-box-padding: var(--seed-box-padding-base);
114
+ --seed-box-padding-y-base: var(--seed-box-padding);
115
+ --seed-box-padding-y-sm: var(--seed-box-padding-y-base);
116
+ --seed-box-padding-y-md: var(--seed-box-padding-y-sm);
117
+ --seed-box-padding-y-lg: var(--seed-box-padding-y-md);
118
+ --seed-box-padding-y-xl: var(--seed-box-padding-y-lg);
119
+ --seed-box-padding-y: var(--seed-box-padding-y-base);
120
+ --seed-box-padding-x-base: var(--seed-box-padding);
121
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
122
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
123
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
124
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
125
+ --seed-box-padding-x: var(--seed-box-padding-x-base);
126
+ --seed-box-padding-bottom-base: var(--seed-box-padding-y);
127
+ --seed-box-padding-bottom-sm: var(--seed-box-padding-bottom-base);
128
+ --seed-box-padding-bottom-md: var(--seed-box-padding-bottom-sm);
129
+ --seed-box-padding-bottom-lg: var(--seed-box-padding-bottom-md);
130
+ --seed-box-padding-bottom-xl: var(--seed-box-padding-bottom-lg);
131
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-base);
132
+ --seed-box-padding-top-base: var(--seed-box-padding-y);
133
+ --seed-box-padding-top-sm: var(--seed-box-padding-top-base);
134
+ --seed-box-padding-top-md: var(--seed-box-padding-top-sm);
135
+ --seed-box-padding-top-lg: var(--seed-box-padding-top-md);
136
+ --seed-box-padding-top-xl: var(--seed-box-padding-top-lg);
137
+ --seed-box-padding-top: var(--seed-box-padding-top-base);
138
+ --seed-box-padding-left-base: var(--seed-box-padding-x);
139
+ --seed-box-padding-left-sm: var(--seed-box-padding-left-base);
140
+ --seed-box-padding-left-md: var(--seed-box-padding-left-sm);
141
+ --seed-box-padding-left-lg: var(--seed-box-padding-left-md);
142
+ --seed-box-padding-left-xl: var(--seed-box-padding-left-lg);
143
+ --seed-box-padding-left: var(--seed-box-padding-left-base);
144
+ --seed-box-padding-right-base: var(--seed-box-padding-x);
145
+ --seed-box-padding-right-sm: var(--seed-box-padding-right-base);
146
+ --seed-box-padding-right-md: var(--seed-box-padding-right-sm);
147
+ --seed-box-padding-right-lg: var(--seed-box-padding-right-md);
148
+ --seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
149
+ --seed-box-padding-right: var(--seed-box-padding-right-base);
115
150
  padding-top: var(--seed-box-padding-top);
116
151
  padding-bottom: var(--seed-box-padding-bottom);
117
152
  padding-left: var(--seed-box-padding-left);
118
153
  padding-right: var(--seed-box-padding-right);
119
- --seed-box-bleed-bottom: 0px;
120
- --seed-box-bleed-top: 0px;
121
- --seed-box-bleed-left: 0px;
122
- --seed-box-bleed-right: 0px;
123
- margin-top: calc(var(--seed-box-bleed-top) * -1);
124
- margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
125
- margin-left: calc(var(--seed-box-bleed-left) * -1);
126
- margin-right: calc(var(--seed-box-bleed-right) * -1);
127
- --seed-box-min-height: initial;
128
- --seed-box-max-height: initial;
129
- --seed-box-height: initial;
130
- --seed-box-min-width: initial;
131
- --seed-box-max-width: initial;
132
- --seed-box-width: initial;
154
+ --seed-box-bleed-bottom-base: 0px;
155
+ --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
156
+ --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
157
+ --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
158
+ --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
159
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
160
+ --seed-box-bleed-top-base: 0px;
161
+ --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
162
+ --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
163
+ --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
164
+ --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
165
+ --seed-box-bleed-top: var(--seed-box-bleed-top-base);
166
+ --seed-box-bleed-left-base: 0px;
167
+ --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
168
+ --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
169
+ --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
170
+ --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
171
+ --seed-box-bleed-left: var(--seed-box-bleed-left-base);
172
+ --seed-box-bleed-right-base: 0px;
173
+ --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
174
+ --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
175
+ --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
176
+ --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
177
+ --seed-box-bleed-right: var(--seed-box-bleed-right-base);
178
+ --seed-box-margin-base: initial;
179
+ --seed-box-margin-sm: var(--seed-box-margin-base);
180
+ --seed-box-margin-md: var(--seed-box-margin-sm);
181
+ --seed-box-margin-lg: var(--seed-box-margin-md);
182
+ --seed-box-margin-xl: var(--seed-box-margin-lg);
183
+ --seed-box-margin: var(--seed-box-margin-base);
184
+ --seed-box-margin-y-base: var(--seed-box-margin);
185
+ --seed-box-margin-y-sm: var(--seed-box-margin-y-base);
186
+ --seed-box-margin-y-md: var(--seed-box-margin-y-sm);
187
+ --seed-box-margin-y-lg: var(--seed-box-margin-y-md);
188
+ --seed-box-margin-y-xl: var(--seed-box-margin-y-lg);
189
+ --seed-box-margin-y: var(--seed-box-margin-y-base);
190
+ --seed-box-margin-x-base: var(--seed-box-margin);
191
+ --seed-box-margin-x-sm: var(--seed-box-margin-x-base);
192
+ --seed-box-margin-x-md: var(--seed-box-margin-x-sm);
193
+ --seed-box-margin-x-lg: var(--seed-box-margin-x-md);
194
+ --seed-box-margin-x-xl: var(--seed-box-margin-x-lg);
195
+ --seed-box-margin-x: var(--seed-box-margin-x-base);
196
+ --seed-box-margin-top-base: var(--seed-box-margin-y);
197
+ --seed-box-margin-top-sm: var(--seed-box-margin-top-base);
198
+ --seed-box-margin-top-md: var(--seed-box-margin-top-sm);
199
+ --seed-box-margin-top-lg: var(--seed-box-margin-top-md);
200
+ --seed-box-margin-top-xl: var(--seed-box-margin-top-lg);
201
+ --seed-box-margin-top: var(--seed-box-margin-top-base);
202
+ --seed-box-margin-bottom-base: var(--seed-box-margin-y);
203
+ --seed-box-margin-bottom-sm: var(--seed-box-margin-bottom-base);
204
+ --seed-box-margin-bottom-md: var(--seed-box-margin-bottom-sm);
205
+ --seed-box-margin-bottom-lg: var(--seed-box-margin-bottom-md);
206
+ --seed-box-margin-bottom-xl: var(--seed-box-margin-bottom-lg);
207
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-base);
208
+ --seed-box-margin-left-base: var(--seed-box-margin-x);
209
+ --seed-box-margin-left-sm: var(--seed-box-margin-left-base);
210
+ --seed-box-margin-left-md: var(--seed-box-margin-left-sm);
211
+ --seed-box-margin-left-lg: var(--seed-box-margin-left-md);
212
+ --seed-box-margin-left-xl: var(--seed-box-margin-left-lg);
213
+ --seed-box-margin-left: var(--seed-box-margin-left-base);
214
+ --seed-box-margin-right-base: var(--seed-box-margin-x);
215
+ --seed-box-margin-right-sm: var(--seed-box-margin-right-base);
216
+ --seed-box-margin-right-md: var(--seed-box-margin-right-sm);
217
+ --seed-box-margin-right-lg: var(--seed-box-margin-right-md);
218
+ --seed-box-margin-right-xl: var(--seed-box-margin-right-lg);
219
+ --seed-box-margin-right: var(--seed-box-margin-right-base);
220
+ margin-top: var(--seed-box-margin-top, calc(var(--seed-box-bleed-top) * -1));
221
+ margin-bottom: var(--seed-box-margin-bottom, calc(var(--seed-box-bleed-bottom) * -1));
222
+ margin-left: var(--seed-box-margin-left, calc(var(--seed-box-bleed-left) * -1));
223
+ margin-right: var(--seed-box-margin-right, calc(var(--seed-box-bleed-right) * -1));
224
+ --seed-box-min-height-base: initial;
225
+ --seed-box-min-height-sm: var(--seed-box-min-height-base);
226
+ --seed-box-min-height-md: var(--seed-box-min-height-sm);
227
+ --seed-box-min-height-lg: var(--seed-box-min-height-md);
228
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg);
229
+ --seed-box-min-height: var(--seed-box-min-height-base);
230
+ --seed-box-max-height-base: initial;
231
+ --seed-box-max-height-sm: var(--seed-box-max-height-base);
232
+ --seed-box-max-height-md: var(--seed-box-max-height-sm);
233
+ --seed-box-max-height-lg: var(--seed-box-max-height-md);
234
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg);
235
+ --seed-box-max-height: var(--seed-box-max-height-base);
236
+ --seed-box-height-base: initial;
237
+ --seed-box-height-sm: var(--seed-box-height-base);
238
+ --seed-box-height-md: var(--seed-box-height-sm);
239
+ --seed-box-height-lg: var(--seed-box-height-md);
240
+ --seed-box-height-xl: var(--seed-box-height-lg);
241
+ --seed-box-height: var(--seed-box-height-base);
242
+ --seed-box-min-width-base: initial;
243
+ --seed-box-min-width-sm: var(--seed-box-min-width-base);
244
+ --seed-box-min-width-md: var(--seed-box-min-width-sm);
245
+ --seed-box-min-width-lg: var(--seed-box-min-width-md);
246
+ --seed-box-min-width-xl: var(--seed-box-min-width-lg);
247
+ --seed-box-min-width: var(--seed-box-min-width-base);
248
+ --seed-box-max-width-base: initial;
249
+ --seed-box-max-width-sm: var(--seed-box-max-width-base);
250
+ --seed-box-max-width-md: var(--seed-box-max-width-sm);
251
+ --seed-box-max-width-lg: var(--seed-box-max-width-md);
252
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg);
253
+ --seed-box-max-width: var(--seed-box-max-width-base);
254
+ --seed-box-width-base: initial;
255
+ --seed-box-width-sm: var(--seed-box-width-base);
256
+ --seed-box-width-md: var(--seed-box-width-sm);
257
+ --seed-box-width-lg: var(--seed-box-width-md);
258
+ --seed-box-width-xl: var(--seed-box-width-lg);
259
+ --seed-box-width: var(--seed-box-width-base);
133
260
  min-height: var(--seed-box-min-height);
134
261
  max-height: var(--seed-box-max-height);
135
262
  height: var(--seed-box-height);
@@ -155,7 +282,12 @@
155
282
  border-top-right-radius: var(--seed-box-border-top-right-radius);
156
283
  --seed-box-box-shadow: initial;
157
284
  box-shadow: var(--seed-box-box-shadow);
158
- --seed-box-display: block;
285
+ --seed-box-display-base: block;
286
+ --seed-box-display-sm: var(--seed-box-display-base);
287
+ --seed-box-display-md: var(--seed-box-display-sm);
288
+ --seed-box-display-lg: var(--seed-box-display-md);
289
+ --seed-box-display-xl: var(--seed-box-display-lg);
290
+ --seed-box-display: var(--seed-box-display-base);
159
291
  --seed-box-position: initial;
160
292
  display: var(--seed-box-display);
161
293
  position: var(--seed-box-position);
@@ -171,14 +303,24 @@
171
303
  --seed-box-flex-shrink: initial;
172
304
  flex-grow: var(--seed-box-flex-grow);
173
305
  flex-shrink: var(--seed-box-flex-shrink);
174
- --seed-box-flex-direction: initial;
306
+ --seed-box-flex-direction-base: initial;
307
+ --seed-box-flex-direction-sm: var(--seed-box-flex-direction-base);
308
+ --seed-box-flex-direction-md: var(--seed-box-flex-direction-sm);
309
+ --seed-box-flex-direction-lg: var(--seed-box-flex-direction-md);
310
+ --seed-box-flex-direction-xl: var(--seed-box-flex-direction-lg);
311
+ --seed-box-flex-direction: var(--seed-box-flex-direction-base);
175
312
  --seed-box-flex-wrap: initial;
176
313
  --seed-box-justify-content: initial;
177
314
  --seed-box-justify-self: auto;
178
315
  --seed-box-align-items: stretch;
179
316
  --seed-box-align-content: stretch;
180
317
  --seed-box-align-self: auto;
181
- --seed-box-gap: initial;
318
+ --seed-box-gap-base: initial;
319
+ --seed-box-gap-sm: var(--seed-box-gap-base);
320
+ --seed-box-gap-md: var(--seed-box-gap-sm);
321
+ --seed-box-gap-lg: var(--seed-box-gap-md);
322
+ --seed-box-gap-xl: var(--seed-box-gap-lg);
323
+ --seed-box-gap: var(--seed-box-gap-base);
182
324
  flex-direction: var(--seed-box-flex-direction);
183
325
  flex-wrap: var(--seed-box-flex-wrap);
184
326
  justify-content: var(--seed-box-justify-content);
@@ -198,9 +340,19 @@
198
340
  }
199
341
 
200
342
  .seed-grid {
201
- --seed-grid-columns: initial;
343
+ --seed-grid-columns-base: initial;
344
+ --seed-grid-columns-sm: var(--seed-grid-columns-base);
345
+ --seed-grid-columns-md: var(--seed-grid-columns-sm);
346
+ --seed-grid-columns-lg: var(--seed-grid-columns-md);
347
+ --seed-grid-columns-xl: var(--seed-grid-columns-lg);
348
+ --seed-grid-columns: var(--seed-grid-columns-base);
202
349
  grid-template-columns: var(--seed-grid-columns);
203
- --seed-grid-rows: initial;
350
+ --seed-grid-rows-base: initial;
351
+ --seed-grid-rows-sm: var(--seed-grid-rows-base);
352
+ --seed-grid-rows-md: var(--seed-grid-rows-sm);
353
+ --seed-grid-rows-lg: var(--seed-grid-rows-md);
354
+ --seed-grid-rows-xl: var(--seed-grid-rows-lg);
355
+ --seed-grid-rows: var(--seed-grid-rows-base);
204
356
  grid-template-rows: var(--seed-grid-rows);
205
357
  --seed-grid-auto-flow: initial;
206
358
  grid-auto-flow: var(--seed-grid-auto-flow);
@@ -210,7 +362,6 @@
210
362
  grid-auto-rows: var(--seed-grid-auto-rows);
211
363
  --seed-grid-justify-items: stretch;
212
364
  justify-items: var(--seed-grid-justify-items);
213
- display: grid;
214
365
  }
215
366
 
216
367
  .seed-consistent-width:before {
@@ -287,6 +438,10 @@
287
438
  --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1.5)));
288
439
  --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1.5)));
289
440
  --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, .8)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1.5)));
441
+ --seed-font-size-t11: clamp(calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-min, .8)), calc(1.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-max, 1.5)));
442
+ --seed-font-size-t12: clamp(calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-max, 1.5)));
443
+ --seed-font-size-t13: clamp(calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-min, .8)), calc(2.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-max, 1.5)));
444
+ --seed-font-size-t14: clamp(calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-min, .8)), calc(3rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-max, 1.5)));
290
445
  --seed-font-size-t1-static: 11px;
291
446
  --seed-font-size-t2-static: 12px;
292
447
  --seed-font-size-t3-static: 13px;
@@ -297,6 +452,10 @@
297
452
  --seed-font-size-t8-static: 22px;
298
453
  --seed-font-size-t9-static: 24px;
299
454
  --seed-font-size-t10-static: 26px;
455
+ --seed-font-size-t11-static: 28px;
456
+ --seed-font-size-t12-static: 32px;
457
+ --seed-font-size-t13-static: 40px;
458
+ --seed-font-size-t14-static: 48px;
300
459
  --seed-font-weight-regular: 400;
301
460
  --seed-font-weight-medium: 500;
302
461
  --seed-font-weight-bold: 700;
@@ -310,6 +469,10 @@
310
469
  --seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, .8)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1.5)));
311
470
  --seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1.5)));
312
471
  --seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, .8)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1.5)));
472
+ --seed-line-height-t11: clamp(calc(var(--seed-line-height-t11-static) * var(--seed-line-height-limit-min, .8)), calc(2.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t11-static) * var(--seed-line-height-limit-max, 1.5)));
473
+ --seed-line-height-t12: clamp(calc(var(--seed-line-height-t12-static) * var(--seed-line-height-limit-min, .8)), calc(2.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t12-static) * var(--seed-line-height-limit-max, 1.5)));
474
+ --seed-line-height-t13: clamp(calc(var(--seed-line-height-t13-static) * var(--seed-line-height-limit-min, .8)), calc(3.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t13-static) * var(--seed-line-height-limit-max, 1.5)));
475
+ --seed-line-height-t14: clamp(calc(var(--seed-line-height-t14-static) * var(--seed-line-height-limit-min, .8)), calc(3.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t14-static) * var(--seed-line-height-limit-max, 1.5)));
313
476
  --seed-line-height-t1-static: 15px;
314
477
  --seed-line-height-t2-static: 16px;
315
478
  --seed-line-height-t3-static: 18px;
@@ -320,6 +483,10 @@
320
483
  --seed-line-height-t8-static: 30px;
321
484
  --seed-line-height-t9-static: 32px;
322
485
  --seed-line-height-t10-static: 35px;
486
+ --seed-line-height-t11-static: 38px;
487
+ --seed-line-height-t12-static: 42px;
488
+ --seed-line-height-t13-static: 52px;
489
+ --seed-line-height-t14-static: 60px;
323
490
  --seed-radius-r0_5: 2px;
324
491
  --seed-radius-r1: 4px;
325
492
  --seed-radius-r1_5: 6px;
@@ -488,6 +655,8 @@
488
655
  --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
489
656
  --seed-color-bg-transparent: #0000;
490
657
  --seed-color-bg-transparent-pressed: var(--seed-color-palette-static-black-alpha-100);
658
+ --seed-color-bg-transparent-selected: var(--seed-color-palette-static-black-alpha-200);
659
+ --seed-color-bg-transparent-selected-pressed: var(--seed-color-palette-static-black-alpha-300);
491
660
  --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-300);
492
661
  --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-400);
493
662
  --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
@@ -496,6 +665,7 @@
496
665
  --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
497
666
  --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
498
667
  --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
668
+ --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
499
669
  --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
500
670
  --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
501
671
  --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
@@ -507,7 +677,6 @@
507
677
  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
508
678
  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
509
679
  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
510
- --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
511
680
  --seed-color-manner-temp-l1-bg: #f1f2f3;
512
681
  --seed-color-manner-temp-l1-text: #757b85;
513
682
  --seed-color-manner-temp-l10-bg: #ffebee;
@@ -538,8 +707,6 @@
538
707
  --seed-color-banner-teal: #e6faf6;
539
708
  --seed-color-banner-warm-gray: #f2f0ee;
540
709
  --seed-color-banner-yellow: #fffae1;
541
- --seed-gradient-fade-layer-floating: #fff0 0%, #000 100%;
542
- --seed-gradient-fade-layer-default: #000 0%, #fff0 100%;
543
710
  --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
544
711
  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
545
712
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
@@ -699,6 +866,8 @@
699
866
  --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
700
867
  --seed-color-bg-transparent: #fff0;
701
868
  --seed-color-bg-transparent-pressed: var(--seed-color-palette-static-white-alpha-50);
869
+ --seed-color-bg-transparent-selected: var(--seed-color-palette-static-white-alpha-100);
870
+ --seed-color-bg-transparent-selected-pressed: var(--seed-color-palette-static-white-alpha-200);
702
871
  --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-800);
703
872
  --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-900);
704
873
  --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
@@ -707,6 +876,7 @@
707
876
  --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
708
877
  --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
709
878
  --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
879
+ --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
710
880
  --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
711
881
  --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
712
882
  --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
@@ -718,7 +888,6 @@
718
888
  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
719
889
  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
720
890
  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
721
- --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
722
891
  --seed-color-manner-temp-l1-bg: #292929;
723
892
  --seed-color-manner-temp-l1-text: #b8b8b9;
724
893
  --seed-color-manner-temp-l10-bg: #34040a;
@@ -749,8 +918,6 @@
749
918
  --seed-color-banner-teal: #143633;
750
919
  --seed-color-banner-warm-gray: #2f2b27;
751
920
  --seed-color-banner-yellow: #3e2b00;
752
- --seed-gradient-fade-layer-floating: #1d202500 0%, #000 100%;
753
- --seed-gradient-fade-layer-default: #000 0%, #16171b00 100%;
754
921
  --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
755
922
  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
756
923
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
@@ -859,3 +1026,151 @@
859
1026
  transform: translate3d(0, var(--initial-transform, 100%), 0);
860
1027
  }
861
1028
  }
1029
+
1030
+ @media (width >= 480px) {
1031
+ .seed-box {
1032
+ --seed-box-padding: var(--seed-box-padding-sm);
1033
+ --seed-box-padding-y: var(--seed-box-padding-y-sm);
1034
+ --seed-box-padding-x: var(--seed-box-padding-x-sm);
1035
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-sm);
1036
+ --seed-box-padding-top: var(--seed-box-padding-top-sm);
1037
+ --seed-box-padding-left: var(--seed-box-padding-left-sm);
1038
+ --seed-box-padding-right: var(--seed-box-padding-right-sm);
1039
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
1040
+ --seed-box-bleed-top: var(--seed-box-bleed-top-sm);
1041
+ --seed-box-bleed-left: var(--seed-box-bleed-left-sm);
1042
+ --seed-box-bleed-right: var(--seed-box-bleed-right-sm);
1043
+ --seed-box-margin: var(--seed-box-margin-sm);
1044
+ --seed-box-margin-y: var(--seed-box-margin-y-sm);
1045
+ --seed-box-margin-x: var(--seed-box-margin-x-sm);
1046
+ --seed-box-margin-top: var(--seed-box-margin-top-sm);
1047
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-sm);
1048
+ --seed-box-margin-left: var(--seed-box-margin-left-sm);
1049
+ --seed-box-margin-right: var(--seed-box-margin-right-sm);
1050
+ --seed-box-min-height: var(--seed-box-min-height-sm);
1051
+ --seed-box-max-height: var(--seed-box-max-height-sm);
1052
+ --seed-box-height: var(--seed-box-height-sm);
1053
+ --seed-box-min-width: var(--seed-box-min-width-sm);
1054
+ --seed-box-max-width: var(--seed-box-max-width-sm);
1055
+ --seed-box-width: var(--seed-box-width-sm);
1056
+ --seed-box-display: var(--seed-box-display-sm);
1057
+ --seed-box-flex-direction: var(--seed-box-flex-direction-sm);
1058
+ --seed-box-gap: var(--seed-box-gap-sm);
1059
+ }
1060
+
1061
+ .seed-grid {
1062
+ --seed-grid-columns: var(--seed-grid-columns-sm);
1063
+ --seed-grid-rows: var(--seed-grid-rows-sm);
1064
+ }
1065
+ }
1066
+
1067
+ @media (width >= 768px) {
1068
+ .seed-box {
1069
+ --seed-box-padding: var(--seed-box-padding-md);
1070
+ --seed-box-padding-y: var(--seed-box-padding-y-md);
1071
+ --seed-box-padding-x: var(--seed-box-padding-x-md);
1072
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-md);
1073
+ --seed-box-padding-top: var(--seed-box-padding-top-md);
1074
+ --seed-box-padding-left: var(--seed-box-padding-left-md);
1075
+ --seed-box-padding-right: var(--seed-box-padding-right-md);
1076
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
1077
+ --seed-box-bleed-top: var(--seed-box-bleed-top-md);
1078
+ --seed-box-bleed-left: var(--seed-box-bleed-left-md);
1079
+ --seed-box-bleed-right: var(--seed-box-bleed-right-md);
1080
+ --seed-box-margin: var(--seed-box-margin-md);
1081
+ --seed-box-margin-y: var(--seed-box-margin-y-md);
1082
+ --seed-box-margin-x: var(--seed-box-margin-x-md);
1083
+ --seed-box-margin-top: var(--seed-box-margin-top-md);
1084
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-md);
1085
+ --seed-box-margin-left: var(--seed-box-margin-left-md);
1086
+ --seed-box-margin-right: var(--seed-box-margin-right-md);
1087
+ --seed-box-min-height: var(--seed-box-min-height-md);
1088
+ --seed-box-max-height: var(--seed-box-max-height-md);
1089
+ --seed-box-height: var(--seed-box-height-md);
1090
+ --seed-box-min-width: var(--seed-box-min-width-md);
1091
+ --seed-box-max-width: var(--seed-box-max-width-md);
1092
+ --seed-box-width: var(--seed-box-width-md);
1093
+ --seed-box-display: var(--seed-box-display-md);
1094
+ --seed-box-flex-direction: var(--seed-box-flex-direction-md);
1095
+ --seed-box-gap: var(--seed-box-gap-md);
1096
+ }
1097
+
1098
+ .seed-grid {
1099
+ --seed-grid-columns: var(--seed-grid-columns-md);
1100
+ --seed-grid-rows: var(--seed-grid-rows-md);
1101
+ }
1102
+ }
1103
+
1104
+ @media (width >= 1280px) {
1105
+ .seed-box {
1106
+ --seed-box-padding: var(--seed-box-padding-lg);
1107
+ --seed-box-padding-y: var(--seed-box-padding-y-lg);
1108
+ --seed-box-padding-x: var(--seed-box-padding-x-lg);
1109
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-lg);
1110
+ --seed-box-padding-top: var(--seed-box-padding-top-lg);
1111
+ --seed-box-padding-left: var(--seed-box-padding-left-lg);
1112
+ --seed-box-padding-right: var(--seed-box-padding-right-lg);
1113
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
1114
+ --seed-box-bleed-top: var(--seed-box-bleed-top-lg);
1115
+ --seed-box-bleed-left: var(--seed-box-bleed-left-lg);
1116
+ --seed-box-bleed-right: var(--seed-box-bleed-right-lg);
1117
+ --seed-box-margin: var(--seed-box-margin-lg);
1118
+ --seed-box-margin-y: var(--seed-box-margin-y-lg);
1119
+ --seed-box-margin-x: var(--seed-box-margin-x-lg);
1120
+ --seed-box-margin-top: var(--seed-box-margin-top-lg);
1121
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-lg);
1122
+ --seed-box-margin-left: var(--seed-box-margin-left-lg);
1123
+ --seed-box-margin-right: var(--seed-box-margin-right-lg);
1124
+ --seed-box-min-height: var(--seed-box-min-height-lg);
1125
+ --seed-box-max-height: var(--seed-box-max-height-lg);
1126
+ --seed-box-height: var(--seed-box-height-lg);
1127
+ --seed-box-min-width: var(--seed-box-min-width-lg);
1128
+ --seed-box-max-width: var(--seed-box-max-width-lg);
1129
+ --seed-box-width: var(--seed-box-width-lg);
1130
+ --seed-box-display: var(--seed-box-display-lg);
1131
+ --seed-box-flex-direction: var(--seed-box-flex-direction-lg);
1132
+ --seed-box-gap: var(--seed-box-gap-lg);
1133
+ }
1134
+
1135
+ .seed-grid {
1136
+ --seed-grid-columns: var(--seed-grid-columns-lg);
1137
+ --seed-grid-rows: var(--seed-grid-rows-lg);
1138
+ }
1139
+ }
1140
+
1141
+ @media (width >= 1440px) {
1142
+ .seed-box {
1143
+ --seed-box-padding: var(--seed-box-padding-xl);
1144
+ --seed-box-padding-y: var(--seed-box-padding-y-xl);
1145
+ --seed-box-padding-x: var(--seed-box-padding-x-xl);
1146
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-xl);
1147
+ --seed-box-padding-top: var(--seed-box-padding-top-xl);
1148
+ --seed-box-padding-left: var(--seed-box-padding-left-xl);
1149
+ --seed-box-padding-right: var(--seed-box-padding-right-xl);
1150
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
1151
+ --seed-box-bleed-top: var(--seed-box-bleed-top-xl);
1152
+ --seed-box-bleed-left: var(--seed-box-bleed-left-xl);
1153
+ --seed-box-bleed-right: var(--seed-box-bleed-right-xl);
1154
+ --seed-box-margin: var(--seed-box-margin-xl);
1155
+ --seed-box-margin-y: var(--seed-box-margin-y-xl);
1156
+ --seed-box-margin-x: var(--seed-box-margin-x-xl);
1157
+ --seed-box-margin-top: var(--seed-box-margin-top-xl);
1158
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-xl);
1159
+ --seed-box-margin-left: var(--seed-box-margin-left-xl);
1160
+ --seed-box-margin-right: var(--seed-box-margin-right-xl);
1161
+ --seed-box-min-height: var(--seed-box-min-height-xl);
1162
+ --seed-box-max-height: var(--seed-box-max-height-xl);
1163
+ --seed-box-height: var(--seed-box-height-xl);
1164
+ --seed-box-min-width: var(--seed-box-min-width-xl);
1165
+ --seed-box-max-width: var(--seed-box-max-width-xl);
1166
+ --seed-box-width: var(--seed-box-width-xl);
1167
+ --seed-box-display: var(--seed-box-display-xl);
1168
+ --seed-box-flex-direction: var(--seed-box-flex-direction-xl);
1169
+ --seed-box-gap: var(--seed-box-gap-xl);
1170
+ }
1171
+
1172
+ .seed-grid {
1173
+ --seed-grid-columns: var(--seed-grid-columns-xl);
1174
+ --seed-grid-rows: var(--seed-grid-rows-xl);
1175
+ }
1176
+ }