@design-factory/design-factory 15.2.3 → 16.0.1

package/styles/scss/components/dropdown/_dropdown.scss

@@ -12,6 +12,22 @@ body {
 body,
 .dropdown,
 .dropup {
+  --#{$prefix}dropdown-separator-margin-y: #{$df-dropdown-separator-margin-y};
+  --#{$prefix}dropdown-separator-color: #{$df-dropdown-separator-color};
+  --#{$prefix}dropdown-item-hover-text-decoration: #{$df-dropdown-item-hover-text-decoration};
+  --#{$prefix}dropdown-item-focus-text-decoration: #{$df-dropdown-item-focus-text-decoration};
+  --#{$prefix}dropdown-item-focus-border-radius: #{$df-dropdown-item-focus-border-radius};
+  --#{$prefix}dropdown-item-border-width: #{$df-dropdown-item-border-width};
+  --#{$prefix}dropdown-toggle-font: #{$df-dropdown-toggle-font};
+  --#{$prefix}dropdown-toggle-font-weight: #{$df-dropdown-toggle-font-weight};
+  --#{$prefix}dropdown-toggle-padding: #{$df-dropdown-toggle-padding};
+  --#{$prefix}dropdown-toggle-split-padding-x: #{$df-dropdown-toggle-split-padding-x};
+  --#{$prefix}dropdown-toggle-margin: #{$df-dropdown-toggle-margin};
+  --#{$prefix}dropdown-toggle-line-height: #{$df-dropdown-toggle-line-height};
+  --#{$prefix}dropdown-toggle-border-color-primary: #{$df-dropdown-toggle-border-color-primary};
+  --#{$prefix}dropdown-disabled-pointer: #{$df-dropdown-disabled-pointer};
+  --#{$prefix}dropdown-disabled-color: #{$df-dropdown-disabled-color};
+
   @include ltr {
     @include df-dropdown-orientation('right', 'left');
   }
@@ -21,17 +37,17 @@ body,
   .dropdown-toggle {
     &:after {
       border: none;
-      font-family: $df-dropdown-toggle-font;
-      line-height: $df-dropdown-toggle-line-height; //Fix Chrome bug
-      font-weight: $df-dropdown-toggle-font-weight; // Fix IE11 bug
+      font-family: var(--#{$prefix}dropdown-toggle-font);
+      line-height: var(--#{$prefix}dropdown-toggle-line-height); //Fix Chrome bug
+      font-weight: var(--#{$prefix}dropdown-toggle-font-weight); // Fix IE11 bug
     }
     &.df-standalone-dropdown-toggle:after{
       content: none; //remove chevron icon
     }
   }
   .dropdown-toggle-split.dropdown-toggle-split {
-    padding-left: $df-dropdown-toggle-split-padding-x;
-    padding-right: $df-dropdown-toggle-split-padding-x;
+    padding-left: var(--#{$prefix}dropdown-toggle-split-padding-x);
+    padding-right: var(--#{$prefix}dropdown-toggle-split-padding-x);
     &:after {
       margin: 0;
     }
@@ -40,36 +56,40 @@ body,
 
 .dropdown-menu {
   hr {
-    margin-top: $df-dropdown-separator-margin-y;
-    margin-bottom: $df-dropdown-separator-margin-y;
-    border-color: $df-dropdown-separator-color;
+    margin-top: var(--#{$prefix}dropdown-separator-margin-y);
+    margin-bottom: var(--#{$prefix}dropdown-separator-margin-y);
+    border-color: var(--#{$prefix}dropdown-separator-color);
   }
   box-shadow: $df-box-shadow;
 }
 .dropdown-item {
-  border: $df-dropdown-item-border-width solid transparent;
+  border: var(--#{$prefix}dropdown-item-border-width) solid transparent;
   &:focus,
   &.focus {
-    @extend .df-focused;
-    border-radius: $df-dropdown-item-focus-border-radius;
-    text-decoration: $df-dropdown-item-hover-text-decoration;
+    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'bg-subtle-active-color', true)};
+    }
+    box-shadow: $df-focused-box-shadow;
+    border: $df-dropdown-item-focused-border;
+    outline: var(--#{$prefix}focus-outline);
+    border-radius: var(--#{$prefix}dropdown-item-focus-border-radius);
+    &:not(:hover) {
+      text-decoration: var(--#{$prefix}dropdown-item-focus-text-decoration);
+    }
   }
   &:hover {
-    text-decoration: $df-dropdown-item-hover-text-decoration;
+    text-decoration: var(--#{$prefix}dropdown-item-hover-text-decoration);
   }
   &.disabled,
   &:disabled {
-    cursor: $df-dropdown-disabled-pointer;
-    color: $df-dropdown-disabled-color;
+    cursor: var(--#{$prefix}dropdown-disabled-pointer);
+    color: var(--#{$prefix}dropdown-disabled-color);
     text-decoration: none;
     pointer-events: auto; // override of ng-bootstrap
   }
-  &:not(:disabled):not(.disabled).active {
-    background-color: $df-dropdown-item-active-background-color;
-    color: $df-dropdown-item-active-color;
-  }
 }
 
+// Flag Angular
 // This style is needed due to a discrepancy between ngbootstrap and bootstrap split dropdown
 // Only LTR is needed as the RTL case is already properly handled by the global override
 .btn-group.dropdown[ngbdropdown] {

package/styles/scss/components/dropdown/_dropdown.variables.scss

@@ -1,10 +1,9 @@
 @use 'sass:color';
 
 $df-dropdown-separator-margin-y: 0.5rem !default;
-$df-dropdown-separator-color: $gray-500 !default;
-$df-dropdown-item-active-color: $white !default;
-$df-dropdown-item-active-background-color: $primary !default;
+$df-dropdown-separator-color: var(--#{$prefix}gray-500) !default; // TODO aligned with separator ?
 $df-dropdown-item-hover-text-decoration: underline !default;
+$df-dropdown-item-focus-text-decoration: $df-dropdown-item-hover-text-decoration !default;
 $df-dropdown-item-focus-border-radius: 0 !default;
 $df-dropdown-item-border-width: $border-width !default;
 $df-dropdown-toggle-font: Design-Factory-icon !default;
@@ -14,5 +13,6 @@ $df-dropdown-toggle-split-padding-x: 0.5em !default;
 $df-dropdown-toggle-margin: $df-dropdown-toggle-padding !default;
 $df-dropdown-toggle-line-height: 1rem !default;
 $df-dropdown-toggle-border-color-primary: color.adjust(color.adjust($primary, $saturation: -44.17%), $lightness: 31.96%) !default;
-$df-dropdown-disabled-pointer: $df-disabled-cursor !default;
+$df-dropdown-disabled-pointer: var(--#{$prefix}disabled-cursor) !default;
 $df-dropdown-disabled-color: $df-btn-outline-disabled-text-color !default;
+$df-dropdown-item-focused-border: $df-focused-border !default;

package/styles/scss/components/fieldset/_fieldset.scss

@@ -1,6 +1,8 @@
 fieldset {
+  --#{$prefix}fieldset-legend-font-size: #{$df-fieldset-legend-font-size};
+  --#{$prefix}fieldset-legent-font-weight: #{$df-fieldset-legent-font-weight};
   > legend {
-    font-weight: $df-fieldset-legent-font-weight;
-    font-size: $df-fieldset-legend-font-size;
+    font-weight: var(--#{$prefix}fieldset-legent-font-weight);
+    font-size: var(--#{$prefix}fieldset-legend-font-size);
   }
 }

package/styles/scss/components/fonts/_fonts-family.scss

@@ -42,37 +42,120 @@
   font-display: swap;
 }
 
-@font-face {
-  font-family: 'Amadeus';
-  src: url('#{$font-path}/amadeus-thin/amadeus-thin.woff2') format('woff2'),
-    url('#{$font-path}/amadeus-thin/amadeus-thin.woff') format('woff'),
-    url('#{$font-path}/amadeus-thin/amadeus-thin.ttf') format('truetype'),
-    url('#{$font-path}/amadeus-thin/amadeus-thin.svg#amadeusthin') format('svg');
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-}
+@if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+  }
 
-@font-face {
-  font-family: 'Amadeus';
-  src: url('#{$font-path}/amadeus-bold/amadeus-bold.woff2') format('woff2'),
-    url('#{$font-path}/amadeus-bold/amadeus-bold.woff') format('woff'),
-    url('#{$font-path}/amadeus-bold/amadeus-bold.ttf') format('truetype'),
-    url('#{$font-path}/amadeus-bold/amadeus-bold.svg#amadeusbold') format('svg');
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-}
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+  }
 
-@font-face {
-  font-family: 'Amadeus';
-  src: url('#{$font-path}/amadeus-regular/amadeus-regular.woff2') format('woff2'),
-    url('#{$font-path}/amadeus-regular/amadeus-regular.woff') format('woff'),
-    url('#{$font-path}/amadeus-regular/amadeus-regular.ttf') format('truetype'),
-    url('#{$font-path}/amadeus-regular/amadeus-regular.svg#amadeusregular') format('svg');
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.woff') format('woff'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+  }
+
+} @else {
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-thin/amadeus-thin.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-thin/amadeus-thin.woff') format('woff'),
+      url('#{$font-path}/amadeus-thin/amadeus-thin.ttf') format('truetype'),
+      url('#{$font-path}/amadeus-thin/amadeus-thin.svg#amadeusthin') format('svg');
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-bold/amadeus-bold.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-bold/amadeus-bold.woff') format('woff'),
+      url('#{$font-path}/amadeus-bold/amadeus-bold.ttf') format('truetype'),
+      url('#{$font-path}/amadeus-bold/amadeus-bold.svg#amadeusbold') format('svg');
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: 'Amadeus';
+    src: url('#{$font-path}/amadeus-regular/amadeus-regular.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-regular/amadeus-regular.woff') format('woff'),
+      url('#{$font-path}/amadeus-regular/amadeus-regular.ttf') format('truetype'),
+      url('#{$font-path}/amadeus-regular/amadeus-regular.svg#amadeusregular') format('svg');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+  }
 }
 
 @font-face {

package/styles/scss/components/fonts/_fonts.root.scss

@@ -0,0 +1,27 @@
+:root {
+  --#{$prefix}h1-letter-spacing: #{$df-h1-letter-spacing};
+  --#{$prefix}h2-letter-spacing: #{$df-h2-letter-spacing};
+  --#{$prefix}h3-letter-spacing: #{$df-h3-letter-spacing};
+  --#{$prefix}h4-letter-spacing: #{$df-h4-letter-spacing};
+  --#{$prefix}h5-letter-spacing: #{$df-h5-letter-spacing};
+  --#{$prefix}h6-letter-spacing: #{$df-h6-letter-spacing};
+  --#{$prefix}display1-letter-spacing: #{$df-display1-letter-spacing};
+  --#{$prefix}display2-letter-spacing: #{$df-display2-letter-spacing};
+  --#{$prefix}display3-letter-spacing: #{$df-display3-letter-spacing};
+  --#{$prefix}display4-letter-spacing: #{$df-display4-letter-spacing};
+  --#{$prefix}recommend-font-size: #{$df-recommend-font-size};
+  --#{$prefix}recommend-font-weight: #{$df-recommend-font-weight};
+  --#{$prefix}recommend-line-height: #{$df-recommend-line-height};
+  --#{$prefix}recommend-padding-bottom: #{$df-recommend-padding-bottom};
+  --#{$prefix}recommend-margin-bottom: #{$df-recommend-margin-bottom};
+  --#{$prefix}recommend-border-bottom-width: #{$df-recommend-border-bottom-width};
+  --#{$prefix}recommend-color: #{$df-recommend-color};
+  --#{$prefix}recommend-not-color: #{$df-recommend-not-color};
+  --#{$prefix}caption-letter-spacing: #{$df-caption-letter-spacing};
+  --#{$prefix}caption-font-size: #{$df-caption-font-size};
+  --#{$prefix}blockquote-letter-spacing: #{$df-blockquote-letter-spacing};
+  --#{$prefix}blockquote-font-style: #{$df-blockquote-font-style};
+  --#{$prefix}blockquote-line-height: #{$df-blockquote-line-height};
+  --#{$prefix}mark-color: #{$df-mark-color};
+  --#{$prefix}font-weight-semi-bold: #{$df-font-weight-semi-bold};
+}

package/styles/scss/components/fonts/_fonts.scss

@@ -1,83 +1,82 @@
 h1,
 .h1 {
   // add
-  letter-spacing: $df-h1-letter-spacing;
+  letter-spacing: var(--#{$prefix}h1-letter-spacing);
 }
 h2,
 .h2 {
   // add
-  letter-spacing: $df-h2-letter-spacing;
+  letter-spacing: var(--#{$prefix}h2-letter-spacing);
 }
 h3,
 .h3 {
   // add
-  letter-spacing: $df-h3-letter-spacing;
+  letter-spacing: var(--#{$prefix}h3-letter-spacing);
 }
 h4,
 .h4 {
   // add
-  letter-spacing: $df-h4-letter-spacing;
+  letter-spacing: var(--#{$prefix}h4-letter-spacing);
 }
 h5,
 .h5 {
   // add
-  letter-spacing: $df-h5-letter-spacing;
+  letter-spacing: var(--#{$prefix}h5-letter-spacing);
 }
 h6,
 .h6 {
   // add
-  letter-spacing: $df-h6-letter-spacing;
+  letter-spacing: var(--#{$prefix}h6-letter-spacing);
 }
-
 .display-1 {
   // add
-  letter-spacing: $df-display1-letter-spacing;
+  letter-spacing: var(--#{$prefix}display1-letter-spacing);
 }
 .display-2 {
   // add
-  letter-spacing: $df-display2-letter-spacing;
+  letter-spacing: var(--#{$prefix}display2-letter-spacing);
 }
 .display-3 {
   // add
-  letter-spacing: $df-display3-letter-spacing;
+  letter-spacing: var(--#{$prefix}display3-letter-spacing);
 }
 .display-4 {
   // add
-  letter-spacing: $df-display4-letter-spacing;
+  letter-spacing: var(--#{$prefix}display4-letter-spacing);
 }
 
-caption {
+.caption {
   // add
-  font-size: $df-caption-font-size;
-  letter-spacing: $df-caption-letter-spacing;
+  font-size: var(--#{$prefix}caption-font-size);
+  letter-spacing: var(--#{$prefix}caption-letter-spacing);
 }
 
 blockquote {
   //add
-  font-style: $df-blockquote-font-style;
-  letter-spacing: $df-blockquote-letter-spacing;
-  line-height: $df-blockquote-line-height;
+  font-style: var(--#{$prefix}blockquote-font-style);
+  letter-spacing: var(--#{$prefix}blockquote-letter-spacing);
+  line-height: var(--#{$prefix}blockquote-line-height);
 }
 
 mark {
   //add
-  color: $df-mark-color;
+  color: var(--#{$prefix}mark-color);
 }
 
 .df-recommend,
 .df-not-recommend {
-  @include font-size($df-recommend-font-size);
-  font-weight: $df-recommend-font-weight;
-  line-height: $df-recommend-line-height;
-  border-bottom: $df-recommend-border-bottom-width solid;
-  padding-bottom: $df-recommend-padding-bottom;
-  margin-bottom: $df-recommend-margin-bottom;
+  font-size: var(--#{$prefix}recommend-font-size);
+  font-weight: var(--#{$prefix}recommend-font-weight);
+  line-height: var(--#{$prefix}recommend-line-height);
+  border-bottom: var(--#{$prefix}recommend-border-bottom-width) solid;
+  padding-bottom: var(--#{$prefix}recommend-padding-bottom);
+  margin-bottom: var(--#{$prefix}recommend-margin-bottom);
 }
 
 .df-recommend {
-  color: $df-recommend-color;
+  color: var(--#{$prefix}recommend-color);
 }
 
 .df-not-recommend {
-  color: $df-recommend-not-color;
+  color: var(--#{$prefix}recommend-not-color);
 }

package/styles/scss/components/fonts/_fonts.variables.scss

@@ -16,8 +16,8 @@ $df-recommend-line-height: $display-line-height !default;
 $df-recommend-padding-bottom: 0.5rem !default;
 $df-recommend-margin-bottom: 1rem !default;
 $df-recommend-border-bottom-width: 3 * $border-width !default;
-$df-recommend-color: $green !default;
-$df-recommend-not-color: $red !default;
+$df-recommend-color: shades-css-var('success', 'text-color') !default;
+$df-recommend-not-color: shades-css-var('danger', 'text-color') !default;
 
 $df-caption-letter-spacing: 0.025rem !default;
 $df-caption-font-size: 0.875rem !default;

package/styles/scss/components/footer/_footer.scss

@@ -1,23 +1,53 @@
 .df-app-footer {
-  margin-top: $df-footer-margin-top; // to put it at the botton of the flex container
-  display: $df-footer-display;
-  flex-direction: $df-footer-direction;
-}
+  --#{$prefix}footer-margin-top: #{$df-footer-margin-top};
+  --#{$prefix}footer-display: #{$df-footer-display};
+  --#{$prefix}footer-direction: #{$df-footer-direction};
+  --#{$prefix}footer-line-display: #{$df-footer-line-display};
+  --#{$prefix}footer-line-align: #{$df-footer-line-align};
+  --#{$prefix}footer-line-justify-content: #{$df-footer-line-justify-content};
+  --#{$prefix}footer-line-wrap: #{$df-footer-line-wrap};
+  --#{$prefix}footer-line-direction: #{$df-footer-line-direction};
+  --#{$prefix}footer-line-padding-start: #{$df-footer-line-padding-start};
+  --#{$prefix}footer-line-padding-end: #{$df-footer-line-padding-end};
+  --#{$prefix}footer-brand-display: #{$df-footer-brand-display};
+  --#{$prefix}footer-brand-align: #{$df-footer-brand-align};
+  --#{$prefix}footer-brand-after-display: #{$df-footer-brand-after-display};
+  --#{$prefix}footer-item-focus-box-shadow: #{$df-footer-item-focus-box-shadow};
+  --#{$prefix}footer-item-outline: #{$df-footer-item-outline};
+  margin-top: var(--#{$prefix}footer-margin-top); // to put it at the botton of the flex container
+  display: var(--#{$prefix}footer-display);
+  flex-direction: var(--#{$prefix}footer-direction);
 
-.df-app-footer-line {
-  display: $df-footer-line-display;
-  align-items: $df-footer-line-align;
-  justify-content: $df-footer-line-justify-content;
-  flex-wrap: $df-footer-line-wrap;
-  flex-direction: $df-footer-line-direction;
-  padding-left: $df-footer-line-padding-left;
-  padding-right: $df-footer-line-padding-right;
-}
+  .df-app-footer-line {
+    display: var(--#{$prefix}footer-line-display);
+    align-items: var(--#{$prefix}footer-line-align);
+    justify-content: var(--#{$prefix}footer-line-justify-content);
+    flex-wrap: var(--#{$prefix}footer-line-wrap);
+    flex-direction: var(--#{$prefix}footer-line-direction);
+    @include ltr {
+      padding-left: var(--#{$prefix}footer-line-padding-start);
+    }
+    @include rtl {
+      padding-right: var(--#{$prefix}footer-line-padding-end);
+    }
+  }
+
+  a {
+    outline: var(--#{$prefix}footer-item-outline);
+    &:focus {
+      box-shadow: var(--#{$prefix}footer-item-focus-box-shadow);
+    }
+  }
 
-.df-footer-brand {
-  display: $df-footer-brand-display;
-  align-items: $df-footer-brand-align;
-  &:after {
-    display: $df-footer-brand-after-display;
+  .df-footer-brand {
+    display: var(--#{$prefix}footer-brand-display);
+    align-items: var(--#{$prefix}footer-brand-align);
+    outline: var(--#{$prefix}footer-item-outline);
+    &:focus {
+      box-shadow: var(--#{$prefix}footer-item-focus-box-shadow);
+    }
+    &:after {
+      display: var(--#{$prefix}footer-brand-after-display);
+    }
   }
 }

package/styles/scss/components/footer/_footer.variables.scss

@@ -6,8 +6,10 @@ $df-footer-line-align: center !default;
 $df-footer-line-justify-content: flex-start !default;
 $df-footer-line-wrap: nowrap !default;
 $df-footer-line-direction: row !default;
-$df-footer-line-padding-left: 1rem !default;
-$df-footer-line-padding-right: 1rem !default;
+$df-footer-line-padding-start: 1rem !default;
+$df-footer-line-padding-end: 1rem !default;
 $df-footer-brand-display: flex !default;
 $df-footer-brand-align: center !default;
 $df-footer-brand-after-display: none !default;
+$df-footer-item-focus-box-shadow: $df-focused-box-shadow !default;
+$df-footer-item-outline: none !default;