@rainersoft/design-tokens 1.0.4 → 2.0.0

package/formats/tailwind.config.ts

@@ -7,7 +7,7 @@
  * através de theme.extend para ter acesso a todos os tokens como classes utilitárias.
  * 
  * @module formats/tailwind.config
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  * @generated This file is auto-generated. Do not edit manually.
@@ -15,17 +15,18 @@
  * 
  * @example
  * ```typescript
- * // tailwind.config.js
- * const { tailwindConfig } = require('rainer-design-tokens/formats/tailwind.config');
+ * // tailwind.config.ts
+ * import { tailwindConfig } from '@rainersoft/design-tokens/formats/tailwind.config';
  * 
- * module.exports = {
+ * export default {
  *   ...tailwindConfig,
+ *   content: ['./src/**/*.{js,ts,jsx,tsx}'],
  *   // Suas configurações adicionais
  * };
  * ```
  */
 
-import { tokens } from '../tokens';
+import { tokens } from '@rainersoft/design-tokens';
 
 /**
  * Configuração do Tailwind CSS baseada nos design tokens
@@ -56,7 +57,7 @@ import { tokens } from '../tokens';
  * 
  * @example
  * ```typescript
- * import { tailwindConfig } from 'rainer-design-tokens/formats/tailwind.config';
+ * import { tailwindConfig } from '@rainersoft/design-tokens/formats/tailwind.config';
  * 
  * // Usar em tailwind.config.js
  * export default {
@@ -237,6 +238,11 @@ export const tailwindConfig = {
         'accordion-up': 'accordion-up 0.2s ease-out',
         'slide-in': 'slide-in 0.3s ease-out',
         'fade-in': 'fade-in 0.5s ease-in',
+        'glitch': 'glitch 4s linear',
+        'neon-pulse': 'neon-pulse 2s ease-in-out',
+        'flicker': 'flicker 2s linear',
+        'scan-line': 'scan-line 4s linear',
+        'glitch-after': 'glitch-after 3s linear',
       },
       keyframes: {
         'accordion-down': {
@@ -273,6 +279,58 @@ export const tailwindConfig = {
             opacity: '1',
           },
         },
+        'glitch': {
+          '0%, 100%': {
+            transform: 'translate(0)',
+          },
+          '10%': {
+            transform: 'translate(-2px, 2px)',
+          },
+          '20%': {
+            transform: 'translate(2px, -2px)',
+          },
+          '30%, 50%, 70%, 90%': {
+            transform: 'translate(0)',
+          },
+        },
+        'neon-pulse': {
+          '0%, 100%': {
+            filter: 'brightness(1) saturate(1)',
+          },
+          '50%': {
+            filter: 'brightness(1.3) saturate(1.2)',
+          },
+        },
+        'flicker': {
+          '0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%': {
+            opacity: '1',
+            filter: 'brightness(1.2)',
+          },
+          '20%, 21.999%, 63%, 63.999%, 65%, 69.999%': {
+            opacity: '0.85',
+            filter: 'brightness(0.9)',
+          },
+        },
+        'scan-line': {
+          '0%': {
+            top: '0',
+          },
+          '100%': {
+            top: '100%',
+          },
+        },
+        'glitch-after': {
+          '0%, 100%': {
+            opacity: '0',
+          },
+          '5%, 10%': {
+            opacity: '0.8',
+            transform: 'translate(-3px, 3px)',
+          },
+          '15%, 95%': {
+            opacity: '0',
+          },
+        },
       },
     },
   },

package/formats/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/rainer-design-tokens.json",
   "name": "@rainersoft/design-tokens",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Universal design tokens export for Rainer Design System",
   "$generated": "This file is auto-generated. Do not edit manually.",
   "$source": "tokens/*.json",
@@ -41,6 +41,6 @@
     "repository": "https://github.com/RainerTeixeira/rainer-design-tokens.git",
     "author": "Rainer Teixeira <suporte@rainersoft.com.br>",
     "license": "MIT",
-    "generatedAt": "2025-11-18T16:07:11.606Z"
+    "generatedAt": "2025-11-21T14:44:52.195Z"
   }
 }

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@rainersoft/design-tokens",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "type": "module",
+  "packageManager": "pnpm@9.0.0",
   "description": "Design tokens profissionais seguindo padrões W3C/DTCG, com estrutura modular e suporte a tokens primitivos e semânticos.",
   "author": "Rainer Teixeira <suporte@rainersoft.com.br>",
   "license": "MIT",
@@ -25,31 +26,29 @@
     "8pt-grid",
     "modular-scale"
   ],
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
     "./css": {
       "types": "./dist/css.d.ts",
-      "import": "./dist/css.mjs",
-      "require": "./dist/css.js"
+      "import": "./dist/css.mjs"
     },
     "./tailwind": {
       "types": "./dist/tailwind.d.ts",
-      "import": "./dist/tailwind.mjs",
-      "require": "./dist/tailwind.js"
+      "import": "./dist/tailwind.mjs"
     },
     "./formats/css-vars.css": "./formats/css-vars.css",
     "./formats/tokens.json": "./formats/tokens.json",
     "./formats/tailwind.config": {
       "types": "./formats/tailwind.config.ts",
-      "import": "./formats/tailwind.config.ts",
-      "require": "./formats/tailwind.config.ts"
+      "import": "./formats/tailwind.config.ts"
     },
     "./package.json": "./package.json"
   },
@@ -70,16 +69,20 @@
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "lint": "pnpm exec eslint .",
-    "test": "echo \"No tests configured\" && exit 0",
+    "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "dev:editor": "node token-editor/server.js",
+    "start:editor": "node token-editor/server.js",
     "prepare:publish": "node scripts/prepare-publish.js",
     "setup:auth": "node scripts/setup-npm-auth.js",
-    "prepublishOnly": "pnpm run build:formats && pnpm run type-check",
-    "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
+    "prepublishOnly": "pnpm run build:formats && pnpm run update:version && pnpm run type-check",
+    "clean": "pnpm exec rimraf dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "update:dates": "tsx scripts/update-dates.ts",
+    "update:version": "tsx scripts/update-version.ts",
+    "changelog": "tsx scripts/generate-changelog.ts",
     "setup": "pnpm install",
     "setup:clean": "pnpm run clean:all && pnpm install",
     "clean:all": "pnpm exec rimraf node_modules pnpm-lock.yaml dist .storybook-build"

package/themes/dark.ts

@@ -8,7 +8,7 @@
  * aplicações que buscam um visual futurista e impactante.
  *
  * @module themes/dark
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -35,7 +35,7 @@ import { tokens } from '../tokens';
  * 
  * @example
  * ```typescript
- * import { darkTheme } from 'rainer-design-tokens';
+ * import { darkTheme } from '@rainersoft/design-tokens';
  * 
  * // Acessar cores neon do tema escuro
  * const neonCyan = darkTheme.colors.accent.cyan;

package/themes/index.ts

@@ -7,7 +7,7 @@
  * facilitando a aplicação de temas completos na aplicação.
  * 
  * @module themes
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  * 
@@ -59,7 +59,7 @@ export { darkTheme, type DarkTheme } from './dark';
  * 
  * @example
  * ```typescript
- * import { themes } from 'rainer-design-tokens';
+ * import { themes } from '@rainersoft/design-tokens';
  * 
  * // Acessar tema claro
  * const lightColors = themes.light.colors;

package/themes/light.ts

@@ -8,7 +8,7 @@
  * e profissionalismo.
  *
  * @module themes/light
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -35,7 +35,7 @@ import { tokens } from '../tokens';
  * 
  * @example
  * ```typescript
- * import { lightTheme } from 'rainer-design-tokens';
+ * import { lightTheme } from '@rainersoft/design-tokens';
  * 
  * // Acessar cores do tema claro
  * const primaryColor = lightTheme.colors.brand.primary;

package/tokens/accessibility.ts

@@ -7,7 +7,7 @@
  * qualquer ambiente (web, mobile, desktop).
  * 
  * @module tokens/accessibility
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */

package/tokens/animations.json

@@ -53,6 +53,89 @@
           "opacity": "1"
         }
       }
+    },
+    "glitch": {
+      "name": "glitch",
+      "duration": "4s",
+      "timingFunction": "linear",
+      "iterationCount": "infinite",
+      "keyframes": {
+        "0%, 100%": {
+          "transform": "translate(0)"
+        },
+        "10%": {
+          "transform": "translate(-2px, 2px)"
+        },
+        "20%": {
+          "transform": "translate(2px, -2px)"
+        },
+        "30%, 50%, 70%, 90%": {
+          "transform": "translate(0)"
+        }
+      }
+    },
+    "neon-pulse": {
+      "name": "neon-pulse",
+      "duration": "2s",
+      "timingFunction": "ease-in-out",
+      "iterationCount": "infinite",
+      "direction": "alternate",
+      "keyframes": {
+        "0%, 100%": {
+          "filter": "brightness(1) saturate(1)"
+        },
+        "50%": {
+          "filter": "brightness(1.3) saturate(1.2)"
+        }
+      }
+    },
+    "flicker": {
+      "name": "flicker",
+      "duration": "2s",
+      "timingFunction": "linear",
+      "iterationCount": "infinite",
+      "keyframes": {
+        "0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+          "opacity": "1",
+          "filter": "brightness(1.2)"
+        },
+        "20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+          "opacity": "0.85",
+          "filter": "brightness(0.9)"
+        }
+      }
+    },
+    "scan-line": {
+      "name": "scan-line",
+      "duration": "4s",
+      "timingFunction": "linear",
+      "iterationCount": "infinite",
+      "keyframes": {
+        "0%": {
+          "top": "0"
+        },
+        "100%": {
+          "top": "100%"
+        }
+      }
+    },
+    "glitch-after": {
+      "name": "glitch-after",
+      "duration": "3s",
+      "timingFunction": "linear",
+      "iterationCount": "infinite",
+      "keyframes": {
+        "0%, 100%": {
+          "opacity": "0"
+        },
+        "5%, 10%": {
+          "opacity": "0.8",
+          "transform": "translate(-3px, 3px)"
+        },
+        "15%, 95%": {
+          "opacity": "0"
+        }
+      }
     }
   }
 }

package/tokens/breakpoints.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/theme.json",
+  "$description": "Responsive breakpoints - Mobile-first approach",
+  "breakpoints": {
+    "xs": "0px",
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px",
+    "3xl": "1920px"
+  },
+  "container": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px",
+    "3xl": "1920px"
+  },
+  "mediaQueries": {
+    "xs": "@media (min-width: 0px)",
+    "sm": "@media (min-width: 640px)",
+    "md": "@media (min-width: 768px)",
+    "lg": "@media (min-width: 1024px)",
+    "xl": "@media (min-width: 1280px)",
+    "2xl": "@media (min-width: 1536px)",
+    "3xl": "@media (min-width: 1920px)"
+  }
+}

package/tokens/components/celestial-background.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$description": "Tokens para componente de background celestial - configurações de estrelas, nebulosas e efeitos espaciais",
+  "celestialBackground": {
+    "stars": {
+      "default": {
+        "count": 150,
+        "sizes": [1, 1.5, 2],
+        "opacity": [0.35, 0.55, 0.75],
+        "glow": {
+          "color": "rgba(255, 255, 255, 0.8)",
+          "radius": 2
+        }
+      },
+      "dense": {
+        "count": 250,
+        "sizes": [1, 1.5, 2, 2.5],
+        "opacity": [0.25, 0.45, 0.65, 0.85],
+        "glow": {
+          "color": "rgba(255, 255, 255, 0.8)",
+          "radius": 2
+        }
+      },
+      "sparse": {
+        "count": 80,
+        "sizes": [1, 1.5],
+        "opacity": [0.45, 0.65],
+        "glow": {
+          "color": "rgba(255, 255, 255, 0.8)",
+          "radius": 2
+        }
+      }
+    },
+    "nebula": {
+      "cyan": {
+        "position": {
+          "top": "0%",
+          "left": "0%"
+        },
+        "size": {
+          "width": "40%",
+          "height": "40%"
+        },
+        "gradient": {
+          "type": "radial",
+          "center": "0% 0%",
+          "colorStops": [
+            { "color": "cyan.400", "alpha": 0.06, "position": "0%" },
+            { "color": "cyan.400", "alpha": 0.04, "position": "30%" },
+            { "color": "transparent", "alpha": 0, "position": "70%" }
+          ]
+        },
+        "blur": "3xl"
+      },
+      "purple": {
+        "position": {
+          "top": "50%",
+          "right": "0%"
+        },
+        "size": {
+          "width": "35%",
+          "height": "35%"
+        },
+        "gradient": {
+          "type": "radial",
+          "center": "100% 50%",
+          "colorStops": [
+            { "color": "purple.400", "alpha": 0.06, "position": "0%" },
+            { "color": "purple.400", "alpha": 0.04, "position": "30%" },
+            { "color": "transparent", "alpha": 0, "position": "70%" }
+          ]
+        },
+        "blur": "3xl"
+      },
+      "pink": {
+        "position": {
+          "bottom": "0%",
+          "left": "25%"
+        },
+        "size": {
+          "width": "30%",
+          "height": "30%"
+        },
+        "gradient": {
+          "type": "radial",
+          "center": "25% 100%",
+          "colorStops": [
+            { "color": "pink.500", "alpha": 0.06, "position": "0%" },
+            { "color": "pink.500", "alpha": 0.04, "position": "30%" },
+            { "color": "transparent", "alpha": 0, "position": "70%" }
+          ]
+        },
+        "blur": "3xl"
+      }
+    },
+    "baseGradient": {
+      "direction": "to-bottom",
+      "from": "black",
+      "via": {
+        "color": "purple-950",
+        "alpha": 0.35
+      },
+      "to": "black"
+    }
+  }
+}

package/tokens/effects.json

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