@design-factory/design-factory 15.2.3 → 16.0.0

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

@@ -4,20 +4,6 @@
 @include ag.grid-styles(
     (
       theme: alpine,
-      alpine-active-color: $primary,
-      data-color: $body-color,
-      selected-row-background-color: $df-primary-lighten-60,
-      background-color: $df-tables-aggrid-background-color,
-      font-size: $df-tables-aggrid-font-size,
-      font-family: $font-family-base,
-      header-cell-hover-background-color: $df-hover-bg-color,
-      header-background-color: $gray-50,
-      header-height: $df-tables-aggrid-header-height,
-      row-height: $df-tables-aggrid-row-height,
-      row-hover-color: $gray-50,
-      row-border-color: $gray-200,
-      checkbox-indeterminate-color: $primary,
-      checkbox-border-radius: $df-tables-checkbox-border-radius
     )
   );
 
@@ -45,12 +31,41 @@
   box-shadow: none !important;
 }
 
+// TODO deal with icon font-weight in a global way
 .df-table-icon {
   @extend %df-icon-style;
   font-weight: $df-icon-solid-font-weight;
 }
 
 .df-table.ag-theme-alpine {
+  --#{$prefix}tables-aggrid-icon-color: #{$df-tables-aggrid-icon-color};
+  --#{$prefix}tables-aggrid-floating-filter-align-items: #{$df-tables-aggrid-floating-filter-align-items};
+  --#{$prefix}tables-aggrid-cell-label-justify-content: #{$df-tables-aggrid-cell-label-justify-content};
+  --#{$prefix}tables-aggrid-header-font-weight: #{$df-tables-aggrid-header-font-weight};
+  --#{$prefix}tables-aggrid-cell-padding-left: #{$df-tables-aggrid-cell-padding-left};
+  --#{$prefix}tables-aggrid-cell-padding-right: #{$df-tables-aggrid-cell-padding-right};
+  --#{$prefix}tables-aggrid-overlay-bg-color: #{$df-tables-aggrid-overlay-bg-color};
+  --#{$prefix}tables-aggrid-overlay-padding-top: #{$df-tables-aggrid-overlay-padding-top};
+  --#{$prefix}tables-aggrid-sortable-header-padding-right: #{$df-tables-aggrid-sortable-header-padding-right};
+  --#{$prefix}tables-aggrid-border-inline: #{$df-tables-aggrid-border-inline};
+  --#{$prefix}tables-aggrid-border-bottom-last-row: #{$df-tables-aggrid-border-bottom-last-row};
+  --#{$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};
+  --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};
+  --ag-alpine-active-color: #{$df-tables-aggrid-alpine-active-color};
+  --ag-header-height: #{$df-tables-aggrid-header-height};
+  --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-row-border-color: #{$gray-200};
+  --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);
 
@@ -89,7 +104,7 @@
   }
 
   .ag-root-wrapper {
-    border-inline: $df-tables-aggrid-border-inline;
+    border-inline: var(--#{$prefix}tables-aggrid-border-inline);
   }
 
   .ag-icon.ag-icon-desc {
@@ -106,7 +121,7 @@
     @extend .df-table-icon;
     @extend .icon-sort;
     &:before {
-      color: $df-tables-aggrid-icon-color;
+      color: var(--#{$prefix}tables-aggrid-icon-color);
     }
   }
 
@@ -114,7 +129,7 @@
     @extend .df-table-icon;
     @extend .icon-filter;
     &:before {
-      color: $df-tables-aggrid-icon-color;
+      color: var(--#{$prefix}tables-aggrid-icon-color);
     }
   }
 
@@ -128,29 +143,29 @@
   }
 
   .ag-row-last {
-    border-bottom: $df-tables-aggrid-border-bottom-last-row;
+    border-bottom: var(--#{$prefix}tables-aggrid-border-bottom-last-row);
   }
 
   .ag-header-row {
-    font-weight: $df-tables-aggrid-header-font-weight;
+    font-weight: var(--#{$prefix}tables-aggrid-header-font-weight);
   }
 
   .ag-header-cell:not(.ag-cell-inline-editing), .ag-cell:not(.ag-cell-inline-editing) {
-    padding-left: $df-tables-aggrid-cell-padding-left;
-    padding-right: $df-tables-aggrid-cell-padding-left;
+    padding-left: var(--#{$prefix}tables-aggrid-cell-padding-left);
+    padding-right: var(--#{$prefix}tables-aggrid-cell-padding-left);
   }
 
   .ag-header-cell.ag-header-cell-sortable, .ag-header-cell.ag-floating-filter {
-    padding-right: $df-tables-aggrid-sortable-header-padding-right;
+    padding-right: var(--#{$prefix}tables-aggrid-sortable-header-padding-right);
   }
 
   .ag-header-cell-label {
-    justify-content: $df-tables-aggrid-cell-label-justify-content;
+    justify-content: var(--#{$prefix}tables-aggrid-cell-label-justify-content);
   }
 
   .ag-header-icon, .ag-sort-indicator-icon {
     // todo RTL elements
-    margin-right: $df-tables-aggrid-font-size;
+    margin-right: var(--ag-font-size);
   }
 
   .ag-header-row.ag-header-row-floating-filter {
@@ -163,24 +178,27 @@
   }
 
   .df-tables-aggrid-overlay-withfilter {
-    background-color: $df-tables-aggrid-overlay-bg-color;
-    padding-top: $df-tables-aggrid-overlay-padding-top;
+    background-color: var(--#{$prefix}tables-aggrid-overlay-bg-color);
+    padding-top: var(--#{$prefix}tables-aggrid-overlay-padding-top);
   }
 
   .ag-floating-filter-body {
-    align-items: $df-tables-aggrid-floating-filter-align-items;
+    align-items: var(--#{$prefix}tables-aggrid-floating-filter-align-items);
   }
 
   // custom checkbox to have the same look as the DF one.
+  // TODO change this globaly with a CSS variable global
   .ag-checkbox-input-wrapper:focus-within,
   .ag-checkbox-input-wrapper:active {
-    box-shadow: $df-focused-box-shadow;
+    box-shadow: $df-tables-aggrid-input-box-shadow;
   }
 
   .ag-checkbox-input, .ag-cell {
     cursor: $df-cursor-type;
   }
 
+  // TODO do this change in the PR about form...
+  // Or should we create some CSS variables for this?
   .ag-checkbox-input-wrapper {
     cursor: $df-cursor-type;
     width: $form-check-input-width;
@@ -204,7 +222,7 @@
         background-color: $form-check-input-indeterminate-bg-color;
         border-color: $form-check-input-indeterminate-border-color;
         @if $enable-gradients {
-          background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
+          background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
         } @else {
           background-image: escape-svg($form-check-input-indeterminate-bg-image);
         }
@@ -215,7 +233,7 @@
         background-color: $form-check-input-checked-bg-color;
         border-color: $form-check-input-checked-border-color;
         @if $enable-gradients {
-          background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+          background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
         } @else {
           background-image: escape-svg($form-check-input-checked-bg-image);
         }
@@ -225,5 +243,6 @@
 }
 
 .df-pagination-secondary-elements {
-  font-size: $df-tables-aggrid-pagination-secondary-elements-font-size;
+  --#{$prefix}tables-aggrid-pagination-secondary-elements-font-size: #{$df-tables-aggrid-pagination-secondary-elements-font-size};
+  font-size: var(--#{$prefix}tables-aggrid-pagination-secondary-elements-font-size);
 }

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

@@ -1,7 +1,6 @@
 @use 'sass:map';
 
-$df-tables-checkbox-border-radius: $form-check-input-border-radius !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;
 $df-tables-aggrid-cell-label-justify-content: space-between !default;
@@ -21,4 +20,6 @@ $df-tables-aggrid-striped-row-color: $table-striped-bg !default; // Bootstrap Va
 $df-tables-aggrid-striped-row-color-hover: #e6e6e6 !default; 
 $df-tables-aggrid-white-header: #fff !default;
 $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;
 

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

@@ -1,91 +1,129 @@
 .nav-tabs {
+  --#{$prefix}nav-link-color: #{$df-tabs-links-not-active-color}; // override CSS var BS
+  --#{$prefix}tabs-border-bottom: #{$df-tabs-border-bottom};
+  --#{$prefix}tabs-border-top: #{$df-tabs-border-top};
+  --#{$prefix}tabs-border-left: #{$df-tabs-border-left};
+  --#{$prefix}tabs-border-right: #{$df-tabs-border-right};
+  --#{$prefix}tabs-padding-y: #{$df-tabs-padding-y};
+  --#{$prefix}tabs-hover-text-decoration: #{$df-tabs-hover-text-decoration};
+  --#{$prefix}tabs-hover-bg-color: #{$df-tabs-hover-bg-color};
+  --#{$prefix}tabs-hover-border-bottom: #{$df-tabs-hover-border-bottom};
+  --#{$prefix}tabs-disabled-text-decoration: #{$df-tabs-disabled-text-decoration};
+  --#{$prefix}tabs-between-item-margin: #{$df-tabs-between-item-margin};
+  --#{$prefix}tabs-active-border-bottom: #{$df-tabs-active-border-bottom};
+  --#{$prefix}tabs-disabled-color: #{$df-tabs-disabled-color};
+  --#{$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-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};
+  --#{$prefix}tabs-secondary-active-border-left: #{$df-tabs-secondary-active-border-left};
+  --#{$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};
+
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: var(--#{$prefix}nav-link-color);
+  }
+
   .nav-link {
-    color: $df-tabs-color; // add (override link color todo why?)
-    border-bottom: $df-tabs-border-bottom; // add
-    border-top: $df-tabs-border-top; // add
-    border-left: $df-tabs-border-left; // add
-    border-right: $df-tabs-border-right; // add
-    padding-top: $df-tabs-padding-y; // add
-    padding-bottom: $df-tabs-padding-y; // add
+    border-bottom: var(--#{$prefix}tabs-border-bottom); // add
+    border-top: var(--#{$prefix}tabs-border-top); // add
+    border-left: var(--#{$prefix}tabs-border-left); // add
+    border-right: var(--#{$prefix}tabs-border-right); // add
+    padding-top: var(--#{$prefix}tabs-padding-y); // add
+    padding-bottom: var(--#{$prefix}tabs-padding-y); // add
+
+    &.active { // add
+      font-weight: var(--#{$prefix}tabs-item-active-font-weight);
+    }
 
     &:hover {
       // override
-      text-decoration: $df-tabs-hover-text-decoration; // add
-      background-color: $df-tabs-hover-bg-color; // add
-      border-bottom: $df-tabs-hover-border-bottom; // add
-      border-top: $df-tabs-border-top; // add
-      border-left: $df-tabs-border-left; // add
-      border-right: $df-tabs-border-right; // add
+      text-decoration: var(--#{$prefix}tabs-hover-text-decoration); // add
+      background-color: var(--#{$prefix}tabs-hover-bg-color); // add
+      border-bottom: var(--#{$prefix}tabs-hover-border-bottom); // add
+      border-top: var(--#{$prefix}tabs-border-top); // add
+      border-left: var(--#{$prefix}tabs-border-left); // add
+      border-right: var(--#{$prefix}tabs-border-right); // add
     }
 
     &:focus {
       // override
-      outline: $df-tabs-focus-outline; // add to override default
-      box-shadow: $btn-focus-box-shadow; // add
-      border-bottom: $df-tabs-border-bottom; // add
-      border-top: $df-tabs-border-top; // add
-      border-left: $df-tabs-border-left; // add
-      border-right: $df-tabs-border-right; // add
+      outline: var(--#{$prefix}tabs-focus-outline); // add to override default
+      box-shadow: var(--#{$prefix}tabs-focus-box-shadow); // add
+      border-bottom: var(--#{$prefix}tabs-border-bottom); // add
+      border-top: var(--#{$prefix}tabs-border-top); // add
+      border-left: var(--#{$prefix}tabs-border-left); // add
+      border-right: var(--#{$prefix}tabs-border-right); // add
+      &:not(.active) {
+        color: var(--#{$prefix}nav-link-color);
+      }
     }
 
     &.disabled {
-      pointer-events: auto; // add to allow cursor override bs
-      cursor: $df-tabs-disabled-cursor; // add
-      text-decoration: $df-tabs-disabled-text-decoration;
-      border-bottom: $df-tabs-border-bottom; // add
-      border-top: $df-tabs-border-top; // add
-      border-left: $df-tabs-border-left; // add
-      border-right: $df-tabs-border-right; // add
+      text-decoration: var(--#{$prefix}tabs-disabled-text-decoration); // add
+      border-bottom: var(--#{$prefix}tabs-border-bottom); // add
+      border-top: var(--#{$prefix}tabs-border-top); // add
+      border-left: var(--#{$prefix}tabs-border-left); // add
+      border-right: var(--#{$prefix}tabs-border-right); // add
       &:hover {
-        background-color: $df-tabs-disabled-bg-color;
+        background-color: var(--#{$prefix}tabs-disabled-bg-color); // add
       }
     }
   }
 
   .nav-item + .nav-item {
     // add
-    margin-left: $df-tabs-between-item-margin; // add
+    margin-left: var(--#{$prefix}tabs-between-item-margin); // add
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    border-bottom: $df-tabs-active-border-bottom; // add
-    border-top: $df-tabs-border-top; // add
-    border-left: $df-tabs-border-left; // add
-    border-right: $df-tabs-border-right; // add
+    border-bottom: var(--#{$prefix}tabs-active-border-bottom); // add
+    border-top: var(--#{$prefix}tabs-border-top); // add
+    border-left: var(--#{$prefix}tabs-border-left); // add
+    border-right: var(--#{$prefix}tabs-border-right); // add
   }
 }
 
 %secondary {
   .nav-link {
-    border-bottom: $df-tabs-secondary-border-bottom; // add
-    border-top: $df-tabs-secondary-border-top; // add
+    border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
+    border-top: var(--#{$prefix}tabs-secondary-border-top); // add
 
     &:hover {
       // override
-      border-bottom: $df-tabs-secondary-border-bottom; // add
-      border-top: $df-tabs-secondary-border-top; // add
+      border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
+      border-top: var(--#{$prefix}tabs-secondary-border-top); // add
     }
 
     &:focus {
       // override
-      border-bottom: $df-tabs-secondary-border-bottom; // add
-      border-top: $df-tabs-secondary-border-top; // add
+      border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
+      border-top: var(--#{$prefix}tabs-secondary-border-top); // add
     }
 
     &.disabled {
-      border-bottom: $df-tabs-secondary-border-bottom; // add
-      border-top: $df-tabs-secondary-border-top; // add
+      border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
+      border-top: var(--#{$prefix}tabs-secondary-border-top); // add
     }
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    border-bottom: $df-tabs-secondary-active-border-bottom; // add
-    border-top: $df-tabs-secondary-active-border-top; // add
-    border-left: $df-tabs-secondary-active-border-left; // add
-    border-right: $df-tabs-secondary-active-border-right; // add
-    margin-bottom: $df-tabs-secondary-active-margin-bottom; // add
+    border-bottom: var(--#{$prefix}tabs-secondary-active-border-bottom); // add
+    border-top: var(--#{$prefix}tabs-secondary-active-border-top); // add
+    border-left: var(--#{$prefix}tabs-secondary-active-border-left); // add
+    border-right: var(--#{$prefix}tabs-secondary-active-border-right); // add
+    margin-bottom: var(--#{$prefix}tabs-secondary-active-margin-bottom); // add
   }
 }
 
@@ -107,17 +145,28 @@
 
 .tab-content {
   > .tab-pane {
-    padding: $df-tabcontent-tabpane-padding; //add
+    padding: var(--#{$prefix}tabs-content-tab-pane-padding); //add
   }
 }
 
 %secondary-content {
-  border-style: $df-tab-content-border-style; //add
-  border-color: $df-tab-content-border-color; //add
-  border-width: $df-tab-content-border-width; //add
+  border-style: var(--#{$prefix}tabs-content-border-style); //add
+  border-color: var(--#{$prefix}tabs-content-border-color); //add
+  border-width: var(--#{$prefix}tabs-content-border-width); //add
 }
 
 // For bootstrap tab
 .tab-content.secondary {
   @extend %secondary-content;
 }
+
+.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;
+    }
+  }
+ }
+}

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

@@ -1,4 +1,4 @@
-$df-tabs-color: $body-color !default;
+$df-tabs-links-not-active-color: $body-color !default;
 $df-tabs-border-bottom: 2px solid transparent !default;
 $df-tabs-border-top: none !default;
 $df-tabs-border-left: none !default;
@@ -7,13 +7,13 @@ $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-disabled-cursor: $df-disabled-cursor !default;
+// TODO rem instead of px
 $df-tabs-between-item-margin: 3px !default;
-$df-tabs-active-border-bottom: 3px solid $primary !default;
-$df-tabs-disabled-color: $df-disabled-color !default;
+$df-tabs-active-border-bottom: 3px solid shades-css-var('primary', 'inert-color') !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-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;
@@ -25,8 +25,9 @@ $df-tabs-padding-y: 0.6875rem !default; // comvarpad?
 // We can also add variable -x that is to be aligned with accordion....
 // instead of keeping the default value of nav-link which is currently good.
 
-// Tab-content
-$df-tab-content-border-style: solid !default;
-$df-tab-content-border-color: $border-color !default;
-$df-tab-content-border-width: 0px $nav-tabs-border-width $nav-tabs-border-width $nav-tabs-border-width !default;
-$df-tabcontent-tabpane-padding: 1.5rem 1rem !default;
+// Tabs-content
+$df-tabs-content-border-style: solid !default;
+$df-tabs-content-border-color: $border-color !default;
+$df-tabs-content-border-width: 0px $nav-tabs-border-width $nav-tabs-border-width $nav-tabs-border-width !default;
+$df-tabs-content-tab-pane-padding: 1.5rem 1rem !default;
+$df-tabs-item-active-font-weight: initial !default;