From c43ce5e1cab3d6cd2ab76e809cc20099e5947433 Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Wed, 11 Mar 2026 12:29:31 +0100 Subject: [PATCH] fix(ui): use explicit yellow rgba for warning card variant, increase padding The VS Code bridge --surface-warning-weak variable resolves to a near- invisible dark color in dark themes. Use explicit rgba(245, 158, 11) values for background and border to ensure the warning is visually prominent. Also set an amber text color and increase padding to 12px 14px. --- packages/kilo-ui/src/components/card.css | 4 ++++ packages/ui/src/components/card.css | 6 ++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/kilo-ui/src/components/card.css b/packages/kilo-ui/src/components/card.css index 7e97fcf316a..6ae4d7d2693 100644 --- a/packages/kilo-ui/src/components/card.css +++ b/packages/kilo-ui/src/components/card.css @@ -4,4 +4,8 @@ border-radius: 2px; padding: 8px; border: 1px solid var(--border-weak-base); + + &[data-variant="warning"] { + padding: 12px 14px; + } } diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css index 812ad3a0369..6ff6c60b547 100644 --- a/packages/ui/src/components/card.css +++ b/packages/ui/src/components/card.css @@ -28,8 +28,10 @@ } &[data-variant="warning"] { - background-color: var(--surface-warning-weak); - border: 1px solid var(--border-warning-base); + background-color: rgba(245, 158, 11, 0.1); + border: 1px solid rgba(245, 158, 11, 0.45); + color: color-mix(in oklab, var(--text-warning, #d97706) 85%, var(--text-base, #ccc)); + padding: 12px 14px; /* text-12-regular */ font-family: var(--font-family-sans);