Glass Theme
weekendsuperhero-io-sistine/themeUnverifiedTheme
The Sistine glass design system: OKLCH color tokens, glass surface variables (frosted, crystal), the runtime tint system, and animations. Adopt the look without pulling components.
Install it
npx shadcn@latest add https://raw.githubusercontent.com/Weekendsuperhero-io/sistine/main/theme.jsonSource
1/*2 Sistine theme — aggregator. The theme is authored as focused partials under app/theme/; Tailwind v43 bundles these relative imports itself (no postcss-import needed). ORDER MATTERS:4 - package imports come first (CSS requires @import before other rules),5 - engine.css must precede presets.css / frescoes.css (a preset's --glass-tint-h overrides the6 engine default by SOURCE ORDER at equal specificity),7 - inside tokens.css, .dark comes after :root (same-element ties resolve by source order).8 Consumers install a FLATTENED single-file build of this graph (registry/theme/globals.css, generated9 by scripts/build-theme.mjs) — run `pnpm registry:check` after editing any partial and commit10 registry/theme + public/r.11*/12@import "tailwindcss";13@import "tw-animate-css";14/* ── Registrations — @custom-variant + @property pins for JS-only tokens ──────15 Loaded first so the dark variant and typed properties exist before anything composes them. */1617/* Class-based dark mode, v4-standard form: matches the `.dark` element ITSELF and its descendants, so18 consumers can toggle `.dark` on any wrapper (not just <html> / next-themes), at zero specificity19 (`:where`) so `dark:` overrides by cascade order like every other variant. */20@custom-variant dark (&:where(.dark, .dark *));2122/* Composable, NON-inheriting glow layer: the `glow` effect/prop sets it, and every glass box-shadow23 folds in `var(--glow-layer, …)` so the glow rides INSIDE each style's shadow — surviving the24 per-style `!important` box-shadow overrides instead of being replaced. inherits:false keeps a25 glowing surface from lighting up its glass children. */26@property --glow-layer {27 syntax: "*";28 inherits: false;29}3031/* Gradient-text tokens are consumed ONLY from JS inline styles (components/gradient-text.tsx) — no CSS32 rule references them, so Lightning CSS's optimizer would silently drop them (the same failure mode as33 the harmonic tokens below). Registered here to pin them. DO NOT REMOVE. */34@property --gradient-text {35 syntax: "*";36 inherits: true;37}38@property --gradient-text-contrast {39 syntax: "*";40 inherits: true;41}42/* ── Harmonic color registrations — compacted one-liners (biome's CSS formatter is excluded for this43 file; see biome.json). WHY these exist: the comment below. */4445// … truncated
What it pulls in
npm packages
