CSS Variables - Bitrix24 UI

Colors

We are still updating this page. Some data may be missing here — we will complete it shortly.

Text

Bitrix24 UI provides Tailwind CSS utility classes for text colors, allowing you to use class names like text-legend or text-description:

DimmedMutedDescriptionLegendLabel

<template>
  <span class="text-dimmed">Dimmed</span>
  <span class="text-muted">Muted</span>
  <span class="text-description">Description</span>
  <span class="text-legend">Legend</span>
  <span class="text-label">Label</span>
</template>

Background

Bitrix24 UI provides Tailwind CSS utility classes for background colors, allowing you to use class names like bg-default or bg-muted:

DefaultMutedElevatedAccented

<template>
  <div class="bg-default">Default</div>
  <div class="bg-muted">Muted</div>
  <div class="bg-elevated">Elevated</div>
  <div class="bg-accented text-dimmed">Accented</div>
</template>

Border

Bitrix24 UI provides Tailwind CSS utility classes for border colors, allowing you to use class names like border-default or border-muted:

DefaultMutedAccented

<template>
  <div class="border border-default">Default</div>
  <div class="border border-muted">Muted</div>
  <div class="border border-accented">Accented</div>
</template>

Radius

We are still updating this page. Some data may be missing here — we will complete it shortly.

Container

Bitrix24 UI provides a --b24ui-container-width CSS variable that controls the maximum width of the Container component.

:root {
  --b24ui-container-width: 90rem; /* 1440px */
}

Header

Bitrix24 UI provides a --b24ui-header-height CSS variable that controls the height of the Header component.

:root {
  --b24ui-header-height: 3.625rem;
}

You can customize this value in your main.css to adjust header height consistently throughout your application:

app/assets/css/main.css

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

:root {
  --b24ui-container-width: 90rem;
}

Chart 2.15+

The Chart component paints its series with six CSS variables, in order. Each one points at an air accent token, so the palette already follows the light, dark, edge-light and edge-dark contexts:

:root {
  --b24ui-chart-1: var(--ui-color-accent-main-primary);
  --b24ui-chart-2: var(--ui-color-accent-main-success);
  --b24ui-chart-3: var(--ui-color-copilot-accent-primary);
  --b24ui-chart-4: var(--ui-color-accent-main-warning);
  --b24ui-chart-5: var(--ui-color-accent-main-alert);
  --b24ui-chart-6: var(--ui-color-collab-accent-primary);
}

You can customize these CSS variables in your main.css file:

app/assets/css/main.css

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

:root {
  --b24ui-chart-2: var(--ui-color-palette-green-50);
}

Body

Bitrix24 UI applies default classes on the <body> element of your app for consistent theming across light, edge-light, edge-dark and dark modes:

body {
  scrollbar-gutter: stable;
  background: var(--air-theme-background);
  @apply antialiased font-(family-name:--ui-font-family-system) text-legend scheme-light dark:scheme-dark edge-light:scheme-light edge-dark:scheme-light
}

Design System

Bitrix24 UI's design system uses Tailwind CSS for simple theming and easy customization.

Components

Learn how to customize Bitrix24 UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.