@seed-design/css 1.2.1 → 1.2.3

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 (25) hide show
  1. package/all.css +51 -39
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/app-bar.css +1 -1
  5. package/recipes/aspect-ratio.css +0 -2
  6. package/recipes/bottom-sheet.css +16 -8
  7. package/recipes/image-frame.css +11 -9
  8. package/recipes/image-frame.d.ts +2 -2
  9. package/recipes/image-frame.mjs +4 -4
  10. package/recipes/segmented-control.css +3 -1
  11. package/recipes/slider.css +16 -15
  12. package/vars/component/action-button.d.ts +61 -61
  13. package/vars/component/bottom-sheet.d.ts +27 -10
  14. package/vars/component/bottom-sheet.mjs +27 -10
  15. package/vars/component/callout.d.ts +7 -7
  16. package/vars/component/chip-tab.d.ts +2 -1
  17. package/vars/component/chip-tab.mjs +2 -1
  18. package/vars/component/contextual-floating-button.d.ts +2 -2
  19. package/vars/component/image-frame.d.ts +24 -18
  20. package/vars/component/image-frame.mjs +9 -9
  21. package/vars/component/input-button.d.ts +1 -1
  22. package/vars/component/select-box.d.ts +1 -1
  23. package/vars/component/slider.d.ts +11 -9
  24. package/vars/component/slider.mjs +8 -9
  25. package/vars/component/text-input.d.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/app-bar.css CHANGED
@@ -267,7 +267,7 @@
267
267
  --seed-exit-scale: 1;
268
268
  }
269
269
  .seed-app-bar__root--tone_layer:before {
270
- background-color: var(--seed-color-bg-layer-default);
270
+ background: var(--seed-box-background, var(--seed-color-bg-layer-default));
271
271
  }
272
272
  .seed-app-bar__icon--tone_layer {
273
273
  color: var(--seed-icon-color, var(--seed-color-fg-neutral));
package/recipes/aspect-ratio.css CHANGED
@@ -1,6 +1,4 @@
1
1
  .seed-aspect-ratio {
2
- position: relative;
3
- overflow: hidden;
4
2
  --seed-aspect-ratio-padding: 75%;
5
3
  }
6
4
  .seed-aspect-ratio::before {
package/recipes/bottom-sheet.css CHANGED
@@ -73,6 +73,7 @@
73
73
  font-size: var(--seed-font-size-t8);
74
74
  line-height: var(--seed-line-height-t8);
75
75
  font-weight: var(--seed-font-weight-bold);
76
+ word-break: keep-all;
76
77
  margin: 0;
77
78
  }
78
79
  .seed-bottom-sheet__description {
@@ -80,6 +81,8 @@
80
81
  font-size: var(--seed-font-size-t5);
81
82
  line-height: var(--seed-line-height-t5);
82
83
  font-weight: var(--seed-font-weight-regular);
84
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
85
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
83
86
  margin: 0;
84
87
  white-space: pre-wrap;
85
88
  }
@@ -114,8 +117,8 @@
114
117
  justify-content: center;
115
118
  align-items: center;
116
119
  border: none;
117
- top: var(--seed-dimension-x5);
118
- right: var(--seed-dimension-x5);
120
+ top: var(--seed-dimension-x6);
121
+ right: var(--seed-dimension-x4);
119
122
  border-radius: var(--seed-radius-full);
120
123
  background: var(--seed-color-bg-neutral-weak);
121
124
  width: 28px;
@@ -134,21 +137,26 @@
134
137
  }
135
138
  .seed-bottom-sheet__header--headerAlign_left {
136
139
  justify-content: flex-start;
140
+ }
141
+ .seed-bottom-sheet__title--headerAlign_left {
137
142
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
138
143
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
139
144
  }
140
- .seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
141
- padding-right: 50px;
145
+ .seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
146
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
147
+ padding-right: 56px;
142
148
  }
143
149
  .seed-bottom-sheet__header--headerAlign_center {
144
150
  justify-content: center;
151
+ text-align: center;
152
+ }
153
+ .seed-bottom-sheet__title--headerAlign_center {
145
154
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
146
155
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
147
- text-align: center;
148
156
  }
149
- .seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
150
- padding-left: 50px;
151
- padding-right: 50px;
157
+ .seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
158
+ padding-left: 56px;
159
+ padding-right: 56px;
152
160
  }
153
161
  .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
154
162
  animation-name: fade-in;
package/recipes/image-frame.css CHANGED
@@ -1,17 +1,15 @@
1
1
  .seed-image-frame {
2
2
  position: relative;
3
+ overflow: hidden;
4
+ border-radius: inherit;
3
5
  }
4
6
  .seed-image-frame > img, .seed-image-frame > video {
7
+ display: block;
8
+ width: 100%;
9
+ height: 100%;
5
10
  object-fit: cover;
11
+ border-radius: inherit;
6
12
  }
7
- .seed-image-frame--rounded_true {
8
- overflow: hidden;
9
- border-radius: var(--seed-radius-r2);
10
- }
11
- .seed-image-frame--rounded_true > img, .seed-image-frame--rounded_true > video {
12
- border-radius: var(--seed-radius-r2);
13
- }
14
- .seed-image-frame--rounded_false {}
15
13
  .seed-image-frame--stroke_true::after {
16
14
  content: '';
17
15
  position: absolute;
@@ -23,4 +21,8 @@
23
21
  border-radius: inherit;
24
22
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
25
23
  }
26
- .seed-image-frame--stroke_false {}
24
+ .seed-image-frame--stroke_false {}
25
+ .seed-image-frame--rounded_true {
26
+ border-radius: var(--seed-radius-r2);
27
+ }
28
+ .seed-image-frame--rounded_false {}
package/recipes/image-frame.d.ts CHANGED
@@ -2,11 +2,11 @@ declare interface ImageFrameVariant {
2
2
  /**
3
3
  * @default false
4
4
  */
5
- rounded: boolean;
5
+ stroke: boolean;
6
6
  /**
7
7
  * @default false
8
8
  */
9
- stroke: boolean;
9
+ rounded: boolean;
10
10
  }
11
11
 
12
12
  declare type ImageFrameVariantMap = {
package/recipes/image-frame.mjs CHANGED
@@ -2,18 +2,18 @@ import './image-frame.css';
2
2
  import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
3
 
4
4
  const defaultVariant = {
5
- "rounded": false,
6
- "stroke": false
5
+ "stroke": false,
6
+ "rounded": false
7
7
  };
8
8
 
9
9
  const compoundVariants = [];
10
10
 
11
11
  export const imageFrameVariantMap = {
12
- "rounded": [
12
+ "stroke": [
13
13
  true,
14
14
  false
15
15
  ],
16
- "stroke": [
16
+ "rounded": [
17
17
  true,
18
18
  false
19
19
  ]
package/recipes/segmented-control.css CHANGED
@@ -48,7 +48,7 @@
48
48
  font-size: var(--seed-font-size-t5);
49
49
  line-height: var(--seed-line-height-t5);
50
50
  color: var(--seed-color-fg-neutral-subtle);
51
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
51
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
52
52
  }
53
53
  .seed-segmented-control__item:is(:checked, [data-checked]) {
54
54
  color: var(--seed-color-fg-neutral);
@@ -63,7 +63,9 @@
63
63
  }
64
64
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
65
65
  background-color: var(--seed-color-palette-gray-100);
66
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
66
67
  }
67
68
  .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
68
69
  background-color: var(--seed-color-bg-neutral-weak-pressed);
70
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
69
71
  }
package/recipes/slider.css CHANGED
@@ -96,18 +96,19 @@
96
96
  top: 50%;
97
97
  box-sizing: border-box;
98
98
  background: var(--seed-color-bg-neutral-inverted);
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);
103
- border-radius: var(--seed-radius-r1);
99
+ padding-left: var(--seed-dimension-x2);
100
+ padding-right: var(--seed-dimension-x2);
101
+ padding-top: var(--seed-dimension-x1);
102
+ padding-bottom: var(--seed-dimension-x1);
103
+ border-radius: var(--seed-radius-r1_5);
104
104
  color: var(--seed-color-fg-neutral-inverted);
105
- font-size: var(--seed-font-size-t1);
106
- line-height: var(--seed-line-height-t1);
105
+ font-size: var(--seed-font-size-t3);
106
+ line-height: var(--seed-line-height-t3);
107
107
  font-weight: var(--seed-font-weight-medium);
108
108
  white-space: pre-wrap;
109
109
  text-align: center;
110
110
  width: max-content;
111
+ min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
111
112
  }
112
113
  .seed-slider__valueIndicatorRoot[data-dir='ltr'] {
113
114
  left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
@@ -122,7 +123,7 @@
122
123
  animation-timing-function: var(--seed-timing-function-enter);
123
124
  animation-duration: var(--seed-duration-d4);
124
125
  --seed-enter-translate-x: -50%;
125
- --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
126
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
126
127
  --seed-enter-opacity: 0;
127
128
  --seed-enter-scale: 0.9;
128
129
  }
@@ -131,7 +132,7 @@
131
132
  animation-timing-function: var(--seed-timing-function-enter);
132
133
  animation-duration: var(--seed-duration-d4);
133
134
  --seed-enter-translate-x: 50%;
134
- --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
135
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
135
136
  --seed-enter-opacity: 0;
136
137
  --seed-enter-scale: 0.9;
137
138
  }
@@ -141,7 +142,7 @@
141
142
  animation-duration: var(--seed-duration-d4);
142
143
  animation-fill-mode: forwards;
143
144
  --seed-exit-translate-x: -50%;
144
- --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
145
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
145
146
  --seed-exit-opacity: 0;
146
147
  --seed-exit-scale: 1;
147
148
  }
@@ -151,7 +152,7 @@
151
152
  animation-duration: var(--seed-duration-d4);
152
153
  animation-fill-mode: forwards;
153
154
  --seed-exit-translate-x: 50%;
154
- --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
155
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
155
156
  --seed-exit-opacity: 0;
156
157
  --seed-exit-scale: 1;
157
158
  }
@@ -159,8 +160,8 @@
159
160
  animation-duration: 0s;
160
161
  }
161
162
  .seed-slider__valueIndicatorArrow {
162
- width: var(--seed-dimension-x2_5);
163
- height: var(--seed-dimension-x2_5);
163
+ width: var(--seed-dimension-x2);
164
+ height: var(--seed-dimension-x2);
164
165
  position: absolute;
165
166
  top: 100%;
166
167
  }
@@ -175,6 +176,6 @@
175
176
  .seed-slider__valueIndicatorArrowTip {
176
177
  display: block;
177
178
  fill: var(--seed-color-bg-neutral-inverted);
178
- width: var(--seed-dimension-x2_5);
179
- height: 7px;
179
+ width: var(--seed-dimension-x2);
180
+ height: var(--seed-dimension-x1_5);
180
181
  }