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

package/dist/css/components.css

@@ -460,17 +460,59 @@ html:not([data-theme]) .modal-overlay .mds-modal-card {
   font-family: var(--mds-typography-fontFamily-brand);
 }
 
+/* Brand Logo Size Variants - Consistent across all environments */
+.mds-brand-logo--sm {
+  font-size: 1.5rem;  /* 24px - Navbar size */
+  letter-spacing: -0.03rem;
+}
+
+.mds-brand-logo--md {
+  font-size: 2rem;    /* 32px - Medium contexts */
+  letter-spacing: -0.04rem;
+}
+
+.mds-brand-logo--lg {
+  font-size: 2.125rem; /* 34px - Landing/hero contexts */
+  letter-spacing: var(--mds-typography-letterSpacing-brand);
+}
+
+/* Navbar-specific brand logo - always consistent size */
+.navbar-brand-logo,
+.navbar__brand-logo,
+.login-brand-logo {
+  font-size: 1.5rem !important;
+  letter-spacing: -0.03rem !important;
+  font-weight: var(--mds-typography-fontWeight-bold) !important;
+  font-family: var(--mds-typography-fontFamily-brand) !important;
+  color: var(--mds-color-text-primary) !important;
+}
+
 /* Brand Logo Responsive */
 @media (max-width: 768px) {
   .mds-text--brand,
   .mds-brand-logo,
-  .mds-brand-logo--sm,
-  .mds-brand-logo--md,
-  .mds-brand-logo--lg,
   .logo-brand {
     font-size: 1.8rem;
     letter-spacing: var(--mds-typography-letterSpacing-tight);
   }
+
+  .mds-brand-logo--sm,
+  .navbar-brand-logo,
+  .navbar__brand-logo,
+  .login-brand-logo {
+    font-size: 1.25rem !important;
+    letter-spacing: -0.02rem !important;
+  }
+
+  .mds-brand-logo--md {
+    font-size: 1.5rem;
+    letter-spacing: -0.03rem;
+  }
+
+  .mds-brand-logo--lg {
+    font-size: 1.8rem;
+    letter-spacing: var(--mds-typography-letterSpacing-tight);
+  }
 }
 
 /* Glass Card - Enhanced styles (complementing base tokens.css) */

package/dist/css/liquid-glass.css

@@ -0,0 +1,496 @@
+/* ============================================
+   Metropolle Design System - Liquid Glass CSS
+   iOS 26 inspired glass effects - SUBTLE mode
+   ============================================ */
+
+/* =========================
+   CSS Custom Properties
+   ========================= */
+
+:root {
+  /* =========================
+     Centralized Theme Variables
+     Use these across all repos
+     ========================= */
+
+  /* Typography */
+  --mds-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --mds-font-family-brand: 'Helvetica', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Brand Colors */
+  --mds-color-brand-primary: #0055FF;
+  --mds-color-brand-secondary: #667eea;
+  --mds-color-brand-accent: #764ba2;
+
+  /* Semantic Colors - Dark mode (default) */
+  --mds-color-text-primary: #ffffff;
+  --mds-color-text-secondary: rgba(255, 255, 255, 0.7);
+  --mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
+  --mds-color-background-primary: #0f0f0f;
+  --mds-color-background-secondary: #1f1f1f;
+  --mds-color-background-tertiary: #2f2f2f;
+  --mds-color-border-default: rgba(255, 255, 255, 0.1);
+  --mds-color-border-light: rgba(255, 255, 255, 0.05);
+
+  /* Status Colors */
+  --mds-color-success: #10b981;
+  --mds-color-warning: #f59e0b;
+  --mds-color-error: #ef4444;
+  --mds-color-info: #3b82f6;
+
+  /* Scrollbar - Dark mode (default) */
+  --mds-scrollbar-track: rgba(40, 40, 40, 0.8);
+  --mds-scrollbar-thumb: rgba(80, 80, 80, 0.8);
+  --mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.8);
+
+  /* =========================
+     Liquid Glass Tokens
+     ========================= */
+
+  /* Blur tokens */
+  --mds-liquid-blur-xs: 2px;
+  --mds-liquid-blur-sm: 4px;
+  --mds-liquid-blur-md: 6px;
+  --mds-liquid-blur-lg: 8px;
+  --mds-liquid-blur-xl: 12px;
+
+  /* Saturate tokens */
+  --mds-liquid-saturate-subtle: 110%;
+  --mds-liquid-saturate-default: 130%;
+  --mds-liquid-saturate-vibrant: 150%;
+
+  /* Background tokens - Dark mode (default) */
+  --mds-liquid-bg-light: rgba(255, 255, 255, 0.05);
+  --mds-liquid-bg-dark: rgba(20, 20, 20, 0.6);
+  --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.5);
+  --mds-liquid-bg-sidebar: rgba(20, 20, 20, 0.85);
+  --mds-liquid-bg-navbar: rgba(15, 15, 15, 0.9);
+
+  /* Border tokens - Dark mode (default) */
+  --mds-liquid-border-subtle: rgba(255, 255, 255, 0.2);
+  --mds-liquid-border-bright: rgba(255, 255, 255, 0.5);
+
+  /* Shadow tokens */
+  --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --mds-liquid-shadow-floating: 0 4px 16px rgba(31, 38, 135, 0.15);
+  --mds-liquid-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.2);
+  --mds-liquid-shadow-dramatic: 0 12px 48px rgba(0, 0, 0, 0.3);
+
+  /* Inner glow */
+  --mds-liquid-glow-subtle: inset 0 0 16px -4px rgba(255, 255, 255, 0.2);
+  --mds-liquid-glow-bright: inset 0 2px 16px rgba(255, 255, 255, 0.25);
+
+  /* Specular highlight */
+  --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%);
+  --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%);
+
+  /* Transitions */
+  --mds-liquid-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --mds-liquid-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --mds-liquid-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Background gradients */
+  --mds-liquid-gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
+  --mds-liquid-gradient-light: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
+}
+
+/* Light theme overrides */
+html[data-theme="light"] {
+  /* Semantic Colors - Light mode */
+  --mds-color-text-primary: #1a1a1a;
+  --mds-color-text-secondary: rgba(0, 0, 0, 0.7);
+  --mds-color-text-tertiary: rgba(0, 0, 0, 0.5);
+  --mds-color-background-primary: #ffffff;
+  --mds-color-background-secondary: #f5f5f5;
+  --mds-color-background-tertiary: #e0e0e0;
+  --mds-color-border-default: rgba(0, 0, 0, 0.1);
+  --mds-color-border-light: rgba(0, 0, 0, 0.05);
+
+  /* Scrollbar - Light mode */
+  --mds-scrollbar-track: rgba(200, 200, 200, 0.3);
+  --mds-scrollbar-thumb: rgba(150, 150, 150, 0.5);
+  --mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.7);
+
+  /* Liquid Glass - Light mode */
+  --mds-liquid-bg-light: rgba(255, 255, 255, 0.7);
+  --mds-liquid-bg-dark: rgba(0, 0, 0, 0.05);
+  --mds-liquid-bg-overlay: rgba(255, 255, 255, 0.5);
+  --mds-liquid-border-subtle: rgba(0, 0, 0, 0.1);
+  --mds-liquid-border-bright: rgba(0, 0, 0, 0.2);
+  --mds-liquid-shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.1);
+  --mds-liquid-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --mds-liquid-glow-subtle: inset 0 0 16px -4px rgba(0, 0, 0, 0.05);
+  --mds-liquid-glow-bright: inset 0 2px 16px rgba(0, 0, 0, 0.08);
+  --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%);
+}
+
+
+/* =========================
+   Base Liquid Glass Class
+   ========================= */
+
+.mds-liquid-glass {
+  position: relative;
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  border: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 12px;
+  box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-subtle);
+  transition: var(--mds-liquid-transition);
+  overflow: hidden;
+}
+
+/* Specular highlight via pseudo-element */
+.mds-liquid-glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--mds-liquid-specular);
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0.6;
+  z-index: 0;
+}
+
+/* Content should be above the specular */
+.mds-liquid-glass > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Hover state - no movement, only subtle border change */
+.mds-liquid-glass:hover {
+  border-color: var(--mds-liquid-border-bright);
+}
+
+/* No-hover variant */
+.mds-liquid-glass--no-hover,
+.mds-liquid-glass--no-hover:hover {
+  border-color: var(--mds-liquid-border-subtle);
+}
+
+
+/* =========================
+   Size Variants
+   ========================= */
+
+.mds-liquid-glass--xs {
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 6px;
+}
+
+.mds-liquid-glass--sm {
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 8px;
+}
+
+.mds-liquid-glass--lg {
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 16px;
+}
+
+.mds-liquid-glass--xl {
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  border-radius: 20px;
+}
+
+
+/* =========================
+   Element-Specific Classes
+   ========================= */
+
+/* Navbar */
+.mds-liquid-glass--navbar {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-bottom: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.mds-liquid-glass--navbar::before {
+  border-radius: 0;
+}
+
+.mds-liquid-glass--navbar:hover {
+  transform: none;
+}
+
+/* Sidebar */
+.mds-liquid-glass--sidebar {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-right: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
+}
+
+.mds-liquid-glass--sidebar::before {
+  border-radius: 0;
+}
+
+.mds-liquid-glass--sidebar:hover {
+  transform: none;
+}
+
+/* Card */
+.mds-liquid-glass--card {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  padding: 1.5rem;
+}
+
+/* Modal */
+.mds-liquid-glass--modal {
+  background: var(--mds-liquid-bg-dark);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
+  border-radius: 16px;
+  box-shadow: var(--mds-liquid-shadow-elevated), var(--mds-liquid-glow-bright);
+}
+
+.mds-liquid-glass--modal::before {
+  background: var(--mds-liquid-specular-intense);
+}
+
+.mds-liquid-glass--modal:hover {
+  transform: none;
+}
+
+/* Modal Overlay */
+.mds-liquid-glass--overlay {
+  background: var(--mds-liquid-bg-overlay);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm));
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.mds-liquid-glass--overlay::before {
+  display: none;
+}
+
+/* Input */
+.mds-liquid-glass--input {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 8px;
+  box-shadow: var(--mds-liquid-shadow-raised);
+  padding: 0.75rem 1rem;
+}
+
+.mds-liquid-glass--input:focus {
+  border-color: var(--mds-liquid-border-bright);
+  box-shadow: var(--mds-liquid-shadow-floating), 0 0 0 3px rgba(0, 85, 255, 0.15);
+  outline: none;
+}
+
+.mds-liquid-glass--input:hover {
+  transform: none;
+}
+
+/* Button */
+.mds-liquid-glass--button {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 8px;
+  box-shadow: var(--mds-liquid-shadow-raised);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: var(--mds-liquid-transition-fast);
+}
+
+.mds-liquid-glass--button:hover {
+  background: var(--mds-liquid-bg-dark);
+  border-color: var(--mds-liquid-border-bright);
+  transform: translateY(-1px);
+}
+
+.mds-liquid-glass--button:active {
+  transform: translateY(0);
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+/* Dropdown */
+.mds-liquid-glass--dropdown {
+  background: var(--mds-liquid-bg-dark);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 12px;
+  box-shadow: var(--mds-liquid-shadow-elevated);
+  padding: 0.5rem;
+}
+
+.mds-liquid-glass--dropdown:hover {
+  transform: none;
+}
+
+/* Table */
+.mds-liquid-glass--table {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.mds-liquid-glass--table:hover {
+  transform: none;
+}
+
+/* Footer */
+.mds-liquid-glass--footer {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-top: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+}
+
+.mds-liquid-glass--footer::before {
+  border-radius: 0;
+}
+
+.mds-liquid-glass--footer:hover {
+  transform: none;
+}
+
+/* TOC (Table of Contents) */
+.mds-liquid-glass--toc {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.mds-liquid-glass--toc:hover {
+  transform: none;
+}
+
+/* Badge */
+.mds-liquid-glass--badge {
+  background: var(--mds-liquid-bg-light);
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 999px;
+  box-shadow: var(--mds-liquid-shadow-raised);
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+.mds-liquid-glass--badge:hover {
+  transform: none;
+}
+
+
+/* =========================
+   Intensity Variants
+   ========================= */
+
+/* Subtle - less blur, less saturation */
+.mds-liquid-glass--subtle {
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+.mds-liquid-glass--subtle::before {
+  opacity: 0.3;
+}
+
+/* Vibrant - more blur, more saturation */
+.mds-liquid-glass--vibrant {
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
+  box-shadow: var(--mds-liquid-shadow-elevated);
+}
+
+.mds-liquid-glass--vibrant::before {
+  background: var(--mds-liquid-specular-intense);
+  opacity: 0.8;
+}
+
+
+/* =========================
+   Background Utilities
+   ========================= */
+
+.mds-liquid-bg-gradient {
+  background: var(--mds-liquid-gradient-dark) !important;
+  background-attachment: fixed !important;
+  background-repeat: no-repeat !important;
+  background-size: 100% 100% !important;
+}
+
+html[data-theme="light"] .mds-liquid-bg-gradient {
+  background: var(--mds-liquid-gradient-light) !important;
+}
+
+
+/* =========================
+   Accessibility
+   ========================= */
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .mds-liquid-glass,
+  .mds-liquid-glass--button,
+  .mds-liquid-glass--input {
+    transition: none !important;
+  }
+
+  .mds-liquid-glass:hover,
+  .mds-liquid-glass--button:hover {
+    transform: none !important;
+  }
+}
+
+/* High contrast */
+@media (prefers-contrast: high) {
+  .mds-liquid-glass {
+    background: rgba(60, 60, 60, 0.95) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: 2px solid rgba(255, 255, 255, 0.5) !important;
+  }
+
+  .mds-liquid-glass::before {
+    display: none !important;
+  }
+
+  html[data-theme="light"] .mds-liquid-glass {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border: 2px solid rgba(0, 0, 0, 0.5) !important;
+  }
+}
+
+
+/* =========================
+   Browser Fallback
+   ========================= */
+
+/* Fallback for browsers without backdrop-filter support */
+@supports not (backdrop-filter: blur(1px)) {
+  .mds-liquid-glass {
+    background: rgba(30, 30, 30, 0.9);
+  }
+
+  html[data-theme="light"] .mds-liquid-glass {
+    background: rgba(255, 255, 255, 0.9);
+  }
+}

package/dist/css/tokens.css

@@ -2,13 +2,27 @@
   /* Metropolle Design System Tokens */
 
   /* COLORS */
-  --mds-colors-color-brand-primary: #0055FF;
-  --mds-colors-color-brand-secondary: #FF9900;
+  --mds-colors-color-brand-primary-default: #0055FF;
+  --mds-colors-color-brand-primary-hover: #0044CC;
+  --mds-colors-color-brand-primary-active: #003399;
+  --mds-colors-color-brand-primary-disabled: #80AAFF;
+  --mds-colors-color-brand-secondary-default: #FF9900;
+  --mds-colors-color-brand-secondary-hover: #E68A00;
+  --mds-colors-color-brand-secondary-active: #CC7A00;
+  --mds-colors-color-brand-secondary-disabled: #FFCC80;
   --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-semantic-success-default: #10B981;
+  --mds-colors-color-semantic-success-light: #D1FAE5;
+  --mds-colors-color-semantic-success-dark: #065F46;
+  --mds-colors-color-semantic-warning-default: #F59E0B;
+  --mds-colors-color-semantic-warning-light: #FEF3C7;
+  --mds-colors-color-semantic-warning-dark: #92400E;
+  --mds-colors-color-semantic-error-default: #EF4444;
+  --mds-colors-color-semantic-error-light: #FEE2E2;
+  --mds-colors-color-semantic-error-dark: #991B1B;
+  --mds-colors-color-semantic-info-default: #3B82F6;
+  --mds-colors-color-semantic-info-light: #DBEAFE;
+  --mds-colors-color-semantic-info-dark: #1E40AF;
   --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);

package/dist/react/components/react/GlassCard/GlassCard.d.ts

@@ -1,23 +1,63 @@
 import React, { HTMLAttributes } from 'react';
+export type GlassStyle = 'glass' | 'liquid';
+export type GlassIntensity = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type GlassTheme = 'light' | 'dark';
 export interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
-    /** Variante do glass card */
+    /**
+     * Estilo do card: 'glass' (tradicional) ou 'liquid' (iOS 26 style)
+     * @default 'liquid'
+     */
+    glassStyle?: GlassStyle;
+    /**
+     * Intensidade do efeito blur/saturate
+     * xs: 2px, sm: 4px, md: 6px (default), lg: 8px, xl: 12px
+     * @default 'md'
+     */
+    intensity?: GlassIntensity;
+    /**
+     * Tema de cor: afeta opacidade e bordas
+     * @default 'light'
+     */
+    theme?: GlassTheme;
+    /**
+     * @deprecated Use 'theme' instead. Mantido para retrocompatibilidade.
+     */
     variant?: 'light' | 'dark';
-    /** Valor do blur em pixels */
+    /**
+     * @deprecated Use 'intensity' instead. Valor do blur em pixels.
+     */
     blur?: number;
-    /** Opacidade do background (0-1) */
+    /**
+     * Opacidade do background (0-1). Sobrescreve valor default do theme.
+     */
     opacity?: number;
     /** Conteúdo do card */
     children: React.ReactNode;
     /** Classes CSS adicionais */
     className?: string;
-    /** Se deve aplicar hover effects */
+    /**
+     * Se deve aplicar hover effects
+     * @default true
+     */
     enableHover?: boolean;
 }
 /**
  * Glass Card Component
  *
- * Componente de cartão com efeito glassmorphism baseado na identidade Metropolle.
- * Migrado dos componentes Angular existentes com melhorias.
+ * Componente de cartão com efeito glassmorphism ou Liquid Glass (iOS 26 style).
+ *
+ * @example
+ * ```tsx
+ * // Liquid Glass (novo padrão)
+ * <GlassCard glassStyle="liquid" intensity="md">
+ *   Content here
+ * </GlassCard>
+ *
+ * // Glassmorphism tradicional (retrocompatível)
+ * <GlassCard glassStyle="glass" variant="dark">
+ *   Content here
+ * </GlassCard>
+ * ```
  */
 export declare const GlassCard: React.ForwardRefExoticComponent<GlassCardProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=GlassCard.d.ts.map

package/dist/react/components/react/GlassCard/GlassCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlassCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/GlassCard/GlassCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,uFAwFpB,CAAC"}
+{"version":3,"file":"GlassCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/GlassCard/GlassCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,uFA4HpB,CAAC"}