voa-ds-core 1.0.3

package/dist/collection/Stories/styles/voa-radio.styles.js

@@ -0,0 +1,155 @@
+import { css } from "lit";
+export const voaRadioStyles = css `
+  :host {
+    /* Tamanhos */
+    --voa-radio-size: 20px;
+    --voa-radio-inner-size: 8px;
+    --voa-radio-border-width: 1.5px;
+    
+    /* Cores do Design System */
+    --voa-radio-neutral: #ffffff;
+    --voa-radio-primary-light-200: #008fff;
+    --voa-radio-primary-light-400: #0071c8;
+    --voa-radio-primary-opacity-15: #0064cb26;
+    --voa-radio-primary-opacity-25: #0064cb40;
+    --voa-radio-secondary-light-100: #b5eee3;
+    --voa-radio-secondary-light-400: #49bcab;
+    --voa-radio-secondary-50: #00e5ce80;
+    --voa-radio-fill-secondary: #18181b0f;
+    --voa-radio-fill-25: #18181b40;
+    --voa-radio-disabled: #dee2e6;
+    --voa-radio-disabled-text: #0b121540;
+
+    /* Sombras */
+    --voa-radio-shadow-surface: 0px 8px 16px 0px rgba(255, 255, 255, 0.02),
+                               0px 4px 4px 0px rgba(0, 0, 0, 0.25),
+                               0px 2.5px 0px 0px rgba(255, 255, 255, 0.05) inset,
+                               0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    
+    display: inline-block;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .radio-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+
+  :host([disabled]) .radio-container {
+    cursor: not-allowed;
+  }
+
+  input[type="radio"] {
+    /* Reset */
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    
+    /* Estilos base */
+    width: var(--voa-radio-size);
+    height: var(--voa-radio-size);
+    border: var(--voa-radio-border-width) solid var(--voa-radio-primary-light-400);
+    border-radius: 50%;
+    background-color: var(--voa-radio-neutral);
+    
+    /* Layout */
+    display: grid;
+    place-content: center;
+    flex-shrink: 0;
+    
+    /* Transições */
+    transition: all 0.2s ease-in-out;
+  }
+
+  /* Hover - Primary */
+  :host(:not([disabled]):not([variant="secondary"])) input[type="radio"]:hover {
+    border-color: var(--voa-radio-primary-light-200);
+    box-shadow: 0 0 0 4px var(--voa-radio-primary-opacity-15);
+  }
+
+  /* Hover - Secondary */
+  :host([variant="secondary"]:not([disabled])) input[type="radio"]:hover {
+    border-color: var(--voa-radio-secondary-light-400);
+    box-shadow: 0 0 0 4px var(--voa-radio-secondary-50);
+  }
+
+  /* Checked - Primary */
+  input[type="radio"]::before {
+    content: "";
+    width: var(--voa-radio-inner-size);
+    height: var(--voa-radio-inner-size);
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--voa-radio-neutral);
+  }
+
+  :host(:not([disabled]):not([variant="secondary"])) input[type="radio"]:checked {
+    background: var(--voa-radio-primary-light-200);
+    border-color: var(--voa-radio-primary-light-400);
+    box-shadow: var(--voa-radio-shadow-surface);
+  }
+
+  /* Checked - Secondary */
+  :host([variant="secondary"]:not([disabled])) input[type="radio"]:checked {
+    background: var(--voa-radio-secondary-light-100);
+    border-color: var(--voa-radio-secondary-light-400);
+    box-shadow: var(--voa-radio-shadow-surface);
+  }
+
+  :host([variant="secondary"]:not([disabled])) input[type="radio"]:checked::before {
+    background-color: var(--voa-radio-secondary-light-400);
+  }
+
+  input[type="radio"]:checked::before {
+    transform: scale(1);
+  }
+
+  /* Focus */
+  :host(:not([variant="secondary"])) input[type="radio"]:focus-visible {
+    outline: 2px solid var(--voa-radio-primary-light-200);
+    outline-offset: 2px;
+  }
+
+  :host([variant="secondary"]) input[type="radio"]:focus-visible {
+    outline: 2px solid var(--voa-radio-secondary-light-400);
+    outline-offset: 2px;
+  }
+
+  /* Disabled - Primary */
+  :host([disabled]:not([variant="secondary"])) input[type="radio"] {
+    background: var(--voa-radio-disabled);
+    border-color: var(--voa-radio-fill-25);
+  }
+
+  :host([disabled]:not([variant="secondary"])) input[type="radio"]:checked::before {
+    background-color: var(--voa-radio-fill-25);
+  }
+
+  /* Disabled - Secondary */
+  :host([disabled][variant="secondary"]) input[type="radio"] {
+    background: var(--voa-radio-disabled);
+    border-color: var(--voa-radio-fill-25);
+  }
+
+  :host([disabled][variant="secondary"]) input[type="radio"]:checked::before {
+    background-color: var(--voa-radio-fill-25);
+  }
+
+  /* Label */
+  .label {
+    font-size: 14px;
+    line-height: 1.4;
+    color: currentColor;
+  }
+
+  :host([disabled]) .label {
+    color: var(--voa-radio-disabled-text);
+  }
+`;
+//# sourceMappingURL=voa-radio.styles.js.map

package/dist/collection/Stories/styles/voa-radio.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-radio.styles.js","sourceRoot":"","sources":["../../../src/Stories/styles/voa-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJhC,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nexport const voaRadioStyles = css`\r\n  :host {\r\n    /* Tamanhos */\r\n    --voa-radio-size: 20px;\r\n    --voa-radio-inner-size: 8px;\r\n    --voa-radio-border-width: 1.5px;\r\n    \r\n    /* Cores do Design System */\r\n    --voa-radio-neutral: #ffffff;\r\n    --voa-radio-primary-light-200: #008fff;\r\n    --voa-radio-primary-light-400: #0071c8;\r\n    --voa-radio-primary-opacity-15: #0064cb26;\r\n    --voa-radio-primary-opacity-25: #0064cb40;\r\n    --voa-radio-secondary-light-100: #b5eee3;\r\n    --voa-radio-secondary-light-400: #49bcab;\r\n    --voa-radio-secondary-50: #00e5ce80;\r\n    --voa-radio-fill-secondary: #18181b0f;\r\n    --voa-radio-fill-25: #18181b40;\r\n    --voa-radio-disabled: #dee2e6;\r\n    --voa-radio-disabled-text: #0b121540;\r\n\r\n    /* Sombras */\r\n    --voa-radio-shadow-surface: 0px 8px 16px 0px rgba(255, 255, 255, 0.02),\r\n                               0px 4px 4px 0px rgba(0, 0, 0, 0.25),\r\n                               0px 2.5px 0px 0px rgba(255, 255, 255, 0.05) inset,\r\n                               0px 4px 4px 0px rgba(0, 0, 0, 0.25);\r\n    \r\n    display: inline-block;\r\n    font-family: system-ui, -apple-system, sans-serif;\r\n  }\r\n\r\n  .radio-container {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    user-select: none;\r\n  }\r\n\r\n  :host([disabled]) .radio-container {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  input[type=\"radio\"] {\r\n    /* Reset */\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    \r\n    /* Estilos base */\r\n    width: var(--voa-radio-size);\r\n    height: var(--voa-radio-size);\r\n    border: var(--voa-radio-border-width) solid var(--voa-radio-primary-light-400);\r\n    border-radius: 50%;\r\n    background-color: var(--voa-radio-neutral);\r\n    \r\n    /* Layout */\r\n    display: grid;\r\n    place-content: center;\r\n    flex-shrink: 0;\r\n    \r\n    /* Transições */\r\n    transition: all 0.2s ease-in-out;\r\n  }\r\n\r\n  /* Hover - Primary */\r\n  :host(:not([disabled]):not([variant=\"secondary\"])) input[type=\"radio\"]:hover {\r\n    border-color: var(--voa-radio-primary-light-200);\r\n    box-shadow: 0 0 0 4px var(--voa-radio-primary-opacity-15);\r\n  }\r\n\r\n  /* Hover - Secondary */\r\n  :host([variant=\"secondary\"]:not([disabled])) input[type=\"radio\"]:hover {\r\n    border-color: var(--voa-radio-secondary-light-400);\r\n    box-shadow: 0 0 0 4px var(--voa-radio-secondary-50);\r\n  }\r\n\r\n  /* Checked - Primary */\r\n  input[type=\"radio\"]::before {\r\n    content: \"\";\r\n    width: var(--voa-radio-inner-size);\r\n    height: var(--voa-radio-inner-size);\r\n    border-radius: 50%;\r\n    transform: scale(0);\r\n    transition: 120ms transform ease-in-out;\r\n    background-color: var(--voa-radio-neutral);\r\n  }\r\n\r\n  :host(:not([disabled]):not([variant=\"secondary\"])) input[type=\"radio\"]:checked {\r\n    background: var(--voa-radio-primary-light-200);\r\n    border-color: var(--voa-radio-primary-light-400);\r\n    box-shadow: var(--voa-radio-shadow-surface);\r\n  }\r\n\r\n  /* Checked - Secondary */\r\n  :host([variant=\"secondary\"]:not([disabled])) input[type=\"radio\"]:checked {\r\n    background: var(--voa-radio-secondary-light-100);\r\n    border-color: var(--voa-radio-secondary-light-400);\r\n    box-shadow: var(--voa-radio-shadow-surface);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]:not([disabled])) input[type=\"radio\"]:checked::before {\r\n    background-color: var(--voa-radio-secondary-light-400);\r\n  }\r\n\r\n  input[type=\"radio\"]:checked::before {\r\n    transform: scale(1);\r\n  }\r\n\r\n  /* Focus */\r\n  :host(:not([variant=\"secondary\"])) input[type=\"radio\"]:focus-visible {\r\n    outline: 2px solid var(--voa-radio-primary-light-200);\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) input[type=\"radio\"]:focus-visible {\r\n    outline: 2px solid var(--voa-radio-secondary-light-400);\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  /* Disabled - Primary */\r\n  :host([disabled]:not([variant=\"secondary\"])) input[type=\"radio\"] {\r\n    background: var(--voa-radio-disabled);\r\n    border-color: var(--voa-radio-fill-25);\r\n  }\r\n\r\n  :host([disabled]:not([variant=\"secondary\"])) input[type=\"radio\"]:checked::before {\r\n    background-color: var(--voa-radio-fill-25);\r\n  }\r\n\r\n  /* Disabled - Secondary */\r\n  :host([disabled][variant=\"secondary\"]) input[type=\"radio\"] {\r\n    background: var(--voa-radio-disabled);\r\n    border-color: var(--voa-radio-fill-25);\r\n  }\r\n\r\n  :host([disabled][variant=\"secondary\"]) input[type=\"radio\"]:checked::before {\r\n    background-color: var(--voa-radio-fill-25);\r\n  }\r\n\r\n  /* Label */\r\n  .label {\r\n    font-size: 14px;\r\n    line-height: 1.4;\r\n    color: currentColor;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    color: var(--voa-radio-disabled-text);\r\n  }\r\n`; "]}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,50 @@
+{
+  "entries": [
+    "components/voa-checkbox/voa-checkbox.js",
+    "components/voa-accordion/voa-accordion.js",
+    "components/voa-alert/voa-alert.js",
+    "components/voa-button/voa-button.js",
+    "components/voa-avatar/voa-avatar.js",
+    "components/voa-badge/voa-badge.js",
+    "components/voa-breadcrumbs/voa-breadcrumbs.js",
+    "components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.js",
+    "components/voa-breadcrumbs-item/voa-breadcrumbs-item.js",
+    "components/voa-card/voa-card.js",
+    "components/voa-datepicker/datepicker.js",
+    "components/voa-drawer/drawer.js",
+    "components/voa-dropdown/dropdown.js",
+    "components/voa-input/voa-input.js",
+    "components/voa-input-addon/voa-input-addon.js",
+    "components/voa-keybinding/voa-keybinding.js",
+    "components/voa-link/link.js",
+    "components/voa-list/list.js",
+    "components/voa-modal/modal.js",
+    "components/voa-option/voa-option.js",
+    "components/voa-pagination/voa-pagination-item.js",
+    "components/voa-pagination/voa-pagination.js",
+    "components/voa-progress/progress.js",
+    "components/voa-radio/voa-radio.js",
+    "components/voa-select/voa-container-multi-select.js",
+    "components/voa-select/voa-select-base.js",
+    "components/voa-select/voa-select.js",
+    "components/voa-skeleton/skeleton.js",
+    "components/voa-stepper/stepper.js",
+    "components/voa-switch/voa-switch.js",
+    "components/voa-tab/voa-tab.js",
+    "components/voa-tab-item/voa-tab-item.js",
+    "components/voa-table/table.js",
+    "components/voa-tag/voa-tag.js",
+    "components/voa-text-area/voa-text-area.js",
+    "components/voa-timepicker/timepicker.js",
+    "components/voa-tooltip/voa-tooltip.js",
+    "components/voa-tooltip-arrow/voa-tooltip-arrow.js",
+    "components/voa-upload/upload.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.38.3",
+    "typescriptVersion": "5.9.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/GetStarted/AddingNewBrand.stories.js

@@ -0,0 +1,214 @@
+import { html } from "lit-html";
+export default {
+    title: "Documentação/Adicionar Nova Marca",
+};
+const Template = () => html `
+  <style>
+    .tutorial-container {
+      font-family: var(--font-family-sans, Arial), sans-serif;
+      line-height: 1.6;
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    
+    pre {
+      background-color: #f5f5f5;
+      padding: 15px;
+      border-radius: 5px;
+      overflow-x: auto;
+      margin: 10px 0;
+    }
+    
+    h2 {
+      margin-top: 40px;
+      color: var(--primary, #333);
+      border-bottom: 2px solid var(--primary-opacity-15, #eee);
+      padding-bottom: 8px;
+    }
+    
+    h3 {
+      margin-top: 24px;
+      color: var(--primary-400, #444);
+    }
+
+    .code-block {
+      margin: 20px 0;
+    }
+
+    .checklist {
+      background: #f8f9fa;
+      padding: 15px;
+      border-radius: 4px;
+      margin: 10px 0;
+    }
+
+    .tips {
+      background: #e9ecef;
+      padding: 15px;
+      border-radius: 4px;
+      margin: 20px 0;
+    }
+  </style>
+
+  <div class="tutorial-container">
+    <h1>Tutorial: Como Adicionar uma Nova Marca ao Design System</h1>
+    <p>
+      Olá! Este guia vai te ajudar a adicionar uma nova marca ao nosso Design System passo a passo. 
+      Vamos usar como exemplo a adição de uma marca chamada "TutorialBrand".
+    </p>
+
+    <h2>Pré-requisitos</h2>
+    <ul>
+      <li>Node.js instalado</li>
+      <li>Acesso ao repositório do projeto</li>
+      <li>Editor de código (VS Code recomendado)</li>
+    </ul>
+
+    <h2>Passo 1: Preparando o Ambiente</h2>
+    <p>Primeiro, navegue até a pasta do projeto:</p>
+    <pre><code>cd DS-GAB/packages/core/src/tokens/</code></pre>
+
+    <p>Você verá a seguinte estrutura:</p>
+    <pre><code>tokens/
+├── brands/
+│   ├── coi.ts
+│   ├── devops.ts
+│   ├── godrive.ts
+│   └── index.ts
+├── base/
+│   ├── colors.ts
+│   ├── spacing.ts
+│   ├── radius.ts
+│   └── mediaQueries.ts
+└── types.ts</code></pre>
+
+    <h2>Passo 2: Criando o Arquivo da Nova Marca</h2>
+    <p>Crie um novo arquivo chamado tutorial-brand.ts na pasta brands:</p>
+
+    <div class="code-block">
+      <pre><code>// src/tokens/brands/tutorial-brand.ts
+
+import { Theme } from '../types';
+import { baseColors } from '../base/colors';
+import { Spacing } from '../base/spacing';
+import { BorderRadius } from '../base/radius';
+import { mediaQueries } from '../base/mediaQueries';
+
+export const TutorialBrand: Theme = {
+  colors: {
+    light: {
+      // Cores principais com suas variações
+      primary: '#007AFF',          // Azul principal
+      primary100: '#CCE4FF',       // Azul mais claro
+      primary200: '#99C9FF',
+      primary400: '#0055B3',
+      primary500: '#003D80',
+      // ... resto do código
+    },
+    dark: {
+      // Configurações do tema dark
+    }
+  },
+  // ... resto das configurações
+};</code></pre>
+    </div>
+
+    <h2>Passo 3: Atualizando o Arquivo de Índice</h2>
+    <pre><code>// src/tokens/brands/index.ts
+
+import { TutorialBrand } from './tutorial-brand';
+import { Coi } from './coi';
+import { Godrive } from './godrive';
+import { Devops } from './devops';
+import { Theme } from '../types';
+
+export const brandingTokens: Record<string, Theme> = {
+  Coi,
+  Devops,
+  Godrive,
+  TutorialBrand,
+};</code></pre>
+
+    <h2>Passo 4: Atualizando os Tipos</h2>
+    <pre><code>// src/tokens/types.ts
+type Brand = 'Devops' | 'Coi' | 'Godrive' | 'TutorialBrand';</code></pre>
+
+    <h2>Passo 5: Testando sua Nova Marca</h2>
+    <div class="code-block">
+      <h3>React</h3>
+      <pre><code>&lt;ThemeProvider brand="TutorialBrand" theme="light"&gt;
+  &lt;div&gt;Teste da Nova Marca&lt;/div&gt;
+&lt;/ThemeProvider&gt;</code></pre>
+
+      <h3>Vue</h3>
+      <pre><code>&lt;ds-theme-provider brand="TutorialBrand" theme="light"&gt;
+  &lt;div&gt;Teste da Nova Marca&lt;/div&gt;
+&lt;/ds-theme-provider&gt;</code></pre>
+
+      <h3>Angular</h3>
+      <pre><code>&lt;ds-theme-provider brand="TutorialBrand" theme="light"&gt;
+  &lt;div&gt;Teste da Nova Marca&lt;/div&gt;
+&lt;/ds-theme-provider&gt;</code></pre>
+    </div>
+
+    <h2>Checklist Final</h2>
+    <div class="checklist">
+      <ul>
+        <li>Criou o arquivo da marca em src/tokens/brands/</li>
+        <li>Definiu todas as cores necessárias para temas light e dark</li>
+        <li>Incluiu todas as variações de opacidade (50%, 25%, 15%)</li>
+        <li>Configurou as fontes corretamente</li>
+        <li>Importou a marca no index.ts</li>
+        <li>Atualizou os tipos em types.ts</li>
+        <li>Testou a marca em modo light e dark</li>
+        <li>Verificou se o build está funcionando</li>
+      </ul>
+    </div>
+
+    <h2>Dicas Importantes</h2>
+    <div class="tips">
+      <h3>Cores</h3>
+      <ul>
+        <li>Use valores hexadecimais completos (#RRGGBB ou #RRGGBBAA)</li>
+        <li>Mantenha contraste adequado entre texto e fundo</li>
+        <li>Teste as cores em modo light e dark</li>
+      </ul>
+
+      <h3>Opacidades</h3>
+      <ul>
+        <li>50% = 80 no final do hex (#RRGGBB80)</li>
+        <li>25% = 40 no final do hex (#RRGGBB40)</li>
+        <li>15% = 26 no final do hex (#RRGGBB26)</li>
+      </ul>
+
+      <h3>Fontes</h3>
+      <ul>
+        <li>Verifique se as fontes escolhidas estão disponíveis</li>
+        <li>Sempre defina uma fonte fallback</li>
+        <li>Teste a renderização em diferentes navegadores</li>
+      </ul>
+    </div>
+
+    <h2>Precisa de Ajuda?</h2>
+    <p>Se você encontrar algum problema:</p>
+    <ol>
+      <li>Verifique se todos os imports estão corretos</li>
+      <li>Confira se o nome da marca é consistente em todos os arquivos</li>
+      <li>Execute npm run build e verifique os erros</li>
+      <li>Consulte os exemplos de outras marcas (coi.ts, devops.ts, godrive.ts)</li>
+    </ol>
+
+    <h2>Próximos Passos</h2>
+    <p>Depois de adicionar sua marca:</p>
+    <ol>
+      <li>Documente as cores e tokens no Storybook</li>
+      <li>Crie exemplos de uso com componentes</li>
+      <li>Adicione testes para garantir que tudo funciona corretamente</li>
+    </ol>
+
+    <p>Parabéns! Você acabou de adicionar uma nova marca ao Design System! 🎉</p>
+  </div>
+`;
+export const Default = Template.bind({});
+//# sourceMappingURL=AddingNewBrand.stories.js.map

package/dist/collection/components/GetStarted/AddingNewBrand.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddingNewBrand.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/AddingNewBrand.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,mCAAmC;CACnC,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+MnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport { html } from \"lit-html\";\r\n\r\nexport default {\r\n  title: \"Documentação/Adicionar Nova Marca\",\r\n} as Meta;\r\n\r\nconst Template: StoryFn = () => html`\r\n  <style>\r\n    .tutorial-container {\r\n      font-family: var(--font-family-sans, Arial), sans-serif;\r\n      line-height: 1.6;\r\n      max-width: 900px;\r\n      margin: 0 auto;\r\n      padding: 20px;\r\n    }\r\n    \r\n    pre {\r\n      background-color: #f5f5f5;\r\n      padding: 15px;\r\n      border-radius: 5px;\r\n      overflow-x: auto;\r\n      margin: 10px 0;\r\n    }\r\n    \r\n    h2 {\r\n      margin-top: 40px;\r\n      color: var(--primary, #333);\r\n      border-bottom: 2px solid var(--primary-opacity-15, #eee);\r\n      padding-bottom: 8px;\r\n    }\r\n    \r\n    h3 {\r\n      margin-top: 24px;\r\n      color: var(--primary-400, #444);\r\n    }\r\n\r\n    .code-block {\r\n      margin: 20px 0;\r\n    }\r\n\r\n    .checklist {\r\n      background: #f8f9fa;\r\n      padding: 15px;\r\n      border-radius: 4px;\r\n      margin: 10px 0;\r\n    }\r\n\r\n    .tips {\r\n      background: #e9ecef;\r\n      padding: 15px;\r\n      border-radius: 4px;\r\n      margin: 20px 0;\r\n    }\r\n  </style>\r\n\r\n  <div class=\"tutorial-container\">\r\n    <h1>Tutorial: Como Adicionar uma Nova Marca ao Design System</h1>\r\n    <p>\r\n      Olá! Este guia vai te ajudar a adicionar uma nova marca ao nosso Design System passo a passo. \r\n      Vamos usar como exemplo a adição de uma marca chamada \"TutorialBrand\".\r\n    </p>\r\n\r\n    <h2>Pré-requisitos</h2>\r\n    <ul>\r\n      <li>Node.js instalado</li>\r\n      <li>Acesso ao repositório do projeto</li>\r\n      <li>Editor de código (VS Code recomendado)</li>\r\n    </ul>\r\n\r\n    <h2>Passo 1: Preparando o Ambiente</h2>\r\n    <p>Primeiro, navegue até a pasta do projeto:</p>\r\n    <pre><code>cd DS-GAB/packages/core/src/tokens/</code></pre>\r\n\r\n    <p>Você verá a seguinte estrutura:</p>\r\n    <pre><code>tokens/\r\n├── brands/\r\n│   ├── coi.ts\r\n│   ├── devops.ts\r\n│   ├── godrive.ts\r\n│   └── index.ts\r\n├── base/\r\n│   ├── colors.ts\r\n│   ├── spacing.ts\r\n│   ├── radius.ts\r\n│   └── mediaQueries.ts\r\n└── types.ts</code></pre>\r\n\r\n    <h2>Passo 2: Criando o Arquivo da Nova Marca</h2>\r\n    <p>Crie um novo arquivo chamado tutorial-brand.ts na pasta brands:</p>\r\n\r\n    <div class=\"code-block\">\r\n      <pre><code>// src/tokens/brands/tutorial-brand.ts\r\n\r\nimport { Theme } from '../types';\r\nimport { baseColors } from '../base/colors';\r\nimport { Spacing } from '../base/spacing';\r\nimport { BorderRadius } from '../base/radius';\r\nimport { mediaQueries } from '../base/mediaQueries';\r\n\r\nexport const TutorialBrand: Theme = {\r\n  colors: {\r\n    light: {\r\n      // Cores principais com suas variações\r\n      primary: '#007AFF',          // Azul principal\r\n      primary100: '#CCE4FF',       // Azul mais claro\r\n      primary200: '#99C9FF',\r\n      primary400: '#0055B3',\r\n      primary500: '#003D80',\r\n      // ... resto do código\r\n    },\r\n    dark: {\r\n      // Configurações do tema dark\r\n    }\r\n  },\r\n  // ... resto das configurações\r\n};</code></pre>\r\n    </div>\r\n\r\n    <h2>Passo 3: Atualizando o Arquivo de Índice</h2>\r\n    <pre><code>// src/tokens/brands/index.ts\r\n\r\nimport { TutorialBrand } from './tutorial-brand';\r\nimport { Coi } from './coi';\r\nimport { Godrive } from './godrive';\r\nimport { Devops } from './devops';\r\nimport { Theme } from '../types';\r\n\r\nexport const brandingTokens: Record<string, Theme> = {\r\n  Coi,\r\n  Devops,\r\n  Godrive,\r\n  TutorialBrand,\r\n};</code></pre>\r\n\r\n    <h2>Passo 4: Atualizando os Tipos</h2>\r\n    <pre><code>// src/tokens/types.ts\r\ntype Brand = 'Devops' | 'Coi' | 'Godrive' | 'TutorialBrand';</code></pre>\r\n\r\n    <h2>Passo 5: Testando sua Nova Marca</h2>\r\n    <div class=\"code-block\">\r\n      <h3>React</h3>\r\n      <pre><code>&lt;ThemeProvider brand=\"TutorialBrand\" theme=\"light\"&gt;\r\n  &lt;div&gt;Teste da Nova Marca&lt;/div&gt;\r\n&lt;/ThemeProvider&gt;</code></pre>\r\n\r\n      <h3>Vue</h3>\r\n      <pre><code>&lt;ds-theme-provider brand=\"TutorialBrand\" theme=\"light\"&gt;\r\n  &lt;div&gt;Teste da Nova Marca&lt;/div&gt;\r\n&lt;/ds-theme-provider&gt;</code></pre>\r\n\r\n      <h3>Angular</h3>\r\n      <pre><code>&lt;ds-theme-provider brand=\"TutorialBrand\" theme=\"light\"&gt;\r\n  &lt;div&gt;Teste da Nova Marca&lt;/div&gt;\r\n&lt;/ds-theme-provider&gt;</code></pre>\r\n    </div>\r\n\r\n    <h2>Checklist Final</h2>\r\n    <div class=\"checklist\">\r\n      <ul>\r\n        <li>Criou o arquivo da marca em src/tokens/brands/</li>\r\n        <li>Definiu todas as cores necessárias para temas light e dark</li>\r\n        <li>Incluiu todas as variações de opacidade (50%, 25%, 15%)</li>\r\n        <li>Configurou as fontes corretamente</li>\r\n        <li>Importou a marca no index.ts</li>\r\n        <li>Atualizou os tipos em types.ts</li>\r\n        <li>Testou a marca em modo light e dark</li>\r\n        <li>Verificou se o build está funcionando</li>\r\n      </ul>\r\n    </div>\r\n\r\n    <h2>Dicas Importantes</h2>\r\n    <div class=\"tips\">\r\n      <h3>Cores</h3>\r\n      <ul>\r\n        <li>Use valores hexadecimais completos (#RRGGBB ou #RRGGBBAA)</li>\r\n        <li>Mantenha contraste adequado entre texto e fundo</li>\r\n        <li>Teste as cores em modo light e dark</li>\r\n      </ul>\r\n\r\n      <h3>Opacidades</h3>\r\n      <ul>\r\n        <li>50% = 80 no final do hex (#RRGGBB80)</li>\r\n        <li>25% = 40 no final do hex (#RRGGBB40)</li>\r\n        <li>15% = 26 no final do hex (#RRGGBB26)</li>\r\n      </ul>\r\n\r\n      <h3>Fontes</h3>\r\n      <ul>\r\n        <li>Verifique se as fontes escolhidas estão disponíveis</li>\r\n        <li>Sempre defina uma fonte fallback</li>\r\n        <li>Teste a renderização em diferentes navegadores</li>\r\n      </ul>\r\n    </div>\r\n\r\n    <h2>Precisa de Ajuda?</h2>\r\n    <p>Se você encontrar algum problema:</p>\r\n    <ol>\r\n      <li>Verifique se todos os imports estão corretos</li>\r\n      <li>Confira se o nome da marca é consistente em todos os arquivos</li>\r\n      <li>Execute npm run build e verifique os erros</li>\r\n      <li>Consulte os exemplos de outras marcas (coi.ts, devops.ts, godrive.ts)</li>\r\n    </ol>\r\n\r\n    <h2>Próximos Passos</h2>\r\n    <p>Depois de adicionar sua marca:</p>\r\n    <ol>\r\n      <li>Documente as cores e tokens no Storybook</li>\r\n      <li>Crie exemplos de uso com componentes</li>\r\n      <li>Adicione testes para garantir que tudo funciona corretamente</li>\r\n    </ol>\r\n\r\n    <p>Parabéns! Você acabou de adicionar uma nova marca ao Design System! 🎉</p>\r\n  </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});"]}