Spaces:
Sleeping
Sleeping
File size: 2,570 Bytes
a3953cb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | /**
* 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",
});
|