89 lines
3.6 KiB
CSS
89 lines
3.6 KiB
CSS
/* Greyhaven HTMX Showcase — Tailwind v4 source
|
|
*
|
|
* Pairs the generated `dist/greyhaven.htmx.css` with the design system tokens
|
|
* so a plain HTML page (no React) can render every component via data-slot
|
|
* attribute selectors.
|
|
*
|
|
* Compiled output: public/htmx.css (served at /htmx.css)
|
|
*/
|
|
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "../app/tokens/tokens-light.css";
|
|
@import "../app/tokens/tokens-dark.css";
|
|
@import "../dist/greyhaven.htmx.css";
|
|
|
|
@source "./*.html";
|
|
@source "../public/htmx.html";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Self-hosted Aspekta (served from /fonts/) */
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }
|
|
|
|
:root {
|
|
--radius: 0.375rem;
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
|
|
/* Matches React's `var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif`.
|
|
* Next.js injects --font-source-serif via next/font/google. We load Source Serif 4 from
|
|
* Google Fonts directly in htmx.html <link>, so naming it here is enough. */
|
|
--font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
--color-background: rgb(var(--background));
|
|
--color-foreground: rgb(var(--foreground));
|
|
--color-card: rgb(var(--card));
|
|
--color-card-foreground: rgb(var(--card-foreground));
|
|
--color-popover: rgb(var(--popover));
|
|
--color-popover-foreground: rgb(var(--popover-foreground));
|
|
--color-primary: rgb(var(--primary));
|
|
--color-primary-foreground: rgb(var(--primary-foreground));
|
|
--color-secondary: rgb(var(--secondary));
|
|
--color-secondary-foreground: rgb(var(--secondary-foreground));
|
|
--color-muted: rgb(var(--muted));
|
|
--color-muted-foreground: rgb(var(--muted-foreground));
|
|
--color-accent: rgb(var(--accent));
|
|
--color-accent-foreground: rgb(var(--accent-foreground));
|
|
--color-destructive: rgb(var(--destructive));
|
|
--color-destructive-foreground: rgb(var(--destructive-foreground));
|
|
--color-border: rgb(var(--border));
|
|
--color-input: rgb(var(--input));
|
|
--color-ring: rgb(var(--ring));
|
|
--color-chart-1: rgb(var(--chart-1));
|
|
--color-chart-2: rgb(var(--chart-2));
|
|
--color-chart-3: rgb(var(--chart-3));
|
|
--color-chart-4: rgb(var(--chart-4));
|
|
--color-chart-5: rgb(var(--chart-5));
|
|
--color-hero-bg: rgb(var(--hero-bg));
|
|
--color-sidebar: rgb(var(--sidebar));
|
|
--color-sidebar-foreground: rgb(var(--sidebar-foreground));
|
|
--color-sidebar-primary: rgb(var(--sidebar-primary));
|
|
--color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
|
|
--color-sidebar-accent: rgb(var(--sidebar-accent));
|
|
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
|
|
--color-sidebar-border: rgb(var(--sidebar-border));
|
|
--color-sidebar-ring: rgb(var(--sidebar-ring));
|
|
|
|
--radius-sm: calc(var(--radius) - 2px);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: calc(var(--radius) + 2px);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
border-color: rgb(var(--border));
|
|
}
|
|
body {
|
|
background-color: rgb(var(--background));
|
|
color: rgb(var(--foreground));
|
|
font-family: var(--font-sans);
|
|
}
|
|
}
|