@cloudscape-design/components-themeable 3.0.817 → 3.0.818

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\nimport { registerTooltip } from '../../../../internal/components/tooltip/registry';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent);\n\n        return () => {\n          wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);\n          wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  useEffect(() => {\n    if (tooltipVisible) {\n      return registerTooltip(() => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      });\n    }\n  }, [tooltipVisible]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles['trigger-button-styles'],\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n      >\n        <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>\n          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip trackRef={containerRef} value={tooltipValue} className={testutilStyles['trigger-tooltip']} />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\nimport { registerTooltip } from '../../../../internal/components/tooltip/registry';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent);\n\n        return () => {\n          wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);\n          wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  useEffect(() => {\n    if (tooltipVisible) {\n      return registerTooltip(() => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      });\n    }\n  }, [tooltipVisible]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles['trigger-button-styles'],\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n      >\n        <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>\n          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip trackRef={containerRef} value={tooltipValue} className={testutilStyles['trigger-tooltip']} />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -243,9 +243,9 @@
   --color-text-avatar-7icw2p:#ffffff;
   --color-background-loading-bar-gen-ai-p03hst:linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%);
   --color-background-chat-bubble-outgoing-7ajv6t:transparent;
-  --color-background-chat-bubble-incoming-b6y6od:#f2f3f3;
-  --color-text-chat-bubble-outgoing-kk7vbt:#545b64;
-  --color-text-chat-bubble-incoming-iw4zm4:#545b64;
+  --color-background-chat-bubble-incoming-g2lfei:#f2f3f3;
+  --color-text-chat-bubble-outgoing-a4whbc:#16191f;
+  --color-text-chat-bubble-incoming-wpxwg5:#16191f;
   --color-border-button-normal-active-vm8kc9:#545b64;
   --color-border-button-normal-default-g4ujwl:#545b64;
   --color-border-toggle-button-normal-pressed-dxcaaj:#545b64;
@@ -876,9 +876,9 @@
     --color-background-tiles-disabled-c21opp:#2a2e33;
     --color-background-toggle-checked-disabled-m1mknq:#0a4a74;
     --color-background-toggle-default-yhlddz:#879596;
-    --color-background-chat-bubble-incoming-b6y6od:#131920;
-    --color-text-chat-bubble-outgoing-kk7vbt:#d5dbdb;
-    --color-text-chat-bubble-incoming-iw4zm4:#d5dbdb;
+    --color-background-chat-bubble-incoming-g2lfei:#16191f;
+    --color-text-chat-bubble-outgoing-a4whbc:#d5dbdb;
+    --color-text-chat-bubble-incoming-wpxwg5:#d5dbdb;
     --color-border-button-normal-active-vm8kc9:#879596;
     --color-border-button-normal-default-g4ujwl:#879596;
     --color-border-toggle-button-normal-pressed-dxcaaj:#879596;
@@ -1191,9 +1191,9 @@
   --color-background-tiles-disabled-c21opp:#2a2e33;
   --color-background-toggle-checked-disabled-m1mknq:#0a4a74;
   --color-background-toggle-default-yhlddz:#879596;
-  --color-background-chat-bubble-incoming-b6y6od:#131920;
-  --color-text-chat-bubble-outgoing-kk7vbt:#d5dbdb;
-  --color-text-chat-bubble-incoming-iw4zm4:#d5dbdb;
+  --color-background-chat-bubble-incoming-g2lfei:#16191f;
+  --color-text-chat-bubble-outgoing-a4whbc:#d5dbdb;
+  --color-text-chat-bubble-incoming-wpxwg5:#d5dbdb;
   --color-border-button-normal-active-vm8kc9:#879596;
   --color-border-button-normal-default-g4ujwl:#879596;
   --color-border-toggle-button-normal-pressed-dxcaaj:#879596;
@@ -1333,6 +1333,8 @@
 }
 
 .awsui-context-flashbar:not(#\9) {
+  --color-text-chat-bubble-outgoing-a4whbc:#fafafa;
+  --color-text-chat-bubble-incoming-wpxwg5:#fafafa;
   --color-border-calendar-grid-3f7bvh:#fafafa;
   --color-border-calendar-grid-selected-focus-ring-faye0i:#fafafa;
   --color-border-container-divider-xr1vlc:#fafafa;
@@ -1404,6 +1406,8 @@
 }
 @media not print {
   .awsui-dark-mode .awsui-context-flashbar-warning:not(#\9) {
+    --color-text-chat-bubble-outgoing-a4whbc:#16191f;
+    --color-text-chat-bubble-incoming-wpxwg5:#16191f;
     --color-border-tabs-shadow-eb3y7s:rgba(0, 0, 0, 0.3);
     --color-text-body-default-agk00h:#16191f;
     --color-text-expandable-section-hover-4hvgvf:#16191f;
@@ -1411,6 +1415,8 @@
 }
 @media not print {
   .awsui-context-flashbar-warning.awsui-dark-mode:not(#\9) {
+    --color-text-chat-bubble-outgoing-a4whbc:#16191f;
+    --color-text-chat-bubble-incoming-wpxwg5:#16191f;
     --color-border-tabs-shadow-eb3y7s:rgba(0, 0, 0, 0.3);
     --color-text-body-default-agk00h:#16191f;
     --color-text-expandable-section-hover-4hvgvf:#16191f;
@@ -1525,9 +1531,9 @@
   --color-background-toggle-checked-disabled-m1mknq:#b8e7ff;
   --color-background-toggle-default-yhlddz:#424650;
   --color-background-avatar-default-mwwgjf:#424650;
-  --color-background-chat-bubble-incoming-b6y6od:#f3f3f7;
-  --color-text-chat-bubble-outgoing-kk7vbt:#424650;
-  --color-text-chat-bubble-incoming-iw4zm4:#424650;
+  --color-background-chat-bubble-incoming-g2lfei:#f3f3f7;
+  --color-text-chat-bubble-outgoing-a4whbc:#0f141a;
+  --color-text-chat-bubble-incoming-wpxwg5:#0f141a;
   --color-border-button-normal-active-vm8kc9:#002b66;
   --color-border-button-normal-default-g4ujwl:#006ce0;
   --color-border-toggle-button-normal-pressed-dxcaaj:#006ce0;
@@ -1894,9 +1900,9 @@
     --color-background-tiles-disabled-c21opp:#1b232d;
     --color-background-toggle-checked-disabled-m1mknq:#002b66;
     --color-background-toggle-default-yhlddz:#8c8c94;
-    --color-background-chat-bubble-incoming-b6y6od:#131920;
-    --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-    --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+    --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+    --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+    --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
     --color-border-button-normal-active-vm8kc9:#75cfff;
     --color-border-button-normal-default-g4ujwl:#42b4ff;
     --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -2171,8 +2177,9 @@
   --color-background-tiles-disabled-c21opp:#1b232d;
   --color-background-toggle-checked-disabled-m1mknq:#002b66;
   --color-background-toggle-default-yhlddz:#8c8c94;
-  --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-  --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+  --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+  --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+  --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
   --color-border-button-normal-active-vm8kc9:#75cfff;
   --color-border-button-normal-default-g4ujwl:#42b4ff;
   --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -2378,9 +2385,9 @@
   --color-background-tiles-disabled-c21opp:#1b232d;
   --color-background-toggle-checked-disabled-m1mknq:#002b66;
   --color-background-toggle-default-yhlddz:#8c8c94;
-  --color-background-chat-bubble-incoming-b6y6od:#131920;
-  --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-  --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+  --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+  --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+  --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
   --color-border-button-normal-active-vm8kc9:#75cfff;
   --color-border-button-normal-default-g4ujwl:#42b4ff;
   --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -2583,9 +2590,9 @@
   --color-background-tiles-disabled-c21opp:#1b232d;
   --color-background-toggle-checked-disabled-m1mknq:#002b66;
   --color-background-toggle-default-yhlddz:#8c8c94;
-  --color-background-chat-bubble-incoming-b6y6od:#131920;
-  --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-  --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+  --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+  --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+  --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
   --color-border-button-normal-active-vm8kc9:#75cfff;
   --color-border-button-normal-default-g4ujwl:#42b4ff;
   --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -2801,9 +2808,9 @@
   --color-background-tiles-disabled-c21opp:#1b232d;
   --color-background-toggle-checked-disabled-m1mknq:#002b66;
   --color-background-toggle-default-yhlddz:#8c8c94;
-  --color-background-chat-bubble-incoming-b6y6od:#131920;
-  --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-  --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+  --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+  --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+  --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
   --color-border-button-normal-active-vm8kc9:#75cfff;
   --color-border-button-normal-default-g4ujwl:#42b4ff;
   --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -2965,6 +2972,8 @@
   --color-background-button-primary-hover-288r60:#ffffff;
   --color-background-segment-default-i67ckm:transparent;
   --color-background-segment-hover-rizmh0:transparent;
+  --color-text-chat-bubble-outgoing-a4whbc:#f9f9fa;
+  --color-text-chat-bubble-incoming-wpxwg5:#f9f9fa;
   --color-border-button-normal-active-vm8kc9:#ffffff;
   --color-border-button-normal-default-g4ujwl:#f9f9fa;
   --color-border-button-normal-hover-eyyshk:#ffffff;
@@ -3002,6 +3011,8 @@
   --color-background-button-primary-hover-288r60:#ffffff;
   --color-background-segment-default-i67ckm:transparent;
   --color-background-segment-hover-rizmh0:transparent;
+  --color-text-chat-bubble-outgoing-a4whbc:#f9f9fa;
+  --color-text-chat-bubble-incoming-wpxwg5:#f9f9fa;
   --color-border-button-normal-active-vm8kc9:#ffffff;
   --color-border-button-normal-default-g4ujwl:#f9f9fa;
   --color-border-button-normal-hover-eyyshk:#ffffff;
@@ -3213,9 +3224,9 @@
   --color-background-tiles-disabled-c21opp:#1b232d;
   --color-background-toggle-checked-disabled-m1mknq:#002b66;
   --color-background-toggle-default-yhlddz:#8c8c94;
-  --color-background-chat-bubble-incoming-b6y6od:#131920;
-  --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-  --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+  --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+  --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+  --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
   --color-border-button-normal-active-vm8kc9:#ffffff;
   --color-border-button-normal-default-g4ujwl:#dedee3;
   --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -3419,9 +3430,9 @@
   --color-background-tiles-disabled-c21opp:#1b232d;
   --color-background-toggle-checked-disabled-m1mknq:#002b66;
   --color-background-toggle-default-yhlddz:#8c8c94;
-  --color-background-chat-bubble-incoming-b6y6od:#131920;
-  --color-text-chat-bubble-outgoing-kk7vbt:#c6c6cd;
-  --color-text-chat-bubble-incoming-iw4zm4:#c6c6cd;
+  --color-background-chat-bubble-incoming-g2lfei:#0f141a;
+  --color-text-chat-bubble-outgoing-a4whbc:#c6c6cd;
+  --color-text-chat-bubble-incoming-wpxwg5:#c6c6cd;
   --color-border-button-normal-active-vm8kc9:#ffffff;
   --color-border-button-normal-default-g4ujwl:#dedee3;
   --color-border-toggle-button-normal-pressed-dxcaaj:#42b4ff;
@@ -3581,6 +3592,8 @@
 }
 @media not print {
   .awsui-dark-mode.awsui-visual-refresh .awsui-context-flashbar-warning:not(#\9) {
+    --color-text-chat-bubble-outgoing-a4whbc:#0f141a;
+    --color-text-chat-bubble-incoming-wpxwg5:#0f141a;
     --color-border-calendar-grid-selected-focus-ring-faye0i:#161d26;
     --color-border-dropdown-item-selected-3l3bsn:#42b4ff;
     --color-border-input-focused-rg4ms2:#b8e7ff;
@@ -3590,6 +3603,8 @@
 }
 @media not print {
   .awsui-context-flashbar-warning.awsui-dark-mode.awsui-visual-refresh:not(#\9) {
+    --color-text-chat-bubble-outgoing-a4whbc:#0f141a;
+    --color-text-chat-bubble-incoming-wpxwg5:#0f141a;
     --color-border-calendar-grid-selected-focus-ring-faye0i:#161d26;
     --color-border-dropdown-item-selected-3l3bsn:#42b4ff;
     --color-border-input-focused-rg4ms2:#b8e7ff;

package/lib/internal/template/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (3279cb8e)";
+export var PACKAGE_VERSION = "3.0.0 (63b858d5)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (3279cb8e)",
+  "PACKAGE_VERSION": "3.0.0 (63b858d5)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -297,9 +297,9 @@ export var colorBackgroundAvatarDefault = "var(--color-background-avatar-default
 export var colorTextAvatar = "var(--color-text-avatar-jddpvm, #ffffff)";
 export var colorBackgroundLoadingBarGenAi = "var(--color-background-loading-bar-gen-ai-7qfi9s, linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%))";
 export var colorBackgroundChatBubbleOutgoing = "var(--color-background-chat-bubble-outgoing-pfqan2, transparent)";
-export var colorBackgroundChatBubbleIncoming = "var(--color-background-chat-bubble-incoming-brq006, #f3f3f7)";
-export var colorTextChatBubbleOutgoing = "var(--color-text-chat-bubble-outgoing-25z5e0, #424650)";
-export var colorTextChatBubbleIncoming = "var(--color-text-chat-bubble-incoming-t2slde, #424650)";
+export var colorBackgroundChatBubbleIncoming = "var(--color-background-chat-bubble-incoming-ljtp6c, #f3f3f7)";
+export var colorTextChatBubbleOutgoing = "var(--color-text-chat-bubble-outgoing-bvbr0v, #0f141a)";
+export var colorTextChatBubbleIncoming = "var(--color-text-chat-bubble-incoming-x2kig8, #0f141a)";
 export var colorBorderButtonNormalActive = "var(--color-border-button-normal-active-mn0ayd, #002b66)";
 export var colorBorderButtonNormalDefault = "var(--color-border-button-normal-default-uzqi0v, #006ce0)";
 export var colorBorderToggleButtonNormalPressed = "var(--color-border-toggle-button-normal-pressed-lylxt2, #006ce0)";

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -1075,15 +1075,15 @@ module.exports.preset = {
       },
       "colorBackgroundChatBubbleIncoming": {
         "light": "{colorGrey150}",
-        "dark": "{colorGrey850}"
+        "dark": "{colorGrey900}"
       },
       "colorTextChatBubbleOutgoing": {
-        "light": "{colorTextBodySecondary}",
-        "dark": "{colorTextBodySecondary}"
+        "light": "{colorTextBodyDefault}",
+        "dark": "{colorTextBodyDefault}"
       },
       "colorTextChatBubbleIncoming": {
-        "light": "{colorTextBodySecondary}",
-        "dark": "{colorTextBodySecondary}"
+        "light": "{colorTextBodyDefault}",
+        "dark": "{colorTextBodyDefault}"
       },
       "colorBorderButtonNormalActive": {
         "light": "{colorBlue800}",
@@ -3309,16 +3309,16 @@ module.exports.preset = {
             "dark": "transparent"
           },
           "colorBackgroundChatBubbleIncoming": {
-            "light": "{colorGrey850}",
-            "dark": "{colorGrey850}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
@@ -4463,16 +4463,16 @@ module.exports.preset = {
             "dark": "transparent"
           },
           "colorBackgroundChatBubbleIncoming": {
-            "light": "{colorGrey850}",
-            "dark": "{colorGrey850}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
@@ -5550,15 +5550,15 @@ module.exports.preset = {
           },
           "colorBackgroundChatBubbleIncoming": {
             "light": "{colorGrey150}",
-            "dark": "{colorGrey850}"
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorWhite}",
@@ -6636,15 +6636,15 @@ module.exports.preset = {
           },
           "colorBackgroundChatBubbleIncoming": {
             "light": "{colorGrey150}",
-            "dark": "{colorGrey850}"
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -7722,15 +7722,15 @@ module.exports.preset = {
           },
           "colorBackgroundChatBubbleIncoming": {
             "light": "{colorGrey150}",
-            "dark": "{colorGrey850}"
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -8809,16 +8809,16 @@ module.exports.preset = {
             "dark": "transparent"
           },
           "colorBackgroundChatBubbleIncoming": {
-            "light": "{colorGrey850}",
-            "dark": "{colorGrey850}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -11752,9 +11752,9 @@ module.exports.preset = {
     "colorTextAvatar": "--color-text-avatar-jddpvm",
     "colorBackgroundLoadingBarGenAi": "--color-background-loading-bar-gen-ai-7qfi9s",
     "colorBackgroundChatBubbleOutgoing": "--color-background-chat-bubble-outgoing-pfqan2",
-    "colorBackgroundChatBubbleIncoming": "--color-background-chat-bubble-incoming-brq006",
-    "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-25z5e0",
-    "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-t2slde",
+    "colorBackgroundChatBubbleIncoming": "--color-background-chat-bubble-incoming-ljtp6c",
+    "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-bvbr0v",
+    "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-x2kig8",
     "colorBorderButtonNormalActive": "--color-border-button-normal-active-mn0ayd",
     "colorBorderButtonNormalDefault": "--color-border-button-normal-default-uzqi0v",
     "colorBorderToggleButtonNormalPressed": "--color-border-toggle-button-normal-pressed-lylxt2",

package/lib/internal/template/internal/generated/theming/index.js

@@ -1075,15 +1075,15 @@ export var preset = {
       },
       "colorBackgroundChatBubbleIncoming": {
         "light": "{colorGrey150}",
-        "dark": "{colorGrey850}"
+        "dark": "{colorGrey900}"
       },
       "colorTextChatBubbleOutgoing": {
-        "light": "{colorTextBodySecondary}",
-        "dark": "{colorTextBodySecondary}"
+        "light": "{colorTextBodyDefault}",
+        "dark": "{colorTextBodyDefault}"
       },
       "colorTextChatBubbleIncoming": {
-        "light": "{colorTextBodySecondary}",
-        "dark": "{colorTextBodySecondary}"
+        "light": "{colorTextBodyDefault}",
+        "dark": "{colorTextBodyDefault}"
       },
       "colorBorderButtonNormalActive": {
         "light": "{colorBlue800}",
@@ -3309,16 +3309,16 @@ export var preset = {
             "dark": "transparent"
           },
           "colorBackgroundChatBubbleIncoming": {
-            "light": "{colorGrey850}",
-            "dark": "{colorGrey850}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
@@ -4463,16 +4463,16 @@ export var preset = {
             "dark": "transparent"
           },
           "colorBackgroundChatBubbleIncoming": {
-            "light": "{colorGrey850}",
-            "dark": "{colorGrey850}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
@@ -5550,15 +5550,15 @@ export var preset = {
           },
           "colorBackgroundChatBubbleIncoming": {
             "light": "{colorGrey150}",
-            "dark": "{colorGrey850}"
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorWhite}",
@@ -6636,15 +6636,15 @@ export var preset = {
           },
           "colorBackgroundChatBubbleIncoming": {
             "light": "{colorGrey150}",
-            "dark": "{colorGrey850}"
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -7722,15 +7722,15 @@ export var preset = {
           },
           "colorBackgroundChatBubbleIncoming": {
             "light": "{colorGrey150}",
-            "dark": "{colorGrey850}"
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -8809,16 +8809,16 @@ export var preset = {
             "dark": "transparent"
           },
           "colorBackgroundChatBubbleIncoming": {
-            "light": "{colorGrey850}",
-            "dark": "{colorGrey850}"
+            "light": "{colorGrey900}",
+            "dark": "{colorGrey900}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodySecondary}",
-            "dark": "{colorTextBodySecondary}"
+            "light": "{colorTextBodyDefault}",
+            "dark": "{colorTextBodyDefault}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -11752,9 +11752,9 @@ export var preset = {
     "colorTextAvatar": "--color-text-avatar-jddpvm",
     "colorBackgroundLoadingBarGenAi": "--color-background-loading-bar-gen-ai-7qfi9s",
     "colorBackgroundChatBubbleOutgoing": "--color-background-chat-bubble-outgoing-pfqan2",
-    "colorBackgroundChatBubbleIncoming": "--color-background-chat-bubble-incoming-brq006",
-    "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-25z5e0",
-    "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-t2slde",
+    "colorBackgroundChatBubbleIncoming": "--color-background-chat-bubble-incoming-ljtp6c",
+    "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-bvbr0v",
+    "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-x2kig8",
     "colorBorderButtonNormalActive": "--color-border-button-normal-active-mn0ayd",
     "colorBorderButtonNormalDefault": "--color-border-button-normal-default-uzqi0v",
     "colorBorderToggleButtonNormalPressed": "--color-border-toggle-button-normal-pressed-lylxt2",