matcha-components 1.0.6 → 1.0.8

package/src/foundation/spacing/margins.mdx

@@ -0,0 +1,183 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Spacing / Margin" />
+
+### Margin
+
+Os tamanhos para as classes de margin são sempre múltiplos de **4**, sendo o
+máximo **64**.
+
+    <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>
+            {Array.from({ length: 17 }, (_, index) => {
+                    const marginValue = index* 4;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'m', 'prop': ''},
+                            {'abrev':'mt', 'prop': '-top'},
+                            {'abrev':'mr', 'prop': '-right'},
+                            {'abrev':'mb', 'prop': '-bottom'},
+                            {'abrev':'ml', 'prop': '-left'},
+                            {'abrev':'mx', 'prop': '-left and margin-right'},
+                            {'abrev':'my', 'prop': '-top and margin-bottom'}
+                            ].map((margin) => (
+                                <tr>
+                                    <td>{`${margin.abrev}-${marginValue}`}</td>
+                                    <td>{`margin${margin.prop}: ${marginValue}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="grid-2 gap-16 grid-sm-7 d-flex-sm-space-between p-16">
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 m-12--force">m-12</div>
+            </div>
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mt-12--force">mt-12</div>
+            </div>
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mr-12--force">mr-12</div>
+            </div>
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mb-12--force">mb-12</div>
+            </div>
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 ml-12--force">ml-12</div>
+            </div>
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mx-12--force">mx-12</div>
+            </div>
+            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 my-12--force">my-12</div>
+            </div>
+        </div>
+        <div>
+            ```html
+            <div class="m-12">m-12</div>
+            <div class="mt-12">mt-12</div>
+            <div class="mr-12">mr-12</div>
+            <div class="mb-12">mb-12</div>
+            <div class="ml-12">ml-12</div>
+            <div class="mx-12">mx-12</div>
+            <div class="my-12">my-12</div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Valores negativos
+
+Os tamanhos para as classes de margin também podem ser negativos.
+
+    <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>
+            {Array.from({ length: 33 }, (_, index) => {
+                    const marginValue = (index - 16 )* 4;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'m', 'prop': ''},
+                            {'abrev':'mt', 'prop': '-top'},
+                            {'abrev':'mr', 'prop': '-right'},
+                            {'abrev':'mb', 'prop': '-bottom'},
+                            {'abrev':'ml', 'prop': '-left'},
+                            {'abrev':'mx', 'prop': '-left and margin-right'},
+                            {'abrev':'my', 'prop': '-top and margin-bottom'}
+                            ].map((margin) => (
+                                <tr>
+                                    <td>{`${margin.abrev}-${marginValue}`}</td>
+                                    <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
+                                </tr>
+                            ))
+                        }
+                    </>
+                );
+            })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+---
+
+    <p class="h5 mb-8 font-size-16">Classes de Margin com breakpoint:</p>
+
+    <div class="h-400 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                    <th>Breakpoint</th>
+                </tr>
+            </thead>
+            <tbody>
+               {Array.from({ length: 65 }, (_, index) => {
+                    const marginValue = index * 4;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'m', 'prop': ''},
+                            {'abrev':'mt', 'prop': '-top'},
+                            {'abrev':'mr', 'prop': '-right'},
+                            {'abrev':'mb', 'prop': '-bottom'},
+                            {'abrev':'ml', 'prop': '-left'},
+                            {'abrev':'mx', 'prop': '-left and margin-right'},
+                            {'abrev':'my', 'prop': '-top and margin-bottom'}
+                            ].map((margin) => (
+                            [
+                            {'name':'xs', 'value': '600px'},
+                            {'name':'sm', 'value': '1024px'},
+                            {'name':'md', 'value': '1440px'},
+                            {'name':'lg', 'value': '1920px'},
+                            {'name':'xl', 'value': '2560px'}
+                            ].map((breakpoint) => (
+                            <tr key={`${margin.abrev}-${breakpoint.name}-${marginValue}`}>
+                                <td>{`${margin.abrev}-${breakpoint.name}-${marginValue}`}</td>
+                                <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
+                                <td>{`@media only screen and (min-width: ${breakpoint.value})`}</td>
+                            </tr>
+                            ))
+                        ))}
+                    </>
+                    );
+                })}
+            </tbody>
+        </table>
+    </div>

package/src/foundation/spacing/paddings.mdx

@@ -0,0 +1,156 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Spacing / Padding" />
+
+### Padding
+
+Os tamanhos para as classes de padding são sempre múltiplos de **4**, sendo o
+mínimo **0** e o máximo **64**.
+
+    <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>
+                {Array.from({ length: 17 }, (_, index) => {
+                    const paddingValue = index * 4;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'p', 'prop': ''},
+                            {'abrev':'pt', 'prop': '-top'},
+                            {'abrev':'pr', 'prop': '-right'},
+                            {'abrev':'pb', 'prop': '-bottom'},
+                            {'abrev':'pl', 'prop': '-left'},
+                            {'abrev':'px', 'prop': '-left and padding-right'},
+                            {'abrev':'py', 'prop': '-top and padding-bottom'}
+                            ].map((padding) => (
+                                <tr>
+                                    <td>{`${padding.abrev}-${paddingValue}`}</td>
+                                    <td>{`padding${padding.prop}: ${paddingValue}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-7 d-flex-sm-space-between">
+            <div class="accent-200-bg border-radius-4 p-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">p-12</div>
+            </div>
+            <div class="accent-200-bg border-radius-4 pt-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pt-12</div>
+            </div>
+            <div class="accent-200-bg border-radius-4 pr-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pr-12</div>
+            </div>
+            <div class="accent-200-bg border-radius-4 pb-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pb-12</div>
+            </div>
+            <div class="accent-200-bg border-radius-4 pl-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pl-12</div>
+            </div>
+            <div class="accent-200-bg border-radius-4 px-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">px-12</div>
+            </div>
+            <div class="accent-200-bg border-radius-4 py-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">py-12</div>
+            </div>
+        </div>
+        <div>
+            ```html
+            <div class="p-12">
+                <div class="h-12 w-12 ...">p-12</div>
+            </div>
+            <div class="pt-12">
+                <div class="h-12 w-12 ...">pt-12</div>
+            </div>
+            <div class="pr-12">
+                <div class="h-12 w-12 ...">pr-12</div>
+            </div>
+            <div class="pb-12">
+                <div class="h-12 w-12 ...">pb-12</div>
+            </div>
+            <div class="pl-12">
+                <div class="h-12 w-12 ...">pl-12</div>
+            </div>
+            <div class="px-12">
+                <div class="h-12 w-12 ...">px-12</div>
+            </div>
+            <div class="py-12">
+                <div class="h-12 w-12 ...">py-12</div>
+            </div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+---
+
+    <p class="h5 mb-8 font-size-16">Classes de Padding com breakpoint:</p>
+
+    <div class="h-400 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                    <th>Breakpoint</th>
+                </tr>
+            </thead>
+            <tbody>
+               {Array.from({ length: 17 }, (_, index) => {
+                    const paddingValue = index * 4;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'p', 'prop': ''},
+                            {'abrev':'pt', 'prop': '-top'},
+                            {'abrev':'pr', 'prop': '-right'},
+                            {'abrev':'pb', 'prop': '-bottom'},
+                            {'abrev':'pl', 'prop': '-left'},
+                            {'abrev':'px', 'prop': '-left and padding-right'},
+                            {'abrev':'py', 'prop': '-top and padding-bottom'}
+                            ].map((paddingType) => (
+                            [
+                            {'name':'xs', 'value': '600px'},
+                            {'name':'sm', 'value': '1024px'},
+                            {'name':'md', 'value': '1440px'},
+                            {'name':'lg', 'value': '1920px'},
+                            {'name':'xl', 'value': '2560px'}
+                            ].map((breakpoint) => (
+                            <tr key={`${paddingType.abrev}-${breakpoint.name}-${paddingValue}`}>
+                                <td>{`${paddingType.abrev}-${breakpoint.name}-${paddingValue}`}</td>
+                                <td>{`padding${paddingType.prop}: ${paddingValue}px;`}</td>
+                                <td>{`@media only screen and (min-width: ${breakpoint.value})`}</td>
+                            </tr>
+                        ))
+                        ))}
+                    </>
+                    );
+                })}
+            </tbody>
+        </table>
+    </div>

package/src/foundation/typography/colors.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Colors" />
+
+### Text Theme - Colors
+
+Definições de cores padrão para textos.
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg">
+            <p class="text-primary">Exemplo de cor no texto</p>
+            <p class="text-basic">Exemplo de cor no texto</p>
+            <p class="text-placeholder">Exemplo de cor no texto</p>
+            <p class="text-warn">Exemplo de cor no texto</p>
+            <p class="text-label">Exemplo de cor no texto</p>
+        </div>
+        <div>
+            ```html
+            <p class="text-primary">Exemplo de cor no texto</p>
+            <p class="text-basic">Exemplo de cor no texto</p>
+            <p class="text-placeholder">Exemplo de cor no texto</p>
+            <p class="text-warn">Exemplo de cor no texto</p>
+            <p class="text-label">Exemplo de cor no texto</p>
+            ```
+        </div>
+    </div>

package/src/foundation/typography/font-size.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Font-size" />
+
+### Font-size
+
+Nessa seção serão apresentadas as maneiras de se usar as classes para font-size.
+
+#### Pixels
+
+Os tamanhos em pixels das classes são sempre múltiplos de **2**, sendo o mínimo
+**2** e o máximo **72**.
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 36 }, (_, index) => {
+                const fontSizeValue = (index + 1)* 2;
+                return (
+                    <tr key={`font-size-${fontSizeValue}`}>
+                        <td>fs-{fontSizeValue}</td>
+                        <td>font-size: {fontSizeValue}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">
+            <p class="fs-12">font-size: 12px</p>
+            <p class="fs-16">font-size: 16px</p>
+            <p class="fs-22">font-size: 22px</p>
+            <p class="fs-24">font-size: 24px</p>
+            <p class="fs-28">font-size: 28px</p>
+        </div>
+        <div>
+            ```html
+            <p class="fs-12">font-size: 12px</p>
+            <p class="fs-16">font-size: 16px</p>
+            <p class="fs-22">font-size: 22px</p>
+            <p class="fs-24">font-size: 24px</p>
+            <p class="fs-28">font-size: 28px</p>
+            ```
+        </div>
+    </div>

package/src/foundation/typography/font-weight.mdx

@@ -0,0 +1,65 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Font-weight" />
+
+### Font-weight
+
+O **font-weight** é usado para controlar a espessura ou a intensidade da fonte
+de um texto e varia de 100 a 900.
+
+    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
+
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg">
+            <p class="fw-100">font-weight: 100</p>
+            <p class="fw-200">font-weight: 200</p>
+            <p class="fw-300">font-weight: 300</p>
+            <p class="fw-400">font-weight: 400</p>
+            <p class="fw-500">font-weight: 500</p>
+            <p class="fw-600">font-weight: 600</p>
+            <p class="fw-700">font-weight: 700</p>
+            <p class="fw-800">font-weight: 800</p>
+            <p class="fw-900">font-weight: 900</p>
+        </div>
+        <div>
+            ```html
+            <p class="fw-100">font-weight: 100</p>
+            <p class="fw-200">font-weight: 200</p>
+            <p class="fw-300">font-weight: 300</p>
+            <p class="fw-400">font-weight: 400</p>
+            <p class="fw-500">font-weight: 500</p>
+            <p class="fw-600">font-weight: 600</p>
+            <p class="fw-700">font-weight: 700</p>
+            <p class="fw-800">font-weight: 800</p>
+            <p class="fw-900">font-weight: 900</p>
+            ```
+        </div>
+    </div>
+
+### Outras classes
+
+<div class="h-256 w-100-p overflow-y-scroll">
+  <table class="w-100-p">
+    <thead>
+      <tr>
+        <th>Classe</th>
+        <th>Propriedade</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>text-regular</td>
+        <td>font-weight: 400</td>
+      </tr>
+      <tr>
+        <td>text-book</td>
+        <td>font-weight: 500</td>
+      </tr>
+      <tr>
+        <td>text-semibold</td>
+        <td>font-weight: 600</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/src/foundation/typography/helpers.mdx

@@ -0,0 +1,86 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Helpers" />
+
+### Helpers
+
+Classes para te auxiliar
+
+#### Definir número de linhas de um texto
+
+    <div class="h-24"></div>
+
+    <div class="matcha-card background-surface gap-16 d-flex-column d-flex-sm-row d-flex-sm-space-between">
+        <div class="matcha-card background-bg d-flex-column gap-8">
+            <p class="fs-16 lh-20 one-line-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur  adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. EtiamSed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. </p>
+            <p class="fs-16 lh-20 two-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
+            <p class="fs-16 lh-20 three-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
+            <p class="fs-16 lh-20 four-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
+            <p class="fs-16 lh-20 five-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
+        </div>
+        <div>
+            ```html
+            <p class="fs-16 one-line-text"></p>
+            <p class="fs-16 two-lines-text"></p>
+            <p class="fs-16 three-lines-text"></p>
+            <p class="fs-16 four-lines-text"></p>
+            <p class="fs-16 five-lines-text"></p>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Title
+
+    <div class="h-24"></div>
+
+    <div class="matcha-card background-surface gap-16 d-flex-column">
+        <div class="matcha-card background-bg d-flex-column">
+            <div class="title">
+                <p class="fs-16 title-bullet">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            </div>
+            <div class="title">
+                <p class="fs-16 title-content">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            </div>
+            <p class="fs-16 title-sm ">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+
+        </div>
+        <div>
+            ```html
+            <div class="title">
+                <p class="fs-16 title-bullet">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            </div>
+            <div class="title">
+                <p class="fs-16 title-content">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            </div>
+            <p class="fs-16 title-sm ">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Paragraph
+
+    <div class="h-24"></div>
+
+    <div class="matcha-card background-surface gap-16 d-flex-column">
+        <div class="matcha-card background-bg d-flex-column">
+            <p class="par-xs">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-sm">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-md">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-lg">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-xl">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+
+        </div>
+        <div>
+            ```html
+            <p class="par-xs">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-sm">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-md">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-lg">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            <p class="par-xl">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
+            ```
+        </div>
+    </div>

package/src/foundation/typography/letter-spacing.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Letter-spacing" />
+
+### Letter-spacing
+
+O **letter-spacing** é usado para ajustar o espaço entre os caracteres de um
+texto.
+
+    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
+
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-row gap-8">
+            <div>
+                <p class="fs-20">Condensed</p>
+                <p class="fs-16 lh-20 letter-spacing-condensed background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
+            </div>
+            <div>
+                <p class="fs-20">Normal</p>
+                <p class="fs-16 lh-20 letter-spacing-normal background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
+            </div>
+            <div>
+                <p class="fs-20">Relaxed</p>
+                <p class="fs-16 lh-20 letter-spacing-relaxed background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
+            </div>
+        </div>
+        <div>
+            ```html
+            <p class="letter-spacing-condensed">letter-spacing: -.08em</p>
+            <p class="letter-spacing-normal">letter-spacing: normal</p>
+            <p class="letter-spacing-relaxed">letter-spacing: .08em</p>
+            ```
+        </div>
+    </div>