From c51ccf513f3018d9be6273475de40901dc67f692 Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Thu, 8 Oct 2026 11:28:26 +0200
Subject: [PATCH] chore: Alternative style api for alert

---
 pages/alert/style-api-v2.page.tsx             |  2 +-
 pages/alert/style-api-v2.scss                 | 23 +++++++----
 .../__snapshots__/style-docs.test.ts.snap     | 23 ++++++-----
 src/alert/styles.scss                         | 39 +++++++------------
 src/internal/styles/style-api.scss            |  4 +-
 5 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/pages/alert/style-api-v2.page.tsx b/pages/alert/style-api-v2.page.tsx
index 728af8aa39..4cc2df18d9 100644
--- a/pages/alert/style-api-v2.page.tsx
+++ b/pages/alert/style-api-v2.page.tsx
@@ -15,7 +15,7 @@ export default function () {
         <Alert
           type="success"
           dismissible={true}
-          action={<Button {...{ styleClassNames: { button: styles['alert-genai-action'] } }}>Generate again</Button>}
+          action={<Button {...{ styleClassNames: { root: styles['alert-genai-action'] } }}>Generate again</Button>}
           {...{
             styleClassNames: {
               root: styles['alert-genai'],
diff --git a/pages/alert/style-api-v2.scss b/pages/alert/style-api-v2.scss
index cbc2103bd9..b38104a4a2 100644
--- a/pages/alert/style-api-v2.scss
+++ b/pages/alert/style-api-v2.scss
@@ -3,20 +3,29 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
+@use '@cloudscape-design/component-toolkit/styling' as styling;
 @use '../style-api/palette' as palette;
 
 .alert-genai {
-  --awsui-style-background-color: #{palette.$genai-surface};
-  --awsui-style-color: #{palette.$genai-text};
-  --awsui-style-border-color: #{palette.$genai};
-  --awsui-style-border-radius: 4px;
-  --awsui-style-padding-block: 12px;
-  --awsui-style-padding-inline: 24px;
   --awsui-style-focus-ring-color: #{palette.$genai};
+
+  @include styling.override {
+    background-color: palette.$genai-surface;
+    color: palette.$genai-text;
+    border-color: palette.$genai;
+    border-start-start-radius: 4px;
+    border-start-end-radius: 4px;
+    border-end-start-radius: 4px;
+    border-end-end-radius: 4px;
+    padding-block: 12px;
+    padding-inline: 24px;
+  }
 }
 
 .alert-genai-icon {
-  --awsui-style-color: #{palette.$genai};
+  @include styling.override {
+    color: palette.$genai;
+  }
 }
 
 .alert-genai-action {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/style-docs.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/style-docs.test.ts.snap
index 0ec1499e58..c4523fb154 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/style-docs.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/style-docs.test.ts.snap
@@ -5,17 +5,16 @@ exports[`Style API docs definition for alert matches the snapshot: alert 1`] = `
   "slots": [
     {
       "name": "root",
-      "properties": [],
-      "propertyDescriptions": {},
-      "tokenDescriptions": {},
-      "tokens": [
+      "properties": [
         "color",
         "background-color",
-        "border-color",
-        "border-width",
+        "border",
         "border-radius",
-        "padding-block",
-        "padding-inline",
+        "padding",
+      ],
+      "propertyDescriptions": {},
+      "tokenDescriptions": {},
+      "tokens": [
         "focus-ring-color",
         "focus-ring-width",
         "focus-ring-radius",
@@ -25,12 +24,12 @@ exports[`Style API docs definition for alert matches the snapshot: alert 1`] = `
     },
     {
       "name": "icon",
-      "properties": [],
-      "propertyDescriptions": {},
-      "tokenDescriptions": {},
-      "tokens": [
+      "properties": [
         "color",
       ],
+      "propertyDescriptions": {},
+      "tokenDescriptions": {},
+      "tokens": [],
     },
     {
       "forwardsTo": {
diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index 5bc9db398a..7bac81af73 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -13,10 +13,9 @@
 
 @use './motion';
 
-$props: style-api.combine(style-api.$surface, (padding-block, padding-inline), style-api.$focus-ring);
-$tokens: style-api.resolve($props, carrier);
+$tokens: style-api.resolve(style-api.$focus-ring, carrier);
 @include style-api.register($tokens);
-@include style-api.docs('root', $tokens);
+@include style-api.docs('root', $tokens, $properties: (color, background-color, border, border-radius, padding));
 
 .root {
   @include styles.styles-reset;
@@ -31,7 +30,7 @@ $tokens: style-api.resolve($props, carrier);
 .alert {
   @include style-api.carriers($tokens);
   @include styles.styles-reset;
-  color: style-api.value($tokens, color, awsui.$color-text-alert-default);
+  color: awsui.$color-text-alert-default;
   position: relative;
   display: flex;
   flex-direction: row;
@@ -39,13 +38,13 @@ $tokens: style-api.resolve($props, carrier);
   border-block-end: awsui.$border-width-alert-block-end solid;
   border-inline-start: awsui.$border-width-alert-inline-start solid;
   border-inline-end: awsui.$border-width-alert-inline-end solid;
-  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
-  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
-  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
-  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
-  padding-block: style-api.value($tokens, padding-block, awsui.$space-alert-vertical);
-  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-alert-horizontal);
-  background-color: style-api.value($tokens, background-color, awsui.$color-background-container-content);
+  border-start-start-radius: awsui.$border-radius-alert;
+  border-start-end-radius: awsui.$border-radius-alert;
+  border-end-start-radius: awsui.$border-radius-alert;
+  border-end-end-radius: awsui.$border-radius-alert;
+  padding-block: awsui.$space-alert-vertical;
+  padding-inline: awsui.$space-alert-horizontal;
+  background-color: awsui.$color-background-container-content;
 }
 
 .alert-wrapper {
@@ -97,13 +96,7 @@ $tokens: style-api.resolve($props, carrier);
   }
 }
 
-$icon-props: (color);
-$icon-tokens: style-api.resolve($icon-props, carrier);
-@include style-api.docs('icon', $icon-tokens);
-
-.icon {
-  @include style-api.carriers($icon-tokens);
-}
+@include style-api.docs('icon', $properties: (color));
 
 .text {
   min-inline-size: 0;
@@ -173,14 +166,10 @@ $_text-colors: (
 
 @each $type in map.keys($_text-colors) {
   .type-#{$type} {
-    border-color: style-api.value($tokens, border-color, map.get($_border-colors, $type));
-    background-color: style-api.value($tokens, background-color, map.get($_background-colors, $type));
+    border-color: map.get($_border-colors, $type);
+    background-color: map.get($_background-colors, $type);
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: style-api.value(
-        $icon-tokens,
-        color,
-        var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)})
-      );
+      color: var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)});
     }
   }
 }
diff --git a/src/internal/styles/style-api.scss b/src/internal/styles/style-api.scss
index a245639edf..8e3a8eddfd 100644
--- a/src/internal/styles/style-api.scss
+++ b/src/internal/styles/style-api.scss
@@ -51,9 +51,9 @@ $_focus-ring-carriers: toolkit.resolve($focus-ring, carrier);
   }
 }
 
-@mixin docs($name, $map) {
+@mixin docs($name, $tokens: null, $properties: null, $descriptions: null) {
   @if enabled() {
-    @include toolkit.docs($name, $map);
+    @include toolkit.docs($name, $tokens, $properties, $descriptions);
   }
 }