diff --git a/packages/ui/src/components/Alert/Alert.module.css b/packages/ui/src/components/Alert/Alert.module.css index a596955f58..0cbd545451 100644 --- a/packages/ui/src/components/Alert/Alert.module.css +++ b/packages/ui/src/components/Alert/Alert.module.css @@ -20,7 +20,6 @@ .bui-Alert { --alert-bg: var(--bui-bg-surface-1); --alert-fg: var(--bui-fg-primary); - --alert-border: var(--bui-border); display: flex; align-items: flex-start; @@ -45,25 +44,21 @@ .bui-Alert[data-status='info'] { --alert-bg: var(--bui-bg-info); --alert-fg: var(--bui-fg-info); - --alert-border: var(--bui-border-info); } .bui-Alert[data-status='success'] { --alert-bg: var(--bui-bg-success); --alert-fg: var(--bui-fg-success); - --alert-border: var(--bui-border-success); } .bui-Alert[data-status='warning'] { --alert-bg: var(--bui-bg-warning); --alert-fg: var(--bui-fg-warning); - --alert-border: var(--bui-border-warning); } .bui-Alert[data-status='danger'] { --alert-bg: var(--bui-bg-danger); --alert-fg: var(--bui-fg-danger); - --alert-border: var(--bui-border-danger); } .bui-AlertIcon { diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css index 4daf36099e..992a49b2f2 100644 --- a/packages/ui/src/css/tokens.css +++ b/packages/ui/src/css/tokens.css @@ -114,10 +114,10 @@ --bui-bg-neutral-on-surface-3-disabled: oklch(0% 0 0 / 6%); /* Status background colors */ - --bui-bg-info: #e0f2fe; - --bui-bg-danger: #feebe7; - --bui-bg-warning: #fff2b2; - --bui-bg-success: #e6f6eb; + --bui-bg-danger: #ffe2e2; + --bui-bg-warning: #ffedd5; + --bui-bg-success: #dcfce7; + --bui-bg-info: #dbeafe; /* Foreground colors */ --bui-fg-primary: var(--bui-black); @@ -129,10 +129,10 @@ --bui-fg-solid-disabled: #98a8bc; --bui-fg-tint: #1f5493; --bui-fg-tint-disabled: var(--bui-gray-5); - --bui-fg-info: #0369a1; - --bui-fg-danger: #e22b2b; - --bui-fg-warning: #e36d05; - --bui-fg-success: #1db954; + --bui-fg-danger: #991919; + --bui-fg-warning: #92310a; + --bui-fg-success: #116932; + --bui-fg-info: #173da6; /* Border colors */ --bui-border: rgba(0, 0, 0, 0.1); @@ -202,10 +202,10 @@ --bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0 / 8%); /* Status background colors */ - --bui-bg-info: #082f49; - --bui-bg-danger: #3b1219; + --bui-bg-danger: #300c0c; --bui-bg-warning: #302008; - --bui-bg-success: #132d21; + --bui-bg-success: #042713; + --bui-bg-info: #132049; /* Foreground colors */ --bui-fg-primary: var(--bui-white); @@ -217,10 +217,10 @@ --bui-fg-solid-disabled: #6191cc; --bui-fg-tint: #9cc9ff; --bui-fg-tint-disabled: var(--bui-gray-5); - --bui-fg-info: #7dd3fc; - --bui-fg-danger: #e22b2b; - --bui-fg-warning: #e36d05; - --bui-fg-success: #1db954; + --bui-fg-danger: #fca5a5; + --bui-fg-warning: #fdba74; + --bui-fg-success: #86efac; + --bui-fg-info: #a3cfff; /* Border colors */ --bui-border: rgba(255, 255, 255, 0.12);