@design-factory/design-factory 15.2.0

package/styles/scss/components/spinner/_spinner_container.scss

@@ -0,0 +1,43 @@
+body.df-progressindicator-open {
+  overflow: hidden;
+}
+
+#{$df-css-namespace-selector} {
+  &.df-progressindicator-backdrop,
+  &.df-progressindicator-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $df-progressindicator-container-zindex;
+  }
+
+  &.df-progressindicator-backdrop {
+    &.df-progressindicator-backdrop-global {
+      background-color: $df-progressindicator-backdrop-global-bg-color;
+      opacity: $df-progressindicator-backdrop-global-opacity;
+    }
+    &.df-progressindicator-backdrop-contextual {
+      background-color: $df-progressindicator-backdrop-contextual-bg-color;
+      opacity: $df-progressindicator-backdrop-contextual-opacity;
+    }
+  }
+
+  &.df-progressindicator-container {
+    display: flex;
+    background-color: transparent;
+    &.df-progressindicator-centered {
+      align-items: center;
+      justify-content: center;
+    }
+    &.df-progressindicator-top {
+      align-items: flex-start;
+      justify-content: center;
+    }
+    &.df-progressindicator-bottom {
+      align-items: flex-end;
+      justify-content: center;
+    }
+  }
+}

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

@@ -0,0 +1,193 @@
+@mixin df-stepper-fill-number($color, $bg-color, $border-color) {
+  border-color: $border-color;
+  background-color: $bg-color;
+  color: $color;
+}
+
+@mixin df-stepper-common-number() {
+  border-radius: $df-stepper-icon-border-radius;
+  text-align: $df-stepper-icon-text-align;
+  padding: $df-stepper-icon-padding;
+  border-style: $df-stepper-icon-border-style;
+  border-width: $border-width;
+  width: $df-stepper-icon-width;
+  height: $df-stepper-icon-height;
+  line-height: $df-stepper-number-line-height;
+  font-weight: $df-stepper-number-font-size;
+}
+
+@mixin df-stepper-line-variant($color, $value) {
+  .df-stepper-line-wrapper .df-stepper-line .df-stepper-horizontal-line.df-stepper-line-#{$color} {
+    border-color: $value;
+  }
+}
+
+@mixin df-stepper-icon-variant($color, $value) {
+  .df-stepper-step-#{$color} {
+    .df-stepper-optional-label {
+      // todo correct this
+      color: $df-stepper-optional-label-color;
+      font-size: $df-stepper-optional-label-font-size;
+      font-weight: $df-stepper-optional-label-font-weight;
+    }
+    .df-stepper-icon::before {
+      color: $df-stepper-icon-color;
+      @if #{$color} == 'green' {
+        background-color: $brand-green;
+      } @else {
+        background-color: $value;
+      }
+    }
+    .df-stepper-outline-icon::before {
+      @if #{$color} == 'green' {
+        color: $brand-green;
+      }
+      background-color: $white;
+    }
+    color: $value; // override btn-link
+    &:hover {
+      // override the btn-link feature
+      color: $value;
+      text-decoration: $df-stepper-text-decoration-hover;
+    }
+    &:focus {
+      text-decoration: $df-stepper-text-decoration-focus;
+    }
+    &:not(:disabled):not(.disabled):active {
+      color: $value;
+      text-decoration: $df-stepper-text-decoration-active;
+      font-weight: $font-weight-base;
+    }
+    &:not(:disabled):not(.disabled).active {
+      // override the btn-link feature
+      color: $value;
+      text-decoration: $df-stepper-text-decoration-active;
+      font-weight: $df-font-weight-semi-bold;
+    }
+    &.active {
+      color: $value;
+      &:hover {
+        // override the btn-link feature
+        color: $value;
+      }
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active {
+        // override the btn-link feature
+        color: $value;
+      }
+    }
+  }
+  // Icon with number outline variant
+  .df-stepper-outline-number-#{$color} {
+    @include df-stepper-common-number();
+    @include df-stepper-fill-number($value, $df-stepper-outline-bg-color, $value);
+  }
+  // Icon with number plain version
+  .df-stepper-number-#{$color} {
+    @include df-stepper-common-number();
+    @include df-stepper-fill-number($df-stepper-icon-color, $value, $value);
+  }
+  [aria-disabled='true'].df-stepper-step,
+  [disabled].df-stepper-step {
+    .df-stepper-number-#{$color} {
+      @include df-stepper-fill-number(
+        $df-stepper-icon-disabled-color,
+        $df-stepper-icon-disabled-bg-color,
+        $df-stepper-icon-disabled-border-color
+      );
+    }
+    // outline variant
+    .df-stepper-outline-number-#{$color} {
+      @include df-stepper-fill-number(
+        $df-stepper-icon-outline-disabled-color,
+        $df-stepper-icon-outline-disabled-bg-color,
+        $df-stepper-icon-outline-disabled-border-color
+      );
+    }
+    // verify this.
+    .df-stepper-icon {
+      @include df-stepper-fill-number(
+        $df-stepper-icon-outline-disabled-color,
+        $df-stepper-icon-outline-disabled-bg-color,
+        $df-stepper-icon-outline-disabled-border-color
+      );
+    }
+    // todo verify this
+    .df-stepper-outline-icon {
+      @include df-stepper-fill-number(
+        $df-stepper-icon-outline-disabled-color,
+        $df-stepper-icon-outline-disabled-bg-color,
+        $df-stepper-icon-outline-disabled-border-color
+      );
+    }
+  }
+}
+
+// Stepper sizes
+@mixin df-stepper-icon-variant-size($color, $stepper-icon-width, $stepper-icon-height, $stepper-icon-line-height) {
+  // outline variant
+  .df-stepper-outline-number-#{$color} {
+    line-height: $stepper-icon-line-height;
+    width: $stepper-icon-width;
+    height: $stepper-icon-height;
+  }
+  .df-stepper-number-#{$color} {
+    line-height: $stepper-icon-line-height;
+    width: $stepper-icon-width;
+    height: $stepper-icon-height;
+  }
+}
+
+// Stepper sizes todo font-size
+@mixin df-stepper-size(
+  $padding-y,
+  $padding-x,
+  $font-size,
+  $stepper-icon-width,
+  $stepper-icon-height,
+  $stepper-icon-line-height,
+  $stepper-icon-only-font-size,
+  $stepper-outline-icon-only-font-size
+) {
+  @include font-size($font-size);
+  .df-stepper-step {
+    padding: $padding-y $padding-x;
+    .df-stepper-icon::before,
+    .df-stepper-outline-icon::before {
+      width: $stepper-icon-width;
+      height: $stepper-icon-height;
+      line-height: $stepper-icon-line-height;
+      font-size: $stepper-icon-only-font-size;
+    }
+    .df-stepper-outline-icon::before {
+      font-size: $stepper-outline-icon-only-font-size;
+    }
+    /* stepper icon color*/
+    @each $color, $value in $theme-colors {
+      @include df-stepper-icon-variant-size(
+        $color,
+        $stepper-icon-width,
+        $stepper-icon-height,
+        $stepper-icon-line-height
+      );
+    }
+
+    @each $color, $value in $colors {
+      @include df-stepper-icon-variant-size(
+        $color,
+        $stepper-icon-width,
+        $stepper-icon-height,
+        $stepper-icon-line-height
+      );
+    }
+
+    @each $color, $value in $grays {
+      @include df-stepper-icon-variant-size(
+        $color,
+        $stepper-icon-width,
+        $stepper-icon-height,
+        $stepper-icon-line-height
+      );
+    }
+  }
+}

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

@@ -0,0 +1,130 @@
+@import 'stepper.mixins';
+
+.df-stepper {
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  .df-stepper-step {
+    border: $df-stepper-div-step-border; // override to have same border as btn
+    height: $df-stepper-step-height;
+    display: flex;
+    flex-direction: column;
+    min-width: $df-stepper-step-min-width; // TO work with the negative margin even in mobile version
+    // put it depending of the button padding and as the btn-sm size
+    padding: $df-stepper-step-padding-y $df-stepper-step-padding-x;
+    align-items: center;
+    &.active {
+      .df-stepper-label {
+        text-decoration: none;
+      }
+    }
+    &:not(.flex-row) ~ .df-stepper-line-wrapper {
+      .df-stepper-line {
+        padding-top: $df-stepper-step-padding-y;
+      }
+    }
+    .df-stepper-icon::before,
+    .df-stepper-outline-icon::before {
+      width: $df-stepper-icon-width;
+      height: $df-stepper-icon-height;
+      line-height: $df-stepper-icon-line-height;
+      text-align: $df-stepper-icon-text-align;
+      font-size: $df-stepper-icon-only-font-size;
+      border-radius: $df-stepper-icon-only-border-radius;
+    }
+    .df-stepper-outline-icon::before {
+      font-size: $df-stepper-outline-icon-only-font-size;
+    }
+    .df-stepper-label {
+      display: block;
+      white-space: nowrap;
+      max-width: $df-stepper-label-max-width;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-decoration: none;
+    }
+  }
+  .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: $df-stepper-line-border-color;
+        height: $df-stepper-hl-height;
+        margin: $df-stepper-hl-margin;
+        z-index: $df-stepper-line-zindex;
+      }
+    }
+  }
+
+  // TODO there is still an opacity 0.65 on disable button...how to do it
+  [aria-disabled='true'].df-stepper-step,
+  [disabled].df-stepper-step {
+    color: $df-stepper-disabled-color;
+    opacity: $df-stepper-disabled-opacity;
+    &:hover {
+      color: $df-stepper-disabled-color;
+    }
+    > .df-stepper-label {
+      color: $df-stepper-disabled-color;
+    }
+  }
+
+  /* stepper icon color */
+  @each $color, $value in $theme-colors {
+    @include df-stepper-icon-variant($color, $value);
+    @include df-stepper-line-variant($color, $value);
+  }
+
+  @each $color, $value in $colors {
+    @include df-stepper-icon-variant($color, $value);
+    @include df-stepper-line-variant($color, $value);
+  }
+
+  @each $color, $value in $grays {
+    @include df-stepper-icon-variant($color, $value);
+  }
+
+  // Stepper sizing
+  &.df-stepper-sm {
+    .df-stepper-step:not(.flex-row) ~ .df-stepper-line-wrapper {
+      .df-stepper-line {
+        padding-top: $df-stepper-step-padding-y-sm;
+      }
+    }
+    @include df-stepper-size(
+      $df-stepper-step-padding-y-sm,
+      $df-stepper-step-padding-x-sm,
+      $df-stepper-font-size-sm,
+      $df-stepper-icon-width-sm,
+      $df-stepper-icon-height-sm,
+      $df-stepper-icon-line-height-sm,
+      $df-stepper-icon-only-font-size-sm,
+      $df-stepper-outline-icon-only-font-size-sm
+    );
+  }
+
+  &.df-stepper-lg {
+    .df-stepper-step:not(.flex-row) ~ .df-stepper-line-wrapper {
+      .df-stepper-line {
+        padding-top: $df-stepper-step-padding-y-lg;
+      }
+    }
+    @include df-stepper-size(
+      $df-stepper-step-padding-y-lg,
+      $df-stepper-step-padding-x-lg,
+      $df-stepper-font-size-lg,
+      $df-stepper-icon-width-lg,
+      $df-stepper-icon-height-lg,
+      $df-stepper-icon-line-height-lg,
+      $df-stepper-icon-only-font-size-lg,
+      $df-stepper-outline-icon-only-font-size-lg
+    );
+  }
+}

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

@@ -0,0 +1,63 @@
+@use 'sass:map';
+
+$df-stepper-line-border-color: $border-width solid $gray-200 !default;
+$df-stepper-icon-border-radius: 50% !default;
+$df-stepper-icon-border-style: solid !default;
+$df-stepper-icon-color: $white !default;
+$df-stepper-icon-text-align: center !default;
+$df-stepper-icon-disabled-color: white !default;
+$df-stepper-icon-width: 28px !default;
+$df-stepper-icon-height: 28px !default;
+$df-stepper-icon-line-height: $df-stepper-icon-height !default;
+$df-stepper-number-line-height: $df-stepper-icon-height - $border-width !default;
+$df-stepper-number-font-size: $df-font-weight-semi-bold !default;
+$df-stepper-icon-disabled-color: $white !default;
+$df-stepper-icon-only-font-size: 1rem !default;
+$df-stepper-icon-only-font-size-sm: $df-stepper-icon-only-font-size * map.get($df-size-ratios, 'sm') !default;
+$df-stepper-icon-only-font-size-lg: $df-stepper-icon-only-font-size * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-icon-only-border-radius: 50% !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;
+$df-stepper-outline-icon-only-font-size-lg: $df-stepper-outline-icon-only-font-size * map.get($df-size-ratios, 'lg') !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-sm: $df-stepper-icon-height-sm !default;
+$df-stepper-icon-width-lg: $df-stepper-icon-width * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-icon-height-lg: $df-stepper-icon-height * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-icon-line-height-lg: $df-stepper-icon-height-lg - $border-width !default;
+$df-stepper-icon-padding: 0 !default;
+$df-stepper-outline-bg-color: transparent !default;
+$df-stepper-disabled-color: $df-disabled-color !default;
+$df-stepper-icon-outline-disabled-color: $df-stepper-disabled-color !default;
+$df-stepper-icon-disabled-bg-color: $df-stepper-disabled-color !default;
+$df-stepper-icon-disabled-border-color: $df-stepper-icon-disabled-bg-color !default;
+$df-stepper-icon-outline-disabled-bg-color: $white !default;
+$df-stepper-icon-outline-disabled-border-color: $df-stepper-disabled-color !default;
+$df-stepper-step-min-width: 5.625rem !default;
+$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-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-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-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-disabled-opacity: $btn-disabled-opacity !default;
+// Attention stepper may not work in modal or other element with a zindex higher.
+$df-stepper-line-zindex: 1 !default;
+$df-stepper-font-size: $font-size-base !default;
+$df-stepper-font-size-sm: $font-size-sm !default;
+$df-stepper-font-size-lg: $font-size-lg !default;
+$df-stepper-text-decoration: none !default;
+$df-stepper-text-decoration-hover: $df-stepper-text-decoration !default;
+$df-stepper-text-decoration-focus: $df-stepper-text-decoration !default;
+$df-stepper-text-decoration-active: $df-stepper-text-decoration !default;
+$df-stepper-optional-label-color: $body-color !default;
+$df-stepper-optional-label-font-size: 0.75rem !default;
+$df-stepper-optional-label-font-weight: $font-weight-base !default;
+$df-stepper-div-step-border: 1px solid transparent !default; // same as btn-link

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

@@ -0,0 +1,229 @@
+@use 'ag-grid-community/styles' as ag;
+
+// TODO check new checkbox look and border radius
+@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
+    )
+  );
+
+// See issue https://github.com/ag-grid/ag-grid/issues/4095
+.df-table:not(.df-aggrid-filtered) {
+  .ag-layout-auto-height .ag-center-cols-clipper,
+  .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;
+  }
+}
+
+.df-table.df-aggrid-filtered {
+  .ag-layout-auto-height .ag-center-cols-clipper,
+  .ag-layout-auto-height .ag-center-cols-container,
+  .ag-layout-print .ag-center-cols-clipper,
+  .ag-layout-print .ag-center-cols-container {
+    min-height: 100px !important;
+  }
+}
+
+.ag-overlay-loading-center {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.df-table-icon {
+  @extend %df-icon-style;
+  font-weight: $df-icon-solid-font-weight;
+}
+
+.df-table.ag-theme-alpine {
+  --#{$prefix}ag-odd-row-hover-background-color: var(--ag-row-hover-color);
+  --ag-odd-row-background-color: var(--ag-background-color);
+
+  .ag-row {
+    &.ag-row-odd {
+      --ag-row-hover-color: var(--#{$prefix}ag-odd-row-hover-background-color);
+    }
+  }
+
+  &.df-table-striped-odd {
+    --#{$prefix}ag-odd-row-hover-background-color: #{$df-tables-aggrid-striped-row-color-hover};
+    --ag-odd-row-background-color: #{$df-tables-aggrid-striped-row-color};
+  }
+
+  &.df-table-striped-even {
+    .ag-row-even {
+      --ag-row-hover-color: #{$df-tables-aggrid-striped-row-color-hover};
+      --ag-background-color: #{$df-tables-aggrid-striped-row-color};
+    }
+  }
+
+  &.df-table-white-header {
+    --ag-header-background-color: #{$df-tables-aggrid-white-header};
+
+    .ag-header {
+      --ag-header-cell-hover-background-color: var(--ag-row-hover-color);
+      &:hover {
+        background-color: var(--ag-row-hover-color);
+      }
+    }
+  }
+
+  .ag-icon.ag-icon-asc {
+    @extend .df-table-icon;
+    @extend .icon-sort-up;
+  }
+
+  .ag-root-wrapper {
+    border-inline: $df-tables-aggrid-border-inline;
+  }
+
+  .ag-icon.ag-icon-desc {
+    @extend .df-table-icon;
+    @extend .icon-sort-down;
+  }
+
+  .ag-icon.ag-icon-menu {
+    @extend .df-table-icon;
+    @extend .icon-filter;
+  }
+
+  .ag-icon.ag-icon-none {
+    @extend .df-table-icon;
+    @extend .icon-sort;
+    &:before {
+      color: $df-tables-aggrid-icon-color;
+    }
+  }
+
+  .ag-icon.ag-icon-filter {
+    @extend .df-table-icon;
+    @extend .icon-filter;
+    &:before {
+      color: $df-tables-aggrid-icon-color;
+    }
+  }
+
+  .ag-input-field-input.ag-text-field-input {
+    @extend .form-control;
+    @extend .form-control-sm;
+    @extend .ms-1;
+    @extend .mt-3;
+    @extend .mb-3;
+    @extend .me-1;
+  }
+
+  .ag-row-last {
+    border-bottom: $df-tables-aggrid-border-bottom-last-row;
+  }
+
+  .ag-header-row {
+    font-weight: $df-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;
+  }
+
+  .ag-header-cell.ag-header-cell-sortable, .ag-header-cell.ag-floating-filter {
+    padding-right: $df-tables-aggrid-sortable-header-padding-right;
+  }
+
+  .ag-header-cell-label {
+    justify-content: $df-tables-aggrid-cell-label-justify-content;
+  }
+
+  .ag-header-icon, .ag-sort-indicator-icon {
+    // todo RTL elements
+    margin-right: $df-tables-aggrid-font-size;
+  }
+
+  .ag-header-row.ag-header-row-floating-filter {
+    .ag-column-hover {
+      background-color: $white;
+    }
+    .ag-header-cell:hover {
+      background-color: $white;
+    }
+  }
+
+  .df-tables-aggrid-overlay-withfilter {
+    background-color: $df-tables-aggrid-overlay-bg-color;
+    padding-top: $df-tables-aggrid-overlay-padding-top;
+  }
+
+  .ag-floating-filter-body {
+    align-items: $df-tables-aggrid-floating-filter-align-items;
+  }
+
+  // custom checkbox to have the same look as the DF one.
+  .ag-checkbox-input-wrapper:focus-within,
+  .ag-checkbox-input-wrapper:active {
+    box-shadow: $df-focused-box-shadow;
+  }
+
+  .ag-checkbox-input, .ag-cell {
+    cursor: $df-cursor-type;
+  }
+
+  .ag-checkbox-input-wrapper {
+    cursor: $df-cursor-type;
+    width: $form-check-input-width;
+    height: $form-check-input-width;
+    background-color: $form-check-input-bg;
+    &::after {
+      @include border-radius($form-check-input-border-radius);
+      content: "";
+      width: $form-check-input-width;
+      height: $form-check-input-width;
+      vertical-align: top;
+      background-color: $form-check-input-bg;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      border: $form-check-input-border;
+      appearance: none;
+    }
+    &.ag-indeterminate {
+      &::after {
+        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);
+        } @else {
+          background-image: escape-svg($form-check-input-indeterminate-bg-image);
+        }
+      }
+    }
+    &.ag-checked {
+      &::after { // copy element from the _form-check.scss
+        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);
+        } @else {
+          background-image: escape-svg($form-check-input-checked-bg-image);
+        }
+      }
+    }
+  }
+}
+
+.df-pagination-secondary-elements {
+  font-size: $df-tables-aggrid-pagination-secondary-elements-font-size;
+}

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

@@ -0,0 +1,7 @@
+.table {
+  > caption:first-child {
+    & + thead, & + tbody {
+      border-top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+@use 'sass:map';
+
+$df-tables-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;
+$df-tables-aggrid-header-font-weight: $df-font-weight-semi-bold !default;
+$df-tables-aggrid-font-size: $font-size-base !default;
+$df-tables-aggrid-header-height: 42px !default;
+$df-tables-aggrid-row-height: 44px !default;
+$df-tables-aggrid-cell-padding-left: 1rem !default;
+$df-tables-aggrid-cell-padding-right: 1rem !default;
+$df-tables-aggrid-overlay-bg-color: transparent !default;
+$df-tables-aggrid-overlay-padding-top: 2rem !default;
+$df-tables-aggrid-sortable-header-padding-right: 0px !default;
+$df-tables-aggrid-pagination-secondary-elements-font-size: $font-size-base * map.get($df-size-ratios, 'sm') !default; // 14px normal case
+$df-tables-aggrid-border-inline: none !default;
+$df-tables-aggrid-border-bottom-last-row: none !default;
+$df-tables-aggrid-striped-row-color: $table-striped-bg !default; // Bootstrap Variable
+$df-tables-aggrid-striped-row-color-hover: #e6e6e6 !default; 
+$df-tables-aggrid-white-header: #fff !default;
+$df-tables-aggrid-background-color: #fff !default;
+