Spaces:
Sleeping
Sleeping
| /** | |
| * shared.ts — Visual design system constants shared across multiple pages. | |
| * | |
| * ImageUploader.tsx and MaskEditor.tsx predate this file and inline their own | |
| * copies of these values — do not retroactively change those files. New | |
| * components (QualityEnhance, tab bar in App.tsx) should import from here so | |
| * that future design tweaks only need to land in one place. | |
| */ | |
| import type React from "react"; | |
| // --------------------------------------------------------------------------- | |
| // Typography | |
| // --------------------------------------------------------------------------- | |
| export const FONT_FAMILY = | |
| "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"; | |
| // --------------------------------------------------------------------------- | |
| // Buttons — three-tier hierarchy | |
| // --------------------------------------------------------------------------- | |
| /** Solid blue — primary action (e.g. submit, start processing). */ | |
| export const btnPrimary: React.CSSProperties = { | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: 6, | |
| padding: "8px 18px", | |
| background: "#3b82f6", | |
| border: "none", | |
| borderRadius: 7, | |
| cursor: "pointer", | |
| fontSize: 14, | |
| fontWeight: 600, | |
| color: "#fff", | |
| letterSpacing: "-0.01em", | |
| boxShadow: "0 1px 3px rgba(59,130,246,0.25)", | |
| }; | |
| /** White with border — secondary action (e.g. Download). */ | |
| export const btnSecondary: React.CSSProperties = { | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: 6, | |
| padding: "7px 14px", | |
| background: "#fff", | |
| border: "1px solid #d1d5db", | |
| borderRadius: 7, | |
| cursor: "pointer", | |
| fontSize: 14, | |
| fontWeight: 500, | |
| color: "#374151", | |
| boxShadow: "0 1px 2px rgba(0,0,0,0.05)", | |
| }; | |
| /** Transparent — ghost / low-emphasis action (e.g. Start Over). */ | |
| export const btnGhost: React.CSSProperties = { | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: 6, | |
| padding: "7px 12px", | |
| background: "transparent", | |
| border: "1px solid #e5e7eb", | |
| borderRadius: 7, | |
| cursor: "pointer", | |
| fontSize: 13, | |
| color: "#6b7280", | |
| }; | |
| // --------------------------------------------------------------------------- | |
| // Page container | |
| // --------------------------------------------------------------------------- | |
| export const pageContainer = (maxWidth = 680): React.CSSProperties => ({ | |
| maxWidth, | |
| margin: "48px auto 48px", | |
| padding: "0 24px", | |
| fontFamily: FONT_FAMILY, | |
| color: "#111827", | |
| }); | |