/* ============================================================ Mantis Design System — colors_and_type.css Derived from the Mantis Figma library (Ant Design v5 tokens). Primary: #1677ff Font: Public Sans (web), SF Pro (iOS) ============================================================ */ /* ----- Webfonts ------------------------------------------------ */ /* Public Sans is the canonical Mantis web font (Google Fonts). */ /* We load via Google Fonts for portability; substitute @font-face*/ /* with local /fonts files if going fully offline. */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;900&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap'); :root { /* ===== ANT DESIGN BLUE — PRIMARY SCALE ====================== */ --color-primary-1: #e6f4ff; /* blue-1 tints / hovers */ --color-primary-2: #bae0ff; /* blue-2 */ --color-primary-3: #91caff; /* blue-3 */ --color-primary-4: #69b1ff; /* blue-4 */ --color-primary-5: #4096ff; /* blue-5 hover */ --color-primary-6: #1677ff; /* blue-6 ** PRIMARY ** */ --color-primary-7: #0958d9; /* blue-7 active */ --color-primary-8: #003eb3; /* blue-8 */ --color-primary-9: #002c8c; /* blue-9 */ --color-primary-10: #001d66; /* blue-10 */ /* legacy aliases used throughout the Figma */ --color-primary: var(--color-primary-6); --color-primary-hover: var(--color-primary-7); /* MUI hover = blue[6] = #0958d9 (darker) */ --color-primary-active: var(--color-primary-7); --color-primary-bg: var(--color-primary-1); --color-primary-border: var(--color-primary-3); /* ===== NEUTRAL / GREY SCALE ================================ */ --color-bg-base: #ffffff; --color-bg-elevated: #ffffff; --color-bg-layout: #fafafa; /* page background */ --color-bg-spotlight:#262626; /* tooltip / dark surface */ --color-bg-mask: rgba(0,0,0,0.45); --color-grey-1: #ffffff; --color-grey-2: #fafafa; --color-grey-3: #f5f5f5; --color-grey-4: #f0f0f0; --color-grey-5: #d9d9d9; --color-grey-6: #bfbfbf; --color-grey-7: #8c8c8c; --color-grey-8: #595959; --color-grey-9: #434343; --color-grey-10: #262626; --color-grey-11: #1f1f1f; --color-grey-12: #141414; --color-grey-13: #000000; /* Semantic text + surface aliases — match MUI Mantis theme: text.primary = grey[700] = #262626 text.secondary= grey[500] = #8c8c8c text.disabled = grey[400] = #bfbfbf divider = grey[200] = #f0f0f0 bg.default = grey.A50 = #fafafa bg.paper = grey[0] = #ffffff */ --fg-primary: #262626; --fg-secondary: #8c8c8c; --fg-tertiary: #bfbfbf; --fg-disabled: #bfbfbf; --fg-inverse: #ffffff; --fg-link: var(--color-primary-6); --bg-1: #ffffff; --bg-2: #fafafa; --bg-3: #f5f5f5; --bg-hover: #f5f5f5; --bg-selected: var(--color-primary-1); --border-1: #f0f0f0; /* default divider */ --border-2: #d9d9d9; /* input / strong divider */ --border-3: #bfbfbf; /* ===== STATUS COLORS ======================================= */ --color-success-1: #f6ffed; --color-success-3: #b7eb8f; --color-success-6: #52c41a; /* ** SUCCESS ** */ --color-success-7: #389e0d; --color-warning-1: #fffbe6; --color-warning-3: #ffe58f; --color-warning-6: #faad14; /* ** WARNING ** */ --color-warning-7: #d48806; --color-error-1: #fff1f0; --color-error-3: #ffccc7; --color-error-6: #f5222d; /* ** ERROR ** */ --color-error-7: #cf1322; --color-info-1: #e6f4ff; --color-info-6: #1677ff; /* ** INFO (same as primary)*/ /* ===== EXTENDED PALETTE (Tag / Chart colors) =============== */ --color-magenta-6: #eb2f96; --color-pink-6: #eb2f96; --color-red-6: #f5222d; --color-volcano-6: #fa541c; --color-orange-6: #fa8c16; --color-yellow-6: #fadb14; --color-gold-6: #faad14; --color-lime-6: #a0d911; --color-green-6: #52c41a; --color-cyan-6: #13c2c2; --color-blue-6: #1677ff; --color-geekblue-6:#2f54eb; --color-purple-6: #722ed1; /* ===== TYPOGRAPHY ========================================== */ --font-sans: "Public Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Public Sans", "Inter", sans-serif; --font-mono: "Roboto Mono", "SF Mono", Menlo, Consolas, monospace; --font-ios: -apple-system, "SF Pro Display", "SF Pro Text", system-ui; /* type ramp — verified against full-version/src/themes/typography.ts. base htmlFontSize: 16. Mantis uses weight 600 for h1–h5 (NOT 700). */ --fs-xs: 10px; --lh-xs: 16px; --fs-sm: 12px; --lh-sm: 20px; /* body2, caption · 0.75rem */ --fs-base: 14px; --lh-base: 22px; /* body1, h6 · 0.875rem */ --fs-md: 16px; --lh-md: 24px; /* h5 · 1rem */ --fs-lg: 18px; --lh-lg: 26px; --fs-xl: 20px; --lh-xl: 28px; /* h4 · 1.25rem */ --fs-2xl: 24px; --lh-2xl: 32px; /* h3 · 1.5rem */ --fs-3xl: 30px; --lh-3xl: 38px; /* h2 · 1.875rem */ --fs-4xl: 38px; --lh-4xl: 46px; /* h1 · 2.375rem */ --fs-display: 58px; --lh-display: 1; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 600; /* Mantis 'bold' = 600 (see typography.ts) */ --fw-black: 900; /* ===== RADII =============================================== */ --radius-xs: 2px; /* tags, chips */ --radius-sm: 4px; /* ** default button / input radius ** */ --radius-md: 6px; --radius-lg: 8px; /* cards, drawers */ --radius-xl: 12px; --radius-2xl:16px; --radius-pill: 9999px; /* ===== SHADOWS (Ant 5 elevation tokens) ==================== */ --shadow-button: 0 2px 0 rgba(0,0,0,0.043); /* button standard drop */ --shadow-button-primary: 0 2px 0 rgba(5,145,255,0.10); /* primary button */ --shadow-1: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09); /* dropdown / popover */ --shadow-card: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09); --shadow-elev: 0 8px 25px rgba(0,0,0,0.05); /* auth card, modal */ --shadow-tooltip: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05); /* ===== SPACING (Mantis 4-pt grid) ========================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* default gutter */ --space-5: 20px; --space-6: 24px; /* card padding */ --space-8: 32px; --space-10:40px; --space-12:48px; --space-16:64px; /* ===== MOTION ============================================== */ --easing-base: cubic-bezier(0.645, 0.045, 0.355, 1); --easing-out: cubic-bezier(0.215, 0.610, 0.355, 1.000); --easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000); --dur-fast: 0.1s; --dur-base: 0.2s; --dur-slow: 0.3s; /* control heights */ --control-h-sm: 24px; --control-h-md: 32px; --control-h-lg: 40px; /* Mantis layout constants (from full-version/src/config.ts) */ --drawer-width: 260px; --mini-drawer-width: 60px; --header-height: 60px; } /* ============================================================ Semantic resets / base type rules ============================================================ */ .mantis, .mantis * { box-sizing: border-box; } .mantis { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-primary); background: var(--color-bg-layout); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mantis h1, .mantis .h1 { font-size: var(--fs-4xl); line-height: 1.21; font-weight: 600; margin: 0; letter-spacing: -0.2px; } .mantis h2, .mantis .h2 { font-size: var(--fs-3xl); line-height: 1.27; font-weight: 600; margin: 0; letter-spacing: -0.2px; } .mantis h3, .mantis .h3 { font-size: var(--fs-2xl); line-height: 1.33; font-weight: 600; margin: 0; } .mantis h4, .mantis .h4 { font-size: var(--fs-xl); line-height: 1.4; font-weight: 600; margin: 0; } .mantis h5, .mantis .h5 { font-size: var(--fs-md); line-height: 1.5; font-weight: 600; margin: 0; } .mantis h6, .mantis .h6 { font-size: var(--fs-base);line-height: 1.57; font-weight: 400; margin: 0; } .mantis p { font-size: var(--fs-base); line-height: 1.57; margin: 0; } .mantis .subtitle1 { font-size: var(--fs-base); line-height: 1.57; font-weight: 600; } .mantis .subtitle2 { font-size: var(--fs-sm); line-height: 1.66; font-weight: 500; } .mantis .caption { font-size: var(--fs-sm); line-height: 1.66; font-weight: 400; } .mantis .text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } .mantis .text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); } .mantis .text-muted { color: var(--fg-secondary); } .mantis .text-disabled{ color: var(--fg-tertiary); } .mantis a, .mantis .link { color: var(--fg-link); text-decoration: none; } .mantis a:hover { color: var(--color-primary-5); } .mantis code, .mantis kbd, .mantis pre { font-family: var(--font-mono); font-size: 13px; background: var(--bg-3); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--fg-primary); }