Skip to content

Commit 5ccc29c

Browse files
bjohansebasbjohansebas
authored
separate theme and animations
1 parent acb8313 commit 5ccc29c

File tree

3 files changed

+211
-208
lines changed

3 files changed

+211
-208
lines changed

‎apps/site/styles/animations.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@theme {
2+
--animate-surf: surf 1s infinite ease-in-out;
3+
--animate-pulse: pulse 500ms infinite alternate-reverse;
4+
--animate-pulse-dark: pulse-dark 500ms infinite alternate-reverse;
5+
6+
@keyframes surf {
7+
0% {
8+
transform: translate(0, 0);
9+
}
10+
11+
25% {
12+
transform: translate(0, 6px);
13+
}
14+
15+
50% {
16+
transform: translate(0, -6px);
17+
}
18+
19+
75% {
20+
transform: translate(0, 3px);
21+
}
22+
23+
100% {
24+
transform: translate(0, 0);
25+
}
26+
}
27+
28+
@keyframes pulse {
29+
from {
30+
background: var(--color-pulse-100);
31+
}
32+
33+
to {
34+
background: var(--color-pulse-200);
35+
}
36+
}
37+
38+
@keyframes pulse-dark {
39+
from {
40+
background: var(--color-pulse-300);
41+
}
42+
43+
to {
44+
background: var(--color-pulse-400);
45+
}
46+
}
47+
}

‎apps/site/styles/index.css

+2-208
Original file line numberDiff line numberDiff line change
@@ -7,166 +7,15 @@
77
*/
88

99
@import 'tailwindcss';
10+
@import './animations.css';
11+
@import './theme.css';
1012
@import './base.css' layer(utilities);
1113
@import './markdown.css' layer(utilities);
1214
@import './effects.css';
1315
@import './locals.css' layer(utilities);
1416

1517
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *, .dark, .dark *));
1618

17-
@theme {
18-
--color-green-100: #edf2eb;
19-
--color-green-200: #c5e5b4;
20-
--color-green-300: #99cc7d;
21-
--color-green-400: #84ba64;
22-
--color-green-500: #5fa04e;
23-
--color-green-600: #417e38;
24-
--color-green-700: #2c682c;
25-
--color-green-800: #2c682c;
26-
--color-green-900: #1a3f1d;
27-
--color-neutral-100: #f6f7f9;
28-
--color-neutral-200: #e9edf0;
29-
--color-neutral-300: #d9e1e4;
30-
--color-neutral-400: #cbd4d9;
31-
--color-neutral-500: #b1bcc2;
32-
--color-neutral-600: #929fa5;
33-
--color-neutral-700: #6e7b83;
34-
--color-neutral-800: #556066;
35-
--color-neutral-900: #2c3437;
36-
--color-neutral-950: #0d121c;
37-
--color-danger-100: #fbf1f0;
38-
--color-danger-200: #fad3d4;
39-
--color-danger-300: #fab6b7;
40-
--color-danger-400: #fa8e8e;
41-
--color-danger-500: #f65354;
42-
--color-danger-600: #de1a1b;
43-
--color-danger-700: #b80c0c;
44-
--color-danger-800: #900e0e;
45-
--color-danger-900: #661514;
46-
--color-warning-100: #fdf3e7;
47-
--color-warning-200: #fad9b0;
48-
--color-warning-300: #f5bc75;
49-
--color-warning-400: #e99c40;
50-
--color-warning-500: #d07912;
51-
--color-warning-600: #ae5f00;
52-
--color-warning-700: #8b4d04;
53-
--color-warning-800: #683d08;
54-
--color-warning-900: #4d2f0b;
55-
--color-info-100: #e9f4fa;
56-
--color-info-200: #bce6fc;
57-
--color-info-300: #8ed4f8;
58-
--color-info-400: #52baed;
59-
--color-info-500: #229ad6;
60-
--color-info-600: #0c7bb3;
61-
--color-info-700: #066291;
62-
--color-info-800: #074d71;
63-
--color-info-900: #0a3953;
64-
--color-accent1-100: #f7f1fb;
65-
--color-accent1-200: #ead9fb;
66-
--color-accent1-300: #dbbdf9;
67-
--color-accent1-400: #c79bf2;
68-
--color-accent1-500: #af74e8;
69-
--color-accent1-600: #9756d6;
70-
--color-accent1-700: #7d3cbe;
71-
--color-accent1-800: #642b9e;
72-
--color-accent1-900: #361b52;
73-
--color-accent2-100: #fbf0f4;
74-
--color-accent2-200: #fbd4e6;
75-
--color-accent2-300: #fbb4d2;
76-
--color-accent2-400: #f68bb7;
77-
--color-accent2-500: #ed5393;
78-
--color-accent2-600: #d6246e;
79-
--color-accent2-700: #b01356;
80-
--color-accent2-800: #8b1245;
81-
--color-accent2-900: #411526;
82-
--color-pulse-100: #0000330f;
83-
--color-pulse-200: #00002d17;
84-
--color-pulse-300: #ddeaf814;
85-
--color-pulse-400: #d3edf81d;
86-
--color-white: #fff;
87-
--color-transparent: 'transparent';
88-
--color-shadow: #101828;
89-
--inherit: 'inherit';
90-
--shadow-xs: 0px 1px 2px 0px var(--color-shadow, rgba(0, 0, 0 / 5%));
91-
--shadow-lg:
92-
0px 4px 6px -2px var(--color-shadow, rgba(0, 0, 0 / 3%)),
93-
0px 12px 16px -4px var(--color-shadow, rgba(0, 0, 0 / 8%));
94-
--font-open-sans: var(--font-open-sans);
95-
--font-ibm-plex-mono: var(--font-ibm-plex-mono);
96-
--font-weight-regular: 400;
97-
--font-weight-medium: 500;
98-
--font-weight-semibold: 600;
99-
--font-weight-bold: 700;
100-
--font-xs: 0.75rem;
101-
--font-xs-line-height: 1rem;
102-
--font-sm: 0.87rem;
103-
--font-sm-line-height: 1.25rem;
104-
--font-base: 1rem;
105-
--font-base-line-height: 1.5rem;
106-
--font-lg: 1.125rem;
107-
--font-lg-line-height: 1.75rem;
108-
--font-xl: 1.25rem;
109-
--font-xl-line-height: 1.875rem;
110-
--font-2xl: 1.5rem;
111-
--font-2xl-line-height: 2rem;
112-
--font-3xl: 1.875rem;
113-
--font-3xl-line-height: 2.25rem;
114-
--font-4xl: 2.25rem;
115-
--font-4xl-line-height: 2.5rem;
116-
--font-5xl: 3rem;
117-
--font-5xl-line-height: 3rem;
118-
--font-6xl: 3.75rem;
119-
--font-6xl-line-height: 3.75rem;
120-
--font-7xl: 4.5rem;
121-
--font-7xl-line-height: 4.5rem;
122-
--breakpoint-xs: 670px;
123-
--animate-surf: surf 1s infinite ease-in-out;
124-
--animate-pulse: pulse 500ms infinite alternate-reverse;
125-
--animate-pulse-dark: pulse-dark 500ms infinite alternate-reverse;
126-
127-
@keyframes surf {
128-
0% {
129-
transform: translate(0, 0);
130-
}
131-
132-
25% {
133-
transform: translate(0, 6px);
134-
}
135-
136-
50% {
137-
transform: translate(0, -6px);
138-
}
139-
140-
75% {
141-
transform: translate(0, 3px);
142-
}
143-
144-
100% {
145-
transform: translate(0, 0);
146-
}
147-
}
148-
149-
@keyframes pulse {
150-
from {
151-
background: var(--color-pulse-100);
152-
}
153-
154-
to {
155-
background: var(--color-pulse-200);
156-
}
157-
}
158-
159-
@keyframes pulse-dark {
160-
from {
161-
background: var(--color-pulse-300);
162-
}
163-
164-
to {
165-
background: var(--color-pulse-400);
166-
}
167-
}
168-
}
169-
17019
/*
17120
The default border color has changed to `currentColor` in Tailwind CSS v4,
17221
so we've added these compatibility styles to make sure everything still
@@ -185,59 +34,4 @@
18534
}
18635
}
18736

188-
@utility scrollbar-thin {
189-
scrollbar-width: thin;
190-
}
191-
192-
@utility max-w-8xl {
193-
max-width: 95rem;
194-
}
195-
19637
@custom-variant aria-current (&[aria-sort="page"]);
197-
198-
@utility bg-gradient-subtle-dark {
199-
background-image: linear-gradient(
200-
180deg,
201-
--alpha(var(--color-neutral-900) / 50%) 0%,
202-
--alpha(var(--color-neutral-900) / 0%) 48.32%
203-
);
204-
}
205-
206-
@utility bg-gradient-subtle {
207-
background-image: linear-gradient(
208-
180deg,
209-
--alpha(var(--color-neutral-100) / 50%) 0%,
210-
--alpha(var(--color-neutral-100) / 0%) 48.32%
211-
);
212-
}
213-
214-
@utility bg-gradient-subtle-gray {
215-
background-image: linear-gradient(
216-
180deg,
217-
var(--color-neutral-900) 0%,
218-
--alpha(var(--color-neutral-900) / 80%) 100%
219-
);
220-
}
221-
222-
@utility bg-gradient-subtle-white {
223-
background-image: linear-gradient(
224-
180deg,
225-
var(--color-white) 0%,
226-
--alpha(var(--color-white) / 80%) 100%
227-
);
228-
}
229-
230-
@utility bg-gradient-glow-backdrop {
231-
background-image: radial-gradient(
232-
8em circle at calc(50%) 10px,
233-
var(--color-green-400),
234-
transparent 30%
235-
);
236-
}
237-
238-
@utility bg-gradient-radial {
239-
background-image: radial-gradient(
240-
var(--tw-gradient-from),
241-
var(--tw-gradient-to)
242-
);
243-
}

0 commit comments

Comments
 (0)