@rainersoft/design-tokens 2.0.0 → 2.3.0

package/formats/tokens.json

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

package/package.json

@@ -1,126 +1,78 @@
 {
   "name": "@rainersoft/design-tokens",
-  "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>",
+  "version": "2.3.0",
+  "description": "Design tokens globais (CSS Variables, Tailwind config, temas) para o ecossistema Rainersoft",
+  "author": {
+    "name": "Rainer Teixeira",
+    "email": "suporte@rainersoft.com.br"
+  },
   "license": "MIT",
+  "packageManager": "pnpm@9.0.0",
   "keywords": [
     "design-tokens",
-    "@rainersoft/design-tokens",
-    "w3c",
-    "dtcg",
-    "storybook",
+    "css-variables",
     "tailwind",
-    "react",
-    "nextjs",
     "design-system",
-    "tokens",
-    "css",
-    "typescript",
-    "primitive-tokens",
-    "semantic-tokens",
-    "theme",
-    "dark-mode",
-    "8pt-grid",
-    "modular-scale"
+    "themes",
+    "dark-mode"
   ],
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.mjs",
-      "default": "./dist/index.mjs"
-    },
-    "./css": {
-      "types": "./dist/css.d.ts",
-      "import": "./dist/css.mjs"
-    },
-    "./tailwind": {
-      "types": "./dist/tailwind.d.ts",
-      "import": "./dist/tailwind.mjs"
+      "require": "./dist/index.js"
     },
+    "./src/css-vars.css": "./src/css-vars.css",
     "./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"
-    },
+    "./formats/tailwind.config": "./formats/tailwind.config.ts",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "src",
     "formats",
-    "tokens",
-    "themes",
-    "README.md",
-    "LICENSE"
+    "README.md"
   ],
   "scripts": {
-    "build": "pnpm run build:formats && tsup",
-    "build:formats": "tsx scripts/build-formats.ts",
-    "build:css": "tsx scripts/build-css.ts",
-    "build:tailwind": "tsx scripts/build-tailwind.ts",
-    "build:tokens-json": "tsx scripts/build-tokens-json.ts",
+    "build": "tsx scripts/build-formats.ts && tsup",
     "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "pnpm exec eslint .",
+    "lint": "eslint . --ext ts,tsx",
     "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 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"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0"
+    "clean": "rimraf dist node_modules pnpm-lock.yaml",
+    "type-check": "tsc --noEmit",
+    "validate": "node scripts/validate-tokens.js"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-onboarding": "^10.0.8",
-    "@storybook/react": "^10.0.8",
-    "@storybook/react-vite": "^10.0.8",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/jest": "^29.5.11",
+    "@types/minimatch": "^6.0.0",
     "@types/node": "^20.10.0",
-    "@types/react": "^18.2.45",
-    "@typescript-eslint/eslint-plugin": "^8.18.2",
-    "@typescript-eslint/parser": "^8.18.2",
-    "debug": "^4.4.3",
-    "eslint": "^9.39.1",
-    "eslint-plugin-storybook": "^10.0.8",
-    "globals": "^16.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.1",
     "jest": "^29.7.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "storybook": "^10.0.8",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^4.0.0",
     "ts-jest": "^29.1.1",
     "tsup": "^8.0.1",
     "tsx": "^4.20.6",
-    "typescript": "^5.3.3",
-    "typescript-eslint": "^8.47.0"
+    "typescript": "^5.3.3"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/RainerTeixeira/rainer-design-tokens.git"
+    "url": "git+https://github.com/RainerTeixeira/rainer-design-tokens.git"
   },
   "bugs": {
     "url": "https://github.com/RainerTeixeira/rainer-design-tokens/issues"
   },
-  "homepage": "https://github.com/RainerTeixeira/rainer-design-tokens#readme"
+  "homepage": "https://github.com/RainerTeixeira/rainer-design-tokens#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
 }

package/themes/dark.ts

@@ -1,89 +0,0 @@
-/**
- * @fileoverview Tema Escuro - Edição Cyberpunk
- *
- * @description
- * Combina tokens de design em um tema escuro inspirado no estilo cyberpunk.
- * Possui cores neon vibrantes e efeitos de brilho (glow) para uso noturno.
- * Este tema oferece uma experiência visual única e moderna, ideal para
- * aplicações que buscam um visual futurista e impactante.
- *
- * @module themes/dark
- * @version 2.0.0
- * @author Rainer Teixeira
- * @since 1.0.0
- */
-
-import { tokens } from '../tokens';
-
-/**
- * Objeto contendo os tokens para o tema escuro
- * 
- * @description
- * Tema completo que agrupa todos os tokens de design necessários
- * para uma aplicação com tema escuro cyberpunk. Inclui cores neon,
- * tipografia, espaçamento, raios de borda e sombras com efeitos de brilho.
- * 
- * @type {Object}
- * @property {Object} colors - Tokens de cores para o tema escuro (cyberpunk)
- * @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 com efeitos de brilho para o tema escuro
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { darkTheme } from '@rainersoft/design-tokens';
- * 
- * // Acessar cores neon do tema escuro
- * const neonCyan = darkTheme.colors.accent.cyan;
- * 
- * // Acessar efeitos de brilho
- * const glowShadow = darkTheme.shadows.glow.cyan;
- * 
- * // Aplicar em componente
- * <div style={{ 
- *   backgroundColor: darkTheme.colors.background.primary,
- *   boxShadow: darkTheme.shadows.glow.purple,
- *   padding: darkTheme.spacing.md 
- * }}>
- *   Conteúdo Cyberpunk
- * </div>
- * ```
- */
-export const darkTheme = {
-  colors: tokens.colors.dark,
-  typography: tokens.typography,
-  spacing: tokens.spacing,
-  radius: tokens.radius,
-  shadows: tokens.shadows.dark,
-} as const;
-
-/**
- * Tipo TypeScript do tema escuro
- * 
- * @typedef {Object} DarkTheme
- * @description
- * Tipo que representa a estrutura completa do tema escuro.
- * Útil para type-checking e autocomplete em IDEs.
- * 
- * @property {Object} colors - Cores do tema escuro (cyberpunk)
- * @property {Object} typography - Tokens de tipografia
- * @property {Object} spacing - Tokens de espaçamento
- * @property {Object} radius - Tokens de raio de borda
- * @property {Object} shadows - Sombras com efeitos de brilho do tema escuro
- */
-export type DarkTheme = typeof darkTheme;
-
-/**
- * Exportação padrão do tema escuro
- * 
- * @description
- * Exporta o tema escuro como exportação padrão do módulo.
- * 
- * @type {DarkTheme}
- * @default darkTheme
- */
-export default darkTheme;

package/themes/index.ts

@@ -1,99 +0,0 @@
-/**
- * @fileoverview Ponto de entrada dos temas
- * 
- * @description
- * Exporta os temas claro e escuro para fácil consumo.
- * Cada tema agrupa todos os tokens de design de forma organizada,
- * facilitando a aplicação de temas completos na aplicação.
- * 
- * @module themes
- * @version 2.0.0
- * @author Rainer Teixeira
- * @since 1.0.0
- * 
- * @example
- * ```typescript
- * import { themes, lightTheme, darkTheme } from '@rainersoft/design-tokens';
- * 
- * // Usar tema completo
- * const currentTheme = themes.light;
- * 
- * // Ou importar diretamente
- * const colors = lightTheme.colors;
- * ```
- */
-
-/**
- * Exporta o tema claro e seu tipo
- * 
- * @description
- * Tema claro profissional e limpo, adequado para uso diurno.
- * 
- * @see {LightTheme} Para o tipo TypeScript do tema claro
- */
-export { lightTheme, type LightTheme } from './light';
-
-/**
- * Exporta o tema escuro e seu tipo
- * 
- * @description
- * Tema escuro inspirado no estilo cyberpunk com cores neon e efeitos de brilho.
- * 
- * @see {DarkTheme} Para o tipo TypeScript do tema escuro
- */
-export { darkTheme, type DarkTheme } from './dark';
-
-/**
- * Objeto contendo todos os temas disponíveis
- * 
- * @description
- * Objeto que agrupa todos os temas do sistema, permitindo acesso
- * fácil e organizado aos diferentes temas disponíveis.
- * 
- * @type {Object}
- * @property {LightTheme} light - Tema claro
- * @property {DarkTheme} dark - Tema escuro (cyberpunk)
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { themes } from '@rainersoft/design-tokens';
- * 
- * // Acessar tema claro
- * const lightColors = themes.light.colors;
- * 
- * // Acessar tema escuro
- * const darkShadows = themes.dark.shadows;
- * ```
- */
-import { lightTheme } from './light';
-import { darkTheme } from './dark';
-
-export const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-} as const;
-
-/**
- * Tipo TypeScript para todos os temas
- * 
- * @typedef {Object} Themes
- * @description
- * Tipo que representa a estrutura completa de todos os temas disponíveis.
- * Útil para type-checking e autocomplete em IDEs.
- */
-export type Themes = typeof themes;
-
-/**
- * Exportação padrão dos temas
- * 
- * @description
- * Exporta o objeto principal contendo todos os temas disponíveis.
- * 
- * @type {Themes}
- * @default themes
- */
-export default themes;
-

package/themes/light.ts

@@ -1,88 +0,0 @@
-/**
- * @fileoverview Tema Claro - Rainer Design System
- *
- * @description
- * Agrupa os design tokens em um tema claro profissional e limpo,
- * adequado para uso diurno. Este tema oferece uma experiência visual
- * clara e moderna, ideal para aplicações que requerem legibilidade
- * e profissionalismo.
- *
- * @module themes/light
- * @version 2.0.0
- * @author Rainer Teixeira
- * @since 1.0.0
- */
-
-import { tokens } from '../tokens';
-
-/**
- * Objeto contendo os tokens para o tema claro
- * 
- * @description
- * Tema completo que agrupa todos os tokens de design necessários
- * para uma aplicação com tema claro. Inclui cores, tipografia,
- * espaçamento, raios de borda e sombras.
- * 
- * @type {Object}
- * @property {Object} colors - Tokens de cores para o tema claro
- * @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 o tema claro
- * 
- * @constant
- * @readonly
- * 
- * @example
- * ```typescript
- * import { lightTheme } from '@rainersoft/design-tokens';
- * 
- * // Acessar cores do tema claro
- * const primaryColor = lightTheme.colors.brand.primary;
- * 
- * // Acessar tipografia
- * const fontSize = lightTheme.typography.fontSize.lg;
- * 
- * // Aplicar em componente
- * <div style={{ 
- *   backgroundColor: lightTheme.colors.background.primary,
- *   padding: lightTheme.spacing.md 
- * }}>
- *   Conteúdo
- * </div>
- * ```
- */
-export const lightTheme = {
-  colors: tokens.colors.light,
-  typography: tokens.typography,
-  spacing: tokens.spacing,
-  radius: tokens.radius,
-  shadows: tokens.shadows.light,
-} as const;
-
-/**
- * Tipo TypeScript do tema claro
- * 
- * @typedef {Object} LightTheme
- * @description
- * Tipo que representa a estrutura completa do tema claro.
- * Útil para type-checking e autocomplete em IDEs.
- * 
- * @property {Object} colors - Cores do tema claro
- * @property {Object} typography - Tokens de tipografia
- * @property {Object} spacing - Tokens de espaçamento
- * @property {Object} radius - Tokens de raio de borda
- * @property {Object} shadows - Sombras do tema claro
- */
-export type LightTheme = typeof lightTheme;
-
-/**
- * Exportação padrão do tema claro
- * 
- * @description
- * Exporta o tema claro como exportação padrão do módulo.
- * 
- * @type {LightTheme}
- * @default lightTheme
- */
-export default lightTheme;