Estilizando o FireCMS

O FireCMS permite personalizar a aparência do seu painel de administração. Você pode personalizar o tema, cores e tipografia para combinar com a sua marca.

O FireCMS usa tailwindcss para estilização. O FireCMS UI fornece um preset padrão que pode ser estendido ou completamente substituído.

Personalizando o tema

Seu arquivo tailwind.config.js padrão deve ficar assim:

import fireCMSConfig from "@firecms/ui/tailwind.config.js";

export default {
    presets: [fireCMSConfig],
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
    ]
};

Você pode verificar o arquivo original tailwind.config.js no pacote @firecms/ui.

Você pode estender o tema padrão adicionando suas personalizações, incluindo todos os recursos suportados do tailwindcss.

Personalizando cores

Cores primária e secundária

O FireCMS UI usa uma cor primária e uma cor secundária. Você pode personalizar essas cores no seu arquivo index.css:

@import "@firecms/ui/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-primary: #0070F4;
    --color-secondary: #FF5B79;
}

body {
    @apply w-full min-h-screen bg-surface-50 dark:bg-surface-900 flex flex-col items-center justify-center;
}

Esses são os valores padrão, mas você pode alterá-los para combinar com a sua marca.

Assim como na seção anterior, fique à vontade para dar uma olhada no arquivo original index.css no pacote @firecms/ui.

Personalizando cores na configuração tailwind

Se você precisar de uma personalização de cores mais complexa, pode modificar o arquivo tailwind.config.js para sobrescrever a cor padrão usada pelo FireCMS.

O FireCMS define cores para todas as superfícies (cinza claro por padrão), acentos de superfície (cinza azulado por padrão), cores de tipografia (primária, secundária e desabilitada) bem como as cores do campo (background, hover, etc.).

Todas essas cores podem ser sobrescritas no arquivo tailwind.config.js. Este é um exemplo de arquivo de configuração que sobrescreve as cores padrão:

import fireCMSConfig from "@firecms/ui/tailwind.config.js";

export default {
    presets: [fireCMSConfig],
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {
            colors: {
                "primary": "var(--color-primary)",
                "secondary": "var(--color-secondary)",
                "field": {
                    "disabled": "rgb(224 224 226)",
                    "disabled-dark": "rgb(35 35 37)"
                },
                "text": {
                    "primary": "rgba(0, 0, 0, 0.87)",
                    "secondary": "rgba(0, 0, 0, 0.55)",
                    "disabled": "rgba(0, 0, 0, 0.38)",
                    "primary-dark": "#ffffff",
                    "secondary-dark": "rgba(255, 255, 255, 0.60)",
                    "disabled-dark": "rgba(255, 255, 255, 0.48)"
                },
                "surface": {
                    "50": "#f8f8fc",
                    "100": "#E7E7EB",
                    "200": "#CFCFD6",
                    "300": "#B7B7BF",
                    "400": "#A0A0A9",
                    "500": "#87878F",
                    "600": "#6B6B74",
                    "700": "#454552",
                    "800": "#292934",
                    "900": "#18181C",
                    "950": "#101013"
                },
                "surface-accent": {
                    "50": "#f8fafc",
                    "100": "#f1f5f9",
                    "200": "#e2e8f0",
                    "300": "#cbd5e1",
                    "400": "#94a3b8",
                    "500": "#64748b",
                    "600": "#475569",
                    "700": "#334155",
                    "800": "#1e293b",
                    "900": "#0f172a",
                    "950": "#020617"
                }
            }
        }
    }
};

Personalizando tipografia

O FireCMS usa a fonte Rubik por padrão, tanto para cabeçalhos quanto para corpo do texto. Também usa a fonte JetBrains Mono para blocos de código.

Adicionando novas fontes

Se você quiser adicionar uma nova fonte, pode instalá-la usando npm ou yarn.

Por exemplo, para adicionar a fonte Noto Serif:

npm install @fontsource/noto-serif

ou

yarn add @fontsource/noto-serif

e importe-a no seu arquivo App.tsx:

import "@fontsource/noto-serif";

No preset tailwind do FireCMS UI, definimos 3 famílias de fontes diferentes: font-headers, font-sans e font-mono.

Você pode sobrescrever essas famílias de fontes no seu arquivo tailwind.config.js. Digamos que você queira usar Noto Serif para cabeçalhos e Roboto para o restante do texto:

import fireCMSConfig from "@firecms/ui/tailwind.config.js";

export default {
    presets: [fireCMSConfig],
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
    ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "Roboto",
          "Helvetica",
          "Arial",
          "sans-serif"
        ],
        headers: [
          "Noto Serif",
          "Roboto",
          "Helvetica",
          "Arial",
          "sans-serif"
        ],
        mono: [
          "JetBrains Mono",
          "Space Mono",
          "Lucida Console",
          "monospace"
        ]
      }
    }
  }
};

Personalizando estilos de tipografia

Cada estilo de tipografia é definido no index.css e pode ser personalizado. Esses são os estilos padrão, mas você pode alterá-los para combinar com a sua marca. A diretiva @apply é uma funcionalidade do tailwindcss que permite aplicar um conjunto de utilitários a uma classe.

Sinta-se à vontade para adicionar qualquer uma destas classes ao seu arquivo index.css para sobrescrever os estilos padrão:

.typography-h1 {
    @apply text-6xl font-headers font-light;
}

.typography-h2 {
    @apply text-5xl font-headers font-light;
}

.typography-h3 {
    @apply text-4xl font-headers font-normal;
}

.typography-h4 {
    @apply text-3xl font-headers font-normal;
}

.typography-h5 {
    @apply text-2xl font-headers font-normal;
}

.typography-h6 {
    @apply text-xl font-headers font-medium;
}

.typography-subtitle1 {
    @apply text-lg font-headers font-medium;
}

.typography-subtitle2 {
    @apply text-base font-headers font-medium;
}

.typography-body1 {
}

.typography-body2 {
    @apply text-sm;
}

.typography-caption {
    @apply text-xs;
}

.typography-label {
    @apply text-sm font-medium;
}

.typography-button {
    @apply text-sm font-semibold uppercase;
}

Faltou alguma personalização?

Se você precisar personalizar algum outro aspecto do FireCMS, por favor nos avise.