matcha-components 1.0.5 → 1.0.6

package/README.md

@@ -4,8 +4,9 @@ This library was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Code scaffolding
 
-Run `ng generate component component-name --project matcha-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project matcha-components`.
-> Note: Don't forget to add `--project matcha-components` or else it will be added to the default project in your `angular.json` file. 
+Run `ng g c component-name --project matcha-components` to generate a new component. You can also use `ng g directive|pipe|service|class|guard|interface|enum|module --project matcha-components`, in case of nested components you can use `ng g c component-name/child-component --project matcha-component`.
+
+> Note: Don't forget to add `--project matcha-components` or else it will be added to the default project in your `angular.json` file.
 
 ## Build
 
@@ -19,6 +20,242 @@ After building your library with `ng build matcha-components`, go to the dist fo
 
 Run `ng test matcha-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
+## Running storybook
+
+Run `ng run matcha-components:storybook` or `npm run storybook`to execute the storybook aplication and see the documentation of all components via [storybook](https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/).
+
+## Running example aplication
+
+Run `ng s --project matcha-design-system` to execute an angular aplication that you can for exemple test your components or directives in pratice.
+
+## Models of Theme Files
+
+-   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.
+To get more help on the Storybook [stories](https://github.com/geromegrignon/angular-material-storybook/blob/main/stories/components/progress-bar/progress-bar.stories.ts)
+
+## 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

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/matcha-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,25 +1,12 @@
 {
-  "name": "matcha-components",
-  "version": "1.0.5",
-  "peerDependencies": {
-    "@angular/common": "^16.0.0",
-    "@angular/core": "^16.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/matcha-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
+    "name": "matcha-components",
+    "version": "1.0.6",
+    "peerDependencies": {
+        "@angular/common": "^16.0.0",
+        "@angular/core": "^16.0.0"
     },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/matcha-components.mjs",
-      "esm": "./esm2022/matcha-components.mjs",
-      "default": "./fesm2022/matcha-components.mjs"
-    }
-  }
-}
+    "dependencies": {
+        "tslib": "^2.3.0"
+    },
+    "sideEffects": false
+}

package/src/foundation/colors/base/amber.mdx

@@ -0,0 +1,232 @@
+
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Cores / Base / Amber"/>
+
+# Amber
+Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associadas a esta cor no Matcha Design System. As classes abrangem cada um dos níveis de saturação dentro desta paleta de cores, incluindo cores **estáticas** e **Dinâmicas(que se adaptam ao tema)**. Isso se aplica tanto ao **foreground(texto)** quanto ao **background(fundo)**. Explore essa gama completa de opções para personalizar e adaptar as cores de acordo com suas preferências e necessidades.
+
+    <div class="grid-md-4 gap-8 pb-32">
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 base-amber"><span class="i-matcha-special-need"></span>.base-amber</div>
+            <div class="p-8 background-amber-alpha">.background-amber-alpha</div>
+            <div class="p-8 color-amber">.color-amber</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber">.amber</div>
+            <div class="p-8 amber-50">.amber-50</div>
+            <div class="p-8 amber-100">.amber-100</div>
+            <div class="p-8 amber-200">.amber-200</div>
+            <div class="p-8 amber-300">.amber-300</div>
+            <div class="p-8 amber-400">.amber-400</div>
+            <div class="p-8 amber-500">.amber-500</div>
+            <div class="p-8 amber-600">.amber-600</div>
+            <div class="p-8 amber-700">.amber-700</div>
+            <div class="p-8 amber-800">.amber-800</div>
+            <div class="p-8 amber-900">.amber-900</div>
+            <div class="p-8 amber-A100">.amber-A100</div>
+            <div class="p-8 amber-A200">.amber-A200</div>
+            <div class="p-8 amber-A400">.amber-A400</div>
+            <div class="p-8 amber-A700">.amber-A700</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber-bg">.amber-bg</div>
+            <div class="p-8 amber-50-bg">.amber-50-bg</div>
+            <div class="p-8 amber-100-bg">.amber-100-bg</div>
+            <div class="p-8 amber-200-bg">.amber-200-bg</div>
+            <div class="p-8 amber-300-bg">.amber-300-bg</div>
+            <div class="p-8 amber-400-bg">.amber-400-bg</div>
+            <div class="p-8 amber-500-bg">.amber-500-bg</div>
+            <div class="p-8 amber-600-bg">.amber-600-bg</div>
+            <div class="p-8 amber-700-bg">.amber-700-bg</div>
+            <div class="p-8 amber-800-bg">.amber-800-bg</div>
+            <div class="p-8 amber-900-bg">.amber-900-bg</div>
+            <div class="p-8 amber-A100-bg">.amber-A100-bg</div>
+            <div class="p-8 amber-A200-bg">.amber-A200-bg</div>
+            <div class="p-8 amber-A400-bg">.amber-A400-bg</div>
+            <div class="p-8 amber-A700-bg">.amber-A700-bg</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber-fg">.amber-fg</div>
+            <div class="p-8 amber-50-fg">.amber-50-fg</div>
+            <div class="p-8 amber-100-fg">.amber-100-fg</div>
+            <div class="p-8 amber-200-fg">.amber-200-fg</div>
+            <div class="p-8 amber-300-fg">.amber-300-fg</div>
+            <div class="p-8 amber-400-fg">.amber-400-fg</div>
+            <div class="p-8 amber-500-fg">.amber-500-fg</div>
+            <div class="p-8 amber-600-fg">.amber-600-fg</div>
+            <div class="p-8 amber-700-fg">.amber-700-fg</div>
+            <div class="p-8 amber-800-fg">.amber-800-fg</div>
+            <div class="p-8 amber-900-fg">.amber-900-fg</div>
+            <div class="p-8 amber-A100-fg">.amber-A100-fg</div>
+            <div class="p-8 amber-A200-fg">.amber-A200-fg</div>
+            <div class="p-8 amber-A400-fg">.amber-A400-fg</div>
+            <div class="p-8 amber-A700-fg">.amber-A700-fg</div>
+        </div>
+    </div>
+---
+
+### Cores Dinâmicas: Acessibilidade e Harmonia Visual
+A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se adaptam de maneira inteligente e intuitiva com base no tema escolhido pelo usuário: Tema claro ou escuro. Essas cores dinâmicas são especialmente projetadas para criar uma experiência visual perfeita e agradável, independentemente das preferências de contraste e iluminação.
+
+    #### Acessibilidade: Cor Acessível e inclusiva
+    O uso das classes ```.base-<nome-da-cor> ``` é essencial para garantir que nosso aplicativo ofereça uma acessibilidade ideal e uma experiência visual consistente, independentemente das condições de iluminação ou das necessidades individuais dos usuários.
+
+    <div class="d-flex-column">
+        <div class="elevation-z-1 matcha-card base-amber">
+            <span class="h5"><span class="i-matcha-special-need"></span>Exemplo: Mantém equilíbrio de contraste entre texto e plano de fundo, adaptando a cor de acordo com os temas claro ou escuro.</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .base-amber
+                ```
+            </div>
+        </div>
+    </div>
+
+    #### Harmonia Visual: Background e Foreground dinâmicos
+    Ao usar as classes CSS de "Background" ou "Foreground", lembre-se de que é crucial **evitar combinar as classes CSS de cores de plano de fundo e texto** de forma separada. Para obter harmonia visual e acessibilidade, opte por usar a opção "Acessibilidade: Cor Acessível e inclusiva" mencionada anteriormente. Essa abordagem única garante uma combinação equilibrada de cores para um ótimo contraste e legibilidade, resultando em uma experiência de usuário mais eficaz e agradável. No entanto, é fundamental evitar combinar classes CSS para aplicar estilo ao plano de fundo e ao texto de maneira que possa afetar a acessibilidade. Certifique-se de que a aplicação das classes mantenha a legibilidade e a harmonia visual para todos os usuários independente das condições de iluminação.
+
+    <div class="grid-md-2 gap-16">
+        <div class="d-flex-column gap-16">
+            <span class="color-success">
+                <span class="i-matcha-action_sign_success i-size-lg"></span>
+                <span class="pl-8">Faça isso</span>
+            </span>
+
+            <div class="elevation-z-1 matcha-card color-amber">
+                <span class="h5">Exemplo de texto</span>
+                <div class="d-flex-column pt-16">
+                    ```css
+                        .color-amber
+                    ```
+                </div>
+            </div>
+
+            <div class="elevation-z-1 matcha-card background-amber-alpha">
+                <span class="h5">Exemplo de texto</span>
+                <div class="d-flex-column pt-16">
+                    ```css
+                        .background-amber-alpha
+                    ```
+                </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <span class="color-error">
+                <span class="i-matcha-action_sign_error i-size-lg"></span>
+                <span class="pl-8">Não faça isso</span>
+            </span>
+
+            <div class="elevation-z-1 matcha-card background-amber">
+                <span class="h5">Exemplo de texto</span>
+                <div class="d-flex-column pt-16">
+                    ```css
+                        .background-amber
+                    ```
+                </div>
+            </div>
+        </div>
+    </div>
+
+---
+
+### Cores Não Dinâmicas (estáticas): Harmonia Visual Estática e Background e Foreground Estáticos
+Nesta seção, focamos nas "Cores Não Dinâmicas", que mantêm sua consistência independentemente do tema selecionado (claro ou escuro). Aqui, você encontrará uma lista de classes que permanecem constantes, garantindo uma harmonia visual estática em toda a aplicação. Algumas classes já foram configuradas para oferecer equilíbrio de contraste entre texto e plano de fundo, enquanto outras classes permitem personalizar separadamente as cores de background e texto.
+
+    #### Harmonia Visual: Cores Estáticas Pamberefinidas
+    Classes nesta categoria foram cuidadosamente selecionadas para oferecer uma combinação equilibrada entre o texto e o background. Elas garantem legibilidade e estética, independentemente das preferências de tema. Use essas classes para manter uma aparência uniforme e agradável.
+
+        <div class="elevation-z-1 matcha-card amber">
+            <span class="h5">Exemplo: Mantém equilíbrio de contraste entre texto e plano de fundo, mas não ajusta sua cor de acordo com os temas claro ou escuro</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface ">
+                <div class="p-8 amber">.amber</div>
+                <div class="p-8 amber-50">.amber-50</div>
+                <div class="p-8 amber-100">.amber-100</div>
+                <div class="p-8 amber-200">.amber-200</div>
+                <div class="p-8 amber-300">.amber-300</div>
+                <div class="p-8 amber-400">.amber-400</div>
+                <div class="p-8 amber-500">.amber-500</div>
+                <div class="p-8 amber-600">.amber-600</div>
+                <div class="p-8 amber-700">.amber-700</div>
+                <div class="p-8 amber-800">.amber-800</div>
+                <div class="p-8 amber-900">.amber-900</div>
+                <div class="p-8 amber-A100">.amber-A100</div>
+                <div class="p-8 amber-A200">.amber-A200</div>
+                <div class="p-8 amber-A400">.amber-A400</div>
+                <div class="p-8 amber-A700">.amber-A700</div>
+            </div>
+
+        </div>
+
+    #### Background e Foreground Estáticos Separados
+    Algumas classes permitem personalizar independentemente as cores de plano de fundo e texto. Embora essa abordagem ofereça flexibilidade, lembre-se de que é crucial manter o contraste e a legibilidade para uma experiência de usuário acessível. Escolha combinações adequadas de cores e evite comprometer a visibilidade do conteúdo.
+
+    Ao selecionar classes da seção "Cores Não Dinâmicas", você terá uma base sólida para criar interfaces coesas e visualmente atraentes, garantindo que cada elemento contribua para uma experiência de usuário de alta qualidade, independentemente do tema escolhido.
+    Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, informações, gráficos, bullets, borders, dots e etc.
+
+    <div class="grid-md-2 gap-8">
+        <div class="elevation-z-1 matcha-card amber-bg gap-16 d-flex-column">
+            <span class="h5">Não assegura o equilíbrio de contraste entre texto e plano de fundo, nem ajusta sua cor de acordo com os temas claro ou escuro.</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+                <div class="p-8 amber-bg">.amber-bg</div>
+                <div class="p-8 amber-50-bg">.amber-50-bg</div>
+                <div class="p-8 amber-100-bg">.amber-100-bg</div>
+                <div class="p-8 amber-200-bg">.amber-200-bg</div>
+                <div class="p-8 amber-300-bg">.amber-300-bg</div>
+                <div class="p-8 amber-400-bg">.amber-400-bg</div>
+                <div class="p-8 amber-500-bg">.amber-500-bg</div>
+                <div class="p-8 amber-600-bg">.amber-600-bg</div>
+                <div class="p-8 amber-700-bg">.amber-700-bg</div>
+                <div class="p-8 amber-800-bg">.amber-800-bg</div>
+                <div class="p-8 amber-900-bg">.amber-900-bg</div>
+                <div class="p-8 amber-A100-bg">.amber-A100-bg</div>
+                <div class="p-8 amber-A200-bg">.amber-A200-bg</div>
+                <div class="p-8 amber-A400-bg">.amber-A400-bg</div>
+                <div class="p-8 amber-A700-bg">.amber-A700-bg</div>
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card amber-fg background-surface gap-16 d-flex-column">
+            <span class="h5">Não assegura o equilíbrio de contraste entre texto e plano de fundo, nem ajusta sua cor de acordo com os temas claro ou escuro.</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+                <div class="p-8 amber-fg">.amber-fg</div>
+                <div class="p-8 amber-50-fg">.amber-50-fg</div>
+                <div class="p-8 amber-100-fg">.amber-100-fg</div>
+                <div class="p-8 amber-200-fg">.amber-200-fg</div>
+                <div class="p-8 amber-300-fg">.amber-300-fg</div>
+                <div class="p-8 amber-400-fg">.amber-400-fg</div>
+                <div class="p-8 amber-500-fg">.amber-500-fg</div>
+                <div class="p-8 amber-600-fg">.amber-600-fg</div>
+                <div class="p-8 amber-700-fg">.amber-700-fg</div>
+                <div class="p-8 amber-800-fg">.amber-800-fg</div>
+                <div class="p-8 amber-900-fg">.amber-900-fg</div>
+                <div class="p-8 amber-A100-fg">.amber-A100-fg</div>
+                <div class="p-8 amber-A200-fg">.amber-A200-fg</div>
+                <div class="p-8 amber-A400-fg">.amber-A400-fg</div>
+                <div class="p-8 amber-A700-fg">.amber-A700-fg</div>
+            </div>
+        </div>
+    </div>