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

feat(design-system): adopt cyan as data color, add Instrument Serif, introduce label roles (#674)

Browse Source 
- Repoint --chart-1..3 to brand/warning/destructive so cyan leads as the
  primary data color, amber marks peaks, rose marks errors. --chart-4/5
  fall back to neutral greyscale tones tuned per theme.
- Add --data-line-width (1.25px) and --data-peak tokens so sparklines
  across dashboard, stack table, and readiness views share one source
  of truth instead of re-deriving per component.
- Introduce five semantic label role aliases (env, role, owner, risk,
  custom) mapped to existing hues. Raw ten-hue palette stays in place
  for existing consumers; new labels should consume roles.
- Replace Georgia serif with Instrument Serif and add --font-display
  alias in both :root and .dark; expose font-display via @theme inline
  so Tailwind utility classes can use it. Load the family from Google
  Fonts alongside Geist + Geist Mono.
This commit is contained in:
Anso
2026-04-18 00:23:43 -04:00
committed by GitHub
parent 7d644ce994
commit 7ec189dc35
2 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+1 -1
View File
@@ -8,7 +8,7 @@
<title>Sencho</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Instrument+Serif:ital,wght@0,400;1,400&display=swap" rel="stylesheet" />
<script src="/theme-init.js"></script>
</head>
frontend/src/index.css
+51 -16
View File
@@ -50,12 +50,16 @@
--info-muted: oklch(0.62 0.14 250 / 0.12);
--destructive-muted: oklch(0.63 0.19 23 / 0.12);
/* Charts */
--chart-1: oklch(0.8100 0.1700 75.3500);
--chart-2: oklch(0.5500 0.2200 264.5300);
--chart-3: oklch(0.7200 0 0);
--chart-4: oklch(0.9200 0 0);
--chart-5: oklch(0.5600 0 0);
/* Charts — cyan leads as the primary data color, amber for peaks, rose for errors */
--chart-1: var(--brand);
--chart-2: var(--warning);
--chart-3: var(--destructive);
--chart-4: oklch(0.70 0 0);
--chart-5: oklch(0.45 0 0);
/* Sparkline / data-line styling (centralized) */
--data-line-width: 1.25px;
--data-peak: var(--warning);
/* Sidebar */
--sidebar: oklch(0.98 0 0 / 0.80);
@@ -78,7 +82,7 @@
--card-border-top: oklch(0 0 0 / 0.12);
--card-border-hover: oklch(0 0 0 / 0.15);
/* Label palette */
/* Label palette — ten raw hues preserved for existing assignments */
--label-teal: oklch(0.55 0.12 192);
--label-teal-bg: oklch(0.55 0.12 192 / 0.12);
--label-blue: oklch(0.55 0.14 250);
@@ -100,13 +104,26 @@
--label-slate: oklch(0.50 0.01 250);
--label-slate-bg: oklch(0.50 0.01 250 / 0.12);
/* Semantic label roles — new labels should consume these */
--label-env: var(--label-teal);
--label-env-bg: var(--label-teal-bg);
--label-role: var(--label-blue);
--label-role-bg: var(--label-blue-bg);
--label-owner: var(--label-green);
--label-owner-bg: var(--label-green-bg);
--label-risk: var(--label-rose);
--label-risk-bg: var(--label-rose-bg);
--label-custom: var(--label-amber);
--label-custom-bg: var(--label-amber-bg);
/* Chart grid & axis */
--chart-grid: oklch(0 0 0 / 0.06);
--chart-tick: oklch(0 0 0 / 0.45);
/* Typography */
--font-sans: 'Geist', sans-serif;
--font-serif: Georgia, serif;
--font-serif: 'Instrument Serif', Georgia, serif;
--font-display: 'Instrument Serif', Georgia, serif;
--font-mono: 'Geist Mono', monospace;
/* Shape */
@@ -197,12 +214,16 @@
--info-muted: oklch(0.70 0.14 250 / 0.15);
--destructive-muted: oklch(0.69 0.20 24 / 0.15);
/* Charts — monochrome blue/teal */
--chart-1: oklch(0.72 0.08 220);
--chart-2: oklch(0.65 0.08 220);
--chart-3: oklch(0.56 0 0);
--chart-4: oklch(0.44 0 0);
--chart-5: oklch(0.92 0 0);
/* Charts — cyan leads as the primary data color, amber for peaks, rose for errors */
--chart-1: var(--brand);
--chart-2: var(--warning);
--chart-3: var(--destructive);
--chart-4: oklch(0.55 0 0);
--chart-5: oklch(0.80 0 0);
/* Sparkline / data-line styling (centralized) */
--data-line-width: 1.25px;
--data-peak: var(--warning);
/* Sidebar */
--sidebar: oklch(0.08 0 0 / 0.80);
@@ -225,7 +246,7 @@
--card-border-top: oklch(1 0 0 / 0.14);
--card-border-hover: oklch(1 0 0 / 0.14);
/* Label palette */
/* Label palette — ten raw hues preserved for existing assignments */
--label-teal: oklch(0.75 0.10 192);
--label-teal-bg: oklch(0.75 0.10 192 / 0.15);
--label-blue: oklch(0.72 0.12 250);
@@ -247,13 +268,26 @@
--label-slate: oklch(0.65 0.01 250);
--label-slate-bg: oklch(0.65 0.01 250 / 0.15);
/* Semantic label roles — new labels should consume these */
--label-env: var(--label-teal);
--label-env-bg: var(--label-teal-bg);
--label-role: var(--label-blue);
--label-role-bg: var(--label-blue-bg);
--label-owner: var(--label-green);
--label-owner-bg: var(--label-green-bg);
--label-risk: var(--label-rose);
--label-risk-bg: var(--label-rose-bg);
--label-custom: var(--label-amber);
--label-custom-bg: var(--label-amber-bg);
/* Chart grid & axis */
--chart-grid: oklch(1 0 0 / 0.05);
--chart-tick: oklch(1 0 0 / 0.40);
/* Typography */
--font-sans: 'Geist', sans-serif;
--font-serif: Georgia, serif;
--font-serif: 'Instrument Serif', Georgia, serif;
--font-display: 'Instrument Serif', Georgia, serif;
--font-mono: 'Geist Mono', monospace;
/* Shape */
@@ -354,6 +388,7 @@
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--font-display: var(--font-display);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);