# 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">`.


```scss
// 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.

```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);
}

// 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

```scss
@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

```scss
@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](https://angular.io/cli) page.

## 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
