mirror of
https://github.com/superdesigndev/treg.git
synced 2026-10-02 03:24:35 +08:00
Merge remote-tracking branch 'origin/main' into codex/fix-routed-overflow-planning
This commit is contained in:
shehjad-dev
@@ -85,20 +85,20 @@ Use fluid layout instead of copying Figma's absolute coordinates. Set `min-width
|
||||
| --- | --- | --- | --- |
|
||||
| Page title | Geist Pixel | 22 / 27.5px | 400 |
|
||||
| Short introduction, such as the Try it out intro | Geist Pixel | 16 / 22px | 400 |
|
||||
| Module title | Google Sans Flex | 16 / 24px | 500 |
|
||||
| Body copy and form instructions | Google Sans Flex | 14 / 21px | 400; key field labels 600 |
|
||||
| Navigation and selectors | Google Sans Flex | 13 / 19.5px | 400-600, according to state |
|
||||
| Supporting copy | Google Sans Flex | 12.5 / 19.375px | 400 |
|
||||
| Example card label | Inter | 12.5 / 19.375px | 400 |
|
||||
| Example task copy | Inter | 13 / 20.15px | 600 |
|
||||
| Module title | System UI font | 16 / 24px | 500 |
|
||||
| Body copy and form instructions | System UI font | 14 / 21px | 400; key field labels 600 |
|
||||
| Navigation and selectors | System UI font | 13 / 19.5px | 400-600, according to state |
|
||||
| Supporting copy | System UI font | 12.5 / 19.375px | 400 |
|
||||
| Example card label | System UI font | 12.5 / 19.375px | 400 |
|
||||
| Example task copy | System UI font | 13 / 20.15px | 600 |
|
||||
| Commands, tokens, and code | DM Mono | 12 / 18.6px | 400 |
|
||||
| Balance values and step numbers | DM Mono | 12 / 18px | 500 |
|
||||
|
||||
Body copy falls back to Inter and system sans-serif; code falls back to system monospace. If Geist Pixel is unavailable, fall back to mono without blocking the page. Chinese content needs a system font fallback with complete glyph coverage; do not force it into a pixel font with missing glyphs.
|
||||
Interface text uses the operating system's UI font (`--sans`: SF Pro on Apple platforms, Segoe UI on Windows, Roboto on Android), as ChatGPT's product does. It downloads nothing, so text is final from the first paint and never reflows when a web font arrives; the brand is carried by Geist Pixel titles and DM Mono figures, not by body text. Those two faces are the only web fonts: pinned `@fontsource` npm packages (OFL-1.1), bundled same-origin with the Dashboard. Do not add a body web font without a brand reason strong enough to pay for its download and swap. Code falls back to system monospace. If Geist Pixel is unavailable, fall back to mono without blocking the page. Chinese content needs a system font fallback with complete glyph coverage; do not force it into a pixel font with missing glyphs.
|
||||
|
||||
Preserve DM Mono for balances as a treg detail instead of adopting Vercel's rule of using Sans for every financial figure. Use tabular numerals for comparisons, with consistent units and precision.
|
||||
|
||||
The wordmark target is Figma's Google Sans Flex at 15px / 500. The current prototype's `.brand` still inherits an earlier mono declaration. This is a known discrepancy, not a second brand typography rule.
|
||||
The wordmark target is the system UI font at 15px / 500 (Figma used Google Sans Flex). The current prototype's `.brand` still inherits an earlier mono declaration. This is a known discrepancy, not a second brand typography rule.
|
||||
|
||||
## 6. Color and themes
|
||||
|
||||
|
||||
@@ -279,8 +279,9 @@ user. On narrow screens navigation scrolls in a second row; team switching and o
|
||||
remain available. The public catalog and logged-out landing retain their separate shells.
|
||||
|
||||
The authenticated wrapper's `.redesign` class scopes `media/redesign/dashboard.css`, served through
|
||||
the existing `/media` mount. It uses Google Sans Flex for interface text, Geist Pixel for page titles,
|
||||
and DM Mono for commands and balances, with light and dark semantic colors. Getting started uses
|
||||
the existing `/media` mount. It uses the system UI font for interface text, Geist Pixel for page titles,
|
||||
and DM Mono for commands and balances (the only two web fonts, bundled from pinned `@fontsource`
|
||||
packages; see `design.md`), with light and dark semantic colors. Getting started uses
|
||||
an approximately 1080px centered column, a split agent-preview/setup card, image-backed prompt cards,
|
||||
and the existing optional Build on treg and manual setup flows. On mobile the setup card and prompt
|
||||
grid stack. Images are copied from the pinned designer repository; provenance is in
|
||||
|
||||
@@ -7,9 +7,6 @@
|
||||
<!-- The dashboard is an authenticated app: every view needs a session and supports shared deep links. Nothing here is indexable, and a crawler that got in would index a sign-in prompt. -->
|
||||
<meta name="robots" content="noindex, follow"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
|
||||
<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=Google+Sans+Flex:opsz,wght@6..144,400..700&family=Geist+Pixel&family=DM+Mono:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;450;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
|
||||
|
||||
Generated
+20
@@ -6,6 +6,8 @@
|
||||
"": {
|
||||
"name": "treg-dashboard",
|
||||
"dependencies": {
|
||||
"@fontsource/dm-mono": "5.3.0",
|
||||
"@fontsource/geist-pixel": "5.3.0",
|
||||
"matter-js": "0.20.0",
|
||||
"vue": "3.5.41"
|
||||
},
|
||||
@@ -69,6 +71,24 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/dm-mono": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/dm-mono/-/dm-mono-5.3.0.tgz",
|
||||
"integrity": "sha512-OINjI8C1S/wpchhQxl7njZdMn4+hnDCpQ4YtvvOpKNARo+0J8O1x1IcrChxNjHOhfVv1by8C/FQoy3hXK+C1Ug==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/geist-pixel": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/geist-pixel/-/geist-pixel-5.3.0.tgz",
|
||||
"integrity": "sha512-lno6MaxiPlE8ex9T8GMXvU9ZzGBdt1GSQ7ub00RMrhd7SUs9Qy/L6f3sLwzs1F7YcwAZiIa8pxW5dIqZz3zgCg==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
"predev": "node scripts/copy-runtime.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/dm-mono": "5.3.0",
|
||||
"@fontsource/geist-pixel": "5.3.0",
|
||||
"matter-js": "0.20.0",
|
||||
"vue": "3.5.41"
|
||||
},
|
||||
|
||||
@@ -33,11 +33,11 @@ export default { components: { BrandMark }, setup: useDashboard }
|
||||
.lnav-brand{display:flex;align-items:center;gap:9px;font-family:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;font-weight:600;font-size:15px;color:#1a1a1a;text-decoration:none}
|
||||
.lnav-brand .brand-mark{width:28px;height:28px;border-radius:8px}
|
||||
.lnav-links{margin-left:auto;display:flex;align-items:center;gap:28px}
|
||||
.lnav-links a{font-family:"Suisse Intl","Inter","Segoe UI",system-ui,sans-serif;font-size:13.5px;font-weight:500;color:#7c7c7c;text-decoration:none;cursor:pointer;white-space:nowrap}
|
||||
.lnav-links a{font-family:var(--sans);font-size:13.5px;font-weight:500;color:#7c7c7c;text-decoration:none;cursor:pointer;white-space:nowrap}
|
||||
.lnav-links a:hover,.lnav-links a.on{color:#1a1a1a}
|
||||
.lnav-links a.ico{display:inline-flex;align-items:center;gap:6px}
|
||||
.lnav-links a.ico svg{width:15px;height:15px;display:block}
|
||||
.lnav-links .lnav-candy{display:inline-block;font-family:"Suisse Intl","Inter","Segoe UI",system-ui,sans-serif;font-weight:550;letter-spacing:.01em;
|
||||
.lnav-links .lnav-candy{display:inline-block;font-family:var(--sans);font-weight:550;letter-spacing:.01em;
|
||||
color:#f8f8f7;background:#1a1a1a;border:0;border-radius:999px;padding:8px 18px;font-size:12.5px;cursor:pointer;
|
||||
box-shadow:0 1px 2px #00000014;transition:box-shadow .24s cubic-bezier(.2,.72,.25,1),transform .12s cubic-bezier(.22,1,.36,1)}
|
||||
.lnav-links .lnav-candy:hover{color:#f8f8f7;transform:translateY(-1px);
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
// The two brand faces, from pinned npm packages (OFL-1.1) and bundled same-origin: Geist Pixel for
|
||||
// page titles, DM Mono for figures and code. Body text uses the system font (DESIGN.md).
|
||||
import '@fontsource/geist-pixel/latin-400.css'
|
||||
import '@fontsource/dm-mono/latin-400.css'
|
||||
import '@fontsource/dm-mono/latin-500.css'
|
||||
import '@fontsource/dm-mono/latin-400-italic.css'
|
||||
import './styles/base.css'
|
||||
import '../../src/treg/web/media/redesign/dashboard.css'
|
||||
|
||||
|
||||
@@ -399,7 +399,7 @@ html.sp-lock,html.sp-lock body{overflow:hidden;overscroll-behavior:none}
|
||||
--l-shadow-md:0 1px 2px -1px #0000000a,0 4px 6px -1px #0000000f;
|
||||
--l-shadow-lg:0 1px 2px -1px #0000000a,0 4px 6px -1px #0000000f,0 8px 16px #0000000a;--l-ease:cubic-bezier(.2,.72,.25,1);
|
||||
position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;overflow:hidden;padding:88px 20px 0;box-sizing:border-box;
|
||||
min-height:520px;background:var(--l-bg);color:var(--l-ink);font-family:"Suisse Intl","Inter","Segoe UI",system-ui,sans-serif}
|
||||
min-height:520px;background:var(--l-bg);color:var(--l-ink);font-family:var(--sans)}
|
||||
/* The landing hero's soft green light, under its glyph field. */
|
||||
.sp::before{content:"";position:absolute;inset:0 0 auto;height:75%;pointer-events:none;z-index:0;
|
||||
background:radial-gradient(ellipse at 50% 20%,#dce8d585,transparent 65%)}
|
||||
|
||||
@@ -568,7 +568,6 @@
|
||||
--accent:#19D0E8; --onAccent:#06282e;
|
||||
--green:#A6EE98; --amber:#d8d2c2; --teal:#19D0E8; --red:#f08a7a;
|
||||
--mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
|
||||
--sans:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
|
||||
--display:"Geist Pixel",var(--mono);
|
||||
}
|
||||
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
|
||||
@@ -638,7 +637,9 @@ th{background:rgba(0,0,0,.25)}
|
||||
--ease-out is reserved for transforms. Both are far quicker than they look. */
|
||||
--ease:cubic-bezier(.2,.72,.25,1); --ease-out:cubic-bezier(.22,1,.36,1);
|
||||
--r:15px; --rb:10px;
|
||||
--sans:"Suisse Intl","Inter","Segoe UI",system-ui,sans-serif;
|
||||
/* The system UI font: nothing to download, so text is final from the first paint. The brand
|
||||
lives in Geist Pixel titles and DM Mono figures (DESIGN.md). CJK falls through to the OS. */
|
||||
--sans:ui-sans-serif,-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
||||
}
|
||||
[data-theme="light"]{
|
||||
--bg:#f4f4f1; --surface:#fff; --panel:#fafaf9; --panel2:#f0f0ee;
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
--ink:#1a1a1a; --muted:#696969; --muted2:#707070;
|
||||
--line:rgba(0,0,0,.1); --line2:rgba(37,37,34,.2); --hover:rgba(0,0,0,.04);
|
||||
--accent:#1a1a1a; --onAccent:#fff; --inverse:#1a1a1a; --inverse-ink:#fff;
|
||||
--sans:"Google Sans Flex","Inter",system-ui,sans-serif;
|
||||
--mono:"DM Mono",ui-monospace,monospace;
|
||||
--display:"Geist Pixel",var(--mono);
|
||||
min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--sans);
|
||||
@@ -130,10 +129,10 @@ body:has(.redesign)::before { display:none; }
|
||||
.rd-start .try-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
|
||||
.rd-start .try-card { display:flex; flex-direction:column; min-width:0; padding:16px; border:1px solid var(--line); border-radius:20px; background:var(--panel2); transition:border-color .15s,background .15s; }
|
||||
.rd-start .try-card:hover { border-color:var(--line2); background:var(--surface); }
|
||||
.rd-start .try-cat { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; color:var(--ink); font:400 12.5px/19px Inter,var(--sans); letter-spacing:0; text-transform:none; }
|
||||
.rd-start .try-cat { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; color:var(--ink); font:400 12.5px/19px var(--sans); letter-spacing:0; text-transform:none; }
|
||||
[data-theme="dark"] .rd-start .try-ico { filter:brightness(0) invert(1); }
|
||||
.rd-start .try-copy { flex:none; font:11px/16.5px var(--sans); color:var(--muted); }
|
||||
.rd-start .try-txt { display:block; padding-top:10px; margin:0; font:600 13px/20.15px Inter,var(--sans); }
|
||||
.rd-start .try-txt { display:block; padding-top:10px; margin:0; font:600 13px/20.15px var(--sans); }
|
||||
.rd-start .oauth-div { margin:28px 0 24px; font:12px/18px var(--sans); white-space:normal; }
|
||||
.rd-start .oauth-div span { min-width:0; text-align:center; }
|
||||
.rd-start .oauth-grp { margin-bottom:12px; font:600 12px/18px var(--sans); }
|
||||
|
||||
Reference in New Issue
Block a user