@metropolle/design-system 1.2025.1-0.2.29 → 1.2025.1-2.5.1903

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/tokens.css +20 -6
  2. package/dist/tokens/colors.json +100 -18
  3. package/dist/tokens/index.js +20 -6
  4. package/dist/tokens/index.json +100 -18
  5. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -2,13 +2,27 @@
2
2
  /* Metropolle Design System Tokens */
3
3
 
4
4
  /* COLORS */
5
- --mds-colors-color-brand-primary: #0055FF;
6
- --mds-colors-color-brand-secondary: #FF9900;
5
+ --mds-colors-color-brand-primary-default: #0055FF;
6
+ --mds-colors-color-brand-primary-hover: #0044CC;
7
+ --mds-colors-color-brand-primary-active: #003399;
8
+ --mds-colors-color-brand-primary-disabled: #80AAFF;
9
+ --mds-colors-color-brand-secondary-default: #FF9900;
10
+ --mds-colors-color-brand-secondary-hover: #E68A00;
11
+ --mds-colors-color-brand-secondary-active: #CC7A00;
12
+ --mds-colors-color-brand-secondary-disabled: #FFCC80;
7
13
  --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;
14
+ --mds-colors-color-semantic-success-default: #10B981;
15
+ --mds-colors-color-semantic-success-light: #D1FAE5;
16
+ --mds-colors-color-semantic-success-dark: #065F46;
17
+ --mds-colors-color-semantic-warning-default: #F59E0B;
18
+ --mds-colors-color-semantic-warning-light: #FEF3C7;
19
+ --mds-colors-color-semantic-warning-dark: #92400E;
20
+ --mds-colors-color-semantic-error-default: #EF4444;
21
+ --mds-colors-color-semantic-error-light: #FEE2E2;
22
+ --mds-colors-color-semantic-error-dark: #991B1B;
23
+ --mds-colors-color-semantic-info-default: #3B82F6;
24
+ --mds-colors-color-semantic-info-light: #DBEAFE;
25
+ --mds-colors-color-semantic-info-dark: #1E40AF;
12
26
  --mds-colors-color-background-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
13
27
  --mds-colors-color-background-secondary: rgba(255, 255, 255, 0.05);
14
28
  --mds-colors-color-background-glass-light: rgba(255, 255, 255, 0.15);
package/dist/tokens/colors.json CHANGED
@@ -5,14 +5,48 @@
5
5
  "color": {
6
6
  "brand": {
7
7
  "primary": {
8
- "value": "#0055FF",
9
- "type": "color",
10
- "description": "Cor primária da marca Metropolle"
8
+ "default": {
9
+ "value": "#0055FF",
10
+ "type": "color",
11
+ "description": "Cor primaria da marca Metropolle"
12
+ },
13
+ "hover": {
14
+ "value": "#0044CC",
15
+ "type": "color",
16
+ "description": "Primary no estado hover"
17
+ },
18
+ "active": {
19
+ "value": "#003399",
20
+ "type": "color",
21
+ "description": "Primary no estado active/pressed"
22
+ },
23
+ "disabled": {
24
+ "value": "#80AAFF",
25
+ "type": "color",
26
+ "description": "Primary no estado disabled"
27
+ }
11
28
  },
12
29
  "secondary": {
13
- "value": "#FF9900",
14
- "type": "color",
15
- "description": "Cor secundária complementar"
30
+ "default": {
31
+ "value": "#FF9900",
32
+ "type": "color",
33
+ "description": "Cor secundaria complementar"
34
+ },
35
+ "hover": {
36
+ "value": "#E68A00",
37
+ "type": "color",
38
+ "description": "Secondary no estado hover"
39
+ },
40
+ "active": {
41
+ "value": "#CC7A00",
42
+ "type": "color",
43
+ "description": "Secondary no estado active/pressed"
44
+ },
45
+ "disabled": {
46
+ "value": "#FFCC80",
47
+ "type": "color",
48
+ "description": "Secondary no estado disabled"
49
+ }
16
50
  },
17
51
  "neutral": {
18
52
  "value": "#333333",
@@ -22,24 +56,72 @@
22
56
  },
23
57
  "semantic": {
24
58
  "success": {
25
- "value": "#10B981",
26
- "type": "color",
27
- "description": "Verde para estados de sucesso"
59
+ "default": {
60
+ "value": "#10B981",
61
+ "type": "color",
62
+ "description": "Verde para estados de sucesso"
63
+ },
64
+ "light": {
65
+ "value": "#D1FAE5",
66
+ "type": "color",
67
+ "description": "Success light para backgrounds"
68
+ },
69
+ "dark": {
70
+ "value": "#065F46",
71
+ "type": "color",
72
+ "description": "Success dark para texto em fundo claro"
73
+ }
28
74
  },
29
75
  "warning": {
30
- "value": "#F59E0B",
31
- "type": "color",
32
- "description": "Amarelo para avisos"
76
+ "default": {
77
+ "value": "#F59E0B",
78
+ "type": "color",
79
+ "description": "Amarelo para avisos"
80
+ },
81
+ "light": {
82
+ "value": "#FEF3C7",
83
+ "type": "color",
84
+ "description": "Warning light para backgrounds"
85
+ },
86
+ "dark": {
87
+ "value": "#92400E",
88
+ "type": "color",
89
+ "description": "Warning dark para texto em fundo claro"
90
+ }
33
91
  },
34
92
  "error": {
35
- "value": "#EF4444",
36
- "type": "color",
37
- "description": "Vermelho para erros"
93
+ "default": {
94
+ "value": "#EF4444",
95
+ "type": "color",
96
+ "description": "Vermelho para erros"
97
+ },
98
+ "light": {
99
+ "value": "#FEE2E2",
100
+ "type": "color",
101
+ "description": "Error light para backgrounds"
102
+ },
103
+ "dark": {
104
+ "value": "#991B1B",
105
+ "type": "color",
106
+ "description": "Error dark para texto em fundo claro"
107
+ }
38
108
  },
39
109
  "info": {
40
- "value": "#3B82F6",
41
- "type": "color",
42
- "description": "Azul para informações"
110
+ "default": {
111
+ "value": "#3B82F6",
112
+ "type": "color",
113
+ "description": "Azul para informacoes"
114
+ },
115
+ "light": {
116
+ "value": "#DBEAFE",
117
+ "type": "color",
118
+ "description": "Info light para backgrounds"
119
+ },
120
+ "dark": {
121
+ "value": "#1E40AF",
122
+ "type": "color",
123
+ "description": "Info dark para texto em fundo claro"
124
+ }
43
125
  }
44
126
  },
45
127
  "background": {
package/dist/tokens/index.js CHANGED
@@ -1,13 +1,27 @@
1
1
  // Auto-generated design tokens
2
2
  export const tokens = {
3
3
  "colors": {
4
- "color-brand-primary": "#0055FF",
5
- "color-brand-secondary": "#FF9900",
4
+ "color-brand-primary-default": "#0055FF",
5
+ "color-brand-primary-hover": "#0044CC",
6
+ "color-brand-primary-active": "#003399",
7
+ "color-brand-primary-disabled": "#80AAFF",
8
+ "color-brand-secondary-default": "#FF9900",
9
+ "color-brand-secondary-hover": "#E68A00",
10
+ "color-brand-secondary-active": "#CC7A00",
11
+ "color-brand-secondary-disabled": "#FFCC80",
6
12
  "color-brand-neutral": "#333333",
7
- "color-semantic-success": "#10B981",
8
- "color-semantic-warning": "#F59E0B",
9
- "color-semantic-error": "#EF4444",
10
- "color-semantic-info": "#3B82F6",
13
+ "color-semantic-success-default": "#10B981",
14
+ "color-semantic-success-light": "#D1FAE5",
15
+ "color-semantic-success-dark": "#065F46",
16
+ "color-semantic-warning-default": "#F59E0B",
17
+ "color-semantic-warning-light": "#FEF3C7",
18
+ "color-semantic-warning-dark": "#92400E",
19
+ "color-semantic-error-default": "#EF4444",
20
+ "color-semantic-error-light": "#FEE2E2",
21
+ "color-semantic-error-dark": "#991B1B",
22
+ "color-semantic-info-default": "#3B82F6",
23
+ "color-semantic-info-light": "#DBEAFE",
24
+ "color-semantic-info-dark": "#1E40AF",
11
25
  "color-background-primary": "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%)",
12
26
  "color-background-secondary": "rgba(255, 255, 255, 0.05)",
13
27
  "color-background-glass-light": "rgba(255, 255, 255, 0.15)",
package/dist/tokens/index.json CHANGED
@@ -6,14 +6,48 @@
6
6
  "color": {
7
7
  "brand": {
8
8
  "primary": {
9
- "value": "#0055FF",
10
- "type": "color",
11
- "description": "Cor primária da marca Metropolle"
9
+ "default": {
10
+ "value": "#0055FF",
11
+ "type": "color",
12
+ "description": "Cor primaria da marca Metropolle"
13
+ },
14
+ "hover": {
15
+ "value": "#0044CC",
16
+ "type": "color",
17
+ "description": "Primary no estado hover"
18
+ },
19
+ "active": {
20
+ "value": "#003399",
21
+ "type": "color",
22
+ "description": "Primary no estado active/pressed"
23
+ },
24
+ "disabled": {
25
+ "value": "#80AAFF",
26
+ "type": "color",
27
+ "description": "Primary no estado disabled"
28
+ }
12
29
  },
13
30
  "secondary": {
14
- "value": "#FF9900",
15
- "type": "color",
16
- "description": "Cor secundária complementar"
31
+ "default": {
32
+ "value": "#FF9900",
33
+ "type": "color",
34
+ "description": "Cor secundaria complementar"
35
+ },
36
+ "hover": {
37
+ "value": "#E68A00",
38
+ "type": "color",
39
+ "description": "Secondary no estado hover"
40
+ },
41
+ "active": {
42
+ "value": "#CC7A00",
43
+ "type": "color",
44
+ "description": "Secondary no estado active/pressed"
45
+ },
46
+ "disabled": {
47
+ "value": "#FFCC80",
48
+ "type": "color",
49
+ "description": "Secondary no estado disabled"
50
+ }
17
51
  },
18
52
  "neutral": {
19
53
  "value": "#333333",
@@ -23,24 +57,72 @@
23
57
  },
24
58
  "semantic": {
25
59
  "success": {
26
- "value": "#10B981",
27
- "type": "color",
28
- "description": "Verde para estados de sucesso"
60
+ "default": {
61
+ "value": "#10B981",
62
+ "type": "color",
63
+ "description": "Verde para estados de sucesso"
64
+ },
65
+ "light": {
66
+ "value": "#D1FAE5",
67
+ "type": "color",
68
+ "description": "Success light para backgrounds"
69
+ },
70
+ "dark": {
71
+ "value": "#065F46",
72
+ "type": "color",
73
+ "description": "Success dark para texto em fundo claro"
74
+ }
29
75
  },
30
76
  "warning": {
31
- "value": "#F59E0B",
32
- "type": "color",
33
- "description": "Amarelo para avisos"
77
+ "default": {
78
+ "value": "#F59E0B",
79
+ "type": "color",
80
+ "description": "Amarelo para avisos"
81
+ },
82
+ "light": {
83
+ "value": "#FEF3C7",
84
+ "type": "color",
85
+ "description": "Warning light para backgrounds"
86
+ },
87
+ "dark": {
88
+ "value": "#92400E",
89
+ "type": "color",
90
+ "description": "Warning dark para texto em fundo claro"
91
+ }
34
92
  },
35
93
  "error": {
36
- "value": "#EF4444",
37
- "type": "color",
38
- "description": "Vermelho para erros"
94
+ "default": {
95
+ "value": "#EF4444",
96
+ "type": "color",
97
+ "description": "Vermelho para erros"
98
+ },
99
+ "light": {
100
+ "value": "#FEE2E2",
101
+ "type": "color",
102
+ "description": "Error light para backgrounds"
103
+ },
104
+ "dark": {
105
+ "value": "#991B1B",
106
+ "type": "color",
107
+ "description": "Error dark para texto em fundo claro"
108
+ }
39
109
  },
40
110
  "info": {
41
- "value": "#3B82F6",
42
- "type": "color",
43
- "description": "Azul para informações"
111
+ "default": {
112
+ "value": "#3B82F6",
113
+ "type": "color",
114
+ "description": "Azul para informacoes"
115
+ },
116
+ "light": {
117
+ "value": "#DBEAFE",
118
+ "type": "color",
119
+ "description": "Info light para backgrounds"
120
+ },
121
+ "dark": {
122
+ "value": "#1E40AF",
123
+ "type": "color",
124
+ "description": "Info dark para texto em fundo claro"
125
+ }
44
126
  }
45
127
  },
46
128
  "background": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metropolle/design-system",
3
- "version": "1.2025.10.02.0029",
3
+ "version": "1.2025.12.05.1903",
4
4
  "description": "Sistema de design unificado para a plataforma Metropolle",
5
5
  "type": "module",
6
6
  "main": "dist/react/index.js",