From 1b676dce77596b77380bdea83ba9710f837dbec3 Mon Sep 17 00:00:00 2001 From: Ammar Date: Sat, 20 Dec 2025 11:55:25 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20use=20subtle=20greyish-gr?= =?UTF-8?q?een=20for=20Cache=20Create=20token=20color?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change Cache Create from orange to muted green (visible but not distracting) - Update storybook comment to reflect new color scheme Creates a more cohesive token meter display. --- src/browser/stories/App.rightsidebar.stories.tsx | 2 +- src/browser/styles/globals.css | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/browser/stories/App.rightsidebar.stories.tsx b/src/browser/stories/App.rightsidebar.stories.tsx index e1955fad67..9940774700 100644 --- a/src/browser/stories/App.rightsidebar.stories.tsx +++ b/src/browser/stories/App.rightsidebar.stories.tsx @@ -103,7 +103,7 @@ export const CostsTab: AppStory = { /** * Costs tab showing cache create vs cache read differentiation. - * Cache create (orange) is typically more expensive than cache read (grey). + * Cache create is more expensive than cache read; both render in grey tones. * This story uses realistic Anthropic-style usage where most input is cached. */ export const CostsTabWithCacheCreate: AppStory = { diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index 2ad1077c8f..fb482a5a0f 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -131,7 +131,7 @@ --color-token-input: hsl(120 40% 35%); --color-token-output: hsl(207 100% 40%); --color-token-cached: hsl(0 0% 50%); - --color-token-cache-create: hsl(30 90% 50%); + --color-token-cache-create: hsl(140 20% 55%); /* Plan surfaces */ --surface-plan-gradient: linear-gradient( @@ -384,7 +384,7 @@ --color-token-input: hsl(125 45% 36%); --color-token-output: hsl(207 90% 40%); --color-token-cached: hsl(210 16% 50%); - --color-token-cache-create: hsl(30 85% 45%); + --color-token-cache-create: hsl(140 18% 52%); --surface-plan-gradient: linear-gradient( 135deg, @@ -624,7 +624,7 @@ --color-token-input: #859900; --color-token-output: #268bd2; --color-token-cached: #839496; - --color-token-cache-create: #cb4b16; + --color-token-cache-create: #6b9b7a; --surface-plan-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-plan-mode), transparent 94%) 0%, color-mix(in srgb, var(--color-plan-mode), transparent 97%) 100%); --surface-plan-border: color-mix(in srgb, var(--color-plan-mode), transparent 78%); @@ -839,7 +839,7 @@ --color-token-input: #859900; --color-token-output: #268bd2; --color-token-cached: #586e75; - --color-token-cache-create: #cb4b16; + --color-token-cache-create: #5a8a6a; --surface-plan-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-plan-mode), transparent 92%) 0%, color-mix(in srgb, var(--color-plan-mode), transparent 95%) 100%); --surface-plan-border: color-mix(in srgb, var(--color-plan-mode), transparent 70%);