@design-factory/design-factory 19.1.3 → 20.0.0-next.1

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

@@ -51,18 +51,24 @@
   --#{$prefix}stepper-icon-align-items: #{$df-stepper-icon-align-items};
   --#{$prefix}stepper-icon-justify-content: #{$df-stepper-icon-justify-content};
   --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size};
-
+  --#{$prefix}stepper-border-radius: #{$df-stepper-border-radius};
+  --#{$prefix}stepper-border-radius-sm: #{$df-stepper-border-radius-sm};
+  --#{$prefix}stepper-border-radius-lg: #{$df-stepper-border-radius-lg};
   align-items: stretch;
   display: flex;
   flex-direction: row;
+
   &.df-vertical-stepper {
     align-items: flex-start;
     display: flex;
     flex-direction: column;
   }
+
   .btn {
     --#{$prefix}btn-font-size: #{$df-stepper-font-size};
+    --#{$prefix}btn-border-radius: var(--#{$prefix}stepper-border-radius);
   }
+
   .df-stepper-step {
     border: var(--#{$prefix}stepper-div-step-border); // override to have same border as btn
     height: var(--#{$prefix}stepper-step-height);
@@ -72,28 +78,34 @@
     // put it depending of the button padding and as the btn-sm size
     padding: var(--#{$prefix}stepper-step-padding-y) var(--#{$prefix}stepper-step-padding-x);
     align-items: center;
+
     &.active {
       &:not(:hover) {
         background-color: $body-bg;
       }
+
       .df-stepper-label {
         text-decoration: none;
       }
     }
+
     &:not(.flex-row) ~ .df-stepper-line-wrapper {
       .df-stepper-line {
         padding-top: var(--#{$prefix}stepper-step-padding-y);
       }
     }
+
     .df-stepper-icon,
     .df-stepper-outline-icon {
       & > * {
         display: none;
       }
     }
+
     .df-stepper-outline-icon.fa-exclamation-triangle::before {
       font-size: var(--#{$prefix}stepper-outline-icon-only-font-size);
     }
+
     .df-stepper-icon::before,
     .df-stepper-outline-icon::before,
     .df-stepper-icon {
@@ -109,31 +121,41 @@
       display: block;
       white-space: nowrap;
       max-width: var(--#{$prefix}stepper-label-max-width);
+      font-weight: $df-stepper-label-font-weight;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;
     }
+
     &.flex-row {
       .df-stepper-label,
       .df-stepper-optional-label {
         @extend .ms-4;
       }
     }
+
     &.flex-row + .df-stepper-line-wrapper {
       .df-stepper-line:not(:first-child) {
         display: none !important;
       }
     }
+
+    .df-stepper-outline-number-visited {
+      font-weight: $df-stepper-outline-number-visited-font-weight;
+    }
   }
+
   .df-stepper-line-wrapper {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+
     .df-stepper-line {
       display: flex;
       flex-direction: row;
       flex-grow: 1;
       align-items: center;
+
       .df-stepper-horizontal-line {
         flex-grow: 1;
         border-top: var(--#{$prefix}stepper-line-border);
@@ -142,6 +164,7 @@
       }
     }
   }
+
   .df-stepper-step-completed + .df-stepper-line-wrapper {
     .df-stepper-line {
       .df-stepper-horizontal-line {
@@ -165,7 +188,8 @@
     --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size-sm};
 
     .btn {
-      --#{$prefix}btn-font-size: var(--#{$prefix}stepper-font-size);
+      --#{$prefix}btn-font-size: var(--#{$prefix}stepper-font-size-sm);
+      --#{$prefix}btn-border-radius: var(--#{$prefix}stepper-border-radius-sm);
     }
 
     @include df-stepper-size();
@@ -180,7 +204,8 @@
     --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size-lg};
 
     .btn {
-      --#{$prefix}btn-font-size: #{$df-stepper-font-size-lg};
+      --#{$prefix}btn-font-size: var(--#{$prefix}stepper-font-size-lg);
+      --#{$prefix}btn-border-radius: var(--#{$prefix}stepper-border-radius-lg);
     }
 
     @include df-stepper-size();
@@ -199,6 +224,7 @@
     }
     // Line
     position: relative;
+
     &::before {
       content: '';
       position: absolute;

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

@@ -35,15 +35,16 @@ $df-stepper-step-padding-y: $btn-padding-y !default;
 $df-stepper-step-padding-x: 0.75rem !default;
 // TODO put a link in this ot the ratios of the button? Must be the same
 $df-stepper-step-padding-y-sm: $btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
-$df-stepper-step-padding-x-sm: $btn-padding-x * map.get($df-size-ratios, 'sm') !default;
+$df-stepper-step-padding-x-sm: calc($btn-padding-x * map.get($df-size-ratios, 'sm')) !default;
 $df-stepper-step-padding-y-lg: $btn-padding-y * map.get($df-sizing-ratios, 'lg') !default;
-$df-stepper-step-padding-x-lg: $btn-padding-x * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-step-padding-x-lg: calc($btn-padding-x * map.get($df-size-ratios, 'lg')) !default;
 $df-stepper-step-padding-y-xl: $btn-padding-y * map.get($df-sizing-ratios, 'xl') !default;
-$df-stepper-step-padding-x-xl: $btn-padding-x * map.get($df-size-ratios, 'xl') !default;
+$df-stepper-step-padding-x-xl: calc($btn-padding-x * map.get($df-size-ratios, 'xl')) !default;
 $df-stepper-step-height: auto !default;
 $df-stepper-hl-height: 0px !default;
 $df-stepper-hl-margin: 2 * $border-width 0 0 0 !default; //0.5
 $df-stepper-label-max-width: 13.75rem !default;
+$df-stepper-label-font-weight: inherit !default;
 $df-stepper-disabled-opacity: $btn-disabled-opacity !default;
 $df-stepper-font-size: $font-size-base !default;
 $df-stepper-font-size-sm: $font-size-sm !default;
@@ -57,7 +58,11 @@ $df-stepper-optional-label-font-size: 0.75rem !default;
 $df-stepper-optional-label-font-weight: $font-weight-base !default;
 $df-stepper-optional-label-text-align: start !default;
 $df-stepper-div-step-border: 1px solid transparent !default; // same as btn-link
-$df-vertical-stepper-panel-margin-start: math.div(strip-units($df-stepper-icon-width), 32) + strip-units($df-stepper-step-padding-x) + math.div(strip-units($df-stepper-icon-width), 2) + rem !default;
+//START TEMP VAR TO AVOID LINT ISSUES
+$df-vertical_tmp_1: math.div(strip-units($df-stepper-icon-width), 32) !default;
+$df-vertical_tmp_2: strip-units($df-stepper-step-padding-x) + math.div(strip-units($df-stepper-icon-width), 2) !default;
+//END TEMP VAR TO AVOID LINT ISSUES
+$df-vertical-stepper-panel-margin-start: $df-vertical_tmp_1 + $df-vertical_tmp_2 + rem !default;
 $df-vertical-stepper-panel-padding-start: 1rem !default;
 $df-vertical-stepper-panel-margin-y: 1rem !default;
 $df-vertical-stepper-line-width: 1px !default;
@@ -77,3 +82,7 @@ $df-stepper-line-completed-color: shades-css-var(
   'inert-color'
 ) !default;
 $df-stepper-line-default-color: var(--#{$prefix}gray-200) !default;
+$df-stepper-border-radius: $border-radius !default;
+$df-stepper-border-radius-lg: $border-radius !default;
+$df-stepper-border-radius-sm: $border-radius !default;
+$df-stepper-outline-number-visited-font-weight: $font-weight-base !default;

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

@@ -14,7 +14,7 @@
   .ag-layout-auto-height .ag-center-cols-container,
   .ag-layout-print .ag-center-cols-clipper,
   .ag-layout-print .ag-center-cols-container {
-    min-height: 0px !important;
+    min-height: 0 !important;
   }
 }
 
@@ -35,7 +35,7 @@
 // TODO deal with icon font-weight in a global way
 .df-table-icon {
   font-family: $df-font-awesome-font-family;
-  font-weight: $df-icon-solid-font-weight;
+  font-weight: $df-icon-light-font-weight;
 }
 
 .df-table.ag-theme-alpine {
@@ -74,6 +74,10 @@
   --ag-wrapper-border-radius: #{$df-tables-aggrid-wrapper-border-radius};
 
   .ag-row {
+    // TODO: remove when removing old branding. Needed to override the calc
+    @if (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023) {
+      font-size: var(--ag-font-size);
+    }
     &.ag-row-odd {
       --ag-row-hover-color: var(--#{$prefix}ag-odd-row-hover-background-color);
     }
@@ -104,7 +108,7 @@
 
   .ag-icon.ag-icon-asc {
     @extend .df-table-icon;
-    @extend .fa-sort-up;
+    @extend .fa-sort-amount-up;
     &:before {
       color: var(--#{$prefix}tables-aggrid-icon-color);
     }
@@ -133,7 +137,7 @@
 
   .ag-icon.ag-icon-desc {
     @extend .df-table-icon;
-    @extend .fa-sort-down;
+    @extend .fa-sort-amount-down;
     &:before {
       color: var(--#{$prefix}tables-aggrid-icon-color);
     }
@@ -146,7 +150,7 @@
 
   .ag-icon.ag-icon-none {
     @extend .df-table-icon;
-    @extend .fa-sort;
+    @extend .fa-sort-up-down;
     &:before {
       color: var(--#{$prefix}tables-aggrid-icon-color);
     }

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

@@ -6,6 +6,12 @@
     }
   }
 
+  caption {
+    font-size: #{$df-table-caption-font-size};
+  }
+  th {
+    font-size: #{$df-table-th-font-size};
+  }
   & thead,
   tfoot {
     border-bottom: #{$df-tables-aggrid-divider-border};

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

@@ -1,5 +1,8 @@
 @use 'sass:map';
 
+$df-table-caption-font-size: $font-size-base !default;
+$df-table-th-font-size: $font-size-base !default;
+
 $df-tables-aggrid-checkbox-border-radius: $form-check-input-border-radius !default;
 $df-tables-aggrid-icon-color: $gray-300 !default;
 $df-tables-aggrid-floating-filter-align-items: center !default;

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

@@ -40,6 +40,7 @@
     border-right: var(--#{$prefix}tabs-border-right); // add
     padding-top: var(--#{$prefix}tabs-padding-y); // add
     padding-bottom: var(--#{$prefix}tabs-padding-y); // add
+    color: var(--#{$prefix}nav-link-color); //override link color
 
     &.active {
       // add
@@ -58,9 +59,14 @@
       border-top: var(--#{$prefix}tabs-border-top); // add
       border-left: var(--#{$prefix}tabs-border-left); // add
       border-right: var(--#{$prefix}tabs-border-right); // add
+      color: var(--#{$prefix}nav-link-hover-color); //override link color
     }
 
     &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
       // override
       outline: var(--#{$prefix}tabs-focus-outline); // add to override default
       box-shadow: var(--#{$prefix}tabs-focus-box-shadow); // add
@@ -194,6 +200,10 @@
     --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
     --#{$prefix}tabs-disabled-bg-color: #{$df-tabs-disabled-bg-color};
 
+    a.nav-link {
+      border-bottom: 0;
+    }
+
     .nav-link {
       &.disabled,
       &[disabled] {
@@ -211,7 +221,7 @@
         }
       }
 
-      &:focus {
+      &:focus-visible {
         outline: 0;
         box-shadow: $df-tabs-focus-box-shadow;
       }
@@ -252,6 +262,7 @@
         }
       }
     }
+
     &.justify-content-end,
     &.nav-fill,
     &.nav-justified {

package/styles/scss/components/timepicker/_timepicker.scss

@@ -0,0 +1,5 @@
+ngb-timepicker {
+  .ngb-tp-spacer {
+    width: $df-timepicker-spacer-width !important;
+  }
+}

package/styles/scss/components/timepicker/_timepicker.variables.scss

@@ -0,0 +1 @@
+$df-timepicker-spacer-width: 1em !default;

package/styles/scss/components/toast/_toast.scss

@@ -59,7 +59,7 @@
       --#{$prefix}box-shadow-color: #{$df-toast-box-shadow-color};
 
       @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        @extend .btn, .btn-outline-secondary, .df-btn-tertiary;
+        @extend .btn, .btn-outline-neutral, .df-btn-tertiary;
       } @else {
         @extend .btn, .btn-link;
       }
@@ -117,7 +117,7 @@
           box-shadow: none;
         }
         &:focus-visible {
-          box-shadow: var(--df-btn-focus-box-shadow);
+          box-shadow: var(--#{$prefix}btn-focus-box-shadow);
         }
       }
     }
@@ -125,11 +125,11 @@
     .df-btn-tertiary {
       // Balance the btn-sm padding to preserve the elements alignement and the toast height.
       &:not(.btn-close) {
-        margin-top: calc(0rem - var(--df-btn-padding-y));
+        margin-top: calc(0rem - var(--#{$prefix}btn-padding-y));
       }
 
       &:focus-visible {
-        --df-box-shadow-color: var(--#{$prefix}toast-color);
+        --#{$prefix}box-shadow-color: var(--#{$prefix}toast-color);
       }
 
       &:not(:hover) {
@@ -141,9 +141,13 @@
   &.df-toast-subtle {
     border-inline-start-width: var(--#{$prefix}toast-subtle-border-start-width);
 
+    // Always managed by primary colors (figma)
     .df-btn-tertiary:not(.btn-close) {
       &:focus-visible {
-        --df-box-shadow-color: var(--#{$prefix}primary);
+        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+            'button-text-basic-color-primary-default-border',
+            var(--#{$prefix}primary)
+          )};
       }
 
       &:not(:hover) {
@@ -151,11 +155,26 @@
       }
 
       &:hover {
-        color: var(--#{$prefix}primary-700);
-        background-color: var(--#{$prefix}primary-100);
+        color: #{variable-switch-brand2023(
+            'button-text-basic-color-primary-hovered-foreground',
+            var(--#{$prefix}primary-700)
+          )};
+
+        background-color: #{variable-switch-brand2023(
+            'button-text-basic-color-primary-hovered-background',
+            var(--#{$prefix}primary-100)
+          )};
+
+        border-color: #{variable-switch-brand2023(
+            'button-text-basic-color-primary-hovered-background',
+            var(--#{$prefix}primary-100)
+          )};
 
         &:focus-visible {
-          --df-box-shadow-color: var(--#{$prefix}primary-700);
+          --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+              'button-text-basic-color-primary-hovered-border',
+              var(--#{$prefix}primary-700)
+            )};
         }
       }
 
@@ -163,7 +182,10 @@
         color: var(--#{$prefix}primary-800);
         background-color: var(--#{$prefix}primary-200);
         &:focus-visible {
-          --df-box-shadow-color: var(--#{$prefix}primary-800);
+          --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+              'button-text-basic-color-primary-active-border',
+              var(--#{$prefix}primary-800)
+            )};
         }
       }
     }

package/styles/scss/components/toggle/_toggle.scss

@@ -24,6 +24,7 @@
   --#{$prefix}switch-name-padding-start: 0;
   --#{$prefix}switch-padding-start: #{$form-switch-padding-start};
   --#{$prefix}switch-input-padding-start: 0;
+  --#{$prefix}switch-container-margin-top: #{$df-switch-container-margin-top};
 
   display: flex;
   align-items: center;
@@ -138,7 +139,7 @@
     .df-form-switch-container {
       display: flex;
       align-items: center;
-      margin-top: #{($line-height-base - $form-check-input-width) * 0.5};
+      margin-top: var(--#{$prefix}switch-container-margin-top);
     }
   }
 }

package/styles/scss/components/toggle/_toggle.variables.scss

@@ -19,3 +19,4 @@ $df-switch-rtl-checked-bg-position: left center !default;
 $df-switch-rtl-bg-position: right center !default;
 $df-switch-box-shadow-opacity: $input-btn-focus-color-opacity !default;
 $df-switch-box-shadow: $form-check-input-focus-box-shadow !default;
+$df-switch-container-margin-top: #{($line-height-base - $form-check-input-width) * 0.5} !default;

package/styles/scss/components/tooltip/_tooltip.scss

@@ -1,12 +1,24 @@
 .tooltip {
   --#{$prefix}tooltip-border-radius-sm: #{$df-tooltip-border-radius-sm};
   --#{$prefix}tooltip-border-radius-lg: #{$df-tooltip-border-radius-lg};
+  --#{$prefix}tooltip-padding-x-sm: #{$df-tooltip-padding-x-sm};
+  --#{$prefix}tooltip-padding-x-lg: #{$df-tooltip-padding-x-lg};
+  --#{$prefix}tooltip-padding-y-sm: #{$df-tooltip-padding-y-sm};
+  --#{$prefix}tooltip-padding-y-lg: #{$df-tooltip-padding-y-lg};
 
   @each $extension, $ratio in $df-size-ratios {
     &.tooltip-inner-#{$extension} {
       .tooltip-inner {
         @include border-radius(var(--#{$prefix}tooltip-border-radius-#{$extension}));
+        font-size: get-sizing-brand2023($extension, $ratio);
+        padding: var(--#{$prefix}tooltip-padding-y-#{$extension}) var(--#{$prefix}tooltip-padding-x-#{$extension});
       }
     }
   }
 }
+
+@each $extension, $ratio in $df-size-ratios {
+  .df-font-#{$extension} .tooltip .tooltip-inner {
+    font-size: get-sizing-brand2023($extension, $ratio);
+  }
+}

package/styles/scss/components/tooltip/_tooltip.variables.scss

@@ -1,2 +1,6 @@
 $df-tooltip-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $df-tooltip-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$df-tooltip-padding-x-sm: 0.75rem !default;
+$df-tooltip-padding-x-lg: 0.75rem !default;
+$df-tooltip-padding-y-sm: 0.25rem !default;
+$df-tooltip-padding-y-lg: 0.375rem !default;

package/styles/scss/df-styles.scss

@@ -103,6 +103,7 @@
 @import 'components/footer/footer';
 @import 'components/toast/toast';
 @import 'components/scrollspy/scrollspy';
+@import 'components/timepicker/timepicker';
 @import 'components/tooltip/tooltip';
 
 @import 'bootstrap/rtl-styles-override';