@siemens/ix 4.4.0 → 5.0.0

package/package.json

@@ -7,10 +7,14 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "4.4.0",
+  "version": "5.0.0",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -50,7 +54,7 @@
       "import": "./components/*.js"
     },
     "./components": {
-      "types": "./components/custom-elements.d.ts",
+      "types": "./components/index.d.ts",
       "import": "./components/index.js",
       "default": "./components/index.js"
     },
@@ -77,10 +81,11 @@
     "@siemens/ix-icons": "^3.3.0",
     "@stencil-community/eslint-plugin": "^0.10.0",
     "@stencil-community/postcss": "^2.2.0",
-    "@stencil/angular-output-target": "^1.3.0",
-    "@stencil/core": "^4.43.1",
-    "@stencil/react-output-target": "^1.4.2",
+    "@stencil/angular-output-target": "^1.3.1",
+    "@stencil/core": "^4.43.4",
+    "@stencil/react-output-target": "^1.5.0",
     "@stencil/sass": "^3.2.3",
+    "@stencil/vitest": "^1.11.3",
     "@stencil/vue-output-target": "^0.13.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.1",
@@ -109,10 +114,11 @@
     "start-server-and-test": "^2.0.12",
     "tsx": "^4.19.3",
     "typescript": "~5.4.5",
+    "vitest": "^4.1.4",
     "eslint-config-ix": "1.0.0"
   },
   "peerDependencies": {
-    "@siemens/ix-icons": "^3.2.0"
+    "@siemens/ix-icons": "^3.4.0"
   },
   "config": {
     "commitizen": {
@@ -130,7 +136,7 @@
     "start": "stencil build --dev --watch --serve",
     "test.setup": "playwright install chromium --with-deps",
     "test": "npm run test.spec && npm run test.ct",
-    "test.spec": "stencil test --spec",
+    "test.spec": "vitest run --config vitest.config.ts --project spec",
     "test.ct": "playwright test --config playwright.config.ts --reporter list",
     "generate": "stencil generate",
     "host-root": "http-server -a 127.0.0.1 -p 8080 -c-1"

package/scss/_core.scss

@@ -10,17 +10,8 @@
 @use 'theme/core/components' as components;
 @use 'mixins/reduce-motion' as rm;
 
-@use 'common-variables' as vars;
-
-/* Import global stylings for Web Components */
-@use './../src/components/toast/styles/toast-container';
-
-/* Legacy typography will be removed in 4.0.0 */
-@use 'legacy/mixins/fonts' as legacy-font-mixins;
-@use 'legacy/fonts' as legacy-fonts;
-
 /* Common */
-@use 'z-index';
+@use 'misc/z-index';
 
 /* Global legacy style components  */
 @use 'legacy/components/input';
@@ -34,39 +25,6 @@
 @use 'components/table';
 @use 'components/fonts';
 @use 'components/button-group';
+@use 'misc/normalize';
 
-@use 'mixins/scrollbar';
-@use 'mixins/fonts' as font-mixins;
-@use 'normalize';
-
-:root {
-  --ix-safe-area-inset-top: 0rem;
-  --ix-safe-area-inset-right: 0rem;
-  --ix-safe-area-inset-bottom: 0rem;
-  --ix-safe-area-inset-left: 0rem;
-}
-
-:not([data-ix-theme]) body:not([data-ix-theme]),
-[data-ix-theme] {
-  --animate-duration: var(--theme-default-time);
-  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
-  color: var(--theme-color-std-text);
-
-  @include common.setVars;
-  @include components.setComponentVars;
-  @include rm.reduce-motion;
-}
-
-body {
-  color: var(--theme-color-std-text);
-  background-color: var(--theme-color-1);
-  margin: 0;
-  @include font-mixins.typography-body;
-}
-
-body:not(.disable-scrollbar) {
-  @include scrollbar.scrollbar;
-}
+@use 'standalone';

package/scss/_standalone.scss

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@use 'theme/core/common' as common;
+@use 'theme/core/components' as components;
+@use 'mixins/reduce-motion' as rm;
+@use 'mixins/fonts' as font-mixins;
+@use 'mixins/scrollbar';
+
+:root {
+  --ix-safe-area-inset-top: 0rem;
+  --ix-safe-area-inset-right: 0rem;
+  --ix-safe-area-inset-bottom: 0rem;
+  --ix-safe-area-inset-left: 0rem;
+}
+
+[data-ix-theme] {
+  --animate-duration: var(--theme-default-time);
+  --theme-font-family: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  font-family: var(--theme-font-family);
+  color: var(--theme-color-std-text);
+
+  @include common.setVars;
+  @include components.setComponentVars;
+  @include rm.reduce-motion;
+}
+
+body {
+  color: var(--theme-color-std-text);
+  background-color: var(--theme-color-1);
+  margin: 0;
+  @include font-mixins.typography-body;
+}
+
+body:not(.disable-scrollbar) {
+  @include scrollbar.scrollbar;
+}

package/scss/components/_table.scss

@@ -18,7 +18,7 @@
   --bs-table-border-color: var(--theme-table--border-color);
   --bs-table-accent-bg: transparent;
   --bs-table-striped-color: var(--theme-table--color);
-  --bs-table-striped-bg: var(--theme-table-data-row-alt--background);
+  --bs-table-striped-bg: var(--theme-table-data-cell--background);
   --bs-table-active-color: var(--theme-table--color);
   --bs-table-active-bg: var(--theme-table-data-row-alt--background--active);
   --bs-table-hover-color: var(--theme-table--color);
@@ -43,6 +43,10 @@
 }
 
 .ix-table-striped > tbody > tr:nth-of-type(odd) > * {
+  --ix-table-background: var(--theme-table-data-cell--background);
+}
+
+.ix-table-striped > tbody > tr:nth-of-type(even) > * {
   --ix-table-background: var(--theme-table-data-row-alt--background);
 }
 

package/scss/ix-core.scss

@@ -6,6 +6,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/* Core Style */
 @use './core';

package/{dist/collection/components/menu-settings-item/menu-settings-item.css → scss/ix-standalone.scss}

@@ -1,12 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2026 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-:host {
-  display: block;
-}
+@use './standalone';

package/scss/legacy/components/_checkboxes.scss

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'common-variables' as vars;
+@use 'misc/common-variables' as vars;
 
 @mixin checkbox-basic() {
   $size: 1.125rem;

package/scss/legacy/components/_dropdown.scss

@@ -9,7 +9,7 @@
 
 @use 'mixins/hover';
 @use 'legacy/mixins/fonts';
-@use 'common-variables' as vars;
+@use 'misc/common-variables' as vars;
 
 .dropdown-group {
   margin: 0.687rem;

package/scss/legacy/components/_forms.scss

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'common-variables' as vars;
+@use 'misc/common-variables' as vars;
 @use 'mixins/hover';
 @use 'mixins/text-truncation';
 @use 'legacy/mixins/fonts';

package/scss/legacy/components/_modal.scss

@@ -8,7 +8,7 @@
  */
 
 @use 'legacy/mixins/fonts';
-@use 'common-variables' as vars;
+@use 'misc/common-variables' as vars;
 
 .modal {
   --bs-modal-footer-gap: 1rem;

package/scss/legacy/components/_radiobuttons.scss

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'common-variables' as vars;
+@use 'misc/common-variables' as vars;
 
 @mixin radio-basic() {
   $size: 1.25rem;

package/scss/legacy/mixins/_fonts.scss

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'common-variables' as vars;
+@use 'misc/common-variables' as vars;
 
 @mixin font-smoothing {
   -webkit-font-smoothing: antialiased;

package/scss/mixins/shadow-dom/_focus-visible.scss

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@mixin ix-focus-visible() {
+  outline: 1px solid var(--theme-color-focus-bdr) !important;
+  outline-offset: var(--theme-btn--focus--outline-offset) !important;
+}

package/scss/theme/classic/dark/_index.scss

@@ -15,7 +15,6 @@
 
 @use "./variables" as dark;
 
-body[class*="theme-classic-dark"],
 [data-ix-theme="classic"][data-ix-color-schema="dark"] {
   @include dark.setVars;
 }

package/scss/theme/classic/dark/_variables.scss

@@ -15,10 +15,10 @@
 @mixin setVars {
   --theme-alarm-bdr-1: 0.0625rem solid var(--theme-color-alarm);
   --theme-alarm-bdr-2: 0.125rem solid var(--theme-color-alarm);
-  --theme-body: 400 0.875rem/1.43 'Siemens Sans';
-  --theme-body-lg: 400 1rem/1.5 'Siemens Sans';
-  --theme-body-sm: 400 0.75rem/1.5 'Siemens Sans';
-  --theme-body-xs: 400 0.625rem/1.5 'Siemens Sans';
+  --theme-body: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+  --theme-body-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-body-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-body-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-lg) var(--theme-font-sans);
   --theme-chart-1: #00ffe7;
   --theme-chart-1-40: rgba(0, 255, 231, 0.4);
   --theme-chart-10: #b999ff;
@@ -59,9 +59,9 @@
   --theme-chart-ticks: rgba(255, 255, 255, 0.35);
   --theme-chart-tooltip-bdr: rgba(255, 255, 255, 0.25);
   --theme-chart-tooltip-fill: rgba(15, 22, 25, 0.8);
-  --theme-code: 400 0.875rem/1.5 'JetBrains Mono';
-  --theme-code-lg: 400 1rem/1.5 'JetBrains Mono';
-  --theme-code-sm: 400 0.75rem/1.5 'JetBrains Mono';
+  --theme-code: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-lg) var(--theme-font-code);
+  --theme-code-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-code);
+  --theme-code-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-code);
   --theme-color-0: rgba(0, 0, 0, 0);
   --theme-color-1: #0f1619;
   --theme-color-1--active: #222b2f;
@@ -157,7 +157,7 @@
   --theme-color-neutral--hover: #c8cacb;
   --theme-color-neutral-40: rgba(182, 184, 185, 0.4);
   --theme-color-primary: #00bde3;
-  --theme-color-primary--active: #00eaff;
+  --theme-color-primary--active: #00d3e5;
   --theme-color-primary--contrast: #000000;
   --theme-color-primary--disabled: rgba(0, 170, 204, 0.45);
   --theme-color-primary--hover: #1aecff;
@@ -192,29 +192,29 @@
   --theme-contrast-bdr-2: 0.125rem solid var(--theme-color-contrast-bdr);
   --theme-critical-bdr-1: 0.0625rem solid var(--theme-color-critical);
   --theme-critical-bdr-2: 0.125rem solid var(--theme-color-critical);
-  --theme-display: 400 1.5rem/1 'Siemens Sans';
-  --theme-display-lg: 400 1.8125rem/1 'Siemens Sans';
-  --theme-display-sm: 400 1.25rem/1 'Siemens Sans';
-  --theme-display-xl: 700 2.1875rem/1 'Siemens Sans';
-  --theme-display-xs: 400 1rem/1 'Siemens Sans';
-  --theme-display-xxl: 700 2.625rem/1 'Siemens Sans';
+  --theme-display: var(--theme-font-weight-normal) var(--theme-ms-3)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-lg: var(--theme-font-weight-normal) var(--theme-ms-4)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-sm: var(--theme-font-weight-normal) var(--theme-ms-2)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-xl: var(--theme-font-weight-bold) var(--theme-ms-5)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-xs: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-xxl: var(--theme-font-weight-bold) var(--theme-ms-6)/var(--theme-line-height-xs) var(--theme-font-sans);
   --theme-dynamic-bdr-1: 0.0625rem solid var(--theme-color-dynamic);
   --theme-dynamic-bdr-2: 0.125rem solid var(--theme-color-dynamic);
   --theme-font-code: 'JetBrains Mono';
   --theme-font-sans: 'Siemens Sans';
-  --theme-h1: 700 1.8125rem/1.2 'Siemens Sans';
-  --theme-h2: 700 1.5rem/1.43 'Siemens Sans';
-  --theme-h3: 700 1.25rem/1.5 'Siemens Sans';
-  --theme-h4: 700 1rem/1.5 'Siemens Sans';
-  --theme-h5: 700 0.875rem/1.43 'Siemens Sans';
-  --theme-h6: 700 0.75rem/1.5 'Siemens Sans';
+  --theme-h1: var(--theme-font-weight-bold) var(--theme-ms-4)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-h2: var(--theme-font-weight-bold) var(--theme-ms-3)/var(--theme-line-height-md) var(--theme-font-sans);
+  --theme-h3: var(--theme-font-weight-bold) var(--theme-ms-2)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-h4: var(--theme-font-weight-bold) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-h5: var(--theme-font-weight-bold) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+  --theme-h6: var(--theme-font-weight-bold) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-sans);
   --theme-info-bdr-1: 0.0625rem solid var(--theme-color-info);
   --theme-info-bdr-2: 0.125rem solid var(--theme-color-info);
   --theme-inset-shadow-1: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6);
-  --theme-label: 400 0.875rem/1.2 'Siemens Sans';
-  --theme-label-lg: 400 1rem/1.2 'Siemens Sans';
-  --theme-label-sm: 400 0.75rem/1.2 'Siemens Sans';
-  --theme-label-xs: 400 0.625rem/1.2 'Siemens Sans';
+  --theme-label: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-label-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-label-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-label-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-sm) var(--theme-font-sans);
   --theme-neutral-bdr-1: 0.0625rem solid var(--theme-color-neutral);
   --theme-neutral-bdr-2: 0.125rem solid var(--theme-color-neutral);
   --theme-primary-bdr-1: 0.0625rem solid var(--theme-color-primary);
@@ -231,22 +231,22 @@
   --theme-std-bdr-2: 0.125rem solid var(--theme-color-std-bdr);
   --theme-success-bdr-1: 0.0625rem solid var(--theme-color-success);
   --theme-success-bdr-2: 0.125rem solid var(--theme-color-success);
-  --theme-text-caption: 700 0.75rem/1.5 'Siemens Sans';
-  --theme-text-caption-single: 700 0.75rem/1 'Siemens Sans';
-  --theme-text-default: 400 0.875rem/1.429 'Siemens Sans';
-  --theme-text-default-single: 400 0.875rem/1.143 'Siemens Sans';
-  --theme-text-default-title: 700 0.875rem/1.429 'Siemens Sans';
-  --theme-text-default-title-single: 700 0.875rem/1.143 'Siemens Sans';
-  --theme-text-default-underline: 400 0.875rem/1.429 'Siemens Sans';
-  --theme-text-h2: 700 1.375rem/1.455 'Siemens Sans';
-  --theme-text-l: 400 1rem/1.5 'Siemens Sans';
-  --theme-text-l-single: 400 1rem/1.25 'Siemens Sans';
-  --theme-text-l-title: 700 1rem/1.5 'Siemens Sans';
-  --theme-text-l-title-single: 700 1rem/1.25 'Siemens Sans';
-  --theme-text-s: 400 0.75rem/1.5 'Siemens Sans';
-  --theme-text-s-single: 400 0.75rem/1.5 'Siemens Sans';
-  --theme-text-xl: 400 1.375rem/1.091 'Siemens Sans';
-  --theme-text-xs: 400 0.625rem/1.4 'Siemens Sans';
+  --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-font-sans);
+  --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-font-sans);
+  --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+  --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+  --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+  --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+  --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+  --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-font-sans);
+  --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+  --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+  --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+  --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+  --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-font-sans);
+  --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-font-sans);
+  --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-font-sans);
+  --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/140% var(--theme-font-sans);
   --theme-warning-bdr-1: 0.0625rem solid var(--theme-color-warning);
   --theme-warning-bdr-2: 0.125rem solid var(--theme-color-warning);
   --theme-weak-bdr-1: 0.0625rem solid var(--theme-color-weak-bdr);

package/scss/theme/classic/light/_index.scss

@@ -15,7 +15,6 @@
 
 @use "./variables" as light;
 
-body[class*="theme-classic-light"],
 [data-ix-theme="classic"][data-ix-color-schema="light"] {
   @include light.setVars;
 }

package/scss/theme/classic/light/_variables.scss

@@ -15,10 +15,10 @@
 @mixin setVars {
   --theme-alarm-bdr-1: 0.0625rem solid var(--theme-color-alarm);
   --theme-alarm-bdr-2: 0.125rem solid var(--theme-color-alarm);
-  --theme-body: 400 0.875rem/1.43 'Siemens Sans';
-  --theme-body-lg: 400 1rem/1.5 'Siemens Sans';
-  --theme-body-sm: 400 0.75rem/1.5 'Siemens Sans';
-  --theme-body-xs: 400 0.625rem/1.5 'Siemens Sans';
+  --theme-body: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+  --theme-body-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-body-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-body-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-lg) var(--theme-font-sans);
   --theme-chart-1: #008a7c;
   --theme-chart-1-40: rgba(0, 138, 124, 0.4);
   --theme-chart-10: #7c40ff;
@@ -59,9 +59,9 @@
   --theme-chart-ticks: rgba(0, 0, 0, 0.3);
   --theme-chart-tooltip-bdr: rgba(0, 0, 0, 0.2);
   --theme-chart-tooltip-fill: rgba(255, 255, 255, 0.8);
-  --theme-code: 400 0.875rem/1.5 'JetBrains Mono';
-  --theme-code-lg: 400 1rem/1.5 'JetBrains Mono';
-  --theme-code-sm: 400 0.75rem/1.5 'JetBrains Mono';
+  --theme-code: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-lg) var(--theme-font-code);
+  --theme-code-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-code);
+  --theme-code-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-code);
   --theme-color-0: rgba(255, 255, 255, 0);
   --theme-color-1: #ffffff;
   --theme-color-1--active: #e2e4e6;
@@ -154,7 +154,7 @@
   --theme-color-neutral: #66727e;
   --theme-color-neutral--active: #545e68;
   --theme-color-neutral--contrast: #ffffff;
-  --theme-color-neutral--hover: #66727e;
+  --theme-color-neutral--hover: #5b6671;
   --theme-color-neutral-40: rgba(102, 114, 126, 0.4);
   --theme-color-primary: #006e93;
   --theme-color-primary--active: #16565c;
@@ -192,29 +192,29 @@
   --theme-contrast-bdr-2: 0.125rem solid var(--theme-color-contrast-bdr);
   --theme-critical-bdr-1: 0.0625rem solid var(--theme-color-critical);
   --theme-critical-bdr-2: 0.125rem solid var(--theme-color-critical);
-  --theme-display: 400 1.5rem/1 'Siemens Sans';
-  --theme-display-lg: 400 1.8125rem/1 'Siemens Sans';
-  --theme-display-sm: 400 1.25rem/1 'Siemens Sans';
-  --theme-display-xl: 700 2.1875rem/1 'Siemens Sans';
-  --theme-display-xs: 400 1rem/1 'Siemens Sans';
-  --theme-display-xxl: 700 2.625rem/1 'Siemens Sans';
+  --theme-display: var(--theme-font-weight-normal) var(--theme-ms-3)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-lg: var(--theme-font-weight-normal) var(--theme-ms-4)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-sm: var(--theme-font-weight-normal) var(--theme-ms-2)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-xl: var(--theme-font-weight-bold) var(--theme-ms-5)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-xs: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-xs) var(--theme-font-sans);
+  --theme-display-xxl: var(--theme-font-weight-bold) var(--theme-ms-6)/var(--theme-line-height-xs) var(--theme-font-sans);
   --theme-dynamic-bdr-1: 0.0625rem solid var(--theme-color-dynamic);
   --theme-dynamic-bdr-2: 0.125rem solid var(--theme-color-dynamic);
   --theme-font-code: 'JetBrains Mono';
   --theme-font-sans: 'Siemens Sans';
-  --theme-h1: 700 1.8125rem/1.2 'Siemens Sans';
-  --theme-h2: 700 1.5rem/1.43 'Siemens Sans';
-  --theme-h3: 700 1.25rem/1.5 'Siemens Sans';
-  --theme-h4: 700 1rem/1.5 'Siemens Sans';
-  --theme-h5: 700 0.875rem/1.43 'Siemens Sans';
-  --theme-h6: 700 0.75rem/1.5 'Siemens Sans';
+  --theme-h1: var(--theme-font-weight-bold) var(--theme-ms-4)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-h2: var(--theme-font-weight-bold) var(--theme-ms-3)/var(--theme-line-height-md) var(--theme-font-sans);
+  --theme-h3: var(--theme-font-weight-bold) var(--theme-ms-2)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-h4: var(--theme-font-weight-bold) var(--theme-ms-1)/var(--theme-line-height-lg) var(--theme-font-sans);
+  --theme-h5: var(--theme-font-weight-bold) var(--theme-ms-0)/var(--theme-line-height-md) var(--theme-font-sans);
+  --theme-h6: var(--theme-font-weight-bold) var(--theme-ms--1)/var(--theme-line-height-lg) var(--theme-font-sans);
   --theme-info-bdr-1: 0.0625rem solid var(--theme-color-info);
   --theme-info-bdr-2: 0.125rem solid var(--theme-color-info);
   --theme-inset-shadow-1: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  --theme-label: 400 0.875rem/1.2 'Siemens Sans';
-  --theme-label-lg: 400 1rem/1.2 'Siemens Sans';
-  --theme-label-sm: 400 0.75rem/1.2 'Siemens Sans';
-  --theme-label-xs: 400 0.625rem/1.2 'Siemens Sans';
+  --theme-label: var(--theme-font-weight-normal) var(--theme-ms-0)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-label-lg: var(--theme-font-weight-normal) var(--theme-ms-1)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-label-sm: var(--theme-font-weight-normal) var(--theme-ms--1)/var(--theme-line-height-sm) var(--theme-font-sans);
+  --theme-label-xs: var(--theme-font-weight-normal) var(--theme-ms--2)/var(--theme-line-height-sm) var(--theme-font-sans);
   --theme-neutral-bdr-1: 0.0625rem solid var(--theme-color-neutral);
   --theme-neutral-bdr-2: 0.125rem solid var(--theme-color-neutral);
   --theme-primary-bdr-1: 0.0625rem solid var(--theme-color-primary);
@@ -231,22 +231,22 @@
   --theme-std-bdr-2: 0.125rem solid var(--theme-color-std-bdr);
   --theme-success-bdr-1: 0.0625rem solid var(--theme-color-success);
   --theme-success-bdr-2: 0.125rem solid var(--theme-color-success);
-  --theme-text-caption: 700 0.75rem/1.5 'Siemens Sans';
-  --theme-text-caption-single: 700 0.75rem/1 'Siemens Sans';
-  --theme-text-default: 400 0.875rem/1.429 'Siemens Sans';
-  --theme-text-default-single: 400 0.875rem/1.143 'Siemens Sans';
-  --theme-text-default-title: 700 0.875rem/1.429 'Siemens Sans';
-  --theme-text-default-title-single: 700 0.875rem/1.143 'Siemens Sans';
-  --theme-text-default-underline: 400 0.875rem/1.429 'Siemens Sans';
-  --theme-text-h2: 700 1.375rem/1.455 'Siemens Sans';
-  --theme-text-l: 400 1rem/1.5 'Siemens Sans';
-  --theme-text-l-single: 400 1rem/1.25 'Siemens Sans';
-  --theme-text-l-title: 700 1rem/1.5 'Siemens Sans';
-  --theme-text-l-title-single: 700 1rem/1.25 'Siemens Sans';
-  --theme-text-s: 400 0.75rem/1.5 'Siemens Sans';
-  --theme-text-s-single: 400 0.75rem/1.5 'Siemens Sans';
-  --theme-text-xl: 400 1.375rem/1.091 'Siemens Sans';
-  --theme-text-xs: 400 0.625rem/1.4 'Siemens Sans';
+  --theme-text-caption: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption) var(--theme-font-sans);
+  --theme-text-caption-single: var(--theme-font-weight-bold) var(--theme-font-size-caption)/var(--theme-line-height-caption-single) var(--theme-font-sans);
+  --theme-text-default: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+  --theme-text-default-single: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+  --theme-text-default-title: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+  --theme-text-default-title-single: var(--theme-font-weight-bold) var(--theme-font-size-default)/var(--theme-line-height-default-single) var(--theme-font-sans);
+  --theme-text-default-underline: var(--theme-font-weight-normal) var(--theme-font-size-default)/var(--theme-line-height-default) var(--theme-font-sans);
+  --theme-text-h2: var(--theme-font-weight-bold) var(--theme-font-size-xl)/var(--theme-line-height-h2) var(--theme-font-sans);
+  --theme-text-l: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+  --theme-text-l-single: var(--theme-font-weight-normal) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+  --theme-text-l-title: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l) var(--theme-font-sans);
+  --theme-text-l-title-single: var(--theme-font-weight-bold) var(--theme-font-size-l)/var(--theme-line-height-l-single) var(--theme-font-sans);
+  --theme-text-s: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s) var(--theme-font-sans);
+  --theme-text-s-single: var(--theme-font-weight-normal) var(--theme-font-size-s)/var(--theme-line-height-s-single) var(--theme-font-sans);
+  --theme-text-xl: var(--theme-font-weight-normal) var(--theme-font-size-xl)/var(--theme-line-height-xl) var(--theme-font-sans);
+  --theme-text-xs: var(--theme-font-weight-normal) var(--theme-font-size-xs)/140% var(--theme-font-sans);
   --theme-warning-bdr-1: 0.0625rem solid var(--theme-color-warning);
   --theme-warning-bdr-2: 0.125rem solid var(--theme-color-warning);
   --theme-weak-bdr-1: 0.0625rem solid var(--theme-color-weak-bdr);

package/scss/theme/classic/theme.scss

@@ -23,8 +23,9 @@
     @include as_dark_variables.setVars();
   }
 
-  body[class*='theme-classic'],
   [data-ix-theme='classic'] {
+    --theme-name: classic;
+    --theme-color-schema: dark;
     @include as_dark_variables.setVars();
   }
 }
@@ -35,8 +36,9 @@
     color-scheme: light;
   }
 
-  body[class*='theme-classic'],
   [data-ix-theme='classic'] {
+    --theme-name: classic;
+    --theme-color-schema: light;
     @include as_light_variables.setVars();
   }
 }
@@ -47,37 +49,29 @@
     color-scheme: light dark;
   }
 
-  :root,
-  html,
-  body {
-    &[data-ix-theme='classic'] {
-      &,
-      &[data-ix-color-schema='dark'] {
+  [data-ix-theme='classic'] {
+    --theme-name: classic;
+
+    &[data-ix-color-schema='dark'] {
+      --theme-color-schema: dark;
+      @include as_dark_variables.setVars();
+    }
+
+    &[data-ix-color-schema='light'] {
+      --theme-color-schema: light;
+      @include as_light_variables.setVars();
+    }
+
+    &[data-ix-color-schema='system'] {
+      @media (prefers-color-scheme: dark) {
+        --theme-color-schema: dark;
         @include as_dark_variables.setVars();
       }
 
-      &[data-ix-color-schema='light'] {
+      @media (prefers-color-scheme: light) {
+        --theme-color-schema: light;
         @include as_light_variables.setVars();
       }
-
-      &[data-ix-color-schema='system'] {
-        @media (prefers-color-scheme: dark) {
-          @include as_dark_variables.setVars();
-        }
-
-        @media (prefers-color-scheme: light) {
-          @include as_light_variables.setVars();
-        }
-      }
     }
   }
-
-  :not([data-ix-theme]) body:not([class*='theme-']):not([data-ix-theme]),
-  body[class*='theme-classic-dark'] {
-    @include as_dark_variables.setVars();
-  }
-
-  body[class*='theme-classic-light'] {
-    @include as_light_variables.setVars();
-  }
 }