Al
Allan Prado
prdev.solutions@gmail.comhttps://portfolio.prdev.com.br/
radix-color-banner
CSS
React
Radix

Radix Colors

Tudo o que você precisa saber

Radix Colors é uma biblioteca de cores cuidadosamente projetada para fornecer escalas de cores acessíveis, harmoniosas e altamente configuráveis para aplicações web. Nesta postagem, vamos explorar como instalar a biblioteca, como utilizá-la em diferentes soluções de estilização e como tirar o máximo proveito das cores que ela oferece para criar interfaces bonitas e funcionais.

Instalação

npm

Você pode instalar o Radix Colors diretamente pelo terminal usando npm, yarn ou pnpm. A versão atual é a 3.0.0.

# com npm
npm install @radix-ui/colors

# com yarn
yarn add @radix-ui/colors

# com pnpm
pnpm add @radix-ui/colors

CDN

Se você deseja começar rapidamente, pode usar os arquivos CDN para prototipação. No entanto, o uso em produção não é recomendado.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray-dark.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue-dark.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green-dark.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red-dark.css" />

Usando Radix Colors

Vanilla CSS

Radix Colors fornece cores empacotadas como arquivos CSS brutos. Você pode importá-los diretamente nos seus arquivos quando usar um empacotador, como Parcel ou Webpack.

@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/red-dark.css";

.button {
  background-color: var(--blue-4);
  color: var(--blue-11);
  border-color: var(--blue-7);
}

.button:hover {
  background-color: var(--blue-5);
  border-color: var(--blue-8);
}

Para o modo escuro, aplique uma classe .dark no <body> ou em um elemento pai.

<body class="dark">
  <button class="button">Button</button>
</body>

styled-components

Para quem usa styled-components, o Radix Colors é extremamente simples de integrar:

import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors";
import styled, { ThemeProvider } from "styled-components";

// Criando tema
const theme = {
  colors: {
    ...gray,
    ...blue,
    ...red,
    ...green
  }
};

// Tema escuro
const darkTheme = {
  colors: {
    ...grayDark,
    ...blueDark,
    ...redDark,
    ...greenDark
  }
};

// Criando o botão com cores dinâmicas
const Button = styled.button`
  background-color: ${props => props.theme.colors.blue4};
  color: ${props => props.theme.colors.blue11};
  border-color: ${props => props.theme.colors.blue7};
  &:hover {
    background-color: ${props => props.theme.colors.blue5};
    border-color: ${props => props.theme.colors.blue8};
  }
`;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Radix Colors</Button>
    </ThemeProvider>
  );
}

vanilla-extract

Caso esteja utilizando vanilla-extract, o processo também é bem direto.

import { gray, blue, red, green, grayDark, blueDark, redDark, greenDark } from "@radix-ui/colors";
import { createTheme, style } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
  colors: {
    ...gray,
    ...blue,
    ...red,
    ...green
  }
});

export const darkTheme = createTheme(vars, {
  colors: {
    ...grayDark,
    ...blueDark,
    ...redDark,
    ...greenDark
  }
});

// Estilos do botão
export const buttonStyle = style({
  backgroundColor: vars.colors.blue4,
  color: vars.colors.blue11,
  borderColor: vars.colors.blue7,
  ":hover": {
    backgroundColor: vars.colors.blue5,
    borderColor: vars.colors.blue8
  }
});

Criação de Alias Semânticos

Uma prática comum ao usar Radix Colors é criar alias semânticos para cores, como primary, secondary, success, danger, etc. Isso é especialmente útil quando você deseja criar temas.

@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/yellow.css";
@import "@radix-ui/colors/red.css";

:root {
  --accent-1: var(--blue-1);
  --accent-2: var(--blue-2);
  --success-1: var(--green-1);
  --success-2: var(--green-2);
  --warning-1: var(--yellow-1);
  --warning-2: var(--yellow-2);
  --danger-1: var(--red-1);
  --danger-2: var(--red-2);
}

Alias de Uso

Cada etapa nas escalas de Radix Colors foi projetada para um caso de uso específico. Aqui estão alguns exemplos comuns:

  • Etapas 1 e 2: para fundo de aplicativos.
  • Etapas 3, 4 e 5: fundos de componentes (normal, hover, ativo).
  • Etapas 6 a 8: bordas.
  • Etapas 9 e 10: fundos sólidos.
  • Etapas 11 e 12: textos.

Por exemplo, ao estilizar componentes interativos como botões, você pode usar --blue-9 para o fundo e --blue-11 para o texto.

Conclusão

O Radix Colors é uma ferramenta poderosa para desenvolvedores que desejam criar UIs com cores consistentes e acessíveis. Ele oferece flexibilidade ao trabalhar com escalas de cores, permitindo a criação de temas claros e escuros, e pode ser integrado a diversas soluções de estilização, como styled-components, vanilla-extract e CSS puro. Use-o para melhorar a estética e a usabilidade do seu projeto.

Por último, lembre-se de explorar os alias semânticos para criar temas intuitivos e fáceis de manter em sua base de código!