@troshab/slidev-theme-troshab 0.1.0

package/styles/colors.css

@@ -0,0 +1,422 @@
+/* ============================================
+   slidev-theme-troshab — Color System
+   ============================================
+
+   ARCHITECTURE (3 layers):
+
+   Layer 1 — Palette (this section)
+     Dracula (dark) / Alucard (light) derived shade ramps.
+     Generated via scripts/generate-palette.mjs (OKLCH ramps).
+     The ONLY place raw hex colors exist.
+     Palette does not change per theme.
+
+   Layer 2 — Semantic tokens (:root + .dark)
+     Map palette shades to purpose.
+     Only var() references, never hex.
+
+   Layer 3 — Usage (components)
+     Components use only semantic vars.
+
+   RULES:
+   - Tints (10-15% backgrounds) use opaque palette shades (-100/-700)
+     for WCAG-predictable contrast, NOT color-mix()
+   - color-mix() ONLY for true alpha: shadows, image overlays
+   - Every --color-{name} has a --color-{name}-foreground pair
+
+   FAMILIES (11):
+   - drac-bg     : cool neutral (Dracula Background #282A36)
+   - drac-fg     : warm neutral (Dracula Foreground #F8F8F2 / Alucard #1F1F1F)
+   - alu-bg      : warm cream neutral (Alucard Background #FFFBEB)
+   - drac-comment: muted blue-grey (Dracula Comment #6272A4)
+   - drac-cyan   : cyan/teal (Dracula Cyan #8BE9FD)
+   - drac-green  : green (Dracula Green #50FA7B)
+   - drac-orange : orange (Dracula Orange #FFB86C)
+   - drac-pink   : pink (Dracula Pink #FF79C6)
+   - drac-purple : purple (Dracula Purple #BD93F9)
+   - drac-red    : red (Dracula Red #FF5555)
+   - drac-yellow : yellow-green (Dracula Yellow #F1FA8C)
+
+   ============================================ */
+
+/* ============================================
+   1. Palette Definitions (Dracula/Alucard)
+
+   11 families x 11 shades + black/white.
+   Single :root block - palette is theme-invariant.
+   ============================================ */
+
+:root {
+  /* --- Black & White --- */
+  --color-black: var(--color-drac-bg-950);
+  --color-white: var(--color-drac-fg-50);
+
+  /* --- drac-bg (cool neutral, from Dracula Background) --- */
+  --color-drac-bg-50: #f4f5f9;
+  --color-drac-bg-100: #e7e7ec;
+  --color-drac-bg-200: #d1d3e2;
+  --color-drac-bg-300: #b4b6c4;
+  --color-drac-bg-400: #9597a5;
+  --color-drac-bg-500: #747783;
+  --color-drac-bg-600: #5b5d69;
+  --color-drac-bg-700: #454753;
+  --color-drac-bg-800: #30323d;
+  --color-drac-bg-900: #1d1e29;
+  --color-drac-bg-950: #0c0d12;
+
+  /* --- drac-fg (warm neutral, from Dracula Foreground) --- */
+  --color-drac-fg-50: #f5f5f3;
+  --color-drac-fg-100: #e8e8e6;
+  --color-drac-fg-200: #d5d5cf;
+  --color-drac-fg-300: #b8b8b2;
+  --color-drac-fg-400: #999993;
+  --color-drac-fg-500: #787872;
+  --color-drac-fg-600: #5e5e59;
+  --color-drac-fg-700: #484843;
+  --color-drac-fg-800: #33332f;
+  --color-drac-fg-900: #20201b;
+  --color-drac-fg-950: #0d0d0b;
+
+  /* --- alu-bg (warm cream neutral, from Alucard Background) --- */
+  --color-alu-bg-50: #f6f5f1;
+  --color-alu-bg-100: #e9e8e3;
+  --color-alu-bg-200: #d8d4c6;
+  --color-alu-bg-300: #bbb8a9;
+  --color-alu-bg-400: #9c988b;
+  --color-alu-bg-500: #7b786a;
+  --color-alu-bg-600: #615e51;
+  --color-alu-bg-700: #4b483c;
+  --color-alu-bg-800: #363327;
+  --color-alu-bg-900: #221f14;
+  --color-alu-bg-950: #0f0d08;
+
+  /* --- drac-comment (muted blue-grey) --- */
+  --color-drac-comment-50: #f2f5fd;
+  --color-drac-comment-100: #dfe7ff;
+  --color-drac-comment-200: #c4d3ff;
+  --color-drac-comment-300: #a5b6e8;
+  --color-drac-comment-400: #8696c9;
+  --color-drac-comment-500: #6575a7;
+  --color-drac-comment-600: #4c5b8a;
+  --color-drac-comment-700: #384571;
+  --color-drac-comment-800: #243059;
+  --color-drac-comment-900: #121b41;
+  --color-drac-comment-950: #04082a;
+
+  /* --- drac-cyan (cyan/teal) --- */
+  --color-drac-cyan-50: #ebf8fb;
+  --color-drac-cyan-100: #bcf3ff;
+  --color-drac-cyan-200: #87e5f9;
+  --color-drac-cyan-300: #6cc7da;
+  --color-drac-cyan-400: #4fa7b8;
+  --color-drac-cyan-500: #2d8495;
+  --color-drac-cyan-600: #076979;
+  --color-drac-cyan-700: #00515e;
+  --color-drac-cyan-800: #003a44;
+  --color-drac-cyan-900: #00252c;
+  --color-drac-cyan-950: #001116;
+
+  /* --- drac-green (green) --- */
+  --color-drac-green-50: #e7fce9;
+  --color-drac-green-100: #adffb9;
+  --color-drac-green-200: #50fa7b;
+  --color-drac-green-300: #2bda61;
+  --color-drac-green-400: #00b749;
+  --color-drac-green-500: #009038;
+  --color-drac-green-600: #00722a;
+  --color-drac-green-700: #00581e;
+  --color-drac-green-800: #003f13;
+  --color-drac-green-900: #002808;
+  --color-drac-green-950: #001301;
+
+  /* --- drac-orange (orange) --- */
+  --color-drac-orange-50: #fef3e8;
+  --color-drac-orange-100: #ffe2c6;
+  --color-drac-orange-200: #ffc891;
+  --color-drac-orange-300: #eca75d;
+  --color-drac-orange-400: #c98940;
+  --color-drac-orange-500: #a4681e;
+  --color-drac-orange-600: #854f00;
+  --color-drac-orange-700: #683c00;
+  --color-drac-orange-800: #4b2a00;
+  --color-drac-orange-900: #311800;
+  --color-drac-orange-950: #1b0700;
+
+  /* --- drac-pink (pink) --- */
+  --color-drac-pink-50: #fff0f7;
+  --color-drac-pink-100: #ffddee;
+  --color-drac-pink-200: #ffbedf;
+  --color-drac-pink-300: #ff8acb;
+  --color-drac-pink-400: #e363ae;
+  --color-drac-pink-500: #bb428b;
+  --color-drac-pink-600: #9b2770;
+  --color-drac-pink-700: #7f0759;
+  --color-drac-pink-800: #5f0040;
+  --color-drac-pink-900: #3f0029;
+  --color-drac-pink-950: #230014;
+
+  /* --- drac-purple (purple) --- */
+  --color-drac-purple-50: #f7f3ff;
+  --color-drac-purple-100: #ede2ff;
+  --color-drac-purple-200: #ddc9ff;
+  --color-drac-purple-300: #c7a2ff;
+  --color-drac-purple-400: #a980e3;
+  --color-drac-purple-500: #8760bc;
+  --color-drac-purple-600: #6d469d;
+  --color-drac-purple-700: #563082;
+  --color-drac-purple-800: #401a68;
+  --color-drac-purple-900: #2c004f;
+  --color-drac-purple-950: #16002f;
+
+  /* --- drac-red (red) --- */
+  --color-drac-red-50: #fff2f0;
+  --color-drac-red-100: #ffdfdc;
+  --color-drac-red-200: #ffc3be;
+  --color-drac-red-300: #ff958e;
+  --color-drac-red-400: #fe5454;
+  --color-drac-red-500: #d33036;
+  --color-drac-red-600: #b1011d;
+  --color-drac-red-700: #8b0013;
+  --color-drac-red-800: #66000a;
+  --color-drac-red-900: #440003;
+  --color-drac-red-950: #260000;
+
+  /* --- drac-yellow (yellow-green) --- */
+  --color-drac-yellow-50: #f5f7e8;
+  --color-drac-yellow-100: #e8efac;
+  --color-drac-yellow-200: #d5dd73;
+  --color-drac-yellow-300: #b8c059;
+  --color-drac-yellow-400: #99a03c;
+  --color-drac-yellow-500: #797e17;
+  --color-drac-yellow-600: #5f6300;
+  --color-drac-yellow-700: #494c00;
+  --color-drac-yellow-800: #343600;
+  --color-drac-yellow-900: #202200;
+  --color-drac-yellow-950: #0e0f00;
+}
+
+/* ============================================
+   2. Light Theme Semantic Tokens (Alucard)
+   All values are var() references to palette.
+   ============================================ */
+
+:root {
+  /* --- Backgrounds (warm cream, Alucard) --- */
+  --color-bg:       var(--color-alu-bg-50);
+  --color-bg-soft:  var(--color-alu-bg-100);
+  --color-bg-muted: var(--color-alu-bg-200);
+
+  /* --- Text (dark warm) --- */
+  --color-text:           var(--color-drac-fg-900);
+  --color-text-secondary: var(--color-drac-comment-600);
+  --color-text-tertiary:  var(--color-drac-comment-700);
+
+  /* --- Borders (3:1 non-text contrast vs all backgrounds incl. bg-muted) --- */
+  --color-border:        var(--color-drac-comment-500);
+  --color-border-strong: var(--color-drac-comment-600);
+
+  /* --- Primary (Alucard purple) --- */
+  --color-primary:            var(--color-drac-purple-700);
+  --color-primary-soft:       var(--color-drac-purple-50);
+  --color-primary-foreground: var(--color-drac-fg-50);
+
+  /* --- Semantic colors (Alucard-strength darks) --- */
+  --color-success:            var(--color-drac-green-700);
+  --color-success-foreground: var(--color-drac-fg-50);
+  --color-warning:            var(--color-drac-orange-600);
+  --color-warning-foreground: var(--color-drac-fg-50);
+  --color-danger:             var(--color-drac-red-600);
+  --color-danger-foreground:  var(--color-drac-fg-50);
+  --color-info:               var(--color-drac-cyan-600);
+  --color-info-foreground:    var(--color-drac-fg-50);
+
+  /* --- Secondary & Accent --- */
+  --color-secondary:            var(--color-drac-comment-600);
+  --color-secondary-foreground: var(--color-drac-fg-50);
+  --color-accent:               var(--color-drac-pink-700);
+  --color-accent-foreground:    var(--color-drac-fg-50);
+
+  /* --- Tints: opaque palette shades for subtle backgrounds (WCAG-safe) ---
+     Shade 100: 1.18-1.24:1 vs code bg, tokens 6.45+:1, text 11.99+:1 */
+  --color-primary-tint: var(--color-drac-purple-100);
+  --color-success-tint: var(--color-drac-green-100);
+  --color-warning-tint: var(--color-drac-orange-100);
+  --color-danger-tint:  var(--color-drac-red-100);
+  --color-info-tint:    var(--color-drac-cyan-100);
+
+  /* --- Fade: gradient endpoints --- */
+  --color-primary-fade: var(--color-drac-purple-200);
+  --color-success-fade: var(--color-drac-green-200);
+  --color-warning-fade: var(--color-drac-orange-200);
+  --color-danger-fade:  var(--color-drac-red-200);
+  --color-info-fade:    var(--color-drac-cyan-200);
+  --color-accent-fade:  var(--color-drac-pink-200);
+
+  /* --- Focus ring --- */
+  --color-ring: var(--color-primary);
+
+  /* --- Gradients (one per semantic color, 135deg color → fade) --- */
+  --gradient-primary: linear-gradient(135deg, var(--color-drac-purple-700) 0%, var(--color-drac-pink-700) 100%);
+  --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-fade));
+  --gradient-warning: linear-gradient(135deg, var(--color-warning), var(--color-warning-fade));
+  --gradient-danger:  linear-gradient(135deg, var(--color-danger), var(--color-danger-fade));
+  --gradient-info:    linear-gradient(135deg, var(--color-info), var(--color-info-fade));
+  --gradient-accent:  linear-gradient(135deg, var(--color-accent), var(--color-accent-fade));
+  --gradient-section: linear-gradient(135deg, var(--color-alu-bg-100) 0%, var(--color-alu-bg-200) 100%);
+
+  /* --- Theme Colors (Slidev integration) --- */
+  --slidev-theme-primary:   var(--color-primary);
+  --slidev-theme-secondary: var(--color-secondary);
+  --slidev-theme-accent:    var(--color-accent);
+
+  /* --- Syntax Highlighting (Shiki CSS variables) ---
+     Calibrated for 4.5:1+ on shiki-bg (alu-bg-200).
+     APCA content text (Lc 60+) for short-read code. */
+  --shiki-color-text:              var(--color-drac-fg-900);
+  --shiki-color-background:        var(--color-alu-bg-200);
+  --shiki-foreground:              var(--shiki-color-text);
+  --shiki-background:              var(--shiki-color-background);
+  --slidev-code-background:        var(--shiki-color-background);
+  --slidev-code-font-size:         var(--font-size-small);
+  --slidev-code-font-family:       var(--font-mono);
+  --slidev-code-line-height:       var(--line-height-code);
+  --slidev-code-radius:            0.5rem;
+  --slidev-code-padding:           8px;
+  --shiki-token-comment:           var(--color-drac-comment-700);
+  --shiki-token-punctuation:       var(--color-drac-pink-700);
+  --shiki-token-keyword:           var(--color-drac-pink-700);
+  --shiki-token-string:            var(--color-drac-yellow-700);
+  --shiki-token-string-expression: var(--color-drac-yellow-700);
+  --shiki-token-function:          var(--color-drac-green-700);
+  --shiki-token-constant:          var(--color-drac-purple-700);
+  --shiki-token-parameter:         var(--color-drac-orange-700);
+  --shiki-token-link:              var(--color-drac-cyan-700);
+
+  /* --- Chart palette (light theme) ---
+     8 colors across 5 shade tiers (950/800/700/600/500) for maximum
+     grayscale luminance spread. Min adjacent gap 0.019. All 3:1+ vs bg & bg-soft. */
+  --chart-1:  var(--color-drac-yellow-950);
+  --chart-2:  var(--color-drac-orange-800);
+  --chart-3:  var(--color-drac-purple-700);
+  --chart-4:  var(--color-drac-red-600);
+  --chart-5:  var(--color-drac-cyan-600);
+  --chart-6:  var(--color-drac-pink-500);
+  --chart-7:  var(--color-drac-comment-500);
+  --chart-8:  var(--color-drac-green-500);
+}
+
+/* ============================================
+   3. Dark Theme Semantic Tokens (Dracula)
+   ============================================ */
+
+html.dark {
+  /* --- Backgrounds (cool dark, Dracula) --- */
+  --color-bg:       var(--color-drac-bg-900);
+  --color-bg-soft:  var(--color-drac-bg-800);
+  --color-bg-muted: var(--color-drac-bg-700);
+
+  /* --- Text (light, Dracula Foreground) --- */
+  --color-text:           var(--color-drac-fg-50);
+  --color-text-secondary: var(--color-drac-comment-200);
+  --color-text-tertiary:  var(--color-drac-comment-200);
+
+  /* --- Borders (3:1 non-text contrast vs all backgrounds) --- */
+  --color-border:        var(--color-drac-comment-300);
+  --color-border-strong: var(--color-drac-comment-200);
+
+  /* --- Primary (Dracula Purple, consistent with light theme) --- */
+  --color-primary:            var(--color-drac-purple-200);
+  --color-primary-soft:       var(--color-drac-purple-950);
+  --color-primary-foreground: var(--color-drac-bg-900);
+
+  /* --- Semantic colors (Dracula brights, Lc 60+ on bg) --- */
+  --color-success:            var(--color-drac-green-300);
+  --color-success-foreground: var(--color-drac-bg-900);
+  --color-warning:            var(--color-drac-orange-300);
+  --color-warning-foreground: var(--color-drac-bg-900);
+  --color-danger:             var(--color-drac-red-200);
+  --color-danger-foreground:  var(--color-drac-bg-900);
+  --color-info:               var(--color-drac-cyan-300);
+  --color-info-foreground:    var(--color-drac-bg-900);
+
+  /* --- Secondary & Accent --- */
+  --color-secondary:            var(--color-drac-comment-300);
+  --color-secondary-foreground: var(--color-drac-bg-900);
+  --color-accent:               var(--color-drac-pink-200);
+  --color-accent-foreground:    var(--color-drac-bg-900);
+
+  /* --- Tints: dark opaque palette shades (WCAG-safe) ---
+     Shade 700: 1.17-1.42:1 vs code bg, tokens 5.19+:1, text 7.15+:1 */
+  --color-primary-tint: var(--color-drac-purple-700);
+  --color-success-tint: var(--color-drac-green-700);
+  --color-warning-tint: var(--color-drac-orange-700);
+  --color-danger-tint:  var(--color-drac-red-700);
+  --color-info-tint:    var(--color-drac-cyan-700);
+
+  /* --- Fade: gradient endpoints --- */
+  --color-primary-fade: var(--color-drac-purple-800);
+  --color-success-fade: var(--color-drac-green-800);
+  --color-warning-fade: var(--color-drac-orange-800);
+  --color-danger-fade:  var(--color-drac-red-800);
+  --color-info-fade:    var(--color-drac-cyan-800);
+  --color-accent-fade:  var(--color-drac-pink-800);
+
+  /* --- Focus ring --- */
+  --color-ring: var(--color-primary);
+
+  /* --- Gradients (one per semantic color, 135deg color → fade) --- */
+  --gradient-primary: linear-gradient(135deg, var(--color-drac-purple-400) 0%, var(--color-drac-pink-400) 100%);
+  --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-fade));
+  --gradient-warning: linear-gradient(135deg, var(--color-warning), var(--color-warning-fade));
+  --gradient-danger:  linear-gradient(135deg, var(--color-danger), var(--color-danger-fade));
+  --gradient-info:    linear-gradient(135deg, var(--color-info), var(--color-info-fade));
+  --gradient-accent:  linear-gradient(135deg, var(--color-accent), var(--color-accent-fade));
+  --gradient-section: linear-gradient(135deg, var(--color-drac-bg-900) 0%, var(--color-drac-bg-800) 100%);
+
+  /* --- Theme Colors (Slidev integration) --- */
+  --slidev-theme-primary:   var(--color-primary);
+  --slidev-theme-secondary: var(--color-secondary);
+  --slidev-theme-accent:    var(--color-accent);
+
+  /* --- Syntax Highlighting (dark, Dracula-based) ---
+     Calibrated for 4.5:1+ on shiki-bg (drac-bg-800).
+     APCA content text (Lc 60+) for short-read code. */
+  --shiki-color-text:              var(--color-drac-fg-50);
+  --shiki-color-background:        var(--color-drac-bg-800);
+  --shiki-foreground:              var(--shiki-color-text);
+  --shiki-background:              var(--shiki-color-background);
+  --slidev-code-background:        var(--shiki-color-background);
+  --slidev-code-font-size:         var(--font-size-small);
+  --slidev-code-font-family:       var(--font-mono);
+  --slidev-code-line-height:       var(--line-height-code);
+  --slidev-code-radius:            0.5rem;
+  --slidev-code-padding:           8px;
+  --shiki-token-comment:           var(--color-drac-comment-200);
+  --shiki-token-punctuation:       var(--color-drac-pink-200);
+  --shiki-token-keyword:           var(--color-drac-pink-200);
+  --shiki-token-string:            var(--color-drac-yellow-200);
+  --shiki-token-string-expression: var(--color-drac-yellow-200);
+  --shiki-token-function:          var(--color-drac-green-200);
+  --shiki-token-constant:          var(--color-drac-purple-200);
+  --shiki-token-parameter:         var(--color-drac-orange-200);
+  --shiki-token-link:              var(--color-drac-cyan-200);
+
+  /* --- Chart palette (dark theme) ---
+     8 colors across 5 shade tiers (400/300/200/100) for maximum
+     grayscale luminance spread. Min adjacent gap 0.035. All 3:1+ vs bg & bg-soft. */
+  --chart-1:  var(--color-drac-red-400);
+  --chart-2:  var(--color-drac-yellow-400);
+  --chart-3:  var(--color-drac-pink-300);
+  --chart-4:  var(--color-drac-comment-300);
+  --chart-5:  var(--color-drac-purple-200);
+  --chart-6:  var(--color-drac-cyan-200);
+  --chart-7:  var(--color-drac-orange-100);
+  --chart-8:  var(--color-drac-green-100);
+}
+
+/* ============================================
+   4. Contrast Verification
+   Run: npm run audit:contrast
+
+   All pairs verified via scripts/contrast-audit.mjs.
+   Targets: text 4.5:1 AA, borders 3:1 non-text, BDA 3.5x spacing.
+   ============================================ */

package/styles/index.css

@@ -0,0 +1,12 @@
+/* ============================================
+   slidev-theme-troshab — CSS Entry Point
+   ============================================
+
+   Slidev auto-detects this file (styles/index.css)
+   and loads all theme styles through base.css.
+
+   base.css imports colors.css via @import.
+   ============================================ */
+
+@import './base.css';
+@import './motion.css';