@metropolle/design-system/dist/tokens/effects.json

Sistema de design unificado para a plataforma Metropolle

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Metropolle Effects Tokens",
  "description": "Efeitos visuais e animações da identidade Metropolle",
  "transition": {
    "fast": {
      "value": "0.15s ease",
      "type": "transition",
      "description": "Transição rápida"
    },
    "normal": {
      "value": "0.3s ease", 
      "type": "transition",
      "description": "Transição padrão (glass cards)"
    },
    "slow": {
      "value": "0.5s ease",
      "type": "transition",
      "description": "Transição lenta"
    }
  },
  "animation": {
    "fadeIn": {
      "value": "fadeIn 0.3s ease-in-out",
      "type": "animation",
      "description": "Animação de fade in"
    },
    "slideUp": {
      "value": "slideUp 0.3s ease-out",
      "type": "animation", 
      "description": "Animação de slide para cima"
    },
    "bounce": {
      "value": "bounce 0.6s ease-in-out",
      "type": "animation",
      "description": "Animação de bounce"
    }
  },
  "backdrop": {
    "glass": {
      "filter": {
        "value": "none",
        "type": "backdropFilter",
        "description": "Meridian: backdrop blur ZERADO (flat). Era blur(20px)"
      },
      "webkitFilter": {
        "value": "none",
        "type": "webkitBackdropFilter",
        "description": "Meridian: backdrop blur ZERADO (flat). Era blur(20px)"
      }
    }
  },
  "transform": {
    "hoverUp": {
      "value": "none",
      "type": "transform",
      "description": "Meridian: hover-lift ZERADO (afford por sombra/hover, nao por movimento). Era translateY(-2px)"
    },
    "scale": {
      "hover": {
        "value": "scale(1)",
        "type": "transform",
        "description": "Meridian: scale no hover ZERADO (1). Era scale(1.02)"
      },
      "active": {
        "value": "none",
        "type": "transform",
        "description": "Meridian: scale no active ZERADO (none). Era scale(0.98)"
      }
    }
  },
  "shadow": {
    "card": {
      "value": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)",
      "type": "boxShadow",
      "description": "Meridian --card-shadow (light) - alias em effects"
    },
    "cardSm": {
      "value": "0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10)",
      "type": "boxShadow",
      "description": "Meridian --card-shadow-sm (light) - alias em effects"
    }
  },
  "opacity": {
    "glass": {
      "light": {
        "default": {
          "value": "0.15",
          "type": "opacity",
          "description": "Opacidade padrão glass card claro"
        },
        "hover": {
          "value": "0.2",
          "type": "opacity",
          "description": "Opacidade hover glass card claro"
        }
      },
      "dark": {
        "default": {
          "value": "0.8",
          "type": "opacity",
          "description": "Opacidade padrão glass card escuro"
        },
        "hover": {
          "value": "0.85",
          "type": "opacity",
          "description": "Opacidade hover glass card escuro"
        }
      }
    },
    "disabled": {
      "value": "0.5",
      "type": "opacity",
      "description": "Opacidade para elementos desabilitados"
    },
    "muted": {
      "value": "0.7",
      "type": "opacity",
      "description": "Opacidade para elementos secundários"
    }
  }
}