@design-factory/design-factory 19.1.2 → 20.0.0-next.0

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

@@ -44,6 +44,7 @@ $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,6 +59,7 @@
       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 {
@@ -194,6 +196,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] {
@@ -252,6 +258,7 @@
         }
       }
     }
+
     &.justify-content-end,
     &.nav-fill,
     &.nav-justified {

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/tooltip/_tooltip.scss

@@ -6,7 +6,14 @@
     &.tooltip-inner-#{$extension} {
       .tooltip-inner {
         @include border-radius(var(--#{$prefix}tooltip-border-radius-#{$extension}));
+        font-size: get-sizing-brand2023($extension, $ratio);
       }
     }
   }
 }
+
+@each $extension, $ratio in $df-size-ratios {
+  .df-font-#{$extension} .tooltip .tooltip-inner {
+    font-size: get-sizing-brand2023($extension, $ratio);
+  }
+}