fix(tabstrip): use subtle-text variable for tabstrip styling

telerik · Feb 23, 2021 · eb2347b · eb2347b
1 parent 0352b66
commit eb2347b
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 19 deletions.
diff --git a/packages/bootstrap/scss/tabstrip/_variables.scss b/packages/bootstrap/scss/tabstrip/_variables.scss
@@ -103,4 +103,4 @@ $tabstrip-content-text: $component-text !default;
 $tabstrip-content-border: $component-border !default;
 /// Border color of tabstrip focused content
 /// @group tabstrip
-$tabstrip-content-border-focused: #656565 !default;
+$tabstrip-content-border-focused: $component-text !default;
diff --git a/packages/classic/scss/tabstrip/_variables.scss b/packages/classic/scss/tabstrip/_variables.scss
@@ -103,4 +103,4 @@ $tabstrip-content-text: $component-text !default;
 $tabstrip-content-border: $component-border !default;
 /// Border color of tabstrip focused content
 /// @group tabstrip
-$tabstrip-content-border-focused: #656565 !default;
+$tabstrip-content-border-focused: $component-text !default;
diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss
@@ -103,4 +103,4 @@ $tabstrip-content-text: $component-text !default;
 $tabstrip-content-border: $component-border !default;
 /// Border color of tabstrip focused content
 /// @group tabstrip
-$tabstrip-content-border-focused: #656565 !default;
+$tabstrip-content-border-focused: $component-text !default;
diff --git a/packages/material/scss/common/material/_palettes.scss b/packages/material/scss/common/material/_palettes.scss
@@ -681,11 +681,13 @@ $material-dark-complimentary: (
     body-bg: #303030,
     body-text: $light-primary-text,
     subtle-text: $light-secondary-text,
+    disabled-text: $light-disabled-text,
     component-bg: get-base-hue( grey, 800 ),
     component-text: get-base-contrast( grey, 800 ),
     component-border: $light-dividers,
     base-bg: get-base-hue( grey, 800 ),
-    hover-bg: rgba( $white, .04 ),
+    hover-bg: rgba( $white, .08 ),
+    focus-bg: rgba( $white, .24 ),
     elevation: $black
 );
 
@@ -695,10 +697,12 @@ $material-light-complimentary: (
     body-bg: get-base-hue( grey, 50 ),
     body-text: get-base-contrast( grey, 50 ),
     subtle-text: $dark-secondary-text,
+    disabled-text: $dark-disabled-text,
     component-bg: $white,
     component-text: $dark-primary-text,
     component-border: $dark-dividers,
     base-bg: $white,
     hover-bg: rgba( $black, .04 ),
+    focus-bg: rgba( $black, .12 ),
     elevation: $black
 );
diff --git a/packages/material/scss/tabstrip/_layout.scss b/packages/material/scss/tabstrip/_layout.scss
@@ -1,6 +1,6 @@
 @import "~@progress/kendo-theme-default/scss/tabstrip/_layout.scss";
 
-@include exports("tabstrip/layout/material") {
+@include exports( "tabstrip/layout/material" ) {
 
     .k-tabstrip {
         line-height: $tabstrip-line-height;
@@ -13,13 +13,9 @@
             justify-content: flex-end;
         }
 
-        > .k-item:not(.k-state-active) {
-            opacity: .7;
-        }
-
-        > .k-item:not(.k-state-disabled):hover,
-        > .k-item.k-state-hover {
+        .k-disabled {
             opacity: 1;
+            filter: none;
         }
     }
 

diff --git a/packages/material/scss/tabstrip/_theme.scss b/packages/material/scss/tabstrip/_theme.scss
@@ -1 +1,13 @@
 @import "~@progress/kendo-theme-default/scss/tabstrip/_theme.scss";
+
+@include exports( "tabstrip/layout/theme" ) {
+
+    .k-tabstrip-items {
+
+        .k-disabled {
+            color: map-get( $theme, disabled-text );
+        }
+
+    }
+
+}
diff --git a/packages/material/scss/tabstrip/_variables.scss b/packages/material/scss/tabstrip/_variables.scss
@@ -17,7 +17,7 @@ $tabstrip-wrapper-border: null !default;
 $tabstrip-bg: null !default;
 /// Text color of tabstrip component
 /// @group tabstrip
-$tabstrip-text: inherit !default;
+$tabstrip-text: $subtle-text !default;
 /// Border color of tabstrip component
 /// @group tabstrip
 $tabstrip-border: $component-border !default;
@@ -43,7 +43,7 @@ $tabstrip-item-gap: 0px !default;
 $tabstrip-item-bg: null !default;
 /// Text color of tabs
 /// @group tabstrip
-$tabstrip-item-text: inherit !default;
+$tabstrip-item-text: $subtle-text !default;
 /// Border color of tabs
 /// @group tabstrip
 $tabstrip-item-border: null !default;
@@ -53,10 +53,10 @@ $tabstrip-item-gradient: null !default;
 
 /// Background color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hovered-bg: null !default;
+$tabstrip-item-hovered-bg: $hovered-bg !default;
 /// Text color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hovered-text: inherit !default;
+$tabstrip-item-hovered-text: $body-text !default;
 /// Border color of hovered tabs
 /// @group tabstrip
 $tabstrip-item-hovered-border: null !default;
@@ -69,7 +69,7 @@ $tabstrip-item-hovered-gradient: null !default;
 $tabstrip-item-selected-bg: null !default;
 /// Text color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-text: inherit !default;
+$tabstrip-item-selected-text: $body-text !default;
 /// Border color of selected tabs
 /// @group tabstrip
 $tabstrip-item-selected-border: null !default;
@@ -97,10 +97,10 @@ $tabstrip-content-border-width: 0px !default;
 $tabstrip-content-bg: transparent !default;
 /// Text color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-text: inherit !default;
+$tabstrip-content-text: null !default;
 /// Border color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-border: transparent !default;
+$tabstrip-content-border: null !default;
 /// Border color of tabstrip focused content
 /// @group tabstrip
-$tabstrip-content-border-focused: #656565 !default;
+$tabstrip-content-border-focused: $component-text !default;