chore: Decouple control group border color from input's

Author: jperals

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