107 lines
4.3 KiB
CSS
107 lines
4.3 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--spacing-gutter: 20px;
|
|
--spacing-container-margin: 24px;
|
|
|
|
/* Intermediate color shades used across the app. Tailwind's default palette
|
|
only ships shades in steps of 100, but the UI references finer steps
|
|
(e.g. -450, -650, -755, -505). Each is interpolated in OKLab from its
|
|
adjacent standard shade(s) so utilities like `bg-purple-650` /
|
|
`text-slate-450` resolve to a real color instead of generating nothing
|
|
(which left e.g. the "Add Team Member" button's white text on a
|
|
transparent background — invisible). */
|
|
|
|
/* slate */
|
|
--color-slate-55: color-mix(in oklab, #f8fafc 90%, #f1f5f9);
|
|
--color-slate-150: color-mix(in oklab, #f1f5f9, #e2e8f0);
|
|
--color-slate-350: color-mix(in oklab, #cbd5e1, #94a3b8);
|
|
--color-slate-405: color-mix(in oklab, #94a3b8 95%, #64748b);
|
|
--color-slate-450: color-mix(in oklab, #94a3b8, #64748b);
|
|
--color-slate-455: color-mix(in oklab, #94a3b8 45%, #64748b);
|
|
--color-slate-505: color-mix(in oklab, #64748b 95%, #475569);
|
|
--color-slate-650: color-mix(in oklab, #475569, #334155);
|
|
--color-slate-750: color-mix(in oklab, #334155, #1e293b);
|
|
--color-slate-850: color-mix(in oklab, #1e293b, #0f172a);
|
|
|
|
/* zinc */
|
|
--color-zinc-55: color-mix(in oklab, #fafafa 90%, #f4f4f5);
|
|
--color-zinc-150: color-mix(in oklab, #f4f4f5, #e4e4e7);
|
|
--color-zinc-205: color-mix(in oklab, #e4e4e7 95%, #d4d4d8);
|
|
--color-zinc-405: color-mix(in oklab, #a1a1aa 95%, #71717a);
|
|
--color-zinc-450: color-mix(in oklab, #a1a1aa, #71717a);
|
|
--color-zinc-455: color-mix(in oklab, #a1a1aa 45%, #71717a);
|
|
--color-zinc-505: color-mix(in oklab, #71717a 95%, #52525b);
|
|
--color-zinc-550: color-mix(in oklab, #71717a, #52525b);
|
|
--color-zinc-555: color-mix(in oklab, #71717a 45%, #52525b);
|
|
--color-zinc-650: color-mix(in oklab, #52525b, #3f3f46);
|
|
--color-zinc-655: color-mix(in oklab, #52525b 45%, #3f3f46);
|
|
--color-zinc-750: color-mix(in oklab, #3f3f46, #27272a);
|
|
--color-zinc-755: color-mix(in oklab, #3f3f46 45%, #27272a);
|
|
--color-zinc-805: color-mix(in oklab, #27272a 95%, #18181b);
|
|
|
|
/* stone */
|
|
--color-stone-750: color-mix(in oklab, #44403c, #292524);
|
|
|
|
/* purple */
|
|
--color-purple-250: color-mix(in oklab, #e9d5ff, #d8b4fe);
|
|
--color-purple-650: color-mix(in oklab, #9333ea, #7e22ce);
|
|
--color-purple-750: color-mix(in oklab, #7e22ce, #6b21a8);
|
|
--color-purple-755: color-mix(in oklab, #7e22ce 45%, #6b21a8);
|
|
--color-purple-955: color-mix(in oklab, #3b0764 90%, black);
|
|
|
|
/* emerald */
|
|
--color-emerald-250: color-mix(in oklab, #a7f3d0, #6ee7b7);
|
|
--color-emerald-450: color-mix(in oklab, #34d399, #10b981);
|
|
--color-emerald-455: color-mix(in oklab, #34d399 45%, #10b981);
|
|
--color-emerald-505: color-mix(in oklab, #10b981 95%, #059669);
|
|
--color-emerald-650: color-mix(in oklab, #059669, #047857);
|
|
--color-emerald-750: color-mix(in oklab, #047857, #065f46);
|
|
|
|
/* rose */
|
|
--color-rose-505: color-mix(in oklab, #f43f5e 95%, #e11d48);
|
|
--color-rose-650: color-mix(in oklab, #e11d48, #be123c);
|
|
--color-rose-750: color-mix(in oklab, #be123c, #9f1239);
|
|
|
|
/* amber */
|
|
--color-amber-750: color-mix(in oklab, #b45309, #92400e);
|
|
--color-amber-955: color-mix(in oklab, #451a03 90%, black);
|
|
|
|
/* indigo */
|
|
--color-indigo-650: color-mix(in oklab, #4f46e5, #4338ca);
|
|
|
|
/* orange */
|
|
--color-orange-850: color-mix(in oklab, #9a3412, #7c2d12);
|
|
}
|
|
|
|
/* Custom scrollbar utility */
|
|
@layer utilities {
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-slate-350, #cbd5e1);
|
|
border-radius: 20px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-slate-450, #94a3b8);
|
|
}
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-slate-350, #cbd5e1) transparent;
|
|
}
|
|
}
|