trending/open-code-review
1
0
Fork 0
mirror of https://github.com/alibaba/open-code-review.git synced 2026-10-02 09:24:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(viewer): align design-token values to the mockup palette (#1365)

Browse Source 
Update the light :root and dark palette values to the authoritative mockup
palette and add the interactive tokens (input/tag/row/marked/pagination/
scroll/code-diff) the per-screen work needs. Keeps the existing variable
names and ocr's prefers-color-scheme model (no data-theme, no JS toggle).

The mockup accent green (#17cb4b) is used for fills/borders/active states;
--link and green text keep a darker green (#177d35) that clears WCAG AA on
light surfaces, and revert to the bright accent on dark surfaces where it
already has enough contrast.

Closes #1361.
This commit is contained in:
Kite
2026-09-17 17:08:48 +08:00
committed by GitHub
parent 24a2c2da73
commit 089b68b1e2
1 changed files with 61 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/viewer/static/style.css
+61 -28
View File
@@ -7,34 +7,51 @@
--mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
/* Surfaces — neutral layers from the viewer redesign mockups */
--bg: #f9f9f9;
--surface: #ffffff;
--surface-alt: #f9f9f9;
--surface-inset: #f5f5f5;
--bg: #ffffff;
--surface: #fafafa;
--surface-alt: #f5f5f5;
--surface-inset: #f0f0f0;
--response-bg: var(--surface);
/* Text */
--text: #3b3b3b;
--text-strong: #181818;
--text-secondary: #666666;
--text-muted: #6c6c6c;
--text: rgba(0, 0, 0, 0.77);
--text-strong: rgba(0, 0, 0, 0.87);
--text-secondary: rgba(0, 0, 0, 0.55);
--text-muted: rgba(0, 0, 0, 0.39);
--text-faint: var(--text-muted);
/* Borders */
--border: #ebebeb;
--border-subtle: #f5f5f5;
--border: rgba(0, 0, 0, 0.08);
--border-subtle: rgba(0, 0, 0, 0.06);
/* Accents — darken the mockup green for AA text contrast in light mode */
--accent: #177d35;
--accent-hover: #106128;
--accent-soft: rgba(43, 222, 94, 0.08);
--accent-glow: rgba(43, 222, 94, 0.12);
--link: var(--accent);
/* Accents — mockup green for fills/borders/active states */
--accent: #17cb4b;
--accent-hover: #14a83e;
--accent-soft: rgba(23, 203, 75, 0.1);
--accent-glow: rgba(23, 203, 75, 0.16);
/* Green for text/links: darkened so it clears WCAG AA on light surfaces
(the brighter --accent is ~2.2:1 as text). Overridden back to --accent in dark mode. */
--link: #177d35;
/* Code */
--code-bg: var(--surface-inset);
--inline-code-bg: var(--surface-alt);
/* Controls & interactive surfaces */
--row-border: #ebebeb;
--btn-border: rgba(0, 0, 0, 0.16);
--input-bg: rgba(0, 0, 0, 0.04);
--input-hover: rgba(0, 0, 0, 0.08);
--tag-bg: rgba(0, 0, 0, 0.05);
--tag-hover: rgba(0, 0, 0, 0.08);
--hover-row: rgba(0, 0, 0, 0.03);
--marked-text: rgba(0, 0, 0, 0.55);
--pagination-active-border: rgba(0, 0, 0, 0.24);
--pagination-active-text: rgba(0, 0, 0, 0.87);
--scroll-thumb: rgba(0, 0, 0, 0.16);
--code-red-bg: rgba(227, 61, 73, 0.08);
--code-green-bg: rgba(23, 203, 75, 0.08);
/* Task accents */
--task-main: #4f46e5;
--task-plan: #7c3aed;
@@ -87,21 +104,37 @@
:root {
--bg: #000000;
--surface: #0a0a0a;
--surface-alt: #181818;
--surface-alt: #141414;
--surface-inset: #111111;
--text: #cccccc;
--text-strong: #ffffff;
--text-secondary: #aaaaaa;
--text-muted: #999999;
--text: rgba(255, 255, 255, 0.8);
--text-strong: rgba(255, 255, 255, 0.9);
--text-secondary: rgba(255, 255, 255, 0.6);
--text-muted: rgba(255, 255, 255, 0.4);
--border: #313131;
--border-subtle: #181818;
--border: rgba(255, 255, 255, 0.16);
--border-subtle: rgba(255, 255, 255, 0.08);
--accent: #2bde5e;
--accent-hover: #60e686;
--accent-soft: rgba(43, 222, 94, 0.1);
--accent-glow: rgba(43, 222, 94, 0.08);
--accent-glow: rgba(43, 222, 94, 0.12);
/* On dark surfaces the bright accent green already clears AA as text. */
--link: var(--accent);
--row-border: #292929;
--btn-border: #3d3d3d;
--input-bg: rgba(255, 255, 255, 0.08);
--input-hover: rgba(255, 255, 255, 0.12);
--tag-bg: rgba(255, 255, 255, 0.06);
--tag-hover: rgba(255, 255, 255, 0.1);
--hover-row: rgba(255, 255, 255, 0.03);
--marked-text: #9e9e9e;
--pagination-active-border: #3d3d3d;
--pagination-active-text: #ffffff;
--scroll-thumb: rgba(255, 255, 255, 0.16);
--code-red-bg: rgba(227, 61, 73, 0.12);
--code-green-bg: rgba(43, 222, 94, 0.08);
--task-main: #818cf8;
--task-plan: #a78bfa;
@@ -177,7 +210,7 @@ nav.breadcrumb .nav-brand {
gap: var(--space-2);
transition: color var(--transition);
}
nav.breadcrumb .nav-brand:hover { color: var(--accent); }
nav.breadcrumb .nav-brand:hover { color: var(--link); }
nav.breadcrumb .nav-brand .brand-icon {
width: 22px;
@@ -194,7 +227,7 @@ nav.breadcrumb a {
font-weight: 500;
transition: color var(--transition);
}
nav.breadcrumb a:hover { color: var(--accent); }
nav.breadcrumb a:hover { color: var(--link); }
nav.breadcrumb .sep {
color: var(--text-faint);
@@ -805,7 +838,7 @@ h3 {
padding: 0.15em 0.4em;
border-radius: var(--radius-xs);
font-size: 0.86em;
color: var(--accent);
color: var(--link);
}
.response-text .md-h1 { font-size: 1.15em; font-weight: 700; margin: 0.75em 0 0.35em; color: var(--text-strong); letter-spacing: -0.02em; }
.response-text .md-h2 { font-size: 1.05em; font-weight: 600; margin: 0.6em 0 0.3em; color: var(--text-strong); letter-spacing: -0.01em; }
@@ -1322,7 +1355,7 @@ p {
not reviewed as neutral text. */
.bucket-new { --bucket-tone: var(--severity-high-fg); --bucket-tone-fg: var(--severity-high-fg); }
.bucket-persisting { --bucket-tone: var(--severity-medium-fg); --bucket-tone-fg: var(--severity-medium-fg); }
.bucket-resolved { --bucket-tone: var(--accent); --bucket-tone-fg: var(--accent); }
.bucket-resolved { --bucket-tone: var(--accent); --bucket-tone-fg: var(--link); }
.bucket-not-reviewed { --bucket-tone: var(--text-faint); --bucket-tone-fg: var(--text-secondary); }
/* Existing Code and Suggested Change sit side by side on wide screens;