@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": "2px",
      "type": "borderRadius",
      "description": "Meridian: primitivos (cards/grids/badges) - cantos quase retos"
    },
    "md": {
      "value": "4px",
      "type": "borderRadius",
      "description": "Meridian: flutuantes/composer"
    },
    "lg": {
      "value": "6px",
      "type": "borderRadius",
      "description": "Meridian: cmdbar/profile (faixa 6-8px). COLAPSADO de 16px glass"
    },
    "xl": {
      "value": "8px",
      "type": "borderRadius",
      "description": "Meridian: cmdbar/profile topo da faixa (8px). COLAPSADO de 20px glass"
    },
    "full": {
      "value": "50%",
      "type": "borderRadius",
      "description": "Círculo completo"
    }
  },
  "shadow": {
    "glass": {
      "light": {
        "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). Distincao de card por sombra (zero-borda)"
      },
      "lightHover": {
        "value": "0 1px 3px rgba(0,0,0,.07), 0 18px 38px -18px rgba(0,0,0,.18)",
        "type": "boxShadow",
        "description": "Meridian card-shadow no hover (light) - leve aumento, SEM transform"
      },
      "dark": {
        "value": "0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)",
        "type": "boxShadow",
        "description": "Meridian --card-shadow (dark): sombra + inset-glow"
      },
      "darkHover": {
        "value": "0 18px 40px -18px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07)",
        "type": "boxShadow",
        "description": "Meridian card-shadow no hover (dark) - inset-glow reforcado, SEM transform"
      }
    },
    "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"
    },
    "card": {
      "default": {
        "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)"
      },
      "sm": {
        "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)"
      },
      "dark": {
        "value": "0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)",
        "type": "boxShadow",
        "description": "Meridian --card-shadow (dark)"
      },
      "darkSm": {
        "value": "inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px -8px rgba(0,0,0,.7)",
        "type": "boxShadow",
        "description": "Meridian --card-shadow-sm (dark)"
      }
    }
  },
  "blur": {
    "glass": {
      "default": {
        "value": "0px",
        "type": "blur",
        "description": "Meridian: blur de glass ZERADO (flat, sem backdrop blur)"
      },
      "light": {
        "value": "0px",
        "type": "blur",
        "description": "Meridian: blur ZERADO"
      },
      "heavy": {
        "value": "0px",
        "type": "blur",
        "description": "Meridian: blur ZERADO"
      }
    }
  }
}