Skip to content

fix(site): unify action colors and mobile menu alignment #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PeterGuy326 merged 1 commit into from
Sep 17, 2026
Merged

fix(site): unify action colors and mobile menu alignment #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

### Changed

- 按统一设计语言区分操作与品牌色：下载按钮、选中标签、链接及键盘焦点使用蓝色，保留 AI / 品牌紫色；按钮内容居中、菜单和正文沿用左对齐。同步校验明暗主题的操作前景 / 背景及悬停组合，窄屏下载菜单相对操作行居中，避免文件名被左侧裁切。页面内容、整体布局和下载链接不变（#8）。

- **全站更名 Ordane → RoleWeave**，事实口径统一改取自 `bytefolk/roleweave` 仓库 README 与 v0.1.1 release：
- 标识改用仓库内的 `branding/roleweave/roleweave-icon.svg`（紫 / 蓝 R+W 字母组合），内联进导航并编码为 favicon。
- 主色跟随标识：token `--teal*` 更名 `--brand*`，取值来自 logo 的紫 `#722ed1`（OKLCH `49.4% 0.228 295.6`）；新增 `--azure`（logo 的蓝 `#1677ff`）用于 hero 标题强调。`scripts/contrast-check.js` 的 token 名与配对表同步更新，并为大字号强调新增一对 azure / paper（3:1 门槛），明暗两套共 46 项全部通过。
Expand Down
53 changes: 37 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta name="description" content="RoleWeave 是一个组织和使用 AI 员工的桌面工作台：岗位住在文件夹里，文件树即组织架构。" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Noto+Sans+SC:wght@600;700;800&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
<style>
/* ── tokens: RoleWeave brand violet / azure ────────────────── */
/* ── tokens: brand / AI violet, human actions azure ─────────── */
:root {
--paper: oklch(98.4% 0.003 240);
--band: oklch(96% 0.005 240);
Expand All @@ -24,6 +24,10 @@
--brand-soft: oklch(94.5% 0.035 295.6);
--brand-ink: oklch(99% 0.004 295.6);
--azure: oklch(52% 0.21 259);
/* Same blue family as the logo; paired for readable small controls. */
--action: oklch(52% 0.21 259);
--action-hover:oklch(44% 0.19 259);
--action-ink: oklch(99% 0.004 259);

--amber: oklch(54.5% 0.15 60);
--amber-soft: oklch(93% 0.06 62);
Expand Down Expand Up @@ -52,6 +56,10 @@
--brand-soft: oklch(28% 0.08 295.6);
--brand-ink: oklch(15% 0.03 295.6);
--azure: oklch(74% 0.15 259);
/* Same blue family as the logo; paired for readable small controls. */
--action: oklch(74% 0.15 259);
--action-hover:oklch(82% 0.12 259);
--action-ink: oklch(15% 0.03 259);
--amber: oklch(76% 0.13 62);
--amber-soft: oklch(29% 0.06 62);
--bad: oklch(68% 0.18 25);
Expand All @@ -71,6 +79,10 @@
--brand-soft: oklch(28% 0.08 295.6);
--brand-ink: oklch(15% 0.03 295.6);
--azure: oklch(74% 0.15 259);
/* Same blue family as the logo; paired for readable small controls. */
--action: oklch(74% 0.15 259);
--action-hover:oklch(82% 0.12 259);
--action-ink: oklch(15% 0.03 259);
--amber: oklch(76% 0.13 62);
--amber-soft: oklch(29% 0.06 62);
--bad: oklch(68% 0.18 25);
Expand All @@ -89,6 +101,10 @@
--brand-soft: oklch(94.5% 0.035 295.6);
--brand-ink: oklch(99% 0.004 295.6);
--azure: oklch(52% 0.21 259);
/* Same blue family as the logo; paired for readable small controls. */
--action: oklch(52% 0.21 259);
--action-hover:oklch(44% 0.19 259);
--action-ink: oklch(99% 0.004 259);
--amber: oklch(54.5% 0.15 60);
--amber-soft: oklch(93% 0.06 62);
--bad: oklch(53% 0.19 25);
Expand All @@ -102,8 +118,8 @@
font-family: var(--font-body); font-size: 16px; line-height: 1.6;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--brand); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--action); color: var(--action-ink); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
Expand All @@ -128,13 +144,13 @@
.wordmark .badge svg { width: 27px; height: 27px; display: block; }
.nav-links { display: flex; gap: 28px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--brand); }
.nav-links a:hover { color: var(--action); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.btn { font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; text-decoration: none; border-radius: 10px; padding: 11px 22px; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--brand); background: var(--brand-hover); }
.btn { font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; text-decoration: none; border-radius: 10px; padding: 11px 22px; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-primary { background: var(--action); color: var(--action-ink); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--action); background: var(--action-hover); }
.btn-ghost { border: 1.5px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost:hover { border-color: var(--action); color: var(--action); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: 8px; }
@media (max-width: 760px) { .nav-links { display: none; } }

Expand Down Expand Up @@ -211,8 +227,8 @@
background: var(--band); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { border-color: var(--brand); color: var(--brand); }
.tab-btn[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.tab-btn:hover { border-color: var(--action); color: var(--action); }
.tab-btn[aria-selected="true"] { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.tab-panels { max-width: 720px; margin: 0 auto; }
.tab-panel { display: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 32px 34px; text-align: left; }
.tab-panel[data-active] { display: block; }
Expand Down Expand Up @@ -294,10 +310,11 @@
.cta-band { background: var(--brand); color: var(--brand-ink); text-align: center; padding: 68px 28px; border-radius: 22px; max-width: 1080px; margin: 0 auto; }
.cta-band h2 { font-family: var(--font-cjk); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 16px; letter-spacing: -0.01em; }
.cta-band p { font-family: var(--font-body); font-size: 1rem; opacity: 0.92; max-width: 46ch; margin: 0 auto 30px; line-height: 1.6; }
.cta-band .btn-primary { background: var(--brand-ink); color: var(--brand); }
.cta-band .btn-primary:hover { background: var(--brand-ink); box-shadow: 0 10px 24px -10px oklch(10% 0.02 295.6 / 0.4); }
.cta-band .btn-primary { background: var(--action-ink); color: var(--action); }
.cta-band .btn-primary:hover { background: var(--action-ink); color: var(--action-hover); box-shadow: 0 10px 24px -10px oklch(10% 0.02 295.6 / 0.4); }
.cta-band .btn-ghost { border-color: color-mix(in oklab, var(--brand-ink) 45%, transparent); color: var(--brand-ink); }
.cta-band .btn-ghost:hover { border-color: var(--brand-ink); }
.cta-band :focus-visible { outline-color: var(--brand-ink); }

/* ── footer ─────────────────────────────────────────────────── */
.foot { padding: 80px 0 40px; }
Expand All @@ -306,7 +323,7 @@
.foot-col h3 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0 0 16px; font-weight: 600; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { text-decoration: none; font-size: 0.9rem; color: var(--ink-2); }
.foot-col a:hover { color: var(--brand); }
.foot-col a:hover { color: var(--action); }
.foot-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; margin-bottom: 10px; }
.foot-brand-desc { color: var(--ink-3); font-size: 0.85rem; line-height: 1.6; max-width: 32ch; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
Expand All @@ -318,8 +335,8 @@
border-radius: 12px; padding: 18px 20px; margin: 26px 0; overflow-x: auto;
}
.tree b { color: var(--brand); font-weight: 600; }
.tier li a { color: var(--brand); text-decoration: none; font-weight: 600; border-bottom: 1px solid color-mix(in oklab, var(--brand) 35%, transparent); }
.tier li a:hover { border-bottom-color: var(--brand); }
.tier li a { color: var(--action); text-decoration: none; font-weight: 600; border-bottom: 1px solid color-mix(in oklab, var(--action) 35%, transparent); }
.tier li a:hover { border-bottom-color: var(--action); }
.steps { max-width: 760px; margin: 52px auto 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; color: var(--ink-2); font-size: 0.92rem; line-height: 1.65; }
.steps li::before {
Expand All @@ -343,6 +360,10 @@
padding-top: 10px; min-width: min(320px, calc(100vw - 40px));
}
.dl-right .dl-menu { left: auto; right: 0; transform: none; }
@media (max-width: 760px) {
.hero-actions { position: relative; }
.hero-actions .dl { position: static; }
}
.dl-card {
background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
box-shadow: 0 24px 48px -20px oklch(20% 0.02 240 / 0.35), 0 4px 14px -8px oklch(20% 0.02 240 / 0.22);
Expand All @@ -364,7 +385,7 @@
display: block; margin-top: 4px; padding: 11px 14px 5px; border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.5; color: var(--ink-3); text-decoration: none;
}
.dl-more:hover { color: var(--brand); }
.dl-more:hover { color: var(--action); }
</style>
</head>
<body>
Expand Down
12 changes: 8 additions & 4 deletions scripts/contrast-check.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,16 +88,20 @@ const PAIRS = [
['caption on band ink-3 on band', 'ink-3', 'band', SMALL],
['tier mind / node tag ink-3 on card', 'ink-3', 'card', SMALL],
['building state amber on band', 'amber', 'band', SMALL],
['primary button label brand-ink on brand', 'brand-ink', 'brand', SMALL],
['selected tab label brand-ink on brand', 'brand-ink', 'brand', SMALL],
['primary button label action-ink on action', 'action-ink', 'action', SMALL],
['selected tab label action-ink on action', 'action-ink', 'action', SMALL],
['orbit centre label brand-ink on brand', 'brand-ink', 'brand', SMALL],
['cta band body brand-ink on brand', 'brand-ink', 'brand', SMALL],
['cta button label brand on brand-ink', 'brand', 'brand-ink', SMALL],
['cta button label action on action-ink', 'action', 'action-ink', SMALL],
['cta button hover action-hover on action-ink', 'action-hover', 'action-ink', SMALL],
['action links action on paper', 'action', 'paper', SMALL],
['action links action on band', 'action', 'band', SMALL],
['action links action on card', 'action', 'card', SMALL],
['eyebrow pill brand on brand-soft', 'brand', 'brand-soft', SMALL],
['inline code brand on band', 'brand', 'band', SMALL],
['download menu hover ink on band', 'ink', 'band', SMALL],
['hero headline accent azure on paper', 'azure', 'paper', LARGE],
['primary button hover brand-ink on brand-hover', 'brand-ink', 'brand-hover', SMALL],
['primary button hover action-ink on action-hover', 'action-ink', 'action-hover', SMALL],
];

let failed = 0;
Expand Down