19.24.0 • Published 9 months ago

matcha-theme v19.24.0

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

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)

ComponentAlphaBetaStable
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.

ComponentAlphaBetaStable
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
@everything-registry/sub-chunk-2137
19.24.0

9 months ago

18.1.40

1 year ago

18.1.41

1 year ago

19.22.0

9 months ago

18.1.42

1 year ago

18.1.43

1 year ago

19.0.1

10 months ago

18.1.44

1 year ago

18.1.45

1 year ago

19.0.3

10 months ago

18.1.46

1 year ago

19.2.0

10 months ago

19.0.2

10 months ago

18.1.47

11 months ago

18.1.48

11 months ago

18.1.49

10 months ago

19.20.0

9 months ago

19.0.5

10 months ago

19.0.4

10 months ago

18.2.0

10 months ago

19.6.0

9 months ago

19.8.0

9 months ago

18.1.50

10 months ago

19.14.0

9 months ago

19.12.0

9 months ago

19.18.0

9 months ago

19.16.0

9 months ago

19.10.0

9 months ago

19.23.0

9 months ago

19.1.0

10 months ago

19.3.0

10 months ago

19.21.0

9 months ago

19.5.0

10 months ago

18.3.0

10 months ago

19.7.0

9 months ago

19.9.0

9 months ago

19.11.0

9 months ago

19.17.0

9 months ago

18.1.38

1 year ago

18.1.39

1 year ago

19.19.0

9 months ago

18.1.37

1 year ago

18.1.32

1 year ago

18.1.33

1 year ago

18.1.34

1 year ago

18.1.35

1 year ago

18.1.36

1 year ago

18.1.28

1 year ago

18.1.29

1 year ago

18.1.30

1 year ago

18.1.31

1 year ago

1.0.27

2 years ago

18.0.27

1 year ago

18.0.28

1 year ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago