voa-ds-core 1.0.11 → 1.0.13

package/dist/voa/styles/external/voa-text-area.external.css

@@ -1,174 +0,0 @@
-/* 
- * VoaTextArea Component Styles
- * 
- * Estilos aplicados via CSS Parts API usando design tokens semânticos.
- * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=552-1198
- */
-
-/* Label Wrapper */
-voa-text-area::part(label-wrapper) {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-bottom: 6px;
-  gap: var(--spacing-spacing-xs, 4px);
-}
-
-/* Label Text */
-voa-text-area::part(label) {
-  font-family: var(--voa-font-family-sans);
-  font-size: 20px;
-  font-weight: var(--typography-base-body-sm-bold-weight);
-  line-height: 32px;
-  color: var(--text-secondary);
-  flex: 1 0 0;
-  min-width: 0;
-}
-
-/* Required Indicator */
-voa-text-area::part(required-indicator) {
-  color: var(--semantic-colors-danger);
-  margin-left: 2px;
-}
-
-/* Label Info Section */
-voa-text-area::part(label-info) {
-  display: flex;
-  gap: var(--spacing-spacing-xs, 4px);
-  align-items: center;
-  padding-bottom: 6px;
-}
-
-/* Label Info Text */
-voa-text-area::part(label-info-text) {
-  font-family: var(--voa-font-family-sans);
-  font-size: 12px;
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: 16px;
-  color: var(--text-secondary);
-}
-
-/* Label Info Icon */
-voa-text-area::part(label-info-icon) {
-  width: 16px;
-  height: 16px;
-  color: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-/* Textarea Container */
-voa-text-area::part(container) {
-  background-color: var(--structure-colors-bg-base);
-  border: var(--border-width-medium) solid var(--structure-colors-border-color);
-  border-radius: var(--structure-large-radius-lg);
-  padding: var(--spacing-spacing-sm, 8px);
-  min-height: 120px;
-  position: relative;
-  box-sizing: border-box;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Textarea Container - Focused State (Active) */
-voa-text-area:focus-within::part(container) {
-  border-color: var(--brand-base);
-  box-shadow: inset 0px 0px 8px 2px var(--brand-base-50, rgba(0, 100, 203, 0.5));
-}
-
-/* Textarea Container - Error State */
-voa-text-area[has-error]::part(container) {
-  border-color: var(--semantic-colors-danger);
-}
-
-voa-text-area[has-error]:focus-within::part(container) {
-  border-color: var(--semantic-colors-danger);
-  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-danger);
-}
-
-/* Textarea Container - Disabled State */
-voa-text-area[disabled]::part(container) {
-  background-color: var(--structure-colors-bg-base-disabled);
-  border-color: var(--structure-colors-border-color);
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Textarea Container - Readonly State */
-voa-text-area[readonly]::part(container) {
-  background-color: var(--structure-colors-bg-container);
-}
-
-/* Textarea Element */
-voa-text-area::part(textarea) {
-  font-family: var(--voa-font-family-sans);
-  font-size: 16px;
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: 24px;
-  color: var(--text-primary);
-  background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
-  flex: 1 0 0;
-  min-height: 0;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-voa-text-area::part(textarea)::placeholder {
-  color: var(--text-placeholder);
-}
-
-/* Textarea - Disabled State */
-voa-text-area[disabled]::part(textarea) {
-  color: var(--text-disabled);
-  cursor: not-allowed;
-}
-
-/* Resize Handle */
-voa-text-area::part(resize-handle) {
-  position: absolute;
-  bottom: 3px;
-  right: 3px;
-  width: 16px;
-  height: 16px;
-  cursor: nwse-resize;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--structure-colors-border-color-secondary);
-  box-sizing: border-box;
-}
-
-voa-text-area[disabled]::part(resize-handle),
-voa-text-area[readonly]::part(resize-handle) {
-  display: none;
-}
-
-/* Character Counter */
-voa-text-area::part(character-counter) {
-  font-family: var(--font-family-sans, 'Lato', sans-serif);
-  font-size: 14px;
-  font-weight: var(--typography-base-body-sm-regular-weight);
-  line-height: 16px;
-  color: var(--text-secondary);
-  text-align: right;
-  margin-top: 6px;
-  display: flex;
-  gap: 6px;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-/* Error Message */
-voa-text-area::part(error-message) {
-  font-family: var(--font-family-sans, 'Lato', sans-serif);
-  font-size: 14px;
-  line-height: 16px;
-  color: var(--semantic-colors-danger);
-  margin-top: 6px;
-  display: block;
-}

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

@@ -1,320 +0,0 @@
-/**
- * Estilização Externa do VoaTooltip
- * 
- * Este arquivo demonstra como estilizar o componente voa-tooltip
- * 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=538-2010&t=Kno5mRpQSwBY8jAM-4
- * 
- * Para usar, importe este arquivo após os tokens:
- * @import '@voa-ds/tokens/global.css';
- * @import '@voa-ds/styles/voa-tooltip.css';
- * 
- * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
- * 
- * Figma Token → Style Dictionary Token
- * --------------------------------------------
- * --spacing/spacing-xs → --spacing-spacing-xs (4px)
- * --spacing/spacing-sm → --spacing-spacing-sm (8px)
- * --spacing/spacing-rg → --spacing-spacing-rg (12px)
- * --radius/radius-sm → --radius-sm (8px)
- * --radius/radius-xxs → --radius-xxs (2px)
- * --base/family/family-sans → --font-family-sans (Lato)
- * --structure-colors/bg-elevated → --tooltip-default-bg
- * --structure-colors/border-color → --tooltip-default-border
- * --structure-colors/bg-spot → --tooltip-spot-bg
- * --structure-colors/bg-mask → --tooltip-spot-border
- * --palette/{color}/{color}-5 → --tooltip-{color}-bg
- * --palette/{color}/{color}-6 → --tooltip-{color}-border
- */
-
-@import '../../tokens/global.css';
-
-/* ============================================
-   TOOLTIP BODY - Estilos base
-   ============================================ */
-
-/* Base Tooltip Body - Default Theme */
-voa-tooltip::part(body) {
-  /* Background - Semantic Token (conforme Figma: structure-colors/bg-elevated) */
-  background-color: var(--structure-colors-bg-elevated);
-  
-  /* Border - Semantic Token (conforme Figma: structure-colors/border-color) */
-  border: var(--border-width-thick) solid var(--structure-colors-border-color);
-  
-  /* Border-radius - Semantic Token (conforme Figma: radius/radius-sm) */
-  border-radius: var(--structure-large-radius-sm);
-  
-  /* Padding - Semantic Tokens (conforme Figma: spacing/spacing-sm e spacing/spacing-rg) */
-  padding: var(--structure-large-spacing-sm) var(--structure-large-spacing-rg);
-  
-  /* Gap entre ícone e texto - Semantic Token (conforme Figma: spacing/spacing-xs) */
-  gap: var(--structure-large-spacing-xs);
-  
-  /* Inset shadow - Semantic Tokens (conforme Figma: radius/radius-xxs e structure-colors/bg-base-disabled) */
-  box-shadow: inset 0px var(--structure-large-radius-xxs) 0px 0px var(--structure-colors-bg-base-disabled);
-  
-  /* Box-sizing */
-  box-sizing: border-box;
-  
-  /* Variáveis CSS para estilização do triângulo (definidas no componente, podem ser sobrescritas aqui) */
-  --arrow-color: var(--structure-colors-bg-elevated);
-  --arrow-border-color: var(--structure-colors-border-color);
-  --tooltip-bg: var(--structure-colors-bg-elevated);
-}
-
-/* ============================================
-   TOOLTIP CONTENT - Tipografia
-   ============================================ */
-
-voa-tooltip::part(content) {
-  /* Cor do texto - Semantic Token (conforme Figma: asset-colors/text-primary) */
-  color: var(--text-primary);
-  
-  /* Font-family - Semantic Token (conforme Figma: base/family/family-sans) */
-  font-family: var(--font-family-sans);
-  
-  /* Font-size e line-height conforme Figma: Body-sm/Regular (14px / 16px) */
-  font-size: var(--typography-base-body-sm-regular-size);
-  line-height: var(--line-height-body-sm);
-  
-  /* Text-align conforme design */
-  text-align: center;
-}
-
-/* ============================================
-   TOOLTIP ARROW - Criado via ::after do body
-   ============================================ */
-
-/* As pseudo-elementos ::before e ::after do triângulo são criados no CSS estrutural do componente */
-/* A estilização (cores) é feita via variáveis CSS definidas aqui */
-
-/* ============================================
-   TEMA: SPOT (fundo escuro)
-   ============================================ */
-
-voa-tooltip[theme="spot"]::part(body) {
-  background-color: var(--structure-colors-bg-spot);
-  border-color: var(--structure-colors-bg-mask);
-}
-
-voa-tooltip[theme="spot"]::part(content) {
-  color: var(--text-on-primary);
-}
-
-voa-tooltip[theme="spot"]::part(body) {
-  --arrow-color: var(--structure-colors-bg-spot);
-  --arrow-border-color: var(--structure-colors-bg-mask);
-  --tooltip-bg: var(--structure-colors-bg-spot);
-}
-
-/* ============================================
-   TEMA: PINK
-   ============================================ */
-
-voa-tooltip[theme="pink"]::part(body) {
-  background-color: var(--palette-pink-pink-5);
-  border-color: var(--palette-pink-pink-6);
-}
-
-voa-tooltip[theme="pink"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="pink"]::part(body) {
-  --arrow-color: var(--palette-pink-pink-5);
-  --arrow-border-color: var(--palette-pink-pink-6);
-  --tooltip-bg: var(--palette-pink-pink-5);
-}
-
-/* ============================================
-   TEMA: GRAPE
-   ============================================ */
-
-voa-tooltip[theme="grape"]::part(body) {
-  background-color: var(--palette-grape-grape-5);
-  border-color: var(--palette-grape-grape-6);
-}
-
-voa-tooltip[theme="grape"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="grape"]::part(body) {
-  --arrow-color: var(--palette-grape-grape-5);
-  --arrow-border-color: var(--palette-grape-grape-6);
-  --tooltip-bg: var(--palette-grape-grape-5);
-}
-
-/* ============================================
-   TEMA: VIOLET
-   ============================================ */
-
-voa-tooltip[theme="violet"]::part(body) {
-  background-color: var(--palette-violet-violet-5);
-  border-color: var(--palette-violet-violet-6);
-}
-
-voa-tooltip[theme="violet"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="violet"]::part(body) {
-  --arrow-color: var(--palette-violet-violet-5);
-  --arrow-border-color: var(--palette-violet-violet-6);
-  --tooltip-bg: var(--palette-violet-violet-5);
-}
-
-/* ============================================
-   TEMA: INDIGO
-   ============================================ */
-
-voa-tooltip[theme="indigo"]::part(body) {
-  background-color: var(--palette-indigo-indigo-5);
-  border-color: var(--palette-indigo-indigo-6);
-}
-
-voa-tooltip[theme="indigo"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="indigo"]::part(body) {
-  --arrow-color: var(--palette-indigo-indigo-5);
-  --arrow-border-color: var(--palette-indigo-indigo-6);
-  --tooltip-bg: var(--palette-indigo-indigo-5);
-}
-
-/* ============================================
-   TEMA: BLUE
-   ============================================ */
-
-voa-tooltip[theme="blue"]::part(body) {
-  background-color: var(--palette-blue-blue-5);
-  border-color: var(--palette-blue-blue-6);
-}
-
-voa-tooltip[theme="blue"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="blue"]::part(body) {
-  --arrow-color: var(--palette-blue-blue-5);
-  --arrow-border-color: var(--palette-blue-blue-6);
-  --tooltip-bg: var(--palette-blue-blue-5);
-}
-
-/* ============================================
-   TEMA: CYAN
-   ============================================ */
-
-voa-tooltip[theme="cyan"]::part(body) {
-  background-color: var(--palette-cyan-cyan-5);
-  border-color: var(--palette-cyan-cyan-6);
-}
-
-voa-tooltip[theme="cyan"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="cyan"]::part(body) {
-  --arrow-color: var(--palette-cyan-cyan-5);
-  --arrow-border-color: var(--palette-cyan-cyan-6);
-  --tooltip-bg: var(--palette-cyan-cyan-5);
-}
-
-/* ============================================
-   TEMA: TEAL
-   ============================================ */
-
-voa-tooltip[theme="teal"]::part(body) {
-  background-color: var(--palette-teal-teal-5);
-  border-color: var(--palette-teal-teal-6);
-}
-
-voa-tooltip[theme="teal"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="teal"]::part(body) {
-  --arrow-color: var(--palette-teal-teal-5);
-  --arrow-border-color: var(--palette-teal-teal-6);
-  --tooltip-bg: var(--palette-teal-teal-5);
-}
-
-/* ============================================
-   TEMA: LIME
-   ============================================ */
-
-voa-tooltip[theme="lime"]::part(body) {
-  background-color: var(--palette-lime-lime-5);
-  border-color: var(--palette-lime-lime-6);
-}
-
-voa-tooltip[theme="lime"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="lime"]::part(body) {
-  --arrow-color: var(--palette-lime-lime-5);
-  --arrow-border-color: var(--palette-lime-lime-6);
-  --tooltip-bg: var(--palette-lime-lime-5);
-}
-
-/* ============================================
-   TEMA: ORANGE
-   ============================================ */
-
-voa-tooltip[theme="orange"]::part(body) {
-  background-color: var(--palette-orange-orange-5);
-  border-color: var(--palette-orange-orange-6);
-}
-
-voa-tooltip[theme="orange"]::part(content) {
-  color: var(--structure-colors-bg-base);
-}
-
-voa-tooltip[theme="orange"]::part(body) {
-  --arrow-color: var(--palette-orange-orange-5);
-  --arrow-border-color: var(--palette-orange-orange-6);
-  --tooltip-bg: var(--palette-orange-orange-5);
-}
-
-/* ============================================
-   DARK THEME SUPPORT
-   ============================================ */
-
-[data-theme="dark"] voa-tooltip::part(body) {
-  /* Background dark - usando tokens dark */
-  background-color: var(--structure-colors-bg-elevated);
-  
-  /* Border dark */
-  border-color: var(--structure-colors-border-color);
-  
-  /* Arrow colors for dark mode */
-  --arrow-color: var(--structure-colors-bg-elevated);
-  --arrow-border-color: var(--structure-colors-border-color);
-  --tooltip-bg: var(--structure-colors-bg-elevated);
-}
-
-[data-theme="dark"] voa-tooltip::part(content) {
-  /* Cor do texto dark - garantir contraste adequado */
-  color: var(--text-primary, #ffffff);
-}
-
-/* ============================================
-   ICON SLOT - Estilização do ícone
-   ============================================ */
-
-voa-tooltip::part(icon-slot) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-voa-tooltip::part(icon-slot) ::slotted(*) {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}

package/dist/voa/styles/voa-components.css

@@ -1,32 +0,0 @@
-/**
- * VOA Design System - Consolidated Component Styles
- *
- * Este arquivo consolida todos os estilos visuais dos componentes
- * para uso em aplicações que consomem o voa-ds-core.
- *
- * IMPORTANTE: Importe este arquivo APÓS os tokens:
- * @import 'voa-ds-core/dist/voa/voa.css';      // Tokens
- * @import 'voa-ds-core/dist/styles/voa-components.css';  // Estilos dos componentes
- */
-
-/* Importa todos os estilos externos dos componentes */
-@import '../Stories/styles/voa-accordion.external.css';
-@import '../Stories/styles/voa-alert.external.css';
-@import '../Stories/styles/voa-avatar.external.css';
-@import '../Stories/styles/voa-badge.external.css';
-@import '../Stories/styles/voa-breadcrumbs.external.css';
-@import '../Stories/styles/voa-button.external.css';
-@import '../Stories/styles/voa-card.external.css';
-@import '../Stories/styles/voa-checkbox.external.css';
-@import '../Stories/styles/voa-input-addon.external.css';
-@import '../Stories/styles/voa-input.external.css';
-@import '../Stories/styles/voa-keybinding.external.css';
-@import '../Stories/styles/voa-option.external.css';
-@import '../Stories/styles/voa-pagination.external.css';
-@import '../Stories/styles/voa-radio.external.css';
-@import '../Stories/styles/voa-select.external.css';
-@import '../Stories/styles/voa-switch.external.css';
-@import '../Stories/styles/voa-tab.external.css';
-@import '../Stories/styles/voa-tag.external.css';
-@import '../Stories/styles/voa-text-area.external.css';
-@import '../Stories/styles/voa-tooltip.external.css';