# Concorde Design tokens: CSS variables Reference of Concorde design tokens: the CSS variables for colors, typography, shadows, layout and blocks that style epilot Journeys built with the open-source Concorde library. Concorde is epilot's open-source component library for Journeys. [[GitHub](https://github.com/epilot-dev/concorde-elements)] ## Concorde Global Tokens ### Main Colors | CSS Variable | Default | Description | | -------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--concorde-primary-color` | `#005eb4` | The main primary color. If modified, update `--concorde-primary-color-rgb` also. | | `--concorde-accent-color` | `#005eb4` | The accent/heading color. Used in BlockHeading, StepHeader, and other heading elements. Falls back to `--concorde-primary-color`. Configurable via Design Builder → Typography → Heading Color. | | `--concorde-secondary-color` | `#913997` | The main secondary color. If modified, update `--concorde-secondary-color-rgb` also. | | `--concorde-disabled-color` | `#e0e2ec` | The main disabled color. | | `--concorde-error-color` | `#cc0005` | The main error color. If modified, update `--concorde-error-color-rgb` also. | | `--concorde-outline` | `#74777f` | The main color used for borders. Used directly in some Concorde components (Switch’s, Rating, Radio, Checkbox default color, Swipeable Drawer’s handle, Input default border color). | | `--concorde-divider-color` | `#deeaf7` | The main color used for dividers. Used directly in some Concorde components (Shopping cart). | | `--concorde-primary-color-rgb` | `0, 94, 180` | The rgb tuple version of `--concorde-primary-color`. Used to create transparent variations of the main primary color. | | `--concorde-secondary-color-rgb` | `145, 57, 151` | The rgb tuple version of `--concorde-secondary-color`. Used to create transparent variations of the main secondary color. | | `--concorde-error-color-rgb` | `255, 58, 63` | The rgb tuple version of `--concorde-error-color`. Used to create transparent variations of the main error color. | | `--concorde-link-color` | | Link text color. Configurable via Design Builder Typography section. | | `--concorde-link-hover-color` | | Link hover text color. Falls back to `--concorde-link-color`. | ### Text Colors | CSS Variable | Default | Description | | -------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------ | | `--concorde-primary-text` | `#001632` | The primary text color. If modified, update `--concorde-primary-text-rgb` also. | | `--concorde-secondary-text` | `#717171` | The secondary text color. If modified, update `--concorde-secondary-text-rgb` also. | | `--concorde-disabled-text` | `#43474e` | The disabled text color. If modified, update `--concorde-disabled-text-rgb` also. | | `--concorde-disabled-label-text` | `#8c9dad` | The color used for disabled text. | | `--concorde-primary-text-rgb` | `0, 22, 50` | The rgb tuple version of `--concorde-primary-text`. Used to create transparent variations of the primary text color. | | `--concorde-secondary-text-rgb` | `113, 113, 113` | The rgb tuple version of `--concorde-secondary-text`. Used to create transparent variations of the secondary text color. | ### Background Colors | CSS Variable | Default | Description | | ----------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `--concorde-default-background` | `#ffffff` | The main background color. If modified, update `--concorde-default-background-rgb` also. | | `--concorde-surface-background` | `#ffffff` | The background color used for surfaces. Used in Layout & Blocks (Desktop Navigation Stepper, PV Rooftop Navigator, Placement on Card view, etc.). | | `--concorde-secondary-surface` | `#f2f5fa` | The secondary background color used for elements on top of surfaces. A blend between the primary color and the surface background color. | | `--concorde-loading-background` | `#e0e0e0` | The background color of the loaders. | | `--concorde-neutral-surface` | `#e0e2ec` | The neutral surface background. Used in Layout & Blocks (Desktop Navigation Stepper, PV Rooftop Navigator). | | `--concorde-default-background-rgb` | `255, 255, 255` | The rgb tuple version of `--concorde-default-background`. Used to create transparent variations of the default background color. | | `--concorde-disabled-background` | `#e6eef7` | The disabled background color used to for the Mobile Stepper only. | ### Typography | CSS Variable | Default | Description | | ------------------------ | --------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | `--concorde-font-family` | `"Proxima Nova", Open Sans, Helvetica, Arial, sans-serif` | The font family used. Note that the font must be loaded on the journey for this to work. | | `--concorde-text-3xl` | `2rem` | The 3xl font size (h1). | | `--concorde-text-2xl` | `1.75rem` | The 2xl font size (h2). | | `--concorde-text-xl` | `1.5rem` | The xl font size (h3). | | `--concorde-text-lg` | `1.25rem` | The lg font size (h4). | | `--concorde-text-base` | `1rem` | The default text font size (h5, p). | | `--concorde-text-sm` | `0.875rem` | The sm font size (h6). | | `--concorde-text-xs` | `0.75rem` | The xs font size. | ### Shadows | CSS Variable | Default | Description | | -------------------------------- | ------------------------------------------------------------- | ----------------------------------------------- | | `--concorde-button-shadow-hover` | `0 0.5rem 0.5rem -0.4rem` | The box shadow of the button hover state | | `--concorde-card-shadow` | `0 0 1px rgba(0, 0, 0, 0.12), 0 8px 48px rgba(0, 0, 0, 0.08)` | The box shadow of the elevated card | | `--concorde-card-shadow-hover` | `0 0 1px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.16)` | The box shadow of the elevated card hover state | ### Others | CSS Variable | Default | Description | | ------------------------------ | ------------------- | -------------------------------------------- | | `--concorde-spacing` | `0.25rem` | The default single spacing unit | | `--concorde-border-radius` | `0.25rem` | The default border radius | | `--concorde-transition-effect` | `0.25s ease-in-out` | The default transition property | | `--concorde-disabled-opacity` | `0.38` | The default opacity used for disabled states | | `--concorde-input-height` | `48px` | The default input height for regular inputs | ### Dark Mode The following tokens become active when dark mode is enabled. Each token has a dark mode variant with the suffix `-dark`. Dark variants are auto-generated via OKLCH lightness inversion — text colors become light, backgrounds become dark, and brand/border colors are adjusted for contrast. #### Brand & Semantic Colors (Dark Mode) | CSS Variable | Description | | --------------------------------------- | ------------------------------------------------------- | | `--concorde-primary-color-dark` | Dark mode variant of `--concorde-primary-color` | | `--concorde-accent-color-dark` | Dark mode variant of `--concorde-accent-color` | | `--concorde-secondary-color-dark` | Dark mode variant of `--concorde-secondary-color` | | `--concorde-disabled-color-dark` | Dark mode variant of `--concorde-disabled-color` | | `--concorde-error-color-dark` | Dark mode variant of `--concorde-error-color` | | `--concorde-outline-dark` | Dark mode variant of `--concorde-outline` | | `--concorde-divider-color-dark` | Dark mode variant of `--concorde-divider-color` | | `--concorde-coupon-discount-color-dark` | Dark mode variant of `--concorde-coupon-discount-color` | | `--concorde-coupon-cashback-color-dark` | Dark mode variant of `--concorde-coupon-cashback-color` | #### Text Colors (Dark Mode) | CSS Variable | Description | | --------------------------------------------------- | ------------------------------------------------------------------- | | `--concorde-primary-text-dark` | Dark mode variant of `--concorde-primary-text` | | `--concorde-secondary-text-dark` | Dark mode variant of `--concorde-secondary-text` | | `--concorde-disabled-text-dark` | Dark mode variant of `--concorde-disabled-text` | | `--concorde-disabled-label-text-dark` | Dark mode variant of `--concorde-disabled-label-text` | | `--concorde-button-default-text-dark` | Dark mode variant of `--concorde-button-default-text` | | `--concorde-link-color-dark` | Dark mode variant of `--concorde-link-color` | | `--concorde-link-hover-color-dark` | Dark mode variant of `--concorde-link-hover-color` | | `--concorde-input-color-dark` | Dark mode variant of `--concorde-input-color` | | `--concorde-input-label-color-dark` | Dark mode variant of `--concorde-input-label-color` | | `--concorde-primary-button-text-color-dark` | Dark mode variant of `--concorde-primary-button-text-color` | | `--concorde-primary-button-hover-text-color-dark` | Dark mode variant of `--concorde-primary-button-hover-text-color` | | `--concorde-outlined-button-text-color-dark` | Dark mode variant of `--concorde-outlined-button-text-color` | | `--concorde-outlined-button-hover-text-color-dark` | Dark mode variant of `--concorde-outlined-button-hover-text-color` | | `--concorde-ghost-button-text-color-dark` | Dark mode variant of `--concorde-ghost-button-text-color` | | `--concorde-ghost-button-hover-text-color-dark` | Dark mode variant of `--concorde-ghost-button-hover-text-color` | | `--concorde-toggle-button-selected-text-color-dark` | Dark mode variant of `--concorde-toggle-button-selected-text-color` | | `--concorde-toggle-button-hover-text-color-dark` | Dark mode variant of `--concorde-toggle-button-hover-text-color` | | `--concorde-menu-item-hover-color-dark` | Dark mode variant of `--concorde-menu-item-hover-color` | | `--concorde-menu-item-selected-color-dark` | Dark mode variant of `--concorde-menu-item-selected-color` | | `--concorde-checkbox-label-color-dark` | Dark mode variant of `--concorde-checkbox-label-color` | | `--concorde-radio-label-color-dark` | Dark mode variant of `--concorde-radio-label-color` | | `--concorde-datepicker-selected-color-dark` | Dark mode variant of `--concorde-datepicker-selected-color` | | `--concorde-chip-text-color-dark` | Dark mode variant of `--concorde-chip-text-color` | | `--concorde-chip-hover-text-color-dark` | Dark mode variant of `--concorde-chip-hover-text-color` | #### Border & Control Colors (Dark Mode) | CSS Variable | Description | | ---------------------------------------------- | -------------------------------------------------------------- | | `--concorde-input-border-color-dark` | Dark mode variant of `--concorde-input-border-color` | | `--concorde-toggle-button-border-color-dark` | Dark mode variant of `--concorde-toggle-button-border-color` | | `--concorde-outlined-button-border-color-dark` | Dark mode variant of `--concorde-outlined-button-border-color` | | `--concorde-card-border-color-dark` | Dark mode variant of `--concorde-card-border-color` | | `--concorde-switch-unchecked-color-dark` | Dark mode variant of `--concorde-switch-unchecked-color` | | `--concorde-checkbox-unchecked-color-dark` | Dark mode variant of `--concorde-checkbox-unchecked-color` | | `--concorde-radio-unchecked-color-dark` | Dark mode variant of `--concorde-radio-unchecked-color` | #### Background Colors (Dark Mode) | CSS Variable | Description | | --------------------------------------------------- | ------------------------------------------------------------------- | | `--concorde-default-background-dark` | Dark mode variant of `--concorde-default-background` | | `--concorde-topbar-background-dark` | Dark mode variant of `--concorde-topbar-background` | | `--concorde-surface-background-dark` | Dark mode variant of `--concorde-surface-background` | | `--concorde-neutral-surface-dark` | Dark mode variant of `--concorde-neutral-surface` | | `--concorde-loading-background-dark` | Dark mode variant of `--concorde-loading-background` | | `--concorde-disabled-background-dark` | Dark mode variant of `--concorde-disabled-background` | | `--concorde-product-tile-background-color-dark` | Dark mode variant of `--concorde-product-tile-background-color` | | `--concorde-skeleton-bg-from-dark` | Dark mode variant of `--concorde-skeleton-bg-from` | | `--concorde-skeleton-bg-to-dark` | Dark mode variant of `--concorde-skeleton-bg-to` | | `--concorde-card-default-background-dark` | Dark mode variant of `--concorde-card-default-background` | | `--concorde-input-background-color-dark` | Dark mode variant of `--concorde-input-background-color` | | `--concorde-primary-button-background-color-dark` | Dark mode variant of `--concorde-primary-button-background-color` | | `--concorde-primary-button-hover-bg-color-dark` | Dark mode variant of `--concorde-primary-button-hover-bg-color` | | `--concorde-outlined-button-hover-bg-color-dark` | Dark mode variant of `--concorde-outlined-button-hover-bg-color` | | `--concorde-ghost-button-background-color-dark` | Dark mode variant of `--concorde-ghost-button-background-color` | | `--concorde-ghost-button-hover-bg-color-dark` | Dark mode variant of `--concorde-ghost-button-hover-bg-color` | | `--concorde-card-background-color-dark` | Dark mode variant of `--concorde-card-background-color` | | `--concorde-card-hover-background-color-dark` | Dark mode variant of `--concorde-card-hover-background-color` | | `--concorde-summary-block-bg-color-dark` | Dark mode variant of `--concorde-summary-block-bg-color` | | `--concorde-toggle-button-selected-bg-color-dark` | Dark mode variant of `--concorde-toggle-button-selected-bg-color` | | `--concorde-toggle-button-hover-bg-color-dark` | Dark mode variant of `--concorde-toggle-button-hover-bg-color` | | `--concorde-menu-item-hover-bg-color-dark` | Dark mode variant of `--concorde-menu-item-hover-bg-color` | | `--concorde-menu-item-selected-bg-color-dark` | Dark mode variant of `--concorde-menu-item-selected-bg-color` | | `--concorde-switch-unchecked-background-color-dark` | Dark mode variant of `--concorde-switch-unchecked-background-color` | | `--concorde-datepicker-selected-bg-color-dark` | Dark mode variant of `--concorde-datepicker-selected-bg-color` | | `--concorde-chip-background-color-dark` | Dark mode variant of `--concorde-chip-background-color` | | `--concorde-chip-hover-background-color-dark` | Dark mode variant of `--concorde-chip-hover-background-color` | #### RGB Colors (Dark Mode) | CSS Variable | Description | | ---------------------------------------- | -------------------------------------------------------- | | `--concorde-primary-color-rgb-dark` | Dark mode variant of `--concorde-primary-color-rgb` | | `--concorde-secondary-color-rgb-dark` | Dark mode variant of `--concorde-secondary-color-rgb` | | `--concorde-error-color-rgb-dark` | Dark mode variant of `--concorde-error-color-rgb` | | `--concorde-default-background-rgb-dark` | Dark mode variant of `--concorde-default-background-rgb` | | `--concorde-primary-text-rgb-dark` | Dark mode variant of `--concorde-primary-text-rgb` | | `--concorde-secondary-text-rgb-dark` | Dark mode variant of `--concorde-secondary-text-rgb` | --- ## Concorde Layout Tokens ### Layout and Navbar | CSS Variable | Default | Description | | -------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--concorde-custom-layout-max-width` | `1256px` | The maximum width of the journey. | | `--concorde-two-columns-content-width` | `calc(7 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Content section. Ensure that together with the `--concorde-two-columns-sidebar-width` variable, the total width of the Two Column Layout is 100%. | | `--concorde-two-columns-sidebar-width` | `calc(5 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Sidebar section. Ensure that together with the `--concorde-two-columns-content-width` variable, the total width of the Two Column Layout is 100%. | | `--concorde-topbar-background` | `var(--concorde-primary-color)` | The background color of the navigation bar. | | `--concorde-topbar-height` | `48px` | The minimum height of the navigation bar. | | `--concorde-topbar-logo-alignment` | `center` | Controls the logo/content alignment in the top bar. Values: `flex-start`, `center`, `flex-end`. | | `--concorde-logo-size` | `24px` | The maximum height of the logo in the navigation bar (16–100px). | --- ## Concorde Block Tokens ### Summary Block | CSS Variable | Default | Description | | ----------------------------------- | ---------------------------------------------- | ------------------------------------------ | | `--concorde-summary-block-bg-color` | `rgba(var(--concorde-primary-color-rgb), 0.1)` | The background color of the summary block. | ### Products Block | CSS Variable | Default | Description | | ------------------------------------------------ | ----------------------------------------------- | ---------------------------------------------------------- | | `--concorde-cashback-breakdown-border-color` | `rgba(var(--concorde-primary-color-rgb),0.15)` | The border color of the cashback breakdown. | | `--concorde-coupon-discount-color` | `var(--concorde-error-color)` | The coupon discount color. | | `--concorde-coupon-cashback-color` | `var(--concorde-secondary-color)` | The background color of the coupon cashback. | | `--concorde-product-tile-background-color` | `#ffffff` | The default background color of the product tiles. | | `--concorde-product-tile-hover-background-color` | `var(--concorde-product-tile-background-color)` | The background color of the hover state of product tiles. | | `--product-concorde-tile-featured-color` | `#efbf02` | The default border color of the featured product tile. | | `--product-concorde-tile-featured-label-color` | `#ffffff` | The default label text color of the featured product tile. | --- ## Concorde Components Tokens ### Autocomplete Refer to Input, Icon, Button & Menu tokens. ### Badge None ### Button | CSS Variable | Expected Type | Description | Default | | --------------------------------------------- | ------------- | ----------------------------------------------------------------------------- | ------------------------------------- | | `--concorde-button-label-color` | `string` | The label color of the button | Depends on Button variant | | `--concorde-button-default-text` | `string` | The default text color for primary buttons | `#ffffff` | | `--concorde-button-background-color` | `string` | The background color of the button | Depends on Button variant | | `--concorde-button-hover-bg-color` | `string` | The background color of the hover state of the button | | | `--concorde-button-active-bg-color` | `string` | The background color of the active state of the button | | | `--concorde-button-gap` | `string` | The gap between the button elements | Defaults to `var(--concorde-spacing)` | | `--concorde-button-border-radius` | `string` | The border radius of all buttons | `var(--concorde-border-radius)` | | `--concorde-button-height` | `string` | The height of buttons | | | `--concorde-primary-button-background-color` | `string` | The custom background color of the Primary Button (e.g., Next/Submit buttons) | | | `--concorde-primary-button-text-color` | `string` | The text color of the Primary Button | `var(--concorde-button-default-text)` | | `--concorde-primary-button-hover-bg-color` | `string` | The custom background color of the hover state of the Primary Button | | | `--concorde-primary-button-hover-text-color` | `string` | The text color of the Primary Button hover state | Same as primary text color | | `--concorde-outlined-button-border-color` | `string` | The border color of the outlined button variant | `var(--concorde-primary-color)` | | `--concorde-outlined-button-text-color` | `string` | The text color of the outlined button variant | `var(--concorde-primary-color)` | | `--concorde-outlined-button-hover-bg-color` | `string` | The background color of the outlined button hover state | | | `--concorde-outlined-button-hover-text-color` | `string` | The text color of the outlined button hover state | Same as outlined text color | | `--concorde-ghost-button-background-color` | `string` | The background color of the ghost button | `transparent` | | `--concorde-ghost-button-text-color` | `string` | The text color of the ghost button | `var(--concorde-primary-color)` | | `--concorde-ghost-button-hover-bg-color` | `string` | The background color of the ghost button hover state | | | `--concorde-ghost-button-hover-text-color` | `string` | The text color of the ghost button hover state | Same as ghost text color | ### Card The Card component supports three variants — `shadow` (elevated, default), `outlined` (1px border, no shadow), and `bare` (internal: no shadow, border, or background; used by `BlockContent` for non-card blocks). The active variant is set via `theme.variants.card` (Design Builder → Components → Card → Variant) or per-instance via the `variant` prop. Only `shadow` and `outlined` are exposed in the Design Builder UI and the API. | CSS Variable | Expected Type | Description | Default | | ---------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | | `--concorde-card-background-color` | `string` | The background color of the card | `var(--concorde-surface-background)` | | `--concorde-card-hover-background-color` | `string` | The background color of the card in hover state | `var(--concorde-card-background-color)` | | `--concorde-card-custom-shadow` | `string` | Override for the card's box-shadow. Set programmatically via `card_shadow` design token; not exposed in Design Builder | `var(--concorde-card-shadow)` | | `--concorde-card-border-color` | `string` | The border color of the outlined card variant. Configurable via Design Builder → Components → Card → Border Color | `var(--concorde-outline)` | ### Checkbox | CSS Variable | Expected Type | Description | Default | | ------------------------------------- | ------------- | -------------------------------------------- | ------------------------------ | | `--concorde-checkbox-unchecked-color` | `string` | The color of the unchecked checkbox icon | `var(--concorde-outline)` | | `--concorde-checkbox-error-color` | `string` | The color of the checkbox in its error state | `var(--concorde-error-color)` | | `--concorde-checkbox-label-color` | `string` | The color of the checkbox label | `var(--concorde-primary-text)` | ### Chip | CSS Variable | Expected Type | Description | Default | | ---------------------------------------- | ------------- | -------------------------------------- | -------------------------------- | | `--concorde-chip-background-color` | `string` | The background color of the chip | `#f7f7f7` | | `--concorde-chip-hover-background-color` | `string` | The hover background color of the chip | Same as chip background | | `--concorde-chip-text-color` | `string` | The text color of the chip | `var(--concorde-secondary-text)` | | `--concorde-chip-hover-text-color` | `string` | The hover text color of the chip | Same as chip text color | | `--concorde-chip-shadow` | `string` | The box shadow of the chip | | ### Circular Progress | CSS Variable | Expected Type | Description | Default | | ------------------------------------ | ------------- | --------------------------------------------- | ------- | | `--concorde-circular-progress-size` | `string` | The height and width of the circular progress | `40px` | | `--concorde-circular-progress-speed` | `string` | The speed of the progress | `0.8s` | ### DatePicker Refer also to Input, Icon, & Icon Button tokens. | CSS Variable | Expected Type | Description | Default | | ---------------------------------------------------- | ------------- | ---------------------------------------------------------------------- | ------------------------------------------------------- | | `--concorde-datepicker-calendar-bg-color` | `string` | The background color of the Datepicker calendar | `rgba(var(--concorde-default-background-rgb), 1)` | | `--concorde-datepicker-day-color` | `string` | The default color of the Datepicker day (1, 2, 3, etc.) | `var(--concorde-secondary-text)` | | `--concorde-datepicker-day-name-color` | `string` | The color of the Datepicker day name (Su, M, Tu, etc.) | `#43474e` | | `--concorde-datepicker-separation-color` | `string` | The color of the vertical divider between Month Select and Time Select | `#c4c6cf` | | `--concorde-datepicker-selected-color` | `string` | The color of selected day and time options | `#ffffff` | | `--concorde-datepicker-selected-bg-color` | `string` | The background color of the selected day and time options | `var(--concorde-primary-color)` | | `--concorde-datepicker-header-navigation-icon-color` | `string` | The color of the month select and year select icons | | | `--concorde-datepicker-border-radius` | `string` | The border radius of the Datepicker | `min(calc(var(--concorde-border-radius) * 2), 1.25rem)` | ### Divider | CSS Variable | Expected Type | Description | Default | | --------------------------------- | ------------- | ---------------------------- | ------------------------------- | | `--concorde-divider-custom-color` | `string` | The custom divider color | `var(--concorde-divider-color)` | | `--concorde-divider-thickness` | `string` | The thickness of the divider | `1px` | ### DottedLine | CSS Variable | Expected Type | Description | Default | | ------------------------------------- | ------------- | ---------------------------- | --------------- | | `--concorde-dotted-line-custom-color` | `string` | The color of the dotted line | Inherited color | ### DropdownX Refer also to Input, Icon, Button, Icon Button & Menu tokens. | CSS Variable | Expected Type | Description | Default | | -------------------------------- | ------------- | ----------------------- | ------- | | `--concorde-dropdown-menu-width` | `string` | The dropdown menu width | | ### Expand Icon Refer to Icon tokens. ### Iban Input Refer to Input & Spacing tokens. ### Icon | CSS Variable | Expected Type | Description | Default | | ----------------------------- | ------------- | ----------------------------- | ---------------------------- | | `--concorde-icon-color` | `string` | The color of the icon | `currentcolor` | | `--concorde-icon-size` | `string` | The font size of the icon | `20px` | | `--concorde-icon-hover-color` | `string` | The hover state color | `var(--concorde-icon-color)` | | `--concorde-icon-is-filled` | `string` | Enables the filled icon state | | ### Icon Button Refer to Icon & Button tokens. ### Image None ### Image Stepper Refer to Button & Mobile Stepper tokens. ### Input | CSS Variable | Expected Type | Description | Default | | ----------------------------------- | ------------- | ----------------------------------- | ------------------------------------------ | | `--concorde-input-color` | `string` | The color of the input text | `var(--concorde-primary-text)` | | `--concorde-input-background-color` | `string` | Background color of the input field | `transparent` | | `--concorde-input-border-color` | `string` | Border color of the input field | `var(--concorde-outline)` | | `--concorde-input-error-color` | `string` | Error color of the input | `var(--concorde-error-color)` | | `--concorde-input-label-color` | `string` | Label text color | `var(--concorde-secondary-text)` | | `--concorde-input-border-radius` | `string` | Border radius | `min(var(--concorde-border-radius), 20px)` | ### Linear Progress | CSS Variable | Expected Type | Description | Default | | --------------------------------------------- | ------------- | -------------------------------- | ----------------------------------------------- | | `--concorde-linear-progress-background-color` | `string` | Background color of progress bar | `rgba(var(--concorde-primary-color-rgb), 0.18)` | | `--concorde-linear-progress-height` | `string` | Height of the progress bar | `4px` | ### Link | CSS Variable | Expected Type | Description | Default | | ----------------------------- | ------------- | ----------------------- | ---------------------------- | | `--concorde-link-color` | `string` | Color of the link | | | `--concorde-link-hover-color` | `string` | Hover color of the link | `var(--concorde-link-color)` | ### List | CSS Variable | Expected Type | Description | Default | | ------------------------------------------------ | ------------- | ------------------------------------------- | ------- | | `--concorde-list-item-hover-color` | `string` | Hover color for clickable list item | | | `--concorde-list-item-hover-background-color` | `string` | Hover background for clickable list item | | | `--concorde-list-item-selected-color` | `string` | Selected color for clickable list item | | | `--concorde-list-item-selected-background-color` | `string` | Selected background for clickable list item | | ### Menu | CSS Variable | Expected Type | Description | Default | | ---------------------------------------- | ------------- | -------------------------------- | ------------------------------------------------- | | `--concorde-menu-bg-color` | `string` | Background color of menu | `rgba(var(--concorde-default-background-rgb), 1)` | | `--concorde-menu-item-hover-color` | `string` | Hover color of menu item | | | `--concorde-menu-item-hover-bg-color` | `string` | Hover background of menu item | `rgba(var(--concorde-primary-text-rgb), 0.12)` | | `--concorde-menu-item-selected-color` | `string` | Selected color of menu item | `var(--concorde-menu-item-hover-color)` | | `--concorde-menu-item-selected-bg-color` | `string` | Selected background of menu item | `rgba(var(--concorde-primary-text-rgb), 0.12)` | ### Mobile Stepper Refer also to Button tokens. | CSS Variable | Expected Type | Description | Default | | -------------------------------------------------------- | ------------- | ---------------------------------- | ------------------------------- | | `--concorde-mobile-stepper-color` | `string` | Text color of mobile stepper | `var(--concorde-primary-text)` | | `--concorde-mobile-stepper-background-color` | `string` | Background color of mobile stepper | `#ffffff` | | `--concorde-mobile-stepper-step-background-color` | `string` | Step indicator background color | `#e6eef7` | | `--concorde-mobile-stepper-active-step-background-color` | `string` | Active step background color | `var(--concorde-primary-color)` | ### Modal | CSS Variable | Expected Type | Description | Default | | -------------------------- | ------------- | ---------------- | ----------------------------------- | | `--concorde-modal-spacing` | `string` | Spacing in modal | `calc(var(--concorde-spacing) * 5)` | ### Popover None ### Radio | CSS Variable | Expected Type | Description | Default | | ---------------------------------- | ------------- | ----------------------------------- | ------------------------------ | | `--concorde-radio-label-color` | `string` | The color of the radio label | `var(--concorde-primary-text)` | | `--concorde-radio-unchecked-color` | `string` | The unchecked color of a radio | `var(--concorde-outline)` | | `--concorde-radio-error-color` | `string` | The color of a radio in error state | `var(--concorde-error-color)` | ### Radio Group Refer also to Radio tokens. | CSS Variable | Expected Type | Description | Default | | ------------------------------ | ------------- | --------------------------------------- | ------- | | `--concorde-radio-group-scale` | `number` | The spacing multiplier of a radio group | `4` | ### Rating Refer also to Icon Button & Tooltip tokens. | CSS Variable | Expected Type | Description | Default | | ----------------------------------- | ------------- | ----------------------------------------------------------------------- | ------------------------------- | | `--concorde-rating-unchecked-color` | `string` | The unchecked color of the rating | `var(--concorde-outline)` | | `--concorde-rating-checked-color` | `string` | The checked color of the rating and hover color of the unchecked rating | `var(--concorde-primary-color)` | ### Spacing Variants: Inset, Inline & Stack | CSS Variable | Expected Type | Description | Default | | ------------------------------------ | ------------- | ------------------------------------------------------- | ------------------------------------- | | `--concorde-spacing-scale` | `number` | The spacing multiplier | `1` | | `--concorde-spacing-align-items` | `string` | The CSS align-items property of the spacing element | `flex-start` | | `--concorde-spacing-justify-content` | `string` | The CSS justify-content property of the spacing element | `var(--concorde-spacing-align-items)` | ### Stepper Input Refer also to Icon Button tokens. | CSS Variable | Expected Type | Description | Default | | ---------------------------------------- | ------------- | ---------------------------------- | ------------------------------------ | | `--concorde-stepper-field-error-color` | `string` | The error state color of the input | `var(--concorde-error-color)` | | `--concorde-stepper-field-border-color` | `string` | The border color of the input | `var(--concorde-outline)` | | `--concorde-text-field-color` | `string` | The color of the input | `var(--concorde-primary-text)` | | `--concorde-text-field-background-color` | `string` | The background color of the input | `var(--concorde-default-background)` | ### Swiperable Drawer None ### Switch | CSS Variable | Expected Type | Description | Default | | ---------------------------------------------- | ------------- | -------------------------------------------- | --------------------------------- | | `--concorde-switch-unchecked-color` | `string` | The color of the unchecked switch | `var(--concorde-outline)` | | `--concorde-switch-unchecked-background-color` | `string` | The background color of the unchecked switch | `var(--concorde-neutral-surface)` | | `--concorde-switch-border-radius` | `string` | The border radius of the switch | `9999px` | ### Tab Refer also to Icon tokens. | CSS Variable | Expected Type | Description | Default | | ---------------------------------------- | ------------- | ------------------------------------------- | --------------------------------- | | `--concorde-tab-button-color` | `string` | The color of the tab button | `var(--concorde-primary-color)` | | `--concorde-tab-button-hover-bg-color` | `string` | The hover background color of tab button | `9999px` | | `-concorde-tab-button-selected-bg-color` | `string` | The selected background color of tab button | `var(--concorde-neutral-surface)` | ### Textarea Refer to Input tokens. ### Toggle Button Refer also to Button tokens. Toggle buttons are used in Single Choice, Multiple Choice, and formal Toggle Group components. | CSS Variable | Expected Type | Description | Default | | ---------------------------------------------- | ------------- | -------------------------------------------------- | --------------------------------- | | `--concorde-toggle-button-selected-bg-color` | `string` | The background color of the selected toggle button | Inherits from primary button bg | | `--concorde-toggle-button-selected-text-color` | `string` | The text color of the selected toggle button | Inherits from primary button text | | `--concorde-toggle-button-hover-bg-color` | `string` | The hover background color of toggle buttons | Inherits from button hover bg | | `--concorde-toggle-button-hover-text-color` | `string` | The hover text color of toggle buttons | Same as selected text color | ### Toggle Group Refer also to Spacing, Typography & Toggle Button tokens. | CSS Variable | Expected Type | Description | Default | | --------------------------------------- | ------------- | -------------------------------------------------------------------------------------------- | ------- | | `--concorde-toggle-button-border-color` | `string` | The custom border color of the toggle group wrapper (not used for standalone toggle buttons) | | ### Tooltip None ### Typography | CSS Variable | Expected Type | Description | Default | | ----------------------------- | ------------- | --------------------- | ------------------------------ | | `--concorde-typography-color` | `string` | The color of the text | `var(--concorde-primary-text)` | ### Upload Zone | CSS Variable | Expected Type | Description | Default | | --------------------------------------------- | ------------- | ---------------------------------------- | ----------------------------------------------- | | `--concorde-dropzone-accepted-color` | `string` | The background color of an accepted drop | | | `--concorde-dropzone-rejected-color` | `string` | The background color of a rejected drop | `var(--concorde-error-color)` | | `--concorde-dropzone-active-background-color` | `string` | The background color of an active drop | `rgba(var(--concorde-primary-color-rgb), 0.18)` |