= {
- info: "bg-dracula-cyan/10 text-dracula-cyan border border-dracula-cyan/25",
+ info: "bg-info/10 text-info border border-info/25",
suggestion:
- "bg-dracula-purple/10 text-dracula-purple border border-dracula-purple/25",
+ "bg-dose-accent/10 text-dose-accent border border-dose-accent/25",
important:
- "bg-dracula-orange/10 text-dracula-orange border border-dracula-orange/25",
- urgent: "bg-dracula-red/10 text-dracula-red border border-dracula-red/25",
+ "bg-warning/10 text-warning border border-warning/25",
+ urgent: "bg-destructive/10 text-destructive border border-destructive/25",
};
interface RecommendationCardProps {
diff --git a/src/components/insights/recommendation-feedback.tsx b/src/components/insights/recommendation-feedback.tsx
index 6e42637e3..8ecad561c 100644
--- a/src/components/insights/recommendation-feedback.tsx
+++ b/src/components/insights/recommendation-feedback.tsx
@@ -223,7 +223,7 @@ export function RecommendationFeedback({
className="text-muted-foreground flex items-center gap-1.5 text-xs"
data-slot="rec-feedback-confirmation"
>
-
+
{t("insights.recommendation.feedbackThanks")}
@@ -240,12 +240,12 @@ export function RecommendationFeedback({
>
{verdict === "up" ? (
) : (
)}
@@ -269,7 +269,7 @@ export function RecommendationFeedback({
title={t("insights.recommendation.feedbackHelpful")}
disabled={disabled}
onClick={() => submit(true)}
- className="text-muted-foreground hover:text-dracula-green disabled:hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-60"
+ className="text-muted-foreground hover:text-success disabled:hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-60"
>
{submittingUp ? (
@@ -284,7 +284,7 @@ export function RecommendationFeedback({
title={t("insights.recommendation.feedbackNotHelpful")}
disabled={disabled}
onClick={() => submit(false)}
- className="text-muted-foreground hover:text-dracula-orange disabled:hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-60"
+ className="text-muted-foreground hover:text-warning disabled:hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-60"
>
{submittingDown ? (
diff --git a/src/components/settings/about-section.tsx b/src/components/settings/about-section.tsx
index c8ff258be..4be08972b 100644
--- a/src/components/settings/about-section.tsx
+++ b/src/components/settings/about-section.tsx
@@ -404,7 +404,7 @@ export function AboutSection() {
role="alert"
className={`mt-2 text-xs ${
tourFeedback.type === "success"
- ? "text-dracula-green"
+ ? "text-success"
: "text-destructive"
}`}
>
diff --git a/src/components/settings/account-section.tsx b/src/components/settings/account-section.tsx
index cee137eea..2ef26422c 100644
--- a/src/components/settings/account-section.tsx
+++ b/src/components/settings/account-section.tsx
@@ -573,7 +573,7 @@ export function AccountSection() {
role="alert"
className={`text-sm ${
saveMsgType === "success"
- ? "text-dracula-green"
+ ? "text-success"
: "text-destructive"
}`}
>
@@ -627,7 +627,7 @@ export function AccountSection() {
role="alert"
className={`mt-2 text-right text-sm ${
passkeyMsgType === "success"
- ? "text-dracula-green"
+ ? "text-success"
: "text-destructive"
}`}
>
@@ -709,7 +709,7 @@ export function AccountSection() {
role="alert"
className={`mt-2 text-xs ${
tourFeedback.type === "success"
- ? "text-dracula-green"
+ ? "text-success"
: "text-destructive"
}`}
>
@@ -778,7 +778,7 @@ export function AccountSection() {
role="alert"
className={`text-sm ${
passwordMsgType === "success"
- ? "text-dracula-green"
+ ? "text-success"
: "text-destructive"
}`}
>
@@ -1199,7 +1199,7 @@ function AvatarSection() {
{msg}
diff --git a/src/components/settings/api-section.tsx b/src/components/settings/api-section.tsx
index e9f36d630..bc7f1835d 100644
--- a/src/components/settings/api-section.tsx
+++ b/src/components/settings/api-section.tsx
@@ -248,7 +248,7 @@ function ApiTokensCard() {
status={
<>
{activeTokens.length > 0 && (
-
+
{t("settings.configured")}
)}
@@ -284,10 +284,10 @@ function ApiTokensCard() {
{newToken && (
-
+
{t("settings.tokenCreated")}
@@ -304,7 +304,7 @@ function ApiTokensCard() {
data-slot="settings-api-token-copy"
>
{tokenCopied ? (
-
+
) : (
)}
@@ -377,7 +377,7 @@ function ApiTokensCard() {
{t("settings.tokenExpired")}
) : (
-
+
{t("settings.tokenActive")}
)}
@@ -465,7 +465,7 @@ function ApiTokensCard() {
{t("settings.tokenExpired")}
) : (
-
+
{t("settings.tokenActive")}
)}
diff --git a/src/components/settings/integration-status-pill.tsx b/src/components/settings/integration-status-pill.tsx
index cc7d63abb..5e330400f 100644
--- a/src/components/settings/integration-status-pill.tsx
+++ b/src/components/settings/integration-status-pill.tsx
@@ -99,20 +99,19 @@ export function IntegrationStatusPill({
// chipClass only applies to the `connected`, `warning`, and `parked`
// branches — `error` falls back to `variant="destructive"` and
- // `disconnected` to `variant="outline"`. The warning chip uses amber
- // tokens to signal "connected, but the upstream just returned a
- // contract-level error a reauth won't fix" — distinct from the red
- // reconnect pill. The parked chip uses the orange tokens to signal
- // "we tried to keep going for 24h but the contract mismatch persists
- // — manual intervention required" — visually heavier than warning
- // (sustained problem), lighter than error (still recoverable without
- // re-auth).
+ // `disconnected` to `variant="outline"`. The warning and parked chips
+ // both carry the semantic `warning` tone (an AA-safe amber that clears
+ // contrast in light mode); their distinct labels + icons carry the
+ // meaning — "connected, but the upstream returned a contract-level error
+ // a reauth won't fix" vs "tried to keep going for 24h but the mismatch
+ // persists, manual intervention required" — distinct from the red
+ // reconnect pill (`error`).
const connectedChipClass =
- "border-dracula-green/30 bg-dracula-green/15 text-dracula-green";
+ "border-success/30 bg-success/15 text-success";
const warningChipClass =
- "border-dracula-yellow/30 bg-dracula-yellow/15 text-dracula-yellow";
+ "border-warning/30 bg-warning/15 text-warning";
const parkedChipClass =
- "border-dracula-orange/30 bg-dracula-orange/15 text-dracula-orange";
+ "border-warning/30 bg-warning/15 text-warning";
let label: string;
let icon: React.ReactNode;
diff --git a/src/components/settings/integrations-section.tsx b/src/components/settings/integrations-section.tsx
index 03eff7161..275033c30 100644
--- a/src/components/settings/integrations-section.tsx
+++ b/src/components/settings/integrations-section.tsx
@@ -433,9 +433,9 @@ function WithingsCard({
{pillState === "parked" && (
-
+
{t("settings.integrationPill.parkedReconnect")}