shared.css•13.1 kB
@import "tailwindcss";
@import "@fontsource-variable/inter/slnt.css";
@plugin "tailwind-scrollbar" {
nocompatible: true;
}
@plugin "@tailwindcss/forms" {
strategy: "class";
}
/* Apply the dark mode when the .dark class is present */
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* Colors */
--color-red-100: var(--red-100);
--color-red-200: var(--red-200);
--color-red-300: var(--red-300);
--color-red-400: var(--red-400);
--color-red-500: var(--red-500);
--color-red-700: var(--red-700);
--color-red-900: var(--red-900);
--color-purple-100: var(--purple-100);
--color-purple-200: var(--purple-200);
--color-purple-500: var(--purple-500);
--color-purple-700: var(--purple-700);
--color-purple-900: var(--purple-900);
--color-blue-100: var(--blue-100);
--color-blue-200: var(--blue-200);
--color-blue-500: var(--blue-500);
--color-blue-700: var(--blue-700);
--color-blue-900: var(--blue-900);
--color-cyan-200: var(--cyan-200);
--color-cyan-500: var(--cyan-500);
--color-cyan-700: var(--cyan-700);
--color-cyan-900: var(--cyan-900);
--color-green-100: var(--green-100);
--color-green-200: var(--green-200);
--color-green-500: var(--green-500);
--color-green-700: var(--green-700);
--color-green-900: var(--green-900);
--color-yellow-50: var(--yellow-50);
--color-yellow-100: var(--yellow-100);
--color-yellow-200: var(--yellow-200);
--color-yellow-500: var(--yellow-500);
--color-yellow-700: var(--yellow-700);
--color-yellow-900: var(--yellow-900);
--color-neutral-1: var(--neutral-1);
--color-neutral-2: var(--neutral-2);
--color-neutral-3: var(--neutral-3);
--color-neutral-4: var(--neutral-4);
--color-neutral-5: var(--neutral-5);
--color-neutral-6: var(--neutral-6);
--color-neutral-7: var(--neutral-7);
--color-neutral-8: var(--neutral-8);
--color-neutral-9: var(--neutral-9);
--color-neutral-10: var(--neutral-10);
--color-neutral-11: var(--neutral-11);
--color-neutral-12: var(--neutral-12);
--color-background-brand: var(--background-brand);
--color-background-primary: var(--background-primary);
--color-background-secondary: var(--background-secondary);
--color-background-tertiary: var(--background-tertiary);
--color-background-highlight: var(--background-highlight);
--color-background-success: var(--background-success);
--color-background-warning: var(--background-warning);
--color-background-error: var(--background-error);
--color-background-errorSecondary: var(--background-errorSecondary);
--color-content-primary: var(--content-primary);
--color-content-secondary: var(--content-secondary);
--color-content-tertiary: var(--content-tertiary);
--color-content-accent: var(--content-accent);
--color-content-success: var(--content-success);
--color-content-warning: var(--content-warning);
--color-content-error: var(--content-error);
--color-content-errorSecondary: var(--content-errorSecondary);
--color-content-link: var(--content-link);
--color-chart-line-1: var(--chart-line-1);
--color-chart-line-2: var(--chart-line-2);
--color-chart-line-3: var(--chart-line-3);
--color-chart-line-4: var(--chart-line-4);
--color-chart-line-5: var(--chart-line-5);
--color-chart-line-6: var(--chart-line-6);
--color-chart-line-7: var(--chart-line-7);
--color-chart-line-8: var(--chart-line-8);
--color-border-transparent: var(--border-transparent);
--color-border-selected: var(--border-selected);
--color-macosScrollbar-thumb: var(--macosScrollbar-thumb);
--color-macosScrollbar-thumb-hover: var(--macosScrollbar-thumb-hover);
--color-macosScrollbar-track: var(--macosScrollbar-track);
--color-util-accent: var(--accent);
--color-util-info: var(--info);
--color-util-success: var(--success);
--color-util-warning: var(--warning);
--color-util-error: var(--error);
--color-util-brand-purple: var(--brand-purple);
--color-util-brand-red: var(--brand-red);
--color-util-brand-yellow: var(--brand-yellow);
/* Font families */
--font-display: "GT America", "Inter Variable", ui-sans-serif, system-ui,
-apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue",
"Arial", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji", sans-serif;
/* Animations */
--animate-blink: blink 2s linear infinite;
--animate-bounceIn: bounceIn 0.5s ease-in-out;
--animate-highlight: highlight 1s;
--animate-highlightBorder: highlightBorder 1s;
--animate-loading: fadeIn 1.2s, shimmer 1.2s infinite;
--animate-fadeIn: fadeIn 1s;
--animate-fadeInFromLoading: fadeIn 0.3s;
--animate-vhs: vhs 0.5s linear 0.25s 1 normal forwards;
--animate-blinkFill: blinkFill 1.2s ease-in-out infinite;
--animate-rotate: fadeIn 0.8s, rotate 0.75s linear infinite;
--animate-dashLength: dashLength 1.5s ease-in-out infinite;
/* Keyframes */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes dashLength {
0% {
stroke-dasharray: 1 99;
}
50% {
stroke-dasharray: 35 65;
}
100% {
stroke-dasharray: 1 99;
}
}
@keyframes blinkFill {
0% {
fill-opacity: 1;
opacity: 1;
}
50% {
fill-opacity: 0.75;
opacity: 0.75;
}
100% {
fill-opacity: 1;
opacity: 1;
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes vhs {
0% {
height: 0%;
transform: skew(-90deg);
margin-left: -2rem;
}
100% {
height: 100%;
transform: skew(0deg);
margin-right: 0px;
}
}
@keyframes bounceIn {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-0.5rem);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-0.25rem);
}
100% {
transform: translateY(0px);
}
}
@keyframes highlight {
0% {
background-color: var(--background-secondary);
}
50% {
background-color: var(--background-highlight);
}
100% {
background-color: var(--background-secondary);
}
}
@keyframes highlightBorder {
0% {
background-color: var(--border-transparent);
}
50% {
background-color: var(--content-success);
}
100% {
background-color: var(--border-transparent);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes indeterminateProgressBar {
0% {
transform: none;
}
100% {
transform: translateX(-1rem);
}
}
}
:root {
--red-100: rgb(252, 215, 203);
--red-200: rgb(255, 202, 193);
--red-300: rgb(252, 165, 165);
--red-400: rgb(253, 76, 65);
--red-500: rgb(238, 52, 47);
--red-700: rgb(168, 21, 21);
--red-900: rgb(107, 33, 31);
--purple-100: rgb(241, 200, 233);
--purple-200: rgb(232, 180, 220);
--purple-500: rgb(141, 38, 118);
--purple-700: rgb(86, 0, 83);
--purple-900: rgb(113, 36, 96);
--blue-100: rgb(204, 222, 250);
--blue-200: rgb(177, 202, 240);
--blue-500: rgb(7, 78, 232);
--blue-700: rgb(33, 34, 181);
--blue-900: rgb(0, 43, 153);
--cyan-200: rgb(170, 227, 239);
--cyan-500: rgb(7, 192, 232);
--cyan-700: rgb(0, 155, 221);
--cyan-900: rgb(15, 89, 105);
--green-100: rgb(203, 237, 182);
--green-200: rgb(180, 236, 146);
--green-500: rgb(79, 176, 20);
--green-700: rgb(34, 137, 9);
--green-900: rgb(44, 83, 20);
--yellow-50: rgb(254, 252, 232);
--yellow-100: rgb(250, 228, 171);
--yellow-200: rgb(230, 226, 168);
--yellow-500: rgb(243, 176, 28);
--yellow-700: rgb(213, 113, 21);
--yellow-900: rgb(109, 82, 23);
--neutral-1: rgb(222, 226, 234);
--neutral-2: rgb(204, 206, 211);
--neutral-3: rgb(174, 177, 184);
--neutral-4: rgb(151, 154, 164);
--neutral-5: rgb(133, 136, 147);
--neutral-6: rgb(118, 121, 131);
--neutral-7: rgb(103, 106, 116);
--neutral-8: rgb(88, 92, 101);
--neutral-9: rgb(73, 76, 84);
--neutral-10: rgb(57, 60, 66);
--neutral-11: rgb(41, 43, 48);
--neutral-12: rgb(24, 25, 28);
--accent: rgb(63, 82, 149);
--info: rgb(7, 191, 232);
--success: var(--green-500);
--warning: var(--yellow-500);
--error: var(--red-500);
--brand-purple: var(--purple-500);
--brand-red: var(--red-500);
--brand-yellow: var(--yellow-500);
--chart-line-1: rgb(31, 119, 180);
--chart-line-2: rgb(255, 127, 14);
--chart-line-3: rgb(44, 160, 44);
--chart-line-4: rgb(214, 39, 40);
--chart-line-5: rgb(148, 103, 189);
--chart-line-6: rgb(140, 86, 75);
--chart-line-7: rgb(227, 119, 194);
--chart-line-8: rgb(188, 189, 34);
}
html.light {
--background-brand: rgb(249, 247, 238);
--background-primary: rgb(243, 240, 237);
--background-secondary: rgb(253, 252, 250);
--background-tertiary: rgb(240, 238, 235);
--background-highlight: var(--yellow-50);
--background-success: var(--green-100);
--background-warning: var(--yellow-100);
--background-error: var(--red-100);
--background-errorSecondary: var(--red-200);
--content-primary: rgb(42, 40, 37);
--content-secondary: rgb(120, 118, 113);
--content-tertiary: rgb(120, 118, 113);
--content-accent: rgb(48, 106, 207);
--content-success: var(--green-700);
--content-warning: var(--yellow-900);
--content-error: var(--red-700);
--content-errorSecondary: var(--red-500);
--content-link: var(--blue-700);
--border-transparent: rgba(33, 34, 30, 0.14);
--border-selected: rgb(30, 28, 25);
--macosScrollbar-thumb: rgb(193, 193, 193);
--macosScrollbar-thumb-hover: rgb(125, 125, 125);
--macosScrollbar-track: rgb(250, 250, 250);
}
html.dark {
--background-brand: var(--background-primary);
--background-primary: rgb(30, 28, 26);
--background-secondary: rgb(42, 40, 37);
--background-tertiary: rgb(60, 58, 55);
--background-highlight: var(--yellow-900);
--background-success: var(--green-900);
--background-warning: var(--yellow-900);
--background-error: var(--red-900);
--background-errorSecondary: var(--red-700);
--content-primary: rgb(255, 255, 255);
--content-secondary: rgb(185, 177, 170);
--content-tertiary: rgb(143, 135, 128);
--content-accent: rgb(99, 168, 248);
--content-success: var(--green-200);
--content-warning: var(--yellow-200);
--content-error: var(--red-200);
--content-errorSecondary: var(--red-400);
--content-link: var(--blue-200);
--border-transparent: rgba(163, 156, 148, 0.3);
--border-selected: rgb(225, 215, 205);
--macosScrollbar-thumb: rgb(107, 107, 107);
--macosScrollbar-thumb-hover: rgb(147, 147, 147);
--macosScrollbar-track: rgb(43, 43, 43);
}
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg font-semibold;
}
h4 {
@apply text-base font-semibold;
}
h5 {
@apply text-sm font-semibold;
}
/* Don't show arrows on number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
* {
@apply border-border-transparent;
}
html,
body {
@apply bg-background-primary;
}
strong {
@apply font-semibold;
}
/* Restore the pre-Tailwind 4 cursor style */
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}
/* Position the toast close button on the top right corner so that it draws less attention */
html [data-sonner-toaster][dir="ltr"] {
--toast-close-button-start: unset;
--toast-close-button-end: 0;
--toast-close-button-transform: translate(35%, -35%);
}
/* Use the colors from our custom palette for toasts */
html [data-sonner-toast],
html [data-sonner-toast] [data-close-button] {
@apply bg-background-secondary
border-background-tertiary
text-content-primary;
}
html [data-sonner-toast][data-type="success"],
html [data-sonner-toast][data-type="success"] [data-close-button] {
@apply bg-green-50
border-green-100
text-green-700
dark:bg-green-950
dark:border-green-900
dark:text-green-200;
}
html [data-sonner-toast][data-type="error"],
html [data-sonner-toast][data-type="error"] [data-close-button] {
@apply bg-red-50
border-red-100
text-red-700
dark:bg-red-950
dark:border-red-900
dark:text-red-200;
}
/* Used for elements that need to fade in to a specific opacity
this can't be defined in the tailwind config because you cannot interpolate
variables in tailwind keyframes.
*/
@keyframes fadeInToVar {
from {
opacity: 0;
}
to {
opacity: var(--final-opacity, 1);
}
}
@layer utilities {
.animate-fadeInToVar {
animation: fadeInToVar 0.3s ease-out forwards;
}
.scrollbar {
@apply scrollbar-thin scrollbar-thumb-neutral-1 scrollbar-corner-background-secondary
scrollbar-thumb-rounded dark:scrollbar-thumb-neutral-8;
}
}