@rainersoft/design-tokens 1.0.4 → 2.0.0

package/tokens/hero.json

@@ -0,0 +1,69 @@
+{
+  "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

@@ -7,7 +7,7 @@
  * framework ou tecnologia, garantindo consistência visual.
  * 
  * @module tokens
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -19,6 +19,12 @@ 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';
@@ -48,7 +54,7 @@ export * from './accessibility';
  * 
  * @example
  * ```typescript
- * import { tokens } from 'rainer-design-tokens';
+ * import { tokens } from '@rainersoft/design-tokens';
  * 
  * // Acessar cor primária do tema claro
  * const primaryColor = tokens.colors.light.brand.primary;
@@ -67,6 +73,14 @@ export const tokens = {
   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;
 
 /**
@@ -81,7 +95,7 @@ export const tokens = {
  * 
  * @example
  * ```typescript
- * import { lightThemeColors } from 'rainer-design-tokens';
+ * import { lightThemeColors } from '@rainersoft/design-tokens';
  * 
  * const primaryColor = lightThemeColors.brand.primary;
  * ```
@@ -100,7 +114,7 @@ export const lightThemeColors = lightColors.colors;
  * 
  * @example
  * ```typescript
- * import { darkThemeColors } from 'rainer-design-tokens';
+ * import { darkThemeColors } from '@rainersoft/design-tokens';
  * 
  * const neonColor = darkThemeColors.accent.cyan;
  * ```
@@ -120,7 +134,7 @@ export const darkThemeColors = darkColors.colors;
  * 
  * @example
  * ```typescript
- * import { typographyTokens } from 'rainer-design-tokens';
+ * import { typographyTokens } from '@rainersoft/design-tokens';
  * 
  * const fontSize = typographyTokens.fontSize.lg;
  * const fontFamily = typographyTokens.fontFamily.sans;
@@ -141,7 +155,7 @@ export const typographyTokens = typography.typography;
  * 
  * @example
  * ```typescript
- * import { spacingTokens } from 'rainer-design-tokens';
+ * import { spacingTokens } from '@rainersoft/design-tokens';
  * 
  * const margin = spacingTokens.md;
  * const padding = spacingTokens.lg;
@@ -161,7 +175,7 @@ export const spacingTokens = spacing.spacing;
  * 
  * @example
  * ```typescript
- * import { radiusTokens } from 'rainer-design-tokens';
+ * import { radiusTokens } from '@rainersoft/design-tokens';
  * 
  * const borderRadius = radiusTokens.md;
  * ```
@@ -181,7 +195,7 @@ export const radiusTokens = radius.radius;
  * 
  * @example
  * ```typescript
- * import { shadowTokens } from 'rainer-design-tokens';
+ * import { shadowTokens } from '@rainersoft/design-tokens';
  * 
  * const shadow = shadowTokens.light.md;
  * const glow = shadowTokens.dark.glow.cyan;
@@ -202,7 +216,7 @@ export const shadowTokens = shadows.shadows;
  * 
  * @example
  * ```typescript
- * import { animationTokens } from 'rainer-design-tokens';
+ * import { animationTokens } from '@rainersoft/design-tokens';
  * 
  * const slideIn = animationTokens['slide-in'];
  * const fadeIn = animationTokens['fade-in'];
@@ -210,6 +224,112 @@ export const shadowTokens = shadows.shadows;
  */
 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
  * 
@@ -283,6 +403,33 @@ export type Shadows = typeof shadows.shadows;
  */
 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
  * 

package/tokens/motion.json

@@ -0,0 +1,33 @@
+{
+  "$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"
+    }
+  }
+}