@ihk-gfi/lux-components-theme 19.2.0 → 21.0.0

package/src/theme-green/_mat3Theme.scss

@@ -0,0 +1,134 @@
+@use "@angular/material" as mat;
+@use "sass:map";
+@use "palettes";
+
+$lux-theme: mat.define-theme(
+  (
+    color: (
+      primary: palettes.$lux-palette_primary,
+      use-system-variables: true
+    ),
+    typography: (
+      plain-family: Source Sans Pro,
+      brand-family: Blogger Sans
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);
+
+:root {
+  @include mat.all-component-themes($lux-theme);
+  @include mat.system-level-colors($lux-theme);
+  @include mat.system-level-typography($lux-theme);
+
+  --lux-theme-primary-color: #{map.get(palettes.$lux-palette_primary, 20)};
+  --lux-theme-accent-color: #{map.get(palettes.$lux-palette_secondary, 20)};
+  --lux-theme-warn-color: #{map.get(palettes.$lux-palette_warn, 20)};
+}
+
+@function _high-contrast-value($light, $dark, $theme-type) {
+  @if ($theme-type == light) {
+    @return $light;
+  }
+  @if ($theme-type == dark) {
+    @return $dark;
+  }
+  @if ($theme-type == color-scheme) {
+    @return light-dark(#{$light}, #{$dark});
+  }
+
+  @error "Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme";
+}
+
+// prettier-ignore
+:root {
+@include mat.theme-overrides(
+  (
+    "primary": map.get(map.get(palettes.$luxPalettes, "primary"), 20),                   //bg-farbe primary-button
+    "on-primary": #ffffff,                                                               //text-farbe primary-button
+    "primary-container": map.get(map.get(palettes.$luxPalettes, "primary"), 90),         //für app-header und app-footer
+    "on-primary-container": map.get(map.get(palettes.$luxPalettes, "primary"), 20),
+    "secondary": map.get(map.get(palettes.$luxPalettes, "primary"), 90),                 //bg-farbe secondary-button
+    "on-secondary": map.get(map.get(palettes.$luxPalettes, "primary"), 10),              //text-farbe secondary-button
+    "secondary-container": map.get(map.get(palettes.$luxPalettes, "primary"), 40),       //hover-color, bg-hover-color für menu-items
+    "on-secondary-container": map.get(map.get(palettes.$luxPalettes, "primary"), 100),   // text-farbe für gehoverte menu-items
+    "tertiary": map.get(map.get(palettes.$luxPalettes, "tertiary"), 70),                 //bg-farbe für tertiary-button /früher accent
+    "on-tertiary": map.get(map.get(palettes.$luxPalettes, "primary"), 20),             //text-farbe für tertiary-button
+    "tertiary-container": map.get(map.get(palettes.$luxPalettes, "tertiary"), 95),       //farbe für accordion
+    "on-tertiary-container": map.get(map.get(palettes.$luxPalettes, "tertiary"), 30),
+    "error": #ad000f,                       // bg-farbe für error-button
+    "on-error": map.get(map.get(palettes.$luxPalettes, "error"), 100),
+    "error-container": map.get(map.get(palettes.$luxPalettes, "error"), 90),             //bg-farbe für Error-Message unter input, accordion-farbe
+    "on-error-container": map.get(map.get(palettes.$luxPalettes, "error"), 30),          //text-farbe für Error-Message unter input
+    "background": map.get(map.get(palettes.$luxPalettes, "primary"), 98),                //fallback-farbe für den app-gradient
+    "on-background": map.get(map.get(palettes.$luxPalettes, "neutral"), 10),             // primary-text-color
+    "surface": map.get(map.get(palettes.$luxPalettes, "primary"), 100),                  //bg-farbe für input, cards, menu-panels
+    "on-surface": map.get(map.get(palettes.$luxPalettes, "neutral"), 10),                // primary-text-color
+    "surface-variant": map.get(map.get(palettes.$luxPalettes, "primary"), 98),
+    "on-surface-variant": map.get(map.get(palettes.$luxPalettes, "neutral"), 40),        //secondary-text-color
+    "outline": map.get(map.get(palettes.$luxPalettes, "neutral"), 60),                   //form-border-color und secondary-text-color
+    "outline-variant": map.get(map.get(palettes.$luxPalettes, "neutral"), 90),           //app-border-color
+    "surface-container-lowest": map.get(map.get(palettes.$luxPalettes, "primary"), 100), //alternative farben für elemente, bisher noch nicht definiert
+    "surface-container": map.get(map.get(palettes.$luxPalettes, "primary"), 99),
+    "surface-container-high": map.get(map.get(palettes.$luxPalettes, "primary"), 98),    //bg-farbe für accordion
+    "surface-container-highest": map.get(map.get(palettes.$luxPalettes, "primary"), 95)
+  )
+);
+}
+
+@mixin high-contrast-overrides($theme-type) {
+  @include mat.theme-overrides(
+    (
+      primary: _high-contrast-value(#001e40, #eaf0ff, $theme-type),
+      on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      primary-container: _high-contrast-value(#003366, #a1c4ff, $theme-type),
+      on-primary-container: _high-contrast-value(#ebf0ff, #000b1f, $theme-type),
+      inverse-primary: _high-contrast-value(#a7c8ff, #21487c, $theme-type),
+      primary-fixed: _high-contrast-value(#224a7d, #d5e3ff, $theme-type),
+      primary-fixed-dim: _high-contrast-value(#003265, #a7c8ff, $theme-type),
+      on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-primary-fixed-variant: _high-contrast-value(#ffffff, #001129, $theme-type),
+      secondary: _high-contrast-value(#202c41, #eaf0ff, $theme-type),
+      on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      secondary-container: _high-contrast-value(#3d4a5f, #b6c3dd, $theme-type),
+      on-secondary-container: _high-contrast-value(#ffffff, #000b1e, $theme-type),
+      secondary-fixed: _high-contrast-value(#3d4a5f, #d6e3fe, $theme-type),
+      secondary-fixed-dim: _high-contrast-value(#263348, #bac7e1, $theme-type),
+      on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-secondary-fixed-variant: _high-contrast-value(#ffffff, #041124, $theme-type),
+      tertiary: _high-contrast-value(#002408, #c3ffc2, $theme-type),
+      on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      tertiary-container: _high-contrast-value(#003c13, #71d87e, $theme-type),
+      on-tertiary-container: _high-contrast-value(#c3ffc2, #000f02, $theme-type),
+      tertiary-fixed: _high-contrast-value(#00551e, #90f99b, $theme-type),
+      tertiary-fixed-dim: _high-contrast-value(#003c12, #75dc81, $theme-type),
+      on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #001604, $theme-type),
+      background: _high-contrast-value(#faf9f9, #121414, $theme-type),
+      on-background: _high-contrast-value(#1a1c1c, #e3e2e2, $theme-type),
+      surface: _high-contrast-value(#faf9f9, #121414, $theme-type),
+      surface-dim: _high-contrast-value(#b9b9b8, #121414, $theme-type),
+      surface-bright: _high-contrast-value(#faf9f9, #4f5050, $theme-type),
+      surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
+      surface-container: _high-contrast-value(#e3e2e2, #2f3131, $theme-type),
+      surface-container-high: _high-contrast-value(#d5d4d4, #3a3c3c, $theme-type),
+      surface-container-highest: _high-contrast-value(#c7c6c6, #464747, $theme-type),
+      on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
+      shadow: _high-contrast-value(#000000, #000000, $theme-type),
+      scrim: _high-contrast-value(#000000, #000000, $theme-type),
+      surface-tint: _high-contrast-value(#3a5f94, #a7c8ff, $theme-type),
+      inverse-surface: _high-contrast-value(#2f3131, #e3e2e2, $theme-type),
+      inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
+      outline: _high-contrast-value(#282c34, #edf0fa, $theme-type),
+      outline-variant: _high-contrast-value(#454952, #bfc2cd, $theme-type),
+      error: _high-contrast-value(#600004, #ffece9, $theme-type),
+      on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
+      error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type),
+      on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type),
+      surface-variant: _high-contrast-value(#dfe2ed, #43474f, $theme-type),
+      on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type)
+    )
+  );
+}

package/src/theme-green/_palettes.scss

@@ -0,0 +1,182 @@
+// This file was generated by running "ng generate @angular/material:theme-color".
+// Proceed with caution if making changes to this file.
+
+@use "sass:map";
+@use "sass:string";
+@use "@angular/material" as mat;
+
+// Note: Color palettes are generated from primary: #003366, tertiary: #56bd66, neutral: #9e9e9e
+
+// Die Kommentare mit den alten Farbbezeichungen steht immer unter dem Farbwert. Die Autokorrektur hat den Umbruch beim Speichern eingefügt.
+
+// prettier-ignore
+$luxPalettes: (
+  primary: (
+    0: #000000,  //primary-800 und 900
+    10: #001b3c, //primary-700
+    20: #003366, //primary-500
+    25: #0f3b6f,
+    30: #1f477b, //primary-400
+    35: #2d5387,
+    40: #3a5f94, //primary-300
+    50: #5478af,
+    60: #6e92ca, //primary-200
+    70: #89ace7,
+    80: #a7c8ff, //primary-100
+    90: #d5e3ff, //primary-50
+    95: #ecf1ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #151c28,
+    25: #353c49,
+    30: #404754,
+    35: #4c5360,
+    40: #585f6c,
+    50: #707786,
+    60: #8a91a0,
+    70: #a4abbb,
+    80: #c0c6d7,
+    90: #dce2f3,
+    95: #ecf1ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    10: #002107,
+    20: #003911,
+    25: #004617,
+    30: #00531d, //accent-900
+    35: #006022,
+    40: #006e29, //accent-800
+    50: #198939, //accent-700
+    60: #3ca450, //accent-600
+    70: #56bd66, //accent-500
+    80: #75dc81, //accent-300 und 400
+    90: #90f99b, //accent-200
+    95: #c6ffc5, //accent-100
+    98: #ebffe6, //accent-50
+    99: #f6fff1,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #1c1b1b,
+    20: #313030,
+    25: #3c3b3b,
+    30: #484646,
+    35: #535252,
+    40: #605e5e,
+    50: #797776,
+    60: #929090,
+    70: #adaaaa,
+    80: #c9c6c5,
+    90: #e5e2e1,
+    95: #f4f0ef,
+    98: #fcf8f8,
+    99: #f6feff,
+    100: #ffffff
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1c1b1b,
+    20: #313030,
+    25: #3c3b3b,
+    30: #484646,
+    35: #535252,
+    40: #5f5e5e,
+    50: #787776,
+    60: #929090,
+    70: #adabaa,
+    80: #c9c6c5,
+    90: #e5e2e1,
+    95: #f4f0ef,
+    98: #fcf8f8,
+    99: #f6feff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007, //warn-800
+    30: #93000a, //warn-700
+    35: #a80710,
+    40: #ba1a1a, //warn-600
+    50: #ec2125, //altes warn-500
+    60: #ff5449, //warn-300 und 400
+    70: #ff897d, //warn-200
+    80: #ffb4ab, //warn-100
+    90: #ffdad6, //warn-50
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+// Gradienten mit den neuen gemappten Farben
+$app-gradient: linear-gradient(90deg, #ffffff 0%, map.get(map.get($luxPalettes, "primary"), 98) 100%);
+$app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, map.get(map.get($luxPalettes, "primary"), 98) 100%);
+
+$_rest: (
+  secondary: map.get($luxPalettes, secondary),
+  neutral: map.get($luxPalettes, neutral),
+  neutral-variant: map.get($luxPalettes, neutral-variant),
+  error: map.get($luxPalettes, error)
+);
+
+$lux-palette_primary: map.merge(map.get($luxPalettes, primary), $_rest);
+$lux-palette_accent: map.merge(map.get($luxPalettes, tertiary), $_rest);
+$lux-palette_warn: map.merge(map.get($luxPalettes, error), $_rest);
+$lux-palette_secondary: map.merge(map.get($luxPalettes, secondary), $_rest);
+$lux-palette_neutral: map.merge(map.get($luxPalettes, neutral), $_rest);
+$lux-palette_neutral_variant: map.merge(map.get($luxPalettes, neutral-variant), $_rest);
+
+$lux-primary-color: map.get(map.get($luxPalettes, "primary"), 20);
+$lux-accent-color: map.get(map.get($luxPalettes, "tertiary"), 20);
+$lux-warn-color: map.get(map.get($luxPalettes, "error"), 20);
+
+$paletten: $lux-palette_primary, $lux-palette_accent, $lux-palette_warn, $lux-palette_secondary, $lux-palette_neutral,
+  $lux-palette_neutral_variant;
+$paletteNamen: primary, secondary, tertiary, neutral, neutral-variant, error;
+$sizes: 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100;
+
+// CSS-Klassen für die Farbpaletten
+@mixin lux-theme-palette-classes($paletteName, $paletteMap, $sizes) {
+  @each $size in $sizes {
+    .lux-color-#{string.to-lower-case($paletteName)}-#{string.to-lower-case("" + $size)} {
+      color: map.get($paletteMap, $size);
+    }
+
+    .lux-bg-color-#{string.to-lower-case($paletteName)}-#{string.to-lower-case("" + $size)} {
+      background-color: map.get($paletteMap, $size);
+    }
+
+    .lux-border-color-#{string.to-lower-case($paletteName)}-#{string.to-lower-case("" + $size)} {
+      border-color: map.get($paletteMap, $size);
+    }
+
+    .lux-outline-color-#{string.to-lower-case($paletteName)}-#{string.to-lower-case("" + $size)} {
+      outline-color: map.get($paletteMap, $size);
+    }
+
+    .lux-text-decoration-#{string.to-lower-case($paletteName)}-color-#{string.to-lower-case("" + $size)} {
+      text-decoration-color: map.get($paletteMap, $size);
+    }
+
+    .lux-column-rule-color-#{string.to-lower-case($paletteName)}-#{string.to-lower-case("" + $size)} {
+      column-rule-color: map.get($paletteMap, $size);
+    }
+  }
+}
+
+@include lux-theme-palette-classes("primary", $lux-palette_primary, $sizes);
+@include lux-theme-palette-classes("accent", $lux-palette_accent, $sizes);
+@include lux-theme-palette-classes("neutral", $lux-palette_neutral, $sizes);
+@include lux-theme-palette-classes("warn", $lux-palette_warn, $sizes);