@rainersoft/design-tokens 1.0.0

package/formats/tailwind.config.ts

@@ -0,0 +1,247 @@
+/**
+ * @fileoverview Configuração do Tailwind CSS gerada a partir dos design tokens
+ * 
+ * @description
+ * Configuração do Tailwind CSS gerada automaticamente a partir dos design tokens
+ * para integração perfeita. Use esta configuração no seu tailwind.config.js
+ * através de theme.extend para ter acesso a todos os tokens como classes utilitárias.
+ * 
+ * @module formats/tailwind.config
+ * @version 4.0.0
+ * @author Rainer Teixeira
+ * @since 1.0.0
+ * @generated This file is auto-generated. Do not edit manually.
+ * @source tokens/*.json
+ * 
+ * @example
+ * ```typescript
+ * // tailwind.config.js
+ * const { tailwindConfig } = require('rainer-design-tokens/formats/tailwind.config');
+ * 
+ * module.exports = {
+ *   ...tailwindConfig,
+ *   // Suas configurações adicionais
+ * };
+ * ```
+ */
+
+import { tokens } from '../tokens';
+
+/**
+ * Configuração do Tailwind CSS baseada nos design tokens
+ * 
+ * @description
+ * Objeto de configuração completo do Tailwind CSS que estende o tema padrão
+ * com todos os tokens de design do sistema. Inclui cores, tipografia,
+ * espaçamento, raios de borda e sombras.
+ * 
+ * @type {Object}
+ * @property {Object} theme - Configurações de tema do Tailwind
+ * @property {Object} theme.extend - Extensões do tema padrão
+ * @property {Object} theme.extend.colors - Cores customizadas (brand, background, surface, text, border, status)
+ * @property {Object} theme.extend.fontFamily - Famílias de fontes customizadas
+ * @property {Object} theme.extend.fontSize - Tamanhos de fonte dos tokens
+ * @property {Object} theme.extend.fontWeight - Pesos de fonte dos tokens
+ * @property {Object} theme.extend.lineHeight - Alturas de linha dos tokens
+ * @property {Object} theme.extend.letterSpacing - Espaçamento entre letras dos tokens
+ * @property {Object} theme.extend.spacing - Espaçamentos dos tokens
+ * @property {Object} theme.extend.borderRadius - Raios de borda dos tokens
+ * @property {Object} theme.extend.boxShadow - Sombras dos tokens (incluindo efeitos glow)
+ * @property {string} darkMode - Modo escuro configurado como 'class'
+ * 
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { tailwindConfig } from 'rainer-design-tokens/formats/tailwind.config';
+ * 
+ * // Usar em tailwind.config.js
+ * export default {
+ *   ...tailwindConfig,
+ *   content: ['./src'],
+ * };
+ * 
+ * // Agora você pode usar as classes em seus componentes
+ * ```
+ */
+export const tailwindConfig = {
+  theme: {
+    extend: {
+      colors: {
+        // Primary colors
+        primary: {
+          base: '#0891b2',
+          hover: '#0e7490',
+          active: '#155e75',
+          disabled: '#d4d4d4',
+          focus: '#0891b2',
+          background: '#ecfeff',
+          backgroundHover: '#cffafe',
+          backgroundActive: '#a5f3fc',
+          border: '#0891b2',
+          borderHover: '#0e7490',
+          borderFocus: '#06b6d4',
+          text: '#ffffff',
+          textHover: '#ffffff',
+          textDisabled: '#a3a3a3',
+        },
+        // Secondary colors
+        secondary: {
+          base: '#9333ea',
+          hover: '#7e22ce',
+          active: '#6b21a8',
+          disabled: '#d4d4d4',
+          focus: '#9333ea',
+          background: '#faf5ff',
+          backgroundHover: '#f3e8ff',
+          backgroundActive: '#e9d5ff',
+          border: '#9333ea',
+          borderHover: '#7e22ce',
+          borderFocus: '#a855f7',
+          text: '#ffffff',
+          textHover: '#ffffff',
+          textDisabled: '#a3a3a3',
+        },
+        // Accent colors
+        accent: {
+          base: '#db2777',
+          hover: '#be185d',
+          active: '#9f1239',
+          disabled: '#d4d4d4',
+          focus: '#db2777',
+          background: '#fdf2f8',
+          backgroundHover: '#fce7f3',
+          backgroundActive: '#fbcfe8',
+          border: '#db2777',
+          borderHover: '#be185d',
+          borderFocus: '#ec4899',
+          text: '#ffffff',
+          textHover: '#ffffff',
+          textDisabled: '#a3a3a3',
+        },
+        // Background colors
+        background: {
+          primary: '#ffffff',
+          secondary: '#fafafa',
+          tertiary: '#f5f5f5',
+          inverse: '#0a0a0f',
+          overlay: 'rgba(0, 0, 0, 0.5)',
+          muted: '#f9fafb',
+        },
+        // Surface colors
+        surface: {
+          primary: '#ffffff',
+          secondary: '#fafafa',
+          tertiary: '#f5f5f5',
+          elevated: '#ffffff',
+          overlay: 'rgba(0, 0, 0, 0.5)',
+          hover: '#f9fafb',
+          active: '#f3f4f6',
+        },
+        // Text colors
+        text: {
+          primary: '#171717',
+          secondary: '#404040',
+          tertiary: '#737373',
+          inverse: '#ffffff',
+          disabled: '#a3a3a3',
+          link: '#0891b2',
+          linkHover: '#0e7490',
+          linkActive: '#155e75',
+          linkVisited: '#7e22ce',
+          onPrimary: '#ffffff',
+          onSecondary: '#ffffff',
+          onAccent: '#ffffff',
+          onBackground: '#171717',
+          onSurface: '#171717',
+        },
+        // Border colors
+        border: {
+          primary: '#e5e5e5',
+          secondary: '#d4d4d4',
+          tertiary: '#a3a3a3',
+          focus: '#0891b2',
+          focusRing: '#06b6d4',
+          inverse: '#404040',
+          hover: '#d4d4d4',
+          active: '#a3a3a3',
+          disabled: '#e5e5e5',
+        },
+        // Status colors
+        success: {
+          base: '#22c55e',
+          hover: '#16a34a',
+          active: '#15803d',
+          background: '#f0fdf4',
+          backgroundHover: '#dcfce7',
+          border: '#86efac',
+          text: '#ffffff',
+          textOnBackground: '#166534',
+        },
+        warning: {
+          base: '#f59e0b',
+          hover: '#d97706',
+          active: '#b45309',
+          background: '#fffbeb',
+          backgroundHover: '#fef3c7',
+          border: '#fcd34d',
+          text: '#ffffff',
+          textOnBackground: '#92400e',
+        },
+        error: {
+          base: '#ef4444',
+          hover: '#dc2626',
+          active: '#b91c1c',
+          background: '#fef2f2',
+          backgroundHover: '#fee2e2',
+          border: '#fca5a5',
+          text: '#ffffff',
+          textOnBackground: '#991b1b',
+        },
+        info: {
+          base: '#3b82f6',
+          hover: '#2563eb',
+          active: '#1d4ed8',
+          background: '#eff6ff',
+          backgroundHover: '#dbeafe',
+          border: '#93c5fd',
+          text: '#ffffff',
+          textOnBackground: '#1e40af',
+        },
+      },
+      fontFamily: {
+        sans: ["ui-sans-serif","system-ui","-apple-system","BlinkMacSystemFont","'Segoe UI'","Roboto","'Helvetica Neue'","Arial","'Noto Sans'","sans-serif","'Apple Color Emoji'","'Segoe UI Emoji'","'Segoe UI Symbol'","'Noto Color Emoji'"],
+        serif: ["ui-serif","Georgia","Cambria","'Times New Roman'","Times","serif"],
+        mono: ["ui-monospace","SFMono-Regular","Menlo","Monaco","Consolas","'Liberation Mono'","'Courier New'","monospace"],
+        display: 'var(--font-orbitron, ui-sans-serif)',
+        body: 'var(--font-inter, ui-sans-serif)',
+      },
+      fontSize: tokens.typography.fontSize,
+      fontWeight: tokens.typography.fontWeight,
+      lineHeight: tokens.typography.lineHeight,
+      letterSpacing: tokens.typography.letterSpacing,
+      spacing: tokens.spacing,
+      borderRadius: tokens.radius,
+      boxShadow: {
+        ...tokens.shadows.light,
+        'glow-cyan': '0 0 20px rgba(0, 230, 255, 0.5), 0 0 40px rgba(0, 230, 255, 0.3)',
+        'glow-pink': '0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3)',
+        'glow-purple': '0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(125, 0, 255, 0.3)',
+        'glow-green': '0 0 20px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.3)',
+      },
+    },
+  },
+  darkMode: 'class',
+} as const;
+
+/**
+ * Exportação padrão da configuração do Tailwind
+ * 
+ * @description
+ * Exporta a configuração do Tailwind CSS como exportação padrão do módulo.
+ * 
+ * @type {typeof tailwindConfig}
+ * @default tailwindConfig
+ */
+export default tailwindConfig;

package/formats/tokens.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://json.schemastore.org/rainer-design-tokens.json",
+  "name": "@rainersoft/design-tokens",
+  "version": "1.0.0",
+  "description": "Universal design tokens export for Rainer Design System",
+  "$generated": "This file is auto-generated. Do not edit manually.",
+  "$source": "tokens/*.json",
+  "colors": {
+    "light": {
+      "$type": "color",
+      "$value": "See tokens/colors/light.json",
+      "$path": "tokens/colors/light.json"
+    },
+    "dark": {
+      "$type": "color",
+      "$value": "See tokens/colors/dark.json",
+      "$path": "tokens/colors/dark.json"
+    }
+  },
+  "typography": {
+    "$type": "typography",
+    "$value": "See tokens/typography.json",
+    "$path": "tokens/typography.json"
+  },
+  "spacing": {
+    "$type": "dimension",
+    "$value": "See tokens/spacing.json",
+    "$path": "tokens/spacing.json"
+  },
+  "radius": {
+    "$type": "dimension",
+    "$value": "See tokens/radius.json",
+    "$path": "tokens/radius.json"
+  },
+  "shadows": {
+    "$type": "shadow",
+    "$value": "See tokens/shadows.json",
+    "$path": "tokens/shadows.json"
+  },
+  "meta": {
+    "repository": "https://github.com/RainerTeixeira/rainer-design-tokens.git",
+    "author": "Rainer Teixeira <suporte@rainersoft.com.br>",
+    "license": "MIT",
+    "generatedAt": "2025-11-18T02:55:52.740Z"
+  }
+}

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "@rainersoft/design-tokens",
+  "version": "1.0.0",
+  "type": "module",
+  "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",
+  "keywords": [
+    "design-tokens",
+    "@rainersoft/design-tokens",
+    "w3c",
+    "dtcg",
+    "storybook",
+    "tailwind",
+    "react",
+    "nextjs",
+    "design-system",
+    "tokens",
+    "css",
+    "typescript",
+    "primitive-tokens",
+    "semantic-tokens",
+    "theme",
+    "dark-mode",
+    "8pt-grid",
+    "modular-scale"
+  ],
+  "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.js"
+    },
+    "./css": {
+      "types": "./dist/css.d.ts",
+      "import": "./dist/css.mjs",
+      "require": "./dist/css.js"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.mjs",
+      "require": "./dist/tailwind.js"
+    },
+    "./formats/css-vars.css": "./formats/css-vars.css",
+    "./formats/tokens.json": "./formats/tokens.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "formats",
+    "tokens",
+    "themes",
+    "README.md",
+    "LICENSE"
+  ],
+  "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",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "pnpm exec eslint .",
+    "test": "echo \"No tests configured\" && exit 0",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare:publish": "node scripts/prepare-publish.js",
+    "setup:auth": "node scripts/setup-npm-auth.js",
+    "prepublishOnly": "pnpm run build && pnpm run type-check",
+    "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "update:dates": "tsx scripts/update-dates.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"
+  },
+  "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",
+    "@types/jest": "^29.5.11",
+    "@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",
+    "jest": "^29.7.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.0.8",
+    "ts-jest": "^29.1.1",
+    "tsup": "^8.0.1",
+    "tsx": "^4.20.6",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.47.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "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"
+}

package/themes/dark.ts

@@ -0,0 +1,89 @@
+/**
+ * @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 4.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 'rainer-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

@@ -0,0 +1,99 @@
+/**
+ * @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 4.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 'rainer-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

@@ -0,0 +1,88 @@
+/**
+ * @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 4.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 'rainer-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;