Styling

Руководство по стилизации компонентов с помощью нашей системы цветов.

Обзор

Эта библиотека оптимизирована для работы со специфическими цветовыми токенами, которые обеспечивают четкие, контрастные границы и визуальную глубину. Наша система стилизации основана на подходе CSS-переменных shadcn/ui для обеспечения согласованности и удобства поддержки.

Наши компоненты используют непрозрачные (opaque) границы вместо сплошных (solid), чтобы гарантировать четкость и контрастность даже в случаях, когда фону не хватает контраста. Эти границы смешиваются с тенями, создавая улучшенную визуальную глубину.

Хотя использование этой системы цветов не является обязательным, она разработана для достижения оптимальных визуальных результатов. Использование обычных цветовых токенов может привести к несогласованности границ и теней.

Установка

См. раздел Начало работы для установки через CLI. Если вы предпочитаете добавить тему вручную, вставьте следующий код в ваш файл globals.css:

app/globals.css

@theme inline {
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
}

Переменные шрифтов (Font Variables)

Такие компоненты, как Dialog, AlertDialog, Sheet и Empty используют класс font-heading для заголовков. Пресет Oracul DS определяет --font-sans, --font-heading и --font-mono с системными шрифтами в качестве запасных. Чтобы использовать кастомные шрифты, определите эти переменные в вашем layout.tsx с помощью next/font.

Настройка Base UI

Поскольку библиотека построена на Base UI, вам необходимо настроить изоляцию CSS, чтобы портальные компоненты (Dialog, Popover, Select и т.д.) корректно отображались поверх контента страницы.

Изоляция корня приложения

Добавьте isolation: isolate к корневому div-обертке вашего приложения. Это создаст отдельный контекст наложения (stacking context), чтобы портальные компоненты всегда появлялись поверх содержимого страницы без конфликтов z-index.

app/layout.tsx

<body>
  <div className="isolate relative flex min-h-svh flex-col">
    {children}
  </div>
</body>

Совместимость с iOS Safari

Для совместимости с iOS Safari добавьте position: relative к элементу body. Это гарантирует, что оверлеи будут правильно закрывать область просмотра при прокрутке страницы.

На этой странице

Обзор Установка Переменные шрифтов (Font Variables)Настройка Base UI Изоляция корня приложения Совместимость с iOS Safari