@seed-design/css 2.1.4 → 2.2.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 (106) hide show
  1. package/all.css +192 -307
  2. package/all.layered.css +192 -307
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +14 -0
  6. package/base.layered.css +14 -0
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/accordion.css +11 -25
  11. package/recipes/accordion.layered.css +9 -17
  12. package/recipes/action-button.css +14 -1
  13. package/recipes/action-button.layered.css +18 -1
  14. package/recipes/app-bar-main.css +2 -4
  15. package/recipes/app-bar-main.layered.css +3 -5
  16. package/recipes/app-bar.css +3 -8
  17. package/recipes/app-bar.layered.css +2 -4
  18. package/recipes/app-screen.css +5 -10
  19. package/recipes/app-screen.layered.css +6 -11
  20. package/recipes/aspect-ratio.css +1 -4
  21. package/recipes/attachment-input-item.css +5 -14
  22. package/recipes/attachment-input-item.layered.css +4 -7
  23. package/recipes/attachment-input.css +4 -8
  24. package/recipes/attachment-input.layered.css +4 -8
  25. package/recipes/avatar.css +1 -4
  26. package/recipes/badge.css +4 -8
  27. package/recipes/badge.layered.css +4 -8
  28. package/recipes/bottom-sheet.css +7 -20
  29. package/recipes/bottom-sheet.layered.css +5 -9
  30. package/recipes/callout.css +2 -4
  31. package/recipes/callout.layered.css +2 -4
  32. package/recipes/checkmark.css +1 -4
  33. package/recipes/chip-tabs.css +2 -4
  34. package/recipes/chip-tabs.layered.css +2 -4
  35. package/recipes/chip.css +4 -8
  36. package/recipes/chip.layered.css +4 -8
  37. package/recipes/contextual-floating-button.css +2 -4
  38. package/recipes/contextual-floating-button.layered.css +2 -4
  39. package/recipes/dialog.css +4 -12
  40. package/recipes/dialog.layered.css +2 -4
  41. package/recipes/field.css +2 -4
  42. package/recipes/field.layered.css +2 -4
  43. package/recipes/floating-action-button.css +1 -2
  44. package/recipes/floating-action-button.layered.css +1 -2
  45. package/recipes/help-bubble.css +3 -6
  46. package/recipes/help-bubble.layered.css +3 -6
  47. package/recipes/image-frame-indicator.css +2 -4
  48. package/recipes/image-frame-indicator.layered.css +2 -4
  49. package/recipes/image-frame-reaction-button.css +1 -4
  50. package/recipes/image-frame-reaction-button.layered.css +1 -4
  51. package/recipes/image-frame.css +1 -4
  52. package/recipes/input-button.css +6 -16
  53. package/recipes/input-button.layered.css +4 -8
  54. package/recipes/layout.css +1 -2
  55. package/recipes/layout.layered.css +1 -2
  56. package/recipes/list-header.css +2 -4
  57. package/recipes/list-header.layered.css +2 -4
  58. package/recipes/list-item.css +9 -21
  59. package/recipes/list-item.layered.css +7 -13
  60. package/recipes/manner-temp-badge.css +2 -4
  61. package/recipes/manner-temp-badge.layered.css +2 -4
  62. package/recipes/menu-item.css +14 -29
  63. package/recipes/menu-item.layered.css +13 -25
  64. package/recipes/menu-sheet-item.css +2 -4
  65. package/recipes/menu-sheet-item.layered.css +2 -4
  66. package/recipes/menu-sheet.css +6 -16
  67. package/recipes/menu-sheet.layered.css +5 -9
  68. package/recipes/menu.css +10 -20
  69. package/recipes/menu.layered.css +10 -20
  70. package/recipes/notification-badge.css +2 -4
  71. package/recipes/notification-badge.layered.css +2 -4
  72. package/recipes/page-banner.css +2 -4
  73. package/recipes/page-banner.layered.css +2 -4
  74. package/recipes/reaction-button.css +4 -8
  75. package/recipes/reaction-button.layered.css +4 -8
  76. package/recipes/segmented-control.css +3 -6
  77. package/recipes/segmented-control.layered.css +3 -6
  78. package/recipes/select-box-checkmark.css +1 -4
  79. package/recipes/select-box.css +4 -10
  80. package/recipes/select-box.layered.css +3 -6
  81. package/recipes/side-navigation-menu-item.css +3 -8
  82. package/recipes/side-navigation-menu-item.layered.css +4 -5
  83. package/recipes/side-navigation.css +1 -2
  84. package/recipes/side-navigation.layered.css +3 -1
  85. package/recipes/side-panel.css +7 -18
  86. package/recipes/side-panel.layered.css +5 -10
  87. package/recipes/slider-marker.css +1 -2
  88. package/recipes/slider-marker.layered.css +1 -2
  89. package/recipes/slider.css +3 -8
  90. package/recipes/slider.layered.css +2 -4
  91. package/recipes/snackbar-region.css +2 -4
  92. package/recipes/snackbar-region.layered.css +2 -4
  93. package/recipes/snackbar.css +4 -8
  94. package/recipes/snackbar.layered.css +4 -8
  95. package/recipes/tabs.css +8 -16
  96. package/recipes/tabs.layered.css +8 -16
  97. package/recipes/text-input.css +10 -22
  98. package/recipes/text-input.layered.css +9 -18
  99. package/recipes/toggle-button.css +4 -8
  100. package/recipes/toggle-button.layered.css +4 -8
  101. package/vars/component/action-button.d.ts +23 -1
  102. package/vars/component/action-button.mjs +23 -1
  103. package/vars/component/list-item.d.ts +2 -2
  104. package/vars/component/list-item.mjs +1 -1
  105. package/vars/scale.d.ts +3 -0
  106. package/vars/scale.mjs +3 -0
package/recipes/badge.layered.css CHANGED
@@ -19,10 +19,8 @@
19
19
  .seed-badge__root--size_medium {
20
20
  max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
21
21
  min-height: var(--seed-dimension-x5);
22
- padding-left: var(--seed-dimension-x1_5);
23
- padding-right: var(--seed-dimension-x1_5);
24
- padding-top: var(--seed-dimension-x0_5);
25
- padding-bottom: var(--seed-dimension-x0_5);
22
+ padding-inline: var(--seed-dimension-x1_5);
23
+ padding-block: var(--seed-dimension-x0_5);
26
24
  border-radius: var(--seed-radius-r1);
27
25
  font-size: var(--seed-font-size-t1);
28
26
  line-height: var(--seed-line-height-t1);
@@ -31,10 +29,8 @@
31
29
  .seed-badge__root--size_large {
32
30
  max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
33
31
  min-height: var(--seed-dimension-x6);
34
- padding-left: var(--seed-dimension-x2);
35
- padding-right: var(--seed-dimension-x2);
36
- padding-top: var(--seed-dimension-x1);
37
- padding-bottom: var(--seed-dimension-x1);
32
+ padding-inline: var(--seed-dimension-x2);
33
+ padding-block: var(--seed-dimension-x1);
38
34
  border-radius: var(--seed-radius-r1_5);
39
35
  font-size: var(--seed-font-size-t2);
40
36
  line-height: var(--seed-line-height-t2);
package/recipes/bottom-sheet.css CHANGED
@@ -3,20 +3,14 @@
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: flex-end;
6
- top: 0;
7
- right: 0;
8
- bottom: 0;
9
- left: 0;
6
+ inset: 0;
10
7
  overscroll-behavior-y: none;
11
8
  --sheet-z-index: 2;
12
9
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
13
10
  }
14
11
  .seed-bottom-sheet__backdrop {
15
12
  position: fixed;
16
- top: 0;
17
- right: 0;
18
- bottom: 0;
19
- left: 0;
13
+ inset: 0;
20
14
  background: var(--seed-color-bg-overlay);
21
15
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
22
16
  }
@@ -59,8 +53,7 @@
59
53
  height: 200vh;
60
54
  content: "";
61
55
  position: absolute;
62
- left: 0;
63
- right: 0;
56
+ inset-inline: 0;
64
57
  background: inherit;
65
58
  z-index: -1;
66
59
  }
@@ -84,8 +77,7 @@
84
77
  font-size: var(--seed-font-size-t5);
85
78
  line-height: var(--seed-line-height-t5);
86
79
  font-weight: var(--seed-font-weight-regular);
87
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
88
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
80
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
89
81
  margin: 0;
90
82
  white-space: pre-wrap;
91
83
  }
@@ -118,8 +110,7 @@
118
110
  --seed-box-max-height: var(--seed-box-max-height-base, initial);
119
111
  --seed-box-justify-content: initial;
120
112
  --seed-box-align-items: initial;
121
- padding-left: var(--seed-box-padding-x);
122
- padding-right: var(--seed-box-padding-x);
113
+ padding-inline: var(--seed-box-padding-x);
123
114
  height: var(--seed-box-height);
124
115
  min-height: var(--seed-box-min-height);
125
116
  max-height: var(--seed-box-max-height);
@@ -129,8 +120,7 @@
129
120
  .seed-bottom-sheet__footer {
130
121
  display: flex;
131
122
  flex-direction: column;
132
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
133
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
123
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
134
124
  padding-top: var(--seed-dimension-x3);
135
125
  padding-bottom: var(--seed-dimension-x4);
136
126
  }
@@ -153,10 +143,7 @@
153
143
  .seed-bottom-sheet__closeButton:after {
154
144
  content: "";
155
145
  position: absolute;
156
- top: calc((28px - 44px) / 2);
157
- right: calc((28px - 44px) / 2);
158
- bottom: calc((28px - 44px) / 2);
159
- left: calc((28px - 44px) / 2);
146
+ inset: calc((28px - 44px) / 2);
160
147
  border-radius: var(--seed-radius-r1);
161
148
  outline: var(--seed-dimension-x0_5) solid transparent;
162
149
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
package/recipes/bottom-sheet.layered.css CHANGED
@@ -56,13 +56,12 @@
56
56
 
57
57
  .seed-bottom-sheet__content:after {
58
58
  content: "";
59
+ top: 100%;
59
60
  background: inherit;
60
61
  z-index: -1;
61
62
  height: 200vh;
62
63
  position: absolute;
63
- top: 100%;
64
- left: 0;
65
- right: 0;
64
+ inset-inline: 0;
66
65
  }
67
66
 
68
67
  .seed-bottom-sheet__header {
@@ -87,8 +86,7 @@
87
86
  font-size: var(--seed-font-size-t5);
88
87
  line-height: var(--seed-line-height-t5);
89
88
  font-weight: var(--seed-font-weight-regular);
90
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
91
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
89
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
92
90
  white-space: pre-wrap;
93
91
  margin: 0;
94
92
  }
@@ -120,8 +118,7 @@
120
118
  --seed-box-max-height: var(--seed-box-max-height-base, initial);
121
119
  --seed-box-justify-content: initial;
122
120
  --seed-box-align-items: initial;
123
- padding-left: var(--seed-box-padding-x);
124
- padding-right: var(--seed-box-padding-x);
121
+ padding-inline: var(--seed-box-padding-x);
125
122
  height: var(--seed-box-height);
126
123
  min-height: var(--seed-box-min-height);
127
124
  max-height: var(--seed-box-max-height);
@@ -132,8 +129,7 @@
132
129
  }
133
130
 
134
131
  .seed-bottom-sheet__footer {
135
- padding-left: var(--seed-dimension-spacing-x-global-gutter);
136
- padding-right: var(--seed-dimension-spacing-x-global-gutter);
132
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
137
133
  padding-top: var(--seed-dimension-x3);
138
134
  padding-bottom: var(--seed-dimension-x4);
139
135
  flex-direction: column;
package/recipes/callout.css CHANGED
@@ -10,10 +10,8 @@
10
10
  text-align: start;
11
11
  width: 100%;
12
12
  min-height: 50px;
13
- padding-left: var(--seed-dimension-x3_5);
14
- padding-right: var(--seed-dimension-x3_5);
15
- padding-top: var(--seed-dimension-x3_5);
16
- padding-bottom: var(--seed-dimension-x3_5);
13
+ padding-inline: var(--seed-dimension-x3_5);
14
+ padding-block: var(--seed-dimension-x3_5);
17
15
  gap: var(--seed-dimension-x3);
18
16
  border-radius: var(--seed-radius-r2_5);
19
17
  text-decoration: none;
package/recipes/callout.layered.css CHANGED
@@ -8,10 +8,8 @@
8
8
  text-align: start;
9
9
  width: 100%;
10
10
  min-height: 50px;
11
- padding-left: var(--seed-dimension-x3_5);
12
- padding-right: var(--seed-dimension-x3_5);
13
- padding-top: var(--seed-dimension-x3_5);
14
- padding-bottom: var(--seed-dimension-x3_5);
11
+ padding-inline: var(--seed-dimension-x3_5);
12
+ padding-block: var(--seed-dimension-x3_5);
15
13
  align-items: center;
16
14
  gap: var(--seed-dimension-x3);
17
15
  border-radius: var(--seed-radius-r2_5);
package/recipes/checkmark.css CHANGED
@@ -16,10 +16,7 @@
16
16
  content: "";
17
17
  position: absolute;
18
18
  margin: auto;
19
- left: 0;
20
- right: 0;
21
- top: 0;
22
- bottom: 0;
19
+ inset: 0;
23
20
  text-align: center;
24
21
  overflow: initial;
25
22
  }
package/recipes/chip-tabs.css CHANGED
@@ -62,8 +62,7 @@
62
62
  min-height: 36px;
63
63
  min-width: var(--seed-dimension-x12);
64
64
  font-size: var(--seed-font-size-t4);
65
- padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
66
- padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
65
+ padding-inline: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
67
66
  }
68
67
  .seed-chip-tabs__list--size_large {
69
68
  gap: 8px;
@@ -72,8 +71,7 @@
72
71
  min-height: 40px;
73
72
  min-width: var(--seed-dimension-x13);
74
73
  font-size: var(--seed-font-size-t4);
75
- padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
76
- padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
74
+ padding-inline: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
77
75
  }
78
76
  .seed-chip-tabs__trigger--variant_neutralSolid {
79
77
  background-color: var(--seed-color-bg-neutral-weak-alpha);
package/recipes/chip-tabs.layered.css CHANGED
@@ -73,8 +73,7 @@
73
73
  min-height: 36px;
74
74
  min-width: var(--seed-dimension-x12);
75
75
  font-size: var(--seed-font-size-t4);
76
- padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
77
- padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
76
+ padding-inline: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
78
77
  }
79
78
 
80
79
  .seed-chip-tabs__list--size_large {
@@ -85,8 +84,7 @@
85
84
  min-height: 40px;
86
85
  min-width: var(--seed-dimension-x13);
87
86
  font-size: var(--seed-font-size-t4);
88
- padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
89
- padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
87
+ padding-inline: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
90
88
  }
91
89
 
92
90
  .seed-chip-tabs__trigger--variant_neutralSolid {
package/recipes/chip.css CHANGED
@@ -33,8 +33,7 @@
33
33
  align-items: center;
34
34
  justify-content: center;
35
35
  font-weight: var(--seed-font-weight-medium);
36
- padding-left: var(--seed-dimension-x1_5);
37
- padding-right: var(--seed-dimension-x1_5);
36
+ padding-inline: var(--seed-dimension-x1_5);
38
37
  }
39
38
  .seed-chip__prefixIcon {
40
39
  display: inline-flex;
@@ -184,8 +183,7 @@
184
183
  }
185
184
  .seed-chip__root--size_large {
186
185
  height: 40px;
187
- padding-left: var(--seed-dimension-x2_5);
188
- padding-right: var(--seed-dimension-x2_5);
186
+ padding-inline: var(--seed-dimension-x2_5);
189
187
  --seed-icon-size: var(--seed-dimension-x4);
190
188
  }
191
189
  .seed-chip__label--size_large {
@@ -200,8 +198,7 @@
200
198
  }
201
199
  .seed-chip__root--size_medium {
202
200
  height: 36px;
203
- padding-left: var(--seed-dimension-x2);
204
- padding-right: var(--seed-dimension-x2);
201
+ padding-inline: var(--seed-dimension-x2);
205
202
  --seed-icon-size: var(--seed-dimension-x4);
206
203
  }
207
204
  .seed-chip__label--size_medium {
@@ -216,8 +213,7 @@
216
213
  }
217
214
  .seed-chip__root--size_small {
218
215
  height: 32px;
219
- padding-left: var(--seed-dimension-x1_5);
220
- padding-right: var(--seed-dimension-x1_5);
216
+ padding-inline: var(--seed-dimension-x1_5);
221
217
  --seed-icon-size: var(--seed-dimension-x3_5);
222
218
  }
223
219
  .seed-chip__label--size_small {
package/recipes/chip.layered.css CHANGED
@@ -34,8 +34,7 @@
34
34
 
35
35
  .seed-chip__label {
36
36
  font-weight: var(--seed-font-weight-medium);
37
- padding-left: var(--seed-dimension-x1_5);
38
- padding-right: var(--seed-dimension-x1_5);
37
+ padding-inline: var(--seed-dimension-x1_5);
39
38
  justify-content: center;
40
39
  align-items: center;
41
40
  display: inline-flex;
@@ -208,8 +207,7 @@
208
207
 
209
208
  .seed-chip__root--size_large {
210
209
  height: 40px;
211
- padding-left: var(--seed-dimension-x2_5);
212
- padding-right: var(--seed-dimension-x2_5);
210
+ padding-inline: var(--seed-dimension-x2_5);
213
211
  --seed-icon-size: var(--seed-dimension-x4);
214
212
  }
215
213
 
@@ -224,8 +222,7 @@
224
222
 
225
223
  .seed-chip__root--size_medium {
226
224
  height: 36px;
227
- padding-left: var(--seed-dimension-x2);
228
- padding-right: var(--seed-dimension-x2);
225
+ padding-inline: var(--seed-dimension-x2);
229
226
  --seed-icon-size: var(--seed-dimension-x4);
230
227
  }
231
228
 
@@ -244,8 +241,7 @@
244
241
 
245
242
  .seed-chip__root--size_small {
246
243
  height: 32px;
247
- padding-left: var(--seed-dimension-x1_5);
248
- padding-right: var(--seed-dimension-x1_5);
244
+ padding-inline: var(--seed-dimension-x1_5);
249
245
  --seed-icon-size: var(--seed-dimension-x3_5);
250
246
  }
251
247
 
package/recipes/contextual-floating-button.css CHANGED
@@ -99,10 +99,8 @@
99
99
  }
100
100
  .seed-contextual-floating-button--layout_withText {
101
101
  min-height: 36px;
102
- padding-left: var(--seed-dimension-x3_5);
103
- padding-right: var(--seed-dimension-x3_5);
104
- padding-top: var(--seed-dimension-x2);
105
- padding-bottom: var(--seed-dimension-x2);
102
+ padding-inline: var(--seed-dimension-x3_5);
103
+ padding-block: var(--seed-dimension-x2);
106
104
  gap: var(--seed-dimension-x1);
107
105
  --seed-prefix-icon-size: 16px;
108
106
  }
package/recipes/contextual-floating-button.layered.css CHANGED
@@ -114,10 +114,8 @@
114
114
 
115
115
  .seed-contextual-floating-button--layout_withText {
116
116
  min-height: 36px;
117
- padding-left: var(--seed-dimension-x3_5);
118
- padding-right: var(--seed-dimension-x3_5);
119
- padding-top: var(--seed-dimension-x2);
120
- padding-bottom: var(--seed-dimension-x2);
117
+ padding-inline: var(--seed-dimension-x3_5);
118
+ padding-block: var(--seed-dimension-x2);
121
119
  gap: var(--seed-dimension-x1);
122
120
  --seed-prefix-icon-size: 16px;
123
121
  }
package/recipes/dialog.css CHANGED
@@ -3,20 +3,14 @@
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: center;
6
- top: 0;
7
- right: 0;
8
- bottom: 0;
9
- left: 0;
6
+ inset: 0;
10
7
  overscroll-behavior-y: none;
11
8
  --dialog-z-index: 2;
12
9
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
13
10
  }
14
11
  .seed-dialog__backdrop {
15
12
  position: fixed;
16
- top: 0;
17
- right: 0;
18
- bottom: 0;
19
- left: 0;
13
+ inset: 0;
20
14
  background: var(--seed-color-bg-overlay);
21
15
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
22
16
  }
@@ -40,8 +34,7 @@
40
34
  .seed-dialog__header {
41
35
  display: flex;
42
36
  flex-direction: column;
43
- padding-left: var(--seed-dimension-x5);
44
- padding-right: var(--seed-dimension-x5);
37
+ padding-inline: var(--seed-dimension-x5);
45
38
  padding-top: var(--seed-dimension-x5);
46
39
  gap: var(--seed-dimension-x1_5);
47
40
  }
@@ -64,8 +57,7 @@
64
57
  display: flex;
65
58
  flex-direction: column;
66
59
  align-items: stretch;
67
- padding-left: var(--seed-dimension-x5);
68
- padding-right: var(--seed-dimension-x5);
60
+ padding-inline: var(--seed-dimension-x5);
69
61
  padding-top: var(--seed-dimension-x4);
70
62
  padding-bottom: var(--seed-dimension-x5);
71
63
  }
package/recipes/dialog.layered.css CHANGED
@@ -37,8 +37,7 @@
37
37
  }
38
38
 
39
39
  .seed-dialog__header {
40
- padding-left: var(--seed-dimension-x5);
41
- padding-right: var(--seed-dimension-x5);
40
+ padding-inline: var(--seed-dimension-x5);
42
41
  padding-top: var(--seed-dimension-x5);
43
42
  gap: var(--seed-dimension-x1_5);
44
43
  flex-direction: column;
@@ -63,8 +62,7 @@
63
62
  }
64
63
 
65
64
  .seed-dialog__footer {
66
- padding-left: var(--seed-dimension-x5);
67
- padding-right: var(--seed-dimension-x5);
65
+ padding-inline: var(--seed-dimension-x5);
68
66
  padding-top: var(--seed-dimension-x4);
69
67
  padding-bottom: var(--seed-dimension-x5);
70
68
  flex-direction: column;
package/recipes/field.css CHANGED
@@ -8,15 +8,13 @@
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
- padding-left: var(--seed-dimension-x0_5);
12
- padding-right: var(--seed-dimension-x0_5);
11
+ padding-inline: var(--seed-dimension-x0_5);
13
12
  gap: var(--seed-dimension-x2_5);
14
13
  }
15
14
  .seed-field__footer {
16
15
  display: flex;
17
16
  align-items: flex-start;
18
- padding-left: var(--seed-dimension-x0_5);
19
- padding-right: var(--seed-dimension-x0_5);
17
+ padding-inline: var(--seed-dimension-x0_5);
20
18
  gap: var(--seed-dimension-x2);
21
19
  }
22
20
  .seed-field__description {
package/recipes/field.layered.css CHANGED
@@ -7,8 +7,7 @@
7
7
  }
8
8
 
9
9
  .seed-field__header {
10
- padding-left: var(--seed-dimension-x0_5);
11
- padding-right: var(--seed-dimension-x0_5);
10
+ padding-inline: var(--seed-dimension-x0_5);
12
11
  justify-content: space-between;
13
12
  align-items: center;
14
13
  gap: var(--seed-dimension-x2_5);
@@ -16,8 +15,7 @@
16
15
  }
17
16
 
18
17
  .seed-field__footer {
19
- padding-left: var(--seed-dimension-x0_5);
20
- padding-right: var(--seed-dimension-x0_5);
18
+ padding-inline: var(--seed-dimension-x0_5);
21
19
  align-items: flex-start;
22
20
  gap: var(--seed-dimension-x2);
23
21
  display: flex;
package/recipes/floating-action-button.css CHANGED
@@ -56,8 +56,7 @@
56
56
  overflow: hidden;
57
57
  }
58
58
  .seed-floating-action-button__root--extended_true {
59
- padding-left: var(--seed-dimension-x4_5);
60
- padding-right: var(--seed-dimension-x4_5);
59
+ padding-inline: var(--seed-dimension-x4_5);
61
60
  height: 48px;
62
61
  width: fit-content;
63
62
  max-width: 999px;
package/recipes/floating-action-button.layered.css CHANGED
@@ -65,8 +65,7 @@
65
65
  }
66
66
 
67
67
  .seed-floating-action-button__root--extended_true {
68
- padding-left: var(--seed-dimension-x4_5);
69
- padding-right: var(--seed-dimension-x4_5);
68
+ padding-inline: var(--seed-dimension-x4_5);
70
69
  width: fit-content;
71
70
  max-width: 999px;
72
71
  height: 48px;
package/recipes/help-bubble.css CHANGED
@@ -7,10 +7,8 @@
7
7
  display: flex;
8
8
  align-items: flex-start;
9
9
  background: var(--seed-color-bg-neutral-inverted);
10
- padding-left: var(--seed-dimension-x3);
11
- padding-right: var(--seed-dimension-x3);
12
- padding-top: var(--seed-dimension-x2_5);
13
- padding-bottom: var(--seed-dimension-x2_5);
10
+ padding-inline: var(--seed-dimension-x3);
11
+ padding-block: var(--seed-dimension-x2_5);
14
12
  border-radius: var(--seed-radius-r3);
15
13
  --seed-box-max-width-base: none;
16
14
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
@@ -87,8 +85,7 @@
87
85
  padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
88
86
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
89
87
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
90
- margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
91
- margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
88
+ margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
92
89
  color: var(--seed-color-fg-neutral-inverted);
93
90
  --seed-icon-size: var(--seed-dimension-x3_5);
94
91
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
package/recipes/help-bubble.layered.css CHANGED
@@ -7,10 +7,8 @@
7
7
 
8
8
  .seed-help-bubble__content {
9
9
  background: var(--seed-color-bg-neutral-inverted);
10
- padding-left: var(--seed-dimension-x3);
11
- padding-right: var(--seed-dimension-x3);
12
- padding-top: var(--seed-dimension-x2_5);
13
- padding-bottom: var(--seed-dimension-x2_5);
10
+ padding-inline: var(--seed-dimension-x3);
11
+ padding-block: var(--seed-dimension-x2_5);
14
12
  border-radius: var(--seed-radius-r3);
15
13
  --seed-box-max-width-base: none;
16
14
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
@@ -94,8 +92,7 @@
94
92
  padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
95
93
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
96
94
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
97
- margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
98
- margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
95
+ margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
99
96
  color: var(--seed-color-fg-neutral-inverted);
100
97
  --seed-icon-size: var(--seed-dimension-x3_5);
101
98
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
package/recipes/image-frame-indicator.css CHANGED
@@ -6,10 +6,8 @@
6
6
  background-color: var(--seed-color-palette-static-black-alpha-800);
7
7
  color: var(--seed-color-palette-static-white);
8
8
  border-radius: var(--seed-radius-full);
9
- padding-left: var(--seed-dimension-x1_5);
10
- padding-right: var(--seed-dimension-x1_5);
11
- padding-top: var(--seed-dimension-x0_5);
12
- padding-bottom: var(--seed-dimension-x0_5);
9
+ padding-inline: var(--seed-dimension-x1_5);
10
+ padding-block: var(--seed-dimension-x0_5);
13
11
  font-size: var(--seed-font-size-t1);
14
12
  line-height: var(--seed-line-height-t1);
15
13
  font-weight: var(--seed-font-weight-medium)
package/recipes/image-frame-indicator.layered.css CHANGED
@@ -4,10 +4,8 @@
4
4
  background-color: var(--seed-color-palette-static-black-alpha-800);
5
5
  color: var(--seed-color-palette-static-white);
6
6
  border-radius: var(--seed-radius-full);
7
- padding-left: var(--seed-dimension-x1_5);
8
- padding-right: var(--seed-dimension-x1_5);
9
- padding-top: var(--seed-dimension-x0_5);
10
- padding-bottom: var(--seed-dimension-x0_5);
7
+ padding-inline: var(--seed-dimension-x1_5);
8
+ padding-block: var(--seed-dimension-x0_5);
11
9
  font-size: var(--seed-font-size-t1);
12
10
  line-height: var(--seed-line-height-t1);
13
11
  font-weight: var(--seed-font-weight-medium);
package/recipes/image-frame-reaction-button.css CHANGED
@@ -14,10 +14,7 @@
14
14
  .seed-image-frame-reaction-button__root::before {
15
15
  content: '';
16
16
  position: absolute;
17
- top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
18
- right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
19
- bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
20
- left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
17
+ inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
21
18
  outline: var(--seed-dimension-x0_5) solid transparent;
22
19
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
23
20
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
package/recipes/image-frame-reaction-button.layered.css CHANGED
@@ -15,10 +15,7 @@
15
15
 
16
16
  .seed-image-frame-reaction-button__root:before {
17
17
  content: "";
18
- top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
19
- right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
20
- bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
21
- left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
18
+ inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
22
19
  outline: var(--seed-dimension-x0_5) solid transparent;
23
20
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
24
21
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
package/recipes/image-frame.css CHANGED
@@ -23,10 +23,7 @@
23
23
  .seed-image-frame__root--stroke_true::after {
24
24
  content: '';
25
25
  position: absolute;
26
- top: 0;
27
- left: 0;
28
- right: 0;
29
- bottom: 0;
26
+ inset: 0;
30
27
  pointer-events: none;
31
28
  border-radius: inherit;
32
29
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
package/recipes/input-button.css CHANGED
@@ -9,10 +9,7 @@
9
9
  .seed-input-button__button {
10
10
  position: absolute;
11
11
  z-index: -1;
12
- top: 0;
13
- right: 0;
14
- bottom: 0;
15
- left: 0;
12
+ inset: 0;
16
13
  cursor: pointer;
17
14
  border: none;
18
15
  padding: 0;
@@ -23,10 +20,7 @@
23
20
  .seed-input-button__button::after {
24
21
  content: "";
25
22
  position: absolute;
26
- top: 0;
27
- right: 0;
28
- bottom: 0;
29
- left: 0;
23
+ inset: 0;
30
24
  border-radius: inherit;
31
25
  border-style: solid;
32
26
  border-color: transparent;
@@ -146,8 +140,7 @@
146
140
  .seed-input-button__root--size_large {
147
141
  height: var(--seed-dimension-x13);
148
142
  gap: var(--seed-dimension-x2_5);
149
- padding-left: var(--seed-dimension-x4);
150
- padding-right: var(--seed-dimension-x4);
143
+ padding-inline: var(--seed-dimension-x4);
151
144
  }
152
145
  .seed-input-button__button--size_large {
153
146
  border-radius: var(--seed-radius-r3);
@@ -182,8 +175,7 @@
182
175
  .seed-input-button__root--size_medium {
183
176
  height: var(--seed-dimension-x10);
184
177
  gap: var(--seed-dimension-x2);
185
- padding-left: var(--seed-dimension-x3_5);
186
- padding-right: var(--seed-dimension-x3_5);
178
+ padding-inline: var(--seed-dimension-x3_5);
187
179
  }
188
180
  .seed-input-button__button--size_medium {
189
181
  border-radius: var(--seed-radius-r2);
@@ -218,15 +210,13 @@
218
210
  .seed-input-button__root--size_responsive {
219
211
  height: var(--seed-dimension-x13);
220
212
  gap: var(--seed-dimension-x2_5);
221
- padding-left: var(--seed-dimension-x4);
222
- padding-right: var(--seed-dimension-x4);
213
+ padding-inline: var(--seed-dimension-x4);
223
214
  }
224
215
  @media (min-width: 1280px) {
225
216
  .seed-input-button__root--size_responsive {
226
217
  height: var(--seed-dimension-x10);
227
218
  gap: var(--seed-dimension-x2);
228
- padding-left: var(--seed-dimension-x3_5);
229
- padding-right: var(--seed-dimension-x3_5);
219
+ padding-inline: var(--seed-dimension-x3_5);
230
220
  }
231
221
  }
232
222
  .seed-input-button__button--size_responsive {