@pure-ds/storybook 0.4.16 → 0.4.17

package/stories/foundations/MeshGradients.stories.js

@@ -1,298 +1,194 @@
-import { html } from 'lit';
+import { html } from "lit";
+import { highlight, getCurrentTheme, preloadShiki } from "../utils/shiki.js";
 
-const meshGradientStoryStyles = html`
-  <style>
-    .mesh-story {
-      padding: var(--spacing-4);
-      display: grid;
-      gap: var(--spacing-6);
-    }
-
-    .mesh-story__intro {
-      margin: 0 0 var(--spacing-6);
-    }
-
-    .mesh-story__grid {
-      display: grid;
-      gap: var(--spacing-6);
-    }
-
-    .mesh-story__grid--featured {
-      grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
-    }
-
-    .mesh-story__grid--tiles {
-      grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
-      gap: var(--spacing-4);
-    }
-
-    .mesh-story__panel,
-    .mesh-story__surface {
-      border-radius: var(--radius-lg);
-      border: 1px solid var(--color-border);
-    }
-
-    .mesh-story__panel {
-      position: relative;
-      padding: var(--spacing-6);
-      min-height: 12.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .mesh-story__panel--mesh-01 {
-      background: var(--background-mesh-01);
-    }
+// Pre-load Shiki
+preloadShiki();
 
-    .mesh-story__panel--mesh-02 {
-      background: var(--background-mesh-02);
-    }
-
-    .mesh-story__inner {
-      background: var(--color-surface-base);
-      padding: var(--spacing-4);
-      border-radius: var(--radius-md);
-      box-shadow: var(--shadow-md);
-      text-align: center;
-      display: grid;
-      gap: var(--spacing-2);
-    }
-
-    .mesh-story__inner-heading {
-      margin: 0;
-    }
-
-    .mesh-story__inner-subtitle {
-      margin: 0;
-      opacity: 0.7;
-    }
-
-    .mesh-story__tile {
-      position: relative;
-      padding: var(--spacing-5);
-      border-radius: var(--radius-md);
-      min-height: 9.375rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
+// Minimal story-specific styles - most layout handled by PDS classes
+const meshGradientsStoryStyles = html`
+  <style>
+    .story-mesh-demo {
       border: 1px solid var(--color-border);
-    }
-
-    .mesh-story__tile--mesh-03 {
-      background: var(--background-mesh-03);
-    }
-
-    .mesh-story__tile--mesh-04 {
-      background: var(--background-mesh-04);
-    }
-
-    .mesh-story__tile--mesh-05 {
-      background: var(--background-mesh-05);
-    }
-
-    .mesh-story__tile-icon {
-      opacity: 0.9;
-      margin-bottom: var(--spacing-2);
-    }
-
-    .mesh-story__tile-code {
-      font-size: 0.75rem;
-    }
-
-    .mesh-story__subheading {
-      margin: var(--spacing-6) 0 var(--spacing-2);
-    }
-
-    .mesh-story__hero {
-      background: var(--background-mesh-01);
-      padding: var(--spacing-8);
-      text-align: center;
-    }
 
-    .mesh-story__hero-text {
-      font-size: 1.25rem;
-      margin-top: var(--spacing-3);
+      &.card { min-height: 12.5rem; }
     }
-
-    .mesh-story__hero-actions {
-      display: flex;
-      justify-content: center;
-      gap: var(--spacing-3);
-      margin-top: var(--spacing-4);
-    }
-
-    .mesh-story__card-surface {
-      background: var(--background-mesh-03);
-      padding: var(--spacing-6);
-    }
-
-    .mesh-story__card-overlay {
-      padding: var(--spacing-6);
-      max-width: 31.25rem;
-    }
-
-    .mesh-story__action-button {
-      margin-top: var(--spacing-3);
-    }
-
-    .mesh-story__grid-surface {
-      background: var(--background-mesh-05);
-      padding: var(--spacing-6);
-    }
-
-    .mesh-story__feature-card {
-      padding: var(--spacing-5);
-      text-align: center;
-    }
-
-    .mesh-story__feature-heading {
-      margin-top: var(--spacing-2);
-    }
-
-    .mesh-story__code-block {
-      background: var(--color-surface-subtle);
-      padding: var(--spacing-4);
-      border-radius: var(--radius-md);
-      overflow-x: auto;
-    }
-
-    .mesh-story__list {
+    .story-variable-list {
       list-style: none;
       margin: 0;
       padding: 0;
-    }
-
-    .mesh-story__list-item {
-      padding: var(--spacing-2);
-      border-bottom: 1px solid var(--color-border);
-    }
 
-    .mesh-story__list-item:last-child {
-      border-bottom: 0;
+      li {
+        padding: var(--spacing-2) 0;
+        border-bottom: 1px solid var(--color-border);
+        &:last-child { border-bottom: 0; }
+      }
     }
   </style>
 `;
 
 const featuredMeshCards = [
   {
-    key: 'mesh-01',
-    title: 'Mesh 01',
-    description: 'Subtle radial blend'
+    key: "mesh-01",
+    title: "Mesh 01",
+    description: "Subtle radial blend",
   },
   {
-    key: 'mesh-02',
-    title: 'Mesh 02',
-    description: 'Corner accents'
-  }
+    key: "mesh-02",
+    title: "Mesh 02",
+    description: "Corner accents",
+  },
 ];
 
-const meshTileBackgrounds = ['mesh-03', 'mesh-04', 'mesh-05'];
+const meshTileBackgrounds = ["mesh-03", "mesh-04", "mesh-05"];
 
-const meshVariableList = ['mesh-01', 'mesh-02', 'mesh-03', 'mesh-04', 'mesh-05'];
+const meshVariableList = [
+  "mesh-01",
+  "mesh-02",
+  "mesh-03",
+  "mesh-04",
+  "mesh-05",
+];
 
 export default {
-  title: 'Foundations/Mesh Gradients',
-  tags: ['mesh', 'gradient', 'background', 'effect', 'decoration'],
+  title: "Foundations/Mesh Gradients",
+  tags: ["mesh", "gradient", "background", "effect", "decoration"],
   parameters: {
     pds: {
-      tags: ['mesh', 'gradient', 'background', 'effect', 'decoration', 'colors', 'theming']
+      tags: [
+        "mesh",
+        "gradient",
+        "background",
+        "effect",
+        "decoration",
+        "colors",
+        "theming",
+      ],
     },
     docs: {
       description: {
-        component: 'Beautiful mesh gradient backgrounds generated from your color palette. Automatically adapts to light and dark modes with 5 different variations.'
-      }
-    }
-  }
+        component:
+          "Beautiful mesh gradient backgrounds generated from your color palette. Automatically adapts to light and dark modes with 5 different variations.",
+      },
+    },
+  },
 };
 
 export const AllMeshGradients = () => html`
-  ${meshGradientStoryStyles}
-  <section class="mesh-story">
+  ${meshGradientsStoryStyles}
+  <section class="stack gap-lg">
     <header>
-    <h2>Mesh Gradient Backgrounds</h2>
-    <small class="text-muted">
-      Subtle, beautiful mesh gradient backgrounds using <code>--background-mesh-01</code> through <code>--background-mesh-05</code>. Toggle dark mode to see automatic adaptation.
-    </small>
+      <h2>Mesh Gradient Backgrounds</h2>
+      <small class="text-muted">
+        Subtle, beautiful mesh gradient backgrounds using
+        <code>--background-mesh-01</code> through
+        <code>--background-mesh-05</code>. Toggle dark mode to see automatic
+        adaptation.
+      </small>
     </header>
-    <div class="mesh-story__grid mesh-story__grid--featured">
-      ${featuredMeshCards.map(({ key, title, description }) => html`
-        <div class="mesh-story__panel mesh-story__panel--${key}">
-          <div class="mesh-story__inner">
-            <h4 class="mesh-story__inner-heading">${title}</h4>
-            <p class="mesh-story__inner-subtitle">${description}</p>
-          </div>
-        </div>
-      `)}
-    </div>
-    <div class="mesh-story__grid mesh-story__grid--tiles">
-      ${meshTileBackgrounds.map((meshKey) => html`
-        <div class="mesh-story__tile mesh-story__tile--${meshKey}">
-          <pds-icon icon="sparkle" size="xl" class="mesh-story__tile-icon"></pds-icon>
-          <code class="mesh-story__tile-code">${meshKey}</code>
-        </div>
-      `)}
+    <div class="stack-lg">
+      <div class="grid grid-auto-md gap-lg">
+        ${featuredMeshCards.map(
+          ({ key, title, description }) => html`
+            <div
+              class="card radius-lg flex items-center justify-center story-mesh-demo"
+              style="background: var(--background-${key});"
+            >
+              <div class="card surface-base shadow-md stack gap-xs text-center">
+                <h4>${title}</h4>
+                <p class="text-muted">${description}</p>
+              </div>
+            </div>
+          `
+        )}
+      </div>
+      <div class="flex gap-md">
+        ${meshTileBackgrounds.map(
+          (meshKey) => html`
+            <div
+              class="card stack-sm text-center"
+              style="background: var(--background-${meshKey});"
+            >
+              <pds-icon icon="sparkle" size="xl"></pds-icon>
+              <code>${meshKey}</code>
+            </div>
+          `
+        )}
+      </div>
     </div>
   </section>
 `;
 
-AllMeshGradients.storyName = 'All Mesh Gradients';
+AllMeshGradients.storyName = "All Mesh Gradients";
 
 export const MeshUsageExamples = () => html`
-  ${meshGradientStoryStyles}
-  <section class="mesh-story">
+  ${meshGradientsStoryStyles}
+  <section class="stack gap-lg">
     <h2>Usage Examples</h2>
 
-    <h3 class="mesh-story__subheading">Hero Section</h3>
-    <div class="mesh-story__surface mesh-story__hero">
+    <h3>Hero Section</h3>
+    <div
+      class="card radius-lg text-center story-mesh-demo"
+      style="background: var(--background-mesh-01);"
+    >
       <h1>Welcome to Pure Design System</h1>
-      <p class="mesh-story__hero-text">
-        Beautiful backgrounds generated from your color palette
-      </p>
-      <div class="mesh-story__hero-actions">
+      <p>Beautiful backgrounds generated from your color palette</p>
+      <nav class="flex justify-center gap-sm">
         <button class="btn-primary btn-lg">Get Started</button>
         <button class="btn-secondary btn-lg">Learn More</button>
-      </div>
+      </nav>
     </div>
 
-    <h3 class="mesh-story__subheading">Card with Mesh Background</h3>
-    <div class="mesh-story__surface mesh-story__card-surface">
-      <div class="card surface-elevated mesh-story__card-overlay">
+    <h3>Card with Mesh Background</h3>
+    <div
+      class="card radius-lg story-mesh-demo"
+      style="background: var(--background-mesh-03);"
+    >
+      <article class="card surface-elevated stack-sm max-w-md">
         <h4>Layered Design</h4>
-        <p>Mesh gradients work beautifully as backgrounds with overlaid content using surface tokens.</p>
-        <button class="btn-primary mesh-story__action-button">
-          <pds-icon icon="rocket"></pds-icon>
-          Take Action
-        </button>
-      </div>
+        <p>
+          Mesh gradients work beautifully as backgrounds with overlaid content
+          using surface tokens.
+        </p>
+        <nav>
+          <a href="#" class="btn btn-primary">
+            <pds-icon icon="rocket"></pds-icon>
+            Take Action
+          </a>
+        </nav>
+      </article>
     </div>
 
-    <h3 class="mesh-story__subheading">Grid Layout with Mesh</h3>
-    <div class="mesh-story__surface mesh-story__grid-surface">
+    <h3>Grid Layout with Mesh</h3>
+    <div
+      class="card radius-lg story-mesh-demo"
+      style="background: var(--background-mesh-05);"
+    >
       <div class="grid grid-cols-3 gap-md">
-        ${Array.from({ length: 3 }, (_, index) => html`
-          <div class="card surface-base mesh-story__feature-card">
-            <pds-icon icon="star" size="xl" class="icon-accent"></pds-icon>
-            <h5 class="mesh-story__feature-heading">Feature ${index + 1}</h5>
-            <p>Mesh backgrounds create visual interest without overwhelming content</p>
-          </div>
-        `)}
+        ${Array.from(
+          { length: 3 },
+          (_, index) => html`
+            <div class="card surface-translucent-75 stack-sm text-center">
+              <pds-icon icon="star" size="xl" class="icon-accent"></pds-icon>
+              <h5>Feature ${index + 1}</h5>
+              <p>
+                Mesh backgrounds create visual interest without overwhelming
+                content
+              </p>
+            </div>
+          `
+        )}
       </div>
     </div>
   </section>
 `;
 
-MeshUsageExamples.storyName = 'Usage Examples';
+MeshUsageExamples.storyName = "Usage Examples";
 
-export const CodeSamples = () => html`
-  ${meshGradientStoryStyles}
-  <section class="mesh-story">
-    <h2>Code Samples</h2>
+export const CodeSamples = () => {
+  const container = document.createElement("section");
+  container.className = "stack gap-lg";
 
-    <h3 class="mesh-story__subheading">Apply as Background</h3>
-    <pre class="mesh-story__code-block shiki github-dark"><code>/* Use CSS custom properties */
+  const cssCode = `/* Use CSS custom properties */
 .hero-section {
   background: var(--background-mesh-01);
 }
@@ -307,17 +203,32 @@ export const CodeSamples = () => html`
 .container {
   background-color: var(--color-surface-base);
   background-image: var(--background-mesh-02);
-}</code></pre>
+}`;
 
-    <h3 class="mesh-story__subheading">Available Variables</h3>
-    <ul class="mesh-story__list">
-      ${meshVariableList.map((meshKey) => html`
-        <li class="mesh-story__list-item">
-          <code>--background-${meshKey}</code>
-        </li>
-      `)}
+  const variablesList = meshVariableList
+    .map((key) => `<li><code>--background-${key}</code></li>`)
+    .join("\n      ");
+
+  container.innerHTML = /*html*/ `
+    ${meshGradientsStoryStyles.strings[0]}
+    <h2>Code Samples</h2>
+
+    <h3>Apply as Background</h3>
+    <div class="code-css"></div>
+
+    <h3>Available Variables</h3>
+    <ul class="story-variable-list">
+      ${variablesList}
     </ul>
-  </section>
-`;
+  `;
+
+  const theme = getCurrentTheme();
+
+  highlight(cssCode, "css", theme).then((h) => {
+    container.querySelector(".code-css").innerHTML = h;
+  });
+
+  return container;
+};
 
-CodeSamples.storyName = 'Code Samples';
+CodeSamples.storyName = "Code Samples";