npm - @marioschmidt/design-system-tokens - Versions diffs - 1.0.67 → 1.0.68 - Mend

@marioschmidt/design-system-tokens 1.0.67 → 1.0.68

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 (1872) hide show

package/dist/stencil/www/host.config.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "hosting": {
+    "headers": [
+      {
+        "source": "/build/p-*",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31556952, s-maxage=31556952, immutable"
+          }
+        ]
+      }
+    ]
+  }
+}

package/dist/stencil/www/index.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BILD Design System - Stencil Components</title> <link rel="modulepreload" href="/build/p-B7bu6LKB.js"><script type="module" data-stencil data-resources-url="/build/" data-stencil-namespace="bds">import{p as a,g as t,b as r}from"/build/p-B7bu6LKB.js";export{s as setNonce}from"/build/p-B7bu6LKB.js";var e=()=>{const t=import.meta.url;const r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return a(r)};e().then((async a=>{await t();return r([["p-d7e8ddec",[[257,"ds-button",{variant:[1],disabled:[4]}],[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}]]]],a)}));
+//# sourceMappingURL=bds.esm.js.map
+</script> <script nomodule="" src="/build/bds.js" data-stencil></script> <style>* {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: system-ui, -apple-system, sans-serif;
+        margin: 0;
+        padding: 24px;
+        background: var(--surface-color-canvas, #F0F2F4);
+        min-height: 100vh;
+      }
+      h1, h2 {
+        color: var(--text-color-primary, #232629);
+        margin-top: 0;
+      }
+      .section {
+        margin-bottom: 48px;
+      }
+      .demo-row {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+      .brand-switcher {
+        position: fixed;
+        top: 16px;
+        right: 16px;
+        background: white;
+        padding: 16px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        z-index: 1000;
+      }
+      .brand-switcher label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: bold;
+      }
+      .brand-switcher select {
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        font-size: 14px;
+        width: 100%;
+      }
+      .card-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 24px;
+      }</style> </head> <body data-color-brand="bild" data-content-brand="bild" data-theme="light" data-density="default"> <div class="brand-switcher"> <label>Color Brand:</label> <select id="colorBrand" onchange="updateBrand()"> <option value="bild">BILD</option> <option value="sportbild">SportBILD</option> </select> <label style="margin-top: 12px;">Theme:</label> <select id="theme" onchange="updateBrand()"> <option value="light">Light</option> <option value="dark">Dark</option> </select> <label style="margin-top: 12px;">Content Brand:</label> <select id="contentBrand" onchange="updateBrand()"> <option value="bild">BILD</option> <option value="sportbild">SportBILD</option> <option value="advertorial">Advertorial</option> </select> <label style="margin-top: 12px;">Density:</label> <select id="density" onchange="updateBrand()"> <option value="default">Default</option> <option value="dense">Dense</option> <option value="spacious">Spacious</option> </select> </div> <h1>BILD Design System Components</h1> <p>Demo page for testing Stencil Web Components with design tokens.</p> <div class="section"> <h2>Buttons</h2> <h3>Primary</h3> <div class="demo-row"> <ds-button variant="primary">Primary Button</ds-button> <ds-button variant="primary" disabled="">Disabled</ds-button> </div> <h3>Secondary</h3> <div class="demo-row"> <ds-button variant="secondary">Secondary Button</ds-button> <ds-button variant="secondary" disabled="">Disabled</ds-button> </div> <h3>Tertiary</h3> <div class="demo-row"> <ds-button variant="tertiary">Tertiary Button</ds-button> <ds-button variant="tertiary" disabled="">Disabled</ds-button> </div> </div> <div class="section"> <h2>Cards</h2> <div class="card-grid"> <ds-card card-title="Primary Card"> <p style="margin: 0; color: var(--text-color-secondary, #6C757D);"> This is a card with the primary surface. It uses design tokens for styling. </p> <div style="margin-top: 16px;"> <ds-button variant="primary">Action</ds-button> </div> </ds-card> <ds-card card-title="Secondary Card" surface="secondary"> <p style="margin: 0; color: var(--text-color-secondary, #6C757D);"> This is a card with the secondary surface variant. </p> <div style="margin-top: 16px;"> <ds-button variant="secondary">Action</ds-button> </div> </ds-card> <ds-card> <p style="margin: 0; color: var(--text-color-primary, #232629);"> A card without a title, just content. </p> </ds-card> </div> </div> <script>
+      function updateBrand() {
+        const colorBrand = document.getElementById('colorBrand').value;
+        const contentBrand = document.getElementById('contentBrand').value;
+        const theme = document.getElementById('theme').value;
+        const density = document.getElementById('density').value;
+        document.body.dataset.colorBrand = colorBrand;
+        document.body.dataset.contentBrand = contentBrand;
+        document.body.dataset.theme = theme;
+        document.body.dataset.density = density;
+      }
+    </script> </body></html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@marioschmidt/design-system-tokens",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "BILD Design System Token Pipeline with Style Dictionary - Multi-brand design tokens for BILD, SportBILD, and Advertorial",
   "main": "dist/js/index.js",
   "module": "dist/js/index.js",
@@ -106,10 +106,13 @@
     "preprocess": "node scripts/tokens/preprocess.js",
     "build:tokens": "npm run preprocess && node scripts/tokens/build.js",
     "build:bundles": "node scripts/tokens/bundles.js",
+    "build:stencil": "stencil build --config build-config/stencil/stencil.config.ts",
+    "dev:stencil": "stencil build --dev --watch --serve --config build-config/stencil/stencil.config.ts",
     "build": "npm run build:tokens && npm run build:bundles",
+    "build:all": "npm run build && npm run build:stencil",
     "watch": "nodemon --watch src/design-tokens --ext json --exec npm run build:tokens",
     "clean": "rm -rf dist tokens",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build:all"
   },
   "repository": {
     "type": "git",
@@ -136,6 +139,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@stencil/core": "^4.38.3",
     "@svgr/core": "^8.1.0",
     "@types/react": "^19.2.7",
     "fantasticon": "^3.0.0",