@design-factory/design-factory 15.2.2 → 16.0.0

package/styles/scss/components/accordion/_accordion.scss

@@ -1,18 +1,35 @@
 .accordion {
+  --#{$prefix}accordion-button-hover-bg: #{$df-accordion-button-hover-bg};
+  --#{$prefix}accordion-button-reverse-margin-end: #{$df-accordion-button-reverse-margin-end};
+  --#{$prefix}accordion-link-hover-color: #{$df-accordion-link-hover-color};
+  --#{$prefix}accordion-disabled-bg-color: #{$df-accordion-disabled-bg-color};
+  --#{$prefix}accordion-disabled-color: #{$df-accordion-disabled-color};
+  --#{$prefix}accordion-disabled-opacity: #{$df-accordion-disabled-opacity};
+  --#{$prefix}accordion-disabled-cursor: #{$df-accordion-disabled-cursor};
+  --#{$prefix}accordion-title-number-color: #{$df-accordion-title-number-color};
+  --#{$prefix}accordion-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-button-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-button-padding-x: #{$accordion-button-padding-x};
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: var(--#{$prefix}accordion-active-color);
+  }
+
   .accordion-button {
     &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
       &:hover {
-        background-color: $df-accordion-button-hover-bg;
-        color: $df-accordion-link-hover-color;
+        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}accordion-button-hover-bg);
+        --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+        background-color: var(--#{$prefix}accordion-button-hover-bg);
+        color: var(--#{$prefix}accordion-link-hover-color);
       }
     }
     &[aria-disabled='true'],
     &.disabled,
     &[disabled] {
-      color: $df-accordion-disabled-color;
-      background-color: $df-accordion-disabled-bg-color;
-      opacity: $df-accordion-disabled-opacity;
-      cursor: $df-accordion-disabled-cursor;
+      color: var(--#{$prefix}accordion-disabled-color);
+      background-color: var(--#{$prefix}accordion-disabled-bg-color);
+      opacity: var(--#{$prefix}accordion-disabled-opacity);
+      cursor: var(--#{$prefix}accordion-disabled-cursor);
     }
   }
 
@@ -24,18 +41,18 @@
       }
       &::before {
         flex-shrink: 0;
-        width: $accordion-icon-width;
-        height: $accordion-icon-width;
+        width: var(--#{$prefix}accordion-icon-width);
+        height: var(--#{$prefix}accordion-icon-width);
         @include ltr {
-          margin-right: $df-accordion-button-reverse-margin-end;
+          margin-right: var(--#{$prefix}accordion-button-reverse-margin-end);
         }
         @include rtl {
-          margin-left: $df-accordion-button-reverse-margin-end;
+          margin-left: var(--#{$prefix}accordion-button-reverse-margin-end);
         }
         content: "";
         background-image: escape-svg($accordion-button-icon);
         background-repeat: no-repeat;
-        background-size: $accordion-icon-width;
+        background-size: var(--#{$prefix}accordion-icon-width);
         @include transition($accordion-icon-transition);
       }
       &:not(.collapsed) {
@@ -57,10 +74,10 @@
   }
 
   @each $extension, $ratio in $df-size-ratios {
-    $icon-with: $ratio * $accordion-icon-width;
+    $icon-with: calc(#{$ratio} * var(--#{$prefix}accordion-icon-width));
     &.df-accordion-#{$extension} {
       .accordion-button {
-        padding: $ratio * $accordion-button-padding-y $ratio * $accordion-button-padding-x;
+        padding: calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-y)) calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-x));
         font-size: $ratio * $font-size-base;
 
         &::after {
@@ -82,6 +99,6 @@
   }
 
   .df-accordion-number {
-    color: $df-accordion-title-number-color;
+    color: var(--#{$prefix}accordion-title-number-color);
   }
 }

package/styles/scss/components/accordion/_accordion.variables.scss

@@ -1,8 +1,8 @@
-$df-accordion-button-hover-bg: $df-disabled-bg-color !default;
+$df-accordion-button-hover-bg: $df-hover-bg-color !default;
 $df-accordion-button-reverse-margin-end: 0.5rem !default;
 $df-accordion-link-hover-color: $body-color !default;
-$df-accordion-disabled-bg-color: $df-disabled-bg-color !default;
-$df-accordion-disabled-color: $df-disabled-color !default;
-$df-accordion-disabled-opacity: $df-disabled-opacity !default;
-$df-accordion-disabled-cursor: $df-disabled-cursor !default;
+$df-accordion-disabled-bg-color: var(--#{$prefix}disabled-bg-color) !default;
+$df-accordion-disabled-color: var(--#{$prefix}disabled-color) !default;
+$df-accordion-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
+$df-accordion-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-accordion-title-number-color: $gray-600 !default;

package/styles/scss/components/alert/_alert.scss

@@ -1,301 +1,203 @@
-@use 'sass:map';
-
 .alert {
-  color: $df-alert-global-color;
-  @include ltr {
-    &:not(.df-card-alert):not(.df-page-alert) {
-      border-left-width: $df-alert-size-default-border-left-width;
-    }
+  --#{$prefix}alert-color: #{$df-alert-global-color};
+  --#{$prefix}alert-border-start-width: #{$df-alert-size-default-border-start-width};
+  --#{$prefix}alert-icon-top: #{$df-alert-size-default-icon-top};
+  --#{$prefix}alert-icon-margin-start: #{$df-alert-size-default-icon-margin-start};
+  --#{$prefix}alert-icon-font-weight: #{$df-icon-solid-font-weight};
+  --#{$prefix}alert-icon-padding-start: #{$df-alert-size-default-insert-alert-icon};
+  --#{$prefix}alert-btn-close-padding-y: calc(#{$df-alert-close-icon-ratio} * var(--#{$prefix}alert-padding-y));
+
+  --#{$prefix}page-alert-top: var(--#{$prefix}navbar-height);
+  --#{$prefix}page-alert-width: #{$df-page-alert-width};
+  --#{$prefix}page-alert-border-width: #{$df-page-alert-border-width};
+  --#{$prefix}page-alert-border-highlight-color-alpha: #{$df-page-alert-border-highlight-color-alpha};
+  --#{$prefix}page-alert-position-start: #{$df-page-alert-position-start};
+  --#{$prefix}page-alert-zindex: #{$df-page-alert-zindex};
+
+  --#{$prefix}card-alert-border-width: #{$df-card-alert-border-width};
+  --#{$prefix}card-alert-border-radius: #{$df-card-alert-border-radius};
+
+  --#{$prefix}alert-collapse-display: #{$df-alert-collapse-display};
+  --#{$prefix}alert-collapse-justify-content: #{$df-alert-collapse-justify-content};
+  --#{$prefix}alert-collapse-link-hover-bg: #{$df-alert-collapse-link-hover-bg};
+
+  --#{$prefix}alert-collapse-icon-margin-start: #{$df-alert-collapse-icon-margin-start};
+
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg-color);
+  border-color: var(--#{$prefix}alert-border-color); // to allow tip border-color
+  font-size: var(--#{$prefix}alert-font-size);
+
+  .df-insert-icon {
+    color: var(--#{$prefix}alert-icon-color);
   }
-  @include rtl {
-    &:not(.df-card-alert):not(.df-page-alert) {
-      border-right-width: $df-alert-size-default-border-left-width;
+
+  &:not(.df-card-alert):not(.df-page-alert) {
+    @include ltr {
+        border-left-width: var(--#{$prefix}alert-border-start-width);
+        border-left-color: var(--#{$prefix}alert-border-start-color);
+    }
+    @include rtl {
+        border-right-width: var(--#{$prefix}alert-border-start-width);
+        border-right-color: var(--#{$prefix}alert-border-start-color);
     }
   }
 
+  // Alert collapsible
+  hr {
+    border-top-color: var(--#{$prefix}alert-border-color);
+  }
+
+  // Alert icon
   span.df-insert-icon {
     position: absolute;
-    top: $df-alert-size-default-icon-top;
-    font-weight: $df-icon-solid-font-weight;
+    top: var(--#{$prefix}alert-icon-top);
+    font-weight: var(--#{$prefix}alert-icon-font-weight);
     @include ltr {
-      margin-left: $df-alert-size-default-icon-margin-left;
+      margin-left: var(--#{$prefix}alert-icon-margin-start);
     }
     @include rtl {
-      margin-right: $df-alert-size-default-icon-margin-left;
+      margin-right: var(--#{$prefix}alert-icon-margin-start);
     }
   }
+  // Flag Angular SASS/CSS
+  // This will no longer be needed in AgnosUI
   &[dfInsertAlertIcon] {
     @include ltr {
-      padding-left: $df-alert-size-default-insert-alert-icon;
+      padding-left: var(--#{$prefix}alert-icon-padding-start);
     }
     @include rtl {
-      padding-right: $df-alert-size-default-insert-alert-icon;
+      padding-right: var(--#{$prefix}alert-icon-padding-start);
     }
-  }
-  &.alert-success {
-    background-color: $df-success-background;
-    border-color: $df-success-border-color;
-    &:not(.df-page-alert):not(.df-card-alert) {
+
+    .df-alert-collapsed-text {
       @include ltr {
-        border-left-color: $success;
+        margin-left: var(--#{$prefix}alert-icon-margin-start);
       }
       @include rtl {
-        border-right-color: $success;
+        margin-right: var(--#{$prefix}alert-icon-margin-start);
       }
     }
-    hr {
-      border-top-color: $df-success-border-color;
-    }
-    .df-insert-icon {
-      color: $success;
-    }
   }
-  &.alert-danger {
-    background-color: $df-danger-background;
-    border-color: $df-danger-border-color;
-    &:not(.df-page-alert):not(.df-card-alert) {
-      @include ltr {
-        border-left-color: $danger;
-      }
-      @include rtl {
-        border-right-color: $danger;
-      }
-    }
-    hr {
-      border-top-color: $df-danger-border-color;
-    }
-    .df-insert-icon {
-      color: $danger;
-    }
-  }
-  &.alert-warning {
-    background-color: $df-warning-background;
-    border-color: $df-warning-border-color;
-    &:not(.df-page-alert):not(.df-card-alert) {
-      @include ltr {
-        border-left-color: $warning;
-      }
-      @include rtl {
-        border-right-color: $warning;
-      }
-    }
-    hr {
-      border-top-color: $df-warning-border-color;
-    }
-    .df-insert-icon {
-      color: $warning;
-    }
+
+  // For alert dismissible
+  .btn-close {
+    padding-top: var(--#{$prefix}alert-btn-close-padding-y);
+    padding-bottom: var(--#{$prefix}alert-btn-close-padding-y);
   }
-  &.alert-info {
-    background-color: $df-info-background;
-    border-color: $df-info-border-color;
-    &:not(.df-page-alert):not(.df-card-alert) {
-      @include ltr {
-        border-left-color: $info;
-      }
-      @include rtl {
-        border-right-color: $info;
+
+  // Variants of the alerts
+  @each $state, $value in $theme-colors {
+    &.alert-#{$state} {
+      --#{$prefix}border-color-opacity: #{$df-alert-border-color-opacity};
+      --#{$prefix}alert-color: #{shades-css-var($state, 'bg-subtle-color', true)};
+      --#{$prefix}alert-bg-color: #{shades-css-var($state, 'bg-subtle-color')};
+      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}alert-border-color: #{shades-css-var($state, 'bg-subtle-color')};
+        hr {
+          border-top-color: shades-css-var($state, 'bg-subtle-active-color');
+        }
+      } @else {
+        --#{$prefix}alert-border-color: #{shades-rgba-css-var-with-opacity($state, 'border-color')};
       }
-    }
-    hr {
-      border-top-color: $df-info-border-color;
-    }
-    .df-insert-icon {
-      color: $info;
+      --#{$prefix}alert-border-start-color: #{shades-css-var($state, 'inert-color')};
+      --#{$prefix}alert-icon-color: #{shades-css-var($state, 'inert-color')};
     }
   }
   &.alert-tip {
-    border-color: $df-tip-border-color;
-    background-color: $df-tip-background;
-    &:not(.df-page-alert):not(.df-card-alert) {
-      @include ltr {
-        border-left-color: $df-tip-border-left-color;
-      }
-      @include rtl {
-        border-right-color: $df-tip-border-left-color;
-      }
-    }
-    hr {
-      border-top-color: $df-tip-border-color;
-    }
-    .df-insert-icon {
-      font-weight: $df-icon-light-font-weight;
-      @include ltr {
-        margin-left: $df-alert-tip-size-default-icon-margin-left;
-      }
-      @include rtl {
-        margin-right: $df-alert-tip-size-default-icon-margin-left;
-      }
-    }
-  }
-  &.alert-dismissible {
-    &:not(.df-alert-sm):not(.df-alert-lg) {
-      .btn-close {
-        $alert-btn-close-padding-x: $alert-padding-y * $df-alert-close-icon-ratio;
-        padding-top: $alert-btn-close-padding-x;
-        padding-bottom: $alert-btn-close-padding-x;
-      }
-    }
-    &.df-alert-sm {
-      .btn-close {
-        $alert-btn-close-padding-x: $alert-padding-y * $df-alert-close-icon-ratio * map.get($df-size-ratios, 'sm');
-        padding-top: $alert-btn-close-padding-x;
-        padding-bottom: $alert-btn-close-padding-x;
-      }
-    }
-    &.df-alert-lg {
-      .btn-close {
-        $alert-btn-close-padding-x: $alert-padding-y * $df-alert-close-icon-ratio * map.get($df-size-ratios, 'lg');
-        padding-top: $alert-btn-close-padding-x;
-        padding-bottom: $alert-btn-close-padding-x;
+    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      hr {
+        border-top-color: shades-css-var('purple', 'bg-subtle-active-color');
       }
     }
+    --#{$prefix}alert-color: #{$df-alert-tip-color};
+    --#{$prefix}alert-bg-color: #{$df-alert-tip-background};
+    --#{$prefix}alert-border-color: #{$df-alert-tip-border-color};
+    --#{$prefix}alert-border-start-color: #{$df-alert-tip-border-start-color};
+    --#{$prefix}alert-icon-font-weight: #{$df-icon-light-font-weight};
+    --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-default-icon-margin-start};
+    --#{$prefix}alert-icon-color: #{$df-alert-tip-icon-color};
   }
 
+  // Alerts sizes
   &.df-alert-sm {
-    &[dfInsertAlertIcon] {
-      padding-left: $df-alert-size-sm-insert-alert-icon;
-    }
-    font-size: $df-alert-size-sm-font-size;
-    padding: $df-alert-size-sm-padding-top $df-alert-size-sm-padding-right $df-alert-size-sm-padding-top
-      $df-alert-size-sm-padding-left;
+    --#{$prefix}alert-icon-top: #{$df-alert-size-sm-icon-top};
+    --#{$prefix}alert-icon-margin-start: #{$df-alert-size-sm-icon-margin-start};
+    --#{$prefix}alert-icon-padding-start: #{$df-alert-size-sm-insert-alert-icon};
+    --#{$prefix}alert-font-size: #{$df-alert-size-sm-font-size};
+    --#{$prefix}alert-padding-y: #{$df-alert-size-sm-padding-y}; // override bootstrap
+    --#{$prefix}alert-padding-x: #{$df-alert-size-sm-padding-x}; // override bootstrap
+    --#{$prefix}alert-btn-close-padding-y: calc(#{$df-alert-close-icon-ratio} * var(--#{$prefix}alert-padding-y));
 
-    span.df-insert-icon {
-      top: $df-alert-size-sm-icon-top;
-      @include ltr {
-        margin-left: $df-alert-size-sm-icon-margin-left;
-      }
-      @include rtl {
-        margin-right: $df-alert-size-sm-icon-margin-left;
-      }
-    }
     &.alert-tip {
-      .df-insert-icon {
-        @include ltr {
-          margin-left: $df-alert-tip-size-sm-icon-margin-left;
-        }
-        @include rtl {
-          margin-right: $df-alert-tip-size-sm-icon-margin-left;
-        }
-      }
+      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-sm-icon-margin-start};
     }
   }
   &.df-alert-lg {
-    &[dfInsertAlertIcon] {
-      padding-left: $df-alert-size-lg-insert-alert-icon;
-    }
-    font-size: $df-alert-size-lg-font-size;
-    padding: $df-alert-size-lg-padding-top $df-alert-size-lg-padding-right $df-alert-size-lg-padding-bottom
-      $df-alert-size-lg-padding-left;
+    --#{$prefix}alert-icon-top: #{$df-alert-size-lg-icon-top};
+    --#{$prefix}alert-icon-margin-start: #{$df-alert-size-lg-icon-margin-start};
+    --#{$prefix}alert-icon-padding-start: #{$df-alert-size-lg-insert-alert-icon};
+    --#{$prefix}alert-font-size: #{$df-alert-size-lg-font-size};
+    --#{$prefix}alert-padding-y: #{$df-alert-size-lg-padding-y}; // override bootstrap
+    --#{$prefix}alert-padding-x: #{$df-alert-size-lg-padding-x}; // override bootstrap
+    --#{$prefix}alert-btn-close-padding-y: calc(#{$df-alert-close-icon-ratio} * var(--#{$prefix}alert-padding-y));
 
-    span.df-insert-icon {
-      top: $df-alert-size-lg-icon-top;
-      @include ltr {
-        margin-left: $df-alert-size-lg-icon-margin-left;
-      }
-      @include rtl {
-        margin-right: $df-alert-size-lg-icon-margin-left;
-      }
-    }
     &.alert-tip {
-      .df-insert-icon {
-        @include ltr {
-          margin-left: $df-alert-tip-size-lg-icon-margin-left;
-        }
-        @include rtl {
-          margin-right: $df-alert-tip-size-lg-icon-margin-left;
-        }
-      }
+      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-lg-icon-margin-start};
     }
   }
 
-  // for page alerts
+  // For page alerts
   &.df-page-alert {
+    --#{$prefix}alert-padding-x: #{$df-page-alert-padding-start};
+    --#{$prefix}alert-icon-padding-start: #{$df-page-alert-padding-start};
     position: fixed;
-    top: $df-navbar-height;
-    width: $df-page-alert-width;
-    z-index: $df-page-alert-zindex;
-    border-width: $df-page-alert-border-width;
-
-    &.df-superheader {
-      top: $df-navbar-superheader-height;
-    }
+    top: var(--#{$prefix}page-alert-top);
+    width: var(--#{$prefix}page-alert-width);
+    z-index: var(--#{$prefix}page-alert-zindex);
+    border-width: var(--#{$prefix}page-alert-border-width);
 
     @include ltr {
-      padding-left: $df-page-alert-padding-left;
-      left: $df-page-alert-start-distance;
+      left: var(--#{$prefix}page-alert-position-start);
     }
     @include rtl {
-      padding-right: $df-page-alert-padding-left;
-      right: $df-page-alert-start-distance;
-    }
-
-    &.df-alert-sm {
-      @include ltr {
-        padding-left: $df-page-alert-padding-left;
-      }
-      @include rtl {
-        padding-right: $df-page-alert-padding-left;
-      }
-    }
-    &.df-alert-lg {
-      @include ltr {
-        padding-left: $df-page-alert-padding-left;
-      }
-      @include rtl {
-        padding-right: $df-page-alert-padding-left;
-      }
+      right: var(--#{$prefix}page-alert-position-start);
     }
   }
 
-  // for card alerts
+  // For card alerts
   &.df-card-alert {
-    border-width: $df-card-alert-border-width;
-    border-radius: $df-card-alert-border-radius;
+    border-width: var(--#{$prefix}card-alert-border-width);
+    border-radius: var(--#{$prefix}card-alert-border-radius);
   }
 
   &.df-page-alert,
   &.df-card-alert {
-    &.alert-success {
-      border-bottom-color: $success;
-    }
-    &.alert-danger {
-      border-bottom-color: $danger;
-    }
-    &.alert-warning {
-      border-bottom-color: $warning;
-    }
-    &.alert-info {
-      border-bottom-color: $info;
+    border-bottom-color: var(--#{$prefix}alert-border-bottom-color);
+    @each $state, $value in $theme-colors {
+      &.alert-#{$state} {
+        --#{$prefix}alert-border-bottom-color: #{shades-css-var($state, 'border-color')};
+      }
     }
     &.alert-tip {
-      border-bottom-color: $df-tip-border-left-color;
+      --#{$prefix}alert-border-bottom-color: #{$df-alert-tip-border-start-color};
     }
   }
 
-  // for collapsible alerts
+  // For collapsible alerts content
   .df-alert-collapse-main-text {
-    display: $df-alert-collapse-display;
-    justify-content: $df-alert-collapse-justify-content;
+    display: var(--#{$prefix}alert-collapse-display);
+    justify-content: var(--#{$prefix}alert-collapse-justify-content);
     a.df-collapse.df-alert-collapse-icon {
       @include ltr {
-        margin-left: $df-alert-collapse-size-default-icon-margin;
+        margin-left: var(--#{$prefix}alert-collapse-icon-margin-start); // same for all size ?
       }
       @include rtl {
-        margin-right: $df-alert-collapse-size-default-icon-margin;
+        margin-right: var(--#{$prefix}alert-collapse-icon-margin-start);
       }
       &:hover:not([aria-disabled='true']) {
-        background-color: $df-alert-collapse-link-hover-bg;
+        background-color: var(--#{$prefix}alert-collapse-link-hover-bg);
       }
     }
   }
-
-  .df-alert-collapsed-text {
-    @include ltr {
-      margin-left: $df-alert-size-default-icon-margin-left;
-    }
-    @include rtl {
-      margin-left: $df-alert-size-default-icon-margin-left;
-    }
-  }
 }

package/styles/scss/components/alert/_alert.variables.scss

@@ -1,25 +1,20 @@
 @use 'sass:map';
 
 // mix($color, $white, x%) is equivalent to transparentize($color, x%) but it makes the color opaque
-$df-alert-global-color: $gray-900 !default;
-$df-success-background: df-getBGColor('success') !default;
-$df-success-border-color: rgba($success, 0.4) !default;
-$df-danger-background: df-getBGColor('danger') !default;
-$df-danger-border-color: rgba($danger, 0.4) !default;
-$df-warning-background: df-getBGColor('warning') !default;
-$df-warning-border-color: rgba($warning, 0.4) !default;
-$df-info-background: df-getBGColor('info') !default;
-$df-info-border-color: rgba($info, 0.4) !default;
-$df-tip-background: $white !default;
-$df-tip-border-color: $gray-400 !default;
-$df-tip-border-left-color: $gray-700 !default;
+$df-alert-global-color: var(--#{$prefix}gray-900) !default;
+// TODO should we create a new mapping for tip ? (like a white mapping) or maybe reuse a light mapping ?
+$df-alert-tip-background: var(--#{$prefix}white) !default;
+$df-alert-tip-color: $df-alert-global-color !default;
+$df-alert-tip-border-color: var(--#{$prefix}gray-400) !default;
+$df-alert-tip-border-start-color: var(--#{$prefix}gray-700) !default; // should we link to the CSS var gray-700 ?
+$df-alert-tip-icon-color: var(--#{$prefix}alert-color) !default;
 
 // For page alert
 $df-page-alert-zindex: $zindex-fixed + 8 !default; // on top of all fixed elements but below modal and navbar
 $df-page-alert-width: 100% !default;
-$df-page-alert-padding-left: 12% !default;
+$df-page-alert-padding-start: 12% !default;
 $df-page-alert-border-width: 0px 0px 2 * $border-width 0px !default;
-$df-page-alert-start-distance: 0px !default;
+$df-page-alert-position-start: 0px !default;
 $df-page-alert-border-highlight-color-alpha: 1 !default;
 
 // For collapsible alert
@@ -30,41 +25,35 @@ $df-alert-collapse-link-hover-bg: inherit !default;
 // For card alert
 $df-card-alert-border-width: $df-page-alert-border-width !default;
 $df-card-alert-border-radius: 0 !default;
-$df-card-alert-border-highlight-color-alpha: $df-page-alert-border-highlight-color-alpha !default;
 
 // Alert
 $df-alert-icon-font-weight: $df-icon-solid-font-weight !default;
 $df-alert-close-icon-ratio: 1.5 !default;
+$df-alert-border-color-opacity: 0.4 !default;
 
 // Size default
 $df-alert-size-default-insert-alert-icon: 2.5rem !default;
 $df-alert-size-default-font-size: 1rem !default;
-$df-alert-size-default-border-left-width: 3px !default;
+$df-alert-size-default-border-start-width: 3px !default;
 $df-alert-size-default-icon-top: 0.9375rem !default;
-$df-alert-size-default-icon-margin-left: -1.558rem !default;
-$df-alert-tip-size-default-icon-margin-left: -1.40175rem !default;
-$df-alert-collapse-size-default-icon-margin: 1rem !default;
+$df-alert-size-default-icon-margin-start: -1.558rem !default;
+$df-alert-tip-size-default-icon-margin-start: -1.40175rem !default;
+$df-alert-collapse-icon-margin-start: 1rem !default;
 
 // Size sm
 $df-alert-size-sm-insert-alert-icon: $df-alert-size-default-insert-alert-icon * map.get($df-size-ratios, 'sm') !default;
 $df-alert-size-sm-font-size: $df-alert-size-default-font-size * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-padding-top: $alert-padding-y * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-padding-bottom: $df-alert-size-sm-padding-top !default;
-$df-alert-size-sm-padding-left: $alert-padding-x * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-padding-right: $df-alert-size-sm-padding-left !default;
+$df-alert-size-sm-padding-y: $alert-padding-y * map.get($df-size-ratios, 'sm') !default;
+$df-alert-size-sm-padding-x: $alert-padding-x * map.get($df-size-ratios, 'sm') !default;
 $df-alert-size-sm-icon-top: $df-alert-size-default-icon-top * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-icon-margin-left: $df-alert-size-default-icon-margin-left * map.get($df-size-ratios, 'sm') !default;
-$df-alert-tip-size-sm-icon-margin-left: $df-alert-tip-size-default-icon-margin-left * map.get($df-size-ratios, 'sm') !default;
-$df-alert-collapse-size-sm-icon-margin : $df-alert-collapse-size-default-icon-margin * map.get($df-size-ratios, 'sm') !default;
+$df-alert-size-sm-icon-margin-start: $df-alert-size-default-icon-margin-start * map.get($df-size-ratios, 'sm') !default;
+$df-alert-tip-size-sm-icon-margin-start: $df-alert-tip-size-default-icon-margin-start * map.get($df-size-ratios, 'sm') !default;
 
 // Size lg
 $df-alert-size-lg-insert-alert-icon: $df-alert-size-default-insert-alert-icon * map.get($df-size-ratios, 'lg') !default;
 $df-alert-size-lg-font-size: $df-alert-size-default-font-size * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-padding-top: $alert-padding-y * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-padding-bottom: $df-alert-size-lg-padding-top !default;
-$df-alert-size-lg-padding-left: $alert-padding-x * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-padding-right: $df-alert-size-lg-padding-left !default;
+$df-alert-size-lg-padding-y: $alert-padding-y * map.get($df-size-ratios, 'lg') !default;
+$df-alert-size-lg-padding-x: $alert-padding-x * map.get($df-size-ratios, 'lg') !default;
 $df-alert-size-lg-icon-top: $df-alert-size-default-icon-top * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-icon-margin-left: $df-alert-size-default-icon-margin-left * map.get($df-size-ratios, 'lg') !default;
-$df-alert-tip-size-lg-icon-margin-left: $df-alert-tip-size-default-icon-margin-left * map.get($df-size-ratios, 'lg') !default;
-$df-alert-collapse-size-lg-icon-margin : $df-alert-collapse-size-default-icon-margin * map.get($df-size-ratios, 'lg') !default;
+$df-alert-size-lg-icon-margin-start: $df-alert-size-default-icon-margin-start * map.get($df-size-ratios, 'lg') !default;
+$df-alert-tip-size-lg-icon-margin-start: $df-alert-tip-size-default-icon-margin-start * map.get($df-size-ratios, 'lg') !default;