@master/css-preset 0.0.0-site.1793659883.g69c9aebcf628
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.
- package/README.md +56 -0
- package/package.json +59 -0
- package/src/base.css +203 -0
- package/src/colors.css +419 -0
- package/src/container.css +29 -0
- package/src/default-manifest.json +1 -0
- package/src/default-manifest.json.d.ts +4 -0
- package/src/default-native.css +180 -0
- package/src/index.css +5 -0
- package/src/media.css +31 -0
- package/src/theme.css +336 -0
- package/src/utilities.css +2103 -0
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
@layer theme;
|
|
2
|
+
|
|
3
|
+
@layer base {
|
|
4
|
+
body {
|
|
5
|
+
-webkit-text-size-adjust: 100%;
|
|
6
|
+
-moz-text-size-adjust: 100%;
|
|
7
|
+
-ms-text-size-adjust: 100%;
|
|
8
|
+
text-size-adjust: 100%;
|
|
9
|
+
-webkit-font-smoothing: antialiased;
|
|
10
|
+
line-height: 1.2;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
a, button {
|
|
14
|
+
touch-action: manipulation;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
*, :before, :after {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body {
|
|
22
|
+
-moz-tab-size: 2;
|
|
23
|
+
tab-size: 2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
img, svg, video, canvas, audio, iframe, embed, object {
|
|
27
|
+
max-width: 100%;
|
|
28
|
+
display: block;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
abbr[title] {
|
|
32
|
+
text-decoration: underline dotted;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
b, strong {
|
|
36
|
+
font-weight: bolder;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
pre, code, kbd, samp {
|
|
40
|
+
font-size: 1em;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
::-moz-focus-inner {
|
|
44
|
+
border-style: none;
|
|
45
|
+
padding: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:-moz-ui-invalid {
|
|
49
|
+
box-shadow: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
progress {
|
|
53
|
+
vertical-align: baseline;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[type="search"] {
|
|
57
|
+
appearance: textfield;
|
|
58
|
+
outline-offset: -2px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
62
|
+
height: auto;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
::-webkit-search-decoration {
|
|
66
|
+
-webkit-appearance: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
::-webkit-file-upload-button {
|
|
70
|
+
-webkit-appearance: button;
|
|
71
|
+
font: inherit;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
hr {
|
|
75
|
+
height: 0;
|
|
76
|
+
color: inherit;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
small {
|
|
80
|
+
font-size: 80%;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
sub, sup {
|
|
84
|
+
vertical-align: baseline;
|
|
85
|
+
font-size: 75%;
|
|
86
|
+
line-height: 0;
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
sub {
|
|
91
|
+
bottom: -.25em;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
sup {
|
|
95
|
+
top: -.5em;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
table {
|
|
99
|
+
text-indent: 0;
|
|
100
|
+
border-color: inherit;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
body, :host {
|
|
104
|
+
font-family: var(--font-family-sans);
|
|
105
|
+
font-feature-settings: var(--font-feature-sans, normal);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
code, kbd, samp, pre {
|
|
109
|
+
font-family: var(--font-family-mono);
|
|
110
|
+
font-feature-settings: var(--font-feature-mono, normal);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
a {
|
|
114
|
+
color: inherit;
|
|
115
|
+
text-decoration: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
button, input, optgroup, select, textarea {
|
|
119
|
+
font: inherit;
|
|
120
|
+
font-feature-settings: inherit;
|
|
121
|
+
font-variation-settings: inherit;
|
|
122
|
+
color: inherit;
|
|
123
|
+
background-color: #0000;
|
|
124
|
+
margin: 0;
|
|
125
|
+
padding: 0;
|
|
126
|
+
font-size: 100%;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
*, :before, :after {
|
|
130
|
+
border-style: solid;
|
|
131
|
+
border-width: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
body, blockquote, dl, dd, hr, figure, p, pre, h1, h2, h3, h4, h5, h6 {
|
|
135
|
+
margin: 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
td, legend, fieldset {
|
|
139
|
+
padding: 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
ul, ol {
|
|
143
|
+
margin: 0;
|
|
144
|
+
padding: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
body {
|
|
148
|
+
-webkit-tap-highlight-color: transparent;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
ul {
|
|
152
|
+
list-style: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
h1, h2, h3, h4, h5, h6 {
|
|
156
|
+
font-size: inherit;
|
|
157
|
+
font-weight: inherit;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
[hidden] {
|
|
161
|
+
display: none;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@layer defaults, components, utilities;
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
@layer base {
|
|
169
|
+
:root {
|
|
170
|
+
color-scheme: light dark;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
[data-theme="light"], :host([data-theme="light"]) {
|
|
174
|
+
color-scheme: light;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
[data-theme="dark"], :host([data-theme="dark"]) {
|
|
178
|
+
color-scheme: dark;
|
|
179
|
+
}
|
|
180
|
+
}
|
package/src/index.css
ADDED
package/src/media.css
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@custom-media --4xs (width >= 22.5rem);
|
|
2
|
+
@custom-media --3xs (width >= 30rem);
|
|
3
|
+
@custom-media --2xs (width >= 37.5rem);
|
|
4
|
+
@custom-media --xs (width >= 48rem);
|
|
5
|
+
@custom-media --sm (width >= 52.125rem);
|
|
6
|
+
@custom-media --md (width >= 64rem);
|
|
7
|
+
@custom-media --lg (width >= 80rem);
|
|
8
|
+
@custom-media --xl (width >= 90rem);
|
|
9
|
+
@custom-media --2xl (width >= 100rem);
|
|
10
|
+
@custom-media --3xl (width >= 120rem);
|
|
11
|
+
@custom-media --4xl (width >= 160rem);
|
|
12
|
+
|
|
13
|
+
/* Below a breakpoint: the complement of its query, so `x@max-md` and `y@md` never overlap and a redeclared `--md` moves both. */
|
|
14
|
+
@custom-media --max-4xs not (--4xs);
|
|
15
|
+
@custom-media --max-3xs not (--3xs);
|
|
16
|
+
@custom-media --max-2xs not (--2xs);
|
|
17
|
+
@custom-media --max-xs not (--xs);
|
|
18
|
+
@custom-media --max-sm not (--sm);
|
|
19
|
+
@custom-media --max-md not (--md);
|
|
20
|
+
@custom-media --max-lg not (--lg);
|
|
21
|
+
@custom-media --max-xl not (--xl);
|
|
22
|
+
@custom-media --max-2xl not (--2xl);
|
|
23
|
+
@custom-media --max-3xl not (--3xl);
|
|
24
|
+
@custom-media --max-4xl not (--4xl);
|
|
25
|
+
|
|
26
|
+
@custom-media --landscape (orientation: landscape);
|
|
27
|
+
@custom-media --portrait (orientation: portrait);
|
|
28
|
+
@custom-media --motion-safe (prefers-reduced-motion: no-preference);
|
|
29
|
+
@custom-media --motion-reduce (prefers-reduced-motion: reduce);
|
|
30
|
+
@custom-media --light (prefers-color-scheme: light);
|
|
31
|
+
@custom-media --dark (prefers-color-scheme: dark);
|
package/src/theme.css
ADDED
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
@import "./colors.css";
|
|
2
|
+
@prune native;
|
|
3
|
+
|
|
4
|
+
@layer base {
|
|
5
|
+
:root { color-scheme: light dark; }
|
|
6
|
+
[data-theme="light"], :host([data-theme="light"]) { color-scheme: light; }
|
|
7
|
+
[data-theme="dark"], :host([data-theme="dark"]) { color-scheme: dark; }
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@theme {
|
|
11
|
+
/* Font families */
|
|
12
|
+
--font-family-sans: var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
13
|
+
--font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
14
|
+
--font-family-serif: var(--font-serif, ui-serif), Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
15
|
+
|
|
16
|
+
/* Letter spacing */
|
|
17
|
+
--tracking-tightest: -0.072em;
|
|
18
|
+
--tracking-tighter: -0.04em;
|
|
19
|
+
--tracking-tight: -0.02em;
|
|
20
|
+
--tracking-normal: 0;
|
|
21
|
+
--tracking-wide: 0.02em;
|
|
22
|
+
--tracking-wider: 0.04em;
|
|
23
|
+
--tracking-widest: 0.12em;
|
|
24
|
+
|
|
25
|
+
/* Line heights */
|
|
26
|
+
--leading-xs: 1.2;
|
|
27
|
+
--leading-sm: 1.4;
|
|
28
|
+
--leading-md: 1.6;
|
|
29
|
+
--leading-lg: 1.8;
|
|
30
|
+
--leading-xl: 2;
|
|
31
|
+
|
|
32
|
+
/* Font weights */
|
|
33
|
+
--font-weight-thin: 100;
|
|
34
|
+
--font-weight-extralight: 200;
|
|
35
|
+
--font-weight-light: 300;
|
|
36
|
+
--font-weight-regular: 400;
|
|
37
|
+
--font-weight-medium: 500;
|
|
38
|
+
--font-weight-semibold: 600;
|
|
39
|
+
--font-weight-bold: 700;
|
|
40
|
+
--font-weight-extrabold: 800;
|
|
41
|
+
--font-weight-heavy: 900;
|
|
42
|
+
|
|
43
|
+
/* Font sizes */
|
|
44
|
+
--font-size-3xs: 0.5rem;
|
|
45
|
+
--font-size-2xs: 0.625rem;
|
|
46
|
+
--font-size-xs: 0.75rem;
|
|
47
|
+
--font-size-sm: 0.875rem;
|
|
48
|
+
--font-size-md: 1rem;
|
|
49
|
+
--font-size-lg: 1.125rem;
|
|
50
|
+
--font-size-xl: 1.25rem;
|
|
51
|
+
--font-size-2xl: 1.5rem;
|
|
52
|
+
--font-size-3xl: 2rem;
|
|
53
|
+
--font-size-4xl: 2.25rem;
|
|
54
|
+
--font-size-5xl: 2.5rem;
|
|
55
|
+
--font-size-6xl: 3rem;
|
|
56
|
+
--font-size-7xl: 3.75rem;
|
|
57
|
+
--font-size-8xl: 4.5rem;
|
|
58
|
+
--font-size-9xl: 6rem;
|
|
59
|
+
--font-size-10xl: 8rem;
|
|
60
|
+
|
|
61
|
+
/* Typography recipes: explicit line height and letter spacing per step. */
|
|
62
|
+
--text-3xs: var(--font-size-3xs);
|
|
63
|
+
--text-3xs--line-height: 1.5;
|
|
64
|
+
--text-3xs--letter-spacing: 0;
|
|
65
|
+
--text-2xs: var(--font-size-2xs);
|
|
66
|
+
--text-2xs--line-height: 1.5;
|
|
67
|
+
--text-2xs--letter-spacing: 0;
|
|
68
|
+
--text-xs: var(--font-size-xs);
|
|
69
|
+
--text-xs--line-height: 1.5;
|
|
70
|
+
--text-xs--letter-spacing: 0;
|
|
71
|
+
--text-sm: var(--font-size-sm);
|
|
72
|
+
--text-sm--line-height: 1.5;
|
|
73
|
+
--text-sm--letter-spacing: 0;
|
|
74
|
+
--text-md: var(--font-size-md);
|
|
75
|
+
--text-md--line-height: 1.6;
|
|
76
|
+
--text-md--letter-spacing: 0;
|
|
77
|
+
--text-lg: var(--font-size-lg);
|
|
78
|
+
--text-lg--line-height: 1.5;
|
|
79
|
+
--text-lg--letter-spacing: 0;
|
|
80
|
+
--text-xl: var(--font-size-xl);
|
|
81
|
+
--text-xl--line-height: 1.4;
|
|
82
|
+
--text-xl--letter-spacing: -.01em;
|
|
83
|
+
--text-2xl: var(--font-size-2xl);
|
|
84
|
+
--text-2xl--line-height: 1.35;
|
|
85
|
+
--text-2xl--letter-spacing: -.015em;
|
|
86
|
+
--text-3xl: var(--font-size-3xl);
|
|
87
|
+
--text-3xl--line-height: 1.25;
|
|
88
|
+
--text-3xl--letter-spacing: -.02em;
|
|
89
|
+
--text-4xl: var(--font-size-4xl);
|
|
90
|
+
--text-4xl--line-height: 1.2;
|
|
91
|
+
--text-4xl--letter-spacing: -.025em;
|
|
92
|
+
--text-5xl: var(--font-size-5xl);
|
|
93
|
+
--text-5xl--line-height: 1.15;
|
|
94
|
+
--text-5xl--letter-spacing: -.03em;
|
|
95
|
+
--text-6xl: var(--font-size-6xl);
|
|
96
|
+
--text-6xl--line-height: 1.1;
|
|
97
|
+
--text-6xl--letter-spacing: -.035em;
|
|
98
|
+
--text-7xl: var(--font-size-7xl);
|
|
99
|
+
--text-7xl--line-height: 1.05;
|
|
100
|
+
--text-7xl--letter-spacing: -.04em;
|
|
101
|
+
--text-8xl: var(--font-size-8xl);
|
|
102
|
+
--text-8xl--line-height: 1.05;
|
|
103
|
+
--text-8xl--letter-spacing: -.04em;
|
|
104
|
+
--text-9xl: var(--font-size-9xl);
|
|
105
|
+
--text-9xl--line-height: 1;
|
|
106
|
+
--text-9xl--letter-spacing: -.045em;
|
|
107
|
+
--text-10xl: var(--font-size-10xl);
|
|
108
|
+
--text-10xl--line-height: 1;
|
|
109
|
+
--text-10xl--letter-spacing: -.05em;
|
|
110
|
+
|
|
111
|
+
/* Radii */
|
|
112
|
+
--radius-xs: 0.125rem;
|
|
113
|
+
--radius-sm: 0.25rem;
|
|
114
|
+
--radius-md: 0.375rem;
|
|
115
|
+
--radius-lg: 0.5rem;
|
|
116
|
+
--radius-xl: 0.75rem;
|
|
117
|
+
--radius-2xl: 1rem;
|
|
118
|
+
--radius-3xl: 1.5rem;
|
|
119
|
+
--radius-4xl: 2rem;
|
|
120
|
+
|
|
121
|
+
/* Spacing */
|
|
122
|
+
--spacing-4xs: 0.125rem;
|
|
123
|
+
--spacing-3xs: 0.25rem;
|
|
124
|
+
--spacing-2xs: 0.375rem;
|
|
125
|
+
--spacing-xs: 0.5rem;
|
|
126
|
+
--spacing-sm: 0.75rem;
|
|
127
|
+
--spacing-md: 1rem;
|
|
128
|
+
--spacing-lg: 1.5rem;
|
|
129
|
+
--spacing-xl: 2rem;
|
|
130
|
+
--spacing-2xl: 3rem;
|
|
131
|
+
--spacing-3xl: 4rem;
|
|
132
|
+
--spacing-4xl: 6rem;
|
|
133
|
+
--spacing-5xl: 8rem;
|
|
134
|
+
|
|
135
|
+
/* Breakpoints */
|
|
136
|
+
|
|
137
|
+
/* Containers */
|
|
138
|
+
--container-3xs: 16rem;
|
|
139
|
+
--container-2xs: 18rem;
|
|
140
|
+
--container-xs: 20rem;
|
|
141
|
+
--container-sm: 24rem;
|
|
142
|
+
--container-md: 28rem;
|
|
143
|
+
--container-lg: 32rem;
|
|
144
|
+
--container-xl: 36rem;
|
|
145
|
+
--container-2xl: 42rem;
|
|
146
|
+
--container-3xl: 48rem;
|
|
147
|
+
--container-4xl: 56rem;
|
|
148
|
+
--container-5xl: 64rem;
|
|
149
|
+
--container-6xl: 72rem;
|
|
150
|
+
--container-7xl: 80rem;
|
|
151
|
+
--container-8xl: 90rem;
|
|
152
|
+
|
|
153
|
+
/* Durations */
|
|
154
|
+
--duration-fastest: 75ms;
|
|
155
|
+
--duration-faster: 100ms;
|
|
156
|
+
--duration-fast: 150ms;
|
|
157
|
+
--duration-normal: 200ms;
|
|
158
|
+
--duration-slow: 300ms;
|
|
159
|
+
--duration-slower: 500ms;
|
|
160
|
+
--duration-slowest: 800ms;
|
|
161
|
+
|
|
162
|
+
/* Easings */
|
|
163
|
+
--easing-smooth: cubic-bezier(.4, 0, .2, 1);
|
|
164
|
+
--easing-soft: cubic-bezier(.33, 1, .68, 1);
|
|
165
|
+
--easing-crisp: cubic-bezier(.16, 1, .3, 1);
|
|
166
|
+
--easing-snap: cubic-bezier(.2, 0, 0, 1);
|
|
167
|
+
--easing-accelerate: cubic-bezier(.4, 0, 1, 1);
|
|
168
|
+
--easing-decelerate: cubic-bezier(0, 0, .2, 1);
|
|
169
|
+
--easing-overshoot: cubic-bezier(.34, 1.56, .64, 1);
|
|
170
|
+
--easing-rewind: cubic-bezier(.36, 0, .66, -.56);
|
|
171
|
+
--easing-spring: cubic-bezier(.68, -.6, .32, 1.6);
|
|
172
|
+
|
|
173
|
+
/* Animations */
|
|
174
|
+
--animate-fade: fade 1s infinite;
|
|
175
|
+
--animate-flash: flash 1s infinite;
|
|
176
|
+
--animate-float: float 3s ease-in-out infinite;
|
|
177
|
+
--animate-heart: heart 1s infinite;
|
|
178
|
+
--animate-jump: jump 1s infinite;
|
|
179
|
+
--animate-ping: ping 1s infinite;
|
|
180
|
+
--animate-pulse: pulse 1s infinite;
|
|
181
|
+
--animate-rotate: rotate 1s linear infinite;
|
|
182
|
+
--animate-shake: shake 1s infinite;
|
|
183
|
+
--animate-zoom: zoom 1s infinite;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* On-demand animation resources. */
|
|
187
|
+
@keyframes fade {
|
|
188
|
+
0% {
|
|
189
|
+
opacity: 0;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
to {
|
|
193
|
+
opacity: 1;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@keyframes flash {
|
|
198
|
+
0%, 50%, to {
|
|
199
|
+
opacity: 1;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
25%, 75% {
|
|
203
|
+
opacity: 0;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
@keyframes float {
|
|
208
|
+
0% {
|
|
209
|
+
transform: none;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
50% {
|
|
213
|
+
transform: translateY(-1.25rem);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
to {
|
|
217
|
+
transform: none;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@keyframes heart {
|
|
222
|
+
0% {
|
|
223
|
+
transform: scale(1);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
14% {
|
|
227
|
+
transform: scale(1.3);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
28% {
|
|
231
|
+
transform: scale(1);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
42% {
|
|
235
|
+
transform: scale(1.3);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
70% {
|
|
239
|
+
transform: scale(1);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
@keyframes jump {
|
|
244
|
+
0%, to {
|
|
245
|
+
transform: translateY(-25%);
|
|
246
|
+
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
50% {
|
|
250
|
+
transform: translateY(0);
|
|
251
|
+
animation-timing-function: cubic-bezier(0, 0, .2, 1);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
@keyframes ping {
|
|
256
|
+
75%, to {
|
|
257
|
+
transform: scale(2);
|
|
258
|
+
opacity: 0;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@keyframes pulse {
|
|
263
|
+
0% {
|
|
264
|
+
transform: none;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
50% {
|
|
268
|
+
transform: scale(1.05);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
to {
|
|
272
|
+
transform: none;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
@keyframes rotate {
|
|
277
|
+
0% {
|
|
278
|
+
transform: rotate(-360deg);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
to {
|
|
282
|
+
transform: none;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
@keyframes shake {
|
|
287
|
+
0% {
|
|
288
|
+
transform: none;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
6.5% {
|
|
292
|
+
transform: translateX(-6px) rotateY(-9deg);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
18.5% {
|
|
296
|
+
transform: translateX(5px) rotateY(7deg);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
31.5% {
|
|
300
|
+
transform: translateX(-3px) rotateY(-5deg);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
43.5% {
|
|
304
|
+
transform: translateX(2px) rotateY(3deg);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
50% {
|
|
308
|
+
transform: none;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@keyframes zoom {
|
|
313
|
+
0% {
|
|
314
|
+
transform: scale(0);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
to {
|
|
318
|
+
transform: none;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/*
|
|
323
|
+
* Converged elevation. Every level keeps the same contact layers and adds one reach layer: each layer doubles its
|
|
324
|
+
* offset and blur and pulls its spread in by half the offset, so the shadow stays under the object instead of
|
|
325
|
+
* spreading around it. The 1px ring holds the edge on any ground; native color-scheme selects each color.
|
|
326
|
+
* `inset` is the sunken counterpart for wells, tracks and pressed states.
|
|
327
|
+
*/
|
|
328
|
+
@theme {
|
|
329
|
+
--shadow-xs: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .04)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .30)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26));
|
|
330
|
+
--shadow-sm: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .05)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .30)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24));
|
|
331
|
+
--shadow-md: 0 0 0 1px light-dark(oklch(0% 0 none / .05), oklch(100% 0 none / .06)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .30)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26));
|
|
332
|
+
--shadow-lg: 0 0 0 1px light-dark(oklch(0% 0 none / .05), oklch(100% 0 none / .06)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .30)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .30));
|
|
333
|
+
--shadow-xl: 0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .07)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .30)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .30)), 0 32px 32px -16px light-dark(oklch(0% 0 none / .065), oklch(0% 0 none / .34));
|
|
334
|
+
--shadow-2xl: 0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .07)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .30)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .30)), 0 32px 32px -16px light-dark(oklch(0% 0 none / .065), oklch(0% 0 none / .34)), 0 64px 64px -32px light-dark(oklch(0% 0 none / .075), oklch(0% 0 none / .38));
|
|
335
|
+
--shadow-inset: inset 0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .06)), inset 0 1px 2px light-dark(oklch(0% 0 none / .06), oklch(0% 0 none / .4));
|
|
336
|
+
}
|