fix(theme): brighten the green brand color to #169C47

Bump the green theme's --brand-500/main, --illus-500 (+ lighter 100/300), --primary and the btn-brand-primary green ramp from the darker #187C54/#19B476 to #169C47; TaskModeToggle active state uses the brand blue-500 token. Update the values in BRAND-THEME-HANDOFF.md.

(cherry picked from commit 1d2757797 on hotfix/2.6.0-beta4-cofco; style.css hunk re-placed into beta4's .theme-green block since beta4 defaults to the blue theme.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Kinyoo
2026-07-14 17:08:33 +08:00
co-authored by Claude Opus 4.8
parent 142a128c4c
commit 7a7eba5cd3
3 changed files with 15 additions and 15 deletions
+3 -3
View File
@@ -24,11 +24,11 @@
```
--brand-50:228 241 236(#E4F1EC) --brand-100:204 228 218(#CCE4DA) --brand-200:163 210 192(#A3D2C0)
--brand-300:111 186 160(#6FBAA0) --brand-400:61 155 120(#3D9B78) --brand-500:24 124 84(#187C54)
--brand-300:111 186 160(#6FBAA0) --brand-400:61 155 120(#3D9B78) --brand-500:22 156 71(#169C47 主, 2026-06-29 was #187C54)
--brand-600:19 99 69(#136345) --brand-700:15 77 54 --brand-800:10 56 38 --brand-900:6 38 25
--brand-main:24 124 84(#187C54)
--brand-main:22 156 71(#169C47)
/* 另外覆盖: */
--primary:154 67% 29%; --surface-active-alt:rgb(228 241 236); --surface-primary-alt:#f4faf7; --search-input:hsla(152,40%,99%,1);
--primary:142 75% 35%; --surface-active-alt:rgb(228 241 236); --surface-primary-alt:#f4faf7; --search-input:hsla(152,40%,99%,1);
```
(蓝色 `--primary` 默认是 `222 100% 54%`,在 `:root`/`html` 块里。)
@@ -47,14 +47,14 @@ export function TaskModeToggle({ active, disabled = false, onClick, compact = fa
className={cn(
// primary-100 is not a theme token; use a light primary tint to match.
'flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-normal transition-colors outline-none hover:bg-blue-100',
active ? 'text-blue-600' : 'text-[#4E5969]',
active ? 'text-blue-500' : 'text-[#4E5969]',
disabled && 'cursor-not-allowed opacity-50',
)}
>
{showExit ? (
<X size={16} className="text-blue-600" />
<X size={16} className="text-blue-500" />
) : (
<Outlined.Binoculars size={16} className={active ? 'text-blue-600' : 'text-[#4E5969]'} />
<Outlined.Binoculars size={16} className={active ? 'text-blue-500' : 'text-[#4E5969]'} />
)}
{/* Compact: collapse to icon only to save horizontal space in the
input toolbar, matching the knowledge/tools selectors. */}
+9 -9
View File
@@ -208,25 +208,25 @@ html {
--brand-200: 163 210 192; /* #A3D2C0 */
--brand-300: 111 186 160; /* #6FBAA0 */
--brand-400: 61 155 120; /* #3D9B78 */
--brand-500: 24 124 84; /* #187C54 — main brand green */
--brand-500: 22 156 71; /* #169C47 — main brand green */
--brand-600: 19 99 69; /* #136345 — button / pressed */
--brand-700: 15 77 54; /* #0F4D36 */
--brand-800: 10 56 38; /* #0A3826 */
--brand-900: 6 38 25; /* #062619 */
--brand-main: 24 124 84; /* #187C54 */
--brand-main: 22 156 71; /* #169C47 */
--brand-muted: 92 138 119; /* #5C8A77 — muted/low-sat brand accent (e.g. pin) */
/* Illustration palette — green mode keeps the source SVGs' vivid greens so the
illustrations match their original artwork (not the darker UI brand green). */
--illus-100: 189 230 211; /* #BDE6D3 */
--illus-300: 124 208 177; /* #7CD0B1 */
--illus-500: 25 180 118; /* #19B476 */
--illus-100: 221 240 232; /* #DDF0E8 */
--illus-300: 162 215 181; /* #A2D7B5 */
--illus-500: 22 156 71; /* #169C47 */
/* Brand-tinted surfaces driven by their own vars (not the blue palette). */
/* HSL of the brand green #187C54 — 156 68% 29% rounds to rgb(24,124,84), exactly
matching --brand-500. The old 154 67% 29% rounded to rgb(24,123,81), so
bg-primary (e.g. picker checkboxes) drifted ~3/255 off the brand green. */
--primary: 156 68% 29%;
--primary: 142 75% 35%;
--surface-active-alt: rgb(228 241 236);
--surface-primary-alt: #f4faf7;
--search-input: hsla(152, 40%, 99%, 1);
@@ -261,14 +261,14 @@ html {
<Button> default `bg-primary` — those win on the default state otherwise. Hover/active
step to progressively darker greens so the state change is visible. */
.theme-green .btn-brand-primary:not(:disabled) {
background-color: #19b476 !important; /* default: green fill */
background-color: #169c47 !important; /* default: green fill (matches --primary) */
color: #fff !important; /* default: white text / icon */
}
.theme-green .btn-brand-primary:not(:disabled):hover {
background-color: #17a66d !important; /* hover: slightly darker green */
background-color: #148f41 !important; /* hover: slightly darker green */
}
.theme-green .btn-brand-primary:not(:disabled):active {
background-color: #159964 !important; /* active: deeper green on press */
background-color: #12813b !important; /* active: deeper green on press */
}
/* Force a direct-child icon white too — some send buttons pin `[&>svg]:text-white`
already, but others inherit; this keeps every primary-button icon white on the fill. */