matcha-theme

v18.1.42

Published

3 days ago

Themes for matcha-design-system

Downloads

458

0High
0Medium
0Low

wallace.anjos

Matcha-Theme

Theming Matcha Components

Place the class (.theme-default-light) that you define in theme file, inside of body tag. This way you can cover the whole application with the theme.

Some like this <body class="theme-default-light">.

// app.theme.scss

@use "../lib/main.scss" as matcha;

//MATCHA THEME - LIGHT
// palettes
$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
// typography
$matcha-default-typography: matcha.matcha-typography-config(
    $font-family: "Arial",
);
// theme
$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);

.theme-default-light {
    @include matcha.matcha-components($matcha-default-theme);
    @include matcha.matcha-typography($matcha-default-typography);
}

Light and dark themes examples

You must create some code to do the class toggle from .theme-default-light to .theme-default-dark inside the <body> tag.

@use "../lib/main.scss" as matcha;

//MATCHA THEME - LIGHT
// palettes
$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
// typography
$matcha-default-typography: matcha.matcha-typography-config(
    $font-family: "Arial",
);
// theme
$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);

.theme-default-light {
    @include matcha.matcha-components($matcha-default-theme);
    @include matcha.matcha-typography($matcha-default-typography);
}

// You can set how much themes you need...

//MATCHA THEME - DARK
// palette
$default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
$default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
$default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
// typography
$matcha-default-typography: matcha.matcha-typography-config(
    $font-family: "Arial",
);
// theme
$matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);

.theme-default-dark {
    @include matcha.matcha-components($matcha-default-theme);
    @include matcha.matcha-typography($matcha-default-typography);
}

Theming both Angular Material and Matcha Components

@use "@angular/material" as mat;
@use "../lib/main.scss" as matcha;
@include mat.core();

//MATCHA THEME - LIGHT
// palettes
$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
// typography
$matcha-default-typography: matcha.matcha-typography-config(
    $font-family: "Arial",
);
$mat-default-typography: mat.define-typography-config(
    $font-family: "Arial",
);
// theme
$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
$mat-default-theme: mat.define-light-theme(
    (
        color: (
            primary: $default-light-primary,
            accent: $default-light-accent,
            warn: $default-light-warn,
        ),
        typography: $mat-default-typography,
    )
);

.theme-default-light {
    @include mat.all-component-themes($mat-default-theme);
    @include matcha.matcha-components($matcha-default-theme);
    @include matcha.matcha-typography($matcha-default-typography);
}

Theming Matcha Components

@use "../lib/main.scss" as matcha;

//MATCHA THEME - DARK
// palette
$default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
$default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
$default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
// typography
$matcha-default-typography: matcha.matcha-typography-config(
    $font-family: "Arial",
);
// theme
$matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);

.theme-default-dark {
    @include matcha.matcha-components($matcha-default-theme);
    @include matcha.matcha-typography($matcha-default-typography);
}

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page. To get more help on the Storybook stories

Roadmap

Alpha components are in-development and may have many frequent breaking changes.

Beta components are mostly polished and ready for use, but may still have breaking changes.

Stable components are reviewed, documented, and API complete.

❌ Not started
🟡 In progress
✅ Complete

`v1.0.0` (2023)

| Component | Alpha | Beta | Stable | | ----------------------------- | :---: | :--: | :----: | | Button | ✅ | ✅ | ✅ | | FAB | ✅ | ✅ | ✅ | | Icon button | ✅ | ✅ | ✅ | | Card | ✅ | ✅ | ✅ | | Checkbox | ✅ | ✅ | ✅ | | Chips | ✅ | ✅ | ✅ | | Dialog | ✅ | ✅ | ✅ | | Divider | ✅ | ✅ | ✅ | | Elevation | ✅ | ✅ | ✅ | | Focus ring | ✅ | ✅ | ✅ | | Field | ✅ | ✅ | ✅ | | Icon | ✅ | ✅ | ✅ | | List | ✅ | ✅ | ✅ | | Menu | ✅ | ✅ | ✅ | | Progress indicator (circular) | ✅ | ✅ | ✅ | | Progress indicator (linear) | ✅ | ✅ | ✅ | | Radio button | ✅ | ✅ | ✅ | | Ripple | ✅ | ✅ | ✅ | | Select | ✅ | ✅ | ✅ | | Slider | ✅ | ✅ | ✅ | | Switch | ✅ | ✅ | ✅ | | Tabs | ✅ | ✅ | ✅ | | Title | ✅ | ✅ | ✅ | | Text field | ✅ | ✅ | ✅ |

Future

These features are planned for a future release.

| Component | Alpha | Beta | Stable | | ----------------- | :---: | :--: | :----: | | Autocomplete | ✅ | ✅ | ✅ | | Badge | ✅ | ✅ | ✅ | | Banner | ✅ | ✅ | ✅ | | Bottom app bar | ✅ | ✅ | ✅ | | Bottom sheet | ✅ | ✅ | ✅ | | Segmented button | ✅ | ✅ | ✅ | | Card | ✅ | ✅ | ✅ | | Data table | ✅ | ✅ | ✅ | | Date picker | ✅ | ✅ | ✅ | | Navigation bar | ✅ | ✅ | ✅ | | Navigation drawer | ✅ | ✅ | ✅ | | Navigation rail | ✅ | ✅ | ✅ | | Search | ✅ | ✅ | ✅ | | Snackbar | ✅ | ✅ | ✅ | | Time picker | ✅ | ✅ | ✅ | | Tooltip | ✅ | ✅ | ✅ | | Top app bar | ✅ | ✅ | ✅ |

Base CLASSES CSS

✅TYPOGRAPHY
✅SPACING
✅BORDER
✅COLORS
✅SIZES

Atomic Components

FORM
    ✅autocomplete
    ✅checkbox
    ✅datepicker
    ✅form field
    ✅input
    ✅radio button
    ✅select
    ✅slider
    ✅slide toggle

NAVIGATION
    ✅menu
    ✅sidebar
    ✅toolbar
    ✅header

LAYOUT
    ✅badge
    ✅bottom sheet
    ✅card
    ✅divider
    ✅elevation
    ✅expansion panel
    ✅display grid
    ✅display flex
    ✅list
    ✅stepper
    ✅tabs
    ✅titles
    ✅tree

BUTTONS/INDICATORS
    ✅button
    ✅button toggle
    ✅chips
    ✅icon
    ✅progress spinner
    ✅progress bar
    ✅ripple

POPUP/MODALS
    ✅dialog
    ✅snackbar
    ✅tooltip

DATATABLE
    ✅paginator
    ✅sort header
    ✅table

At moment we have 6 bases and 42 atoms to make documentation 1 component equals to 2,083% do progresso

Molecular Components

Autocomplete de membros

Organisms Components

Header de buscas

Pages Components

List page