mirror of
https://github.com/prdlk/leetcode.git
synced 2026-11-02 13:12:44 +00:00
72 lines
2.5 KiB
CSS
72 lines
2.5 KiB
CSS
/*
|
|
* shadcn/ui tokens on top of Blume's theme. Blume (Tailwind v4) already maps
|
|
* background/foreground/muted/border onto its --blume-* tokens; this adds the
|
|
* names shadcn components expect, pointed at the same tokens so the progress
|
|
* cards follow the site in both colour schemes. Blume inlines this file into
|
|
* its Tailwind entry and switches dark mode with [data-theme="dark"], not
|
|
* shadcn's .dark class.
|
|
*
|
|
* Deliberately NOT remapped: `accent`. In Blume it is the brand colour
|
|
* (bg-accent), in shadcn a subtle hover surface; the vendored components here
|
|
* never use it.
|
|
*/
|
|
|
|
:root {
|
|
/* Difficulty hues, LeetCode's: easy teal, medium amber, hard red. */
|
|
--chart-1: oklch(0.72 0.12 195);
|
|
--chart-2: oklch(0.8 0.16 80);
|
|
--chart-3: oklch(0.63 0.22 25);
|
|
/* Solved fill for the topic bubbles. */
|
|
--chart-4: oklch(0.72 0.17 150);
|
|
--chart-5: oklch(0.6 0.12 250);
|
|
/* Heatmap ramp — the GREENS of apps/api/src/charts.ts (README + email), with
|
|
level 0 on the theme's muted surface so an empty day reads in light mode. */
|
|
--heat-0: var(--blume-muted);
|
|
--heat-1: #9be9a8;
|
|
--heat-2: #40c463;
|
|
--heat-3: #30a14e;
|
|
--heat-4: #216e39;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--chart-1: oklch(0.75 0.12 195);
|
|
--chart-2: oklch(0.83 0.16 80);
|
|
--chart-3: oklch(0.68 0.21 25);
|
|
--chart-4: oklch(0.76 0.17 150);
|
|
--chart-5: oklch(0.7 0.12 250);
|
|
--heat-0: var(--blume-muted);
|
|
--heat-1: #0e4429;
|
|
--heat-2: #006d32;
|
|
--heat-3: #26a641;
|
|
--heat-4: #39d353;
|
|
}
|
|
|
|
/* shadcn components draw `border` with no colour and rely on a global
|
|
`* { border-color: var(--border) }` base rule. Blume has none (its own
|
|
components always name border-border), so give shadcn's parts — every one
|
|
carries data-slot — that default, scoped, without touching Blume's. */
|
|
@layer base {
|
|
[data-slot],
|
|
[data-slot] * {
|
|
border-color: var(--blume-border);
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--color-card: var(--blume-background);
|
|
--color-card-foreground: var(--blume-foreground);
|
|
--color-popover: var(--blume-background);
|
|
--color-popover-foreground: var(--blume-foreground);
|
|
--color-primary: var(--blume-foreground);
|
|
--color-primary-foreground: var(--blume-background);
|
|
--color-secondary: var(--blume-muted);
|
|
--color-secondary-foreground: var(--blume-foreground);
|
|
--color-input: var(--blume-border);
|
|
--color-ring: var(--blume-muted-foreground);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
}
|