diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 68789684dc..d940f091cf 100644 --- 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 index 7c359cf2f7..e3146ededb 100644 --- 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 index cb858daaf0..662d27dc6b 100644 --- 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}' },