Personalização

Para personalizar o design system, siga os passos abaixo.

Para ver os valores de todos os tokens, consulte a seção Tokens.

Valores dos tokens

No seu arquivo globals.css, você pode alterar os valores dos tokens. Por exemplo:

globals.css

:root {
--color-background: #12161e;
--color-foreground: #ffffff;
--color-ring: #212631;
--color-gray-stroke: #181d25;
--color-surface-card: #181d25;
...
}

Cores de parceiros

Para trocar as cores principais de parceiros na sua aplicação, crie um arquivo ThemeColors.tsx no projeto e adicione o código abaixo:

ThemeColors.tsx

type PartnerColorKey =
| "--primary-100"
| "--primary-90"
| "--primary-70"
| "--primary-50"
| "--primary-30"
| "--primary-20"
| "--primary-10"
| "--primary-black"
| "--secondary-100"
| "--secondary-90"
| "--secondary-70"
| "--secondary-50"
| "--secondary-30"
| "--secondary-20"
| "--secondary-10"
| "--secondary-black";
 
interface ThemeColorsProps {
colors?: Record<PartnerColorKey, string>;
}
 
export function ThemeColors({ colors }: ThemeColorsProps) {
let styleContent: string | undefined;
 
if (colors) {
  styleContent = `
    :root {
      --color-primary: ${colors["--primary-100"]};
      --color-primary-darken-1: ${colors["--primary-black"]};
      --color-primary-darken-2: ${colors["--primary-black"]};
      --color-primary-80: ${colors["--primary-90"]};
      --color-primary-48: ${colors["--primary-70"]};
      --color-primary-24: ${colors["--primary-50"]};
      --color-primary-16: ${colors["--primary-30"]};
      --color-primary-8: ${colors["--primary-20"]};
      --color-primary-4: ${colors["--primary-10"]};
      --color-secondary: ${colors["--secondary-100"]};
      --color-secondary-darken-1: ${colors["--secondary-black"]};
      --color-secondary-darken-2: ${colors["--secondary-black"]};
      --color-secondary-80: ${colors["--secondary-90"]};
      --color-secondary-48: ${colors["--secondary-70"]};
      --color-secondary-24: ${colors["--secondary-50"]};
      --color-secondary-16: ${colors["--secondary-30"]};
      --color-secondary-8: ${colors["--secondary-20"]};
      --color-secondary-4: ${colors["--secondary-10"]};
    }
  `;
}
 
if (!styleContent) return null;
 
return <style dangerouslySetInnerHTML={{ __html: styleContent }} />;
}