-
-
Notifications
You must be signed in to change notification settings - Fork 622
Expand file tree
/
Copy pathui.css
More file actions
203 lines (182 loc) · 7.62 KB
/
ui.css
File metadata and controls
203 lines (182 loc) · 7.62 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
@theme inline {
--color-primary: var(--theme-color-primary);
--color-primary-border: color-mix(in oklch, var(--color-primary) 100%, black 20%);
--color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, black 30%);
--color-primary-gap: color-mix(in oklch, var(--color-primary) 100%, black 50%);
--color-success: var(--theme-color-success);
--color-gray-50: var(--theme-color-gray-50);
--color-gray-100: var(--theme-color-gray-100);
--color-gray-150: var(--theme-color-gray-150);
--color-gray-200: var(--theme-color-gray-200);
--color-gray-300: var(--theme-color-gray-300);
--color-gray-400: var(--theme-color-gray-400);
--color-gray-500: var(--theme-color-gray-500);
--color-gray-600: var(--theme-color-gray-600);
--color-gray-700: var(--theme-color-gray-700);
--color-gray-800: var(--theme-color-gray-800);
--color-gray-850: var(--theme-color-gray-850);
--color-gray-900: var(--theme-color-gray-900);
--color-gray-925: var(--theme-color-gray-925);
--color-gray-950: var(--theme-color-zinc-950);
--color-volt: oklch(93.86% 0.2018 122.24);
--color-body-bg: var(--theme-color-body-bg);
--color-body-border: var(--theme-color-body-border);
--color-content-bg: var(--theme-color-content-bg);
--color-content-border: var(--theme-color-content-border);
--color-global-header-bg: var(--theme-color-global-header-bg);
--color-progress-bar: var(--theme-color-progress-bar);
--color-focus-outline: var(--theme-color-focus-outline);
--color-ui-accent-bg: var(--theme-color-ui-accent-bg);
--color-ui-accent-text: var(--theme-color-ui-accent-text);
--color-switch-bg: var(--theme-color-switch-bg);
/* Custom color shades for all Tailwind color families */
--color-slate-150: oklch(0.9485 0.01 251.702);
--color-slate-850: oklch(0.236 0.041 263.801);
--color-slate-925: oklch(0.1945 0.042 265.573);
--color-zinc-150: oklch(0.956 0.0022 286.32);
--color-zinc-850: oklch(0.236 0.006 286.015);
--color-zinc-925: oklch(0.1982 0.0042 285.73);
--color-neutral-150: oklch(0.946 0 0);
--color-neutral-850: oklch(0.236 0 0);
--color-neutral-925: oklch(0.1947 0 0);
--color-stone-150: oklch(0.9465 0.002 77.571);
--color-stone-850: oklch(0.236 0.006 48.043);
--color-stone-925: oklch(0.2042 0.0057 55.203);
--color-red-150: oklch(0.9105 0.047 18.026);
--color-red-850: oklch(0.42 0.159 26.311);
--color-red-925: oklch(0.3724 0.1326 25.778);
--color-orange-150: oklch(0.9275 0.057 72.931);
--color-orange-850: oklch(0.439 0.14 37.738);
--color-orange-925: oklch(0.3837 0.1155 37.845);
--color-amber-150: oklch(0.943 0.0895 95.682);
--color-amber-850: oklch(0.444 0.125 46.053);
--color-amber-925: oklch(0.3909 0.1060 45.858);
--color-yellow-150: oklch(0.959 0.1 102.367);
--color-yellow-850: oklch(0.449 0.105 59.808);
--color-yellow-925: oklch(0.3979 0.0900 57.042);
--color-lime-150: oklch(0.9525 0.097 123.325);
--color-lime-850: oklch(0.429 0.113 131.296);
--color-lime-925: oklch(0.3826 0.0960 131.242);
--color-green-150: oklch(0.9435 0.064 156.369);
--color-green-850: oklch(0.421 0.107 151.932);
--color-green-925: oklch(0.3713 0.0899 152.603);
--color-emerald-150: oklch(0.9275 0.0725 163.601);
--color-emerald-850: oklch(0.405 0.086 167.427);
--color-emerald-925: oklch(0.3582 0.0726 169.341);
--color-teal-150: oklch(0.9315 0.0735 180.614);
--color-teal-850: oklch(0.412 0.071 189.308);
--color-teal-925: oklch(0.3674 0.0601 188.891);
--color-cyan-150: oklch(0.9365 0.0625 204.215);
--color-cyan-850: oklch(0.424 0.078 225.706);
--color-cyan-925: oklch(0.3816 0.0676 227.696);
--color-sky-150: oklch(0.926 0.042 233.863);
--color-sky-850: oklch(0.417 0.1 240.833);
--color-sky-925: oklch(0.3743 0.0859 241.124);
--color-blue-150: oklch(0.907 0.0455 254.857);
--color-blue-850: oklch(0.402 0.173 265.587);
--color-blue-925: oklch(0.3624 0.1366 265.935);
--color-indigo-150: oklch(0.9 0.0495 273.414);
--color-indigo-850: oklch(0.379 0.17 277.532);
--color-indigo-925: oklch(0.3416 0.1348 279.158);
--color-violet-150: oklch(0.9185 0.043 293.936);
--color-violet-850: oklch(0.406 0.211 293.252);
--color-violet-925: oklch(0.3634 0.1808 293.291);
--color-purple-150: oklch(0.924 0.048 306.939);
--color-purple-850: oklch(0.41 0.197 304.356);
--color-purple-925: oklch(0.3656 0.1714 304.599);
--color-fuchsia-150: oklch(0.9275 0.0565 319.236);
--color-fuchsia-850: oklch(0.427 0.191 325.102);
--color-fuchsia-925: oklch(0.3825 0.1642 325.620);
--color-pink-150: oklch(0.9235 0.0445 342.745);
--color-pink-850: oklch(0.434 0.17 3.114);
--color-pink-925: oklch(0.3868 0.1455 2.557);
--color-rose-150: oklch(0.9165 0.044 11.291);
--color-rose-850: oklch(0.433 0.174 11.985);
--color-rose-925: oklch(0.3862 0.1498 10.413);
/* Temp */
--color-dark-100: #dfe1e5;
--color-dark-150: #bbbdc0;
--color-dark-175: #93979a;
--color-dark-200: #5f6163;
--color-dark-250: #555759;
--color-dark-275: #515356;
--color-dark-300: #4e5157;
--color-dark-350: #43454a;
--color-dark-400: #414245;
--color-dark-500: #404143;
--color-dark-550: #3b3f41;
--color-dark-575: #393b40;
--color-dark-600: #2b2d30;
--color-dark-650: #242628;
--color-dark-700: #212223;
--color-dark-750: #22242a;
--color-dark-800: #1e1f22;
--color-dark-900: #171717;
--color-dark-950: #161616;
--color-dark-975: #131314;
--color-dark-blue-100: #2870F5;
--color-dark-blue-125: #1e68f1;
--color-dark-blue-150: #1f67ec;
--color-dark-blue-175: #1560ec;
--color-dark-blue-200: #2a4270;
--color-orange-light: #fcc062;
--color-orange: #f5a82f;
--color-orange-dark: #e08a1e;
--color-pink-light: #ff5ba7;
--color-pink: #ff269e;
--color-pink-dark: #e00095;
--color-purple-light: #e0b7ff;
--color-purple: #c471ed;
--color-purple-dark: #a855cd;
--color-yellow-light: #ffffe0;
--color-yellow: #fbfab0;
--color-yellow-dark: #e8dc1e;
--color-amber: #ffd700;
--color-green: #00ff00;
--color-red: #ff0000;
--color-dark-red: #900000;
--color-blue: #0000ff;
--color-gray: #808080;
--color-dark-gray: #404040;
}
.dark {
@theme inline {
--color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
--color-success: var(--color-green-500);
--color-gray-950: hsl(240deg 7% 8%);
}
}
@theme {
--text-4xs: 0.4rem;
--text-3xs: 0.5rem;
--text-2xs: 0.7rem;
--text-xs: 0.825rem;
--tracking-tight: -0.01em;
--breakpoint-xs: 30rem;
--breakpoint-2xs: 20rem;
--breakpoint-3xs: 15rem;
--shadow-ui-xs: 0px 1px 3px -1px rgba(0,0,0,0.10);
--shadow-ui-sm: 0px 2px 3px -2px rgba(0,0,0,0.15);
--shadow-ui-md: 0px 2px 4px -2px rgba(0,0,0,0.37);
--shadow-ui-lg: 0px 4px 7px -4px rgba(0,0,0,0.15);
--shadow-ui-xl: 0px 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
--animate-wiggle: wiggle 200ms ease-in-out infinite;
@keyframes wiggle {
0%,
100% {
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
}
}
:root {
--animation-timing-function-fast-out-slow-in: cubic-bezier(.4,0,.2,1);
/* Custom value because gray-100 is too light and gray-200 is too dark, e.g. Bard active buttons */
--color-button-active: hsl(from var(--color-gray-300) h s l / 0.45);
}
.dark {
--color-button-active: hsl(from var(--color-gray-700) h s l / 0.45);
}
@custom-variant with-contrast (&:where([data-contrast="increased"] *));