@metropolle/design-system 1.0.0-beta.2025.8.28.1156.71f6b3e → 1.0.0-beta.2025.8.28.1617.0d09f06

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/css/components.css +34 -0
  2. package/dist/css/tokens.css +53 -0
  3. package/dist/tokens/index.d.ts +19 -24
  4. package/dist/tokens/index.js +55 -2
  5. package/package.json +1 -1
package/dist/css/components.css CHANGED
@@ -378,6 +378,32 @@
378
378
  cursor: not-allowed;
379
379
  }
380
380
 
381
+ /* Dropdown Options Styling */
382
+ .mds-period-filter__select option {
383
+ background-color: var(--mds-dashboard-control-option-bg) !important;
384
+ color: var(--mds-dashboard-control-option-color) !important;
385
+ padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
386
+ -webkit-appearance: none;
387
+ }
388
+
389
+ /* Additional styling for browsers that support it */
390
+ .mds-period-filter__select::-webkit-scrollbar {
391
+ width: 8px;
392
+ }
393
+
394
+ .mds-period-filter__select::-webkit-scrollbar-track {
395
+ background: var(--mds-dashboard-control-option-bg);
396
+ }
397
+
398
+ .mds-period-filter__select::-webkit-scrollbar-thumb {
399
+ background: var(--mds-dashboard-control-border);
400
+ border-radius: 4px;
401
+ }
402
+
403
+ .mds-period-filter__select::-webkit-scrollbar-thumb:hover {
404
+ background: var(--mds-dashboard-control-border-disabled);
405
+ }
406
+
381
407
  /* Dashboard Refresh Button */
382
408
  .mds-dashboard-refresh {
383
409
  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
@@ -424,6 +450,10 @@
424
450
  --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
425
451
  --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
426
452
  --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");
453
+
454
+ /* Dropdown Options - Dark Theme */
455
+ --mds-dashboard-control-option-bg: #2a2a2a;
456
+ --mds-dashboard-control-option-color: #ffffff;
427
457
  }
428
458
 
429
459
  /* Light Theme Support */
@@ -436,6 +466,10 @@
436
466
  --mds-dashboard-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
437
467
  --mds-dashboard-control-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
438
468
  --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");
469
+
470
+ /* Dropdown Options - Light Theme */
471
+ --mds-dashboard-control-option-bg: #ffffff;
472
+ --mds-dashboard-control-option-color: #1a1a1a;
439
473
  }
440
474
 
441
475
  /* Dashboard Layout Utilities */
package/dist/css/tokens.css CHANGED
@@ -1,6 +1,25 @@
1
1
  :root {
2
2
  /* Metropolle Design System Tokens */
3
3
 
4
+ /* COLORS */
5
+ --mds-colors-color-brand-primary: #0055FF;
6
+ --mds-colors-color-brand-secondary: #FF9900;
7
+ --mds-colors-color-brand-neutral: #333333;
8
+ --mds-colors-color-semantic-success: #10B981;
9
+ --mds-colors-color-semantic-warning: #F59E0B;
10
+ --mds-colors-color-semantic-error: #EF4444;
11
+ --mds-colors-color-semantic-info: #3B82F6;
12
+ --mds-colors-color-background-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
13
+ --mds-colors-color-background-secondary: rgba(255, 255, 255, 0.05);
14
+ --mds-colors-color-background-glass-light: rgba(255, 255, 255, 0.15);
15
+ --mds-colors-color-background-glass-dark: rgba(60, 60, 60, 0.8);
16
+ --mds-colors-color-text-primary: #ffffff;
17
+ --mds-colors-color-text-secondary: rgba(255, 255, 255, 0.7);
18
+ --mds-colors-color-text-muted: rgba(255, 255, 255, 0.5);
19
+ --mds-colors-color-border-light: rgba(255, 255, 255, 0.1);
20
+ --mds-colors-color-border-medium: rgba(255, 255, 255, 0.2);
21
+ --mds-colors-color-border-strong: rgba(255, 255, 255, 0.3);
22
+
4
23
  /* TYPOGRAPHY */
5
24
  --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';
6
25
  --mds-typography-fontFamily-mono: 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
@@ -33,6 +52,40 @@
33
52
  --mds-spacing-xl: 2rem;
34
53
  --mds-spacing-2xl: 3rem;
35
54
  --mds-spacing-3xl: 4rem;
55
+ --mds-spacing-borderRadius-sm: 0.25rem;
56
+ --mds-spacing-borderRadius-md: 0.5rem;
57
+ --mds-spacing-borderRadius-lg: 1rem;
58
+ --mds-spacing-borderRadius-xl: 1.25rem;
59
+ --mds-spacing-borderRadius-full: 50%;
60
+ --mds-spacing-shadow-glass-light: 0 8px 32px rgba(0, 0, 0, 0.1);
61
+ --mds-spacing-shadow-glass-lightHover: 0 12px 40px rgba(0, 0, 0, 0.15);
62
+ --mds-spacing-shadow-glass-dark: 0 8px 32px rgba(0, 0, 0, 0.3);
63
+ --mds-spacing-shadow-glass-darkHover: 0 12px 40px rgba(0, 0, 0, 0.4);
64
+ --mds-spacing-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
65
+ --mds-spacing-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
66
+ --mds-spacing-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
67
+ --mds-spacing-blur-glass-default: 20px;
68
+ --mds-spacing-blur-glass-light: 15px;
69
+ --mds-spacing-blur-glass-heavy: 30px;
70
+
71
+ /* EFFECTS */
72
+ --mds-effects-transition-fast: 0.15s ease;
73
+ --mds-effects-transition-normal: 0.3s ease;
74
+ --mds-effects-transition-slow: 0.5s ease;
75
+ --mds-effects-animation-fadeIn: fadeIn 0.3s ease-in-out;
76
+ --mds-effects-animation-slideUp: slideUp 0.3s ease-out;
77
+ --mds-effects-animation-bounce: bounce 0.6s ease-in-out;
78
+ --mds-effects-backdrop-glass-filter: blur(var(--blur, 20px));
79
+ --mds-effects-backdrop-glass-webkitFilter: blur(var(--blur, 20px));
80
+ --mds-effects-transform-hoverUp: translateY(-2px);
81
+ --mds-effects-transform-scale-hover: scale(1.02);
82
+ --mds-effects-transform-scale-active: scale(0.98);
83
+ --mds-effects-opacity-glass-light-default: 0.15;
84
+ --mds-effects-opacity-glass-light-hover: 0.2;
85
+ --mds-effects-opacity-glass-dark-default: 0.8;
86
+ --mds-effects-opacity-glass-dark-hover: 0.85;
87
+ --mds-effects-opacity-disabled: 0.5;
88
+ --mds-effects-opacity-muted: 0.7;
36
89
 
37
90
  }
38
91
 
package/dist/tokens/index.d.ts CHANGED
@@ -1,29 +1,5 @@
1
1
  // Auto-generated design token types
2
2
  export interface DesignTokens {
3
- typography: {
4
- 'fontFamily-brand': string;
5
- 'fontFamily-mono': string;
6
- 'fontSize-xs': string;
7
- 'fontSize-sm': string;
8
- 'fontSize-base': string;
9
- 'fontSize-lg': string;
10
- 'fontSize-xl': string;
11
- 'fontSize-2xl': string;
12
- 'fontSize-3xl': string;
13
- 'fontSize-4xl': string;
14
- 'lineHeight-tight': string;
15
- 'lineHeight-normal': string;
16
- 'lineHeight-relaxed': string;
17
- 'letterSpacing-brand': string;
18
- 'letterSpacing-tight': string;
19
- 'letterSpacing-normal': string;
20
- 'letterSpacing-wide': string;
21
- 'fontWeight-light': string;
22
- 'fontWeight-normal': string;
23
- 'fontWeight-medium': string;
24
- 'fontWeight-semibold': string;
25
- 'fontWeight-bold': string;
26
- };
27
3
  spacing: {
28
4
  'xs': string;
29
5
  'sm': string;
@@ -32,6 +8,25 @@ export interface DesignTokens {
32
8
  'xl': string;
33
9
  '2xl': string;
34
10
  '3xl': string;
11
+ 'borderRadius-sm': string;
12
+ 'borderRadius-md': string;
13
+ 'borderRadius-lg': string;
14
+ 'borderRadius-xl': string;
15
+ 'borderRadius-full': string;
16
+ 'shadow-sm': string;
17
+ 'shadow-md': string;
18
+ 'shadow-lg': string;
19
+ };
20
+ effects: {
21
+ 'transition-fast': string;
22
+ 'transition-normal': string;
23
+ 'transition-slow': string;
24
+ 'animation-fadeIn': string;
25
+ 'animation-slideUp': string;
26
+ 'animation-bounce': string;
27
+ 'transform-hoverUp': string;
28
+ 'opacity-disabled': string;
29
+ 'opacity-muted': string;
35
30
  };
36
31
  }
37
32
 
package/dist/tokens/index.js CHANGED
@@ -1,5 +1,24 @@
1
1
  // Auto-generated design tokens
2
2
  export const tokens = {
3
+ "colors": {
4
+ "color-brand-primary": "#0055FF",
5
+ "color-brand-secondary": "#FF9900",
6
+ "color-brand-neutral": "#333333",
7
+ "color-semantic-success": "#10B981",
8
+ "color-semantic-warning": "#F59E0B",
9
+ "color-semantic-error": "#EF4444",
10
+ "color-semantic-info": "#3B82F6",
11
+ "color-background-primary": "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%)",
12
+ "color-background-secondary": "rgba(255, 255, 255, 0.05)",
13
+ "color-background-glass-light": "rgba(255, 255, 255, 0.15)",
14
+ "color-background-glass-dark": "rgba(60, 60, 60, 0.8)",
15
+ "color-text-primary": "#ffffff",
16
+ "color-text-secondary": "rgba(255, 255, 255, 0.7)",
17
+ "color-text-muted": "rgba(255, 255, 255, 0.5)",
18
+ "color-border-light": "rgba(255, 255, 255, 0.1)",
19
+ "color-border-medium": "rgba(255, 255, 255, 0.2)",
20
+ "color-border-strong": "rgba(255, 255, 255, 0.3)"
21
+ },
3
22
  "typography": {
4
23
  "fontFamily-brand": "Helvetica, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
5
24
  "fontFamily-mono": "'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace",
@@ -31,12 +50,46 @@ export const tokens = {
31
50
  "lg": "1.5rem",
32
51
  "xl": "2rem",
33
52
  "2xl": "3rem",
34
- "3xl": "4rem"
53
+ "3xl": "4rem",
54
+ "borderRadius-sm": "0.25rem",
55
+ "borderRadius-md": "0.5rem",
56
+ "borderRadius-lg": "1rem",
57
+ "borderRadius-xl": "1.25rem",
58
+ "borderRadius-full": "50%",
59
+ "shadow-glass-light": "0 8px 32px rgba(0, 0, 0, 0.1)",
60
+ "shadow-glass-lightHover": "0 12px 40px rgba(0, 0, 0, 0.15)",
61
+ "shadow-glass-dark": "0 8px 32px rgba(0, 0, 0, 0.3)",
62
+ "shadow-glass-darkHover": "0 12px 40px rgba(0, 0, 0, 0.4)",
63
+ "shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
64
+ "shadow-md": "0 4px 6px rgba(0, 0, 0, 0.07)",
65
+ "shadow-lg": "0 10px 15px rgba(0, 0, 0, 0.1)",
66
+ "blur-glass-default": "20px",
67
+ "blur-glass-light": "15px",
68
+ "blur-glass-heavy": "30px"
69
+ },
70
+ "effects": {
71
+ "transition-fast": "0.15s ease",
72
+ "transition-normal": "0.3s ease",
73
+ "transition-slow": "0.5s ease",
74
+ "animation-fadeIn": "fadeIn 0.3s ease-in-out",
75
+ "animation-slideUp": "slideUp 0.3s ease-out",
76
+ "animation-bounce": "bounce 0.6s ease-in-out",
77
+ "backdrop-glass-filter": "blur(var(--blur, 20px))",
78
+ "backdrop-glass-webkitFilter": "blur(var(--blur, 20px))",
79
+ "transform-hoverUp": "translateY(-2px)",
80
+ "transform-scale-hover": "scale(1.02)",
81
+ "transform-scale-active": "scale(0.98)",
82
+ "opacity-glass-light-default": "0.15",
83
+ "opacity-glass-light-hover": "0.2",
84
+ "opacity-glass-dark-default": "0.8",
85
+ "opacity-glass-dark-hover": "0.85",
86
+ "opacity-disabled": "0.5",
87
+ "opacity-muted": "0.7"
35
88
  }
36
89
  };
37
90
 
38
91
  // Typed token access
39
- export type TokenCategory = 'typography' | 'spacing';
92
+ export type TokenCategory = 'colors' | 'typography' | 'spacing' | 'effects';
40
93
 
41
94
  export function getToken(category: TokenCategory, token: string): string {
42
95
  return tokens[category]?.[token] || '';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metropolle/design-system",
3
- "version": "1.0.0-beta.2025.08.28.1156.71f6b3e",
3
+ "version": "1.0.0-beta.2025.08.28.1617.0d09f06",
4
4
  "description": "Sistema de design unificado para a plataforma Metropolle",
5
5
  "type": "module",
6
6
  "main": "dist/react/index.js",