voa-ds-core 1.0.7 → 1.0.10

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

@@ -0,0 +1,174 @@
+/* 
+ * 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/collection/styles/external/voa-tooltip.external.css

@@ -0,0 +1,320 @@
+/**
+ * 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/collection/styles/voa-components.css

@@ -0,0 +1,32 @@
+/**
+ * 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';