@seed-design/css 1.1.6 → 1.1.7

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 (37) hide show
  1. package/all.css +200 -125
  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 +4 -2
  17. package/recipes/input-button.css +2 -1
  18. package/recipes/list-header.css +4 -2
  19. package/recipes/list-item.css +4 -2
  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
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;