@metropolle/design-system 1.2025.1-2.10.2349 → 1.2025.1-2.11.1430

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 (2) hide show
  1. package/dist/css/liquid-glass.css +177 -206
  2. package/package.json +1 -1
package/dist/css/liquid-glass.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* ============================================
2
2
  Metropolle Design System - Liquid Glass CSS
3
- iOS 26 inspired glass effects - SUBTLE mode
3
+ Apple iOS 26 Liquid Glass Style
4
4
  ============================================ */
5
5
 
6
6
  /* =========================
@@ -22,106 +22,159 @@
22
22
  --mds-color-brand-secondary: #667eea;
23
23
  --mds-color-brand-accent: #764ba2;
24
24
 
25
- /* Semantic Colors - Dark mode (default) */
26
- --mds-color-text-primary: #ffffff;
27
- --mds-color-text-secondary: rgba(255, 255, 255, 0.7);
28
- --mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
29
- --mds-color-background-primary: #0f0f0f;
30
- --mds-color-background-secondary: #1f1f1f;
31
- --mds-color-background-tertiary: #2f2f2f;
32
- --mds-color-border-default: rgba(255, 255, 255, 0.1);
33
- --mds-color-border-light: rgba(255, 255, 255, 0.05);
34
-
35
25
  /* Status Colors */
36
26
  --mds-color-success: #10b981;
37
27
  --mds-color-warning: #f59e0b;
38
28
  --mds-color-error: #ef4444;
39
29
  --mds-color-info: #3b82f6;
30
+ }
40
31
 
41
- /* Scrollbar - Dark mode (default) */
32
+ /* =========================
33
+ Dark Theme (Default)
34
+ ========================= */
35
+ :root,
36
+ html[data-theme="dark"] {
37
+ /* Semantic Colors */
38
+ --mds-color-text-primary: #ffffff;
39
+ --mds-color-text-secondary: rgba(255, 255, 255, 0.7);
40
+ --mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
41
+ --mds-color-background-primary: #0f0f0f;
42
+ --mds-color-background-secondary: #1a1a1a;
43
+ --mds-color-background-tertiary: #2a2a2a;
44
+ --mds-color-border-default: rgba(255, 255, 255, 0.15);
45
+ --mds-color-border-light: rgba(255, 255, 255, 0.08);
46
+
47
+ /* Scrollbar */
42
48
  --mds-scrollbar-track: rgba(40, 40, 40, 0.8);
43
49
  --mds-scrollbar-thumb: rgba(80, 80, 80, 0.8);
44
50
  --mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.8);
45
51
 
46
52
  /* =========================
47
- Liquid Glass Tokens
53
+ Liquid Glass Tokens - iOS 26 Style
48
54
  ========================= */
49
55
 
50
- /* Blur tokens */
51
- --mds-liquid-blur-xs: 2px;
52
- --mds-liquid-blur-sm: 4px;
53
- --mds-liquid-blur-md: 6px;
54
- --mds-liquid-blur-lg: 8px;
55
- --mds-liquid-blur-xl: 12px;
56
-
57
- /* Saturate tokens */
58
- --mds-liquid-saturate-subtle: 110%;
59
- --mds-liquid-saturate-default: 130%;
60
- --mds-liquid-saturate-vibrant: 150%;
61
-
62
- /* Background tokens - Dark mode (default) */
63
- --mds-liquid-bg-light: rgba(255, 255, 255, 0.05);
64
- --mds-liquid-bg-dark: rgba(20, 20, 20, 0.6);
65
- --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.5);
66
- --mds-liquid-bg-sidebar: rgba(20, 20, 20, 0.85);
67
- --mds-liquid-bg-navbar: rgba(15, 15, 15, 0.9);
68
-
69
- /* Border tokens - Dark mode (default) */
70
- --mds-liquid-border-subtle: rgba(255, 255, 255, 0.2);
71
- --mds-liquid-border-bright: rgba(255, 255, 255, 0.5);
72
-
73
- /* Shadow tokens */
74
- --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.08);
75
- --mds-liquid-shadow-floating: 0 4px 16px rgba(31, 38, 135, 0.15);
76
- --mds-liquid-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.2);
77
- --mds-liquid-shadow-dramatic: 0 12px 48px rgba(0, 0, 0, 0.3);
78
-
79
- /* Inner glow */
80
- --mds-liquid-glow-subtle: inset 0 0 16px -4px rgba(255, 255, 255, 0.2);
81
- --mds-liquid-glow-bright: inset 0 2px 16px rgba(255, 255, 255, 0.25);
82
-
83
- /* Specular highlight */
84
- --mds-liquid-specular: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 60%);
85
- --mds-liquid-specular-intense: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
56
+ /* Blur tokens - Increased for more glass-like effect */
57
+ --mds-liquid-blur-xs: 4px;
58
+ --mds-liquid-blur-sm: 8px;
59
+ --mds-liquid-blur-md: 12px;
60
+ --mds-liquid-blur-lg: 16px;
61
+ --mds-liquid-blur-xl: 24px;
62
+
63
+ /* Saturate tokens - Subtle per Apple guidelines */
64
+ --mds-liquid-saturate-subtle: 105%;
65
+ --mds-liquid-saturate-default: 120%;
66
+ --mds-liquid-saturate-vibrant: 140%;
67
+
68
+ /* Background tokens - True glass transparency */
69
+ --mds-liquid-bg-glass: rgba(255, 255, 255, 0.08);
70
+ --mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.12);
71
+ --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.4);
72
+ --mds-liquid-bg-sidebar: rgba(0, 0, 0, 0.35);
73
+ --mds-liquid-bg-navbar: rgba(0, 0, 0, 0.4);
74
+ --mds-liquid-bg-card: rgba(255, 255, 255, 0.06);
75
+ --mds-liquid-bg-input: rgba(255, 255, 255, 0.08);
76
+ --mds-liquid-bg-button: rgba(255, 255, 255, 0.1);
77
+ --mds-liquid-bg-button-hover: rgba(255, 255, 255, 0.15);
78
+
79
+ /* Border tokens - Subtle glass edges */
80
+ --mds-liquid-border-subtle: rgba(255, 255, 255, 0.12);
81
+ --mds-liquid-border-default: rgba(255, 255, 255, 0.18);
82
+ --mds-liquid-border-bright: rgba(255, 255, 255, 0.25);
83
+
84
+ /* Shadow tokens - Deeper for lifted effect */
85
+ --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.2);
86
+ --mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.25);
87
+ --mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.3);
88
+ --mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.4);
89
+
90
+ /* Inner glow - Top edge highlight */
91
+ --mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
92
+ --mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.08);
93
+
94
+ /* Specular highlight - More dramatic top-left shine */
95
+ --mds-liquid-specular: linear-gradient(
96
+ 145deg,
97
+ rgba(255, 255, 255, 0.15) 0%,
98
+ rgba(255, 255, 255, 0.05) 25%,
99
+ rgba(255, 255, 255, 0) 50%
100
+ );
101
+ --mds-liquid-specular-intense: linear-gradient(
102
+ 145deg,
103
+ rgba(255, 255, 255, 0.25) 0%,
104
+ rgba(255, 255, 255, 0.08) 30%,
105
+ rgba(255, 255, 255, 0) 60%
106
+ );
86
107
 
87
108
  /* Transitions */
88
- --mds-liquid-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
89
- --mds-liquid-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
90
- --mds-liquid-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
109
+ --mds-liquid-transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
110
+ --mds-liquid-transition-fast: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
111
+ --mds-liquid-transition-slow: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
91
112
 
92
- /* Background gradients */
93
- --mds-liquid-gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
94
- --mds-liquid-gradient-light: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
113
+ /* Background gradient */
114
+ --mds-liquid-gradient: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
95
115
  }
96
116
 
97
- /* Light theme overrides */
117
+ /* =========================
118
+ Light Theme
119
+ ========================= */
98
120
  html[data-theme="light"] {
99
- /* Semantic Colors - Light mode */
121
+ /* Semantic Colors */
100
122
  --mds-color-text-primary: #1a1a1a;
101
- --mds-color-text-secondary: rgba(0, 0, 0, 0.7);
102
- --mds-color-text-tertiary: rgba(0, 0, 0, 0.5);
103
- --mds-color-background-primary: #ffffff;
104
- --mds-color-background-secondary: #f5f5f5;
105
- --mds-color-background-tertiary: #e0e0e0;
106
- --mds-color-border-default: rgba(0, 0, 0, 0.1);
107
- --mds-color-border-light: rgba(0, 0, 0, 0.05);
108
-
109
- /* Scrollbar - Light mode */
110
- --mds-scrollbar-track: rgba(200, 200, 200, 0.3);
111
- --mds-scrollbar-thumb: rgba(150, 150, 150, 0.5);
112
- --mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.7);
113
-
114
- /* Liquid Glass - Light mode */
115
- --mds-liquid-bg-light: rgba(255, 255, 255, 0.7);
116
- --mds-liquid-bg-dark: rgba(0, 0, 0, 0.05);
117
- --mds-liquid-bg-overlay: rgba(255, 255, 255, 0.5);
118
- --mds-liquid-border-subtle: rgba(0, 0, 0, 0.1);
119
- --mds-liquid-border-bright: rgba(0, 0, 0, 0.2);
120
- --mds-liquid-shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.1);
121
- --mds-liquid-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15);
122
- --mds-liquid-glow-subtle: inset 0 0 16px -4px rgba(0, 0, 0, 0.05);
123
- --mds-liquid-glow-bright: inset 0 2px 16px rgba(0, 0, 0, 0.08);
124
- --mds-liquid-specular: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 60%);
123
+ --mds-color-text-secondary: rgba(0, 0, 0, 0.6);
124
+ --mds-color-text-tertiary: rgba(0, 0, 0, 0.4);
125
+ --mds-color-background-primary: #f8f9fa;
126
+ --mds-color-background-secondary: #ffffff;
127
+ --mds-color-background-tertiary: #f0f0f0;
128
+ --mds-color-border-default: rgba(0, 0, 0, 0.08);
129
+ --mds-color-border-light: rgba(0, 0, 0, 0.04);
130
+
131
+ /* Scrollbar */
132
+ --mds-scrollbar-track: rgba(0, 0, 0, 0.05);
133
+ --mds-scrollbar-thumb: rgba(0, 0, 0, 0.2);
134
+ --mds-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
135
+
136
+ /* Liquid Glass - Light mode uses darker glass for contrast */
137
+ --mds-liquid-bg-glass: rgba(255, 255, 255, 0.7);
138
+ --mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.85);
139
+ --mds-liquid-bg-overlay: rgba(255, 255, 255, 0.6);
140
+ --mds-liquid-bg-sidebar: rgba(255, 255, 255, 0.75);
141
+ --mds-liquid-bg-navbar: rgba(255, 255, 255, 0.8);
142
+ --mds-liquid-bg-card: rgba(255, 255, 255, 0.6);
143
+ --mds-liquid-bg-input: rgba(255, 255, 255, 0.9);
144
+ --mds-liquid-bg-button: rgba(0, 0, 0, 0.04);
145
+ --mds-liquid-bg-button-hover: rgba(0, 0, 0, 0.08);
146
+
147
+ /* Borders - Subtle dark edges */
148
+ --mds-liquid-border-subtle: rgba(0, 0, 0, 0.06);
149
+ --mds-liquid-border-default: rgba(0, 0, 0, 0.1);
150
+ --mds-liquid-border-bright: rgba(0, 0, 0, 0.15);
151
+
152
+ /* Shadows - Softer for light mode */
153
+ --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.06);
154
+ --mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.1);
155
+ --mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
156
+ --mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.15);
157
+
158
+ /* Inner glow - Subtle white edge */
159
+ --mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
160
+ --mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.5);
161
+
162
+ /* Specular - Brighter for light mode */
163
+ --mds-liquid-specular: linear-gradient(
164
+ 145deg,
165
+ rgba(255, 255, 255, 0.6) 0%,
166
+ rgba(255, 255, 255, 0.2) 25%,
167
+ rgba(255, 255, 255, 0) 50%
168
+ );
169
+ --mds-liquid-specular-intense: linear-gradient(
170
+ 145deg,
171
+ rgba(255, 255, 255, 0.8) 0%,
172
+ rgba(255, 255, 255, 0.3) 30%,
173
+ rgba(255, 255, 255, 0) 60%
174
+ );
175
+
176
+ /* Background gradient */
177
+ --mds-liquid-gradient: linear-gradient(180deg, #f0f2f5 0%, #e4e6e9 100%);
125
178
  }
126
179
 
127
180
 
@@ -131,12 +184,12 @@ html[data-theme="light"] {
131
184
 
132
185
  .mds-liquid-glass {
133
186
  position: relative;
134
- background: var(--mds-liquid-bg-light);
187
+ background: var(--mds-liquid-bg-glass);
135
188
  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
136
189
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
137
190
  border: 1px solid var(--mds-liquid-border-subtle);
138
- border-radius: 12px;
139
- box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-subtle);
191
+ border-radius: 16px;
192
+ box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
140
193
  transition: var(--mds-liquid-transition);
141
194
  overflow: hidden;
142
195
  }
@@ -149,7 +202,6 @@ html[data-theme="light"] {
149
202
  background: var(--mds-liquid-specular);
150
203
  border-radius: inherit;
151
204
  pointer-events: none;
152
- opacity: 0.6;
153
205
  z-index: 0;
154
206
  }
155
207
 
@@ -159,15 +211,17 @@ html[data-theme="light"] {
159
211
  z-index: 1;
160
212
  }
161
213
 
162
- /* Hover state - no movement, only subtle border change */
214
+ /* Hover state - subtle brightness increase */
163
215
  .mds-liquid-glass:hover {
164
216
  border-color: var(--mds-liquid-border-bright);
217
+ box-shadow: var(--mds-liquid-shadow-elevated), var(--mds-liquid-glow-edge);
165
218
  }
166
219
 
167
220
  /* No-hover variant */
168
221
  .mds-liquid-glass--no-hover,
169
222
  .mds-liquid-glass--no-hover:hover {
170
223
  border-color: var(--mds-liquid-border-subtle);
224
+ box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
171
225
  }
172
226
 
173
227
 
@@ -178,25 +232,25 @@ html[data-theme="light"] {
178
232
  .mds-liquid-glass--xs {
179
233
  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
180
234
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
181
- border-radius: 6px;
235
+ border-radius: 8px;
182
236
  }
183
237
 
184
238
  .mds-liquid-glass--sm {
185
239
  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
186
240
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
187
- border-radius: 8px;
241
+ border-radius: 12px;
188
242
  }
189
243
 
190
244
  .mds-liquid-glass--lg {
191
245
  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
192
246
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
193
- border-radius: 16px;
247
+ border-radius: 20px;
194
248
  }
195
249
 
196
250
  .mds-liquid-glass--xl {
197
251
  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
198
252
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
199
- border-radius: 20px;
253
+ border-radius: 24px;
200
254
  }
201
255
 
202
256
 
@@ -206,13 +260,13 @@ html[data-theme="light"] {
206
260
 
207
261
  /* Navbar */
208
262
  .mds-liquid-glass--navbar {
209
- background: var(--mds-liquid-bg-light);
263
+ background: var(--mds-liquid-bg-navbar);
210
264
  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
211
265
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
212
266
  border: none;
213
267
  border-bottom: 1px solid var(--mds-liquid-border-subtle);
214
268
  border-radius: 0;
215
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
269
+ box-shadow: var(--mds-liquid-shadow-raised);
216
270
  }
217
271
 
218
272
  .mds-liquid-glass--navbar::before {
@@ -220,31 +274,27 @@ html[data-theme="light"] {
220
274
  }
221
275
 
222
276
  .mds-liquid-glass--navbar:hover {
223
- transform: none;
277
+ box-shadow: var(--mds-liquid-shadow-raised);
224
278
  }
225
279
 
226
280
  /* Sidebar */
227
281
  .mds-liquid-glass--sidebar {
228
- background: var(--mds-liquid-bg-light);
282
+ background: var(--mds-liquid-bg-sidebar);
229
283
  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
230
284
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
231
285
  border: none;
232
286
  border-right: 1px solid var(--mds-liquid-border-subtle);
233
287
  border-radius: 0;
234
- box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
288
+ box-shadow: var(--mds-liquid-shadow-raised);
235
289
  }
236
290
 
237
291
  .mds-liquid-glass--sidebar::before {
238
292
  border-radius: 0;
239
293
  }
240
294
 
241
- .mds-liquid-glass--sidebar:hover {
242
- transform: none;
243
- }
244
-
245
295
  /* Card */
246
296
  .mds-liquid-glass--card {
247
- background: var(--mds-liquid-bg-light);
297
+ background: var(--mds-liquid-bg-card);
248
298
  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
249
299
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
250
300
  padding: 1.5rem;
@@ -252,21 +302,17 @@ html[data-theme="light"] {
252
302
 
253
303
  /* Modal */
254
304
  .mds-liquid-glass--modal {
255
- background: var(--mds-liquid-bg-dark);
256
- backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
257
- -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
258
- border-radius: 16px;
259
- box-shadow: var(--mds-liquid-shadow-elevated), var(--mds-liquid-glow-bright);
305
+ background: var(--mds-liquid-bg-glass-thick);
306
+ backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
307
+ -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
308
+ border-radius: 20px;
309
+ box-shadow: var(--mds-liquid-shadow-dramatic), var(--mds-liquid-glow-edge);
260
310
  }
261
311
 
262
312
  .mds-liquid-glass--modal::before {
263
313
  background: var(--mds-liquid-specular-intense);
264
314
  }
265
315
 
266
- .mds-liquid-glass--modal:hover {
267
- transform: none;
268
- }
269
-
270
316
  /* Modal Overlay */
271
317
  .mds-liquid-glass--overlay {
272
318
  background: var(--mds-liquid-bg-overlay);
@@ -283,77 +329,63 @@ html[data-theme="light"] {
283
329
 
284
330
  /* Input */
285
331
  .mds-liquid-glass--input {
286
- background: var(--mds-liquid-bg-light);
332
+ background: var(--mds-liquid-bg-input);
287
333
  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
288
334
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
289
- border-radius: 8px;
290
- box-shadow: var(--mds-liquid-shadow-raised);
335
+ border-radius: 10px;
336
+ box-shadow: var(--mds-liquid-glow-soft);
291
337
  padding: 0.75rem 1rem;
292
338
  }
293
339
 
294
340
  .mds-liquid-glass--input:focus {
295
- border-color: var(--mds-liquid-border-bright);
296
- box-shadow: var(--mds-liquid-shadow-floating), 0 0 0 3px rgba(0, 85, 255, 0.15);
341
+ border-color: var(--mds-color-brand-primary);
342
+ box-shadow: var(--mds-liquid-glow-soft), 0 0 0 3px rgba(0, 85, 255, 0.2);
297
343
  outline: none;
298
344
  }
299
345
 
300
- .mds-liquid-glass--input:hover {
301
- transform: none;
302
- }
303
-
304
346
  /* Button */
305
347
  .mds-liquid-glass--button {
306
- background: var(--mds-liquid-bg-light);
348
+ background: var(--mds-liquid-bg-button);
307
349
  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
308
350
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
309
- border-radius: 8px;
310
- box-shadow: var(--mds-liquid-shadow-raised);
351
+ border-radius: 10px;
352
+ box-shadow: var(--mds-liquid-shadow-raised), var(--mds-liquid-glow-soft);
311
353
  padding: 0.5rem 1rem;
312
354
  cursor: pointer;
313
355
  transition: var(--mds-liquid-transition-fast);
314
356
  }
315
357
 
316
358
  .mds-liquid-glass--button:hover {
317
- background: var(--mds-liquid-bg-dark);
359
+ background: var(--mds-liquid-bg-button-hover);
318
360
  border-color: var(--mds-liquid-border-bright);
319
- transform: translateY(-1px);
320
361
  }
321
362
 
322
363
  .mds-liquid-glass--button:active {
323
- transform: translateY(0);
324
- box-shadow: var(--mds-liquid-shadow-raised);
364
+ box-shadow: var(--mds-liquid-glow-soft);
325
365
  }
326
366
 
327
367
  /* Dropdown */
328
368
  .mds-liquid-glass--dropdown {
329
- background: var(--mds-liquid-bg-dark);
369
+ background: var(--mds-liquid-bg-glass-thick);
330
370
  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
331
371
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
332
- border-radius: 12px;
372
+ border-radius: 14px;
333
373
  box-shadow: var(--mds-liquid-shadow-elevated);
334
374
  padding: 0.5rem;
335
375
  }
336
376
 
337
- .mds-liquid-glass--dropdown:hover {
338
- transform: none;
339
- }
340
-
341
377
  /* Table */
342
378
  .mds-liquid-glass--table {
343
- background: var(--mds-liquid-bg-light);
379
+ background: var(--mds-liquid-bg-glass);
344
380
  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
345
381
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
346
- border-radius: 12px;
382
+ border-radius: 16px;
347
383
  overflow: hidden;
348
384
  }
349
385
 
350
- .mds-liquid-glass--table:hover {
351
- transform: none;
352
- }
353
-
354
386
  /* Footer */
355
387
  .mds-liquid-glass--footer {
356
- background: var(--mds-liquid-bg-light);
388
+ background: var(--mds-liquid-bg-navbar);
357
389
  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
358
390
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
359
391
  border: none;
@@ -365,26 +397,18 @@ html[data-theme="light"] {
365
397
  border-radius: 0;
366
398
  }
367
399
 
368
- .mds-liquid-glass--footer:hover {
369
- transform: none;
370
- }
371
-
372
400
  /* TOC (Table of Contents) */
373
401
  .mds-liquid-glass--toc {
374
- background: var(--mds-liquid-bg-light);
402
+ background: var(--mds-liquid-bg-card);
375
403
  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
376
404
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
377
- border-radius: 12px;
405
+ border-radius: 14px;
378
406
  padding: 1rem;
379
407
  }
380
408
 
381
- .mds-liquid-glass--toc:hover {
382
- transform: none;
383
- }
384
-
385
409
  /* Badge */
386
410
  .mds-liquid-glass--badge {
387
- background: var(--mds-liquid-bg-light);
411
+ background: var(--mds-liquid-bg-button);
388
412
  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
389
413
  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
390
414
  border-radius: 999px;
@@ -393,52 +417,14 @@ html[data-theme="light"] {
393
417
  font-size: 0.75rem;
394
418
  }
395
419
 
396
- .mds-liquid-glass--badge:hover {
397
- transform: none;
398
- }
399
-
400
-
401
- /* =========================
402
- Intensity Variants
403
- ========================= */
404
-
405
- /* Subtle - less blur, less saturation */
406
- .mds-liquid-glass--subtle {
407
- backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
408
- -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
409
- box-shadow: var(--mds-liquid-shadow-raised);
410
- }
411
-
412
- .mds-liquid-glass--subtle::before {
413
- opacity: 0.3;
414
- }
415
-
416
- /* Vibrant - more blur, more saturation */
417
- .mds-liquid-glass--vibrant {
418
- backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
419
- -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
420
- box-shadow: var(--mds-liquid-shadow-elevated);
421
- }
422
-
423
- .mds-liquid-glass--vibrant::before {
424
- background: var(--mds-liquid-specular-intense);
425
- opacity: 0.8;
426
- }
427
-
428
420
 
429
421
  /* =========================
430
422
  Background Utilities
431
423
  ========================= */
432
424
 
433
425
  .mds-liquid-bg-gradient {
434
- background: var(--mds-liquid-gradient-dark) !important;
426
+ background: var(--mds-liquid-gradient) !important;
435
427
  background-attachment: fixed !important;
436
- background-repeat: no-repeat !important;
437
- background-size: 100% 100% !important;
438
- }
439
-
440
- html[data-theme="light"] .mds-liquid-bg-gradient {
441
- background: var(--mds-liquid-gradient-light) !important;
442
428
  }
443
429
 
444
430
 
@@ -453,30 +439,20 @@ html[data-theme="light"] .mds-liquid-bg-gradient {
453
439
  .mds-liquid-glass--input {
454
440
  transition: none !important;
455
441
  }
456
-
457
- .mds-liquid-glass:hover,
458
- .mds-liquid-glass--button:hover {
459
- transform: none !important;
460
- }
461
442
  }
462
443
 
463
444
  /* High contrast */
464
445
  @media (prefers-contrast: high) {
465
446
  .mds-liquid-glass {
466
- background: rgba(60, 60, 60, 0.95) !important;
447
+ background: var(--mds-color-background-secondary) !important;
467
448
  backdrop-filter: none !important;
468
449
  -webkit-backdrop-filter: none !important;
469
- border: 2px solid rgba(255, 255, 255, 0.5) !important;
450
+ border: 2px solid var(--mds-color-text-primary) !important;
470
451
  }
471
452
 
472
453
  .mds-liquid-glass::before {
473
454
  display: none !important;
474
455
  }
475
-
476
- html[data-theme="light"] .mds-liquid-glass {
477
- background: rgba(255, 255, 255, 0.95) !important;
478
- border: 2px solid rgba(0, 0, 0, 0.5) !important;
479
- }
480
456
  }
481
457
 
482
458
 
@@ -484,13 +460,8 @@ html[data-theme="light"] .mds-liquid-bg-gradient {
484
460
  Browser Fallback
485
461
  ========================= */
486
462
 
487
- /* Fallback for browsers without backdrop-filter support */
488
463
  @supports not (backdrop-filter: blur(1px)) {
489
464
  .mds-liquid-glass {
490
- background: rgba(30, 30, 30, 0.9);
491
- }
492
-
493
- html[data-theme="light"] .mds-liquid-glass {
494
- background: rgba(255, 255, 255, 0.9);
465
+ background: var(--mds-color-background-secondary);
495
466
  }
496
467
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metropolle/design-system",
3
- "version": "1.2025.12.10.2349",
3
+ "version": "1.2025.12.11.1430",
4
4
  "description": "Sistema de design unificado para a plataforma Metropolle",
5
5
  "type": "module",
6
6
  "main": "dist/react/index.js",