From 986bf04b9cd27238ad853ee403c8ef508aa70f48 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 7 Oct 2026 15:56:22 +0200
Subject: [PATCH 1/2] chore: Update segmented control style for one-theme

---
 src/segmented-control/segment.scss   | 15 +++++++++++++++
 src/segmented-control/styles.scss    |  5 +++++
 style-dictionary/one-theme/colors.ts | 10 +++++++---
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index 4715b88e84..673f91e281 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -7,6 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/utils/theming' as theming;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $default-background: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-segment-default);
@@ -17,8 +18,10 @@ $disabled-background: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color
 $disabled-color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled);
 $selected-background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-segment-active);
 $selected-color: var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active);
+$selected-border-width: awsui.$border-width-field;
 $segment-gap: awsui.$space-static-xxs;
 $segment-divider-width: 1px;
+$one-theme-segment-gap: calc(#{$segment-gap} - #{$segment-divider-width});
 $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field} + #{awsui.$border-width-button}));
 
 .segment {
@@ -90,6 +93,11 @@ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field
   &:not(.refresh):not(:last-child)::after {
     inset-inline-end: calc(-1 * $segment-gap);
   }
+  @include theming.one-theme-only {
+    &:not(:last-child)::after {
+      content: none;
+    }
+  }
 
   @for $i from 1 through 6 {
     &:nth-child(#{$i}) {
@@ -100,6 +108,10 @@ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field
   &.selected {
     background: $selected-background;
     color: $selected-color;
+
+    @include theming.one-theme-only {
+      box-shadow: inset 0 0 0 $selected-border-width awsui.$color-border-segment-active;
+    }
   }
 
   &:hover:not(.selected):not(.disabled):not(:focus) {
@@ -117,6 +129,9 @@ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field
   position: relative;
   inset-inline-start: calc(-1 * #{awsui.$space-xxs});
   margin-inline-end: awsui.$space-xxs;
+  @include theming.one-theme-only {
+    inset-inline-start: calc(-1 * #{awsui.$space-xxxs});
+  }
 }
 
 .with-no-text {
diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
index 912754a09c..97d2a75c6d 100644
--- a/src/segmented-control/styles.scss
+++ b/src/segmented-control/styles.scss
@@ -7,6 +7,7 @@
 @use 'segment' as seg;
 @use 'sass:list' as list;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming' as theming;
 
 @function repeatValue($value, $times) {
   $result: ();
@@ -43,6 +44,10 @@
     gap: calc(#{seg.$segment-gap} * 2 - #{seg.$segment-divider-width});
   }
 
+  @include theming.one-theme-only {
+    gap: #{seg.$one-theme-segment-gap};
+  }
+
   &:not(.grouped),
   &.grouped-only {
     @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts
index 54618c394c..597b0a186d 100644
--- a/style-dictionary/one-theme/colors.ts
+++ b/style-dictionary/one-theme/colors.ts
@@ -119,10 +119,14 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorItemSelected: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
 
   // ── Segmented control ─────────────────────────────────────────────────────
-  colorBackgroundSegmentActive: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
+  colorBackgroundSegmentActive: '{colorBackgroundToggleButtonNormalPressed}',
   colorBackgroundSegmentDefault: { light: 'transparent', dark: 'transparent' },
-  colorTextSegmentActive: { light: '{colorNeutral200}', dark: '{colorNeutral950}' },
-  colorTextSegmentDefault: { light: '{colorNeutral600}', dark: '{colorNeutral300}' },
+  colorBackgroundSegmentHover: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundSegmentDisabled: { light: 'transparent', dark: 'transparent' },
+  colorBackgroundSegmentWrapper: { light: '{colorNeutral100}', dark: '{colorNeutral1000}' },
+  colorBorderSegmentActive: '{colorBorderToggleButtonNormalPressed}',
+  colorTextSegmentActive: '{colorTextToggleButtonNormalPressed}',
+  colorTextSegmentDefault: '{colorTextButtonNormalDefault}',
   colorTextSegmentHover: '{colorTextButtonNormalHover}',
 
   // ── Slider / progress ─────────────────────────────────────────────────────

From a7935c4acce07daace57797181ba1c765deea1bc Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 8 Oct 2026 14:16:33 +0200
Subject: [PATCH 2/2] chore: Parameterize selected segment border width

Declare the selected segment box-shadow once for all themes and carry the
border width in a custom property that falls back to 0, so themes opt in by
setting a single value instead of wrapping the shadow in a theme condition.
---
 src/segmented-control/segment.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index 673f91e281..0bcbceab9b 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -18,7 +18,8 @@ $disabled-background: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color
 $disabled-color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled);
 $selected-background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-segment-active);
 $selected-color: var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active);
-$selected-border-width: awsui.$border-width-field;
+$selected-border-width-prop: --awsui-internal-style-segment-selected-border-width;
+$selected-border-width: var(#{$selected-border-width-prop}, 0);
 $segment-gap: awsui.$space-static-xxs;
 $segment-divider-width: 1px;
 $one-theme-segment-gap: calc(#{$segment-gap} - #{$segment-divider-width});
@@ -94,6 +95,8 @@ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field
     inset-inline-end: calc(-1 * $segment-gap);
   }
   @include theming.one-theme-only {
+    #{$selected-border-width-prop}: #{awsui.$border-width-field};
+
     &:not(:last-child)::after {
       content: none;
     }
@@ -108,10 +111,7 @@ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field
   &.selected {
     background: $selected-background;
     color: $selected-color;
-
-    @include theming.one-theme-only {
-      box-shadow: inset 0 0 0 $selected-border-width awsui.$color-border-segment-active;
-    }
+    box-shadow: inset 0 0 0 $selected-border-width awsui.$color-border-segment-active;
   }
 
   &:hover:not(.selected):not(.disabled):not(:focus) {