npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1352 → 3.0.1354 - Mend

@cloudscape-design/components-themeable 3.0.1352 → 3.0.1354

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/lib/internal/template/alert/styles.scoped.css CHANGED Viewed

@@ -186,10 +186,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_alert_mx3cw_3c8y4_189:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_mx3cw_3c8y4_1 var(--motion-duration-show-paced-i87eux, 180ms) var(--motion-easing-show-paced-r4ee22, ease-out);
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_alert_mx3cw_1x3zi_201:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_mx3cw_1x3zi_1 var(--motion-duration-show-paced-i87eux, 180ms) var(--motion-easing-show-paced-r4ee22, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_mx3cw_3c8y4_1 {
+@keyframes awsui_awsui-motion-fade-in_mx3cw_1x3zi_1 {
   from {
     opacity: 0.2;
   }
@@ -198,17 +210,66 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_alert_mx3cw_3c8y4_189:not(#\9) {
+  .awsui_alert_mx3cw_1x3zi_201:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_alert_mx3cw_3c8y4_189:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_3c8y4_189:not(#\9) {
+.awsui-motion-disabled .awsui_alert_mx3cw_1x3zi_201:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_1x3zi_201:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_mx3cw_3c8y4_211:not(#\9) {
+@property --awsui-style-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-background-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-gutter-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-gutter-inline {
+  syntax: "*";
+  inherits: false;
+}
+/* awsui:style-api-slot name=root tokens=color, background-color, border-color, border-width, border-radius, padding-block, padding-inline, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
+.awsui_root_mx3cw_1x3zi_272:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -243,11 +304,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   display: block;
 }
-.awsui_root_mx3cw_3c8y4_211.awsui_hidden_mx3cw_3c8y4_246:not(#\9) {
+.awsui_root_mx3cw_1x3zi_272.awsui_hidden_mx3cw_1x3zi_307:not(#\9) {
   display: none;
 }
-.awsui_alert_mx3cw_3c8y4_189:not(#\9) {
+.awsui_alert_mx3cw_1x3zi_201:not(#\9) {
+  --awsui-internal-style-color: var(--awsui-style-color);
+  --awsui-internal-style-background-color: var(--awsui-style-background-color);
+  --awsui-internal-style-border-color: var(--awsui-style-border-color);
+  --awsui-internal-style-border-width: var(--awsui-style-border-width);
+  --awsui-internal-style-border-radius: var(--awsui-style-border-radius);
+  --awsui-internal-style-padding-block: var(--awsui-style-padding-block);
+  --awsui-internal-style-padding-inline: var(--awsui-style-padding-inline);
+  --awsui-internal-style-focus-ring-color: var(--awsui-style-focus-ring-color);
+  --awsui-internal-style-focus-ring-width: var(--awsui-style-focus-ring-width);
+  --awsui-internal-style-focus-ring-radius: var(--awsui-style-focus-ring-radius);
+  --awsui-internal-style-focus-ring-gutter-block: var(--awsui-style-focus-ring-gutter-block);
+  --awsui-internal-style-focus-ring-gutter-inline: var(--awsui-style-focus-ring-gutter-inline);
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -277,7 +350,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-family: var(--font-family-base-c9u5cr, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  color: var(--color-text-alert-default-u9yymz, #16191f);
+  color: var(--awsui-internal-style-color, var(--color-text-alert-default-u9yymz, #16191f));
   position: relative;
   display: flex;
   flex-direction: row;
@@ -285,17 +358,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block-end: var(--border-width-alert-block-end-bz9tdg, 1px) solid;
   border-inline-start: var(--border-width-alert-inline-start-irqq4q, 1px) solid;
   border-inline-end: var(--border-width-alert-inline-end-8vmvde, 1px) solid;
-  border-start-start-radius: var(--border-radius-alert-m5flwx, 2px);
-  border-start-end-radius: var(--border-radius-alert-m5flwx, 2px);
-  border-end-start-radius: var(--border-radius-alert-m5flwx, 2px);
-  border-end-end-radius: var(--border-radius-alert-m5flwx, 2px);
-  padding-block: var(--space-alert-vertical-uiixbm, 12px);
-  padding-inline: var(--space-alert-horizontal-ncpiov, 20px);
-  background-color: var(--color-background-container-content-mjfil9, #ffffff);
-  --awsui-alert-focus-ring-box-shadow-esndbs: 0 0 0 var(--awsui-alert-focus-ring-border-width-esndbs, 2px) var(--awsui-alert-focus-ring-border-color-esndbs, var(--color-border-item-focused-sewkzn, #0073bb));
+  border-start-start-radius: var(--awsui-internal-style-border-radius, var(--border-radius-alert-m5flwx, 2px));
+  border-start-end-radius: var(--awsui-internal-style-border-radius, var(--border-radius-alert-m5flwx, 2px));
+  border-end-start-radius: var(--awsui-internal-style-border-radius, var(--border-radius-alert-m5flwx, 2px));
+  border-end-end-radius: var(--awsui-internal-style-border-radius, var(--border-radius-alert-m5flwx, 2px));
+  padding-block: var(--awsui-internal-style-padding-block, var(--space-alert-vertical-uiixbm, 12px));
+  padding-inline: var(--awsui-internal-style-padding-inline, var(--space-alert-horizontal-ncpiov, 20px));
+  background-color: var(--awsui-internal-style-background-color, var(--color-background-container-content-mjfil9, #ffffff));
 }
-.awsui_alert-wrapper_mx3cw_3c8y4_298:not(#\9) {
+.awsui_alert-wrapper_mx3cw_1x3zi_370:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -303,132 +375,138 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   column-gap: var(--space-alert-action-left-6trzof, 20px);
 }
-.awsui_hidden_mx3cw_3c8y4_246:not(#\9) {
+.awsui_hidden_mx3cw_1x3zi_307:not(#\9) {
   display: none;
 }
-.awsui_initial-hidden_mx3cw_3c8y4_310:not(#\9) {
+.awsui_initial-hidden_mx3cw_1x3zi_382:not(#\9) {
   overflow: hidden;
   block-size: 0;
 }
-.awsui_header_mx3cw_3c8y4_315:not(#\9),
-.awsui_header-replacement_mx3cw_3c8y4_316:not(#\9) {
+.awsui_header_mx3cw_1x3zi_387:not(#\9),
+.awsui_header-replacement_mx3cw_1x3zi_388:not(#\9) {
   font-weight: var(--font-weight-alert-header-ym3e4s, 700);
 }
-.awsui_action_mx3cw_3c8y4_320:not(#\9) {
+.awsui_action_mx3cw_1x3zi_392:not(#\9) {
   white-space: nowrap;
 }
-.awsui_action-slot_mx3cw_3c8y4_324:not(#\9),
-.awsui_action-button_mx3cw_3c8y4_325:not(#\9) {
+.awsui_action-slot_mx3cw_1x3zi_396:not(#\9),
+.awsui_action-button_mx3cw_1x3zi_397:not(#\9) {
   /* used in test-utils */
 }
-.awsui_alert-focus-wrapper_mx3cw_3c8y4_329:not(#\9) {
+.awsui_alert-focus-wrapper_mx3cw_1x3zi_401:not(#\9) {
   flex: 1;
   min-inline-size: 70%;
   display: grid;
   grid-template-columns: min-content auto;
 }
-.awsui_alert-focus-wrapper_mx3cw_3c8y4_329:not(#\9):focus {
+.awsui_alert-focus-wrapper_mx3cw_1x3zi_401:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_3c8y4_329:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_1x3zi_401:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_3c8y4_329:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_1x3zi_401:not(#\9):focus {
   outline: 2px dotted transparent;
-  outline-offset: calc(var(--space-button-focus-outline-gutter-dzjnny, 3px) - 1px);
+  outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_3c8y4_329:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_1x3zi_401:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
-  inset-inline-start: calc(-1 * var(--space-button-focus-outline-gutter-dzjnny, 3px));
-  inset-block-start: calc(-1 * var(--space-button-focus-outline-gutter-dzjnny, 3px));
-  inline-size: calc(100% + var(--space-button-focus-outline-gutter-dzjnny, 3px) + var(--space-button-focus-outline-gutter-dzjnny, 3px));
-  block-size: calc(100% + var(--space-button-focus-outline-gutter-dzjnny, 3px) + var(--space-button-focus-outline-gutter-dzjnny, 3px));
-  border-start-start-radius: var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-start-end-radius: var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-start-radius: var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-end-radius: var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  box-shadow: var(--awsui-alert-focus-ring-box-shadow-esndbs);
+  inset-inline-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
+  inset-block-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-block, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
+  inline-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)) + var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
+  block-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-block, var(--space-button-focus-outline-gutter-dzjnny, 3px)) + var(--awsui-internal-style-focus-ring-gutter-block, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
+  border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-alert-focus-ring-border-width-esndbs, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-alert-focus-ring-border-color-esndbs, var(--color-border-item-focused-sewkzn, #0073bb)));
+}
+/* awsui:style-api-slot name=icon tokens=color */
+.awsui_icon_mx3cw_1x3zi_433:not(#\9) {
+  --awsui-internal-style-color: var(--awsui-style-color);
 }
-.awsui_text_mx3cw_3c8y4_360:not(#\9) {
+.awsui_text_mx3cw_1x3zi_437:not(#\9) {
   min-inline-size: 0;
   padding-block: var(--border-width-button-lffd4t, 1px);
   padding-inline: 0;
   margin-block: var(--space-scaled-xxs-j00t0m, 4px);
   margin-inline: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_text_mx3cw_3c8y4_360.awsui_icon_mx3cw_3c8y4_367:not(#\9) {
+.awsui_text_mx3cw_1x3zi_437.awsui_icon_mx3cw_1x3zi_433:not(#\9) {
   margin-inline-start: 0;
 }
-.awsui_text_mx3cw_3c8y4_360.awsui_message_mx3cw_3c8y4_370:not(#\9) {
+.awsui_text_mx3cw_1x3zi_437.awsui_message_mx3cw_1x3zi_447:not(#\9) {
   margin-inline-end: var(--space-alert-message-right-3i2sx2, 0px);
 }
-.awsui_action-wrapped_mx3cw_3c8y4_374:not(#\9) {
+.awsui_action-wrapped_mx3cw_1x3zi_451:not(#\9) {
   margin-block-end: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_icon-size-medium_mx3cw_3c8y4_378 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_action-wrapped_mx3cw_3c8y4_374:not(#\9) {
+.awsui_icon-size-medium_mx3cw_1x3zi_455 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_action-wrapped_mx3cw_1x3zi_451:not(#\9) {
   margin-inline-start: calc(var(--size-icon-medium-0cbske, 16px) + var(--space-xs-m9b7jf, 8px));
 }
-.awsui_icon-size-big_mx3cw_3c8y4_382 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_action-wrapped_mx3cw_3c8y4_374:not(#\9) {
+.awsui_icon-size-big_mx3cw_1x3zi_459 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_action-wrapped_mx3cw_1x3zi_451:not(#\9) {
   margin-inline-start: calc(var(--size-icon-big-z6z1yl, 32px) + var(--space-xs-m9b7jf, 8px));
 }
-.awsui_icon-size-normal_mx3cw_3c8y4_386 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_action-wrapped_mx3cw_3c8y4_374:not(#\9) {
+.awsui_icon-size-normal_mx3cw_1x3zi_463 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_action-wrapped_mx3cw_1x3zi_451:not(#\9) {
   margin-inline-start: calc(var(--size-icon-normal-311gry, 16px) + var(--space-xs-m9b7jf, 8px));
 }
-.awsui_content_mx3cw_3c8y4_390:not(#\9),
-.awsui_content-replacement_mx3cw_3c8y4_391:not(#\9) {
+.awsui_content_mx3cw_1x3zi_467:not(#\9),
+.awsui_content-replacement_mx3cw_1x3zi_468:not(#\9) {
   /* used in test-utils */
 }
-.awsui_dismiss_mx3cw_3c8y4_395:not(#\9) {
+.awsui_dismiss_mx3cw_1x3zi_472:not(#\9) {
   margin-inline-end: calc(-1 * var(--space-xxs-3o1yoq, 4px));
   margin-inline-start: var(--space-s-kll7oj, 12px);
 }
-.awsui_dismiss-button_mx3cw_3c8y4_400:not(#\9) {
+/* awsui:style-api-slot name=dismissButton component=button slot=root */
+.awsui_dismiss-button_mx3cw_1x3zi_478:not(#\9) {
   /* used in test-utils */
 }
-.awsui_type-error_mx3cw_3c8y4_404:not(#\9) {
-  border-color: var(--color-border-status-error-nczvil, #d13212);
-  background-color: var(--color-background-alert-error-dpj69i, #fdf3f1);
+.awsui_type-error_mx3cw_1x3zi_482:not(#\9) {
+  border-color: var(--awsui-internal-style-border-color, var(--color-border-status-error-nczvil, #d13212));
+  background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-error-dpj69i, #fdf3f1));
 }
-.awsui_type-error_mx3cw_3c8y4_404 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_alert-focus-wrapper_mx3cw_3c8y4_329 > .awsui_icon_mx3cw_3c8y4_367:not(#\9) {
-  color: var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-error-6ivbnd, #d13212));
+.awsui_type-error_mx3cw_1x3zi_482 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_alert-focus-wrapper_mx3cw_1x3zi_401 > .awsui_icon_mx3cw_1x3zi_433:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-error-6ivbnd, #d13212)));
 }
-.awsui_type-warning_mx3cw_3c8y4_412:not(#\9) {
-  border-color: var(--color-border-status-warning-zj1tu9, #906806);
-  background-color: var(--color-background-alert-warning-021z3n, #fffef0);
+.awsui_type-warning_mx3cw_1x3zi_490:not(#\9) {
+  border-color: var(--awsui-internal-style-border-color, var(--color-border-status-warning-zj1tu9, #906806));
+  background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-warning-021z3n, #fffef0));
 }
-.awsui_type-warning_mx3cw_3c8y4_412 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_alert-focus-wrapper_mx3cw_3c8y4_329 > .awsui_icon_mx3cw_3c8y4_367:not(#\9) {
-  color: var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-warning-lan9qr, #906806));
+.awsui_type-warning_mx3cw_1x3zi_490 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_alert-focus-wrapper_mx3cw_1x3zi_401 > .awsui_icon_mx3cw_1x3zi_433:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-warning-lan9qr, #906806)));
 }
-.awsui_type-success_mx3cw_3c8y4_420:not(#\9) {
-  border-color: var(--color-border-status-success-zsy8d6, #1d8102);
-  background-color: var(--color-background-alert-success-9dyn87, #f2f8f0);
+.awsui_type-success_mx3cw_1x3zi_498:not(#\9) {
+  border-color: var(--awsui-internal-style-border-color, var(--color-border-status-success-zsy8d6, #1d8102));
+  background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-success-9dyn87, #f2f8f0));
 }
-.awsui_type-success_mx3cw_3c8y4_420 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_alert-focus-wrapper_mx3cw_3c8y4_329 > .awsui_icon_mx3cw_3c8y4_367:not(#\9) {
-  color: var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-success-1ldpm2, #1d8102));
+.awsui_type-success_mx3cw_1x3zi_498 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_alert-focus-wrapper_mx3cw_1x3zi_401 > .awsui_icon_mx3cw_1x3zi_433:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-success-1ldpm2, #1d8102)));
 }
-.awsui_type-info_mx3cw_3c8y4_428:not(#\9) {
-  border-color: var(--color-border-status-info-e5c14y, #0073bb);
-  background-color: var(--color-background-alert-info-lqhdg0, #f1faff);
+.awsui_type-info_mx3cw_1x3zi_506:not(#\9) {
+  border-color: var(--awsui-internal-style-border-color, var(--color-border-status-info-e5c14y, #0073bb));
+  background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-info-lqhdg0, #f1faff));
 }
-.awsui_type-info_mx3cw_3c8y4_428 > .awsui_alert-wrapper_mx3cw_3c8y4_298 > .awsui_alert-focus-wrapper_mx3cw_3c8y4_329 > .awsui_icon_mx3cw_3c8y4_367:not(#\9) {
-  color: var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-info-ud5q0o, #0073bb));
+.awsui_type-info_mx3cw_1x3zi_506 > .awsui_alert-wrapper_mx3cw_1x3zi_370 > .awsui_alert-focus-wrapper_mx3cw_1x3zi_401 > .awsui_icon_mx3cw_1x3zi_433:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-esndbs, var(--color-text-alert-icon-info-ud5q0o, #0073bb)));
 }

package/lib/internal/template/alert/styles.selectors.js CHANGED Viewed

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "alert": "awsui_alert_mx3cw_3c8y4_189",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_3c8y4_1",
-  "root": "awsui_root_mx3cw_3c8y4_211",
-  "hidden": "awsui_hidden_mx3cw_3c8y4_246",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_3c8y4_298",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_3c8y4_310",
-  "header": "awsui_header_mx3cw_3c8y4_315",
-  "header-replacement": "awsui_header-replacement_mx3cw_3c8y4_316",
-  "action": "awsui_action_mx3cw_3c8y4_320",
-  "action-slot": "awsui_action-slot_mx3cw_3c8y4_324",
-  "action-button": "awsui_action-button_mx3cw_3c8y4_325",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_3c8y4_329",
-  "text": "awsui_text_mx3cw_3c8y4_360",
-  "icon": "awsui_icon_mx3cw_3c8y4_367",
-  "message": "awsui_message_mx3cw_3c8y4_370",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_3c8y4_374",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_3c8y4_378",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_3c8y4_382",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_3c8y4_386",
-  "content": "awsui_content_mx3cw_3c8y4_390",
-  "content-replacement": "awsui_content-replacement_mx3cw_3c8y4_391",
-  "dismiss": "awsui_dismiss_mx3cw_3c8y4_395",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_3c8y4_400",
-  "type-error": "awsui_type-error_mx3cw_3c8y4_404",
-  "type-warning": "awsui_type-warning_mx3cw_3c8y4_412",
-  "type-success": "awsui_type-success_mx3cw_3c8y4_420",
-  "type-info": "awsui_type-info_mx3cw_3c8y4_428"
+  "alert": "awsui_alert_mx3cw_1x3zi_201",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1x3zi_1",
+  "root": "awsui_root_mx3cw_1x3zi_272",
+  "hidden": "awsui_hidden_mx3cw_1x3zi_307",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_1x3zi_370",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_1x3zi_382",
+  "header": "awsui_header_mx3cw_1x3zi_387",
+  "header-replacement": "awsui_header-replacement_mx3cw_1x3zi_388",
+  "action": "awsui_action_mx3cw_1x3zi_392",
+  "action-slot": "awsui_action-slot_mx3cw_1x3zi_396",
+  "action-button": "awsui_action-button_mx3cw_1x3zi_397",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1x3zi_401",
+  "icon": "awsui_icon_mx3cw_1x3zi_433",
+  "text": "awsui_text_mx3cw_1x3zi_437",
+  "message": "awsui_message_mx3cw_1x3zi_447",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_1x3zi_451",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1x3zi_455",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_1x3zi_459",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1x3zi_463",
+  "content": "awsui_content_mx3cw_1x3zi_467",
+  "content-replacement": "awsui_content-replacement_mx3cw_1x3zi_468",
+  "dismiss": "awsui_dismiss_mx3cw_1x3zi_472",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_1x3zi_478",
+  "type-error": "awsui_type-error_mx3cw_1x3zi_482",
+  "type-warning": "awsui_type-warning_mx3cw_1x3zi_490",
+  "type-success": "awsui_type-success_mx3cw_1x3zi_498",
+  "type-info": "awsui_type-info_mx3cw_1x3zi_506"
 };

package/lib/internal/template/badge/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;~~AAEtB~~,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,~~eAmBvG~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAOtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAoBvG"}

package/lib/internal/template/badge/index.js CHANGED Viewed

@@ -12,7 +12,8 @@ import styles from './styles.css.js';
 export default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }) {
     const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
     const baseProps = getBaseProps(rest);
-    const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
+    const { styleClassNames } = rest;
+    const className = clsx(baseProps.className, styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.root, styles.badge, styles[`badge-color-${color}`]);
     return (React.createElement(WithNativeAttributes, { ...baseProps, tag: "span", componentName: "Badge", nativeAttributes: nativeAttributes, className: className, ref: __internalRootRef, style: getBadgeStyles(style) }, children));
 }
 applyDisplayName(Badge, 'Badge');

package/lib/internal/template/badge/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;~~AAIrC~~,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAc;IACtG,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;~~IAErC~~,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC;~~IAE1F~~,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,OAAO,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAE3B,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BadgeProps } from './interfaces';\nimport { getBadgeStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport { BadgeProps };\n\nexport default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }: BadgeProps) {\n const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });\n const baseProps = getBaseProps(rest);\n\n const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);\n\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"Badge\"\n nativeAttributes={nativeAttributes}\n className={className}\n ref={__internalRootRef}\n style={getBadgeStyles(style)}\n >\n {children}\n </WithNativeAttributes>\n );\n}\n\napplyDisplayName(Badge, 'Badge');\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAc;IACtG,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,EAAE,eAAe,EAAE,GAAG,IAA6C,CAAC;IAE1E,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC,CAAC;IAEjH,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,OAAO,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,IAE3B,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BadgeProps } from './interfaces';\nimport { getBadgeStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport { BadgeProps };\n\n// Style API v2\ninterface StyleClassNames {\n root?: string;\n}\n\nexport default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }: BadgeProps) {\n const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });\n const baseProps = getBaseProps(rest);\n const { styleClassNames } = rest as { styleClassNames?: StyleClassNames };\n\n const className = clsx(baseProps.className, styleClassNames?.root, styles.badge, styles[`badge-color-${color}`]);\n\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"Badge\"\n nativeAttributes={nativeAttributes}\n className={className}\n ref={__internalRootRef}\n style={getBadgeStyles(style)}\n >\n {children}\n </WithNativeAttributes>\n );\n}\n\napplyDisplayName(Badge, 'Badge');\n"]}

package/lib/internal/template/badge/styles.css.js CHANGED Viewed

@@ -1,15 +1,15 @@
     import './styles.scoped.css';
     export default {
-  "badge": "awsui_badge_1yjyg_152sz_141",
-  "badge-color-grey": "awsui_badge-color-grey_1yjyg_152sz_187",
-  "badge-color-green": "awsui_badge-color-green_1yjyg_152sz_192",
-  "badge-color-blue": "awsui_badge-color-blue_1yjyg_152sz_197",
-  "badge-color-red": "awsui_badge-color-red_1yjyg_152sz_202",
-  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_152sz_207",
-  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_152sz_212",
-  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_152sz_217",
-  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_152sz_222",
-  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_152sz_227"
+  "badge": "awsui_badge_1yjyg_v5jxh_178",
+  "badge-color-grey": "awsui_badge-color-grey_1yjyg_v5jxh_224",
+  "badge-color-green": "awsui_badge-color-green_1yjyg_v5jxh_229",
+  "badge-color-blue": "awsui_badge-color-blue_1yjyg_v5jxh_234",
+  "badge-color-red": "awsui_badge-color-red_1yjyg_v5jxh_239",
+  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_v5jxh_244",
+  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_v5jxh_249",
+  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_v5jxh_254",
+  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_v5jxh_259",
+  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_v5jxh_264"
 };

package/lib/internal/template/badge/styles.scoped.css CHANGED Viewed

@@ -138,7 +138,44 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_badge_1yjyg_152sz_141:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@property --awsui-style-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-background-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+/* awsui:style-api-slot name=root tokens=color, background-color, border-color, border-width, border-radius, padding-block, padding-inline */
+.awsui_badge_1yjyg_v5jxh_178:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -173,59 +210,59 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-dzcybc, normal);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   display: inline-block;
-  border-start-start-radius: var(--border-radius-badge-86n91d, 16px);
-  border-start-end-radius: var(--border-radius-badge-86n91d, 16px);
-  border-end-start-radius: var(--border-radius-badge-86n91d, 16px);
-  border-end-end-radius: var(--border-radius-badge-86n91d, 16px);
+  border-start-start-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
+  border-start-end-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
+  border-end-start-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
+  border-end-end-radius: var(--awsui-style-border-radius, var(--border-radius-badge-86n91d, 16px));
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: var(--border-width-badge-p88itr, 0px);
-  padding-block: 0;
-  padding-inline: var(--space-xs-m9b7jf, 8px);
-  color: var(--color-text-notification-default-j0vb8v, #fafafa);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-grey_1yjyg_152sz_187:not(#\9) {
-  background-color: var(--color-background-badge-grey-6h1dmu, #545b64);
-  border-color: var(--color-border-badge-grey-7uvo1l, transparent);
-  color: var(--color-text-badge-grey-9tpmmu, #fafafa);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-green_1yjyg_152sz_192:not(#\9) {
-  background-color: var(--color-background-badge-green-vna6pb, #1d8102);
-  border-color: var(--color-border-badge-green-lv2jw1, transparent);
-  color: var(--color-text-badge-green-5g7a8n, #fafafa);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-blue_1yjyg_152sz_197:not(#\9) {
-  background-color: var(--color-background-badge-blue-knlb4f, #0073bb);
-  border-color: var(--color-border-badge-blue-ze81zs, transparent);
-  color: var(--color-text-badge-blue-r39mon, #fafafa);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-red_1yjyg_152sz_202:not(#\9) {
-  background-color: var(--color-background-badge-red-4ap748, #d13212);
-  border-color: var(--color-border-badge-red-5xqfzk, transparent);
-  color: var(--color-text-badge-red-wvf8rj, #fafafa);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-severity-critical_1yjyg_152sz_207:not(#\9) {
-  background-color: var(--color-background-notification-severity-critical-bklmxp, #870303);
-  color: var(--color-text-badge-severity-critical-y13z63, #fafafa);
-  border-color: var(--color-border-badge-severity-critical-iy9xj7, transparent);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-severity-high_1yjyg_152sz_212:not(#\9) {
-  background-color: var(--color-background-notification-severity-high-44r6oe, #ce3311);
-  color: var(--color-text-badge-severity-high-kckiuo, #fafafa);
-  border-color: var(--color-border-badge-severity-high-byl1dx, transparent);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-severity-medium_1yjyg_152sz_217:not(#\9) {
-  background-color: var(--color-background-notification-severity-medium-87oafh, #f89256);
-  color: var(--color-text-badge-severity-medium-ns9l4d, #000000);
-  border-color: var(--color-border-badge-severity-medium-7z1far, transparent);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-severity-low_1yjyg_152sz_222:not(#\9) {
-  background-color: var(--color-background-notification-severity-low-g8anka, #f2cd54);
-  color: var(--color-text-badge-severity-low-pnvr07, #16191f);
-  border-color: var(--color-border-badge-severity-low-jxgtiz, transparent);
-}
-.awsui_badge_1yjyg_152sz_141.awsui_badge-color-severity-neutral_1yjyg_152sz_227:not(#\9) {
-  background-color: var(--color-background-notification-severity-neutral-2smv4l, #687078);
-  color: var(--color-text-badge-severity-neutral-vz3r3d, #fafafa);
-  border-color: var(--color-border-badge-severity-neutral-p51wlk, transparent);
+  border-width: var(--awsui-style-border-width, var(--border-width-badge-p88itr, 0px));
+  padding-block: var(--awsui-style-padding-block, 0);
+  padding-inline: var(--awsui-style-padding-inline, var(--space-xs-m9b7jf, 8px));
+  color: var(--awsui-style-color, var(--color-text-notification-default-j0vb8v, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-grey_1yjyg_v5jxh_224:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-grey-6h1dmu, #545b64));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-grey-7uvo1l, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-grey-9tpmmu, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-green_1yjyg_v5jxh_229:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-green-vna6pb, #1d8102));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-green-lv2jw1, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-green-5g7a8n, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-blue_1yjyg_v5jxh_234:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-blue-knlb4f, #0073bb));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-blue-ze81zs, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-blue-r39mon, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-red_1yjyg_v5jxh_239:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-badge-red-4ap748, #d13212));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-red-5xqfzk, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-red-wvf8rj, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-critical_1yjyg_v5jxh_244:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-critical-bklmxp, #870303));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-critical-iy9xj7, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-critical-y13z63, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-high_1yjyg_v5jxh_249:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-high-44r6oe, #ce3311));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-high-byl1dx, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-high-kckiuo, #fafafa));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-medium_1yjyg_v5jxh_254:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-medium-87oafh, #f89256));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-medium-7z1far, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-medium-ns9l4d, #000000));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-low_1yjyg_v5jxh_259:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-low-g8anka, #f2cd54));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-low-jxgtiz, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-low-pnvr07, #16191f));
+}
+.awsui_badge_1yjyg_v5jxh_178.awsui_badge-color-severity-neutral_1yjyg_v5jxh_264:not(#\9) {
+  background-color: var(--awsui-style-background-color, var(--color-background-notification-severity-neutral-2smv4l, #687078));
+  border-color: var(--awsui-style-border-color, var(--color-border-badge-severity-neutral-p51wlk, transparent));
+  color: var(--awsui-style-color, var(--color-text-badge-severity-neutral-vz3r3d, #fafafa));
 }