mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: unify workbench typography and prepare isolated visual review

Browse Source
This commit is contained in:
Codex
2026-09-12 22:51:58 +02:00
parent 2d1b714ebe
commit c8d276ddc6
64 changed files with 942 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+50 -30
View File
@@ -5,7 +5,7 @@
@tailwind utilities;
/*
* GSD theme — mirrors the Omics Portal design system (Manrope + Fraunces, warm
* Product theme — shares the Omics Portal identity (Manrope, warm
* off-white surfaces, #cb333b red). Tokens are RAW OKLCH triplets (L C H) so the
* Tailwind v3 config can wrap them as `oklch(var(--token) / <alpha-value>)` and
* opacity utilities (bg-primary/80, …) keep working. Dark tokens follow either a
@@ -13,9 +13,14 @@
*/
@layer base {
:root {
--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
--font-heading: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
--font-sans: "Manrope Variable", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
--font-heading: var(--font-sans);
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
--text-page: 1.5rem;
--text-section: 1.25rem;
--text-body: 1rem;
--text-control: 0.875rem;
--text-meta: 0.75rem;
/* Layered elevation, tinted with the foreground hue so depth reads warm on
warm surfaces. Borders mark structure; shadows mark elevation. */
@@ -42,11 +47,11 @@
--destructive: 0.5587 0.1881 23.2;
--destructive-foreground: 0.9918 0.0011 17.2;
--border: 0.9093 0.0035 354.7;
--input: 0.9093 0.0035 354.7;
--input: 0.64 0.008 354.7;
--ring: 0.5587 0.1881 23.2;
--success: 0.7577 0.1581 165.0;
--warning: 0.8523 0.1386 78.9;
--info: 0.7035 0.1128 221.3;
--success: 0.46 0.095 160;
--warning: 0.48 0.09 70;
--info: var(--muted-foreground);
/* Current navigation shares Instrument Red's hue, with lower chroma and
higher lightness so selection reads as a muted location signal. */
--nav-active: 0.9250 0.0520 23.2;
@@ -73,8 +78,8 @@
--card-foreground: 0.9310 0 90;
--popover: 0.2350 0 90;
--popover-foreground: 0.9310 0 90;
--primary: 0.6023 0.1848 20.3;
--primary-foreground: 0.9310 0 90;
--primary: 0.73 0.15 23.2;
--primary-foreground: 0.2178 0.005 23.2;
--primary-hover: 0.6897 0.1779 16.9;
--secondary: 0.2972 0 90;
--secondary-foreground: 0.9310 0 90;
@@ -82,11 +87,13 @@
--muted-foreground: 0.7826 0 90;
--accent: 0.3485 0 90;
--accent-foreground: 0.9310 0 90;
--destructive: 0.6023 0.1848 20.3;
--destructive: 0.73 0.15 23.2;
--destructive-foreground: 0.9310 0 90;
--border: 0.3715 0 90;
--input: 0.3715 0 90;
--input: 0.62 0.008 23.2;
--ring: 0.6897 0.1779 16.9;
--success: 0.78 0.10 160;
--warning: 0.82 0.10 75;
--nav-active: 0.3350 0.0550 20.3;
--nav-active-hover: 0.3750 0.0650 20.3;
--nav-active-foreground: 0.8900 0.0700 20.3;
@@ -141,7 +148,18 @@
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4 {
#root :is(input, textarea)::placeholder {
color: oklch(var(--muted-foreground));
opacity: 1;
}
#root :is(button, input, select, textarea, summary):focus-visible {
outline: 2px solid oklch(var(--ring));
outline-offset: 2px;
}
#root :where(h1, h2, h3, h4, h5, h6),
[data-slot="dialog-content"] :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-heading);
font-optical-sizing: auto;
letter-spacing: -0.015em;
@@ -196,22 +214,21 @@
padding: 0 1rem 0.75rem;
}
/* Standard micro-label: panel headers, nav sections, meta rows. Set in the
mono register so labels/meta read as a distinct typographic layer from the
sans body prose (mono needs less tracking than the sans did). */
/* UI labels use the same family as controls; monospace is for technical data. */
.thot-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-family: var(--font-sans);
font-size: var(--text-meta);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
letter-spacing: normal;
text-transform: none;
color: oklch(var(--muted-foreground));
}
.thot-prose {
color: oklch(var(--foreground));
font-size: 0.9375rem;
line-height: 1.65;
font-size: var(--text-body);
line-height: 1.6;
overflow-wrap: anywhere;
}
.thot-prose > :first-child { margin-top: 0; }
.thot-prose > :last-child { margin-bottom: 0; }
@@ -223,9 +240,10 @@
margin: 1.1em 0 0.5em;
letter-spacing: -0.01em;
}
.thot-prose h1 { font-size: 1.45rem; }
.thot-prose h2 { font-size: 1.2rem; }
.thot-prose h3 { font-size: 1.02rem; }
.thot-prose h1 { font-size: var(--text-page); }
.thot-prose h2 { font-size: var(--text-section); }
.thot-prose h3 { font-size: var(--text-body); }
.thot-prose :where(p, ul, ol, blockquote) { max-width: 75ch; }
.thot-prose ul, .thot-prose ol { margin: 0.6em 0; padding-left: 1.3em; }
.thot-prose li { margin: 0.25em 0; }
.thot-prose a { color: oklch(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
@@ -247,8 +265,10 @@
}
.thot-prose pre code { background: transparent; padding: 0; }
.thot-prose blockquote {
border-left: 2px solid oklch(var(--border));
padding-left: 0.9em;
border: 1px solid oklch(var(--border));
border-radius: var(--radius);
background: oklch(var(--muted) / 0.4);
padding: 0.75em 1em;
color: oklch(var(--muted-foreground));
margin: 0.7em 0;
}
@@ -266,10 +286,10 @@
.thot-prose td { border-top: 1px solid oklch(var(--border) / 0.6); font-variant-numeric: tabular-nums; }
.thot-prose th {
background: oklch(var(--muted));
font-size: 0.72rem;
font-size: var(--text-control);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
letter-spacing: normal;
text-transform: none;
color: oklch(var(--muted-foreground));
}
.thot-activity-prose,
@@ -325,7 +345,7 @@
@layer components {
.thot-database-grid {
--ag-font-family: var(--font-sans);
--ag-font-size: 0.8125rem;
--ag-font-size: var(--text-control);
--ag-background-color: oklch(var(--card));
--ag-foreground-color: oklch(var(--foreground));
--ag-header-background-color: oklch(var(--muted) / 0.72);