gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-09-04 06:35:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(design-system): retune oklch tokens to cozy-pebble palette (#709)

Browse Source 
Apply design audit section 13's proposed chroma/lightness values to
frontend/src/index.css. Dark-theme accents now match the audit swatches
exactly: brand 0.78 0.11 195, success 0.78 0.16 155, warning 0.82 0.14
75, destructive 0.72 0.18 20. Surface hierarchy shifts to a warm pebble
cast (hue 80, chroma 0.003 to 0.01); card anchors to the audit's
0.14 0.005 80 surface swatch; popover bumps to 0.16 to preserve the 4
percent lightness gap against card. Light theme mirrors symmetrically.

NetworkTopologyView keeps the react-flow inline-style escape hatch but
hoists the brand literal into a BRAND_COLOR constant so MiniMap and
EDGE_COLORS share one source of truth.

Also normalize em-dash comment separators to colons across index.css
and drop a duplicated dark-background literal in favor of
var(--background).
This commit is contained in:
Anso
2026-04-20 12:19:25 -04:00
committed by GitHub
parent c7dfde4b79
commit 2b499cb2c9
2 changed files with 81 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NetworkTopologyView.tsx
+3 -2
View File
@@ -130,8 +130,9 @@ const nodeTypes: NodeTypes = {
// React Flow's inline style objects cannot resolve CSS custom properties, // React Flow's inline style objects cannot resolve CSS custom properties,
// so raw oklch values are used here as a necessary escape hatch. // so raw oklch values are used here as a necessary escape hatch.
const BRAND_COLOR = 'oklch(0.78 0.11 195)';
const EDGE_COLORS = [ const EDGE_COLORS = [
'oklch(0.75 0.08 192)', // brand teal BRAND_COLOR,
'oklch(0.70 0.10 150)', // green 'oklch(0.70 0.10 150)', // green
'oklch(0.70 0.10 280)', // purple 'oklch(0.70 0.10 280)', // purple
'oklch(0.70 0.10 30)', // orange 'oklch(0.70 0.10 30)', // orange
@@ -339,7 +340,7 @@ export default function NetworkTopologyView({ onContainerClick }: NetworkTopolog
<MiniMap <MiniMap
className="!bg-card !border-card-border !shadow-card-bevel" className="!bg-card !border-card-border !shadow-card-bevel"
nodeColor={(node) => { nodeColor={(node) => {
if (node.type === 'network') return 'oklch(0.75 0.08 192)'; if (node.type === 'network') return BRAND_COLOR;
return 'oklch(0.50 0 0)'; return 'oklch(0.50 0 0)';
}} }}
maskColor="oklch(0 0 0 / 0.2)" maskColor="oklch(0 0 0 / 0.2)"
frontend/src/index.css
+78 -78
View File
@@ -8,52 +8,52 @@
LIGHT THEME LIGHT THEME
───────────────────────────────────────────────────────────── */ ───────────────────────────────────────────────────────────── */
:root { :root {
--background: oklch(0.97 0 0); --background: oklch(0.97 0.005 80);
--foreground: oklch(0.15 0 0); --foreground: oklch(0.15 0.005 80);
--card: oklch(1 0 0); --card: oklch(1 0.003 80);
--card-foreground: oklch(0.15 0 0); --card-foreground: oklch(0.15 0.005 80);
--popover: oklch(1 0 0 / 0.92); --popover: oklch(1 0.003 80 / 0.92);
--popover-foreground: oklch(0.15 0 0); --popover-foreground: oklch(0.15 0.005 80);
--primary: oklch(0.15 0 0); --primary: oklch(0.15 0.005 80);
--primary-foreground: oklch(1 0 0); --primary-foreground: oklch(1 0.003 80);
--secondary: oklch(0 0 0 / 0.05); --secondary: oklch(0 0 0 / 0.05);
--secondary-foreground: oklch(0.15 0 0); --secondary-foreground: oklch(0.15 0.005 80);
--muted: oklch(0 0 0 / 0.04); --muted: oklch(0 0 0 / 0.04);
--muted-foreground: oklch(0.50 0 0); --muted-foreground: oklch(0.50 0 0);
--accent: oklch(0 0 0 / 0.06); --accent: oklch(0 0 0 / 0.06);
--accent-foreground: oklch(0.15 0 0); --accent-foreground: oklch(0.15 0.005 80);
--destructive: oklch(0.6300 0.1900 23.0300); --destructive: oklch(0.63 0.18 20);
--destructive-foreground: oklch(1 0 0); --destructive-foreground: oklch(1 0.003 80);
--border: oklch(0 0 0 / 0.10); --border: oklch(0 0 0 / 0.10);
--input: oklch(0.97 0 0); --input: oklch(0.97 0.005 80);
--ring: oklch(0.50 0.14 200); --ring: oklch(0.50 0.11 195);
/* Brand - technical cyan, the signature accent */ /* Brand: technical cyan, the signature accent */
--brand: oklch(0.50 0.14 200); --brand: oklch(0.50 0.11 195);
--brand-foreground: oklch(1 0 0); --brand-foreground: oklch(1 0.003 80);
--brand-muted: oklch(0.50 0.14 200 / 0.12); --brand-muted: oklch(0.50 0.11 195 / 0.12);
/* Glass — frosted surface system */ /* Glass: frosted surface system */
--glass: oklch(1 0 0); --glass: oklch(1 0.003 80);
--glass-border: oklch(0 0 0 / 0.10); --glass-border: oklch(0 0 0 / 0.10);
--glass-highlight: oklch(0 0 0 / 0.06); --glass-highlight: oklch(0 0 0 / 0.06);
/* Semantic status colors */ /* Semantic status colors */
--success: oklch(0.65 0.17 155); --success: oklch(0.65 0.16 155);
--success-foreground: oklch(1 0 0); --success-foreground: oklch(1 0.003 80);
--success-muted: oklch(0.65 0.17 155 / 0.12); --success-muted: oklch(0.65 0.16 155 / 0.12);
--warning: oklch(0.75 0.16 60); --warning: oklch(0.75 0.14 75);
--warning-foreground: oklch(0.20 0 0); --warning-foreground: oklch(0.20 0 0);
--warning-muted: oklch(0.75 0.16 60 / 0.12); --warning-muted: oklch(0.75 0.14 75 / 0.12);
--info: oklch(0.62 0.14 250); --info: oklch(0.62 0.14 250);
--info-foreground: oklch(1 0 0); --info-foreground: oklch(1 0 0);
--info-muted: oklch(0.62 0.14 250 / 0.12); --info-muted: oklch(0.62 0.14 250 / 0.12);
--update: oklch(0.62 0.22 320); --update: oklch(0.62 0.22 320);
--update-foreground: oklch(1 0 0); --update-foreground: oklch(1 0 0);
--update-muted: oklch(0.62 0.22 320 / 0.12); --update-muted: oklch(0.62 0.22 320 / 0.12);
--destructive-muted: oklch(0.63 0.19 23 / 0.12); --destructive-muted: oklch(0.63 0.18 20 / 0.12);
/* Charts — cyan leads as the primary data color, amber for peaks, rose for errors */ /* Charts: cyan leads as the primary data color, amber for peaks, rose for errors */
--chart-1: var(--brand); --chart-1: var(--brand);
--chart-2: var(--warning); --chart-2: var(--warning);
--chart-3: var(--destructive); --chart-3: var(--destructive);
@@ -65,27 +65,27 @@
--data-peak: var(--warning); --data-peak: var(--warning);
/* Sidebar */ /* Sidebar */
--sidebar: oklch(0.98 0 0 / 0.80); --sidebar: oklch(0.98 0.005 80 / 0.80);
--sidebar-foreground: oklch(0.15 0 0); --sidebar-foreground: oklch(0.15 0.005 80);
--sidebar-primary: oklch(0.15 0 0); --sidebar-primary: oklch(0.15 0.005 80);
--sidebar-primary-foreground: oklch(1 0 0); --sidebar-primary-foreground: oklch(1 0.003 80);
--sidebar-accent: oklch(0 0 0 / 0.06); --sidebar-accent: oklch(0 0 0 / 0.06);
--sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.15 0.005 80);
--sidebar-border: oklch(0 0 0 / 0.10); --sidebar-border: oklch(0 0 0 / 0.10);
--sidebar-ring: oklch(0.50 0.14 200); --sidebar-ring: oklch(0.50 0.11 195);
/* Stat hierarchy — text brightness tiers */ /* Stat hierarchy: text brightness tiers */
--stat-value: oklch(0.15 0 0); --stat-value: oklch(0.15 0 0);
--stat-title: oklch(0.40 0 0); --stat-title: oklch(0.40 0 0);
--stat-subtitle: oklch(0.50 0 0); --stat-subtitle: oklch(0.50 0 0);
--stat-icon: oklch(0.60 0 0); --stat-icon: oklch(0.60 0 0);
/* Card borders — directional lighting */ /* Card borders: directional lighting */
--card-border: oklch(0 0 0 / 0.08); --card-border: oklch(0 0 0 / 0.08);
--card-border-top: oklch(0 0 0 / 0.12); --card-border-top: oklch(0 0 0 / 0.12);
--card-border-hover: oklch(0 0 0 / 0.15); --card-border-hover: oklch(0 0 0 / 0.15);
/* Label palette — ten raw hues preserved for existing assignments */ /* Label palette: ten raw hues preserved for existing assignments */
--label-teal: oklch(0.55 0.12 192); --label-teal: oklch(0.55 0.12 192);
--label-teal-bg: oklch(0.55 0.12 192 / 0.12); --label-teal-bg: oklch(0.55 0.12 192 / 0.12);
--label-blue: oklch(0.55 0.14 250); --label-blue: oklch(0.55 0.14 250);
@@ -107,7 +107,7 @@
--label-slate: oklch(0.50 0.01 250); --label-slate: oklch(0.50 0.01 250);
--label-slate-bg: oklch(0.50 0.01 250 / 0.12); --label-slate-bg: oklch(0.50 0.01 250 / 0.12);
/* Semantic label roles — new labels should consume these */ /* Semantic label roles: new labels should consume these */
--label-env: var(--label-teal); --label-env: var(--label-teal);
--label-env-bg: var(--label-teal-bg); --label-env-bg: var(--label-teal-bg);
--label-role: var(--label-blue); --label-role: var(--label-blue);
@@ -132,7 +132,7 @@
/* Shape */ /* Shape */
--radius: 0.5rem; --radius: 0.5rem;
/* Shadows — subtle, glass depth comes from blur not shadow */ /* Shadows: subtle, glass depth comes from blur not shadow */
--shadow-x: 0px; --shadow-x: 0px;
--shadow-y: 1px; --shadow-y: 1px;
--shadow-blur: 2px; --shadow-blur: 2px;
@@ -148,7 +148,7 @@
--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10); --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.25); --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.25);
/* Material simulation — inherent depth */ /* Material simulation: inherent depth */
--card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.04), 0 1px 2px 0 oklch(0 0 0 / 0.05); --card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.04), 0 1px 2px 0 oklch(0 0 0 / 0.05);
--button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.04); --button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.04);
--chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.45); --chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.45);
@@ -184,52 +184,52 @@
DARK THEME DARK THEME
───────────────────────────────────────────────────────────── */ ───────────────────────────────────────────────────────────── */
.dark { .dark {
--background: oklch(0.08 0 0); --background: oklch(0.08 0.003 80);
--foreground: oklch(0.92 0 0); --foreground: oklch(0.94 0.01 80);
--card: oklch(0.12 0 0); --card: oklch(0.14 0.005 80);
--card-foreground: oklch(0.92 0 0); --card-foreground: oklch(0.94 0.01 80);
--popover: oklch(0.14 0 0 / 0.82); --popover: oklch(0.16 0.005 80 / 0.82);
--popover-foreground: oklch(0.92 0 0); --popover-foreground: oklch(0.94 0.01 80);
--primary: oklch(1 0 0); --primary: oklch(0.98 0.01 80);
--primary-foreground: oklch(0.10 0 0); --primary-foreground: oklch(0.10 0 0);
--secondary: oklch(0.12 0 0); --secondary: oklch(0.14 0.005 80);
--secondary-foreground: oklch(0.92 0 0); --secondary-foreground: oklch(0.94 0.01 80);
--muted: oklch(0.12 0 0); --muted: oklch(0.14 0.005 80);
--muted-foreground: oklch(0.45 0 0); --muted-foreground: oklch(0.45 0 0);
--accent: oklch(1 0 0 / 0.06); --accent: oklch(1 0 0 / 0.06);
--accent-foreground: oklch(0.92 0 0); --accent-foreground: oklch(0.94 0.01 80);
--destructive: oklch(0.6900 0.2000 23.9100); --destructive: oklch(0.72 0.18 20);
--destructive-foreground: oklch(0.92 0 0); --destructive-foreground: oklch(0.94 0.01 80);
--border: oklch(1 0 0 / 0.06); --border: oklch(1 0 0 / 0.06);
--input: oklch(0.12 0 0); --input: oklch(0.14 0.005 80);
--ring: oklch(0.75 0.08 192); --ring: oklch(0.78 0.11 195);
/* Brand - desaturated teal accent */ /* Brand: desaturated teal accent */
--brand: oklch(0.75 0.08 192); --brand: oklch(0.78 0.11 195);
--brand-foreground: oklch(0.05 0 0); --brand-foreground: oklch(0.05 0 0);
--brand-muted: oklch(0.75 0.08 192 / 0.12); --brand-muted: oklch(0.78 0.11 195 / 0.12);
/* Glass — solid surface system (no blur on static surfaces) */ /* Glass: solid surface system (no blur on static surfaces) */
--glass: oklch(0.12 0 0); --glass: oklch(0.14 0.005 80);
--glass-border: oklch(1 0 0 / 0.06); --glass-border: oklch(1 0 0 / 0.06);
--glass-highlight: oklch(1 0 0 / 0.06); --glass-highlight: oklch(1 0 0 / 0.06);
/* Semantic status colors */ /* Semantic status colors */
--success: oklch(0.72 0.17 155); --success: oklch(0.78 0.16 155);
--success-foreground: oklch(0.10 0 0); --success-foreground: oklch(0.10 0 0);
--success-muted: oklch(0.72 0.17 155 / 0.15); --success-muted: oklch(0.78 0.16 155 / 0.15);
--warning: oklch(0.80 0.16 60); --warning: oklch(0.82 0.14 75);
--warning-foreground: oklch(0.10 0 0); --warning-foreground: oklch(0.10 0 0);
--warning-muted: oklch(0.80 0.16 60 / 0.15); --warning-muted: oklch(0.82 0.14 75 / 0.15);
--info: oklch(0.70 0.14 250); --info: oklch(0.70 0.14 250);
--info-foreground: oklch(0.10 0 0); --info-foreground: oklch(0.10 0 0);
--info-muted: oklch(0.70 0.14 250 / 0.15); --info-muted: oklch(0.70 0.14 250 / 0.15);
--update: oklch(0.72 0.20 320); --update: oklch(0.72 0.20 320);
--update-foreground: oklch(0.10 0 0); --update-foreground: oklch(0.10 0 0);
--update-muted: oklch(0.72 0.20 320 / 0.15); --update-muted: oklch(0.72 0.20 320 / 0.15);
--destructive-muted: oklch(0.69 0.20 24 / 0.15); --destructive-muted: oklch(0.72 0.18 20 / 0.15);
/* Charts — cyan leads as the primary data color, amber for peaks, rose for errors */ /* Charts: cyan leads as the primary data color, amber for peaks, rose for errors */
--chart-1: var(--brand); --chart-1: var(--brand);
--chart-2: var(--warning); --chart-2: var(--warning);
--chart-3: var(--destructive); --chart-3: var(--destructive);
@@ -241,27 +241,27 @@
--data-peak: var(--warning); --data-peak: var(--warning);
/* Sidebar */ /* Sidebar */
--sidebar: oklch(0.08 0 0 / 0.80); --sidebar: oklch(0.08 0.003 80 / 0.80);
--sidebar-foreground: oklch(0.92 0 0); --sidebar-foreground: oklch(0.94 0.01 80);
--sidebar-primary: oklch(1 0 0); --sidebar-primary: oklch(0.98 0.01 80);
--sidebar-primary-foreground: oklch(0.10 0 0); --sidebar-primary-foreground: oklch(0.10 0 0);
--sidebar-accent: oklch(1 0 0 / 0.07); --sidebar-accent: oklch(1 0 0 / 0.07);
--sidebar-accent-foreground: oklch(0.92 0 0); --sidebar-accent-foreground: oklch(0.94 0.01 80);
--sidebar-border: oklch(1 0 0 / 0.06); --sidebar-border: oklch(1 0 0 / 0.06);
--sidebar-ring: oklch(0.75 0.08 192); --sidebar-ring: oklch(0.78 0.11 195);
/* Stat hierarchy — text brightness tiers */ /* Stat hierarchy: text brightness tiers */
--stat-value: oklch(0.93 0 0); --stat-value: oklch(0.93 0 0);
--stat-title: oklch(0.55 0 0); --stat-title: oklch(0.55 0 0);
--stat-subtitle: oklch(0.45 0 0); --stat-subtitle: oklch(0.45 0 0);
--stat-icon: oklch(0.35 0 0); --stat-icon: oklch(0.35 0 0);
/* Card borders — directional lighting */ /* Card borders: directional lighting */
--card-border: oklch(1 0 0 / 0.07); --card-border: oklch(1 0 0 / 0.07);
--card-border-top: oklch(1 0 0 / 0.14); --card-border-top: oklch(1 0 0 / 0.14);
--card-border-hover: oklch(1 0 0 / 0.14); --card-border-hover: oklch(1 0 0 / 0.14);
/* Label palette — ten raw hues preserved for existing assignments */ /* Label palette: ten raw hues preserved for existing assignments */
--label-teal: oklch(0.75 0.10 192); --label-teal: oklch(0.75 0.10 192);
--label-teal-bg: oklch(0.75 0.10 192 / 0.15); --label-teal-bg: oklch(0.75 0.10 192 / 0.15);
--label-blue: oklch(0.72 0.12 250); --label-blue: oklch(0.72 0.12 250);
@@ -283,7 +283,7 @@
--label-slate: oklch(0.65 0.01 250); --label-slate: oklch(0.65 0.01 250);
--label-slate-bg: oklch(0.65 0.01 250 / 0.15); --label-slate-bg: oklch(0.65 0.01 250 / 0.15);
/* Semantic label roles — new labels should consume these */ /* Semantic label roles: new labels should consume these */
--label-env: var(--label-teal); --label-env: var(--label-teal);
--label-env-bg: var(--label-teal-bg); --label-env-bg: var(--label-teal-bg);
--label-role: var(--label-blue); --label-role: var(--label-blue);
@@ -308,12 +308,12 @@
/* Shape */ /* Shape */
--radius: 0.5rem; --radius: 0.5rem;
/* Material simulation — inherent depth */ /* Material simulation: inherent depth */
--card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.05); --card-bevel: inset 0 1px 0 0 oklch(1 0 0 / 0.05);
--button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.06); --button-inner-glow: inset 0 1px 0 0 oklch(1 0 0 / 0.06);
--chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.08); --chrome-top-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.08);
/* Shadows — near-zero, depth comes from surface tone */ /* Shadows: near-zero, depth comes from surface tone */
--shadow-x: 0px; --shadow-x: 0px;
--shadow-y: 1px; --shadow-y: 1px;
--shadow-blur: 2px; --shadow-blur: 2px;
@@ -469,7 +469,7 @@ body.density-compact {
oklch(0.25 0.05 250 / 0.15), oklch(0.25 0.05 250 / 0.15),
transparent transparent
), ),
oklch(0.08 0 0); var(--background);
} }
/* ───────────────────────────────────────────────────────────── /* ─────────────────────────────────────────────────────────────
@@ -533,7 +533,7 @@ body {
} }
.glass-float { .glass-float {
background: oklch(0.12 0 0 / 0.82); background: oklch(0.14 0.005 80 / 0.82);
backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
-webkit-backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
border: 1px solid oklch(1 0 0 / 0.07); border: 1px solid oklch(1 0 0 / 0.07);