feat(tabs): added hover and active styles

carbon-design-system · Sep 23, 2024 · b919c71 · b919c71
1 parent a9bddc8
commit b919c71
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -137,6 +137,14 @@
       &:focus {
         @include focus-outline('outline');
       }
+
+      &:active {
+        background-color: $background-active;
+      }
+
+      &:hover {
+        background-color: $background-hover;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--hidden {
@@ -147,11 +155,24 @@
       margin: 0;
       background-color: $layer-accent;
       inline-size: $spacing-09;
+
+      &:active {
+        background-color: $layer-accent-active;
+      }
+
+      &:hover {
+        background-color: $layer-accent-hover;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
       z-index: 2;
       fill: $icon-primary;
+
+      &:active,
+      &:hover {
+        fill: $icon-primary;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--next {
@@ -531,7 +552,7 @@
       .#{$prefix}--tabs__nav-item:not(
         .#{$prefix}--tabs__nav-item--selected
       ):not(.#{$prefix}--tabs__nav-item--disabled):hover {
-      border-block-end: $tab-underline-color-hover;
+      border-block-end: 'red';
       color: $text-primary;
     }