Concorde Design tokens: CSS-Variablen
Inhaltsverzeichnis
In dieser Datei findest du alle wichtigen Farben und Komponenten.
Hauptfarben
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. |
Concorde Global Tokens – Textfarben
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. |
Concorde Global Tokens – Hintergrundfarben
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. |
Concorde Global Tokens – Typografie
| 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. |
Concorde Global Tokens – Schatten
| CSS-Variable | Standardwert | Beschreibung (Deutsch) |
| --concorde-button-shadow-hover | 0 0.5rem 0.5rem -0.4rem |
Schatteneffekt 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). |
Concorde Global Tokens – Weitere Variablen
| 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. |
Concorde Layout Tokens – Navbar
(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. |
Concorde Block Tokens – Summary Block
(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“. |
Concorde Block Tokens – Products Block
(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. |
| --product-concorde-tile-featured-color | #efbf02 | Rahmenfarbe für besonders hervorgehobene Produkte. |
| --product-concorde-tile-featured-label-color | #ffffff | Schriftfarbe für das Label eines hervorgehobenen Produkts. |
Concorde Component Tokens – Button
(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). |
Concorde Component Tokens – Card
(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. |
Concorde Component Tokens – Checkbox
(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). |
Concorde Component Tokens – Circular Progress
(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). |
Concorde Component Tokens – DatePicker
(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)
|
Concorde Component Tokens – Divider
(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. |
Concorde Component Tokens – DottedLine
(Farbe von gepunkteten Trennlinien.)
| CSS-Variable | Beschreibung (Deutsch) |
| --concorde-dotted-line-custom-color | Farbe der gepunkteten Linie. Standard: vererbte Farbe (inherited color). |
Concorde Component Tokens – Icon
(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. |
Concorde Component Tokens – Input
(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. |
Concorde Component Tokens – Linear Progress
(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. |
Concorde Component Tokens – Link
(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). |
Concorde Component Tokens – List
(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). |
Concorde Component Tokens – Menu
(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). |
Concorde Component Tokens – Mobile Stepper
(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). |
Concorde Component Tokens – Modal
(Innenabstand (Padding) in modalen Dialogfenstern.)
| CSS-Variable | Beschreibung (Deutsch) |
| --concorde-modal-spacing | Innenabstand (Padding) innerhalb eines Modals. Standard: calc(var(--concorde-spacing) * 5). |
Concorde Component Tokens – Radio
(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). |
Concorde Component Tokens – Rating
(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). |
Concorde Component Tokens – Spacing
(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). |
Concorde Component Tokens – Stepper Input
(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). |
Concorde Component Tokens – Switch
(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. |
Concorde Component Tokens – Toggle Group
(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. |
Concorde Component Tokens – Typography
(Standardfarbe für Texte – unabhängig von spezifischen Komponenten.)
| CSS-Variable | Beschreibung (Deutsch) |
| --concorde-typography-color | Standard-Schriftfarbe. Standard: var(--concorde-primary-text). |
Concorde Component Tokens – Upload Zone
(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). |