chadtmiller.com/pds.js

Switch repository

Loading…

@import "@fontsource-variable/plus-jakarta-sans/index.css";
@import "@fontsource-variable/geist-mono/index.css";
@import "tailwindcss";

/* The semantic tokens the UI is built on all resolve to raw color vars, so a
   theme is just a different set of those vars. Light is the default and the
   system's dark preference swaps them, unless the account's stored appearance
   choice pins one palette via data-theme on the root element. Identifiers the
   protocol mints read in mono; motion respects reduced-motion throughout. */

/* The `dark:` variant follows the same resolution as the palettes: an
   explicit data-theme wins, otherwise the system preference decides. */
@custom-variant dark {
  &:where([data-theme="dark"], [data-theme="dark"] *) {
    @slot;
  }
  @media (prefers-color-scheme: dark) {
    &:where(
        :root:not([data-theme="light"]),
        :root:not([data-theme="light"]) *
      ) {
      @slot;
    }
  }
}

@theme inline {
  --color-background: var(--background);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-input: var(--input);

  --color-foreground: var(--foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-faint: var(--faint);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent-foreground: var(--accent-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-dim: var(--destructive-dim);
  --color-success: var(--success);
  --color-success-dim: var(--success-dim);
  --color-warning: var(--warning);
  --color-warning-dim: var(--warning-dim);

  --color-ring: var(--ring);
  --color-beam-from: var(--beam-from);
  --color-beam-to: var(--beam-to);

  --color-key: var(--key);
  --color-number: var(--number);

  --color-chart-image: var(--chart-image);
  --color-chart-video: var(--chart-video);
  --color-chart-audio: var(--chart-audio);
  --color-chart-text: var(--chart-text);
  --color-chart-other: var(--chart-other);

  --radius-lg: 0.75rem;

  --font-sans: "Plus Jakarta Sans Variable", system-ui, sans-serif;
  --font-mono:
    "Geist Mono Variable", ui-monospace, SFMono-Regular, menlo, monospace;
}

/* Light: a cool near-white with indigo-leaning ink. */
:root {
  color-scheme: light dark;

  --background: #fafafb;
  --card: #ffffff;
  --muted: #f2f2f6;
  --accent: #eaeaf1;
  --border: #e5e5ec;
  --input: #d4d4de;

  --foreground: #18181d;
  --muted-foreground: #63636f;
  --faint: #8e8e9a;

  --primary: #18181d;
  --primary-foreground: #fafafb;
  --secondary: #eeeef3;
  --secondary-foreground: #18181d;
  --accent-foreground: #18181d;

  --destructive: #dc2626;
  --destructive-dim: #fdecec;
  --success: #15a34a;
  --success-dim: #e9faf0;
  --warning: #b45309;
  --warning-dim: #fdf3e7;

  --ring: #6d6df0;
  --beam-from: #6d6df0;
  --beam-to: #4f4fd4;

  --key: #5656d6;
  --number: #b45309;

  /* Categorical series for the Files storage bar, one fixed hue per media
     kind. Validated (CVD + contrast) against the card surfaces per mode. */
  --chart-image: #2a78d6;
  --chart-video: #eb6834;
  --chart-audio: #1baf7a;
  --chart-text: #eda100;
  --chart-other: #e87ba4;
}

/* Dark, the original palette: an indigo-leaning near-black. The same values
   appear twice, once for the system preference and once for the pinned
   choice; keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0a0a0c;
    --card: #101014;
    --muted: #15151a;
    --accent: #17171d;
    --border: #1e1e25;
    --input: #26262f;

    --foreground: #f4f4f7;
    --muted-foreground: #8b8b9c;
    --faint: #6c6c7c;

    --primary: #f4f4f7;
    --primary-foreground: #0a0a0c;
    --secondary: #23232b;
    --secondary-foreground: #f4f4f7;
    --accent-foreground: #f4f4f7;

    --destructive: #ef4444;
    --destructive-dim: #1c1216;
    --success: #4ade80;
    --success-dim: #10221a;
    --warning: #fbbf24;
    --warning-dim: #201705;

    --ring: #6d6df0;
    --beam-from: #6d6df0;
    --beam-to: #4f4fd4;

    --key: #a6a6f0;
    --number: #fbbf24;

    --chart-image: #3987e5;
    --chart-video: #d95926;
    --chart-audio: #199e70;
    --chart-text: #c98500;
    --chart-other: #d55181;
  }
}

:root[data-theme="dark"] {
  --background: #0a0a0c;
  --card: #101014;
  --muted: #15151a;
  --accent: #17171d;
  --border: #1e1e25;
  --input: #26262f;

  --foreground: #f4f4f7;
  --muted-foreground: #8b8b9c;
  --faint: #6c6c7c;

  --primary: #f4f4f7;
  --primary-foreground: #0a0a0c;
  --secondary: #23232b;
  --secondary-foreground: #f4f4f7;
  --accent-foreground: #f4f4f7;

  --destructive: #ef4444;
  --destructive-dim: #1c1216;
  --success: #4ade80;
  --success-dim: #10221a;
  --warning: #fbbf24;
  --warning-dim: #201705;

  --ring: #6d6df0;
  --beam-from: #6d6df0;
  --beam-to: #4f4fd4;

  --key: #a6a6f0;
  --number: #fbbf24;

  --chart-image: #3987e5;
  --chart-video: #d95926;
  --chart-audio: #199e70;
  --chart-text: #c98500;
  --chart-other: #d55181;
}

/* A pinned palette also narrows what the browser paints natively (form
   controls, scrollbars), which `color-scheme: light dark` would otherwise
   leave to the system. */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

html,
body,
#root {
  height: 100%;
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* Headings run heavy and tight. */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

::selection {
  background: color-mix(in srgb, var(--color-ring) 30%, transparent);
}

@theme inline {
  --animate-shine: shine var(--duration) infinite linear;
  --animate-shiny-text: shiny-text 8s infinite;
  @keyframes shine {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
  @keyframes shiny-text {
    0%,
    90%,
    100% {
      background-position: calc(-100% - var(--shiny-width)) 0;
    }
    30%,
    60% {
      background-position: calc(100% + var(--shiny-width)) 0;
    }
  }
}