matcha-components 1.0.5 → 1.0.7

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.7",
+    "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/documentation/presentation.mdx

@@ -0,0 +1,105 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Apresentação / Boas-Vindas" />
+
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" class="w-100-p" viewBox="0 0 980 489.48047" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M317.06006,205.25977a205.979,205.979,0,0,0-77.68457,15.06689c-.99365.40723-1.99121.81641-2.98828,1.23486A206.78061,206.78061,0,0,0,110,412.31982v225.94a9.01016,9.01016,0,0,0,9,9l.17871.01562c173.4668,31.50195,342.106,47.46484,501.37207,47.46484q3.58155,0,7.15625-.01074c156.55469-.47656,308.99414-16.43945,453.083-47.44726l.21-.02246a9.00984,9.00984,0,0,0,9-9v-424a9.01015,9.01015,0,0,0-9-9Z" transform="translate(-110 -205.25977)" class="fill-surface" />
+    <path id="f4300551-56ef-4356-8f30-d0080b223343-211" data-name="Path 40" d="M855.79948,385.45241a5.94683,5.94683,0,0,0,0,11.89205H1004.8852a5.94683,5.94683,0,1,0,.19525-11.89205q-.09762-.00165-.19525,0Z" transform="translate(-110 -205.25977)" class="fill-bg" />
+    <path d="M1038.69419,383.79676a1.17,1.17,0,0,0,0,1.65472l5.02282,5.02288H1031.3312a1.17005,1.17005,0,1,0,0,2.34011H1043.717l-5.02282,5.02287a1.17005,1.17005,0,1,0,1.65468,1.65473l7.02029-7.02029a1.17011,1.17011,0,0,0,0-1.65473l-7.02029-7.02029A1.17,1.17,0,0,0,1038.69419,383.79676Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M821.92744,383.79676a1.17,1.17,0,0,1,0,1.65472l-5.02282,5.02288h12.38581a1.17006,1.17006,0,1,1,0,2.34011H816.90462l5.02282,5.02287a1.17,1.17,0,0,1-1.65467,1.65473l-7.0203-7.02029a1.17011,1.17011,0,0,1,0-1.65473l7.0203-7.02029A1.17,1.17,0,0,1,821.92744,383.79676Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <g opacity="0.4">
+        <circle cx="751.81992" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="131.32864" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="131.32864" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="131.32864" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="111.09396" r="6.3899" class="fill-accent" />
+    </g>
+    <path d="M770.15723,580.71875a35.27246,35.27246,0,1,1,35.27246-35.27246A35.31251,35.31251,0,0,1,770.15723,580.71875Zm0-68.54492a33.27246,33.27246,0,1,0,33.27246,33.27246A33.30991,33.30991,0,0,0,770.15723,512.17383Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M783.68058,542.06548H773.53835V531.92315a3.38081,3.38081,0,0,0-6.76162,0v10.14233H756.6344a3.38076,3.38076,0,0,0,0,6.76152h10.14233v10.14233a3.38081,3.38081,0,0,0,6.76162,0V548.827h10.14223a3.38076,3.38076,0,1,0,0-6.76152Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <g opacity="0.4">
+        <circle cx="54.0239" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="249.16777" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="249.16777" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="249.16777" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="117.6601" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="117.6601" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="117.6601" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="249.16777" r="5.02391" class="fill-accent" />
+    </g>
+    <path d="M607.40837,238.262H273.66631a6.18856,6.18856,0,0,0-6.1823,6.18237v285.3832a6.18855,6.18855,0,0,0,6.1823,6.18236H607.40837a6.1886,6.1886,0,0,0,6.18237-6.18236V244.44434A6.18861,6.18861,0,0,0,607.40837,238.262Zm3.70479,291.56557a3.71813,3.71813,0,0,1-3.70479,3.71637H273.66631a3.71067,3.71067,0,0,1-3.70472-3.71637V244.44434a3.71067,3.71067,0,0,1,3.70472-3.71637H607.40837a3.71813,3.71813,0,0,1,3.70479,3.71637Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M350.70245,485.26609c0,.43995-.01159.87989-.03477,1.30825a25.17464,25.17464,0,0,1-50.28069,0c-.02317-.42836-.03469-.8683-.03469-1.30825a25.17508,25.17508,0,1,1,50.35015,0Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M581.475,468.47884H383.66331a4.19682,4.19682,0,0,0,0,8.39363H581.475a4.19682,4.19682,0,0,0,0-8.39363Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M468.78046,493.65971H383.66331a4.191,4.191,0,0,0,0,8.382h85.11715a4.191,4.191,0,1,0,0-8.382Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M686.69824,438.84082H352.958a8.559,8.559,0,0,1-8.54883-8.5498V283.8291a8.55888,8.55888,0,0,1,8.54883-8.54931H686.69824a8.55888,8.55888,0,0,1,8.54883,8.54931V430.291A8.559,8.559,0,0,1,686.69824,438.84082ZM352.958,278.27979a5.55529,5.55529,0,0,0-5.54883,5.54931V430.291a5.55572,5.55572,0,0,0,5.54883,5.5498H686.69824a5.55572,5.55572,0,0,0,5.54883-5.5498V283.8291a5.55529,5.55529,0,0,0-5.54883-5.54931Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M420.9242,328.69922a4.19591,4.19591,0,1,0,0,8.39182H618.73156a4.19591,4.19591,0,1,0,0-8.39182Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M420.9242,353.01178a4.19591,4.19591,0,0,0,0,8.39183H618.73156a4.19592,4.19592,0,0,0,0-8.39183Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M420.9242,377.02952a4.19591,4.19591,0,0,0,0,8.39183h85.11711a4.19592,4.19592,0,0,0,0-8.39183Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M741.72363,500.89258l-33.51977-47.30731,10.85107,2.2611a1.50113,1.50113,0,1,0,.61212-2.9392l-16.17059-3.36628-2.18262,16.37055a1.50115,1.50115,0,1,0,2.976.39642l1.46319-10.99322L739.27637,502.627a1.49976,1.49976,0,1,0,2.44726-1.73437Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M559.66593,638.58034H321.40883a4.41735,4.41735,0,0,1-4.41216-4.41216V575.06677a4.41735,4.41735,0,0,1,4.41216-4.41216h238.2571a4.41735,4.41735,0,0,1,4.41216,4.41216v59.10141A4.41735,4.41735,0,0,1,559.66593,638.58034Zm-238.2571-66.16087a2.65019,2.65019,0,0,0-2.6473,2.6473v59.10141a2.65019,2.65019,0,0,0,2.6473,2.64729h238.2571a2.65019,2.65019,0,0,0,2.64729-2.64729V575.06677a2.65019,2.65019,0,0,0-2.64729-2.6473Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <circle cx="248.42913" cy="397.08997" r="17.97281" class="fill-accent" />
+    <path d="M399.93776,590.36787a2.99547,2.99547,0,1,0,0,5.99093H541.15269a2.99546,2.99546,0,1,0,0-5.99093Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M399.93776,608.34068a2.99547,2.99547,0,1,0,0,5.99093H460.703a2.99546,2.99546,0,1,0,0-5.99093Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M874.0245,428.0156H979.91678a4.41735,4.41735,0,0,1,4.41216,4.41216V542.71023a4.41735,4.41735,0,0,1-4.41216,4.41216H874.0245a4.41736,4.41736,0,0,1-4.41217-4.41216V432.42776A4.41736,4.41736,0,0,1,874.0245,428.0156ZM979.91678,545.35752a2.65019,2.65019,0,0,0,2.6473-2.64729V432.42776a2.6502,2.6502,0,0,0-2.6473-2.6473H874.0245a2.65019,2.65019,0,0,0-2.6473,2.6473V542.71023a2.65019,2.65019,0,0,0,2.6473,2.64729Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M957.35324,524.38014a2.99547,2.99547,0,0,0,0-5.99094H896.588a2.99547,2.99547,0,0,0,0,5.99094Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M957.35324,506.73149a2.99547,2.99547,0,1,0,0-5.99093H896.588a2.99547,2.99547,0,1,0,0,5.99093Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M926.97042,450.75785a18.85509,18.85509,0,1,1-18.85509,18.85509A18.87645,18.87645,0,0,1,926.97042,450.75785Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+</svg>
+
+<div class="d-flex-column mt-64">
+    <h3 class="">Seja Bem-Vindo(a) ao</h3>
+    <h1 class="">Matcha Design System</h1>
+</div>
+
+---
+
+<div class="grid-md-5"></div>

package/src/foundation/borders/borders.mdx

@@ -0,0 +1,180 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Borders" />
+
+### Borders
+
+Os tamanhos para as classes de border vão de **0** até **8**.
+
+    <div class="h-400 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>border-none</td>
+                    <td>border: none;</td>
+                </tr>
+                {Array.from({ length: 9 }, (_, index) => {
+                    const borderValue = (index - 1) + 1;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'b', 'prop': ''},
+                            {'abrev':'bt', 'prop': '-top'},
+                            {'abrev':'br', 'prop': '-right'},
+                            {'abrev':'bb', 'prop': '-bottom'},
+                            {'abrev':'bl', 'prop': '-left'},
+                            {'abrev':'bx', 'prop': '-left and border-right'},
+                            {'abrev':'by', 'prop': '-top and border-bottom'}
+                            ].map((border) => (
+                                <tr>
+                                    <td>{`${border.abrev}-${borderValue}`}</td>
+                                    <td>{`border${border.prop}: ${borderValue}px solid;`}</td>
+                                </tr>
+                            ))
+                        }
+                    </>
+                );
+            })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg grid-2 gap-16 grid-sm-7 d-flex-sm-space-between">                
+            <div class="accent-400-bg b-4 d-flex-center-center h-52 w-52 text-center font-size-14">b-4</div>
+            <div class="accent-400-bg bt-4 d-flex-center-center h-52 w-52 text-center font-size-14">bt-4</div>
+            <div class="accent-400-bg br-4 d-flex-center-center h-52 w-52 text-center font-size-14">br-4</div>
+            <div class="accent-400-bg bb-4 d-flex-center-center h-52 w-52 text-center font-size-14">bb-4</div>
+            <div class="accent-400-bg bl-4 d-flex-center-center h-52 w-52 text-center font-size-14">bl-4</div>
+            <div class="accent-400-bg bx-4 d-flex-center-center h-52 w-52 text-center font-size-14">bx-4</div>
+            <div class="accent-400-bg by-4 d-flex-center-center h-52 w-52 text-center font-size-14">by-4</div>
+        </div>
+        <div>
+            ```html
+            <div class="b-4">4px border</div>
+            <div class="bt-4">4px border-top</div>
+            <div class="br-4">4px border-right</div>
+            <div class="bb-4">4px border-bottom</div>
+            <div class="bl-4">4px border-left</div>
+            <div class="bx-4">4px border-left and border-right</div>
+            <div class="by-4">4px border-top and border-bottom</div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+### Border-radius
+
+Os tamanhos para as classes de border vão de **1** até **8**.
+
+    <div class="h-400 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>            
+                <tr>
+                    <td>border-radius-0</td>
+                    <td>border-radius: 0;</td>
+                </tr>
+                <tr>
+                    <td>border-radius-t-0</td>
+                    <td>border-radius: 0;</td>
+                </tr>
+                <tr>
+                    <td>border-radius-r-0</td>
+                    <td>border-radius: 0;</td>
+                </tr>
+                <tr>
+                    <td>border-radius-b-0</td>
+                    <td>border-radius: 0;</td>
+                </tr>
+                <tr>
+                    <td>border-radius-l-0</td>
+                    <td>border-radius: 0;</td>
+                </tr>                        
+                {Array.from({ length: 8 }, (_, index) => {
+                    const borderValue = index + 1;
+                    return (   
+                    <>              
+                        <tr>
+                            <td>{`border-radius-${borderValue}`}</td>
+                            <td>{`border-radius: ${borderValue}px;`}</td>
+                        </tr>
+                        <tr>
+                            <td>{`border-radius-t-${borderValue}`}</td>
+                            <td>{`border-radius: ${borderValue}px ${borderValue}px 0 0;`}</td>
+                        </tr>
+                        <tr>
+                            <td>{`border-radius-r-${borderValue}`}</td>
+                            <td>{`border-radius: 0 ${borderValue}px ${borderValue}px 0;`}</td>
+                        </tr>
+                        <tr>
+                            <td>{`border-radius-b-${borderValue}`}</td>
+                            <td>{`border-radius: 0 0 ${borderValue}px ${borderValue}px;`}</td>
+                        </tr>
+                        <tr>
+                            <td>{`border-radius-l-${borderValue}`}</td>
+                            <td>{`border-radius: ${borderValue}px 0 0 ${borderValue}px;`}</td>
+                        </tr>
+                    </>              
+                );
+            })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 d-flex-md-space-between">                
+            <div class="accent-400-bg border-radius-8 b-2 d-flex-center-center h-124 w-124 text-center font-size-14">border-radius-8</div>
+            <div class="accent-400-bg border-radius-t-8 b-2 d-flex-center-center h-124 w-124 text-center font-size-14">border-radius-t-8</div>
+            <div class="accent-400-bg border-radius-r-8 b-2 d-flex-center-center h-124 w-124 text-center font-size-14">border-radius-r-8</div>
+            <div class="accent-400-bg border-radius-b-8 b-2 d-flex-center-center h-124 w-124 text-center font-size-14">border-radius-b-8</div>
+            <div class="accent-400-bg border-radius-l-8 b-2 d-flex-center-center h-124 w-124 text-center font-size-14">border-radius-l-8</div>
+       </div>
+        <div>
+            ```html
+            <div class="border-radius-8">border-radius: 8px</div>
+            <div class="border-radius-t-8">border-radius: 8px 8px 0 0</div>
+            <div class="border-radius-r-8">border-radius: 0 8px 8px 0</div>
+            <div class="border-radius-b-8">border-radius: 0 0 8px 8px</div>
+            <div class="border-radius-l-8">border-radius: 8px 0 0 8px</div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+### Border Circle
+
+    <div class="h-24"></div>
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-center-center py-16">
+            <div class="h-200 w-200 border-radius-circle accent-400-bg d-flex-center-center text-center">border-radius-circle</div>
+        </div>
+        <div>
+            ```html
+            <div class="border-radius-circle">border-radius: 999px</div>
+            ```
+        </div>
+    
+    </div>
+