diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss index 4715b88e84..0bcbceab9b 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,11 @@ $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-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}); $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field} + #{awsui.$border-width-button})); .segment { @@ -90,6 +94,13 @@ $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 { + #{$selected-border-width-prop}: #{awsui.$border-width-field}; + + &:not(:last-child)::after { + content: none; + } + } @for $i from 1 through 6 { &:nth-child(#{$i}) { @@ -100,6 +111,7 @@ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field &.selected { background: $selected-background; color: $selected-color; + 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 ─────────────────────────────────────────────────────