@seed-design/css 1.2.10 → 1.2.11

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 (18) hide show
  1. package/all.css +3 -556
  2. package/all.layered.css +3 -556
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/app-bar-main.css +0 -103
  7. package/recipes/app-bar-main.layered.css +0 -100
  8. package/recipes/app-bar.css +3 -279
  9. package/recipes/app-bar.d.ts +1 -1
  10. package/recipes/app-bar.layered.css +3 -266
  11. package/recipes/app-bar.layered.mjs +4 -0
  12. package/recipes/app-bar.mjs +4 -0
  13. package/recipes/app-screen.css +0 -203
  14. package/recipes/app-screen.layered.css +0 -190
  15. package/vars/component/top-navigation-text-button.d.ts +10 -1
  16. package/vars/component/top-navigation-text-button.mjs +9 -1
  17. package/vars/component/top-navigation.d.ts +24 -4
  18. package/vars/component/top-navigation.mjs +17 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.2.10",
3
+ "version": "1.2.11",
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-main.layered.css CHANGED
@@ -51,106 +51,6 @@
51
51
  display: flex;
52
52
  }
53
53
 
54
- [data-global-transition-state="enter-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
55
- --seed-enter-translate-x: 25%;
56
- --seed-enter-translate-y: 0;
57
- --seed-enter-opacity: 0;
58
- --seed-enter-scale: 1;
59
- opacity: 1;
60
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
61
- transform: translate3d(0, 0, 0);
62
- }
63
-
64
- [data-global-transition-state="exit-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
65
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
66
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
67
- --seed-exit-translate-x: 25%;
68
- --seed-exit-translate-y: 0;
69
- --seed-exit-opacity: 0;
70
- --seed-exit-scale: 1;
71
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
72
- }
73
-
74
- [data-global-transition-state="enter-done"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
75
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
76
- --seed-enter-translate-y: 0;
77
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
78
- --seed-enter-scale: 1;
79
- opacity: 1;
80
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
81
- transform: translate3d(0, 0, 0);
82
- }
83
-
84
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
85
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
86
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
87
- animation: none;
88
- }
89
-
90
- [data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
91
- opacity: 1;
92
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
93
- transform: translate3d(0, 0, 0);
94
- animation: none !important;
95
- }
96
-
97
- [data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
98
- opacity: 0;
99
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
100
- transform: translate3d(25%, 0, 0);
101
- animation: none !important;
102
- }
103
-
104
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
105
- opacity: 1;
106
- --seed-exit-translate-x: -25%;
107
- --seed-exit-translate-y: 0;
108
- --seed-exit-opacity: 0;
109
- --seed-exit-scale: 1;
110
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
111
- transform: translate3d(0, 0, 0);
112
- }
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
- --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * .15);
116
- --seed-enter-translate-y: 0;
117
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
118
- --seed-enter-scale: 1;
119
- opacity: 1;
120
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
121
- transform: translate3d(0, 0, 0);
122
- }
123
-
124
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
125
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
126
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
127
- --seed-exit-translate-x: -25%;
128
- --seed-exit-translate-y: 0;
129
- --seed-exit-opacity: 0;
130
- --seed-exit-scale: 1;
131
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
132
- }
133
-
134
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
135
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
136
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
137
- animation: none;
138
- }
139
-
140
- [data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
141
- opacity: 0;
142
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
143
- transform: translate3d(-25%, 0, 0);
144
- animation: none !important;
145
- }
146
-
147
- [data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
148
- opacity: 1;
149
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
150
- transform: translate3d(0, 0, 0);
151
- animation: none !important;
152
- }
153
-
154
54
  .seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
155
55
  color: var(--seed-color-fg-neutral);
156
56
  }
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;
@@ -92,282 +91,7 @@
92
91
  .seed-app-bar__left--theme_android {
93
92
  padding-right: 16px;
94
93
  }
95
- [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
96
- animation: seed-enter;
97
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
98
- animation-duration: 350ms;
99
- --seed-enter-translate-x: 100%;
100
- --seed-enter-translate-y: 0;
101
- --seed-enter-opacity: 1;
102
- --seed-enter-scale: 1;
103
- transform: translate3d(0, 0, 0);
104
- }
105
- [data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
106
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
107
- animation: seed-exit;
108
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
109
- animation-duration: 350ms;
110
- animation-fill-mode: forwards;
111
- --seed-exit-translate-x: 100%;
112
- --seed-exit-translate-y: 0;
113
- --seed-exit-opacity: 1;
114
- --seed-exit-scale: 1;
115
- }
116
- [data-global-transition-state=enter-done] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
117
- animation: seed-enter;
118
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
119
- animation-duration: 350ms;
120
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
121
- --seed-enter-translate-y: 0;
122
- --seed-enter-opacity: 1;
123
- --seed-enter-scale: 1;
124
- transform: translate3d(0, 0, 0);
125
- }
126
- [data-swipe-back-state=swiping] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
127
- animation: none;
128
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
129
- }
130
- [data-swipe-back-state=canceling] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
131
- animation: none !important;
132
- transform: translate3d(0, 0, 0);
133
- 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);
134
- }
135
- [data-swipe-back-state=completing] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
136
- animation: none !important;
137
- transform: translate3d(100%, 0, 0);
138
- 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);
139
- }
140
- [data-global-transition-state=enter-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
141
- animation: seed-enter;
142
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
143
- animation-duration: 350ms;
144
- --seed-enter-translate-x: 0;
145
- --seed-enter-translate-y: 0;
146
- --seed-enter-opacity: 0;
147
- --seed-enter-scale: 1;
148
- opacity: 1;
149
- }
150
- [data-global-transition-state=exit-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
151
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
152
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
153
- animation: seed-exit;
154
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
155
- animation-duration: 350ms;
156
- animation-fill-mode: forwards;
157
- --seed-exit-translate-x: 0;
158
- --seed-exit-translate-y: 0;
159
- --seed-exit-opacity: 0;
160
- --seed-exit-scale: 1;
161
- }
162
- [data-global-transition-state=enter-done] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
163
- animation: seed-enter;
164
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
165
- animation-duration: 350ms;
166
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
167
- --seed-enter-translate-y: 0;
168
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
169
- --seed-enter-scale: 1;
170
- opacity: 1;
171
- }
172
- [data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
173
- animation: none;
174
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
175
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
176
- }
177
- [data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
178
- animation: none !important;
179
- opacity: 1;
180
- 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);
181
- }
182
- [data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
183
- animation: none !important;
184
- opacity: 0;
185
- 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);
186
- }
187
- [data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
188
- opacity: 1;
189
- animation: seed-exit;
190
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
191
- animation-duration: 350ms;
192
- animation-fill-mode: forwards;
193
- --seed-exit-translate-x: 0;
194
- --seed-exit-translate-y: 0;
195
- --seed-exit-opacity: 0;
196
- --seed-exit-scale: 1;
197
- }
198
- [data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
199
- animation: seed-enter;
200
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
201
- animation-duration: 350ms;
202
- --seed-enter-translate-x: 0;
203
- --seed-enter-translate-y: 0;
204
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
205
- --seed-enter-scale: 1;
206
- opacity: 1;
207
- }
208
- [data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
209
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
210
- animation: seed-exit;
211
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
212
- animation-duration: 350ms;
213
- animation-fill-mode: forwards;
214
- --seed-exit-translate-x: 0;
215
- --seed-exit-translate-y: 0;
216
- --seed-exit-opacity: 0;
217
- --seed-exit-scale: 1;
218
- }
219
- [data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
220
- animation: none;
221
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
222
- }
223
- [data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
224
- animation: none !important;
225
- opacity: 0;
226
- 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);
227
- }
228
- [data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
229
- animation: none !important;
230
- opacity: 1;
231
- 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);
232
- }
233
- [data-global-transition-state=enter-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
234
- animation: seed-enter;
235
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
236
- animation-duration: 350ms;
237
- --seed-enter-translate-x: 0;
238
- --seed-enter-translate-y: 0;
239
- --seed-enter-opacity: 0;
240
- --seed-enter-scale: 1;
241
- opacity: 1;
242
- }
243
- [data-global-transition-state=exit-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
244
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
245
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
246
- animation: seed-exit;
247
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
248
- animation-duration: 350ms;
249
- animation-fill-mode: forwards;
250
- --seed-exit-translate-x: 0;
251
- --seed-exit-translate-y: 0;
252
- --seed-exit-opacity: 0;
253
- --seed-exit-scale: 1;
254
- }
255
- [data-global-transition-state=enter-done] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
256
- animation: seed-enter;
257
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
258
- animation-duration: 350ms;
259
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
260
- --seed-enter-translate-y: 0;
261
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
262
- --seed-enter-scale: 1;
263
- opacity: 1;
264
- }
265
- [data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
266
- animation: none;
267
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
268
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
269
- }
270
- [data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
271
- animation: none !important;
272
- opacity: 1;
273
- 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);
274
- }
275
- [data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
276
- animation: none !important;
277
- opacity: 0;
278
- 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);
279
- }
280
- [data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
281
- opacity: 1;
282
- animation: seed-exit;
283
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
284
- animation-duration: 350ms;
285
- animation-fill-mode: forwards;
286
- --seed-exit-translate-x: 0;
287
- --seed-exit-translate-y: 0;
288
- --seed-exit-opacity: 0;
289
- --seed-exit-scale: 1;
290
- }
291
- [data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
292
- animation: seed-enter;
293
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
294
- animation-duration: 350ms;
295
- --seed-enter-translate-x: 0;
296
- --seed-enter-translate-y: 0;
297
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
298
- --seed-enter-scale: 1;
299
- opacity: 1;
300
- }
301
- [data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
302
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
303
- animation: seed-exit;
304
- animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
305
- animation-duration: 350ms;
306
- animation-fill-mode: forwards;
307
- --seed-exit-translate-x: 0;
308
- --seed-exit-translate-y: 0;
309
- --seed-exit-opacity: 0;
310
- --seed-exit-scale: 1;
311
- }
312
- [data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
313
- animation: none;
314
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
315
- }
316
- [data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
317
- animation: none !important;
318
- opacity: 0;
319
- 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);
320
- }
321
- [data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
322
- animation: none !important;
323
- opacity: 1;
324
- 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);
325
- }
326
- [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
327
- animation: seed-enter;
328
- animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
329
- animation-duration: 300ms;
330
- --seed-enter-translate-x: 0;
331
- --seed-enter-translate-y: 8vh;
332
- --seed-enter-opacity: 0;
333
- --seed-enter-scale: 1;
334
- transform: translate3d(0, 0, 0);
335
- opacity: 1;
336
- }
337
- [data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
338
- transform: translate3d(0, 0, 0);
339
- opacity: 1;
340
- animation: seed-exit;
341
- animation-timing-function: linear;
342
- animation-duration: 150ms;
343
- animation-fill-mode: forwards;
344
- --seed-exit-translate-x: 0;
345
- --seed-exit-translate-y: 8vh;
346
- --seed-exit-opacity: 0;
347
- --seed-exit-scale: 1;
348
- }
349
- [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
350
- animation: seed-enter;
351
- animation-timing-function: ease-out;
352
- animation-duration: 300ms;
353
- --seed-enter-translate-x: 0;
354
- --seed-enter-translate-y: 0;
355
- --seed-enter-opacity: 0;
356
- --seed-enter-scale: 1;
357
- opacity: 1;
358
- }
359
- [data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
360
- opacity: 1;
361
- animation: seed-exit;
362
- animation-timing-function: ease-in;
363
- animation-duration: 150ms;
364
- animation-fill-mode: forwards;
365
- --seed-exit-translate-x: 0;
366
- --seed-exit-translate-y: 0;
367
- --seed-exit-opacity: 0;
368
- --seed-exit-scale: 1;
369
- }
370
- .seed-app-bar__root--tone_layer:before {
94
+ .seed-app-bar__background--tone_layer {
371
95
  background: var(--seed-box-background, var(--seed-color-bg-layer-default));
372
96
  }
373
97
  .seed-app-bar__icon--tone_layer {
@@ -379,6 +103,6 @@
379
103
  .seed-app-bar__icon--tone_transparent {
380
104
  color: var(--seed-icon-color, var(--seed-color-palette-static-white));
381
105
  }
382
- .seed-app-bar__root--divider_true:before {
106
+ .seed-app-bar__background--divider_true {
383
107
  box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
384
108
  }
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" | "custom";
26
+ export declare type AppBarSlotName = "root" | "background" | "left" | "right" | "iconButton" | "icon" | "custom";
27
27
 
28
28
  export declare const appBarVariantMap: AppBarVariantMap;
29
29