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

package/src/green/_luxcommon.scss

@@ -1,117 +0,0 @@
-@use "sass:map";
-@use "luxpalette";
-
-// Allgemein
-$dark-primary-text: #003366;
-$dark-secondary-text: #003366;
-$dark-disabled-text: #636d76;
-$dark-dividers: rgba(black, 0.2);
-$dark-focused: rgba(black, 0.12);
-
-$light-primary-text: white;
-$light-secondary-text: rgba(white, 0.7);
-$light-disabled-text: rgba(white, 0.5);
-$light-dividers: #e3ebf5;
-$light-focused: rgba(white, 0.12);
-
-// App
-$app-header-bg: #ffffff;
-$app-content-bg: #ffffff;
-$app-footer-bg: #e3ebf5;
-$app-data-bg: #ffffff;
-$app-gradient: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
-$app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
-$app-border-color: rgba(black, 0.12);
-$app-headline-font: Korb, "Blogger Sans", "Source Sans Pro", Arial, sans-serif;
-$app-font-family: "Source Sans Pro", Arial, sans-serif;
-$app-button-font-family: "Blogger Sans", $app-font-family;
-$app-border-radius: 4px;
-
-// Form
-$form-border-color: rgba(0, 0, 0, 0.42);
-$form-control-font-size: 1rem;
-$form-control-buffer: 6px;
-$form-error-msg-background: rgb(255, 228, 231); //lux-warn-50 mit opacity: 0.5
-
-// Button
-$button-height: 2.8125rem;
-$button-font-size: 1.375rem;
-$button-fav-height: 2.8125rem;
-
-// Fokus
-$outline-width: 4px;
-$outline-style: solid;
-$outline-color-bright: #ffffff;
-$outline-color-dark: #2e8533;
-
-// Hover
-$lux-hover-color: #e3ebf5;
-$lux-hover-color-for-dark-background: #e3ebf5;
-
-// Selektion
-$lux-selected-border-color: #2e8533;
-$lux-selected-bg-color: #e3ebf5;
-
-// Stepper (large)
-$lux-stepper-large-backdrop-bg: #636d76;
-$lux-stepper-large-completed-fc: #2e8533;
-
-$lux-stepper-large-nav-item-active-fc: #ffffff;
-$lux-stepper-large-nav-item-active-bg: #003366;
-$lux-stepper-large-nav-item-disabled-fg: #003366;
-$lux-stepper-large-nav-item-disabled-bg: #eff3f6;
-$lux-stepper-large-nav-item-completed-fg: #ffffff;
-$lux-stepper-large-nav-item-completed-bg: #2e8533;
-
-// Overlay
-$lux-overlay-backdrop-color: rgba(0, 0, 0, 0.12);
-
-// Options in Panels (z.B. Select, AutoComplete und Menu)
-$lux-panel-option-min-height: 24px;
-$lux-panel-option-padding: 12px 0;
-
-// Hintergrundfarben (z.B. Badge oder Progress)
-$componentBgColors: (
-  "red": map-get(map-get(luxpalette.$lux-palettes-new, 'error'), 40),
-  "green": map-get(map-get(luxpalette.$lux-palettes-new, 'tertiary'), 70),
-  "purple": #715289,
-  "blue": map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 20),
-  "gray": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 40),
-  "orange":  #fc791f,
-  "black":  map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
-  "white": #ffffff,
-  "yellow": #fbd12c,
-  "pink":  #fc6b85,
-  "lightblue": #4fa8e8
-);
-
-// Vordergrundfarben (z.B. Badge)
-$componentFontColors: (
-  "red": #ffffff,
-  "green": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
-  "purple": #ffffff,
-  "blue": #ffffff,
-  "gray": #ffffff,
-  "orange": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
-  "black": #ffffff,
-  "white": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
-  "yellow": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
-  "pink": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
-  "lightblue": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10)
-);
-
-// Farben für einen dunklen Hintergrund (z.B. Snackbar).
-$colorsForDarkBg: (
-  "red": #f17474,
-  "green": #53b12b,
-  "blue": map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 80),
-  "orange": #ec9c1b,
-  "yellow": #fbd12c,
-  "white": #ffffff
-);
-
-// Tile
-$lux-tile-font-hover-color: #2e8533;
-$lux-tile-icon-color: #56bd66;
-$lux-tile-borderradius: 24px;
-$lux-tile-bottom-line-color: #56bd66;

package/src/green/_luxpalette.scss

@@ -1,231 +0,0 @@
-@use "sass:map";
-/*
-  Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
-*/
-
-$lux-palette_primary: (
-        50 : #e0e7ed,
-        100 : #b3c2d1,
-        200 : #8099b3,
-        300 : #4d7094,
-        400 : #26527d,
-        500 : #003366,
-        600 : #002e5e,
-        700 : #002753,
-        800 : #002049,
-        900 : #001438,
-        A100 : #6e93ff,
-        A200 : #3b6cff,
-        A400 : #0846ff,
-        A700 : #003bee,
-        contrast: (
-                50 : #000000,
-                100 : #000000,
-                200 : #000000,
-                300 : #ffffff,
-                400 : #ffffff,
-                500 : #ffffff,
-                600 : #ffffff,
-                700 : #ffffff,
-                800 : #ffffff,
-                900 : #ffffff,
-                A100 : #000000,
-                A200 : #ffffff,
-                A400 : #ffffff,
-                A700 : #ffffff,
-        )
-);
-
-$lux-palette_accent: (
-        50 : #ebf7ed,
-        100 : #ccebd1,
-        200 : #abdeb3,
-        300 : #89d194,
-        400 : #6fc77d,
-        500 : #56bd66,
-        600 : #4fb75e,
-        700 : #45ae53,
-        800 : #3ca649,
-        900 : #2b9838,
-        A100 : #dcffe0,
-        A200 : #a9ffb2,
-        A400 : #76ff84,
-        A700 : #5dff6d,
-        contrast: (
-                50 : #000000,
-                100 : #000000,
-                200 : #000000,
-                300 : #000000,
-                400 : #ffffff,
-                500 : #ffffff,
-                600 : #ffffff,
-                700 : #ffffff,
-                800 : #ffffff,
-                900 : #ffffff,
-                A100 : #000000,
-                A200 : #000000,
-                A400 : #000000,
-                A700 : #000000,
-        )
-);
-
-$lux-palette_warn: (
-        50 : #fceaeb,
-        100 : #f9cbce,
-        200 : #f5a8ad,
-        300 : #f0858c,
-        400 : #ed6b73,
-        500 : #ea515a,
-        600 : #e74a52,
-        700 : #e44048,
-        800 : #e1373f,
-        900 : #bf0006,
-        A100 : #ffffff,
-        A200 : #ffe5e5,
-        A400 : #ffb2b4,
-        A700 : #ff989b,
-        contrast: (
-                50 : #000000,
-                100 : #000000,
-                200 : #000000,
-                300 : #000000,
-                400 : #000000,
-                500 : #ffffff,
-                600 : #ffffff,
-                700 : #ffffff,
-                800 : #ffffff,
-                900 : #ffffff,
-                A100 : #000000,
-                A200 : #000000,
-                A400 : #000000,
-                A700 : #000000,
-        )
-);
-
-$lux-primary-color: map.get($lux-palette_primary, 500);
-$lux-accent-color: map.get($lux-palette_accent, 500);
-$lux-warn-color: map.get($lux-palette_warn, 500);
-
-$lux-palettes-new: (
-  primary: (
-    0: #000000,
-    5: #001129,  //primary-900 und 800
-    10: #001b3c, //primary-700
-    15: #00264e, //primary-600
-    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,
-    5: #0a111c,
-    10: #151c28,
-    15: #1f2632,
-    20: #2a313d,
-    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,
-    5: #001503,
-    10: #002107,
-    15: #002d0c,
-    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,
-    5: #111111,
-    10: #1c1b1b, //dark-primary-text
-    15: #262625,
-    20: #313030,
-    25: #3c3b3b,
-    30: #484646,
-    35: #535252,
-    40: #605e5e, //dark-secondary-text
-    50: #797776,
-    60: #929090, //form-border-color
-    70: #adaaaa,
-    80: #c9c6c5,
-    90: #e5e2e1, //app-border-color und dark-disabled-text
-    95: #f4f0ef,
-    98: #fcf8f8,
-    99: #f6feff,
-    100: #ffffff
-  ),
-  neutral-variant: (
-    0: #000000,
-    5: #111111,
-    10: #1c1b1b,
-    15: #262625,
-    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,
-    5: #2d0001,
-    10: #410002,
-    15: #540004, //warn-900
-    20: #690005,
-    25: #7e0007, //warn-800
-    30: #93000a, //warn-700
-    35: #a80710, //warn-600
-    40: #ba1a1a, //warn-500
-    50: #ec2125, //warn-400
-    60: #ff5449, //warn-300
-    70: #ff897d, //warn-200
-    80: #ffb4ab, //warn-100
-    90: #ffdad6, //warn-50
-    95: #ffedea,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff
-  )
-);

package/src/green/luxtheme.scss

@@ -1,117 +0,0 @@
-@use "../public/global" with (
-  $app-font-family: (
-    "Source Sans Pro",
-    Helvetica,
-    Arial,
-    sans-serif
-  )
-);
-
-@use "luxpalette" as themePalette;
-@use "../base/luxpalette" with (
-  // Farbpaletten
-  $lux-palette_primary: themePalette.$lux-palette_primary,
-  $lux-palette_accent: themePalette.$lux-palette_accent,
-  $lux-palette_warn: themePalette.$lux-palette_warn,
-  $lux-palettes-new: themePalette.$lux-palettes-new,
-
-  // Hauptfarben
-  $lux-primary-color: themePalette.$lux-primary-color,
-  $lux-accent-color: themePalette.$lux-accent-color,
-  $lux-warn-color: themePalette.$lux-warn-color
-);
-
-@use "luxcommon" as themeCommon;
-@use "../base/luxcommon" with (
-  // Allgemein
-  $dark-primary-text: themeCommon.$dark-primary-text,
-  $dark-secondary-text: themeCommon.$dark-secondary-text,
-  $dark-disabled-text: themeCommon.$dark-disabled-text,
-  $dark-dividers: themeCommon.$dark-dividers,
-  $dark-focused: themeCommon.$dark-focused,
-
-  $light-primary-text: themeCommon.$light-primary-text,
-  $light-secondary-text: themeCommon.$light-secondary-text,
-  $light-disabled-text: themeCommon.$light-disabled-text,
-  $light-dividers: themeCommon.$light-dividers,
-  $light-focused: themeCommon.$light-focused,
-
-  // App
-  $app-header-bg: themeCommon.$app-header-bg,
-  $app-content-bg: themeCommon.$app-content-bg,
-  $app-footer-bg: themeCommon.$app-footer-bg,
-  $app-data-bg: themeCommon.$app-data-bg,
-  $app-gradient: themeCommon.$app-gradient,
-  $app-gradient-reverse: themeCommon.$app-gradient-reverse,
-  $app-border-color: themeCommon.$app-border-color,
-  $app-headline-font: themeCommon.$app-headline-font,
-  $app-font-family: themeCommon.$app-font-family,
-  $app-border-radius: themeCommon.$app-border-radius,
-
-  // Form
-  $form-border-color: themeCommon.$form-border-color,
-  $form-control-font-size: themeCommon.$form-control-font-size,
-  $form-control-buffer: themeCommon.$form-control-buffer,
-  $form-error-msg-background: themeCommon.$form-error-msg-background,
-
-  // Button
-  $button-height: themeCommon.$button-height,
-  $button-fav-height: themeCommon.$button-fav-height,
-  $button-font-size: themeCommon.$button-font-size,
-
-  // Fokus
-  $outline-width: themeCommon.$outline-width,
-  $outline-style: themeCommon.$outline-style,
-  $outline-color-bright: themeCommon.$outline-color-bright,
-  $outline-color-dark: themeCommon.$outline-color-dark,
-
-  // Hover
-  $lux-hover-color: themeCommon.$lux-hover-color,
-  $lux-hover-color-for-dark-background: themeCommon.$lux-hover-color-for-dark-background,
-
-  // Selektion
-  $lux-selected-border-color: themeCommon.$lux-selected-border-color,
-  $lux-selected-bg-color: themeCommon.$lux-selected-bg-color,
-
-  // Stepper (large)
-  $lux-stepper-large-backdrop-bg: themeCommon.$lux-stepper-large-backdrop-bg,
-  $lux-stepper-large-completed-fc: themeCommon.$lux-stepper-large-completed-fc,
-
-  $lux-stepper-large-nav-item-active-fc: themeCommon.$lux-stepper-large-nav-item-active-fc,
-  $lux-stepper-large-nav-item-active-bg: themeCommon.$lux-stepper-large-nav-item-active-bg,
-  $lux-stepper-large-nav-item-disabled-fg: themeCommon.$lux-stepper-large-nav-item-disabled-fg,
-  $lux-stepper-large-nav-item-disabled-bg: themeCommon.$lux-stepper-large-nav-item-disabled-bg,
-  $lux-stepper-large-nav-item-completed-fg: themeCommon.$lux-stepper-large-nav-item-completed-fg,
-  $lux-stepper-large-nav-item-completed-bg: themeCommon.$lux-stepper-large-nav-item-completed-bg,
-
-  // Overlay
-  $lux-overlay-backdrop-color: themeCommon.$lux-overlay-backdrop-color,
-
-  // Options in Panels (z.B. Select, AutoComplete und Menu)
-  $lux-panel-option-min-height: themeCommon.$lux-panel-option-min-height,
-  $lux-panel-option-padding: themeCommon.$lux-panel-option-padding,
-
-  // Hintergrundfarben (z.B. Badge oder Progress)
-  $componentBgColors: themeCommon.$componentBgColors,
-
-  // Vordergrundfarben (z.B. Badge)
-  $componentFontColors: themeCommon.$componentFontColors,
-
-  // Farben für einen dunklen Hintergrund (z.B. Snackbar).
-  $colorsForDarkBg: themeCommon.$colorsForDarkBg,
-
-  // Tile
-  $lux-tile-font-hover-color: themeCommon.$lux-tile-font-hover-color,
-  $lux-tile-icon-color: themeCommon.$lux-tile-icon-color,
-  $lux-tile-borderradius: themeCommon.$lux-tile-borderradius,
-  $lux-tile-bottom-line-color: themeCommon.$lux-tile-bottom-line-color
-);
-@use "../base/luxSvgIcons";
-@use "../base/luxelevations";
-@use "../base/luxcomponents";
-@use "../base/luxfocus";
-@use "../base/luxstyles";
-@use "../base/luxtheme";
-@use "../base/luxbreakpoints";
-@use "../base/luxlayout";
-@use "custom";

package/src/public/global.scss

@@ -1,113 +0,0 @@
-// Media Queries
-$mat-xsmall: "max-width: 599px" !default;
-$mat-small: "max-width: 959px" !default;
-$mat-medium: "max-width: 1279px" !default;
-$mat-large: "max-width: 1919px" !default;
-$mat-xlarge: "max-width: 5000px" !default;
-
-// Font
-$app-font-family:
-  Source Sans Pro,
-  Helvetica Neue,
-  sans-serif !default;
-
-html body {
-  --mat-checkbox-label-text-font: #{$app-font-family};
-  --mat-switch-label-text-font: #{$app-font-family};
-  --mat-stepper-container-text-font: #{$app-font-family};
-  --mat-stepper-header-label-text-font: #{$app-font-family};
-  --mat-expansion-header-text-font: #{$app-font-family};
-  --mat-expansion-container-text-font: #{$app-font-family};
-  --mat-datepicker-calendar-text-font: #{$app-font-family};
-  --mat-legacy-button-toggle-text-font: #{$app-font-family};
-  --mat-standard-button-toggle-text-font: #{$app-font-family};
-  --mat-bottom-sheet-container-text-font: #{$app-font-family};
-  --mat-badge-text-font: #{$app-font-family};
-  --mat-toolbar-title-text-font: #{$app-font-family};
-  --mat-stepper-container-text-font: #{$app-font-family};
-  --mat-stepper-header-label-text-font: #{$app-font-family};
-  --mat-expansion-header-text-font: #{$app-font-family};
-  --mat-expansion-container-text-font: #{$app-font-family};
-  --mat-datepicker-calendar-text-font: #{$app-font-family};
-  --mat-legacy-button-toggle-text-font: #{$app-font-family};
-  --mat-standard-button-toggle-text-font: #{$app-font-family};
-  --mat-bottom-sheet-container-text-font: #{$app-font-family};
-  --mat-badge-text-font: #{$app-font-family};
-  --mat-table-header-headline-font: #{$app-font-family};
-  --mat-table-row-item-label-text-font: #{$app-font-family};
-  --mat-table-footer-supporting-text-font: #{$app-font-family};
-  --mat-paginator-container-text-font: #{$app-font-family};
-  --mat-menu-item-label-text-font: #{$app-font-family};
-  --mat-select-trigger-text-font: #{$app-font-family};
-  --mdc-filled-text-field-label-text-font: #{$app-font-family};
-  --mdc-outlined-text-field-label-text-font: #{$app-font-family};
-  --mat-form-field-container-text-font: #{$app-font-family};
-  --mat-form-field-subscript-text-font: #{$app-font-family};
-  --mat-optgroup-label-text-font: #{$app-font-family};
-  --mat-option-label-text-font: #{$app-font-family};
-
-  --mat-option-label-text-size: 1rem;
-  --mat-optgroup-label-text-size: 1rem;
-  --mat-card-title-text-size: 1.25rem;
-  --mat-card-subtitle-text-size: 0.875rem;
-  --mdc-filled-text-field-label-text-size: 1rem;
-  --mdc-outlined-text-field-label-text-size: 1rem;
-  --mat-form-field-container-text-size: 1rem;
-  --mat-form-field-subscript-text-size: 0.75rem;
-  --mat-select-trigger-text-size: 1rem;
-  --mdc-dialog-supporting-text-size: 1rem;
-  --mdc-slider-label-label-text-size: 0.875rem;
-  --mat-menu-item-label-text-size: 1rem;
-  --mdc-list-list-item-label-text-size: 1rem;
-  --mdc-list-list-item-supporting-text-size: 0.875rem;
-  --mdc-list-list-item-trailing-supporting-text-size: 0.75rem;
-  --mat-paginator-container-text-size: 0.75rem;
-  --mat-paginator-select-trigger-text-size: 0.75rem;
-  --mat-checkbox-label-text-size: 0.875rem;
-  --mdc-text-button-label-text-size: 0.875rem;
-  --mdc-filled-button-label-text-size: 0.875rem;
-  --mdc-protected-button-label-text-size: 0.875rem;
-  --mdc-outlined-button-label-text-size: 0.875rem;
-  --mdc-extended-fab-label-text-size: 0.875rem;
-  --mdc-snackbar-supporting-text-size: 0.875rem;
-  --mat-table-row-item-label-text-size: 0.875rem;
-  --mat-table-footer-supporting-text-size: 0.875rem;
-  --mat-badge-text-size: 0.75rem;
-  --mat-badge-small-size-text-size: 0.5625rem;
-  --mat-badge-large-size-text-size: 1.5rem;
-  --mat-bottom-sheet-container-text-size: 0.875rem;
-  --mat-legacy-button-toggle-label-text-size: 1rem;
-  --mat-standard-button-toggle-label-text-size: 1rem;
-  --mat-datepicker-calendar-text-size: 0.8125rem;
-  --mat-datepicker-calendar-body-label-text-size: 0.875rem;
-  --mat-datepicker-calendar-period-button-text-size: 0.875rem;
-  --mat-datepicker-calendar-header-text-size: 0.6875rem;
-  --mat-expansion-header-text-size: 0.875rem;
-  --mat-expansion-container-text-size: 0.875rem;
-  --mat-grid-list-tile-header-primary-text-size: 0.875rem;
-  --mat-grid-list-tile-header-secondary-text-size: 0.75rem;
-  --mat-grid-list-tile-footer-primary-text-size: 0.875rem;
-  --mat-grid-list-tile-footer-secondary-text-size: 0.75rem;
-  --mat-stepper-header-label-text-size: 0.875rem;
-  --mat-stepper-header-error-state-label-text-size: 1rem;
-  --mat-stepper-header-selected-state-label-text-size: 1rem;
-  --mat-toolbar-title-text-size: 1.25rem;
-  --mat-tree-node-text-size: 0.875rem;
-}
-
-.mat-mdc-snack-bar-container .mdc-snackbar__label {
-  --mdc-snackbar-supporting-text-line-height: 1.25rem;
-}
-
-.mat-mdc-radio-button .mat-internal-form-field {
-  --mat-radio-label-text-size: 0.875rem;
-}
-
-.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
-  --mdc-chip-label-text-size: 0.875rem;
-}
-
-.mat-mdc-tooltip-surface {
-  --mdc-plain-tooltip-supporting-text-font: #{$app-font-family};
-  --mdc-plain-tooltip-supporting-text-size: 0.75rem;
-}