@rainersoft/design-tokens 1.0.4 → 2.0.0

package/tokens/utilities.ts

@@ -1,177 +1,594 @@
-/**
- * @fileoverview Tokens utilitários - Classes Tailwind CSS
- * 
- * @description
- * Tokens utilitários que exportam classes Tailwind CSS prontas para uso.
- * Esses tokens são classes CSS que podem ser aplicadas diretamente nos componentes,
- * facilitando o desenvolvimento e garantindo consistência visual.
- * 
- * @module tokens/utilities
- * @version 4.0.0
- * @author Rainer Teixeira
- * @since 1.0.0
- */
-
-/**
- * Direções de gradiente como classes Tailwind CSS
- * 
- * @description
- * Conjunto de constantes que representam as diferentes direções
- * de gradiente disponíveis no Tailwind CSS.
- * 
- * @type {Object}
- * @property {string} TO_TOP - Gradiente de baixo para cima
- * @property {string} TO_BOTTOM - Gradiente de cima para baixo
- * @property {string} TO_LEFT - Gradiente da direita para esquerda
- * @property {string} TO_RIGHT - Gradiente da esquerda para direita
- * @property {string} TO_TL - Gradiente para cima-esquerda (top-left)
- * @property {string} TO_TR - Gradiente para cima-direita (top-right)
- * @property {string} TO_BL - Gradiente para baixo-esquerda (bottom-left)
- * @property {string} TO_BR - Gradiente para baixo-direita (bottom-right)
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { GRADIENT_DIRECTIONS } from 'rainer-design-tokens';
- * 
- * // Aplicar gradiente de cima para baixo
- * <div className={GRADIENT_DIRECTIONS.TO_BOTTOM}>
- * ```
- */
-export const GRADIENT_DIRECTIONS = {
-  TO_TOP: 'bg-gradient-to-t',
-  TO_BOTTOM: 'bg-gradient-to-b',
-  TO_LEFT: 'bg-gradient-to-l',
-  TO_RIGHT: 'bg-gradient-to-r',
-  TO_TL: 'bg-gradient-to-tl',
-  TO_TR: 'bg-gradient-to-tr',
-  TO_BL: 'bg-gradient-to-bl',
-  TO_BR: 'bg-gradient-to-br',
-} as const;
-
-/**
- * Gradientes decorativos e utilitários como classes Tailwind CSS
- * 
- * @description
- * Conjunto de gradientes pré-configurados para uso em diferentes
- * contextos da aplicação, incluindo texto, elementos decorativos e botões.
- * 
- * @type {Object}
- * @property {string} TEXT_PRIMARY - Gradiente para texto com efeito de clip
- * @property {string} DECORATIVE_PRIMARY - Gradiente decorativo principal (cyan-purple-pink)
- * @property {string} DECORATIVE_CYAN_PURPLE - Gradiente decorativo cyan para purple
- * @property {string} DECORATIVE_GREEN_EMERALD - Gradiente decorativo green para emerald
- * @property {string} BUTTON_CYAN_BLUE - Gradiente para botões (cyan para blue)
- * @property {string} BUTTON_PURPLE_PINK - Gradiente para botões (purple para pink)
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { GRADIENTS } from 'rainer-design-tokens';
- * 
- * // Aplicar gradiente em texto
- * <h1 className={GRADIENTS.TEXT_PRIMARY}>Título com Gradiente</h1>
- * 
- * // Aplicar gradiente em botão
- * <button className={GRADIENTS.BUTTON_CYAN_BLUE}>Clique aqui</button>
- * ```
- */
-export const GRADIENTS = {
-  // Gradientes de texto usando tokens CSS
-  TEXT_PRIMARY: 'bg-linear-to-r from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)] bg-clip-text text-transparent',
-  
-  // Gradientes decorativos usando tokens CSS
-  DECORATIVE_PRIMARY: 'bg-linear-to-br from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)]',
-  DECORATIVE_CYAN_PURPLE: 'bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-secondary-base)]',
-  DECORATIVE_GREEN_EMERALD: 'bg-linear-to-br from-[var(--color-status-success)] to-[var(--color-accent-base)]',
-  
-  // Gradientes de botões usando tokens CSS
-  BUTTON_CYAN_BLUE: 'bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-primary-hover)]',
-  BUTTON_PURPLE_PINK: 'bg-linear-to-r from-[var(--color-secondary-base)] to-[var(--color-accent-base)]',
-} as const;
-
-/**
- * Backgrounds utilitários como classes Tailwind CSS
- * 
- * @description
- * Conjunto de classes para backgrounds pré-configurados, incluindo
- * overlays, divisores e backgrounds de seção com efeitos de gradiente sutis.
- * 
- * @type {Object}
- * @property {string} FULL - Background completo padrão
- * @property {string} GRADIENT_OVERLAY - Overlay de gradiente sutil
- * @property {string} PREMIUM_DIVIDER_CONTAINER - Container para divisor premium
- * @property {string} PREMIUM_DIVIDER_LINE - Linha do divisor premium
- * @property {string} SECTION_CYAN - Background de seção com gradiente cyan
- * @property {string} SECTION_CYAN_VIA - Background de seção cyan via (meio)
- * @property {string} SECTION_PURPLE_VIA - Background de seção purple via (meio)
- * @property {string} SECTION_PINK_VIA - Background de seção pink via (meio)
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { BACKGROUND } from 'rainer-design-tokens';
- * 
- * // Aplicar background de seção
- * <section className={BACKGROUND.SECTION_CYAN}>
- *   Conteúdo da seção
- * </section>
- * 
- * // Aplicar overlay de gradiente
- * <div className={BACKGROUND.GRADIENT_OVERLAY}>
- *   Conteúdo com overlay
- * </div>
- * ```
- */
-export const BACKGROUND = {
-  // Background completo usando token CSS
-  FULL: 'bg-[var(--color-background-primary)]',
-  
-  // Overlay de gradiente usando tokens CSS
-  GRADIENT_OVERLAY: 'bg-linear-to-br from-[var(--color-primary-base)]/10 via-[var(--color-secondary-base)]/10 to-[var(--color-accent-base)]/10',
-  
-  // Divisores premium usando tokens CSS
-  PREMIUM_DIVIDER_CONTAINER: 'bg-linear-to-b from-transparent via-[var(--color-primary-base)]/5 to-transparent',
-  PREMIUM_DIVIDER_LINE: 'bg-linear-to-r from-transparent via-[var(--color-primary-base)]/50 to-transparent',
-  
-  // Backgrounds de seção usando tokens CSS
-  SECTION_CYAN: 'bg-linear-to-br from-[var(--color-primary-base)]/5 via-[var(--color-primary-base)]/3 to-transparent',
-  SECTION_CYAN_VIA: 'bg-linear-to-br from-transparent via-[var(--color-primary-base)]/5 to-transparent',
-  SECTION_PURPLE_VIA: 'bg-linear-to-br from-transparent via-[var(--color-secondary-base)]/5 to-transparent',
-  SECTION_PINK_VIA: 'bg-linear-to-br from-transparent via-[var(--color-accent-base)]/5 to-transparent',
-} as const;
-
-/**
- * Tipo TypeScript para direções de gradiente
- * 
- * @typedef {Object} GradientDirections
- * @description
- * Tipo que representa todas as direções de gradiente disponíveis.
- * Útil para type-checking e autocomplete em IDEs.
- */
-export type GradientDirections = typeof GRADIENT_DIRECTIONS;
-
-/**
- * Tipo TypeScript para gradientes
- * 
- * @typedef {Object} Gradients
- * @description
- * Tipo que representa todos os gradientes pré-configurados disponíveis.
- */
-export type Gradients = typeof GRADIENTS;
-
-/**
- * Tipo TypeScript para backgrounds
- * 
- * @typedef {Object} Background
- * @description
- * Tipo que representa todos os backgrounds utilitários disponíveis.
- */
-export type Background = typeof BACKGROUND;
-
+/**
+ * @fileoverview Tokens utilitários - Classes Tailwind CSS
+ * 
+ * @description
+ * Tokens utilitários que exportam classes Tailwind CSS prontas para uso.
+ * Esses tokens são classes CSS que podem ser aplicadas diretamente nos componentes,
+ * facilitando o desenvolvimento e garantindo consistência visual.
+ * 
+ * @module tokens/utilities
+ * @version 2.0.0
+ * @author Rainer Teixeira
+ * @since 1.0.0
+ */
+
+/**
+ * Direções de gradiente como classes Tailwind CSS
+ * 
+ * @description
+ * Conjunto de constantes que representam as diferentes direções
+ * de gradiente disponíveis no Tailwind CSS.
+ * 
+ * @type {Object}
+ * @property {string} TO_TOP - Gradiente de baixo para cima
+ * @property {string} TO_BOTTOM - Gradiente de cima para baixo
+ * @property {string} TO_LEFT - Gradiente da direita para esquerda
+ * @property {string} TO_RIGHT - Gradiente da esquerda para direita
+ * @property {string} TO_TL - Gradiente para cima-esquerda (top-left)
+ * @property {string} TO_TR - Gradiente para cima-direita (top-right)
+ * @property {string} TO_BL - Gradiente para baixo-esquerda (bottom-left)
+ * @property {string} TO_BR - Gradiente para baixo-direita (bottom-right)
+ * 
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { GRADIENT_DIRECTIONS } from '@rainersoft/design-tokens';
+ * 
+ * // Aplicar gradiente de cima para baixo
+ * <div className={GRADIENT_DIRECTIONS.TO_BOTTOM}>
+ * ```
+ */
+export const GRADIENT_DIRECTIONS = {
+  TO_TOP: 'bg-linear-to-t',
+  TO_BOTTOM: 'bg-linear-to-b',
+  TO_LEFT: 'bg-linear-to-l',
+  TO_RIGHT: 'bg-linear-to-r',
+  TO_TL: 'bg-linear-to-tl',
+  TO_TR: 'bg-linear-to-tr',
+  TO_BL: 'bg-linear-to-bl',
+  TO_BR: 'bg-linear-to-br',
+} as const;
+
+/**
+ * Gradientes decorativos e utilitários como classes Tailwind CSS
+ * 
+ * @description
+ * Conjunto de gradientes pré-configurados para uso em diferentes
+ * contextos da aplicação, incluindo texto, elementos decorativos e botões.
+ * 
+ * @type {Object}
+ * @property {string} TEXT_PRIMARY - Gradiente para texto com efeito de clip
+ * @property {string} DECORATIVE_PRIMARY - Gradiente decorativo principal (cyan-purple-pink)
+ * @property {string} DECORATIVE_CYAN_PURPLE - Gradiente decorativo cyan para purple
+ * @property {string} DECORATIVE_GREEN_EMERALD - Gradiente decorativo green para emerald
+ * @property {string} BUTTON_CYAN_BLUE - Gradiente para botões (cyan para blue)
+ * @property {string} BUTTON_PURPLE_PINK - Gradiente para botões (purple para pink)
+ * 
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { GRADIENTS } from '@rainersoft/design-tokens';
+ * 
+ * // Aplicar gradiente em texto
+ * <h1 className={GRADIENTS.TEXT_PRIMARY}>Título com Gradiente</h1>
+ * 
+ * // Aplicar gradiente em botão
+ * <button className={GRADIENTS.BUTTON_CYAN_BLUE}>Clique aqui</button>
+ * ```
+ */
+export const GRADIENTS = {
+  // Gradientes de texto usando tokens CSS
+  TEXT_PRIMARY: 'bg-linear-to-r from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)] bg-clip-text text-transparent',
+  
+  // Gradientes decorativos usando tokens CSS
+  DECORATIVE_PRIMARY: 'bg-linear-to-br from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)]',
+  DECORATIVE_CYAN_PURPLE: 'bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-secondary-base)]',
+  DECORATIVE_GREEN_EMERALD: 'bg-linear-to-br from-[var(--color-status-success)] to-[var(--color-accent-base)]',
+  
+  // Gradientes de botões usando tokens CSS
+  BUTTON_CYAN_BLUE: 'bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-primary-hover)]',
+  BUTTON_PURPLE_PINK: 'bg-linear-to-r from-[var(--color-secondary-base)] to-[var(--color-accent-base)]',
+} as const;
+
+/**
+ * Backgrounds utilitários como classes Tailwind CSS
+ * 
+ * @description
+ * Conjunto de classes para backgrounds pré-configurados, incluindo
+ * overlays, divisores e backgrounds de seção com efeitos de gradiente sutis.
+ * 
+ * @type {Object}
+ * @property {string} FULL - Background completo padrão
+ * @property {string} GRADIENT_OVERLAY - Overlay de gradiente sutil
+ * @property {string} PREMIUM_DIVIDER_CONTAINER - Container para divisor premium
+ * @property {string} PREMIUM_DIVIDER_LINE - Linha do divisor premium
+ * @property {string} SECTION_CYAN - Background de seção com gradiente cyan
+ * @property {string} SECTION_CYAN_VIA - Background de seção cyan via (meio)
+ * @property {string} SECTION_PURPLE_VIA - Background de seção purple via (meio)
+ * @property {string} SECTION_PINK_VIA - Background de seção pink via (meio)
+ * 
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { BACKGROUND } from '@rainersoft/design-tokens';
+ * 
+ * // Aplicar background de seção
+ * <section className={BACKGROUND.SECTION_CYAN}>
+ *   Conteúdo da seção
+ * </section>
+ * 
+ * // Aplicar overlay de gradiente
+ * <div className={BACKGROUND.GRADIENT_OVERLAY}>
+ *   Conteúdo com overlay
+ * </div>
+ * ```
+ */
+/**
+ * Gradientes compostos - Direção + Cores (Padrão Enterprise)
+ * 
+ * @description
+ * Combina direção e cores em um único token para uso direto.
+ * Elimina necessidade de concatenar strings manualmente.
+ * Padrão usado por grandes empresas (Google Material, Microsoft Fluent, Shopify Polaris).
+ * 
+ * @type {Object}
+ * @property {string} HORIZONTAL_PRIMARY - Gradiente horizontal com cores primárias
+ * @property {string} HORIZONTAL_SECONDARY - Gradiente horizontal com cores secundárias
+ * @property {string} HORIZONTAL_DECORATIVE - Gradiente horizontal decorativo
+ * @property {string} VERTICAL_PRIMARY - Gradiente vertical com cores primárias
+ * @property {string} VERTICAL_SECONDARY - Gradiente vertical com cores secundárias
+ * @property {string} DIAGONAL_PRIMARY - Gradiente diagonal com cores primárias
+ * @property {string} DIAGONAL_SECONDARY - Gradiente diagonal com cores secundárias
+ * 
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { GRADIENT_COMPOSITES } from '@rainersoft/design-tokens';
+ * 
+ * // Usar diretamente sem concatenar
+ * <div className={GRADIENT_COMPOSITES.HORIZONTAL_PRIMARY}>
+ *   Conteúdo
+ * </div>
+ * ```
+ */
+export const GRADIENT_COMPOSITES = {
+  // Gradientes horizontais (left-to-right)
+  HORIZONTAL_PRIMARY: `${GRADIENT_DIRECTIONS.TO_RIGHT} ${GRADIENTS.BUTTON_CYAN_BLUE}`,
+  HORIZONTAL_SECONDARY: `${GRADIENT_DIRECTIONS.TO_RIGHT} ${GRADIENTS.BUTTON_PURPLE_PINK}`,
+  HORIZONTAL_DECORATIVE: `${GRADIENT_DIRECTIONS.TO_RIGHT} ${GRADIENTS.DECORATIVE_PRIMARY}`,
+  HORIZONTAL_CYAN_PURPLE: `${GRADIENT_DIRECTIONS.TO_RIGHT} ${GRADIENTS.DECORATIVE_CYAN_PURPLE}`,
+  
+  // Gradientes verticais (top-to-bottom)
+  VERTICAL_PRIMARY: `${GRADIENT_DIRECTIONS.TO_BOTTOM} ${GRADIENTS.BUTTON_CYAN_BLUE}`,
+  VERTICAL_SECONDARY: `${GRADIENT_DIRECTIONS.TO_BOTTOM} ${GRADIENTS.BUTTON_PURPLE_PINK}`,
+  VERTICAL_DECORATIVE: `${GRADIENT_DIRECTIONS.TO_BOTTOM} ${GRADIENTS.DECORATIVE_PRIMARY}`,
+  
+  // Gradientes diagonais
+  DIAGONAL_PRIMARY: `${GRADIENT_DIRECTIONS.TO_BR} ${GRADIENTS.DECORATIVE_PRIMARY}`,
+  DIAGONAL_SECONDARY: `${GRADIENT_DIRECTIONS.TO_BR} ${GRADIENTS.DECORATIVE_CYAN_PURPLE}`,
+  DIAGONAL_GREEN_EMERALD: `${GRADIENT_DIRECTIONS.TO_BR} ${GRADIENTS.DECORATIVE_GREEN_EMERALD}`,
+} as const;
+
+/**
+ * Gradientes de cores específicas usando tokens de cor
+ * 
+ * @description
+ * Elimina valores hardcoded como "from-gray-500". Todos os gradientes
+ * usam tokens de cor do sistema para garantir consistência.
+ * 
+ * @type {Object}
+ * @property {string} GRAY_SCALE - Gradiente em escala de cinza usando tokens
+ * @property {string} BLUE_SCALE - Gradiente em escala de azul usando tokens primários
+ * @property {string} SUCCESS_SCALE - Gradiente em escala de verde (sucesso) usando tokens
+ * @property {string} TEXT_MUTED - Gradiente para texto muted usando tokens
+ * 
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { GRADIENT_COLORS } from '@rainersoft/design-tokens';
+ * 
+ * // Usar gradiente de cinza sem valores hardcoded
+ * <div className={GRADIENT_COLORS.GRAY_SCALE}>
+ *   Conteúdo
+ * </div>
+ * ```
+ */
+export const GRADIENT_COLORS = {
+  // Escala de cinza usando tokens de texto
+  GRAY_SCALE: `${GRADIENT_DIRECTIONS.TO_RIGHT} from-[var(--color-text-tertiary)] to-[var(--color-text-secondary)]`,
+  
+  // Escala de azul usando tokens primários
+  BLUE_SCALE: `${GRADIENT_DIRECTIONS.TO_RIGHT} from-[var(--color-primary-base)] to-[var(--color-primary-hover)]`,
+  
+  // Escala de verde (sucesso) usando tokens de status
+  SUCCESS_SCALE: `${GRADIENT_DIRECTIONS.TO_RIGHT} from-[var(--color-status-success)] to-[var(--color-status-success-hover)]`,
+  
+  // Gradiente para texto muted
+  TEXT_MUTED: `${GRADIENT_DIRECTIONS.TO_RIGHT} from-[var(--color-text-tertiary)] to-[var(--color-text-secondary)]`,
+} as const;
+
+export const BACKGROUND = {
+  // Background completo usando token CSS
+  FULL: 'bg-[var(--color-background-primary)]',
+  
+  // Overlay de gradiente usando tokens CSS
+  GRADIENT_OVERLAY: 'bg-linear-to-br from-[var(--color-primary-base)]/10 via-[var(--color-secondary-base)]/10 to-[var(--color-accent-base)]/10',
+  
+  // Divisores premium usando tokens CSS
+  PREMIUM_DIVIDER_CONTAINER: 'bg-linear-to-b from-transparent via-[var(--color-primary-base)]/5 to-transparent',
+  PREMIUM_DIVIDER_LINE: 'bg-linear-to-r from-transparent via-[var(--color-primary-base)]/50 to-transparent',
+  
+  // Backgrounds de seção usando tokens CSS
+  SECTION_CYAN: 'bg-linear-to-br from-[var(--color-primary-base)]/5 via-[var(--color-primary-base)]/3 to-transparent',
+  SECTION_CYAN_VIA: 'bg-linear-to-br from-transparent via-[var(--color-primary-base)]/5 to-transparent',
+  SECTION_PURPLE_VIA: 'bg-linear-to-br from-transparent via-[var(--color-secondary-base)]/5 to-transparent',
+  SECTION_PINK_VIA: 'bg-linear-to-br from-transparent via-[var(--color-accent-base)]/5 to-transparent',
+} as const;
+
+/**
+ * Tipo TypeScript para direções de gradiente
+ * 
+ * @typedef {Object} GradientDirections
+ * @description
+ * Tipo que representa todas as direções de gradiente disponíveis.
+ * Útil para type-checking e autocomplete em IDEs.
+ */
+export type GradientDirections = typeof GRADIENT_DIRECTIONS;
+
+/**
+ * Utilidades responsivas para breakpoints
+ * 
+ * @description
+ * Classes e helpers para trabalhar com breakpoints responsivos,
+ * facilitando a criação de layouts mobile-first.
+ * 
+ * @type {Object}
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { RESPONSIVE } from '@rainersoft/design-tokens';
+ * 
+ * // Usar classes responsivas
+ * <div className={RESPONSIVE.HIDE_ON_MOBILE}>
+ *   Visível apenas em desktop
+ * </div>
+ * 
+ * // Usar container responsivo
+ * <div className={RESPONSIVE.CONTAINER.DEFAULT}>
+ *   Container com largura máxima responsiva
+ * </div>
+ * ```
+ */
+export const RESPONSIVE = {
+  // Visibilidade responsiva
+  HIDE_ON_MOBILE: 'hidden sm:block',
+  HIDE_ON_TABLET: 'hidden lg:block',
+  HIDE_ON_DESKTOP: 'block lg:hidden',
+  SHOW_ON_MOBILE: 'block sm:hidden',
+  SHOW_ON_TABLET: 'block lg:hidden',
+  SHOW_ON_DESKTOP: 'hidden lg:block',
+  
+  // Containers responsivos
+  CONTAINER: {
+    DEFAULT: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl',
+    FLUID: 'w-full px-4 sm:px-6 lg:px-8',
+    TIGHT: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl',
+    WIDE: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-screen-2xl',
+    PROSE: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-prose',
+  },
+  
+  // Grid responsivo
+  GRID: {
+    COLS_1_2: 'grid grid-cols-1 md:grid-cols-2 gap-4',
+    COLS_1_3: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4',
+    COLS_1_4: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4',
+    COLS_2_3: 'grid grid-cols-2 lg:grid-cols-3 gap-4',
+    COLS_2_4: 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4',
+  },
+  
+  // Flex responsivo
+  FLEX: {
+    MOBILE_COLUMN: 'flex flex-col sm:flex-row',
+    TABLET_COLUMN: 'flex flex-col lg:flex-row',
+    MOBILE_REVERSE: 'flex flex-col-reverse sm:flex-row',
+    TABLET_REVERSE: 'flex flex-col-reverse lg:flex-row',
+  },
+  
+  // Text responsivo
+  TEXT: {
+    MOBILE_CENTER: 'text-center sm:text-left',
+    TABLET_CENTER: 'text-center lg:text-left',
+    RESPONSIVE_SIZE: 'text-sm sm:text-base lg:text-lg',
+    HEADING_SIZE: 'text-2xl sm:text-3xl lg:text-4xl xl:text-5xl',
+  },
+  
+  // Padding/Margin responsivo
+  SPACING: {
+    MOBILE_TIGHT: 'p-2 sm:p-4 lg:p-6',
+    TABLET_TIGHT: 'p-4 lg:p-8',
+    RESPONSIVE_Y: 'py-4 sm:py-6 lg:py-8 xl:py-12',
+    RESPONSIVE_X: 'px-4 sm:px-6 lg:px-8',
+  },
+} as const;
+
+/**
+ * Helpers de motion para animações
+ * 
+ * @description
+ * Classes utilitárias para aplicar motion tokens diretamente
+ * em elementos usando Tailwind CSS.
+ * 
+ * @type {Object}
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { MOTION } from '@rainersoft/design-tokens';
+ * 
+ * // Aplicar transição suave
+ * <button className={MOTION.TRANSITION.DEFAULT}>
+ *   Clique aqui
+ * </button>
+ * 
+ * // Aplicar animação de entrada
+ * <div className={MOTION.ANIMATE.FADE_IN}>
+ *   Conteúdo animado
+ * </div>
+ * ```
+ */
+export const MOTION = {
+  // Transições
+  TRANSITION: {
+    DEFAULT: 'transition-all duration-200 ease-in-out',
+    FAST: 'transition-all duration-100 ease-out',
+    SLOW: 'transition-all duration-300 ease-in-out',
+    COLOR: 'transition-colors duration-200 ease-in-out',
+    TRANSFORM: 'transition-transform duration-200 ease-in-out',
+    OPACITY: 'transition-opacity duration-150 ease-in-out',
+    SHADOW: 'transition-shadow duration-200 ease-in-out',
+  },
+  
+  // Animações
+  ANIMATE: {
+    FADE_IN: 'animate-fadeIn',
+    FADE_OUT: 'animate-fadeOut',
+    SLIDE_IN_UP: 'animate-slideInUp',
+    SLIDE_IN_DOWN: 'animate-slideInDown',
+    SLIDE_IN_LEFT: 'animate-slideInLeft',
+    SLIDE_IN_RIGHT: 'animate-slideInRight',
+    SCALE_IN: 'animate-scaleIn',
+    SCALE_OUT: 'animate-scaleOut',
+    ROTATE: 'animate-rotate',
+    PULSE: 'animate-pulse',
+    BOUNCE: 'animate-bounce',
+    SHAKE: 'animate-shake',
+    FLASH: 'animate-flash',
+  },
+  
+  // Durações
+  DURATION: {
+    INSTANT: 'duration-0',
+    FAST: 'duration-100',
+    NORMAL: 'duration-200',
+    SLOW: 'duration-300',
+    SLOWER: 'duration-500',
+    SLOWEST: 'duration-700',
+  },
+  
+  // Delays
+  DELAY: {
+    NONE: 'delay-0',
+    SHORT: 'delay-75',
+    MEDIUM: 'delay-150',
+    LONG: 'delay-300',
+    LONGER: 'delay-500',
+  },
+} as const;
+
+/**
+ * Constantes de cores principais para uso direto
+ * 
+ * @description
+ * Cores principais do tema light para uso direto em componentes.
+ * Retorna valores hexadecimais das cores base.
+ * 
+ * @type {Object}
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { COLORS } from '@rainersoft/design-tokens';
+ * 
+ * // Usar cor primária
+ * const primaryColor = COLORS.primary; // "#0891b2"
+ * 
+ * // Usar em estilo inline
+ * <div style={{ color: COLORS.primary }}>
+ *   Texto com cor primária
+ * </div>
+ * ```
+ */
+export const COLORS = {
+  primary: '#0891b2',
+  secondary: '#9333ea',
+  accent: '#db2777',
+  success: '#22c55e',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  info: '#0891b2',
+} as const;
+
+/**
+ * Estrutura de navegação padrão
+ * 
+ * @description
+ * Array de itens de navegação para uso em componentes de layout.
+ * Pode ser sobrescrito ou estendido conforme necessário.
+ * 
+ * @type {Array<{href: string, label: string}>}
+ * @constant
+ * 
+ * @example
+ * ```typescript
+ * import { NAVIGATION } from '@rainersoft/design-tokens';
+ * 
+ * // Usar em componente
+ * {NAVIGATION.map(item => (
+ *   <Link key={item.href} href={item.href}>
+ *     {item.label}
+ *   </Link>
+ * ))}
+ * ```
+ */
+export const NAVIGATION: Array<{ href: string; label: string }> = [
+  { href: '/', label: 'Home' },
+  { href: '/sobre', label: 'Sobre' },
+  { href: '/projetos', label: 'Projetos' },
+  { href: '/contato', label: 'Contato' },
+];
+
+/**
+ * Helpers de shadows (sombras) como classes Tailwind CSS
+ * 
+ * @description
+ * Classes utilitárias para aplicar shadows tokens consistentes
+ * usando valores pré-definidos do tema light.
+ * 
+ * @type {Object}
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { SHADOWS } from '@rainersoft/design-tokens';
+ * 
+ * // Aplicar shadow large
+ * <div className={SHADOWS.LARGE}>
+ *   Content with large shadow
+ * </div>
+ * ```
+ */
+export const SHADOWS = {
+  XS: 'shadow-xs',
+  SMALL: 'shadow-sm',
+  BASE: 'shadow',
+  MEDIUM: 'shadow-md',
+  LARGE: 'shadow-lg',
+  XL: 'shadow-xl',
+  '2XL': 'shadow-2xl',
+  INNER: 'shadow-inner',
+} as const;
+
+/**
+ * Helpers de z-index para camadas
+ * 
+ * @description
+ * Classes utilitárias para aplicar z-index tokens consistentes
+ * usando valores pré-definidos.
+ * 
+ * @type {Object}
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { Z_INDEX } from '@rainersoft/design-tokens';
+ * 
+ * // Aplicar z-index para modal
+ * <div className={Z_INDEX.MODAL}>
+ *   Modal content
+ * </div>
+ * ```
+ */
+export const Z_INDEX = {
+  BASE: 'z-0',
+  DROPDOWN: 'z-[1000]',
+  STICKY: 'z-[1020]',
+  FIXED: 'z-[1030]',
+  BACKDROP: 'z-[1040]',
+  MODAL: 'z-[1050]',
+  POPOVER: 'z-[1060]',
+  TOOLTIP: 'z-[1070]',
+  TOAST: 'z-[1080]',
+  SPOTLIGHT: 'z-[1090]',
+  PRIORITY: 'z-[1100]',
+  MAX: 'z-[2147483647]',
+} as const;
+
+/**
+ * Tipo TypeScript para cores
+ * 
+ * @typedef {Object} Colors
+ * @description
+ * Tipo que representa todas as cores principais disponíveis.
+ */
+export type Colors = typeof COLORS;
+
+/**
+ * Tipo TypeScript para navegação
+ * 
+ * @typedef {Array<{href: string, label: string}>} Navigation
+ * @description
+ * Tipo que representa a estrutura de navegação.
+ */
+export type Navigation = typeof NAVIGATION;
+
+/**
+ * Tipo TypeScript para shadows
+ * 
+ * @typedef {Object} Shadows
+ * @description
+ * Tipo que representa todas as classes de shadows disponíveis.
+ */
+export type Shadows = typeof SHADOWS;
+
+/**
+ * Tipo TypeScript para gradientes
+ * 
+ * @typedef {Object} Gradients
+ * @description
+ * Tipo que representa todos os gradientes pré-configurados disponíveis.
+ */
+export type Gradients = typeof GRADIENTS;
+
+/**
+ * Tipo TypeScript para gradientes compostos
+ * 
+ * @typedef {Object} GradientComposites
+ * @description
+ * Tipo que representa todos os gradientes compostos (direção + cores).
+ */
+export type GradientComposites = typeof GRADIENT_COMPOSITES;
+
+/**
+ * Tipo TypeScript para gradientes de cores
+ * 
+ * @typedef {Object} GradientColors
+ * @description
+ * Tipo que representa todos os gradientes de cores específicas.
+ */
+export type GradientColors = typeof GRADIENT_COLORS;
+
+/**
+ * Tipo TypeScript para backgrounds
+ * 
+ * @typedef {Object} Background
+ * @description
+ * Tipo que representa todos os backgrounds utilitários disponíveis.
+ */
+export type Background = typeof BACKGROUND;
+