@metropolle/design-system/dist/css/liquid-glass.css

Sistema de design unificado para a plataforma Metropolle

/* ============================================
   Metropolle Design System - Meridian
   Flat, zero-border, theme-adaptive (DSC-011 / EPIC-010)
   (legacy filename liquid-glass.css; tokens repointed to Meridian)
   ============================================ */

/* =========================
   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 (Meridian: neutraliza roxo/periwinkle do glass; brand-primary mantido) */
  --mds-color-brand-primary: #0055FF;
  --mds-color-brand-secondary: #3A3A42;
  --mds-color-brand-accent: #2563eb;

  /* Status Colors (paleta Meridian — prototype-28) */
  --mds-color-success: #1a7f4b;
  --mds-color-warning: #9a6b00;
  --mds-color-error: #b42318;
  --mds-color-info: #2563eb;
  --mds-color-accent: #2563eb;

  /* =========================
     Meridian aliases (--mds-meridian-*) — stable, theme-adaptive handles
     onto the canonical Meridian short tokens emitted by tokens.css.
     Consumers may target these without depending on the legacy --mds-liquid-*
     surface vars. Light defaults; dark override below.
     ========================= */
  --mds-meridian-bg: var(--bg, #FCFCFD);
  --mds-meridian-panel: var(--panel, #FFFFFF);
  --mds-meridian-surface: var(--glass, #FFFFFF);
  --mds-meridian-surface-2: var(--glass-2, #F4F2EE);
  --mds-meridian-field: var(--field, #F1F2F5);
  --mds-meridian-ink: var(--ink, #17171C);
  --mds-meridian-ink-dim: var(--ink-dim, rgba(0, 0, 0, 0.58));
  --mds-meridian-accent: var(--accent, #17171C);
  --mds-meridian-accent-soft: var(--accent-soft, rgba(0, 0, 0, 0.06));
  --mds-meridian-on-accent: var(--on-accent, #FFFFFF);
  --mds-meridian-stroke: var(--stroke, rgba(0, 0, 0, 0.12));
  --mds-meridian-radius: var(--r, 2px);
  --mds-meridian-radius-floating: var(--r-sm, 4px);
  --mds-meridian-card-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05), 0 16px 34px -18px rgba(0, 0, 0, 0.14));
  --mds-meridian-card-shadow-sm: var(--card-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px -12px rgba(0, 0, 0, 0.10));
  --mds-meridian-modal-elevation: var(--modal-elevation, 0 18px 44px -22px rgba(0, 0, 0, 0.34), 0 2px 12px rgba(0, 0, 0, 0.08));
  --mds-meridian-ok: var(--ok, #1a7f4b);
  --mds-meridian-info: var(--info, #2563eb);
  --mds-meridian-warn: var(--warn, #9a6b00);
  --mds-meridian-bad: var(--bad, #b42318);
  --mds-meridian-gold: var(--gold, #f5a623);
  --mds-chart-mono-1: var(--accent, #17171C);
  --mds-chart-mono-2: rgba(var(--ink-rgb, 23, 23, 28), 0.58);
  --mds-chart-mono-3: rgba(var(--ink-rgb, 23, 23, 28), 0.36);
  --mds-chart-mono-4: rgba(var(--ink-rgb, 23, 23, 28), 0.22);
  --mds-chart-status-ok: var(--ok, #1a7f4b);
  --mds-chart-status-info: var(--info, #2563eb);
  --mds-chart-status-warn: var(--warn, #9a6b00);
  --mds-chart-status-bad: var(--bad, #b42318);
  --mds-chart-status-arch: var(--arch, #8A8A92);
  --mds-chart-status-gold: var(--gold, #f5a623);
}

/* =========================
   Dark Theme (Default)
   ========================= */
:root,
html[data-theme="dark"] {
  /* Meridian semantic colors (DARK) — FEAT-0235 re-point */
  --mds-color-text-primary: #F2F0EC;
  --mds-color-text-secondary: rgba(255, 255, 255, 0.60);
  --mds-color-text-tertiary: rgba(255, 255, 255, 0.42);
  --mds-color-background-primary: #0B0B0D;
  --mds-color-background-secondary: #161619;
  --mds-color-background-tertiary: #1C1C20;
  --mds-color-border-default: rgba(255, 255, 255, 0.07);
  --mds-color-border-light: rgba(255, 255, 255, 0.04);

  /* Scrollbar */
  --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);

  /* =========================
     Meridian flat tokens (ex-"Liquid Glass") — FEAT-0235 re-point.
     blur=0, superfícies OPACAS, zero-borda, sombras flat, sem specular/glow.
     Nomes --mds-liquid-* mantidos (rename = P1b); só os VALORES viram Meridian.
     ========================= */

  /* Blur — Meridian é flat: zero blur */
  --mds-liquid-blur-sm: 0px;
  --mds-liquid-blur-md: 0px;
  --mds-liquid-blur-lg: 0px;

  /* Saturate — sem realce */
  --mds-liquid-saturate-default: 100%;
  --mds-liquid-saturate-vibrant: 100%;

  /* Superfícies — OPACAS (Meridian: distinção por sombra, não transparência) */
  --mds-liquid-bg-glass: #1C1C20;
  --mds-liquid-bg-glass-thick: #1C1C20;
  --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.62);
  --mds-liquid-bg-sidebar: #161619;
  --mds-liquid-bg-navbar: #161619;
  --mds-liquid-bg-card: #1C1C20;
  --mds-liquid-bg-input: #202024;
  --mds-liquid-bg-button: #202024;
  --mds-liquid-bg-button-hover: #27272C;

  /* Bordas — zero-borda (transparente; preserva o box-model sem linha visível) */
  --mds-liquid-border-subtle: transparent;
  --mds-liquid-border-default: transparent;
  --mds-liquid-border-bright: rgba(255, 255, 255, 0.06);

  /* Sombras Meridian (flat + leve glow interno no escuro) */
  --mds-liquid-shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px -8px rgba(0, 0, 0, 0.7);
  --mds-liquid-shadow-floating: 0 16px 36px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --mds-liquid-shadow-elevated: 0 16px 36px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --mds-liquid-shadow-dramatic: 0 24px 56px -20px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --mds-modal-elevation: 0 22px 54px -24px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 26px rgba(242, 240, 236, 0.10);
  --mds-chart-mono-1: var(--accent, #F2F0EC);
  --mds-chart-mono-2: rgba(var(--ink-rgb, 242, 240, 236), 0.60);
  --mds-chart-mono-3: rgba(var(--ink-rgb, 242, 240, 236), 0.42);
  --mds-chart-mono-4: rgba(var(--ink-rgb, 242, 240, 236), 0.24);

  /* Glow/specular — Meridian não usa; no-ops VÁLIDOS em lista de box-shadow / background */
  --mds-liquid-glow-edge: 0 0 0 0 transparent;
  --mds-liquid-glow-soft: 0 0 0 0 transparent;
  --mds-liquid-specular-intense: linear-gradient(transparent, transparent);

  /* Transitions (sem transform no hover = regra de classe) */
  --mds-liquid-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  --mds-liquid-transition-fast: all 0.14s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Fundo flat */
  --mds-liquid-gradient: #0B0B0D;
}

/* =========================
   Light Theme
   ========================= */
html[data-theme="light"] {
  /* Meridian semantic colors (LIGHT) — FEAT-0235 re-point */
  --mds-color-text-primary: #17171C;
  --mds-color-text-secondary: rgba(0, 0, 0, 0.58);
  --mds-color-text-tertiary: rgba(0, 0, 0, 0.40);
  --mds-color-background-primary: #FCFCFD;
  --mds-color-background-secondary: #FFFFFF;
  --mds-color-background-tertiary: #F1F2F5;
  --mds-color-border-default: rgba(0, 0, 0, 0.07);
  --mds-color-border-light: rgba(0, 0, 0, 0.04);

  /* Scrollbar */
  --mds-scrollbar-track: rgba(0, 0, 0, 0.05);
  --mds-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --mds-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);

  /* Meridian flat surfaces (LIGHT) — opacas, cards brancos */
  --mds-liquid-bg-glass: #FFFFFF;
  --mds-liquid-bg-glass-thick: #FFFFFF;
  --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.45);
  --mds-liquid-bg-sidebar: #FFFFFF;
  --mds-liquid-bg-navbar: #FCFCFD;
  --mds-liquid-bg-card: #FFFFFF;
  --mds-liquid-bg-input: #F1F2F5;
  --mds-liquid-bg-button: #F1F2F5;
  --mds-liquid-bg-button-hover: #E9EAEE;

  /* Bordas — zero-borda */
  --mds-liquid-border-subtle: transparent;
  --mds-liquid-border-default: transparent;
  --mds-liquid-border-bright: rgba(0, 0, 0, 0.06);

  /* Sombras Meridian (LIGHT — flat, suaves) */
  --mds-liquid-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px -12px rgba(0, 0, 0, 0.10);
  --mds-liquid-shadow-floating: 0 1px 3px rgba(0, 0, 0, 0.05), 0 16px 34px -18px rgba(0, 0, 0, 0.14);
  --mds-liquid-shadow-elevated: 0 1px 3px rgba(0, 0, 0, 0.05), 0 16px 34px -18px rgba(0, 0, 0, 0.14);
  --mds-liquid-shadow-dramatic: 0 24px 48px -20px rgba(0, 0, 0, 0.18);
  --mds-modal-elevation: 0 18px 44px -22px rgba(0, 0, 0, 0.34), 0 2px 12px rgba(0, 0, 0, 0.08);

  /* Glow/specular — no-ops válidos */
  --mds-liquid-glow-edge: 0 0 0 0 transparent;
  --mds-liquid-glow-soft: 0 0 0 0 transparent;
  --mds-liquid-specular: linear-gradient(transparent, transparent);
  --mds-liquid-specular-intense: linear-gradient(transparent, transparent);

  /* Fundo flat */
  --mds-liquid-gradient: #FCFCFD;
}

/* ============================================================
   Meridian flatten (FEAT-0235) — mata o blur de vidro globalmente.
   Os 21 `backdrop-filter: blur()` hardcoded em components.css NÃO são
   !important; este reset (!important, importado por último) vence todos.
   Meridian = flat, sem frosted glass. Superfícies/cores vêm dos tokens
   já re-pointados acima. (Opacificação fina de superfícies rgba residuais
   = P1b, polimento pós-ship; o look principal já é Meridian — ver DataTable.)
   ============================================================ */
*,
*::before,
*::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================
   Base surface class — Meridian flat (zero-border, no glass)
   afford = opaque surface + Meridian shadow; hover = shadow/bg only (NEVER move)
   ========================= */

.mds-liquid-glass {
  position: relative;
  background: var(--mds-liquid-bg-glass);
  /* Meridian: flat, no backdrop blur */
  border: none;
  border-radius: var(--r, 2px);
  box-shadow: var(--mds-liquid-shadow-floating);
  transition: var(--mds-liquid-transition);
  overflow: hidden;
}

/* Specular highlight removed (Meridian is flat) — pseudo kept as inert no-op
   so any descendant z-index assumptions stay intact without painting a halo. */
.mds-liquid-glass::before {
  content: none;
}

/* Content stacking preserved */
.mds-liquid-glass > * {
  position: relative;
  z-index: 1;
}

/* Hover state — Meridian: deeper shadow only, no transform, no border */
.mds-liquid-glass:hover {
  box-shadow: var(--mds-liquid-shadow-elevated);
}

/* No-hover variant */
.mds-liquid-glass--no-hover,
.mds-liquid-glass--no-hover:hover {
  box-shadow: var(--mds-liquid-shadow-floating);
}


/* =========================
   Size Variants
   ========================= */

.mds-liquid-glass--xs {
  border-radius: var(--r, 2px);
}

.mds-liquid-glass--sm {
  border-radius: var(--r, 2px);
}

.mds-liquid-glass--lg {
  border-radius: var(--r-sm, 4px);
}

.mds-liquid-glass--xl {
  border-radius: var(--r-sm, 4px);
}


/* =========================
   Element-Specific Classes
   ========================= */

/* Navbar */
.mds-liquid-glass--navbar {
  background: var(--mds-liquid-bg-navbar);
  border: none;
  border-radius: 0;
  box-shadow: var(--mds-liquid-shadow-raised);
}

.mds-liquid-glass--navbar:hover {
  box-shadow: var(--mds-liquid-shadow-raised);
}

/* Sidebar */
.mds-liquid-glass--sidebar {
  background: var(--mds-liquid-bg-sidebar);
  border: none;
  border-radius: 0;
  box-shadow: var(--mds-liquid-shadow-raised);
}

/* Card */
.mds-liquid-glass--card {
  background: var(--mds-liquid-bg-card);
  border-radius: var(--r, 2px);
  padding: 1.5rem;
}

/* Modal — floating surface uses 4px radius */
.mds-liquid-glass--modal {
  background: var(--mds-liquid-bg-glass-thick);
  border-radius: var(--r-sm, 4px);
  box-shadow: var(--mds-modal-elevation, var(--mds-liquid-shadow-dramatic));
}

/* Modal Overlay — scrim, no blur */
.mds-liquid-glass--overlay {
  background: var(--mds-liquid-bg-overlay);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Input — afford via field fill + focus ring (no border, no blur) */
.mds-liquid-glass--input {
  background: var(--mds-liquid-bg-input);
  border-radius: var(--r, 2px);
  box-shadow: var(--mds-liquid-glow-soft);
  padding: 0.75rem 1rem;
}

.mds-liquid-glass--input:focus {
  box-shadow: 0 0 0 2px var(--mds-color-brand-primary);
  outline: none;
}

/* Button — afford via fill; hover = fill change (no move, no border) */
.mds-liquid-glass--button {
  background: var(--mds-liquid-bg-button);
  border-radius: var(--r, 2px);
  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-button-hover);
}

.mds-liquid-glass--button:active {
  box-shadow: var(--mds-liquid-glow-soft);
}

/* Dropdown — floating surface */
.mds-liquid-glass--dropdown {
  background: var(--mds-liquid-bg-glass-thick);
  border-radius: var(--r-sm, 4px);
  box-shadow: var(--mds-liquid-shadow-elevated);
  padding: 0.5rem;
}

/* Table */
.mds-liquid-glass--table {
  background: var(--mds-liquid-bg-glass);
  border-radius: var(--r, 2px);
  overflow: hidden;
}

/* Footer */
.mds-liquid-glass--footer {
  background: var(--mds-liquid-bg-navbar);
  border: none;
  border-radius: 0;
}

/* TOC (Table of Contents) */
.mds-liquid-glass--toc {
  background: var(--mds-liquid-bg-card);
  border-radius: var(--r, 2px);
  padding: 1rem;
}

/* Badge — pill stays pill (radius carries shape semantics), flat fill */
.mds-liquid-glass--badge {
  background: var(--mds-liquid-bg-button);
  border-radius: 999px;
  box-shadow: var(--mds-liquid-shadow-raised);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}


/* =========================
   Background Utilities
   ========================= */

.mds-liquid-bg-gradient {
  background: var(--mds-liquid-gradient) !important;
  background-attachment: fixed !important;
}


/* =========================
   Accessibility
   ========================= */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mds-liquid-glass,
  .mds-liquid-glass--button,
  .mds-liquid-glass--input {
    transition: none !important;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  .mds-liquid-glass {
    background: var(--mds-color-background-secondary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2px solid var(--mds-color-text-primary) !important;
  }

  .mds-liquid-glass::before {
    display: none !important;
  }
}


/* =========================
   Browser Fallback
   ========================= */

@supports not (backdrop-filter: blur(1px)) {
  .mds-liquid-glass {
    background: var(--mds-color-background-secondary);
  }
}