@lmvz-ds/styles 0.22.1 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lmvz-ds/styles
 
+## 0.23.0
+
+### Minor Changes
+
+- 55e884f: Reset Bundle hinzugefügt
+
+### Patch Changes
+
+- 1f53b89: Buildprozess für @custom-media erweitert
+
 ## 0.22.1
 
 ## 0.22.0

package/README.md

@@ -79,6 +79,7 @@ Then switch with an HTML attribute on the root element:
 
 Import bundles only when you need global styling for native HTML elements:
 
+- @lmvz-ds/styles/bundles/reset.css — Browser reset and defensive base rules only (for advanced use cases).
 - @lmvz-ds/styles/bundles/typography.css
 - @lmvz-ds/styles/bundles/buttons.css
 - @lmvz-ds/styles/bundles/layout.css
@@ -102,6 +103,7 @@ Themes:
 
 Bundles:
 
+- @lmvz-ds/styles/bundles/reset.css
 - @lmvz-ds/styles/bundles/typography.css
 - @lmvz-ds/styles/bundles/buttons.css
 - @lmvz-ds/styles/bundles/layout.css

package/dist/bundles/buttons.css

@@ -1 +1 @@
-@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}}@layer lmvz-ds.theme;@layer lmvz-ds.components{button{--lmvz-button-color:var(--lmvz-component-color,var(--lmvz-semantic-color-int-on-primary));--lmvz-button-padding-inline:var(--lmvz-button-padding,var(--lmvz-component-input-md-padding-x));--lmvz-button-padding-block:var(--lmvz-button-padding,var(--lmvz-component-input-md-padding-y));--lmvz-button-gap:var(--lmvz-component-input-md-gap-x);--lmvz-button-font:var(--lmvz-typography-body-lg);--lmvz-button-radius:var(--lmvz-component-input-radius-default);--lmvz-button-border-width:0;--lmvz-button-border-color:transparent;--lmvz-button-background:var(--lmvz-semantic-color-int-primary);justify-content:center;align-items:center;gap:var(--lmvz-button-gap);padding-block:var(--lmvz-button-padding-block);padding-inline:var(--lmvz-button-padding-inline);border-radius:var(--lmvz-button-radius);border:var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);background-color:var(--lmvz-button-background);color:var(--lmvz-button-color);cursor:pointer;font:var(--lmvz-button-font);text-align:center;white-space:nowrap;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}button>*{font:inherit;color:inherit}button:focus-visible{outline:var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-on-active);outline-offset:var(--lmvz-component-input-sm-padding-x)}button:is([disabled],.disabled){cursor:not-allowed;pointer-events:none;opacity:var(--lmvz-component-input-disabled-opacity)}button:not([disabled]):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-primary-hover)}button:not([disabled]):active{--lmvz-button-background:var(--lmvz-semantic-color-int-primary-active)}button.secondary{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary);--lmvz-button-color:var(--lmvz-semantic-color-int-on-secondary);--lmvz-button-border-width:var(--lmvz-semantic-border-width-default);--lmvz-button-border-color:var(--lmvz-semantic-color-border-default)}button.secondary:not([disabled],.disabled):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary-hover);--lmvz-button-border-color:var(--lmvz-semantic-color-border-hover)}button.secondary:not([disabled],.disabled):active{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary-active);--lmvz-button-border-color:var(--lmvz-semantic-color-border-active)}button.tertiary{--lmvz-button-background:var(--lmvz-semantic-color-int-tertiary);--lmvz-button-color:var(--lmvz-semantic-color-int-on-tertiary)}button.tertiary:not([disabled],.disabled):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-tertiary-hover)}button.tertiary:not([disabled],.disabled):active{--lmvz-button-background:var(--lmvz-semantic-color-int-tertiary-active)}button.small{--lmvz-button-padding-inline:var(--lmvz-component-input-sm-padding-x);--lmvz-button-padding-block:var(--lmvz-component-input-sm-padding-y);--lmvz-button-gap:var(--lmvz-component-input-sm-gap-x);--lmvz-button-font:var(--lmvz-typography-body-md)}button.large{--lmvz-button-padding-inline:var(--lmvz-component-input-lg-padding-x);--lmvz-button-padding-block:var(--lmvz-component-input-lg-padding-y);--lmvz-button-gap:var(--lmvz-component-input-lg-gap-x);--lmvz-button-font:var(--lmvz-typography-body-lg)}}@layer lmvz-ds.overrides;
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}[hidden]{display:none!important}}@layer lmvz-ds.theme;@layer lmvz-ds.components{button{--lmvz-button-color:var(--lmvz-component-color,var(--lmvz-semantic-color-int-on-secondary));--lmvz-button-padding-inline:var(--lmvz-button-padding,var(--lmvz-component-input-md-padding-x));--lmvz-button-padding-block:var(--lmvz-button-padding,var(--lmvz-component-input-md-padding-y));--lmvz-button-gap:var(--lmvz-component-input-md-gap-x);--lmvz-button-font:var(--lmvz-typography-body-lg);--lmvz-button-radius:var(--lmvz-component-input-radius-default);--lmvz-button-border-width:0;--lmvz-button-border-color:transparent;--lmvz-button-background:var(--lmvz-semantic-color-int-secondary);justify-content:center;align-items:center;gap:var(--lmvz-button-gap);padding-block:var(--lmvz-button-padding-block);padding-inline:var(--lmvz-button-padding-inline);border-radius:var(--lmvz-button-radius);border:var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);background-color:var(--lmvz-button-background);color:var(--lmvz-button-color);cursor:pointer;font:var(--lmvz-button-font);text-align:center;white-space:nowrap;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}button>*{font:inherit;color:inherit}button:focus-visible{outline:var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-on-active);outline-offset:var(--lmvz-component-input-sm-padding-x)}button:is([disabled],.disabled){cursor:not-allowed;pointer-events:none;opacity:var(--lmvz-component-input-disabled-opacity)}button:not([disabled]):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary-hover)}button:not([disabled]):active{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary-active)}button.primary{--lmvz-button-background:var(--lmvz-semantic-color-int-primary);--lmvz-button-color:var(--lmvz-semantic-color-int-on-primary);--lmvz-button-border-width:0;--lmvz-button-border-color:transparent}button.primary:not([disabled],.disabled):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-primary-hover);--lmvz-button-border-color:var(--lmvz-semantic-color-border-hover)}button.primary:not([disabled],.disabled):active{--lmvz-button-background:var(--lmvz-semantic-color-int-primary-active);--lmvz-button-border-color:var(--lmvz-semantic-color-border-active)}button.secondary{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary);--lmvz-button-color:var(--lmvz-semantic-color-int-on-secondary);--lmvz-button-border-width:0;--lmvz-button-border-color:transparent}button.secondary:not([disabled],.disabled):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary-hover);--lmvz-button-border-color:var(--lmvz-semantic-color-border-hover)}button.secondary:not([disabled],.disabled):active{--lmvz-button-background:var(--lmvz-semantic-color-int-secondary-active);--lmvz-button-border-color:var(--lmvz-semantic-color-border-active)}button.tertiary{--lmvz-button-background:var(--lmvz-semantic-color-int-tertiary);--lmvz-button-color:var(--lmvz-semantic-color-int-on-tertiary)}button.tertiary:not([disabled],.disabled):hover{--lmvz-button-background:var(--lmvz-semantic-color-int-tertiary-hover)}button.tertiary:not([disabled],.disabled):active{--lmvz-button-background:var(--lmvz-semantic-color-int-tertiary-active)}button.small{--lmvz-button-padding-inline:var(--lmvz-component-input-sm-padding-x);--lmvz-button-padding-block:var(--lmvz-component-input-sm-padding-y);--lmvz-button-gap:var(--lmvz-component-input-sm-gap-x);--lmvz-button-font:var(--lmvz-typography-body-md)}button.large{--lmvz-button-padding-inline:var(--lmvz-component-input-lg-padding-x);--lmvz-button-padding-block:var(--lmvz-component-input-lg-padding-y);--lmvz-button-gap:var(--lmvz-component-input-lg-gap-x);--lmvz-button-font:var(--lmvz-typography-body-lg)}}@layer lmvz-ds.overrides;

package/dist/bundles/layout.css

@@ -1 +1 @@
-@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}}@layer lmvz-ds.theme;@layer lmvz-ds.components{footer{padding:var(--lmvz-dimension-8-11) 0;background:var(--lmvz-semantic-color-surface-secondary);flex-direction:row;justify-content:center;align-self:stretch;align-items:center;gap:1.75rem;display:flex}footer>*{font:var(--lmvz-typography-body-sm)}}@layer lmvz-ds.overrides;
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}[hidden]{display:none!important}}@layer lmvz-ds.theme;@layer lmvz-ds.components{footer{padding:var(--lmvz-dimension-8-11) 0;background:var(--lmvz-semantic-color-surface-secondary);flex-direction:row;justify-content:center;align-self:stretch;align-items:center;gap:1.75rem;display:flex}footer>*{font:var(--lmvz-typography-body-sm)}}@layer lmvz-ds.overrides;

package/dist/bundles/reset.css

@@ -0,0 +1 @@
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}[hidden]{display:none!important}}@layer lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides;

package/dist/bundles/typography.css

@@ -1 +1 @@
-@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}}@layer lmvz-ds.theme{:root,:host{--lmvz-typography-heading-4xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-4xl-font-size) / var(--lmvz-component-heading-4xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-2xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-2xl-font-size) / var(--lmvz-component-heading-2xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-heading-xl-font-size) / var(--lmvz-component-heading-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-lg:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-lg-font-size) / var(--lmvz-component-heading-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-md:var(--lmvz-global-font-weight-700) var(--lmvz-component-heading-md-font-size) / var(--lmvz-component-heading-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xl-font-size) / var(--lmvz-component-body-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-sm:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-sm-font-size) / var(--lmvz-component-body-sm-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xs-font-size) / var(--lmvz-component-body-xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-xs-font-size) / var(--lmvz-component-body-xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-2xs-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-2xs-font-size) / var(--lmvz-component-body-2xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-default:var(--lmvz-typography-body-md)}*{color:var(--lmvz-semantic-color-on-surface-primary);font:var(--lmvz-typography-body-md)}.body-xl{font:var(--lmvz-typography-body-xl);padding-bottom:var(--lmvz-component-body-xl-padding-bottom)}.body-lg{font:var(--lmvz-typography-body-lg);padding-bottom:var(--lmvz-component-body-lg-padding-bottom)}.body-md-strong{font:var(--lmvz-typography-body-md-strong);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-md{font:var(--lmvz-typography-body-md);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-sm{font:var(--lmvz-typography-body-sm);padding-bottom:var(--lmvz-component-body-sm-padding-bottom)}.body-xs{font:var(--lmvz-typography-body-xs);padding-bottom:var(--lmvz-component-body-xs-padding-bottom)}h1,.heading-4xl{font:var(--lmvz-typography-heading-4xl)}h1{padding-bottom:var(--lmvz-component-heading-4xl-padding-bottom)}h2,.heading-2xl{font:var(--lmvz-typography-heading-2xl)}h2{padding-bottom:var(--lmvz-component-heading-2xl-padding-bottom)}h3,.heading-xl{font:var(--lmvz-typography-heading-xl)}h3{padding-bottom:var(--lmvz-component-heading-xl-padding-bottom)}h4,.heading-lg{font:var(--lmvz-typography-heading-lg)}h4{padding-top:var(--lmvz-component-heading-lg-padding-top);padding-bottom:var(--lmvz-component-heading-lg-padding-bottom)}h5,.heading-md{font:var(--lmvz-typography-heading-md)}h5{padding-top:var(--lmvz-component-heading-md-padding-top);padding-bottom:var(--lmvz-component-heading-md-padding-bottom)}}@layer lmvz-ds.components,lmvz-ds.overrides;
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;@layer lmvz-ds.reset{body,h1,h2,h3,h4,h5,h6{margin:0}[hidden]{display:none!important}}@layer lmvz-ds.theme{:root,:host{--lmvz-typography-heading-4xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-4xl-font-size) / var(--lmvz-component-heading-4xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-2xl:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-2xl-font-size) / var(--lmvz-component-heading-2xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-heading-xl-font-size) / var(--lmvz-component-heading-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-lg:var(--lmvz-global-font-weight-500) var(--lmvz-component-heading-lg-font-size) / var(--lmvz-component-heading-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-heading-md:var(--lmvz-global-font-weight-700) var(--lmvz-component-heading-md-font-size) / var(--lmvz-component-heading-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xl:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xl-font-size) / var(--lmvz-component-body-xl-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-lg:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-lg-font-size) / var(--lmvz-component-body-lg-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-md:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-md-font-size) / var(--lmvz-component-body-md-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-sm:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-sm-font-size) / var(--lmvz-component-body-sm-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs:var(--lmvz-global-font-weight-400) var(--lmvz-component-body-xs-font-size) / var(--lmvz-component-body-xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-xs-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-xs-font-size) / var(--lmvz-component-body-xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-body-2xs-strong:var(--lmvz-global-font-weight-500) var(--lmvz-component-body-2xs-font-size) / var(--lmvz-component-body-2xs-line-height) var(--lmvz-string-font-family,"Arial");--lmvz-typography-default:var(--lmvz-typography-body-md)}*{color:var(--lmvz-semantic-color-on-surface-primary);font:var(--lmvz-typography-body-md)}.body-xl{font:var(--lmvz-typography-body-xl);padding-bottom:var(--lmvz-component-body-xl-padding-bottom)}.body-lg{font:var(--lmvz-typography-body-lg);padding-bottom:var(--lmvz-component-body-lg-padding-bottom)}.body-md-strong{font:var(--lmvz-typography-body-md-strong);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-md{font:var(--lmvz-typography-body-md);padding-bottom:var(--lmvz-component-body-md-padding-bottom)}.body-sm{font:var(--lmvz-typography-body-sm);padding-bottom:var(--lmvz-component-body-sm-padding-bottom)}.body-xs{font:var(--lmvz-typography-body-xs);padding-bottom:var(--lmvz-component-body-xs-padding-bottom)}h1,.heading-4xl{font:var(--lmvz-typography-heading-4xl)}h1{padding-bottom:var(--lmvz-component-heading-4xl-padding-bottom)}h2,.heading-2xl{font:var(--lmvz-typography-heading-2xl)}h2{padding-bottom:var(--lmvz-component-heading-2xl-padding-bottom)}h3,.heading-xl{font:var(--lmvz-typography-heading-xl)}h3{padding-bottom:var(--lmvz-component-heading-xl-padding-bottom)}h4,.heading-lg{font:var(--lmvz-typography-heading-lg)}h4{padding-top:var(--lmvz-component-heading-lg-padding-top);padding-bottom:var(--lmvz-component-heading-lg-padding-bottom)}h5,.heading-md{font:var(--lmvz-typography-heading-md)}h5{padding-top:var(--lmvz-component-heading-md-padding-top);padding-bottom:var(--lmvz-component-heading-md-padding-bottom)}}@layer lmvz-ds.components,lmvz-ds.overrides;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/styles",
   "private": false,
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "The styles of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
   "volta": {
@@ -28,13 +28,16 @@
     "url": "https://bitbucket.org/lmvz/lmvz-ds"
   },
   "devDependencies": {
+    "@csstools/postcss-global-data": "^4.0.0",
+    "postcss-custom-media": "^11.0.0",
+    "postcss-import": "^16.1.1",
     "rolldown": "1.0.0-rc.12",
     "rimraf": "^6.1.3",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-value-no-unknown-custom-properties": "6.1.1",
     "vite": "^8.0.9",
-    "@lmvz-ds/design-tokens": "~0.22.1",
+    "@lmvz-ds/design-tokens": "~0.23.0",
     "@lmvz-ds/lib-styles": "~0.16.0"
   },
   "gitHead": "aaec2215b0239d6fa4a5876af444e0b7abba2c7d",