mirror of
https://github.com/nexu-io/open-design.git
synced 2026-09-20 06:15:06 +08:00
Joey-nexu
f1a0b60c6c
* chore: unify product name display to OpenDesign repo-wide Rename the user-facing product name from "Open Design" to "OpenDesign" across documentation, web/desktop UI strings, i18n locales, prompts, plugin/skill/design-system content, changelogs, and specs, matching the landing-page rename already in flight. Deliberately excluded so installed-app identity stays untouched: - packages/release PRODUCT_NAME and everything derived from it (app bundle names, installer/registry identity, updater feeds) - tools/pack, tools/release, apps/packaged, landing page (PR #6983) - mocks/ recorded traces and LICENSE - test fixtures and comments that encode real on-disk install paths (Open Design.app, Program Files\Open Design, AppData paths) Validated with pnpm guard, pnpm typecheck, and targeted web/desktop/host test runs over the renamed strings. * fix(web): keep two-letter author monogram for CamelCase brand names authorInitials split words on whitespace only, so the renamed single-token author name "OpenDesign" produced a one-letter monogram. Treat lower-to-upper CamelCase boundaries as word breaks so the avatar fallback stays "OD". * fix(release): restore spaced Windows source artifact names in win.ps1 tools/pack still derives builder outputs from the unchanged PRODUCT_NAME ("Open Design"), so the asset script must look for the spaced filenames. Matches the mac/mac-intel/linux asset scripts, which were already kept on the original names. --------- Co-authored-by: Joey <236967869+joeylee12629-star@users.noreply.github.com>
150 lines
6.6 KiB
HTML
150 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>GitHub - component kit</title>
|
|
<style>
|
|
:root {
|
|
--accent: #0969da;
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
|
--accent-hover: #0550ae;
|
|
--accent-on: #ffffff;
|
|
--bg: #ffffff;
|
|
--border: #d0d7de;
|
|
--border-soft: #d8dee4;
|
|
--container-gutter-desktop: 24px;
|
|
--container-gutter-phone: 16px;
|
|
--container-gutter-tablet: 16px;
|
|
--container-max: 1280px;
|
|
--danger: #cf222e;
|
|
--ease-standard: ease-out;
|
|
--elev-flat: none;
|
|
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--fg: #1f2328;
|
|
--fg-2: #1f2328;
|
|
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
|
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
--leading-body: 1.5;
|
|
--leading-tight: 1.25;
|
|
--meta: #656d76;
|
|
--motion-base: 200ms;
|
|
--motion-fast: 80ms;
|
|
--muted: #656d76;
|
|
--radius-lg: 12px;
|
|
--radius-md: 6px;
|
|
--radius-pill: 9999px;
|
|
--radius-sm: 6px;
|
|
--section-y-desktop: 64px;
|
|
--section-y-phone: 32px;
|
|
--section-y-tablet: 48px;
|
|
--space-1: 4px;
|
|
--space-12: 48px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--success: #1a7f37;
|
|
--surface: #f6f8fa;
|
|
--surface-warm: var(--surface);
|
|
--text-2xl: 24px;
|
|
--text-3xl: 28px;
|
|
--text-4xl: 32px;
|
|
--text-base: 14px;
|
|
--text-lg: 16px;
|
|
--text-sm: 14px;
|
|
--text-xl: 20px;
|
|
--text-xs: 12px;
|
|
--tracking-display: -0.01em;
|
|
--warn: #9a6700;
|
|
}
|
|
:root {
|
|
--od-page-bg: #ffffff;
|
|
--od-surface: #f6f8fa;
|
|
--od-text: #1f2328;
|
|
--od-muted: #656d76;
|
|
--od-border: #d0d7de;
|
|
--od-accent: #0969da;
|
|
--od-radius: 6px;
|
|
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: var(--od-page-bg);
|
|
color: var(--od-text);
|
|
font-family: var(--od-font-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
a { color: inherit; }
|
|
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
|
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
|
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
|
h1, h2, h3, p { margin: 0; }
|
|
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
|
h1 { margin-top: 12px; font-size: 64px; }
|
|
h2 { font-size: 40px; }
|
|
h3 { font-size: 22px; }
|
|
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
|
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
|
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
|
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
|
.button.secondary { background: var(--od-surface); }
|
|
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
|
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
|
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
|
.metric, .card { padding: 18px; }
|
|
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
|
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
|
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
|
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
|
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
|
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
|
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section class="hero">
|
|
<div>
|
|
<p class="eyebrow">Developer Tools system</p>
|
|
<h1>GitHub component kit</h1>
|
|
<p class="lead">Bundled OpenDesign package for GitHub, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
|
<div class="actions">
|
|
<a class="button primary" href="#">Primary</a>
|
|
<a class="button secondary" href="#">Default</a>
|
|
<a class="button secondary" href="#">Dashed</a>
|
|
</div>
|
|
</div>
|
|
<article class="panel">
|
|
<p class="eyebrow">Reference module</p>
|
|
<h3>Token-driven surface</h3>
|
|
<div class="metric-grid">
|
|
<div class="metric"><strong>12</strong><span>Components</span></div>
|
|
<div class="metric"><strong>4</strong><span>States</span></div>
|
|
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
|
</div>
|
|
<div class="chip-row">
|
|
<span class="chip">Hover</span>
|
|
<span class="chip">Focus</span>
|
|
<span class="chip">Active</span>
|
|
<span class="chip">Disabled</span>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section class="card-grid" aria-label="Component examples">
|
|
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
|
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
|
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|