gal-design-system v1.0.4

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

Métodos

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

Palette

Color

String com a cor em formato hexadecimal

Typography

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

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