mirror of
https://github.com/dataelement/bisheng.git
synced 2026-09-21 12:43:36 +08:00
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:
co-authored by
Claude Opus 4.8
parent
142a128c4c
commit
7a7eba5cd3
@@ -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. */}
|
||||
|
||||
@@ -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. */
|
||||
|
||||
Reference in New Issue
Block a user