@seed-design/css 1.2.15 → 2.0.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 -1925
  2. package/all.layered.css +5922 -2883
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +348 -35
  6. package/base.layered.css +348 -35
  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 +2 -2
  136. package/vars/color/bg.mjs +2 -1
  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.layered.css CHANGED
@@ -106,31 +106,158 @@
106
106
  border-bottom-width: var(--seed-box-border-bottom-width);
107
107
  border-left-width: var(--seed-box-border-left-width);
108
108
  border-right-width: var(--seed-box-border-right-width);
109
- --seed-box-padding: 0;
110
- --seed-box-padding-y: var(--seed-box-padding);
111
- --seed-box-padding-x: var(--seed-box-padding);
112
- --seed-box-padding-bottom: var(--seed-box-padding-y);
113
- --seed-box-padding-top: var(--seed-box-padding-y);
114
- --seed-box-padding-left: var(--seed-box-padding-x);
115
- --seed-box-padding-right: var(--seed-box-padding-x);
109
+ --seed-box-padding-base: 0;
110
+ --seed-box-padding-sm: var(--seed-box-padding-base);
111
+ --seed-box-padding-md: var(--seed-box-padding-sm);
112
+ --seed-box-padding-lg: var(--seed-box-padding-md);
113
+ --seed-box-padding-xl: var(--seed-box-padding-lg);
114
+ --seed-box-padding: var(--seed-box-padding-base);
115
+ --seed-box-padding-y-base: var(--seed-box-padding);
116
+ --seed-box-padding-y-sm: var(--seed-box-padding-y-base);
117
+ --seed-box-padding-y-md: var(--seed-box-padding-y-sm);
118
+ --seed-box-padding-y-lg: var(--seed-box-padding-y-md);
119
+ --seed-box-padding-y-xl: var(--seed-box-padding-y-lg);
120
+ --seed-box-padding-y: var(--seed-box-padding-y-base);
121
+ --seed-box-padding-x-base: var(--seed-box-padding);
122
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
123
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
124
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
125
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
126
+ --seed-box-padding-x: var(--seed-box-padding-x-base);
127
+ --seed-box-padding-bottom-base: var(--seed-box-padding-y);
128
+ --seed-box-padding-bottom-sm: var(--seed-box-padding-bottom-base);
129
+ --seed-box-padding-bottom-md: var(--seed-box-padding-bottom-sm);
130
+ --seed-box-padding-bottom-lg: var(--seed-box-padding-bottom-md);
131
+ --seed-box-padding-bottom-xl: var(--seed-box-padding-bottom-lg);
132
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-base);
133
+ --seed-box-padding-top-base: var(--seed-box-padding-y);
134
+ --seed-box-padding-top-sm: var(--seed-box-padding-top-base);
135
+ --seed-box-padding-top-md: var(--seed-box-padding-top-sm);
136
+ --seed-box-padding-top-lg: var(--seed-box-padding-top-md);
137
+ --seed-box-padding-top-xl: var(--seed-box-padding-top-lg);
138
+ --seed-box-padding-top: var(--seed-box-padding-top-base);
139
+ --seed-box-padding-left-base: var(--seed-box-padding-x);
140
+ --seed-box-padding-left-sm: var(--seed-box-padding-left-base);
141
+ --seed-box-padding-left-md: var(--seed-box-padding-left-sm);
142
+ --seed-box-padding-left-lg: var(--seed-box-padding-left-md);
143
+ --seed-box-padding-left-xl: var(--seed-box-padding-left-lg);
144
+ --seed-box-padding-left: var(--seed-box-padding-left-base);
145
+ --seed-box-padding-right-base: var(--seed-box-padding-x);
146
+ --seed-box-padding-right-sm: var(--seed-box-padding-right-base);
147
+ --seed-box-padding-right-md: var(--seed-box-padding-right-sm);
148
+ --seed-box-padding-right-lg: var(--seed-box-padding-right-md);
149
+ --seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
150
+ --seed-box-padding-right: var(--seed-box-padding-right-base);
116
151
  padding-top: var(--seed-box-padding-top);
117
152
  padding-bottom: var(--seed-box-padding-bottom);
118
153
  padding-left: var(--seed-box-padding-left);
119
154
  padding-right: var(--seed-box-padding-right);
120
- --seed-box-bleed-bottom: 0px;
121
- --seed-box-bleed-top: 0px;
122
- --seed-box-bleed-left: 0px;
123
- --seed-box-bleed-right: 0px;
124
- margin-top: calc(var(--seed-box-bleed-top) * -1);
125
- margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
126
- margin-left: calc(var(--seed-box-bleed-left) * -1);
127
- margin-right: calc(var(--seed-box-bleed-right) * -1);
128
- --seed-box-min-height: initial;
129
- --seed-box-max-height: initial;
130
- --seed-box-height: initial;
131
- --seed-box-min-width: initial;
132
- --seed-box-max-width: initial;
133
- --seed-box-width: initial;
155
+ --seed-box-bleed-bottom-base: 0px;
156
+ --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
157
+ --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
158
+ --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
159
+ --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
160
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
161
+ --seed-box-bleed-top-base: 0px;
162
+ --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
163
+ --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
164
+ --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
165
+ --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
166
+ --seed-box-bleed-top: var(--seed-box-bleed-top-base);
167
+ --seed-box-bleed-left-base: 0px;
168
+ --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
169
+ --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
170
+ --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
171
+ --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
172
+ --seed-box-bleed-left: var(--seed-box-bleed-left-base);
173
+ --seed-box-bleed-right-base: 0px;
174
+ --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
175
+ --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
176
+ --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
177
+ --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
178
+ --seed-box-bleed-right: var(--seed-box-bleed-right-base);
179
+ --seed-box-margin-base: initial;
180
+ --seed-box-margin-sm: var(--seed-box-margin-base);
181
+ --seed-box-margin-md: var(--seed-box-margin-sm);
182
+ --seed-box-margin-lg: var(--seed-box-margin-md);
183
+ --seed-box-margin-xl: var(--seed-box-margin-lg);
184
+ --seed-box-margin: var(--seed-box-margin-base);
185
+ --seed-box-margin-y-base: var(--seed-box-margin);
186
+ --seed-box-margin-y-sm: var(--seed-box-margin-y-base);
187
+ --seed-box-margin-y-md: var(--seed-box-margin-y-sm);
188
+ --seed-box-margin-y-lg: var(--seed-box-margin-y-md);
189
+ --seed-box-margin-y-xl: var(--seed-box-margin-y-lg);
190
+ --seed-box-margin-y: var(--seed-box-margin-y-base);
191
+ --seed-box-margin-x-base: var(--seed-box-margin);
192
+ --seed-box-margin-x-sm: var(--seed-box-margin-x-base);
193
+ --seed-box-margin-x-md: var(--seed-box-margin-x-sm);
194
+ --seed-box-margin-x-lg: var(--seed-box-margin-x-md);
195
+ --seed-box-margin-x-xl: var(--seed-box-margin-x-lg);
196
+ --seed-box-margin-x: var(--seed-box-margin-x-base);
197
+ --seed-box-margin-top-base: var(--seed-box-margin-y);
198
+ --seed-box-margin-top-sm: var(--seed-box-margin-top-base);
199
+ --seed-box-margin-top-md: var(--seed-box-margin-top-sm);
200
+ --seed-box-margin-top-lg: var(--seed-box-margin-top-md);
201
+ --seed-box-margin-top-xl: var(--seed-box-margin-top-lg);
202
+ --seed-box-margin-top: var(--seed-box-margin-top-base);
203
+ --seed-box-margin-bottom-base: var(--seed-box-margin-y);
204
+ --seed-box-margin-bottom-sm: var(--seed-box-margin-bottom-base);
205
+ --seed-box-margin-bottom-md: var(--seed-box-margin-bottom-sm);
206
+ --seed-box-margin-bottom-lg: var(--seed-box-margin-bottom-md);
207
+ --seed-box-margin-bottom-xl: var(--seed-box-margin-bottom-lg);
208
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-base);
209
+ --seed-box-margin-left-base: var(--seed-box-margin-x);
210
+ --seed-box-margin-left-sm: var(--seed-box-margin-left-base);
211
+ --seed-box-margin-left-md: var(--seed-box-margin-left-sm);
212
+ --seed-box-margin-left-lg: var(--seed-box-margin-left-md);
213
+ --seed-box-margin-left-xl: var(--seed-box-margin-left-lg);
214
+ --seed-box-margin-left: var(--seed-box-margin-left-base);
215
+ --seed-box-margin-right-base: var(--seed-box-margin-x);
216
+ --seed-box-margin-right-sm: var(--seed-box-margin-right-base);
217
+ --seed-box-margin-right-md: var(--seed-box-margin-right-sm);
218
+ --seed-box-margin-right-lg: var(--seed-box-margin-right-md);
219
+ --seed-box-margin-right-xl: var(--seed-box-margin-right-lg);
220
+ --seed-box-margin-right: var(--seed-box-margin-right-base);
221
+ margin-top: var(--seed-box-margin-top, calc(var(--seed-box-bleed-top) * -1));
222
+ margin-bottom: var(--seed-box-margin-bottom, calc(var(--seed-box-bleed-bottom) * -1));
223
+ margin-left: var(--seed-box-margin-left, calc(var(--seed-box-bleed-left) * -1));
224
+ margin-right: var(--seed-box-margin-right, calc(var(--seed-box-bleed-right) * -1));
225
+ --seed-box-min-height-base: initial;
226
+ --seed-box-min-height-sm: var(--seed-box-min-height-base);
227
+ --seed-box-min-height-md: var(--seed-box-min-height-sm);
228
+ --seed-box-min-height-lg: var(--seed-box-min-height-md);
229
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg);
230
+ --seed-box-min-height: var(--seed-box-min-height-base);
231
+ --seed-box-max-height-base: initial;
232
+ --seed-box-max-height-sm: var(--seed-box-max-height-base);
233
+ --seed-box-max-height-md: var(--seed-box-max-height-sm);
234
+ --seed-box-max-height-lg: var(--seed-box-max-height-md);
235
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg);
236
+ --seed-box-max-height: var(--seed-box-max-height-base);
237
+ --seed-box-height-base: initial;
238
+ --seed-box-height-sm: var(--seed-box-height-base);
239
+ --seed-box-height-md: var(--seed-box-height-sm);
240
+ --seed-box-height-lg: var(--seed-box-height-md);
241
+ --seed-box-height-xl: var(--seed-box-height-lg);
242
+ --seed-box-height: var(--seed-box-height-base);
243
+ --seed-box-min-width-base: initial;
244
+ --seed-box-min-width-sm: var(--seed-box-min-width-base);
245
+ --seed-box-min-width-md: var(--seed-box-min-width-sm);
246
+ --seed-box-min-width-lg: var(--seed-box-min-width-md);
247
+ --seed-box-min-width-xl: var(--seed-box-min-width-lg);
248
+ --seed-box-min-width: var(--seed-box-min-width-base);
249
+ --seed-box-max-width-base: initial;
250
+ --seed-box-max-width-sm: var(--seed-box-max-width-base);
251
+ --seed-box-max-width-md: var(--seed-box-max-width-sm);
252
+ --seed-box-max-width-lg: var(--seed-box-max-width-md);
253
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg);
254
+ --seed-box-max-width: var(--seed-box-max-width-base);
255
+ --seed-box-width-base: initial;
256
+ --seed-box-width-sm: var(--seed-box-width-base);
257
+ --seed-box-width-md: var(--seed-box-width-sm);
258
+ --seed-box-width-lg: var(--seed-box-width-md);
259
+ --seed-box-width-xl: var(--seed-box-width-lg);
260
+ --seed-box-width: var(--seed-box-width-base);
134
261
  min-height: var(--seed-box-min-height);
135
262
  max-height: var(--seed-box-max-height);
136
263
  height: var(--seed-box-height);
@@ -156,7 +283,12 @@
156
283
  border-top-right-radius: var(--seed-box-border-top-right-radius);
157
284
  --seed-box-box-shadow: initial;
158
285
  box-shadow: var(--seed-box-box-shadow);
159
- --seed-box-display: block;
286
+ --seed-box-display-base: block;
287
+ --seed-box-display-sm: var(--seed-box-display-base);
288
+ --seed-box-display-md: var(--seed-box-display-sm);
289
+ --seed-box-display-lg: var(--seed-box-display-md);
290
+ --seed-box-display-xl: var(--seed-box-display-lg);
291
+ --seed-box-display: var(--seed-box-display-base);
160
292
  --seed-box-position: initial;
161
293
  display: var(--seed-box-display);
162
294
  position: var(--seed-box-position);
@@ -172,14 +304,24 @@
172
304
  --seed-box-flex-shrink: initial;
173
305
  flex-grow: var(--seed-box-flex-grow);
174
306
  flex-shrink: var(--seed-box-flex-shrink);
175
- --seed-box-flex-direction: initial;
307
+ --seed-box-flex-direction-base: initial;
308
+ --seed-box-flex-direction-sm: var(--seed-box-flex-direction-base);
309
+ --seed-box-flex-direction-md: var(--seed-box-flex-direction-sm);
310
+ --seed-box-flex-direction-lg: var(--seed-box-flex-direction-md);
311
+ --seed-box-flex-direction-xl: var(--seed-box-flex-direction-lg);
312
+ --seed-box-flex-direction: var(--seed-box-flex-direction-base);
176
313
  --seed-box-flex-wrap: initial;
177
314
  --seed-box-justify-content: initial;
178
315
  --seed-box-justify-self: auto;
179
316
  --seed-box-align-items: stretch;
180
317
  --seed-box-align-content: stretch;
181
318
  --seed-box-align-self: auto;
182
- --seed-box-gap: initial;
319
+ --seed-box-gap-base: initial;
320
+ --seed-box-gap-sm: var(--seed-box-gap-base);
321
+ --seed-box-gap-md: var(--seed-box-gap-sm);
322
+ --seed-box-gap-lg: var(--seed-box-gap-md);
323
+ --seed-box-gap-xl: var(--seed-box-gap-lg);
324
+ --seed-box-gap: var(--seed-box-gap-base);
183
325
  flex-direction: var(--seed-box-flex-direction);
184
326
  flex-wrap: var(--seed-box-flex-wrap);
185
327
  justify-content: var(--seed-box-justify-content);
@@ -199,9 +341,19 @@
199
341
  }
200
342
 
201
343
  .seed-grid {
202
- --seed-grid-columns: initial;
344
+ --seed-grid-columns-base: initial;
345
+ --seed-grid-columns-sm: var(--seed-grid-columns-base);
346
+ --seed-grid-columns-md: var(--seed-grid-columns-sm);
347
+ --seed-grid-columns-lg: var(--seed-grid-columns-md);
348
+ --seed-grid-columns-xl: var(--seed-grid-columns-lg);
349
+ --seed-grid-columns: var(--seed-grid-columns-base);
203
350
  grid-template-columns: var(--seed-grid-columns);
204
- --seed-grid-rows: initial;
351
+ --seed-grid-rows-base: initial;
352
+ --seed-grid-rows-sm: var(--seed-grid-rows-base);
353
+ --seed-grid-rows-md: var(--seed-grid-rows-sm);
354
+ --seed-grid-rows-lg: var(--seed-grid-rows-md);
355
+ --seed-grid-rows-xl: var(--seed-grid-rows-lg);
356
+ --seed-grid-rows: var(--seed-grid-rows-base);
205
357
  grid-template-rows: var(--seed-grid-rows);
206
358
  --seed-grid-auto-flow: initial;
207
359
  grid-auto-flow: var(--seed-grid-auto-flow);
@@ -211,7 +363,6 @@
211
363
  grid-auto-rows: var(--seed-grid-auto-rows);
212
364
  --seed-grid-justify-items: stretch;
213
365
  justify-items: var(--seed-grid-justify-items);
214
- display: grid;
215
366
  }
216
367
 
217
368
  .seed-consistent-width:before {
@@ -288,6 +439,10 @@
288
439
  --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)));
289
440
  --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)));
290
441
  --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)));
442
+ --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)));
443
+ --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)));
444
+ --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)));
445
+ --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)));
291
446
  --seed-font-size-t1-static: 11px;
292
447
  --seed-font-size-t2-static: 12px;
293
448
  --seed-font-size-t3-static: 13px;
@@ -298,6 +453,10 @@
298
453
  --seed-font-size-t8-static: 22px;
299
454
  --seed-font-size-t9-static: 24px;
300
455
  --seed-font-size-t10-static: 26px;
456
+ --seed-font-size-t11-static: 28px;
457
+ --seed-font-size-t12-static: 32px;
458
+ --seed-font-size-t13-static: 40px;
459
+ --seed-font-size-t14-static: 48px;
301
460
  --seed-font-weight-regular: 400;
302
461
  --seed-font-weight-medium: 500;
303
462
  --seed-font-weight-bold: 700;
@@ -311,6 +470,10 @@
311
470
  --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)));
312
471
  --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)));
313
472
  --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)));
473
+ --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)));
474
+ --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)));
475
+ --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)));
476
+ --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)));
314
477
  --seed-line-height-t1-static: 15px;
315
478
  --seed-line-height-t2-static: 16px;
316
479
  --seed-line-height-t3-static: 18px;
@@ -321,6 +484,10 @@
321
484
  --seed-line-height-t8-static: 30px;
322
485
  --seed-line-height-t9-static: 32px;
323
486
  --seed-line-height-t10-static: 35px;
487
+ --seed-line-height-t11-static: 38px;
488
+ --seed-line-height-t12-static: 42px;
489
+ --seed-line-height-t13-static: 52px;
490
+ --seed-line-height-t14-static: 60px;
324
491
  --seed-radius-r0_5: 2px;
325
492
  --seed-radius-r1: 4px;
326
493
  --seed-radius-r1_5: 6px;
@@ -468,7 +635,6 @@
468
635
  --seed-color-bg-layer-basement: var(--seed-color-palette-gray-200);
469
636
  --seed-color-bg-layer-default: var(--seed-color-palette-gray-00);
470
637
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
471
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-100);
472
638
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
473
639
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
474
640
  --seed-color-bg-magic-weak: #f9f2ee;
@@ -489,6 +655,8 @@
489
655
  --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
490
656
  --seed-color-bg-transparent: #0000;
491
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);
492
660
  --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-300);
493
661
  --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-400);
494
662
  --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
@@ -497,6 +665,7 @@
497
665
  --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
498
666
  --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
499
667
  --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
668
+ --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
500
669
  --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
501
670
  --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
502
671
  --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
@@ -508,7 +677,6 @@
508
677
  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
509
678
  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
510
679
  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
511
- --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
512
680
  --seed-color-manner-temp-l1-bg: #f1f2f3;
513
681
  --seed-color-manner-temp-l1-text: #757b85;
514
682
  --seed-color-manner-temp-l10-bg: #ffebee;
@@ -539,8 +707,6 @@
539
707
  --seed-color-banner-teal: #e6faf6;
540
708
  --seed-color-banner-warm-gray: #f2f0ee;
541
709
  --seed-color-banner-yellow: #fffae1;
542
- --seed-gradient-fade-layer-floating: #fff0 0%, #000 100%;
543
- --seed-gradient-fade-layer-default: #000 0%, #fff0 100%;
544
710
  --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
545
711
  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
546
712
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
@@ -679,7 +845,6 @@
679
845
  --seed-color-bg-layer-basement: var(--seed-color-palette-gray-00);
680
846
  --seed-color-bg-layer-default: var(--seed-color-palette-gray-100);
681
847
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
682
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-200);
683
848
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
684
849
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
685
850
  --seed-color-bg-magic-weak: #201f1f;
@@ -700,6 +865,8 @@
700
865
  --seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
701
866
  --seed-color-bg-transparent: #fff0;
702
867
  --seed-color-bg-transparent-pressed: var(--seed-color-palette-static-white-alpha-50);
868
+ --seed-color-bg-transparent-selected: var(--seed-color-palette-static-white-alpha-100);
869
+ --seed-color-bg-transparent-selected-pressed: var(--seed-color-palette-static-white-alpha-200);
703
870
  --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-800);
704
871
  --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-900);
705
872
  --seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
@@ -708,6 +875,7 @@
708
875
  --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
709
876
  --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
710
877
  --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
878
+ --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
711
879
  --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
712
880
  --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
713
881
  --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
@@ -719,7 +887,6 @@
719
887
  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
720
888
  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
721
889
  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
722
- --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
723
890
  --seed-color-manner-temp-l1-bg: #292929;
724
891
  --seed-color-manner-temp-l1-text: #b8b8b9;
725
892
  --seed-color-manner-temp-l10-bg: #34040a;
@@ -750,8 +917,6 @@
750
917
  --seed-color-banner-teal: #143633;
751
918
  --seed-color-banner-warm-gray: #2f2b27;
752
919
  --seed-color-banner-yellow: #3e2b00;
753
- --seed-gradient-fade-layer-floating: #1d202500 0%, #000 100%;
754
- --seed-gradient-fade-layer-default: #000 0%, #16171b00 100%;
755
920
  --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
756
921
  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
757
922
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
@@ -860,4 +1025,152 @@
860
1025
  transform: translate3d(0, var(--initial-transform, 100%), 0);
861
1026
  }
862
1027
  }
1028
+
1029
+ @media (width >= 480px) {
1030
+ .seed-box {
1031
+ --seed-box-padding: var(--seed-box-padding-sm);
1032
+ --seed-box-padding-y: var(--seed-box-padding-y-sm);
1033
+ --seed-box-padding-x: var(--seed-box-padding-x-sm);
1034
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-sm);
1035
+ --seed-box-padding-top: var(--seed-box-padding-top-sm);
1036
+ --seed-box-padding-left: var(--seed-box-padding-left-sm);
1037
+ --seed-box-padding-right: var(--seed-box-padding-right-sm);
1038
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
1039
+ --seed-box-bleed-top: var(--seed-box-bleed-top-sm);
1040
+ --seed-box-bleed-left: var(--seed-box-bleed-left-sm);
1041
+ --seed-box-bleed-right: var(--seed-box-bleed-right-sm);
1042
+ --seed-box-margin: var(--seed-box-margin-sm);
1043
+ --seed-box-margin-y: var(--seed-box-margin-y-sm);
1044
+ --seed-box-margin-x: var(--seed-box-margin-x-sm);
1045
+ --seed-box-margin-top: var(--seed-box-margin-top-sm);
1046
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-sm);
1047
+ --seed-box-margin-left: var(--seed-box-margin-left-sm);
1048
+ --seed-box-margin-right: var(--seed-box-margin-right-sm);
1049
+ --seed-box-min-height: var(--seed-box-min-height-sm);
1050
+ --seed-box-max-height: var(--seed-box-max-height-sm);
1051
+ --seed-box-height: var(--seed-box-height-sm);
1052
+ --seed-box-min-width: var(--seed-box-min-width-sm);
1053
+ --seed-box-max-width: var(--seed-box-max-width-sm);
1054
+ --seed-box-width: var(--seed-box-width-sm);
1055
+ --seed-box-display: var(--seed-box-display-sm);
1056
+ --seed-box-flex-direction: var(--seed-box-flex-direction-sm);
1057
+ --seed-box-gap: var(--seed-box-gap-sm);
1058
+ }
1059
+
1060
+ .seed-grid {
1061
+ --seed-grid-columns: var(--seed-grid-columns-sm);
1062
+ --seed-grid-rows: var(--seed-grid-rows-sm);
1063
+ }
1064
+ }
1065
+
1066
+ @media (width >= 768px) {
1067
+ .seed-box {
1068
+ --seed-box-padding: var(--seed-box-padding-md);
1069
+ --seed-box-padding-y: var(--seed-box-padding-y-md);
1070
+ --seed-box-padding-x: var(--seed-box-padding-x-md);
1071
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-md);
1072
+ --seed-box-padding-top: var(--seed-box-padding-top-md);
1073
+ --seed-box-padding-left: var(--seed-box-padding-left-md);
1074
+ --seed-box-padding-right: var(--seed-box-padding-right-md);
1075
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
1076
+ --seed-box-bleed-top: var(--seed-box-bleed-top-md);
1077
+ --seed-box-bleed-left: var(--seed-box-bleed-left-md);
1078
+ --seed-box-bleed-right: var(--seed-box-bleed-right-md);
1079
+ --seed-box-margin: var(--seed-box-margin-md);
1080
+ --seed-box-margin-y: var(--seed-box-margin-y-md);
1081
+ --seed-box-margin-x: var(--seed-box-margin-x-md);
1082
+ --seed-box-margin-top: var(--seed-box-margin-top-md);
1083
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-md);
1084
+ --seed-box-margin-left: var(--seed-box-margin-left-md);
1085
+ --seed-box-margin-right: var(--seed-box-margin-right-md);
1086
+ --seed-box-min-height: var(--seed-box-min-height-md);
1087
+ --seed-box-max-height: var(--seed-box-max-height-md);
1088
+ --seed-box-height: var(--seed-box-height-md);
1089
+ --seed-box-min-width: var(--seed-box-min-width-md);
1090
+ --seed-box-max-width: var(--seed-box-max-width-md);
1091
+ --seed-box-width: var(--seed-box-width-md);
1092
+ --seed-box-display: var(--seed-box-display-md);
1093
+ --seed-box-flex-direction: var(--seed-box-flex-direction-md);
1094
+ --seed-box-gap: var(--seed-box-gap-md);
1095
+ }
1096
+
1097
+ .seed-grid {
1098
+ --seed-grid-columns: var(--seed-grid-columns-md);
1099
+ --seed-grid-rows: var(--seed-grid-rows-md);
1100
+ }
1101
+ }
1102
+
1103
+ @media (width >= 1280px) {
1104
+ .seed-box {
1105
+ --seed-box-padding: var(--seed-box-padding-lg);
1106
+ --seed-box-padding-y: var(--seed-box-padding-y-lg);
1107
+ --seed-box-padding-x: var(--seed-box-padding-x-lg);
1108
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-lg);
1109
+ --seed-box-padding-top: var(--seed-box-padding-top-lg);
1110
+ --seed-box-padding-left: var(--seed-box-padding-left-lg);
1111
+ --seed-box-padding-right: var(--seed-box-padding-right-lg);
1112
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
1113
+ --seed-box-bleed-top: var(--seed-box-bleed-top-lg);
1114
+ --seed-box-bleed-left: var(--seed-box-bleed-left-lg);
1115
+ --seed-box-bleed-right: var(--seed-box-bleed-right-lg);
1116
+ --seed-box-margin: var(--seed-box-margin-lg);
1117
+ --seed-box-margin-y: var(--seed-box-margin-y-lg);
1118
+ --seed-box-margin-x: var(--seed-box-margin-x-lg);
1119
+ --seed-box-margin-top: var(--seed-box-margin-top-lg);
1120
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-lg);
1121
+ --seed-box-margin-left: var(--seed-box-margin-left-lg);
1122
+ --seed-box-margin-right: var(--seed-box-margin-right-lg);
1123
+ --seed-box-min-height: var(--seed-box-min-height-lg);
1124
+ --seed-box-max-height: var(--seed-box-max-height-lg);
1125
+ --seed-box-height: var(--seed-box-height-lg);
1126
+ --seed-box-min-width: var(--seed-box-min-width-lg);
1127
+ --seed-box-max-width: var(--seed-box-max-width-lg);
1128
+ --seed-box-width: var(--seed-box-width-lg);
1129
+ --seed-box-display: var(--seed-box-display-lg);
1130
+ --seed-box-flex-direction: var(--seed-box-flex-direction-lg);
1131
+ --seed-box-gap: var(--seed-box-gap-lg);
1132
+ }
1133
+
1134
+ .seed-grid {
1135
+ --seed-grid-columns: var(--seed-grid-columns-lg);
1136
+ --seed-grid-rows: var(--seed-grid-rows-lg);
1137
+ }
1138
+ }
1139
+
1140
+ @media (width >= 1440px) {
1141
+ .seed-box {
1142
+ --seed-box-padding: var(--seed-box-padding-xl);
1143
+ --seed-box-padding-y: var(--seed-box-padding-y-xl);
1144
+ --seed-box-padding-x: var(--seed-box-padding-x-xl);
1145
+ --seed-box-padding-bottom: var(--seed-box-padding-bottom-xl);
1146
+ --seed-box-padding-top: var(--seed-box-padding-top-xl);
1147
+ --seed-box-padding-left: var(--seed-box-padding-left-xl);
1148
+ --seed-box-padding-right: var(--seed-box-padding-right-xl);
1149
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
1150
+ --seed-box-bleed-top: var(--seed-box-bleed-top-xl);
1151
+ --seed-box-bleed-left: var(--seed-box-bleed-left-xl);
1152
+ --seed-box-bleed-right: var(--seed-box-bleed-right-xl);
1153
+ --seed-box-margin: var(--seed-box-margin-xl);
1154
+ --seed-box-margin-y: var(--seed-box-margin-y-xl);
1155
+ --seed-box-margin-x: var(--seed-box-margin-x-xl);
1156
+ --seed-box-margin-top: var(--seed-box-margin-top-xl);
1157
+ --seed-box-margin-bottom: var(--seed-box-margin-bottom-xl);
1158
+ --seed-box-margin-left: var(--seed-box-margin-left-xl);
1159
+ --seed-box-margin-right: var(--seed-box-margin-right-xl);
1160
+ --seed-box-min-height: var(--seed-box-min-height-xl);
1161
+ --seed-box-max-height: var(--seed-box-max-height-xl);
1162
+ --seed-box-height: var(--seed-box-height-xl);
1163
+ --seed-box-min-width: var(--seed-box-min-width-xl);
1164
+ --seed-box-max-width: var(--seed-box-max-width-xl);
1165
+ --seed-box-width: var(--seed-box-width-xl);
1166
+ --seed-box-display: var(--seed-box-display-xl);
1167
+ --seed-box-flex-direction: var(--seed-box-flex-direction-xl);
1168
+ --seed-box-gap: var(--seed-box-gap-xl);
1169
+ }
1170
+
1171
+ .seed-grid {
1172
+ --seed-grid-columns: var(--seed-grid-columns-xl);
1173
+ --seed-grid-rows: var(--seed-grid-rows-xl);
1174
+ }
1175
+ }
863
1176
  }