Apply the refinements to classic as well

cloudscape-design · Feb 19, 2025 · e8616ec · e8616ec
1 parent b1be279
commit e8616ec
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 61 deletions.
diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
@@ -41,11 +41,25 @@ $segment-divider-width: 1px;
   @include styles.font-button;
   letter-spacing: 0.25px;
   padding-block: styles.$control-padding-vertical;
-  padding-inline: awsui.$space-button-horizontal;
+  padding-inline: calc(awsui.$space-button-horizontal - $segment-gap);
+
   background: $default-background;
   color: $default-color;
   overflow: visible;
 
+  border-start-start-radius: awsui.$border-radius-button;
+  border-start-end-radius: awsui.$border-radius-button;
+  border-end-start-radius: awsui.$border-radius-button;
+  border-end-end-radius: awsui.$border-radius-button;
+
+  position: relative;
+  block-size: calc(100% - $segment-gap);
+  display: flex;
+  align-items: center;
+
+  border-inline: none;
+  border-block: none;
+
   &:focus {
     outline: none;
   }
@@ -60,60 +74,29 @@ $segment-divider-width: 1px;
     @include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
   }
 
-  &.refresh {
-    border-inline: none;
-    border-block: none;
-    border-start-start-radius: awsui.$border-radius-button;
-    border-start-end-radius: awsui.$border-radius-button;
-    border-end-start-radius: awsui.$border-radius-button;
-    border-end-end-radius: awsui.$border-radius-button;
-    padding-block: styles.$control-padding-vertical;
-    padding-inline: calc(awsui.$space-button-horizontal - $segment-gap);
-    position: relative;
-    block-size: calc(100% - $segment-gap);
-    display: flex;
-    align-items: center;
-    &:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width));
-      block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2));
-      inline-size: $segment-divider-width;
-      background: awsui.$color-border-input-default;
-      z-index: 1;
-    }
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width));
+    block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2));
+    inline-size: $segment-divider-width;
+    background: awsui.$color-border-input-default;
+    z-index: 1;
   }
 
-  &:not(.refresh) {
-    border-block: styles.$control-border-width solid $default-border-color;
-    border-inline: styles.$control-border-width solid $default-border-color;
-    border-inline-end-width: 0;
-    @for $i from 1 through 6 {
-      &:nth-child(#{$i}) {
-        grid-column: $i;
-        -ms-grid-column: $i;
-      }
-    }
-
-    &:last-child {
-      border-inline-end-width: styles.$control-border-width;
-      border-start-start-radius: 0;
-      border-start-end-radius: awsui.$border-radius-button;
-      border-end-start-radius: 0;
-      border-end-end-radius: awsui.$border-radius-button;
-    }
+  &:not(.refresh):not(:last-child)::after {
+    inset-inline-end: calc(-1 * ($segment-gap - 1px));
+  }
 
-    &:first-child {
-      border-start-start-radius: awsui.$border-radius-button;
-      border-start-end-radius: 0;
-      border-end-start-radius: awsui.$border-radius-button;
-      border-end-end-radius: 0;
+  @for $i from 1 through 6 {
+    &:nth-child(#{$i}) {
+      grid-column: $i;
+      -ms-grid-column: $i;
     }
   }
 
   &.selected {
     background: $selected-background;
-    border-color: $selected-border-color;
     color: $selected-color;
 
     & + .segment,

diff --git a/src/segmented-control/styles.scss b/src/segmented-control/styles.scss
@@ -27,23 +27,23 @@ $segment-space: calc(#{seg.$segment-gap} * 2 + #{seg.$segment-divider-width});
 .segment-part {
   display: -ms-inline-grid;
   display: inline-grid;
+  border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-start-start-radius: awsui.$border-radius-button;
+  border-start-end-radius: awsui.$border-radius-button;
+  border-end-start-radius: awsui.$border-radius-button;
+  border-end-end-radius: awsui.$border-radius-button;
+  align-items: center;
+  min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
+  padding-inline: awsui.$space-static-xxxs;
+  gap: $segment-space;
+  &:not(.refresh) {
+    gap: calc(seg.$segment-gap + 1px);
+  }
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     display: none;
   }
-
-  &.refresh {
-    gap: $segment-space;
-    border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
-    border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
-    border-start-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs);
-    border-start-end-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs);
-    border-end-start-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs);
-    border-end-end-radius: calc(awsui.$border-radius-button + awsui.$space-static-xxs);
-    align-items: center;
-    min-block-size: calc(awsui.$line-height-body-m + awsui.$space-static-xxs);
-    padding-inline: awsui.$space-static-xxxs;
-  }
 }
 
 .select {

diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
@@ -43,7 +43,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundNotificationStackBarActive: '{colorGrey700}',
   colorBackgroundNotificationStackBarHover: '{colorGrey600}',
   colorBackgroundProgressBarContentInFlash: { light: '{colorGreyOpaque70}', dark: '{colorGrey100}' },
-  colorBackgroundSegmentHover: '{colorBackgroundButtonNormalDefault}',
+  colorBackgroundSegmentHover: '{colorBackgroundButtonNormalHover}',
   colorBackgroundTilesDisabled: { dark: '{colorGrey700}' },
   colorBackgroundToggleCheckedDisabled: { dark: '{colorBlue700}' },
   colorBackgroundChatBubbleIncoming: { light: '{colorGrey150}', dark: '{colorGrey900}' },