chore: Styling API experiment

pages/alert/styling.page.tsx

@@ -0,0 +1,50 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Box, Checkbox } from '~components';
+import InternalAlert from '~components/alert/internal';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+import SpaceBetween from '~components/space-between';
+
+import { i18nStrings } from './common';
+
+export default function AlertStyling() {
+  const [stylesOn, setStylesOn] = useState(true);
+  return (
+    <I18nProvider messages={[messages]} locale="en">
+      <Box margin="m">
+        <SpaceBetween size="s">
+          <Checkbox checked={stylesOn} onChange={({ detail }) => setStylesOn(detail.checked)}>
+            Styles on
+          </Checkbox>
+          <Box>Changing colors hover</Box>
+          <InternalAlert
+            type="info"
+            header="Header text"
+            i18nStrings={i18nStrings}
+            dismissible={true}
+            style={
+              stylesOn
+                ? {
+                    alert: { css: { backgroundColor: 'lightpink', borderColor: 'deeppink', color: 'deeppink' } },
+                    icon: { css: { color: 'deeppink' } },
+                    dismissButton: { css: { color: 'deeppink' } },
+                    ['alert:hover']: {
+                      css: { backgroundColor: 'deeppink', color: 'white' },
+                      icon: { css: { color: 'white' } },
+                      dismissButton: { css: { color: 'white' } },
+                    },
+                  }
+                : undefined
+            }
+          >
+            Body text
+          </InternalAlert>
+        </SpaceBetween>
+      </Box>
+    </I18nProvider>
+  );
+}

src/alert/internal.tsx

@@ -39,8 +39,34 @@ const typeToIcon: Record<AlertProps.Type, IconProps['name']> = {
 type InternalAlertProps = SomeRequired<AlertProps, 'type'> &
   InternalBaseComponentProps<HTMLDivElement> & {
     messageSlotId?: string;
+    style?: Style;
   };
 
+interface Style {
+  alert?: { css?: StyleAlertCss };
+  'alert:hover'?: {
+    css?: StyleAlertCss;
+    icon?: { css?: StyleAlertIconCss };
+    dismissButton?: { css?: StyleAlertDismissIconCss };
+  };
+  icon?: { css?: StyleAlertIconCss };
+  dismissButton?: { css?: StyleAlertDismissIconCss };
+}
+
+interface StyleAlertCss {
+  backgroundColor?: string;
+  borderColor?: string;
+  color?: string;
+}
+
+interface StyleAlertIconCss {
+  color?: string;
+}
+
+interface StyleAlertDismissIconCss {
+  color?: string;
+}
+
 const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);
 const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
 
@@ -61,6 +87,7 @@ const InternalAlert = React.forwardRef(
       statusIconAriaLabel: deprecatedStatusIconAriaLabel,
       dismissAriaLabel: deprecatedDismissAriaLabel,
       messageSlotId,
+      style,
       ...rest
     }: InternalAlertProps,
     ref: React.Ref<AlertProps.Ref>
@@ -132,6 +159,19 @@ const InternalAlert = React.forwardRef(
                 hasAction && styles['with-action'],
                 dismissible && styles['with-dismiss']
               )}
+              style={{
+                '--awsui-alert-alert-bg': style?.alert?.css?.backgroundColor ?? '',
+                '--awsui-alert-hover-alert-bg':
+                  style?.['alert:hover']?.css?.backgroundColor ?? style?.alert?.css?.backgroundColor ?? '',
+                '--awsui-alert-alert-color': style?.alert?.css?.color ?? '',
+                '--awsui-alert-hover-alert-color': style?.['alert:hover']?.css?.color ?? style?.alert?.css?.color ?? '',
+                '--awsui-alert-alert-border': style?.alert?.css?.borderColor ?? '',
+                '--awsui-alert-hover-alert-border':
+                  style?.['alert:hover']?.css?.borderColor ?? style?.alert?.css?.borderColor ?? '',
+                '--awsui-alert-icon-color': style?.icon?.css?.color ?? '',
+                '--awsui-alert-hover-icon-color':
+                  style?.['alert:hover']?.icon?.css?.color ?? style?.icon?.css?.color ?? '',
+              }}
             >
               <div className={styles['alert-wrapper']}>
                 <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
@@ -190,6 +230,11 @@ const InternalAlert = React.forwardRef(
                   {...getAnalyticsMetadataAttribute({
                     action: 'dismiss',
                   } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}
+                  style={{
+                    '--awsui-button-button-color': style?.dismissButton?.css?.color ?? '',
+                    '--awsui-alert-hover-button-color':
+                      style?.['alert:hover']?.dismissButton?.css?.color ?? style?.dismissButton?.css?.color ?? '',
+                  }}
                 >
                   <InternalButton
                     className={styles['dismiss-button']}

src/alert/styles.scss

@@ -34,6 +34,12 @@
   padding-block: awsui.$space-alert-vertical;
   padding-inline: awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
+
+  &:hover {
+    .dismiss-button {
+      --awsui-button-button-color: var(--awsui-alert-hover-button-color);
+    }
+  }
 }
 
 .alert-wrapper {
@@ -147,10 +153,19 @@ $_text-colors: (
 
 @each $type in map.keys($_text-colors) {
   .type-#{$type} {
-    border-color: #{map.get($_border-colors, $type)};
-    background-color: #{map.get($_background-colors, $type)};
+    border-color: var(--awsui-alert-alert-border, #{map.get($_border-colors, $type)});
+    background-color: var(--awsui-alert-alert-bg, #{map.get($_background-colors, $type)});
+    color: var(--awsui-alert-alert-color);
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: #{map.get($_text-colors, $type)};
+      color: var(--awsui-alert-icon-color, #{map.get($_text-colors, $type)});
+    }
+    &:hover {
+      border-color: var(--awsui-alert-hover-alert-border, #{map.get($_border-colors, $type)});
+      background-color: var(--awsui-alert-hover-alert-bg, #{map.get($_background-colors, $type)});
+      color: var(--awsui-alert-hover-alert-color);
+      > .alert-wrapper > .alert-focus-wrapper > .icon {
+        color: var(--awsui-alert-hover-icon-color, #{map.get($_text-colors, $type)});
+      }
     }
   }
 }

src/button/styles.scss

@@ -11,7 +11,7 @@
 
 @mixin adjust-for-variant($variant) {
   background: map.get($variant, 'default-background');
-  color: map.get($variant, 'default-color');
+  color: var(--awsui-button-button-color, #{map.get($variant, 'default-color')});
   border-color: map.get($variant, 'default-border-color');
   border-block-width: map.get($variant, 'border-width');
   border-inline-width: map.get($variant, 'border-width');
@@ -23,21 +23,21 @@
 
   &:hover {
     background: map.get($variant, 'hover-background');
-    color: map.get($variant, 'hover-color');
+    color: var(--awsui-button-hover-button-color, #{map.get($variant, 'hover-color')});
     border-color: map.get($variant, 'hover-border-color');
     text-decoration: none;
   }
 
   &:active {
     background: map.get($variant, 'active-background');
-    color: map.get($variant, 'active-color');
+    color: var(--awsui-button-active-button-color, #{map.get($variant, 'active-color')});
     border-color: map.get($variant, 'active-border-color');
   }
 
   &.disabled {
     background: map.get($variant, 'disabled-background');
     border-color: map.get($variant, 'disabled-border-color');
-    color: map.get($variant, 'disabled-color');
+    color: var(--awsui-button-disabled-button-color, #{map.get($variant, 'disabled-color')});
     text-decoration: none;
     cursor: auto;
   }