Variáveis CSS

O Nitro UI usa variáveis CSS como design tokens para uma tematização flexível e consistente, com suporte nativo aos modos claro e escuro.

Cores

O Nitro UI fornece classes utilitárias do Tailwind CSS para cada cor semântica que você definir, permitindo usar nomes de classe como text-error ou bg-success:

PrimarySecondarySuccessInfoWarningError

<template>
  <span class="text-primary">Primary</span>
  <span class="text-secondary">Secondary</span>
  <span class="text-success">Success</span>
  <span class="text-info">Info</span>
  <span class="text-warning">Warning</span>
  <span class="text-error">Error</span>
</template>

Cada classe utilitária usa uma variável CSS para definir sua cor nos modos claro e escuro:

:root {
  --ui-primary: var(--ui-color-primary-500);
  --ui-secondary: var(--ui-color-secondary-500);
  --ui-success: var(--ui-color-success-500);
  --ui-info: var(--ui-color-info-500);
  --ui-warning: var(--ui-color-warning-500);
  --ui-error: var(--ui-color-error-500);
}
Você pode ajustar qual tom cada classe utilitária usa nos modos claro e escuro no seu arquivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-primary: var(--ui-color-primary-700);
}

.dark {
  --ui-primary: var(--ui-color-primary-200);
}
Você não pode usar primary: 'black' na sua configuração porque black não tem múltiplos tons. Para usar preto ou branco sólido como sua cor primária, defina-o diretamente no seu arquivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-primary: black;
}

.dark {
  --ui-primary: white;
}

Texto

O Nitro UI fornece classes utilitárias do Tailwind CSS para cores de texto, permitindo usar nomes de classe como text-dimmed ou text-muted:

DimmedMutedTonedTextHighlightedInverted

<template>
  <span class="text-dimmed">Dimmed</span>
  <span class="text-muted">Muted</span>
  <span class="text-toned">Toned</span>
  <span class="text-default">Text</span>
  <span class="text-highlighted">Highlighted</span>
  <span class="text-inverted bg-inverted">Inverted</span>
</template>

Cada classe utilitária usa uma variável CSS para definir sua cor nos modos claro e escuro:

:root {
  --ui-text-dimmed: var(--ui-color-neutral-400);
  --ui-text-muted: var(--ui-color-neutral-500);
  --ui-text-toned: var(--ui-color-neutral-600);
  --ui-text: var(--ui-color-neutral-700);
  --ui-text-highlighted: var(--ui-color-neutral-900);
  --ui-text-inverted: white;
}
Você pode personalizar essas variáveis CSS no seu arquivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-text: white;
}

Fundo

O Nitro UI fornece classes utilitárias do Tailwind CSS para cores de fundo, permitindo usar nomes de classe como bg-default ou bg-muted:

DefaultMutedElevatedAccentedInverted

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

Cada classe utilitária usa uma variável CSS para definir sua cor nos modos claro e escuro:

:root {
  --ui-bg: white;
  --ui-bg-muted: var(--ui-color-neutral-50);
  --ui-bg-elevated: var(--ui-color-neutral-100);
  --ui-bg-accented: var(--ui-color-neutral-200);
  --ui-bg-inverted: var(--ui-color-neutral-900);
}
Você pode personalizar essas variáveis CSS no seu arquivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
}

.dark {
  --ui-bg: var(--ui-color-neutral-950);
}

Borda

O Nitro UI fornece classes utilitárias do Tailwind CSS para cores de borda, permitindo usar nomes de classe como border-default ou border-muted:

DefaultMutedAccentedInverted

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

Cada classe utilitária usa uma variável CSS para definir sua cor nos modos claro e escuro:

:root {
  --ui-border: var(--ui-color-neutral-200);
  --ui-border-muted: var(--ui-color-neutral-200);
  --ui-border-accented: var(--ui-color-neutral-300);
  --ui-border-inverted: var(--ui-color-neutral-900);
}
Você pode personalizar essas variáveis CSS no seu arquivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-border: var(--ui-color-neutral-100);
}

.dark {
  --ui-border: var(--ui-color-neutral-900);
}

Foco 4.9+

O Nitro UI aplica um contorno focus-visible em cada elemento interativo, tingido com a prop color do componente, ex.: outline-primary/25 quando color="primary" ou outline-inverted/25 quando color="neutral".

Se você prefere uma única cor de contorno em todo o seu app, independentemente da cor do componente, pode adicionar uma regra global no seu arquivo main.css:

@import "tailwindcss";
@import "@nitro/ui";

*,
::before,
::after {
  @apply outline-primary/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --tw-ring-color: var(--ui-primary);
}

A primeira regra tinge o contorno de foco de cada componente; a segunda alinha a recoloração do ring aplicada no foco pelas variantes com uma borda visível, como outline ou subtle, incluindo cards que se destacam quando o link deles está em foco.

Certifique-se de declarar essas regras fora de qualquer @layer para que tenham precedência sobre as cores definidas pelos temas dos componentes. Tenha em mente que a primeira regra também tinge o contorno de foco nativo dos seus próprios elementos, e as variantes que recolorem uma border no foco, como FileUpload ou ContentSurround, continuam seguindo o color do componente.

Raio

O Nitro UI sobrescreve as utilidades rounded-* padrão do Tailwind CSS com um sistema unificado de raio de borda, permitindo usar as utilidades de raio de borda comuns, como rounded-xs ou rounded-2xl:

xssmmdlgxl2xl3xl

<template>
  <div class="rounded-xs">xs</div>
  <div class="rounded-sm">sm</div>
  <div class="rounded-md">md</div>
  <div class="rounded-lg">lg</div>
  <div class="rounded-xl">xl</div>
  <div class="rounded-2xl">2xl</div>
  <div class="rounded-3xl">3xl</div>
</template>

Essas classes utilitárias são calculadas com base em uma variável CSS global --ui-radius, que define o valor de raio base aplicado a todos os componentes para uma aparência consistente.

:root {
  --ui-radius: 0.25rem;
}
Você pode personalizar o valor do raio base no seu arquivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-radius: 0.5rem;
}
Experimente o seletor de tema no header acima para alterar o valor do raio base.

Container

O Nitro UI fornece uma variável CSS --ui-container que controla a largura máxima do componente Container.

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}
Você pode personalizar esse valor no seu arquivo main.css para ajustar as larguras dos containers de forma consistente em toda a sua aplicação:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

@theme {
  --container-8xl: 90rem;
}

:root {
  --ui-container: var(--container-8xl);
}

Cabeçalho

O Nitro UI fornece uma variável CSS --ui-header-height que controla a altura do componente Header.

:root {
  --ui-header-height: 4rem;
}
Você pode personalizar esse valor no seu main.css para ajustar a altura do header de forma consistente em toda a sua aplicação:
app/assets/css/main.css
@import "tailwindcss";
@import "@nitro/ui";

:root {
  --ui-header-height: --spacing(24);
}

Corpo

O Nitro UI aplica classes padrão no elemento <body> do seu app para uma tematização consistente entre os modos claro e escuro:

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

Design System

O design system do Nitro UI usa Tailwind CSS para uma tematização simples e personalização fácil.

Components

Aprenda a personalizar os componentes do Nitro UI com a API do Tailwind Variants para uma estilização avançada, flexível e de fácil manutenção.