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:

`json
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

$3

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

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

const lightTheme = lightThemeBuilder.build();

export default function Page() {
return (



);
}
`

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

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

export default function Page() {
return (



);
}
`

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

`jsx
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 (



);
}
`

$3

#### 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:

`jsx
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 (

{label}

);
}
`

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

`jsx
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 (

{label}

);
}
`

O esquema do tema

O tema é um json e o esquema é esse abaixo

$3

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

$3

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

$3

String com a cor em formato hexadecimal

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

$3

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:

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

Ou também importar diretamente o arquivo .woff2

`ts
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 :)