@motir/design-system 0.8.2 → 0.10.0

package/theme.css

@@ -2522,6 +2522,49 @@
   }
 }
 
+/* Showcase fields under the chrome (motir.co's illustrations). The card rule
+   above repaints every card-radius panel with --el-surface, which turns a
+   showcase field — the deep ground, the accent field — into a grey panel with
+   its light text left on it. A showcase panel names its field with
+   `data-showcase="<field>"`; it keeps that fill under the chrome, and the deep
+   fields take a quieter streak and bevel so the light text keeps its contrast.
+   Palette-derived like every material rule here: the fills are the showcase
+   tokens, the sheen is the style's own achromatic white. */
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-showcase='field'] {
+    background-color: var(--el-showcase-field);
+  }
+  [data-showcase='ground'] {
+    background-color: var(--el-showcase-ground);
+  }
+  [data-showcase='ground-raised'] {
+    background-color: var(--el-showcase-ground-raised);
+  }
+  [data-showcase='decision'] {
+    background-color: var(--el-showcase-decision);
+  }
+  [data-showcase='record'] {
+    background-color: var(--el-showcase-record);
+  }
+  [data-showcase='wash'] {
+    background-color: var(--el-showcase-wash);
+  }
+  [data-showcase='wash-warm'] {
+    background-color: var(--el-showcase-wash-warm);
+  }
+  [data-showcase='paper'] {
+    background-color: var(--el-showcase-paper);
+  }
+  [data-showcase='field'],
+  [data-showcase='ground'],
+  [data-showcase='ground-raised'],
+  [data-showcase='decision'],
+  [data-showcase='record'] {
+    --retro-spec: 12%;
+    --retro-bevel-light: 10%;
+  }
+}
+
 /* Modal panel — the same chrome, with a deeper palette glow so the dialog
    separates cleanly from the grid behind it (and body text stays on the solid
    surface). Overrides the card-radius rule above for the modal radius. */
@@ -3860,6 +3903,91 @@
   --el-sidebar-item-bg-active: var(
     --color-background
   ); /* active row = canvas inset into the rail */
+
+  /* ── Product marks (motir.co's Products menu) ───────────────────────── */
+  /* The small square beside each product's name. One per product, each a
+     palette hue — or a mix of two, where the palette has fewer distinct hues
+     than there are products — so a palette re-skins all of them. */
+  --el-product-ai-planner: var(--color-primary);
+  --el-product-project-management: var(--color-accent-teal);
+  --el-product-project-manager: var(--color-accent);
+  --el-product-ai-debugging: var(--color-destructive);
+  --el-product-mcp: color-mix(in srgb, var(--color-primary) 55%, var(--color-destructive));
+  --el-product-cli: var(--color-charcoal);
+  --el-product-claude-code-connector: var(--color-accent-green);
+  --el-product-claude-code-plugin: color-mix(
+    in srgb,
+    var(--color-accent) 55%,
+    var(--color-accent-green)
+  );
+  --el-product-agent-fleet: color-mix(in srgb, var(--color-primary) 50%, var(--color-accent-teal));
+  --el-product-agent-hosting: var(--color-slate);
+  --el-product-sandbox: color-mix(in srgb, var(--color-accent) 45%, var(--color-charcoal));
+
+  /* ── Logo tile (the wave mark on its rounded square) ─────────────── */
+  /* The mark is the palette's identity hue — its primary FILL, the colour its
+     swatch shows — on a tile chosen so the mark reads: a pale wash of that hue
+     here; a palette whose identity hue is itself bright or pale sets a dark
+     tile in its own block. */
+  --el-logo-mark: var(--color-primary-fill);
+  --el-logo-tile: color-mix(in srgb, var(--color-primary-fill) 14%, var(--color-background));
+
+  /* ── Showcase (motir.co's illustrations) ─────────────────────── */
+  /* The marketing site draws its pictures as flat fields holding small
+     example screens ("Vibe the project" and "How Motir works"). These are
+     the pictures' own element tokens, named for what they paint — the
+     palette decides the colour. Each FIELD has a TEXT token that reads on it
+     in every palette and theme.
+       field     — the main picture field (the plan, the progress lanes);
+                   field-ink is that colour as text on paper
+       ground    — the deep ground (the project-manager panel, the design and
+                   run pictures), with its raised step, rule and muted text
+       highlight — the one bright touch, drawn on the ground and on the
+                   record field (the person's marks in the history)
+       decision  — a choice that waits on the person ("Your call")
+       record    — the history / learning field
+       wash      — the quiet pictures (docs, the written brief, memory)
+       wash-warm — the quiet warm picture (the plan gate)
+       paper     — the small screens inside the fields
+       wave-1..3 — the hero's moving wave lines */
+  --el-showcase-field: var(--color-primary);
+  --el-showcase-field-text: var(--color-background);
+  --el-showcase-field-ink: var(--color-primary);
+  --el-showcase-ground: var(--color-foreground);
+  --el-showcase-ground-text: var(--color-background);
+  --el-showcase-ground-muted: color-mix(
+    in srgb,
+    var(--color-background) 68%,
+    var(--color-foreground)
+  );
+  --el-showcase-ground-raised: color-mix(
+    in srgb,
+    var(--color-foreground) 90%,
+    var(--color-background)
+  );
+  --el-showcase-ground-rule: color-mix(
+    in srgb,
+    var(--color-foreground) 74%,
+    var(--color-background)
+  );
+  --el-showcase-highlight: color-mix(in srgb, var(--color-accent) 55%, var(--color-background));
+  --el-showcase-decision: color-mix(in srgb, var(--color-accent) 70%, var(--color-background));
+  --el-showcase-decision-text: var(--color-foreground);
+  --el-showcase-decision-ink: color-mix(in srgb, var(--color-accent) 65%, var(--color-foreground));
+  --el-showcase-record: color-mix(in srgb, var(--color-accent-teal) 72%, var(--color-foreground));
+  --el-showcase-record-text: var(--color-background);
+  --el-showcase-wash: var(--color-tint-sky);
+  --el-showcase-wash-warm: var(--color-tint-peach);
+  --el-showcase-paper: var(--color-background);
+  --el-showcase-paper-soft: var(--color-surface-soft);
+  --el-showcase-rule: var(--color-hairline);
+  --el-showcase-text: var(--color-foreground);
+  --el-showcase-muted: var(--color-slate);
+  /* The hero's wave lines: the three palette hues the moving colour band
+     cycles through — the accent, the teal, the warm accent. */
+  --el-showcase-wave-1: var(--color-primary);
+  --el-showcase-wave-2: var(--color-accent-teal);
+  --el-showcase-wave-3: var(--color-accent);
 }
 
 /* Dark-mode lift for the sidebar hover token. The other three --el-sidebar-*
@@ -3921,6 +4049,27 @@
      other concrete-hex --el-* alongside the sidebar hover. Light value (40%,
      == the prior bg-black/40) lives in the :root block above. */
   --el-overlay-scrim: #000000a6;
+  /* The logo in dark: the palette's dark primary — the lightened identity hue
+     built to read on a dark page — on a deep wash of it. */
+  --el-logo-mark: var(--color-primary);
+  --el-logo-tile: color-mix(in srgb, var(--color-primary) 18%, var(--color-background));
+  /* Showcase in dark (see the Tier-3 showcase block): the field is the
+     dark accent pulled halfway to the page, so it stays a saturated mid-tone
+     carrying LIGHT text; the ground stays dark instead of inverting — the
+     palette's recessed canvas, the one step below both page and surface; the decision and record fields carry the page's dark ink. */
+  --el-showcase-field: color-mix(in srgb, var(--color-primary) 45%, var(--color-background));
+  --el-showcase-field-text: var(--color-foreground);
+  --el-showcase-field-ink: color-mix(in srgb, var(--color-primary) 75%, var(--color-foreground));
+  --el-showcase-ground: var(--color-canvas);
+  --el-showcase-ground-text: var(--color-foreground);
+  --el-showcase-ground-muted: color-mix(in srgb, var(--color-foreground) 68%, var(--color-canvas));
+  --el-showcase-ground-raised: color-mix(in srgb, var(--color-canvas) 86%, var(--color-foreground));
+  --el-showcase-ground-rule: color-mix(in srgb, var(--color-canvas) 70%, var(--color-foreground));
+  --el-showcase-highlight: color-mix(in srgb, var(--color-accent) 70%, var(--color-foreground));
+  --el-showcase-decision: var(--color-accent);
+  --el-showcase-decision-text: var(--color-background);
+  --el-showcase-decision-ink: color-mix(in srgb, var(--color-accent) 80%, var(--color-foreground));
+  --el-showcase-record: var(--color-accent-teal);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════
@@ -4111,6 +4260,12 @@
   --el-status-in-review: var(--color-primary);
   --el-status-planning: var(--color-accent-teal);
   --el-type-design: var(--color-accent);
+  /* 2026-10 redesign — the logo and showcase roles the motir and bright
+     palettes override, restated so a scoped amethyst tile keeps the base. */
+  --el-logo-mark: var(--color-primary-fill);
+  --el-logo-tile: color-mix(in srgb, var(--color-primary-fill) 14%, var(--color-background));
+  --el-showcase-highlight: color-mix(in srgb, var(--color-accent) 55%, var(--color-background));
+  --el-showcase-decision: color-mix(in srgb, var(--color-accent) 70%, var(--color-background));
 }
 
 /* The base palette's DARK arm — only the tokens the global dark block
@@ -4148,6 +4303,12 @@
   --color-tint-sky: #1a2a3a;
   --color-tint-yellow: #3a341a;
   --el-sidebar-item-bg-hover: #222222;
+  /* 2026-10 redesign — the dark logo and showcase roles, restated (see the
+     light arm above). */
+  --el-logo-mark: var(--color-primary);
+  --el-logo-tile: color-mix(in srgb, var(--color-primary) 18%, var(--color-background));
+  --el-showcase-highlight: color-mix(in srgb, var(--color-accent) 70%, var(--color-foreground));
+  --el-showcase-decision: var(--color-accent);
 }
 
 /* The `motir` BASE type pairing, re-asserted (MOTIR-3933) — same reason as
@@ -4360,6 +4521,10 @@
    verified numerically + by rendered specimen, never eyeballed. See
    docs/palettes/motir.md for the colour-role reference. */
 [data-palette='motir'] {
+  /* The logo, kept as Motir has it: the cool-blue primary (its fill is the
+     ink CTA, not its identity hue) on a 28% wash of that blue. */
+  --el-logo-mark: var(--color-primary);
+  --el-logo-tile: color-mix(in srgb, var(--color-primary) 28%, var(--color-background));
   /* brand & primary — the high-contrast INK CTA + the single cool-blue accent.
      --color-primary is the accent AS text/icon/focus on a surface (the cool
      blue, AA on white & the slate surface); --color-primary-fill is the CTA
@@ -4470,6 +4635,15 @@
      every light surface. Set directly, as --el-sidebar-item-bg-hover is, since
      no Tier-0 source carries it. */
   --el-type-design: #746019;
+  /* The showcase highlight — the one bright touch on motir.co's illustration
+     ground. In Motir it is the palette's Sunglow yellow (the dark Design hue
+     below), and the same in both themes because the showcase ground stays dark
+     in both. Set directly, as --el-type-design is: Motir's yellow is a role
+     value of this palette, not a Tier-0 source other palettes would carry. */
+  --el-showcase-highlight: #ffd02f;
+  /* Motir's decision field is its warm accent at full strength — dark ink on
+     it is 4.9:1; the base mapping lightens the accent for darker palettes. */
+  --el-showcase-decision: var(--color-accent);
   /* progress bars take the warm accent instead of the ink CTA fill */
   --el-progress-fill: var(--color-accent);
   /* the editor's focus border / rings stay the blue focus hue — the accent they
@@ -4483,6 +4657,8 @@
    brighten to clear AA on near-black. */
 [data-theme='dark'] [data-palette='motir']:not([data-theme]),
 [data-palette='motir'][data-theme='dark'] {
+  --el-logo-mark: var(--color-primary); /* parity with the light block */
+  --el-logo-tile: color-mix(in srgb, var(--color-primary) 28%, var(--color-background));
   --color-background: #0c0d0f; /* stark cool near-black canvas */
   --color-foreground: #edeef0;
   --color-surface: #18191c; /* cool slate section */
@@ -4561,6 +4737,8 @@
      palette's dark --color-primary, Miro Sunglow #ffd02f: ΔE2000 27.5 from its
      nearest glyph neighbour, 10.0:1 or better on every dark surface. */
   --el-type-design: #ffd02f;
+  --el-showcase-highlight: #ffd02f; /* see the light block */
+  --el-showcase-decision: var(--color-accent);
   --el-progress-fill: var(--color-accent);
   --el-editor-focus: var(--color-primary);
 }
@@ -5002,6 +5180,9 @@
    clears WCAG AA (≥4.5 text; ≥3.0 icon/UI) in BOTH themes, verified
    numerically. See docs/palettes/amber.md. */
 [data-palette='amber'] {
+  /* The logo: this palette's identity hue is bright, so its mark sits on a
+     dark tile (the palette's ink) rather than a pale wash of itself. */
+  --el-logo-tile: var(--color-foreground);
   /* brand & primary — Binance Gold. The FILL carries DARK ink labels (yellow
      trap); --color-primary is a darkened gold used AS text/icon on a surface. */
   --color-primary: #7d6000; /* darkened gold as text/icon (5.92:1 on white — MOTIR-3774) */
@@ -5075,6 +5256,11 @@
    #0ECB81 / sell-red #F6465D. */
 [data-theme='dark'] [data-palette='amber']:not([data-theme]),
 [data-palette='amber'][data-theme='dark'] {
+  --el-logo-tile: color-mix(
+    in srgb,
+    var(--color-primary) 18%,
+    var(--color-background)
+  ); /* parity with the light block */
   --color-background: #0b0e11; /* Binance deepest trading-floor black */
   --color-foreground: #eaecef;
   --color-surface: #1e2329; /* Binance "Shark" card surface */
@@ -5149,6 +5335,9 @@
    clears WCAG AA in BOTH themes, verified numerically. See
    docs/palettes/sienna.md. */
 [data-palette='sienna'] {
+  /* The logo: this palette's identity hue is bright, so its mark sits on a
+     dark tile (the palette's ink) rather than a pale wash of itself. */
+  --el-logo-tile: var(--color-foreground);
   /* brand & primary — Mistral's flame. The FILL is Mistral Orange #fa520f with
      DARK ink labels; --color-primary is a darkened flame used AS text/icon. */
   --color-primary: #b53b09; /* darkened Mistral flame as text/icon (5.60:1 on the cream — MOTIR-3774) */
@@ -5231,6 +5420,11 @@
    to read as text, the fill a bright flame with dark-ink labels. */
 [data-theme='dark'] [data-palette='sienna']:not([data-theme]),
 [data-palette='sienna'][data-theme='dark'] {
+  --el-logo-tile: color-mix(
+    in srgb,
+    var(--color-primary) 18%,
+    var(--color-background)
+  ); /* parity with the light block */
   --color-background: #15120d; /* warm near-black canvas (from Mistral Black) */
   --color-foreground: #f5efe2;
   --color-surface: #1f1d17;
@@ -5451,6 +5645,9 @@
    clears WCAG AA in BOTH themes, verified numerically. See
    docs/palettes/citrine.md. */
 [data-palette='citrine'] {
+  /* The logo: this palette's identity hue is bright, so its mark sits on a
+     dark tile (the palette's ink) rather than a pale wash of itself. */
+  --el-logo-tile: var(--color-foreground);
   /* brand & primary — Miro Sunglow yellow (yellow-500). FILL carries DARK
      Stratos-ink labels (yellow trap); --color-primary is a documented dark
      yellow step (yellow-700) used AS text/icon on a surface. */
@@ -5549,6 +5746,11 @@
    clear AA on the dark canvas. All values are documented Mirotone steps. */
 [data-theme='dark'] [data-palette='citrine']:not([data-theme]),
 [data-palette='citrine'][data-theme='dark'] {
+  --el-logo-tile: color-mix(
+    in srgb,
+    var(--color-primary) 18%,
+    var(--color-background)
+  ); /* parity with the light block */
   --color-background: #090909; /* Miro black */
   --color-foreground: #f6f7f9; /* gray-50 */
   --color-surface: #1a1b1e; /* gray-900 */
@@ -5639,6 +5841,9 @@
    clears WCAG AA in BOTH themes, verified numerically. See
    docs/palettes/candy.md. */
 [data-palette='candy'] {
+  /* The logo: this palette's identity hue is bright, so its mark sits on a
+     dark tile (the palette's ink) rather than a pale wash of itself. */
+  --el-logo-tile: var(--color-foreground);
   /* brand & primary — a LIGHT bubblegum pink (Radix Pink). FILL is a light pink
      with DARK berry labels; --color-primary is the Pink-11 text step. */
   --color-primary: #b72682; /* Radix Pink-11 88% toward Pink-12 (5.81:1 on white — MOTIR-3774) */
@@ -5713,6 +5918,11 @@
    All values are documented Radix dark steps. */
 [data-theme='dark'] [data-palette='candy']:not([data-theme]),
 [data-palette='candy'][data-theme='dark'] {
+  --el-logo-tile: color-mix(
+    in srgb,
+    var(--color-primary) 18%,
+    var(--color-background)
+  ); /* parity with the light block */
   --color-background: #191117; /* Radix Pink dark-1 — pink-tinted black */
   --color-foreground: #eeeef0; /* Mauve dark-12 */
   --color-surface: #37172f; /* Pink dark-3 — candy-plum section */