feat: implement official brand font and conduct style audit

Author: vandre-sales

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0] - 2024-08-01
+
+### Added
+- **Governance:** Created a comprehensive style audit report at `design/style-refactor.md` to document inconsistencies and guide refactoring efforts.
+- **Documentation:** Added a Markdown syntax guide at `design/teste.md`.
+
+### Changed
+- **Branding:** Applied the official 'Montserrat' font to the design system, replacing the default system font stack to align with brand guidelines.
+- **Tokens:** Refined color tokens for shadows (elevation) to be based on the official color palette, removing hardcoded values.
+
 ## [0.2.0] - 2024-07-31
 
 ### Changed

design/style-refactor.md

@@ -0,0 +1,179 @@
+# Guia Rápido de Sintaxe Markdown
+
+Este documento serve como um guia de referência para as sintaxes mais comuns da linguagem Markdown.
+
+---
+
+## 1. Cabeçalhos
+
+Use o símbolo `#` para criar cabeçalhos. A quantidade de `#` define o nível do cabeçalho.
+
+```markdown
+# Cabeçalho Nível 1 (H1)
+## Cabeçalho Nível 2 (H2)
+### Cabeçalho Nível 3 (H3)
+#### Cabeçalho Nível 4 (H4)
+##### Cabeçalho Nível 5 (H5)
+###### Cabeçalho Nível 6 (H6)
+```
+
+---
+
+## 2. Estilos de Texto
+
+Você pode formatar o texto de várias maneiras:
+
+- **Negrito:** Envolva o texto com dois asteriscos `**` ou dois underscores `__`.
+  - `**Texto em negrito**` se torna **Texto em negrito**.
+- *Itálico:* Envolva o texto com um asterisco `*` ou um underscore `_`.
+  - `*Texto em itálico*` se torna *Texto em itálico*.
+- ***Negrito e Itálico:*** Combine os dois.
+  - `***Texto em negrito e itálico***` se torna ***Texto em negrito e itálico***.
+- ~~Tachado:~~ Envolva o texto com dois tils `~~`.
+  - `~~Texto tachado~~` se torna ~~Texto tachado~~.
+
+---
+
+## 3. Listas
+
+### Listas Não Ordenadas
+
+Use um asterisco `*`, hífen `-`, ou sinal de mais `+` no início da linha.
+
+```markdown
+* Item 1
+* Item 2
+  * Item aninhado 2.1
+  * Item aninhado 2.2
+* Item 3
+```
+
+- **Resultado:**
+  * Item 1
+  * Item 2
+    * Item aninhado 2.1
+    * Item aninhado 2.2
+  * Item 3
+
+### Listas Ordenadas
+
+Use números seguidos de um ponto.
+
+```markdown
+1. Primeiro item
+2. Segundo item
+3. Terceiro item
+   1. Sub-item 3.1
+```
+
+- **Resultado:**
+  1. Primeiro item
+  2. Segundo item
+  3. Terceiro item
+     1. Sub-item 3.1
+
+---
+
+## 4. Citações (Blockquotes)
+
+Use o sinal de maior que `>` no início da linha.
+
+```markdown
+> Esta é uma citação.
+>
+> > Citações também podem ser aninhadas.
+```
+
+- **Resultado:**
+  > Esta é uma citação.
+  >
+  > > Citações também podem ser aninhadas.
+
+---
+
+## 5. Código
+
+### Código Inline
+
+Envolva o código com crases simples `` ` ``.
+
+```markdown
+Use a função `console.log()` para exibir mensagens.
+```
+
+- **Resultado:**
+  Use a função `console.log()` para exibir mensagens.
+
+### Bloco de Código
+
+Envolva o bloco de código com três crases ``` ```. Você também pode especificar a linguagem para obter realce de sintaxe.
+
+````markdown
+```javascript
+function greet(name) {
+  console.log(`Olá, ${name}!`);
+}
+```
+````
+
+- **Resultado:**
+  ```javascript
+  function greet(name) {
+    console.log(`Olá, ${name}!`);
+  }
+  ```
+
+---
+
+## 6. Links
+
+A sintaxe básica é `[Texto do link](URL)`.
+
+```markdown
+Acesse o [GitHub da Meliva](https://github.com/vandre-sales/meliva-design-system).
+```
+
+- **Resultado:**
+  Acesse o [GitHub da Meliva](https://github.com/vandre-sales/meliva-design-system).
+
+---
+
+## 7. Imagens
+
+A sintaxe é similar à de links, mas com um `!` no início: `![Texto alternativo](URL da imagem)`.
+
+```markdown
+![Logo da Meliva.ai](https://user-images.githubusercontent.com/1284733/267599023-cfb01519-24d1-41b5-82e7-293a51f2845c.svg)
+```
+
+---
+
+## 8. Linhas Horizontais
+
+Para criar uma linha divisória, use três ou mais hifens `---`, asteriscos `***`, ou underscores `___` em uma linha.
+
+```markdown
+---
+```
+
+- **Resultado:**
+  ---
+
+---
+
+## 9. Tabelas
+
+Crie colunas com a barra vertical `|` e separe o cabeçalho do corpo com hifens `-`.
+
+```markdown
+| Coluna 1 | Coluna 2 | Coluna 3 |
+| :--- | :---: | ---: |
+| Alinhado à esquerda | Alinhado ao centro | Alinhado à direita |
+| Conteúdo | Conteúdo | Conteúdo |
+```
+
+- **Resultado:**
+  | Coluna 1 | Coluna 2 | Coluna 3 |
+  | :--- | :---: | ---: |
+  | Alinhado à esquerda | Alinhado ao centro | Alinhado à direita |
+  | Conteúdo | Conteúdo | Conteúdo |

design/teste.md

@@ -17,17 +17,17 @@
 :root {
   color-scheme: normal;
 
-  --sl-color-primary-50: var(--sl-color-sky-50);
-  --sl-color-primary-100: var(--sl-color-sky-100);
-  --sl-color-primary-200: var(--sl-color-sky-200);
-  --sl-color-primary-300: var(--sl-color-sky-300);
-  --sl-color-primary-400: var(--sl-color-sky-400);
-  --sl-color-primary-500: var(--sl-color-sky-500);
-  --sl-color-primary-600: var(--sl-color-sky-600);
-  --sl-color-primary-700: var(--sl-color-sky-700);
-  --sl-color-primary-800: var(--sl-color-sky-800);
-  --sl-color-primary-900: var(--sl-color-sky-900);
-  --sl-color-primary-950: var(--sl-color-sky-950);
+  --sl-color-primary-50: #f4f7f9;
+  --sl-color-primary-100: #d7e4ed;
+  --sl-color-primary-200: #b8d1e4;
+  --sl-color-primary-300: #96bfdd;
+  --sl-color-primary-400: #72add8;
+  --sl-color-primary-500: #4b9cd6;
+  --sl-color-primary-600: #278ad2;
+  --sl-color-primary-700: #1a75b5;
+  --sl-color-primary-800: #1a5d8d;
+  --sl-color-primary-900: #174566;
+  --sl-color-primary-950: #122e43;
 
   --docs-overlay-color: hsl(240 3.8% 46.1% / 33%);
   --docs-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
@@ -122,7 +122,7 @@ html {
 body {
   height: 100%;
   font: 16px var(--sl-font-sans);
-  font-weight: var(--sl-font-weight-normal);
+  font-weight: var(--sl-font-weight-light);
   background-color: var(--docs-background-color);
   line-height: var(--sl-line-height-normal);
   color: var(--sl-color-neutral-900);
@@ -142,6 +142,7 @@ h5,
 h6 {
   font-family: var(--sl-font-sans);
   font-weight: var(--sl-font-weight-semibold);
+  color: var(--sl-color-primary-500);
   margin: 3rem 0 1.5rem 0;
 }
 

docs/assets/images/og-image.png

@@ -7,7 +7,7 @@ toc: false
 
 <div class="splash">
 <div class="splash-start">
-<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
+<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Meliva.ai">
 
 # <sl-visually-hidden>Shoelace:</sl-visually-hidden> A forward-thinking library of web components.
 

docs/assets/images/touch-icon.png

@@ -14,7 +14,7 @@ The default font stack is designed to be simple and highly available on as many
 
 | Token             | Value                                                                                                                                         | Example                                                                                              |
 | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `--sl-font-sans`  | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | <span style="font-family: var(--sl-font-sans)">The quick brown fox jumped over the lazy dog.</span>  |
+| `--sl-font-sans`  | 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | <span style="font-family: var(--sl-font-sans)">The quick brown fox jumped over the lazy dog.</span>  |
 | `--sl-font-serif` | Georgia, 'Times New Roman', serif                                                                                                             | <span style="font-family: var(--sl-font-serif)">The quick brown fox jumped over the lazy dog.</span> |
 | `--sl-font-mono`  | SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;                                                                                | <span style="font-family: var(--sl-font-mono)">The quick brown fox jumped over the lazy dog.</span>  |