From 8f68d24bdb9df8983a5c84eb1a41e0052c5b8b0f Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 15 Oct 2026 02:51:56 +0200
Subject: [PATCH] fix: make the filter warnings readable on the light theme

---
 src/components/filters/SieveEditorSheet.tsx | 8 +++++---
 src/components/settings/FilterSettings.tsx  | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/filters/SieveEditorSheet.tsx b/src/components/filters/SieveEditorSheet.tsx
index 2e43651a..0793ec14 100644
--- a/src/components/filters/SieveEditorSheet.tsx
+++ b/src/components/filters/SieveEditorSheet.tsx
@@ -206,11 +206,13 @@ function makeStyles(c: ThemePalette) {
       padding: spacing.md,
       borderRadius: radius.sm,
       borderWidth: 1,
-      borderColor: 'rgba(252, 211, 77, 0.4)',
-      backgroundColor: 'rgba(120, 53, 15, 0.25)',
+      // Theme warning tokens: the fixed dark-amber values left light-yellow
+      // text on a near-white fill in the light theme.
+      borderColor: c.warning,
+      backgroundColor: c.warningBg,
       alignItems: 'flex-start',
     },
-    warningText: { ...typography.caption, color: '#fde68a', flex: 1 },
+    warningText: { ...typography.caption, color: c.text, flex: 1 },
 
     editorWrap: {
       flex: 1,
diff --git a/src/components/settings/FilterSettings.tsx b/src/components/settings/FilterSettings.tsx
index b0bcf397..df5c6aa3 100644
--- a/src/components/settings/FilterSettings.tsx
+++ b/src/components/settings/FilterSettings.tsx
@@ -512,11 +512,13 @@ function makeStyles(c: ThemePalette) {
       padding: spacing.md,
       borderRadius: radius.sm,
       borderWidth: 1,
-      borderColor: 'rgba(252, 211, 77, 0.4)',
-      backgroundColor: 'rgba(120, 53, 15, 0.25)',
+      // Theme warning tokens: the fixed dark-amber values left light-yellow
+      // text on a near-white fill in the light theme.
+      borderColor: c.warning,
+      backgroundColor: c.warningBg,
       alignItems: 'flex-start',
     },
-    opaqueText: { ...typography.caption, color: '#fde68a' },
+    opaqueText: { ...typography.caption, color: c.text },
     opaqueActions: { flexDirection: 'row', gap: spacing.lg, marginTop: spacing.sm, flexWrap: 'wrap', alignItems: 'center' },
     resetConfirmRow: { flexDirection: 'row', gap: spacing.md, alignItems: 'center' },
     resetLink: { flexDirection: 'row', alignItems: 'center', gap: 4 },