@design-factory/design-factory 17.1.0 → 18.0.0

package/styles/scss/components/stepper/_stepper.scss

@@ -3,6 +3,7 @@
 .df-stepper {
   --#{$prefix}stepper-border-width: #{$df-stepper-border-width};
   --#{$prefix}stepper-line-border: #{$df-stepper-line-border};
+  --#{$prefix}stepper-line-completed-border: #{$df-stepper-line-completed-border};
   --#{$prefix}stepper-icon-border-radius: #{$df-stepper-icon-border-radius};
   --#{$prefix}stepper-icon-border-style: #{$df-stepper-icon-border-style};
   --#{$prefix}stepper-icon-color: #{$df-stepper-icon-color};
@@ -33,6 +34,7 @@
   --#{$prefix}stepper-div-step-border: #{$df-stepper-div-step-border};
   --#{$prefix}stepper-label-max-width: #{$df-stepper-label-max-width};
   --#{$prefix}stepper-line-completed-color: #{$df-stepper-line-completed-color};
+  --#{$prefix}stepper-line-default-color: #{$df-stepper-line-default-color};
   --#{$prefix}stepper-disabled-opacity: #{$df-stepper-disabled-opacity};
   --#{$prefix}stepper-font-size: #{$df-stepper-font-size};
   --#{$prefix}stepper-font-size-sm: #{$df-stepper-font-size-sm};
@@ -83,12 +85,13 @@
         padding-top: var(--#{$prefix}stepper-step-padding-y);
       }
     }
-    .df-stepper-icon, .df-stepper-outline-icon {
+    .df-stepper-icon,
+    .df-stepper-outline-icon {
       & > * {
         display: none;
-      }    
+      }
     }
-    .df-stepper-outline-icon.icon-exclamation-triangle::before {
+    .df-stepper-outline-icon.fa-exclamation-triangle::before {
       font-size: var(--#{$prefix}stepper-outline-icon-only-font-size);
     }
     .df-stepper-icon::before,
@@ -111,7 +114,8 @@
       text-decoration: none;
     }
     &.flex-row {
-      .df-stepper-label, .df-stepper-optional-label {
+      .df-stepper-label,
+      .df-stepper-optional-label {
         @extend .ms-4;
       }
     }
@@ -139,9 +143,9 @@
     }
   }
   .df-stepper-step-completed + .df-stepper-line-wrapper {
-      .df-stepper-line {
-        .df-stepper-horizontal-line {
-          border-color: var(--#{$prefix}stepper-line-completed-color);
+    .df-stepper-line {
+      .df-stepper-horizontal-line {
+        border-top: var(--#{$prefix}stepper-line-completed-border);
       }
     }
   }
@@ -196,7 +200,7 @@
     // Line
     position: relative;
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       @include ltr {
         left: var(--#{$prefix}vertical-stepper-line-position);
@@ -210,14 +214,14 @@
       bottom: calc(-1 * var(--#{$prefix}vertical-stepper-panel-margin-y));
     }
   }
-  
+
   .df-stepper-step-completed + .df-vertical-stepper-panel {
     &::before {
       @include ltr {
-        border-color: var(--#{$prefix}stepper-line-completed-color);
+        border-top: var(--#{$prefix}stepper-line-completed-border);
       }
       @include rtl {
-        border-color: var(--#{$prefix}stepper-line-completed-color);
+        border-top: var(--#{$prefix}stepper-line-completed-border);
       }
     }
   }

package/styles/scss/components/stepper/_stepper.variables.scss

@@ -12,7 +12,8 @@ $df-stepper-icon-height: $df-stepper-icon-width !default;
 $df-stepper-icon-width-sm: $df-stepper-icon-width * map.get($df-size-ratios, 'sm') !default;
 $df-stepper-icon-height-sm: $df-stepper-icon-height * map.get($df-size-ratios, 'sm') !default;
 $df-stepper-icon-line-height: $df-stepper-icon-height !default;
-$df-stepper-line-border: $border-width solid $gray-200 !default;
+$df-stepper-line-border: $border-width solid var(--#{$prefix}stepper-line-default-color) !default;
+$df-stepper-line-completed-border: $border-width solid var(--#{$prefix}stepper-line-completed-color) !default;
 $df-stepper-number-line-height: $df-stepper-icon-height - $df-stepper-border-width !default;
 $df-stepper-outline-icon-only-font-size: 1.5rem !default;
 $df-stepper-outline-icon-only-font-size-sm: $df-stepper-outline-icon-only-font-size * map.get($df-size-ratios, 'sm') !default;
@@ -65,5 +66,14 @@ $df-vertical-stepper-line-position: 0 !default;
 $df-stepper-icon-display: flex !default;
 $df-stepper-icon-align-items: center !default;
 $df-stepper-icon-justify-content: center !default;
-$df-stepper-steps-colors:  ("current": "primary", "future" : "gray", "completed": "green", "warning": "warning") !default;
-$df-stepper-line-completed-color: shades-css-var(map.get($df-stepper-steps-colors, "completed"), 'inert-color') !default;
+$df-stepper-steps-colors: (
+  'visited': 'primary',
+  'future': 'gray',
+  'completed': 'green',
+  'warning': 'warning'
+) !default;
+$df-stepper-line-completed-color: shades-css-var(
+  map.get($df-stepper-steps-colors, 'completed'),
+  'inert-color'
+) !default;
+$df-stepper-line-default-color: var(--#{$prefix}gray-200) !default;

package/styles/scss/components/table/_advancedtables.scss

@@ -1,4 +1,5 @@
 @use 'ag-grid-community/styles' as ag;
+@use 'sass:meta';
 
 // TODO check new checkbox look and border radius
 @include ag.grid-styles(
@@ -33,7 +34,7 @@
 
 // TODO deal with icon font-weight in a global way
 .df-table-icon {
-  @extend %df-icon-style;
+  font-family: $df-font-awesome-font-family;
   font-weight: $df-icon-solid-font-weight;
 }
 
@@ -52,6 +53,7 @@
   --#{$prefix}tables-aggrid-striped-row-color: #{$df-tables-aggrid-striped-row-color};
   --#{$prefix}tables-aggrid-striped-row-color-hover: #{$df-tables-aggrid-striped-row-color-hover};
   --#{$prefix}tables-aggrid-white-header: #{$df-tables-aggrid-white-header};
+  --#{$prefix}tables-aggdrid-expand-button-color: #{$df-tables-aggrid-expand-button-color};
   --ag-background-color: #{$df-tables-aggrid-background-color};
   --ag-checkbox-border-radius: #{$df-tables-aggrid-checkbox-border-radius};
   --ag-font-size: #{$df-tables-aggrid-font-size};
@@ -60,11 +62,12 @@
   --ag-row-height: #{$df-tables-aggrid-row-height};
   --ag-data-color: #{$body-color};
   --ag-font-family: #{$font-family-base};
-  --ag-header-background-color: #{$gray-50};
-  --ag-header-cell-hover-background-color: #{$df-hover-bg-color};
-  --ag-selected-row-background-color: #{$df-primary-lighten-60};
-  --ag-row-hover-color: #{$gray-50};
+  --ag-header-background-color: #{$df-tables-aggrid-header-background-color};
+  --ag-header-cell-hover-background-color: #{$df-tables-aggrid-header-cell-hover-background-color};
+  --ag-selected-row-background-color: #{$df-tables-aggrid-selected-row-background-color};
+  --ag-row-hover-color: #{$df-tables-aggrid-hover-color};
   --ag-row-border-color: #{$gray-200};
+  --ag-input-focus-border-color: #{$df-tables-aggrid-input-focus-border-color};
   --ag-checkbox-indeterminate-color: #{shades-css-var('primary', 'bg-color')};
   --#{$prefix}ag-odd-row-hover-background-color: var(--ag-row-hover-color);
   --ag-odd-row-background-color: var(--ag-background-color);
@@ -101,26 +104,49 @@
 
   .ag-icon.ag-icon-asc {
     @extend .df-table-icon;
-    @extend .icon-sort-up;
+    @extend .fa-sort-up;
+    &:before {
+      color: var(--#{$prefix}tables-aggrid-icon-color);
+    }
   }
 
   .ag-root-wrapper {
     border-inline: var(--#{$prefix}tables-aggrid-border-inline);
+
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      border-top: 0;
+      border-bottom: #{$df-tables-aggrid-divider-border};
+    }
+  }
+
+  [class*='fa-'] {
+    color: var(--#{$prefix}tables-aggdrid-expand-button-color);
+  }
+
+  .ag-row-hover {
+    --#{$prefix}tables-aggdrid-expand-button-color: #{$df-tables-aggrid-expand-button-color-hover};
+  }
+
+  .ag-row-selected {
+    --#{$prefix}tables-aggdrid-expand-button-color: #{$df-tables-aggrid-expand-button-color-selected};
   }
 
   .ag-icon.ag-icon-desc {
     @extend .df-table-icon;
-    @extend .icon-sort-down;
+    @extend .fa-sort-down;
+    &:before {
+      color: var(--#{$prefix}tables-aggrid-icon-color);
+    }
   }
 
   .ag-icon.ag-icon-menu {
     @extend .df-table-icon;
-    @extend .icon-filter;
+    @extend .fa-filter;
   }
 
   .ag-icon.ag-icon-none {
     @extend .df-table-icon;
-    @extend .icon-sort;
+    @extend .fa-sort;
     &:before {
       color: var(--#{$prefix}tables-aggrid-icon-color);
     }
@@ -128,7 +154,7 @@
 
   .ag-icon.ag-icon-filter {
     @extend .df-table-icon;
-    @extend .icon-filter;
+    @extend .fa-filter;
     &:before {
       color: var(--#{$prefix}tables-aggrid-icon-color);
     }
@@ -147,8 +173,18 @@
     border-bottom: var(--#{$prefix}tables-aggrid-border-bottom-last-row);
   }
 
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    .ag-header {
+      border-bottom: #{$df-tables-aggrid-divider-border};
+    }
+  }
+
   .ag-header-row {
     font-weight: var(--#{$prefix}tables-aggrid-header-font-weight);
+
+    .ag-header-cell.ag-header-active {
+      --#{$prefix}tables-aggrid-icon-color: #{$df-tables-aggrid-expand-button-color-hover};
+    }
   }
 
   .ag-header-cell:not(.ag-cell-inline-editing),
@@ -166,6 +202,10 @@
     justify-content: var(--#{$prefix}tables-aggrid-cell-label-justify-content);
   }
 
+  .ag-header-cell:focus-visible::after {
+    border: 2px solid var(--ag-input-focus-border-color);
+  }
+
   .ag-header-icon,
   .ag-sort-indicator-icon {
     // todo RTL elements
@@ -246,6 +286,14 @@
       }
     }
   }
+
+  .ag-list-item.ag-active-item {
+    --ag-row-hover-color: #{$df-tables-aggrid-hover-color};
+  }
+
+  .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
+    border: 2px solid var(--ag-input-focus-border-color);
+  }
 }
 
 .df-pagination-secondary-elements {

package/styles/scss/components/table/_table.scss

@@ -1,7 +1,13 @@
 .table {
   > caption:first-child {
-    & + thead, & + tbody {
+    & + thead,
+    & + tbody {
       border-top: 0;
     }
   }
-}
+
+  & thead,
+  tfoot {
+    border-bottom: #{$df-tables-aggrid-divider-border};
+  }
+}

package/styles/scss/components/table/_table.variables.scss

@@ -23,3 +23,12 @@ $df-tables-aggrid-background-color: #fff !default;
 $df-tables-aggrid-alpine-active-color: shades-css-var('primary', 'border-color') !default;
 $df-tables-aggrid-input-box-shadow: $df-focused-box-shadow !default;
 $df-tables-aggrid-wrapper-border-radius: 0 !default;
+$df-tables-aggrid-header-background-color: $gray-50 !default;
+$df-tables-aggrid-header-cell-hover-background-color: $df-hover-bg-color !default;
+$df-tables-aggrid-expand-button-color: $gray-900 !default;
+$df-tables-aggrid-expand-button-color-hover: $gray-900 !default;
+$df-tables-aggrid-expand-button-color-selected: $gray-900 !default;
+$df-tables-aggrid-divider-border: inherit !default; // dummy value for old branding
+$df-tables-aggrid-hover-color: $gray-50 !default;
+$df-tables-aggrid-selected-row-background-color: $df-primary-lighten-60 !default;
+$df-tables-aggrid-input-focus-border-color: rgba(33, 150, 243, 0.4) !default; // default aggrid alpine focus color

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

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .nav-tabs {
   --#{$prefix}nav-link-color: #{$df-tabs-links-not-active-color}; // override CSS var BS
   --#{$prefix}tabs-border-bottom: #{$df-tabs-border-bottom};
@@ -15,6 +17,7 @@
   --#{$prefix}tabs-disabled-bg-color: #{$df-tabs-disabled-bg-color};
   --#{$prefix}tabs-focus-outline: #{$df-tabs-focus-outline};
   --#{$prefix}tabs-focus-box-shadow: #{$df-tabs-focus-box-shadow};
+  --#{$prefix}tabs-active-inner-box-shadow-color: #{$df-tabs-active-inner-box-shadow-color};
   --#{$prefix}tabs-secondary-border-bottom: #{$df-tabs-secondary-border-bottom};
   --#{$prefix}tabs-secondary-border-top: #{$df-tabs-secondary-border-top};
   --#{$prefix}tabs-secondary-active-border-top: #{$df-tabs-secondary-active-border-top};
@@ -24,8 +27,9 @@
   --#{$prefix}tabs-secondary-active-margin-bottom: #{$df-tabs-secondary-active-margin-bottom};
   --#{$prefix}tabs-item-active-font-weight: #{$df-tabs-item-active-font-weight};
   --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
+  --#{$prefix}tabs-active-hover-border-bottom: #{$df-tabs-active-hover-border-bottom};
 
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: var(--#{$prefix}nav-link-color);
   }
 
@@ -40,6 +44,10 @@
     &.active {
       // add
       font-weight: var(--#{$prefix}tabs-item-active-font-weight);
+
+      &:hover {
+        border-bottom: var(--#{$prefix}tabs-active-hover-border-bottom); // add
+      }
     }
 
     &:hover {
@@ -63,6 +71,11 @@
       &:not(.active) {
         color: var(--#{$prefix}nav-link-color);
       }
+
+      &:hover {
+        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}tabs-active-inner-box-shadow-color);
+        --#{$prefix}tabs-focus-box-shadow: #{$df-tabs-focus-box-shadow};
+      }
     }
 
     &.disabled {
@@ -108,6 +121,7 @@
   --#{$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
   }
@@ -176,7 +190,27 @@
 .nav {
   &.nav-pills[role='tablist'] {
     // role=tablist is to target only tabset as pill and not scrollspy
+    --#{$prefix}tabs-disabled-color: #{$df-tabs-disabled-color};
+    --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
+    --#{$prefix}tabs-disabled-bg-color: #{$df-tabs-disabled-bg-color};
+
     .nav-link {
+      &.disabled,
+      &[disabled] {
+        pointer-events: auto; //needed to show the cursor
+        cursor: var(--#{$prefix}tabs-cursor-disabled);
+        color: var(--#{$prefix}tabs-disabled-color);
+
+        &:focus {
+          outline: none;
+          box-shadow: none;
+        }
+
+        &:hover {
+          background-color: var(--#{$prefix}tabs-disabled-bg-color);
+        }
+      }
+
       &:focus {
         outline: 0;
         box-shadow: $df-tabs-focus-box-shadow;
@@ -184,3 +218,46 @@
     }
   }
 }
+
+// We need this selector in case the Tabset is used inside a card to round the corners depending on the alignment
+.card,
+.card-body,
+.card-text {
+  & > .nav.nav-tabs {
+    //not sure if we should deal with breakpoint cases here since we use nav fill and nav-justified for the others alignment
+    $justify-content-start-implicit-selector: ':not(.justify-content-center):not(.justify-content-end)';
+    @each $breakpoint, $value in $grid-breakpoints {
+      $justify-content-start-implicit-selector: '#{$justify-content-start-implicit-selector}:not(.justify-content-#{$breakpoint}-center)';
+      $justify-content-start-implicit-selector: '#{$justify-content-start-implicit-selector}:not(.justify-content-#{$breakpoint}-end)';
+    }
+
+    &#{$justify-content-start-implicit-selector},
+    &.justify-content-start {
+      .nav-item:first-of-type .nav-link {
+        //default case, no alignment class on triggering the border-start-start-radius
+        border-start-start-radius: var(--#{$prefix}card-border-radius);
+      }
+    }
+
+    @each $breakpoint, $value in $grid-breakpoints {
+      &.justify-content-#{$breakpoint}-start {
+        .nav-item:first-of-type .nav-link {
+          //default case triggering the border-start-start-radius
+          border-start-start-radius: var(--#{$prefix}card-border-radius);
+        }
+      }
+      &.justify-content-#{$breakpoint}-end {
+        .nav-item:last-of-type .nav-link {
+          border-start-end-radius: var(--#{$prefix}card-border-radius);
+        }
+      }
+    }
+    &.justify-content-end,
+    &.nav-fill,
+    &.nav-justified {
+      .nav-item:last-of-type .nav-link {
+        border-start-end-radius: var(--#{$prefix}card-border-radius);
+      }
+    }
+  }
+}

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

@@ -11,10 +11,12 @@ $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;
+$df-tabs-active-hover-border-bottom: $df-tabs-active-border-bottom !default;
 $df-tabs-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-tabs-disabled-bg-color: transparent !default;
 $df-tabs-focus-outline: none !default;
 $df-tabs-focus-box-shadow: $btn-focus-box-shadow !default;
+$df-tabs-active-inner-box-shadow-color: unset !default;
 $df-tabs-secondary-border-bottom: $df-tabs-border-top !default;
 $df-tabs-secondary-border-top: $df-tabs-border-bottom !default;
 $df-tabs-secondary-active-border-top: $df-tabs-active-border-bottom !default;