@seed-design/css 1.1.6 → 1.1.8

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 (39) hide show
  1. package/all.css +218 -134
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/app-bar-main.css +2 -1
  5. package/recipes/app-bar.css +4 -2
  6. package/recipes/badge.css +8 -4
  7. package/recipes/bottom-sheet.css +4 -2
  8. package/recipes/callout.css +5 -3
  9. package/recipes/checkbox.css +3 -3
  10. package/recipes/chip.css +8 -4
  11. package/recipes/contextual-floating-button.css +4 -2
  12. package/recipes/dialog.css +4 -2
  13. package/recipes/field-label.css +3 -3
  14. package/recipes/field.css +4 -2
  15. package/recipes/floating-action-button.css +2 -1
  16. package/recipes/help-bubble.css +8 -2
  17. package/recipes/input-button.css +2 -1
  18. package/recipes/list-header.css +4 -2
  19. package/recipes/list-item.css +26 -15
  20. package/recipes/manner-temp-badge.css +4 -2
  21. package/recipes/menu-sheet-item.css +4 -2
  22. package/recipes/menu-sheet.css +8 -4
  23. package/recipes/notification-badge-positioner.css +10 -10
  24. package/recipes/notification-badge.css +4 -2
  25. package/recipes/page-banner.css +4 -2
  26. package/recipes/radio.css +3 -3
  27. package/recipes/reaction-button.css +8 -4
  28. package/recipes/segmented-control.css +7 -4
  29. package/recipes/select-box.css +4 -2
  30. package/recipes/slider.css +29 -23
  31. package/recipes/snackbar-region.css +4 -2
  32. package/recipes/snackbar.css +6 -3
  33. package/recipes/switch-mark.css +6 -6
  34. package/recipes/switch.css +3 -3
  35. package/recipes/tabs.css +12 -6
  36. package/recipes/text-input.css +12 -9
  37. package/recipes/toggle-button.css +8 -4
  38. package/vars/component/list-item.d.ts +17 -6
  39. package/vars/component/list-item.mjs +17 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/app-bar-main.css CHANGED
@@ -36,7 +36,8 @@
36
36
  bottom: 0;
37
37
  left: 0;
38
38
  right: 0;
39
- padding-inline: var(--centered-title-padding-x, 0);
39
+ padding-left: var(--centered-title-padding-x, 0);
40
+ padding-right: var(--centered-title-padding-x, 0);
40
41
  pointer-events: none
41
42
  }
42
43
  .seed-app-bar-main__root--theme_android {
package/recipes/app-bar.css CHANGED
@@ -43,7 +43,8 @@
43
43
  }
44
44
  .seed-app-bar__root--theme_cupertino {
45
45
  height: calc(44px + var(--seed-safe-area-top));
46
- padding-inline: var(--seed-dimension-x4);
46
+ padding-left: var(--seed-dimension-x4);
47
+ padding-right: var(--seed-dimension-x4);
47
48
  padding-top: var(--seed-safe-area-top);
48
49
  }
49
50
  .seed-app-bar__iconButton--theme_cupertino {
@@ -62,7 +63,8 @@
62
63
  }
63
64
  .seed-app-bar__root--theme_android {
64
65
  height: calc(56px + var(--seed-safe-area-top));
65
- padding-inline: var(--seed-dimension-x4);
66
+ padding-left: var(--seed-dimension-x4);
67
+ padding-right: var(--seed-dimension-x4);
66
68
  padding-top: var(--seed-safe-area-top);
67
69
  }
68
70
  .seed-app-bar__iconButton--theme_android {
package/recipes/badge.css CHANGED
@@ -16,8 +16,10 @@
16
16
  .seed-badge__root--size_medium {
17
17
  max-width: 7.5rem;
18
18
  min-height: var(--seed-dimension-x5);
19
- padding-inline: var(--seed-dimension-x1_5);
20
- padding-block: var(--seed-dimension-x0_5);
19
+ padding-left: var(--seed-dimension-x1_5);
20
+ padding-right: var(--seed-dimension-x1_5);
21
+ padding-top: var(--seed-dimension-x0_5);
22
+ padding-bottom: var(--seed-dimension-x0_5);
21
23
  border-radius: var(--seed-radius-r1);
22
24
  font-size: var(--seed-font-size-t1);
23
25
  line-height: var(--seed-line-height-t1)
@@ -25,8 +27,10 @@
25
27
  .seed-badge__root--size_large {
26
28
  max-width: 6.75rem;
27
29
  min-height: var(--seed-dimension-x6);
28
- padding-inline: var(--seed-dimension-x2);
29
- padding-block: var(--seed-dimension-x1);
30
+ padding-left: var(--seed-dimension-x2);
31
+ padding-right: var(--seed-dimension-x2);
32
+ padding-top: var(--seed-dimension-x1);
33
+ padding-bottom: var(--seed-dimension-x1);
30
34
  border-radius: var(--seed-radius-r1_5);
31
35
  font-size: var(--seed-font-size-t2);
32
36
  line-height: var(--seed-line-height-t2)
package/recipes/bottom-sheet.css CHANGED
@@ -123,7 +123,8 @@
123
123
  --seed-box-max-height: initial;
124
124
  --seed-box-justify-content: initial;
125
125
  --seed-box-align-items: initial;
126
- padding-inline: var(--seed-box-padding-x);
126
+ padding-left: var(--seed-box-padding-x);
127
+ padding-right: var(--seed-box-padding-x);
127
128
  height: var(--seed-box-height);
128
129
  min-height: var(--seed-box-min-height);
129
130
  max-height: var(--seed-box-max-height);
@@ -133,7 +134,8 @@
133
134
  .seed-bottom-sheet__footer {
134
135
  display: flex;
135
136
  flex-direction: column;
136
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
137
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
138
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
137
139
  padding-top: var(--seed-dimension-x3);
138
140
  padding-bottom: var(--seed-dimension-x4);
139
141
  }
package/recipes/callout.css CHANGED
@@ -10,8 +10,10 @@
10
10
  text-align: start;
11
11
  width: 100%;
12
12
  min-height: 50px;
13
- padding-inline: var(--seed-dimension-x3_5);
14
- padding-block: var(--seed-dimension-x3_5);
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);
15
17
  gap: var(--seed-dimension-x3);
16
18
  border-radius: var(--seed-radius-r2_5);
17
19
  text-decoration: none;
@@ -22,7 +24,7 @@
22
24
  cursor: pointer;
23
25
  }
24
26
  .seed-callout__content {
25
- margin-inline-end: auto;
27
+ margin-right: auto;
26
28
  line-height: var(--seed-line-height-t4);
27
29
  }
28
30
  .seed-callout__title {
package/recipes/checkbox.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
4
  position: relative;
5
- max-inline-size: 100%;
5
+ max-width: 100%;
6
6
  vertical-align: top;
7
7
  isolation: isolate;
8
8
  cursor: pointer;
@@ -30,7 +30,7 @@
30
30
  .seed-checkbox__label--size_large {
31
31
  font-size: var(--seed-font-size-t5);
32
32
  line-height: var(--seed-line-height-t5);
33
- margin-block-start: calc(18px - 0.65625rem);
33
+ margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
34
34
  }
35
35
  .seed-checkbox__root--size_medium {
36
36
  min-height: var(--seed-dimension-x8);
@@ -39,5 +39,5 @@
39
39
  .seed-checkbox__label--size_medium {
40
40
  font-size: var(--seed-font-size-t4);
41
41
  line-height: var(--seed-line-height-t4);
42
- margin-block-start: calc(16px - 0.59375rem);
42
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
43
43
  }
package/recipes/chip.css CHANGED
@@ -30,7 +30,8 @@
30
30
  align-items: center;
31
31
  justify-content: center;
32
32
  font-weight: var(--seed-font-weight-medium);
33
- padding-inline: var(--seed-dimension-x1_5);
33
+ padding-left: var(--seed-dimension-x1_5);
34
+ padding-right: var(--seed-dimension-x1_5);
34
35
  }
35
36
  .seed-chip__prefixIcon {
36
37
  display: inline-flex;
@@ -138,7 +139,8 @@
138
139
  }
139
140
  .seed-chip__root--size_large {
140
141
  height: 40px;
141
- padding-inline: var(--seed-dimension-x2_5);
142
+ padding-left: var(--seed-dimension-x2_5);
143
+ padding-right: var(--seed-dimension-x2_5);
142
144
  --seed-icon-size: var(--seed-dimension-x4);
143
145
  }
144
146
  .seed-chip__label--size_large {
@@ -153,7 +155,8 @@
153
155
  }
154
156
  .seed-chip__root--size_medium {
155
157
  height: 36px;
156
- padding-inline: var(--seed-dimension-x2);
158
+ padding-left: var(--seed-dimension-x2);
159
+ padding-right: var(--seed-dimension-x2);
157
160
  --seed-icon-size: var(--seed-dimension-x4);
158
161
  }
159
162
  .seed-chip__label--size_medium {
@@ -168,7 +171,8 @@
168
171
  }
169
172
  .seed-chip__root--size_small {
170
173
  height: 32px;
171
- padding-inline: var(--seed-dimension-x1_5);
174
+ padding-left: var(--seed-dimension-x1_5);
175
+ padding-right: var(--seed-dimension-x1_5);
172
176
  --seed-icon-size: var(--seed-dimension-x3_5);
173
177
  }
174
178
  .seed-chip__label--size_small {
package/recipes/contextual-floating-button.css CHANGED
@@ -82,8 +82,10 @@
82
82
  }
83
83
  .seed-contextual-floating-button--layout_withText {
84
84
  min-height: 36px;
85
- padding-inline: var(--seed-dimension-x3_5);
86
- padding-block: var(--seed-dimension-x2);
85
+ padding-left: var(--seed-dimension-x3_5);
86
+ padding-right: var(--seed-dimension-x3_5);
87
+ padding-top: var(--seed-dimension-x2);
88
+ padding-bottom: var(--seed-dimension-x2);
87
89
  gap: var(--seed-dimension-x1);
88
90
  --seed-prefix-icon-size: 16px;
89
91
  }
package/recipes/dialog.css CHANGED
@@ -74,7 +74,8 @@
74
74
  .seed-dialog__header {
75
75
  display: flex;
76
76
  flex-direction: column;
77
- padding-inline: var(--seed-dimension-x5);
77
+ padding-left: var(--seed-dimension-x5);
78
+ padding-right: var(--seed-dimension-x5);
78
79
  padding-top: var(--seed-dimension-x5);
79
80
  gap: var(--seed-dimension-x1_5);
80
81
  }
@@ -97,7 +98,8 @@
97
98
  display: flex;
98
99
  flex-direction: column;
99
100
  align-items: stretch;
100
- padding-inline: var(--seed-dimension-x5);
101
+ padding-left: var(--seed-dimension-x5);
102
+ padding-right: var(--seed-dimension-x5);
101
103
  padding-top: var(--seed-dimension-x4);
102
104
  padding-bottom: var(--seed-dimension-x5);
103
105
  }
package/recipes/field-label.css CHANGED
@@ -6,7 +6,7 @@
6
6
  .seed-field-label__indicatorText {
7
7
  display: inline;
8
8
  vertical-align: bottom;
9
- padding-inline-start: 0.25rem;
9
+ padding-left: 0.25rem;
10
10
  color: var(--seed-color-fg-neutral-subtle);
11
11
  font-size: var(--seed-font-size-t4);
12
12
  line-height: var(--seed-line-height-t5);
@@ -17,8 +17,8 @@
17
17
  vertical-align: top;
18
18
  width: 0.375rem;
19
19
  height: 0.375rem;
20
- margin-block-start: 0.25rem;
21
- margin-inline-start: 0.125rem;
20
+ margin-top: 0.25rem;
21
+ margin-left: 0.125rem;
22
22
  color: var(--seed-color-fg-critical)
23
23
  }
24
24
  .seed-field-label__root--weight_medium {
package/recipes/field.css CHANGED
@@ -8,14 +8,16 @@
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
- padding-inline: var(--seed-dimension-x0_5);
11
+ padding-left: var(--seed-dimension-x0_5);
12
+ padding-right: var(--seed-dimension-x0_5);
12
13
  gap: var(--seed-dimension-x2_5);
13
14
  }
14
15
  .seed-field__footer {
15
16
  display: flex;
16
17
  justify-content: space-between;
17
18
  align-items: flex-start;
18
- padding-inline: var(--seed-dimension-x0_5);
19
+ padding-left: var(--seed-dimension-x0_5);
20
+ padding-right: var(--seed-dimension-x0_5);
19
21
  gap: var(--seed-dimension-x2);
20
22
  }
21
23
  .seed-field__description {
package/recipes/floating-action-button.css CHANGED
@@ -46,7 +46,8 @@
46
46
  overflow: hidden;
47
47
  }
48
48
  .seed-floating-action-button__root--extended_true {
49
- padding-inline: var(--seed-dimension-x4_5);
49
+ padding-left: var(--seed-dimension-x4_5);
50
+ padding-right: var(--seed-dimension-x4_5);
50
51
  height: 48px;
51
52
  width: fit-content;
52
53
  max-width: 999px;
package/recipes/help-bubble.css CHANGED
@@ -1,9 +1,15 @@
1
+ .seed-help-bubble__positioner {
2
+ --popover-z-index: 99;
3
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
4
+ }
1
5
  .seed-help-bubble__content {
2
6
  display: flex;
3
7
  flex-direction: column;
4
8
  background: var(--seed-color-bg-neutral-inverted);
5
- padding-inline: var(--seed-dimension-x3);
6
- padding-block: var(--seed-dimension-x2_5);
9
+ padding-left: var(--seed-dimension-x3);
10
+ padding-right: var(--seed-dimension-x3);
11
+ padding-top: var(--seed-dimension-x2_5);
12
+ padding-bottom: var(--seed-dimension-x2_5);
7
13
  border-radius: var(--seed-radius-r3);
8
14
  word-break: keep-all;
9
15
  --seed-box-max-width: initial;
package/recipes/input-button.css CHANGED
@@ -7,7 +7,8 @@
7
7
  isolation: isolate;
8
8
  height: var(--seed-dimension-x13);
9
9
  gap: var(--seed-dimension-x2_5);
10
- padding-inline: var(--seed-dimension-x4);
10
+ padding-left: var(--seed-dimension-x4);
11
+ padding-right: var(--seed-dimension-x4);
11
12
  }
12
13
  .seed-input-button__button {
13
14
  position: absolute;
package/recipes/list-header.css CHANGED
@@ -5,8 +5,10 @@
5
5
  gap: var(--seed-dimension-x2_5);
6
6
  justify-content: space-between;
7
7
  box-sizing: border-box;
8
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
9
- padding-block: var(--seed-dimension-x2);
8
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
9
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
10
+ padding-top: var(--seed-dimension-x2);
11
+ padding-bottom: var(--seed-dimension-x2);
10
12
  font-size: var(--seed-font-size-t4);
11
13
  line-height: var(--seed-line-height-t4)
12
14
  }
package/recipes/list-item.css CHANGED
@@ -7,14 +7,13 @@
7
7
  position: relative;
8
8
  display: flex;
9
9
  width: 100%;
10
- z-index: 0;
11
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
12
- padding-block: var(--seed-dimension-x3);
10
+ isolation: isolate;
11
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
12
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
13
+ padding-top: var(--seed-dimension-x3);
14
+ padding-bottom: var(--seed-dimension-x3);
13
15
  --seed-box-align-items: center;
14
16
  align-items: var(--seed-box-align-items);
15
- transition-property: background-color;
16
- transition-duration: var(--seed-duration-color-transition);
17
- transition-timing-function: var(--seed-timing-function-easing);
18
17
  }
19
18
  .seed-list-item__prefix {
20
19
  display: inline-flex;
@@ -53,8 +52,8 @@
53
52
  flex-direction: column;
54
53
  align-items: flex-start;
55
54
  flex-grow: 1;
55
+ background-color: transparent;
56
56
  border: none;
57
- background-color: var(--seed-color-bg-transparent);
58
57
  font-family: inherit;
59
58
  --seed-box-gap: var(--seed-dimension-x0_5);
60
59
  gap: var(--seed-box-gap);
@@ -62,7 +61,7 @@
62
61
  padding: 0 var(--seed-box-padding-right) 0 0;
63
62
  text-decoration: none;
64
63
  }
65
- .seed-list-item__content:after {
64
+ .seed-list-item__content::after {
66
65
  content: '';
67
66
  position: absolute;
68
67
  top: 0;
@@ -70,7 +69,7 @@
70
69
  bottom: 0;
71
70
  left: 0;
72
71
  }
73
- .seed-list-item__content:before {
72
+ .seed-list-item__content::before {
74
73
  content: '';
75
74
  position: absolute;
76
75
  top: 0;
@@ -78,15 +77,21 @@
78
77
  bottom: 0;
79
78
  left: 0;
80
79
  z-index: -1;
81
- transition-property: background-color;
80
+ transition-property: background-color, left, right, border-radius;
82
81
  transition-duration: var(--seed-duration-color-transition);
83
82
  transition-timing-function: var(--seed-timing-function-easing);
84
83
  }
85
- .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
84
+ .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
86
85
  background-color: var(--seed-color-bg-transparent-pressed);
86
+ left: var(--seed-dimension-x1_5);
87
+ right: var(--seed-dimension-x1_5);
88
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
87
89
  }
88
- .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
90
+ .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
89
91
  background-color: var(--seed-color-bg-transparent-pressed);
92
+ left: var(--seed-dimension-x1_5);
93
+ right: var(--seed-dimension-x1_5);
94
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
90
95
  }
91
96
  .seed-list-item__title {
92
97
  flex-shrink: 0;
@@ -105,8 +110,14 @@
105
110
  color: var(--seed-color-fg-neutral-subtle);
106
111
  }
107
112
  .seed-list-item__detail:is(:disabled, [disabled], [data-disabled]) {
108
- color: var(--seed-color-fg-neutral-subtle);
113
+ color: var(--seed-color-fg-disabled);
114
+ }
115
+ .seed-list-item__content--highlighted_true::before {
116
+ background-color: var(--seed-color-bg-brand-weak);
117
+ }
118
+ .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
119
+ background-color: var(--seed-color-bg-brand-weak-pressed);
109
120
  }
110
- .seed-list-item__root--highlighted_true {
111
- background-color: var(--seed-color-palette-carrot-100);
121
+ .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
122
+ background-color: var(--seed-color-bg-brand-weak-pressed);
112
123
  }
package/recipes/manner-temp-badge.css CHANGED
@@ -10,8 +10,10 @@
10
10
  text-decoration: none;
11
11
  border-radius: var(--seed-radius-full);
12
12
  min-height: var(--seed-dimension-x5);
13
- padding-inline: var(--seed-dimension-x1_5);
14
- padding-block: var(--seed-dimension-x0_5);
13
+ padding-left: var(--seed-dimension-x1_5);
14
+ padding-right: var(--seed-dimension-x1_5);
15
+ padding-top: var(--seed-dimension-x0_5);
16
+ padding-bottom: var(--seed-dimension-x0_5);
15
17
  font-size: var(--seed-font-size-t1);
16
18
  line-height: var(--seed-line-height-t1);
17
19
  font-weight: var(--seed-font-weight-bold)
package/recipes/menu-sheet-item.css CHANGED
@@ -3,8 +3,10 @@
3
3
  align-items: center;
4
4
  background-color: var(--seed-color-bg-neutral-weak);
5
5
  min-height: 52px;
6
- padding-inline: var(--seed-dimension-x4);
7
- padding-block: var(--seed-dimension-x3_5);
6
+ padding-left: var(--seed-dimension-x4);
7
+ padding-right: var(--seed-dimension-x4);
8
+ padding-top: var(--seed-dimension-x3_5);
9
+ padding-bottom: var(--seed-dimension-x3_5);
8
10
  gap: var(--seed-dimension-x3_5);
9
11
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
10
12
  font-size: var(--seed-font-size-t5);
package/recipes/menu-sheet.css CHANGED
@@ -48,8 +48,10 @@
48
48
  word-break: break-all;
49
49
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
50
50
  background: var(--seed-color-bg-layer-floating);
51
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
52
- padding-block: var(--seed-dimension-x4);
51
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
52
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
53
+ padding-top: var(--seed-dimension-x4);
54
+ padding-bottom: var(--seed-dimension-x4);
53
55
  border-top-left-radius: var(--seed-radius-r5);
54
56
  border-top-right-radius: var(--seed-radius-r5);
55
57
  }
@@ -111,8 +113,10 @@
111
113
  justify-content: center;
112
114
  background-color: var(--seed-color-bg-neutral-weak);
113
115
  min-height: 52px;
114
- padding-inline: var(--seed-dimension-x5);
115
- padding-block: var(--seed-dimension-x3_5);
116
+ padding-left: var(--seed-dimension-x5);
117
+ padding-right: var(--seed-dimension-x5);
118
+ padding-top: var(--seed-dimension-x3_5);
119
+ padding-bottom: var(--seed-dimension-x3_5);
116
120
  border-radius: var(--seed-radius-r3);
117
121
  border: none;
118
122
  font-family: inherit;
package/recipes/notification-badge-positioner.css CHANGED
@@ -7,27 +7,27 @@
7
7
  }
8
8
  .seed-notification-badge-positioner--attach_icon {
9
9
  translate: 100% -100%;
10
- inset-block-end: auto;
11
- inset-inline-start: auto
10
+ bottom: auto;
11
+ left: auto
12
12
  }
13
13
  .seed-notification-badge-positioner--attach_text {
14
14
  translate: 100% 0%;
15
- inset-block-end: auto;
16
- inset-inline-start: auto
15
+ bottom: auto;
16
+ left: auto
17
17
  }
18
18
  .seed-notification-badge-positioner--size_small {}
19
19
  .seed-notification-badge-positioner--size_large {}
20
20
  .seed-notification-badge-positioner--size_large-attach_icon {
21
- inset-block-start: 14px;
22
- inset-inline-end: 8px
21
+ top: 14px;
22
+ right: 8px
23
23
  }
24
24
  .seed-notification-badge-positioner--size_small-attach_icon {
25
- inset-block-start: 7px;
26
- inset-inline-end: 7px
25
+ top: 7px;
26
+ right: 7px
27
27
  }
28
28
  .seed-notification-badge-positioner--size_large-attach_text {
29
- inset-inline-end: calc(-1 * 2px)
29
+ right: calc(-1 * 2px)
30
30
  }
31
31
  .seed-notification-badge-positioner--size_small-attach_text {
32
- inset-inline-end: calc(-1 * 2px)
32
+ right: calc(-1 * 2px)
33
33
  }
package/recipes/notification-badge.css CHANGED
@@ -19,8 +19,10 @@
19
19
  .seed-notification-badge--size_large {
20
20
  min-height: 18px;
21
21
  border-radius: var(--seed-radius-full);
22
- padding-inline: var(--seed-dimension-x1);
23
- padding-block: 0px;
22
+ padding-left: var(--seed-dimension-x1);
23
+ padding-right: var(--seed-dimension-x1);
24
+ padding-top: 0px;
25
+ padding-bottom: 0px;
24
26
  font-size: var(--seed-font-size-t1);
25
27
  line-height: var(--seed-line-height-t1);
26
28
  font-weight: var(--seed-font-weight-bold)
package/recipes/page-banner.css CHANGED
@@ -10,8 +10,10 @@
10
10
  text-align: start;
11
11
  width: 100%;
12
12
  min-height: var(--seed-dimension-x10);
13
- padding-inline: var(--seed-dimension-x4);
14
- padding-block: var(--seed-dimension-x2_5);
13
+ padding-left: var(--seed-dimension-x4);
14
+ padding-right: var(--seed-dimension-x4);
15
+ padding-top: var(--seed-dimension-x2_5);
16
+ padding-bottom: var(--seed-dimension-x2_5);
15
17
  --seed-prefix-icon-size: var(--seed-dimension-x4);
16
18
  --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
17
19
  --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * 0.5 - var(--seed-dimension-x2_5));
package/recipes/radio.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
4
  position: relative;
5
- max-inline-size: 100%;
5
+ max-width: 100%;
6
6
  vertical-align: top;
7
7
  isolation: isolate;
8
8
  cursor: pointer;
@@ -30,7 +30,7 @@
30
30
  .seed-radio__label--size_large {
31
31
  font-size: var(--seed-font-size-t5);
32
32
  line-height: var(--seed-line-height-t5);
33
- margin-block-start: calc(18px - 0.65625rem);
33
+ margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
34
34
  }
35
35
  .seed-radio__root--size_medium {
36
36
  min-height: var(--seed-dimension-x8);
@@ -39,5 +39,5 @@
39
39
  .seed-radio__label--size_medium {
40
40
  font-size: var(--seed-font-size-t4);
41
41
  line-height: var(--seed-line-height-t4);
42
- margin-block-start: calc(16px - 0.59375rem);
42
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
43
43
  }
package/recipes/reaction-button.css CHANGED
@@ -61,8 +61,10 @@
61
61
  }
62
62
  .seed-reaction-button--size_xsmall {
63
63
  height: var(--seed-dimension-x8);
64
- padding-inline: var(--seed-dimension-x3);
65
- padding-block: var(--seed-dimension-x1_5);
64
+ padding-left: var(--seed-dimension-x3);
65
+ padding-right: var(--seed-dimension-x3);
66
+ padding-top: var(--seed-dimension-x1_5);
67
+ padding-bottom: var(--seed-dimension-x1_5);
66
68
  gap: var(--seed-dimension-x1);
67
69
  border-radius: var(--seed-radius-full);
68
70
  font-size: var(--seed-font-size-t3);
@@ -75,8 +77,10 @@
75
77
  }
76
78
  .seed-reaction-button--size_small {
77
79
  height: var(--seed-dimension-x9);
78
- padding-inline: var(--seed-dimension-x3_5);
79
- padding-block: var(--seed-dimension-x2);
80
+ padding-left: var(--seed-dimension-x3_5);
81
+ padding-right: var(--seed-dimension-x3_5);
82
+ padding-top: var(--seed-dimension-x2);
83
+ padding-bottom: var(--seed-dimension-x2);
80
84
  gap: var(--seed-dimension-x1);
81
85
  border-radius: var(--seed-radius-full);
82
86
  font-size: var(--seed-font-size-t3);
package/recipes/segmented-control.css CHANGED
@@ -16,8 +16,9 @@
16
16
  z-index: -1;
17
17
  will-change: transform;
18
18
  transform: translateX(calc(var(--segment-index) * 100%));
19
- inset-block: var(--seed-dimension-x1);
20
- inset-inline-start: var(--seed-dimension-x1);
19
+ top: var(--seed-dimension-x1);
20
+ bottom: var(--seed-dimension-x1);
21
+ left: var(--seed-dimension-x1);
21
22
  width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
22
23
  border-radius: var(--seed-radius-full);
23
24
  background-color: var(--seed-color-palette-gray-00);
@@ -37,8 +38,10 @@
37
38
  min-height: 34px;
38
39
  gap: var(--seed-dimension-x1_5);
39
40
  height: 100%;
40
- padding-inline: var(--seed-dimension-x6);
41
- padding-block: var(--seed-dimension-x1_5);
41
+ padding-left: var(--seed-dimension-x6);
42
+ padding-right: var(--seed-dimension-x6);
43
+ padding-top: var(--seed-dimension-x1_5);
44
+ padding-bottom: var(--seed-dimension-x1_5);
42
45
  border-radius: var(--seed-radius-full);
43
46
  font-weight: var(--seed-font-weight-bold);
44
47
  font-size: var(--seed-font-size-t5);
package/recipes/select-box.css CHANGED
@@ -4,8 +4,10 @@
4
4
  align-items: center;
5
5
  justify-content: space-between;
6
6
  gap: var(--seed-dimension-x2_5);
7
- padding-inline: var(--seed-dimension-x4);
8
- padding-block: var(--seed-dimension-x5);
7
+ padding-left: var(--seed-dimension-x4);
8
+ padding-right: var(--seed-dimension-x4);
9
+ padding-top: var(--seed-dimension-x5);
10
+ padding-bottom: var(--seed-dimension-x5);
9
11
  border-radius: var(--seed-radius-r3);
10
12
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
11
13
  background-color: var(--seed-color-bg-transparent);