- [Table of contents](#table-of-contents) - [Gal Design System](#gal-design-system) - [Como adicionar ao projeto](#como-adicionar-ao-projeto) - [Adicionar à um novo projeto](#adicionar-à-um-novo-projeto) - [Atualizar submodule dentro do projeto](#at
npm install gal-design-systempush com submodules. Então tome cuidado! Trate seu repositório normalmente, não é necessário fazer nenhuma mudança no seu fluxo de desenvolvimento.
git submodule. Logo ele será copiado para uma pasta dentro do projeto, mas não será enviado ao fazer o push.
submodule deve ser adicionado sempre dentro do diretório: /src/submodules.
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';
``