@metropolle/design-system 1.0.0-beta.20250821022912.15e7eda → 1.0.0-beta.2026.1.1.1723.0f6bc6d

package/dist/tokens/colors.json

@@ -5,14 +5,48 @@
   "color": {
     "brand": {
       "primary": {
-        "value": "#0055FF",
-        "type": "color",
-        "description": "Cor primária da marca Metropolle"
+        "default": {
+          "value": "#0055FF",
+          "type": "color",
+          "description": "Cor primaria da marca Metropolle"
+        },
+        "hover": {
+          "value": "#0044CC",
+          "type": "color",
+          "description": "Primary no estado hover"
+        },
+        "active": {
+          "value": "#003399",
+          "type": "color",
+          "description": "Primary no estado active/pressed"
+        },
+        "disabled": {
+          "value": "#80AAFF",
+          "type": "color",
+          "description": "Primary no estado disabled"
+        }
       },
       "secondary": {
-        "value": "#FF9900",
-        "type": "color", 
-        "description": "Cor secundária complementar"
+        "default": {
+          "value": "#FF9900",
+          "type": "color",
+          "description": "Cor secundaria complementar"
+        },
+        "hover": {
+          "value": "#E68A00",
+          "type": "color",
+          "description": "Secondary no estado hover"
+        },
+        "active": {
+          "value": "#CC7A00",
+          "type": "color",
+          "description": "Secondary no estado active/pressed"
+        },
+        "disabled": {
+          "value": "#FFCC80",
+          "type": "color",
+          "description": "Secondary no estado disabled"
+        }
       },
       "neutral": {
         "value": "#333333",
@@ -22,24 +56,72 @@
     },
     "semantic": {
       "success": {
-        "value": "#10B981",
-        "type": "color",
-        "description": "Verde para estados de sucesso"
+        "default": {
+          "value": "#10B981",
+          "type": "color",
+          "description": "Verde para estados de sucesso"
+        },
+        "light": {
+          "value": "#D1FAE5",
+          "type": "color",
+          "description": "Success light para backgrounds"
+        },
+        "dark": {
+          "value": "#065F46",
+          "type": "color",
+          "description": "Success dark para texto em fundo claro"
+        }
       },
       "warning": {
-        "value": "#F59E0B", 
-        "type": "color",
-        "description": "Amarelo para avisos"
+        "default": {
+          "value": "#F59E0B",
+          "type": "color",
+          "description": "Amarelo para avisos"
+        },
+        "light": {
+          "value": "#FEF3C7",
+          "type": "color",
+          "description": "Warning light para backgrounds"
+        },
+        "dark": {
+          "value": "#92400E",
+          "type": "color",
+          "description": "Warning dark para texto em fundo claro"
+        }
       },
       "error": {
-        "value": "#EF4444",
-        "type": "color",
-        "description": "Vermelho para erros"
+        "default": {
+          "value": "#EF4444",
+          "type": "color",
+          "description": "Vermelho para erros"
+        },
+        "light": {
+          "value": "#FEE2E2",
+          "type": "color",
+          "description": "Error light para backgrounds"
+        },
+        "dark": {
+          "value": "#991B1B",
+          "type": "color",
+          "description": "Error dark para texto em fundo claro"
+        }
       },
       "info": {
-        "value": "#3B82F6",
-        "type": "color",
-        "description": "Azul para informações"
+        "default": {
+          "value": "#3B82F6",
+          "type": "color",
+          "description": "Azul para informacoes"
+        },
+        "light": {
+          "value": "#DBEAFE",
+          "type": "color",
+          "description": "Info light para backgrounds"
+        },
+        "dark": {
+          "value": "#1E40AF",
+          "type": "color",
+          "description": "Info dark para texto em fundo claro"
+        }
       }
     },
     "background": {

package/dist/tokens/index.d.ts

@@ -1,29 +1,5 @@
 // Auto-generated design token types
 export interface DesignTokens {
-  typography: {
-    'fontFamily-brand': string;
-    'fontFamily-mono': string;
-    'fontSize-xs': string;
-    'fontSize-sm': string;
-    'fontSize-base': string;
-    'fontSize-lg': string;
-    'fontSize-xl': string;
-    'fontSize-2xl': string;
-    'fontSize-3xl': string;
-    'fontSize-4xl': string;
-    'lineHeight-tight': string;
-    'lineHeight-normal': string;
-    'lineHeight-relaxed': string;
-    'letterSpacing-brand': string;
-    'letterSpacing-tight': string;
-    'letterSpacing-normal': string;
-    'letterSpacing-wide': string;
-    'fontWeight-light': string;
-    'fontWeight-normal': string;
-    'fontWeight-medium': string;
-    'fontWeight-semibold': string;
-    'fontWeight-bold': string;
-  };
   spacing: {
     'xs': string;
     'sm': string;
@@ -32,6 +8,25 @@ export interface DesignTokens {
     'xl': string;
     '2xl': string;
     '3xl': string;
+    'borderRadius-sm': string;
+    'borderRadius-md': string;
+    'borderRadius-lg': string;
+    'borderRadius-xl': string;
+    'borderRadius-full': string;
+    'shadow-sm': string;
+    'shadow-md': string;
+    'shadow-lg': string;
+  };
+  effects: {
+    'transition-fast': string;
+    'transition-normal': string;
+    'transition-slow': string;
+    'animation-fadeIn': string;
+    'animation-slideUp': string;
+    'animation-bounce': string;
+    'transform-hoverUp': string;
+    'opacity-disabled': string;
+    'opacity-muted': string;
   };
 }
 

package/dist/tokens/index.js

@@ -1,5 +1,38 @@
 // Auto-generated design tokens
 export const tokens = {
+  "colors": {
+    "color-brand-primary-default": "#0055FF",
+    "color-brand-primary-hover": "#0044CC",
+    "color-brand-primary-active": "#003399",
+    "color-brand-primary-disabled": "#80AAFF",
+    "color-brand-secondary-default": "#FF9900",
+    "color-brand-secondary-hover": "#E68A00",
+    "color-brand-secondary-active": "#CC7A00",
+    "color-brand-secondary-disabled": "#FFCC80",
+    "color-brand-neutral": "#333333",
+    "color-semantic-success-default": "#10B981",
+    "color-semantic-success-light": "#D1FAE5",
+    "color-semantic-success-dark": "#065F46",
+    "color-semantic-warning-default": "#F59E0B",
+    "color-semantic-warning-light": "#FEF3C7",
+    "color-semantic-warning-dark": "#92400E",
+    "color-semantic-error-default": "#EF4444",
+    "color-semantic-error-light": "#FEE2E2",
+    "color-semantic-error-dark": "#991B1B",
+    "color-semantic-info-default": "#3B82F6",
+    "color-semantic-info-light": "#DBEAFE",
+    "color-semantic-info-dark": "#1E40AF",
+    "color-background-primary": "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%)",
+    "color-background-secondary": "rgba(255, 255, 255, 0.05)",
+    "color-background-glass-light": "rgba(255, 255, 255, 0.15)",
+    "color-background-glass-dark": "rgba(60, 60, 60, 0.8)",
+    "color-text-primary": "#ffffff",
+    "color-text-secondary": "rgba(255, 255, 255, 0.7)",
+    "color-text-muted": "rgba(255, 255, 255, 0.5)",
+    "color-border-light": "rgba(255, 255, 255, 0.1)",
+    "color-border-medium": "rgba(255, 255, 255, 0.2)",
+    "color-border-strong": "rgba(255, 255, 255, 0.3)"
+  },
   "typography": {
     "fontFamily-brand": "Helvetica, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
     "fontFamily-mono": "'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace",
@@ -31,12 +64,46 @@ export const tokens = {
     "lg": "1.5rem",
     "xl": "2rem",
     "2xl": "3rem",
-    "3xl": "4rem"
+    "3xl": "4rem",
+    "borderRadius-sm": "0.25rem",
+    "borderRadius-md": "0.5rem",
+    "borderRadius-lg": "1rem",
+    "borderRadius-xl": "1.25rem",
+    "borderRadius-full": "50%",
+    "shadow-glass-light": "0 8px 32px rgba(0, 0, 0, 0.1)",
+    "shadow-glass-lightHover": "0 12px 40px rgba(0, 0, 0, 0.15)",
+    "shadow-glass-dark": "0 8px 32px rgba(0, 0, 0, 0.3)",
+    "shadow-glass-darkHover": "0 12px 40px rgba(0, 0, 0, 0.4)",
+    "shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
+    "shadow-md": "0 4px 6px rgba(0, 0, 0, 0.07)",
+    "shadow-lg": "0 10px 15px rgba(0, 0, 0, 0.1)",
+    "blur-glass-default": "20px",
+    "blur-glass-light": "15px",
+    "blur-glass-heavy": "30px"
+  },
+  "effects": {
+    "transition-fast": "0.15s ease",
+    "transition-normal": "0.3s ease",
+    "transition-slow": "0.5s ease",
+    "animation-fadeIn": "fadeIn 0.3s ease-in-out",
+    "animation-slideUp": "slideUp 0.3s ease-out",
+    "animation-bounce": "bounce 0.6s ease-in-out",
+    "backdrop-glass-filter": "blur(var(--blur, 20px))",
+    "backdrop-glass-webkitFilter": "blur(var(--blur, 20px))",
+    "transform-hoverUp": "translateY(-2px)",
+    "transform-scale-hover": "scale(1.02)",
+    "transform-scale-active": "scale(0.98)",
+    "opacity-glass-light-default": "0.15",
+    "opacity-glass-light-hover": "0.2",
+    "opacity-glass-dark-default": "0.8",
+    "opacity-glass-dark-hover": "0.85",
+    "opacity-disabled": "0.5",
+    "opacity-muted": "0.7"
   }
 };
 
 // Typed token access
-export type TokenCategory = 'typography' | 'spacing';
+export type TokenCategory = 'colors' | 'typography' | 'spacing' | 'effects';
 
 export function getToken(category: TokenCategory, token: string): string {
   return tokens[category]?.[token] || '';

package/dist/tokens/index.json

@@ -6,14 +6,48 @@
     "color": {
       "brand": {
         "primary": {
-          "value": "#0055FF",
-          "type": "color",
-          "description": "Cor primária da marca Metropolle"
+          "default": {
+            "value": "#0055FF",
+            "type": "color",
+            "description": "Cor primaria da marca Metropolle"
+          },
+          "hover": {
+            "value": "#0044CC",
+            "type": "color",
+            "description": "Primary no estado hover"
+          },
+          "active": {
+            "value": "#003399",
+            "type": "color",
+            "description": "Primary no estado active/pressed"
+          },
+          "disabled": {
+            "value": "#80AAFF",
+            "type": "color",
+            "description": "Primary no estado disabled"
+          }
         },
         "secondary": {
-          "value": "#FF9900",
-          "type": "color",
-          "description": "Cor secundária complementar"
+          "default": {
+            "value": "#FF9900",
+            "type": "color",
+            "description": "Cor secundaria complementar"
+          },
+          "hover": {
+            "value": "#E68A00",
+            "type": "color",
+            "description": "Secondary no estado hover"
+          },
+          "active": {
+            "value": "#CC7A00",
+            "type": "color",
+            "description": "Secondary no estado active/pressed"
+          },
+          "disabled": {
+            "value": "#FFCC80",
+            "type": "color",
+            "description": "Secondary no estado disabled"
+          }
         },
         "neutral": {
           "value": "#333333",
@@ -23,24 +57,72 @@
       },
       "semantic": {
         "success": {
-          "value": "#10B981",
-          "type": "color",
-          "description": "Verde para estados de sucesso"
+          "default": {
+            "value": "#10B981",
+            "type": "color",
+            "description": "Verde para estados de sucesso"
+          },
+          "light": {
+            "value": "#D1FAE5",
+            "type": "color",
+            "description": "Success light para backgrounds"
+          },
+          "dark": {
+            "value": "#065F46",
+            "type": "color",
+            "description": "Success dark para texto em fundo claro"
+          }
         },
         "warning": {
-          "value": "#F59E0B",
-          "type": "color",
-          "description": "Amarelo para avisos"
+          "default": {
+            "value": "#F59E0B",
+            "type": "color",
+            "description": "Amarelo para avisos"
+          },
+          "light": {
+            "value": "#FEF3C7",
+            "type": "color",
+            "description": "Warning light para backgrounds"
+          },
+          "dark": {
+            "value": "#92400E",
+            "type": "color",
+            "description": "Warning dark para texto em fundo claro"
+          }
         },
         "error": {
-          "value": "#EF4444",
-          "type": "color",
-          "description": "Vermelho para erros"
+          "default": {
+            "value": "#EF4444",
+            "type": "color",
+            "description": "Vermelho para erros"
+          },
+          "light": {
+            "value": "#FEE2E2",
+            "type": "color",
+            "description": "Error light para backgrounds"
+          },
+          "dark": {
+            "value": "#991B1B",
+            "type": "color",
+            "description": "Error dark para texto em fundo claro"
+          }
         },
         "info": {
-          "value": "#3B82F6",
-          "type": "color",
-          "description": "Azul para informações"
+          "default": {
+            "value": "#3B82F6",
+            "type": "color",
+            "description": "Azul para informacoes"
+          },
+          "light": {
+            "value": "#DBEAFE",
+            "type": "color",
+            "description": "Info light para backgrounds"
+          },
+          "dark": {
+            "value": "#1E40AF",
+            "type": "color",
+            "description": "Info dark para texto em fundo claro"
+          }
         }
       },
       "background": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metropolle/design-system",
-  "version": "1.0.0-beta.20250821022912.15e7eda",
+  "version": "1.0.0-beta.2026.01.01.1723.0f6bc6d",
   "description": "Sistema de design unificado para a plataforma Metropolle",
   "type": "module",
   "main": "dist/react/index.js",
@@ -17,18 +17,23 @@
       "types": "./dist/tokens/index.d.ts"
     },
     "./css": "./dist/css/tokens.css",
-    "./css/components": "./dist/css/components.css"
+    "./css/components": "./dist/css/components.css",
+    "./css/compat/back.css": "./dist/css/compat/back.css",
+    "./css/mermaid": "./dist/css/mermaid.css",
+    "./css/mermaid.css": "./dist/css/mermaid.css",
+    "./css/liquid-glass": "./dist/css/liquid-glass.css",
+    "./css/liquid-glass.css": "./dist/css/liquid-glass.css"
   },
   "files": [
     "dist/**/*",
     "README.md"
   ],
   "scripts": {
-    "build": "npm run clean && npm run build:tokens && npm run build:react && npm run build:types && npm run build:css && echo '✅ Build completed successfully'",
+    "build": "npm run clean && npm run build:tokens && npm run build:react && npm run build:types && npm run build:css && echo '✔️ Build completed successfully'",
     "build:tokens": "node scripts/build-tokens.js",
-    "build:react": "npx rollup -c rollup.react.config.js --silent",
+    "build:react": "rollup -c rollup.react.config.js --silent",
     "build:types": "tsc -p tsconfig.react.json && node scripts/build-types.js",
-    "build:css": "npx postcss src/css/*.css --dir dist/css",
+    "build:css": "npx postcss \"src/css/**/*.css\" --base src/css --dir dist/css",
     "build:storybook": "storybook build",
     "dev": "storybook dev -p 6006",
     "test": "jest",
@@ -38,7 +43,12 @@
     "type-check": "tsc --noEmit",
     "clean": "rimraf dist",
     "prebuild": "npm run clean",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "version:timestamp": "node scripts/version-timestamp.js timestamp",
+    "version:beta": "node scripts/version-timestamp.js beta",
+    "version:stable": "node scripts/version-timestamp.js stable",
+    "version:dev": "node scripts/version-timestamp.js beta dev",
+    "version:prod": "node scripts/version-timestamp.js stable prod"
   },
   "keywords": [
     "design-system",
@@ -60,16 +70,16 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "rollup": "^4.12.0",
+    "@metropolle/workspace": "file:..",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6"
+    "@rollup/plugin-typescript": "^11.1.6",
+    "rollup": "^4.12.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.12",
@@ -89,7 +99,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.4.7",
+    "storybook": "^9.1.2",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.5"
   },