rikiki-deck 0.1.0

package/themes/siliceum.css

@@ -0,0 +1,380 @@
+/* ════════════════════════════════════════════════════════════════
+   RIKIKI · Siliceum theme
+   Warm paper with a yellow accent. Source Sans Pro + JetBrains Mono.
+   Three layers: palette (private) → semantic (public) → component.
+   The semantic-layer names match rikiki.css 1:1 · only the underlying
+   values change. Components & decks don't care which theme is active.
+   ════════════════════════════════════════════════════════════════ */
+
+@import url('./siliceum-fonts.css');
+
+:root {
+  /* ─────────────────────────────────────────────────────────────
+     LAYER 1 · PALETTE
+     ───────────────────────────────────────────────────────────── */
+  --rik-palette-paper-0:   #ffffff;
+  --rik-palette-paper-50:  #fafaf8;
+  --rik-palette-paper-100: #f6f6f2;
+  --rik-palette-paper-200: #e5e5e0;
+
+  --rik-palette-ink-500:   #767676;
+  --rik-palette-ink-700:   #333333;
+  --rik-palette-ink-900:   #0a0a0a;
+
+  --rik-palette-night-900: #0a0a0a;
+  --rik-palette-night-800: #141414;
+  --rik-palette-night-700: #1d1d1d;
+  --rik-palette-night-600: #262626;
+  --rik-palette-night-500: #2f2f2f;
+  --rik-palette-night-400: #3a3a3a;
+  --rik-palette-night-100: #ffffff;
+
+  --rik-palette-mango-700: #a87e00;
+  --rik-palette-mango-500: #F7CB44;
+  --rik-palette-mango-200: rgba(247, 203, 68, 0.45);
+  --rik-palette-mango-100: rgba(247, 203, 68, 0.18);
+  --rik-palette-mango-50:  rgba(247, 203, 68, 0.05);
+
+  --rik-palette-ember-500: #dc2626;
+  --rik-palette-ember-200: rgba(220, 38, 38, 0.45);
+  --rik-palette-ember-100: rgba(220, 38, 38, 0.10);
+
+  --rik-palette-helico-500: #16a34a;
+  --rik-palette-helico-200: rgba(22, 163, 74, 0.45);
+  --rik-palette-helico-100: rgba(22, 163, 74, 0.08);
+
+  --rik-palette-warm-500:  #ea580c;
+  --rik-palette-warm-200:  rgba(234, 88, 12, 0.40);
+  --rik-palette-warm-100:  rgba(234, 88, 12, 0.08);
+
+  --rik-palette-orchid-500: #7c3aed;
+  --rik-palette-lime-500:   #84cc16;
+  --rik-palette-canary-500: #0891b2;
+
+  /* ─────────────────────────────────────────────────────────────
+     LAYER 2 · SEMANTIC
+     ───────────────────────────────────────────────────────────── */
+  --rik-surface-page:                 var(--rik-palette-paper-50);
+  --rik-surface-raised:               var(--rik-palette-paper-0);
+  --rik-surface-raised--strong:       var(--rik-palette-paper-0);
+  --rik-surface-sunken:               var(--rik-palette-paper-100);
+  --rik-surface-tint:                 rgba(0, 0, 0, 0.04);
+  --rik-surface-tint--strong:         rgba(0, 0, 0, 0.06);
+  --rik-surface-inverse:              var(--rik-palette-night-900);
+  --rik-surface-inverse--soft:        var(--rik-palette-night-800);
+  --rik-surface-inverse--soft-2:      var(--rik-palette-night-700);
+  --rik-surface-inverse--soft-3:      var(--rik-palette-night-600);
+  --rik-surface-inverse--soft-4:      var(--rik-palette-night-500);
+  --rik-surface-inverse--soft-5:      var(--rik-palette-night-400);
+  --rik-surface-inverse__overlay:     rgba(255, 255, 255, 0.04);
+
+  --rik-text-default:                 var(--rik-palette-ink-900);
+  --rik-text-default--muted:          var(--rik-palette-ink-700);
+  --rik-text-default--faint:          var(--rik-palette-ink-500);
+  --rik-text-inverse:                 #ffffff;
+  --rik-text-inverse--muted:          rgba(255, 255, 255, 0.70);
+  --rik-text-inverse--faint:          rgba(255, 255, 255, 0.55);
+  --rik-text-inverse--ghost:          rgba(255, 255, 255, 0.30);
+
+  --rik-border-default:               var(--rik-palette-paper-200);
+  --rik-border-default--subtle:       rgba(0, 0, 0, 0.05);
+  --rik-border-inverse:               rgba(255, 255, 255, 0.10);
+
+  --rik-accent:                       var(--rik-palette-mango-500);
+  --rik-accent--soft:                 var(--rik-palette-mango-100);
+  --rik-accent--faint:                var(--rik-palette-mango-50);
+  --rik-accent--strong:               var(--rik-palette-mango-700);
+  --rik-accent__on:                   var(--rik-palette-night-900);
+
+  --rik-status-success:               var(--rik-palette-helico-500);
+  --rik-status-success__bg:           var(--rik-palette-helico-100);
+  --rik-status-success__border:       var(--rik-palette-helico-200);
+
+  --rik-status-danger:                var(--rik-palette-ember-500);
+  --rik-status-danger__bg:            var(--rik-palette-ember-100);
+  --rik-status-danger__border:        var(--rik-palette-ember-200);
+
+  --rik-status-warn:                  var(--rik-palette-warm-500);
+  --rik-status-warn__bg:              var(--rik-palette-warm-100);
+  --rik-status-warn__border:          var(--rik-palette-warm-200);
+
+  --rik-status-info:                  var(--rik-palette-mango-500);
+  --rik-status-info__text:            var(--rik-palette-mango-700);
+  --rik-status-info__bg:              var(--rik-palette-mango-50);
+  --rik-status-info__bg--mid:         var(--rik-palette-mango-100);
+  --rik-status-info__bg--strong:      rgba(247, 203, 68, 0.18);
+  --rik-status-info__border:          var(--rik-palette-mango-200);
+
+  --rik-interactive-bg:               transparent;
+  --rik-interactive-bg--hover:        rgba(0, 0, 0, 0.04);
+  --rik-interactive-bg--active:       rgba(0, 0, 0, 0.07);
+  --rik-interactive-bg--selected:     var(--rik-accent--soft);
+  --rik-interactive-fg:               var(--rik-accent--strong);
+  --rik-interactive-fg--hover:        var(--rik-accent);
+
+  --rik-focus-ring:                   var(--rik-accent--strong);
+  --rik-focus-ring--width:            2px;
+  --rik-focus-ring--offset:           2px;
+
+  --rik-link:                         var(--rik-accent--strong);
+  --rik-link--hover:                  var(--rik-accent);
+  --rik-link--visited:                var(--rik-palette-orchid-500);
+
+  --rik-selection__bg:                var(--rik-accent);
+  --rik-selection__text:              var(--rik-palette-night-900);
+
+  --rik-decor-orchid:                 var(--rik-palette-orchid-500);
+  --rik-decor-lime:                   var(--rik-palette-lime-500);
+  --rik-decor-canary:                 var(--rik-palette-canary-500);
+
+  --rik-elevation-1:                  0 1px 2px rgba(0, 0, 0, 0.04);
+  --rik-elevation-2:                  0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
+  --rik-elevation-3:                  0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.06);
+
+  --rik-motion-fast:                  120ms;
+  --rik-motion-base:                  200ms;
+  --rik-motion-slow:                  400ms;
+  --rik-motion__ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
+  --rik-motion__ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
+  --rik-motion__ease-spring:          cubic-bezier(0.5, 1.8, 0.3, 1);
+
+  --rik-z-base:                       0;
+  --rik-z-sticky:                     200;
+  --rik-z-overlay:                    300;
+  --rik-z-modal:                      400;
+  --rik-z-toast:                      500;
+  --rik-z-tooltip:                    600;
+
+  --rik-font-sans:                    'Source Sans Pro', 'Inter', system-ui, sans-serif;
+  --rik-font-display:                 'Source Sans Pro', 'Inter', system-ui, sans-serif;
+  --rik-font-mono:                    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+
+  /* Type scale · modular ratio 1.25 (major third). T-shirt sizes + legacy
+     aliases share the same anchor 1rem. Same scale as rikiki.css. */
+  --rik-text-2xs:                     0.64rem;
+  --rik-text-xs:                      0.8rem;
+  --rik-text-sm:                      1rem;
+  --rik-text-base:                    1.25rem;
+  --rik-text-md:                      1.563rem;
+  --rik-text-lg:                      1.953rem;
+  --rik-text-xl:                      2.441rem;
+  --rik-text-2xl:                     3.052rem;
+  --rik-text-3xl:                     3.815rem;
+  --rik-text-4xl:                     4.768rem;
+
+  --rik-font-size-xs:                 var(--rik-text-2xs);
+  --rik-font-size-sm:                 var(--rik-text-xs);
+  --rik-font-size-body:               0.92rem;
+  --rik-font-size-lead:               var(--rik-text-sm);
+  --rik-font-size-h2:                 var(--rik-text-base);
+  --rik-font-size-h1:                 var(--rik-text-md);
+  --rik-font-size-section:            var(--rik-text-lg);
+  --rik-font-size-display:            var(--rik-text-xl);
+  --rik-font-size-mono:               0.88rem;
+  --rik-font-size-mono-sm:            var(--rik-text-xs);
+
+  --rik-font-size-strong:             var(--rik-text-base);
+  --rik-font-size-big:                var(--rik-text-lg);
+  --rik-font-size-mega:               var(--rik-text-2xl);  /* fixed: now > big */
+  --rik-font-size-hook:               clamp(2.2rem, 4.5vw, 3.8rem);
+  --rik-font-size-stat:               clamp(3.5rem, 7vw, 5.5rem);
+
+  --rik-space-hair:                   4px;
+  --rik-space-2xs:                    6px;
+  --rik-space-1:                      0.5rem;
+  --rik-space-2:                      0.75rem;
+  --rik-space-3:                      1rem;
+  --rik-space-4:                      1.5rem;
+  --rik-space-5:                      2.25rem;
+  --rik-space-6:                      3.5rem;
+
+  /* Siliceum stays austere · radius capped at 8px to feel "industrial paper" */
+  --rik-radius-xs:                    2px;
+  --rik-radius-sm:                    4px;
+  --rik-radius-md:                    6px;
+  --rik-radius-lg:                    8px;
+  --rik-radius-pill:                  9999px;
+
+  --rik-icon-xs:                      16px;
+  --rik-icon-sm:                      22px;
+  --rik-icon-md:                      28px;
+  --rik-icon-lg:                      40px;
+  --rik-icon-xl:                      56px;
+  --rik-icon-2xl:                     72px;
+
+  --rik-opacity-faint:                0.5;
+  --rik-opacity-soft:                 0.7;
+
+  --rik-slide-padding-y:              3.5rem;
+  --rik-slide-padding-x:              4rem;
+  --rik-title-block:                  4.5rem;
+
+  --rik-code__bg:                     #0f0f10;
+  --rik-code__border:                 #232325;
+  --rik-code__text:                   #f4f4f5;
+  --rik-code__syntax-comment:         #8b95a0;
+  --rik-code__syntax-keyword:         #c792ea;
+  --rik-code__syntax-string:          #c3e88d;
+  --rik-code__syntax-number:          #f78c6c;
+  --rik-code__syntax-type:            #ffcb6b;
+  --rik-code__syntax-property:        #80cbc4;
+  --rik-code__syntax-function:        #82aaff;
+}
+
+/* Reduced motion · zero durations, neutralize the spring ease.
+   WCAG 2.3.3 + vestibular safety. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --rik-motion-fast:                  0ms;
+    --rik-motion-base:                  0ms;
+    --rik-motion-slow:                  0ms;
+    --rik-motion__ease-spring:          var(--rik-motion__ease-out);
+  }
+}
+
+/* Minimal reset */
+*, *::before, *::after { box-sizing: border-box; }
+body, h1, h2, h3, h4, p, ul, ol, li, blockquote, pre, table, td, th,
+figure, dl, dd { margin: 0; padding: 0; }
+html { font-size: clamp(14px, 2.35vh, 42px); }
+html, body { width: 100%; height: 100%; overflow: hidden; background: var(--rik-surface-page); }
+body { font-family: var(--rik-font-sans); color: var(--rik-text-default); }
+
+::selection { background: var(--rik-selection__bg); color: var(--rik-selection__text); }
+
+/* Light-DOM helpers */
+.accent          { color: var(--rik-accent); }      /* bright yellow · for slides on dark; on paper, use --rik-link */
+.accent-danger   { color: var(--rik-status-danger); }
+.accent-warn     { color: var(--rik-status-warn); }
+.accent-success  { color: var(--rik-status-success); }
+.accent-orchid   { color: var(--rik-decor-orchid); }
+.accent-lime     { color: var(--rik-decor-lime); }
+
+.sub {
+  font-size: var(--rik-font-size-h2);
+  color: var(--rik-text-inverse--faint);
+  line-height: 1.45;
+  max-width: 60ch;
+}
+.display {
+  font-size: clamp(3rem, 7vw, 5.5rem);
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+}
+.display.danger      { color: var(--rik-status-danger); }
+.caption.on-dark     { color: var(--rik-text-inverse--faint); font-size: var(--rik-font-size-lead); }
+.lead {
+  font-size: var(--rik-font-size-lead);
+  color: var(--rik-text-default--faint);
+  line-height: 1.5;
+  max-width: 75ch;
+}
+
+deck-feature > h1,
+deck-split > h1,
+deck-feature-cards > h1 {
+  font-family: var(--rik-font-display);
+  font-size: var(--rik-font-size-h1);
+  font-weight: 700;
+  color: var(--rik-text-default);
+  letter-spacing: -0.018em;
+  line-height: 1.15;
+  margin-bottom: var(--rik-space-4);
+  padding-bottom: var(--rik-space-2);
+  border-bottom: 2px solid var(--rik-accent);
+  display: inline-block;
+  align-self: flex-start;
+}
+deck-cover > h1 {
+  font-size: clamp(3.6rem, 9vw, 8.5rem);
+  font-weight: 900;
+  color: var(--rik-text-inverse);
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  margin-bottom: var(--rik-space-4);
+}
+deck-section > h1 {
+  font-size: var(--rik-font-size-section);
+  font-weight: 900;
+  color: var(--rik-accent);
+  line-height: 1.02;
+  letter-spacing: -0.03em;
+  max-width: 18ch;
+  text-align: center;
+}
+deck-section > h1 em {
+  color: var(--rik-text-inverse--faint);
+  font-style: normal;
+  font-weight: 700;
+}
+
+deck-cover > .sub, deck-cover > p.sub {
+  display: block;
+  font-size: var(--rik-font-size-h2);
+  color: var(--rik-text-inverse--faint);
+  margin-bottom: var(--rik-space-6);
+  max-width: 60ch;
+  line-height: 1.45;
+}
+
+deck-feature > .lead,
+deck-split > .lead,
+deck-feature-cards > .lead {
+  display: block;
+  font-size: var(--rik-font-size-lead);
+  color: var(--rik-text-default--faint);
+  line-height: 1.5;
+  margin-bottom: var(--rik-space-4);
+  max-width: 75ch;
+}
+
+deck-feature code, deck-split code, deck-feature-cards code, deck-md code {
+  font-family: var(--rik-font-mono);
+  font-size: var(--rik-font-size-mono-sm);
+  background: var(--rik-surface-tint);
+  padding: 2px 6px;
+  border-radius: var(--rik-radius-sm);
+  color: var(--rik-text-default);
+}
+deck-code code { all: unset; }
+
+.card-text {
+  font-size: var(--rik-font-size-body);
+  color: var(--rik-text-default--muted);
+  line-height: 1.55;
+  margin: 0;
+}
+
+table.dense {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--rik-font-size-body);
+  border: 1px solid var(--rik-border-default);
+  border-radius: var(--rik-radius-md);
+  overflow: hidden;
+  background: var(--rik-surface-raised--strong);
+  box-shadow: var(--rik-elevation-2);
+}
+table.dense th {
+  text-align: left;
+  padding: 10px var(--rik-space-3);
+  color: var(--rik-text-default--faint);
+  font-size: var(--rik-font-size-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border-bottom: 1px solid var(--rik-border-default);
+  background: var(--rik-surface-sunken);
+}
+table.dense td {
+  padding: 10px var(--rik-space-3);
+  border-bottom: 1px solid var(--rik-border-default);
+  color: var(--rik-text-default--muted);
+  line-height: 1.4;
+}
+table.dense tr:last-child td { border-bottom: none; }
+table.dense td.ok  { color: var(--rik-status-success);  font-weight: 700; }
+table.dense td.no  { color: var(--rik-status-danger); }
+table.dense td.meh { color: var(--rik-status-warn); }

package/tokens.css

@@ -0,0 +1,10 @@
+/* ════════════════════════════════════════════════════════════════
+   RIKIKI · tokens entry point
+   Importing this file gives you the default Rikiki theme (tropical
+   greens & mango on paper, Unbounded + Inter + Space Mono via Google
+   Fonts). To pick a different look, import a theme directly:
+       <link rel="stylesheet" href="rikiki/themes/siliceum.css">
+   instead of this file.
+   ════════════════════════════════════════════════════════════════ */
+
+@import url('./themes/rikiki.css');