@kern-ux/native - npm Package Compare versions

Comparing version 2.3.2 to 2.4.0

src/scss/themes/examples/bw.css

+/* -- BW Gelb -- */
+:root {
+    /* BW gelb 025 */
+    --kern-bw-gelb-025-lightness: 97.14%;
+    --kern-bw-gelb-025-chroma: 0.1548;
+    --kern-bw-gelb-025-hue: 109;
+
+    /* BW gelb 050 */
+    --kern-bw-gelb-050-lightness: 94.73%;
+    --kern-bw-gelb-050-chroma: 0.2053;
+    --kern-bw-gelb-050-hue: 108.9;
+
+    /* BW gelb 100 */
+    --kern-bw-gelb-100-lightness: 90.45%;
+    --kern-bw-gelb-100-chroma: 0.1956;
+    --kern-bw-gelb-100-hue: 108.5;
+
+    /* BW gelb 150 */
+    --kern-bw-gelb-150-lightness: 86.33%;
+    --kern-bw-gelb-150-chroma: 0.1866;
+    --kern-bw-gelb-150-hue: 108.4;
+
+    /* BW gelb 200 */
+    --kern-bw-gelb-200-lightness: 81.94%;
+    --kern-bw-gelb-200-chroma: 0.1766;
+    --kern-bw-gelb-200-hue: 107.9;
+
+    /* BW gelb 250 */
+    --kern-bw-gelb-250-lightness: 78.02%;
+    --kern-bw-gelb-250-chroma: 0.168;
+    --kern-bw-gelb-250-hue: 107.8;
+
+    /* BW gelb 300 */
+    --kern-bw-gelb-300-lightness: 73.42%;
+    --kern-bw-gelb-300-chroma: 0.158;
+    --kern-bw-gelb-300-hue: 107.7;
+
+    /* BW gelb 350 */
+    --kern-bw-gelb-350-lightness: 69.48%;
+    --kern-bw-gelb-350-chroma: 0.149;
+    --kern-bw-gelb-350-hue: 107;
+
+    /* BW gelb 400 */
+    --kern-bw-gelb-400-lightness: 65.16%;
+    --kern-bw-gelb-400-chroma: 0.1392;
+    --kern-bw-gelb-400-hue: 106.3;
+
+    /* BW gelb 450 */
+    --kern-bw-gelb-450-lightness: 60.99%;
+    --kern-bw-gelb-450-chroma: 0.1301;
+    --kern-bw-gelb-450-hue: 106;
+
+    /* BW gelb 500 */
+    --kern-bw-gelb-500-lightness: 56.52%;
+    --kern-bw-gelb-500-chroma: 0.1199;
+    --kern-bw-gelb-500-hue: 105;
+
+    /* BW gelb 550 */
+    --kern-bw-gelb-550-lightness: 51.97%;
+    --kern-bw-gelb-550-chroma: 0.1096;
+    --kern-bw-gelb-550-hue: 103.7;
+
+    /* BW gelb 600 */
+    --kern-bw-gelb-600-lightness: 48%;
+    --kern-bw-gelb-600-chroma: 0.1006;
+    --kern-bw-gelb-600-hue: 102.3;
+
+    /* BW gelb 650 */
+    --kern-bw-gelb-650-lightness: 43.84%;
+    --kern-bw-gelb-650-chroma: 0.0916;
+    --kern-bw-gelb-650-hue: 101.4;
+
+    /* BW gelb 700 */
+    --kern-bw-gelb-700-lightness: 39.7%;
+    --kern-bw-gelb-700-chroma: 0.0823;
+    --kern-bw-gelb-700-hue: 99.15;
+
+    /* BW gelb 750 */
+    --kern-bw-gelb-750-lightness: 35.2%;
+    --kern-bw-gelb-750-chroma: 0.0723;
+    --kern-bw-gelb-750-hue: 94.84;
+
+    /* BW gelb 800 */
+    --kern-bw-gelb-800-lightness: 30.83%;
+    --kern-bw-gelb-800-chroma: 0.063;
+    --kern-bw-gelb-800-hue: 90.44;
+
+    /* BW gelb 850 */
+    --kern-bw-gelb-850-lightness: 26.96%;
+    --kern-bw-gelb-850-chroma: 0.0552;
+    --kern-bw-gelb-850-hue: 86.64;
+
+    /* BW gelb 900 */
+    --kern-bw-gelb-900-lightness: 22.3%;
+    --kern-bw-gelb-900-chroma: 0.0465;
+    --kern-bw-gelb-900-hue: 77.89;
+
+    /* BW gelb 950 */
+    --kern-bw-gelb-950-lightness: 17.89%;
+    --kern-bw-gelb-950-chroma: 0.04;
+    --kern-bw-gelb-950-hue: 65.53;
+}
+
+/* -- BW Schwarz -- */
+:root {
+    /* BW schwarz 025 */
+    --kern-bw-schwarz-025-lightness: 97.69%;
+    --kern-bw-schwarz-025-chroma: 0.0011;
+    --kern-bw-schwarz-025-hue: 17.18;
+
+    /* BW schwarz 050 */
+    --kern-bw-schwarz-050-lightness: 95.51%;
+    --kern-bw-schwarz-050-chroma: 0;
+    --kern-bw-schwarz-050-hue: none;
+
+    /* BW schwarz 100 */
+    --kern-bw-schwarz-100-lightness: 91.25%;
+    --kern-bw-schwarz-100-chroma: 0.0013;
+    --kern-bw-schwarz-100-hue: 106.4;
+
+    /* BW schwarz 150 */
+    --kern-bw-schwarz-150-lightness: 86.76%;
+    --kern-bw-schwarz-150-chroma: 0.0011;
+    --kern-bw-schwarz-150-hue: 17.18;
+
+    /* BW schwarz 200 */
+    --kern-bw-schwarz-200-lightness: 82.47%;
+    --kern-bw-schwarz-200-chroma: 0.0026;
+    --kern-bw-schwarz-200-hue: 48.71;
+
+    /* BW schwarz 250 */
+    --kern-bw-schwarz-250-lightness: 78.68%;
+    --kern-bw-schwarz-250-chroma: 0.0036;
+    --kern-bw-schwarz-250-hue: 67.77;
+
+    /* BW schwarz 300 */
+    --kern-bw-schwarz-300-lightness: 73.94%;
+    --kern-bw-schwarz-300-chroma: 0.0027;
+    --kern-bw-schwarz-300-hue: 48.71;
+
+    /* BW schwarz 350 */
+    --kern-bw-schwarz-350-lightness: 69.82%;
+    --kern-bw-schwarz-350-chroma: 0.0038;
+    --kern-bw-schwarz-350-hue: 39.47;
+
+    /* BW schwarz 400 */
+    --kern-bw-schwarz-400-lightness: 65.53%;
+    --kern-bw-schwarz-400-chroma: 0.0046;
+    --kern-bw-schwarz-400-hue: 56.34;
+
+    /* BW schwarz 450 */
+    --kern-bw-schwarz-450-lightness: 61.28%;
+    --kern-bw-schwarz-450-chroma: 0.0057;
+    --kern-bw-schwarz-450-hue: 48.64;
+
+    /* BW schwarz 500 */
+    --kern-bw-schwarz-500-lightness: 56.79%;
+    --kern-bw-schwarz-500-chroma: 0.0048;
+    --kern-bw-schwarz-500-hue: 56.32;
+
+    /* BW schwarz 550 */
+    --kern-bw-schwarz-550-lightness: 52.38%;
+    --kern-bw-schwarz-550-chroma: 0.0059;
+    --kern-bw-schwarz-550-hue: 48.61;
+
+    /* BW schwarz 600 */
+    --kern-bw-schwarz-600-lightness: 48.14%;
+    --kern-bw-schwarz-600-chroma: 0.0061;
+    --kern-bw-schwarz-600-hue: 48.6;
+
+    /* BW schwarz 650 */
+    --kern-bw-schwarz-650-lightness: 43.81%;
+    --kern-bw-schwarz-650-chroma: 0.0062;
+    --kern-bw-schwarz-650-hue: 48.58;
+
+    /* BW schwarz 700 */
+    --kern-bw-schwarz-700-lightness: 39.71%;
+    --kern-bw-schwarz-700-chroma: 0.0074;
+    --kern-bw-schwarz-700-hue: 59.48;
+
+    /* BW schwarz 750 */
+    --kern-bw-schwarz-750-lightness: 35.25%;
+    --kern-bw-schwarz-750-chroma: 0.0087;
+    --kern-bw-schwarz-750-hue: 53.21;
+
+    /* BW schwarz 800 */
+    --kern-bw-schwarz-800-lightness: 30.94%;
+    --kern-bw-schwarz-800-chroma: 0.009;
+    --kern-bw-schwarz-800-hue: 53.16;
+
+    /* BW schwarz 850 */
+    --kern-bw-schwarz-850-lightness: 26.78%;
+    --kern-bw-schwarz-850-chroma: 0.0081;
+    --kern-bw-schwarz-850-hue: 59.31;
+
+    /* BW schwarz 900 */
+    --kern-bw-schwarz-900-lightness: 22.17%;
+    --kern-bw-schwarz-900-chroma: 0.0074;
+    --kern-bw-schwarz-900-hue: 48.37;
+
+    /* BW schwarz 950 */
+    --kern-bw-schwarz-950-lightness: 17.72%;
+    --kern-bw-schwarz-950-chroma: 0.0079;
+    --kern-bw-schwarz-950-hue: 48.26;
+}
+
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+    /* brandbar-stripe */
+    --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+    /* Block 1 */
+    --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+    --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+    --kern-color-brandbar-block-1-segment-2:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+    --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+    --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+    --kern-color-brandbar-block-1-segment-5:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+    --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
+    /* Block 2 */
+    --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+    --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+    --kern-color-brandbar-block-2-segment-3:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+    --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
+    --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
+    --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+    /* Block 3 */
+    --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+    --kern-color-brandbar-block-3-segment-2:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+    --kern-color-brandbar-block-3-segment-3:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+    --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+    --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+    --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+    /* action */
+    --kern-color-action-default: oklch(var(--kern-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-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 */
+    --kern-color-action-focus-background: oklch(var(--kern-bw-schwarz-400-lightness) var(--kern-bw-schwarz-400-chroma) var(--kern-bw-schwarz-400-hue));
+    --kern-color-action-focus-border-inside: oklch(var(--kern-bw-schwarz-500-lightness) var(--kern-bw-schwarz-500-chroma) var(--kern-bw-schwarz-500-hue));
+    --kern-color-action-focus-border-outside: oklch(var(--kern-bw-schwarz-800-lightness) var(--kern-bw-schwarz-800-chroma) var(--kern-bw-schwarz-800-hue));
+    /* feedback */
+    --kern-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+    --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+    --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+    /* feedback-loader */
+    --kern-color-feedback-loader: oklch(var(--kern-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-hue));
+    --kern-color-feedback-loader-background: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+    /* form-inputs */
+    --kern-color-form-input-background: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-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-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-hue));
+    /* layout */
+    --kern-color-layout-border: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+    /* layout-text */
+    --kern-color-layout-text-default: oklch(var(--kern-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-hue));
+    --kern-color-layout-text-inverse: oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-layout-text-muted: oklch(var(--kern-bw-schwarz-300-lightness) var(--kern-bw-schwarz-300-chroma) var(--kern-bw-schwarz-300-hue));
+    /* layout-background */
+    --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-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    /* JUST FOR THE SHOWCASE ------------------------------------- */
+    --kern-shadow-lightness: var(--kern-bw-schwarz-900-lightness);
+    --kern-shadow-chroma: var(--kern-bw-schwarz-900-chroma);
+    --kern-shadow-hue: var(--kern-bw-schwarz-900-hue);
+    /* ----------------------------------------------------------- */
+  }
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+    /* brandbar-stripe */
+    --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+    /* Block 1 */
+    --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+    --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+    --kern-color-brandbar-block-1-segment-2:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+    --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+    --kern-color-brandbar-block-1-segment-5:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
+    /* Block 2 */
+    --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+    --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+    --kern-color-brandbar-block-2-segment-3:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
+    --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
+    --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+    /* Block 3 */
+    --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+    --kern-color-brandbar-block-3-segment-2:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-brandbar-block-3-segment-3:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+    --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+    --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+    --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+    /* action */
+    --kern-color-action-default: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-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 */
+    --kern-color-action-focus-background: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+    --kern-color-action-focus-border-inside: oklch(var(--kern-bw-schwarz-500-lightness) var(--kern-bw-schwarz-500-chroma) var(--kern-bw-schwarz-500-hue));
+    --kern-color-action-focus-border-outside: oklch(var(--kern-bw-schwarz-200-lightness) var(--kern-bw-schwarz-200-chroma) var(--kern-bw-schwarz-200-hue));
+    /* feedback */
+    --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+    --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+    --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+    /* feedback-loader */
+    --kern-color-feedback-loader: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-hue));
+    --kern-color-feedback-loader-background: oklch(var(--kern-bw-schwarz-100-lightness) var(--kern-bw-schwarz-100-chroma) var(--kern-bw-schwarz-100-hue));
+    /* form-inputs */
+    --kern-color-form-input-background: oklch(var(--kern-bw-schwarz-025-lightness) var(--kern-bw-schwarz-025-chroma) var(--kern-bw-schwarz-025-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-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-hue));
+    /* layout */
+    --kern-color-layout-border: oklch(var(--kern-bw-schwarz-300-lightness) var(--kern-bw-schwarz-300-chroma) var(--kern-bw-schwarz-300-hue));
+    /* layout-text */
+    --kern-color-layout-text-default: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-hue));
+    --kern-color-layout-text-inverse: oklch(var(--kern-bw-schwarz-025-lightness) var(--kern-bw-schwarz-025-chroma) var(--kern-bw-schwarz-025-hue));
+    --kern-color-layout-text-muted: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+    /* layout-background */
+    --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-bw-schwarz-025-lightness) var(--kern-bw-schwarz-025-chroma) var(--kern-bw-schwarz-025-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    /* JUST FOR THE SHOWCASE ------------------------------------- */
+    --kern-shadow-lightness: var(--kern-bw-schwarz-200-lightness);
+    --kern-shadow-chroma: var(--kern-bw-schwarz-200-chroma);
+    --kern-shadow-hue: var(--kern-bw-schwarz-200-hue);
+    /* ----------------------------------------------------------- */
+  }
+}
+[data-kern-theme=light],
+.kern-light {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+  /* brandbar-stripe */
+  --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+  /* Block 1 */
+  --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+  --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+  --kern-color-brandbar-block-1-segment-2:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+  --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+  --kern-color-brandbar-block-1-segment-5:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
+  /* Block 2 */
+  --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+  --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+  --kern-color-brandbar-block-2-segment-3:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
+  --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
+  --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+  /* Block 3 */
+  --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+  --kern-color-brandbar-block-3-segment-2:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-brandbar-block-3-segment-3:oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+  --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
+  --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+  /* action */
+  --kern-color-action-default: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-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 */
+  --kern-color-action-focus-background: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+  --kern-color-action-focus-border-inside: oklch(var(--kern-bw-schwarz-500-lightness) var(--kern-bw-schwarz-500-chroma) var(--kern-bw-schwarz-500-hue));
+  --kern-color-action-focus-border-outside: oklch(var(--kern-bw-schwarz-200-lightness) var(--kern-bw-schwarz-200-chroma) var(--kern-bw-schwarz-200-hue));
+  /* feedback */
+  --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
+  --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
+  --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+  --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
+  --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
+  --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+  --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+  /* feedback-loader */
+  --kern-color-feedback-loader: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-hue));
+  --kern-color-feedback-loader-background: oklch(var(--kern-bw-schwarz-100-lightness) var(--kern-bw-schwarz-100-chroma) var(--kern-bw-schwarz-100-hue));
+  /* form-inputs */
+  --kern-color-form-input-background: oklch(var(--kern-bw-schwarz-025-lightness) var(--kern-bw-schwarz-025-chroma) var(--kern-bw-schwarz-025-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-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-hue));
+  /* layout */
+  --kern-color-layout-border: oklch(var(--kern-bw-schwarz-300-lightness) var(--kern-bw-schwarz-300-chroma) var(--kern-bw-schwarz-300-hue));
+  /* layout-text */
+  --kern-color-layout-text-default: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-hue));
+  --kern-color-layout-text-inverse: oklch(var(--kern-bw-schwarz-025-lightness) var(--kern-bw-schwarz-025-chroma) var(--kern-bw-schwarz-025-hue));
+  --kern-color-layout-text-muted: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+  /* layout-background */
+    --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-bw-schwarz-025-lightness) var(--kern-bw-schwarz-025-chroma) var(--kern-bw-schwarz-025-hue));
+  --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+  /* JUST FOR THE SHOWCASE ------------------------------------- */
+  --kern-shadow-lightness: var(--kern-bw-schwarz-200-lightness);
+  --kern-shadow-chroma: var(--kern-bw-schwarz-200-chroma);
+  --kern-shadow-hue: var(--kern-bw-schwarz-200-hue);
+  /* ----------------------------------------------------------- */
+}
+
+[data-kern-theme=dark],
+.kern-dark {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
+  /* brandbar-stripe */
+  --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+  /* Block 1 */
+  --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+  --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+  --kern-color-brandbar-block-1-segment-2:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+  --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+  --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+  --kern-color-brandbar-block-1-segment-5:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+  --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
+  /* Block 2 */
+  --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+  --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+  --kern-color-brandbar-block-2-segment-3:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+  --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
+  --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
+  --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+  /* Block 3 */
+  --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+  --kern-color-brandbar-block-3-segment-2:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+  --kern-color-brandbar-block-3-segment-3:oklch(var(--kern-bw-schwarz-750-lightness) var(--kern-bw-schwarz-750-chroma) var(--kern-bw-schwarz-750-hue));
+  --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+  --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
+  --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
+  /* action */
+  --kern-color-action-default: oklch(var(--kern-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-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 */
+  --kern-color-action-focus-background: oklch(var(--kern-bw-schwarz-400-lightness) var(--kern-bw-schwarz-400-chroma) var(--kern-bw-schwarz-400-hue));
+  --kern-color-action-focus-border-inside: oklch(var(--kern-bw-schwarz-500-lightness) var(--kern-bw-schwarz-500-chroma) var(--kern-bw-schwarz-500-hue));
+  --kern-color-action-focus-border-outside: oklch(var(--kern-bw-schwarz-800-lightness) var(--kern-bw-schwarz-800-chroma) var(--kern-bw-schwarz-800-hue));
+  /* feedback */
+  --kern-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
+  --kern-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
+  --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+  --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
+  --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
+  --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+  --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+  /* feedback-loader */
+  --kern-color-feedback-loader: oklch(var(--kern-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-hue));
+  --kern-color-feedback-loader-background: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+  /* form-inputs */
+  --kern-color-form-input-background: oklch(var(--kern-bw-schwarz-900-lightness) var(--kern-bw-schwarz-900-chroma) var(--kern-bw-schwarz-900-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-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-hue));
+  /* layout */
+  --kern-color-layout-border: oklch(var(--kern-bw-schwarz-700-lightness) var(--kern-bw-schwarz-700-chroma) var(--kern-bw-schwarz-700-hue));
+  /* layout-text */
+  --kern-color-layout-text-default: oklch(var(--kern-bw-schwarz-050-lightness) var(--kern-bw-schwarz-050-chroma) var(--kern-bw-schwarz-050-hue));
+  --kern-color-layout-text-inverse: oklch(var(--kern-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-layout-text-muted: oklch(var(--kern-bw-schwarz-300-lightness) var(--kern-bw-schwarz-300-chroma) var(--kern-bw-schwarz-300-hue));
+  /* layout-background */
+    --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-bw-schwarz-950-lightness) var(--kern-bw-schwarz-950-chroma) var(--kern-bw-schwarz-950-hue));
+  --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+  /* JUST FOR THE SHOWCASE ------------------------------------- */
+  --kern-shadow-lightness: var(--kern-bw-schwarz-900-lightness);
+  --kern-shadow-chroma: var(--kern-bw-schwarz-900-chroma);
+  --kern-shadow-hue: var(--kern-bw-schwarz-900-hue);
+  /* ----------------------------------------------------------- */
+}

src/scss/themes/examples/dataport.css

+ /* -- dataport-red -- */
+:root {
+    /* Dataport Red 025 */
+    --kern-dataport-red-025-lightness: 97.36%;
+    --kern-dataport-red-025-chroma: 0.0077;
+    --kern-dataport-red-025-hue: 29.5;
+
+    /* Dataport Red 050 */
+    --kern-dataport-red-050-lightness: 95.43%;
+    --kern-dataport-red-050-chroma: 0.0159;
+    --kern-dataport-red-050-hue: 28.02;
+
+    /* Dataport Red 100 */
+    --kern-dataport-red-100-lightness: 91.44%;
+    --kern-dataport-red-100-chroma: 0.0306;
+    --kern-dataport-red-100-hue: 22.62;
+
+    /* Dataport Red 150 */
+    --kern-dataport-red-150-lightness: 86.8%;
+    --kern-dataport-red-150-chroma: 0.0473;
+    --kern-dataport-red-150-hue: 22.9;
+
+    /* Dataport Red 200 */
+    --kern-dataport-red-200-lightness: 83.04%;
+    --kern-dataport-red-200-chroma: 0.0631;
+    --kern-dataport-red-200-hue: 23.22;
+
+    /* Dataport Red 250 */
+    --kern-dataport-red-250-lightness: 79.69%;
+    --kern-dataport-red-250-chroma: 0.0735;
+    --kern-dataport-red-250-hue: 24.72;
+
+    /* Dataport Red 300 */
+    --kern-dataport-red-300-lightness: 75.31%;
+    --kern-dataport-red-300-chroma: 0.0892;
+    --kern-dataport-red-300-hue: 25.13;
+
+    /* Dataport Red 350 */
+    --kern-dataport-red-350-lightness: 70.75%;
+    --kern-dataport-red-350-chroma: 0.106;
+    --kern-dataport-red-350-hue: 24.48;
+
+    /* Dataport Red 400 */
+    --kern-dataport-red-400-lightness: 67.43%;
+    --kern-dataport-red-400-chroma: 0.1144;
+    --kern-dataport-red-400-hue: 24.87;
+
+    /* Dataport Red 450 */
+    --kern-dataport-red-450-lightness: 63.04%;
+    --kern-dataport-red-450-chroma: 0.1271;
+    --kern-dataport-red-450-hue: 24.44;
+
+    /* Dataport Red 500 */
+    --kern-dataport-red-500-lightness: 58.21%;
+    --kern-dataport-red-500-chroma: 0.1391;
+    --kern-dataport-red-500-hue: 25.34;
+
+    /* Dataport Red 550 */
+    --kern-dataport-red-550-lightness: 53.77%;
+    --kern-dataport-red-550-chroma: 0.1479;
+    --kern-dataport-red-550-hue: 24.4;
+
+    /* Dataport Red 600 */
+    --kern-dataport-red-600-lightness: 49.64%;
+    --kern-dataport-red-600-chroma: 0.1499;
+    --kern-dataport-red-600-hue: 24.41;
+
+    /* Dataport Red 650 */
+    --kern-dataport-red-650-lightness: 45.16%;
+    --kern-dataport-red-650-chroma: 0.1509;
+    --kern-dataport-red-650-hue: 24.05;
+
+    /* Dataport Red 700 */
+    --kern-dataport-red-700-lightness: 41.55%;
+    --kern-dataport-red-700-chroma: 0.1502;
+    --kern-dataport-red-700-hue: 24.71;
+
+    /* Dataport Red 750 */
+    --kern-dataport-red-750-lightness: 37%;
+    --kern-dataport-red-750-chroma: 0.1412;
+    --kern-dataport-red-750-hue: 24.71;
+
+    /* Dataport Red 800 */
+    --kern-dataport-red-800-lightness: 32.96%;
+    --kern-dataport-red-800-chroma: 0.1314;
+    --kern-dataport-red-800-hue: 24.33;
+
+    /* Dataport Red 850 */
+    --kern-dataport-red-850-lightness: 27.54%;
+    --kern-dataport-red-850-chroma: 0.1116;
+    --kern-dataport-red-850-hue: 24.96;
+
+    /* Dataport Red 900 */
+    --kern-dataport-red-900-lightness: 23.93%;
+    --kern-dataport-red-900-chroma: 0.0973;
+    --kern-dataport-red-900-hue: 26.03;
+
+    /* Dataport Red 950 */
+    --kern-dataport-red-950-lightness: 18.91%;
+    --kern-dataport-red-950-chroma: 0.0772;
+    --kern-dataport-red-950-hue: 27.71;
+}
+
+ /* -- dataport-grey -- */
+:root {
+    /* --kern-dataport-grey-025 */
+    --kern-dataport-grey-025-lightness: 97.72%;
+    --kern-dataport-grey-025-chroma: 0;
+    --kern-dataport-grey-025-hue: none;
+  
+    /* --kern-dataport-grey-050 */
+    --kern-dataport-grey-050-lightness: 96.19%;
+    --kern-dataport-grey-050-chroma: 0;
+    --kern-dataport-grey-050-hue: none;
+  
+    /* --kern-dataport-grey-100 */
+    --kern-dataport-grey-100-lightness: 91.57%;
+    --kern-dataport-grey-100-chroma: 0;
+    --kern-dataport-grey-100-hue: none;
+  
+    /* --kern-dataport-grey-150 */
+    --kern-dataport-grey-150-lightness: 86.89%;
+    --kern-dataport-grey-150-chroma: 0;
+    --kern-dataport-grey-150-hue: none;
+  
+    /* --kern-dataport-grey-200 */
+    --kern-dataport-grey-200-lightness: 82.94%;
+    --kern-dataport-grey-200-chroma: 0;
+    --kern-dataport-grey-200-hue: none;
+  
+    /* --kern-dataport-grey-250 */
+    --kern-dataport-grey-250-lightness: 78.94%;
+    --kern-dataport-grey-250-chroma: 0;
+    --kern-dataport-grey-250-hue: none;
+  
+    /* --kern-dataport-grey-300 */
+    --kern-dataport-grey-300-lightness: 74.07%;
+    --kern-dataport-grey-300-chroma: 0;
+    --kern-dataport-grey-300-hue: none;
+  
+    /* --kern-dataport-grey-350 */
+    --kern-dataport-grey-350-lightness: 69.96%;
+    --kern-dataport-grey-350-chroma: 0;
+    --kern-dataport-grey-350-hue: none;
+  
+    /* --kern-dataport-grey-400 */
+    --kern-dataport-grey-400-lightness: 65.78%;
+    --kern-dataport-grey-400-chroma: 0;
+    --kern-dataport-grey-400-hue: none;
+  
+    /* --kern-dataport-grey-450 */
+    --kern-dataport-grey-450-lightness: 61.54%;
+    --kern-dataport-grey-450-chroma: 0;
+    --kern-dataport-grey-450-hue: none;
+  
+    /* --kern-dataport-grey-500 */
+    --kern-dataport-grey-500-lightness: 56.34%;
+    --kern-dataport-grey-500-chroma: 0;
+    --kern-dataport-grey-500-hue: none;
+  
+    /* --kern-dataport-grey-550 */
+    --kern-dataport-grey-550-lightness: 52.81%;
+    --kern-dataport-grey-550-chroma: 0;
+    --kern-dataport-grey-550-hue: none;
+  
+    /* --kern-dataport-grey-600 */
+    --kern-dataport-grey-600-lightness: 48.32%;
+    --kern-dataport-grey-600-chroma: 0;
+    --kern-dataport-grey-600-hue: none;
+  
+    /* --kern-dataport-grey-650 */
+    --kern-dataport-grey-650-lightness: 43.71%;
+    --kern-dataport-grey-650-chroma: 0;
+    --kern-dataport-grey-650-hue: none;
+  
+    /* --kern-dataport-grey-700 */
+    --kern-dataport-grey-700-lightness: 39.94%;
+    --kern-dataport-grey-700-chroma: 0;
+    --kern-dataport-grey-700-hue: none;
+  
+    /* --kern-dataport-grey-750 */
+    --kern-dataport-grey-750-lightness: 35.1%;
+    --kern-dataport-grey-750-chroma: 0;
+    --kern-dataport-grey-750-hue: none;
+
+    /* --kern-dataport-grey-800 */
+    --kern-dataport-grey-800-lightness: 31.1%;
+    --kern-dataport-grey-800-chroma: 0;
+    --kern-dataport-grey-800-hue: none;
+  
+    /* --kern-dataport-grey-850 */
+    --kern-dataport-grey-850-lightness: 26.97%;
+    --kern-dataport-grey-850-chroma: 0;
+    --kern-dataport-grey-850-hue: none;
+  
+    /* --kern-dataport-grey-900 */
+    --kern-dataport-grey-900-lightness: 22.67%;
+    --kern-dataport-grey-900-chroma: 0;
+    --kern-dataport-grey-900-hue: none;
+  
+    /* --kern-dataport-grey-950 */
+    --kern-dataport-grey-950-lightness: 18.15%;
+    --kern-dataport-grey-950-chroma: 0;
+    --kern-dataport-grey-950-hue: none;
+}
+
+ /* -- dataport-viridian -- */
+:root {
+    /* Dataport viridian 025 */
+    --kern-dataport-viridian-025-lightness: 97.7%;
+    --kern-dataport-viridian-025-chroma: 0.003;
+    --kern-dataport-viridian-025-hue: 197;
+
+    /* Dataport viridian 050 */
+    --kern-dataport-viridian-050-lightness: 95.6%;
+    --kern-dataport-viridian-050-chroma: 0.007;
+    --kern-dataport-viridian-050-hue: 185;
+
+    /* Dataport viridian 100 */
+    --kern-dataport-viridian-100-lightness: 91.1%;
+    --kern-dataport-viridian-100-chroma: 0.015;
+    --kern-dataport-viridian-100-hue: 187;
+
+    /* Dataport viridian 150 */
+    --kern-dataport-viridian-150-lightness: 86.6%;
+    --kern-dataport-viridian-150-chroma: 0.023;
+    --kern-dataport-viridian-150-hue: 186;
+
+    /* Dataport viridian 200 */
+    --kern-dataport-viridian-200-lightness: 82%;
+    --kern-dataport-viridian-200-chroma: 0.03;
+    --kern-dataport-viridian-200-hue: 189;
+
+    /* Dataport viridian 250 */
+    --kern-dataport-viridian-250-lightness: 82%;
+    --kern-dataport-viridian-250-chroma: 0.0735;
+    --kern-dataport-viridian-250-hue: 24.72;
+
+    /* Dataport viridian 300 */
+    --kern-dataport-viridian-300-lightness: 78.2%;
+    --kern-dataport-viridian-300-chroma: 0.037;
+    --kern-dataport-viridian-300-hue: 188;
+
+    /* Dataport viridian 350 */
+    --kern-dataport-viridian-350-lightness: 73.6%;
+    --kern-dataport-viridian-350-chroma: 0.045;
+    --kern-dataport-viridian-350-hue: 187;
+
+    /* Dataport viridian 400 */
+    --kern-dataport-viridian-400-lightness: 69.3%;
+    --kern-dataport-viridian-400-chroma: 0.051;
+    --kern-dataport-viridian-400-hue: 186;
+
+    /* Dataport viridian 450 */
+    --kern-dataport-viridian-450-lightness: 64.9%;
+    --kern-dataport-viridian-450-chroma: 0.055;
+    --kern-dataport-viridian-450-hue: 188;
+
+    /* Dataport viridian 500 */
+    --kern-dataport-viridian-500-lightness: 60.6%;
+    --kern-dataport-viridian-500-chroma: 0.06;
+    --kern-dataport-viridian-500-hue: 187;
+
+    /* Dataport viridian 550 */
+    --kern-dataport-viridian-550-lightness: 55.9%;
+    --kern-dataport-viridian-550-chroma: 0.062;
+    --kern-dataport-viridian-550-hue: 187;
+
+    /* Dataport viridian 600 */
+    --kern-dataport-viridian-600-lightness: 51.4%;
+    --kern-dataport-viridian-600-chroma: 0.063;
+    --kern-dataport-viridian-600-hue: 187;
+
+    /* Dataport viridian 650 */
+    --kern-dataport-viridian-650-lightness: 47.3%;
+    --kern-dataport-viridian-650-chroma: 0.062;
+    --kern-dataport-viridian-650-hue: 188;
+
+    /* Dataport viridian 700 */
+    --kern-dataport-viridian-700-lightness: 42.9%;
+    --kern-dataport-viridian-700-chroma: 0.059;
+    --kern-dataport-viridian-700-hue: 187;
+
+    /* Dataport viridian 750 */
+    --kern-dataport-viridian-750-lightness: 39.1%;
+    --kern-dataport-viridian-750-chroma: 0.056;
+    --kern-dataport-viridian-750-hue: 186;
+
+    /* Dataport viridian 800 */
+    --kern-dataport-viridian-800-lightness: 34.6%;
+    --kern-dataport-viridian-800-chroma: 0.051;
+    --kern-dataport-viridian-800-hue: 187;
+
+    /* Dataport viridian 850 */
+    --kern-dataport-viridian-850-lightness: 30.3%;
+    --kern-dataport-viridian-850-chroma: 0.046;
+    --kern-dataport-viridian-850-hue: 186;
+
+    /* Dataport viridian 900 */
+    --kern-dataport-viridian-900-lightness: 26.3%;
+    --kern-dataport-viridian-900-chroma: 0.04;
+    --kern-dataport-viridian-900-hue: 187;
+
+    /* Dataport viridian 950 */
+    --kern-dataport-viridian-950-lightness: 17.4%;
+    --kern-dataport-viridian-950-chroma: 0.026;
+    --kern-dataport-viridian-950-hue: 191;
+}
+
+ /* -- dataport-frostblau -- */
+:root {
+    /* Dataport frostblau 025 */
+    --kern-dataport-frostblau-025-lightness: 97.54%;
+    --kern-dataport-frostblau-025-chroma: 0.0134;
+    --kern-dataport-frostblau-025-hue: 226.6;
+
+    /* Dataport frostblau 050 */
+    --kern-dataport-frostblau-050-lightness: 95.33%;
+    --kern-dataport-frostblau-050-chroma: 0.0277;
+    --kern-dataport-frostblau-050-hue: 225.7;
+
+    /* Dataport frostblau 100 */
+    --kern-dataport-frostblau-100-lightness: 90.88%;
+    --kern-dataport-frostblau-100-chroma: 0.0517;
+    --kern-dataport-frostblau-100-hue: 224.7;
+
+    /* Dataport frostblau 150 */
+    --kern-dataport-frostblau-150-lightness: 86.55%;
+    --kern-dataport-frostblau-150-chroma: 0.0631;
+    --kern-dataport-frostblau-150-hue: 226.5;
+
+    /* Dataport frostblau 200 */
+    --kern-dataport-frostblau-200-lightness: 81.92%;
+    --kern-dataport-frostblau-200-chroma: 0.0707;
+    --kern-dataport-frostblau-200-hue: 225.8;
+
+    /* Dataport frostblau 250 */
+    --kern-dataport-frostblau-250-lightness: 78.14%;
+    --kern-dataport-frostblau-250-chroma: 0.0719;
+    --kern-dataport-frostblau-250-hue: 225.6;
+
+    /* Dataport frostblau 300 */
+    --kern-dataport-frostblau-300-lightness: 73.48%;
+    --kern-dataport-frostblau-300-chroma: 0.0717;
+    --kern-dataport-frostblau-300-hue: 226.1;
+
+    /* Dataport frostblau 350 */
+    --kern-dataport-frostblau-350-lightness: 69.37%;
+    --kern-dataport-frostblau-350-chroma: 0.0692;
+    --kern-dataport-frostblau-350-hue: 225;
+
+    /* Dataport frostblau 400 */
+    --kern-dataport-frostblau-400-lightness: 65.07%;
+    --kern-dataport-frostblau-400-chroma: 0.0666;
+    --kern-dataport-frostblau-400-hue: 226.8;
+
+    /* Dataport frostblau 450 */
+    --kern-dataport-frostblau-450-lightness: 60.83%;
+    --kern-dataport-frostblau-450-chroma: 0.064;
+    --kern-dataport-frostblau-450-hue: 225.6;
+
+    /* Dataport frostblau 500 */
+    --kern-dataport-frostblau-500-lightness: 56.29%;
+    --kern-dataport-frostblau-500-chroma: 0.0598;
+    --kern-dataport-frostblau-500-hue: 225.2;
+
+    /* Dataport frostblau 550 */
+    --kern-dataport-frostblau-550-lightness: 52.01%;
+    --kern-dataport-frostblau-550-chroma: 0.0555;
+    --kern-dataport-frostblau-550-hue: 224.7;
+
+    /* Dataport frostblau 600 */
+    --kern-dataport-frostblau-600-lightness: 47.73%;
+    --kern-dataport-frostblau-600-chroma: 0.0511;
+    --kern-dataport-frostblau-600-hue: 226.1;
+
+    /* Dataport frostblau 650 */
+    --kern-dataport-frostblau-650-lightness: 43.29%;
+    --kern-dataport-frostblau-650-chroma: 0.0474;
+    --kern-dataport-frostblau-650-hue: 227.2;
+
+    /* Dataport frostblau 700 */
+    --kern-dataport-frostblau-700-lightness: 39.43%;
+    --kern-dataport-frostblau-700-chroma: 0.0428;
+    --kern-dataport-frostblau-700-hue: 226.7;
+
+    /* Dataport frostblau 750 */
+    --kern-dataport-frostblau-750-lightness: 34.72%;
+    --kern-dataport-frostblau-750-chroma: 0.0381;
+    --kern-dataport-frostblau-750-hue: 226;
+
+    /* Dataport frostblau 800 */
+    --kern-dataport-frostblau-800-lightness: 30.67%;
+    --kern-dataport-frostblau-800-chroma: 0.0341;
+    --kern-dataport-frostblau-800-hue: 227.6;
+
+    /* Dataport frostblau 850 */
+    --kern-dataport-frostblau-850-lightness: 26.44%;
+    --kern-dataport-frostblau-850-chroma: 0.029;
+    --kern-dataport-frostblau-850-hue: 226.8;
+
+    /* Dataport frostblau 900 */
+    --kern-dataport-frostblau-900-lightness: 22.02%;
+    --kern-dataport-frostblau-900-chroma: 0.0236;
+    --kern-dataport-frostblau-900-hue: 225.5;
+
+    /* Dataport frostblau 950 */
+    --kern-dataport-frostblau-950-lightness: 17.41%;
+    --kern-dataport-frostblau-950-chroma: 0.0194;
+    --kern-dataport-frostblau-950-hue: 228;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-700-hue));
+    /* brandbar-stripe */
+    --kern-color-brandbar-full-color: oklch(var(--kern-dataport-red-300-lightness) var(--kern-dataport-red-300-chroma) var(--kern-dataport-red-300-hue));
+    /* action */
+    --kern-color-action-default: oklch(var(--kern-dataport-red-300-lightness) var(--kern-dataport-red-300-chroma) var(--kern-dataport-red-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 */
+    --kern-color-action-focus-background: oklch(var(--kern-dataport-grey-400-lightness) var(--kern-dataport-grey-400-chroma) var(--kern-dataport-grey-400-hue));
+    --kern-color-action-focus-border-inside: oklch(var(--kern-dataport-grey-500-lightness) var(--kern-dataport-grey-500-chroma) var(--kern-dataport-grey-500-hue));
+    --kern-color-action-focus-border-outside: oklch(var(--kern-dataport-grey-800-lightness) var(--kern-dataport-grey-800-chroma) var(--kern-dataport-grey-800-hue));
+    /* feedback */
+    --kern-color-feedback-danger: oklch(var(--kern-violet-400-lightness) var(--kern-violet-400-chroma) var(--kern-violet-400-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-violet-900-lightness) var(--kern-violet-900-chroma) var(--kern-violet-900-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+    --kern-color-feedback-success: oklch(var(--kern-dataport-viridian-400-lightness) var(--kern-dataport-viridian-400-chroma) var(--kern-dataport-viridian-400-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-dataport-viridian-900-lightness) var(--kern-dataport-viridian-900-chroma) var(--kern-dataport-viridian-900-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+    --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+    /* feedback-loader */
+    --kern-color-feedback-loader: oklch(var(--kern-dataport-grey-050-lightness) var(--kern-dataport-grey-050-chroma) var(--kern-dataport-grey-050-hue));
+    --kern-color-feedback-loader-background: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+    /* form-inputs */
+    --kern-color-form-input-background: oklch(var(--kern-dataport-grey-900-lightness) var(--kern-dataport-grey-900-chroma) var(--kern-dataport-grey-900-hue));
+    --kern-color-form-input-background-inverted: oklch(var(--kern-dataport-grey-1000-lightness) var(--kern-dataport-grey-1000-chroma) var(--kern-dataport-grey-1000-hue));
+    --kern-color-form-input-border: oklch(var(--kern-dataport-grey-050-lightness) var(--kern-dataport-grey-050-chroma) var(--kern-dataport-grey-050-hue));
+    /* layout */
+    --kern-color-layout-border: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+    /* layout-text */
+    --kern-color-layout-text-default: oklch(var(--kern-dataport-grey-050-lightness) var(--kern-dataport-grey-050-chroma) var(--kern-dataport-grey-050-hue));
+    --kern-color-layout-text-inverse: oklch(var(--kern-dataport-grey-950-lightness) var(--kern-dataport-grey-950-chroma) var(--kern-dataport-grey-950-hue));
+    --kern-color-layout-text-muted: oklch(var(--kern-dataport-grey-300-lightness) var(--kern-dataport-grey-300-chroma) var(--kern-dataport-grey-300-hue));
+    /* layout-background */
+    --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-dataport-grey-950-lightness) var(--kern-dataport-grey-950-chroma) var(--kern-dataport-grey-950-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    /* JUST FOR THE SHOWCASE ------------------------------------- */
+    --kern-shadow-lightness: var(--kern-dataport-grey-900-lightness);
+    --kern-shadow-chroma: var(--kern-dataport-grey-900-chroma);
+    --kern-shadow-hue: var(--kern-dataport-grey-900-hue);
+    /* ----------------------------------------------------------- */
+  }
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-700-hue));
+    /* brandbar-stripe */
+    --kern-color-brandbar-full-color: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-700-hue));
+    /* action */
+    --kern-color-action-default: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-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 */
+    --kern-color-action-focus-background: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+    --kern-color-action-focus-border-inside: oklch(var(--kern-dataport-grey-500-lightness) var(--kern-dataport-grey-500-chroma) var(--kern-dataport-grey-500-hue));
+    --kern-color-action-focus-border-outside: oklch(var(--kern-dataport-grey-200-lightness) var(--kern-dataport-grey-200-chroma) var(--kern-dataport-grey-200-hue));
+    /* feedback */
+    --kern-color-feedback-danger: oklch(var(--kern-sh-red-600-lightness) var(--kern-sh-red-600-chroma) var(--kern-sh-red-600-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-sh-red-050-lightness) var(--kern-sh-red-050-chroma) var(--kern-sh-red-050-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+    --kern-color-feedback-success: oklch(var(--kern-dataport-viridian-600-lightness) var(--kern-dataport-viridian-600-chroma) var(--kern-dataport-viridian-600-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-dataport-viridian-050-lightness) var(--kern-dataport-viridian-050-chroma) var(--kern-dataport-viridian-050-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+    --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+    /* feedback-loader */
+    --kern-color-feedback-loader: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+    --kern-color-feedback-loader-background: oklch(var(--kern-dataport-grey-100-lightness) var(--kern-dataport-grey-100-chroma) var(--kern-dataport-grey-100-hue));
+    /* form-inputs */
+    --kern-color-form-input-background: oklch(var(--kern-dataport-grey-025-lightness) var(--kern-dataport-grey-025-chroma) var(--kern-dataport-grey-025-hue));
+    --kern-color-form-input-background-inverted: oklch(var(--kern-dataport-grey-000-lightness) var(--kern-dataport-grey-000-chroma) var(--kern-dataport-grey-000-hue));
+    --kern-color-form-input-border: oklch(var(--kern-dataport-grey-900-lightness) var(--kern-dataport-grey-900-chroma) var(--kern-dataport-grey-900-hue));
+    /* layout */
+    --kern-color-layout-border: oklch(var(--kern-dataport-grey-300-lightness) var(--kern-dataport-grey-300-chroma) var(--kern-dataport-grey-300-hue));
+    /* layout-text */
+    --kern-color-layout-text-default: oklch(var(--kern-dataport-grey-900-lightness) var(--kern-dataport-grey-900-chroma) var(--kern-dataport-grey-900-hue));
+    --kern-color-layout-text-inverse: oklch(var(--kern-dataport-grey-025-lightness) var(--kern-dataport-grey-025-chroma) var(--kern-dataport-grey-025-hue));
+    --kern-color-layout-text-muted: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+    /* layout-background */
+    --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-dataport-grey-025-lightness) var(--kern-dataport-grey-025-chroma) var(--kern-dataport-grey-025-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    /* JUST FOR THE SHOWCASE ------------------------------------- */
+    --kern-shadow-lightness: var(--kern-dataport-grey-200-lightness);
+    --kern-shadow-chroma: var(--kern-dataport-grey-200-chroma);
+    --kern-shadow-hue: var(--kern-dataport-grey-200-hue);
+    /* ----------------------------------------------------------- */
+  }
+}
+[data-kern-theme=light],
+.kern-light {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-700-hue));
+  /* brandbar-stripe */
+  --kern-color-brandbar-full-color: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-700-hue));
+  /* action */
+  --kern-color-action-default: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-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 */
+  --kern-color-action-focus-background: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+  --kern-color-action-focus-border-inside: oklch(var(--kern-dataport-grey-500-lightness) var(--kern-dataport-grey-500-chroma) var(--kern-dataport-grey-500-hue));
+  --kern-color-action-focus-border-outside: oklch(var(--kern-dataport-grey-200-lightness) var(--kern-dataport-grey-200-chroma) var(--kern-dataport-grey-200-hue));
+  /* feedback */
+  --kern-color-feedback-danger: oklch(var(--kern-sh-red-600-lightness) var(--kern-sh-red-600-chroma) var(--kern-sh-red-600-hue));
+  --kern-color-feedback-danger-background: oklch(var(--kern-sh-red-050-lightness) var(--kern-sh-red-050-chroma) var(--kern-sh-red-050-hue));
+  --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+  --kern-color-feedback-success: oklch(var(--kern-dataport-viridian-600-lightness) var(--kern-dataport-viridian-600-chroma) var(--kern-dataport-viridian-600-hue));
+  --kern-color-feedback-success-background: oklch(var(--kern-dataport-viridian-050-lightness) var(--kern-dataport-viridian-050-chroma) var(--kern-dataport-viridian-050-hue));
+  --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+  --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+  /* feedback-loader */
+  --kern-color-feedback-loader: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+  --kern-color-feedback-loader-background: oklch(var(--kern-dataport-grey-100-lightness) var(--kern-dataport-grey-100-chroma) var(--kern-dataport-grey-100-hue));
+  /* form-inputs */
+  --kern-color-form-input-background: oklch(var(--kern-dataport-grey-025-lightness) var(--kern-dataport-grey-025-chroma) var(--kern-dataport-grey-025-hue));
+  --kern-color-form-input-background-inverted: oklch(var(--kern-dataport-grey-000-lightness) var(--kern-dataport-grey-000-chroma) var(--kern-dataport-grey-000-hue));
+  --kern-color-form-input-border: oklch(var(--kern-dataport-grey-900-lightness) var(--kern-dataport-grey-900-chroma) var(--kern-dataport-grey-900-hue));
+  /* layout */
+  --kern-color-layout-border: oklch(var(--kern-dataport-grey-300-lightness) var(--kern-dataport-grey-300-chroma) var(--kern-dataport-grey-300-hue));
+  /* layout-text */
+  --kern-color-layout-text-default: oklch(var(--kern-dataport-grey-900-lightness) var(--kern-dataport-grey-900-chroma) var(--kern-dataport-grey-900-hue));
+  --kern-color-layout-text-inverse: oklch(var(--kern-dataport-grey-025-lightness) var(--kern-dataport-grey-025-chroma) var(--kern-dataport-grey-025-hue));
+  --kern-color-layout-text-muted: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+  /* layout-background */
+  --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-dataport-grey-025-lightness) var(--kern-dataport-grey-025-chroma) var(--kern-dataport-grey-025-hue));
+  --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+  /* JUST FOR THE SHOWCASE ------------------------------------- */
+  --kern-shadow-lightness: var(--kern-dataport-grey-200-lightness);
+  --kern-shadow-chroma: var(--kern-dataport-grey-200-chroma);
+  --kern-shadow-hue: var(--kern-dataport-grey-200-hue);
+  /* ----------------------------------------------------------- */
+}
+
+[data-kern-theme=dark],
+.kern-dark {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-dataport-red-700-lightness) var(--kern-dataport-red-700-chroma) var(--kern-dataport-red-700-hue));
+  /* brandbar-stripe */
+  --kern-color-brandbar-full-color: oklch(var(--kern-dataport-red-300-lightness) var(--kern-dataport-red-300-chroma) var(--kern-dataport-red-300-hue));
+  /* action */
+  --kern-color-action-default: oklch(var(--kern-dataport-red-300-lightness) var(--kern-dataport-red-300-chroma) var(--kern-dataport-red-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 */
+  --kern-color-action-focus-background: oklch(var(--kern-dataport-grey-400-lightness) var(--kern-dataport-grey-400-chroma) var(--kern-dataport-grey-400-hue));
+  --kern-color-action-focus-border-inside: oklch(var(--kern-dataport-grey-500-lightness) var(--kern-dataport-grey-500-chroma) var(--kern-dataport-grey-500-hue));
+  --kern-color-action-focus-border-outside: oklch(var(--kern-dataport-grey-800-lightness) var(--kern-dataport-grey-800-chroma) var(--kern-dataport-grey-800-hue));
+  /* feedback */
+  --kern-color-feedback-danger: oklch(var(--kern-violet-400-lightness) var(--kern-violet-400-chroma) var(--kern-violet-400-hue));
+  --kern-color-feedback-danger-background: oklch(var(--kern-violet-900-lightness) var(--kern-violet-900-chroma) var(--kern-violet-900-hue));
+  --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+  --kern-color-feedback-success: oklch(var(--kern-dataport-viridian-400-lightness) var(--kern-dataport-viridian-400-chroma) var(--kern-dataport-viridian-400-hue));
+  --kern-color-feedback-success-background: oklch(var(--kern-dataport-viridian-900-lightness) var(--kern-dataport-viridian-900-chroma) var(--kern-dataport-viridian-900-hue));
+  --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+  --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+  /* feedback-loader */
+  --kern-color-feedback-loader: oklch(var(--kern-dataport-grey-050-lightness) var(--kern-dataport-grey-050-chroma) var(--kern-dataport-grey-050-hue));
+  --kern-color-feedback-loader-background: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+  /* form-inputs */
+  --kern-color-form-input-background: oklch(var(--kern-dataport-grey-900-lightness) var(--kern-dataport-grey-900-chroma) var(--kern-dataport-grey-900-hue));
+  --kern-color-form-input-background-inverted: oklch(var(--kern-dataport-grey-1000-lightness) var(--kern-dataport-grey-1000-chroma) var(--kern-dataport-grey-1000-hue));
+  --kern-color-form-input-border: oklch(var(--kern-dataport-grey-050-lightness) var(--kern-dataport-grey-050-chroma) var(--kern-dataport-grey-050-hue));
+  /* layout */
+  --kern-color-layout-border: oklch(var(--kern-dataport-grey-700-lightness) var(--kern-dataport-grey-700-chroma) var(--kern-dataport-grey-700-hue));
+  /* layout-text */
+  --kern-color-layout-text-default: oklch(var(--kern-dataport-grey-050-lightness) var(--kern-dataport-grey-050-chroma) var(--kern-dataport-grey-050-hue));
+  --kern-color-layout-text-inverse: oklch(var(--kern-dataport-grey-950-lightness) var(--kern-dataport-grey-950-chroma) var(--kern-dataport-grey-950-hue));
+  --kern-color-layout-text-muted: oklch(var(--kern-dataport-grey-300-lightness) var(--kern-dataport-grey-300-chroma) var(--kern-dataport-grey-300-hue));
+  /* layout-background */
+  --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-dataport-grey-950-lightness) var(--kern-dataport-grey-950-chroma) var(--kern-dataport-grey-950-hue));
+  --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+  /* JUST FOR THE SHOWCASE ------------------------------------- */
+  --kern-shadow-lightness: var(--kern-dataport-grey-900-lightness);
+  --kern-shadow-chroma: var(--kern-dataport-grey-900-chroma);
+  --kern-shadow-hue: var(--kern-dataport-grey-900-hue);
+  /* ----------------------------------------------------------- */
+}

src/scss/themes/examples/README.md

+# 📁 examples
+
+## Inhalt
+
+Dieser Ordner enthält Themes-Beispiele und zeigt wie die erstellt werden können:
+
+- **[dataport.css]** - Enthält das Theme für Dataport.
+- **[bw.css]** - Enthält das Theme für Baden-Württemberg.
+- **[sh.css]** - Enthält das Theme für Schleswig-Holstein.
+

src/scss/themes/examples/sh.css

+ /* -- SH Blau -- */
+:root {
+   /* SH Blau 025 */
+    --kern-sh-blau-025-lightness: 97.55%;
+    --kern-sh-blau-025-chroma: 0.0045;
+    --kern-sh-blau-025-hue: 258.3;
+
+    /* SH Blau 050 */
+    --kern-sh-blau-050-lightness: 95.73%;
+    --kern-sh-blau-050-chroma: 0.0074;
+    --kern-sh-blau-050-hue: 260.7;
+
+    /* SH Blau 100 */
+    --kern-sh-blau-100-lightness: 90.96%;
+    --kern-sh-blau-100-chroma: 0.0161;
+    --kern-sh-blau-100-hue: 253.9;
+
+    /* SH Blau 150 */
+    --kern-sh-blau-150-lightness: 86.81%;
+    --kern-sh-blau-150-chroma: 0.0234;
+    --kern-sh-blau-150-hue: 252.2;
+
+    /* SH Blau 200 */
+    --kern-sh-blau-200-lightness: 82.42%;
+    --kern-sh-blau-200-chroma: 0.0314;
+    --kern-sh-blau-200-hue: 254.3;
+
+    /* SH Blau 250 */
+    --kern-sh-blau-250-lightness: 78.58%;
+    --kern-sh-blau-250-chroma: 0.0384;
+    --kern-sh-blau-250-hue: 254.6;
+
+    /* SH Blau 300 */
+    --kern-sh-blau-300-lightness: 74.03%;
+    --kern-sh-blau-300-chroma: 0.0475;
+    --kern-sh-blau-300-hue: 254.6;
+
+    /* SH Blau 350 */
+    --kern-sh-blau-350-lightness: 69.8%;
+    --kern-sh-blau-350-chroma: 0.055;
+    --kern-sh-blau-350-hue: 254.7;
+
+    /* SH Blau 400 */
+    --kern-sh-blau-400-lightness: 65.52%;
+    --kern-sh-blau-400-chroma: 0.0627;
+    --kern-sh-blau-400-hue: 254.9;
+
+    /* SH Blau 450 */
+    --kern-sh-blau-450-lightness: 61.23%;
+    --kern-sh-blau-450-chroma: 0.0688;
+    --kern-sh-blau-450-hue: 255.2;
+
+    /* SH Blau 500 */
+    --kern-sh-blau-500-lightness: 56.77%;
+    --kern-sh-blau-500-chroma: 0.0762;
+    --kern-sh-blau-500-hue: 254.2;
+
+    /* SH Blau 550 */
+    --kern-sh-blau-550-lightness: 52.39%;
+    --kern-sh-blau-550-chroma: 0.0827;
+    --kern-sh-blau-550-hue: 254.6;
+
+    /* SH Blau 600 */
+    --kern-sh-blau-600-lightness: 48.04%;
+    --kern-sh-blau-600-chroma: 0.0889;
+    --kern-sh-blau-600-hue: 255.5;
+
+    /* SH Blau 650 */
+    --kern-sh-blau-650-lightness: 43.88%;
+    --kern-sh-blau-650-chroma: 0.0941;
+    --kern-sh-blau-650-hue: 255.5;
+
+    /* SH Blau 700 */
+    --kern-sh-blau-700-lightness: 39.69%;
+    --kern-sh-blau-700-chroma: 0.0997;
+    --kern-sh-blau-700-hue: 255.3;
+
+    /* SH Blau 750 */
+    --kern-sh-blau-750-lightness: 35.38%;
+    --kern-sh-blau-750-chroma: 0.1018;
+    --kern-sh-blau-750-hue: 255.1;
+
+    /* SH Blau 800 */
+    --kern-sh-blau-800-lightness: 31.08%;
+    --kern-sh-blau-800-chroma: 0.1035;
+    --kern-sh-blau-800-hue: 255.3;
+
+    /* SH Blau 850 */
+    --kern-sh-blau-850-lightness: 27.18%;
+    --kern-sh-blau-850-chroma: 0.0994;
+    --kern-sh-blau-850-hue: 257.7;
+
+    /* SH Blau 900 */
+    --kern-sh-blau-900-lightness: 22.64%;
+    --kern-sh-blau-900-chroma: 0.0923;
+    --kern-sh-blau-900-hue: 260;
+
+    /* SH Blau 950 */
+    --kern-sh-blau-950-lightness: 18.2%;
+    --kern-sh-blau-950-chroma: 0.0789;
+    --kern-sh-blau-950-hue: 261.1;
+}
+
+ /* -- SH Red -- */
+:root {
+    /* SH Red 025 */
+    --kern-sh-red-025-lightness: 97.79%;
+    --kern-sh-red-025-chroma: 0.0107;
+    --kern-sh-red-025-hue: 17.34;
+
+    /* SH Red 050 */
+    --kern-sh-red-050-lightness: 96.07%;
+    --kern-sh-red-050-chroma: 0.0196;
+    --kern-sh-red-050-hue: 13.63;
+
+    /* SH Red 100 */
+    --kern-sh-red-100-lightness: 91.59%;
+    --kern-sh-red-100-chroma: 0.0437;
+    --kern-sh-red-100-hue: 12.74;
+
+    /* SH Red 150 */
+    --kern-sh-red-150-lightness: 87.85%;
+    --kern-sh-red-150-chroma: 0.0654;
+    --kern-sh-red-150-hue: 12.61;
+
+    /* SH Red 200 */
+    --kern-sh-red-200-lightness: 83.66%;
+    --kern-sh-red-200-chroma: 0.0917;
+    --kern-sh-red-200-hue: 12.47;
+
+    /* SH Red 250 */
+    --kern-sh-red-250-lightness: 79.86%;
+    --kern-sh-red-250-chroma: 0.1174;
+    --kern-sh-red-250-hue: 12.8;
+
+    /* SH Red 300 */
+    --kern-sh-red-300-lightness: 75.83%;
+    --kern-sh-red-300-chroma: 0.1471;
+    --kern-sh-red-300-hue: 12.87;
+
+    /* SH Red 350 */
+    --kern-sh-red-350-lightness: 72.05%;
+    --kern-sh-red-350-chroma: 0.1747;
+    --kern-sh-red-350-hue: 13.58;
+
+    /* SH Red 400 */
+    --kern-sh-red-400-lightness: 68.01%;
+    --kern-sh-red-400-chroma: 0.1929;
+    --kern-sh-red-400-hue: 13.35;
+
+    /* SH Red 450 */
+    --kern-sh-red-450-lightness: 63.93%;
+    --kern-sh-red-450-chroma: 0.2074;
+    --kern-sh-red-450-hue: 13.47;
+
+    /* SH Red 500 */
+    --kern-sh-red-500-lightness: 59.56%;
+    --kern-sh-red-500-chroma: 0.2177;
+    --kern-sh-red-500-hue: 13.65;
+
+    /* SH Red 550 */
+    --kern-sh-red-550-lightness: 55.2%;
+    --kern-sh-red-550-chroma: 0.2206;
+    --kern-sh-red-550-hue: 13.35;
+
+    /* SH Red 600 */
+    --kern-sh-red-600-lightness: 50.73%;
+    --kern-sh-red-600-chroma: 0.2029;
+    --kern-sh-red-600-hue: 15.35;
+
+    /* SH Red 650 */
+    --kern-sh-red-650-lightness: 46.21%;
+    --kern-sh-red-650-chroma: 0.185;
+    --kern-sh-red-650-hue: 16.93;
+
+    /* SH Red 700 */
+    --kern-sh-red-700-lightness: 41.84%;
+    --kern-sh-red-700-chroma: 0.1676;
+    --kern-sh-red-700-hue: 17.68;
+
+    /* SH Red 750 */
+    --kern-sh-red-750-lightness: 36.93%;
+    --kern-sh-red-750-chroma: 0.148;
+    --kern-sh-red-750-hue: 18.31;
+
+    /* SH Red 800 */
+    --kern-sh-red-800-lightness: 32.55%;
+    --kern-sh-red-800-chroma: 0.1305;
+    --kern-sh-red-800-hue: 18.56;
+
+    /* SH Red 850 */
+    --kern-sh-red-850-lightness: 28.23%;
+    --kern-sh-red-850-chroma: 0.1132;
+    --kern-sh-red-850-hue: 19.13;
+
+    /* SH Red 900 */
+    --kern-sh-red-900-lightness: 23.27%;
+    --kern-sh-red-900-chroma: 0.0934;
+    --kern-sh-red-900-hue: 19.44;
+
+    /* SH Red 950 */
+    --kern-sh-red-950-lightness: 18.55%;
+    --kern-sh-red-950-chroma: 0.0745;
+    --kern-sh-red-950-hue: 19.55;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-sh-red-450-lightness) var(--kern-sh-red-450-chroma) var(--kern-sh-red-450-hue));
+    /* brandbar-stripe */
+    --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+    /* Block 1 */
+    --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+    --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
+    --kern-color-brandbar-block-1-segment-2: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
+    --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+    --kern-color-brandbar-block-1-segment-5: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
+    --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
+    /* Block 2 */
+    --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-sh-red-750-lightness) var(--kern-sh-red-750-chroma) var(--kern-sh-red-750-hue));
+    --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-sh-red-450-lightness) var(--kern-sh-red-450-chroma) var(--kern-sh-red-450-hue));
+    --kern-color-brandbar-block-2-segment-3: oklch(var(--kern-sh-red-800-lightness) var(--kern-sh-red-800-chroma) var(--kern-sh-red-800-hue));
+    --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-sh-red-900-lightness) var(--kern-sh-red-900-chroma) var(--kern-sh-red-900-hue));
+    --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-sh-red-450-lightness) var(--kern-sh-red-450-chroma) var(--kern-sh-red-450-hue));
+    --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-sh-red-800-lightness) var(--kern-sh-red-800-chroma) var(--kern-sh-red-800-hue));
+    /* Block 3 */
+    --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
+    --kern-color-brandbar-block-3-segment-2: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+    --kern-color-brandbar-block-3-segment-3: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
+    --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+    --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-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 */
+    --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-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+    --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
+    /* feedback */
+    --kern-color-feedback-danger: oklch(var(--kern-sh-red-400-lightness) var(--kern-sh-red-400-chroma) var(--kern-sh-red-400-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-sh-red-900-lightness) var(--kern-sh-red-900-chroma) var(--kern-sh-red-900-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+    --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+    --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+    /* feedback-loader */
+    --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
+    --kern-color-feedback-loader-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    /* 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-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));
+    /* layout */
+    --kern-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    /* layout-text */
+    --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-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-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-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-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    /* JUST FOR THE SHOWCASE ------------------------------------- */
+    --kern-shadow-lightness: var(--kern-neutral-900-lightness);
+    --kern-shadow-chroma: var(--kern-neutral-900-chroma);
+    --kern-shadow-hue: var(--kern-neutral-900-hue);
+    /* ----------------------------------------------------------- */
+  }
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-sh-red-550-lightness) var(--kern-sh-red-550-chroma) var(--kern-sh-red-550-hue));
+    /* brandbar-stripe */
+    --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+    /* Block 1 */
+    --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+    --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --kern-color-brandbar-block-1-segment-2: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+    --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+    --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-darkblue-025-lightness) var(--kern-darkblue-025-chroma) var(--kern-darkblue-025-hue));
+    --kern-color-brandbar-block-1-segment-5: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+    /* Block 2 */
+    --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-sh-red-250-lightness) var(--kern-sh-red-250-chroma) var(--kern-sh-red-250-hue));
+    --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-sh-red-550-lightness) var(--kern-sh-red-550-chroma) var(--kern-sh-red-550-hue));
+    --kern-color-brandbar-block-2-segment-3: oklch(var(--kern-sh-red-150-lightness) var(--kern-sh-red-150-chroma) var(--kern-sh-red-150-hue));
+    --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-sh-red-050-lightness) var(--kern-sh-red-050-chroma) var(--kern-sh-red-050-hue));
+    --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-sh-red-550-lightness) var(--kern-sh-red-550-chroma) var(--kern-sh-red-550-hue));
+    --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-sh-red-150-lightness) var(--kern-sh-red-150-chroma) var(--kern-sh-red-150-hue));
+    /* Block 3 */
+    --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+    --kern-color-brandbar-block-3-segment-2: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
+    --kern-color-brandbar-block-3-segment-3: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+    --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+    --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-darkblue-025-lightness) var(--kern-darkblue-025-chroma) var(--kern-darkblue-025-hue));
+    --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+    /* action */
+    --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 */
+    --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-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+    --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
+    /* feedback */
+    --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+    --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+    --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+    /* feedback-loader */
+    --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    --kern-color-feedback-loader-background: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));
+    /* form-inputs */
+    --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-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));
+    /* layout */
+    --kern-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
+    /* layout-text */
+    --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-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-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-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-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    /* JUST FOR THE SHOWCASE ------------------------------------- */
+    --kern-shadow-lightness: var(--kern-neutral-200-lightness);
+    --kern-shadow-chroma: var(--kern-neutral-200-chroma);
+    --kern-shadow-hue: var(--kern-neutral-200-hue);
+    /* ----------------------------------------------------------- */
+  }
+}
+[data-kern-theme=light],
+.kern-light {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-sh-red-550-lightness) var(--kern-sh-red-550-chroma) var(--kern-sh-red-550-hue));
+  /* brandbar-stripe */
+  --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+  /* Block 1 */
+  --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+  --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+  --kern-color-brandbar-block-1-segment-2: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+  --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+  --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-darkblue-025-lightness) var(--kern-darkblue-025-chroma) var(--kern-darkblue-025-hue));
+  --kern-color-brandbar-block-1-segment-5: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+  --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+  /* Block 2 */
+  --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-sh-red-250-lightness) var(--kern-sh-red-250-chroma) var(--kern-sh-red-250-hue));
+  --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-sh-red-550-lightness) var(--kern-sh-red-550-chroma) var(--kern-sh-red-550-hue));
+  --kern-color-brandbar-block-2-segment-3: oklch(var(--kern-sh-red-150-lightness) var(--kern-sh-red-150-chroma) var(--kern-sh-red-150-hue));
+  --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-sh-red-050-lightness) var(--kern-sh-red-050-chroma) var(--kern-sh-red-050-hue));
+  --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-sh-red-550-lightness) var(--kern-sh-red-550-chroma) var(--kern-sh-red-550-hue));
+  --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-sh-red-150-lightness) var(--kern-sh-red-150-chroma) var(--kern-sh-red-150-hue));
+  /* Block 3 */
+  --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+  --kern-color-brandbar-block-3-segment-2: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
+  --kern-color-brandbar-block-3-segment-3: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+  --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+  --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-darkblue-025-lightness) var(--kern-darkblue-025-chroma) var(--kern-darkblue-025-hue));
+  --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
+  /* action */
+  --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 */
+  --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-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+  --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
+  /* feedback */
+  --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
+  --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
+  --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+  --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
+  --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
+  --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+  --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
+  /* feedback-loader */
+  --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+  --kern-color-feedback-loader-background: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));
+  /* form-inputs */
+  --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-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));
+  /* layout */
+  --kern-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
+  /* layout-text */
+  --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-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-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-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-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+  /* JUST FOR THE SHOWCASE ------------------------------------- */
+  --kern-shadow-lightness: var(--kern-neutral-200-lightness);
+  --kern-shadow-chroma: var(--kern-neutral-200-chroma);
+  --kern-shadow-hue: var(--kern-neutral-200-hue);
+  /* ----------------------------------------------------------- */
+}
+
+[data-kern-theme=dark],
+.kern-dark {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-sh-red-450-lightness) var(--kern-sh-red-450-chroma) var(--kern-sh-red-450-hue));
+  /* brandbar-stripe */
+  --kern-color-brandbar-dicing: var(--kern-metric-space-none); /* Erzeugt eine Gap zwischen Segments und einen gewürfelten Effekt. */
+  /* Block 1 */
+  --kern-color-brandbar-full-color: transparent; /* TO BE DELETED ... ledigilich für die aktuelle Themingdemo relevant */
+  --kern-color-brandbar-block-1-segment-1: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
+  --kern-color-brandbar-block-1-segment-2: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+  --kern-color-brandbar-block-1-segment-3: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
+  --kern-color-brandbar-block-1-segment-4: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+  --kern-color-brandbar-block-1-segment-5: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
+  --kern-color-brandbar-block-1-segment-6: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
+  /* Block 2 */
+  --kern-color-brandbar-block-2-segment-1: oklch(var(--kern-sh-red-750-lightness) var(--kern-sh-red-750-chroma) var(--kern-sh-red-750-hue));
+  --kern-color-brandbar-block-2-segment-2: oklch(var(--kern-sh-red-450-lightness) var(--kern-sh-red-450-chroma) var(--kern-sh-red-450-hue));
+  --kern-color-brandbar-block-2-segment-3: oklch(var(--kern-sh-red-800-lightness) var(--kern-sh-red-800-chroma) var(--kern-sh-red-800-hue));
+  --kern-color-brandbar-block-2-segment-4: oklch(var(--kern-sh-red-900-lightness) var(--kern-sh-red-900-chroma) var(--kern-sh-red-900-hue));
+  --kern-color-brandbar-block-2-segment-5: oklch(var(--kern-sh-red-450-lightness) var(--kern-sh-red-450-chroma) var(--kern-sh-red-450-hue));
+  --kern-color-brandbar-block-2-segment-6: oklch(var(--kern-sh-red-800-lightness) var(--kern-sh-red-800-chroma) var(--kern-sh-red-800-hue));
+  /* Block 3 */
+  --kern-color-brandbar-block-3-segment-1: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
+  --kern-color-brandbar-block-3-segment-2: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+  --kern-color-brandbar-block-3-segment-3: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+  --kern-color-brandbar-block-3-segment-4: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
+  --kern-color-brandbar-block-3-segment-5: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
+  --kern-color-brandbar-block-3-segment-6: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-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 */
+  --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-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+  --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
+  /* feedback */
+  --kern-color-feedback-danger: oklch(var(--kern-sh-red-400-lightness) var(--kern-sh-red-400-chroma) var(--kern-sh-red-400-hue));
+  --kern-color-feedback-danger-background: oklch(var(--kern-sh-red-900-lightness) var(--kern-sh-red-900-chroma) var(--kern-sh-red-900-hue));
+  --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+  --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+  --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
+  --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
+  --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+  --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
+  /* feedback-loader */
+  --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
+  --kern-color-feedback-loader-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+  /* 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-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));
+  /* layout */
+  --kern-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+  /* layout-text */
+  --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-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-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-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-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+  /* JUST FOR THE SHOWCASE ------------------------------------- */
+  --kern-shadow-lightness: var(--kern-neutral-900-lightness);
+  --kern-shadow-chroma: var(--kern-neutral-900-chroma);
+  --kern-shadow-hue: var(--kern-neutral-900-hue);
+  /* ----------------------------------------------------------- */
+}

CHANGELOG.md

@@ -0,1 +1,19 @@
+# [2.4.0](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.3.2...v2.4.0) (2025-11-21)
+
+
+### Bug Fixes
+
+* **Accessibility:** add styles for aria-disabled state [#180](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/180) ([f2b814a](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/f2b814a51b1855f662915a46ba423373baa62428))
+* **Checkbox/Radio:** expand clickable area for radio and checkbox labels [#195](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/195) ([2c0a201](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/2c0a2016e214d8c53b684894cb64b0afb0f9b24c))
+* **Kopfzeile:** Flag is not displayed in Safari browser [#190](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/190) ([e87edbb](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/e87edbb8571246372b9ad211516a897dfdb5e027))
+* **Radio/Checkbox:** fix focus-visible style for radio and checkbox [#188](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/188) ([d6ebf17](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/d6ebf179d02301ca25e9c36e72629b5474270d64))
+* **Tokens:** invert black and white [#182](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/182) ([8f179e6](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/8f179e6125d97a122ef0f501617c628db9a242cd))
+
+
+### Features
+
+* **Linkbutton:** add linkbutton component [#159](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/159) ([8cba4ae](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/8cba4ae82db4f7b9925aa65e51c71edc338edfed))
+* **List:** add horizontal styles to list [#157](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/157) ([88b9a65](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/88b9a6518d09fa6d5f429e3602e25cf494afad1f))
+* **List:** add styles for links in small list [#189](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/189) ([0dd4328](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/0dd4328d0f10350319bd204f5bcdb994ea89cc22))
+
 ## [2.3.2](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.3.1...v2.3.2) (2025-09-25)
@@ -2,0 +20,0 @@

dist/js/kern-kopfzeile.js

@@ -104,2 +104,3 @@ /**
                 width: var(--kern-metric-dimension-default, 24px);
+                height: var(--kern-metric-dimension-x-small, 16px);
                 flex-shrink: 0;
@@ -125,2 +126,3 @@ }
                     width: var(--kern-18, 18px);
+                    height: var(--kern-12, 12px);
                 }
@@ -127,0 +129,0 @@ .kern-kopfzeile__label {

package.json

 {
   "name": "@kern-ux/native",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Das Native Package beinhaltet alle zur Komponenten-Bibliothek gehörenden Styles.",
@@ -56,3 +56,3 @@ "author": "Kern-UX",
     "puppeteer": "^24.10.1",
-    "sass": "^1.79.5",
+    "sass": "^1.94.1",
     "semantic-release": "^22.0.12",
@@ -59,0 +59,0 @@ "storybook": "^9.0.10",

src/scss/core/components/_accordion.scss

@@ -0,1 +1,4 @@
+@use "../utilities/icons";
+@use "../utilities/mixins";
+
 /**
@@ -18,3 +21,3 @@ * @file _accordion.scss
 .kern-accordion {
-  @include normalize;
+  @include mixins.normalize;
   border-radius: var(--kern-metric-border-radius-none, 0px);
@@ -31,6 +34,6 @@ border-top: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
       &::after {
-        -webkit-mask: map.get($icons, "arrow-up");
-        mask: map.get($icons, "arrow-up");
+        -webkit-mask: map.get(icons.$icons, "arrow-up");
+        mask: map.get(icons.$icons, "arrow-up");
         background-color: var(--kern-color-action-default, #1A3DA5);
-        @include forced-colors-style;
+        @include mixins.forced-colors-style;
       }
@@ -60,8 +63,8 @@ }
       height: var(--kern-metric-dimension-default, 24px);
-      -webkit-mask: map.get($icons, "arrow-down");
-      mask: map.get($icons, "arrow-down");
+      -webkit-mask: map.get(icons.$icons, "arrow-down");
+      mask: map.get(icons.$icons, "arrow-down");
       mask-size: cover;
       mask-repeat: no-repeat;
       background-color: var(--kern-color-action-default, #1A3DA5);
-      @include forced-colors-style;
+      @include mixins.forced-colors-style;
     }
@@ -82,3 +85,3 @@
           0 0 0 6px var(--kern-color-action-focus-border-outside);
-        @include forced-colors-focus;
+        @include mixins.forced-colors-focus;
       }
@@ -85,0 +88,0 @@ }

src/scss/core/components/_alert.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -26,3 +28,3 @@ * @file _alert.scss
             background-color: var(--kern-color-feedback-info, #006490);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         }       
@@ -36,3 +38,3 @@ }
             background-color: var(--kern-color-feedback-success, #006B51);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         } 
@@ -46,3 +48,3 @@ }
             background-color: var(--kern-color-feedback-warning, #8A4F00);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         } 
@@ -56,3 +58,3 @@ }
             background-color: var(--kern-color-feedback-danger, #BD0F09);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         } 
@@ -59,0 +61,0 @@ }

src/scss/core/components/_badge.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -38,3 +40,3 @@ * @file _badge.scss
             background-color: var(--kern-color-feedback-info, #006490);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         }
@@ -49,3 +51,3 @@ }
             background-color: var(--kern-color-feedback-success, #006B51);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         }
@@ -60,3 +62,3 @@ }
             background-color: var(--kern-color-feedback-warning, #8A4F00);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         }
@@ -71,3 +73,3 @@ }
             background-color: var(--kern-color-feedback-danger, #BD0F09);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         }
@@ -74,0 +76,0 @@ }

src/scss/core/components/_button.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -6,3 +8,3 @@ * @file _button.scss
  * @date 16.12.2024
- * @modified 30.07.2025
+ * @modified 30.09.2025
  * @@VERSION@@
@@ -27,6 +29,6 @@ * @brief Styles für die Button-Komponente.
     background-color: var(--kern-color-action-default, #1A3DA5);
-    @include forced-colors-style;
+    @include mixins.forced-colors-style;
   }
 
-  &:not(:disabled):hover {
+  &:not(:disabled):hover, &:not([aria-disabled='true']):hover {
     background: var(--kern-color-action-state-indicator-tint-hover-opacity);
@@ -40,3 +42,4 @@ }
   &:disabled,
-  &[disabled] {
+  &[disabled],
+  &[aria-disabled='true'] {
     opacity: var(--action-state-opacity-disabled, 0.4);
@@ -72,8 +75,8 @@ }
   }
- 
-  &:not(:disabled):hover {
+
+  &:not(:disabled):hover, &:not([aria-disabled='true']):hover {
     cursor: pointer;
   }
 
-  &:not([disabled]) {
+  &:not([disabled]), &:not([aria-disabled='true']) {
     &:not([tabindex="-1"]) {
@@ -86,3 +89,3 @@ &:focus {
         &:focus-visible {
-          @include forced-colors-focus;
+          @include mixins.forced-colors-focus;
         }
@@ -94,4 +97,6 @@ }
   &:disabled,
-  &[disabled] {
-    cursor: not-allowed;
+  &[disabled],
+  &[aria-disabled='true'] {
+    cursor: not-allowed !important;
+    //pointer-events:  none !important;
   }
@@ -116,6 +121,6 @@
       background-color: var(--kern-color-action-on-default, #FFF);
-      @include forced-colors-style;
+      @include mixins.forced-colors-style;
     }
 
-    &:not(:disabled):hover {
+    &:not(:disabled):hover, &:not([aria-disabled='true']):hover {
       background: var(--kern-color-action-state-indicator-shade-hover);
@@ -129,3 +134,4 @@ }
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[aria-disabled='true'] {
         background: var(--action-default, #1A3DA5);
@@ -140,3 +146,3 @@ opacity: var(--action-state-opacity-disabled, 0.4);
     @include light-button;
-    @include forced-colors-border-1px;
+    @include mixins.forced-colors-border-1px;
   }
@@ -158,3 +164,4 @@
       &:disabled,
-      &[disabled] {
+      &[disabled],
+      &[aria-disabled='true'] {
         .kern-label {
@@ -161,0 +168,0 @@ text-decoration-thickness: var(--kern-metric-border-width-light, 1px);

src/scss/core/components/_card.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -150,3 +152,3 @@ * @file _card.scss
             var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
-           @include forced-colors-focus;
+           @include mixins.forced-colors-focus;
         }
@@ -165,11 +167,11 @@ }
         .kern-preline {
-          @include preline-small;
+          @include mixins.preline-small;
         }
 
         .kern-title {
-          @include title-small;
+          @include mixins.title-small;
         }
 
         .kern-subline {
-          @include subline-small;
+          @include mixins.subline-small;
         }
@@ -180,3 +182,3 @@ }
         .kern-body {
-          @include body-small;
+          @include mixins.body-small;
         }
@@ -195,11 +197,11 @@ }
         .kern-preline {
-          @include preline-large;
+          @include mixins.preline-large;
         }
 
         .kern-title {
-          @include title-large;
+          @include mixins.title-large;
         }
 
         .kern-subline {
-          @include subline-large;
+          @include mixins.subline-large;
         }
@@ -210,3 +212,3 @@ }
         .kern-body {
-          @include body-large;
+          @include mixins.body-large;
         }
@@ -213,0 +215,0 @@ }

src/scss/core/components/_check.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -6,3 +8,3 @@ * @file _check.scss
  * @date 16.12.2024
- * @modified 30.07.2025
+ * @modified 20.10.2025
  * @@VERSION@@
@@ -21,5 +23,3 @@ * @brief Styles für die Checkbox und Radio Komponente.
   padding-right: var(--kern-metric-space-default, 16px);
-  gap: var(--kern-metric-space-small, 8px)
-    var(--kern-metric-space-default, 16px);
-
+  
   &__radio,
@@ -42,8 +42,8 @@ &__checkbox {
     &:focus-visible {
-      box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px)
-        var(--kern-color-form-input-border, #171a2b);
-      outline-color: transparent;
+      box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border, #171a2b);
+      outline-offset: var(--kern-metric-border-width-default, 2px);
+      outline: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border, #171a2b);
       border: var(--kern-metric-border-width-none, 0px);
       forced-color-adjust: none;
-      @include forced-colors-focus;
+      @include mixins.forced-colors-focus;
 
@@ -60,6 +60,7 @@ &:hover {
           var(--kern-color-form-input-border, #171a2b);
+        outline-offset: var(--kern-metric-border-width-bold, 4px);
         outline-color: transparent;
         border: var(--kern-metric-border-width-none, 0px);
         forced-color-adjust: none;
-        @include forced-colors-focus;
+        @include mixins.forced-colors-focus;
 
@@ -104,3 +105,3 @@ &:hover {
 
-    &[disabled] {
+    &[disabled], &[aria-disabled='true'] {
       outline: 0;
@@ -127,5 +128,6 @@ opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
     padding-top: var(--kern-metric-space-x-small, 4px);
+    padding-left: var(--kern-metric-space-default, 16px);
 
     &:has(.kern-label__optional) {
-      @include optional;
+      @include mixins.optional;
     }
@@ -141,2 +143,3 @@
     grid-column: span 2;
+    padding-top: var(--kern-metric-space-small, 8px);
 
@@ -143,0 +146,0 @@ .kern-icon {

src/scss/core/components/_description-list.scss

@@ -16,6 +16,8 @@ /**
 
-@import '../utilities/maps';
+@use "sass:map";
+@use '../utilities/maps';
+@use "../utilities/mixins";
 
 .kern-description-list {
-    @include normalize;
+    @include mixins.normalize;
     display: flex;
@@ -27,3 +29,3 @@ flex-direction: column;
     p {
-        @include normalize;
+        @include mixins.normalize;
     }
@@ -53,3 +55,3 @@
 
-        @media (min-width: map-get($grid-breakpoints, md)) {
+        @media (min-width: map.get(maps.$grid-breakpoints, md)) {
             flex-direction: row;
@@ -60,7 +62,7 @@ gap: var(--kern-metric-space-x-large, 32px);
         &__key {
-            @include normalize;
-            @include body-default;
+            @include mixins.normalize;
+            @include mixins.body-default;
             font-weight: var(--kern-typography-font-weight-semi-bold, 600);
     
-            @media (min-width: map-get($grid-breakpoints, md)) {
+            @media (min-width: map.get(maps.$grid-breakpoints, md)) {
                 width: 30%;
@@ -72,4 +74,4 @@ max-width: var(--kern-component-description-list-term-max-width, 352px);
         &__value {
-            @include normalize;
-            @include body-default;
+            @include mixins.normalize;
+            @include mixins.body-default;
 
@@ -81,3 +83,3 @@ ul {
             
-            @media (min-width: map-get($grid-breakpoints, md)) {
+            @media (min-width: map.get(maps.$grid-breakpoints, md)) {
                 width: calc(70% - var(--kern-metric-space-x-large, 32px));
@@ -84,0 +86,0 @@ }

src/scss/core/components/_dialog.scss

@@ -14,3 +14,4 @@ /**
 
-@import '../utilities/maps';
+@use "sass:map";
+@use '../utilities/maps';
 
@@ -78,3 +79,3 @@ .kern-dialog {
 
-  @media (max-width: map-get($grid-breakpoints, md)) {
+  @media (max-width: map.get(maps.$grid-breakpoints, md)) {
     overflow-y: auto;
@@ -81,0 +82,0 @@ min-width: 100%;

src/scss/core/components/_divider.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -19,3 +21,3 @@ * @file _divider.scss
     background-color: var(--kern-color-layout-border, #A5AAC3);
-    @include forced-colors-style;
+    @include mixins.forced-colors-style;
 }

src/scss/core/components/_dropdown.scss

@@ -0,1 +1,4 @@
+@use "../utilities/icons";
+@use "../utilities/mixins";
+
 /**
@@ -48,3 +51,3 @@ * @file _dropdown.scss
     border-radius: var(--kern-metric-border-radius-default, 4px);
-    @include body-default;
+    @include mixins.body-default;
     padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
@@ -58,8 +61,8 @@ color: var(--kern-color-action-default, #1A3DA5);
       height: var(--kern-metric-dimension-default, 24px);
-      -webkit-mask: map.get($icons, "arrow-down");
-      mask: map.get($icons, "arrow-down");
+      -webkit-mask: map.get(icons.$icons, "arrow-down");
+      mask: map.get(icons.$icons, "arrow-down");
       mask-size: cover;
       mask-repeat: no-repeat;
       background-color: var(--kern-color-action-default, #1A3DA5);
-      @include forced-colors-style;
+      @include mixins.forced-colors-style;
     }
@@ -111,4 +114,4 @@
             content: "";
-            -webkit-mask: map.get($icons, "check");
-            mask: map.get($icons, "check");
+            -webkit-mask: map.get(icons.$icons, "check");
+            mask: map.get(icons.$icons, "check");
             background-color: var(--kern-color-action-default, #1A3DA5);
@@ -120,3 +123,3 @@ position: absolute;
             height: 24px;
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
           }  
@@ -123,0 +126,0 @@ }

src/scss/core/components/_fieldset.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -16,7 +18,7 @@ * @file _fieldset.scss
 .kern-fieldset {
-    @include normalize;
+    @include mixins.normalize;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--kern-metric-space-small, 8px);
+    gap: var(--kern-metric-space-none, 0px);
 
@@ -32,2 +34,3 @@ &--error {
         &.kern-label {
+            margin-bottom: var(--kern-metric-space-small, 8px);
             padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
@@ -37,5 +40,13 @@ }
 
+    &:has(.kern-hint) {
+        legend {
+            &.kern-label {
+                margin-bottom: var(--kern-metric-space-none, 0px);
+            }
+        }
+    }
+
     .kern-label {
         &:has(.kern-label__optional) {
-            @include optional;
+            @include mixins.optional;
         }
@@ -49,2 +60,6 @@
 
+    .kern-hint {
+        margin-bottom: var(--kern-metric-space-small, 8px);
+    }
+
     &__body {
@@ -63,2 +78,3 @@ width: 100%;
     .kern-error {
+        margin-top: var(--kern-metric-space-small, 8px);
         .kern-icon {
@@ -65,0 +81,0 @@ width: var(--kern-metric-dimension-default, 24px);

src/scss/core/components/_icon.scss

@@ -18,3 +18,4 @@ /**
 
-@import '../utilities/icons';
+@use '../utilities/icons';
+@use "../utilities/mixins";
 
@@ -28,3 +29,3 @@ .kern-icon {
 
-    @each $name, $size in $sizes {
+    @each $name, $size in icons.$sizes {
         &--#{$name} {
@@ -38,3 +39,3 @@ width: $size;
 
-    @each $name, $url in $icons {
+    @each $name, $url in icons.$icons {
         &--#{$name} {
@@ -44,5 +45,5 @@ -webkit-mask: $url;
             background-color: var(--kern-color-layout-text-default, #171a2b);
-            @include forced-colors-style;
+            @include mixins.forced-colors-style;
         }
     }
 }

src/scss/core/components/_input.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -6,3 +8,3 @@ * @file _input.scss
  * @date 16.12.2024
- * @modified 30.07.2025
+ * @modified 30.09.2025
  * @@VERSION@@
@@ -21,6 +23,6 @@ * @brief Styles für die Form Input Komponenten.
   align-items: flex-start;
-  gap: var(--kern-metric-space-small, 8px);
+  gap: var(--kern-metric-space-none, 0px);
   align-self: stretch;
 
-  &:has(input[disabled], textarea[disabled]) {
+  &:has(input[disabled], textarea[disabled], input[aria-disabled='true'], textarea[aria-disabled='true']) {
     cursor: not-allowed;
@@ -34,4 +36,6 @@
   .kern-label {
+    margin-bottom: var(--kern-metric-space-small, 8px);
+
     &:has(.kern-label__optional) {
-      @include optional;
+      @include mixins.optional;
     }
@@ -45,4 +49,14 @@
 
+  &:has(.kern-hint) {
+    .kern-label {
+      margin-bottom: var(--kern-metric-space-none, 0px);
+    }
+  }
+
+  .kern-hint {
+    margin-bottom: var(--kern-metric-space-small, 8px);
+  }
+
   &__input {
-    @include body-default;
+    @include mixins.body-default;
     padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
@@ -62,3 +76,3 @@ height: var(--kern-metric-dimension-x-large, 48px);
     text-overflow: ellipsis;
-    @include forced-colors-border-1px;
+    @include mixins.forced-colors-border-1px;
 
@@ -88,3 +102,3 @@ &:hover {
       cursor: not-allowed;
-      @include forced-colors-border-1px;
+      @include mixins.forced-colors-border-1px;
 
@@ -103,3 +117,4 @@ &:hover {
     &[disabled],
-    &[disabled="disabled"] {
+    &[disabled="disabled"],
+    &[aria-disabled='true'] {
       opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
@@ -117,3 +132,3 @@ cursor: not-allowed;
       background: var(--kern-color-feedback-danger-background, #FEECE8);
-      @include forced-colors-border-1px;
+      @include mixins.forced-colors-border-1px;
 
@@ -171,3 +186,4 @@ &:focus {
     &[disabled],
-    &[disabled="disabled"] {
+    &[disabled="disabled"],
+    &[aria-disabled='true'] {
       outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border, #171A2B);
@@ -179,3 +195,3 @@ box-shadow: none;
     &::file-selector-button {
-      @include body-default;
+      @include mixins.body-default;
 
@@ -196,2 +212,3 @@ margin-right: var(--kern-metric-space-default, 16px);
     order: 5;
+    margin-top: var(--kern-metric-space-small, 8px);
 
@@ -198,0 +215,0 @@ .kern-icon {

src/scss/core/components/_kopfzeile.scss

@@ -15,3 +15,3 @@ /**
  @use "sass:map";
- @import '../utilities/maps';
+ @use '../utilities/maps';
  
@@ -55,3 +55,3 @@ .kern-kopfzeile {
 	 // X-Small devices (portrait phones, less than 576px)
-	 @media only screen and (max-width : map-get($grid-breakpoints, md)) {
+	 @media only screen and (max-width : map.get(maps.$grid-breakpoints, md)) {
 		 
@@ -58,0 +58,0 @@ &__flagge {

src/scss/core/components/_select.scss

@@ -0,1 +1,4 @@
+@use "../utilities/icons";
+@use "../utilities/mixins";
+
 /**
@@ -6,3 +9,3 @@ * @file _select.scss
  * @date 16.12.2024
- * @modified 23.09.2025
+ * @modified 30.09.2025
  * @@VERSION@@
@@ -19,3 +22,3 @@ * @brief Styles für die Form Select Komponenten.
 .kern-form-input {
-  &:has(select[disabled]) {
+  &:has(select[disabled]), &:has(select[aria-disabled='true']) {
     cursor: not-allowed;
@@ -53,5 +56,5 @@
 
-    @include forced-colors-border-1px;
+    @include mixins.forced-colors-border-1px;
 
-    &:has(select[disabled]) {
+    &:has(select[disabled]), &:has(select[aria-disabled="true"]) {
       opacity: var(--kern-color-action-state-opacity-disabled, 0.4);
@@ -89,3 +92,3 @@ }
 
-      &:has(select[disabled]) {
+      &:has(select[disabled]), &:has(select[aria-disabled="true"]) {
         border-bottom: var(--kern-metric-border-width-default, 2px) solid
@@ -113,7 +116,7 @@ var(--kern-color-form-input-border, #171a2b);
       height: var(--kern-metric-dimension-default, 24px);
-      -webkit-mask: map.get($icons, "arrow-down");
-      mask: map.get($icons, "arrow-down");
+      -webkit-mask: map.get(icons.$icons, "arrow-down");
+      mask: map.get(icons.$icons, "arrow-down");
       background-color: var(--kern-color-action-default);
 
-      @include forced-colors-style;
+      @include mixins.forced-colors-style;
     }
@@ -131,3 +134,3 @@ }
 
-    @include body-default;
+    @include mixins.body-default;
 
@@ -160,3 +163,5 @@ padding: var(--kern-metric-baseline-body-default-padding-top, 6px)
     &[disabled],
-    &[disabled="disabled"] {
+    &[disabled="disabled"],
+    &[aria-disabled='true'] {
+      opacity: 0.7;
       cursor: not-allowed;
@@ -163,0 +168,0 @@ }

src/scss/core/components/_summary.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -61,4 +63,4 @@ * @file _summary.scss
     background: var(--kern-color-layout-background-hued, #f7f7f9);
-    @include forced-colors-border-1px;
+    @include mixins.forced-colors-border-1px;
   }
 }

src/scss/core/components/_table.scss

@@ -0,1 +1,3 @@
+@use "../utilities/mixins";
+
 /**
@@ -22,3 +24,3 @@ * @file _table.scss
     .kern-title {
-      @include heading-small;
+      @include mixins.heading-small;
     }
@@ -28,3 +30,3 @@
     .kern-table__cell {
-      @include body-small;
+      @include mixins.body-small;
       padding: calc(var(--kern-metric-baseline-body-small-padding-top, 7px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-small-padding-bottom, 1px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
@@ -64,3 +66,3 @@ }
     box-shadow: inset 0 -1px 0 0 var(--kern-color-layout-border, #A5AAC3);
-    @include body-default;
+    @include mixins.body-default;
     padding: calc(var(--kern-metric-baseline-body-default-padding-top, 6px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-default-padding-bottom, 2px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
@@ -67,0 +69,0 @@ &--numeric {

src/scss/core/components/_task-list.scss

@@ -15,3 +15,5 @@ /**
 
-@import '../utilities/maps';
+@use "sass:map";
+@use '../utilities/maps';
+@use "../utilities/mixins";
 
@@ -48,3 +50,3 @@ .kern-task-list {
 
-      @include heading-medium;
+      @include mixins.heading-medium;
     }
@@ -54,3 +56,3 @@ }
   &__list {
-    @include normalize;
+    @include mixins.normalize;
     display: flex;
@@ -74,3 +76,3 @@ flex-direction: column;
     background: var(--kern-color-layout-background-hued, #F7F7F9);
-    @include forced-colors-border-1px;
+    @include mixins.forced-colors-border-1px;
 
@@ -133,3 +135,3 @@ .kern-number {
 
-    @media all and (min-width: map-get($grid-breakpoints, md)) {
+    @media all and (min-width: map.get(maps.$grid-breakpoints, md)) {
       flex-wrap: nowrap;
@@ -136,0 +138,0 @@ }

src/scss/core/global.scss

@@ -1,5 +0,5 @@
-@import '../core/utilities/mixins';
+@use '../core/utilities/mixins';
 
 html {
-  @include normalize;
+  @include mixins.normalize;
   scroll-behavior: smooth;
@@ -58,3 +58,3 @@ -webkit-text-size-adjust: 100%;
 .kern-sr-only {
-  @include kern-sr-only;
+  @include mixins.kern-sr-only;
 
@@ -65,3 +65,3 @@ &-mobile {
     @media (max-width: 767px) {
-      @include kern-sr-only;
+      @include mixins.kern-sr-only;
     }
@@ -72,3 +72,3 @@ }
 .kern-error {
-  @include normalize;
+  @include mixins.normalize;
   display: flex;
@@ -75,0 +75,0 @@ gap: var(--kern-metric-space-small, 8px);

src/scss/core/index.scss

 // KERN Base
-@import 'global';
+@use 'global';
 
 // KERN Component
-@import "components/icon";
-@import "components/accordion";
-@import "components/alert";
-@import "components/badge";
-@import "components/button";
-@import "components/card";
-@import "components/check";
-@import "components/checkbox";
-@import "components/dialog";
-@import "components/description-list";
-@import "components/divider";
-@import "components/dropdown";
-@import "components/fieldset";
-@import "components/input";
-@import "components/kopfzeile";
-@import "components/loader";
-@import "components/progress";
-@import "components/radio";
-@import "components/select";
-@import "components/summary";
-@import "components/table";
-@import "components/task-list";
+@use "components/icon";
+@use "components/accordion";
+@use "components/alert";
+@use "components/badge";
+@use "components/button";
+@use "components/card";
+@use "components/check";
+@use "components/checkbox";
+@use "components/dialog";
+@use "components/description-list";
+@use "components/divider";
+@use "components/dropdown";
+@use "components/fieldset";
+@use "components/input";
+@use "components/kopfzeile";
+@use "components/loader";
+@use "components/progress";
+@use "components/radio";
+@use "components/select";
+@use "components/summary";
+@use "components/table";
+@use "components/task-list";
 
 // KERN Typogrphy
-@import "typography/body";
-@import "typography/heading";
-@import "typography/label";
-@import "typography/link";
-@import "typography/list";
-@import "typography/subline";
-@import "typography/preline";
-@import "typography/title";
+@use "typography/body";
+@use "typography/heading";
+@use "typography/label";
+@use "typography/link";
+@use "typography/list";
+@use "typography/subline";
+@use "typography/preline";
+@use "typography/title";
 
 // KERN Layout
-@import "layout/grid";
+@use "layout/grid";
 
 // KERN Theme
-@import 'tokens/index'; // Dachmarke Theme 2.0 
+@use 'tokens/index'; // Dachmarke Theme 2.0 

src/scss/core/layout/_grid.scss

@@ -15,3 +15,4 @@ /**
 @use 'sass:math';
-@import '../utilities/maps';
+@use "sass:map";
+@use '../utilities/maps';
 
@@ -45,3 +46,3 @@ @mixin kern-grid {
       @extend %container-base;
-      max-width: map-get($grid-breakpoints, "xxl");
+      max-width: map.get(maps.$grid-breakpoints, "xxl");
     }
@@ -141,3 +142,3 @@ &-container-fluid {
   // Create breakpoint specific columns
-  @each $name, $value in $grid-breakpoints {
+  @each $name, $value in maps.$grid-breakpoints {
 
@@ -147,3 +148,3 @@ @if $value != 0 {
         .kern-container {
-          max-width: map-get($container-max-widths, $name);
+          max-width: map.get(maps.$container-max-widths, $name);
         }                
@@ -150,0 +151,0 @@

src/scss/core/tokens/_index.scss

@@ -1,5 +0,5 @@
-@import './primitives/colors';
-@import './primitives/font';
-@import './primitives/sizes';
-@import './variables';
-@import './theme';
+@use 'primitives/colors';
+@use 'primitives/font';
+@use 'primitives/sizes';
+@use 'variables';
+@use 'theme';

src/scss/core/tokens/_theme.scss

@@ -11,4 +11,2 @@ /**
  * 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).
@@ -20,3 +18,3 @@ */
     --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-on-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
     --kern-color-action-visited: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
@@ -59,3 +57,3 @@
     --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-black-lightness) var(--kern-black-chroma) var(--kern-black-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-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
@@ -72,3 +70,3 @@
     /* layout-background */
-    --kern-color-layout-background-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-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-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
@@ -93,3 +91,3 @@ --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
     --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-on-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
     --kern-color-action-visited: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));
@@ -132,3 +130,3 @@
     --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-white-lightness) var(--kern-white-chroma) var(--kern-white-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-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
@@ -145,6 +143,6 @@
     /* layout-background */
-    --kern-color-layout-background-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-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-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-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
+    --kern-color-layout-background-overlay: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity
     
@@ -151,0 +149,0 @@ // Actins Hover Active

src/scss/core/tokens/_variables.scss

@@ -16,3 +16,4 @@ /**
 
-@import '../utilities/maps';
+@use "sass:map";
+@use '../utilities/maps';
 
@@ -30,3 +31,3 @@ :root {
     --kern-metric-border-radius-small: var(--kern-2);
-    --kern-metric-border-radius-default: var(--theme-metric-border-radius-default); // INFO: Theming Variable
+    --kern-metric-border-radius-default: var(--kern-4);
     --kern-metric-border-radius-large: var(--kern-8);
@@ -147,3 +148,3 @@ --kern-metric-border-radius-circle: 50%;
     // ####### Desktop #######
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get(maps.$grid-breakpoints, md)) {
         // component
@@ -150,0 +151,0 @@ --kern-component-kopfzeile-padding: var(--kern-7);

src/scss/core/tokens/primitives/_sizes.scss

@@ -17,16 +17,16 @@ /**
     --kern-0: 0rem;
-    --kern-1: 0.0625rem; // new
+    --kern-1: 0.0625rem;
     --kern-2: 0.125rem;
-    --kern-3: 0.1875rem; // new
+    --kern-3: 0.1875rem;
     --kern-4: 0.25rem;
-    --kern-5: 0.3125rem; // new
-    --kern-6: 0.375rem; // new
-    --kern-7: 0.4375rem; // new
+    --kern-5: 0.3125rem;
+    --kern-6: 0.375rem;
+    --kern-7: 0.4375rem;
     --kern-8: 0.5rem;
-    --kern-9: 0.5625rem; // new
-    --kern-10: 0.625rem; // new
-    --kern-14: 0.875rem; // new
+    --kern-9: 0.5625rem;
+    --kern-10: 0.625rem;
+    --kern-14: 0.875rem;
     --kern-12: 0.75rem;
     --kern-16: 1rem;
-    --kern-18: 1.125rem; // new
+    --kern-18: 1.125rem;
     --kern-20: 1.25rem;
@@ -33,0 +33,0 @@ --kern-24: 1.5rem;

src/scss/core/typography/_body.scss

@@ -0,11 +1,13 @@
+@use "../utilities/mixins";
+
 .kern-body {
-  @include normalize;
-  @include body-default;
+  @include mixins.normalize;
+  @include mixins.body-default;
 
   &--large {
-    @include body-large;
+    @include mixins.body-large;
   }
 
   &--small {
-    @include body-small;
+    @include mixins.body-small;
   }
@@ -23,3 +25,3 @@
 .kern-hint {
-  @include hint;
+  @include mixins.hint;
 }

src/scss/core/typography/_heading.scss

@@ -0,25 +1,27 @@
+@use "../utilities/mixins";
+
 // Headings
 .kern-heading-display {
-  @include normalize;
-  @include heading-display;
+  @include mixins.normalize;
+  @include mixins.heading-display;
 }
 
 .kern-heading-x-large {
-  @include normalize;
-  @include heading-x-large;
+  @include mixins.normalize;
+  @include mixins.heading-x-large;
 }
 
 .kern-heading-large {
-  @include normalize;
-  @include heading-large;
+  @include mixins.normalize;
+  @include mixins.heading-large;
 }
 
 .kern-heading-medium {
-  @include normalize;
-  @include heading-medium
+  @include mixins.normalize;
+  @include mixins.heading-medium
 }
 
 .kern-heading-small {
-  @include normalize;
-  @include heading-small;
+  @include mixins.normalize;
+  @include mixins.heading-small;
 }

src/scss/core/typography/_label.scss

@@ -0,13 +1,15 @@
+@use "../utilities/mixins";
+
 .kern-label {
-    @include normalize;
-    @include label-default;
+    @include mixins.normalize;
+    @include mixins.label-default;
     width: fit-content;
 
     &--large {
-        @include label-large;
+        @include mixins.label-large;
     }
     
     &--small {
-        @include label-small;
+        @include mixins.label-small;
     }
 }

src/scss/core/typography/_link.scss

@@ -0,4 +1,6 @@
+@use "../utilities/mixins";
+
 .kern-link {
-    @include normalize;
-    @include body-default;
+    @include mixins.normalize;
+    @include mixins.body-default;
     color: var(--kern-color-action-default, #1A3DA5);
@@ -58,3 +60,3 @@
         gap: var(--kern-metric-space-2x-small, 2px);
-        @include body-small;
+        @include mixins.body-small;
         color: var(--kern-color-action-default, #1A3DA5);
@@ -79,3 +81,3 @@
                 var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
-            @include forced-colors-focus;
+            @include mixins.forced-colors-focus;
         }
@@ -88,5 +90,4 @@ }
     &.kern-btn {
-        display: inline-flex;
         text-decoration: none;
     }
 }

src/scss/core/typography/_list.scss

@@ -0,3 +1,5 @@
+@use "../utilities/mixins";
+
 .kern-list {
-    @include normalize;
+    @include mixins.normalize;
     list-style: none;
@@ -8,3 +10,3 @@ display: flex;
 
-    @include body-default;
+    @include mixins.body-default;
     padding-left: var(--kern-metric-space-none, 0);
@@ -17,2 +19,15 @@
         padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px);
+        
+        .kern-link {
+            @include mixins.body-small;
+            color: var(--kern-color-action-default, #1A3DA5);
+            
+            .kern-icon {
+                width: var(--kern-metric-dimension-small, 20px);
+                height: var(--kern-metric-dimension-small, 20px);
+                min-width: var(--kern-metric-dimension-small, 20px);
+                min-height: var(--kern-metric-dimension-small, 20px);
+            }
+        }
+    
     }
@@ -39,2 +54,7 @@
 
+    &--horizontal {
+        flex-direction: row;
+        gap: var(--kern-metric-space-none, 0) var(--kern-metric-space-default, 16px);
+        flex-wrap: wrap;
+    }
 }

src/scss/core/typography/_preline.scss

@@ -0,13 +1,15 @@
+@use "../utilities/mixins";
+
 .kern-preline {
-    @include normalize;
-    @include preline-default;
+    @include mixins.normalize;
+    @include mixins.preline-default;
     width: fit-content;
 
     &--large {
-        @include preline-large;
+        @include mixins.preline-large;
     }
 
     &--small {
-        @include preline-small;
+        @include mixins.preline-small;
     }
 }

src/scss/core/typography/_subline.scss

@@ -0,12 +1,14 @@
+@use "../utilities/mixins";
+
 .kern-subline {
-    @include normalize;
-    @include subline-default;
+    @include mixins.normalize;
+    @include mixins.subline-default;
 
     &--large {
-        @include subline-large;
+        @include mixins.subline-large;
     }
 
     &--small {
-        @include subline-small;
+        @include mixins.subline-small;
     }
 }

src/scss/core/typography/_title.scss

@@ -0,12 +1,14 @@
+@use "../utilities/mixins";
+
 .kern-title {
-    @include normalize;
-    @include title-default;
+    @include mixins.normalize;
+    @include mixins.title-default;
 
     &--large {
-        @include title-large;
+        @include mixins.title-large;
     }
     
     &--small {
-        @include title-small;
+        @include mixins.title-small;
     }
 }

src/scss/themes/kern/_theme.scss

@@ -16,3 +16,3 @@ /**
 :root {
-   // --theme-metric-border-radius-default: var(--kern-4);
+   // --kern-metric-border-radius-default: var(--kern-4);
 }
@@ -22,40 +22,40 @@
     /* 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));
+    --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-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    --kern-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));
+    --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-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+    --kern-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));
+    --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
+    --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
+    --kern-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));
+    --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
+    --kern-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));
+    --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-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
+    --kern-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));
+    --kern-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));
+    --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-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
+    --kern-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));   
+    --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-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));   
 }
@@ -65,40 +65,40 @@
     /* 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));
+    --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-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    --kern-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));
+    --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-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
+    --kern-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));
+    --kern-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
+    --kern-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
+    --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
+    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
+    --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
+    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
+    --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
+    --kern-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));
+    --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
+    --kern-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));
+    --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-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
+    --kern-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));
+    --kern-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));
+    --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-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
+    --kern-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));
+    --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-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
+    --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
 }
@@ -105,0 +105,0 @@

src/scss/themes/kern/index.scss

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

src/scss/themes/README.md

@@ -5,13 +5,143 @@ # 📁 themes
 
-Dieser Ordner enthält Themes Verzeichnisse für:
+Dieser Ordner enthält nur das Themes Verzeichnisse für KERN, weil wir nur das KERN-Theme(Default) mit unserer Lib. ausliefern.
 
 - **[kern]** - Enthält das Theme für KERN (Dachmarke).
+
+Sollten wir später weitere Theme ausliefern, können die in der selbes Struktur angelegt werden wie KERN.
+
+Bsp.:
 - **[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
+## Theming-Mechanismus
+KERN Design System nutzt einen robusten Theming-Mechanismus, der auf CSS Custom Properties (Variablen) und der modernen OKLCH-Farbnotation basiert.  
+Dies ermöglicht dynamisches, barrierefreies und überschreibbares Theming.
 
-- 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!
+## 1. Das Kernprinzip: Semantische Variablen
+
+Alle Komponenten des KERN Design Systems verwenden sogenannte semantische Variablen (z.B. `--kern-color-accent`, `--kern-color-action-default`).  
+**Themes** funktionieren, indem sie diese semantischen Variablen auf dem :root-Element oder einem spezifischen Theme-Selektor neu definieren.
+
+### Aufbau der Variablen
+KERN Variablen sind in drei Ebenen unterteilt, was eine einfache Verwaltung von Licht- und Dunkelmodi (Light/Dark Mode) ermöglicht:
+
+1. Token-Basis (Kernpaletten): Speichert die OKLCH-Werte als separate Komponenten (Lightness, Chroma, Hue).
+
+Beispiel: `--kern-darkblue-700-lightness`, `--kern-darkblue-700-chroma`, `--kern-darkblue-700-hue`;
+
+2. Semantische Variable: Verwendet die Token-Basis, um eine konkrete, nutzungsbezogene Farbe zu definieren.
+
+Beispiel: `--kern-color-action-default: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));`
+
+3. Endgültige Anwendung: Die Komponente verwendet die semantische Variable.
+
+Beispiel: `color: var(--kern-color-action-default);`
+
+## 2. Automatische Themenerkennung (`prefers-color-scheme`)
+
+Der Standardmechanismus basiert auf der Media Query `@media (prefers-color-scheme:...)`, wodurch das Theme automatisch an die Systempräferenzen des Nutzers angepasst wird.
+
+### Implementierung im Projekt
+```css
+/* Standard: Wenn das System den Light Mode bevorzugt */
+@media (prefers-color-scheme: light) {
+  :root {
+    --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));
+    /* ... weitere Light Mode Farben ... */
+  }
+}
+
+/* Standard: Wenn das System den Dark Mode bevorzugt */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --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));
+    /* ... weitere Dark Mode Farben ... */
+  }
+}
+```
+
+## 3. Manuelle Theme-Umschaltung (Override)
+
+Um Benutzern das manuelle Umschalten des Themes zu ermöglichen (z.B. über einen Button im Einstellungsmenü), verwenden Sie Attribute-Selektoren und Klassen.
+
+### A. Umschaltung per `data-kern-theme` Attribut
+
+Definieren Sie die Theme-Variablen für die Attribute `[data-kern-theme="light"]` und `[data-kern-theme="dark"]`.
+
+**Anwendung:** Setzen Sie das Attribut auf das `<html>`-Element oder den gewünschten Container:
+```html
+<body data-kern-theme="dark">
+</body>
+```
+
+**CSS-Definition:**
+```css
+/* Definiert das Light Theme, wenn das data-Attribut gesetzt ist */
+[data-kern-theme="light"],
+.kern-light {
+  /* Beispiel: Light Mode Farben überschreiben */
+    --kern-color-action-default: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
+  /* ... */
+}
+
+/* Definiert das Dark Theme, wenn das data-Attribut gesetzt ist */
+[data-kern-theme="dark"],
+.kern-dark {
+  /* Beispiel: Dark Mode Farben überschreiben */
+    --kern-color-action-default: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
+  /* ... */
+}
+```
+
+### B. Umschaltung per CSS-Klasse
+
+Es können alternativ die Klassen .kern-light und .kern-dark verwenden. Diese sind mit den Attributen gruppiert (`[data-kern-theme=light], .kern-light`).
+
+**Anwendung:**
+```html
+<div class="kern-dark">
+</div>
+```
+
+## 4. Definieren eines eigenen Themes (Custom Theme)
+Um ein eigenes, benutzerdefiniertes Theme zu erstellen (z.B. für Branding-Zwecke), folgen Sie diesen Schritten:
+
+1. Kopieren Sie das gesamte Variablen-Set eines bestehenden Themes (z.B. Light Mode).
+
+2. Überschreiben Sie die gewünschten semantischen Variablen mit Ihren eigenen Token-Basis-Werten.
+
+**Beispiel:** Custom Theme (Vorlage) für das Automatische Themenerkennung und das Manuelle Theme-Umschaltung
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-red-450-lightness) var(--kern-red-450-chroma) var(--kern-red-450-hue));
+    /* ... */
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    /* brand */
+    --kern-color-accent: oklch(var(--kern-red-550-lightness) var(--kern-red-550-chroma) var(--kern-red-550-hue));
+    /* ... */
+  }
+}
+
+[data-kern-theme=light],
+.kern-light {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-red-550-lightness) var(--kern-red-550-chroma) var(--kern-red-550-hue));
+  /* ... */
+}
+
+[data-kern-theme=dark],
+.kern-dark {
+  /* brand */
+  --kern-color-accent: oklch(var(--kern-red-450-lightness) var(--kern-red-450-chroma) var(--kern-red-450-hue));
+  /* ... */
+}
+```

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

97

4.3%

Lines of code

7589

10.66%

Worsened metrics

Total package byte prevSize

6053072

-0.27%

No dependency changes