Theme

• Theme
  • Installation
  • CSS-Variablen
    • Farbpaletten & semantische Farben
    • Design Tokens: Layout, Typografie & Spacing
    • App-Grundlayout & Zustände
    • Formulare & Eingaben
    • Navigation & Struktur
    • Buttons
    • Container & Inhalte
    • Feedback & Hinweise
    • Sonstiges
  • CSS-Klassen
    • Textfarbe
    • Hintergrundfarbe
    • Rahmenfarbe
    • Outline-Farbe
    • Textdekorationsfarbe
    • Spaltentrennlinien-Farbe
    • Sonstiges
  • Code-Beispiele
    • CSS-Variable nutzen
    • LUX-Card umstylen
    • LUX-Button (rund) umstylen
    • LUX-Button (stroked) umstylen
    • CSS-Klasse
  • Lizenztext - Icons
  • Lizenztext - Fonts

Dieses Projekt enthält alle Themes der LUX-Components.

Hinweis: Seit Version 20 basiert das Theme auf Material Theme 3 (MDC) und verwendet Design Tokens für eine moderne, flexible und konsistente Gestaltung. Die Farbpaletten und Variablen wurden überarbeitet. Migrationstipps siehe unten.

Installation

npm install @ihk-gfi/lux-components-theme

CSS-Variablen

Farbpaletten & semantische Farben

| Variable | Beschreibung | | -------------------------------------------- | -------------------------------------------------------------------------------- | | --lux-theme-primary-0 | Primärfarbpalette; Tonstufe 0 (sehr dunkel / 0%). | | --lux-theme-primary-10 | Primärfarbpalette; Tonstufe 10 (sehr dunkel). | | --lux-theme-primary-20 | Primärfarbpalette; Tonstufe 20 (dunkel). | | --lux-theme-primary-25 | Primärfarbpalette; Tonstufe 25 (dunkler Zwischenwert). | | --lux-theme-primary-30 | Primärfarbpalette; Tonstufe 30 (kräftig dunkel). | | --lux-theme-primary-35 | Primärfarbpalette; Tonstufe 35 (dunkel-mittel). | | --lux-theme-primary-40 | Primärfarbpalette; Tonstufe 40 (Basis-/Standardton). | | --lux-theme-primary-50 | Primärfarbpalette; Tonstufe 50 (mittlerer Ton). | | --lux-theme-primary-60 | Primärfarbpalette; Tonstufe 60 (mittel-hell). | | --lux-theme-primary-70 | Primärfarbpalette; Tonstufe 70 (hell). | | --lux-theme-primary-80 | Primärfarbpalette; Tonstufe 80 (sehr hell). | | --lux-theme-primary-90 | Primärfarbpalette; Tonstufe 90 (nahe Pastell). | | --lux-theme-primary-95 | Primärfarbpalette; Tonstufe 95 (sehr blass). | | --lux-theme-primary-98 | Primärfarbpalette; Tonstufe 98 (fast weiß). | | --lux-theme-primary-99 | Primärfarbpalette; Tonstufe 99 (minimal getönt). | | --lux-theme-primary-100 | Primärfarbpalette; Tonstufe 100 (weiß / 100%). | | --lux-theme-accent-0 | Akzent-/Sekundärpalette; Tonstufe 0 (sehr dunkel / 0%). | | --lux-theme-accent-10 | Akzent-/Sekundärpalette; Tonstufe 10 (sehr dunkel). | | --lux-theme-accent-20 | Akzent-/Sekundärpalette; Tonstufe 20 (dunkel). | | --lux-theme-accent-25 | Akzent-/Sekundärpalette; Tonstufe 25 (dunkler Zwischenwert). | | --lux-theme-accent-30 | Akzent-/Sekundärpalette; Tonstufe 30 (kräftig dunkel). | | --lux-theme-accent-35 | Akzent-/Sekundärpalette; Tonstufe 35 (dunkel-mittel). | | --lux-theme-accent-40 | Akzent-/Sekundärpalette; Tonstufe 40 (Basis-/Standardton). | | --lux-theme-accent-50 | Akzent-/Sekundärpalette; Tonstufe 50 (mittlerer Ton). | | --lux-theme-accent-60 | Akzent-/Sekundärpalette; Tonstufe 60 (mittel-hell). | | --lux-theme-accent-70 | Akzent-/Sekundärpalette; Tonstufe 70 (hell). | | --lux-theme-accent-80 | Akzent-/Sekundärpalette; Tonstufe 80 (sehr hell). | | --lux-theme-accent-90 | Akzent-/Sekundärpalette; Tonstufe 90 (nahe Pastell). | | --lux-theme-accent-95 | Akzent-/Sekundärpalette; Tonstufe 95 (sehr blass). | | --lux-theme-accent-98 | Akzent-/Sekundärpalette; Tonstufe 98 (fast weiß). | | --lux-theme-accent-99 | Akzent-/Sekundärpalette; Tonstufe 99 (minimal getönt). | | --lux-theme-accent-100 | Akzent-/Sekundärpalette; Tonstufe 100 (weiß / 100%). | | --lux-theme-neutral-0 | Neutrale Graustufenpalette; Tonstufe 0 (sehr dunkel / 0%). | | --lux-theme-neutral-10 | Neutrale Graustufenpalette; Tonstufe 10 (sehr dunkel). | | --lux-theme-neutral-20 | Neutrale Graustufenpalette; Tonstufe 20 (dunkel). | | --lux-theme-neutral-25 | Neutrale Graustufenpalette; Tonstufe 25 (dunkler Zwischenwert). | | --lux-theme-neutral-30 | Neutrale Graustufenpalette; Tonstufe 30 (kräftig dunkel). | | --lux-theme-neutral-35 | Neutrale Graustufenpalette; Tonstufe 35 (dunkel-mittel). | | --lux-theme-neutral-40 | Neutrale Graustufenpalette; Tonstufe 40 (Basis-/Standardton). | | --lux-theme-neutral-50 | Neutrale Graustufenpalette; Tonstufe 50 (mittlerer Ton). | | --lux-theme-neutral-60 | Neutrale Graustufenpalette; Tonstufe 60 (mittel-hell). | | --lux-theme-neutral-70 | Neutrale Graustufenpalette; Tonstufe 70 (hell). | | --lux-theme-neutral-80 | Neutrale Graustufenpalette; Tonstufe 80 (sehr hell). | | --lux-theme-neutral-90 | Neutrale Graustufenpalette; Tonstufe 90 (nahe Pastell). | | --lux-theme-neutral-95 | Neutrale Graustufenpalette; Tonstufe 95 (sehr blass). | | --lux-theme-neutral-98 | Neutrale Graustufenpalette; Tonstufe 98 (fast weiß). | | --lux-theme-neutral-99 | Neutrale Graustufenpalette; Tonstufe 99 (minimal getönt). | | --lux-theme-neutral-100 | Neutrale Graustufenpalette; Tonstufe 100 (weiß / 100%). | | --lux-theme-warn-0 | Warn-/Fehlerpalette; Tonstufe 0 (sehr dunkel / 0%). | | --lux-theme-warn-10 | Warn-/Fehlerpalette; Tonstufe 10 (sehr dunkel). | | --lux-theme-warn-20 | Warn-/Fehlerpalette; Tonstufe 20 (dunkel). | | --lux-theme-warn-25 | Warn-/Fehlerpalette; Tonstufe 25 (dunkler Zwischenwert). | | --lux-theme-warn-30 | Warn-/Fehlerpalette; Tonstufe 30 (kräftig dunkel). | | --lux-theme-warn-35 | Warn-/Fehlerpalette; Tonstufe 35 (dunkel-mittel). | | --lux-theme-warn-40 | Warn-/Fehlerpalette; Tonstufe 40 (Basis-/Standardton). | | --lux-theme-warn-50 | Warn-/Fehlerpalette; Tonstufe 50 (mittlerer Ton). | | --lux-theme-warn-60 | Warn-/Fehlerpalette; Tonstufe 60 (mittel-hell). | | --lux-theme-warn-70 | Warn-/Fehlerpalette; Tonstufe 70 (hell). | | --lux-theme-warn-80 | Warn-/Fehlerpalette; Tonstufe 80 (sehr hell). | | --lux-theme-warn-90 | Warn-/Fehlerpalette; Tonstufe 90 (nahe Pastell). | | --lux-theme-warn-95 | Warn-/Fehlerpalette; Tonstufe 95 (sehr blass). | | --lux-theme-warn-98 | Warn-/Fehlerpalette; Tonstufe 98 (fast weiß). | | --lux-theme-warn-99 | Warn-/Fehlerpalette; Tonstufe 99 (minimal getönt). | | --lux-theme-warn-100 | Warn-/Fehlerpalette; Tonstufe 100 (weiß / 100%). | | --lux-theme-primary-color | Primärfarbpalette; Tonstufe color (Skalenwert). | | --lux-theme-accent-color | Akzent-/Sekundärpalette; Tonstufe color (Skalenwert). | | --lux-theme-warn-color | Warn-/Fehlerpalette; Tonstufe color (Skalenwert). | | --lux-theme-custom-purple | Benutzerdefinierter Farbtoken „purple“. | | --lux-theme-custom-on-purple | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „purple“. | | --lux-theme-custom-pink | Benutzerdefinierter Farbtoken „pink“. | | --lux-theme-custom-on-pink | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „pink“. | | --lux-theme-custom-yellow | Benutzerdefinierter Farbtoken „yellow“. | | --lux-theme-custom-on-yellow | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „yellow“. | | --lux-theme-custom-orange | Benutzerdefinierter Farbtoken „orange“. | | --lux-theme-custom-on-orange | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „orange“. | | --lux-theme-custom-lightblue | Benutzerdefinierter Farbtoken „lightblue“. | | --lux-theme-custom-on-lightblue | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „lightblue“. | | --lux-theme-custom-blue | Benutzerdefinierter Farbtoken „blue“. | | --lux-theme-custom-on-blue | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „blue“. | | --lux-theme-custom-green | Benutzerdefinierter Farbtoken „green“. | | --lux-theme-custom-on-green | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „green“. | | --lux-theme-custom-red | Benutzerdefinierter Farbtoken „red“. | | --lux-theme-custom-on-red | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „red“. | | --lux-theme-custom-gray | Benutzerdefinierter Farbtoken „gray“. | | --lux-theme-custom-on-gray | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „gray“. | | --lux-theme-custom-black | Benutzerdefinierter Farbtoken „black“. | | --lux-theme-custom-on-black | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „black“. | | --lux-theme-custom-white | Benutzerdefinierter Farbtoken „white“. | | --lux-theme-custom-on-white | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „white“. | | --lux-theme-contrast-custom-purple | Kontrastoptimierter benutzerdefinierter Farbtoken „purple“. | | --lux-theme-contrast-custom-on-purple | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „purple“. | | --lux-theme-contrast-custom-pink | Kontrastoptimierter benutzerdefinierter Farbtoken „pink“. | | --lux-theme-contrast-custom-on-pink | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „pink“. | | --lux-theme-contrast-custom-yellow | Kontrastoptimierter benutzerdefinierter Farbtoken „yellow“. | | --lux-theme-contrast-custom-on-yellow | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „yellow“. | | --lux-theme-contrast-custom-orange | Kontrastoptimierter benutzerdefinierter Farbtoken „orange“. | | --lux-theme-contrast-custom-on-orange | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „orange“. | | --lux-theme-contrast-custom-lightblue | Kontrastoptimierter benutzerdefinierter Farbtoken „lightblue“. | | --lux-theme-contrast-custom-on-lightblue | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „lightblue“. | | --lux-theme-contrast-custom-blue | Kontrastoptimierter benutzerdefinierter Farbtoken „blue“. | | --lux-theme-contrast-custom-on-blue | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „blue“. | | --lux-theme-contrast-custom-green | Kontrastoptimierter benutzerdefinierter Farbtoken „green“. | | --lux-theme-contrast-custom-on-green | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „green“. | | --lux-theme-contrast-custom-red | Kontrastoptimierter benutzerdefinierter Farbtoken „red“. | | --lux-theme-contrast-custom-on-red | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „red“. | | --lux-theme-contrast-custom-gray | Kontrastoptimierter benutzerdefinierter Farbtoken „gray“. | | --lux-theme-contrast-custom-on-gray | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „gray“. | | --lux-theme-contrast-custom-black | Kontrastoptimierter benutzerdefinierter Farbtoken „black“. | | --lux-theme-contrast-custom-on-black | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „black“. | | --lux-theme-contrast-custom-white | Kontrastoptimierter benutzerdefinierter Farbtoken „white“. | | --lux-theme-contrast-custom-on-white | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „white“. | | --lux-theme-component-bg-red | Hintergrundfarbe für Komponentenvariante „red“. | | --lux-theme-component-bg-green | Hintergrundfarbe für Komponentenvariante „green“. | | --lux-theme-component-bg-purple | Hintergrundfarbe für Komponentenvariante „purple“. | | --lux-theme-component-bg-blue | Hintergrundfarbe für Komponentenvariante „blue“. | | --lux-theme-component-bg-gray | Hintergrundfarbe für Komponentenvariante „gray“. | | --lux-theme-component-bg-orange | Hintergrundfarbe für Komponentenvariante „orange“. | | --lux-theme-component-bg-black | Hintergrundfarbe für Komponentenvariante „black“. | | --lux-theme-component-bg-white | Hintergrundfarbe für Komponentenvariante „white“. | | --lux-theme-component-bg-yellow | Hintergrundfarbe für Komponentenvariante „yellow“. | | --lux-theme-component-bg-pink | Hintergrundfarbe für Komponentenvariante „pink“. | | --lux-theme-component-bg-lightblue | Hintergrundfarbe für Komponentenvariante „lightblue“. | | --lux-theme-component-font-color-red | Schriftfarbe für Komponentenvariante „red“. | | --lux-theme-component-font-color-green | Schriftfarbe für Komponentenvariante „green“. | | --lux-theme-component-font-color-purple | Schriftfarbe für Komponentenvariante „purple“. | | --lux-theme-component-font-color-blue | Schriftfarbe für Komponentenvariante „blue“. | | --lux-theme-component-font-color-gray | Schriftfarbe für Komponentenvariante „gray“. | | --lux-theme-component-font-color-orange | Schriftfarbe für Komponentenvariante „orange“. | | --lux-theme-component-font-color-black | Schriftfarbe für Komponentenvariante „black“. | | --lux-theme-component-font-color-white | Schriftfarbe für Komponentenvariante „white“. | | --lux-theme-component-font-color-yellow | Schriftfarbe für Komponentenvariante „yellow“. | | --lux-theme-component-font-color-pink | Schriftfarbe für Komponentenvariante „pink“. | | --lux-theme-component-font-color-lightblue | Schriftfarbe für Komponentenvariante „lightblue“. |

Design Tokens: Layout, Typografie & Spacing

| Variable | Beschreibung | | ------------------------------- | ---------------------------------------- | | --lux-theme-app-font-family | Standardschriftfamilie der Anwendung. | | --lux-theme-app-headline-font | Schriftfamilie für Überschriften. | | --lux-theme-breakpoint-xs | Responsiver Breakpoint für Größe „xs“. | | --lux-theme-breakpoint-sm | Responsiver Breakpoint für Größe „sm“. | | --lux-theme-breakpoint-md | Responsiver Breakpoint für Größe „md“. | | --lux-theme-breakpoint-lg | Responsiver Breakpoint für Größe „lg“. | | --lux-theme-breakpoint-xl | Responsiver Breakpoint für Größe „xl“. | | --lux-theme-radius-xs | Eckradius in Größe „xs“. | | --lux-theme-radius-sm | Eckradius in Größe „sm“. | | --lux-theme-radius-md | Eckradius in Größe „md“. | | --lux-theme-radius-lg | Eckradius in Größe „lg“. | | --lux-theme-radius-xl | Eckradius in Größe „xl“. | | --lux-theme-radius-xxl | Eckradius in Größe „xxl“. | | --lux-theme-spacing-xxs | Abstands-/Spacing-Token in Größe „xxs“. | | --lux-theme-spacing-xs | Abstands-/Spacing-Token in Größe „xs“. | | --lux-theme-spacing-1-5 | Abstands-/Spacing-Token in Größe „1-5“. | | --lux-theme-spacing-sm | Abstands-/Spacing-Token in Größe „sm“. | | --lux-theme-spacing-3 | Abstands-/Spacing-Token in Größe „3“. | | --lux-theme-spacing-md | Abstands-/Spacing-Token in Größe „md“. | | --lux-theme-spacing-lg | Abstands-/Spacing-Token in Größe „lg“. | | --lux-theme-spacing-xl | Abstands-/Spacing-Token in Größe „xl“. | | --lux-theme-spacing-xxl | Abstands-/Spacing-Token in Größe „xxl“. | | --lux-theme-spacing-xxxl | Abstands-/Spacing-Token in Größe „xxxl“. | | --lux-theme-font-size-xs | Schriftgrößen-Token in Größe „xs“. | | --lux-theme-font-size-sm | Schriftgrößen-Token in Größe „sm“. | | --lux-theme-font-size-md | Schriftgrößen-Token in Größe „md“. | | --lux-theme-font-size-lg | Schriftgrößen-Token in Größe „lg“. | | --lux-theme-font-size-xl | Schriftgrößen-Token in Größe „xl“. | | --lux-theme-font-size-2xl | Schriftgrößen-Token in Größe „2xl“. |

App-Grundlayout & Zustände

| Variable | Beschreibung | | --------------------------------------------- | ----------------------------------------------------------- | | --lux-theme-app-header-item-border-radius | Anwendungsweites App-Token für „header-item-border-radius“. | | --lux-theme-app-header-bg | Anwendungsweites App-Token für „header-bg“. | | --lux-theme-app-content-bg | Anwendungsweites App-Token für „content-bg“. | | --lux-theme-app-footer-bg | Anwendungsweites App-Token für „footer-bg“. | | --lux-theme-app-footer-border-color | Anwendungsweites App-Token für „footer-border-color“. | | --lux-theme-app-data-bg | Anwendungsweites App-Token für „data-bg“. | | --lux-theme-app-gradient | Anwendungsweites App-Token für „gradient“. | | --lux-theme-app-gradient-reverse | Anwendungsweites App-Token für „gradient-reverse“. | | --lux-theme-app-border-color | Anwendungsweites App-Token für „border-color“. | | --lux-theme-app-border-radius | Anwendungsweites App-Token für „border-radius“. | | --lux-theme-app-state-layer-color | Anwendungsweites App-Token für „state-layer-color“. | | --lux-theme-hover-state-layer-opacity | Token für Hover-Zustände. | | --lux-theme-outline-dark | Token für Fokus-/Outline-Darstellung. | | --lux-theme-outline-bright | Token für Fokus-/Outline-Darstellung. | | --lux-theme-outline-width | Token für Fokus-/Outline-Darstellung. | | --lux-theme-outline-style | Token für Fokus-/Outline-Darstellung. | | --lux-theme-outline-color-bright | Token für Fokus-/Outline-Darstellung. | | --lux-theme-outline-color-dark | Token für Fokus-/Outline-Darstellung. | | --lux-theme-hover-color | Token für Hover-Zustände. | | --lux-theme-on-hover-color | Token für Hover-Zustände. | | --lux-theme-hover-color-for-dark-background | Token für Hover-Zustände. | | --lux-theme-selected-border-color | Token für ausgewählten Zustand. | | --lux-theme-selected-bg-color | Token für ausgewählten Zustand. | | --lux-theme-on-selected-color | Token für ausgewählten Zustand. |

Formulare & Eingaben

| Variable | Beschreibung | | ------------------------------------------------------------- | ------------------------------------------------------------------------------------ | | --lux-theme-form-border-width | Formular-Token für „border-width“. | | --lux-theme-form-min-height | Formular-Token für „min-height“. | | --lux-theme-form-dense-min-height | Formular-Token für „dense-min-height“. | | --lux-theme-form-control-textarea-padding | Formular-Token für „control-textarea-padding“. | | --lux-theme-form-control-textarea-dense-padding | Formular-Token für „control-textarea-dense-padding“. | | --lux-theme-form-control-label-margin | Formular-Token für „control-label-margin“. | | --lux-theme-form-control-error-margin | Formular-Token für „control-error-margin“. | | --lux-theme-form-border-color | Formular-Token für „border-color“. | | --lux-theme-form-hover-border-color | Formular-Token für „hover-border-color“. | | --lux-theme-form-focus-border-color | Formular-Token für „focus-border-color“. | | --lux-theme-form-focus-box-shadow | Formular-Token für „focus-box-shadow“. | | --lux-theme-form-error-border-color | Formular-Token für „error-border-color“. | | --lux-theme-form-error-box-shadow | Formular-Token für „error-box-shadow“. | | --lux-theme-form-control-font-size | Formular-Token für „control-font-size“. | | --lux-theme-form-control-buffer | Formular-Token für „control-buffer“. | | --lux-theme-form-error-msg-background | Formular-Token für „error-msg-background“. | | --lux-theme-form-autofill-background-color | Formular-Token für „autofill-background-color“. | | --lux-theme-form-readonly-color | Formular-Token für „readonly-color“. | | --lux-theme-form-readonly-bg-color | Formular-Token für „readonly-bg-color“. | | --lux-theme-datepicker-icon-color | Datepicker-Komponente; steuert „icon-color“. | | --lux-theme-datepicker-panel-shape | Datepicker-Komponente; steuert „panel-shape“. | | --lux-theme-datepicker-panel-text-color | Datepicker-Komponente; steuert „panel-text-color“. | | --lux-theme-datepicker-panel-font-size | Datepicker-Komponente; steuert „panel-font-size“. | | --lux-theme-datepicker-panel-date-border-radius | Datepicker-Komponente; steuert „panel-date-border-radius“. | | --lux-theme-datepicker-panel-date-background-color | Datepicker-Komponente; steuert „panel-date-background-color“. | | --lux-theme-datepicker-panel-date-selected-color | Datepicker-Komponente; steuert „panel-date-selected-color“. | | --lux-theme-datepicker-panel-date-selected-background-color | Datepicker-Komponente; steuert „panel-date-selected-background-color“. | | --lux-theme-datepicker-panel-date-hover-background-color | Datepicker-Komponente; steuert „panel-date-hover-background-color“. | | --lux-theme-file-upload-padding | File-Upload-Komponente; steuert „padding“. | | --lux-theme-file-upload-background-image | File-Upload-Komponente; steuert „background-image“. | | --lux-theme-file-upload-item-container-border | File-Upload-Komponente; steuert „item-container-border“. | | --lux-theme-file-upload-item-disabled-container-border | File-Upload-Komponente; steuert „item-disabled-container-border“. | | --lux-theme-file-upload-item-background-color | File-Upload-Komponente; steuert „item-background-color“. | | --lux-theme-file-upload-item-margin | File-Upload-Komponente; steuert „item-margin“. | | --lux-theme-file-upload-item-padding | File-Upload-Komponente; steuert „item-padding“. | | --lux-theme-file-upload-item-border | File-Upload-Komponente; steuert „item-border“. | | --lux-theme-file-upload-item-border-bottom | File-Upload-Komponente; steuert „item-border-bottom“. | | --lux-theme-file-upload-item-border-bottom-left-radius | File-Upload-Komponente; steuert „item-border-bottom-left-radius“. | | --lux-theme-file-upload-item-border-bottom-right-radius | File-Upload-Komponente; steuert „item-border-bottom-right-radius“. | | --lux-theme-file-upload-item-disabled-border | File-Upload-Komponente; steuert „item-disabled-border“. | | --lux-theme-file-upload-item-disabled-border-bottom | File-Upload-Komponente; steuert „item-disabled-border-bottom“. | | --lux-theme-lookup-invalid-option-text-color | Lookup-/Autocomplete-Komponente; steuert „invalid-option-text-color“. | | --lux-theme-lookup-invalid-option-font-weight | Lookup-/Autocomplete-Komponente; steuert „invalid-option-font-weight“. | | --lux-theme-panel-option-min-height | Panel-/Optionslisten-Komponente; steuert „option-min-height“. | | --lux-theme-panel-option-padding | Panel-/Optionslisten-Komponente; steuert „option-padding“. | | --lux-theme-panel-bg-color | Panel-/Optionslisten-Komponente; steuert „bg-color“. | | --lux-theme-panel-option-label-text-size | Panel-/Optionslisten-Komponente; steuert „option-label-text-size“. | | --lux-theme-panel-option-label-text-color | Panel-/Optionslisten-Komponente; steuert „option-label-text-color“. | | --lux-theme-panel-option-selected-state-layer-color | Panel-/Optionslisten-Komponente; steuert „option-selected-state-layer-color“. | | --lux-theme-panel-option-hover-state-layer-color | Panel-/Optionslisten-Komponente; steuert „option-hover-state-layer-color“. | | --lux-theme-panel-option-focus-state-layer-color | Panel-/Optionslisten-Komponente; steuert „option-focus-state-layer-color“. | | --lux-theme-panel-option-disabled-selected-checkmark-color | Panel-/Optionslisten-Komponente; steuert „option-disabled-selected-checkmark-color“. | | --lux-theme-panel-option-selected-checkmark-color | Panel-/Optionslisten-Komponente; steuert „option-selected-checkmark-color“. |

Navigation & Struktur

| Variable | Beschreibung | | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | --lux-theme-breadcrumb-hover-color | Breadcrumb-Komponente; steuert „hover-color“. | | --lux-theme-menu-item-font-color | Menü-Komponente; steuert „item-font-color“. | | --lux-theme-menu-item-subtitle-font-color | Menü-Komponente; steuert „item-subtitle-font-color“. | | --lux-theme-menu-item-subtitle-font-size | Menü-Komponente; steuert „item-subtitle-font-size“. | | --lux-theme-menu-panel-header-font-color | Menü-Komponente; steuert „panel-header-font-color“. | | --lux-theme-menu-panel-header-font-weight | Menü-Komponente; steuert „panel-header-font-weight“. | | --lux-theme-menu-panel-header-font-size | Menü-Komponente; steuert „panel-header-font-size“. | | --lux-theme-menu-item-icon-size | Menü-Komponente; steuert „item-icon-size“. | | --lux-theme-menu-item-icon-size-large | Menü-Komponente; steuert „item-icon-size-large“. | | --lux-theme-menu-item-font-size | Menü-Komponente; steuert „item-font-size“. | | --lux-theme-menu-button-item-font-size | Menü-Komponente; steuert „button-item-font-size“. | | --lux-theme-menu-button-text-container-shape | Menü-Komponente; steuert „button-text-container-shape“. | | --lux-theme-menu-container-height | Menü-Komponente; steuert „container-height“. | | --lux-theme-menu-panel-option-min-height | Menü-Komponente; steuert „panel-option-min-height“. | | --lux-theme-menu-panel-option-padding | Menü-Komponente; steuert „panel-option-padding“. | | --lux-theme-stepper-large-nav-item-font-size | Stepper-Komponente; steuert „large-nav-item-font-size“. | | --lux-theme-stepper-large-nav-item-font-weight | Stepper-Komponente; steuert „large-nav-item-font-weight“. | | --lux-theme-stepper-large-nav-item-line-height | Stepper-Komponente; steuert „large-nav-item-line-height“. | | --lux-theme-stepper-large-nav-item-completed-font-size | Stepper-Komponente; steuert „large-nav-item-completed-font-size“. | | --lux-theme-stepper-large-nav-item-completed-font-weight | Stepper-Komponente; steuert „large-nav-item-completed-font-weight“. | | --lux-theme-stepper-large-nav-item-completed-line-height | Stepper-Komponente; steuert „large-nav-item-completed-line-height“. | | --lux-theme-stepper-large-nav-item-number-container-background-color | Stepper-Komponente; steuert „large-nav-item-number-container-background-color“. | | --lux-theme-stepper-large-nav-item-number-container-width | Stepper-Komponente; steuert „large-nav-item-number-container-width“. | | --lux-theme-stepper-large-nav-item-number-container-height | Stepper-Komponente; steuert „large-nav-item-number-container-height“. | | --lux-theme-stepper-large-nav-item-number-container-padding | Stepper-Komponente; steuert „large-nav-item-number-container-padding“. | | --lux-theme-stepper-large-nav-item-number-container-radius | Stepper-Komponente; steuert „large-nav-item-number-container-radius“. | | --lux-theme-stepper-large-nav-item-completed-icon-width | Stepper-Komponente; steuert „large-nav-item-completed-icon-width“. | | --lux-theme-stepper-large-nav-item-completed-icon-height | Stepper-Komponente; steuert „large-nav-item-completed-icon-height“. | | --lux-theme-stepper-large-nav-item-completed-icon-margin | Stepper-Komponente; steuert „large-nav-item-completed-icon-margin“. | | --lux-theme-stepper-large-backdrop-bg | Stepper-Komponente; steuert „large-backdrop-bg“. | | --lux-theme-stepper-large-completed-fc | Stepper-Komponente; steuert „large-completed-fc“. | | --lux-theme-stepper-large-nav-item-active-fc | Stepper-Komponente; steuert „large-nav-item-active-fc“. | | --lux-theme-stepper-large-nav-item-active-bg | Stepper-Komponente; steuert „large-nav-item-active-bg“. | | --lux-theme-stepper-large-nav-item-disabled-fg | Stepper-Komponente; steuert „large-nav-item-disabled-fg“. | | --lux-theme-stepper-large-nav-item-disabled-bg | Stepper-Komponente; steuert „large-nav-item-disabled-bg“. | | --lux-theme-stepper-large-nav-item-completed-fg | Stepper-Komponente; steuert „large-nav-item-completed-fg“. | | --lux-theme-stepper-large-nav-item-completed-bg | Stepper-Komponente; steuert „large-nav-item-completed-bg“. | | --lux-theme-stepper-large-nav-item-not-touched-fg | Stepper-Komponente; steuert „large-nav-item-not-touched-fg“. | | --lux-theme-stepper-large-nav-item-not-touched-bg | Stepper-Komponente; steuert „large-nav-item-not-touched-bg“. | | --lux-theme-side-nav-button-color | Side-Navigation-Komponente; steuert „button-color“. | | --lux-theme-tabs-text-font | Tabs-Komponente; steuert „text-font“. | | --lux-theme-tabs-label-text-size | Tabs-Komponente; steuert „label-text-size“. | | --lux-theme-tabs-label-text-weight | Tabs-Komponente; steuert „label-text-weight“. | | --lux-theme-tabs-border-radius | Tabs-Komponente; steuert „border-radius“. |

Buttons

| Variable | Beschreibung | | -------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | --lux-theme-button-text-default-text-color | Button-Komponente; steuert „text-default-text-color“. | | --lux-theme-button-text-primary-text-color | Button-Komponente; steuert „text-primary-text-color“. | | --lux-theme-button-text-accent-text-color | Button-Komponente; steuert „text-accent-text-color“. | | --lux-theme-button-text-warn-text-color | Button-Komponente; steuert „text-warn-text-color“. | | --lux-theme-button-icon-default-text-color | Button-Komponente; steuert „icon-default-text-color“. | | --lux-theme-button-icon-primary-text-color | Button-Komponente; steuert „icon-primary-text-color“. | | --lux-theme-button-icon-accent-text-color | Button-Komponente; steuert „icon-accent-text-color“. | | --lux-theme-button-icon-warn-text-color | Button-Komponente; steuert „icon-warn-text-color“. | | --lux-theme-button-icon-size | Button-Komponente; steuert „icon-size“. | | --lux-theme-button-icon-container-size | Button-Komponente; steuert „icon-container-size“. | | --lux-theme-button-icon-container-shape | Button-Komponente; steuert „icon-container-shape“. | | --lux-theme-button-flat-default-text-color | Button-Komponente; steuert „flat-default-text-color“. | | --lux-theme-button-flat-default-container-color | Button-Komponente; steuert „flat-default-container-color“. | | --lux-theme-button-flat-primary-text-color | Button-Komponente; steuert „flat-primary-text-color“. | | --lux-theme-button-flat-primary-container-color | Button-Komponente; steuert „flat-primary-container-color“. | | --lux-theme-button-flat-accent-text-color | Button-Komponente; steuert „flat-accent-text-color“. | | --lux-theme-button-flat-accent-container-color | Button-Komponente; steuert „flat-accent-container-color“. | | --lux-theme-button-flat-warn-text-color | Button-Komponente; steuert „flat-warn-text-color“. | | --lux-theme-button-flat-warn-container-color | Button-Komponente; steuert „flat-warn-container-color“. | | --lux-theme-button-raised-default-text-color | Button-Komponente; steuert „raised-default-text-color“. | | --lux-theme-button-raised-default-container-color | Button-Komponente; steuert „raised-default-container-color“. | | --lux-theme-button-raised-primary-text-color | Button-Komponente; steuert „raised-primary-text-color“. | | --lux-theme-button-raised-primary-container-color | Button-Komponente; steuert „raised-primary-container-color“. | | --lux-theme-button-raised-accent-text-color | Button-Komponente; steuert „raised-accent-text-color“. | | --lux-theme-button-raised-accent-container-color | Button-Komponente; steuert „raised-accent-container-color“. | | --lux-theme-button-raised-warn-text-color | Button-Komponente; steuert „raised-warn-text-color“. | | --lux-theme-button-raised-warn-container-color | Button-Komponente; steuert „raised-warn-container-color“. | | --lux-theme-button-stroked-default-text-color | Button-Komponente; steuert „stroked-default-text-color“. | | --lux-theme-button-stroked-primary-text-color | Button-Komponente; steuert „stroked-primary-text-color“. | | --lux-theme-button-stroked-accent-text-color | Button-Komponente; steuert „stroked-accent-text-color“. | | --lux-theme-button-stroked-warn-text-color | Button-Komponente; steuert „stroked-warn-text-color“. | | --lux-theme-button-rounded-stroked-default-text-color | Button-Komponente; steuert „rounded-stroked-default-text-color“. | | --lux-theme-button-rounded-stroked-primary-text-color | Button-Komponente; steuert „rounded-stroked-primary-text-color“. | | --lux-theme-button-rounded-stroked-accent-text-color | Button-Komponente; steuert „rounded-stroked-accent-text-color“. | | --lux-theme-button-rounded-stroked-warn-text-color | Button-Komponente; steuert „rounded-stroked-warn-text-color“. | | --lux-theme-button-rounded-default-text-color | Button-Komponente; steuert „rounded-default-text-color“. | | --lux-theme-button-rounded-default-container-color | Button-Komponente; steuert „rounded-default-container-color“. | | --lux-theme-button-rounded-primary-text-color | Button-Komponente; steuert „rounded-primary-text-color“. | | --lux-theme-button-rounded-primary-container-color | Button-Komponente; steuert „rounded-primary-container-color“. | | --lux-theme-button-rounded-accent-text-color | Button-Komponente; steuert „rounded-accent-text-color“. | | --lux-theme-button-rounded-accent-container-color | Button-Komponente; steuert „rounded-accent-container-color“. | | --lux-theme-button-rounded-warn-text-color | Button-Komponente; steuert „rounded-warn-text-color“. | | --lux-theme-button-rounded-warn-container-color | Button-Komponente; steuert „rounded-warn-container-color“. | | --lux-theme-button-text-container-shape | Button-Komponente; steuert „text-container-shape“. | | --lux-theme-button-flat-container-shape | Button-Komponente; steuert „flat-container-shape“. | | --lux-theme-button-raised-container-shape | Button-Komponente; steuert „raised-container-shape“. | | --lux-theme-button-stroked-container-shape | Button-Komponente; steuert „stroked-container-shape“. | | --lux-theme-button-rounded-container-shape | Button-Komponente; steuert „rounded-container-shape“. | | --lux-theme-button-rounded-stroked-container-shape | Button-Komponente; steuert „rounded-stroked-container-shape“. | | --lux-theme-button-text-container-height | Button-Komponente; steuert „text-container-height“. | | --lux-theme-button-flat-container-height | Button-Komponente; steuert „flat-container-height“. | | --lux-theme-button-raised-container-height | Button-Komponente; steuert „raised-container-height“. | | --lux-theme-button-stroked-container-height | Button-Komponente; steuert „stroked-container-height“. | | --lux-theme-button-rounded-container-height | Button-Komponente; steuert „rounded-container-height“. | | --lux-theme-button-rounded-stroked-container-height | Button-Komponente; steuert „rounded-stroked-container-height“. | | --lux-theme-button-text-text-size | Button-Komponente; steuert „text-text-size“. | | --lux-theme-button-flat-text-size | Button-Komponente; steuert „flat-text-size“. | | --lux-theme-button-raised-text-size | Button-Komponente; steuert „raised-text-size“. | | --lux-theme-button-stroked-text-size | Button-Komponente; steuert „stroked-text-size“. | | --lux-theme-button-rounded-text-size | Button-Komponente; steuert „rounded-text-size“. | | --lux-theme-button-rounded-stroked-text-size | Button-Komponente; steuert „rounded-stroked-text-size“. | | --lux-theme-button-text-text-weight | Button-Komponente; steuert „text-text-weight“. | | --lux-theme-button-flat-text-weight | Button-Komponente; steuert „flat-text-weight“. | | --lux-theme-button-raised-text-weight | Button-Komponente; steuert „raised-text-weight“. | | --lux-theme-button-stroked-text-weight | Button-Komponente; steuert „stroked-text-weight“. | | --lux-theme-button-text-font | Button-Komponente; steuert „text-font“. | | --lux-theme-button-flat-font | Button-Komponente; steuert „flat-font“. | | --lux-theme-button-raised-font | Button-Komponente; steuert „raised-font“. | | --lux-theme-button-stroked-font | Button-Komponente; steuert „stroked-font“. | | --lux-theme-button-text-text-tracking | Button-Komponente; steuert „text-text-tracking“. | | --lux-theme-button-flat-text-tracking | Button-Komponente; steuert „flat-text-tracking“. | | --lux-theme-button-raised-text-tracking | Button-Komponente; steuert „raised-text-tracking“. | | --lux-theme-button-stroked-text-tracking | Button-Komponente; steuert „stroked-text-tracking“. | | --lux-theme-button-toggle-height | Button-Komponente; steuert „toggle-height“. | | --lux-theme-button-toggle-height-dense | Button-Komponente; steuert „toggle-height-dense“. | | --lux-theme-button-toggle-shape | Button-Komponente; steuert „toggle-shape“. | | --lux-theme-button-toggle-text-color | Button-Komponente; steuert „toggle-text-color“. | | --lux-theme-button-toggle-divider-color | Button-Komponente; steuert „toggle-divider-color“. | | --lux-theme-button-toggle-disabled-divider-color | Button-Komponente; steuert „toggle-disabled-divider-color“. | | --lux-theme-button-toggle-selected-state-text-color | Button-Komponente; steuert „toggle-selected-state-text-color“. | | --lux-theme-button-toggle-selected-state-background-color | Button-Komponente; steuert „toggle-selected-state-background-color“. | | --lux-theme-button-toggle-hover-state-layer-opacity | Button-Komponente; steuert „toggle-hover-state-layer-opacity“. | | --lux-theme-button-toggle-disabled-selected-state-text-color | Button-Komponente; steuert „toggle-disabled-selected-state-text-color“. | | --lux-theme-button-toggle-disabled-selected-state-background-color | Button-Komponente; steuert „toggle-disabled-selected-state-background-color“. | | --lux-theme-button-toggle-disabled-state-text-color | Button-Komponente; steuert „toggle-disabled-state-text-color“. | | --lux-theme-button-toggle-disabled-state-background-color | Button-Komponente; steuert „toggle-disabled-state-background-color“. |

Container & Inhalte

| Variable | Beschreibung | | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | --lux-theme-accordion-panel-container-elevation-shadow-width | Accordion-Komponente; steuert „panel-container-elevation-shadow-width“. | | --lux-theme-accordion-header-color-neutral | Accordion-Komponente; steuert „header-color-neutral“. | | --lux-theme-accordion-header-color-on-neutral | Accordion-Komponente; steuert „header-color-on-neutral“. | | --lux-theme-accordion-header-hover-color-on-neutral | Accordion-Komponente; steuert „header-hover-color-on-neutral“. | | --lux-theme-accordion-header-focus-color-on-neutral | Accordion-Komponente; steuert „header-focus-color-on-neutral“. | | --lux-theme-accordion-header-color-primary | Accordion-Komponente; steuert „header-color-primary“. | | --lux-theme-accordion-header-color-on-primary | Accordion-Komponente; steuert „header-color-on-primary“. | | --lux-theme-accordion-header-hover-color-on-primary | Accordion-Komponente; steuert „header-hover-color-on-primary“. | | --lux-theme-accordion-header-focus-color-on-primary | Accordion-Komponente; steuert „header-focus-color-on-primary“. | | --lux-theme-accordion-header-color-accent | Accordion-Komponente; steuert „header-color-accent“. | | --lux-theme-accordion-header-color-on-accent | Accordion-Komponente; steuert „header-color-on-accent“. | | --lux-theme-accordion-header-hover-color-on-accent | Accordion-Komponente; steuert „header-hover-color-on-accent“. | | --lux-theme-accordion-header-focus-color-on-accent | Accordion-Komponente; steuert „header-focus-color-on-accent“. | | --lux-theme-accordion-header-color-warn | Accordion-Komponente; steuert „header-color-warn“. | | --lux-theme-accordion-header-color-on-warn | Accordion-Komponente; steuert „header-color-on-warn“. | | --lux-theme-accordion-header-hover-color-on-warn | Accordion-Komponente; steuert „header-hover-color-on-warn“. | | --lux-theme-accordion-header-focus-color-on-warn | Accordion-Komponente; steuert „header-focus-color-on-warn“. | | --lux-theme-card-title-line-height | Card-Komponente; steuert „title-line-height“. | | --lux-theme-card-title-text-size | Card-Komponente; steuert „title-text-size“. | | --lux-theme-card-title-text-weight | Card-Komponente; steuert „title-text-weight“. | | --lux-theme-card-subtitle-text-size | Card-Komponente; steuert „subtitle-text-size“. | | --lux-theme-card-subtitle-text-weight | Card-Komponente; steuert „subtitle-text-weight“. | | --lux-theme-card-subtitle-text-color | Card-Komponente; steuert „subtitle-text-color“. | | --lux-theme-card-outline-color | Card-Komponente; steuert „outline-color“. | | --lux-theme-card-shape | Card-Komponente; steuert „shape“. | | --lux-theme-card-background-color | Card-Komponente; steuert „background-color“. | | --lux-theme-card-padding | Card-Komponente; steuert „padding“. | | --lux-theme-dialog-close-button-hover-color | Dialog-Komponente; steuert „close-button-hover-color“. | | --lux-theme-dialog-close-button-hover-background-color | Dialog-Komponente; steuert „close-button-hover-background-color“. | | --lux-theme-popup-background-color | Popup-Komponente; steuert „background-color“. | | --lux-theme-popup-fade-in-duration | Popup-Komponente; steuert „fade-in-duration“. | | --lux-theme-popup-panel-padding | Popup-Komponente; steuert „panel-padding“. | | --lux-theme-popup-title-font-size | Popup-Komponente; steuert „title-font-size“. | | --lux-theme-popup-title-line-height | Popup-Komponente; steuert „title-line-height“. | | --lux-theme-popup-title-font-weight | Popup-Komponente; steuert „title-font-weight“. | | --lux-theme-popup-font-size | Popup-Komponente; steuert „font-size“. | | --lux-theme-popup-line-height | Popup-Komponente; steuert „line-height“. | | --lux-theme-popup-font-weight | Popup-Komponente; steuert „font-weight“. | | --lux-theme-tabble-alternate-row-bg-color | Tabellen-Token (vermutlich Schreibvariante von table); steuert „alternate-row-bg-color“. | | --lux-theme-tile-font-hover-color | Tile-Komponente; steuert „font-hover-color“. | | --lux-theme-tile-icon-color | Tile-Komponente; steuert „icon-color“. | | --lux-theme-tile-border-radius | Tile-Komponente; steuert „border-radius“. | | --lux-theme-tile-borderradius | Tile-Komponente; steuert „borderradius“. | | --lux-theme-tile-bottom-line-color | Tile-Komponente; steuert „bottom-line-color“. | | --lux-theme-tile-ac-icon-color | Tile-Komponente; steuert „ac-icon-color“. | | --lux-theme-tile-ac-hover-bg-color | Tile-Komponente; steuert „ac-hover-bg-color“. | | --lux-theme-tile-ac-hover-border-color | Tile-Komponente; steuert „ac-hover-border-color“. |

Feedback & Hinweise

| Variable | Beschreibung | | ----------------------------------------------- | ------------------------------------------------------------------- | | --lux-theme-snackbar-red | Farbtoken für Snackbar-Variante „red“. | | --lux-theme-snackbar-green | Farbtoken für Snackbar-Variante „green“. | | --lux-theme-snackbar-blue | Farbtoken für Snackbar-Variante „blue“. | | --lux-theme-snackbar-orange | Farbtoken für Snackbar-Variante „orange“. | | --lux-theme-snackbar-yellow | Farbtoken für Snackbar-Variante „yellow“. | | --lux-theme-snackbar-white | Farbtoken für Snackbar-Variante „white“. | | --lux-theme-badge-red | Badge-Komponente; steuert „red“. | | --lux-theme-badge-on-red | Badge-Komponente; steuert „on-red“. | | --lux-theme-badge-green | Badge-Komponente; steuert „green“. | | --lux-theme-badge-on-green | Badge-Komponente; steuert „on-green“. | | --lux-theme-badge-purple | Badge-Komponente; steuert „purple“. | | --lux-theme-badge-on-purple | Badge-Komponente; steuert „on-purple“. | | --lux-theme-badge-blue | Badge-Komponente; steuert „blue“. | | --lux-theme-badge-on-blue | Badge-Komponente; steuert „on-blue“. | | --lux-theme-badge-gray | Badge-Komponente; steuert „gray“. | | --lux-theme-badge-on-gray | Badge-Komponente; steuert „on-gray“. | | --lux-theme-badge-orange | Badge-Komponente; steuert „orange“. | | --lux-theme-badge-on-orange | Badge-Komponente; steuert „on-orange“. | | --lux-theme-badge-black | Badge-Komponente; steuert „black“. | | --lux-theme-badge-on-black | Badge-Komponente; steuert „on-black“. | | --lux-theme-badge-white | Badge-Komponente; steuert „white“. | | --lux-theme-badge-on-white | Badge-Komponente; steuert „on-white“. | | --lux-theme-badge-yellow | Badge-Komponente; steuert „yellow“. | | --lux-theme-badge-on-yellow | Badge-Komponente; steuert „on-yellow“. | | --lux-theme-badge-pink | Badge-Komponente; steuert „pink“. | | --lux-theme-badge-on-pink | Badge-Komponente; steuert „on-pink“. | | --lux-theme-badge-lightblue | Badge-Komponente; steu