@metropolle/design-system 1.0.0-beta.20250821014534.5a59824

package/dist/tokens/index.json

@@ -0,0 +1,470 @@
+{
+  "colors": {
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "title": "Metropolle Color Tokens",
+    "description": "Tokens de cores baseados na identidade visual Metropolle",
+    "color": {
+      "brand": {
+        "primary": {
+          "value": "#0055FF",
+          "type": "color",
+          "description": "Cor primária da marca Metropolle"
+        },
+        "secondary": {
+          "value": "#FF9900",
+          "type": "color",
+          "description": "Cor secundária complementar"
+        },
+        "neutral": {
+          "value": "#333333",
+          "type": "color",
+          "description": "Cor neutra para textos"
+        }
+      },
+      "semantic": {
+        "success": {
+          "value": "#10B981",
+          "type": "color",
+          "description": "Verde para estados de sucesso"
+        },
+        "warning": {
+          "value": "#F59E0B",
+          "type": "color",
+          "description": "Amarelo para avisos"
+        },
+        "error": {
+          "value": "#EF4444",
+          "type": "color",
+          "description": "Vermelho para erros"
+        },
+        "info": {
+          "value": "#3B82F6",
+          "type": "color",
+          "description": "Azul para informações"
+        }
+      },
+      "background": {
+        "primary": {
+          "value": "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%)",
+          "type": "color",
+          "description": "Gradiente principal usado na homepage"
+        },
+        "secondary": {
+          "value": "rgba(255, 255, 255, 0.05)",
+          "type": "color",
+          "description": "Background secundário com transparência"
+        },
+        "glass": {
+          "light": {
+            "value": "rgba(255, 255, 255, 0.15)",
+            "type": "color",
+            "description": "Background glass card claro"
+          },
+          "dark": {
+            "value": "rgba(60, 60, 60, 0.8)",
+            "type": "color",
+            "description": "Background glass card escuro"
+          }
+        }
+      },
+      "text": {
+        "primary": {
+          "value": "#ffffff",
+          "type": "color",
+          "description": "Texto principal (branco)"
+        },
+        "secondary": {
+          "value": "rgba(255, 255, 255, 0.7)",
+          "type": "color",
+          "description": "Texto secundário com transparência"
+        },
+        "muted": {
+          "value": "rgba(255, 255, 255, 0.5)",
+          "type": "color",
+          "description": "Texto esmaecido"
+        }
+      },
+      "border": {
+        "light": {
+          "value": "rgba(255, 255, 255, 0.1)",
+          "type": "color",
+          "description": "Borda sutil clara"
+        },
+        "medium": {
+          "value": "rgba(255, 255, 255, 0.2)",
+          "type": "color",
+          "description": "Borda média"
+        },
+        "strong": {
+          "value": "rgba(255, 255, 255, 0.3)",
+          "type": "color",
+          "description": "Borda forte"
+        }
+      }
+    }
+  },
+  "typography": {
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "title": "Metropolle Typography Tokens",
+    "description": "Tokens de tipografia baseados na identidade Helvetica da Metropolle",
+    "typography": {
+      "fontFamily": {
+        "brand": {
+          "value": "Helvetica, Inter Tight, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+          "type": "fontFamily",
+          "description": "Stack de fontes da marca Metropolle"
+        },
+        "mono": {
+          "value": "'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace",
+          "type": "fontFamily",
+          "description": "Fonte monospace para código"
+        }
+      },
+      "fontSize": {
+        "xs": {
+          "value": "0.75rem",
+          "type": "fontSize",
+          "description": "12px - Texto muito pequeno"
+        },
+        "sm": {
+          "value": "0.875rem",
+          "type": "fontSize",
+          "description": "14px - Texto pequeno"
+        },
+        "base": {
+          "value": "1rem",
+          "type": "fontSize",
+          "description": "16px - Texto base"
+        },
+        "lg": {
+          "value": "1.125rem",
+          "type": "fontSize",
+          "description": "18px - Texto grande"
+        },
+        "xl": {
+          "value": "1.25rem",
+          "type": "fontSize",
+          "description": "20px - Texto extra grande"
+        },
+        "2xl": {
+          "value": "1.5rem",
+          "type": "fontSize",
+          "description": "24px - Heading pequeno"
+        },
+        "3xl": {
+          "value": "1.875rem",
+          "type": "fontSize",
+          "description": "30px - Heading médio"
+        },
+        "4xl": {
+          "value": "2.125rem",
+          "type": "fontSize",
+          "description": "34px - Logo brand (mobile: 28.8px)"
+        }
+      },
+      "lineHeight": {
+        "tight": {
+          "value": "1.2",
+          "type": "lineHeight",
+          "description": "Line height apertado para headings"
+        },
+        "normal": {
+          "value": "1.5",
+          "type": "lineHeight",
+          "description": "Line height normal para texto"
+        },
+        "relaxed": {
+          "value": "1.75",
+          "type": "lineHeight",
+          "description": "Line height relaxado para leitura"
+        }
+      },
+      "letterSpacing": {
+        "brand": {
+          "value": "-0.05rem",
+          "type": "letterSpacing",
+          "description": "Letter spacing da marca (desktop)"
+        },
+        "tight": {
+          "value": "-0.03rem",
+          "type": "letterSpacing",
+          "description": "Letter spacing apertado (mobile)"
+        },
+        "normal": {
+          "value": "0",
+          "type": "letterSpacing",
+          "description": "Letter spacing normal"
+        },
+        "wide": {
+          "value": "0.025rem",
+          "type": "letterSpacing",
+          "description": "Letter spacing amplo"
+        }
+      },
+      "fontWeight": {
+        "light": {
+          "value": "300",
+          "type": "fontWeight",
+          "description": "Peso leve"
+        },
+        "normal": {
+          "value": "400",
+          "type": "fontWeight",
+          "description": "Peso normal"
+        },
+        "medium": {
+          "value": "500",
+          "type": "fontWeight",
+          "description": "Peso médio"
+        },
+        "semibold": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Peso semi-bold"
+        },
+        "bold": {
+          "value": "700",
+          "type": "fontWeight",
+          "description": "Peso bold"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "$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"
+        }
+      }
+    }
+  },
+  "effects": {
+    "$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"
+      }
+    }
+  }
+}

package/dist/tokens/spacing.json

@@ -0,0 +1,127 @@
+{
+  "$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"
+      }
+    }
+  }
+}