@metropolle/design-system 1.2025.0-8.22.1427 → 1.2025.0-8.28.1647

package/dist/css/components.css

@@ -327,6 +327,176 @@
   outline-offset: 2px;
 }
 
+/* Dashboard Components */
+
+/* Dashboard Action Controls */
+.mds-dashboard-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-spacing-md);
+}
+
+/* Period Filter Dropdown */
+.mds-period-filter {
+  position: relative;
+  display: inline-block;
+}
+
+.mds-period-filter__select {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 2rem;
+  min-width: 140px;
+  transition: var(--mds-effects-transition-normal);
+  
+  /* Theme-specific styles are applied via CSS custom properties */
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  border: 1px solid var(--mds-dashboard-control-border);
+  background-image: var(--mds-dashboard-control-dropdown-icon);
+  background-position: right 8px center;
+  box-shadow: var(--mds-dashboard-control-shadow);
+}
+
+.mds-period-filter__select:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-period-filter__select:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* Dropdown Options Styling */
+.mds-period-filter__select option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+  -webkit-appearance: none;
+}
+
+/* Additional styling for browsers that support it */
+.mds-period-filter__select::-webkit-scrollbar {
+  width: 8px;
+}
+
+.mds-period-filter__select::-webkit-scrollbar-track {
+  background: var(--mds-dashboard-control-option-bg);
+}
+
+.mds-period-filter__select::-webkit-scrollbar-thumb {
+  background: var(--mds-dashboard-control-border);
+  border-radius: 4px;
+}
+
+.mds-period-filter__select::-webkit-scrollbar-thumb:hover {
+  background: var(--mds-dashboard-control-border-disabled);
+}
+
+/* Dashboard Refresh Button */
+.mds-dashboard-refresh {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-weight: var(--mds-typography-fontWeight-medium);
+  font-size: var(--mds-typography-fontSize-sm);
+  font-family: var(--mds-typography-fontFamily-brand);
+  border-radius: var(--mds-spacing-borderRadius-md);
+  cursor: pointer;
+  outline: none;
+  border: 1px solid var(--mds-dashboard-control-border);
+  transition: var(--mds-effects-transition-normal);
+  min-width: 140px;
+  width: 140px;
+  
+  /* Theme-specific styles */
+  background-color: var(--mds-dashboard-control-bg);
+  color: var(--mds-dashboard-control-color);
+  box-shadow: var(--mds-dashboard-control-shadow);
+}
+
+.mds-dashboard-refresh:hover:not(:disabled) {
+  background-color: var(--mds-dashboard-control-bg-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--mds-dashboard-control-shadow-hover);
+}
+
+.mds-dashboard-refresh:disabled {
+  opacity: var(--mds-effects-opacity-disabled);
+  cursor: not-allowed;
+  background-color: transparent !important;
+  border: 2px solid var(--mds-dashboard-control-border-disabled);
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Theme Support - Default (Dark Theme) */
+:root {
+  /* Dashboard Control Variables - Dark Theme */
+  --mds-dashboard-control-bg: rgba(255, 255, 255, 0.15);
+  --mds-dashboard-control-bg-hover: rgba(255, 255, 255, 0.25);
+  --mds-dashboard-control-color: #ffffff;
+  --mds-dashboard-control-border: rgba(255, 255, 255, 0.2);
+  --mds-dashboard-control-border-disabled: rgba(255, 255, 255, 0.3);
+  --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --mds-dashboard-control-dropdown-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  
+  /* Dropdown Options - Dark Theme */
+  --mds-dashboard-control-option-bg: #2a2a2a;
+  --mds-dashboard-control-option-color: #ffffff;
+}
+
+/* Light Theme Support */
+[data-theme="light"] {
+  --mds-dashboard-control-bg: rgba(0, 0, 0, 0.1);
+  --mds-dashboard-control-bg-hover: rgba(0, 0, 0, 0.15);
+  --mds-dashboard-control-color: #1a1a1a;
+  --mds-dashboard-control-border: rgba(0, 0, 0, 0.1);
+  --mds-dashboard-control-border-disabled: rgba(0, 0, 0, 0.3);
+  --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --mds-dashboard-control-dropdown-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  
+  /* Dropdown Options - Light Theme */
+  --mds-dashboard-control-option-bg: #ffffff;
+  --mds-dashboard-control-option-color: #1a1a1a;
+}
+
+/* Dashboard Layout Utilities */
+.mds-dashboard-grid {
+  display: grid;
+  gap: var(--mds-spacing-xl);
+}
+
+.mds-dashboard-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--mds-spacing-lg);
+}
+
+.mds-dashboard-charts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: var(--mds-spacing-lg);
+}
+
+/* Dashboard Content Sections */
+.mds-dashboard-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-spacing-xl);
+}
+
 /* Dark mode support (future) */
 @media (prefers-color-scheme: dark) {
   /* Enhanced styles for dark mode when implemented */

package/dist/css/tokens.css

@@ -1,6 +1,25 @@
 :root {
   /* Metropolle Design System Tokens */
 
+  /* COLORS */
+  --mds-colors-color-brand-primary: #0055FF;
+  --mds-colors-color-brand-secondary: #FF9900;
+  --mds-colors-color-brand-neutral: #333333;
+  --mds-colors-color-semantic-success: #10B981;
+  --mds-colors-color-semantic-warning: #F59E0B;
+  --mds-colors-color-semantic-error: #EF4444;
+  --mds-colors-color-semantic-info: #3B82F6;
+  --mds-colors-color-background-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+  --mds-colors-color-background-secondary: rgba(255, 255, 255, 0.05);
+  --mds-colors-color-background-glass-light: rgba(255, 255, 255, 0.15);
+  --mds-colors-color-background-glass-dark: rgba(60, 60, 60, 0.8);
+  --mds-colors-color-text-primary: #ffffff;
+  --mds-colors-color-text-secondary: rgba(255, 255, 255, 0.7);
+  --mds-colors-color-text-muted: rgba(255, 255, 255, 0.5);
+  --mds-colors-color-border-light: rgba(255, 255, 255, 0.1);
+  --mds-colors-color-border-medium: rgba(255, 255, 255, 0.2);
+  --mds-colors-color-border-strong: rgba(255, 255, 255, 0.3);
+
   /* TYPOGRAPHY */
   --mds-typography-fontFamily-brand: Helvetica, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --mds-typography-fontFamily-mono: 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
@@ -33,6 +52,40 @@
   --mds-spacing-xl: 2rem;
   --mds-spacing-2xl: 3rem;
   --mds-spacing-3xl: 4rem;
+  --mds-spacing-borderRadius-sm: 0.25rem;
+  --mds-spacing-borderRadius-md: 0.5rem;
+  --mds-spacing-borderRadius-lg: 1rem;
+  --mds-spacing-borderRadius-xl: 1.25rem;
+  --mds-spacing-borderRadius-full: 50%;
+  --mds-spacing-shadow-glass-light: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --mds-spacing-shadow-glass-lightHover: 0 12px 40px rgba(0, 0, 0, 0.15);
+  --mds-spacing-shadow-glass-dark: 0 8px 32px rgba(0, 0, 0, 0.3);
+  --mds-spacing-shadow-glass-darkHover: 0 12px 40px rgba(0, 0, 0, 0.4);
+  --mds-spacing-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --mds-spacing-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --mds-spacing-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --mds-spacing-blur-glass-default: 20px;
+  --mds-spacing-blur-glass-light: 15px;
+  --mds-spacing-blur-glass-heavy: 30px;
+
+  /* EFFECTS */
+  --mds-effects-transition-fast: 0.15s ease;
+  --mds-effects-transition-normal: 0.3s ease;
+  --mds-effects-transition-slow: 0.5s ease;
+  --mds-effects-animation-fadeIn: fadeIn 0.3s ease-in-out;
+  --mds-effects-animation-slideUp: slideUp 0.3s ease-out;
+  --mds-effects-animation-bounce: bounce 0.6s ease-in-out;
+  --mds-effects-backdrop-glass-filter: blur(var(--blur, 20px));
+  --mds-effects-backdrop-glass-webkitFilter: blur(var(--blur, 20px));
+  --mds-effects-transform-hoverUp: translateY(-2px);
+  --mds-effects-transform-scale-hover: scale(1.02);
+  --mds-effects-transform-scale-active: scale(0.98);
+  --mds-effects-opacity-glass-light-default: 0.15;
+  --mds-effects-opacity-glass-light-hover: 0.2;
+  --mds-effects-opacity-glass-dark-default: 0.8;
+  --mds-effects-opacity-glass-dark-hover: 0.85;
+  --mds-effects-opacity-disabled: 0.5;
+  --mds-effects-opacity-muted: 0.7;
 
 }
 

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,24 @@
 // Auto-generated design tokens
 export const tokens = {
+  "colors": {
+    "color-brand-primary": "#0055FF",
+    "color-brand-secondary": "#FF9900",
+    "color-brand-neutral": "#333333",
+    "color-semantic-success": "#10B981",
+    "color-semantic-warning": "#F59E0B",
+    "color-semantic-error": "#EF4444",
+    "color-semantic-info": "#3B82F6",
+    "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 +50,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metropolle/design-system",
-  "version": "1.2025.08.22.1427",
+  "version": "1.2025.08.28.1647",
   "description": "Sistema de design unificado para a plataforma Metropolle",
   "type": "module",
   "main": "dist/react/index.js",