chore: Implement one-theme icon

src/button-dropdown/internal.tsx

@@ -3,13 +3,14 @@
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import clsx from 'clsx';
 
-import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { isThemeActive, Theme, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalBox from '../box/internal';
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton, InternalButtonProps } from '../button/internal';
 import Dropdown from '../dropdown/internal';
+import { IconProps } from '../icon/interfaces';
 import { useFunnel } from '../internal/analytics/hooks/use-funnel.js';
 import { getBaseProps } from '../internal/base-component';
 import OptionsList from '../internal/components/options-list';
@@ -141,13 +142,14 @@ const InternalButtonDropdown = React.forwardRef(
     const canBeFullWidth = !!fullWidth && (variant === 'primary' || variant === 'normal');
 
     const triggerVariant = variant === 'navigation' ? undefined : variant === 'inline-icon' ? 'inline-icon' : variant;
-    const iconProps: Partial<ButtonProps & { __iconClass?: string }> =
+    const iconProps: Partial<ButtonProps & { __iconClass?: string; __iconSize?: IconProps.Size }> =
       variant === 'icon' || variant === 'inline-icon'
         ? {
             iconName: 'ellipsis',
           }
         : {
-            iconName: 'caret-down-filled',
+            iconName: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled',
+            __iconSize: isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal',
             iconAlign: 'right',
             __iconClass: spinWhenOpen(styles, 'rotate', canBeOpened && isOpen),
           };

src/button-dropdown/styles.scss

@@ -50,6 +50,8 @@ $dropdown-trigger-icon-offset: 2px;
 }
 
 .trigger-button {
+  display: flex;
+  align-items: center;
   &.full-width {
     display: grid;
     grid-template-columns: 1fr auto;

src/button/internal.tsx

@@ -11,6 +11,7 @@ import {
 } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { useInternalI18n } from '../i18n/context';
+import { IconProps } from '../icon/interfaces';
 import Icon from '../icon/internal';
 import { FunnelMetrics } from '../internal/analytics';
 import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
@@ -51,6 +52,7 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   badge?: boolean;
   analyticsAction?: string;
   __iconClass?: string;
+  __iconSize?: IconProps.Size;
   __focusable?: boolean;
   __injectAnalyticsComponentMetadata?: boolean;
   __title?: string;
@@ -64,6 +66,7 @@ export const InternalButton = React.forwardRef(
       children,
       iconName,
       __iconClass,
+      __iconSize,
       onClick,
       onFollow,
       iconAlign = 'left',
@@ -237,7 +240,7 @@ export const InternalButton = React.forwardRef(
       variant,
       badge,
       iconClass: __iconClass,
-      iconSize: variant === 'modal-dismiss' ? 'medium' : 'normal',
+      iconSize: __iconSize ?? (variant === 'modal-dismiss' ? 'medium' : 'normal'),
     };
     const buttonContent = (
       <>

src/expandable-section/expandable-section-header.tsx

@@ -3,7 +3,7 @@
 import React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 import clsx from 'clsx';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { isThemeActive, Theme, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalHeader, { Description as HeaderDescription } from '../header/internal';
@@ -108,7 +108,15 @@ const ExpandableDeprecatedHeader = ({
       aria-expanded={expanded}
       {...getExpandActionAnalyticsMetadataAttribute(expanded)}
     >
-      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>
+      <div
+        className={clsx(
+          styles['icon-container'],
+          styles[`icon-container-${variant}`],
+          isThemeActive(Theme.OneTheme) && styles['one-theme']
+        )}
+      >
+        {icon}
+      </div>
       {children}
     </div>
   );
@@ -201,7 +209,15 @@ const ExpandableHeaderTextWrapper = ({
       {...headerButtonListeners}
       {...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}
     >
-      <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>
+      <span
+        className={clsx(
+          styles['icon-container'],
+          styles[`icon-container-${variant}`],
+          isThemeActive(Theme.OneTheme) && styles['one-theme']
+        )}
+      >
+        {icon}
+      </span>
       <span id={id} className={clsx(styles['header-text'], analyticsSelectors['header-label'])}>
         {children}
       </span>
@@ -267,9 +283,9 @@ export const ExpandableSectionHeader = ({
   const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;
   const icon = (
     <InternalIcon
-      size={variant === 'container' ? 'medium' : 'normal'}
+      size={isThemeActive(Theme.OneTheme) ? 'x-small' : variant === 'container' ? 'medium' : 'normal'}
       className={clsx(styles.icon, expanded && styles.expanded)}
-      name="caret-down-filled"
+      name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}
     />
   );
   const defaultHeaderProps = {

src/expandable-section/styles.scss

@@ -14,6 +14,7 @@ $icon-width-medium: awsui.$size-icon-medium;
 $icon-margin-left: '(#{awsui.$line-height-body-m} - #{$icon-width-normal}) / -2';
 $icon-margin-right-normal: '#{awsui.$space-xxs} + #{awsui.$border-divider-list-width}';
 $icon-margin-right-medium: awsui.$space-xs;
+$icon-offset: awsui.$space-xxxs;
 
 // Total space occupied by the expand icon on the left and its margins.
 // Useful to keep elements correctly aligned.
@@ -52,6 +53,18 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   // For vertical alignment of text in side navigation items
   &-container {
     margin-inline-end: $icon-margin-right-medium;
+    &.one-theme {
+      > .icon {
+        inset-block-start: calc(#{$icon-offset} * 3);
+      }
+    }
+  }
+  &.one-theme {
+    display: inline-flex;
+    align-items: flex-start;
+    > .icon {
+      inset-block-start: $icon-offset;
+    }
   }
 }
 

src/internal/components/button-trigger/index.tsx

@@ -3,6 +3,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import clsx from 'clsx';
 
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalIcon from '../../../icon/internal';
@@ -129,8 +130,12 @@ const ButtonTrigger = (
     >
       {children}
       {!hideCaret && (
-        <span className={styles.arrow}>
-          <InternalIcon name="caret-down-filled" variant={disabled || readOnly ? 'disabled' : 'normal'} />
+        <span className={clsx(styles.arrow, isThemeActive(Theme.OneTheme) && styles['one-theme'])}>
+          <InternalIcon
+            name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}
+            size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}
+            variant={disabled || readOnly ? 'disabled' : 'normal'}
+          />
         </span>
       )}
     </button>

src/internal/components/button-trigger/styles.scss

@@ -12,6 +12,7 @@
 
 $padding-inline-inner-filtering-token: styles.$control-padding-horizontal;
 $padding-block-inner-filtering-token: 0px;
+$icon-offset: awsui.$space-xxxs;
 
 .button-trigger {
   @include styles.styles-reset;
@@ -69,6 +70,9 @@ $padding-block-inner-filtering-token: 0px;
     inset-inline-end: styles.$control-icon-horizontal-offset;
     inset-block-start: styles.$control-icon-vertical-offset;
     color: awsui.$color-text-button-inline-icon-default;
+    &.one-theme {
+      inset-block-start: calc(styles.$control-icon-vertical-offset + $icon-offset);
+    }
   }
 
   &:hover {
@@ -80,6 +84,9 @@ $padding-block-inner-filtering-token: 0px;
   &.pressed {
     > .arrow {
       transform: rotate(-180deg);
+      &.one-theme {
+        inset-block-start: calc(styles.$control-icon-vertical-offset - $icon-offset);
+      }
     }
   }
 

src/status-indicator/internal.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
+
 import { IconProps } from '../icon/interfaces';
 import InternalIcon from '../icon/internal';
 import { getBaseProps } from '../internal/base-component';
@@ -63,7 +65,11 @@ export function InternalStatusIcon({
 }: InternalStatusIconProps) {
   return (
     <span
-      className={clsx(styles.icon, animate && styles['icon-shake'])}
+      className={clsx(
+        styles.icon,
+        animate && styles['icon-shake'],
+        isThemeActive(Theme.OneTheme) && styles['one-theme']
+      )}
       aria-label={iconAriaLabel}
       role={iconAriaLabel ? 'img' : undefined}
     >
@@ -82,7 +88,7 @@ export default function StatusIndicator({
   nativeAttributes,
   __animate = false,
   __internalRootRef,
-  __size = 'normal',
+  __size = isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal',
   __display = 'inline-block',
   ...rest
 }: InternalStatusIndicatorProps) {
@@ -107,6 +113,7 @@ export default function StatusIndicator({
         className={clsx(
           styles.container,
           styles[`display-${__display}`],
+          isThemeActive(Theme.OneTheme) && styles['one-theme'],
           wrapText === false && styles['overflow-ellipsis'],
           __animate && styles['container-fade-in']
         )}

src/status-indicator/styles.scss

@@ -41,6 +41,14 @@ $_status-backgrounds: (
   'not-started': awsui.$color-background-status-indicator-neutral,
 );
 
+$_background-overrides: (
+  'red': awsui.$color-background-status-indicator-error,
+  'grey': awsui.$color-background-status-indicator-neutral,
+  'blue': awsui.$color-background-status-indicator-info,
+  'green': awsui.$color-background-status-indicator-success,
+  'yellow': awsui.$color-background-status-indicator-warning,
+);
+
 .root {
   @include styles.default-text-style;
   @each $status in map.keys($_status-colors) {
@@ -58,6 +66,11 @@ $_status-backgrounds: (
       background: #{map.get($_status-backgrounds, $status)};
     }
   }
+  @each $color in map.keys($_background-overrides) {
+    &.color-override-#{$color} > .container {
+      background: #{map.get($_background-overrides, $color)};
+    }
+  }
 }
 
 .container {
@@ -72,16 +85,29 @@ $_status-backgrounds: (
 
     > .icon {
       white-space: nowrap;
+      &.one-theme {
+        vertical-align: middle;
+      }
     }
   }
 
   &.display-inline-block {
     display: inline-block;
     word-wrap: break-word;
     word-break: break-all;
+    &.one-theme {
+      display: inline-flex;
+      align-items: flex-start;
+    }
 
     > .icon {
       padding-inline-end: awsui.$space-xxs;
+
+      &.one-theme {
+        display: inline-flex;
+        align-items: center;
+        margin-block-start: awsui.$space-xxxs;
+      }
     }
   }
 }
@@ -92,4 +118,14 @@ $_status-backgrounds: (
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: text-bottom;
+
+  &.one-theme {
+    text-overflow: unset;
+
+    > span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 }