matcha-components 20.12.0 → 20.15.0

package/src/documentation/foundation/spacing/margins.mdx

@@ -0,0 +1,227 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / Spacing / Margin" />
+
+# Margin
+
+Os tamanhos para as classes de margin são sempre múltiplos de **4**, sendo o máximo **64**.
+
+Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
+
+Anatomia da classe: `.m#{$direction}#{$infix}#{$margin-value}#{$has-important}` => `.mt-md-16--force`.
+
+### Exemplos
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-7 d-flex-sm-space-between">
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14 m-12--force">m-12</div>
+        </div>
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-top-4 flex-center-center h-52 w-52 text-center font-size-14 mt-12--force">mt-12</div>
+        </div>
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-right-4 flex-center-center h-52 w-52 text-center font-size-14 mr-12--force">mr-12</div>
+        </div>
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-bottom-4 flex-center-center h-52 w-52 text-center font-size-14 mb-12--force">mb-12</div>
+        </div>
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-left-4 flex-center-center h-52 w-52 text-center font-size-14 ml-12--force">ml-12</div>
+        </div>
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14 mx-12--force">mx-12</div>
+        </div>
+        <div class="background-accent-alpha border-color-accent radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 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>
+
+
+### Atributos
+
+<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 key={`${margin.abrev}-${marginValue}`}>
+                                <td>{`${margin.abrev}-${marginValue}`}</td>
+                                <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
+                            </tr>
+                        ))}
+                    </>
+                );
+            })}
+        </tbody>
+    </table>
+</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 key={`${margin.abrev}-${marginValue}`}>
+                                <td>{`${margin.abrev}-${marginValue}`}</td>
+                                <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
+                            </tr>
+                        ))}
+                    </>
+                );
+            })}
+        </tbody>
+    </table>
+</div>
+
+---
+
+### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+---
+
+### Classes de Margin com breakpoint
+
+<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>
+
+
+### Instalação
+Para utilizar as classes de _Margin_, você pode fazer de duas formas:
+
+Primeira opção, você pode importar o pacote matcha-core no seu projeto.
+
+1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
+
+`npm install matcha-core`
+
+2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação via estilo global:</span>
+    <div class="flex-column">
+        ```css
+        @import 'node_modules/matcha-core/matcha-core.min.css';
+        ```
+    </div>
+
+    <span class="h6">Importação via angular.json:</span>
+    <div class="flex-column">
+        ```js
+        "styles": [
+            "node_modules/matcha-core/matcha-core.min.css"
+        ]
+        ```
+    </div>
+</div>
+
+
+Segunda opção, você pode importar o pacote diretamente no seu HTML.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação na tag header do HTML</span>
+    <div class="flex-column">
+        ```html
+        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
+        ```
+    </div>
+</div>

package/src/documentation/foundation/spacing/paddings.mdx

@@ -0,0 +1,225 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / Spacing / Padding" />
+
+# Padding
+
+Os tamanhos para as classes de padding são sempre múltiplos de **4**, sendo o máximo **64**.
+
+Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
+
+Anatomia da classe: `.p#{$direction}#{$infix}#{$padding-value}#{$has-important}` => `.pt-md-16--force`.
+
+### Exemplos
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-7 d-flex-sm-space-between">
+        <div class="background-accent-alpha radius-4 p-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">p-12</div>
+        </div>
+        <div class="background-accent-alpha radius-4 pt-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">pt-12</div>
+        </div>
+        <div class="background-accent-alpha radius-4 pr-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">pr-12</div>
+        </div>
+        <div class="background-accent-alpha radius-4 pb-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">pb-12</div>
+        </div>
+        <div class="background-accent-alpha radius-4 pl-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">pl-12</div>
+        </div>
+        <div class="background-accent-alpha radius-4 px-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">px-12</div>
+        </div>
+        <div class="background-accent-alpha radius-4 py-12" style={{ height: 'fit-content', width: 'fit-content'}}>
+            <div class="accent radius-4 flex-center-center h-52 w-52 text-center font-size-14">py-12</div>
+        </div>
+    </div>
+    <div>
+        ```html
+        <div class="p-12">p-12</div>
+        <div class="pt-12">pt-12</div>
+        <div class="pr-12">pr-12</div>
+        <div class="pb-12">pb-12</div>
+        <div class="pl-12">pl-12</div>
+        <div class="px-12">px-12</div>
+        <div class="py-12">py-12</div>
+        ```
+    </div>
+</div>
+
+### Atributos
+
+<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 key={`${padding.abrev}-${paddingValue}`}>
+                                <td>{`${padding.abrev}-${paddingValue}`}</td>
+                                <td>{`padding${padding.prop}: ${paddingValue}px;`}</td>
+                            </tr>
+                        ))}
+                    </>
+                );
+            })}
+        </tbody>
+    </table>
+</div>
+
+---
+
+### Valores negativos
+
+Os tamanhos para as classes de padding 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 paddingValue = (index - 16) * 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 key={`${padding.abrev}-${paddingValue}`}>
+                                <td>{`${padding.abrev}-${paddingValue}`}</td>
+                                <td>{`padding${padding.prop}: ${paddingValue}px;`}</td>
+                            </tr>
+                        ))}
+                    </>
+                );
+            })}
+        </tbody>
+    </table>
+</div>
+
+---
+
+### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+---
+
+### Classes de Padding com breakpoint
+
+<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 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) => (
+                            [
+                                { 'name': 'xs', 'value': '600px' },
+                                { 'name': 'sm', 'value': '1024px' },
+                                { 'name': 'md', 'value': '1440px' },
+                                { 'name': 'lg', 'value': '1920px' },
+                                { 'name': 'xl', 'value': '2560px' }
+                            ].map((breakpoint) => (
+                                <tr key={`${padding.abrev}-${breakpoint.name}-${paddingValue}`}>
+                                    <td>{`${padding.abrev}-${breakpoint.name}-${paddingValue}`}</td>
+                                    <td>{`padding${padding.prop}: ${paddingValue}px;`}</td>
+                                    <td>{`@media only screen and (min-width: ${breakpoint.value})`}</td>
+                                </tr>
+                            ))
+                        ))}
+                    </>
+                );
+            })}
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+
+Para utilizar as classes de _Padding_, você pode fazer de duas formas:
+
+Primeira opção, você pode importar o pacote matcha-core no seu projeto.
+
+1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
+
+`npm install matcha-core`
+
+2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação via estilo global:</span>
+    <div class="flex-column">
+        ```css
+        @import 'node_modules/matcha-core/matcha-core.min.css';
+        ```
+    </div>
+
+    <span class="h6">Importação via angular.json:</span>
+    <div class="flex-column">
+        ```js
+        "styles": [
+            "node_modules/matcha-core/matcha-core.min.css"
+        ]
+        ```
+    </div>
+</div>
+
+Segunda opção, você pode importar o pacote diretamente no seu HTML.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação na tag header do HTML</span>
+    <div class="flex-column">
+        ```html
+        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
+        ```
+    </div>
+</div>

package/src/documentation/foundation/typography/colors.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / Typography / Colors" />
+
+### Text Theme - Colors
+
+Definições de cores padrão para textos.
+
+    <div class="matcha-card background-surface 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/documentation/foundation/typography/font-size.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / 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 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/documentation/foundation/typography/font-weight.mdx

@@ -0,0 +1,85 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / 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, no entanto no Design System só temos 4 pesos oficiais para o projeto, 400, 500, 700 e 900.
+
+    <div class="matcha-card background-surface flex-column gap-16 mb-8">
+        <div class="matcha-card background-bg">
+            <p class="fw-400 fs-32">REGULAR - font-weight: 400</p>
+            <p class="fw-500 fs-32">MEDIUM - font-weight: 500</p>
+            <p class="fw-700 fs-32">BOLD - font-weight: 700</p>
+            <p class="fw-900 fs-32">BLACK - font-weight: 900</p>
+        </div>
+    </div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Todas as classes de Font-Weight</p>
+
+    <div class="matcha-card background-surface 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: 400</td>
+      </tr>
+      <tr>
+        <td>text-medium</td>
+        <td>font-weight: 500</td>
+      </tr>
+      <tr>
+        <td>text-semibold</td>
+        <td>font-weight: 500</td>
+      </tr>
+      <tr>
+        <td>text-bold</td>
+        <td>font-weight: 700</td>
+      </tr>
+      <tr>
+        <td>text-black</td>
+        <td>font-weight: 900</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / 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 flex-column gap-16">
+        <div class="matcha-card background-bg flex-row gap-8">
+            <div>
+                <p class="fs-20">Condensed</p>
+                <p class="fs-16 lh-20 letter-spacing-condensed background-surface p-8 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 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 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>