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

Sistema de design unificado para a plataforma Metropolle

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Metropolle Spacing Tokens",
  "description": "Sistema de espaçamento baseado em múltiplos de 4px",
  "spacing": {
    "xs": {
      "value": "0.25rem",
      "type": "spacing",
      "description": "4px - Espaçamento extra pequeno"
    },
    "sm": {
      "value": "0.5rem",
      "type": "spacing", 
      "description": "8px - Espaçamento pequeno"
    },
    "md": {
      "value": "1rem",
      "type": "spacing",
      "description": "16px - Espaçamento médio (padrão glass card)"
    },
    "lg": {
      "value": "1.5rem",
      "type": "spacing",
      "description": "24px - Espaçamento grande (padrão glass card dark)"
    },
    "xl": {
      "value": "2rem",
      "type": "spacing",
      "description": "32px - Espaçamento extra grande"
    },
    "2xl": {
      "value": "3rem",
      "type": "spacing",
      "description": "48px - Espaçamento muito grande"
    },
    "3xl": {
      "value": "4rem",
      "type": "spacing",
      "description": "64px - Espaçamento máximo"
    }
  },
  "borderRadius": {
    "sm": {
      "value": "0.25rem",
      "type": "borderRadius",
      "description": "4px - Raio pequeno"
    },
    "md": {
      "value": "0.5rem",
      "type": "borderRadius",
      "description": "8px - Raio médio"
    },
    "lg": {
      "value": "1rem",
      "type": "borderRadius", 
      "description": "16px - Raio grande (glass card dark)"
    },
    "xl": {
      "value": "1.25rem",
      "type": "borderRadius",
      "description": "20px - Raio extra grande (glass card light)"
    },
    "full": {
      "value": "50%",
      "type": "borderRadius",
      "description": "Círculo completo"
    }
  },
  "shadow": {
    "glass": {
      "light": {
        "value": "0 8px 32px rgba(0, 0, 0, 0.1)",
        "type": "boxShadow",
        "description": "Sombra do glass card claro"
      },
      "lightHover": {
        "value": "0 12px 40px rgba(0, 0, 0, 0.15)",
        "type": "boxShadow",
        "description": "Sombra do glass card claro no hover"
      },
      "dark": {
        "value": "0 8px 32px rgba(0, 0, 0, 0.3)",
        "type": "boxShadow",
        "description": "Sombra do glass card escuro"
      },
      "darkHover": {
        "value": "0 12px 40px rgba(0, 0, 0, 0.4)",
        "type": "boxShadow",
        "description": "Sombra do glass card escuro no hover"
      }
    },
    "sm": {
      "value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "type": "boxShadow",
      "description": "Sombra pequena"
    },
    "md": {
      "value": "0 4px 6px rgba(0, 0, 0, 0.07)",
      "type": "boxShadow",
      "description": "Sombra média"
    },
    "lg": {
      "value": "0 10px 15px rgba(0, 0, 0, 0.1)",
      "type": "boxShadow",
      "description": "Sombra grande"
    }
  },
  "blur": {
    "glass": {
      "default": {
        "value": "20px",
        "type": "blur",
        "description": "Blur padrão dos glass cards"
      },
      "light": {
        "value": "15px",
        "type": "blur", 
        "description": "Blur leve"
      },
      "heavy": {
        "value": "30px",
        "type": "blur",
        "description": "Blur pesado"
      }
    }
  }
}