@marioschmidt/design-system-components 1.4.4 → 1.5.0

package/dist/www/css/sportbild/theme.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.4.4
+ * BILD Design System Tokens v1.5.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Sportbild | Bundle: Theme (Color tokens + Effects for light/dark mode)
@@ -192,6 +192,20 @@
   --layer-opacity-100: var(--opacity-100, 1);
   --layer-opacity-00: var(--opacity-00, 0);
 
+  /* Semantic - Shadow - Soft */
+  --shadow-color-soft-ambient-sm: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
+  --shadow-color-soft-ambient-md: var(--color-neutral-0-a-3, rgba(0, 0, 0, 0.03));
+  --shadow-color-soft-ambient-lg: var(--color-neutral-0-a-3, rgba(0, 0, 0, 0.03));
+  --shadow-color-soft-ambient-xl: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
+  --shadow-color-soft-keyt-xl: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-key-sm: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
+  --shadow-color-soft-key-md: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
+  --shadow-color-soft-key-lg: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
+
+  /* Semantic - Shadow - Hard */
+  --shadow-color-hard-key: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --shadow-color-hard-ambient: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+
 }
 
 /* === DARK MODE === */
@@ -374,142 +388,72 @@
   --layer-opacity-100: var(--opacity-100, 1);
   --layer-opacity-00: var(--opacity-00, 0);
 
-}
-
-/* === EFFECTS === */
-
-/* Effects - Light */
-/* ============================================
-   CSS CUSTOM PROPERTIES
-   ============================================ */
-
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* dropshadowsoft */
-  --shadow-soft-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
-  --shadow-soft-md: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-xl: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
-  /* dropshadowhard */
-  --shadow-hard-sm: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-md: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
-  --shadow-hard-lg: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-xl: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-}
-
-/* ============================================
-   DROPSHADOWSOFT (Classes)
-   ============================================ */
+  /* Semantic - Shadow - Soft */
+  --shadow-color-soft-ambient-sm: var(--color-neutral-0-a-15, rgba(0, 0, 0, 0.15));
+  --shadow-color-soft-ambient-md: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-ambient-lg: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-ambient-xl: var(--color-neutral-0-a-15, rgba(0, 0, 0, 0.15));
+  --shadow-color-soft-keyt-xl: var(--color-neutral-0-a-30, rgba(0, 0, 0, 0.3));
+  --shadow-color-soft-key-sm: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --shadow-color-soft-key-md: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+  --shadow-color-soft-key-lg: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
 
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-sm,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-sm {
-  box-shadow: var(--shadow-soft-sm);
-}
-
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-md,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-md {
-  box-shadow: var(--shadow-soft-md);
-}
+  /* Semantic - Shadow - Hard */
+  --shadow-color-hard-key: var(--color-neutral-0-a-60, rgba(0, 0, 0, 0.6));
+  --shadow-color-hard-ambient: var(--color-neutral-0-a-30, rgba(0, 0, 0, 0.3));
 
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-lg,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-lg {
-  box-shadow: var(--shadow-soft-lg);
 }
 
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-xl,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-xl {
-  box-shadow: var(--shadow-soft-xl);
+/* === EFFECTS (Mode-agnostic) === */
+
+[data-color-brand="sportbild"],
+:host([data-color-brand="sportbild"]) {
+  --shadow-soft-sm: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-soft-key-sm), var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-sm);
+  --shadow-soft-md: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-1-p-5-x, 12px) var(--size-0-x, 0px) var(--shadow-color-soft-key-md), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-2-x, 16px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-md);
+  --shadow-soft-lg: 0px 8px 16px 0px var(--shadow-color-soft-key-lg), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-3-x, 24px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-lg);
+  --shadow-soft-xl: var(--size-0-x, 0px) var(--size-2-x, 16px) var(--size-4-x, 32px) var(--size-0-x, 0px) var(--shadow-color-soft-keyt-xl), var(--size-0-x, 0px) var(--size-0-x, 0px) var(--size-8-x, 64px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-xl);
+  --shadow-hard-sm: var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-25-x, 2px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-5-x, 4px) var(--size-0-p-125-x, 1px) var(--shadow-color-hard-ambient);
+  --shadow-hard-md: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-1-x, 8px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-ambient);
+  --shadow-hard-lg: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-75-x, 6px) var(--size-1-p-5-x, 12px) var(--size-0-p-5-x, 4px) var(--shadow-color-hard-ambient);
+  --shadow-hard-xl: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-1-p-5-x, 12px) var(--size-0-p-75-x, 6px) var(--shadow-color-hard-ambient);
 }
 
-
-/* ============================================
-   DROPSHADOWHARD (Classes)
-   ============================================ */
-
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-sm,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-sm {
-  box-shadow: var(--shadow-hard-sm);
-}
-
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-md,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-md {
-  box-shadow: var(--shadow-hard-md);
-}
-
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-lg,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-lg {
-  box-shadow: var(--shadow-hard-lg);
-}
-
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-xl,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-xl {
-  box-shadow: var(--shadow-hard-xl);
-}
-
-/* Effects - Dark */
-/* ============================================
-   CSS CUSTOM PROPERTIES
-   ============================================ */
-
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* dropshadowsoft */
-  --shadow-soft-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
-  --shadow-soft-md: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
-  --shadow-soft-xl: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
-  /* dropshadowhard */
-  --shadow-hard-sm: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-md: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
-  --shadow-hard-lg: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-  --shadow-hard-xl: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
-}
-
-/* ============================================
-   DROPSHADOWSOFT (Classes)
-   ============================================ */
-
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-sm,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-sm {
+[data-color-brand="sportbild"] .shadow-soft-sm,
+:host([data-color-brand="sportbild"]) .shadow-soft-sm {
   box-shadow: var(--shadow-soft-sm);
 }
 
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-md,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-md {
+[data-color-brand="sportbild"] .shadow-soft-md,
+:host([data-color-brand="sportbild"]) .shadow-soft-md {
   box-shadow: var(--shadow-soft-md);
 }
 
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-lg,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-lg {
+[data-color-brand="sportbild"] .shadow-soft-lg,
+:host([data-color-brand="sportbild"]) .shadow-soft-lg {
   box-shadow: var(--shadow-soft-lg);
 }
 
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-xl,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-xl {
+[data-color-brand="sportbild"] .shadow-soft-xl,
+:host([data-color-brand="sportbild"]) .shadow-soft-xl {
   box-shadow: var(--shadow-soft-xl);
 }
 
-
-/* ============================================
-   DROPSHADOWHARD (Classes)
-   ============================================ */
-
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-sm,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-sm {
+[data-color-brand="sportbild"] .shadow-hard-sm,
+:host([data-color-brand="sportbild"]) .shadow-hard-sm {
   box-shadow: var(--shadow-hard-sm);
 }
 
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-md,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-md {
+[data-color-brand="sportbild"] .shadow-hard-md,
+:host([data-color-brand="sportbild"]) .shadow-hard-md {
   box-shadow: var(--shadow-hard-md);
 }
 
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-lg,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-lg {
+[data-color-brand="sportbild"] .shadow-hard-lg,
+:host([data-color-brand="sportbild"]) .shadow-hard-lg {
   box-shadow: var(--shadow-hard-lg);
 }
 
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-xl,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-xl {
+[data-color-brand="sportbild"] .shadow-hard-xl,
+:host([data-color-brand="sportbild"]) .shadow-hard-xl {
   box-shadow: var(--shadow-hard-xl);
 }

package/dist/www/css/sportbild/tokens.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.4.4
+ * BILD Design System Tokens v1.5.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Sportbild | Bundle: Tokens (Responsive breakpoints + Typography + Density)
@@ -37,7 +37,7 @@
   --content-max-width-medium: 700px;
   --content-max-width-full: 1024px;
   --title-1-font-size: 24px;
-  --title-2-font-size: 16px;
+  --title-2-font-size: var(--font-size-2-x, 16px);
   --display-1-font-size: 38px;
   --display-2-font-size: 34px;
   --display-3-font-size: 27px;
@@ -46,18 +46,18 @@
   --headline-3-font-size: 30px;
   --headline-4-font-size: 21px;
   --body-font-size: 17px;
-  --label-3-font-size: 12px;
+  --label-3-font-size: var(--font-size-1-p-5-x, 12px);
   --label-2-font-size: 15px;
   --label-1-font-size: 17px;
-  --callout-1-font-size: 18px;
+  --callout-1-font-size: var(--font-size-2-p-25-x, 18px);
   --footnote-1-font-size: 13px;
   --footnote-2-font-size: 10px;
   --kicker-1-font-size: 20px;
   --kicker-2-font-size: 16px;
   --kicker-3-font-size: 16px;
   --kicker-4-font-size: 14px;
-  --subheadline-1-font-size: 18px;
-  --quote-font-size: 16px;
+  --subheadline-1-font-size: var(--font-size-2-p-25-x, 18px);
+  --quote-font-size: var(--font-size-2-x, 16px);
   --body-font-family: var(--font-family-inter, Inter);
   --callout-font-family: var(--font-family-antenna-cond, AntennaCond);
   --headline-font-family: var(--font-family-antenna-extra-cond, AntennaExtraCond);
@@ -243,20 +243,20 @@
     --canvas-width-size-app: 834px;
     --canvas-height-size-app: 1194px;
     --title-1-font-size: 28px;
-    --title-2-font-size: 18px;
+    --title-2-font-size: var(--font-size-2-p-25-x, 18px);
     --display-1-font-size: 68px;
     --display-2-font-size: 40px;
     --display-3-font-size: 30px;
     --headline-1-font-size: 60px;
     --headline-2-font-size: 44px;
     --headline-4-font-size: 26px;
-    --callout-1-font-size: 24px;
+    --callout-1-font-size: var(--font-size-3-x, 24px);
     --kicker-1-font-size: 26px;
     --kicker-2-font-size: 26px;
     --kicker-3-font-size: 20px;
     --kicker-4-font-size: 16px;
     --subheadline-1-font-size: 22px;
-    --quote-font-size: 18px;
+    --quote-font-size: var(--font-size-2-p-25-x, 18px);
     --body-line-height: 29.75px;
     --kicker-4-line-height: 17.6px;
     --kicker-3-line-height: 22px;

package/dist/www/icons/manifest.json

@@ -1,6 +1,6 @@
 {
-  "generatedAt": "2026-01-22T10:37:17.438Z",
-  "buildDuration": "4.74s",
+  "generatedAt": "2026-01-22T14:37:32.601Z",
+  "buildDuration": "4.89s",
   "inputDirectory": "/home/runner/work/bild-design-system/bild-design-system/packages/icons/src",
   "outputDirectories": {
     "svg": "/home/runner/work/bild-design-system/bild-design-system/packages/icons/svg/dist",

package/dist/www/index.html

@@ -1,4 +1,4 @@
-<!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> <!-- Design Token CSS Bundles (all brands for switching) --> <link rel="stylesheet" href="/css/bundles/bild.css"> <link rel="stylesheet" href="/css/bundles/sportbild.css"> <link rel="stylesheet" href="/css/bundles/advertorial.css"> <!-- Stencil Components --> <link rel="modulepreload" href="/build/p-B6bNw2Mp.js"><script type="module" data-stencil data-resources-url="/build/" data-stencil-namespace="bds">import{p as a,g as n,b as t}from"/build/p-B6bNw2Mp.js";export{s as setNonce}from"/build/p-B6bNw2Mp.js";(()=>{const n=import.meta.url,s={};return""!==n&&(s.resourcesUrl=new URL(".",n).href),a(s)})().then((async a=>(await n(),t([["p-8f02f575",[[257,"ds-button",{variant:[1],disabled:[4],icon:[1],iconPosition:[1,"icon-position"]}],[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}],[1,"ds-icon",{name:[1],basePath:[1,"base-path"],svgContent:[32]},null,{name:[{onNameChange:0}]}]]]],a))));
+<!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> <!-- Design Token CSS Bundles (all brands for switching) --> <link rel="stylesheet" href="/css/bundles/bild.css"> <link rel="stylesheet" href="/css/bundles/sportbild.css"> <link rel="stylesheet" href="/css/bundles/advertorial.css"> <!-- Stencil Components --> <link rel="modulepreload" href="/build/p--fLJB657.js"><script type="module" data-stencil data-resources-url="/build/" data-stencil-namespace="bds">import{p as a,g as n,b as t}from"/build/p--fLJB657.js";export{s as setNonce}from"/build/p--fLJB657.js";(()=>{const n=import.meta.url,s={};return""!==n&&(s.resourcesUrl=new URL(".",n).href),a(s)})().then((async a=>(await n(),t([["p-528d0d4c",[[257,"ds-button",{variant:[1],disabled:[4],icon:[1],iconPosition:[1,"icon-position"]}],[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}],[1,"ds-icon",{name:[1],basePath:[1,"base-path"],svgContent:[32]},null,{name:[{onNameChange:0}]}]]]],a))));
 </script> <script nomodule="" src="/build/bds.js" data-stencil></script> <style>* {
         box-sizing: border-box;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marioschmidt/design-system-components",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "BILD Design System Web Components - Stencil-based component library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",