Table of contents

• Table of contents
• Gal Design System
• Como adicionar ao projeto
  • Adicionar à um novo projeto
  • Atualizar submodule dentro do projeto
  • Clonar um projeto com submodules
• Como utilizar o Gal Design System
  • API do tema
    • Como importar
    • O ThemeBuilder
      • Propriedades
      • Métodos
        • getContrastTextColor
  • O esquema do tema
    • Theme
    • Palette
    • Color
    • Typography
• Fontes
  • Importar arquivos de fontes
  • Fontes disponíveis:
• Faltou alguma coisa?

Gal Design System

Sistema de design criado para projetos Gal.

Ele foi criado com o objetivo de facilitar o compartilhamento das cores, fontes, icones e logos originais partindo sempre de uma mesma fonte.

• Esse repositório NÃO DEVE ser clonado dentro de outro projeto, pois ele pode sofrer alterações e talvez seja necessário atualiza-lo.

• NÃO DÊ PUSH nesse repositório (submodule)! Não existe a funcionalidade para bloquear o push com submodules. Então tome cuidado! Trate seu repositório normalmente, não é necessário fazer nenhuma mudança no seu fluxo de desenvolvimento.

Como adicionar ao projeto

O repositório foi criado para ser adicionado como um git submodule. Logo ele será copiado para uma pasta dentro do projeto, mas não será enviado ao fazer o push.

Com o objetivo de padronizar todos os projetos esse submodule deve ser adicionado sempre dentro do diretório: /src/submodules.

Adicionar à um novo projeto

Para adicionar esse submodule à um novo projeto utilize o código abaixo:

git submodule add https://github.com/galsalao/design-system.git src/submodules/design-system
git config -f .gitmodules submodule.src/submodules/design-system.branch main

Adicione o submodule no yarn workspaces:

package.json

{
	...

	"private": true,
	"workspaces": [
		"src/submodules/design-system"
	],

	...
}

Instale as dependências que podem estar faltando:

yarn install

Você vai perceber que o caminho src/submodules/design-system foi criado com todo o conteúdo desse repositório, porém ele será ignorado pelo git. Outros arquivos de configuração também foram criados, não é necessário alterar nenhuma informação adicional.

Atualizar submodule dentro do projeto

Para baixar a versão mais atualizada do submodule utilize o código abaixo:

git submodule update --remote

Isso fara o update do submodule caso tenha sido feito alguma modificação no repositório.

Clonar um projeto com submodules

Caso você esteja clonando um projeto com submodules você precisa seguir esses passos:

git clone https://github.com/galsalao/labook.git
git submodule init
git submodule update

Como utilizar o Gal Design System

O repositório conta com o paleta de cores e as fontes, incluindo os arquivos .woff2.

API do tema

Como importar

Para utilizar foi construido uma simples API para isolar o tema. Por padrão o tema já está construído com mode light:

import { lightThemeBuilder } from 'src/submodules/design-system/src';

const lightTheme = lightThemeBuilder.build();

export default function Page() {
    return (
        <Provider theme={lightTheme}>
            <App />
        </Provider>
    );
}

A variável também pode ser importada diretamente sem utilizar uma instancia do ThemeBuilder:

import { lightTheme } from 'src/submodules/design-system/src';

export default function Page() {
    return (
        <Provider theme={lightTheme}>
            <App />
        </Provider>
    );
}

É possível também utilizar a classe ThemeBuilder para construir um novo tema:

import { ThemeBuilder } from 'src/submodules/design-system/src';

const newThemeBuilder = new ThemeBuilder('light'); // light theme selected
const newTheme = newThemeBuilder.build();

export default function Page() {
    return (
        <Provider theme={newTheme}>
            <App />
        </Provider>
    );
}

O ThemeBuilder

Propriedades

| Campo | Tipo | Descrição | | ----- | --------- | -------------------------------------------- | | mode | ThemeMode | mode da paleta de cores (por padrão é light) |

Métodos

| Campo | Retorno | Descrição | | --------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | | build | Theme | Gera um tema. | | buildPalette | Palette | Gera um esquema de cores. | | buildTypography | Typography | Gera um esquema de tipografias. | | getContrastTextColor | string | Retornar uma cor (hexadecimal) para texto, com contraste para cor enviada |

Nenhum dos métodos de build têm argumentos.

getContrastTextColor

Essa função será útil para retornar uma cor de constraste com a cor enviada nos argumentos:

import { ThemeBuilder } from 'src/submodules/design-system/src';

const newThemeBuilder = new ThemeBuilder('light'); // light theme selected
const newTheme = newThemeBuilder.build();

const bgColor = '#f00';
const constrastTextColor = newThemeBuilder.getConstrastTextColor(bgColor);

export default function Component({ label }) {
    return (
        <div style={{ backgroundColor: bgColor }}>
            <span style={{ color: constrastTextColor }}>{label}</span>
        </div>
    );
}

Também é possível alterar o constrastRatio. Quanto maior o valor, maior será o contraste que será exigido. Padrão 4.5;

import { ThemeBuilder } from 'src/submodules/design-system/src';

const newThemeBuilder = new ThemeBuilder('light'); // light theme selected
const newTheme = newThemeBuilder.build();

const bgColor = '#f00';
const constrastRatio = 7;
const constrastTextColor = newThemeBuilder.getConstrastTextColor(bgColor, constrastRatio);

export default function Component({ label }) {
    return (
        <div style={{ backgroundColor: bgColor }}>
            <span style={{ color: constrastTextColor }}>{label}</span>
        </div>
    );
}

O esquema do tema

O tema é um json e o esquema é esse abaixo

Theme

| Campo | Tipo | Descrição | | ---------- | ------------------------- | -------------------------- | | pelette | Palette | Esquema de paleta de cores | | typography | Typography | Esquema de fontes |

Palette

| Campo | Tipo | Descrição | | ---------- | --------------- | -------------- | | background | Color | Esquema de cor | | primary | Color | Esquema de cor | | secondary | Color | Esquema de cor | | text | Color | Esquema de cor |

Color

String com a cor em formato hexadecimal

| Campo | Tipo | | ------- | ------ | | default | string | | dark | string | | light | string |

Typography

String com o nome da fonte. Deve ser utilizada para criar a font-family com @font-face no css

| Campo | Tipo | | ------------- | ------ | | air | string | | airItalic | string | | black | string | | blackItalic | string | | bold | string | | boldItalic | string | | light | string | | lightItalic | string | | medium | string | | mediumItalic | string | | regular | string | | regularItalic | string | | thin | string | | thinItalic | string |

Fontes

Dentro do repositório também estão incluídas as fontes no formato woff2.

Importar arquivos de fontes

Você pode importa-las diretamente no projeto:

import { AeonikRegular, AeonikBold } from 'src/submodules/design-system/src/fonts';

Ou também importar diretamente o arquivo .woff2

import AeonikRegular from 'src/submodules/design-system/src/assets/fonts/AeonikRegular.woff2';

Fontes disponíveis:

• AeonikAir
• AeonikAirItalic
• AeonikBlack
• AeonikBlackItalic
• AeonikBold
• AeonikBoldItalic
• AeonikLight
• AeonikLightItalic
• AeonikMedium
• AeonikMediumItalic
• AeonikRegular
• AeonikRegularItalic
• AeonikThin
• AeonikThinItalic

Faltou alguma coisa?

O conteúdo dentro do repositório deve atender todos os casos de uso de design. Caso sinta falta de algo podemos incluir :)