-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathtailwind.css
More file actions
118 lines (115 loc) · 4.63 KB
/
tailwind.css
File metadata and controls
118 lines (115 loc) · 4.63 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
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* Base */
--color-mc-bg: oklch(1 0 0); /* bg-white */
--color-mc-fg: oklch(0.2 0 0); /* text-slate-900 */
--color-mc-pri: oklch(0.62 0.21 260); /* bg-blue-600 */
--color-mc-pri-fg: oklch(1 0 0); /* text-white */
--color-mc-brd: oklch(0.87 0.01 260); /* border-slate-200 */
--color-mc-elev: oklch(1 0 0); /* bg-white */
--color-mc-mut: oklch(0.6 0 0); /* text-slate-600 */
--color-mc-mut-fg: oklch(0.55 0 0); /* text-slate-500 */
--color-mc-ring: var(--color-mc-pri); /* focus:ring-blue-600 */
--duration-mc-norm: 300ms; /* duration-300 */
--spacing-mc-1: 0.25rem; /* gap-1 */
--spacing-mc-2: 0.5rem; /* gap-2 */
--spacing-mc-3: 0.75rem; /* gap-3 */
--spacing-mc-4: 1rem; /* gap-4 */
/* Button Component*/
--color-mc-btn: var(--color-mc-pri); /* bg-blue-600 */
--color-mc-btn-fg: var(--color-mc-pri-fg); /* text-white */
--radius-mc-btn: 0.375rem; /* rounded-md */
--spacing-mc-btn-px: 1rem; /* px-4 */
--spacing-mc-btn-py: 0.5rem; /* py-2 */
--spacing-mc-btn-gap: 0.25rem; /* gap-1 */
--size-mc-btn-ic: 2rem; /* w-8 h-8 */
/* Sender Component */
--color-mc-sd-bg: var(--color-mc-elev); /* bg-white */
--color-mc-sd-brd: var(--color-mc-brd); /* border-slate-200 */
--color-mc-sd-mut: var(--color-mc-mut-fg); /* text-slate-500 */
--color-mc-sd-fg: var(--color-mc-fg); /* text-slate-900 */
--radius-mc-sd: 0.75rem; /* rounded-xl */
--radius-mc-sd-el: 0.5rem; /* rounded-lg */
--radius-mc-full: 9999px; /* rounded-full */
--shadow-mc-sd: 0 1px 3px 0 rgb(0 0 0 / 0.1); /* shadow-sm */
--shadow-mc-el: var(--shadow-mc-pt-el); /* shadow-xl */
--h-mc-sd-max: 8rem; /* max-h-32 */
--h-mc-sd-drp-max: 16rem; /* max-h-64 */
--spacing-mc-sd-p: 1rem; /* p-4 */
--spacing-mc-sd-pt: 1rem; /* pt-4 */
--spacing-mc-sd-inner-gap: var(--spacing-mc-2); /* gap-2 */
/* List Component */
--color-mc-li-act: var(--color-mc-pri); /* bg-blue-600 */
--color-mc-li-act-fg: var(--color-mc-pri-fg); /* text-white */
--color-mc-li-hv: oklch(0.96 0 0); /* hover:bg-slate-50 */
--spacing-mc-li-py: 0.5rem; /* py-2 */
--spacing-mc-li-px: 1rem; /* px-4 */
--spacing-mc-li-gap: 0.5rem; /* gap-2 */
--h-mc-li-max: 16rem; /* max-h-64 */
/* Prompt Component */
--color-mc-pt-bg: var(--color-mc-elev); /* bg-white */
--color-mc-pt-brd: var(--color-mc-brd); /* border-slate-200 */
--color-mc-pt-fg: var(--color-mc-fg); /* text-slate-900 */
--color-mc-pt-mut: var(--color-mc-mut-fg); /* text-slate-500 */
--radius-mc-pt: 0.5rem; /* rounded-lg */
--shadow-mc-pt-el: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* shadow-xl */
--duration-mc-pt: var(--duration-mc-norm); /* duration-300 */
--spacing-mc-pt-px: 1rem; /* px-4 */
--spacing-mc-pt-py: 0.75rem; /* py-3 */
--spacing-mc-pt-gap: 0.5rem; /* gap-2 */
--spacing-mc-pt-px-xs: 0.75rem; /* px-3 */
--spacing-mc-pt-py-xs: 0.5rem; /* py-2 */
--spacing-mc-pt-px-sm: 1rem; /* px-4 */
--spacing-mc-pt-py-sm: 0.625rem; /* py-2.5 */
--spacing-mc-pt-gap-sm: 0.375rem; /* gap-1.5 */
--spacing-mc-pt-px-md: 1.25rem; /* px-5 */
--spacing-mc-pt-py-md: 0.875rem; /* py-3.5 */
--spacing-mc-pt-px-lg: 1.5rem; /* px-6 */
--spacing-mc-pt-py-lg: 1rem; /* py-4 */
--spacing-mc-pt-gap-lg: 0.625rem; /* gap-2.5 */
--spacing-mc-pt-layout-gap: 1rem; /* gap-4 */
--spacing-mc-pt-layout-gap-xs: 0.5rem; /* gap-2 */
--spacing-mc-pt-layout-gap-sm: 0.75rem; /* gap-3 */
--spacing-mc-pt-layout-gap-lg: 1.25rem; /* gap-5 */
/* FileUpload Component */
--color-mc-fu-fg: oklch(0.6 0 0); /* text-gray-500 */
--color-mc-fu-hv: oklch(0.45 0 0); /* hover:text-gray-700 */
/* Global */
--color-mc-sb: var(--color-mc-brd); /* border-slate-200 */
--color-mc-sb-hv: oklch(0.7 0.01 260); /* bg-slate-300 */
--w-mc-sb: 0.375rem; /* w-1.5 */
}
.dark {
@theme {
--color-mc-bg: oklch(0.15 0.01 260); /* bg-slate-900 (approx) */
--color-mc-fg: oklch(0.9 0 0); /* text-slate-100 */
--color-mc-elev: oklch(0.13 0 0); /* bg-slate-950 (approx) */
--color-mc-brd: oklch(0.3 0.01 260); /* border-slate-700 */
--color-mc-sb-hv: oklch(0.5 0.01 260);
--shadow-mc-pt-el:
0 10px 15px -3px rgb(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.05);
}
}
@layer components {
.bg-mc-btn-hv {
background-color: color-mix(
in oklab,
var(--color-mc-pri) 90%,
transparent
); /* hover:bg-blue-600/90 */
}
.custom-scrollbar {
scrollbar-gutter: stable;
&::-webkit-scrollbar {
width: var(--w-mc-sb);
}
&::-webkit-scrollbar-thumb {
border-radius: 9999px;
background-color: var(--color-mc-sb);
&:hover {
background-color: var(--color-mc-sb-hv);
}
}
}
}