npm - @1agh/maude - Versions diffs - 0.17.1 → 0.18.0 - Mend

@1agh/maude 0.17.1 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/plugins/design/templates/design-system-inspiration/core/preview/colors-accent.html CHANGED Viewed

@@ -1,10 +1,10 @@
 <!--
 SPECIMEN: colors-accent
 DEMONSTRATES: --accent, --accent-hover, --accent-active, --accent-fg
-COMPOSITION: 4-state swatch grid + contextual button + link sample, demonstrating one-accent rule
+COMPOSITION: 4-state swatch grid + contextual button + link sample, demonstrating the project's accent strategy
 COPY VOICE: action verbs ("Save", "Confirm", "Continue") — never "Click here" / "Get Started"
 WHEN SCAFFOLDED: always (Core)
-NOTES: This is THE place to demonstrate one-accent rule. The card should NOT show any --accent2 variant. accent-fg must clear WCAG AA against the accent background.
+NOTES: Demonstrates the project's declared `accentStrategy` from config.json. For `single` (default) the card shows one accent family; for `paired` or `chromatic-N` the card should be extended to show every family. accent-fg must clear WCAG AA against the accent background.
 -->
 <!doctype html>
 <html lang="en">
@@ -17,7 +17,7 @@ NOTES: This is THE place to demonstrate one-accent rule. The card should NOT sho
 <body class="app" data-theme="dark">
   <main class="specimen">
     <h1>Accent</h1>
-    <p class="lede">One accent family — four states. The one-accent rule means: when something needs attention, the answer is always this color, never a competing second hue. Sub-states cover hover, active, and the readable foreground that sits on top of it.</p>
+    <p class="lede">Accent family — four states (idle / hover / active / foreground). The project's `accentStrategy` declaration in <code>config.json</code> controls how many families exist; this specimen renders one. Extend it horizontally for `paired` or `chromatic-N` projects so every declared family appears side-by-side.</p>
     <div class="grid">
       <div class="swatch"><div class="chip" style="background: var(--accent);"></div><div class="meta"><strong>--accent</strong>Idle</div></div>
@@ -41,7 +41,7 @@ NOTES: This is THE place to demonstrate one-accent rule. The card should NOT sho
     </div>
     <footer class="legend">
-      <p>The one-accent rule: no <code>--accent2</code>. Calls-to-attention should compete with each other through hierarchy and size, not through parallel hues.</p>
+      <p>Accent count follows <code>config.accentStrategy</code>. For `single` projects, calls-to-attention compete through hierarchy and size rather than parallel hues. For `paired` / `chromatic-N` projects, each declared family takes its own semantic role (e.g. <code>--accent</code> = primary action, <code>--accent-2</code> = exploratory). The completeness-critic gates the family count against the declared strategy.</p>
     </footer>
   </main>
 </body>

package/plugins/design/templates/design-system-inspiration/meta/presence-multiplayer.html CHANGED Viewed

@@ -4,7 +4,7 @@ DEMONSTRATES: forward-pointer to v1.x multiplayer features — live cursors with
 COMPOSITION: full mockup of a shared canvas with 3 cursors + awareness rail + typing indicator
 COPY VOICE: real names, real "X is editing" strings
 WHEN SCAFFOLDED: meta + presence family (typically v1.1+ projects with Yjs)
-NOTES: This is a forward-pointer specimen showing what the multiplayer UX looks like once Phase 8 (Yjs LAN) lands. The cursor color is per-user (hashed from user ID into an OKLCH band). Don't blink cursors — too noisy.
+NOTES: This is a forward-pointer specimen showing what the multiplayer UX looks like once Phase 8 (Yjs LAN) lands. Per-user cursor colors are illustrative only — the inline `oklch(...)` values below are NOT part of the project's design system. A real implementation should source per-user colors from a `--presence-user-*` family (token-driven) or derive from `--accent` via a deterministic hash on user ID. Don't blink cursors — too noisy.
 -->
 <!doctype html>
 <html lang="en">

package/plugins/design/templates/design-system-inspiration/platform-desktop/ui_kits-desktop-showcase.html CHANGED Viewed

@@ -132,6 +132,9 @@ NOTES:
         </div>
         <div class="spacer"></div>
         <input class="search" type="search" placeholder="search… (⌘ K)" />
+        <!-- Per-team accent picker. The inline `oklch(...)` values below are illustrative only — a real per-tenant
+             implementation should source team accents from a `--accent-team-*` family or compute analogous hues
+             from `--accent`. Don't hardcode tenant brand colors in the design system. -->
         <div class="accent-picker" role="group" aria-label="Accent">
           <button class="accent-swatch is-on" data-team="default" style="background: var(--accent);" aria-label="default"></button>
           <button class="accent-swatch" data-team="cyan" style="background: oklch(72% 0.16 220);" aria-label="cyan"></button>

package/plugins/design/templates/design-system-inspiration/platform-mobile/ui_kits-mobile-showcase.html CHANGED Viewed

@@ -22,7 +22,7 @@ NOTES:
   <link rel="stylesheet" href="../core/colors_and_type.css" />
   <link rel="stylesheet" href="../core/preview/_layout.css" />
   <style>
-    body { padding: 0; margin: 0; background: oklch(8% 0.005 60); display: grid; place-items: start center; min-height: 100vh; }
+    body { padding: 0; margin: 0; background: var(--bg-0); display: grid; place-items: start center; min-height: 100vh; }
     .specimen { max-width: none; margin: 0; padding: var(--space-5) 0; }
     .artboard {

package/plugins/design/templates/design-system-inspiration/theme-both/colors-themes-side-by-side.html CHANGED Viewed

@@ -28,7 +28,7 @@ NOTES: Both themes use the SAME tokens (--bg-0..4 etc.); only their OKLCH values
     <p class="lede">The exact same UI rendered in both themes. Tokens carry the difference; the HTML structure is identical. If a component renders differently across themes (beyond color), that's a token-resolution bug, not a per-theme design.</p>
     <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 16px;">
-      <div class="pane app" data-theme="dark" style="background: oklch(16% 0.012 245); color: oklch(96% 0.008 245);">
+      <div class="pane app" data-theme="dark" style="background: var(--bg-0); color: var(--fg-0);">
         <h2 style="margin: 0 0 16px;">Dark</h2>
         <div class="card">
           <h3>Match recap</h3>
@@ -40,20 +40,20 @@ NOTES: Both themes use the SAME tokens (--bg-0..4 etc.); only their OKLCH values
         </div>
       </div>
-      <div class="pane app" data-theme="light" style="background: oklch(98% 0.005 245); color: oklch(20% 0.012 245);">
+      <div class="pane app" data-theme="light" style="background: var(--bg-0); color: var(--fg-0);">
         <h2 style="margin: 0 0 16px;">Light</h2>
-        <div class="card" style="background: oklch(95% 0.005 245); border-color: oklch(82% 0.010 245);">
+        <div class="card">
           <h3>Match recap</h3>
-          <p class="meta" style="color: oklch(48% 0.012 245);">vs. Sparta U17 · 3-1</p>
+          <p class="meta">vs. Sparta U17 · 3-1</p>
           <div class="row" style="gap: 8px;">
             <button class="btn-primary">View</button>
-            <button class="btn-secondary" style="background: oklch(91% 0.005 245); color: oklch(20% 0.012 245); border-color: oklch(78% 0.010 245);">Share</button>
+            <button class="btn-secondary">Share</button>
           </div>
         </div>
       </div>
     </div>
-    <footer class="legend"><p>Inline OKLCH values here are just for the specimen; real projects swap them via <code>[data-theme="light"]</code> selectors in <code>colors_and_type.css</code>. The cascade carries every component without per-component theme overrides.</p></footer>
+    <footer class="legend"><p>Both panes use the same <code>var(--*)</code> tokens; only the <code>data-theme</code> attribute changes. Real projects define both themes inside <code>colors_and_type.css</code> via <code>[data-theme="dark"]</code> and <code>[data-theme="light"]</code> selectors. The cascade carries every component without per-component theme overrides.</p></footer>
   </main>
 </body>
 </html>

package/plugins/design/templates/design-system-inspiration/universal/components-dialogs.html CHANGED Viewed

@@ -15,7 +15,8 @@ NOTES: Modal blocks the page; sheet slides from edge; alert is for irreversible
   <link rel="stylesheet" href="../core/preview/_layout.css" />
   <style>
     .dialog-frame { background: var(--bg-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: 24px; position: relative; overflow: hidden; min-height: 220px; }
-    .dialog-frame .veil { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
+    /* Veil opacity is a base value, not a token (per foundations/opacity.html). Color-space-agnostic. */
+    .dialog-frame .veil { position: absolute; inset: 0; background: color-mix(in srgb, black 40%, transparent); }
     .dialog { background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); width: 360px; position: relative; }
     .dialog .title { font-family: var(--font-display); font-size: var(--type-lg); font-weight: 600; line-height: var(--lh-lg); margin: 0 0 8px; }
     .dialog .body  { color: var(--fg-1); margin: 0 0 var(--space-4); }
@@ -48,7 +49,7 @@ NOTES: Modal blocks the page; sheet slides from edge; alert is for irreversible
     <h2>Sheet</h2>
     <div class="dialog-frame">
-      <div class="veil" style="background: rgba(0,0,0,0.25);"></div>
+      <div class="veil" style="background: color-mix(in srgb, black 25%, transparent);"></div>
       <aside class="dialog dialog-sheet" role="dialog" aria-labelledby="sheet-t">
         <p class="title" id="sheet-t">Player details</p>
         <p class="body">#9 · Forward · Captain</p>

package/plugins/design/templates/design-system-inspiration/universal/logo.html CHANGED Viewed

@@ -19,7 +19,8 @@ NOTES:
   <style>
     body { padding: 24px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
     .frame { padding: 18px 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-1); }
-    .light { background: #ffffff; }
+    /* `.light` frame shows the mark on the opposite-theme surface — sourced from the project's tokens, not hardcoded white. */
+    .light { background: var(--bg-0-light, var(--bg-0)); }
     .label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 10px; display: block; }
   </style>
 </head>