@seed-design/css 1.2.0 → 1.2.1

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 (7) hide show
  1. package/all.css +15 -6
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/bottom-sheet.css +12 -5
  5. package/recipes/image-frame-reaction-button.css +2 -2
  6. package/vars/component/image-frame-reaction-button.d.ts +16 -11
  7. package/vars/component/image-frame-reaction-button.mjs +11 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/bottom-sheet.css CHANGED
@@ -135,15 +135,22 @@
135
135
  .seed-bottom-sheet__header--headerAlign_left {
136
136
  justify-content: flex-start;
137
137
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
138
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
139
+ }
140
+ .seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
138
141
  padding-right: 50px;
139
142
  }
140
143
  .seed-bottom-sheet__header--headerAlign_center {
141
144
  justify-content: center;
145
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
146
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
147
+ text-align: center;
148
+ }
149
+ .seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
142
150
  padding-left: 50px;
143
151
  padding-right: 50px;
144
- text-align: center;
145
152
  }
146
- .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false'] {
153
+ .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
147
154
  animation-name: fade-in;
148
155
  animation-duration: var(--seed-duration-d6);
149
156
  animation-timing-function: var(--seed-timing-function-enter);
@@ -153,7 +160,7 @@
153
160
  animation-duration: var(--seed-duration-d4);
154
161
  animation-timing-function: var(--seed-timing-function-exit);
155
162
  }
156
- .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='true'][data-should-overlay-animate='true'] {
163
+ .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='true'][data-should-overlay-animate='true']:not([data-animation-done='true']) {
157
164
  animation-name: fade-in;
158
165
  animation-duration: var(--seed-duration-d6);
159
166
  animation-timing-function: var(--seed-timing-function-enter);
@@ -162,7 +169,7 @@
162
169
  animation-duration: var(--seed-duration-d6);
163
170
  animation-timing-function: var(--seed-timing-function-enter-expressive);
164
171
  }
165
- .seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false'] {
172
+ .seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
166
173
  animation-name: drawer-slide-from-bottom;
167
174
  animation-duration: var(--seed-duration-d6);
168
175
  animation-timing-function: var(--seed-timing-function-enter-expressive);
@@ -172,7 +179,7 @@
172
179
  animation-duration: var(--seed-duration-d4);
173
180
  animation-timing-function: var(--seed-timing-function-exit);
174
181
  }
175
- .seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points='true'] {
182
+ .seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points='true']:not([data-animation-done='true']) {
176
183
  animation-name: drawer-slide-from-bottom;
177
184
  animation-duration: var(--seed-duration-d6);
178
185
  animation-timing-function: var(--seed-timing-function-enter-expressive);
package/recipes/image-frame-reaction-button.css CHANGED
@@ -11,7 +11,7 @@
11
11
  height: var(--seed-dimension-x6);
12
12
  background: transparent;
13
13
  --seed-icon-size: var(--seed-dimension-x6);
14
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
14
+ --seed-icon-color: var(--seed-color-palette-static-white);
15
15
  }
16
16
  .seed-image-frame-reaction-button::before {
17
17
  content: '';
@@ -25,5 +25,5 @@
25
25
  outline: none;
26
26
  }
27
27
  .seed-image-frame-reaction-button:is([aria-pressed=true], [data-pressed]) {
28
- --seed-icon-color: var(--seed-color-fg-brand);
28
+ --seed-icon-color: var(--seed-color-bg-transparent);
29
29
  }
package/vars/component/image-frame-reaction-button.d.ts CHANGED
@@ -3,27 +3,32 @@ export declare const vars: {
3
3
  "enabled": {
4
4
  /** 하트 아이콘 토글 버튼입니다. 이미지 위에서 좋아요 기능에 사용됩니다. */
5
5
  "root": {
6
- /** 버튼 배경색입니다. */
7
- "color": "var(--seed-color-palette-static-black-alpha-200)",
8
- "cornerRadius": "var(--seed-radius-full)",
9
6
  /** 보이는 버튼 크기입니다. */
10
7
  "size": "var(--seed-dimension-x6)",
11
8
  /** 터치 영역 크기입니다. */
12
9
  "targetSize": "var(--seed-dimension-x10)"
13
10
  },
14
- /** 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다. */
15
- "icon": {
16
- /** 버튼 배경색입니다. */
17
- "color": "var(--seed-color-fg-neutral-inverted)",
11
+ /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
12
+ "fillIcon": {
13
+ "gradient": "var(--seed-color-palette-static-black-alpha-300) 0%, var(--seed-color-palette-static-black-alpha-300) 100%",
14
+ /** 보이는 버튼 크기입니다. */
15
+ "size": "var(--seed-dimension-x6)"
16
+ },
17
+ /** fillIcon 위로 올라가는 하트 아이콘입니다. */
18
+ "lineIcon": {
19
+ "color": "var(--seed-color-palette-static-white)",
18
20
  /** 보이는 버튼 크기입니다. */
19
21
  "size": "var(--seed-dimension-x6)"
20
22
  }
21
23
  },
22
24
  "selected": {
23
- /** 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다. */
24
- "icon": {
25
- /** 버튼 배경색입니다. */
26
- "color": "var(--seed-color-fg-brand)"
25
+ /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
26
+ "fillIcon": {
27
+ "gradient": "#FF9A56 0%, #FF6600 100%"
28
+ },
29
+ /** fillIcon 위로 올라가는 하트 아이콘입니다. */
30
+ "lineIcon": {
31
+ "color": "var(--seed-color-bg-transparent)"
27
32
  }
28
33
  }
29
34
  }
package/vars/component/image-frame-reaction-button.mjs CHANGED
@@ -2,19 +2,24 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-palette-static-black-alpha-200)",
6
- "cornerRadius": "var(--seed-radius-full)",
7
5
  "size": "var(--seed-dimension-x6)",
8
6
  "targetSize": "var(--seed-dimension-x10)"
9
7
  },
10
- "icon": {
11
- "color": "var(--seed-color-fg-neutral-inverted)",
8
+ "fillIcon": {
9
+ "gradient": "var(--seed-color-palette-static-black-alpha-300) 0%, var(--seed-color-palette-static-black-alpha-300) 100%",
10
+ "size": "var(--seed-dimension-x6)"
11
+ },
12
+ "lineIcon": {
13
+ "color": "var(--seed-color-palette-static-white)",
12
14
  "size": "var(--seed-dimension-x6)"
13
15
  }
14
16
  },
15
17
  "selected": {
16
- "icon": {
17
- "color": "var(--seed-color-fg-brand)"
18
+ "fillIcon": {
19
+ "gradient": "#FF9A56 0%, #FF6600 100%"
20
+ },
21
+ "lineIcon": {
22
+ "color": "var(--seed-color-bg-transparent)"
18
23
  }
19
24
  }
20
25
  }