Matcha Design System

Esta biblioteca foi gerada com o Angular CLI version 11.2.14.

1- Instalação do Matcha DS no seu projeto Angular8~11

Execute:

npm i matcha-ds

2- Importando estilos do Matcha DS no meu projeto Angular.

Adicione a referência da API para usar as diretivas do Matcha DS. Orientamos fazer isso no arquivo app.modules.ts do seu projeto Angular:

import { MatchaDsModule } from 'matcha-ds';

@NgModule({
  ...
  imports: [
    ...
    MatchaDsModule
  ]
})

3- Configurando os assets do Matcha DS

Leve todos os assets para a pasta /src/assets. Tanto as fontes quanto as imagens utilizadas pelo Matcha DS serão procuradas em suas respectivas pastas. Fontes devem ficar na pasta /fontes, dentro de /src/assets.

Por exemplo: O caminho procurado pelo token $asset-font-circular-book-ttf que aponta para a fonte CircularStd-Book é /assets/fontes/CircularStd-Book.ttf.Por tanto se a fonte não estiver na pasta /src/assets/fontes correta ela não será carregada.

4- Aplicando o tema do Matcha DS com mixins do Angular Material

Se você não tem o Angular Material no seu projeto adicione-o com o comando:

ng add @angular/material

A aplicação do tema do Matcha DS com os mixins de criação de temas do Angular Material feito em um SCSS. Orientamos fazer isso no arquivo app.component.scss do seu projeto Angular.

Para configurar um arquivo de temas vá em app.component.scss e adicione os @import‘s

@import '~@angular/material/theming';
@import '~matcha-ds/assets/scss/matcha.variables';
@import '~matcha-ds/assets/scss/matcha.components';

@include mat-core();

Você pode criar sua própria paleta definindo um mapa Sass que corresponda à estrutura descrita na seção abaixo. O mapa deve definir matizes para 50 e cada cem entre 100 e 900. O mapa também deve definir um contrast-map com cores de contraste para cada matiz.

Você pode usar a ferramenta de paleta Material Design para ajudar a escolher os matizes em sua paleta.

Ainda no arquivo de temas app.component.scss, adicione as paletas de cores que serão usadas:

// ------------------------------------------------------------
// @ Custom color maps for Matcha Theme
// ------------------------------------------------------------
$matcha-white: (
  500: $color-base-white,
  contrast: (
    500: $color-base-black,
  ));

$matcha-black: (
  500: $color-base-black,
  contrast: (
    500: $color-base-white,
  ));

// mat-light-theme
$matcha-brand-primary: (
  50: $color-brand-primary,          
  100:$color-brand-surface,        
  200:$color-brand-surface,                     
  300:$color-brand-background,                  
  400:$color-brand-primary-variant,             
  500:$color-brand-background-variant,          
  600:$color-brand-primary-variant-a,           
  contrast: (
    50: $color-brand-on-primary,              
    100: $color-brand-on-surface,             
    200: $color-brand-on-surface-variant,     
    300: $color-brand-on-background,
    400: $color-brand-on-primary-variant,     
    500: $color-brand-on-background-variant,
    600: $color-brand-on-primary,
  ));

// mat-dark-theme
$matcha-brand-primary-dark: (
  50:  $color-base-dark-grey-300,
  100: $color-base-dark-grey-400,
  200: $color-base-dark-grey-500,
  300: $color-base-dark-grey-600,
  400: $color-base-dark-grey-700,
  500: $color-base-dark-grey-800,
  600: $color-base-dark-grey-900,
  contrast: (
    50: $color-brand-primary,
    100:$color-brand-surface,
    200:$color-brand-surface,
    300:$color-brand-background,
    400:$color-brand-primary-variant,
    500:$color-brand-background-variant,
    600:$color-brand-primary-variant-a,
  ));

$matcha-brand-accent: (
  200: $color-base-green-200,
  500: $color-brand-secondary,
  A700: $color-brand-secondary-variant,
  contrast: (
    200: $color-brand-on-secondary,
    500: $color-brand-on-secondary,
    A700: $color-brand-on-primary,
  ));

5- Inserindo fontes

Ainda no app.component.scss adicione as linhas abaixo para as tipografias, se você executou os passos 3 e 4 corretamente não terá problemas aqui:

// ------------------------------------------------------------
// @ Typography
// ------------------------------------------------------------
/** Generated by FG **/
@font-face {
	font-family: $asset-font-circular-book-name;
	src: url($asset-font-circular-book-eot);
	src: local('☺'), url($asset-font-circular-book-woff) format('woff'),
    url($asset-font-circular-book-ttf) format('truetype'),
    url($asset-font-circular-book-svg) format('svg');
	font-weight: normal;
	font-style: normal;
}
// Angular Material typography
$typography: mat-typography-config($font-family: $asset-font-circular-book-name,
    $title: mat-typography-level(20px, 32px, 500),
    $body-2: mat-typography-level(14px, 24px, 500),
    $button: mat-typography-level(14px, 14px, 500),
    $input: mat-typography-level(16px, 1.125, 500) // line-height must be unitless !!!
);

// Setup the typography
@include angular-material-typography($typography);

html {
    font-family: $asset-font-circular-book-name, 'Helvetica Neue', 'Arial', sans-serif;
}

6- Aplicando o Tema

Ainda no app.component.scss adicione as linhas abaixo para criar o tema com as paletas de cores configuradas no passo 4

// ------------------------------------------------------------
// @ Define the default theme
// ------------------------------------------------------------

// Define the primary
// 100 - surface:                     #FBFBFB; - 100
// 100 - on-surface:                  #3c4956; - '100-contrast' (precisa das aspas)

// 200 - surface:                     #FBFBFB; - 200
// 200 - on-surface-variant:          #6d7884; - '200-contrast'

// 300 - background:                  #F6F6F6; - 300
// 300 - on-background:               #2e3842; - lighter-contrast

// 400 - primary-variant:             #F2F2F2; - 400
// 400 - on-primary-variant:          #464646; - '400-contrast'

// 500 - background-variant:          #ECECEC; - 500
// 500 - on-background-variant:       #4e5a65; - default-contrast

// 600 - primary-variant-a:           #cbd6e3; - 600
// 600 - on-primary:                  #262626; - darker-contrast
$matcha-app-primary: mat-palette($matcha-brand-primary, 500, 300, 600);

// 500 - brand-secondary:             #73a300;
// 500 - brand-on-secondary:          #ffffff;

// a700 - brand-secondary-variant:    #8ec900;
// a700 - brand-on-secondary-variant: #f4f4f4;
$matcha-app-accent: mat-palette($matcha-brand-accent, 500, A700, 200);
$matcha-app-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$matcha-app-theme: mat-light-theme((
  color: (
    primary: $matcha-app-primary,
    accent: $matcha-app-accent,
    warn: $matcha-app-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($matcha-app-theme);

7- Diretivas, como usar

Exemplo de um botão do Angular Material com estilo do Matcha DS porém sem diretiva:

<button mat-flat-button color="accent">Accent</button>

Exemplo de um botão do Angular Material com estilo do Matcha DS dessa vez com diretiva para modificar o estilo do botão:

<button matcha-btn-xl mat-flat-button color="accent">Accent</button>

A diretiva adiciona uma classe no botão para facilitar a reestilização de um componente em casos específicos onde o componente precisa ter um comportamento atípico. o resultado é semelhante a este:

<button class="mat-flat-button mat-accent matcha-button-xl">Accent</button>

Lista de diretivas

matcha-autocomplete-overview

matcha-autocomplete

matcha-badge

matcha-bottom-sheet

matcha-button-toggle

matcha-button-lg

matcha-button-md

matcha-button-xl

matcha-card

matcha-checkbox

matcha-chips

matcha-datepicker

matcha-dialog

matcha-divider

matcha-expansion-panel

matcha-form-field-appearance

matcha-form-input-text

matcha-list

matcha-menu

matcha-paginator

matcha-progress-bar

matcha-progress-spinner

matcha-radio-button

matcha-select

matcha-slide-toggle

matcha-slider

matcha-snackbar

matcha-sort-header

matcha-stepper

matcha-table

matcha-tabs

matcha-tooltip

matcha-tree

Sugestões para [email protected]