Concorde Design tokens: CSS-Variablen Öffnen In dieser Datei findest du alle wichtigen Farben und Komponenten.
CSS-Variable Standard Beschreibung --concorde-primary-color #005eb4 Die Hauptfarbe (Primary Color). Wenn geändert, muss auch --concorde-primary-color-rgb angepasst werden. --concorde-accent-color #005eb4 Wird verwendet, um Überschriften hervorzuheben. --concorde-secondary-color #913997 Die Sekundärfarbe. Wenn geändert, muss auch --concorde-secondary-color-rgb angepasst werden. --concorde-disabled-color #e0e2ec Farbe für deaktivierte Elemente. --concorde-error-color #cc0005 Fehlerfarbe. Wenn geändert, muss auch --concorde-error-color-rgb angepasst werden. --concorde-outline #74777f Primäre Rahmenfarbe. Wird direkt in mehreren Komponenten verwendet (z. B. Switch, Rating, Radio, Checkbox, Input). --concorde-divider-color #deeaf7 Standardfarbe für Trennlinien. Wird z. B. im Warenkorb verwendet. --concorde-primary-color-rgb 0, 94, 180 RGB-Version der Hauptfarbe. Wird für transparente Varianten genutzt. --concorde-secondary-color-rgb 145, 57, 151 RGB-Version der Sekundärfarbe. Wird für transparente Varianten genutzt. --concorde-error-color-rgb 255, 58, 63 RGB-Version der Fehlerfarbe. Wird für transparente Varianten genutzt.
CSS-Variable Standard Beschreibung --concorde-primary-text #001632 Primäre Schriftfarbe. Wenn geändert, auch --concorde-primary-text-rgb anpassen. --concorde-secondary-text #717171 Sekundäre Schriftfarbe. Wenn geändert, auch --concorde-secondary-text-rgb anpassen. --concorde-disabled-text #43474e Farbe für deaktivierten Text. Wenn geändert, auch --concorde-disabled-text-rgb anpassen. --concorde-disabled-label-text #8c9dad Farbe für Labels von deaktiviertem Text. --concorde-primary-text-rgb 0, 22, 50 RGB-Version der primären Schriftfarbe. Für transparente Varianten. --concorde-secondary-text-rgb 113, 113, 113 RGB-Version der sekundären Schriftfarbe. Für transparente Varianten.
CSS Variable Standard Beschreibung --concorde-default-background #ffffff Hintergrundfarbe der Oberfläche. Wird z. B. im Sticky Footer, Menü, Datepicker usw. verwendet. Wenn geändert, auch --concorde-default-background-rgb anpassen. --concorde-surface-background #ffffff Hintergrundfarbe für Flächen (Surfaces) wie Karten, Modale, Popover. --concorde-secondary-surface #f2f5fa Sekundäre Hintergrundfarbe für Elemente auf Flächen – eine Mischung aus Primary Color und Surface. --concorde-loading-background #e0e0e0 Hintergrundfarbe von Ladeanzeigen. --concorde-neutral-surface #e0e2ec Neutrale Hintergrundfarbe für Navigationen oder Standardelemente wie Switch oder Mobile Stepper. --concorde-default-background-rgb 255, 255, 255 RGB-Version der Standard-Hintergrundfarbe. Wird für transparente Varianten genutzt.
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-font-family "Proxima Nova", Open Sans, Helvetica, Arial, sans-serif Die verwendete Schriftfamilie. Die Schrift muss für die Benutzerreise geladen sein. --concorde-text-3xl 2rem Schriftgröße für 3XL (entspricht z. B. h1). --concorde-text-2xl 1.75rem Schriftgröße für 2XL (z. B. h2). --concorde-text-xl 1.5rem Schriftgröße für XL (z. B. h3). --concorde-text-lg 1.25rem Schriftgröße für L (z. B. h4). --concorde-text-base 1rem Standard-Schriftgröße (z. B. für h5, p). --concorde-text-sm 0.875rem Schriftgröße für S (z. B. h6). --concorde-text-xs 0.75rem Schriftgröße für XS.
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-button-shadow-hover 0 0.5rem 0.5rem -0.4remSchatteneffekt beim Hover-Zustand eines Buttons. --concorde-card-shadow 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 48px rgba(0, 0, 0, 0.08)Schatten für eine hervorgehobene Karte (Card). --concorde-card-shadow-hover 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.16)Schatten beim Hover-Zustand einer hervorgehobenen Karte (Card).
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-spacing 0.25rem Die Standard-Abstandseinheit. --concorde-border-radius 0.25rem Die Standard-Radiusgröße für abgerundete Ecken. --concorde-transition-effect 0.25s ease-in-out Standard-Übergangseffekt für Animationen. --concorde-disabled-opacity 0.38 Standard-Transparenzwert für deaktivierte Zustände. --concorde-input-height 48px Standardhöhe für Eingabefelder.
(Gestaltungselemente der Navigationsleiste, z. B. Hintergrundfarbe oder Logoposition.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-custom-layout-max-width 1256px Maximale Breite der Journey (z. B. Seitenlayout). --concorde-topbar-background var(--concorde-primary-color) Hintergrundfarbe der Navigationsleiste. --concorde-topbar-logo-alignment center Positionierung des Logos in der Navigationsleiste. Optionen: flex-start, center, flex-end.
(Design-Anpassungen für den „Zusammenfassungsblock“, z. B. Hintergrundfarbe.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-summary-block-bg-color rgba(var(--concorde-primary-color-rgb), 0.1) Hintergrundfarbe des „Zusammenfassungsblocks“.
(Gestaltungselemente für Produktlisten und deren Interaktionen, z. B. Rabattfarben.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-cashback-breakdown-border-color rgba(var(--concorde-primary-color-rgb), 0.15) Rahmenfarbe für Cashback-Details. --concorde-coupon-discount-color var(--concorde-error-color) Farbe für Rabatt durch einen Gutschein. --concorde-coupon-cashback-color var(--concorde-secondary-color) Hintergrundfarbe für Cashback durch einen Gutschein. --concorde-product-tile-background-color #ffffff Hintergrundfarbe für Produktkacheln (Tiles). --concorde-product-tile-hover-background-color var(--concorde-product-tile-background-color) Hintergrundfarbe im Hover-Zustand einer Produktkachel. --concorde-product-tile-featured-color #efbf02 Rahmenfarbe für besonders hervorgehobene Produkte. --concorde-product-tile-featured-label-color #ffffff Schriftfarbe für das Label eines hervorgehobenen Produkts.
(Farben, Abstände und Hover-Zustände von Buttons in verschiedenen Varianten.)
CSS-Variable Beschreibung (Deutsch) --concorde-button-label-color Schriftfarbe des Buttons (abhängig vom Button-Typ). --concorde-button-background-color Hintergrundfarbe des Buttons (abhängig vom Button-Typ). --concorde-button-hover-bg-color Hintergrundfarbe des Buttons im Hover-Zustand. --concorde-button-active-bg-color Hintergrundfarbe des Buttons im aktiven Zustand. --concorde-button-gap Abstand zwischen Button-Elementen (z. B. Icon und Text). Standard: var(--concorde-spacing). --concorde-primary-button-background-color Benutzerdefinierte Hintergrundfarbe für den primären Button (z. B. Weiter/Senden). --concorde-primary-button-hover-bg-color Hover-Hintergrundfarbe für den primären Button. --concorde-outlined-button-border-color Rahmenfarbe des umrandeten Button-Typs (z. B. Toggle Group).
(Hintergrund, Schatten und Auszeichnung von Karten-Elementen.)
CSS-Variable Beschreibung (Deutsch) --concorde-card-background-color Hintergrundfarbe der Karte. Standard: var(--concorde-surface-background). --concorde-card-hover-background-color Hintergrundfarbe der Karte im Hover-Zustand. Standard: --concorde-card-background-color. --concorde-card-featured-text Textfarbe der Karte im „Featured“-Zustand. --concorde-card-featured-color Rahmenfarbe der Karte im „Featured“-Zustand. Standard: #efbf02. --concorde-card-featured-label-color Schriftfarbe für das Label einer „Featured“-Karte. Standard: #ffffff.
(Farben von Checkboxen, inkl. Zustände wie „ausgewählt“ oder „Fehler“.)
CSS-Variable Beschreibung (Deutsch) --concorde-checkbox-unchecked-color Farbe des Symbols einer nicht aktivierten Checkbox. Standard: var(--concorde-outline). --concorde-checkbox-error-color Farbe der Checkbox im Fehlerzustand. Standard: var(--concorde-error-color). --concorde-checkbox-label-color Schriftfarbe des Checkbox-Labels. Standard: var(--concorde-primary-text).
(Größe und Animationsgeschwindigkeit von Ladeindikatoren im Kreisformat.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-circular-progress-size 40px Höhe und Breite des kreisförmigen Ladeindikators (in Pixel). --concorde-circular-progress-speed 0.8s Animationsgeschwindigkeit des Ladeindikators (in Sekunden).
(Farben und Gestaltung des Kalenders für Datumsauswahl.)
CSS-Variable Beschreibung (Deutsch) --concorde-datepicker-calendar-bg-color Hintergrundfarbe des Kalenders. Standard: rgba(var(--concorde-default-background-rgb), 1). --concorde-datepicker-day-color Standardfarbe für Tage (1, 2, 3, …). Standard: var(--concorde-secondary-text). --concorde-datepicker-day-name-color Farbe der Tagesnamen (So, Mo, Di, …). Standard: #43474e. --concorde-datepicker-separation-color Farbe des vertikalen Trennstrichs zwischen Monats- und Zeitauswahl. Standard: #c4c6cf. --concorde-datepicker-selected-color Schriftfarbe von ausgewählten Tagen/Zeitoptionen. Standard: #ffffff. --concorde-datepicker-selected-bg-color Hintergrundfarbe für ausgewählte Tage/Zeitoptionen. Standard: var(--concorde-primary-color). --concorde-datepicker-header-navigation-icon-color Farbe der Icons zur Navigation zwischen Monaten/Jahren. --concorde-datepicker-border-radius Radius der abgerundeten Ecken. Standard: min(calc(var(--concorde-border-radius) * 2), 1.25rem)
(Farbe und Dicke von Trennlinien.)
CSS-Variable Beschreibung (Deutsch) --concorde-divider-custom-color Benutzerdefinierte Farbe der Trennlinie. Standard: var(--concorde-divider-color). --concorde-divider-thickness Dicke der Trennlinie. Standard: 1px.
(Farbe von gepunkteten Trennlinien.)
CSS-Variable Beschreibung (Deutsch) --concorde-dotted-line-custom-color Farbe der gepunkteten Linie. Standard: vererbte Farbe (inherited color).
(Farbe, Größe und Zustand von Icons.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-icon-color currentcolor Standardfarbe des Icons (übernimmt die aktuelle Textfarbe). --concorde-icon-size 20px Standardgröße des Icons. --concorde-icon-hover-color var(--concorde-icon-color) Farbe des Icons im Hover-Zustand. --concorde-icon-is-filled – Aktiviert den „gefüllten“ Zustand eines Icons.
(Gestaltung von Eingabefeldern, z. B. Rahmenfarbe, Schriftfarbe, Fehleranzeige.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-input-color var(--concorde-primary-text) Schriftfarbe im Eingabefeld. --concorde-input-background-color transparent Hintergrundfarbe des Eingabefeldes. --concorde-input-border-color var(--concorde-outline) Rahmenfarbe des Eingabefeldes. --concorde-input-error-color var(--concorde-error-color) Rahmen-/Textfarbe im Fehlerzustand. --concorde-input-label-color var(--concorde-secondary-text) Farbe des Labels (Beschriftung) des Eingabefeldes. --concorde-input-border-radius min(var(--concorde-border-radius), 20px) Radius der abgerundeten Ecken des Eingabefeldes.
(Farbe und Höhe von linearen Fortschrittsanzeigen.)
CSS-Variable Standardwert Beschreibung (Deutsch) --concorde-linear-progress-background-color rgba(var(--concorde-primary-color-rgb), 0.18) Hintergrundfarbe der Fortschrittsanzeige. --concorde-linear-progress-height 4px Höhe der Fortschrittsanzeige.
(Farbe von Hyperlinks und deren Hover-Zustände.)
CSS-Variable Beschreibung (Deutsch) --concorde-link-color Farbe des Links (Standardfarbe). --concorde-link-hover-color Farbe des Links im Hover-Zustand. Standard: var(--concorde-link-color).
(Darstellung von Listenelementen, insbesondere bei Interaktionen wie Hover oder Auswahl.)
CSS-Variable Beschreibung (Deutsch) --concorde-list-item-hover-color Textfarbe eines Listenelements im Hover-Zustand (wenn klickbar). --concorde-list-item-hover-background-color Hintergrundfarbe eines Listenelements im Hover-Zustand (wenn klickbar). --concorde-list-item-selected-color Textfarbe eines ausgewählten Listenelements (wenn klickbar). --concorde-list-item-selected-background-color Hintergrundfarbe eines ausgewählten Listenelements (wenn klickbar).
(Farben und Hintergründe von Menüelementen bei Hover und Auswahl.)
CSS-Variable Beschreibung (Deutsch) --concorde-menu-bg-color Hintergrundfarbe des Menüs. Standard: rgba(var(--concorde-default-background-rgb), 1). --concorde-menu-item-hover-color Textfarbe eines Menüeintrags im Hover-Zustand. --concorde-menu-item-hover-bg-color Hintergrundfarbe eines Menüeintrags im Hover-Zustand. Standard: rgba(var(--concorde-primary-text-rgb), 0.12). --concorde-menu-item-selected-color Textfarbe eines ausgewählten Menüeintrags. Standard: var(--concorde-menu-item-hover-color). --concorde-menu-item-selected-bg-color Hintergrundfarbe eines ausgewählten Menüeintrags. Standard: rgba(var(--concorde-primary-text-rgb), 0.12).
(Schrittanzeige für mobile Geräte, inkl. Farben der einzelnen Schritte.)
CSS-Variable Beschreibung (Deutsch) --concorde-mobile-stepper-color Textfarbe im Mobile Stepper. Standard: var(--concorde-primary-text). --concorde-mobile-stepper-background-color Hintergrundfarbe des Steppers. Standard: #ffffff. --concorde-mobile-stepper-step-background-color Hintergrundfarbe eines (inaktiven) Schritts. Standard: #e6eef7. --concorde-mobile-stepper-active-step-background-color Hintergrundfarbe des aktiven Schritts. Standard: var(--concorde-primary-color).
(Innenabstand (Padding) in modalen Dialogfenstern.)
CSS-Variable Beschreibung (Deutsch) --concorde-modal-spacing Innenabstand (Padding) innerhalb eines Modals. Standard: calc(var(--concorde-spacing) * 5).
(Gestaltung von Radiobuttons: Farben bei Auswahl oder Fehler.)
CSS-Variable Beschreibung (Deutsch) --concorde-radio-label-color Textfarbe des Radio-Labels. Standard: var(--concorde-primary-text). --concorde-radio-unchecked-color Farbe des nicht ausgewählten Radiobuttons. Standard: var(--concorde-outline). --concorde-radio-error-color Farbe des Radiobuttons im Fehlerzustand. Standard: var(--concorde-error-color).
(Darstellung von Bewertungselementen, z. B. Sterne – inkl. aktiver und inaktiver Zustände.)
CSS-Variable Beschreibung (Deutsch) --concorde-rating-unchecked-color Farbe der nicht ausgewählten Bewertung (z. B. leerer Stern). Standard: var(--concorde-outline). --concorde-rating-checked-color Farbe der ausgewählten Bewertung und Hover-Zustand. Standard: var(--concorde-primary-color).
(Steuerung von Abständen und Ausrichtung in Layout-Containern.)
CSS-Variable Beschreibung (Deutsch) --concorde-spacing-scale Multiplikator für Abstände. Standard: 1. --concorde-spacing-align-items CSS-Eigenschaft align-items für Layout-Elemente. Standard: flex-start. --concorde-spacing-justify-content CSS-Eigenschaft justify-content (nur für Inline-Variante). Standard: var(--concorde-spacing-align-items).
(Spezifisches Styling für Eingaben mit Pfeil-Buttons zum Hoch-/Runterzählen.)
CSS-Variable Beschreibung (Deutsch) --concorde-stepper-field-error-color Farbe im Fehlerzustand. Standard: var(--concorde-error-color). --concorde-stepper-field-border-color Rahmenfarbe des Eingabefeldes. Standard: var(--concorde-outline). --concorde-text-field-color Textfarbe des Eingabefeldes. Standard: var(--concorde-primary-text). --concorde-text-field-background-color Hintergrundfarbe des Eingabefeldes. Standard: var(--concorde-default-background).
(Gestaltung von Kippschaltern, z. B. Farben bei aktiv/deaktiviert.)
CSS-Variable Beschreibung (Deutsch) --concorde-switch-unchecked-color Farbe des Schalters im deaktivierten Zustand. Standard: var(--concorde-outline). --concorde-switch-unchecked-background-color Hintergrundfarbe im deaktivierten Zustand. Standard: var(--concorde-neutral-surface). --concorde-switch-border-radius Randradius des Schalters. Standard: 9999px.
(Rahmenfarben von Buttons in Gruppen zur Auswahl mehrerer Optionen.)
CSS-Variable Beschreibung (Deutsch) --concorde-toggle-button-border-color Rahmenfarbe der Schaltflächen innerhalb der Toggle Group.
(Standardfarbe für Texte – unabhängig von spezifischen Komponenten.)
CSS-Variable Beschreibung (Deutsch) --concorde-typography-color Standard-Schriftfarbe. Standard: var(--concorde-primary-text).
(Farben für akzeptierte, abgelehnte oder aktive Drag-&-Drop-Datei-Uploads.)
CSS-Variable Beschreibung (Deutsch) --concorde-dropzone-accepted-color Hintergrundfarbe bei einem gültigen (akzeptierten) Drop. --concorde-dropzone-rejected-color Hintergrundfarbe bei einem ungültigen (abgelehnten) Drop. Standard: var(--concorde-error-color). --concorde-dropzone-active-background-color Hintergrundfarbe bei aktivem Drag-&-Drop. Standard: rgba(var(--concorde-primary-color-rgb), 0.18).
