diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss index 28acd46c55b9..00599f8db582 100644 --- a/packages/components/src/components/tabs/_tabs.scss +++ b/packages/components/src/components/tabs/_tabs.scss @@ -254,16 +254,12 @@ @include carbon--breakpoint(md) { display: flex; - .#{$prefix}--tabs__nav-link { - color: $text-01; - @include type-style('productive-heading-01'); - border-bottom: 3px solid $interactive-01; - } - + .#{$prefix}--tabs__nav-link, .#{$prefix}--tabs__nav-link:focus, .#{$prefix}--tabs__nav-link:active { + @include type-style('productive-heading-01'); color: $text-01; - border-bottom: 2px solid $interactive-01; + border-bottom: 2px solid $interactive-04; } } } @@ -296,7 +292,8 @@ //----------------------------- a.#{$prefix}--tabs__nav-link { @include focus-outline('reset'); - display: inline-block; + display: inline-flex; + align-items: flex-end; color: $text-02; text-decoration: none; font-weight: 400; @@ -314,10 +311,10 @@ &:focus, &:active { + @include focus-outline('outline'); width: 100%; margin: 0; padding-left: 16px; - @include focus-outline('outline'); } @include carbon--breakpoint(md) { diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss index c73c43c1c495..c55d70a1db97 100644 --- a/packages/components/src/globals/scss/_theme-tokens.scss +++ b/packages/components/src/globals/scss/_theme-tokens.scss @@ -337,12 +337,12 @@ $structured-list-text-transform: none !default; /// @type Value /// @access public /// @group tabs -$tab-underline-color: 3px solid $ui-03 !default; +$tab-underline-color: 2px solid $ui-03 !default; /// @type Value /// @access public /// @group tabs -$tab-underline-color-hover: 3px solid $ui-04 !default; +$tab-underline-color-hover: 2px solid $ui-04 !default; /// @type Color /// @access public @@ -352,7 +352,7 @@ $tab-text-disabled: $disabled-02 !default; /// @type Value /// @access public /// @group tabs -$tab-underline-disabled: 3px solid $disabled-01 !default; +$tab-underline-disabled: 2px solid $disabled-01 !default; // Skeleton Loading