From b835054c5f313b94fe902692f010bf76c1630e88 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 12 Feb 2025 15:37:29 +0100 Subject: [PATCH 01/25] apply new styles --- .../internal-segmented-control.tsx | 6 +- src/segmented-control/segment.scss | 84 +++++++++++++------ src/segmented-control/segment.tsx | 9 +- src/segmented-control/styles.scss | 22 +++++ style-dictionary/visual-refresh/colors.ts | 2 +- style-dictionary/visual-refresh/spacing.ts | 2 +- 6 files changed, 96 insertions(+), 29 deletions(-) diff --git a/src/segmented-control/internal-segmented-control.tsx b/src/segmented-control/internal-segmented-control.tsx index fafd874a64..8c31fa7725 100644 --- a/src/segmented-control/internal-segmented-control.tsx +++ b/src/segmented-control/internal-segmented-control.tsx @@ -4,6 +4,7 @@ import React, { useRef } from 'react'; import clsx from 'clsx'; import { fireNonCancelableEvent } from '../internal/events'; +import { useVisualRefresh } from '../internal/hooks/use-visual-mode'; import { KeyCode } from '../internal/keycode'; import handleKey from '../internal/utils/handle-key'; import { SegmentedControlProps } from './interfaces'; @@ -42,10 +43,13 @@ export default function InternalSegmentedControl({ const nextSegmentId = focusableSegments[nextIndex].id; segmentByIdRef.current[nextSegmentId]?.focus(); }; + const isVisualRefresh = useVisualRefresh(); return (
Date: Wed, 12 Feb 2025 16:56:04 +0100 Subject: [PATCH 02/25] update design-token snapshot --- .../__snapshots__/design-tokens.test.ts.snap | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 154a4edfb4..aa12f31850 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -18097,8 +18097,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(0, 7, 22, 0.05)", }, }, "color-background-status-error": { @@ -20622,8 +20622,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(255, 255, 255, 0.1)", }, }, "color-background-status-error": { @@ -23147,8 +23147,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#161d26", - "light": "#ffffff", + "dark": "#1b232d", + "light": "#f0fbff", }, }, "color-background-status-error": { @@ -25672,8 +25672,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(0, 7, 22, 0.15)", + "light": "rgba(0, 7, 22, 0.15)", }, }, "color-background-status-error": { @@ -28197,8 +28197,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(0, 7, 22, 0.05)", + "light": "rgba(0, 7, 22, 0.05)", }, }, "color-background-status-error": { @@ -30722,8 +30722,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#0f141a", - "light": "#0f141a", + "dark": "#1b232d", + "light": "#1b232d", }, }, "color-background-status-error": { @@ -33247,8 +33247,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#161d26", - "light": "#161d26", + "dark": "#1b232d", + "light": "#1b232d", }, }, "color-background-status-error": { @@ -35772,8 +35772,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#161d26", - "light": "#ffffff", + "dark": "#1b232d", + "light": "#f0fbff", }, }, "color-background-status-error": { From e74b688688e1a1ea7c00b522a9ab209ee5b593d6 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Wed, 12 Feb 2025 18:04:17 +0100 Subject: [PATCH 03/25] chore: Update themes snapshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index a6871c2c03..12db41775b 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -2749,7 +2749,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-segment-active": "#006ce0", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#f0fbff", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#004a9e", "color-background-slider-handle-default": "#006ce0", @@ -3265,7 +3265,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -3408,7 +3408,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-active": "#006ce0", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#f0fbff", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#004a9e", "color-background-slider-handle-default": "#006ce0", @@ -3924,7 +3924,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "2px", "space-scaled-xxxl": "32px", "space-scaled-xxxs": "0px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -4067,7 +4067,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-active": "#42b4ff", "color-background-segment-default": "#0f141a", "color-background-segment-disabled": "#0f141a", - "color-background-segment-hover": "#0f141a", + "color-background-segment-hover": "#1b232d", "color-background-slider-error-pressed": "#ff7a7a", "color-background-slider-handle-active": "#75cfff", "color-background-slider-handle-default": "#42b4ff", @@ -4583,7 +4583,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -4726,7 +4726,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-active": "#42b4ff", "color-background-segment-default": "#161d26", "color-background-segment-disabled": "#161d26", - "color-background-segment-hover": "#161d26", + "color-background-segment-hover": "#1b232d", "color-background-slider-error-pressed": "#ff7a7a", "color-background-slider-handle-active": "#75cfff", "color-background-slider-handle-default": "#42b4ff", @@ -5242,7 +5242,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", From c94a89f123e9f383425f576bb7bc346e9236a19f Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 12 Feb 2025 19:08:12 +0100 Subject: [PATCH 04/25] update hover text color to be consistent with button --- .../__snapshots__/design-tokens.test.ts.snap | 60 +++++++++---------- style-dictionary/visual-refresh/colors.ts | 2 +- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index aa12f31850..891b9c9cd4 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -2132,8 +2132,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -4657,8 +4657,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -7182,8 +7182,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -9707,8 +9707,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -12232,8 +12232,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -14757,8 +14757,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#00a1c9", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-error": { @@ -17282,8 +17282,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -19812,8 +19812,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#ffffff", + "light": "#0f141a", }, }, "color-text-status-error": { @@ -22337,8 +22337,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-status-error": { @@ -24862,8 +24862,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#75cfff", + "light": "#002b66", }, }, "color-text-status-error": { @@ -27387,8 +27387,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-status-error": { @@ -29912,8 +29912,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-status-error": { @@ -32437,8 +32437,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", + "dark": "#75cfff", + "light": "#75cfff", }, }, "color-text-status-error": { @@ -34962,8 +34962,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", + "dark": "#75cfff", + "light": "#75cfff", }, }, "color-text-status-error": { @@ -37487,8 +37487,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#75cfff", + "light": "#002b66", }, }, "color-text-status-error": { diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index cf745d243f..4253c653a1 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -250,7 +250,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextPaginationPageNumberDefault: { light: '{colorTextInteractiveDefault}', dark: '{colorGrey400}' }, colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorGrey900}' }, colorTextSegmentDefault: { light: '{colorGrey600}', dark: '{colorGrey300}' }, - colorTextSegmentHover: { light: '{colorBlue600}', dark: '{colorBlue500}' }, + colorTextSegmentHover: '{colorTextButtonNormalHover}', colorTextSmall: { light: '{colorGrey550}', dark: '{colorGrey450}' }, colorTextStatusError: { light: '{colorRed600}', dark: '{colorRed500}' }, colorTextStatusInactive: { light: '{colorGrey550}', dark: '{colorGrey450}' }, From 5aba8d16bc2d427982712f6801840ff0be11e62c Mon Sep 17 00:00:00 2001 From: Gethin Webster Date: Thu, 13 Feb 2025 10:58:14 +0100 Subject: [PATCH 05/25] Update snapshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 12db41775b..3ca70714f9 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -442,7 +442,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-pagination-page-number-default": "#545b64", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#0073bb", + "color-text-segment-hover": "#16191f", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -1101,7 +1101,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-pagination-page-number-default": "#d5dbdb", "color-text-segment-active": "#1a2029", "color-text-segment-default": "#d5dbdb", - "color-text-segment-hover": "#00a1c9", + "color-text-segment-hover": "#fafafa", "color-text-small": "#95a5a6", "color-text-status-error": "#ff5d64", "color-text-status-inactive": "#95a5a6", @@ -1760,7 +1760,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-pagination-page-number-default": "#545b64", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#0073bb", + "color-text-segment-hover": "#16191f", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -2419,7 +2419,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-pagination-page-number-default": "#545b64", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#0073bb", + "color-text-segment-hover": "#16191f", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -3078,7 +3078,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-pagination-page-number-default": "#424650", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#424650", - "color-text-segment-hover": "#006ce0", + "color-text-segment-hover": "#002b66", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -3737,7 +3737,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-pagination-page-number-default": "#424650", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#424650", - "color-text-segment-hover": "#006ce0", + "color-text-segment-hover": "#002b66", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -4396,7 +4396,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-pagination-page-number-default": "#b4b4bb", "color-text-segment-active": "#0f141a", "color-text-segment-default": "#dedee3", - "color-text-segment-hover": "#42b4ff", + "color-text-segment-hover": "#75cfff", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", @@ -5055,7 +5055,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-pagination-page-number-default": "#b4b4bb", "color-text-segment-active": "#0f141a", "color-text-segment-default": "#dedee3", - "color-text-segment-hover": "#42b4ff", + "color-text-segment-hover": "#75cfff", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", From 2dedceae5350411a7710d26df022d08025d854d0 Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 13 Feb 2025 13:13:39 +0100 Subject: [PATCH 06/25] restructure the use of variables --- src/segmented-control/segment.scss | 9 +++++---- src/segmented-control/styles.scss | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 718582b09f..e3302296bc 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -32,6 +32,7 @@ $disabled-color: map.get($segment-properties, 'disabled-color'); $selected-background: map.get($segment-properties, 'active-background'); $selected-border-color: awsui.$color-border-segment-active; $selected-color: awsui.$color-text-segment-active; +$segment-divider-gap: awsui.$space-static-xxs; .segment { @include styles.font-body-m; @@ -65,16 +66,16 @@ $selected-color: awsui.$color-text-segment-active; border-start-end-radius: awsui.$border-radius-button; border-end-start-radius: awsui.$border-radius-button; border-end-end-radius: awsui.$border-radius-button; - padding-block: awsui.$space-scaled-xxs; - padding-inline: awsui.$space-scaled-m; + padding-block: styles.$control-padding-vertical; + padding-inline: calc(awsui.$space-button-horizontal - $segment-divider-gap); position: relative; - block-size: calc(100% - 4px); + block-size: calc(100% - $segment-divider-gap); display: flex; align-items: center; &:not(:last-child)::after { content: ''; position: absolute; - inset-inline-end: -5px; + inset-inline-end: calc(-1 * (#{$segment-divider-gap} + 1px)); inset-block-start: 6px; block-size: calc(100% - 12px); inline-size: 1px; diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index c8b061f9f8..55fcfae60b 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -8,6 +8,8 @@ @use 'sass:list' as list; @use '../internal/styles/tokens' as awsui; +$segment-gap: calc(#{segment.$segment-divider-gap} * 2 + 1px); + @function repeatValue($value, $times) { $result: (); @@ -31,7 +33,7 @@ } &.refresh { - gap: 9px; + gap: $segment-gap; border-inline: solid 2px awsui.$color-border-input-default; border-block: solid 2px awsui.$color-border-input-default; border-start-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); From 2db9e9b6bc6749a3bc52f291cef3f371eaa74c70 Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 13 Feb 2025 17:13:58 +0100 Subject: [PATCH 07/25] update hover text color to be consistent with button --- style-dictionary/visual-refresh/spacing.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index 87ee99a9a5..dd65624cce 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -52,7 +52,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spacePanelSideRight: '{spaceScaledXl}', spacePanelSplitTop: '{spaceScaledL}', spacePanelSplitBottom: '{spaceScaledL}', - spaceSegmentedControlFocusOutlineGutter: '5px', + spaceSegmentedControlFocusOutlineGutter: '6px', spaceTabsContentTop: '{spaceScaledS}', spaceTabsFocusOutlineGutter: '-8px', spaceTableContentBottom: '{spaceXxs}', From d0d235a4f02a980b9ec7b9e098088d57ea7b5e64 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 12 Feb 2025 15:37:29 +0100 Subject: [PATCH 08/25] apply new styles --- .../internal-segmented-control.tsx | 6 +- src/segmented-control/segment.scss | 84 +++++++++++++------ src/segmented-control/segment.tsx | 9 +- src/segmented-control/styles.scss | 22 +++++ style-dictionary/visual-refresh/colors.ts | 2 +- style-dictionary/visual-refresh/spacing.ts | 2 +- 6 files changed, 96 insertions(+), 29 deletions(-) diff --git a/src/segmented-control/internal-segmented-control.tsx b/src/segmented-control/internal-segmented-control.tsx index fafd874a64..8c31fa7725 100644 --- a/src/segmented-control/internal-segmented-control.tsx +++ b/src/segmented-control/internal-segmented-control.tsx @@ -4,6 +4,7 @@ import React, { useRef } from 'react'; import clsx from 'clsx'; import { fireNonCancelableEvent } from '../internal/events'; +import { useVisualRefresh } from '../internal/hooks/use-visual-mode'; import { KeyCode } from '../internal/keycode'; import handleKey from '../internal/utils/handle-key'; import { SegmentedControlProps } from './interfaces'; @@ -42,10 +43,13 @@ export default function InternalSegmentedControl({ const nextSegmentId = focusableSegments[nextIndex].id; segmentByIdRef.current[nextSegmentId]?.focus(); }; + const isVisualRefresh = useVisualRefresh(); return (
Date: Wed, 12 Feb 2025 16:56:04 +0100 Subject: [PATCH 09/25] update design-token snapshot --- .../__snapshots__/design-tokens.test.ts.snap | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 154a4edfb4..aa12f31850 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -18097,8 +18097,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(0, 7, 22, 0.05)", }, }, "color-background-status-error": { @@ -20622,8 +20622,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(255, 255, 255, 0.1)", + "light": "rgba(255, 255, 255, 0.1)", }, }, "color-background-status-error": { @@ -23147,8 +23147,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#161d26", - "light": "#ffffff", + "dark": "#1b232d", + "light": "#f0fbff", }, }, "color-background-status-error": { @@ -25672,8 +25672,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(0, 7, 22, 0.15)", + "light": "rgba(0, 7, 22, 0.15)", }, }, "color-background-status-error": { @@ -28197,8 +28197,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "transparent", - "light": "transparent", + "dark": "rgba(0, 7, 22, 0.05)", + "light": "rgba(0, 7, 22, 0.05)", }, }, "color-background-status-error": { @@ -30722,8 +30722,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#0f141a", - "light": "#0f141a", + "dark": "#1b232d", + "light": "#1b232d", }, }, "color-background-status-error": { @@ -33247,8 +33247,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#161d26", - "light": "#161d26", + "dark": "#1b232d", + "light": "#1b232d", }, }, "color-background-status-error": { @@ -35772,8 +35772,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#161d26", - "light": "#ffffff", + "dark": "#1b232d", + "light": "#f0fbff", }, }, "color-background-status-error": { From 8a3629a3dd1631deb4f1de75efe24fc8e9d2f382 Mon Sep 17 00:00:00 2001 From: Georgii Lobko Date: Wed, 12 Feb 2025 18:04:17 +0100 Subject: [PATCH 10/25] chore: Update themes snapshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index a6871c2c03..12db41775b 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -2749,7 +2749,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-segment-active": "#006ce0", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#f0fbff", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#004a9e", "color-background-slider-handle-default": "#006ce0", @@ -3265,7 +3265,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -3408,7 +3408,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-active": "#006ce0", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#f0fbff", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#004a9e", "color-background-slider-handle-default": "#006ce0", @@ -3924,7 +3924,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "2px", "space-scaled-xxxl": "32px", "space-scaled-xxxs": "0px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -4067,7 +4067,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-active": "#42b4ff", "color-background-segment-default": "#0f141a", "color-background-segment-disabled": "#0f141a", - "color-background-segment-hover": "#0f141a", + "color-background-segment-hover": "#1b232d", "color-background-slider-error-pressed": "#ff7a7a", "color-background-slider-handle-active": "#75cfff", "color-background-slider-handle-default": "#42b4ff", @@ -4583,7 +4583,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -4726,7 +4726,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-segment-active": "#42b4ff", "color-background-segment-default": "#161d26", "color-background-segment-disabled": "#161d26", - "color-background-segment-hover": "#161d26", + "color-background-segment-hover": "#1b232d", "color-background-slider-error-pressed": "#ff7a7a", "color-background-slider-handle-active": "#75cfff", "color-background-slider-handle-default": "#42b4ff", @@ -5242,7 +5242,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "4px", + "space-segmented-control-focus-outline-gutter": "5px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", From d16c91acdf9bd324d8ba6c5a58712e4e3d6c8938 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 12 Feb 2025 19:08:12 +0100 Subject: [PATCH 11/25] update hover text color to be consistent with button --- .../__snapshots__/design-tokens.test.ts.snap | 60 +++++++++---------- style-dictionary/visual-refresh/colors.ts | 2 +- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index aa12f31850..891b9c9cd4 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -2132,8 +2132,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -4657,8 +4657,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -7182,8 +7182,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -9707,8 +9707,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -12232,8 +12232,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -14757,8 +14757,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#00a1c9", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-status-error": { @@ -17282,8 +17282,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#00a1c9", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#16191f", }, }, "color-text-status-error": { @@ -19812,8 +19812,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#ffffff", + "light": "#0f141a", }, }, "color-text-status-error": { @@ -22337,8 +22337,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-status-error": { @@ -24862,8 +24862,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#75cfff", + "light": "#002b66", }, }, "color-text-status-error": { @@ -27387,8 +27387,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-status-error": { @@ -29912,8 +29912,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-status-error": { @@ -32437,8 +32437,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", + "dark": "#75cfff", + "light": "#75cfff", }, }, "color-text-status-error": { @@ -34962,8 +34962,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", + "dark": "#75cfff", + "light": "#75cfff", }, }, "color-text-status-error": { @@ -37487,8 +37487,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#75cfff", + "light": "#002b66", }, }, "color-text-status-error": { diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index cf745d243f..4253c653a1 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -250,7 +250,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextPaginationPageNumberDefault: { light: '{colorTextInteractiveDefault}', dark: '{colorGrey400}' }, colorTextSegmentActive: { light: '{colorWhite}', dark: '{colorGrey900}' }, colorTextSegmentDefault: { light: '{colorGrey600}', dark: '{colorGrey300}' }, - colorTextSegmentHover: { light: '{colorBlue600}', dark: '{colorBlue500}' }, + colorTextSegmentHover: '{colorTextButtonNormalHover}', colorTextSmall: { light: '{colorGrey550}', dark: '{colorGrey450}' }, colorTextStatusError: { light: '{colorRed600}', dark: '{colorRed500}' }, colorTextStatusInactive: { light: '{colorGrey550}', dark: '{colorGrey450}' }, From 5002614e27717975a30dd35e95d4402a8542022d Mon Sep 17 00:00:00 2001 From: Gethin Webster Date: Thu, 13 Feb 2025 10:58:14 +0100 Subject: [PATCH 12/25] Update snapshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 12db41775b..3ca70714f9 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -442,7 +442,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-pagination-page-number-default": "#545b64", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#0073bb", + "color-text-segment-hover": "#16191f", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -1101,7 +1101,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-pagination-page-number-default": "#d5dbdb", "color-text-segment-active": "#1a2029", "color-text-segment-default": "#d5dbdb", - "color-text-segment-hover": "#00a1c9", + "color-text-segment-hover": "#fafafa", "color-text-small": "#95a5a6", "color-text-status-error": "#ff5d64", "color-text-status-inactive": "#95a5a6", @@ -1760,7 +1760,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-pagination-page-number-default": "#545b64", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#0073bb", + "color-text-segment-hover": "#16191f", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -2419,7 +2419,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-pagination-page-number-default": "#545b64", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#0073bb", + "color-text-segment-hover": "#16191f", "color-text-small": "#687078", "color-text-status-error": "#d13212", "color-text-status-inactive": "#687078", @@ -3078,7 +3078,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-pagination-page-number-default": "#424650", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#424650", - "color-text-segment-hover": "#006ce0", + "color-text-segment-hover": "#002b66", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -3737,7 +3737,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-pagination-page-number-default": "#424650", "color-text-segment-active": "#ffffff", "color-text-segment-default": "#424650", - "color-text-segment-hover": "#006ce0", + "color-text-segment-hover": "#002b66", "color-text-small": "#656871", "color-text-status-error": "#db0000", "color-text-status-inactive": "#656871", @@ -4396,7 +4396,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-pagination-page-number-default": "#b4b4bb", "color-text-segment-active": "#0f141a", "color-text-segment-default": "#dedee3", - "color-text-segment-hover": "#42b4ff", + "color-text-segment-hover": "#75cfff", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", @@ -5055,7 +5055,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-pagination-page-number-default": "#b4b4bb", "color-text-segment-active": "#0f141a", "color-text-segment-default": "#dedee3", - "color-text-segment-hover": "#42b4ff", + "color-text-segment-hover": "#75cfff", "color-text-small": "#a4a4ad", "color-text-status-error": "#ff7a7a", "color-text-status-inactive": "#a4a4ad", From 87b451faaaaac66631ccb3c0fbd4c10a0bd01206 Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 13 Feb 2025 13:13:39 +0100 Subject: [PATCH 13/25] restructure the use of variables --- src/segmented-control/segment.scss | 9 +++++---- src/segmented-control/styles.scss | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 718582b09f..e3302296bc 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -32,6 +32,7 @@ $disabled-color: map.get($segment-properties, 'disabled-color'); $selected-background: map.get($segment-properties, 'active-background'); $selected-border-color: awsui.$color-border-segment-active; $selected-color: awsui.$color-text-segment-active; +$segment-divider-gap: awsui.$space-static-xxs; .segment { @include styles.font-body-m; @@ -65,16 +66,16 @@ $selected-color: awsui.$color-text-segment-active; border-start-end-radius: awsui.$border-radius-button; border-end-start-radius: awsui.$border-radius-button; border-end-end-radius: awsui.$border-radius-button; - padding-block: awsui.$space-scaled-xxs; - padding-inline: awsui.$space-scaled-m; + padding-block: styles.$control-padding-vertical; + padding-inline: calc(awsui.$space-button-horizontal - $segment-divider-gap); position: relative; - block-size: calc(100% - 4px); + block-size: calc(100% - $segment-divider-gap); display: flex; align-items: center; &:not(:last-child)::after { content: ''; position: absolute; - inset-inline-end: -5px; + inset-inline-end: calc(-1 * (#{$segment-divider-gap} + 1px)); inset-block-start: 6px; block-size: calc(100% - 12px); inline-size: 1px; diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index c8b061f9f8..55fcfae60b 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -8,6 +8,8 @@ @use 'sass:list' as list; @use '../internal/styles/tokens' as awsui; +$segment-gap: calc(#{segment.$segment-divider-gap} * 2 + 1px); + @function repeatValue($value, $times) { $result: (); @@ -31,7 +33,7 @@ } &.refresh { - gap: 9px; + gap: $segment-gap; border-inline: solid 2px awsui.$color-border-input-default; border-block: solid 2px awsui.$color-border-input-default; border-start-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); From 4e45ac51e201ec7782d1cffd3a11aa2cb6d9094e Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 13 Feb 2025 17:13:58 +0100 Subject: [PATCH 14/25] update hover text color to be consistent with button --- style-dictionary/visual-refresh/spacing.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index 87ee99a9a5..dd65624cce 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -52,7 +52,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spacePanelSideRight: '{spaceScaledXl}', spacePanelSplitTop: '{spaceScaledL}', spacePanelSplitBottom: '{spaceScaledL}', - spaceSegmentedControlFocusOutlineGutter: '5px', + spaceSegmentedControlFocusOutlineGutter: '6px', spaceTabsContentTop: '{spaceScaledS}', spaceTabsFocusOutlineGutter: '-8px', spaceTableContentBottom: '{spaceXxs}', From d12c633a5c27f0904451f71eaef892ff525a7c4e Mon Sep 17 00:00:00 2001 From: at-susie Date: Fri, 14 Feb 2025 12:04:54 +0100 Subject: [PATCH 15/25] improve the variable structure --- src/segmented-control/segment.scss | 13 +++++++------ src/segmented-control/styles.scss | 6 +++--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index e3302296bc..00ab70556e 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -32,7 +32,8 @@ $disabled-color: map.get($segment-properties, 'disabled-color'); $selected-background: map.get($segment-properties, 'active-background'); $selected-border-color: awsui.$color-border-segment-active; $selected-color: awsui.$color-text-segment-active; -$segment-divider-gap: awsui.$space-static-xxs; +$segment-gap: awsui.$space-static-xxs; +$segment-divider-width: 1px; .segment { @include styles.font-body-m; @@ -67,18 +68,18 @@ $segment-divider-gap: awsui.$space-static-xxs; border-end-start-radius: awsui.$border-radius-button; border-end-end-radius: awsui.$border-radius-button; padding-block: styles.$control-padding-vertical; - padding-inline: calc(awsui.$space-button-horizontal - $segment-divider-gap); + padding-inline: calc(awsui.$space-button-horizontal - $segment-gap); position: relative; - block-size: calc(100% - $segment-divider-gap); + block-size: calc(100% - $segment-gap); display: flex; align-items: center; &:not(:last-child)::after { content: ''; position: absolute; - inset-inline-end: calc(-1 * (#{$segment-divider-gap} + 1px)); + inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width)); inset-block-start: 6px; - block-size: calc(100% - 12px); - inline-size: 1px; + block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2)); + inline-size: $segment-divider-width; background: awsui.$color-border-input-default; z-index: 1; } diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index 55fcfae60b..270457c4ef 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -4,11 +4,11 @@ */ @use '../internal/styles/' as styles; -@use 'segment'; +@use 'segment' as seg; @use 'sass:list' as list; @use '../internal/styles/tokens' as awsui; -$segment-gap: calc(#{segment.$segment-divider-gap} * 2 + 1px); +$segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); @function repeatValue($value, $times) { $result: (); @@ -33,7 +33,7 @@ $segment-gap: calc(#{segment.$segment-divider-gap} * 2 + 1px); } &.refresh { - gap: $segment-gap; + gap: $segment-space; border-inline: solid 2px awsui.$color-border-input-default; border-block: solid 2px awsui.$color-border-input-default; border-start-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); From 8d3ef292b467f834da7a92e180536c150d400070 Mon Sep 17 00:00:00 2001 From: at-susie Date: Fri, 14 Feb 2025 13:22:49 +0100 Subject: [PATCH 16/25] clean up css --- src/segmented-control/segment.scss | 1 - src/segmented-control/styles.scss | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 00ab70556e..68789684dc 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -77,7 +77,6 @@ $segment-divider-width: 1px; content: ''; position: absolute; inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width)); - inset-block-start: 6px; block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2)); inline-size: $segment-divider-width; background: awsui.$color-border-input-default; diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index 270457c4ef..7c359cf2f7 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -34,15 +34,15 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); &.refresh { gap: $segment-space; - border-inline: solid 2px awsui.$color-border-input-default; - border-block: solid 2px awsui.$color-border-input-default; + border-inline: solid awsui.$border-width-field awsui.$color-border-input-default; + border-block: solid awsui.$border-width-field awsui.$color-border-input-default; border-start-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); border-start-end-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); border-end-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); border-end-end-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); align-items: center; - min-block-size: 24px; - padding-inline: 2px; + min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs); + padding-inline: awsui.$space-static-xxxs; } } From a812faeb45c40c46d7f0f230cd61cb8bdf22cdca Mon Sep 17 00:00:00 2001 From: at-susie Date: Fri, 14 Feb 2025 16:43:25 +0100 Subject: [PATCH 17/25] update snapshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 3ca70714f9..c71a98500e 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -3265,7 +3265,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "5px", + "space-segmented-control-focus-outline-gutter": "6px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -3924,7 +3924,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "2px", "space-scaled-xxxl": "32px", "space-scaled-xxxs": "0px", - "space-segmented-control-focus-outline-gutter": "5px", + "space-segmented-control-focus-outline-gutter": "6px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -4583,7 +4583,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "5px", + "space-segmented-control-focus-outline-gutter": "6px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", @@ -5242,7 +5242,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-scaled-xxs": "4px", "space-scaled-xxxl": "40px", "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "5px", + "space-segmented-control-focus-outline-gutter": "6px", "space-static-l": "20px", "space-static-m": "16px", "space-static-s": "12px", From e8616ec942846cc9a5ef074be920cdff7df28efb Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 19 Feb 2025 14:48:16 +0100 Subject: [PATCH 18/25] Apply the refinements to classic as well --- src/segmented-control/segment.scss | 77 ++++++++++++------------------ src/segmented-control/styles.scss | 26 +++++----- style-dictionary/classic/colors.ts | 2 +- 3 files changed, 44 insertions(+), 61 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 68789684dc..d940f091cf 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -41,11 +41,25 @@ $segment-divider-width: 1px; @include styles.font-button; letter-spacing: 0.25px; padding-block: styles.$control-padding-vertical; - padding-inline: awsui.$space-button-horizontal; + padding-inline: calc(awsui.$space-button-horizontal - $segment-gap); + background: $default-background; color: $default-color; overflow: visible; + border-start-start-radius: awsui.$border-radius-button; + border-start-end-radius: awsui.$border-radius-button; + border-end-start-radius: awsui.$border-radius-button; + border-end-end-radius: awsui.$border-radius-button; + + position: relative; + block-size: calc(100% - $segment-gap); + display: flex; + align-items: center; + + border-inline: none; + border-block: none; + &:focus { outline: none; } @@ -60,60 +74,29 @@ $segment-divider-width: 1px; @include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter); } - &.refresh { - border-inline: none; - border-block: none; - border-start-start-radius: awsui.$border-radius-button; - border-start-end-radius: awsui.$border-radius-button; - border-end-start-radius: awsui.$border-radius-button; - border-end-end-radius: awsui.$border-radius-button; - padding-block: styles.$control-padding-vertical; - padding-inline: calc(awsui.$space-button-horizontal - $segment-gap); - position: relative; - block-size: calc(100% - $segment-gap); - display: flex; - align-items: center; - &:not(:last-child)::after { - content: ''; - position: absolute; - inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width)); - block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2)); - inline-size: $segment-divider-width; - background: awsui.$color-border-input-default; - z-index: 1; - } + &:not(:last-child)::after { + content: ''; + position: absolute; + inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width)); + block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2)); + inline-size: $segment-divider-width; + background: awsui.$color-border-input-default; + z-index: 1; } - &:not(.refresh) { - border-block: styles.$control-border-width solid $default-border-color; - border-inline: styles.$control-border-width solid $default-border-color; - border-inline-end-width: 0; - @for $i from 1 through 6 { - &:nth-child(#{$i}) { - grid-column: $i; - -ms-grid-column: $i; - } - } - - &:last-child { - border-inline-end-width: styles.$control-border-width; - border-start-start-radius: 0; - border-start-end-radius: awsui.$border-radius-button; - border-end-start-radius: 0; - border-end-end-radius: awsui.$border-radius-button; - } + &:not(.refresh):not(:last-child)::after { + inset-inline-end: calc(-1 * ($segment-gap - 1px)); + } - &:first-child { - border-start-start-radius: awsui.$border-radius-button; - border-start-end-radius: 0; - border-end-start-radius: awsui.$border-radius-button; - border-end-end-radius: 0; + @for $i from 1 through 6 { + &:nth-child(#{$i}) { + grid-column: $i; + -ms-grid-column: $i; } } &.selected { background: $selected-background; - border-color: $selected-border-color; color: $selected-color; & + .segment, diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index 7c359cf2f7..e3146ededb 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -27,23 +27,23 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); .segment-part { display: -ms-inline-grid; display: inline-grid; + border-inline: solid awsui.$border-width-field awsui.$color-border-input-default; + border-block: solid awsui.$border-width-field awsui.$color-border-input-default; + border-start-start-radius: awsui.$border-radius-button; + border-start-end-radius: awsui.$border-radius-button; + border-end-start-radius: awsui.$border-radius-button; + border-end-end-radius: awsui.$border-radius-button; + align-items: center; + min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs); + padding-inline: awsui.$space-static-xxxs; + gap: $segment-space; + &:not(.refresh) { + gap: calc(seg.$segment-gap + 1px); + } @include styles.media-breakpoint-down(styles.$breakpoint-x-small) { display: none; } - - &.refresh { - gap: $segment-space; - border-inline: solid awsui.$border-width-field awsui.$color-border-input-default; - border-block: solid awsui.$border-width-field awsui.$color-border-input-default; - border-start-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); - border-start-end-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); - border-end-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); - border-end-end-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs); - align-items: center; - min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs); - padding-inline: awsui.$space-static-xxxs; - } } .select { diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts index cb858daaf0..662d27dc6b 100644 --- a/style-dictionary/classic/colors.ts +++ b/style-dictionary/classic/colors.ts @@ -43,7 +43,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundNotificationStackBarActive: '{colorGrey700}', colorBackgroundNotificationStackBarHover: '{colorGrey600}', colorBackgroundProgressBarContentInFlash: { light: '{colorGreyOpaque70}', dark: '{colorGrey100}' }, - colorBackgroundSegmentHover: '{colorBackgroundButtonNormalDefault}', + colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}', colorBackgroundTilesDisabled: { dark: '{colorGrey700}' }, colorBackgroundToggleCheckedDisabled: { dark: '{colorBlue700}' }, colorBackgroundChatBubbleIncoming: { light: '{colorGrey150}', dark: '{colorGrey900}' }, From 35f0b26ff772da5a4a6ce23bf80e065e454f48a0 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 19 Feb 2025 15:11:57 +0100 Subject: [PATCH 19/25] clean up css --- src/segmented-control/segment.scss | 2 +- src/segmented-control/styles.scss | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index d940f091cf..836fe04b35 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -85,7 +85,7 @@ $segment-divider-width: 1px; } &:not(.refresh):not(:last-child)::after { - inset-inline-end: calc(-1 * ($segment-gap - 1px)); + inset-inline-end: calc(-1 * ($segment-gap - $segment-divider-width)); } @for $i from 1 through 6 { diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index e3146ededb..e194df6acb 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -38,7 +38,7 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); padding-inline: awsui.$space-static-xxxs; gap: $segment-space; &:not(.refresh) { - gap: calc(seg.$segment-gap + 1px); + gap: calc(seg.$segment-gap + seg.$segment-divider-width); } @include styles.media-breakpoint-down(styles.$breakpoint-x-small) { @@ -57,11 +57,7 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); @for $i from 2 through 6 { .segment-count-#{$i} { // The repeat syntax is not used since it is broken when using with SASS together - grid-template-columns: repeatValue(1fr, $i); - - &.refresh { - grid-template-columns: repeat(#{$i}, auto); - } + grid-template-columns: repeat(#{$i}, auto); } } From 1ed6be9477c836baba1389d18382d6ffc97478de Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 19 Feb 2025 15:27:33 +0100 Subject: [PATCH 20/25] Update snapshot test --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index c71a98500e..f01576ec50 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -113,7 +113,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-segment-active": "#0073bb", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#fafafa", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#0a4a74", "color-background-slider-handle-default": "#0073bb", @@ -772,7 +772,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-segment-active": "#00a1c9", "color-background-segment-default": "#2a2e33", "color-background-segment-disabled": "#2a2e33", - "color-background-segment-hover": "#2a2e33", + "color-background-segment-hover": "#21252c", "color-background-slider-error-pressed": "#ff5d64", "color-background-slider-handle-active": "#44b9d6", "color-background-slider-handle-default": "#00a1c9", @@ -1431,7 +1431,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-segment-active": "#0073bb", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#fafafa", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#0a4a74", "color-background-slider-handle-default": "#0073bb", @@ -2090,7 +2090,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-segment-active": "#0073bb", "color-background-segment-default": "#ffffff", "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#ffffff", + "color-background-segment-hover": "#fafafa", "color-background-slider-error-pressed": "#700000", "color-background-slider-handle-active": "#0a4a74", "color-background-slider-handle-default": "#0073bb", From 7740f71a1c8076d4974aee39a9936f111e9514c7 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 19 Feb 2025 15:41:29 +0100 Subject: [PATCH 21/25] Update snapshot test --- .../__snapshots__/themes.test.ts.snap | 659 +----------------- 1 file changed, 1 insertion(+), 658 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index f01576ec50..ef14ab9e15 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -1318,664 +1318,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` } `; -exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` -{ - "border-active-width": "2px", - "border-code-editor-status-divider-width": "0px", - "border-container-sticky-width": "1px", - "border-container-top-width": "1px", - "border-control-focus-ring-shadow-spread": "1px", - "border-control-invalid-focus-ring-shadow-spread": "1px", - "border-divider-list-width": "1px", - "border-divider-section-width": "1px", - "border-dropdown-virtual-offset-width": "0px", - "border-invalid-width": "4px", - "border-item-width": "1px", - "border-line-chart-dash-array": "3 5", - "border-line-chart-line-join": "miter", - "border-line-chart-width": "2px", - "border-link-focus-ring-outline": "5px auto Highlight", - "border-link-focus-ring-shadow-spread": "0px", - "border-panel-header-width": "0px", - "border-panel-top-width": "0px", - "border-radius-alert": "2px", - "border-radius-badge": "16px", - "border-radius-button": "2px", - "border-radius-calendar-day-focus-ring": "2px", - "border-radius-chat-bubble": "2px", - "border-radius-code-editor": "0px", - "border-radius-container": "0px", - "border-radius-control-circular-focus-ring": "50%", - "border-radius-control-default-focus-ring": "2px", - "border-radius-dropdown": "0px", - "border-radius-dropzone": "0px", - "border-radius-flashbar": "0px", - "border-radius-input": "2px", - "border-radius-item": "0px", - "border-radius-popover": "2px", - "border-radius-tabs-focus-ring": "0px", - "border-radius-tiles": "2px", - "border-radius-token": "2px", - "border-radius-tutorial-panel-item": "2px", - "border-table-sticky-width": "0px", - "border-width-alert": "1px", - "border-width-field": "1px", - "border-width-popover": "1px", - "color-background-avatar-default": "#545b64", - "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)", - "color-background-badge-icon": "#d13212", - "color-background-button-link-active": "#eaeded", - "color-background-button-link-hover": "#fafafa", - "color-background-button-normal-active": "#eaeded", - "color-background-button-normal-default": "#ffffff", - "color-background-button-normal-disabled": "#ffffff", - "color-background-button-normal-hover": "#fafafa", - "color-background-button-primary-active": "#12293b", - "color-background-button-primary-default": "#0073bb", - "color-background-button-primary-disabled": "#ffffff", - "color-background-button-primary-hover": "#0a4a74", - "color-background-calendar-current-date": "#f2f3f3", - "color-background-cell-shaded": "#f2f3f3", - "color-background-chat-bubble-incoming": "#f2f3f3", - "color-background-chat-bubble-outgoing": "transparent", - "color-background-code-editor-gutter-active-line-default": "#687078", - "color-background-code-editor-gutter-active-line-error": "#d13212", - "color-background-code-editor-gutter-default": "#f2f3f3", - "color-background-code-editor-loading": "#f2f3f3", - "color-background-code-editor-pane-item-hover": "#eaeded", - "color-background-code-editor-status-bar": "#f2f3f3", - "color-background-container-content": "#ffffff", - "color-background-container-header": "#fafafa", - "color-background-control-checked": "#0073bb", - "color-background-control-default": "#ffffff", - "color-background-control-disabled": "#d5dbdb", - "color-background-dropdown-item-default": "#ffffff", - "color-background-dropdown-item-dimmed": "transparent", - "color-background-dropdown-item-filter-match": "#f1faff", - "color-background-dropdown-item-hover": "#f2f3f3", - "color-background-dropdown-item-selected": "#f1faff", - "color-background-home-header": "#000000", - "color-background-input-default": "#ffffff", - "color-background-input-disabled": "#eaeded", - "color-background-item-selected": "#f1faff", - "color-background-layout-main": "#f2f3f3", - "color-background-layout-mobile-panel": "#ffffff", - "color-background-layout-panel-content": "#ffffff", - "color-background-layout-panel-hover": "#eaeded", - "color-background-layout-toggle-active": "#2a2e33", - "color-background-layout-toggle-default": "transparent", - "color-background-layout-toggle-hover": "#545b64", - "color-background-layout-toggle-selected-active": "#0073bb", - "color-background-layout-toggle-selected-default": "#0073bb", - "color-background-layout-toggle-selected-hover": "#0a4a74", - "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)", - "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)", - "color-background-notification-blue": "#0073bb", - "color-background-notification-green": "#1d8102", - "color-background-notification-grey": "#545b64", - "color-background-notification-red": "#d13212", - "color-background-notification-severity-critical": "#870303", - "color-background-notification-severity-high": "#ce3311", - "color-background-notification-severity-low": "#f2cd54", - "color-background-notification-severity-medium": "#f89256", - "color-background-notification-severity-neutral": "#687078", - "color-background-notification-stack-bar": "#2a2e33", - "color-background-notification-stack-bar-active": "#2a2e33", - "color-background-notification-stack-bar-hover": "#545b64", - "color-background-notification-yellow": "#ffe347", - "color-background-popover": "#ffffff", - "color-background-progress-bar-content-default": "#0073bb", - "color-background-progress-bar-content-in-flash": "rgba(255, 255, 255, 0.7)", - "color-background-progress-bar-layout-default": "#eaeded", - "color-background-progress-bar-layout-in-flash": "rgba(255, 255, 255, 0.25)", - "color-background-segment-active": "#0073bb", - "color-background-segment-default": "#ffffff", - "color-background-segment-disabled": "#ffffff", - "color-background-segment-hover": "#fafafa", - "color-background-slider-error-pressed": "#700000", - "color-background-slider-handle-active": "#0a4a74", - "color-background-slider-handle-default": "#0073bb", - "color-background-slider-handle-ring": "#ffffff", - "color-background-slider-track": "#879596", - "color-background-slider-warning-pressed": "#906806", - "color-background-status-error": "#fdf3f1", - "color-background-status-info": "#f1faff", - "color-background-status-success": "#f2f8f0", - "color-background-status-warning": "#fffef0", - "color-background-table-header": "#fafafa", - "color-background-tiles-disabled": "#eaeded", - "color-background-toggle-button-normal-pressed": "#eaeded", - "color-background-toggle-checked-disabled": "#99cbe4", - "color-background-toggle-default": "#545b64", - "color-board-placeholder-active": "#d5dbdb", - "color-board-placeholder-hover": "#99cbe4", - "color-border-button-normal-active": "#545b64", - "color-border-button-normal-default": "#545b64", - "color-border-button-normal-disabled": "#d5dbdb", - "color-border-button-normal-hover": "#16191f", - "color-border-button-primary-disabled": "#d5dbdb", - "color-border-calendar-grid": "#eaeded", - "color-border-calendar-grid-selected-focus-ring": "#0073bb", - "color-border-code-editor-ace-active-line-dark-theme": "#687078", - "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb", - "color-border-code-editor-default": "#d5dbdb", - "color-border-code-editor-pane-item-hover": "#687078", - "color-border-container-divider": "#eaeded", - "color-border-container-top": "#eaeded", - "color-border-control-checked": "#0073bb", - "color-border-control-default": "#687078", - "color-border-control-disabled": "#d5dbdb", - "color-border-divider-active": "#687078", - "color-border-divider-default": "#eaeded", - "color-border-divider-interactive-default": "#687078", - "color-border-divider-panel-bottom": "rgba(0, 28, 36, 0.15)", - "color-border-divider-panel-side": "transparent", - "color-border-divider-secondary": "#eaeded", - "color-border-dropdown-container": "transparent", - "color-border-dropdown-group": "#eaeded", - "color-border-dropdown-item-default": "#eaeded", - "color-border-dropdown-item-dimmed-hover": "#879596", - "color-border-dropdown-item-focused": "#0073bb", - "color-border-dropdown-item-hover": "#879596", - "color-border-dropdown-item-selected": "#eaeded", - "color-border-dropdown-item-top": "#eaeded", - "color-border-editable-cell-hover": "#879596", - "color-border-input-default": "#687078", - "color-border-input-disabled": "#eaeded", - "color-border-input-focused": "#0073bb", - "color-border-item-focused": "#0073bb", - "color-border-item-placeholder": "transparent", - "color-border-item-selected": "#0073bb", - "color-border-layout": "#d5dbdb", - "color-border-notification-stack-bar": "#2a2e33", - "color-border-panel-header": "#eaeded", - "color-border-popover": "#d5dbdb", - "color-border-segment-active": "#16191f", - "color-border-segment-default": "#687078", - "color-border-segment-disabled": "#d5dbdb", - "color-border-segment-hover": "#16191f", - "color-border-status-error": "#d13212", - "color-border-status-info": "#0073bb", - "color-border-status-success": "#1d8102", - "color-border-status-warning": "#906806", - "color-border-tabs-divider": "#aab7b8", - "color-border-tabs-shadow": "#eaeded", - "color-border-tabs-underline": "#16191f", - "color-border-tiles-disabled": "transparent", - "color-border-toggle-button-normal-pressed": "#545b64", - "color-border-tutorial": "#aab7b8", - "color-charts-blue-1-1000": "#01437d", - "color-charts-blue-1-1100": "#003c75", - "color-charts-blue-1-1200": "#00366d", - "color-charts-blue-1-300": "#529ccb", - "color-charts-blue-1-400": "#3184c2", - "color-charts-blue-1-500": "#0273bb", - "color-charts-blue-1-600": "#0166ab", - "color-charts-blue-1-700": "#015b9d", - "color-charts-blue-1-800": "#015292", - "color-charts-blue-1-900": "#014a87", - "color-charts-blue-2-1000": "#23379b", - "color-charts-blue-2-1100": "#1f3191", - "color-charts-blue-2-1200": "#1b2b88", - "color-charts-blue-2-300": "#688ae8", - "color-charts-blue-2-400": "#5978e3", - "color-charts-blue-2-500": "#4066df", - "color-charts-blue-2-600": "#3759ce", - "color-charts-blue-2-700": "#314fbf", - "color-charts-blue-2-800": "#2c46b1", - "color-charts-blue-2-900": "#273ea5", - "color-charts-green-1000": "#104d01", - "color-charts-green-1100": "#0f4601", - "color-charts-green-1200": "#0d4000", - "color-charts-green-300": "#67a353", - "color-charts-green-400": "#41902c", - "color-charts-green-500": "#1f8104", - "color-charts-green-600": "#1a7302", - "color-charts-green-700": "#176702", - "color-charts-green-800": "#145d02", - "color-charts-green-900": "#125502", - "color-charts-line-axis": "#d5dbdb", - "color-charts-line-grid": "#d5dbdb", - "color-charts-line-tick": "#d5dbdb", - "color-charts-orange-1000": "#732c02", - "color-charts-orange-1100": "#692801", - "color-charts-orange-1200": "#602400", - "color-charts-orange-300": "#e07941", - "color-charts-orange-400": "#cc5f21", - "color-charts-orange-500": "#bc4d01", - "color-charts-orange-600": "#a84401", - "color-charts-orange-700": "#983c02", - "color-charts-orange-800": "#8a3603", - "color-charts-orange-900": "#7e3103", - "color-charts-palette-categorical-1": "#688ae8", - "color-charts-palette-categorical-10": "#a84401", - "color-charts-palette-categorical-11": "#273ea5", - "color-charts-palette-categorical-12": "#780d35", - "color-charts-palette-categorical-13": "#03524a", - "color-charts-palette-categorical-14": "#4a238b", - "color-charts-palette-categorical-15": "#7e3103", - "color-charts-palette-categorical-16": "#1b2b88", - "color-charts-palette-categorical-17": "#ce567c", - "color-charts-palette-categorical-18": "#003e38", - "color-charts-palette-categorical-19": "#9469d6", - "color-charts-palette-categorical-2": "#c33d69", - "color-charts-palette-categorical-20": "#602400", - "color-charts-palette-categorical-21": "#4066df", - "color-charts-palette-categorical-22": "#a32952", - "color-charts-palette-categorical-23": "#0d7d70", - "color-charts-palette-categorical-24": "#6b40b2", - "color-charts-palette-categorical-25": "#bc4d01", - "color-charts-palette-categorical-26": "#2c46b1", - "color-charts-palette-categorical-27": "#81143b", - "color-charts-palette-categorical-28": "#045b52", - "color-charts-palette-categorical-29": "#512994", - "color-charts-palette-categorical-3": "#2ea597", - "color-charts-palette-categorical-30": "#8a3603", - "color-charts-palette-categorical-31": "#1f3191", - "color-charts-palette-categorical-32": "#da7596", - "color-charts-palette-categorical-33": "#01443e", - "color-charts-palette-categorical-34": "#a783e1", - "color-charts-palette-categorical-35": "#692801", - "color-charts-palette-categorical-36": "#5978e3", - "color-charts-palette-categorical-37": "#b1325c", - "color-charts-palette-categorical-38": "#1c8e81", - "color-charts-palette-categorical-39": "#7749bf", - "color-charts-palette-categorical-4": "#8456ce", - "color-charts-palette-categorical-40": "#cc5f21", - "color-charts-palette-categorical-41": "#314fbf", - "color-charts-palette-categorical-42": "#8b1b42", - "color-charts-palette-categorical-43": "#06645a", - "color-charts-palette-categorical-44": "#59309d", - "color-charts-palette-categorical-45": "#983c02", - "color-charts-palette-categorical-46": "#23379b", - "color-charts-palette-categorical-47": "#6f062f", - "color-charts-palette-categorical-48": "#014b44", - "color-charts-palette-categorical-49": "#431d84", - "color-charts-palette-categorical-5": "#e07941", - "color-charts-palette-categorical-50": "#732c02", - "color-charts-palette-categorical-6": "#3759ce", - "color-charts-palette-categorical-7": "#962249", - "color-charts-palette-categorical-8": "#096f64", - "color-charts-palette-categorical-9": "#6237a7", - "color-charts-pink-1000": "#81143b", - "color-charts-pink-1100": "#780d35", - "color-charts-pink-1200": "#6f062f", - "color-charts-pink-300": "#da7596", - "color-charts-pink-400": "#ce567c", - "color-charts-pink-500": "#c33d69", - "color-charts-pink-600": "#b1325c", - "color-charts-pink-700": "#a32952", - "color-charts-pink-800": "#962249", - "color-charts-pink-900": "#8b1b42", - "color-charts-purple-1000": "#512994", - "color-charts-purple-1100": "#4a238b", - "color-charts-purple-1200": "#431d84", - "color-charts-purple-300": "#a783e1", - "color-charts-purple-400": "#9469d6", - "color-charts-purple-500": "#8456ce", - "color-charts-purple-600": "#7749bf", - "color-charts-purple-700": "#6b40b2", - "color-charts-purple-800": "#6237a7", - "color-charts-purple-900": "#59309d", - "color-charts-red-1000": "#7d2105", - "color-charts-red-1100": "#721e03", - "color-charts-red-1200": "#671c00", - "color-charts-red-300": "#ea7158", - "color-charts-red-400": "#dc5032", - "color-charts-red-500": "#d13313", - "color-charts-red-600": "#ba2e0f", - "color-charts-red-700": "#a82a0c", - "color-charts-red-800": "#972709", - "color-charts-red-900": "#892407", - "color-charts-status-critical": "#7d2105", - "color-charts-status-high": "#ba2e0f", - "color-charts-status-info": "#3184c2", - "color-charts-status-low": "#b2911c", - "color-charts-status-medium": "#cc5f21", - "color-charts-status-neutral": "#879596", - "color-charts-status-positive": "#67a353", - "color-charts-teal-1000": "#014b44", - "color-charts-teal-1100": "#01443e", - "color-charts-teal-1200": "#003e38", - "color-charts-teal-300": "#2ea597", - "color-charts-teal-400": "#1c8e81", - "color-charts-teal-500": "#0d7d70", - "color-charts-teal-600": "#096f64", - "color-charts-teal-700": "#06645a", - "color-charts-teal-800": "#045b52", - "color-charts-teal-900": "#03524a", - "color-charts-threshold-info": "#0073bb", - "color-charts-threshold-negative": "#d13212", - "color-charts-threshold-neutral": "#687078", - "color-charts-threshold-positive": "#1d8102", - "color-charts-yellow-1000": "#553f03", - "color-charts-yellow-1100": "#4d3901", - "color-charts-yellow-1200": "#483300", - "color-charts-yellow-300": "#b2911c", - "color-charts-yellow-400": "#9c7b0b", - "color-charts-yellow-500": "#8a6b05", - "color-charts-yellow-600": "#7b5f04", - "color-charts-yellow-700": "#6f5504", - "color-charts-yellow-800": "#654d03", - "color-charts-yellow-900": "#5d4503", - "color-drag-placeholder-active": "#d5dbdb", - "color-drag-placeholder-hover": "#99cbe4", - "color-dropzone-background-default": "#ffffff", - "color-dropzone-background-hover": "#f1faff", - "color-dropzone-border-default": "#879596", - "color-dropzone-border-hover": "#002b66", - "color-dropzone-text-default": "#545b64", - "color-dropzone-text-hover": "#545b64", - "color-foreground-control-default": "#ffffff", - "color-foreground-control-disabled": "#ffffff", - "color-foreground-control-read-only": "#687078", - "color-shadow-default": "rgba(0, 28, 36, 0.5)", - "color-stroke-chart-line": "#879596", - "color-text-accent": "#0073bb", - "color-text-avatar": "#ffffff", - "color-text-body-default": "#16191f", - "color-text-body-secondary": "#545b64", - "color-text-breadcrumb-current": "#687078", - "color-text-breadcrumb-icon": "#687078", - "color-text-button-inline-icon-default": "#545b64", - "color-text-button-inline-icon-disabled": "#aab7b8", - "color-text-button-inline-icon-hover": "#16191f", - "color-text-button-normal-active": "#16191f", - "color-text-button-normal-default": "#545b64", - "color-text-button-normal-disabled": "#879596", - "color-text-button-normal-hover": "#16191f", - "color-text-button-primary-active": "#ffffff", - "color-text-button-primary-default": "#ffffff", - "color-text-button-primary-disabled": "#879596", - "color-text-button-primary-hover": "#ffffff", - "color-text-calendar-date-hover": "#16191f", - "color-text-calendar-month": "#545b64", - "color-text-chat-bubble-incoming": "#16191f", - "color-text-chat-bubble-outgoing": "#16191f", - "color-text-code-editor-gutter-active-line": "#ffffff", - "color-text-code-editor-gutter-default": "#16191f", - "color-text-code-editor-status-bar-disabled": "#879596", - "color-text-code-editor-tab-button-error": "#ffffff", - "color-text-column-header": "#545b64", - "color-text-column-sorting-icon": "#687078", - "color-text-control-disabled": "#aab7b8", - "color-text-counter": "#687078", - "color-text-disabled": "#aab7b8", - "color-text-disabled-inline-edit": "#545b64", - "color-text-dropdown-footer": "#687078", - "color-text-dropdown-group-label": "#545b64", - "color-text-dropdown-item-default": "#16191f", - "color-text-dropdown-item-dimmed": "#aab7b8", - "color-text-dropdown-item-disabled": "#aab7b8", - "color-text-dropdown-item-filter-match": "#0073bb", - "color-text-dropdown-item-highlighted": "#16191f", - "color-text-dropdown-item-secondary": "#687078", - "color-text-dropdown-item-secondary-hover": "#687078", - "color-text-empty": "#687078", - "color-text-expandable-section-default": "#545b64", - "color-text-expandable-section-hover": "#16191f", - "color-text-expandable-section-navigation-icon-default": "#879596", - "color-text-form-default": "#16191f", - "color-text-form-label": "#16191f", - "color-text-form-secondary": "#687078", - "color-text-group-label": "#545b64", - "color-text-heading-default": "#16191f", - "color-text-heading-secondary": "#545b64", - "color-text-home-header-default": "#ffffff", - "color-text-home-header-secondary": "#d5dbdb", - "color-text-icon-subtle": "#687078", - "color-text-input-disabled": "#879596", - "color-text-input-placeholder": "#687078", - "color-text-input-placeholder-disabled": "#687078", - "color-text-interactive-active": "#16191f", - "color-text-interactive-default": "#545b64", - "color-text-interactive-disabled": "#aab7b8", - "color-text-interactive-hover": "#16191f", - "color-text-interactive-inverted-default": "#d5dbdb", - "color-text-interactive-inverted-hover": "#fafafa", - "color-text-inverted": "#ffffff", - "color-text-label": "#545b64", - "color-text-label-gen-ai": "#7300e5", - "color-text-layout-toggle": "#545b64", - "color-text-layout-toggle-active": "#ffffff", - "color-text-layout-toggle-hover": "#0073bb", - "color-text-layout-toggle-selected": "#ffffff", - "color-text-link-button-normal-active": "#16191f", - "color-text-link-button-normal-default": "#545b64", - "color-text-link-button-normal-hover": "#16191f", - "color-text-link-button-underline": "currentColor", - "color-text-link-button-underline-hover": "currentColor", - "color-text-link-default": "#0073bb", - "color-text-link-hover": "#0a4a74", - "color-text-link-inverted-hover": "#fafafa", - "color-text-notification-default": "#fafafa", - "color-text-notification-severity-critical": "#fafafa", - "color-text-notification-severity-high": "#fafafa", - "color-text-notification-severity-low": "#16191f", - "color-text-notification-severity-medium": "#000000", - "color-text-notification-severity-neutral": "#fafafa", - "color-text-notification-stack-bar": "#ffffff", - "color-text-notification-yellow": "#16191f", - "color-text-pagination-page-number-active-disabled": "#545b64", - "color-text-pagination-page-number-default": "#545b64", - "color-text-segment-active": "#ffffff", - "color-text-segment-default": "#545b64", - "color-text-segment-hover": "#16191f", - "color-text-small": "#687078", - "color-text-status-error": "#d13212", - "color-text-status-inactive": "#687078", - "color-text-status-info": "#0073bb", - "color-text-status-success": "#1d8102", - "color-text-status-warning": "#906806", - "color-text-toggle-button-icon-pressed": "#16191f", - "color-text-toggle-button-normal-pressed": "#16191f", - "color-text-top-navigation-title": "#16191f", - "color-transparent": "transparent", - "font-box-value-large-weight": "300", - "font-button-letter-spacing": "0.25px", - "font-chart-detail-size": "14px", - "font-display-label-weight": "400", - "font-expandable-heading-size": "14px", - "font-family-base": ""Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif", - "font-family-monospace": "Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace", - "font-header-h2-description-line-height": "16px", - "font-header-h2-description-size": "12px", - "font-link-button-letter-spacing": "normal", - "font-link-button-weight": "400", - "font-panel-header-line-height": "22px", - "font-panel-header-size": "18px", - "font-size-body-m": "14px", - "font-size-body-s": "12px", - "font-size-display-l": "44px", - "font-size-heading-l": "18px", - "font-size-heading-m": "18px", - "font-size-heading-s": "16px", - "font-size-heading-xl": "28px", - "font-size-heading-xs": "16px", - "font-smoothing-moz-osx": "auto", - "font-smoothing-webkit": "auto", - "font-tabs-disabled-weight": "400", - "font-tabs-line-height": "22px", - "font-tabs-size": "14px", - "font-wayfinding-link-active-weight": "700", - "font-weight-button": "700", - "font-weight-heading-l": "700", - "font-weight-heading-m": "400", - "font-weight-heading-s": "700", - "font-weight-heading-xl": "400", - "font-weight-heading-xs": "400", - "font-weight-heavy": "700", - "letter-spacing-body-s": "normal", - "letter-spacing-display-l": "normal", - "letter-spacing-heading-l": "normal", - "letter-spacing-heading-m": "normal", - "letter-spacing-heading-s": "normal", - "letter-spacing-heading-xl": "normal", - "line-height-body-m": "22px", - "line-height-body-s": "16px", - "line-height-display-l": "56px", - "line-height-heading-l": "22px", - "line-height-heading-m": "22px", - "line-height-heading-s": "20px", - "line-height-heading-xl": "36px", - "line-height-heading-xs": "20px", - "motion-duration-avatar-gen-ai-gradient": "3600ms", - "motion-duration-avatar-loading-dots": "1200ms", - "motion-duration-complex": "270ms", - "motion-duration-expressive": "180ms", - "motion-duration-extra-slow": "270ms", - "motion-duration-fast": "90ms", - "motion-duration-moderate": "135ms", - "motion-duration-refresh-only-fast": "0ms", - "motion-duration-refresh-only-medium": "0ms", - "motion-duration-refresh-only-slow": "0ms", - "motion-duration-responsive": "135ms", - "motion-duration-rotate-180": "135ms", - "motion-duration-rotate-90": "135ms", - "motion-duration-show-paced": "180ms", - "motion-duration-show-quick": "135ms", - "motion-duration-slow": "180ms", - "motion-duration-transition-quick": "90ms", - "motion-duration-transition-show-paced": "180ms", - "motion-duration-transition-show-quick": "90ms", - "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)", - "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)", - "motion-easing-expressive": "ease-out", - "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)", - "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)", - "motion-easing-refresh-only-c": "cubic-bezier(0.84, 0, 0.16, 1)", - "motion-easing-responsive": "ease-out", - "motion-easing-rotate-180": "cubic-bezier(0.165, 0.84, 0.44, 1)", - "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)", - "motion-easing-show-paced": "ease-out", - "motion-easing-show-quick": "ease-out", - "motion-easing-sticky": "ease-out", - "motion-easing-transition-quick": "linear", - "motion-easing-transition-show-paced": "ease-out", - "motion-keyframes-fade-in": "awsui-fade-in-35003c", - "motion-keyframes-fade-out": "awsui-fade-out-35003c", - "motion-keyframes-scale-popup": "awsui-none-35003c", - "motion-keyframes-status-icon-error": "awsui-none-35003c", - "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", - "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)", - "shadow-flash-sticky": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-modal": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-panel": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-panel-toggle": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-popover": "0px 1px 4px -2px rgba(0, 28, 36, 0.5)", - "shadow-split-bottom": "0 -2px 1px -1px rgba(0, 28, 36, 0.15), 0 -1px 1px -1px rgba(0, 28, 36, 0.3)", - "shadow-split-side": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", - "shadow-sticky": "0px 1px 4px -2px rgba(0, 28, 36, 0.5)", - "shadow-sticky-column-first": "4px 0 8px 0 rgba(0, 28, 36, 0.1)", - "shadow-sticky-column-last": "-4px 0 8px 0 rgba(0, 28, 36, 0.1)", - "shadow-sticky-embedded": "0px 1px 4px -2px rgba(0, 28, 36, 0.5)", - "size-calendar-grid-width": "234px", - "size-control": "14px", - "size-icon-big": "32px", - "size-icon-large": "48px", - "size-icon-medium": "16px", - "size-icon-normal": "16px", - "size-table-selection-horizontal": "54px", - "size-vertical-input": "32px", - "size-vertical-panel-icon-offset": "15px", - "space-alert-action-left": "20px", - "space-alert-horizontal": "20px", - "space-alert-message-right": "0px", - "space-alert-vertical": "12px", - "space-button-focus-outline-gutter": "3px", - "space-button-horizontal": "20px", - "space-button-icon-focus-outline-gutter-vertical": "3px", - "space-button-icon-only-horizontal": "16px", - "space-button-inline-icon-focus-outline-gutter": "3px", - "space-button-modal-dismiss-vertical": "4px", - "space-calendar-grid-focus-outline-gutter": "0px", - "space-calendar-grid-gutter": "0px", - "space-calendar-grid-selected-focus-outline-gutter": "2px", - "space-card-horizontal": "20px", - "space-card-vertical": "20px", - "space-code-editor-status-focus-outline-gutter": "3px", - "space-container-content-top": "16px", - "space-container-header-bottom": "12px", - "space-container-header-top": "12px", - "space-container-horizontal": "20px", - "space-content-header-padding-bottom": "16px", - "space-dark-header-overlap-distance": "0px", - "space-expandable-section-icon-offset-top": "8px", - "space-field-horizontal": "8px", - "space-field-icon-offset": "32px", - "space-filtering-token-dismiss-button-focus-outline-gutter": "0px", - "space-filtering-token-operation-select-focus-outline-gutter": "0px", - "space-flashbar-action-left": "16px", - "space-flashbar-dismiss-right": "4px", - "space-flashbar-horizontal": "12px", - "space-grid-gutter": "20px", - "space-key-value-gap": "2px", - "space-l": "20px", - "space-layout-content-bottom": "20px", - "space-layout-content-horizontal": "40px", - "space-layout-toggle-diameter": "36px", - "space-layout-toggle-padding": "12px", - "space-m": "16px", - "space-modal-content-bottom": "20px", - "space-modal-horizontal": "20px", - "space-none": "0px", - "space-option-icon-big-top": "2px", - "space-panel-content-bottom": "40px", - "space-panel-content-top": "20px", - "space-panel-divider-margin-horizontal": "12px", - "space-panel-header-vertical": "20px", - "space-panel-nav-left": "32px", - "space-panel-side-left": "32px", - "space-panel-side-right": "32px", - "space-panel-split-bottom": "20px", - "space-panel-split-top": "0px", - "space-s": "12px", - "space-scaled-2x-l": "20px", - "space-scaled-2x-m": "16px", - "space-scaled-2x-xl": "24px", - "space-scaled-2x-xxs": "4px", - "space-scaled-l": "20px", - "space-scaled-m": "16px", - "space-scaled-none": "0px", - "space-scaled-s": "12px", - "space-scaled-xl": "24px", - "space-scaled-xs": "8px", - "space-scaled-xxl": "32px", - "space-scaled-xxs": "4px", - "space-scaled-xxxl": "40px", - "space-scaled-xxxs": "2px", - "space-segmented-control-focus-outline-gutter": "3px", - "space-static-l": "20px", - "space-static-m": "16px", - "space-static-s": "12px", - "space-static-xl": "24px", - "space-static-xs": "8px", - "space-static-xxl": "32px", - "space-static-xxs": "4px", - "space-static-xxxl": "40px", - "space-static-xxxs": "2px", - "space-table-content-bottom": "0px", - "space-table-embedded-header-top": "12px", - "space-table-footer-horizontal": "20px", - "space-table-header-focus-outline-gutter": "0px", - "space-table-header-horizontal": "20px", - "space-table-header-tools-bottom": "4px", - "space-table-header-tools-full-page-bottom": "4px", - "space-table-horizontal": "0px", - "space-tabs-content-top": "16px", - "space-tabs-focus-outline-gutter": "0px", - "space-tile-gutter": "24px", - "space-xl": "24px", - "space-xs": "8px", - "space-xxl": "32px", - "space-xxs": "4px", - "space-xxxl": "40px", - "space-xxxs": "2px", -} -`; +exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `{}`; exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" 1`] = ` { From aeae8f957517b019f0ec161a266988f5c1e7281e Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 19 Feb 2025 16:21:47 +0100 Subject: [PATCH 22/25] Update unit test snapshot --- .../__snapshots__/design-tokens.test.ts.snap | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 891b9c9cd4..d0e5119c22 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -417,8 +417,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "#21252c", + "light": "#fafafa", }, }, "color-background-status-error": { @@ -2942,8 +2942,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "#21252c", + "light": "#fafafa", }, }, "color-background-status-error": { @@ -5467,8 +5467,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "#21252c", + "light": "#fafafa", }, }, "color-background-status-error": { @@ -7992,8 +7992,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "#21252c", + "light": "#fafafa", }, }, "color-background-status-error": { @@ -10517,8 +10517,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "#21252c", + "light": "#fafafa", }, }, "color-background-status-error": { @@ -13042,8 +13042,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#2a2e33", + "dark": "#21252c", + "light": "#21252c", }, }, "color-background-status-error": { @@ -15567,8 +15567,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "#21252c", + "light": "#fafafa", }, }, "color-background-status-error": { From 09eea70897d5ef62cc5388b54d074acb7b7e1e08 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 19 Feb 2025 18:57:02 +0100 Subject: [PATCH 23/25] Adjust space for classic --- src/segmented-control/segment.scss | 8 ++++---- src/segmented-control/styles.scss | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 836fe04b35..5627eca670 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -60,6 +60,10 @@ $segment-divider-width: 1px; border-inline: none; border-block: none; + &:not(.refresh) { + block-size: calc(100% - $segment-gap - (2 * awsui.$border-width-field)); + } + &:focus { outline: none; } @@ -84,10 +88,6 @@ $segment-divider-width: 1px; z-index: 1; } - &:not(.refresh):not(:last-child)::after { - inset-inline-end: calc(-1 * ($segment-gap - $segment-divider-width)); - } - @for $i from 1 through 6 { &:nth-child(#{$i}) { grid-column: $i; diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index e194df6acb..f5c528016d 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -37,8 +37,9 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs); padding-inline: awsui.$space-static-xxxs; gap: $segment-space; + &:not(.refresh) { - gap: calc(seg.$segment-gap + seg.$segment-divider-width); + padding-inline: calc(awsui.$space-static-xxxs + 1px); } @include styles.media-breakpoint-down(styles.$breakpoint-x-small) { From 1e3e06d6ba8818433fde259ee0a57608fb7a434e Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 20 Feb 2025 10:36:07 +0100 Subject: [PATCH 24/25] Fix divider height issue in compact --- src/segmented-control/segment.scss | 4 ++++ src/segmented-control/styles.scss | 5 ++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 5627eca670..f1056cef50 100644 --- a/src/segmented-control/segment.scss +++ b/src/segmented-control/segment.scss @@ -83,10 +83,14 @@ $segment-divider-width: 1px; position: absolute; inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width)); block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2)); + min-block-size: calc(awsui.$line-height-body-m - $segment-gap * 2); inline-size: $segment-divider-width; background: awsui.$color-border-input-default; z-index: 1; } + &:not(.refresh):not(:last-child)::after { + inset-inline-end: calc(-1 * $segment-gap); + } @for $i from 1 through 6 { &:nth-child(#{$i}) { diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss index f5c528016d..d9cea75719 100644 --- a/src/segmented-control/styles.scss +++ b/src/segmented-control/styles.scss @@ -8,8 +8,6 @@ @use 'sass:list' as list; @use '../internal/styles/tokens' as awsui; -$segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); - @function repeatValue($value, $times) { $result: (); @@ -36,10 +34,11 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); align-items: center; min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs); padding-inline: awsui.$space-static-xxxs; - gap: $segment-space; + gap: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width}); &:not(.refresh) { padding-inline: calc(awsui.$space-static-xxxs + 1px); + gap: calc(#{seg.$segment-gap} * 2 - #{seg.$segment-divider-width}); } @include styles.media-breakpoint-down(styles.$breakpoint-x-small) { From 3deea6ad3cbf6e3877d456fc7ec671411b71763d Mon Sep 17 00:00:00 2001 From: at-susie Date: Thu, 20 Feb 2025 10:53:03 +0100 Subject: [PATCH 25/25] Update theme snapshot test --- .../__snapshots__/themes.test.ts.snap | 659 +++++++++++++++++- 1 file changed, 658 insertions(+), 1 deletion(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index ef14ab9e15..f01576ec50 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -1318,7 +1318,664 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` } `; -exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `{}`; +exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` +{ + "border-active-width": "2px", + "border-code-editor-status-divider-width": "0px", + "border-container-sticky-width": "1px", + "border-container-top-width": "1px", + "border-control-focus-ring-shadow-spread": "1px", + "border-control-invalid-focus-ring-shadow-spread": "1px", + "border-divider-list-width": "1px", + "border-divider-section-width": "1px", + "border-dropdown-virtual-offset-width": "0px", + "border-invalid-width": "4px", + "border-item-width": "1px", + "border-line-chart-dash-array": "3 5", + "border-line-chart-line-join": "miter", + "border-line-chart-width": "2px", + "border-link-focus-ring-outline": "5px auto Highlight", + "border-link-focus-ring-shadow-spread": "0px", + "border-panel-header-width": "0px", + "border-panel-top-width": "0px", + "border-radius-alert": "2px", + "border-radius-badge": "16px", + "border-radius-button": "2px", + "border-radius-calendar-day-focus-ring": "2px", + "border-radius-chat-bubble": "2px", + "border-radius-code-editor": "0px", + "border-radius-container": "0px", + "border-radius-control-circular-focus-ring": "50%", + "border-radius-control-default-focus-ring": "2px", + "border-radius-dropdown": "0px", + "border-radius-dropzone": "0px", + "border-radius-flashbar": "0px", + "border-radius-input": "2px", + "border-radius-item": "0px", + "border-radius-popover": "2px", + "border-radius-tabs-focus-ring": "0px", + "border-radius-tiles": "2px", + "border-radius-token": "2px", + "border-radius-tutorial-panel-item": "2px", + "border-table-sticky-width": "0px", + "border-width-alert": "1px", + "border-width-field": "1px", + "border-width-popover": "1px", + "color-background-avatar-default": "#545b64", + "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)", + "color-background-badge-icon": "#d13212", + "color-background-button-link-active": "#eaeded", + "color-background-button-link-hover": "#fafafa", + "color-background-button-normal-active": "#eaeded", + "color-background-button-normal-default": "#ffffff", + "color-background-button-normal-disabled": "#ffffff", + "color-background-button-normal-hover": "#fafafa", + "color-background-button-primary-active": "#12293b", + "color-background-button-primary-default": "#0073bb", + "color-background-button-primary-disabled": "#ffffff", + "color-background-button-primary-hover": "#0a4a74", + "color-background-calendar-current-date": "#f2f3f3", + "color-background-cell-shaded": "#f2f3f3", + "color-background-chat-bubble-incoming": "#f2f3f3", + "color-background-chat-bubble-outgoing": "transparent", + "color-background-code-editor-gutter-active-line-default": "#687078", + "color-background-code-editor-gutter-active-line-error": "#d13212", + "color-background-code-editor-gutter-default": "#f2f3f3", + "color-background-code-editor-loading": "#f2f3f3", + "color-background-code-editor-pane-item-hover": "#eaeded", + "color-background-code-editor-status-bar": "#f2f3f3", + "color-background-container-content": "#ffffff", + "color-background-container-header": "#fafafa", + "color-background-control-checked": "#0073bb", + "color-background-control-default": "#ffffff", + "color-background-control-disabled": "#d5dbdb", + "color-background-dropdown-item-default": "#ffffff", + "color-background-dropdown-item-dimmed": "transparent", + "color-background-dropdown-item-filter-match": "#f1faff", + "color-background-dropdown-item-hover": "#f2f3f3", + "color-background-dropdown-item-selected": "#f1faff", + "color-background-home-header": "#000000", + "color-background-input-default": "#ffffff", + "color-background-input-disabled": "#eaeded", + "color-background-item-selected": "#f1faff", + "color-background-layout-main": "#f2f3f3", + "color-background-layout-mobile-panel": "#ffffff", + "color-background-layout-panel-content": "#ffffff", + "color-background-layout-panel-hover": "#eaeded", + "color-background-layout-toggle-active": "#2a2e33", + "color-background-layout-toggle-default": "transparent", + "color-background-layout-toggle-hover": "#545b64", + "color-background-layout-toggle-selected-active": "#0073bb", + "color-background-layout-toggle-selected-default": "#0073bb", + "color-background-layout-toggle-selected-hover": "#0a4a74", + "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #99f7ff 0%, #0096fa 10%, #bf80ff 24%, #7300e5 50%, #bf80ff 76%, #0096fa 90%, #99f7ff 100%)", + "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)", + "color-background-notification-blue": "#0073bb", + "color-background-notification-green": "#1d8102", + "color-background-notification-grey": "#545b64", + "color-background-notification-red": "#d13212", + "color-background-notification-severity-critical": "#870303", + "color-background-notification-severity-high": "#ce3311", + "color-background-notification-severity-low": "#f2cd54", + "color-background-notification-severity-medium": "#f89256", + "color-background-notification-severity-neutral": "#687078", + "color-background-notification-stack-bar": "#2a2e33", + "color-background-notification-stack-bar-active": "#2a2e33", + "color-background-notification-stack-bar-hover": "#545b64", + "color-background-notification-yellow": "#ffe347", + "color-background-popover": "#ffffff", + "color-background-progress-bar-content-default": "#0073bb", + "color-background-progress-bar-content-in-flash": "rgba(255, 255, 255, 0.7)", + "color-background-progress-bar-layout-default": "#eaeded", + "color-background-progress-bar-layout-in-flash": "rgba(255, 255, 255, 0.25)", + "color-background-segment-active": "#0073bb", + "color-background-segment-default": "#ffffff", + "color-background-segment-disabled": "#ffffff", + "color-background-segment-hover": "#fafafa", + "color-background-slider-error-pressed": "#700000", + "color-background-slider-handle-active": "#0a4a74", + "color-background-slider-handle-default": "#0073bb", + "color-background-slider-handle-ring": "#ffffff", + "color-background-slider-track": "#879596", + "color-background-slider-warning-pressed": "#906806", + "color-background-status-error": "#fdf3f1", + "color-background-status-info": "#f1faff", + "color-background-status-success": "#f2f8f0", + "color-background-status-warning": "#fffef0", + "color-background-table-header": "#fafafa", + "color-background-tiles-disabled": "#eaeded", + "color-background-toggle-button-normal-pressed": "#eaeded", + "color-background-toggle-checked-disabled": "#99cbe4", + "color-background-toggle-default": "#545b64", + "color-board-placeholder-active": "#d5dbdb", + "color-board-placeholder-hover": "#99cbe4", + "color-border-button-normal-active": "#545b64", + "color-border-button-normal-default": "#545b64", + "color-border-button-normal-disabled": "#d5dbdb", + "color-border-button-normal-hover": "#16191f", + "color-border-button-primary-disabled": "#d5dbdb", + "color-border-calendar-grid": "#eaeded", + "color-border-calendar-grid-selected-focus-ring": "#0073bb", + "color-border-code-editor-ace-active-line-dark-theme": "#687078", + "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb", + "color-border-code-editor-default": "#d5dbdb", + "color-border-code-editor-pane-item-hover": "#687078", + "color-border-container-divider": "#eaeded", + "color-border-container-top": "#eaeded", + "color-border-control-checked": "#0073bb", + "color-border-control-default": "#687078", + "color-border-control-disabled": "#d5dbdb", + "color-border-divider-active": "#687078", + "color-border-divider-default": "#eaeded", + "color-border-divider-interactive-default": "#687078", + "color-border-divider-panel-bottom": "rgba(0, 28, 36, 0.15)", + "color-border-divider-panel-side": "transparent", + "color-border-divider-secondary": "#eaeded", + "color-border-dropdown-container": "transparent", + "color-border-dropdown-group": "#eaeded", + "color-border-dropdown-item-default": "#eaeded", + "color-border-dropdown-item-dimmed-hover": "#879596", + "color-border-dropdown-item-focused": "#0073bb", + "color-border-dropdown-item-hover": "#879596", + "color-border-dropdown-item-selected": "#eaeded", + "color-border-dropdown-item-top": "#eaeded", + "color-border-editable-cell-hover": "#879596", + "color-border-input-default": "#687078", + "color-border-input-disabled": "#eaeded", + "color-border-input-focused": "#0073bb", + "color-border-item-focused": "#0073bb", + "color-border-item-placeholder": "transparent", + "color-border-item-selected": "#0073bb", + "color-border-layout": "#d5dbdb", + "color-border-notification-stack-bar": "#2a2e33", + "color-border-panel-header": "#eaeded", + "color-border-popover": "#d5dbdb", + "color-border-segment-active": "#16191f", + "color-border-segment-default": "#687078", + "color-border-segment-disabled": "#d5dbdb", + "color-border-segment-hover": "#16191f", + "color-border-status-error": "#d13212", + "color-border-status-info": "#0073bb", + "color-border-status-success": "#1d8102", + "color-border-status-warning": "#906806", + "color-border-tabs-divider": "#aab7b8", + "color-border-tabs-shadow": "#eaeded", + "color-border-tabs-underline": "#16191f", + "color-border-tiles-disabled": "transparent", + "color-border-toggle-button-normal-pressed": "#545b64", + "color-border-tutorial": "#aab7b8", + "color-charts-blue-1-1000": "#01437d", + "color-charts-blue-1-1100": "#003c75", + "color-charts-blue-1-1200": "#00366d", + "color-charts-blue-1-300": "#529ccb", + "color-charts-blue-1-400": "#3184c2", + "color-charts-blue-1-500": "#0273bb", + "color-charts-blue-1-600": "#0166ab", + "color-charts-blue-1-700": "#015b9d", + "color-charts-blue-1-800": "#015292", + "color-charts-blue-1-900": "#014a87", + "color-charts-blue-2-1000": "#23379b", + "color-charts-blue-2-1100": "#1f3191", + "color-charts-blue-2-1200": "#1b2b88", + "color-charts-blue-2-300": "#688ae8", + "color-charts-blue-2-400": "#5978e3", + "color-charts-blue-2-500": "#4066df", + "color-charts-blue-2-600": "#3759ce", + "color-charts-blue-2-700": "#314fbf", + "color-charts-blue-2-800": "#2c46b1", + "color-charts-blue-2-900": "#273ea5", + "color-charts-green-1000": "#104d01", + "color-charts-green-1100": "#0f4601", + "color-charts-green-1200": "#0d4000", + "color-charts-green-300": "#67a353", + "color-charts-green-400": "#41902c", + "color-charts-green-500": "#1f8104", + "color-charts-green-600": "#1a7302", + "color-charts-green-700": "#176702", + "color-charts-green-800": "#145d02", + "color-charts-green-900": "#125502", + "color-charts-line-axis": "#d5dbdb", + "color-charts-line-grid": "#d5dbdb", + "color-charts-line-tick": "#d5dbdb", + "color-charts-orange-1000": "#732c02", + "color-charts-orange-1100": "#692801", + "color-charts-orange-1200": "#602400", + "color-charts-orange-300": "#e07941", + "color-charts-orange-400": "#cc5f21", + "color-charts-orange-500": "#bc4d01", + "color-charts-orange-600": "#a84401", + "color-charts-orange-700": "#983c02", + "color-charts-orange-800": "#8a3603", + "color-charts-orange-900": "#7e3103", + "color-charts-palette-categorical-1": "#688ae8", + "color-charts-palette-categorical-10": "#a84401", + "color-charts-palette-categorical-11": "#273ea5", + "color-charts-palette-categorical-12": "#780d35", + "color-charts-palette-categorical-13": "#03524a", + "color-charts-palette-categorical-14": "#4a238b", + "color-charts-palette-categorical-15": "#7e3103", + "color-charts-palette-categorical-16": "#1b2b88", + "color-charts-palette-categorical-17": "#ce567c", + "color-charts-palette-categorical-18": "#003e38", + "color-charts-palette-categorical-19": "#9469d6", + "color-charts-palette-categorical-2": "#c33d69", + "color-charts-palette-categorical-20": "#602400", + "color-charts-palette-categorical-21": "#4066df", + "color-charts-palette-categorical-22": "#a32952", + "color-charts-palette-categorical-23": "#0d7d70", + "color-charts-palette-categorical-24": "#6b40b2", + "color-charts-palette-categorical-25": "#bc4d01", + "color-charts-palette-categorical-26": "#2c46b1", + "color-charts-palette-categorical-27": "#81143b", + "color-charts-palette-categorical-28": "#045b52", + "color-charts-palette-categorical-29": "#512994", + "color-charts-palette-categorical-3": "#2ea597", + "color-charts-palette-categorical-30": "#8a3603", + "color-charts-palette-categorical-31": "#1f3191", + "color-charts-palette-categorical-32": "#da7596", + "color-charts-palette-categorical-33": "#01443e", + "color-charts-palette-categorical-34": "#a783e1", + "color-charts-palette-categorical-35": "#692801", + "color-charts-palette-categorical-36": "#5978e3", + "color-charts-palette-categorical-37": "#b1325c", + "color-charts-palette-categorical-38": "#1c8e81", + "color-charts-palette-categorical-39": "#7749bf", + "color-charts-palette-categorical-4": "#8456ce", + "color-charts-palette-categorical-40": "#cc5f21", + "color-charts-palette-categorical-41": "#314fbf", + "color-charts-palette-categorical-42": "#8b1b42", + "color-charts-palette-categorical-43": "#06645a", + "color-charts-palette-categorical-44": "#59309d", + "color-charts-palette-categorical-45": "#983c02", + "color-charts-palette-categorical-46": "#23379b", + "color-charts-palette-categorical-47": "#6f062f", + "color-charts-palette-categorical-48": "#014b44", + "color-charts-palette-categorical-49": "#431d84", + "color-charts-palette-categorical-5": "#e07941", + "color-charts-palette-categorical-50": "#732c02", + "color-charts-palette-categorical-6": "#3759ce", + "color-charts-palette-categorical-7": "#962249", + "color-charts-palette-categorical-8": "#096f64", + "color-charts-palette-categorical-9": "#6237a7", + "color-charts-pink-1000": "#81143b", + "color-charts-pink-1100": "#780d35", + "color-charts-pink-1200": "#6f062f", + "color-charts-pink-300": "#da7596", + "color-charts-pink-400": "#ce567c", + "color-charts-pink-500": "#c33d69", + "color-charts-pink-600": "#b1325c", + "color-charts-pink-700": "#a32952", + "color-charts-pink-800": "#962249", + "color-charts-pink-900": "#8b1b42", + "color-charts-purple-1000": "#512994", + "color-charts-purple-1100": "#4a238b", + "color-charts-purple-1200": "#431d84", + "color-charts-purple-300": "#a783e1", + "color-charts-purple-400": "#9469d6", + "color-charts-purple-500": "#8456ce", + "color-charts-purple-600": "#7749bf", + "color-charts-purple-700": "#6b40b2", + "color-charts-purple-800": "#6237a7", + "color-charts-purple-900": "#59309d", + "color-charts-red-1000": "#7d2105", + "color-charts-red-1100": "#721e03", + "color-charts-red-1200": "#671c00", + "color-charts-red-300": "#ea7158", + "color-charts-red-400": "#dc5032", + "color-charts-red-500": "#d13313", + "color-charts-red-600": "#ba2e0f", + "color-charts-red-700": "#a82a0c", + "color-charts-red-800": "#972709", + "color-charts-red-900": "#892407", + "color-charts-status-critical": "#7d2105", + "color-charts-status-high": "#ba2e0f", + "color-charts-status-info": "#3184c2", + "color-charts-status-low": "#b2911c", + "color-charts-status-medium": "#cc5f21", + "color-charts-status-neutral": "#879596", + "color-charts-status-positive": "#67a353", + "color-charts-teal-1000": "#014b44", + "color-charts-teal-1100": "#01443e", + "color-charts-teal-1200": "#003e38", + "color-charts-teal-300": "#2ea597", + "color-charts-teal-400": "#1c8e81", + "color-charts-teal-500": "#0d7d70", + "color-charts-teal-600": "#096f64", + "color-charts-teal-700": "#06645a", + "color-charts-teal-800": "#045b52", + "color-charts-teal-900": "#03524a", + "color-charts-threshold-info": "#0073bb", + "color-charts-threshold-negative": "#d13212", + "color-charts-threshold-neutral": "#687078", + "color-charts-threshold-positive": "#1d8102", + "color-charts-yellow-1000": "#553f03", + "color-charts-yellow-1100": "#4d3901", + "color-charts-yellow-1200": "#483300", + "color-charts-yellow-300": "#b2911c", + "color-charts-yellow-400": "#9c7b0b", + "color-charts-yellow-500": "#8a6b05", + "color-charts-yellow-600": "#7b5f04", + "color-charts-yellow-700": "#6f5504", + "color-charts-yellow-800": "#654d03", + "color-charts-yellow-900": "#5d4503", + "color-drag-placeholder-active": "#d5dbdb", + "color-drag-placeholder-hover": "#99cbe4", + "color-dropzone-background-default": "#ffffff", + "color-dropzone-background-hover": "#f1faff", + "color-dropzone-border-default": "#879596", + "color-dropzone-border-hover": "#002b66", + "color-dropzone-text-default": "#545b64", + "color-dropzone-text-hover": "#545b64", + "color-foreground-control-default": "#ffffff", + "color-foreground-control-disabled": "#ffffff", + "color-foreground-control-read-only": "#687078", + "color-shadow-default": "rgba(0, 28, 36, 0.5)", + "color-stroke-chart-line": "#879596", + "color-text-accent": "#0073bb", + "color-text-avatar": "#ffffff", + "color-text-body-default": "#16191f", + "color-text-body-secondary": "#545b64", + "color-text-breadcrumb-current": "#687078", + "color-text-breadcrumb-icon": "#687078", + "color-text-button-inline-icon-default": "#545b64", + "color-text-button-inline-icon-disabled": "#aab7b8", + "color-text-button-inline-icon-hover": "#16191f", + "color-text-button-normal-active": "#16191f", + "color-text-button-normal-default": "#545b64", + "color-text-button-normal-disabled": "#879596", + "color-text-button-normal-hover": "#16191f", + "color-text-button-primary-active": "#ffffff", + "color-text-button-primary-default": "#ffffff", + "color-text-button-primary-disabled": "#879596", + "color-text-button-primary-hover": "#ffffff", + "color-text-calendar-date-hover": "#16191f", + "color-text-calendar-month": "#545b64", + "color-text-chat-bubble-incoming": "#16191f", + "color-text-chat-bubble-outgoing": "#16191f", + "color-text-code-editor-gutter-active-line": "#ffffff", + "color-text-code-editor-gutter-default": "#16191f", + "color-text-code-editor-status-bar-disabled": "#879596", + "color-text-code-editor-tab-button-error": "#ffffff", + "color-text-column-header": "#545b64", + "color-text-column-sorting-icon": "#687078", + "color-text-control-disabled": "#aab7b8", + "color-text-counter": "#687078", + "color-text-disabled": "#aab7b8", + "color-text-disabled-inline-edit": "#545b64", + "color-text-dropdown-footer": "#687078", + "color-text-dropdown-group-label": "#545b64", + "color-text-dropdown-item-default": "#16191f", + "color-text-dropdown-item-dimmed": "#aab7b8", + "color-text-dropdown-item-disabled": "#aab7b8", + "color-text-dropdown-item-filter-match": "#0073bb", + "color-text-dropdown-item-highlighted": "#16191f", + "color-text-dropdown-item-secondary": "#687078", + "color-text-dropdown-item-secondary-hover": "#687078", + "color-text-empty": "#687078", + "color-text-expandable-section-default": "#545b64", + "color-text-expandable-section-hover": "#16191f", + "color-text-expandable-section-navigation-icon-default": "#879596", + "color-text-form-default": "#16191f", + "color-text-form-label": "#16191f", + "color-text-form-secondary": "#687078", + "color-text-group-label": "#545b64", + "color-text-heading-default": "#16191f", + "color-text-heading-secondary": "#545b64", + "color-text-home-header-default": "#ffffff", + "color-text-home-header-secondary": "#d5dbdb", + "color-text-icon-subtle": "#687078", + "color-text-input-disabled": "#879596", + "color-text-input-placeholder": "#687078", + "color-text-input-placeholder-disabled": "#687078", + "color-text-interactive-active": "#16191f", + "color-text-interactive-default": "#545b64", + "color-text-interactive-disabled": "#aab7b8", + "color-text-interactive-hover": "#16191f", + "color-text-interactive-inverted-default": "#d5dbdb", + "color-text-interactive-inverted-hover": "#fafafa", + "color-text-inverted": "#ffffff", + "color-text-label": "#545b64", + "color-text-label-gen-ai": "#7300e5", + "color-text-layout-toggle": "#545b64", + "color-text-layout-toggle-active": "#ffffff", + "color-text-layout-toggle-hover": "#0073bb", + "color-text-layout-toggle-selected": "#ffffff", + "color-text-link-button-normal-active": "#16191f", + "color-text-link-button-normal-default": "#545b64", + "color-text-link-button-normal-hover": "#16191f", + "color-text-link-button-underline": "currentColor", + "color-text-link-button-underline-hover": "currentColor", + "color-text-link-default": "#0073bb", + "color-text-link-hover": "#0a4a74", + "color-text-link-inverted-hover": "#fafafa", + "color-text-notification-default": "#fafafa", + "color-text-notification-severity-critical": "#fafafa", + "color-text-notification-severity-high": "#fafafa", + "color-text-notification-severity-low": "#16191f", + "color-text-notification-severity-medium": "#000000", + "color-text-notification-severity-neutral": "#fafafa", + "color-text-notification-stack-bar": "#ffffff", + "color-text-notification-yellow": "#16191f", + "color-text-pagination-page-number-active-disabled": "#545b64", + "color-text-pagination-page-number-default": "#545b64", + "color-text-segment-active": "#ffffff", + "color-text-segment-default": "#545b64", + "color-text-segment-hover": "#16191f", + "color-text-small": "#687078", + "color-text-status-error": "#d13212", + "color-text-status-inactive": "#687078", + "color-text-status-info": "#0073bb", + "color-text-status-success": "#1d8102", + "color-text-status-warning": "#906806", + "color-text-toggle-button-icon-pressed": "#16191f", + "color-text-toggle-button-normal-pressed": "#16191f", + "color-text-top-navigation-title": "#16191f", + "color-transparent": "transparent", + "font-box-value-large-weight": "300", + "font-button-letter-spacing": "0.25px", + "font-chart-detail-size": "14px", + "font-display-label-weight": "400", + "font-expandable-heading-size": "14px", + "font-family-base": ""Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif", + "font-family-monospace": "Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace", + "font-header-h2-description-line-height": "16px", + "font-header-h2-description-size": "12px", + "font-link-button-letter-spacing": "normal", + "font-link-button-weight": "400", + "font-panel-header-line-height": "22px", + "font-panel-header-size": "18px", + "font-size-body-m": "14px", + "font-size-body-s": "12px", + "font-size-display-l": "44px", + "font-size-heading-l": "18px", + "font-size-heading-m": "18px", + "font-size-heading-s": "16px", + "font-size-heading-xl": "28px", + "font-size-heading-xs": "16px", + "font-smoothing-moz-osx": "auto", + "font-smoothing-webkit": "auto", + "font-tabs-disabled-weight": "400", + "font-tabs-line-height": "22px", + "font-tabs-size": "14px", + "font-wayfinding-link-active-weight": "700", + "font-weight-button": "700", + "font-weight-heading-l": "700", + "font-weight-heading-m": "400", + "font-weight-heading-s": "700", + "font-weight-heading-xl": "400", + "font-weight-heading-xs": "400", + "font-weight-heavy": "700", + "letter-spacing-body-s": "normal", + "letter-spacing-display-l": "normal", + "letter-spacing-heading-l": "normal", + "letter-spacing-heading-m": "normal", + "letter-spacing-heading-s": "normal", + "letter-spacing-heading-xl": "normal", + "line-height-body-m": "22px", + "line-height-body-s": "16px", + "line-height-display-l": "56px", + "line-height-heading-l": "22px", + "line-height-heading-m": "22px", + "line-height-heading-s": "20px", + "line-height-heading-xl": "36px", + "line-height-heading-xs": "20px", + "motion-duration-avatar-gen-ai-gradient": "3600ms", + "motion-duration-avatar-loading-dots": "1200ms", + "motion-duration-complex": "270ms", + "motion-duration-expressive": "180ms", + "motion-duration-extra-slow": "270ms", + "motion-duration-fast": "90ms", + "motion-duration-moderate": "135ms", + "motion-duration-refresh-only-fast": "0ms", + "motion-duration-refresh-only-medium": "0ms", + "motion-duration-refresh-only-slow": "0ms", + "motion-duration-responsive": "135ms", + "motion-duration-rotate-180": "135ms", + "motion-duration-rotate-90": "135ms", + "motion-duration-show-paced": "180ms", + "motion-duration-show-quick": "135ms", + "motion-duration-slow": "180ms", + "motion-duration-transition-quick": "90ms", + "motion-duration-transition-show-paced": "180ms", + "motion-duration-transition-show-quick": "90ms", + "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)", + "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)", + "motion-easing-expressive": "ease-out", + "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)", + "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)", + "motion-easing-refresh-only-c": "cubic-bezier(0.84, 0, 0.16, 1)", + "motion-easing-responsive": "ease-out", + "motion-easing-rotate-180": "cubic-bezier(0.165, 0.84, 0.44, 1)", + "motion-easing-rotate-90": "cubic-bezier(0.165, 0.84, 0.44, 1)", + "motion-easing-show-paced": "ease-out", + "motion-easing-show-quick": "ease-out", + "motion-easing-sticky": "ease-out", + "motion-easing-transition-quick": "linear", + "motion-easing-transition-show-paced": "ease-out", + "motion-keyframes-fade-in": "awsui-fade-in-35003c", + "motion-keyframes-fade-out": "awsui-fade-out-35003c", + "motion-keyframes-scale-popup": "awsui-none-35003c", + "motion-keyframes-status-icon-error": "awsui-none-35003c", + "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", + "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)", + "shadow-flash-sticky": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-modal": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-panel": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-panel-toggle": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-popover": "0px 1px 4px -2px rgba(0, 28, 36, 0.5)", + "shadow-split-bottom": "0 -2px 1px -1px rgba(0, 28, 36, 0.15), 0 -1px 1px -1px rgba(0, 28, 36, 0.3)", + "shadow-split-side": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-sticky": "0px 1px 4px -2px rgba(0, 28, 36, 0.5)", + "shadow-sticky-column-first": "4px 0 8px 0 rgba(0, 28, 36, 0.1)", + "shadow-sticky-column-last": "-4px 0 8px 0 rgba(0, 28, 36, 0.1)", + "shadow-sticky-embedded": "0px 1px 4px -2px rgba(0, 28, 36, 0.5)", + "size-calendar-grid-width": "234px", + "size-control": "14px", + "size-icon-big": "32px", + "size-icon-large": "48px", + "size-icon-medium": "16px", + "size-icon-normal": "16px", + "size-table-selection-horizontal": "54px", + "size-vertical-input": "32px", + "size-vertical-panel-icon-offset": "15px", + "space-alert-action-left": "20px", + "space-alert-horizontal": "20px", + "space-alert-message-right": "0px", + "space-alert-vertical": "12px", + "space-button-focus-outline-gutter": "3px", + "space-button-horizontal": "20px", + "space-button-icon-focus-outline-gutter-vertical": "3px", + "space-button-icon-only-horizontal": "16px", + "space-button-inline-icon-focus-outline-gutter": "3px", + "space-button-modal-dismiss-vertical": "4px", + "space-calendar-grid-focus-outline-gutter": "0px", + "space-calendar-grid-gutter": "0px", + "space-calendar-grid-selected-focus-outline-gutter": "2px", + "space-card-horizontal": "20px", + "space-card-vertical": "20px", + "space-code-editor-status-focus-outline-gutter": "3px", + "space-container-content-top": "16px", + "space-container-header-bottom": "12px", + "space-container-header-top": "12px", + "space-container-horizontal": "20px", + "space-content-header-padding-bottom": "16px", + "space-dark-header-overlap-distance": "0px", + "space-expandable-section-icon-offset-top": "8px", + "space-field-horizontal": "8px", + "space-field-icon-offset": "32px", + "space-filtering-token-dismiss-button-focus-outline-gutter": "0px", + "space-filtering-token-operation-select-focus-outline-gutter": "0px", + "space-flashbar-action-left": "16px", + "space-flashbar-dismiss-right": "4px", + "space-flashbar-horizontal": "12px", + "space-grid-gutter": "20px", + "space-key-value-gap": "2px", + "space-l": "20px", + "space-layout-content-bottom": "20px", + "space-layout-content-horizontal": "40px", + "space-layout-toggle-diameter": "36px", + "space-layout-toggle-padding": "12px", + "space-m": "16px", + "space-modal-content-bottom": "20px", + "space-modal-horizontal": "20px", + "space-none": "0px", + "space-option-icon-big-top": "2px", + "space-panel-content-bottom": "40px", + "space-panel-content-top": "20px", + "space-panel-divider-margin-horizontal": "12px", + "space-panel-header-vertical": "20px", + "space-panel-nav-left": "32px", + "space-panel-side-left": "32px", + "space-panel-side-right": "32px", + "space-panel-split-bottom": "20px", + "space-panel-split-top": "0px", + "space-s": "12px", + "space-scaled-2x-l": "20px", + "space-scaled-2x-m": "16px", + "space-scaled-2x-xl": "24px", + "space-scaled-2x-xxs": "4px", + "space-scaled-l": "20px", + "space-scaled-m": "16px", + "space-scaled-none": "0px", + "space-scaled-s": "12px", + "space-scaled-xl": "24px", + "space-scaled-xs": "8px", + "space-scaled-xxl": "32px", + "space-scaled-xxs": "4px", + "space-scaled-xxxl": "40px", + "space-scaled-xxxs": "2px", + "space-segmented-control-focus-outline-gutter": "3px", + "space-static-l": "20px", + "space-static-m": "16px", + "space-static-s": "12px", + "space-static-xl": "24px", + "space-static-xs": "8px", + "space-static-xxl": "32px", + "space-static-xxs": "4px", + "space-static-xxxl": "40px", + "space-static-xxxs": "2px", + "space-table-content-bottom": "0px", + "space-table-embedded-header-top": "12px", + "space-table-footer-horizontal": "20px", + "space-table-header-focus-outline-gutter": "0px", + "space-table-header-horizontal": "20px", + "space-table-header-tools-bottom": "4px", + "space-table-header-tools-full-page-bottom": "4px", + "space-table-horizontal": "0px", + "space-tabs-content-top": "16px", + "space-tabs-focus-outline-gutter": "0px", + "space-tile-gutter": "24px", + "space-xl": "24px", + "space-xs": "8px", + "space-xxl": "32px", + "space-xxs": "4px", + "space-xxxl": "40px", + "space-xxxs": "2px", +} +`; exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" 1`] = ` {