@design-factory/design-factory 15.2.2 → 16.0.0

package/styles/scss/components/link/_link.scss

@@ -9,6 +9,68 @@ ol:not([class]) {
 }
 
 a {
+  --#{$prefix}link-border-bottom-width: #{$df-link-border-bottom-width};
+  --#{$prefix}link-border-bottom: #{$df-link-border-bottom};
+  --#{$prefix}link-background: #{$df-link-background};
+  --#{$prefix}link-hover-border-bottom-width: #{$df-link-hover-border-bottom-width};
+  --#{$prefix}link-hover-background: #{$df-link-hover-background};
+  --#{$prefix}link-visited-color: #{$df-link-visited-color};
+  --#{$prefix}link-visited-border-bottom-width: #{$df-link-visited-border-bottom-width};
+  --#{$prefix}link-visited-hover-border-bottom-width: #{$df-link-visited-hover-border-bottom-width};
+  --#{$prefix}link-visited-hover-border-bottom-color: #{$df-link-visited-hover-border-bottom-color};
+  --#{$prefix}link-visited-border-bottom: #{$df-link-visited-border-bottom};
+  --#{$prefix}link-visited-hover-background: #{$df-link-visited-hover-background};
+  --#{$prefix}link-visited-hover-text-color: #{$df-link-visited-hover-text-color};
+  --#{$prefix}link-focus-outline: #{$df-link-focus-outline};
+  --#{$prefix}link-focus-outline-offset: #{$df-link-focus-outline-offset};
+  --#{$prefix}link-focus-box-shadow: #{$df-link-focus-box-shadow};
+  --#{$prefix}link-disabled-color: #{$df-link-disabled-color};
+  --#{$prefix}link-disabled-display: #{$df-link-disabled-display};
+  --#{$prefix}link-disabled-cursor: #{$df-link-disabled-cursor};
+  --#{$prefix}link-disabled-text-decoration: #{$df-link-disabled-text-decoration};
+  --#{$prefix}link-disabled-border-bottom-width: #{$df-link-disabled-border-bottom-width};
+  --#{$prefix}link-disabled-border-bottom-color: #{$df-link-disabled-border-bottom-color};
+  --#{$prefix}link-disabled-background: #{$df-link-disabled-background};
+  --#{$prefix}link-active-color: #{$df-link-active-color};
+  --#{$prefix}link-active-border-bottom-width: #{$df-link-active-border-bottom-width};
+  --#{$prefix}link-active-background: #{$df-link-active-background};
+  --#{$prefix}link-external-icon-bottom: #{$df-link-external-icon-bottom};
+  --#{$prefix}link-external-icon-size: #{$df-link-external-icon-size};
+  --#{$prefix}link-external-font-family: #{$df-link-external-font-family};
+  --#{$prefix}link-more-text-transform: #{$df-link-more-text-transform};
+  --#{$prefix}link-more-text-decoration-underline: #{$df-link-more-text-decoration-underline};
+  --#{$prefix}link-more-icon-margin-left: #{$df-link-more-icon-margin-left};
+  --#{$prefix}link-more-icon-top: #{$df-link-more-icon-top};
+  --#{$prefix}link-icononly-height: #{$df-link-icononly-height};
+  --#{$prefix}link-icononly-height-sm: #{$df-link-icononly-height-sm};
+  --#{$prefix}link-icononly-height-lg: #{$df-link-icononly-height-lg};
+  --#{$prefix}link-icononly-display: #{$df-link-icononly-display};
+  --#{$prefix}link-icononly-align: #{$df-link-icononly-align};
+  --#{$prefix}link-icononly-justify-content: #{$df-link-icononly-justify-content};
+  --#{$prefix}link-icononly-text-align: #{$df-link-icononly-text-align};
+  --#{$prefix}link-icononly-color: #{$df-link-icononly-color};
+  --#{$prefix}link-icononly-decoration: #{$df-link-icononly-decoration};
+  --#{$prefix}link-icononly-border-radius: #{$df-link-icononly-border-radius};
+  --#{$prefix}link-icononly-hover-bg-color: #{$df-link-icononly-hover-bg-color};
+  --#{$prefix}link-focus-box-shadow: #{$df-link-focus-box-shadow};
+  --#{$prefix}link-focus-outline: #{$df-link-focus-outline};
+
+  &:focus {
+    box-shadow: var(--#{$prefix}link-focus-box-shadow);
+    outline: var(--#{$prefix}link-focus-outline);
+  }
+
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    &:not(.df-link-icononly) {
+      &:hover {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}link-hover-color);
+      }
+      &:active, &.active {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}link-active-color);
+      }
+    } 
+  }
+
   &[href*='//'], &[href*='mailto'], &.df-link-external {
     .icon-external-link {
       display: none;
@@ -49,40 +111,40 @@ a {
 }
 
 .df-link-icononly-common {
-  border-radius: $df-link-icononly-border-radius;
-  text-align: $df-link-icononly-text-align;
-  display: $df-link-icononly-display;
-  color: $df-link-icononly-color;
-  text-decoration: $df-link-icononly-decoration;
-  align-items: $df-link-icononly-align;
-  justify-content: $df-link-icononly-justify-content;
+  border-radius: var(--#{$prefix}link-icononly-border-radius);
+  text-align: var(--#{$prefix}link-icononly-text-align);
+  display: var(--#{$prefix}link-icononly-display);
+  color: var(--#{$prefix}link-icononly-color);
+  text-decoration: var(--#{$prefix}link-icononly-decoration);
+  align-items: var(--#{$prefix}link-icononly-align);
+  justify-content: var(--#{$prefix}link-icononly-justify-content);
   &:hover {
-    color: $df-link-icononly-color;
-    background-color: $df-link-icononly-hover-bg-color;
-    text-decoration: $df-link-icononly-decoration;
+    color: var(--#{$prefix}link-icononly-color);
+    background-color: var(--#{$prefix}link-icononly-hover-bg-color);
+    text-decoration: var(--#{$prefix}link-icononly-decoration);
   }
   &:focus {
-    box-shadow: $df-focused-box-shadow;
-    outline: $df-link-focus-outline;
+    box-shadow: var(--#{$prefix}link-focus-box-shadow);
+    outline: var(--#{$prefix}link-focus-outline);
   }
 }
 
 .df-link-icononly {
   @extend .df-link-icononly-common;
-  line-height: $df-link-icononly-height;
-  height: $df-link-icononly-height;
-  width: $df-link-icononly-height;
+  line-height: var(--#{$prefix}link-icononly-height);
+  height: var(--#{$prefix}link-icononly-height);
+  width: var(--#{$prefix}link-icononly-height);
   &-sm {
     @extend .df-link-icononly-common;
-    line-height: $df-link-icononly-height-sm;
-    height: $df-link-icononly-height-sm;
-    width: $df-link-icononly-height-sm;
+    line-height: var(--#{$prefix}link-icononly-height-sm);
+    height: var(--#{$prefix}link-icononly-height-sm);
+    width: var(--#{$prefix}link-icononly-height-sm);
   }
 
   &-lg {
     @extend .df-link-icononly-common;
-    line-height: $df-link-icononly-height-lg;
-    height: $df-link-icononly-height-lg;
-    width: $df-link-icononly-height-lg;
+    line-height: var(--#{$prefix}link-icononly-height-lg);
+    height: var(--#{$prefix}link-icononly-height-lg);
+    width: var(--#{$prefix}link-icononly-height-lg);
   }
-}
+}

package/styles/scss/components/link/_link.variables.scss

@@ -1,7 +1,5 @@
 $df-link-border-bottom-width: $border-width !default;
 $df-link-border-bottom: $df-link-border-bottom-width solid !default;
-$df-link-color: $primary !default;
-$df-link-hover-color: $df-link-color !default;
 $df-link-background: transparent !default;
 
 $df-link-hover-border-bottom-width: $df-link-border-bottom-width * 2 !default;
@@ -12,20 +10,22 @@ $df-link-visited-border-bottom-width: $df-link-border-bottom-width !default;
 $df-link-visited-hover-border-bottom-width: $df-link-hover-border-bottom-width !default;
 $df-link-visited-border-bottom: $df-link-visited-border-bottom-width solid $df-link-visited-color !default;
 $df-link-visited-hover-background: df-getBGSecondaryHoverColor('mystery') !default;
+$df-link-visited-hover-text-color: $df-link-visited-color !default;
+$df-link-visited-hover-border-bottom-color: $df-link-visited-hover-text-color !default;
 
 $df-link-focus-outline: 0 !default;
 $df-link-focus-outline-offset: 0 !default;
 $df-link-focus-box-shadow: $btn-focus-box-shadow !default;
 
-$df-link-disabled-color: $df-disabled-color !default;
+$df-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-link-disabled-display: inline-block !default;
-$df-link-disabled-cursor: $df-disabled-cursor !default;
+$df-link-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-link-disabled-text-decoration: none !default;
 $df-link-disabled-border-bottom-width: $df-link-border-bottom-width !default;
 $df-link-disabled-border-bottom-color: $df-btn-disabled-border-color !default;
 $df-link-disabled-background: transparent !default;
 
-$df-link-active-color: df-getBGActiveColor('primary') !default;
+$df-link-active-color: shades-css-var('primary', 'text-active-color') !default;
 $df-link-active-border-bottom-width: $df-link-border-bottom-width * 2 !default;
 $df-link-active-background: transparent !default;
 
@@ -50,6 +50,6 @@ $df-link-icononly-text-align: center !default;
 $df-link-icononly-color: $gray-600 !default;
 $df-link-icononly-decoration: none !default;
 $df-link-icononly-border-radius: 50% !default;
-$df-link-icononly-hover-bg-color: df-getBGSecondaryHoverColor('secondary') !default;
+$df-link-icononly-hover-bg-color: shades-css-var('secondary', 'bg-subtle-hover-color') !default;
 $df-link-focus-box-shadow: $df-focused-box-shadow !default;
 $df-link-focus-outline: none !default;

package/styles/scss/components/list/_list.scss

@@ -1,15 +1,20 @@
-ol:not(.carousel-indicators) {
+ol {
+  --#{$prefix}ol-padding-left: #{$df-ol-padding-left};
+  --#{$prefix}ol-marker-font-weight: #{$df-ol-marker-font-weight};
+  --#{$prefix}ol-marker-left: #{$df-ol-marker-left};
+  --#{$prefix}ol-marker-list-style-type: none;
+
   counter-reset: df-ol-counter;
-  list-style-type: none;
-  padding-left: $df-ol-padding-left;
+  list-style-type: var(--#{$prefix}ol-marker-list-style-type);
+  padding-left: var(--#{$prefix}ol-padding-left);
   li {
     counter-increment: df-ol-counter;
     position: relative;
     &:before {
       content: $df-ol-marker-content;
-      font-weight: $df-ol-marker-font-weight;
+      font-weight: var(--#{$prefix}ol-marker-font-weight);
       position: absolute;
-      left: $df-ol-marker-left;
+      left: var(--#{$prefix}ol-marker-left);
     }
   }
 }

package/styles/scss/components/list-group/_list-group.scss

@@ -1,61 +1,67 @@
-.list-group-item-action {
-  color: $df-listgroup-item-action-color;
-  // Hover state
-  &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
-    &:hover {
-      background-color: $df-listgroup-item-hover-color;
-    }
-    &:focus {
-      box-shadow: $df-focused-box-shadow;
-      outline: none; //disable default
-    }
-    &.active {
-      border-color: $df-listgroup-item-active-border-color; // override
-      @include ltr {
-        padding-left: $df-listgroup-item-padding-left;
-        border-left: $df-listgroup-item-border-left-active;
-      }
-      @include rtl {
-        padding-right: $df-listgroup-item-padding-left;
-        border-right: $df-listgroup-item-border-left-active;
-      }
-    }
-  }
-}
-
-.list-group-item-action + .list-group-item-action {
-  margin-top: $df-listgroup-item-action-margin-top;
-  border-width: $df-listgroup-item-border-width; // override
-}
-
 .list-group-item {
-  border-color: $df-listgroup-border-color;
+  --#{$prefix}list-group-disabled-cursor: #{$df-list-group-disabled-cursor};
+  --#{$prefix}list-group-item-active-border-color: #{$df-list-group-item-active-border-color};
+  --#{$prefix}list-group-item-border-left-active: #{$df-list-group-item-border-left-active};
+  --#{$prefix}list-group-item-padding-left: #{$df-list-group-item-padding-left};
+  
+  border-color: var(--#{$prefix}list-group-border-color);
   &[aria-disabled='true'],
   &.disabled,
   &[disabled] {
-    color: $df-listgroup-disabled-color;
-    background-color: $df-listgroup-disabled-bg-color;
-    opacity: $df-listgroup-disabled-opacity;
-    cursor: $df-listgroup-disabled-cursor;
-    pointer-events: auto; // override
+    color: var(--#{$prefix}list-group-disabled-color);
+    cursor: var(--#{$prefix}list-group-disabled-cursor);
+    pointer-events: auto;
   }
-}
 
-@each $extension, $ratio in $df-size-ratios {
-  .df-list-group-#{$extension} {
-    font-size: $font-size-base * $ratio;
-    .list-group-item {
-      padding-top: $list-group-item-padding-y * $ratio;
-      padding-bottom: $list-group-item-padding-y * $ratio;
+  &.list-group-item-action {
+    &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
+      &:focus {
+        box-shadow: $df-list-group-focus-box-shadow;
+        outline: none; //disable default
+      }
+      &.active {
+        &:hover {
+          background-color: var(--#{$prefix}list-group-action-hover-bg); // override
+        }
+        border-color: var(--#{$prefix}list-group-item-active-border-color); // override
+        background-color: var(--#{$prefix}list-group-action-active-bg);
+        @include ltr {
+          padding-left: var(--#{$prefix}list-group-item-padding-left);
+          border-left: var(--#{$prefix}list-group-item-border-left-active);
+        }
+        @include rtl {
+          padding-right: var(--#{$prefix}list-group-item-padding-left);
+          border-right: var(--#{$prefix}list-group-item-border-left-active);
+        }
+      }
+    }
+    &:focus {
+      box-shadow: $df-list-group-focus-box-shadow;
+      outline: none;
     }
   }
 }
 
-.list-group-flush .list-group-item {
-  &:first-child {
-    border-top: none;
+.list-group {
+  font-size: var(--#{$prefix}list-group-font-size);
+  @each $extension, $ratio in $df-size-ratios {
+    &.df-list-group-#{$extension} {
+      --#{$prefix}list-group-font-size: #{$font-size-base * $ratio};
+      --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y * $ratio};
+      .list-group-item {
+        padding-top: var(--#{$prefix}list-group-item-padding-y);
+        padding-bottom: var(--#{$prefix}list-group-item-padding-y);
+      }
+    }
   }
-  &:last-child {
-    border-bottom: none;
+  
+  &.list-group-flush .list-group-item {
+    &:first-child {
+      border-top: none;
+    }
+    &:last-child {
+      border-bottom: none;
+    }
   }
 }
+

package/styles/scss/components/list-group/_list-group.variables.scss

@@ -1,14 +1,6 @@
-$df-listgroup-border-color: $border-color !default;
-$df-listgroup-disabled-bg-color: $list-group-disabled-bg !default;
-$df-listgroup-disabled-color: $list-group-disabled-color !default;
-$df-listgroup-disabled-opacity: $df-disabled-opacity !default;
-$df-listgroup-disabled-cursor: $df-disabled-cursor !default;
-$df-listgroup-item-action-color: $gray-900 !default;
-$df-listgroup-item-border-width: $border-width !default;
-$df-listgroup-item-active-border-width: 0.1875rem !default; // same as sidenav
-$df-listgroup-item-active-color: $primary !default; // same as sidenav
-$df-listgroup-item-active-border-color: $gray-100 !default;
-$df-listgroup-item-hover-color: $df-hover-bg-color !default;
-$df-listgroup-item-border-left-active: $df-listgroup-item-active-border-width solid $df-listgroup-item-active-color !default;
-$df-listgroup-item-action-margin-top: -$df-listgroup-item-border-width !default;
-$df-listgroup-item-padding-left: calc(#{$list-group-item-padding-x} - #{$df-listgroup-item-active-border-width} + #{$df-listgroup-item-border-width}) !default;
+$df-list-group-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
+$df-list-group-item-active-border-width: 0.1875rem !default; // same as sidenav
+$df-list-group-item-active-border-color: $gray-100 !default;
+$df-list-group-item-border-left-active: $df-list-group-item-active-border-width solid var(--#{$prefix}list-group-active-color) !default; // todo check with Max if should be inert color ?
+$df-list-group-item-padding-left: calc(#{$list-group-item-padding-x} - #{$df-list-group-item-active-border-width} + #{$list-group-border-width}) !default;
+$df-list-group-focus-box-shadow: var(--#{$prefix}focused-box-shadow) !default;

package/styles/scss/components/media/_media.scss

@@ -1,42 +1,50 @@
 .df-media-button-interactive {
+  --#{$prefix}interactive-media-padding: #{$df-interactive-media-padding};
+  --#{$prefix}interactive-media-focused-background-color: #{$df-interactive-media-focused-background-color};
+  --#{$prefix}interactive-media-hover-background-color: #{$df-interactive-media-hover-background-color};
+  --#{$prefix}interactive-media-background-color: #{$df-interactive-media-background-color};
+  --#{$prefix}interactive-media-hover-focus-text-decoration: #{$df-interactive-media-hover-focus-text-decoration};
+  --#{$prefix}interactive-media-color: #{$df-interactive-media-color};
+
   @include ltr {
     text-align: left;
   }
   @include rtl {
     text-align: right;
   }
-  padding: $df-interactive-media-padding;
+  padding: var(--#{$prefix}interactive-media-padding);
   border: none;
-  background-color: $df-interactive-media-background-color;
+  background-color: var(--#{$prefix}interactive-media-background-color);
 
   span,
   .card-text {
-    color: $df-interactive-media-color;
+    color: var(--#{$prefix}interactive-media-color);
   }
 
   &:focus {
-    background-color: $df-interactive-media-focused-background-color;
+    background-color: var(--#{$prefix}interactive-media-focused-background-color);
 
     .media-body > *,
     .card-body > * {
-      text-decoration: $df-interactive-media-hover-focus-text-decoration;
+      text-decoration: var(--#{$prefix}interactive-media-hover-focus-text-decoration);
     }
   }
   &:hover {
-    background-color: $df-interactive-media-hover-background-color;
+    background-color: var(--#{$prefix}interactive-media-hover-background-color);
 
     .media-body > *,
     .card-body > * {
-      text-decoration: $df-interactive-media-hover-focus-text-decoration;
+      text-decoration: var(--#{$prefix}interactive-media-hover-focus-text-decoration);
     }
   }
 }
 
 .df-img-mr {
+  --#{$prefix}media-margin-end: #{$df-media-margin-end};
   @include ltr {
-    margin-right: $df-media-mr;
+    margin-right: var(--#{$prefix}media-margin-end);
   }
   @include rtl {
-    margin-left: $df-media-mr;
+    margin-left: var(--#{$prefix}media-margin-end);
   }
 }

package/styles/scss/components/media/_media.variables.scss

@@ -4,4 +4,5 @@ $df-interactive-media-hover-background-color: $gray-100 !default;
 $df-interactive-media-background-color: $white !default;
 $df-interactive-media-hover-focus-text-decoration: underline !default;
 $df-media-mr: 1em !default;
-$df-interactive-media-color: $primary !default;
+$df-media-margin-end: $df-media-mr !default;
+$df-interactive-media-color: shades-css-var('primary', 'bg-color') !default;

package/styles/scss/components/modal/_modal.scss

@@ -1,75 +1,124 @@
 @use 'sass:map';
 
 .modal {
+  --#{$prefix}modal-backdrop-opacity: #{$df-modal-backdrop-opacity};
+  --#{$prefix}modal-box-shadow: #{$df-modal-box-shadow};
+  --#{$prefix}modal-border-radius: #{$df-modal-border-radius};
+  --#{$prefix}modal-border: #{$df-modal-border};
+  --#{$prefix}modal-header-title-break-word: #{$df-modal-header-title-break-word};
+  --#{$prefix}modal-header-button-close-padding-y: #{$df-modal-header-button-close-padding-y};
+  --#{$prefix}modal-header-button-close-border-radius: #{$df-modal-header-button-close-border-radius};
+
+  --#{$prefix}modal-header-icon-font-color: #{shades-css-var(secondary, 'text-color')};
+
+  --#{$prefix}modal-header-button-color-hover: #{shades-css-var(secondary, 'text-hover-color')};
+  --#{$prefix}modal-header-button-color-hover-bg: #{shades-css-var(secondary, 'bg-subtle-hover-color')};
+
+  --#{$prefix}modal-header-button-active-bg: #{shades-css-var(secondary, 'bg-subtle-active-color')};
+
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}modal-header-button-color-focus: #{shades-css-var(secondary, 'text-color')};
+    --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var(secondary, 'text-hover-color')};
+  } @else {
+    --#{$prefix}modal-header-button-color-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-color')}, 0.5);
+    --#{$prefix}modal-header-button-color-hover-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-hover-color')}, 0.5);
+  }
+
+  --#{$prefix}modal-header-button-active-color: #{shades-css-var(secondary, 'bg-active-color')};
+
+  --#{$prefix}modal-body-padding-x: #{$df-modal-body-padding-x};
+  --#{$prefix}modal-body-alert-icon-size: #{$df-modal-body-alert-icon-size};
+  --#{$prefix}modal-body-alert-border-style: #{$df-modal-body-alert-border-style};
+  --#{$prefix}modal-xs-padding: #{$df-modal-xs-padding};
+  --#{$prefix}modal-xs-content-padding-y: #{$df-modal-xs-content-padding-y};
+  --#{$prefix}modal-xs-header-padding-right: #{$df-modal-xs-header-padding-right};
+  --#{$prefix}modal-xs-button-close-position-top: #{$df-modal-xs-button-close-position-top};
+  --#{$prefix}modal-xs-button-close-position-end: #{$df-modal-xs-button-close-position-end};
+  --#{$prefix}modal-xs-footer-margin-top: #{$df-modal-xs-footer-margin-top};
+  --#{$prefix}modal-last-paragraph-margin-bottom: #{$df-modal-last-paragraph-margin-bottom};
+  --#{$prefix}modal-footer-padding: #{map.get($spacers, 5) map.get($spacers, 6)};
+
   overflow-x: hidden;
   overflow-y: auto;
 
   .modal-dialog {
     .modal-content {
-      box-shadow: $df-modal-box-shadow;
-      border-radius: $df-modal-border-radius;
-      border: $df-modal-border;
+      box-shadow: var(--#{$prefix}modal-box-shadow);
+      border-radius: var(--#{$prefix}modal-border-radius);
+      border: var(--#{$prefix}modal-border);
 
       .modal-header {
         padding: map.get($spacers, 4) map.get($spacers, 6);
         .modal-title {
-          word-break: $df-modal-header-title-break-word;
+          word-break: var(--#{$prefix}modal-header-title-break-word);
         }
         .btn-close {
-          padding-top: $df-modal-header-button-close-padding-y;
-          padding-bottom: $df-modal-header-button-close-padding-y;
-          color: $df-modal-header-icon-font-color;
+          padding-top: var(--#{$prefix}modal-header-button-close-padding-y);
+          padding-bottom: var(--#{$prefix}modal-header-button-close-padding-y);
+          color: var(--#{$prefix}modal-header-icon-font-color);
+          border-radius: var(--#{$prefix}modal-header-button-close-border-radius);
+          $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+          background: transparent $btn-close-bg center/0.8rem auto no-repeat;
 
           @include rtl {
             margin-right: auto;
             margin-left: 0;
           }
-        }
-        .alert-modal-icon {
-          font-size: $df-modal-body-alert-icon-size;
-        }
-        &.df-warning-modal {
-          .btn-close {
-            margin-top: $df-modal-alert-header-button-close-margin-top;
+          &:focus:not(:hover):not(:active) {
+            color: var(--#{$prefix}modal-header-button-color-focus);
+            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-focus);
           }
-          .alert-modal-icon {
-            color: $warning;
+          &:focus:hover:not(:active) {
+            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
+            color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
-        }
-        &.df-info-modal {
-          .btn-close {
-            margin-top: $df-modal-alert-header-button-close-margin-top;
+          &:hover {
+            color: var(--#{$prefix}modal-header-button-color-hover);
+
+            $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+            background: var(--#{$prefix}modal-header-button-color-hover-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          .alert-modal-icon {
-            color: $info;
+          &:focus:active:not(:hover) {
+            color: var(--#{$prefix}modal-header-button-active-color);
+            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-active-color);
+
+            $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+            background: var(--#{$prefix}modal-header-button-active-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-        }
-        &.df-error-modal {
-          .btn-close {
-            margin-top: $df-modal-alert-header-button-close-margin-top;
+          &:focus:active:hover {
+            --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
-          .alert-modal-icon {
-            color: $danger;
+        }
+
+        .alert-modal-icon {
+          font-size: var(--#{$prefix}modal-body-alert-icon-size);
+        }
+
+        @each $color, $value in $theme-colors {
+          &.df-#{$color}-modal {
+            .alert-modal-icon {
+              color: $value;
+            }
           }
         }
       }
 
       .modal-body {
         p:last-child {
-          margin-bottom: $df-modal-last-paragraph-margin-bottom;
+          margin-bottom: var(--#{$prefix}modal-last-paragraph-margin-bottom);
         }
         @include ltr {
           text-align: left;
-          padding-inline: $df-modal-body-padding-x;
+          padding-inline: var(--#{$prefix}modal-body-padding-x);
         }
         @include rtl {
           text-align: right;
-          padding-inline: $df-modal-body-padding-x;
+          padding-inline: var(--#{$prefix}modal-body-padding-x);
         }
       }
 
       .modal-footer {
-        padding: map.get($spacers, 5) map.get($spacers, 6);
+        padding: var(--#{$prefix}modal-footer-padding);
         & > * {
           margin: 0;
         }
@@ -90,7 +139,7 @@
       }
 
       margin: 0;
-      padding: $df-modal-xs-padding;
+      padding: var(--#{$prefix}modal-xs-padding);
       min-height: 100%;
       display: flex;
       flex: 1;
@@ -104,21 +153,21 @@
         .modal-header {
           justify-content: center;
           @include ltr {
-            padding-right: $df-modal-xs-header-padding-right;
+            padding-right: var(--#{$prefix}modal-xs-header-padding-right);
           }
           @include rtl {
-            padding-left: $df-modal-xs-header-padding-right;
+            padding-left: var(--#{$prefix}modal-xs-header-padding-right);
           }
           border-bottom: none;
           margin-bottom: 10px;
           button.close {
             position: absolute;
-            top: $df-modal-xs-button-close-position-top;
+            top: var(--#{$prefix}modal-xs-button-close-position-top);
             @include ltr {
-              right: $df-modal-xs-button-close-position-right;
+              right: var(--#{$prefix}modal-xs-button-close-position-end);
             }
             @include rtl {
-              left: $df-modal-xs-button-close-position-right;
+              left: var(--#{$prefix}modal-xs-button-close-position-end);
             }
             padding: 0;
             margin: 0;
@@ -135,7 +184,7 @@
           justify-content: center;
           align-items: baseline;
           border-top: none;
-          margin-top: $df-modal-xs-footer-margin-top;
+          margin-top: var(--#{$prefix}modal-xs-footer-margin-top);
         }
       }
     }

package/styles/scss/components/modal/_modal.variables.scss

@@ -1,12 +1,11 @@
 $df-modal-backdrop-opacity: 0.4 !default;
-$df-modal-box-shadow: $df-box-shadow !default;
+$df-modal-box-shadow: var(--#{$prefix}box-shadow) !default;
 $df-modal-border-radius: $border-radius-lg !default;
 $df-modal-border: $border-width solid $border-color !default;
 
 $df-modal-header-title-break-word: break-word !default;
 $df-modal-header-button-close-padding-y: 0.5rem !default;
-$df-modal-alert-header-button-close-margin-top: -1.5rem !default;
-$df-modal-header-icon-font-color: $df-font-icon-color !default;
+$df-modal-header-button-close-border-radius: $df-btn-icononly-border-radius !default;
 
 $df-modal-body-padding-x: 1.5rem !default;
 $df-modal-body-alert-icon-size: 1.75rem !default;
@@ -17,7 +16,7 @@ $df-modal-xs-padding: 0.5rem !default;
 $df-modal-xs-content-padding-y: 4rem !default;
 $df-modal-xs-header-padding-right: 1.5rem !default;
 $df-modal-xs-button-close-position-top: 1rem !default;
-$df-modal-xs-button-close-position-right: $df-modal-xs-button-close-position-top !default;
+$df-modal-xs-button-close-position-end: $df-modal-xs-button-close-position-top !default;
 $df-modal-xs-footer-margin-top: 0.9375rem !default;
 
-$df-modal-last-paragraph-margin-bottom: 0 !default;
+$df-modal-last-paragraph-margin-bottom: 0 !default;