@seed-design/css 1.1.23 → 1.1.25

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 (13) hide show
  1. package/all.css +6 -469
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/app-bar-main.css +0 -103
  5. package/recipes/app-bar.css +4 -187
  6. package/recipes/app-bar.d.ts +1 -1
  7. package/recipes/app-bar.mjs +8 -0
  8. package/recipes/app-screen.css +0 -203
  9. package/recipes/identity-placeholder.css +2 -2
  10. package/recipes/identity-placeholder.d.ts +1 -1
  11. package/recipes/identity-placeholder.mjs +2 -1
  12. package/vars/component/identity-placeholder.d.ts +2 -2
  13. package/vars/component/identity-placeholder.mjs +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.1.23",
3
+ "version": "1.1.25",
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
@@ -48,109 +48,6 @@
48
48
  min-width: 0;
49
49
  height: 100%
50
50
  }
51
- [data-global-transition-state=enter-active] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
52
- animation: seed-enter;
53
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
54
- animation-duration: 350ms;
55
- --seed-enter-translate-x: 25%;
56
- --seed-enter-translate-y: 0;
57
- --seed-enter-opacity: 0;
58
- --seed-enter-scale: 1;
59
- transform: translate3d(0, 0, 0);
60
- opacity: 1
61
- }
62
- [data-global-transition-state=exit-active] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
63
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
64
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
65
- animation: seed-exit;
66
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
67
- animation-duration: 350ms;
68
- animation-fill-mode: forwards;
69
- --seed-exit-translate-x: 25%;
70
- --seed-exit-translate-y: 0;
71
- --seed-exit-opacity: 0;
72
- --seed-exit-scale: 1
73
- }
74
- [data-global-transition-state=enter-done] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
75
- animation: seed-enter;
76
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
77
- animation-duration: 350ms;
78
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
79
- --seed-enter-translate-y: 0;
80
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
81
- --seed-enter-scale: 1;
82
- transform: translate3d(0, 0, 0);
83
- opacity: 1
84
- }
85
- [data-swipe-back-state=swiping] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
86
- animation: none;
87
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
88
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3)
89
- }
90
- [data-swipe-back-state=canceling] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
91
- animation: none !important;
92
- transform: translate3d(0, 0, 0);
93
- opacity: 1;
94
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
95
- }
96
- [data-swipe-back-state=completing] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
97
- animation: none !important;
98
- transform: translate3d(25%, 0, 0);
99
- opacity: 0;
100
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
101
- }
102
- [data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
103
- transform: translate3d(0, 0, 0);
104
- opacity: 1;
105
- animation: seed-exit;
106
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
107
- animation-duration: 350ms;
108
- animation-fill-mode: forwards;
109
- --seed-exit-translate-x: -25%;
110
- --seed-exit-translate-y: 0;
111
- --seed-exit-opacity: 0;
112
- --seed-exit-scale: 1
113
- }
114
- [data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
115
- animation: seed-enter;
116
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
117
- animation-duration: 350ms;
118
- --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * 0.15);
119
- --seed-enter-translate-y: 0;
120
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
121
- --seed-enter-scale: 1;
122
- transform: translate3d(0, 0, 0);
123
- opacity: 1
124
- }
125
- [data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
126
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * 0.15), 0, 0);
127
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
128
- animation: seed-exit;
129
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
130
- animation-duration: 350ms;
131
- animation-fill-mode: forwards;
132
- --seed-exit-translate-x: -25%;
133
- --seed-exit-translate-y: 0;
134
- --seed-exit-opacity: 0;
135
- --seed-exit-scale: 1
136
- }
137
- [data-swipe-back-state=swiping] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
138
- animation: none;
139
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * 0.15), 0, 0);
140
- opacity: calc(var(--swipe-back-displacement-ratio, 0))
141
- }
142
- [data-swipe-back-state=canceling] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
143
- animation: none !important;
144
- transform: translate3d(-25%, 0, 0);
145
- opacity: 0;
146
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
147
- }
148
- [data-swipe-back-state=completing] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
149
- animation: none !important;
150
- transform: translate3d(0, 0, 0);
151
- opacity: 1;
152
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
153
- }
154
51
  .seed-app-bar-main__root--tone_layer {
155
52
  color: var(--seed-color-fg-neutral)
156
53
  }
package/recipes/app-bar.css CHANGED
@@ -7,8 +7,7 @@
7
7
  display: flex;
8
8
  align-items: flex-end;
9
9
  }
10
- .seed-app-bar__root:before {
11
- content: "";
10
+ .seed-app-bar__background {
12
11
  position: absolute;
13
12
  pointer-events: none;
14
13
  top: 0;
@@ -84,190 +83,8 @@
84
83
  .seed-app-bar__left--theme_android {
85
84
  padding-right: 16px;
86
85
  }
87
- [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
88
- animation: seed-enter;
89
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
90
- animation-duration: 350ms;
91
- --seed-enter-translate-x: 100%;
92
- --seed-enter-translate-y: 0;
93
- --seed-enter-opacity: 1;
94
- --seed-enter-scale: 1;
95
- transform: translate3d(0, 0, 0);
96
- }
97
- [data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
98
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
99
- animation: seed-exit;
100
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
101
- animation-duration: 350ms;
102
- animation-fill-mode: forwards;
103
- --seed-exit-translate-x: 100%;
104
- --seed-exit-translate-y: 0;
105
- --seed-exit-opacity: 1;
106
- --seed-exit-scale: 1;
107
- }
108
- [data-global-transition-state=enter-done] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
109
- animation: seed-enter;
110
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
111
- animation-duration: 350ms;
112
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
113
- --seed-enter-translate-y: 0;
114
- --seed-enter-opacity: 1;
115
- --seed-enter-scale: 1;
116
- transform: translate3d(0, 0, 0);
117
- }
118
- [data-swipe-back-state=swiping] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
119
- animation: none;
120
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
121
- }
122
- [data-swipe-back-state=canceling] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
123
- animation: none !important;
124
- transform: translate3d(0, 0, 0);
125
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
126
- }
127
- [data-swipe-back-state=completing] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
128
- animation: none !important;
129
- transform: translate3d(100%, 0, 0);
130
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
131
- }
132
- [data-global-transition-state=enter-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
133
- animation: seed-enter;
134
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
135
- animation-duration: 350ms;
136
- --seed-enter-translate-x: 0;
137
- --seed-enter-translate-y: 0;
138
- --seed-enter-opacity: 0;
139
- --seed-enter-scale: 1;
140
- opacity: 1;
141
- }
142
- [data-global-transition-state=exit-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
143
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
144
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
145
- animation: seed-exit;
146
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
147
- animation-duration: 350ms;
148
- animation-fill-mode: forwards;
149
- --seed-exit-translate-x: 0;
150
- --seed-exit-translate-y: 0;
151
- --seed-exit-opacity: 0;
152
- --seed-exit-scale: 1;
153
- }
154
- [data-global-transition-state=enter-done] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
155
- animation: seed-enter;
156
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
157
- animation-duration: 350ms;
158
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
159
- --seed-enter-translate-y: 0;
160
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
161
- --seed-enter-scale: 1;
162
- opacity: 1;
163
- }
164
- [data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
165
- animation: none;
166
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
167
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
168
- }
169
- [data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
170
- animation: none !important;
171
- opacity: 1;
172
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
173
- }
174
- [data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
175
- animation: none !important;
176
- opacity: 0;
177
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
178
- }
179
- [data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
180
- opacity: 1;
181
- animation: seed-exit;
182
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
183
- animation-duration: 350ms;
184
- animation-fill-mode: forwards;
185
- --seed-exit-translate-x: 0;
186
- --seed-exit-translate-y: 0;
187
- --seed-exit-opacity: 0;
188
- --seed-exit-scale: 1;
189
- }
190
- [data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
191
- animation: seed-enter;
192
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
193
- animation-duration: 350ms;
194
- --seed-enter-translate-x: 0;
195
- --seed-enter-translate-y: 0;
196
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
197
- --seed-enter-scale: 1;
198
- opacity: 1;
199
- }
200
- [data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
201
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
202
- animation: seed-exit;
203
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
204
- animation-duration: 350ms;
205
- animation-fill-mode: forwards;
206
- --seed-exit-translate-x: 0;
207
- --seed-exit-translate-y: 0;
208
- --seed-exit-opacity: 0;
209
- --seed-exit-scale: 1;
210
- }
211
- [data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
212
- animation: none;
213
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
214
- }
215
- [data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
216
- animation: none !important;
217
- opacity: 0;
218
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
219
- }
220
- [data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
221
- animation: none !important;
222
- opacity: 1;
223
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
224
- }
225
- [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
226
- animation: seed-enter;
227
- animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
228
- animation-duration: 300ms;
229
- --seed-enter-translate-x: 0;
230
- --seed-enter-translate-y: 8vh;
231
- --seed-enter-opacity: 0;
232
- --seed-enter-scale: 1;
233
- transform: translate3d(0, 0, 0);
234
- opacity: 1;
235
- }
236
- [data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
237
- transform: translate3d(0, 0, 0);
238
- opacity: 1;
239
- animation: seed-exit;
240
- animation-timing-function: linear;
241
- animation-duration: 150ms;
242
- animation-fill-mode: forwards;
243
- --seed-exit-translate-x: 0;
244
- --seed-exit-translate-y: 8vh;
245
- --seed-exit-opacity: 0;
246
- --seed-exit-scale: 1;
247
- }
248
- [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
249
- animation: seed-enter;
250
- animation-timing-function: ease-out;
251
- animation-duration: 300ms;
252
- --seed-enter-translate-x: 0;
253
- --seed-enter-translate-y: 0;
254
- --seed-enter-opacity: 0;
255
- --seed-enter-scale: 1;
256
- opacity: 1;
257
- }
258
- [data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
259
- opacity: 1;
260
- animation: seed-exit;
261
- animation-timing-function: ease-in;
262
- animation-duration: 150ms;
263
- animation-fill-mode: forwards;
264
- --seed-exit-translate-x: 0;
265
- --seed-exit-translate-y: 0;
266
- --seed-exit-opacity: 0;
267
- --seed-exit-scale: 1;
268
- }
269
- .seed-app-bar__root--tone_layer:before {
270
- background-color: var(--seed-color-bg-layer-default);
86
+ .seed-app-bar__background--tone_layer {
87
+ background: var(--seed-box-background, var(--seed-color-bg-layer-default));
271
88
  }
272
89
  .seed-app-bar__icon--tone_layer {
273
90
  color: var(--seed-icon-color, var(--seed-color-fg-neutral));
@@ -278,6 +95,6 @@
278
95
  .seed-app-bar__icon--tone_transparent {
279
96
  color: var(--seed-icon-color, var(--seed-color-palette-static-white));
280
97
  }
281
- .seed-app-bar__root--divider_true:before {
98
+ .seed-app-bar__background--divider_true {
282
99
  box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
283
100
  }
package/recipes/app-bar.d.ts CHANGED
@@ -23,7 +23,7 @@ declare type AppBarVariantMap = {
23
23
 
24
24
  export declare type AppBarVariantProps = Partial<AppBarVariant>;
25
25
 
26
- export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon";
26
+ export declare type AppBarSlotName = "root" | "background" | "left" | "right" | "iconButton" | "icon" | "custom";
27
27
 
28
28
  export declare const appBarVariantMap: AppBarVariantMap;
29
29
 
package/recipes/app-bar.mjs CHANGED
@@ -6,6 +6,10 @@ const appBarSlotNames = [
6
6
  "root",
7
7
  "seed-app-bar__root"
8
8
  ],
9
+ [
10
+ "background",
11
+ "seed-app-bar__background"
12
+ ],
9
13
  [
10
14
  "left",
11
15
  "seed-app-bar__left"
@@ -21,6 +25,10 @@ const appBarSlotNames = [
21
25
  [
22
26
  "icon",
23
27
  "seed-app-bar__icon"
28
+ ],
29
+ [
30
+ "custom",
31
+ "seed-app-bar__custom"
24
32
  ]
25
33
  ];
26
34
 
package/recipes/app-screen.css CHANGED
@@ -58,146 +58,10 @@
58
58
  .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
59
59
  transform: translate3d(0, 0, 0);
60
60
  }
61
- [data-global-transition-state=enter-active] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
62
- animation: seed-enter;
63
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
64
- animation-duration: 350ms;
65
- --seed-enter-translate-x: 100%;
66
- --seed-enter-translate-y: 0;
67
- --seed-enter-opacity: 1;
68
- --seed-enter-scale: 1;
69
- transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
70
- }
71
- [data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
72
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
73
- animation: seed-exit;
74
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
75
- animation-duration: 350ms;
76
- animation-fill-mode: forwards;
77
- --seed-exit-translate-x: 100%;
78
- --seed-exit-translate-y: 0;
79
- --seed-exit-opacity: 1;
80
- --seed-exit-scale: 1;
81
- }
82
- [data-global-transition-state=enter-done] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
83
- animation: seed-enter;
84
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
85
- animation-duration: 350ms;
86
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
87
- --seed-enter-translate-y: 0;
88
- --seed-enter-opacity: 1;
89
- --seed-enter-scale: 1;
90
- transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
91
- }
92
- [data-swipe-back-state=swiping] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
93
- animation: none;
94
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
95
- }
96
- [data-swipe-back-state=canceling] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
97
- animation: none !important;
98
- transform: translate3d(0, 0, 0);
99
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
100
- }
101
- [data-swipe-back-state=completing] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
102
- animation: none !important;
103
- transform: translate3d(100%, 0, 0);
104
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
105
- }
106
- [data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
107
- transform: translate3d(0, 0, 0);
108
- animation: seed-exit;
109
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
110
- animation-duration: 350ms;
111
- animation-fill-mode: forwards;
112
- --seed-exit-translate-x: -30%;
113
- --seed-exit-translate-y: 0;
114
- --seed-exit-opacity: 1;
115
- --seed-exit-scale: 1;
116
- }
117
- [data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
118
- animation: seed-enter;
119
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
120
- animation-duration: 350ms;
121
- --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * 0.3);
122
- --seed-enter-translate-y: 0;
123
- --seed-enter-opacity: 1;
124
- --seed-enter-scale: 1;
125
- transform: translate3d(0, 0, 0);
126
- }
127
- [data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
128
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0);
129
- animation: seed-exit;
130
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
131
- animation-duration: 350ms;
132
- animation-fill-mode: forwards;
133
- --seed-exit-translate-x: -30%;
134
- --seed-exit-translate-y: 0;
135
- --seed-exit-opacity: 1;
136
- --seed-exit-scale: 1;
137
- }
138
- [data-swipe-back-state=swiping] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
139
- animation: none;
140
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0);
141
- }
142
- [data-swipe-back-state=canceling] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
143
- animation: none !important;
144
- transform: translate3d(-30%, 0, 0);
145
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
146
- }
147
- [data-swipe-back-state=completing] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
148
- animation: none !important;
149
- transform: translate3d(0, 0, 0);
150
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
151
- }
152
61
  .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
153
62
  height: 100%;
154
63
  background: var(--seed-color-bg-overlay);
155
64
  }
156
- [data-global-transition-state=enter-active] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
157
- animation: seed-enter;
158
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
159
- animation-duration: 350ms;
160
- --seed-enter-translate-x: 0;
161
- --seed-enter-translate-y: 0;
162
- --seed-enter-opacity: 0;
163
- --seed-enter-scale: 1;
164
- opacity: 1;
165
- }
166
- [data-global-transition-state=exit-active] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
167
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
168
- animation: seed-exit;
169
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
170
- animation-duration: 350ms;
171
- animation-fill-mode: forwards;
172
- --seed-exit-translate-x: 0;
173
- --seed-exit-translate-y: 0;
174
- --seed-exit-opacity: 0;
175
- --seed-exit-scale: 1;
176
- }
177
- [data-global-transition-state=enter-done] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
178
- animation: seed-enter;
179
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
180
- animation-duration: 350ms;
181
- --seed-enter-translate-x: 0;
182
- --seed-enter-translate-y: 0;
183
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
184
- --seed-enter-scale: 1;
185
- opacity: 1;
186
- }
187
- [data-swipe-back-state=swiping] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
188
- animation: none;
189
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
190
- }
191
- [data-swipe-back-state=canceling] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
192
- animation: none !important;
193
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
194
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
195
- }
196
- [data-swipe-back-state=completing] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
197
- animation: none !important;
198
- opacity: 0;
199
- transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
200
- }
201
65
  .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
202
66
  --z-index-dim: calc(var(--z-index-base) + 0);
203
67
  --z-index-layer: calc(var(--z-index-base) + 3);
@@ -208,55 +72,9 @@
208
72
  height: 160px;
209
73
  background: linear-gradient(var(--seed-color-bg-overlay), rgba(0, 0, 0, 0));
210
74
  }
211
- [data-global-transition-state=enter-active] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
212
- animation: seed-enter;
213
- animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
214
- animation-duration: 300ms;
215
- --seed-enter-translate-x: 0;
216
- --seed-enter-translate-y: 0;
217
- --seed-enter-opacity: 0;
218
- --seed-enter-scale: 1;
219
- transform: translate3d(0, -8vh, 0);
220
- opacity: 1;
221
- }
222
- [data-global-transition-state=exit-active] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
223
- transform: translate3d(0, -8vh, 0);
224
- opacity: 1;
225
- animation: seed-exit;
226
- animation-timing-function: linear;
227
- animation-duration: 150ms;
228
- animation-fill-mode: forwards;
229
- --seed-exit-translate-x: 0;
230
- --seed-exit-translate-y: 0;
231
- --seed-exit-opacity: 0;
232
- --seed-exit-scale: 1;
233
- }
234
75
  .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
235
76
  transform: translate3d(0, 0, 0);
236
77
  }
237
- [data-global-transition-state=enter-active] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
238
- animation: seed-enter;
239
- animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
240
- animation-duration: 300ms;
241
- --seed-enter-translate-x: 0;
242
- --seed-enter-translate-y: 8vh;
243
- --seed-enter-opacity: 0;
244
- --seed-enter-scale: 1;
245
- transform: translate3d(0, 0, 0);
246
- opacity: 1;
247
- }
248
- [data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
249
- transform: translate3d(0, 0, 0);
250
- opacity: 1;
251
- animation: seed-exit;
252
- animation-timing-function: linear;
253
- animation-duration: 150ms;
254
- animation-fill-mode: forwards;
255
- --seed-exit-translate-x: 0;
256
- --seed-exit-translate-y: 8vh;
257
- --seed-exit-opacity: 0;
258
- --seed-exit-scale: 1;
259
- }
260
78
  .seed-app-screen__root--transitionStyle_fadeIn {
261
79
  --z-index-dim: calc(var(--z-index-base) + 0);
262
80
  --z-index-layer: calc(var(--z-index-base) + 3);
@@ -266,27 +84,6 @@
266
84
  .seed-app-screen__dim--transitionStyle_fadeIn {
267
85
  display: none;
268
86
  }
269
- [data-global-transition-state=enter-active] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
270
- animation: seed-enter;
271
- animation-timing-function: ease-out;
272
- animation-duration: 300ms;
273
- --seed-enter-translate-x: 0;
274
- --seed-enter-translate-y: 0;
275
- --seed-enter-opacity: 0;
276
- --seed-enter-scale: 1;
277
- opacity: 1;
278
- }
279
- [data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
280
- opacity: 1;
281
- animation: seed-exit;
282
- animation-timing-function: ease-in;
283
- animation-duration: 150ms;
284
- animation-fill-mode: forwards;
285
- --seed-exit-translate-x: 0;
286
- --seed-exit-translate-y: 0;
287
- --seed-exit-opacity: 0;
288
- --seed-exit-scale: 1;
289
- }
290
87
  .seed-app-screen__layer--layerOffsetTop_safeArea {
291
88
  padding-top: var(--seed-safe-area-top);
292
89
  }
package/recipes/identity-placeholder.css CHANGED
@@ -7,7 +7,7 @@
7
7
  vertical-align: top;
8
8
  width: 100%;
9
9
  height: 100%;
10
- background-color: var(--seed-color-palette-gray-400)
10
+ background-color: var(--seed-color-palette-gray-500)
11
11
  }
12
12
  .seed-identity-placeholder__image {
13
13
  display: block;
@@ -15,5 +15,5 @@
15
15
  height: 100%;
16
16
  object-fit: cover;
17
17
  overflow: hidden;
18
- fill: #f7f8fa
18
+ fill: var(--seed-color-palette-static-white-alpha-800)
19
19
  }
package/recipes/identity-placeholder.d.ts CHANGED
@@ -2,7 +2,7 @@ declare interface IdentityPlaceholderVariant {
2
2
  /**
3
3
  * @default "person"
4
4
  */
5
- identity: "person";
5
+ identity: "person" | "business";
6
6
  }
7
7
 
8
8
  declare type IdentityPlaceholderVariantMap = {
package/recipes/identity-placeholder.mjs CHANGED
@@ -20,7 +20,8 @@ const compoundVariants = [];
20
20
 
21
21
  export const identityPlaceholderVariantMap = {
22
22
  "identity": [
23
- "person"
23
+ "person",
24
+ "business"
24
25
  ]
25
26
  };
26
27
 
package/vars/component/identity-placeholder.d.ts CHANGED
@@ -2,10 +2,10 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-palette-gray-400)"
5
+ "color": "var(--seed-color-palette-gray-500)"
6
6
  },
7
7
  "image": {
8
- "color": "#f7f8fa"
8
+ "color": "var(--seed-color-palette-static-white-alpha-800)"
9
9
  }
10
10
  }
11
11
  }
package/vars/component/identity-placeholder.mjs CHANGED
@@ -2,10 +2,10 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-palette-gray-400)"
5
+ "color": "var(--seed-color-palette-gray-500)"
6
6
  },
7
7
  "image": {
8
- "color": "#f7f8fa"
8
+ "color": "var(--seed-color-palette-static-white-alpha-800)"
9
9
  }
10
10
  }
11
11
  }