diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss index 47d4d0a207..52a0e0a817 100644 --- a/packages/css/src/components/alert/alert.scss +++ b/packages/css/src/components/alert/alert.scss @@ -23,17 +23,21 @@ } .ams-alert--error { + background-color: var(--ams-alert-error-background-color); border-color: var(--ams-alert-error-border-color); } .ams-alert--info { + background-color: var(--ams-alert-info-background-color); border-color: var(--ams-alert-info-border-color); } .ams-alert--success { + background-color: var(--ams-alert-success-background-color); border-color: var(--ams-alert-success-border-color); } .ams-alert--warning { + background-color: var(--ams-alert-warning-background-color); border-color: var(--ams-alert-warning-border-color); } diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx index fddfb9841d..d3d4357f07 100644 --- a/packages/react/src/Alert/Alert.tsx +++ b/packages/react/src/Alert/Alert.tsx @@ -68,7 +68,7 @@ export const Alert = forwardRef( )} {children} - {closeable && } + {closeable && } ) }, diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json index df8fe6b937..3d0c670451 100644 --- a/proprietary/tokens/src/components/ams/alert.tokens.json +++ b/proprietary/tokens/src/components/ams/alert.tokens.json @@ -7,23 +7,21 @@ "padding-block": { "value": "{ams.space.md}" }, "padding-inline": { "value": "{ams.space.lg}" }, "error": { + "background-color": { "value": "{ams.brand.color.red.20}" }, "border-color": { "value": "{ams.brand.color.red.60}" } }, "info": { - "border-color": { "value": "{ams.brand.color.blue.60}" } + "background-color": { "value": "{ams.brand.color.azure.20}" }, + "border-color": { "value": "{ams.brand.color.azure.60}" } }, "success": { + "background-color": { "value": "{ams.brand.color.green.20}" }, "border-color": { "value": "{ams.brand.color.green.60}" } }, "warning": { + "background-color": { "value": "{ams.brand.color.orange.20}" }, "border-color": { "value": "{ams.brand.color.orange.60}" } }, - "close": { - "fill": { "value": "{ams.brand.color.neutral.100}" }, - "hover": { - "fill": { "value": "{ams.brand.color.blue.60}" } - } - }, "content": { "gap": { "value": "{ams.space.sm}" } }