Colors
Every color primitive and color-system role with its CSS variable, utility class and value per theme.
On this page
Color primitivesLink to this section
The raw palette. Each shade is a CSS variable and a Tailwind color, so it works with every color utility: bg-theme-600, text-base-1000, border-theme-200. Prefer the color-system roles below in components; they follow the theme.
baseLink to this section
| Shade | Value | CSS variable | Tailwind color |
|---|---|---|---|
0 | #ffffff | --color-base-0 | base-0 |
50 | #fafafa | --color-base-50 | base-50 |
100 | #f5f5f5 | --color-base-100 | base-100 |
200 | #e5e5e5 | --color-base-200 | base-200 |
300 | #d4d4d4 | --color-base-300 | base-300 |
400 | #a3a3a3 | --color-base-400 | base-400 |
500 | #737373 | --color-base-500 | base-500 |
600 | #525252 | --color-base-600 | base-600 |
700 | #404040 | --color-base-700 | base-700 |
800 | #262626 | --color-base-800 | base-800 |
900 | #171717 | --color-base-900 | base-900 |
950 | #0a0a0a | --color-base-950 | base-950 |
1000 | #000000 | --color-base-1000 | base-1000 |
themeLink to this section
| Shade | Value | CSS variable | Tailwind color |
|---|---|---|---|
50 | #eff6ff | --color-theme-50 | theme-50 |
100 | #dbeafe | --color-theme-100 | theme-100 |
200 | #bfdbfe | --color-theme-200 | theme-200 |
300 | #93c5fd | --color-theme-300 | theme-300 |
400 | #60a5fa | --color-theme-400 | theme-400 |
500 | #3b82f6 | --color-theme-500 | theme-500 |
600 | #2563eb | --color-theme-600 | theme-600 |
700 | #1d4ed8 | --color-theme-700 | theme-700 |
800 | #1e40af | --color-theme-800 | theme-800 |
900 | #1e3a8a | --color-theme-900 | theme-900 |
950 | #172554 | --color-theme-950 | theme-950 |
Color systemLink to this section
Semantic roles, one value per theme (default, dark). The first theme is the default; the others apply under [data-theme="<name>"]. Use a role through its CSS variable, for example bg-(--color-foundations-surface-bg) or text-(--color-foundations-text). The typography and layout.bg roles also have their own classes.
foundationsLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
bg | --color-foundations-bg | #ffffff | #0a0a0a |
text | --color-foundations-text | #000000 | #ffffff |
text-muted | --color-foundations-text-muted | #00000040 | #ffffff40 |
decorative | --color-foundations-decorative | #2563eb | #2563eb |
decorative-hover | --color-foundations-decorative-hover | #000000 | #ffffff |
primary-bg | --color-foundations-primary-bg | #2563eb | #2563eb |
primary-text | --color-foundations-primary-text | #ffffff | #ffffff |
primary-bg-hover | --color-foundations-primary-bg-hover | #0a0a0a | #fafafa |
primary-text-hover | --color-foundations-primary-text-hover | #ffffff | #000000 |
surface-bg | --color-foundations-surface-bg | #fafafa | #171717 |
surface-bg-hover | --color-foundations-surface-bg-hover | #f5f5f5 | #171717 |
surface-border | --color-foundations-surface-border | #e5e5e5 | #262626 |
surface-border-hover | --color-foundations-surface-border-hover | #e5e5e5 | #262626 |
surface-border-highlighted | --color-foundations-surface-border-highlighted | #2563eb | #2563eb |
surface-border-highlighted-hover | --color-foundations-surface-border-highlighted-hover | #2563eb | #2563eb |
surface-shadow-highlighted | --color-foundations-surface-shadow-highlighted | #2563eb40 | #2563eb40 |
surface-shadow-highlighted-hover | --color-foundations-surface-shadow-highlighted-hover | #2563eb40 | #2563eb40 |
surface-text | --color-foundations-surface-text | #000000 | #ffffff |
surface-text-hover | --color-foundations-surface-text-hover | #0a0a0a | #fafafa |
overlay-bg | --color-foundations-overlay-bg | #00000080 | #00000080 |
overlay-text | --color-foundations-overlay-text | #ffffff | #ffffff |
line | --color-foundations-line | #1e40af | #60a5fa |
line-muted | --color-foundations-line-muted | #1e40af40 | #60a5fa40 |
destructive | --color-foundations-destructive | #dc2626 | #dc2626 |
typographyLink to this section
| Token | CSS variable | Class | Default | Dark |
|---|---|---|---|---|
label | --color-typography-label | color-label | #000000 | #ffffff |
heading | --color-typography-heading | color-heading | #000000 | #ffffff |
body | --color-typography-body | color-body | #000000 | #ffffff |
linkLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
textDefault | --color-link-text-default | #2563eb | #2563eb |
underlineDefault | --color-link-underline-default | #2563eb | #2563eb |
textHover | --color-link-text-hover | #000000 | #ffffff |
underlineHover | --color-link-underline-hover | #000000 | #ffffff |
layoutLink to this section
| Token | CSS variable | Class | Default | Dark |
|---|---|---|---|---|
bg.main | --color-layout-bg-main | bg-layout-main | #ffffff | #0a0a0a |
bg.alternative | --color-layout-bg-alternative | bg-layout-alternative | #fafafa | #171717 |
headerLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
background | --color-header-background | #ffffff | #0a0a0a |
shadow | --color-header-shadow | #0000001a | #00000040 |
logo.fill | --color-header-logo-fill | #000000 | #ffffff |
navigation.item.normal.text | --color-header-navigation-item-normal-text | #000000 | #ffffff |
navigation.item.normal.icon | --color-header-navigation-item-normal-icon | #000000 | #ffffff |
navigation.item.normal.background | --color-header-navigation-item-normal-background | #00000000 | #00000000 |
navigation.item.normal.border | --color-header-navigation-item-normal-border | #00000000 | #00000000 |
navigation.item.normal.shadow | --color-header-navigation-item-normal-shadow | #00000000 | #00000000 |
navigation.item.hover.text | --color-header-navigation-item-hover-text | #0a0a0a | #fafafa |
navigation.item.hover.icon | --color-header-navigation-item-hover-icon | #0a0a0a | #fafafa |
navigation.item.hover.background | --color-header-navigation-item-hover-background | #f5f5f5 | #171717 |
navigation.item.hover.border | --color-header-navigation-item-hover-border | #00000000 | #00000000 |
navigation.item.hover.shadow | --color-header-navigation-item-hover-shadow | #00000000 | #00000000 |
navigation.item.active.text | --color-header-navigation-item-active-text | #0a0a0a | #fafafa |
navigation.item.active.icon | --color-header-navigation-item-active-icon | #0a0a0a | #fafafa |
navigation.item.active.background | --color-header-navigation-item-active-background | #f5f5f5 | #171717 |
navigation.item.active.border | --color-header-navigation-item-active-border | #00000000 | #00000000 |
navigation.item.active.shadow | --color-header-navigation-item-active-shadow | #00000000 | #00000000 |
navigation.menuToggle.normal.text | --color-header-navigation-menu-toggle-normal-text | #000000 | #ffffff |
navigation.menuToggle.normal.icon | --color-header-navigation-menu-toggle-normal-icon | #000000 | #ffffff |
navigation.menuToggle.normal.background | --color-header-navigation-menu-toggle-normal-background | #00000000 | #00000000 |
navigation.menuToggle.normal.border | --color-header-navigation-menu-toggle-normal-border | #00000000 | #00000000 |
navigation.menuToggle.normal.shadow | --color-header-navigation-menu-toggle-normal-shadow | #00000000 | #00000000 |
navigation.menuToggle.hover.text | --color-header-navigation-menu-toggle-hover-text | #0a0a0a | #fafafa |
navigation.menuToggle.hover.icon | --color-header-navigation-menu-toggle-hover-icon | #0a0a0a | #fafafa |
navigation.menuToggle.hover.background | --color-header-navigation-menu-toggle-hover-background | #f5f5f5 | #171717 |
navigation.menuToggle.hover.border | --color-header-navigation-menu-toggle-hover-border | #00000000 | #00000000 |
navigation.menuToggle.hover.shadow | --color-header-navigation-menu-toggle-hover-shadow | #00000000 | #00000000 |
navigation.menuToggle.active.text | --color-header-navigation-menu-toggle-active-text | #0a0a0a | #fafafa |
navigation.menuToggle.active.icon | --color-header-navigation-menu-toggle-active-icon | #0a0a0a | #fafafa |
navigation.menuToggle.active.background | --color-header-navigation-menu-toggle-active-background | #00000000 | #00000000 |
navigation.menuToggle.active.border | --color-header-navigation-menu-toggle-active-border | #00000000 | #00000000 |
navigation.menuToggle.active.shadow | --color-header-navigation-menu-toggle-active-shadow | #00000000 | #00000000 |
subNavigation.background | --color-header-sub-navigation-background | #ffffff | #0a0a0a |
subNavigation.border | --color-header-sub-navigation-border | #00000000 | #00000000 |
subNavigation.shadow | --color-header-sub-navigation-shadow | #00000026 | #00000026 |
menu.background | --color-header-menu-background | #ffffff | #0a0a0a |
menu.backdropBackground | --color-header-menu-backdrop-background | #ffffff1a | #0000001a |
menu.shadow | --color-header-menu-shadow | #00000040 | #00000040 |
footerLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
logo | --color-footer-logo | #000000 | #ffffff |
text | --color-footer-text | #000000 | #ffffff |
title | --color-footer-title | #000000 | #ffffff |
link | --color-footer-link | #00000040 | #ffffff40 |
linkHover | --color-footer-link-hover | #000000 | #2563eb |
icon | --color-footer-icon | #2563eb | #2563eb |
iconHover | --color-footer-icon-hover | #000000 | #ffffff |
main.background | --color-footer-main-background | #ffffff | #0a0a0a |
bottom.background | --color-footer-bottom-background | #ffffff | #0a0a0a |
simple.background | --color-footer-simple-background | #ffffff | #0a0a0a |
heroLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
simple.text | --color-hero-simple-text | #000000 | #ffffff |
simple.bg | --color-hero-simple-bg | #fafafa | #171717 |
background.text | --color-hero-background-text | #ffffff | #ffffff |
background.overlay | --color-hero-background-overlay | #00000080 | #00000080 |
background.bgFallback | --color-hero-background-bg-fallback | #000000 | #000000 |
feature.text | --color-hero-feature-text | #000000 | #ffffff |
feature.bg | --color-hero-feature-bg | #fafafa | #171717 |
galleryLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
navigation.pagination.text | --color-gallery-navigation-pagination-text | #000000 | #ffffff |
navigation.button.normal.text | --color-gallery-navigation-button-normal-text | #000000 | #ffffff |
navigation.button.normal.icon | --color-gallery-navigation-button-normal-icon | #000000 | #ffffff |
navigation.button.normal.background | --color-gallery-navigation-button-normal-background | #00000000 | #00000000 |
navigation.button.normal.border | --color-gallery-navigation-button-normal-border | #2563eb | #2563eb |
navigation.button.normal.shadow | --color-gallery-navigation-button-normal-shadow | #00000000 | #00000000 |
navigation.button.hover.text | --color-gallery-navigation-button-hover-text | #ffffff | #000000 |
navigation.button.hover.icon | --color-gallery-navigation-button-hover-icon | #ffffff | #000000 |
navigation.button.hover.background | --color-gallery-navigation-button-hover-background | #0a0a0a | #fafafa |
navigation.button.hover.border | --color-gallery-navigation-button-hover-border | #0a0a0a | #fafafa |
navigation.button.hover.shadow | --color-gallery-navigation-button-hover-shadow | #00000000 | #00000000 |
separatorLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
line | --color-separator-line | #1e40af40 | #60a5fa40 |
iconLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
normal.color | --color-icon-normal-color | #2563eb | #2563eb |
normal.hasBackgroundColor | --color-icon-normal-has-background-color | #2563eb | #2563eb |
normal.hasBackgroundIcon | --color-icon-normal-has-background-icon | #ffffff | #ffffff |
normal.hasBackgroundBorder | --color-icon-normal-has-background-border | #00000000 | #00000000 |
normal.hasBackgroundShadow | --color-icon-normal-has-background-shadow | #00000000 | #00000000 |
hover.color | --color-icon-hover-color | #000000 | #ffffff |
hover.hasBackgroundColor | --color-icon-hover-has-background-color | #0a0a0a | #fafafa |
hover.hasBackgroundIcon | --color-icon-hover-has-background-icon | #ffffff | #000000 |
hover.hasBackgroundBorder | --color-icon-hover-has-background-border | #00000000 | #00000000 |
hover.hasBackgroundShadow | --color-icon-hover-has-background-shadow | #00000000 | #00000000 |
listLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
marker | --color-list-marker | #2563eb | #2563eb |
mediaLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
border | --color-media-border | #00000000 | #00000000 |
shadow | --color-media-shadow | #00000000 | #00000000 |
overlay | --color-media-overlay | #00000080 | #00000080 |
icon | --color-media-icon | #ffffff | #ffffff |
carouselLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
wrapper.border | --color-carousel-wrapper-border | #00000000 | #00000000 |
wrapper.pagination.fillDefault | --color-carousel-wrapper-pagination-fill-default | #80808080 | #80808080 |
wrapper.pagination.fillActive | --color-carousel-wrapper-pagination-fill-active | #2563eb | #2563eb |
wrapper.pagination.fillHover | --color-carousel-wrapper-pagination-fill-hover | #000000 | #ffffff |
wrapper.button.normal.fill | --color-carousel-wrapper-button-normal-fill | #2563eb | #2563eb |
wrapper.button.normal.background | --color-carousel-wrapper-button-normal-background | #00000000 | #00000000 |
wrapper.button.normal.border | --color-carousel-wrapper-button-normal-border | #00000000 | #00000000 |
wrapper.button.normal.shadow | --color-carousel-wrapper-button-normal-shadow | #00000000 | #00000000 |
wrapper.button.hover.fill | --color-carousel-wrapper-button-hover-fill | #000000 | #ffffff |
wrapper.button.hover.background | --color-carousel-wrapper-button-hover-background | #00000000 | #00000000 |
wrapper.button.hover.border | --color-carousel-wrapper-button-hover-border | #00000000 | #00000000 |
wrapper.button.hover.shadow | --color-carousel-wrapper-button-hover-shadow | #00000000 | #00000000 |
thumbs.border | --color-carousel-thumbs-border | #00000000 | #00000000 |
thumbs.defaultOpacity | --color-carousel-thumbs-default-opacity | 50 | 50 |
thumbs.activeOpacity | --color-carousel-thumbs-active-opacity | 100 | 100 |
bottom.pagination.text | --color-carousel-bottom-pagination-text | #000000 | #ffffff |
bottom.button.normal.text | --color-carousel-bottom-button-normal-text | #000000 | #ffffff |
bottom.button.normal.icon | --color-carousel-bottom-button-normal-icon | #000000 | #ffffff |
bottom.button.normal.background | --color-carousel-bottom-button-normal-background | #00000000 | #00000000 |
bottom.button.normal.border | --color-carousel-bottom-button-normal-border | #2563eb | #2563eb |
bottom.button.normal.shadow | --color-carousel-bottom-button-normal-shadow | #00000000 | #00000000 |
bottom.button.hover.text | --color-carousel-bottom-button-hover-text | #ffffff | #000000 |
bottom.button.hover.icon | --color-carousel-bottom-button-hover-icon | #ffffff | #000000 |
bottom.button.hover.background | --color-carousel-bottom-button-hover-background | #0a0a0a | #fafafa |
bottom.button.hover.border | --color-carousel-bottom-button-hover-border | #0a0a0a | #fafafa |
bottom.button.hover.shadow | --color-carousel-bottom-button-hover-shadow | #00000000 | #00000000 |
avatarLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
border | --color-avatar-border | #00000000 | #00000000 |
shadow | --color-avatar-shadow | #00000000 | #00000000 |
buttonLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
primary.normal.text | --color-button-primary-normal-text | #ffffff | #ffffff |
primary.normal.icon | --color-button-primary-normal-icon | #ffffff | #ffffff |
primary.normal.background | --color-button-primary-normal-background | #2563eb | #2563eb |
primary.normal.border | --color-button-primary-normal-border | #2563eb | #2563eb |
primary.normal.shadow | --color-button-primary-normal-shadow | #00000000 | #00000000 |
primary.hover.text | --color-button-primary-hover-text | #ffffff | #000000 |
primary.hover.icon | --color-button-primary-hover-icon | #ffffff | #000000 |
primary.hover.background | --color-button-primary-hover-background | #0a0a0a | #fafafa |
primary.hover.border | --color-button-primary-hover-border | #0a0a0a | #fafafa |
primary.hover.shadow | --color-button-primary-hover-shadow | #00000000 | #00000000 |
secondary.normal.text | --color-button-secondary-normal-text | #000000 | #ffffff |
secondary.normal.icon | --color-button-secondary-normal-icon | #000000 | #ffffff |
secondary.normal.background | --color-button-secondary-normal-background | #00000000 | #00000000 |
secondary.normal.border | --color-button-secondary-normal-border | #2563eb | #2563eb |
secondary.normal.shadow | --color-button-secondary-normal-shadow | #00000000 | #00000000 |
secondary.hover.text | --color-button-secondary-hover-text | #ffffff | #000000 |
secondary.hover.icon | --color-button-secondary-hover-icon | #ffffff | #000000 |
secondary.hover.background | --color-button-secondary-hover-background | #0a0a0a | #fafafa |
secondary.hover.border | --color-button-secondary-hover-border | #0a0a0a | #fafafa |
secondary.hover.shadow | --color-button-secondary-hover-shadow | #00000000 | #00000000 |
chipLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
normal.text | --color-chip-normal-text | #000000 | #ffffff |
normal.icon | --color-chip-normal-icon | #000000 | #ffffff |
normal.background | --color-chip-normal-background | #fafafa | #171717 |
normal.border | --color-chip-normal-border | #e5e5e5 | #262626 |
normal.shadow | --color-chip-normal-shadow | #00000000 | #00000000 |
hover.text | --color-chip-hover-text | #0a0a0a | #fafafa |
hover.icon | --color-chip-hover-icon | #0a0a0a | #fafafa |
hover.background | --color-chip-hover-background | #f5f5f5 | #171717 |
hover.border | --color-chip-hover-border | #e5e5e5 | #262626 |
hover.shadow | --color-chip-hover-shadow | #00000000 | #00000000 |
cardLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
default.background | --color-card-default-background | #fafafa | #171717 |
default.border | --color-card-default-border | #e5e5e5 | #262626 |
default.content | --color-card-default-content | #000000 | #ffffff |
default.shadow | --color-card-default-shadow | #00000000 | #00000000 |
default.hoverBackground | --color-card-default-hover-background | #f5f5f5 | #171717 |
default.hoverBorder | --color-card-default-hover-border | #e5e5e5 | #262626 |
default.hoverContent | --color-card-default-hover-content | #0a0a0a | #fafafa |
default.hoverShadow | --color-card-default-hover-shadow | #00000000 | #00000000 |
highlighted.background | --color-card-highlighted-background | #fafafa | #171717 |
highlighted.border | --color-card-highlighted-border | #2563eb | #2563eb |
highlighted.content | --color-card-highlighted-content | #000000 | #ffffff |
highlighted.shadow | --color-card-highlighted-shadow | #2563eb40 | #2563eb40 |
highlighted.hoverBackground | --color-card-highlighted-hover-background | #f5f5f5 | #171717 |
highlighted.hoverBorder | --color-card-highlighted-hover-border | #2563eb | #2563eb |
highlighted.hoverContent | --color-card-highlighted-hover-content | #0a0a0a | #fafafa |
highlighted.hoverShadow | --color-card-highlighted-hover-shadow | #2563eb40 | #2563eb40 |
accordionLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
default.background | --color-accordion-default-background | #fafafa | #171717 |
default.border | --color-accordion-default-border | #e5e5e5 | #262626 |
default.title | --color-accordion-default-title | #000000 | #ffffff |
default.icon | --color-accordion-default-icon | #000000 | #ffffff |
default.content | --color-accordion-default-content | #000000 | #ffffff |
default.shadow | --color-accordion-default-shadow | #00000000 | #00000000 |
default.hoverBackground | --color-accordion-default-hover-background | #f5f5f5 | #171717 |
default.hoverBorder | --color-accordion-default-hover-border | #e5e5e5 | #262626 |
default.hoverTitle | --color-accordion-default-hover-title | #0a0a0a | #fafafa |
default.hoverIcon | --color-accordion-default-hover-icon | #0a0a0a | #fafafa |
default.hoverContent | --color-accordion-default-hover-content | #0a0a0a | #fafafa |
default.hoverShadow | --color-accordion-default-hover-shadow | #00000000 | #00000000 |
quoteLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
background | --color-quote-background | #00000000 | #00000000 |
border | --color-quote-border | #2563eb | #2563eb |
icon | --color-quote-icon | #2563eb | #2563eb |
content | --color-quote-content | #000000 | #ffffff |
primaryLabel | --color-quote-primary-label | #000000 | #ffffff |
secondaryLabel | --color-quote-secondary-label | #000000 | #ffffff |
formLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
label | --color-form-label | #000000 | #ffffff |
labelRequired | --color-form-label-required | #dc2626 | #dc2626 |
description | --color-form-description | #000000 | #ffffff |
invalidMessage | --color-form-invalid-message | #dc2626 | #dc2626 |
inputBlock.default.background | --color-form-input-block-default-background | #ffffff | #0a0a0a |
inputBlock.default.border | --color-form-input-block-default-border | #1e40af40 | #60a5fa40 |
inputBlock.default.text | --color-form-input-block-default-text | #000000 | #ffffff |
inputBlock.default.placeholder | --color-form-input-block-default-placeholder | #00000040 | #ffffff40 |
inputBlock.default.icon | --color-form-input-block-default-icon | #000000 | #ffffff |
inputBlock.default.shadow | --color-form-input-block-default-shadow | #00000000 | #00000000 |
inputBlock.focus.background | --color-form-input-block-focus-background | #ffffff | #0a0a0a |
inputBlock.focus.border | --color-form-input-block-focus-border | #1e40af | #60a5fa |
inputBlock.focus.text | --color-form-input-block-focus-text | #000000 | #ffffff |
inputBlock.focus.placeholder | --color-form-input-block-focus-placeholder | #00000040 | #ffffff40 |
inputBlock.focus.icon | --color-form-input-block-focus-icon | #000000 | #ffffff |
inputBlock.focus.shadow | --color-form-input-block-focus-shadow | #00000000 | #00000000 |
inputBlock.invalid.background | --color-form-input-block-invalid-background | #ffffff | #0a0a0a |
inputBlock.invalid.border | --color-form-input-block-invalid-border | #dc2626 | #dc2626 |
inputBlock.invalid.text | --color-form-input-block-invalid-text | #000000 | #ffffff |
inputBlock.invalid.placeholder | --color-form-input-block-invalid-placeholder | #00000040 | #ffffff40 |
inputBlock.invalid.icon | --color-form-input-block-invalid-icon | #dc2626 | #dc2626 |
inputBlock.invalid.shadow | --color-form-input-block-invalid-shadow | #00000000 | #00000000 |
inputBlock.disabled.opacity | --color-form-input-block-disabled-opacity | 35 | 35 |
inputInline.default.background | --color-form-input-inline-default-background | #ffffff | #0a0a0a |
inputInline.default.border | --color-form-input-inline-default-border | #000000 | #ffffff |
inputInline.default.text | --color-form-input-inline-default-text | #000000 | #ffffff |
inputInline.default.check | --color-form-input-inline-default-check | #ffffff | #0a0a0a |
inputInline.default.marker | --color-form-input-inline-default-marker | #ffffff | #0a0a0a |
inputInline.checked.background | --color-form-input-inline-checked-background | #2563eb | #2563eb |
inputInline.checked.border | --color-form-input-inline-checked-border | #2563eb | #2563eb |
inputInline.checked.text | --color-form-input-inline-checked-text | #000000 | #ffffff |
inputInline.checked.check | --color-form-input-inline-checked-check | #ffffff | #ffffff |
inputInline.checked.marker | --color-form-input-inline-checked-marker | #ffffff | #ffffff |
inputInline.invalid.background | --color-form-input-inline-invalid-background | #ffffff | #0a0a0a |
inputInline.invalid.border | --color-form-input-inline-invalid-border | #dc2626 | #dc2626 |
inputInline.invalid.text | --color-form-input-inline-invalid-text | #000000 | #ffffff |
inputInline.invalid.check | --color-form-input-inline-invalid-check | #ffffff | #0a0a0a |
inputInline.invalid.marker | --color-form-input-inline-invalid-marker | #ffffff | #0a0a0a |
inputInline.disabled.opacity | --color-form-input-inline-disabled-opacity | 35 | 35 |
cookieConsentLink to this section
| Token | CSS variable | Default | Dark |
|---|---|---|---|
surface.background | --color-cookie-consent-surface-background | #fafafa | #171717 |
surface.border | --color-cookie-consent-surface-border | #e5e5e5 | #262626 |
surface.content | --color-cookie-consent-surface-content | #000000 | #ffffff |
surface.contentMuted | --color-cookie-consent-surface-content-muted | #00000040 | #ffffff40 |
surface.shadow | --color-cookie-consent-surface-shadow | #00000000 | #00000000 |
title.text | --color-cookie-consent-title-text | #000000 | #ffffff |
footer.background | --color-cookie-consent-footer-background | #f5f5f5 | #171717 |
footer.border | --color-cookie-consent-footer-border | #00000000 | #00000000 |
footer.content | --color-cookie-consent-footer-content | #000000 | #ffffff |
separator.color | --color-cookie-consent-separator-color | #1e40af40 | #60a5fa40 |
backdrop.background | --color-cookie-consent-backdrop-background | #ffffff1a | #0000001a |
button.primary.normal.text | --color-cookie-consent-button-primary-normal-text | #ffffff | #ffffff |
button.primary.normal.background | --color-cookie-consent-button-primary-normal-background | #2563eb | #2563eb |
button.primary.normal.border | --color-cookie-consent-button-primary-normal-border | #2563eb | #2563eb |
button.primary.hover.text | --color-cookie-consent-button-primary-hover-text | #ffffff | #000000 |
button.primary.hover.background | --color-cookie-consent-button-primary-hover-background | #0a0a0a | #fafafa |
button.primary.hover.border | --color-cookie-consent-button-primary-hover-border | #0a0a0a | #fafafa |
button.secondary.normal.text | --color-cookie-consent-button-secondary-normal-text | #000000 | #ffffff |
button.secondary.normal.background | --color-cookie-consent-button-secondary-normal-background | #00000000 | #00000000 |
button.secondary.normal.border | --color-cookie-consent-button-secondary-normal-border | #2563eb | #2563eb |
button.secondary.hover.text | --color-cookie-consent-button-secondary-hover-text | #ffffff | #000000 |
button.secondary.hover.background | --color-cookie-consent-button-secondary-hover-background | #0a0a0a | #fafafa |
button.secondary.hover.border | --color-cookie-consent-button-secondary-hover-border | #0a0a0a | #fafafa |
link.textDefault | --color-cookie-consent-link-text-default | #2563eb | #2563eb |
link.underlineDefault | --color-cookie-consent-link-underline-default | #2563eb | #2563eb |
link.textHover | --color-cookie-consent-link-text-hover | #000000 | #ffffff |
link.underlineHover | --color-cookie-consent-link-underline-hover | #000000 | #ffffff |
category.background | --color-cookie-consent-category-background | #fafafa | #171717 |
category.border | --color-cookie-consent-category-border | #e5e5e5 | #262626 |
category.title | --color-cookie-consent-category-title | #000000 | #ffffff |
category.icon | --color-cookie-consent-category-icon | #000000 | #ffffff |
category.content | --color-cookie-consent-category-content | #000000 | #ffffff |
category.hoverBackground | --color-cookie-consent-category-hover-background | #f5f5f5 | #171717 |
category.hoverBorder | --color-cookie-consent-category-hover-border | #e5e5e5 | #262626 |
category.hoverTitle | --color-cookie-consent-category-hover-title | #0a0a0a | #fafafa |
category.hoverIcon | --color-cookie-consent-category-hover-icon | #0a0a0a | #fafafa |
toggle.on.background | --color-cookie-consent-toggle-on-background | #2563eb | #2563eb |
toggle.on.knob | --color-cookie-consent-toggle-on-knob | #ffffff | #ffffff |
toggle.off.background | --color-cookie-consent-toggle-off-background | #1e40af | #60a5fa |
toggle.off.knob | --color-cookie-consent-toggle-off-knob | #ffffff | #0a0a0a |
toggle.readonly.background | --color-cookie-consent-toggle-readonly-background | #1e40af40 | #60a5fa40 |
toggle.readonly.knob | --color-cookie-consent-toggle-readonly-knob | #ffffff | #0a0a0a |
closeButton.color | --color-cookie-consent-close-button-color | #2563eb | #2563eb |
closeButton.hoverColor | --color-cookie-consent-close-button-hover-color | #000000 | #ffffff |