From 81c34da8f24394c2856f2621789b0d2dc9ecda54 Mon Sep 17 00:00:00 2001 From: Rahul A Mistry Date: Wed, 21 Jan 2026 13:01:45 +0530 Subject: [PATCH 1/3] fix(app): use inverted neutral scale for tooltip text in light mode --- packages/ui/src/theme/resolve.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts index 7339088c48f..f5dcbe2536a 100644 --- a/packages/ui/src/theme/resolve.ts +++ b/packages/ui/src/theme/resolve.ts @@ -100,10 +100,12 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res tokens["text-weak"] = neutral[8] tokens["text-weaker"] = neutral[7] tokens["text-strong"] = neutral[11] - tokens["text-invert-base"] = isDark ? neutral[10] : neutralAlpha[10] - tokens["text-invert-weak"] = isDark ? neutral[8] : neutralAlpha[8] - tokens["text-invert-weaker"] = isDark ? neutral[7] : neutralAlpha[7] - tokens["text-invert-strong"] = isDark ? neutral[11] : neutralAlpha[11] + const invertedNeutral = isDark ? neutral : generateNeutralScale(seeds.neutral, true) + const invertedAlpha = isDark ? neutralAlpha : generateNeutralAlphaScale(invertedNeutral, true) + tokens["text-invert-base"] = isDark ? invertedNeutral[10] : invertedAlpha[10] + tokens["text-invert-weak"] = isDark ? invertedNeutral[8] : invertedAlpha[8] + tokens["text-invert-weaker"] = isDark ? invertedNeutral[7] : invertedAlpha[7] + tokens["text-invert-strong"] = isDark ? invertedNeutral[11] : invertedAlpha[11] tokens["text-interactive-base"] = interactive[isDark ? 10 : 8] tokens["text-on-brand-base"] = neutralAlpha[10] tokens["text-on-interactive-base"] = isDark ? neutral[11] : neutral[0] From 98d8de91f823706509dd6007714fad7da6113880 Mon Sep 17 00:00:00 2001 From: Rahul A Mistry Date: Wed, 21 Jan 2026 15:03:17 +0530 Subject: [PATCH 2/3] fix(app): theme-tinted backgrounds for tooltips and toasts in light mode --- .../app/src/components/session-context-usage.tsx | 14 +++++++------- packages/ui/src/components/toast.css | 16 ++++++++-------- packages/ui/src/components/tooltip.css | 10 +++++----- packages/ui/src/theme/resolve.ts | 10 ++++------ 4 files changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx index 53148d41693..167184325a1 100644 --- a/packages/app/src/components/session-context-usage.tsx +++ b/packages/app/src/components/session-context-usage.tsx @@ -70,22 +70,22 @@ export function SessionContextUsage(props: SessionContextUsageProps) { {(ctx) => ( <>
- {ctx().tokens} - {language.t("context.usage.tokens")} + {ctx().tokens} + {language.t("context.usage.tokens")}
- {ctx().percentage ?? 0}% - {language.t("context.usage.usage")} + {ctx().percentage ?? 0}% + {language.t("context.usage.usage")}
)}
- {cost()} - {language.t("context.usage.cost")} + {cost()} + {language.t("context.usage.cost")}
-
{language.t("context.usage.clickToView")}
+
{language.t("context.usage.clickToView")}
 ) diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css index 1459bb18903..44e10925f37 100644 --- a/packages/ui/src/components/toast.css +++ b/packages/ui/src/components/toast.css @@ -29,9 +29,9 @@ transition: all 150ms ease-out; border-radius: var(--radius-lg); - border: 1px solid var(--border-weak-base); - background: var(--surface-float-base); - color: var(--text-invert-base); + border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + background: var(--surface-raised-strong); + color: var(--text-base); box-shadow: var(--shadow-md); [data-slot="toast-inner"] { @@ -80,7 +80,7 @@ justify-content: center; [data-component="icon"] { - color: var(--text-invert-stronger); + color: var(--text-strong); /* color: var(--icon-invert-base); */ } } @@ -94,7 +94,7 @@ } [data-slot="toast-title"] { - color: var(--text-invert-strong); + color: var(--text-strong); /* text-14-medium */ font-family: var(--font-family-sans); @@ -108,7 +108,7 @@ } [data-slot="toast-description"] { - color: var(--text-invert-base); + color: var(--text-base); text-wrap-style: pretty; /* text-14-regular */ @@ -134,7 +134,7 @@ padding: 0; cursor: pointer; - color: var(--text-invert-weak); + color: var(--text-weak); font-family: var(--font-family-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); @@ -146,7 +146,7 @@ } &:first-child { - color: var(--text-invert-strong); + color: var(--text-strong); } } diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css index 30da72f6d6a..05dcd419d73 100644 --- a/packages/ui/src/components/tooltip.css +++ b/packages/ui/src/components/tooltip.css @@ -9,7 +9,7 @@ } [data-slot="tooltip-keybind-key"] { - color: var(--text-invert-base); + color: var(--text-base); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); line-height: var(--line-height-large); @@ -19,11 +19,11 @@ z-index: 1000; max-width: 320px; border-radius: var(--radius-sm); - background-color: var(--surface-float-base); - color: var(--text-invert-strong); - background: var(--surface-float-base); + background-color: var(--surface-raised-strong); + color: var(--text-strong); + background: var(--surface-raised-strong); padding: 2px 8px; - border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07)); + border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); box-shadow: var(--shadow-md); pointer-events: none !important; diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts index f5dcbe2536a..7339088c48f 100644 --- a/packages/ui/src/theme/resolve.ts +++ b/packages/ui/src/theme/resolve.ts @@ -100,12 +100,10 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res tokens["text-weak"] = neutral[8] tokens["text-weaker"] = neutral[7] tokens["text-strong"] = neutral[11] - const invertedNeutral = isDark ? neutral : generateNeutralScale(seeds.neutral, true) - const invertedAlpha = isDark ? neutralAlpha : generateNeutralAlphaScale(invertedNeutral, true) - tokens["text-invert-base"] = isDark ? invertedNeutral[10] : invertedAlpha[10] - tokens["text-invert-weak"] = isDark ? invertedNeutral[8] : invertedAlpha[8] - tokens["text-invert-weaker"] = isDark ? invertedNeutral[7] : invertedAlpha[7] - tokens["text-invert-strong"] = isDark ? invertedNeutral[11] : invertedAlpha[11] + tokens["text-invert-base"] = isDark ? neutral[10] : neutralAlpha[10] + tokens["text-invert-weak"] = isDark ? neutral[8] : neutralAlpha[8] + tokens["text-invert-weaker"] = isDark ? neutral[7] : neutralAlpha[7] + tokens["text-invert-strong"] = isDark ? neutral[11] : neutralAlpha[11] tokens["text-interactive-base"] = interactive[isDark ? 10 : 8] tokens["text-on-brand-base"] = neutralAlpha[10] tokens["text-on-interactive-base"] = isDark ? neutral[11] : neutral[0] From cbd4b1f4dd2d520db7764b042fe4c32c481282f8 Mon Sep 17 00:00:00 2001 From: Rahul A Mistry Date: Wed, 21 Jan 2026 21:15:30 +0530 Subject: [PATCH 3/3] Revert "fix(app): theme-tinted backgrounds for tooltips and toasts in light mode" This reverts commit 98d8de91f823706509dd6007714fad7da6113880. --- .../app/src/components/session-context-usage.tsx | 14 +++++++------- packages/ui/src/components/toast.css | 16 ++++++++-------- packages/ui/src/components/tooltip.css | 10 +++++----- packages/ui/src/theme/resolve.ts | 10 ++++++---- 4 files changed, 26 insertions(+), 24 deletions(-) diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx index 167184325a1..53148d41693 100644 --- a/packages/app/src/components/session-context-usage.tsx +++ b/packages/app/src/components/session-context-usage.tsx @@ -70,22 +70,22 @@ export function SessionContextUsage(props: SessionContextUsageProps) { {(ctx) => ( <>
- {ctx().tokens} - {language.t("context.usage.tokens")} + {ctx().tokens} + {language.t("context.usage.tokens")}
- {ctx().percentage ?? 0}% - {language.t("context.usage.usage")} + {ctx().percentage ?? 0}% + {language.t("context.usage.usage")}
)}
- {cost()} - {language.t("context.usage.cost")} + {cost()} + {language.t("context.usage.cost")}
-
{language.t("context.usage.clickToView")}
+
{language.t("context.usage.clickToView")}
 ) diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css index 44e10925f37..1459bb18903 100644 --- a/packages/ui/src/components/toast.css +++ b/packages/ui/src/components/toast.css @@ -29,9 +29,9 @@ transition: all 150ms ease-out; border-radius: var(--radius-lg); - border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); - background: var(--surface-raised-strong); - color: var(--text-base); + border: 1px solid var(--border-weak-base); + background: var(--surface-float-base); + color: var(--text-invert-base); box-shadow: var(--shadow-md); [data-slot="toast-inner"] { @@ -80,7 +80,7 @@ justify-content: center; [data-component="icon"] { - color: var(--text-strong); + color: var(--text-invert-stronger); /* color: var(--icon-invert-base); */ } } @@ -94,7 +94,7 @@ } [data-slot="toast-title"] { - color: var(--text-strong); + color: var(--text-invert-strong); /* text-14-medium */ font-family: var(--font-family-sans); @@ -108,7 +108,7 @@ } [data-slot="toast-description"] { - color: var(--text-base); + color: var(--text-invert-base); text-wrap-style: pretty; /* text-14-regular */ @@ -134,7 +134,7 @@ padding: 0; cursor: pointer; - color: var(--text-weak); + color: var(--text-invert-weak); font-family: var(--font-family-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); @@ -146,7 +146,7 @@ } &:first-child { - color: var(--text-strong); + color: var(--text-invert-strong); } } diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css index 05dcd419d73..30da72f6d6a 100644 --- a/packages/ui/src/components/tooltip.css +++ b/packages/ui/src/components/tooltip.css @@ -9,7 +9,7 @@ } [data-slot="tooltip-keybind-key"] { - color: var(--text-base); + color: var(--text-invert-base); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); line-height: var(--line-height-large); @@ -19,11 +19,11 @@ z-index: 1000; max-width: 320px; border-radius: var(--radius-sm); - background-color: var(--surface-raised-strong); - color: var(--text-strong); - background: var(--surface-raised-strong); + background-color: var(--surface-float-base); + color: var(--text-invert-strong); + background: var(--surface-float-base); padding: 2px 8px; - border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07)); box-shadow: var(--shadow-md); pointer-events: none !important; diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts index 7339088c48f..f5dcbe2536a 100644 --- a/packages/ui/src/theme/resolve.ts +++ b/packages/ui/src/theme/resolve.ts @@ -100,10 +100,12 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res tokens["text-weak"] = neutral[8] tokens["text-weaker"] = neutral[7] tokens["text-strong"] = neutral[11] - tokens["text-invert-base"] = isDark ? neutral[10] : neutralAlpha[10] - tokens["text-invert-weak"] = isDark ? neutral[8] : neutralAlpha[8] - tokens["text-invert-weaker"] = isDark ? neutral[7] : neutralAlpha[7] - tokens["text-invert-strong"] = isDark ? neutral[11] : neutralAlpha[11] + const invertedNeutral = isDark ? neutral : generateNeutralScale(seeds.neutral, true) + const invertedAlpha = isDark ? neutralAlpha : generateNeutralAlphaScale(invertedNeutral, true) + tokens["text-invert-base"] = isDark ? invertedNeutral[10] : invertedAlpha[10] + tokens["text-invert-weak"] = isDark ? invertedNeutral[8] : invertedAlpha[8] + tokens["text-invert-weaker"] = isDark ? invertedNeutral[7] : invertedAlpha[7] + tokens["text-invert-strong"] = isDark ? invertedNeutral[11] : invertedAlpha[11] tokens["text-interactive-base"] = interactive[isDark ? 10 : 8] tokens["text-on-brand-base"] = neutralAlpha[10] tokens["text-on-interactive-base"] = isDark ? neutral[11] : neutral[0]