-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththeme.css
More file actions
155 lines (135 loc) · 5.33 KB
/
theme.css
File metadata and controls
155 lines (135 loc) · 5.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
@theme {
/* Colors ================================================================= */
--color-primary-50: oklch(94.68% 0.0268 288.2);
--color-primary-100: oklch(90.50% 0.0490 289.2);
--color-primary-200: oklch(83.90% 0.0848 288.2);
--color-primary-300: oklch(73.75% 0.1451 289.1);
--color-primary-400: oklch(66.57% 0.1899 288.8);
--color-primary-500: oklch(60.81% 0.2238 286.1);
--color-primary-600: oklch(53.66% 0.2144 285.9);
--color-primary-700: oklch(46.71% 0.2125 287.4);
--color-primary-800: oklch(36.21% 0.1605 287.3);
--color-primary-900: oklch(25.81% 0.1061 289.4);
--color-primary-950: oklch(17.41% 0.0673 289.5);
--color-slate-50: oklch(97.8% 0.007 295.68);
--color-slate-100: oklch(93.5% 0.013 290.84);
--color-slate-200: oklch(85% 0.03 289.95);
--color-slate-300: oklch(77.8% 0.042 288.45);
--color-slate-400: oklch(69.9% 0.055 288.52);
--color-slate-500: oklch(60.8% 0.063 287.64);
--color-slate-600: oklch(51.1% 0.05 288.79);
--color-slate-700: oklch(43.6% 0.062 287.15);
--color-slate-800: oklch(31.27% 0.0473 288.4);
--color-slate-900: oklch(22.5% 0.035 288.39);
--color-slate-950: oklch(19% 0.026 287.17);
--color-blue-50: oklch(97.49% 0.0117 239.9);
--color-blue-100: oklch(94.11% 0.0245 242.3);
--color-blue-200: oklch(89.79% 0.0439 239.8);
--color-blue-300: oklch(83.30% 0.0738 237.7);
--color-blue-400: oklch(75.02% 0.1083 242.6);
--color-blue-500: oklch(68.35% 0.1313 250.0);
--color-blue-600: oklch(62.18% 0.1466 256.3);
--color-blue-700: oklch(57.67% 0.1536 257.3);
--color-blue-800: oklch(48.06% 0.1287 258.7);
--color-blue-900: oklch(36.77% 0.0901 259.9);
--color-blue-950: oklch(30.06% 0.0627 258.0);
--color-red-50: oklch(96.97% 0.0153 7.5);
--color-red-100: oklch(93.95% 0.0310 10.3);
--color-red-200: oklch(89.18% 0.0586 7.8);
--color-red-300: oklch(80.75% 0.1129 8.8);
--color-red-400: oklch(72.47% 0.1750 11.3);
--color-red-500: oklch(65.05% 0.2243 14.5);
--color-red-600: oklch(59.54% 0.2296 15.9);
--color-red-700: oklch(52.29% 0.2039 15.4);
--color-red-800: oklch(46.14% 0.1770 12.1);
--color-red-900: oklch(41.54% 0.1555 8.3);
--color-red-950: oklch(27.39% 0.1052 10.3);
--color-yellow-50: oklch(98.30% 0.0195 87.5);
--color-yellow-100: oklch(95.62% 0.0540 91.0);
--color-yellow-200: oklch(90.67% 0.1072 88.9);
--color-yellow-300: oklch(86.35% 0.1480 86.9);
--color-yellow-400: oklch(83.30% 0.1642 83.4);
--color-yellow-500: oklch(79.94% 0.1657 79.7);
--color-yellow-600: oklch(77.09% 0.1633 74.1);
--color-yellow-700: oklch(72.06% 0.1588 67.4);
--color-yellow-800: oklch(63.44% 0.1466 61.6);
--color-yellow-900: oklch(51.25% 0.1266 55.2);
--color-yellow-950: oklch(41.94% 0.1097 50.7);
--color-green-50: oklch(97.80% 0.0182 166.4);
--color-green-100: oklch(94.59% 0.0443 161.7);
--color-green-200: oklch(89.31% 0.0798 163.3);
--color-green-300: oklch(82.45% 0.1134 164.8);
--color-green-400: oklch(76.95% 0.1489 162.8);
--color-green-500: oklch(73.01% 0.1546 162.4);
--color-green-600: oklch(68.17% 0.1466 162.3);
--color-green-700: oklch(61.48% 0.1271 164.9);
--color-green-800: oklch(53.35% 0.1073 165.8);
--color-green-900: oklch(44.86% 0.0874 167.5);
--color-green-950: oklch(39.82% 0.0755 170.2);
/* Typography ============================================================= */
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-code: "Roboto Mono", Consolas, "Bitstream Vera Sans Mono",
"Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
--text-2xs: 0.625rem;
--text-2xs--line-height: 1.3;
--text-xs: 0.75rem;
--text-xs--line-height: 1.4;
--text-sm: 0.875rem;
--text-sm--line-height: 1.5;
--text-base: 1rem;
--text-base--line-height: 1.6;
--text-lg: 1.125rem;
--text-lg--line-height: 1.6;
--text-xl: 1.25rem;
--text-xl--line-height: 1.5;
--text-2xl: 1.5rem;
--text-2xl--line-height: 1.4;
--text-3xl: 1.875rem;
--text-3xl--line-height: 1.3;
--text-4xl: 2.25rem;
--text-4xl--line-height: 1.2;
--text-5xl: 3rem;
--text-5xl--line-height: 1.2;
--text-6xl: 4rem;
--text-6xl--line-height: 1.2;
--text-7xl: 5rem;
--text-7xl--line-height: 1.1;
--text-8xl: 6rem;
--text-8xl--line-height: 1.1;
/* Spacing ================================================================ */
--spacing: 4px;
/* Breakpoints ============================================================ */
--breakpoint-2xs: 23.4375rem; /* 375px */
--breakpoint-xs: 25.875rem; /* 414px */
/* Easings ================================================================ */
--ease-in-out-expo: cubic-bezier(0.15, 0, 0, 1);
--ease-in-squish: cubic-bezier(0.5, -0.3, 0.1, 1.5);
}
/* Utilities ================================================================ */
@utility bg-gradient-radial-darker {
background-image: radial-gradient(
circle at 80% 20%,
var(--color-primary-900),
var(--color-primary-950)
);
}
@utility bg-gradient-radial-dark {
background-image: radial-gradient(
circle at 80% 20%,
var(--color-primary-800),
var(--color-primary-950)
);
}
@utility bg-gradient-radial-purple {
background-image: radial-gradient(
circle at 80% 20%,
var(--color-primary-500),
var(--color-primary-800)
);
}
@utility center-absolute {
left: 50%;
top: 50%;
translate: -50% -50%;
}