default.css

/* Radix light colors: https://github.com/radix-ui/colors/blob/main/src/light.ts */
/* Radix dark colors: https://github.com/radix-ui/colors/blob/main/src/dark.ts */

/* Font and Radius Variables */
:root {
    --monospace-font: var(--marimo-monospace-font, "Fira Mono", monospace);
    --text-font: var(--marimo-text-font, "PT Sans", sans-serif);
    --heading-font: var(--marimo-heading-font, "Lora", serif);
    --radius: 8px;
}

/* Base colors. */
:root {
    --background: light-dark(hsl(0deg 0% 100%), hsl(150deg 7.7% 10.2%));
    --foreground: light-dark(hsl(222.2deg 47.4% 11.2%), hsl(155deg 7% 93%));
    --muted: light-dark(hsl(210deg 40% 96.1%), hsl(180deg 14% 1%));
    --muted-foreground: light-dark(
        hsl(215.4deg 16.3% 46.9%),
        hsl(155deg 5% 68.3%)
    );
    --popover: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
    --popover-foreground: light-dark(
        hsl(222.2deg 47.4% 11.2%),
        hsl(155deg 5% 68.3%)
    );
    --card: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
    --card-foreground: light-dark(
        hsl(222.2deg 47.4% 11.2%),
        hsl(155deg 5% 76.3%)
    );
    --border: light-dark(hsl(214.3deg 31.8% 91.4%), hsl(153deg 3.7% 24.2%));
    --input: light-dark(hsl(0deg 0% 64%), hsl(154deg 3.3% 28.7%));
    --primary: light-dark(hsl(208deg 93.5% 47.4%), hsl(192deg 59.8% 39%));
    --primary-foreground: light-dark(hsl(210deg 40% 98%), hsl(190deg 80% 84%));
    --secondary: light-dark(hsl(210deg 40% 96.1%), hsl(155deg 7% 93%));
    --secondary-foreground: light-dark(
        hsl(222.2deg 47.4% 11.2%),
        hsl(151deg 5.5% 15.2%)
    );
    --accent: light-dark(hsl(209deg 100% 96.5%), hsl(192deg 56.6% 26.5%));
    --accent-foreground: light-dark(hsl(211deg 90% 42%), hsl(190deg 80% 84%));
    --ring: hsl(215deg 20.2% 65.1%);
}

/* Semantic colors. */
:root {
    --destructive: hsl(0deg 100% 70%);
    --destructive-foreground: hsl(210deg 40% 98%);
    --error: hsl(0deg 77% 64%);
    --error-foreground: hsl(210deg 40% 98%);
    --success: hsl(130deg 100% 70%);
    --success-foreground: hsl(210deg 40% 98%);
    --action: hsl(52deg 96.8% 82%);
    --action-hover: hsl(54deg 100% 86.7%);
    --action-foreground: hsl(42deg 100% 29%);
    --link: light-dark(hsl(211deg 90% 42%), hsl(211deg 90% 62%));
    --link-visited: light-dark(hsl(272deg 51% 54%), hsl(272deg 51% 74%));
    --stale: hsl(42deg 56% 44% / 25%);
}

/* Base shadows. */
:root {
    --base-shadow: light-dark(hsl(0deg 0% 85% / 40%), hsla(0deg 0% 36% / 60%));
    --base-shadow-darker: light-dark(
        hsl(0deg 0% 50% / 40%),
        hsl(0deg 0% 50% / 60%)
    );
    --base-shadow-opacity: 5%;
}