@atom63/slides 0.1.0

package/src/styles/theme-defaults.css

@@ -0,0 +1,223 @@
+/* =============================================================================
+   @atom63/slides — STANDALONE DEFAULT TOKENS
+
+   Self-contained default values for every theme/palette/contract custom
+   property the slide player reads. `@import` this into your Tailwind v4 entry
+   CSS (NOT a JS import) so the `@theme` block below is processed and the
+   engine's semantic color utilities (text-foreground, bg-primary, …) resolve:
+
+       @import "tailwindcss";
+       @import "@atom63/slides/theme-defaults";
+       @import "@atom63/slides/styles";
+
+   These are ADDITIVE, low-specificity `:root` defaults. A host that ships its
+   own design tokens (like os63, which imports @atom63/tokens) defines the same
+   properties later in the cascade and therefore overrides everything here — so
+   importing this file in such a host is a harmless no-op. os63 does NOT import
+   it.
+
+   Values mirror the Modern (default-theme, light-mode) look from
+   @atom63/tokens (primitives/aliases/semantics/radius/effects/components/
+   slide-surfaces). Every var() used as a value below resolves to another token
+   defined IN this file, except Tailwind-provided primitives (--spacing, --tw-*,
+   --color-*) which the consumer's Tailwind build supplies.
+   ============================================================================= */
+
+/* Map the semantic palette into Tailwind's color theme so utilities like
+   `text-foreground`, `bg-background`, `bg-primary`, `border-input` resolve.
+   `inline` keeps them as `var(--token)` refs, so overriding a token at :root
+   (e.g. a dark theme) flows through at runtime. Requires this file to be
+   @import-ed into the consumer's Tailwind entry (see header). */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-light: var(--light);
+  --color-dark: var(--dark);
+}
+
+:root {
+  /* ── Fonts ──────────────────────────────────────────────────────────── */
+  --font-serif: "Brawler", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* ── Z-layers (subset the slide player uses) ────────────────────────── */
+  --z-layer-below: -1;
+  --z-layer-default: 0;
+  --z-layer-base: 10;
+  --z-layer-sticky: 20;
+  --z-layer-tooltip: 980;
+
+  /* ── Radius scale ───────────────────────────────────────────────────────
+     Same formula as @atom63/tokens so a host that later sets --corner-radius /
+     --radius-multiplier reshapes these identically. Concrete leaves below. */
+  --corner-radius: 10px;
+  --radius-multiplier: 1;
+  --radius-md: calc(var(--corner-radius) * 0.8 * var(--radius-multiplier));
+  --radius-lg: calc(var(--corner-radius) * var(--radius-multiplier));
+  --radius-xl: calc(var(--corner-radius) * 1.4 * var(--radius-multiplier));
+  --radius-3xl: calc(var(--corner-radius) * 2.2 * var(--radius-multiplier));
+  /* --radius-sm is referenced transitively by --theme-selection-radius. */
+  --radius-sm: calc(var(--corner-radius) * 0.6 * var(--radius-multiplier));
+
+  /* ── Base palette / semantic colors (Modern theme, light mode) ──────────
+     Concrete leaves copied from the resolved @atom63/tokens chain
+     (semantics.css → aliases.css → primitives.css, light values). */
+  --background: rgba(249, 249, 249, 1);
+  --foreground: rgba(32, 32, 32, 1);
+  --card: rgba(252, 252, 252, 1);
+  --popover: rgba(252, 252, 252, 1);
+  --popover-foreground: rgba(32, 32, 32, 1);
+  --light: rgba(252, 252, 252, 1);
+  --dark: rgba(17, 17, 17, 1);
+  --muted: rgba(240, 240, 240, 1);
+  --muted-foreground: rgba(100, 100, 100, 1);
+  --secondary: rgba(240, 240, 240, 1);
+  --secondary-foreground: rgba(100, 100, 100, 1);
+  --border: rgba(232, 232, 232, 1);
+  --input: rgba(224, 224, 224, 1);
+  --ring: rgba(217, 217, 217, 1);
+  --accent: color-mix(in srgb, rgba(232, 232, 232, 1), transparent 20%);
+  --accent-foreground: rgba(32, 32, 32, 1);
+  --primary: rgba(44, 127, 255, 1);
+  --primary-foreground: rgba(239, 252, 255, 1);
+  --destructive: rgba(231, 67, 64, 1);
+
+  /* ── Shared border / shadow effect leaves (from effects.css) ─────────────
+     Internal helpers the chrome contract references; not consumed directly by
+     slides but needed so the contract tokens below resolve in-file. */
+  --theme-border-width: 1px;
+  --theme-border-style: solid;
+  --effect-shadow-xs:
+    0px 1px 2px 0px rgb(0 0 0 / 0.05), 0px 2px 4px -2px rgb(0 0 0 / 0.08);
+  --effect-shadow-sm:
+    0px 2px 4px -1px rgb(0 0 0 / 0.06), 0px 6px 10px -4px rgb(0 0 0 / 0.08);
+  --effect-shadow-md:
+    0px 4px 8px -2px rgb(0 0 0 / 0.06), 0px 12px 18px -8px rgb(0 0 0 / 0.09);
+
+  /* ── Slide theme contract (verbatim from tokens/slide-surfaces.css) ─── */
+  --theme-slide-bg: var(--background);
+  --theme-slide-stage-bg: color-mix(in oklch, var(--muted) 70%, var(--border) 30%);
+  --theme-slide-stage-slide-ring: rgba(0, 0, 0, 0.08);
+  --theme-slide-toolbar-bg: color-mix(in oklch, var(--muted) 38%, transparent);
+  --theme-slide-toolbar-border: color-mix(in oklch, var(--border) 64%, transparent);
+  --theme-slide-statusbar-bg: color-mix(in oklch, var(--muted) 20%, transparent);
+  --theme-slide-statusbar-border: color-mix(in oklch, var(--border) 50%, transparent);
+  --theme-slide-sidebar-bg: color-mix(in oklch, var(--muted) 30%, transparent);
+  --theme-slide-sidebar-border: color-mix(in oklch, var(--border) 50%, transparent);
+  --theme-slide-surface: var(--card);
+  --theme-slide-rule-color: color-mix(in oklch, var(--foreground) 25%, transparent);
+  --theme-slide-rule-width: 1px;
+  --theme-slide-accent: var(--primary);
+  --theme-slide-accent-foreground: var(--primary-foreground);
+  --theme-slide-muted: var(--muted-foreground);
+  --theme-slide-code-bg: var(--card);
+  --theme-slide-code-border: color-mix(in oklch, var(--foreground) 10%, transparent);
+  --theme-slide-quote-color: color-mix(in oklch, var(--foreground) 90%, transparent);
+
+  /* ── Control / overlay / focus contract (from effects.css) ──────────── */
+  --theme-control-border-width: var(--theme-border-width);
+  --theme-control-border-style: var(--theme-border-style);
+  --theme-control-active-border-style: var(--theme-control-border-style);
+  --theme-control-shadow: none;
+  --theme-overlay-border-width: var(--theme-border-width);
+  --theme-overlay-border-style: var(--theme-border-style);
+  --theme-overlay-shadow: var(--effect-shadow-md);
+  --theme-focus-outline-width: 0px;
+  --theme-focus-outline-offset: 0px;
+  --theme-focus-outline-color: var(--ring);
+  --theme-focus-shadow: none;
+  --theme-selection-border-width: var(--theme-border-width);
+  --theme-selection-border-style: var(--theme-border-style);
+  --theme-selection-radius: var(--radius-sm);
+
+  /* ── Switch contract (from effects.css) ─────────────────────────────── */
+  --theme-switch-track-shadow: inset 0 1px rgb(0 0 0 / 0.06);
+  --theme-switch-thumb-border-width: 0px;
+  --theme-switch-thumb-border-style: var(--theme-border-style);
+  --theme-switch-thumb-shadow: var(--effect-shadow-sm);
+
+  /* ── Tabs contract (from effects.css) ───────────────────────────────── */
+  --theme-tabs-list-border-color: transparent;
+  --theme-tabs-list-border-width: 0px;
+  --theme-tabs-list-border-style: var(--theme-border-style);
+  --theme-tabs-list-shadow: none;
+  --theme-tabs-active-border-width: 0px;
+  --theme-tabs-active-border-style: var(--theme-border-style);
+  --theme-tabs-active-background: var(--card);
+  --theme-tabs-active-background-color: transparent;
+  --theme-tabs-active-shadow: var(--effect-shadow-sm);
+
+  /* ── Segment-control contract (from effects.css) ────────────────────── */
+  --theme-segment-list-background: color-mix(in oklch, var(--muted) 64%, transparent);
+  --theme-segment-list-border-color: color-mix(in oklch, var(--border) 80%, transparent);
+  --theme-segment-list-shadow: var(--theme-tabs-list-shadow);
+  --theme-segment-item-text-shadow: none;
+  --theme-segment-item-hover-background: transparent;
+  --theme-segment-active-background: var(--theme-tabs-active-background);
+  --theme-segment-active-background-color: var(--theme-tabs-active-background-color);
+  --theme-segment-active-border-color: transparent;
+  --theme-segment-active-text-shadow: none;
+  --theme-segment-active-shadow: var(--theme-tabs-active-shadow);
+  --theme-segment-active-icon-filter: none;
+
+  /* ── Button-group contract (from effects.css + components.css) ──────────
+     --theme-button-group-text-* mirror the slide-side inline fallbacks
+     (--muted / --input / --foreground) so the default look is faithful. */
+  --theme-button-group-radius: var(--radius-lg);
+  --theme-button-group-background: color-mix(in oklch, var(--muted) 72%, transparent);
+  --theme-button-group-border-color: color-mix(in oklch, var(--border) 82%, var(--foreground) 8%);
+  --theme-button-group-border-width: 0px;
+  --theme-button-group-separator-color: color-mix(in oklch, var(--border) 82%, var(--foreground) 8%);
+  --theme-button-group-shadow: none;
+  --theme-button-group-text-background: var(--muted);
+  --theme-button-group-text-border-color: var(--input);
+  --theme-button-group-text-foreground: var(--foreground);
+
+  /* ── Button contract (base button, from components.css) ─────────────── */
+  --theme-button-background: var(--secondary);
+  --theme-button-foreground: var(--secondary-foreground);
+  --theme-button-border-color: transparent;
+  --theme-button-hover-background: color-mix(in oklch, var(--secondary) 90%, transparent);
+  --theme-button-hover-border-color: transparent;
+  --theme-button-active-background: color-mix(in oklch, var(--secondary) 80%, transparent);
+  --theme-button-active-border-color: transparent;
+  --theme-button-shadow: var(--theme-control-shadow);
+  --theme-button-text-shadow: none;
+  --theme-button-icon-filter: none;
+}
+
+/* -----------------------------------------------------------------------------
+   Default border color. Tailwind v4 leaves `border` utilities at `currentColor`
+   (which renders as the text color — near-black). The full ATOM63 design system
+   sets a global `--border` default; standalone consumers don't have that, so the
+   player's chrome (toolbar, config panel, switches, segmented controls) would
+   show hard black borders. Restore the sensible default here so an opt-in
+   consumer gets correct subtle borders. Lives in @layer base so component-level
+   border-color utilities still win. Override `--border` to restyle.
+   ----------------------------------------------------------------------------- */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border, currentColor);
+  }
+}

package/src/styles/themes/bold.css

@@ -0,0 +1,48 @@
+/* =============================================================================
+   @atom63/slides — BOLD THEME
+
+   A dark, high-impact palette for the slide player — charcoal greys with a
+   bright orange signal and a strong Archivo sans for headlines. Import it AFTER
+   the default tokens to flip the whole deck (slides + chrome) to this look;
+   every --theme-slide-* and chrome token derives from this base palette, so
+   overriding the palette + font tokens is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/bold";       // override → bold
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&display=swap');
+:root {
+  /* ── Base palette (bold) ─────────────────────────────────────────────── */
+  --background: #1a1a1a;
+  --foreground: #ffffff;
+  --card: #242424;
+  --popover: #242424;
+  --popover-foreground: #ffffff;
+  --muted: #2a2a2a;
+  --muted-foreground: #a0a0a0;
+  --secondary: #2a2a2a;
+  --secondary-foreground: #e0e0e0;
+  --border: #3a3a3a;
+  --input: #3a3a3a;
+  --ring: #ff5722;
+  --accent: #2e2e2e;
+  --accent-foreground: #ffffff;
+  --primary: #ff5722;
+  --primary-foreground: #1a1a1a;
+  --destructive: #ff5722;
+
+  /* ── Fonts — strong sans headlines; serif & mono stay default ────────── */
+  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
+
+  /* ── Slide surfaces tuned for the high-impact look ───────────────────── */
+  --theme-slide-stage-bg: #0e0e0e;
+  --theme-slide-surface: #242424;
+  --theme-slide-code-bg: #242424;
+  --theme-slide-accent: #ff5722;
+}

package/src/styles/themes/dark.css

@@ -0,0 +1,45 @@
+/* =============================================================================
+   @atom63/slides — DARK THEME
+
+   A dark palette for the slide player. Import it AFTER the default tokens to
+   flip the whole deck (slides + chrome) to dark — every --theme-slide-* and
+   chrome token derives from this base palette via color-mix, so overriding the
+   palette is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/dark";       // override → dark
+       import "@atom63/slides/styles";
+
+   Want a runtime light/dark toggle instead of a hard import? Re-scope the rule
+   below from `:root` to e.g. `[data-slides-theme="dark"]` in your own CSS.
+   Want a custom theme? Override any of these tokens in your own stylesheet.
+   ============================================================================= */
+:root {
+  /* ── Base palette (dark) ─────────────────────────────────────────────── */
+  --background: rgba(20, 20, 22, 1);
+  --foreground: rgba(237, 237, 240, 1);
+  --card: rgba(28, 28, 31, 1);
+  --popover: rgba(28, 28, 31, 1);
+  --popover-foreground: rgba(237, 237, 240, 1);
+  --light: rgba(252, 252, 252, 1);
+  --dark: rgba(12, 12, 14, 1);
+  --muted: rgba(40, 40, 44, 1);
+  --muted-foreground: rgba(160, 160, 166, 1);
+  --secondary: rgba(40, 40, 44, 1);
+  --secondary-foreground: rgba(210, 210, 215, 1);
+  --border: rgba(74, 74, 80, 1);
+  --input: rgba(62, 62, 68, 1);
+  --ring: rgba(90, 90, 98, 1);
+  --accent: color-mix(in srgb, rgba(48, 48, 53, 1), transparent 20%);
+  --accent-foreground: rgba(237, 237, 240, 1);
+  --primary: rgba(80, 150, 255, 1);
+  --primary-foreground: rgba(8, 14, 24, 1);
+  --destructive: rgba(240, 96, 92, 1);
+
+  /* ── Slide surfaces that read better tuned explicitly on dark ────────── */
+  --theme-slide-stage-bg: rgba(12, 12, 14, 1);
+  --theme-slide-stage-slide-ring: rgba(255, 255, 255, 0.06);
+  --theme-slide-surface: rgba(34, 34, 38, 1);
+  --theme-slide-code-bg: rgba(34, 34, 38, 1);
+  --theme-switch-track-shadow: inset 0 1px rgb(0 0 0 / 0.2);
+}

package/src/styles/themes/editorial.css

@@ -0,0 +1,48 @@
+/* =============================================================================
+   @atom63/slides — EDITORIAL THEME
+
+   A light, serif "paper & ink" palette for the slide player — warm off-white
+   stock, near-black ink, a deep editorial red signal, and Cormorant serif
+   headlines. Import it AFTER the default tokens to flip the whole deck (slides +
+   chrome) to this look; every --theme-slide-* and chrome token derives from this
+   base palette, so overriding the palette + font tokens is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/editorial";  // override → editorial
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
+:root {
+  /* ── Base palette (editorial) ────────────────────────────────────────── */
+  --background: #faf9f7;
+  --foreground: #1a1a1a;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --popover-foreground: #1a1a1a;
+  --muted: #efece6;
+  --muted-foreground: #6b6258;
+  --secondary: #efece6;
+  --secondary-foreground: #4a4038;
+  --border: #e2dcd2;
+  --input: #d9d2c6;
+  --ring: #c41e3a;
+  --accent: #efe7dc;
+  --accent-foreground: #1a1a1a;
+  --primary: #c41e3a;
+  --primary-foreground: #fff7f5;
+  --destructive: #c41e3a;
+
+  /* ── Fonts — serif headlines & body; mono stays default ──────────────── */
+  --font-sans: "Cormorant", Georgia, serif;
+  --font-serif: "Cormorant", Georgia, serif;
+
+  /* ── Slide surfaces tuned for the paper & ink look ───────────────────── */
+  --theme-slide-stage-bg: #ece8e1;
+  --theme-slide-surface: #ffffff;
+  --theme-slide-quote-color: #2a2a2a;
+}

package/src/styles/themes/neon.css

@@ -0,0 +1,47 @@
+/* =============================================================================
+   @atom63/slides — NEON THEME
+
+   A dark "cyber" palette for the slide player — deep navy with a cyan signal and
+   magenta destructive. Palette-led (no special webfont, to keep it light).
+   Import it AFTER the default tokens to flip the whole deck (slides + chrome) to
+   this look; every --theme-slide-* and chrome token derives from this base
+   palette, so overriding the palette is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/neon";       // override → neon
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+:root {
+  /* ── Base palette (neon) ─────────────────────────────────────────────── */
+  --background: #0a0f1c;
+  --foreground: #e6f0ff;
+  --card: #111829;
+  --popover: #111829;
+  --popover-foreground: #e6f0ff;
+  --muted: #141b2e;
+  --muted-foreground: #8da2c0;
+  --secondary: #141b2e;
+  --secondary-foreground: #cfe0ff;
+  --border: #243049;
+  --input: #243049;
+  --ring: #00ffcc;
+  --accent: #16203a;
+  --accent-foreground: #e6f0ff;
+  --primary: #00ffcc;
+  --primary-foreground: #04121a;
+  --destructive: #ff00aa;
+
+  /* ── Fonts — defaults (this is a palette-only theme) ─────────────────── */
+
+  /* ── Slide surfaces tuned for the cyber look ─────────────────────────── */
+  --theme-slide-stage-bg: #05080f;
+  --theme-slide-surface: #111829;
+  --theme-slide-code-bg: #111829;
+  --theme-slide-accent: #00ffcc;
+  --theme-slide-quote-color: #b9e8ff;
+}

package/src/styles/themes/terminal.css

@@ -0,0 +1,50 @@
+/* =============================================================================
+   @atom63/slides — TERMINAL THEME
+
+   A dark, monospace "terminal" palette for the slide player — GitHub-dark greys
+   with a phosphor-green signal color and JetBrains Mono everywhere. Import it
+   AFTER the default tokens to flip the whole deck (slides + chrome) to this look;
+   every --theme-slide-* and chrome token derives from this base palette, so
+   overriding the palette + font tokens is enough:
+
+       import "@atom63/slides/theme-defaults";   // light defaults + base rules
+       import "@atom63/slides/themes/terminal";   // override → terminal
+       import "@atom63/slides/styles";
+
+   A theme is ONLY a :root override of the documented tokens — no per-theme
+   component code. Override any of these tokens in your own stylesheet to tweak.
+
+   Palette adapted from zarazhangrui/frontend-slides (MIT).
+   ============================================================================= */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
+:root {
+  /* ── Base palette (terminal) ─────────────────────────────────────────── */
+  --background: #0d1117;
+  --foreground: #c9d1d9;
+  --card: #161b22;
+  --popover: #161b22;
+  --popover-foreground: #c9d1d9;
+  --muted: #161b22;
+  --muted-foreground: #8b949e;
+  --secondary: #161b22;
+  --secondary-foreground: #c9d1d9;
+  --border: #30363d;
+  --input: #30363d;
+  --ring: #39d353;
+  --accent: #1f2630;
+  --accent-foreground: #c9d1d9;
+  --primary: #39d353;
+  --primary-foreground: #0d1117;
+  --destructive: #f85149;
+
+  /* ── Fonts — mono everything, that's the terminal vibe ───────────────── */
+  --font-sans: "JetBrains Mono", ui-monospace, monospace;
+  --font-serif: "JetBrains Mono", ui-monospace, monospace;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* ── Slide surfaces tuned for the terminal look ──────────────────────── */
+  --theme-slide-stage-bg: #010409;
+  --theme-slide-surface: #161b22;
+  --theme-slide-code-bg: #161b22;
+  --theme-slide-accent: #39d353;
+}