dejanandClaude Opus 5
aa86dfe44d
Zwei Korrekturen aus dem Review. 1. Die Seitenleiste zeigte die komplette Software-Navigation nach. Falsch: Kontakte, Leads, Pipelines, Postfach, Termine und Einstellungen stehen dort bereits, der Prototyp verdoppelt sie nur. Jetzt stehen in der Leiste ausschließlich unsere beiden Features — Dashboard (eigenes Feature, hier nicht enthalten) und Analytics — plus die Bausteingalerie im sekundären Bereich, die zum Prototyp und nicht zum Produkt gehört. 2. Die Schrift stimmte nicht. Die Software nutzt Instrument Sans, selbst gehostet als variable Schrift. Der Prototyp lud Inter über next/font, während ui/theme.css für sämtliche Subframe-Typo-Token bereits 'Instrument Sans' verlangte — die Schrift war aber nie geladen und fiel auf die Systemschrift zurück. Ergebnis waren zwei verschiedene Schriften auf einer Seite, keine davon die der Software. Jetzt liegen dieselben woff2-Dateien unter public/fonts/, mit denselben @font-face-Regeln und derselben Alias-Zuordnung für Komponenten, die noch direkt auf Inter verweisen. next/font entfällt. Der Layout-Prüfer lief nach dem Schriftwechsel erneut durch: andere Metrik, andere Textbreiten — weiterhin keine Kollisionen über 6 Seiten × 7 Breiten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
138 lines
4.4 KiB
CSS
138 lines
4.4 KiB
CSS
@import "tailwindcss";
|
||
@import "../ui/theme.css";
|
||
|
||
/*
|
||
* Schrift: Instrument Sans, selbst gehostet — identisch zur Software.
|
||
*
|
||
* Die Dateien stammen aus `apps/web/public/fonts/` von HiveGrid Cloud, damit
|
||
* Schriftschnitt und Metrik exakt übereinstimmen. Variable Schrift (400–700).
|
||
*
|
||
* Warum das nötig war: `ui/theme.css` verlangt für alle Subframe-Typo-Token
|
||
* bereits "Instrument Sans", die Schrift wurde aber nie geladen — und der
|
||
* Fließtext war zusätzlich auf Inter gesetzt. Ergebnis waren zwei verschiedene
|
||
* Schriften auf einer Seite, keine davon die der Software.
|
||
*/
|
||
@font-face {
|
||
font-family: "Instrument Sans";
|
||
font-style: normal;
|
||
font-weight: 400 700;
|
||
font-stretch: 100%;
|
||
font-display: swap;
|
||
src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
|
||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: "Instrument Sans";
|
||
font-style: normal;
|
||
font-weight: 400 700;
|
||
font-stretch: 100%;
|
||
font-display: swap;
|
||
src: url("/fonts/instrument-sans-latin-ext.woff2") format("woff2");
|
||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
|
||
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
|
||
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||
}
|
||
|
||
/*
|
||
* Einige Subframe-Komponenten verweisen noch direkt auf Inter. Damit sie nicht
|
||
* auf die Systemschrift zurückfallen, zeigt der Name auf dieselbe Datei —
|
||
* so hält es die Software auch.
|
||
*/
|
||
@font-face {
|
||
font-family: "Inter";
|
||
font-style: normal;
|
||
font-weight: 400 700;
|
||
font-stretch: 100%;
|
||
font-display: swap;
|
||
src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
|
||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
|
||
@theme {
|
||
--default-font-family: "Instrument Sans", ui-sans-serif, system-ui,
|
||
-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
--font-inter: var(--default-font-family);
|
||
--font-sans: var(--default-font-family);
|
||
}
|
||
|
||
/*
|
||
* HiveGrid Analytics Dashboard
|
||
* ---------------------------------------------------------------
|
||
* Chrome (Sidebar, Karten, Buttons, Tabellen) nutzt die Subframe-
|
||
* Design-Tokens aus ui/theme.css.
|
||
* Die Datenvisualisierung folgt IBM Carbon (siehe docs/DESIGN-SYSTEM.md)
|
||
* und definiert eigene Tokens, damit Charts unabhaengig vom Brand-Theme
|
||
* lesbar und barrierearm bleiben.
|
||
*/
|
||
|
||
:root {
|
||
/* --- Carbon Data-Viz Tokens (Light Theme) --- */
|
||
--dv-grid: #e0e0e0; /* cds-layer-accent-01 - Gridlines */
|
||
--dv-axis: #8d8d8d; /* cds-border-strong-01 - Achsenlinie */
|
||
--dv-text: #161616; /* cds-text-primary - Chart-Titel */
|
||
--dv-text-secondary: #525252;/* cds-text-secondary - Achsenlabels */
|
||
--dv-tooltip-bg: #393939; /* cds-background-inverse */
|
||
--dv-tooltip-fg: #ffffff; /* cds-text-inverse */
|
||
|
||
/* Vertikaler Rhythmus fuer Dashboard-Raster (8px-System) */
|
||
--dv-card-padding: 16px;
|
||
--dv-card-gap: 16px;
|
||
}
|
||
|
||
body {
|
||
background: var(--color-neutral-50, #fafafa);
|
||
color: var(--color-text-neutral-primary);
|
||
font-family: var(--default-font-family);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/*
|
||
* Fokus-Sichtbarkeit.
|
||
* Eine Regel fuer alles Interaktive statt focus:-Klassen an jedem Element.
|
||
* :focus-visible zeigt den Ring nur bei Tastaturbedienung, nicht beim Klick.
|
||
*/
|
||
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
|
||
outline: none;
|
||
box-shadow: var(--shadow-focus, 0 0 0 3px rgb(7 145 240 / 0.4));
|
||
border-radius: var(--radius-sm, 4px);
|
||
}
|
||
|
||
/* Radix-Portale (Dropdowns, Tooltips) ueber den Sticky-Header heben. */
|
||
[data-radix-popper-content-wrapper] {
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
/* Recharts: Fokus-Outline der SVG-Wrapper unterdruecken, Cursor vereinheitlichen. */
|
||
.recharts-wrapper:focus,
|
||
.recharts-surface:focus {
|
||
outline: none;
|
||
}
|
||
.recharts-sector,
|
||
.recharts-rectangle,
|
||
.recharts-dot {
|
||
transition: opacity 140ms ease, filter 140ms ease;
|
||
}
|
||
|
||
/* Scrollbars in Karten dezent halten. */
|
||
.dv-scroll::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
.dv-scroll::-webkit-scrollbar-thumb {
|
||
background: #d4d4d4;
|
||
border-radius: 999px;
|
||
}
|
||
.dv-scroll::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
@media print {
|
||
.dv-no-print {
|
||
display: none !important;
|
||
}
|
||
}
|