From 26cdb5cbe6d07ecf2aac0ce6ef40ba0f3403a710 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Tue, 20 Oct 2026 15:49:27 +0200 Subject: [PATCH 1/6] chore: Decouple control group border color from input's --- src/button/constants.scss | 16 ++++++++-------- style-dictionary/one-theme/colors.ts | 1 + style-dictionary/utils/token-names.ts | 1 + style-dictionary/visual-refresh/colors.ts | 1 + .../visual-refresh/metadata/colors.ts | 6 ++++++ 5 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/button/constants.scss b/src/button/constants.scss index 3155fe62cab..20c59555caf 100644 --- a/src/button/constants.scss +++ b/src/button/constants.scss @@ -63,17 +63,17 @@ $variants: ( 'disabled-color': awsui.$color-text-button-icon-disabled, ), 'control-group-action': ( - 'default-background': transparent, - 'default-border-color': awsui.$color-border-input-default, + 'default-background': awsui.$color-background-container-content, + 'default-border-color': awsui.$color-border-control-group-default, 'default-color': awsui.$color-text-interactive-default, - 'hover-background': transparent, - 'hover-border-color': awsui.$color-border-input-default, + 'hover-background': awsui.$color-background-button-normal-hover, + 'hover-border-color': awsui.$color-border-control-group-default, 'hover-color': awsui.$color-text-button-icon-hover, - 'active-background': transparent, - 'active-border-color': awsui.$color-border-input-default, + 'active-background': awsui.$color-background-button-normal-active, + 'active-border-color': awsui.$color-border-control-group-default, 'active-color': awsui.$color-text-interactive-default, - 'disabled-background': transparent, - 'disabled-border-color': awsui.$color-border-input-default, + 'disabled-background': awsui.$color-background-button-normal-disabled, + 'disabled-border-color': awsui.$color-border-control-group-default, 'disabled-color': awsui.$color-text-button-icon-disabled, 'border-width': awsui.$border-width-field, ), diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index e4cab5b0929..4940f2c63d4 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -82,6 +82,7 @@ const tokens: StyleDictionary.ColorsDictionary = { // ── Input / form ────────────────────────────────────────────────────────── colorBackgroundInputDefault: { light: '{colorWhite}', dark: '{colorNeutral1000}' }, colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' }, + colorBorderControlGroupDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, colorBorderInputDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, colorTextFormLabel: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, colorTextFormSecondary: { light: '{colorNeutral600}', dark: '{colorNeutral500}' }, diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index f33adf67a39..5e76e67338c 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -729,6 +729,7 @@ export type ColorsTokenName = | 'colorBorderDropdownItemHover' | 'colorBorderDropdownItemSelected' | 'colorBorderDropdownItemTop' + | 'colorBorderControlGroupDefault' | 'colorBorderEditableCellHover' | 'colorBorderInputDefault' | 'colorBorderInputDisabled' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index d0fc70e5e55..37271894825 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -197,6 +197,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderDropdownItemSelected: '{colorBorderItemSelected}', colorBorderDropdownItemTop: 'transparent', colorBorderEditableCellHover: '{colorBorderDropdownItemHover}', + colorBorderControlGroupDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, colorBorderInputDefault: { light: '{colorNeutral500}', dark: '{colorNeutral600}' }, colorBorderInputDisabled: '{colorBackgroundInputDisabled}', colorBorderInputFocused: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 2fce313ac6b..26d19e3197d 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -757,6 +757,12 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBorderControlGroupDefault: { + description: + 'The default border color of control group action buttons that sit next to form inputs. Independent from the input border color.', + public: true, + themeable: true, + }, colorBorderInputDefault: { description: 'The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.', From 38984e7037c935991893ebc5d98ced01375a5ad0 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Tue, 20 Oct 2026 16:06:16 +0200 Subject: [PATCH 2/6] Do not make the token themeable --- style-dictionary/visual-refresh/metadata/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 26d19e3197d..924b41242b3 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -760,8 +760,8 @@ const metadata: StyleDictionary.MetadataIndex = { colorBorderControlGroupDefault: { description: 'The default border color of control group action buttons that sit next to form inputs. Independent from the input border color.', - public: true, - themeable: true, + public: false, + themeable: false, }, colorBorderInputDefault: { description: From c040b9a81188eafb0153af47cce67a1433ac354e Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Tue, 20 Oct 2026 16:55:23 +0200 Subject: [PATCH 3/6] Fine tune dev page --- pages/control-group/surfaces.page.tsx | 44 +++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 pages/control-group/surfaces.page.tsx diff --git a/pages/control-group/surfaces.page.tsx b/pages/control-group/surfaces.page.tsx new file mode 100644 index 00000000000..41283d894f4 --- /dev/null +++ b/pages/control-group/surfaces.page.tsx @@ -0,0 +1,44 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { Box, Container, ContentLayout, Header, ItemCard, SpaceBetween } from '~components'; +import AppLayout from '~components/app-layout'; +import ControlGroup from '~components/internal/components/control-group'; + +import labels from '../app-layout/utils/labels'; +import ScreenshotArea from '../utils/screenshot-area'; +import { input, select } from './common'; + +const controlGroup = ( + + {input} + {select} + +); + +export default function ControlGroupSurfacesPage() { + return ( + + Control group on different surfaces}> + + +
Layout content background
+ {controlGroup} + + + Container}>{controlGroup} + + Item card}>{controlGroup} + + + } + /> + + ); +} From f3c92b8a3bd3a7c5d095b2a3e16c0a489d8e3470 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Wed, 21 Oct 2026 00:44:14 +0200 Subject: [PATCH 4/6] Fix dev page --- .../control-group/{surfaces.page.tsx => in-app-layout.page.tsx} | 2 -- 1 file changed, 2 deletions(-) rename pages/control-group/{surfaces.page.tsx => in-app-layout.page.tsx} (99%) diff --git a/pages/control-group/surfaces.page.tsx b/pages/control-group/in-app-layout.page.tsx similarity index 99% rename from pages/control-group/surfaces.page.tsx rename to pages/control-group/in-app-layout.page.tsx index 41283d894f4..349df762457 100644 --- a/pages/control-group/surfaces.page.tsx +++ b/pages/control-group/in-app-layout.page.tsx @@ -31,9 +31,7 @@ export default function ControlGroupSurfacesPage() {
Layout content background
{controlGroup} - Container}>{controlGroup} - Item card}>{controlGroup} From e326be6f79b980b4ba58eeb65e1840c7a064ec54 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Wed, 21 Oct 2026 00:46:14 +0200 Subject: [PATCH 5/6] Update theme snapshot --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 7320636eea7..05fd28988e6 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -274,6 +274,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-border-control-checked": "#0073bb", "color-border-control-default": "#687078", "color-border-control-disabled": "#d5dbdb", + "color-border-control-group-default": "#879596", "color-border-dialog": "#0073bb", "color-border-dialog-default": "#eaeded", "color-border-divider-active": "#687078", @@ -1287,6 +1288,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-border-control-checked": "#00a1c9", "color-border-control-default": "#879596", "color-border-control-disabled": "#414750", + "color-border-control-group-default": "#687078", "color-border-dialog": "#00a1c9", "color-border-dialog-default": "#414750", "color-border-divider-active": "#687078", @@ -2300,6 +2302,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-border-control-checked": "#0073bb", "color-border-control-default": "#687078", "color-border-control-disabled": "#d5dbdb", + "color-border-control-group-default": "#879596", "color-border-dialog": "#0073bb", "color-border-dialog-default": "#eaeded", "color-border-divider-active": "#687078", @@ -3313,6 +3316,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-border-control-checked": "#0073bb", "color-border-control-default": "#687078", "color-border-control-disabled": "#d5dbdb", + "color-border-control-group-default": "#879596", "color-border-dialog": "#0073bb", "color-border-dialog-default": "#eaeded", "color-border-divider-active": "#687078", @@ -4326,6 +4330,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-border-control-checked": "#006ce0", "color-border-control-default": "#8c8c94", "color-border-control-disabled": "#dedee3", + "color-border-control-group-default": "#8c8c94", "color-border-dialog": "#006ce0", "color-border-dialog-default": "#c6c6cd", "color-border-divider-active": "#0f141a", @@ -5339,6 +5344,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-control-checked": "#006ce0", "color-border-control-default": "#8c8c94", "color-border-control-disabled": "#dedee3", + "color-border-control-group-default": "#8c8c94", "color-border-dialog": "#006ce0", "color-border-dialog-default": "#c6c6cd", "color-border-divider-active": "#0f141a", @@ -6352,6 +6358,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-control-checked": "#42b4ff", "color-border-control-default": "#8c8c94", "color-border-control-disabled": "#333843", + "color-border-control-group-default": "#656871", "color-border-dialog": "#42b4ff", "color-border-dialog-default": "#424650", "color-border-divider-active": "#f9f9fa", @@ -7365,6 +7372,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-control-checked": "#42b4ff", "color-border-control-default": "#8c8c94", "color-border-control-disabled": "#333843", + "color-border-control-group-default": "#656871", "color-border-dialog": "#42b4ff", "color-border-dialog-default": "#424650", "color-border-divider-active": "#f9f9fa", From 0c25cf12045a2485ca056c66dae27a17842aa0c3 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Wed, 21 Oct 2026 13:01:33 +0200 Subject: [PATCH 6/6] Refine spacing --- pages/control-group/in-app-layout.page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/control-group/in-app-layout.page.tsx b/pages/control-group/in-app-layout.page.tsx index 349df762457..3d9cffb0bca 100644 --- a/pages/control-group/in-app-layout.page.tsx +++ b/pages/control-group/in-app-layout.page.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import React from 'react'; -import { Box, Container, ContentLayout, Header, ItemCard, SpaceBetween } from '~components'; +import { Container, ContentLayout, Header, ItemCard, SpaceBetween } from '~components'; import AppLayout from '~components/app-layout'; import ControlGroup from '~components/internal/components/control-group'; @@ -27,10 +27,10 @@ export default function ControlGroupSurfacesPage() { content={ Control group on different surfaces}> - +
Layout content background
{controlGroup} - + Container}>{controlGroup} Item card}>{controlGroup}