@lmvz-ds/design-tokens 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lmvz-ds/design-tokens
 
+## 0.23.0
+
+### Minor Changes
+
+- 09e454c: Generierung von @custom-media Breakpoints aus Supernova Tokens hinzugefügt
+
+## 0.22.1
+
+### Patch Changes
+
+- 96010ab: Design Tokens aktualisiert
+
 ## 0.22.0
 
 ## 0.21.0

package/README.md

@@ -51,3 +51,62 @@ which will create CSS custom properties in the dist folder.
 ### Code Versioning
 
 Currently the changes have to be created and committed manually. As of October 2025, CI/CD-based sync is not possible due to our GitLab being hosted behind a VPN.
+
+## Responsive Breakpoint Custom Media
+
+This package generates a `dist/css/custom-media.css` artifact containing CSS custom media queries sourced from Supernova `naming.spec-breakpoint-*` tokens. Components and applications consume these aliases via a PostCSS plugin chain during their CSS build.
+
+The `@custom-media` artifact is a standard CSS custom media rule file that makes breakpoint values defined in Supernova available to component CSS. The file is generated automatically during the design-tokens build instead of manually maintained.
+
+### How to import as a consumer
+
+If your build pipeline consumes custom media queries, import the artifact:
+
+```javascript
+import '@lmvz-ds/design-tokens/css/custom-media.css';
+
+// Or via CSS @import (less common in modern bundlers)
+// @import '@lmvz-ds/design-tokens/css/custom-media';
+```
+
+### How to use in component CSS
+
+Component CSS uses breakpoint aliases in media queries via a PostCSS plugin chain:
+
+```css
+@media (--lmvz-bp-small) {
+  .my-component {
+    /* styles for small breakpoint and above */
+  }
+}
+```
+
+The PostCSS build resolves this to the concrete pixel value:
+
+```css
+@media (min-width: 768px) {
+  .my-component {
+    /* styles for small breakpoint and above */
+  }
+}
+```
+
+See `packages/components/stencil.config.base.ts` for the reference PostCSS plugin chain configuration. The key plugins are:
+
+1. `postcss-import` — inlines `@import` statements so all CSS is available to subsequent plugins.
+2. `@csstools/postcss-global-data` — makes `@custom-media` declarations globally available without emitting them to output.
+3. `postcss-custom-media` — resolves `@media (--lmvz-bp-*)` aliases to concrete media queries.
+
+Plugin order is load-bearing: reversing or skipping any step causes aliases to remain unresolved.
+
+### Naming convention
+
+All breakpoint aliases follow the pattern `--lmvz-bp-<size>`, where `<size>` is the trailing segment of the `naming.spec-breakpoint-*` token name (e.g., `spec-breakpoint-small` → `--lmvz-bp-small`).
+
+### Sentinel value handling
+
+Supernova currently defines `naming.spec-breakpoint-largest` as `"TV"` (a non-numeric placeholder for future expansion). The design-tokens build intentionally skips this value with a `console.warn` message. When Supernova provides a real pixel value, the alias appears automatically on the next build without code changes.
+
+### How to extend with new breakpoints
+
+Add a new token to Supernova matching the naming pattern `naming.spec-breakpoint-<size>` with a numeric pixel value. On the next design-tokens build, a new `--lmvz-bp-<size>` alias is generated. No code changes are needed.

package/dist/css/custom-media.css

@@ -0,0 +1,11 @@
+/**
+ * Generated by @lmvz-ds/design-tokens — do not edit.
+ * Source: tokens.json `naming.spec-breakpoint-*`
+ *
+ * Skipped tokens:
+ * --lmvz-bp-largest (value "TV" is non-numeric)
+ */
+@custom-media --lmvz-bp-large (min-width: 1920px);
+@custom-media --lmvz-bp-medium (min-width: 1440px);
+@custom-media --lmvz-bp-small (min-width: 768px);
+@custom-media --lmvz-bp-smallest (min-width: 402px);

package/dist/css/variables.base.css

@@ -425,20 +425,20 @@
   --lmvz-component-component-typography-body-lg-padding-bottom: var(--lmvz-dimension-10-13);
   --lmvz-component-component-typography-body-md-padding-bottom: var(--lmvz-dimension-4-10);
   --lmvz-component-component-typography-body-sm-padding-bottom: var(--lmvz-dimension-2-8);
-  --lmvz-component-box-padding-x: var(--lmvz-dimension-24-48);
-  --lmvz-component-box-padding-y: var(--lmvz-dimension-36-40);
-  --lmvz-component-form-wrapper-gap-x: var(--lmvz-dimension-4-10);
-  --lmvz-component-form-wrapper-gap-y: var(--lmvz-dimension-18-28);
-  --lmvz-component-form-wrapper-padding-y: var(--lmvz-dimension-6-10);
-  --lmvz-component-buttongroup-wrapper-gap-x: var(--lmvz-dimension-4-10);
-  --lmvz-component-buttongroup-wrapper-gap-y: var(--lmvz-dimension-18-28);
-  --lmvz-component-buttongroup-wrapper-padding-y: var(--lmvz-dimension-6-10);
+  --lmvz-component-modal-padding-x: var(--lmvz-dimension-24-48);
+  --lmvz-component-modal-padding-y: var(--lmvz-dimension-36-40);
   --lmvz-component-table-cell-padding-y: var(--lmvz-dimension-4-10);
   --lmvz-component-table-cell-padding-x: var(--lmvz-dimension-4-10);
   --lmvz-component-table-row-height: var(--lmvz-dimension-4-10);
   --lmvz-component-table-border-color: var(--lmvz-semantic-color-border-default);
   --lmvz-component-table-bg: var(--lmvz-semantic-color-surface-primary);
   --lmvz-component-table-header-bg: var(--lmvz-semantic-color-surface-secondary);
+  --lmvz-component-form-wrapper-gap-x: var(--lmvz-dimension-4-10);
+  --lmvz-component-form-wrapper-gap-y: var(--lmvz-dimension-18-28);
+  --lmvz-component-form-wrapper-padding-y: var(--lmvz-dimension-6-10);
+  --lmvz-component-buttongroup-wrapper-gap-x: var(--lmvz-dimension-4-10);
+  --lmvz-component-buttongroup-wrapper-gap-y: var(--lmvz-dimension-18-28);
+  --lmvz-component-buttongroup-wrapper-padding-y: var(--lmvz-dimension-6-10);
   --lmvz-component-input-sm-padding-x: var(--lmvz-dimension-8-12);
   --lmvz-component-input-sm-padding-y: var(--lmvz-dimension-8-12);
   --lmvz-component-input-sm-gap-x: var(--lmvz-dimension-4-10);
@@ -448,9 +448,9 @@
   --lmvz-component-input-lg-padding-x: var(--lmvz-dimension-14-20);
   --lmvz-component-input-lg-padding-y: var(--lmvz-dimension-14-20);
   --lmvz-component-input-lg-gap-x: var(--lmvz-dimension-4-10);
-  --lmvz-component-input-height-sm: var(--lmvz-dimension-36-40);
-  --lmvz-component-input-height-md: var(--lmvz-dimension-40-44);
-  --lmvz-component-input-height-lg: var(--lmvz-dimension-44-48);
+  --lmvz-component-input-size-sm: var(--lmvz-dimension-32-36);
+  --lmvz-component-input-size-md: var(--lmvz-dimension-40-44);
+  --lmvz-component-input-size-lg: var(--lmvz-dimension-44-48);
   --lmvz-component-input-padding-sm: var(--lmvz-dimension-12-14);
   --lmvz-component-input-padding-md: var(--lmvz-dimension-14-16);
   --lmvz-component-input-padding-lg: var(--lmvz-dimension-16-20);
@@ -470,7 +470,8 @@
   --lmvz-semantic-color-surface-input-primary: var(--lmvz-semantic-color-surface-primary);
   --lmvz-semantic-color-gradient-main-1: var(--lmvz-semantic-color-status-on-active);
   --lmvz-semantic-color-gradient-main-2: var(--lmvz-semantic-color-status-on-active);
-  --lmvz-component-box-radius: var(--lmvz-semantic-border-radius-xl);
+  --lmvz-component-modal-border-radius: var(--lmvz-semantic-border-radius-xl);
+  --lmvz-component-card-border-radius: var(--lmvz-semantic-border-radius-xl);
 }
 /**
  * Fluid ramp tokens generated from our global dimension scale tokens.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@lmvz-ds/design-tokens",
   "private": false,
   "type": "module",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
   "license": "UNLICENSED",
   "publishConfig": {