voa-ds-core 1.0.8 → 1.0.10

package/dist/voa/styles/external/voa-switch.external.css

@@ -0,0 +1,215 @@
+/**
+ * Estilização Externa do VoaSwitch
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-switch
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=443-10259
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * @import '@voa-ds/tokens/global.css';
+ * @import '@voa-ds/styles/voa-switch.css';
+ * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --asset-colors/brand-base → --brand-base (#0064cb)
+ * --asset-colors/brand-secondary → --brand-secondary (#00e5ce)
+ * --asset-colors/brand-secondary-50 → --brand-secondary-50 (rgba(0,229,206,0.5)) - Estado OFF default
+ * --asset-colors/brand-secondary-15 → --brand-secondary-15 (rgba(0,229,206,0.15)) - Estado disabled
+ * --structure-colors/fill-secondary → --structure-colors-fill-secondary (rgba(24,24,27,0.06))
+ * --structure-colors/fill-15 → --structure-colors-fill-15 (rgba(24,24,27,0.15))
+ * --structure-colors/fill-terciary → --structure-colors-fill-terciary (rgba(24,24,27,0.04))
+ * --structure-colors/fill-quaternary → --structure-colors-fill-quaternary (rgba(24,24,27,0.02))
+ * --radius/radius-round → --radius-round (1024px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --base/family/family-sans → --font-family-sans ('Lato')
+ * --asset-colors/text-primary → --text-primary (#0b1215)
+ */
+
+/* ============================================
+   BASE - Container do switch
+   ============================================ */
+
+voa-switch::part(base) {
+  /* Gap estrutural - Token semântico conforme Figma */
+  gap: var(--structure-large-spacing-sm);
+}
+
+/* Sem label, sem gap */
+voa-switch[show-label="false"]::part(base) {
+  gap: 0;
+}
+
+/* ============================================
+   TRACK - Container do switch (40px x 20px)
+   ============================================ */
+
+voa-switch::part(track) {
+  /* Border radius conforme Figma */
+  border-radius: var(--structure-large-radius-round);
+  /* 1024px - completamente arredondado */
+  border: var(--border-width-thin) solid var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+  box-sizing: border-box;
+  /* Transições suaves para mudanças de cor */
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================
+   THUMB - Elemento circular que se move (16px)
+   ============================================ */
+
+voa-switch::part(thumb) {
+  /* Border radius conforme Figma */
+  border-radius: var(--structure-large-radius-round);
+  /* 1024px - completamente arredondado */
+  border: var(--border-width-thin) solid;
+  box-sizing: border-box;
+
+  /* Variáveis locais para cálculo de posicionamento robusto */
+  --thumb-size: var(--switch-thumb-size);
+  --track-padding: 2px;
+  --thumb-offset: calc(var(--thumb-size) + var(--track-padding));
+
+  /* 
+   * ANIMATION FIX:
+   * Usamos margin-left para animar porque precisamos de referência à largura do PAI (track).
+   * Transform usa % relativo ao próprio elemento, o que não funciona para largura de track variável.
+   * Margin-left com % é relativo à largura do container.
+   */
+  margin-left: 0;
+  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Quando checked, move o thumb para a direita */
+voa-switch[checked]::part(thumb) {
+  /* 
+   * CÁLCULO ROBUSTO:
+   * 100% = Largura total do track (variável)
+   * - 16px (thumb)
+   * - 2px (padding direito)
+   * = Posição final correta independente da largura do track
+   */
+  margin-left: calc(100% - var(--thumb-offset));
+}
+
+/* ============================================
+   SHADOW - Sombra interna
+   ============================================ */
+
+voa-switch::part(shadow) {
+  /* Shadow interna conforme Figma: inset 0px 2px 4px 0px rgba(24, 24, 24, 0.25) */
+  box-shadow: var(--shadow-switch-inset);
+  border-radius: inherit;
+}
+
+/* ============================================
+   ESTADOS - OFF (default)
+   ============================================ */
+
+/* Default - Off */
+voa-switch:not([checked]):not([disabled])::part(track) {
+  background-color: var(--colors-structure-fill-quaternary);
+  /* rgba(24,24,27,0.02) */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+}
+
+voa-switch:not([checked]):not([disabled])::part(thumb) {
+  background-color: var(--brand-secondary-50);
+  /* rgba(0,229,206,0.5) - Atualizado do Figma para melhor contraste */
+  border-color: var(--colors-structure-fill-terciary);
+  /* rgba(24,24,27,0.04) */
+}
+
+/* ============================================
+   ESTADOS - ON (checked)
+   ============================================ */
+
+/* Default - On */
+voa-switch[checked]:not([disabled])::part(track) {
+  background-color: var(--brand-base);
+  /* #0064cb */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+}
+
+voa-switch[checked]:not([disabled])::part(thumb) {
+  background-color: var(--brand-secondary);
+  /* #00e5ce */
+  border-color: var(--colors-structure-fill-15);
+  /* rgba(24,24,27,0.15) */
+}
+
+/* ============================================
+   ESTADO - DISABLED
+   ============================================ */
+
+/* Disabled - Off */
+voa-switch:not([checked])[disabled]::part(track) {
+  background-color: var(--colors-structure-fill-quaternary);
+  /* rgba(24,24,27,0.02) */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+  opacity: 0.5;
+}
+
+voa-switch:not([checked])[disabled]::part(thumb) {
+  background-color: var(--brand-secondary-15);
+  /* rgba(0,229,206,0.15) */
+  border-color: var(--colors-structure-fill-terciary);
+  /* rgba(24,24,27,0.04) */
+  opacity: 0.5;
+}
+
+/* Disabled - On */
+voa-switch[checked][disabled]::part(track) {
+  background-color: var(--brand-base);
+  /* #0064cb */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+  opacity: 0.5;
+}
+
+voa-switch[checked][disabled]::part(thumb) {
+  background-color: var(--brand-secondary);
+  /* #00e5ce */
+  border-color: var(--colors-structure-fill-15);
+  /* rgba(24,24,27,0.15) */
+  opacity: 0.5;
+}
+
+/* ============================================
+   LABEL - Texto do label
+   ============================================ */
+
+voa-switch::part(label) {
+  color: var(--text-primary);
+  /* #0b1215 */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6);
+  line-height: var(--line-height-body-md);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  user-select: none;
+}
+
+voa-switch[disabled]::part(label) {
+  color: var(--text-disabled);
+  /* rgba(11,18,21,0.25) */
+}
+
+/* ============================================
+   FOCUS VISIBLE - Outline para acessibilidade
+   ============================================ */
+
+voa-switch:focus-visible::part(base) {
+  outline: var(--border-width-medium) solid var(--brand-base);
+  outline-offset: var(--structure-large-spacing-xs);
+  border-radius: var(--structure-large-radius-xs);
+}

package/dist/voa/styles/external/voa-tab.external.css

@@ -0,0 +1,284 @@
+/**
+ * Estilização Externa do VoaTab e VoaTabItem
+ * 
+ * Este arquivo demonstra como estilizar os componentes voa-tab e voa-tab-item
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * - Tab: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553
+ * - Tab Item: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * @import '@voa-ds/tokens/global.css';
+ * @import '@voa-ds/styles/voa-tab.css';
+ * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA CSS VARIABLES (global.css):
+ * 
+ * Figma Token → CSS Variable (from global.css)
+ * -------------------------------------------------------
+ * --asset-colors/brand-base → --brand-base
+ * --asset-colors/text-primary → --text-primary
+ * --asset-colors/text-disabled → --text-disabled (rendered as rgba, ~0.25 opacity)
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --spacing/spacing-rg → --spacing-spacing-rg (12px)
+ * --spacing/spacing-md → --spacing-spacing-md (16px)
+ * --spacing/spacing-lg → --spacing-spacing-lg (24px)
+ * --spacing/spacing-xxs → --spacing-spacing-xxs (2px)
+ * --radius/radius-md → --radius-md (12px)
+ * --radius/radius-xl → --radius-xl (24px)
+ * --radius/radius-round → --radius-round (1024px)
+ * --base/family/family-sans → --font-family-sans
+ * --semantic-colors/danger → --semantic-colors-danger
+ * --structure-colors/fill-secondary → --structure-colors-fill-secondary
+ * --structure-colors/bg-base → --structure-colors-bg-base
+ */
+
+/* ============================================
+   VOA-TAB - Container de tabs
+   ============================================ */
+
+voa-tab::part(base) {
+  /* Border-bottom para separador entre grupos de tabs */
+  border-bottom: var(--border-width-thin) solid var(--text-disabled);
+  box-sizing: border-box;
+}
+
+voa-tab::part(list) {
+  /* Gap entre itens conforme direção */
+  box-sizing: border-box;
+}
+
+/* Gap horizontal (padrão) */
+voa-tab[direction="horizontal"]::part(list) {
+  gap: var(--structure-large-spacing-lg);
+}
+
+/* Gap vertical */
+voa-tab[direction="vertical"]::part(list) {
+  gap: var(--structure-large-spacing-md);
+}
+
+/* ============================================
+   VOA-TAB-ITEM - Item individual de tab
+   ============================================ */
+
+/* Base - Tipografia e estrutura */
+voa-tab-item::part(base) {
+  /* Tipografia - Desktop/Body-sm/Regular */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: var(--line-height-body-sm);
+
+  /* Box-sizing */
+  box-sizing: border-box;
+
+  /* Transição suave para estados */
+  /* Transição suave para estados */
+  transition: color 0.2s ease;
+
+  /* Gap entre label e badge */
+  gap: var(--structure-large-spacing-xxs);
+}
+
+/* ============================================
+   ESTADOS - Cores por estado
+   ============================================ */
+
+/* Estado Active - Brand color */
+voa-tab-item[state="active"]::part(base) {
+  color: var(--brand-base);
+}
+
+/* Estado Default - Text primary */
+voa-tab-item[state="default"]::part(base) {
+  color: var(--text-primary);
+}
+
+/* Estado Disabled - Text disabled com opacity */
+voa-tab-item[state="disabled"]::part(base),
+voa-tab-item[disabled]::part(base) {
+  color: var(--text-disabled);
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================
+   POSIÇÕES - Padding e borders por posição
+   ============================================ */
+
+/* Posição Default (bottom border) */
+voa-tab-item[position="default"]::part(base) {
+  padding-inline: var(--spacing-spacing-xs);
+  padding-block: var(--spacing-spacing-rg);
+}
+
+voa-tab-item[position="default"]::part(base)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--brand-base);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="default"][state="active"]::part(base)::after {
+  transform: scaleX(1);
+}
+
+/* Posição Top (top border) */
+voa-tab-item[position="top"]::part(base) {
+  padding-inline: var(--spacing-spacing-xs);
+  padding-block: var(--radius-md);
+}
+
+voa-tab-item[position="top"]::part(base)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--brand-base);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="top"][state="active"]::part(base)::after {
+  transform: scaleX(1);
+}
+
+/* Posição Right (right border) */
+voa-tab-item[position="right"]::part(base) {
+  padding-inline: var(--radius-xl);
+  padding-block: var(--spacing-spacing-sm);
+}
+
+voa-tab-item[position="right"]::part(base)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--brand-base);
+  transform: scaleY(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="right"][state="active"]::part(base)::after {
+  transform: scaleY(1);
+}
+
+/* Posição Left (left border) */
+voa-tab-item[position="left"]::part(base) {
+  padding-inline: var(--spacing-spacing-lg);
+  padding-block: var(--spacing-spacing-sm);
+}
+
+voa-tab-item[position="left"]::part(base)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--brand-base);
+  transform: scaleY(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="left"][state="active"]::part(base)::after {
+  transform: scaleY(1);
+}
+
+/* ============================================
+   LABEL - Texto do item
+   ============================================ */
+
+voa-tab-item::part(label) {
+  /* Herda estilos do base, mas pode ser customizado se necessário */
+  display: inline-block;
+}
+
+/* ============================================
+   BADGE - Indicador de notificação
+   ============================================ */
+
+voa-tab-item::part(badge) {
+  /* Estrutura do badge */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  box-sizing: border-box;
+
+  /* Cores - Semantic Tokens */
+  background-color: var(--semantic-colors-danger);
+  border: var(--border-width-thick) solid var(--structure-colors-fill-secondary);
+  border-radius: var(--radius-round);
+
+  /* Padding interno */
+  padding: var(--spacing-spacing-xs);
+}
+
+voa-tab-item::part(badge) .voa-tab-item__badge-text {
+  /* Tipografia do badge - Typography/Legal-bold */
+  font-family: 'Manrope', sans-serif;
+  font-size: var(--typography-base-legal-bold-size, 10px);
+  font-weight: var(--typography-base-legal-bold-weight, 600);
+  line-height: var(--typography-base-legal-bold-line-height, 16px);
+
+  /* Cores */
+  color: var(--structure-colors-bg-base);
+
+  /* Layout */
+  text-align: center;
+  white-space: nowrap;
+  width: 8px;
+  height: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   ESTADOS HOVER/FOCUS
+   ============================================ */
+
+/* Hover apenas em itens não-disabled */
+voa-tab-item[state="default"]:hover::part(base),
+voa-tab-item[state="active"]:hover::part(base) {
+  /* Pode adicionar efeito hover se necessário */
+  opacity: 0.8;
+}
+
+voa-tab-item[state="disabled"]:hover::part(base),
+voa-tab-item[disabled]:hover::part(base) {
+  /* Sem hover em disabled */
+  opacity: 1;
+}
+
+/* Focus-visible para acessibilidade WCAG 2.2 AA */
+voa-tab-item::part(base):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+}
+
+voa-tab-item[state="disabled"]::part(base):focus-visible,
+voa-tab-item[disabled]::part(base):focus-visible {
+  /* Sem focus em disabled */
+  outline: none;
+}

package/dist/voa/styles/external/voa-tag.external.css

@@ -0,0 +1,206 @@
+/**
+ * Estilização Externa do VoaTag
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-tag
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * @import '@voa-ds/tokens/global.css';
+ * @import '@voa-ds/styles/voa-tag.css';
+ * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-container → --structure-colors-bg-container (#f1f3f5)
+ * --structure-colors/border-color → --structure-colors-border-color (#adb5bd)
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --radius/radius-xs → --radius-xs (4px)
+ * --radius/radius-round → --radius-round (1024px)
+ * --asset-colors/text-primary → --text-primary (#0b1215)
+ * --base/family/family-sans → --typography-base-family-sans ("Lato", sans-serif)
+ * 
+ * Tamanhos de fonte do Figma:
+ * - MD: 14px, line-height 16px
+ * - SM: 11px, line-height 12px
+ * 
+ * Tamanhos de ícone:
+ * - MD: 16px
+ * - SM: 12px
+ */
+
+/* ============================================
+   BASE - Container principal do tag
+   ============================================ */
+voa-tag::part(base) {
+  /* Background padrão - Semantic Token (conforme Figma: structure-colors/bg-container) */
+  background-color: var(--structure-colors-bg-container, #f1f3f5);
+  
+  /* Border padrão - 1.5px solid (conforme Figma) */
+  border: var(--border-width-thick, 1.5px) solid var(--structure-colors-border-color, #adb5bd);
+  
+  /* Border-radius padrão para shape="default" - Semantic Token (conforme Figma: radius/radius-xs) */
+  border-radius: var(--radius-xs, 4px);
+  
+  /* Gap entre elementos - Semantic Token (conforme Figma: spacing/spacing-xs) */
+  gap: var(--spacing-spacing-xs, 4px);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+}
+
+/* Shape: Pill - Border-radius completamente arredondado */
+voa-tag[shape="pill"]::part(base) {
+  /* Border-radius pill - Semantic Token (conforme Figma: radius/radius-round) */
+  border-radius: var(--radius-round, 1024px);
+}
+
+/* ============================================
+   PADDING POR TAMANHO
+   ============================================ */
+
+/* Size: Medium (md) - Padding padrão */
+voa-tag[size="md"]::part(base) {
+  /* Padding para size md - Semantic Tokens (conforme Figma: spacing/spacing-xs vertical, spacing/spacing-sm horizontal) */
+  padding-block: var(--spacing-spacing-xs, 4px);
+  padding-inline: var(--spacing-spacing-sm, 8px);
+}
+
+/* Size: Small (sm) - Padding reduzido */
+voa-tag[size="sm"]::part(base) {
+  /* Padding menor para size sm - Semantic Token (conforme Figma: spacing/spacing-xs) */
+  padding: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   LABEL - Texto do tag
+   ============================================ */
+voa-tag::part(label) {
+  /* Cor do texto - Semantic Token (conforme Figma: asset-colors/text-primary) */
+  color: var(--text-primary, #0b1215);
+  
+  /* Família de fonte - Semantic Token (conforme Figma: base/family/family-sans) */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  
+  /* Peso da fonte - Regular (400) */
+  font-weight: 400;
+  
+  /* Estilo da fonte */
+  font-style: normal;
+}
+
+/* Label - Size: Medium (md) */
+voa-tag[size="md"]::part(label) {
+  /* Tamanho de fonte md - 14px (conforme Figma) */
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  
+  /* Line-height md - 16px (conforme Figma) */
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+}
+
+/* Label - Size: Small (sm) */
+voa-tag[size="sm"]::part(label) {
+  /* Tamanho de fonte sm - 11px (conforme Figma: Desktop/Body-xs/Regular) */
+  font-size: var(--typography-base-type-scale-9, 11px);
+  
+  /* Line-height sm - 12px (conforme Figma) */
+  line-height: 12px;
+}
+
+/* ============================================
+   ÍCONES - Containers dos ícones
+   ============================================ */
+voa-tag::part(icon-start),
+voa-tag::part(icon-end) {
+  /* Cor dos ícones - usando brand-secondary (conforme Figma: teal/cyan) */
+  color: var(--brand-secondary, #00e5ce);
+  
+  /* Alinhamento */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ícones - Size: Medium (md) */
+voa-tag[size="md"]::part(icon-start),
+voa-tag[size="md"]::part(icon-end) {
+  /* Tamanho do ícone md - 16px (conforme Figma) */
+  width: 16px;
+  height: 16px;
+}
+
+/* Ícones - Size: Small (sm) */
+voa-tag[size="sm"]::part(icon-start),
+voa-tag[size="sm"]::part(icon-end) {
+  /* Tamanho do ícone sm - 12px (conforme Figma) */
+  width: 12px;
+  height: 12px;
+}
+
+/* Estilização de SVGs dentro dos slots de ícone */
+voa-tag[size="md"] [slot="icon-start"],
+voa-tag[size="md"] [slot="icon-end"] {
+  width: 16px;
+  height: 16px;
+  fill: var(--brand-secondary, #00e5ce);
+}
+
+voa-tag[size="sm"] [slot="icon-start"],
+voa-tag[size="sm"] [slot="icon-end"] {
+  width: 12px;
+  height: 12px;
+  fill: var(--brand-secondary, #00e5ce);
+}
+
+/* ============================================
+   ESTADOS INTERATIVOS (Opcional - para uso futuro)
+   ============================================ */
+
+/* Hover state */
+voa-tag:hover::part(base) {
+  /* Sutil destaque no hover */
+  border-color: var(--structure-colors-border-color-secondary, #dee2e6);
+}
+
+/* Focus state - Acessibilidade */
+voa-tag:focus-visible::part(base) {
+  outline: 2px solid var(--brand-base, #0064cb);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DARK THEME SUPPORT
+   ============================================ */
+[data-theme="dark"] voa-tag::part(base) {
+  /* Background dark - usando tokens dark */
+  background-color: var(--structure-colors-bg-container);
+  
+  /* Border dark */
+  border-color: var(--structure-colors-border-color);
+}
+
+[data-theme="dark"] voa-tag::part(label) {
+  /* Cor do texto dark - garantir contraste adequado com fallback explícito */
+  color: var(--text-primary, #ffffff);
+}
+
+/* Variantes com backgrounds coloridos precisam de texto claro */
+[data-theme="dark"] voa-tag[variant="solid"]::part(label),
+[data-theme="dark"] voa-tag[variant="tonal"]::part(label) {
+  color: var(--text-primary, #ffffff);
+}
+
+[data-theme="dark"] voa-tag::part(icon-start),
+[data-theme="dark"] voa-tag::part(icon-end) {
+  /* Cor dos ícones dark - usando brand primary (teal no dark mode) */
+  color: var(--brand-base, #00e5ce);
+}
+
+[data-theme="dark"] voa-tag [slot="icon-start"],
+[data-theme="dark"] voa-tag [slot="icon-end"] {
+  fill: var(--brand-base, #00e5ce);
+}