@metropolle/design-system
Version:
Sistema de design unificado para a plataforma Metropolle
161 lines (157 loc) • 6.76 kB
JavaScript
// Auto-generated design tokens
export const tokens = {
"colors": {
"color-meridian-bg": "#FCFCFD",
"color-meridian-panel": "#FFFFFF",
"color-meridian-glass": "#FFFFFF",
"color-meridian-glass2": "#FFFFFF",
"color-meridian-field": "#F1F2F5",
"color-meridian-ink": "#17171C",
"color-meridian-ink-dim": "rgba(0,0,0,.58)",
"color-meridian-ink-faint": "rgba(0,0,0,.40)",
"color-meridian-ink-rgb": "23,23,28",
"color-meridian-accent": "#17171C",
"color-meridian-accent-2": "#3A3A42",
"color-meridian-accent-soft": "rgba(0,0,0,.05)",
"color-meridian-on-accent": "#FFFFFF",
"color-meridian-stroke": "rgba(0,0,0,.12)",
"color-meridian-stroke-2": "rgba(0,0,0,.18)",
"color-meridian-ok": "#1a7f4b",
"color-meridian-info": "#2563eb",
"color-meridian-warn": "#9a6b00",
"color-meridian-bad": "#b42318",
"color-meridian-gold": "#f5a623",
"color-meridian-dark-bg": "#0B0B0D",
"color-meridian-dark-panel": "#161619",
"color-meridian-dark-glass": "#1C1C20",
"color-meridian-dark-glass2": "#161619",
"color-meridian-dark-field": "#202024",
"color-meridian-dark-ink": "#F2F0EC",
"color-meridian-dark-ink-dim": "rgba(255,255,255,.60)",
"color-meridian-dark-ink-faint": "rgba(255,255,255,.42)",
"color-meridian-dark-ink-rgb": "242,240,236",
"color-meridian-dark-accent": "#F2F0EC",
"color-meridian-dark-accent-2": "#C8C8CC",
"color-meridian-dark-accent-soft": "rgba(255,255,255,.07)",
"color-meridian-dark-on-accent": "#0B0B0D",
"color-meridian-dark-stroke": "rgba(255,255,255,.12)",
"color-meridian-dark-stroke-2": "rgba(255,255,255,.20)",
"color-meridian-dark-gold": "#fbbf24",
"color-brand-primary-default": "#0055FF",
"color-brand-primary-hover": "#0044CC",
"color-brand-primary-active": "#003399",
"color-brand-primary-disabled": "#80AAFF",
"color-brand-secondary-default": "#FF9900",
"color-brand-secondary-hover": "#E68A00",
"color-brand-secondary-active": "#CC7A00",
"color-brand-secondary-disabled": "#FFCC80",
"color-brand-neutral": "#333333",
"color-semantic-success-default": "#1a7f4b",
"color-semantic-success-light": "#D1FAE5",
"color-semantic-success-dark": "#065F46",
"color-semantic-warning-default": "#9a6b00",
"color-semantic-warning-light": "#FEF3C7",
"color-semantic-warning-dark": "#92400E",
"color-semantic-error-default": "#b42318",
"color-semantic-error-light": "#FEE2E2",
"color-semantic-error-dark": "#991B1B",
"color-semantic-info-default": "#2563eb",
"color-semantic-info-light": "#DBEAFE",
"color-semantic-info-dark": "#1E40AF",
"color-background-primary": "#FCFCFD",
"color-background-secondary": "rgba(0, 0, 0, 0.05)",
"color-background-glass-light": "#FFFFFF",
"color-background-glass-dark": "#1C1C20",
"color-text-primary": "#17171C",
"color-text-secondary": "rgba(0, 0, 0, 0.58)",
"color-text-muted": "rgba(0, 0, 0, 0.40)",
"color-border-light": "rgba(0, 0, 0, 0.12)",
"color-border-medium": "rgba(0, 0, 0, 0.18)",
"color-border-strong": "rgba(0, 0, 0, 0.30)"
},
"typography": {
"fontFamily-brand": "'Helvetica Neue', Helvetica, Arial, sans-serif",
"fontFamily-sans": "'Helvetica Neue', Helvetica, Arial, sans-serif",
"fontFamily-aux": "'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
"fontFamily-mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
"fontFamily-ocr": "'OCR-B', 'OCR B Std', monospace",
"fontSize-xs": "0.75rem",
"fontSize-sm": "0.875rem",
"fontSize-base": "1rem",
"fontSize-lg": "1.125rem",
"fontSize-xl": "1.25rem",
"fontSize-2xl": "1.5rem",
"fontSize-3xl": "1.875rem",
"fontSize-4xl": "2.125rem",
"lineHeight-tight": "1.2",
"lineHeight-normal": "1.5",
"lineHeight-relaxed": "1.75",
"letterSpacing-brand": "-0.05rem",
"letterSpacing-tight": "-0.03rem",
"letterSpacing-normal": "0",
"letterSpacing-wide": "0.025rem",
"fontWeight-light": "300",
"fontWeight-normal": "400",
"fontWeight-medium": "500",
"fontWeight-semibold": "600",
"fontWeight-bold": "700"
},
"spacing": {
"xs": "0.25rem",
"sm": "0.5rem",
"md": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"3xl": "4rem",
"borderRadius-sm": "2px",
"borderRadius-md": "4px",
"borderRadius-lg": "6px",
"borderRadius-xl": "8px",
"borderRadius-full": "50%",
"shadow-glass-light": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)",
"shadow-glass-lightHover": "0 1px 3px rgba(0,0,0,.07), 0 18px 38px -18px rgba(0,0,0,.18)",
"shadow-glass-dark": "0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)",
"shadow-glass-darkHover": "0 18px 40px -18px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07)",
"shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
"shadow-md": "0 4px 6px rgba(0, 0, 0, 0.07)",
"shadow-lg": "0 10px 15px rgba(0, 0, 0, 0.1)",
"shadow-card-default": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)",
"shadow-card-sm": "0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10)",
"shadow-card-dark": "0 16px 36px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)",
"shadow-card-darkSm": "inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px -8px rgba(0,0,0,.7)",
"blur-glass-default": "0px",
"blur-glass-light": "0px",
"blur-glass-heavy": "0px"
},
"effects": {
"transition-fast": "0.15s ease",
"transition-normal": "0.3s ease",
"transition-slow": "0.5s ease",
"animation-fadeIn": "fadeIn 0.3s ease-in-out",
"animation-slideUp": "slideUp 0.3s ease-out",
"animation-bounce": "bounce 0.6s ease-in-out",
"backdrop-glass-filter": "none",
"backdrop-glass-webkitFilter": "none",
"transform-hoverUp": "none",
"transform-scale-hover": "scale(1)",
"transform-scale-active": "none",
"shadow-card": "0 1px 3px rgba(0,0,0,.05), 0 16px 34px -18px rgba(0,0,0,.14)",
"shadow-cardSm": "0 1px 2px rgba(0,0,0,.05), 0 6px 16px -12px rgba(0,0,0,.10)",
"opacity-glass-light-default": "0.15",
"opacity-glass-light-hover": "0.2",
"opacity-glass-dark-default": "0.8",
"opacity-glass-dark-hover": "0.85",
"opacity-disabled": "0.5",
"opacity-muted": "0.7"
}
};
// Typed token access
export type TokenCategory = 'colors' | 'typography' | 'spacing' | 'effects';
export function getToken(category: TokenCategory, token: string): string {
return tokens[category]?.[token] || '';
}
// CSS variable helper
export function getCSSVar(category: string, token: string): string {
return `var(--mds-${category}-${token})`;
}