Freud DS Core

Escala e consistência em todos os produtos Zen!

Sobre o Freud

Neurologista e psiquiatra criador da psicanálise. Seus estudos serviram como base pra a evolução da psicologia.

Do mesmo modo, nosso Design System tem como base garantir a evolução dos produtos Zenklub.

Através do Freud DS queremos propagar pelo mundo a importância de criar produtos acessíveis e consistentes.

Projeto @freud-ds/core-support

Biblioteca que auxilia na composição dos componentes e interfaces como ícones, marcas, grids e utilities.

Ao abrir o arquivo config.json você vai encontrar 3 plataformas definidas, css, scss e react-native. Cada plataforma definida transforma os arquivos na pasta tokens em variáveis de acordo com a plataforma e formado configurado.

Para mais informações consulte a documentação do Amazon Style Dictionary

Exemplos de output

CSS

<!-- variables.css -->
:root {

  --brand-color-pure: #6732D1;
  --brand-color-01: #E1D6F6;
  --brand-color-02: #A484E3;

  --border-radius-none: 0;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
}

SCSS

  // _variables.scss
  $color-base-gray-light: #cccccc;
  $color-base-gray-medium: #999999;
  $color-base-gray-dark: #111111;
  $color-base-red: #ff0000;
  $color-base-green: #00ff00;
  $color-font-base: #ff0000;
  $color-font-secondary: #00ff00;
  $color-font-tertiary: #cccccc;
  $size-font-small: 0.75rem;
  $size-font-medium: 1rem;
  $size-font-large: 2rem;
  $size-font-base: 1rem;

REACT NATIVE

  // variables.js
  export const brandColorPure = "#6732D1";
  export const brandColor01 = "#E1D6F6";
  export const brandColor02 = "#A484E3";

  export const opacityLevel1 = 0.04;
  export const opacityLevel2 = 0.08;
  export const opacityLevel3 = 0.16;

Estrutura da lib compilada

├── README.md
├── assets/
│   ├── brand/
│   ├── icon/
│   ├── emoji/
│   ├── fonts/
├── style/
│   ├── react-native/
│      ├── variables.js
│   ├── css/
│      ├── variables.css
│   ├── scss/
│      ├── _variables.scss
│      ├── grid.scss

Como instalar o Freud core em seu projeto Angular

1. Primeiro instale a biblioteca via npm:

npm i @freud-ds/core-support

2. Importe as variáveis via scss para o seu arquivo de estilo que você for precisar dos tokens (Opção 1):

@import '@freud-ds/core-support/dist/style/scss/_variables.scss';
@import '@freud-ds/core-support/dist/style/scss/grid.scss';

=> Exemplo de uso:

background-color: $brand-color-01;

2. Ou Importe as variáveis root para o seu arquivo de estilo principal (Opção 2):

@import '@freud-ds/core-support/dist/style/css/_variables.css';

=> Exemplo de uso:

background-color: var(--brand-color-01);

2. Ou Importe as variáveis no arquivo angular.json (Opção 3):

No array de styles adicione os seguintes estilos

"node_modules/@freud-ds/core-support/dist/style/css/variables.css"

"node_modules/@freud-ds/core-support/dist/style/scss/grid.scss"

=> Exemplo de uso:

background-color: var(--brand-color-01);

// angular.json

{
  ...
  "projects": {
    ...
    "architect": {
      ...
      "build": {
        ...
        "options": {
          ...
          "styles": [...] <== PASTE HERE
        }
      }
    }
  }
}

3. Adicione o seguinte caminho para a pasta de ativos em seu arquivo angular.json para permitir o uso dos icones e emojis:

  {
    "glob": "**/*",
    "input": "node_modules/@freud-ds/core-support/dist/assets",
    "output": "./assets/@freud-ds/"
  }

// angular.json

{
  ...
  "projects": {
    ...
    "architect": {
      ...
      "build": {
        ...
        "options": {
          ...
          "assets": [...] <== PASTE HERE
        }
      }
    }
  }
}

4. Inclua as fonts do projeto no arquivo de estilos global da aplicação (style.scss):

@font-face {
    font-family: "Source Sans Pro";
    src: local("Source Sans Pro"), url(/assets/@freud-ds/fonts/SourceSansPro-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Source Sans Pro";
    src: local("Source Sans Pro"), url(/assets/@freud-ds/fonts/SourceSansPro-SemiBold.ttf) format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Source Sans Pro";
    src: local("Source Sans Pro"), url(/assets/@freud-ds/fonts/SourceSansPro-Bold.ttf) format("truetype");
    font-weight: bold;
}

*, body {
    font-family: 'Source Sans Pro', sans-serif;
}

Utilizando os grids

Estrutura do HTML

Grid fuida, sem limite de tamanho

<div class="freud-grid">
  <div class="freud-row">
    <div class="freud-col-<NUMERO DE COLUNAS>"></div> <--- Numero de 1 a 12
    <div class="freud-col"></div> <--- Sem determinar o numero de colunas é atribuido o maximo(12)
  </div>
</div>

Grid fixa, com limite maximo do container em 1320

<div class="freud-grid-fixed">
  <div class="freud-row">
    <div class="freud-col-<NUMERO DE COLUNAS>"></div> <--- Numero de 1 a 12
    <div class="freud-col"></div> <--- Sem determinar o numero de colunas é atribuido o maximo(12)
  </div>
</div>

Classes disponíveis

CSS Classes

Classe CSS | Descrição --- | --- freud-grid | Obrigatório, para o elemento de grade de layout freud-row | Obrigatório, para agrupar as colunas freud-col | Obrigatório, Coluna do grid freud-col-<NUMBER_OF_COLUMNS> | Opcional, especifica o numero de colunas de 1 até 12 <SIZE>:freud-col-<NUMBER_OF_COLUMNS> | Opcional, especifica o numero de colunas em um tamanho de tela ex (sm, md, lg) freud-col-order-<INDEX> | Opcional, especifica a ordem da coluna dentro da row freud-col-align-<POSITION> | Opcional, especifica o alinhamento da coluna