@kern-ux/native - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

src/scss/themes/kern/_theme.scss

+/**
+ * @file _themes.scss
+ * @author Darko Pervan, [e-mail] / KERN-Team
+ * @author Tom Marienfeld, [e-mail] / KERN-Team
+ * @date 16.12.2024
+ * @modified 29.08.2025
+ * @@VERSION@@
+ * @brief Token für das KERN(Dachmarke) Theme.
+ *
+ * Diese Datei enthält Token, die das Theme definieren.
+ * Die Token werden an die core/tokens übergeben.  
+ * Variationen (Light und Dark).
+ */
+
+:root {
+   // --theme-metric-border-radius-default: var(--kern-4);
+}
+
+@mixin light-color {
+    /* action */
+    --theme-color-action-default: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --theme-color-action-on-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    --theme-color-action-visited: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
+    /* action-focus */
+    --theme-color-action-focus-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    --theme-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+    --theme-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
+
+    /* feedback */
+    --theme-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
+    --theme-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
+    --theme-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+    --theme-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+    --theme-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
+    --theme-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
+    --theme-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+    --theme-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+    /* feedback-loader */
+    --theme-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    --theme-color-feedback-loader-background: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));
+
+    /* form-inputs */
+    --theme-color-form-input-background: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
+    --theme-color-form-input-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    --theme-color-form-input-border: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
+
+    /* layout */
+    --theme-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
+
+    /* layout-text */
+    --theme-color-layout-text-default: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
+    --theme-color-layout-text-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
+    --theme-color-layout-text-muted: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+
+    /* layout-background */
+    --theme-color-layout-background-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    --theme-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
+    --theme-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));   
+}
+
+@mixin dark-colors {
+    /* action */
+    --theme-color-action-default: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+    --theme-color-action-on-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    --theme-color-action-visited: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));
+    /* action-focus */
+    --theme-color-action-focus-background: oklch(var(--kern-neutral-400-lightness) var(--kern-neutral-400-chroma) var(--kern-neutral-400-hue));
+    --theme-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+    --theme-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
+
+    /* feedback */
+    --theme-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
+    --theme-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
+    --theme-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+    --theme-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+    --theme-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
+    --theme-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
+    --theme-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+    --theme-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+    /* feedback-loader */
+    --theme-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
+    --theme-color-feedback-loader-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+
+    /* form-inputs */
+    --theme-color-form-input-background: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
+    --theme-color-form-input-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    --theme-color-form-input-border: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
+
+    /* layout */
+    --theme-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+
+    /* layout-text */
+    --theme-color-layout-text-default: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
+    --theme-color-layout-text-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
+    --theme-color-layout-text-muted: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
+
+    /* layout-background */
+    --theme-color-layout-background-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    --theme-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
+    --theme-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        @include dark-colors;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        @include light-color;
+    }
+}
+
+[data-kern-theme=light],
+.kern-light {
+    @include light-color;
+}
+
+[data-kern-theme=dark],
+.kern-dark {
+    @include dark-colors;
+}

src/scss/themes/kern/index.scss

+
+@import "../../core/index.scss";
+// @import "./theme"; // Diese Datei wird nicht verwendet, KERN Theme wird in core definiert

src/scss/themes/README.md

+# 📁 themes
+
+## Inhalt
+
+Dieser Ordner enthält Themes Verzeichnisse für:
+
+- **[kern]** - Enthält das Theme für KERN (Dachmarke).
+- **[dataport]** - Enthält das Theme für Dataport.
+- **[bw]** - Enthält das Theme für Baden-Württemberg.
+- **[sh]** - Enthält das Theme für Schleswig-Holstein.
+.
+
+## Hinweise
+
+- Dieser Ordner enthält Theme-Verzeichnisse.   
+Die inhalte der Themes sind für interne KERN zwecke gedacht und stellen keine entgültigen Theme-Farben dar!

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [2.3.1](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.3.0...v2.3.1) (2025-09-23)
+
+
+### Bug Fixes 
+
+* Card: rename kern-card--active to kern-card--interactive and deprecate old class [#174](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/174) ([8d3d688](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/8d3d688620ef4358af39434c77430a2518a2c63d)) 
+* nuget build Package export of wwwroot ([e98d98e](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/e98d98e6e3b81dcc293e6d7cb0b50e906fa5f25d)) 
+* Select: disabled state doesn't change label opacity anymore [#168](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/168) ([932460f](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/932460fd00aca4f362beb53881a0ff8b5556ffe3)) 
+* Typography: add sans-serif fallback to Fira Sans font variable [#165](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/165) ([dfa8e69](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/dfa8e69f243dd278716dd27a8f6fbe1313a1320a))
+* Select: fix select error display within the fieldset [#177](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/177) ([a45f19a3](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/commit/a45f19a389e6654671cec3e6ce3cdbfe1110b89f)) 
+
+
 # [2.3.0](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.2.0...v2.3.0) (2025-07-31)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@kern-ux/native",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Das Native Package beinhaltet alle zur Komponenten-Bibliothek gehörenden Styles.",
@@ -5,0 +5,0 @@ "author": "Kern-UX",

src/scss/core/components/_card.scss

@@ -6,3 +6,3 @@ /**
  * @date 29.11.2024
- * @modified 30.07.2025
+ * @modified 11.09.2025
  * @@VERSION@@
@@ -99,3 +99,5 @@ * @brief Styles für die Card-Komponente.
 
-  &--active {
+  // DEPRECATED: Die Klasse &--active ist veraltet und wird im nächsten Major-Release entfernt.
+  // Bitte stattdessen &--interactive verwenden.
+  &--active, &--interactive {
     position: relative;
@@ -102,0 +104,0 @@

src/scss/core/components/_dropdown.scss

@@ -6,3 +6,3 @@ /**
  * @date 16.12.2024
- * @modified 23.05.2025
+ * @modified 29.08.2025
  * @version 2.x.x
@@ -13,73 +13,125 @@ * @brief Styles für die Dropdown Komponente.
  * visuell darzustellen. Sie definiert das Grundaussehen.
- * Dropdown ist noch in der Entwicklungsphase und noch nicht teil des Framworks
+ *
+ * Dropdown ist noch in der Entwicklungsphase und nicht teil des Desingn System CSS-Framworks!!!
+ *
  */
 
+ @use "sass:map";
+
 .kern-dropdown {
+  position: relative;
 
-  details {
-    &[open] summary::before {
-      content: "";
-      width: 100vw;
-      height: 100vh;
-      position: fixed;
-      top: var(--kern-metric-space-none, 0px);
-      left: var(--kern-metric-space-none, 0px);
-      cursor: auto;
-    }
+  &[open] {
+    .kern-dropdown__header {
+      &::before {
+        content: "";
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: var(--kern-metric-space-none, 0px);
+        left: var(--kern-metric-space-none, 0px);
+        cursor: auto;
+      } 
+    } 
+  }
 
-    summary {
-      // font-family: var(--kern-typography-font-family-default, "Fira Sans");
-      // font-size: var(--kern-typography-font-size-static-medium, 18px);
+  &__header {
+    cursor: pointer;
+    list-style-type: none;
 
+    display: inline-flex;
+    min-height: var(--kern-metric-dimension-x-large, 48px);
+    justify-content: center;
+    align-items: center;
+    vertical-align: top;
+    gap: var(--kern-metric-space-none, 0px);
+    border: none;
+    border-radius: var(--kern-metric-border-radius-default, 4px);
+    @include body-default;
+    padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
+    color: var(--kern-color-action-default, #1A3DA5);
 
+    &::after {
+      content: '';
+      width: var(--kern-metric-dimension-default, 24px);
+      min-width: var(--kern-metric-dimension-default, 24px);
+      height: var(--kern-metric-dimension-default, 24px);
+      -webkit-mask: map.get($icons, "arrow-down");
+      mask: map.get($icons, "arrow-down");
+      mask-size: cover;
+      mask-repeat: no-repeat;
+      background-color: var(--kern-color-action-default, #1A3DA5);
+      @include forced-colors-style;
+    }
 
+    &:hover {
+      background: var(--kern-color-action-state-indicator-tint-hover-opacity);
       cursor: pointer;
-      list-style-type: none;
+    }
 
-      display: inline-flex;
-      min-height: var(--kern-metric-dimension-x-large, 48px);
-      justify-content: center;
-      align-items: center;
-      vertical-align: top;
-      gap: var(--kern-metric-space-none, 0px);
-      border: none;
-      border-radius: var(--kern-metric-border-radius-default, 4px);
-      @include body-default;
-      padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
+    .kern-label{
       color: var(--kern-color-action-default, #1A3DA5);
-      background: rgba(26, 61, 165, 0); // TODO: ändern
+      padding: var(--kern-metric-space-small, 8px);
+    } 
+  }
 
+  &__body{    
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    left: 0;
+    flex-direction: column;
+    border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
+    margin: 2px;
+    white-space: nowrap;
+    background: var(--kern-color-layout-background-default);
+    border-radius: var(--kern-metric-border-radius-default);
 
-      &:hover {
-        background: var(--kern-color-action-state-indicator-tint-hover);
-      }
+    .kern-list {
+      padding: 0;
+      
+      li {
+        margin-bottom: var(--kern-metric-space-none, 0px);
+        padding: 0.25rem 1rem 0.25rem 0;
+        list-style: none;
+        position: relative;
 
-    }
+        &:hover {
+          background: var(--kern-color-action-state-indicator-tint-hover-opacity);
+          cursor: pointer;
+        } 
 
-    summary+ul li label {
-      width: 100%;
-      display: block;
+        .kern-link {
+          text-decoration: none;
+        } 
 
-      input {
-        all: unset;
-      }
-    }
+        &:has(input:checked) {
+          &:before {
+            content: "";
+            -webkit-mask: map.get($icons, "check");
+            mask: map.get($icons, "check");
+            background-color: var(--kern-color-action-default, #1A3DA5);
+            position: absolute; 
+            top: 8px;
+            left: 8px;
+            width: 24px;
+            height: 24px;
+            @include forced-colors-style;
+          }  
+        } 
 
-    summary+ul li {
-      // width: 100%;
-      margin-bottom: var(--kern-metric-space-none, 0px);
-      padding: 1rem;
-      list-style: none;
-    }
+        label {
+          width: 100%;
+          display: block;
+          padding-left: 2.5rem;
+          color: var(--kern-color-action-default, #1A3DA5);
+    
+          input {
+            all: unset;
+          }
+        }
 
-    summary+ul {
-      display: flex;
-      z-index: 99;
-      position: absolute;
-      left: 0;
-      flex-direction: column;
-      // width: 100%;
-      border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
-    }
-  }
-}
+      }
+    } 
+  } 
+} 

src/scss/core/components/_select.scss

@@ -6,3 +6,3 @@ /**
  * @date 16.12.2024
- * @modified 30.07.2025
+ * @modified 23.09.2025
  * @@VERSION@@
@@ -16,129 +16,145 @@ * @brief Styles für die Form Select Komponenten.
 
- @use "sass:map";
+@use "sass:map";
 
- .kern-form-input {
- 
-   &:has(select[disabled]) {
-     opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
-     cursor: not-allowed;
- 
-     .kern-label {
-       cursor: not-allowed;
-     }
-   }
- 
-   &--error {
-     .kern-form-input__select-wrapper {
-       border-color: var(--kern-color-feedback-danger, #BD0F09);
-       background: var(--kern-color-feedback-danger-background, #FEECE8);
- 
-       &::after {
-         background-color: var(--kern-color-feedback-danger, #BD0F09);
-       }
- 
-       &:hover {
-         border-color: var(--kern-color-feedback-danger, #BD0F09);
-       }
-     }
-   }
- 
-   &__select-wrapper {
-     position: relative;
-     display: flex;
-     height: var(--kern-metric-dimension-x-large, 48px);
-     gap: var(--kern-metric-space-none, 0px);
-     align-self: stretch;
- 
-     border-radius: var(--kern-metric-border-radius-small, 2px);
-     border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
-     background: var(--kern-color-form-input-background, #F7F7F9);
+.kern-form-input {
+  &:has(select[disabled]) {
+    cursor: not-allowed;
 
-     @include forced-colors-border-1px;
- 
-     &:hover {
-       border-bottom: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
- 
-       .kern-form-input__select {
-         padding: var(--kern-metric-space-small, 8px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
-       
-         @media (forced-colors: active) {
-           padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
-         }
-       
+    .kern-label {
+      cursor: not-allowed;
+    }
+  }
+
+  &__select-wrapper {
+    &:has(.kern-form-input__select--error) {
+      border-color: var(--kern-color-feedback-danger, #bd0f09);
+      background: var(--kern-color-feedback-danger-background, #feece8);
+
+      &::after {
+        background-color: var(--kern-color-feedback-danger, #bd0f09);
+      }
+
+      &:hover {
+        border-color: var(--kern-color-feedback-danger, #bd0f09);
+      }
+    }
+
+    position: relative;
+    display: flex;
+    height: var(--kern-metric-dimension-x-large, 48px);
+    gap: var(--kern-metric-space-none, 0px);
+    align-self: stretch;
+
+    border-radius: var(--kern-metric-border-radius-small, 2px);
+    border-bottom: var(--kern-metric-border-width-default, 2px) solid
+      var(--kern-color-form-input-border, #171a2b);
+    background: var(--kern-color-form-input-background, #f7f7f9);
+
+    @include forced-colors-border-1px;
+
+    &:has(select[disabled]) {
+      opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
+    }
+
+    &:hover {
+      border-bottom: var(--kern-metric-border-width-bold, 4px) solid
+        var(--kern-color-form-input-border, #171a2b);
+
+      .kern-form-input__select {
+        padding: var(--kern-metric-space-small, 8px) var(--kern-40, 40px)
+          var(--kern-metric-baseline-body-default-padding-bottom, 2px)
+          var(--kern-metric-space-default, 16px);
+
+        @media (forced-colors: active) {
+          padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
+            var(--kern-40, 40px)
+            var(--kern-metric-baseline-body-default-padding-bottom, 2px)
+            var(--kern-metric-space-default, 16px);
         }
- 
-       &:has(.kern-form-input__select:focus) {
-         border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
- 
-         .kern-form-input__select {
-           padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
-         }
-       }
- 
-       &:has(select[disabled]) {
-         border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171A2B);
- 
-         .kern-form-input__select {
-           padding: var(--kern-metric-space-small, 6px) var(--kern-metric-space-default, 16px) var(--kern-4, 4px) var(--kern-metric-space-default, 16px);
-         }
-       }
- 
-     }
- 
-     &::after {
-       content: " ";
-       display: inline-block;
-       position: absolute;
-       right: var(--kern-metric-dimension-x-small, 16px);
-       top: var(--kern-metric-dimension-default, 24px);
- 
-       transform: translateY(-50%);
-       pointer-events: none;
-       width: var(--kern-metric-dimension-default, 24px);
-       height: var(--kern-metric-dimension-default, 24px);
-       -webkit-mask: map.get($icons, "arrow-down");
-       mask: map.get($icons, "arrow-down");
-       background-color: var(--kern-color-action-default);
+      }
 
+      &:has(.kern-form-input__select:focus) {
+        border-bottom: var(--kern-metric-border-width-default, 2px) solid
+          var(--kern-color-form-input-border, #171a2b);
+
+        .kern-form-input__select {
+          padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
+            var(--kern-40, 40px)
+            var(--kern-metric-baseline-body-default-padding-bottom, 2px)
+            var(--kern-metric-space-default, 16px);
+        }
+      }
+
+      &:has(select[disabled]) {
+        border-bottom: var(--kern-metric-border-width-default, 2px) solid
+          var(--kern-color-form-input-border, #171a2b);
+
+        .kern-form-input__select {
+          padding: var(--kern-metric-space-small, 6px)
+            var(--kern-metric-space-default, 16px) var(--kern-4, 4px)
+            var(--kern-metric-space-default, 16px);
+        }
+      }
+    }
+
+    &::after {
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      right: var(--kern-metric-dimension-x-small, 16px);
+      top: var(--kern-metric-dimension-default, 24px);
+
+      transform: translateY(-50%);
+      pointer-events: none;
+      width: var(--kern-metric-dimension-default, 24px);
+      height: var(--kern-metric-dimension-default, 24px);
+      -webkit-mask: map.get($icons, "arrow-down");
+      mask: map.get($icons, "arrow-down");
+      background-color: var(--kern-color-action-default);
+
       @include forced-colors-style;
-     }
-   }
- 
-   &__select {
-     background-color: transparent;
-     box-sizing: border-box;
-     width: 100%;
-     border: none;
-     appearance: none;
-     text-overflow: ellipsis;
-     overflow: hidden;
- 
-     @include body-default;
- 
-     padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px);
- 
-     &:focus {
-       border-radius: var(--kern-metric-border-radius-small, 2px);
-       outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border, #171A2B);
-       background: var(--kern-color-form-input-background, #F7F7F9);
-       border: none;
-     }
- 
-     &--error {
-       &:focus {
-         outline-color: var(--kern-color-feedback-danger, #BD0F09);
-         background: var(--kern-color-feedback-danger-background, #FEECE8);
-       }
-     }
- 
-     option {
-       margin: 40px;
-       background: var(--kern-color-form-input-background, #F7F7F9);
-     }
- 
-     &[disabled],
-     &[disabled="disabled"] {
-       cursor: not-allowed;
-     }
-   }
- }
+    }
+  }
+
+  &__select {
+    background-color: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    border: none;
+    appearance: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    @include body-default;
+
+    padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
+      var(--kern-40, 40px)
+      var(--kern-metric-baseline-body-default-padding-bottom, 2px)
+      var(--kern-metric-space-default, 16px);
+
+    &:focus {
+      border-radius: var(--kern-metric-border-radius-small, 2px);
+      outline: var(--kern-metric-border-width-bold, 4px) solid
+        var(--kern-color-form-input-border, #171a2b);
+      background: var(--kern-color-form-input-background, #f7f7f9);
+      border: none;
+    }
+
+    &--error {
+      &:focus {
+        outline-color: var(--kern-color-feedback-danger, #bd0f09);
+        background: var(--kern-color-feedback-danger-background, #feece8);
+      }
+    }
+
+    option {
+      margin: 40px;
+      background: var(--kern-color-form-input-background, #f7f7f9);
+    }
+
+    &[disabled],
+    &[disabled="disabled"] {
+      cursor: not-allowed;
+    }
+  }
+}

src/scss/core/tokens/_theme.scss

@@ -6,7 +6,9 @@ /**
  * @date 16.12.2024
- * @modified 30.07.2025
+ * @modified 29.08.2025
  * @@VERSION@@
- * @brief Tokens für Color-Themes.
+ * @brief Token für Colors.
  *
- * Diese Datei enthält Tokens, um die Colors zu definieren.
+ * Diese Datei enthält core-Token, um die Colors zu definieren.
+ * Hier werden die spezifischen Theme-Token, die in jeweiligen Theme definiert sind, übergeben.
+ * Bsp: "--theme-color-action-default" wird an "--kern-color-action-default" übergeben.
  * Variationen (Light und Dark).
@@ -17,5 +19,6 @@ */
     /* action */
-    --kern-color-action-default: oklch(var(--theme-action-default)); // TODO: Theming Variable
-    --kern-color-action-on-default: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
+    --kern-color-action-default: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --kern-color-action-on-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
     --kern-color-action-visited: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
+    
     /* action-focus */
@@ -25,2 +28,3 @@ --kern-color-action-focus-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
     --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
+
     /* action-state */
@@ -31,9 +35,10 @@ /* action-state-indicator */
     --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
+    
     /* action-state-opacity */
-    --kern-color-action-state-opacity-hover: 0.08;
-    --kern-color-action-state-opacity-pressed: 0.32;
-    --kern-color-action-state-opacity-selected: 0.12;
-    --kern-color-action-state-opacity-disabled: 0.4;
-    --kern-color-action-state-opacity-active: 0.16;
-    --kern-color-action-state-opacity-overlay: 0.72;
+    --kern-color-action-state-opacity-hover: 92%; // INFO: Excluded from Theming
+    --kern-color-action-state-opacity-pressed: 0.32; // INFO: Excluded from Theming
+    --kern-color-action-state-opacity-selected: 0.12; // INFO: Excluded from Theming
+    --kern-color-action-state-opacity-disabled: 0.4; // INFO: Excluded from Theming
+    --kern-color-action-state-opacity-active: 84%; // INFO: Excluded from Theming
+    --kern-color-action-state-opacity-overlay: 0.72; // INFO: Excluded from Theming
 
@@ -49,2 +54,3 @@ /* feedback */
     --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+    
     /* feedback-loader */
@@ -56,3 +62,3 @@ --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
     --kern-color-form-input-background: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
-    --kern-color-form-input-background-inverted: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
+    --kern-color-form-input-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
     --kern-color-form-input-border: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
@@ -62,2 +68,3 @@
     --kern-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
+    
     /* layout-text */
@@ -67,27 +74,27 @@ --kern-color-layout-text-default: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
     --kern-color-layout-text-muted: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+
     /* layout-background */
-    --kern-color-layout-background-default: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
+    --kern-color-layout-background-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
     --kern-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
-    --kern-color-layout-background-overlay: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity
-    --kern-color-layout-background-inverted: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue)); 
+    --kern-color-layout-background-overlay: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming
 
     // Actins Hover Active
-    --kern-color-action-state-indicator-shade-hover: oklch(var(--kern-darkblue-600-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
-    --kern-color-action-state-indicator-shade-active: oklch(var(--kern-darkblue-500-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
-    // --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-025-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
-    // --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+    --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-hover)));
+    --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-active)));
+    
+    // --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
+    // --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-100-chroma) var(--kern-darkblue-100-hue));
 
-    --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
-    --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-100-chroma) var(--kern-darkblue-100-hue));
-
     // Opacity
-    --kern-color-action-state-indicator-tint-hover-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-hover)); // opacity
-    --kern-color-action-state-indicator-tint-active-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-active)); // opacity
+    --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover));
+    --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active));
 }
 
 @mixin dark-colors {
-    /* action */
-    --kern-color-action-default: oklch(var(--theme-action-default));
-    --kern-color-action-on-default: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
+/* action */
+    --kern-color-action-default: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+    --kern-color-action-on-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
     --kern-color-action-visited: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));
+
     /* action-focus */
@@ -97,2 +104,3 @@ --kern-color-action-focus-background: oklch(var(--kern-neutral-400-lightness) var(--kern-neutral-400-chroma) var(--kern-neutral-400-hue));
     --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
+
     /* action-state */
@@ -103,8 +111,9 @@ /* action-state-indicator */
     --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
+    
     /* action-state-opacity */
-    --kern-color-action-state-opacity-hover: 0.12;
+    --kern-color-action-state-opacity-hover: 88%;
     --kern-color-action-state-opacity-pressed: 0.32;
-    --kern-color-action-state-opacity-selected: 0.16;
+    --kern-color-action-state-opacity-selected: 0.12;
     --kern-color-action-state-opacity-disabled: 0.4;
-    --kern-color-action-state-opacity-active: 0.24;
+    --kern-color-action-state-opacity-active: 84%;
     --kern-color-action-state-opacity-overlay: 0.72;
@@ -121,2 +130,3 @@
     --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+    
     /* feedback-loader */
@@ -126,5 +136,5 @@ --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
 
-    /* form-inputs */
+   /* form-inputs */
     --kern-color-form-input-background: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
-    --kern-color-form-input-background-inverted: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
+    --kern-color-form-input-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
     --kern-color-form-input-border: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
@@ -134,2 +144,3 @@
     --kern-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    
     /* layout-text */
@@ -139,17 +150,19 @@ --kern-color-layout-text-default: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
     --kern-color-layout-text-muted: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
+
     /* layout-background */
-    --kern-color-layout-background-default: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue));
+    --kern-color-layout-background-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
     --kern-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
-    --kern-color-layout-background-overlay: oklch(var(--kern-neutral-1000-lightness) var(--kern-neutral-1000-chroma) var(--kern-neutral-1000-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity
-    --kern-color-layout-background-inverted: oklch(var(--kern-neutral-000-lightness) var(--kern-neutral-000-chroma) var(--kern-neutral-000-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    --kern-color-layout-background-overlay: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity
+    
     // Actins Hover Active
-    --kern-color-action-state-indicator-shade-hover: oklch(var(--kern-darkblue-200-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
-    --kern-color-action-state-indicator-shade-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+    --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-hover)));
+    --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-active)));
 
-    --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-950-lightness) var(--kern-darkblue-950-chroma) var(--kern-darkblue-950-hue));
-    --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+    // --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-950-lightness) var(--kern-darkblue-950-chroma) var(--kern-darkblue-950-hue));
+    // --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
 
     // Opacity
-    --kern-color-action-state-indicator-tint-hover-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-hover)); // opacity
-    --kern-color-action-state-indicator-tint-active-opacity: oklch(var(--theme-action-default) / var(--kern-color-action-state-opacity-active)); // opacity
+    --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover));
+    --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active)); 
 }
@@ -156,0 +169,0 @@

src/scss/core/tokens/_variables.scss

@@ -6,7 +6,9 @@ /**
  * @date 16.12.2024
- * @modified 26.05.2025
+ * @modified 29.08.2025
  * @@VERSION@@
- * @brief Tokens für mertics, components, typography.
+ * @brief Token für mertics, components, typography.
  *
- * Diese Datei enthält Tokens, um die Sizes zu definieren.
+ * Diese Datei enthält core-Token, um die Sizes zu definieren.
+ * Hier werden die spezifischen Theme-Token, die in jeweiligen Theme definiert sind, übergeben.
+ * Bsp: "--kern-metric-border-radius-default" wird an "--kern-metric-border-radius-default" übergeben.
  * Variationen (Mobile und Desktop).
@@ -28,3 +30,3 @@ */
     --kern-metric-border-radius-small: var(--kern-2);
-    --kern-metric-border-radius-default: var(--theme-border-radius); // TODO: Theming Variable Bsp.: --theme-border-radius
+    --kern-metric-border-radius-default: var(--theme-metric-border-radius-default); // INFO: Theming Variable
     --kern-metric-border-radius-large: var(--kern-8);
@@ -31,0 +33,0 @@ --kern-metric-border-radius-circle: 50%;

src/scss/core/tokens/primitives/_font.scss

@@ -16,4 +16,4 @@ /**
     /* primitive-font-familiy */
-    --kern-typography-font-family-fira-sans: Fira Sans;
-    --kern-typography-font-family-fira-mono: Fira Mono;
+    --kern-typography-font-family-fira-sans: "Fira Sans", sans-serif;
+    --kern-typography-font-family-fira-mono: "Fira Mono", monospace;
 
@@ -20,0 +20,0 @@ /* primitive-font-size */

src/scss/dataport/_theme.scss

-// DATAPORT Theme Variables
-
-:root {
-    --theme-border-radius: var(--kern-0);
-}
-
-@mixin light-color {
-    --theme-action-default: var(--kern-dataport-red-dark-700-hue), var(--kern-dataport-red-dark-700-saturation), var(--kern-dataport-red-dark-700-lightness);
-}
-
-@mixin dark-colors {
-    --theme-action-default: var(--kern-dataport-red-bright-300-hue), var(--kern-dataport-red-bright-300-saturation), var(--kern-dataport-red-bright-300-lightness);
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        @include dark-colors;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        @include light-color;
-    }
-}
-
-[data-theme=light],
-.kern-light {
-    @include light-color;
-}
-
-[data-theme=dark],
-.kern-dark {
-    @include dark-colors;
-}

src/scss/dataport/index.scss

-
-@import "../core/index.scss";
-@import "./theme";

src/scss/kern/_theme.scss

-// KERN Theme Variables
-
-:root {
-    --theme-border-radius: var(--kern-4);
-}
-
-@mixin light-color {
-    --theme-action-default: var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue);
-}
-
-@mixin dark-colors {
-    --theme-action-default: var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue);
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        @include dark-colors;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        @include light-color;
-    }
-}
-
-[data-kern-theme=light],
-.kern-light {
-    @include light-color;
-}
-
-[data-kern-theme=dark],
-.kern-dark {
-    @include dark-colors;
-}

src/scss/kern/index.scss

-
-@import "../core/index.scss";
-@import "./theme";

No alert changes

Improved metrics

Total package byte prevSize

6069391

1.1%

Lines of code

6858

9.48%

Worsened metrics

Number of package files

93

-1.06%

No dependency changes