From 5bfcb197f8a35160838ab37c4eb16d8c0ff04443 Mon Sep 17 00:00:00 2001 From: Hugo Date: Tue, 14 Apr 2026 23:52:32 +0200 Subject: [PATCH] style: refine theme for professional look and feel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace rounded body fonts with system-ui stack, tighten border radii (8/10/14 → 6/8/10), deepen shadows with new 3-tier hierarchy (shadowElevated), widen container (800 → 960px), and increase density (line-height, spacing, button/input sizing). Remove translateY hover animations in favor of shadow-only feedback. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/app/src/app.css.ts | 29 +++++------ packages/app/src/pages/dashboard.css.ts | 3 +- packages/client/src/components/modal.css.ts | 2 +- packages/client/src/theme.css.ts | 1 + packages/client/src/ui.css.ts | 55 +++++++++++---------- packages/kanban/src/ui/ui.css.ts | 3 +- 6 files changed, 47 insertions(+), 46 deletions(-) diff --git a/packages/app/src/app.css.ts b/packages/app/src/app.css.ts index 94a9e46..d6f0c70 100644 --- a/packages/app/src/app.css.ts +++ b/packages/app/src/app.css.ts @@ -3,7 +3,7 @@ import { vars } from "@exosphere/client/theme.css"; const shared = { size: { - containerMaxWidth: "800px", + containerMaxWidth: "960px", }, space: { xs: "4px", @@ -14,14 +14,13 @@ const shared = { xxl: "48px", }, radius: { - sm: "8px", - md: "10px", - lg: "14px", + sm: "6px", + md: "8px", + lg: "10px", }, - // see https://github.com/system-fonts/modern-font-stacks font: { - heading: "Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif", - body: "ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif", + heading: "Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, system-ui, sans-serif", + body: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif", }, }; @@ -29,7 +28,7 @@ export const lightTheme = createTheme(vars, { color: { text: "#1a1a2e", textMuted: "#64748b", - bg: "#f8fafc", + bg: "#f9fafb", surface: "#ffffff", surfaceHover: "#f8fafc", border: "#e2e8f0", @@ -42,9 +41,10 @@ export const lightTheme = createTheme(vars, { warningLight: "#fffbeb", success: "#10b981", successLight: "#ecfdf5", - shadow: "rgba(0, 0, 0, 0.04)", - shadowStrong: "rgba(0, 0, 0, 0.08)", - focusRing: "rgba(59, 130, 246, 0.2)", + shadow: "rgba(0, 0, 0, 0.06)", + shadowStrong: "rgba(0, 0, 0, 0.12)", + shadowElevated: "rgba(0, 0, 0, 0.16)", + focusRing: "rgba(59, 130, 246, 0.25)", skeleton: "#e2e8f0", skeletonShimmer: "#f1f5f9", }, @@ -68,9 +68,10 @@ export const darkTheme = createTheme(vars, { warningLight: "#3b2f0a", success: "#34d399", successLight: "#0d3326", - shadow: "rgba(0, 0, 0, 0.2)", - shadowStrong: "rgba(0, 0, 0, 0.35)", - focusRing: "rgba(96, 165, 250, 0.25)", + shadow: "rgba(0, 0, 0, 0.25)", + shadowStrong: "rgba(0, 0, 0, 0.4)", + shadowElevated: "rgba(0, 0, 0, 0.5)", + focusRing: "rgba(96, 165, 250, 0.3)", skeleton: "#334155", skeletonShimmer: "#475569", }, diff --git a/packages/app/src/pages/dashboard.css.ts b/packages/app/src/pages/dashboard.css.ts index 52d9cd4..dc0e23b 100644 --- a/packages/app/src/pages/dashboard.css.ts +++ b/packages/app/src/pages/dashboard.css.ts @@ -119,10 +119,9 @@ export const ctaCard = style({ paddingInline: vars.space.lg, textDecoration: "none", color: "inherit", - transition: "box-shadow 0.2s, transform 0.15s", + transition: "box-shadow 0.2s", ":hover": { boxShadow: `0 4px 12px ${vars.color.shadowStrong}`, - transform: "translateY(-1px)", textDecoration: "none", }, "@media": { diff --git a/packages/client/src/components/modal.css.ts b/packages/client/src/components/modal.css.ts index 6a94af3..1665edf 100644 --- a/packages/client/src/components/modal.css.ts +++ b/packages/client/src/components/modal.css.ts @@ -60,7 +60,7 @@ export const content = style({ borderRadius: vars.radius.lg, paddingBlock: vars.space.md, paddingInline: vars.space.md, - boxShadow: `0 8px 32px ${vars.color.shadowStrong}, 0 2px 8px ${vars.color.shadow}`, + boxShadow: `0 8px 32px ${vars.color.shadowElevated}, 0 2px 8px ${vars.color.shadow}`, width: "100%", maxWidth: "560px", animationName: slideUp, diff --git a/packages/client/src/theme.css.ts b/packages/client/src/theme.css.ts index ff41018..af1957a 100644 --- a/packages/client/src/theme.css.ts +++ b/packages/client/src/theme.css.ts @@ -19,6 +19,7 @@ export const vars = createThemeContract({ successLight: null, shadow: null, shadowStrong: null, + shadowElevated: null, focusRing: null, skeleton: null, skeletonShimmer: null, diff --git a/packages/client/src/ui.css.ts b/packages/client/src/ui.css.ts index f225ba2..fec6c89 100644 --- a/packages/client/src/ui.css.ts +++ b/packages/client/src/ui.css.ts @@ -19,7 +19,7 @@ export const themeRoot = style({ display: "flex", flexDirection: "column", fontFamily: vars.font.body, - lineHeight: 1.6, + lineHeight: 1.5, color: vars.color.text, backgroundColor: vars.color.bg, transition: "background-color 0.2s, color 0.2s", @@ -66,7 +66,7 @@ export const row = style({ }); export const section = style({ - marginBlockStart: vars.space.lg, + marginBlockStart: vars.space.md, display: "flex", flexDirection: "column", gap: vars.space.md, @@ -83,8 +83,8 @@ export const header = style({ transition: "background-color 0.2s, border-color 0.2s, box-shadow 0.2s", "@media": { [bp.sm]: { - paddingBlock: vars.space.md, - marginBlockEnd: vars.space.xl, + paddingBlock: "12px", + marginBlockEnd: vars.space.lg, }, }, }); @@ -99,10 +99,10 @@ export const headerInner = style({ export const headerTitle = style({ fontFamily: vars.font.heading, - fontWeight: 700, + fontWeight: 600, fontSize: "1rem", color: vars.color.text, - letterSpacing: "-0.01em", + letterSpacing: "-0.02em", ":hover": { textDecoration: "none" }, "@media": { [bp.sm]: { @@ -129,7 +129,7 @@ export const card = style({ border: `1px solid ${vars.color.border}`, borderRadius: vars.radius.lg, paddingBlock: vars.space.md, - paddingInline: vars.space.lg, + paddingInline: vars.space.md, boxShadow: `0 1px 3px ${vars.color.shadow}, 0 1px 2px ${vars.color.shadow}`, transition: "background-color 0.2s, border-color 0.2s, box-shadow 0.2s", ":hover": { @@ -138,8 +138,8 @@ export const card = style({ }, "@media": { [bp.sm]: { - paddingBlock: vars.space.lg, - paddingInline: vars.space.xl, + paddingBlock: vars.space.md, + paddingInline: vars.space.lg, }, }, }); @@ -154,20 +154,19 @@ export const cardLink = style({ border: `1px solid ${vars.color.border}`, borderRadius: vars.radius.lg, paddingBlock: vars.space.md, - paddingInline: vars.space.lg, + paddingInline: vars.space.md, boxShadow: `0 1px 3px ${vars.color.shadow}, 0 1px 2px ${vars.color.shadow}`, - transition: "border-color 0.15s, box-shadow 0.2s, background-color 0.2s, transform 0.15s", + transition: "border-color 0.15s, box-shadow 0.2s, background-color 0.2s", ":hover": { backgroundColor: vars.color.surfaceHover, borderColor: vars.color.primary, boxShadow: `0 4px 12px ${vars.color.shadowStrong}, 0 2px 4px ${vars.color.shadow}`, - transform: "translateY(-2px)", textDecoration: "none", }, "@media": { [bp.sm]: { - paddingBlock: vars.space.lg, - paddingInline: vars.space.xl, + paddingBlock: vars.space.md, + paddingInline: vars.space.lg, }, }, }); @@ -209,20 +208,21 @@ const btnBase = { justifyContent: "center" as const, borderRadius: vars.radius.sm, fontWeight: 500, + letterSpacing: "0.01em", lineHeight: 1.5, cursor: "pointer", fontFamily: vars.font.body, - minBlockSize: "38px", + minBlockSize: "36px", whiteSpace: "nowrap" as const, transition: "background-color 0.15s, opacity 0.15s, box-shadow 0.15s, transform 0.1s", }; export const button = style({ ...btnBase, - paddingBlock: "6px", + paddingBlock: "5px", paddingInline: vars.space.lg, border: "none", - fontSize: "0.8125rem", + fontSize: "0.875rem", backgroundColor: vars.color.primary, color: "#fff", boxShadow: `0 1px 2px ${vars.color.shadow}`, @@ -237,26 +237,27 @@ export const button = style({ export const buttonSecondary = style({ ...btnBase, - paddingBlock: "6px", + paddingBlock: "5px", paddingInline: vars.space.lg, border: `1px solid ${vars.color.border}`, - fontSize: "0.8125rem", + fontSize: "0.875rem", backgroundColor: vars.color.surface, color: vars.color.text, ":hover": { backgroundColor: vars.color.bg, textDecoration: "none", borderColor: vars.color.primary, + boxShadow: `0 1px 3px ${vars.color.shadow}`, }, ":active": { transform: "scale(0.98)" }, }); export const buttonDanger = style({ ...btnBase, - paddingBlock: "6px", + paddingBlock: "5px", paddingInline: vars.space.md, border: "none", - fontSize: "0.8125rem", + fontSize: "0.875rem", backgroundColor: vars.color.danger, color: "#fff", ":hover": { opacity: 0.9 }, @@ -286,11 +287,11 @@ export const labelHint = style({ const inputBase = { boxSizing: "border-box" as const, width: "100%" as const, - paddingBlock: "10px", + paddingBlock: "8px", paddingInline: vars.space.md, borderRadius: vars.radius.sm, border: `1px solid ${vars.color.border}`, - fontSize: "1rem", + fontSize: "0.9375rem", lineHeight: 1.5, color: vars.color.text, backgroundColor: vars.color.surface, @@ -301,7 +302,7 @@ const inputBase = { const inputFocus = { borderColor: vars.color.primary, - boxShadow: `0 0 0 3px ${vars.color.focusRing}`, + boxShadow: `0 0 0 2px ${vars.color.focusRing}`, }; export const input = style({ @@ -439,8 +440,8 @@ export const introText = style({ export const badge = style({ display: "inline-block", paddingBlock: "2px", - paddingInline: vars.space.sm, - borderRadius: vars.radius.sm, + paddingInline: "6px", + borderRadius: "4px", fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.02em", @@ -653,7 +654,7 @@ export const themeToggleBtn = style({ inlineSize: "28px", blockSize: "28px", border: "none", - borderRadius: "6px", + borderRadius: "4px", cursor: "pointer", backgroundColor: "transparent", color: vars.color.textMuted, diff --git a/packages/kanban/src/ui/ui.css.ts b/packages/kanban/src/ui/ui.css.ts index 3784efb..05f729c 100644 --- a/packages/kanban/src/ui/ui.css.ts +++ b/packages/kanban/src/ui/ui.css.ts @@ -118,11 +118,10 @@ export const taskCard = style({ backgroundColor: vars.color.surface, textDecoration: "none", color: vars.color.text, - transition: "border-color 0.15s, box-shadow 0.15s, transform 0.15s", + transition: "border-color 0.15s, box-shadow 0.15s", ":hover": { borderColor: vars.color.primary, boxShadow: `0 2px 8px ${vars.color.shadow}`, - transform: "translateY(-1px)", textDecoration: "none", }, }); -- 2.51.2