@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": "blur(var(--blur, 20px))",
        "type": "backdropFilter",
        "description": "Filtro backdrop padrão"
      },
      "webkitFilter": {
        "value": "blur(var(--blur, 20px))",
        "type": "webkitBackdropFilter", 
        "description": "Filtro backdrop WebKit"
      }
    }
  },
  "transform": {
    "hoverUp": {
      "value": "translateY(-2px)",
      "type": "transform",
      "description": "Transform hover padrão dos glass cards"
    },
    "scale": {
      "hover": {
        "value": "scale(1.02)",
        "type": "transform",
        "description": "Scale sutil no hover"
      },
      "active": {
        "value": "scale(0.98)",
        "type": "transform",
        "description": "Scale no estado ativo"
      }
    }
  },
  "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"
    }
  }
}