@rainersoft/design-tokens 2.0.0 → 2.3.1

package/tokens/effects.json

@@ -1,125 +0,0 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "$description": "Tokens para efeitos visuais - filters, blur, glow, backdrop effects",
-  "effects": {
-    "filter": {
-      "brightness": {
-        "subtle": "brightness(1.1)",
-        "moderate": "brightness(1.2)",
-        "intense": "brightness(1.3)",
-        "strong": "brightness(1.4)",
-        "extreme": "brightness(1.6)"
-      },
-      "contrast": {
-        "subtle": "contrast(1.05)",
-        "moderate": "contrast(1.1)",
-        "strong": "contrast(1.2)",
-        "intense": "contrast(1.3)"
-      },
-      "saturate": {
-        "subtle": "saturate(1.1)",
-        "moderate": "saturate(1.2)",
-        "strong": "saturate(1.3)",
-        "intense": "saturate(1.4)"
-      },
-      "combined": {
-        "neon-subtle": "brightness(1.2) saturate(1.1)",
-        "neon-moderate": "brightness(1.3) saturate(1.2)",
-        "neon-intense": "brightness(1.4) saturate(1.3)",
-        "neon-extreme": "brightness(1.6) contrast(1.3) saturate(1.4)",
-        "glass": "blur(8px) saturate(180%)",
-        "frosted": "blur(12px) saturate(150%)"
-      }
-    },
-    "blur": {
-      "none": "blur(0)",
-      "xs": "blur(0.5px)",
-      "sm": "blur(2px)",
-      "base": "blur(4px)",
-      "md": "blur(8px)",
-      "lg": "blur(12px)",
-      "xl": "blur(16px)",
-      "2xl": "blur(24px)",
-      "3xl": "blur(40px)"
-    },
-    "backdrop": {
-      "blur": {
-        "none": "backdrop-blur-none",
-        "sm": "backdrop-blur-sm",
-        "base": "backdrop-blur",
-        "md": "backdrop-blur-md",
-        "lg": "backdrop-blur-lg",
-        "xl": "backdrop-blur-xl",
-        "2xl": "backdrop-blur-2xl",
-        "3xl": "backdrop-blur-3xl"
-      },
-      "saturate": {
-        "default": "backdrop-saturate-100",
-        "enhanced": "backdrop-saturate-150",
-        "strong": "backdrop-saturate-200"
-      }
-    },
-    "glow": {
-      "star": {
-        "small": {
-          "radius": "0 0 4px",
-          "color": "rgba(255, 255, 255, 0.8)"
-        },
-        "medium": {
-          "radius": "0 0 8px",
-          "color": "rgba(255, 255, 255, 0.8)"
-        },
-        "large": {
-          "radius": "0 0 12px",
-          "color": "rgba(255, 255, 255, 0.8)"
-        }
-      },
-      "neon": {
-        "cyan": {
-          "subtle": "0 0 10px rgba(0, 230, 255, 0.3)",
-          "moderate": "0 0 20px rgba(0, 230, 255, 0.5), 0 0 40px rgba(0, 230, 255, 0.3)",
-          "intense": "0 0 30px rgba(0, 230, 255, 0.7), 0 0 60px rgba(0, 230, 255, 0.5)"
-        },
-        "purple": {
-          "subtle": "0 0 10px rgba(125, 0, 255, 0.3)",
-          "moderate": "0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(125, 0, 255, 0.3)",
-          "intense": "0 0 30px rgba(125, 0, 255, 0.7), 0 0 60px rgba(125, 0, 255, 0.5)"
-        },
-        "pink": {
-          "subtle": "0 0 10px rgba(255, 0, 255, 0.3)",
-          "moderate": "0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3)",
-          "intense": "0 0 30px rgba(255, 0, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.5)"
-        },
-        "green": {
-          "subtle": "0 0 10px rgba(0, 255, 0, 0.3)",
-          "moderate": "0 0 20px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.3)",
-          "intense": "0 0 30px rgba(0, 255, 0, 0.7), 0 0 60px rgba(0, 255, 0, 0.5)"
-        }
-      }
-    },
-    "textShadow": {
-      "glow": {
-        "cyan-subtle": "0 0 10px rgba(34, 211, 238, 0.5)",
-        "cyan-moderate": "0 0 20px rgba(34, 211, 238, 0.8), 0 0 40px rgba(34, 211, 238, 0.6)",
-        "cyan-intense": "0 0 40px rgba(34, 211, 238, 1), 0 0 60px rgba(103, 232, 249, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5)"
-      },
-      "depth": {
-        "subtle": "0 1px 2px rgba(0, 0, 0, 0.1)",
-        "moderate": "0 2px 4px rgba(0, 0, 0, 0.3)",
-        "strong": "0 2px 4px rgba(0, 0, 0, 0.5)"
-      }
-    },
-    "boxShadow": {
-      "cyberpunk": {
-        "card": "0 0 20px rgba(34, 211, 238, 0.1)",
-        "cardHover": "0 0 30px rgba(34, 211, 238, 0.2)",
-        "elevated": "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
-      },
-      "glass": {
-        "subtle": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-        "moderate": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-        "strong": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
-      }
-    }
-  }
-}

package/tokens/hero.json

@@ -1,69 +0,0 @@
-{
-  "hero": {
-    "title": {
-      "fontSize": {
-        "mobile": "1.5rem",
-        "responsive": "4vw",
-        "desktop": "3.5rem",
-        "clamp": "clamp(1.5rem, 4vw, 3.5rem)"
-      },
-      "lineHeight": "1.2",
-      "letterSpacing": "-0.02em",
-      "wordSpacing": "0.05em",
-      "fontWeight": "800",
-      "filter": "brightness(1.2) contrast(1.1)",
-      "textShadow": {
-        "dark": "0 0 40px rgba(34, 211, 238, 1), 0 0 60px rgba(103, 232, 249, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5)",
-        "light": "0 0 30px rgba(37, 99, 235, 0.8), 0 0 50px rgba(59, 130, 246, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3)"
-      }
-    },
-    "subtitle": {
-      "fontSize": {
-        "mobile": "0.875rem",
-        "responsive": "1.5vw",
-        "desktop": "1.25rem",
-        "clamp": "clamp(0.875rem, 1.5vw, 1.25rem)"
-      },
-      "lineHeight": "1.6",
-      "letterSpacing": "0.01em",
-      "fontWeight": "400",
-      "maxWidth": "56rem",
-      "textShadow": {
-        "dark": "0 0 20px rgba(52, 211, 153, 0.6)",
-        "light": "0 0 20px rgba(16, 185, 129, 0.5)"
-      }
-    },
-    "container": {
-      "maxWidth": {
-        "mobile": "90vw",
-        "sm": "48rem",
-        "md": "56rem",
-        "lg": "64rem"
-      },
-      "padding": {
-        "top": "clamp(3rem, 10vh, 8rem)",
-        "bottom": "clamp(3rem, 10vh, 8rem)",
-        "x": {
-          "mobile": "1rem",
-          "sm": "1.5rem",
-          "md": "2rem"
-        }
-      },
-      "gap": "clamp(1.5rem, 3vh, 2.5rem)"
-    },
-    "effects": {
-      "cyberpunk": {
-        "glitch": {
-          "animation": "glitch 2s infinite",
-          "animationDelay": "0s, 0.3s, 0.6s"
-        },
-        "neon": {
-          "animation": "neon-pulse 1.5s ease-in-out infinite alternate"
-        },
-        "flicker": {
-          "animation": "flicker 3s linear infinite"
-        }
-      }
-    }
-  }
-}

package/tokens/index.ts

@@ -1,443 +0,0 @@
-/**
- * @fileoverview Ponto de entrada dos tokens de design
- * 
- * @description
- * Tokens de design tecnologicamente agnósticos que definem a linguagem visual
- * do Rainer Design System. Estes tokens podem ser utilizados em qualquer
- * framework ou tecnologia, garantindo consistência visual.
- * 
- * @module tokens
- * @version 2.0.0
- * @author Rainer Teixeira
- * @since 1.0.0
- */
-
-import lightColors from './colors/light.json';
-import darkColors from './colors/dark.json';
-import typography from './typography.json';
-import spacing from './spacing.json';
-import radius from './radius.json';
-import shadows from './shadows.json';
-import animations from './animations.json';
-import hero from './hero.json';
-import effects from './effects.json';
-import celestialBackground from './components/celestial-background.json';
-import motion from './motion.json';
-import breakpoints from './breakpoints.json';
-import zIndex from './z-index.json';
-
-// Utility tokens (Tailwind CSS classes)
-export * from './utilities';
-
-// Accessibility utilities (WCAG contrast checking)
-export * from './accessibility';
-
-/**
- * Todos os tokens de design organizados por categoria
- * 
- * @description
- * Objeto principal contendo todos os tokens de design do sistema,
- * organizados em categorias lógicas para fácil acesso e manutenção.
- * 
- * @type {Object}
- * @property {Object} colors - Tokens de cores para temas claro e escuro
- * @property {Object} colors.light - Cores do tema claro
- * @property {Object} colors.dark - Cores do tema escuro
- * @property {Object} typography - Tokens de tipografia (fontes, tamanhos, pesos, etc.)
- * @property {Object} spacing - Tokens de espaçamento (margens, paddings)
- * @property {Object} radius - Tokens de raio de borda
- * @property {Object} shadows - Tokens de sombras para ambos os temas
- * @property {Object} animations - Tokens de animações (keyframes e durações)
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { tokens } from '@rainersoft/design-tokens';
- * 
- * // Acessar cor primária do tema claro
- * const primaryColor = tokens.colors.light.brand.primary;
- * 
- * // Acessar espaçamento padrão
- * const spacing = tokens.spacing.md;
- * ```
- */
-export const tokens = {
-  colors: {
-    light: lightColors.colors,
-    dark: darkColors.colors,
-  },
-  typography: typography.typography,
-  spacing: spacing.spacing,
-  radius: radius.radius,
-  shadows: shadows.shadows,
-  animations: animations.animations,
-  motion: motion.motion,
-  breakpoints: breakpoints.breakpoints,
-  zIndex: zIndex.zIndex,
-  hero: hero.hero,
-  effects: effects.effects,
-  components: {
-    celestialBackground: celestialBackground.celestialBackground,
-  },
-} as const;
-
-/**
- * Cores do tema claro
- * 
- * @description
- * Exporta apenas as cores do tema claro para uso direto.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { lightThemeColors } from '@rainersoft/design-tokens';
- * 
- * const primaryColor = lightThemeColors.brand.primary;
- * ```
- */
-export const lightThemeColors = lightColors.colors;
-
-/**
- * Cores do tema escuro
- * 
- * @description
- * Exporta apenas as cores do tema escuro (estilo cyberpunk) para uso direto.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { darkThemeColors } from '@rainersoft/design-tokens';
- * 
- * const neonColor = darkThemeColors.accent.cyan;
- * ```
- */
-export const darkThemeColors = darkColors.colors;
-
-/**
- * Tokens de tipografia
- * 
- * @description
- * Exporta todos os tokens relacionados à tipografia, incluindo
- * famílias de fontes, tamanhos, pesos, alturas de linha e espaçamento entre letras.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { typographyTokens } from '@rainersoft/design-tokens';
- * 
- * const fontSize = typographyTokens.fontSize.lg;
- * const fontFamily = typographyTokens.fontFamily.sans;
- * ```
- */
-export const typographyTokens = typography.typography;
-
-/**
- * Tokens de espaçamento
- * 
- * @description
- * Exporta todos os tokens de espaçamento padronizados do sistema.
- * Utilizados para margens, paddings e gaps consistentes.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { spacingTokens } from '@rainersoft/design-tokens';
- * 
- * const margin = spacingTokens.md;
- * const padding = spacingTokens.lg;
- * ```
- */
-export const spacingTokens = spacing.spacing;
-
-/**
- * Tokens de raio de borda
- * 
- * @description
- * Exporta todos os tokens de raio de borda (border-radius) padronizados.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { radiusTokens } from '@rainersoft/design-tokens';
- * 
- * const borderRadius = radiusTokens.md;
- * ```
- */
-export const radiusTokens = radius.radius;
-
-/**
- * Tokens de sombras
- * 
- * @description
- * Exporta todos os tokens de sombras, incluindo sombras para tema claro
- * e efeitos de brilho (glow) para tema escuro.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { shadowTokens } from '@rainersoft/design-tokens';
- * 
- * const shadow = shadowTokens.light.md;
- * const glow = shadowTokens.dark.glow.cyan;
- * ```
- */
-export const shadowTokens = shadows.shadows;
-
-/**
- * Tokens de animações
- * 
- * @description
- * Exporta todos os tokens de animações, incluindo keyframes, durações
- * e funções de timing para transições e animações do sistema.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { animationTokens } from '@rainersoft/design-tokens';
- * 
- * const slideIn = animationTokens['slide-in'];
- * const fadeIn = animationTokens['fade-in'];
- * ```
- */
-export const animationTokens = animations.animations;
-
-/**
- * Tokens de efeitos visuais
- * 
- * @description
- * Exporta todos os tokens de efeitos visuais, incluindo filters, blur,
- * glow, backdrop effects e outros efeitos para criar elementos visuais sofisticados.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { effectTokens } from '@rainersoft/design-tokens';
- * 
- * const blur = effectTokens.blur.md;
- * const glow = effectTokens.glow.neon.cyan.moderate;
- * ```
- */
-export const effectTokens = effects.effects;
-
-/**
- * Tokens de componentes
- * 
- * @description
- * Exporta todos os tokens específicos de componentes, incluindo configurações
- * para celestial background, carousels e outros componentes visuais.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { componentTokens } from '@rainersoft/design-tokens';
- * 
- * const starConfig = componentTokens.celestialBackground.stars.default;
- * ```
- */
-export const componentTokens = {
-  celestialBackground: celestialBackground.celestialBackground,
-};
-
-/**
- * Tokens de motion
- * 
- * @description
- * Exporta todos os tokens relacionados a motion e animações, incluindo
- * durações, easings, keyframes e transições seguindo Material Design e Fluent Design.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { motionTokens } from '@rainersoft/design-tokens';
- * 
- * const duration = motionTokens.duration.normal;
- * const easing = motionTokens.easing.standard.productive;
- * ```
- */
-export const motionTokens = motion.motion;
-
-/**
- * Tokens de breakpoints
- * 
- * @description
- * Exporta todos os tokens de breakpoints responsivos para criar layouts
- * mobile-first consistentes em todas as plataformas.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { breakpointTokens } from '@rainersoft/design-tokens';
- * 
- * const tabletSize = breakpointTokens.md;
- * const mediaQuery = breakpointTokens.mediaQueries.lg;
- * ```
- */
-export const breakpointTokens = breakpoints.breakpoints;
-
-/**
- * Tokens de z-index
- * 
- * @description
- * Exporta todos os tokens de z-index para gerenciar camadas e sobreposições
- * de forma consistente e escalável.
- * 
- * @type {Object}
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { zIndexTokens } from '@rainersoft/design-tokens';
- * 
- * const modalLayer = zIndexTokens.modal;
- * const tooltipLayer = zIndexTokens.tooltip;
- * ```
- */
-export const zIndexTokens = zIndex.zIndex;
-
-/**
- * Tipo TypeScript para todos os tokens
- * 
- * @typedef {Object} Tokens
- * @description
- * Tipo que representa a estrutura completa de todos os tokens de design.
- * Útil para type-checking e autocomplete em IDEs.
- */
-export type Tokens = typeof tokens;
-
-/**
- * Tipo TypeScript para cores do tema claro
- * 
- * @typedef {Object} LightColors
- * @description
- * Tipo que representa todas as cores disponíveis no tema claro.
- */
-export type LightColors = typeof lightColors.colors;
-
-/**
- * Tipo TypeScript para cores do tema escuro
- * 
- * @typedef {Object} DarkColors
- * @description
- * Tipo que representa todas as cores disponíveis no tema escuro (cyberpunk).
- */
-export type DarkColors = typeof darkColors.colors;
-
-/**
- * Tipo TypeScript para tokens de tipografia
- * 
- * @typedef {Object} Typography
- * @description
- * Tipo que representa todos os tokens de tipografia.
- */
-export type Typography = typeof typography.typography;
-
-/**
- * Tipo TypeScript para tokens de espaçamento
- * 
- * @typedef {Object} Spacing
- * @description
- * Tipo que representa todos os tokens de espaçamento.
- */
-export type Spacing = typeof spacing.spacing;
-
-/**
- * Tipo TypeScript para tokens de raio de borda
- * 
- * @typedef {Object} Radius
- * @description
- * Tipo que representa todos os tokens de raio de borda.
- */
-export type Radius = typeof radius.radius;
-
-/**
- * Tipo TypeScript para tokens de sombras
- * 
- * @typedef {Object} Shadows
- * @description
- * Tipo que representa todos os tokens de sombras.
- */
-export type Shadows = typeof shadows.shadows;
-
-/**
- * Tipo TypeScript para tokens de animações
- * 
- * @typedef {Object} Animations
- * @description
- * Tipo que representa todos os tokens de animações.
- */
-export type Animations = typeof animations.animations;
-
-/**
- * Tipo TypeScript para tokens de motion
- * 
- * @typedef {Object} Motion
- * @description
- * Tipo que representa todos os tokens de motion.
- */
-export type Motion = typeof motion.motion;
-
-/**
- * Tipo TypeScript para tokens de breakpoints
- * 
- * @typedef {Object} Breakpoints
- * @description
- * Tipo que representa todos os tokens de breakpoints responsivos.
- */
-export type Breakpoints = typeof breakpoints.breakpoints;
-
-/**
- * Tipo TypeScript para tokens de z-index
- * 
- * @typedef {Object} ZIndex
- * @description
- * Tipo que representa todos os tokens de z-index.
- */
-export type ZIndex = typeof zIndex.zIndex;
-
-/**
- * Exportação padrão dos tokens
- * 
- * @description
- * Exporta o objeto principal contendo todos os tokens de design.
- * 
- * @type {Tokens}
- * @default tokens
- */
-export default tokens;
-

package/tokens/motion.json

@@ -1,33 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/theme.json",
-  "$description": "Motion tokens - Durations, easings, and transitions for animations",
-  "motion": {
-    "duration": {
-      "instant": "0ms",
-      "fast": "100ms",
-      "normal": "200ms",
-      "slow": "300ms",
-      "slower": "500ms",
-      "slowest": "800ms"
-    },
-    "easing": {
-      "linear": "linear",
-      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-      "easeOut": "cubic-bezier(0, 0, 0.2, 1)",
-      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "easeInQuad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-      "easeOutQuad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-      "easeInOutQuad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
-      "easeInCubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-      "easeOutCubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
-      "easeInOutCubic": "cubic-bezier(0.645, 0.045, 0.355, 1)",
-      "spring": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
-    },
-    "delay": {
-      "none": "0ms",
-      "short": "50ms",
-      "medium": "100ms",
-      "long": "200ms"
-    }
-  }
-}

package/tokens/radius.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/theme.json",
-  "$description": "Border radius tokens - Consistent corner rounding",
-  "radius": {
-    "none": "0px",
-    "sm": "0.125rem",
-    "base": "0.25rem",
-    "md": "0.375rem",
-    "lg": "0.5rem",
-    "xl": "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    "full": "9999px"
-  }
-}
-