@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/recipes/slider.css CHANGED
@@ -91,9 +91,15 @@
91
91
  .seed-slider__valueIndicatorRoot {
92
92
  display: flex;
93
93
  flex-direction: column;
94
+ align-items: center;
95
+ position: absolute;
96
+ top: 50%;
97
+ box-sizing: border-box;
94
98
  background: var(--seed-color-bg-neutral-inverted);
95
- padding-inline: var(--seed-dimension-x1_5);
96
- padding-block: var(--seed-dimension-x0_5);
99
+ padding-left: var(--seed-dimension-x1_5);
100
+ padding-right: var(--seed-dimension-x1_5);
101
+ padding-top: var(--seed-dimension-x0_5);
102
+ padding-bottom: var(--seed-dimension-x0_5);
97
103
  border-radius: var(--seed-radius-r1);
98
104
  color: var(--seed-color-fg-neutral-inverted);
99
105
  font-size: var(--seed-font-size-t1);
@@ -102,70 +108,70 @@
102
108
  white-space: pre-wrap;
103
109
  text-align: center;
104
110
  width: max-content;
105
- position: absolute;
106
- bottom: calc(100% + var(--seed-dimension-x3));
107
- opacity: 0;
108
111
  }
109
112
  .seed-slider__valueIndicatorRoot[data-dir='ltr'] {
110
- left: calc(var(--indicator-position) * 1% + var(--indicator-offset));
111
- transform: translateX(-50%);
113
+ left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
114
+ transform: translate(-50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
112
115
  }
113
116
  .seed-slider__valueIndicatorRoot[data-dir='rtl'] {
114
- right: calc(var(--indicator-position) * 1% + var(--indicator-offset));
115
- transform: translateX(50%);
116
- }
117
- .seed-slider__valueIndicatorRoot[data-thumb-dragging] {
118
- opacity: 1;
117
+ right: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
118
+ transform: translate(50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
119
119
  }
120
- .seed-slider__valueIndicatorRoot[data-thumb-dragging][data-dir='ltr'] {
120
+ .seed-slider__valueIndicatorRoot[data-value-indicator-shown][data-dir='ltr'] {
121
121
  animation: seed-enter;
122
122
  animation-timing-function: var(--seed-timing-function-enter);
123
123
  animation-duration: var(--seed-duration-d4);
124
124
  --seed-enter-translate-x: -50%;
125
- --seed-enter-translate-y: var(--seed-dimension-x3);
125
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
126
126
  --seed-enter-opacity: 0;
127
127
  --seed-enter-scale: 0.9;
128
128
  }
129
- .seed-slider__valueIndicatorRoot[data-thumb-dragging][data-dir='rtl'] {
129
+ .seed-slider__valueIndicatorRoot[data-value-indicator-shown][data-dir='rtl'] {
130
130
  animation: seed-enter;
131
131
  animation-timing-function: var(--seed-timing-function-enter);
132
132
  animation-duration: var(--seed-duration-d4);
133
133
  --seed-enter-translate-x: 50%;
134
- --seed-enter-translate-y: var(--seed-dimension-x3);
134
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
135
135
  --seed-enter-opacity: 0;
136
136
  --seed-enter-scale: 0.9;
137
137
  }
138
- .seed-slider__valueIndicatorRoot:not([data-thumb-dragging])[data-dir='ltr'] {
138
+ .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir='ltr'] {
139
139
  animation: seed-exit;
140
140
  animation-timing-function: var(--seed-timing-function-easing);
141
141
  animation-duration: var(--seed-duration-d4);
142
142
  animation-fill-mode: forwards;
143
143
  --seed-exit-translate-x: -50%;
144
- --seed-exit-translate-y: var(--seed-dimension-x3);
144
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
145
145
  --seed-exit-opacity: 0;
146
146
  --seed-exit-scale: 1;
147
147
  }
148
- .seed-slider__valueIndicatorRoot:not([data-thumb-dragging])[data-dir='rtl'] {
148
+ .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir='rtl'] {
149
149
  animation: seed-exit;
150
150
  animation-timing-function: var(--seed-timing-function-easing);
151
151
  animation-duration: var(--seed-duration-d4);
152
152
  animation-fill-mode: forwards;
153
153
  --seed-exit-translate-x: 50%;
154
- --seed-exit-translate-y: var(--seed-dimension-x3);
154
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
155
155
  --seed-exit-opacity: 0;
156
156
  --seed-exit-scale: 1;
157
157
  }
158
- .seed-slider__valueIndicatorRoot:is(:hidden, [hidden], [data-hidden]) {
159
- display: none !important;
158
+ .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
159
+ animation-duration: 0s;
160
160
  }
161
161
  .seed-slider__valueIndicatorArrow {
162
162
  width: var(--seed-dimension-x2_5);
163
163
  height: var(--seed-dimension-x2_5);
164
164
  position: absolute;
165
165
  top: 100%;
166
- left: 50%;
166
+ }
167
+ .seed-slider__valueIndicatorArrow[data-dir='ltr'] {
168
+ left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
167
169
  transform: translateX(-50%);
168
170
  }
171
+ .seed-slider__valueIndicatorArrow[data-dir='rtl'] {
172
+ right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
173
+ transform: translateX(50%);
174
+ }
169
175
  .seed-slider__valueIndicatorArrowTip {
170
176
  display: block;
171
177
  fill: var(--seed-color-bg-neutral-inverted);
package/recipes/snackbar-region.css CHANGED
@@ -6,8 +6,10 @@
6
6
  left: calc(env(safe-area-inset-left, 0px));
7
7
  right: calc(env(safe-area-inset-right, 0px));
8
8
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
9
- padding-inline: var(--seed-dimension-x2);
10
- padding-block: var(--seed-dimension-x2);
9
+ padding-left: var(--seed-dimension-x2);
10
+ padding-right: var(--seed-dimension-x2);
11
+ padding-top: var(--seed-dimension-x2);
12
+ padding-bottom: var(--seed-dimension-x2);
11
13
  transition-property: bottom;
12
14
  transition-duration: var(--seed-duration-d4);
13
15
  transition-timing-function: var(--seed-timing-function-easing)
package/recipes/snackbar.css CHANGED
@@ -6,8 +6,10 @@
6
6
  max-width: 560px;
7
7
  background: var(--seed-color-bg-neutral-inverted);
8
8
  border-radius: var(--seed-radius-r2);
9
- padding-inline: var(--seed-dimension-x2_5);
10
- padding-block: var(--seed-dimension-x2_5);
9
+ padding-left: var(--seed-dimension-x2_5);
10
+ padding-right: var(--seed-dimension-x2_5);
11
+ padding-top: var(--seed-dimension-x2_5);
12
+ padding-bottom: var(--seed-dimension-x2_5);
11
13
  min-height: 44px;
12
14
  animation: seed-enter;
13
15
  animation-timing-function: var(--seed-timing-function-enter);
@@ -32,7 +34,8 @@
32
34
  flex-grow: 1;
33
35
  justify-content: space-between;
34
36
  align-items: center;
35
- padding-inline: var(--seed-dimension-x1_5);
37
+ padding-left: var(--seed-dimension-x1_5);
38
+ padding-right: var(--seed-dimension-x1_5);
36
39
  gap: var(--seed-dimension-x2_5);
37
40
  }
38
41
  .seed-snackbar__message {
package/recipes/switch-mark.css CHANGED
@@ -34,8 +34,8 @@
34
34
  background: var(--seed-color-palette-static-white);
35
35
  }
36
36
  .seed-switch-mark__root--size_16 {
37
- min-inline-size: 26px;
38
- min-block-size: 16px;
37
+ min-width: 26px;
38
+ min-height: 16px;
39
39
  padding: 2px 2px;
40
40
  }
41
41
  .seed-switch-mark__thumb--size_16 {
@@ -46,8 +46,8 @@
46
46
  transform: scale(1) translateX(calc(26px - 16px));
47
47
  }
48
48
  .seed-switch-mark__root--size_24 {
49
- min-inline-size: 38px;
50
- min-block-size: 24px;
49
+ min-width: 38px;
50
+ min-height: 24px;
51
51
  padding: 2px 2px;
52
52
  }
53
53
  .seed-switch-mark__thumb--size_24 {
@@ -58,8 +58,8 @@
58
58
  transform: scale(1) translateX(calc(38px - 24px));
59
59
  }
60
60
  .seed-switch-mark__root--size_32 {
61
- min-inline-size: 52px;
62
- min-block-size: 32px;
61
+ min-width: 52px;
62
+ min-height: 32px;
63
63
  padding: 3px 3px;
64
64
  }
65
65
  .seed-switch-mark__thumb--size_32 {
package/recipes/switch.css CHANGED
@@ -27,7 +27,7 @@
27
27
  .seed-switch__label--size_16 {
28
28
  font-size: var(--seed-font-size-t3);
29
29
  line-height: var(--seed-line-height-t3);
30
- margin-top: calc(12px - 0.5625rem);
30
+ margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2);
31
31
  }
32
32
  .seed-switch__root--size_24 {
33
33
  min-height: var(--seed-dimension-x6);
@@ -37,7 +37,7 @@
37
37
  .seed-switch__label--size_24 {
38
38
  font-size: var(--seed-font-size-t4);
39
39
  line-height: var(--seed-line-height-t4);
40
- margin-top: calc(12px - 0.59375rem);
40
+ margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2);
41
41
  }
42
42
  .seed-switch__root--size_32 {
43
43
  min-height: var(--seed-dimension-x8);
@@ -47,5 +47,5 @@
47
47
  .seed-switch__label--size_32 {
48
48
  font-size: var(--seed-font-size-t5);
49
49
  line-height: var(--seed-line-height-t5);
50
- margin-top: calc(16px - 0.6875rem);
50
+ margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2);
51
51
  }
package/recipes/tabs.css CHANGED
@@ -84,7 +84,8 @@
84
84
  background-color: var(--seed-color-fg-neutral);
85
85
  }
86
86
  .seed-tabs__list--triggerLayout_fill {
87
- padding-inline: 0px;
87
+ padding-left: 0px;
88
+ padding-right: 0px;
88
89
  justify-content: space-around;
89
90
  }
90
91
  .seed-tabs__indicator--triggerLayout_fill {
@@ -99,7 +100,8 @@
99
100
  right: var(--seed-dimension-spacing-x-global-gutter);
100
101
  }
101
102
  .seed-tabs__list--triggerLayout_hug {
102
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
103
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
104
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
103
105
  justify-content: flex-start;
104
106
  }
105
107
  .seed-tabs__indicator--triggerLayout_hug {
@@ -133,8 +135,10 @@
133
135
  }
134
136
  .seed-tabs__trigger--size_small {
135
137
  min-height: 40px;
136
- padding-inline: var(--seed-dimension-x2_5);
137
- padding-block: var(--seed-dimension-x2_5);
138
+ padding-left: var(--seed-dimension-x2_5);
139
+ padding-right: var(--seed-dimension-x2_5);
140
+ padding-top: var(--seed-dimension-x2_5);
141
+ padding-bottom: var(--seed-dimension-x2_5);
138
142
  font-size: var(--seed-font-size-t4);
139
143
  line-height: var(--seed-line-height-t4);
140
144
  font-weight: var(--seed-font-weight-bold);
@@ -147,8 +151,10 @@
147
151
  }
148
152
  .seed-tabs__trigger--size_medium {
149
153
  min-height: 44px;
150
- padding-inline: var(--seed-dimension-x2_5);
151
- padding-block: var(--seed-dimension-x2_5);
154
+ padding-left: var(--seed-dimension-x2_5);
155
+ padding-right: var(--seed-dimension-x2_5);
156
+ padding-top: var(--seed-dimension-x2_5);
157
+ padding-bottom: var(--seed-dimension-x2_5);
152
158
  font-size: var(--seed-font-size-t5);
153
159
  line-height: var(--seed-line-height-t5);
154
160
  font-weight: var(--seed-font-weight-bold);
package/recipes/text-input.css CHANGED
@@ -16,7 +16,8 @@
16
16
  align-self: stretch;
17
17
  color: var(--seed-color-fg-neutral);
18
18
  font-weight: var(--seed-font-weight-regular);
19
- padding-inline: 0;
19
+ padding-left: 0;
20
+ padding-right: 0;
20
21
  }
21
22
  .seed-text-input__value:is(input) {
22
23
  width: 0;
@@ -67,22 +68,22 @@
67
68
  background-color: var(--seed-color-bg-disabled);
68
69
  }
69
70
  .seed-text-input__value--variant_outline:first-child {
70
- padding-inline-start: var(--seed-dimension-x4);
71
+ padding-left: var(--seed-dimension-x4);
71
72
  }
72
73
  .seed-text-input__value--variant_outline:last-child {
73
- padding-inline-end: var(--seed-dimension-x4);
74
+ padding-right: var(--seed-dimension-x4);
74
75
  }
75
76
  .seed-text-input__prefixText--variant_outline:first-child {
76
- margin-inline-start: var(--seed-dimension-x4);
77
+ margin-left: var(--seed-dimension-x4);
77
78
  }
78
79
  .seed-text-input__prefixIcon--variant_outline:first-child {
79
- margin-inline-start: var(--seed-dimension-x4);
80
+ margin-left: var(--seed-dimension-x4);
80
81
  }
81
82
  .seed-text-input__suffixText--variant_outline:last-child {
82
- margin-inline-end: var(--seed-dimension-x4);
83
+ margin-right: var(--seed-dimension-x4);
83
84
  }
84
85
  .seed-text-input__suffixIcon--variant_outline:last-child {
85
- margin-inline-end: var(--seed-dimension-x4);
86
+ margin-right: var(--seed-dimension-x4);
86
87
  }
87
88
  .seed-text-input__root--variant_underline {
88
89
  gap: var(--seed-dimension-x2_5);
@@ -130,11 +131,13 @@
130
131
  }
131
132
  .seed-text-input__value--size_large:is(textarea) {
132
133
  min-height: 95px;
133
- padding-block: var(--seed-dimension-x3_5);
134
+ padding-top: var(--seed-dimension-x3_5);
135
+ padding-bottom: var(--seed-dimension-x3_5);
134
136
  }
135
137
  .seed-text-input__value--size_medium:is(textarea) {
136
138
  min-height: 90px;
137
- padding-block: 11px;
139
+ padding-top: 11px;
140
+ padding-bottom: 11px;
138
141
  }
139
142
  .seed-text-input__root--variant_outline-size_large {
140
143
  gap: var(--seed-dimension-x2_5);
package/recipes/toggle-button.css CHANGED
@@ -101,8 +101,10 @@
101
101
  height: var(--seed-dimension-x8);
102
102
  border-radius: var(--seed-radius-full);
103
103
  gap: var(--seed-dimension-x1);
104
- padding-inline: var(--seed-dimension-x3_5);
105
- padding-block: var(--seed-dimension-x1_5);
104
+ padding-left: var(--seed-dimension-x3_5);
105
+ padding-right: var(--seed-dimension-x3_5);
106
+ padding-top: var(--seed-dimension-x1_5);
107
+ padding-bottom: var(--seed-dimension-x1_5);
106
108
  font-size: var(--seed-font-size-t4);
107
109
  line-height: var(--seed-line-height-t4);
108
110
  --size: 14px;
@@ -114,8 +116,10 @@
114
116
  height: var(--seed-dimension-x9);
115
117
  border-radius: var(--seed-radius-full);
116
118
  gap: var(--seed-dimension-x1);
117
- padding-inline: var(--seed-dimension-x4);
118
- padding-block: var(--seed-dimension-x2);
119
+ padding-left: var(--seed-dimension-x4);
120
+ padding-right: var(--seed-dimension-x4);
121
+ padding-top: var(--seed-dimension-x2);
122
+ padding-bottom: var(--seed-dimension-x2);
119
123
  font-size: var(--seed-font-size-t4);
120
124
  line-height: var(--seed-line-height-t4);
121
125
  --size: 14px;
package/vars/component/list-item.d.ts CHANGED
@@ -4,11 +4,15 @@ export declare const vars: {
4
4
  "root": {
5
5
  "paddingY": "var(--seed-dimension-x3)",
6
6
  "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
7
+ "color": "var(--seed-color-bg-transparent)",
7
8
  "colorDuration": "var(--seed-duration-color-transition)",
8
- "colorTimingFunction": "var(--seed-timing-function-easing)"
9
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
10
+ "marginDuration": "var(--seed-duration-d3)",
11
+ "marginTimingFunction": "var(--seed-timing-function-easing)",
12
+ "borderRadiusDuration": "var(--seed-duration-d3)",
13
+ "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
9
14
  },
10
15
  "content": {
11
- "color": "var(--seed-color-bg-transparent)",
12
16
  "gap": "var(--seed-dimension-x0_5)",
13
17
  "paddingRight": "var(--seed-dimension-x2_5)"
14
18
  },
@@ -45,14 +49,21 @@ export declare const vars: {
45
49
  "color": "var(--seed-color-fg-neutral-subtle)"
46
50
  }
47
51
  },
52
+ "pressed": {
53
+ "root": {
54
+ "color": "var(--seed-color-bg-transparent-pressed)",
55
+ "marginX": "var(--seed-dimension-x1_5)",
56
+ "cornerRadius": "var(--seed-dimension-x2_5)"
57
+ }
58
+ },
48
59
  "highlighted": {
49
60
  "root": {
50
- "color": "var(--seed-color-palette-carrot-100)"
61
+ "color": "var(--seed-color-bg-brand-weak)"
51
62
  }
52
63
  },
53
- "pressed": {
64
+ "highlightedPressed": {
54
65
  "root": {
55
- "color": "var(--seed-color-bg-transparent-pressed)"
66
+ "color": "var(--seed-color-bg-brand-weak-pressed)"
56
67
  }
57
68
  },
58
69
  "disabled": {
@@ -60,7 +71,7 @@ export declare const vars: {
60
71
  "color": "var(--seed-color-fg-disabled)"
61
72
  },
62
73
  "detail": {
63
- "color": "var(--seed-color-fg-neutral-subtle)"
74
+ "color": "var(--seed-color-fg-disabled)"
64
75
  },
65
76
  "prefixIcon": {
66
77
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/list-item.mjs CHANGED
@@ -4,11 +4,15 @@ export const vars = {
4
4
  "root": {
5
5
  "paddingY": "var(--seed-dimension-x3)",
6
6
  "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
7
+ "color": "var(--seed-color-bg-transparent)",
7
8
  "colorDuration": "var(--seed-duration-color-transition)",
8
- "colorTimingFunction": "var(--seed-timing-function-easing)"
9
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
10
+ "marginDuration": "var(--seed-duration-d3)",
11
+ "marginTimingFunction": "var(--seed-timing-function-easing)",
12
+ "borderRadiusDuration": "var(--seed-duration-d3)",
13
+ "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
9
14
  },
10
15
  "content": {
11
- "color": "var(--seed-color-bg-transparent)",
12
16
  "gap": "var(--seed-dimension-x0_5)",
13
17
  "paddingRight": "var(--seed-dimension-x2_5)"
14
18
  },
@@ -45,14 +49,21 @@ export const vars = {
45
49
  "color": "var(--seed-color-fg-neutral-subtle)"
46
50
  }
47
51
  },
52
+ "pressed": {
53
+ "root": {
54
+ "color": "var(--seed-color-bg-transparent-pressed)",
55
+ "marginX": "var(--seed-dimension-x1_5)",
56
+ "cornerRadius": "var(--seed-dimension-x2_5)"
57
+ }
58
+ },
48
59
  "highlighted": {
49
60
  "root": {
50
- "color": "var(--seed-color-palette-carrot-100)"
61
+ "color": "var(--seed-color-bg-brand-weak)"
51
62
  }
52
63
  },
53
- "pressed": {
64
+ "highlightedPressed": {
54
65
  "root": {
55
- "color": "var(--seed-color-bg-transparent-pressed)"
66
+ "color": "var(--seed-color-bg-brand-weak-pressed)"
56
67
  }
57
68
  },
58
69
  "disabled": {
@@ -60,7 +71,7 @@ export const vars = {
60
71
  "color": "var(--seed-color-fg-disabled)"
61
72
  },
62
73
  "detail": {
63
- "color": "var(--seed-color-fg-neutral-subtle)"
74
+ "color": "var(--seed-color-fg-disabled)"
64
75
  },
65
76
  "prefixIcon": {
66
77
  "color": "var(--seed-color-fg-disabled)"