From 90f1e2d85f81897d51fac5bd536b076223ed3349 Mon Sep 17 00:00:00 2001
From: Simon Brebeck <sbrebeck@amazon.de>
Date: Thu, 4 Jun 2026 14:32:26 +0200
Subject: [PATCH] feat: Create colorBorderButtonGroupDivider design token

---
 src/button-group/styles.scss                       | 2 +-
 style-dictionary/classic/colors.ts                 | 1 +
 style-dictionary/utils/token-names.ts              | 4 +++-
 style-dictionary/visual-refresh/colors.ts          | 1 +
 style-dictionary/visual-refresh/metadata/colors.ts | 5 +++++
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/button-group/styles.scss b/src/button-group/styles.scss
index 4d7f566f48..19919d729a 100644
--- a/src/button-group/styles.scss
+++ b/src/button-group/styles.scss
@@ -23,7 +23,7 @@
 }
 
 .divider {
-  background-color: awsui.$color-border-divider-default;
+  background-color: awsui.$color-border-button-group-divider;
   inline-size: awsui.$border-divider-section-width;
   margin-block: awsui.$space-static-xs;
 }
diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
index bc672e73cc..3ae3a2b204 100644
--- a/style-dictionary/classic/colors.ts
+++ b/style-dictionary/classic/colors.ts
@@ -170,6 +170,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorIconActionCardHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
   colorIconActionCardActive: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
   colorIconActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
+  colorBorderButtonGroupDivider: '{colorBorderDividerDefault}',
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index df79d5828e..5a6ac37218 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -655,6 +655,7 @@ export type ColorsTokenName =
   | 'colorBorderControlDefault'
   | 'colorBorderControlDisabled'
   | 'colorBorderDividerActive'
+  | 'colorBorderButtonGroupDivider'
   | 'colorBorderDividerDefault'
   | 'colorBorderDividerSecondary'
   | 'colorBorderDividerPanelBottom'
@@ -838,7 +839,8 @@ export type ColorsTokenName =
   | 'colorIconActionCardDefault'
   | 'colorIconActionCardHover'
   | 'colorIconActionCardActive'
-  | 'colorIconActionCardDisabled';
+  | 'colorIconActionCardDisabled'
+  | 'colorBorderButtonGroupDivider';
 export type TypographyTokenName =
   | 'fontBoxValueLargeWeight'
   | 'fontButtonLetterSpacing'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index df41a9dd77..ca4e5cf19b 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -337,6 +337,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorIconActionCardDisabled: { light: '{colorNeutral400}', dark: '{colorNeutral600}' },
   colorBackgroundSkeleton: { light: '{colorNeutral250}', dark: '{colorNeutral750}' },
   colorBackgroundSkeletonWave: { light: '{colorNeutral150}', dark: '{colorNeutral700}' },
+  colorBorderButtonGroupDivider: '{colorBorderDividerDefault}',
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 0d3e6edf0a..0a621d9eaa 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -1109,6 +1109,11 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: false,
     themeable: true,
   },
+  colorBorderButtonGroupDivider: {
+    description: 'The border color of the button group divider.',
+    public: true,
+    themeable: true,
+  },
 };
 
 export default metadata;