chore: Control group color adjustments

pages/control-group/in-app-layout.page.tsx

@@ -0,0 +1,42 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { 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 = (
+  <ControlGroup actionButton={{ iconName: 'remove', ariaLabel: 'Remove' }}>
+    {input}
+    {select}
+  </ControlGroup>
+);
+
+export default function ControlGroupSurfacesPage() {
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayout
+        ariaLabels={labels}
+        navigationHide={true}
+        toolsHide={true}
+        content={
+          <ContentLayout header={<Header variant="h1">Control group on different surfaces</Header>}>
+            <SpaceBetween size="l">
+              <SpaceBetween size="s">
+                <Header variant="h2">Layout content background</Header>
+                {controlGroup}
+              </SpaceBetween>
+              <Container header={<Header variant="h2">Container</Header>}>{controlGroup}</Container>
+              <ItemCard header={<Header variant="h2">Item card</Header>}>{controlGroup}</ItemCard>
+            </SpaceBetween>
+          </ContentLayout>
+        }
+      />
+    </ScreenshotArea>
+  );
+}

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",

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,
   ),

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}' },

style-dictionary/utils/token-names.ts

@@ -729,6 +729,7 @@ export type ColorsTokenName =
   | 'colorBorderDropdownItemHover'
   | 'colorBorderDropdownItemSelected'
   | 'colorBorderDropdownItemTop'
+  | 'colorBorderControlGroupDefault'
   | 'colorBorderEditableCellHover'
   | 'colorBorderInputDefault'
   | 'colorBorderInputDisabled'

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}' },

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: false,
+    themeable: false,
+  },
   colorBorderInputDefault: {
     description:
       'The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.',