@design-factory/design-factory 17.0.0 → 17.0.2

package/styles/scss/components/tabs/_tabs.scss

@@ -22,12 +22,8 @@
   --#{$prefix}tabs-secondary-active-border-right: #{$df-tabs-secondary-active-border-right};
   --#{$prefix}tabs-secondary-active-border-bottom: #{$df-tabs-secondary-active-border-bottom};
   --#{$prefix}tabs-secondary-active-margin-bottom: #{$df-tabs-secondary-active-margin-bottom};
-
-  --#{$prefix}tabs-content-tab-pane-padding: #{$df-tabs-content-tab-pane-padding};
-  --#{$prefix}tabs-content-border-style: #{$df-tabs-content-border-style};
-  --#{$prefix}tabs-content-border-color: #{$df-tabs-content-border-color};
-  --#{$prefix}tabs-content-border-width: #{$df-tabs-content-border-width};
   --#{$prefix}tabs-item-active-font-weight: #{$df-tabs-item-active-font-weight};
+  --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
 
   @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: var(--#{$prefix}nav-link-color);
@@ -41,7 +37,8 @@
     padding-top: var(--#{$prefix}tabs-padding-y); // add
     padding-bottom: var(--#{$prefix}tabs-padding-y); // add
 
-    &.active { // add
+    &.active {
+      // add
       font-weight: var(--#{$prefix}tabs-item-active-font-weight);
     }
 
@@ -80,6 +77,18 @@
     }
   }
 
+  .nav-link.disabled,
+  .nav-link:disabled {
+    pointer-events: auto;
+    cursor: var(--#{$prefix}tabs-cursor-disabled);
+
+    &:focus {
+      color: var(--df-nav-link-disabled-color);
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
   .nav-item + .nav-item {
     // add
     margin-left: var(--#{$prefix}tabs-between-item-margin); // add
@@ -94,6 +103,16 @@
   }
 }
 
+.tab-content {
+  --#{$prefix}tabs-content-tab-pane-padding: #{$df-tabs-content-tab-pane-padding};
+  --#{$prefix}tabs-content-border-style: #{$df-tabs-content-border-style};
+  --#{$prefix}tabs-content-border-color: #{$df-tabs-content-border-color};
+  --#{$prefix}tabs-content-border-width: #{$df-tabs-content-border-width};
+  > .tab-pane {
+    padding: var(--#{$prefix}tabs-content-tab-pane-padding); //add
+  }
+}
+
 %secondary {
   .nav-link {
     border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
@@ -143,12 +162,6 @@
   @extend %secondary;
 }
 
-.tab-content {
-  > .tab-pane {
-    padding: var(--#{$prefix}tabs-content-tab-pane-padding); //add
-  }
-}
-
 %secondary-content {
   border-style: var(--#{$prefix}tabs-content-border-style); //add
   border-color: var(--#{$prefix}tabs-content-border-color); //add
@@ -161,12 +174,13 @@
 }
 
 .nav {
- &.nav-pills[role=tablist] { // role=tablist is to target only tabset as pill and not scrollspy
-  .nav-link {
-    &:focus {
-      outline: 0;
-      box-shadow: $df-tabs-focus-box-shadow;
+  &.nav-pills[role='tablist'] {
+    // role=tablist is to target only tabset as pill and not scrollspy
+    .nav-link {
+      &:focus {
+        outline: 0;
+        box-shadow: $df-tabs-focus-box-shadow;
+      }
     }
   }
- }
 }

package/styles/scss/components/tabs/_tabs.variables.scss

@@ -7,6 +7,7 @@ $df-tabs-hover-border-bottom: 2px solid transparent !default;
 $df-tabs-hover-text-decoration: underline !default;
 $df-tabs-hover-bg-color: $df-hover-bg-color !default;
 $df-tabs-disabled-text-decoration: none !default;
+$df-tabs-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
 // TODO rem instead of px
 $df-tabs-between-item-margin: 3px !default;
 $df-tabs-active-border-bottom: 3px solid shades-css-var('primary', 'inert-color') !default;

package/styles/scss/themes/brand2023/_variables.scss

@@ -424,16 +424,16 @@ $shade-maps: () !default;
 $shade-maps: map.set($shade-maps, 'dark-primary', $dark-primaries-mapping);
 // stylelint-enable  scss/dollar-variable-default
 
-$body-bg: var(--#{$prefix}white) !default;
-$body-color: var(--#{$prefix}gray-900) !default;
-$color-contrast-dark: $gray-900 !default; // should be same as $body-color but not a CSS var
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$color-contrast-dark: $body-color !default; // should be same as $body-color but not a CSS var
 $df-disabled-color: var(--#{$prefix}gray-400) !default;
 $df-disabled-bg-color: var(--#{$prefix}gray-200) !default;
 $df-focused-inset-box-shadow:
-  inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg),
+  inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
   inset 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $input-btn-focus-box-shadow:
-  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg),
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
   0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $input-focus-border-color: var(--#{$prefix}gray-700) !default;
 $input-border-color: $gray-700 !default;
@@ -465,7 +465,7 @@ $df-btn-focus-active-box-shadow-color: var(--#{$prefix}btn-active-bg) !default;
 $df-btn-outline-focus-hover-box-shadow-color: var(--#{$prefix}btn-hover-color) !default;
 $df-btn-outline-focus-active-box-shadow-color: var(--#{$prefix}btn-active-color) !default;
 $df-btn-focus-box-shadow:
-  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg),
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
   0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 1) !default;
 $df-btn-check-active-property: 'bg-active-color' !default;
@@ -566,7 +566,7 @@ $df-sidenav-item-active-border-color: var(--#{$prefix}primary-800) !default;
 
 // Scrollspy
 $df-scrollspy-navpill-active-border-left: 3px solid var(--#{$prefix}primary-800) !default;
-$df-scrollspy-active-color: $body-color !default;
+$df-scrollspy-active-color: var(--#{$prefix}body-color) !default;
 
 // Stepper
 $df-stepper-steps-colors: (
@@ -578,8 +578,8 @@ $df-stepper-steps-colors: (
 
 // Tabset
 $df-tabs-focus-box-shadow: $df-focused-inset-box-shadow !default;
-$nav-tabs-link-active-color: $body-color !default;
-$nav-pills-link-active-color: $body-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
+$nav-pills-link-active-color: var(--#{$prefix}body-color) !default;
 $df-tabs-between-item-margin: 0px !default;
 $df-tabs-active-border-bottom: 3px solid var(--#{$prefix}primary-800) !default;
 $df-tabs-item-active-font-weight: 700 !default; // $font-weight-bold