@design-factory/design-factory 19.1.1 → 20.0.0-next.0

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

@@ -42,7 +42,7 @@
 
 @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff') format('woff');
@@ -52,7 +52,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff') format('woff');
@@ -62,7 +62,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff') format('woff');
@@ -72,7 +72,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff') format('woff');
@@ -82,7 +82,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff') format('woff');
@@ -92,7 +92,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff') format('woff');
@@ -102,7 +102,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff') format('woff');
@@ -112,7 +112,7 @@
   }
 
   @font-face {
-    font-family: 'Amadeus';
+    font-family: 'Amadeus Neue Web';
     src:
       url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff2') format('woff2'),
       url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff') format('woff');

package/styles/scss/components/fonts/multi-lang/_arabic.mixins.scss

@@ -1,7 +1,11 @@
+@use 'sass:meta';
 @import '../font-faces.mixins';
 
 @mixin df-fonts-multi-lang-arabic($parent-selector) {
-  $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  $headings-font-stack: var(--#{$prefix}typo-font-primaryFamily), 'Noto Sans', sans-serif;
+  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+    $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  }
   $body-font-stack: 'Source Sans Pro', 'Noto Sans', sans-serif;
   @include df-fonts-multi-lang-font-faces-noto-sans-arabic();
   @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);

package/styles/scss/components/fonts/multi-lang/_chinese.mixins.scss

@@ -1,12 +1,21 @@
+@use 'sass:meta';
 @import '../font-faces.mixins';
 
 @mixin df-fonts-multi-lang-chinese($parent-selector) {
-  $headings-font-stack: 'Amadeus', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN',
-    'Source Han Sans CN', '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体',
-    'Microsoft YaHei New', '微软雅黑', 'Microsoft Yahei', sans-serif;
-  $body-font-stack: 'Source Sans Pro', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN',
+  $headings-font-stack:
+    var(--#{$prefix}typo-font-primaryFamily), 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN',
     'Source Han Sans CN', '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体',
     'Microsoft YaHei New', '微软雅黑', 'Microsoft Yahei', sans-serif;
+  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+    $headings-font-stack:
+      'Amadeus', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN', 'Source Han Sans CN', '苹方-简',
+      'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体', 'Microsoft YaHei New', '微软雅黑',
+      'Microsoft Yahei', sans-serif;
+  }
+  $body-font-stack:
+    'Source Sans Pro', 'Source Han Sans', '思源黑体', 'Source Han Sans SC', '思源黑体 CN', 'Source Han Sans CN',
+    '苹方-简', 'PingFang SC', '冬青黑体简体中文', 'Hiragino Sans GB', '微软雅黑体', 'Microsoft YaHei New', '微软雅黑',
+    'Microsoft Yahei', sans-serif;
 
   @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
 }

package/styles/scss/components/fonts/multi-lang/_georgian.mixins.scss

@@ -1,7 +1,11 @@
+@use 'sass:meta';
 @import '../font-faces.mixins';
 
 @mixin df-fonts-multi-lang-georgian($parent-selector) {
-  $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  $headings-font-stack: var(--#{$prefix}typo-font-primaryFamily), 'Noto Sans', sans-serif;
+  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+    $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  }
   $body-font-stack: 'Noto Sans', sans-serif;
 
   @include df-fonts-multi-lang-font-faces-noto-sans-georgian();

package/styles/scss/components/fonts/multi-lang/_hebrew.mixins.scss

@@ -1,7 +1,11 @@
+@use 'sass:meta';
 @import '../font-faces.mixins';
 
 @mixin df-fonts-multi-lang-hebrew($parent-selector) {
-  $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  $headings-font-stack: var(--#{$prefix}typo-font-primaryFamily), 'Noto Sans', sans-serif;
+  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+    $headings-font-stack: 'Amadeus', 'Noto Sans', sans-serif;
+  }
   $body-font-stack: 'Source Sans Pro', 'Noto Sans', sans-serif;
 
   @include df-fonts-multi-lang-font-faces-noto-sans-hebrew();

package/styles/scss/components/fonts/multi-lang/_japanese.mixins.scss

@@ -1,11 +1,21 @@
+@use 'sass:meta';
 @import '../font-faces.mixins';
 
 @mixin df-fonts-multi-lang-japanese($parent-selector) {
-  $headings-font-stack: 'Amadeus', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
-    'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ',
-    Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
-    'Droid Sans Japanese', sans-serif;
-  $body-font-stack: 'Source Sans Pro', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
+  $headings-font-stack:
+    var(--#{$prefix}typo-font-primaryFamily), '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP',
+    'Source Han Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体',
+    YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic,
+    'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
+  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+    $headings-font-stack:
+      'Amadeus', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP', 'ヒラギノ角ゴ ProN',
+      'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ', Meiryo,
+      'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
+      'Droid Sans Japanese', sans-serif;
+  }
+  $body-font-stack:
+    'Source Sans Pro', '源ノ角ゴシック', 'Source Han Sans', '源ノ角ゴシック JP', 'Source Han Sans JP',
     'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'メイリオ',
     Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar',
     'Droid Sans Japanese', sans-serif;

package/styles/scss/components/fonts/multi-lang/_korean.mixins.scss

@@ -1,10 +1,18 @@
+@use 'sass:meta';
 @import '../font-faces.mixins';
 
 @mixin df-fonts-multi-lang-korean($parent-selector) {
-  $headings-font-stack: 'Amadeus', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림',
-    'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
-  $body-font-stack: 'Source Sans Pro', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림',
-    'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  $headings-font-stack:
+    var(--#{$prefix}typo-font-primaryFamily), 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic',
+    '굴림', 'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+    $headings-font-stack:
+      'Amadeus', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림', 'Gulim', '돋움',
+      'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  }
+  $body-font-stack:
+    'Source Sans Pro', 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림', 'Gulim', '돋움',
+    'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
 
   @include df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack);
 }

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

@@ -0,0 +1,36 @@
+@mixin footerlink() {
+  color: var(--#{$prefix}footer-color-link-primary-default-foreground);
+  border-bottom-color: var(--#{$prefix}footer-color-link-primary-default-foreground);
+  --#{$prefix}box-shadow-color: var(--#{$prefix}footer-color-link-primary-default-border);
+
+  &:hover {
+    color: var(--#{$prefix}footer-color-link-primary-hovered-foreground);
+    border-bottom-color: var(--#{$prefix}footer-color-link-primary-hovered-foreground);
+    background-color: var(--#{$prefix}footer-color-link-primary-hovered-background);
+    --#{$prefix}box-shadow-color: var(--#{$prefix}footer-color-link-primary-hovered-border);
+  }
+
+  &:active {
+    color: var(--#{$prefix}footer-color-link-primary-pressed-foreground);
+    border-bottom-color: var(--#{$prefix}footer-color-link-primary-pressed-foreground);
+    background-color: var(--#{$prefix}footer-color-link-primary-pressed-background);
+    --#{$prefix}box-shadow-color: var(--#{$prefix}footer-color-link-primary-pressed-border);
+  }
+}
+
+@mixin footerlink-visited() {
+  color: var(--#{$prefix}footer-color-link-visited-default-foreground);
+  border-bottom-color: var(--#{$prefix}footer-color-link-visited-default-foreground);
+
+  &:hover {
+    color: var(--#{$prefix}footer-color-link-visited-hovered-foreground);
+    border-bottom-color: var(--#{$prefix}footer-color-link-visited-hovered-foreground);
+    background-color: var(--#{$prefix}footer-color-link-visited-hovered-background);
+  }
+
+  &:active {
+    color: var(--#{$prefix}footer-color-link-visited-pressed-foreground);
+    border-bottom-color: var(--#{$prefix}footer-color-link-visited-pressed-foreground);
+    background-color: var(--#{$prefix}footer-color-link-visited-pressed-background);
+  }
+}

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

@@ -1,3 +1,6 @@
+@use 'sass:meta';
+@import 'footer.mixins';
+
 .df-app-footer {
   --#{$prefix}footer-margin-top: #{$df-footer-margin-top};
   --#{$prefix}footer-display: #{$df-footer-display};
@@ -12,39 +15,70 @@
   --#{$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);
 
+  @if not meta.variable-exists($name: 'df-enableBranding2023') {
+    a {
+      &:visited {
+        color: var(--#{$prefix}link-color);
+      }
+
+      border-bottom: 0;
+
+      &:hover {
+        background-color: unset;
+        text-decoration: underline;
+      }
+
+      &:active {
+        background-color: unset;
+        color: var(--#{$prefix}link-color);
+      }
+    }
+  } @else {
+    background-color: var(--#{$prefix}footer-color-inert-neutral-background);
+    color: var(--#{$prefix}footer-color-inert-neutral-foreground);
+
+    hr {
+      border-top-color: var(--#{$prefix}footer-color-inert-neutral-border);
+      opacity: 1;
+    }
+
+    .df-app-footer-links {
+      a {
+        &:not(:visited) {
+          @include footerlink();
+        }
+        &:visited {
+          @include footerlink-visited();
+        }
+        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}footer-color-inert-neutral-background);
+      }
+    }
+  }
+
   .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);
-    }
-  }
-
-  .df-app-footer-links {
-    a {
-      @include df-link();
-    }
+    padding-inline-start: var(--#{$prefix}footer-line-padding-start);
   }
 
   .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);
+    border-bottom: 0;
+
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      color: var(--#{$prefix}footer-color-logo-foreground);
     }
+
     &:after {
       display: var(--#{$prefix}footer-brand-after-display);
     }

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

@@ -11,5 +11,4 @@ $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;

package/styles/scss/components/form/_form.scss

@@ -35,15 +35,18 @@ form {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
     --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
   }
+
   &:disabled {
     color: var(--#{$prefix}form-input-disabled-color);
     cursor: var(--#{$prefix}form-input-disabled-cursor);
+
     &::placeholder {
       color: var(--#{$prefix}form-input-disabled-color);
     }
   }
+
   &::placeholder {
-    font-style: italic;
+    font-style: $df-form-placeholder-font-style;
   }
 
   &[readonly] {
@@ -80,6 +83,14 @@ form {
   font-size: $font-size-sm;
 }
 
+.form-control-sm {
+  & ~ .invalid-feedback,
+  & ~ .valid-feedback,
+  & ~ .warning-feedback {
+    font-size: $df-font-size-xs;
+  }
+}
+
 .form-row {
   // add
   & ~ .invalid-feedback {
@@ -93,6 +104,7 @@ form {
   min-width: var(--#{$prefix}custom-pages-input-minwidth);
   width: var(--#{$prefix}custom-pages-input-width);
 }
+
 .form-control,
 .form-check-input {
   @each $state, $data in $form-validation-states {
@@ -111,6 +123,7 @@ form {
 // forms size small
 .form-sm {
   --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-sm};
+
   .form-control,
   .ng-select {
     @extend .form-control-sm;
@@ -122,6 +135,7 @@ form {
       // maybe this is more &:not as in form.mixin.scss
       margin-bottom: var(--#{$prefix}form-sm-label-margin-bottom);
     }
+
     font-size: $font-size-sm;
   }
 
@@ -138,11 +152,22 @@ form {
       height: var(--#{$prefix}form-switch-sm-height);
     }
   }
+
+  .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
+    border-radius: var(--#{$prefix}border-radius-sm); //needed to override common bootstrap file
+  }
+
+  .invalid-feedback,
+  .valid-feedback,
+  .warning-feedback {
+    font-size: $df-font-size-xs;
+  }
 }
 
 // forms size large
 .form-lg {
   --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-lg};
+
   .form-control {
     @extend .form-control-lg;
   }
@@ -153,6 +178,7 @@ form {
       // maybe this is more &:not as in form.mixin.scss
       margin-bottom: var(--#{$prefix}form-lg-label-margin-bottom);
     }
+
     font-size: $font-size-lg;
   }
 
@@ -169,6 +195,10 @@ form {
       height: var(--#{$prefix}form-switch-lg-height);
     }
   }
+
+  .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
+    border-radius: var(--#{$prefix}border-radius-lg);
+  }
 }
 
 .ng-invalid.ng-touched {

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

@@ -1,108 +1,105 @@
-@mixin df-link-normal {
-  color: var(--#{$prefix}link-color);
-  border-bottom: var(--#{$prefix}link-border-bottom);
-}
-
-@mixin df-link-hover {
-  color: var(--#{$prefix}link-hover-color);
-  background-color: var(--#{$prefix}link-hover-background);
-  border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
-  text-decoration: var(--#{$prefix}link-hover-text-decoration);
-}
-
-@mixin df-link-visited {
-  color: var(--#{$prefix}link-visited-color);
-  border-bottom-color: var(--#{$prefix}link-visited-color);
-  text-decoration: none;
-}
-
-@mixin df-link-focus {
-  outline: var(--#{$prefix}link-focus-outline);
-  outline-offset: var(--#{$prefix}link-focus-outline-offset);
-  box-shadow: var(--#{$prefix}link-focus-box-shadow);
-}
-
-@mixin df-link-visited-hover {
-  color: var(--#{$prefix}link-visited-hover-text-color);
-  background-color: var(--#{$prefix}link-visited-hover-background);
-  border-bottom-width: var(--#{$prefix}link-visited-hover-border-bottom-width);
-  border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
-}
-
-@mixin df-link-visited-active {
-  color: var(--#{$prefix}link-visited-active-text-color);
-  background-color: var(--#{$prefix}link-visited-active-background);
-  border-bottom-width: var(--#{$prefix}link-visited-active-border-bottom-width);
-  border-bottom-color: var(--#{$prefix}link-visited-active-border-bottom-color);
+@mixin df-link-external-content {
+  content: $df-link-external-icon;
+  font-family: $df-link-external-font-family;
+  position: relative;
+  bottom: var(--#{$prefix}link-external-icon-bottom);
+  font-size: var(--#{$prefix}link-external-icon-size);
 }
 
-@mixin df-link-disabled {
+%df-disabled-link-style {
   color: var(--#{$prefix}link-disabled-color);
+  background-color: var(--#{$prefix}link-disabled-background);
   display: var(--#{$prefix}link-disabled-display);
   cursor: var(--#{$prefix}link-disabled-cursor);
   text-decoration: var(--#{$prefix}link-disabled-text-decoration);
   border-bottom-color: var(--#{$prefix}link-disabled-border-bottom-color);
-  background-color: var(--#{$prefix}link-disabled-background);
+  border-bottom-width: var(--#{$prefix}link-disabled-border-bottom-width);
   outline: none;
   box-shadow: none;
 }
 
-@mixin df-link-active {
-  color: var(--#{$prefix}link-active-color);
-  border-bottom-width: var(--#{$prefix}link-active-border-bottom-width);
-  border-bottom-color: var(--#{$prefix}link-active-color);
-  background-color: var(--#{$prefix}link-active-background);
-}
+@mixin df-disabled-link {
+  &[aria-disabled='true'] {
+    @extend %df-disabled-link-style;
 
-@mixin df-link-external-content {
-  content: $df-link-external-icon;
-  font-family: $df-link-external-font-family;
-  position: relative;
-  bottom: var(--#{$prefix}link-external-icon-bottom);
-  font-size: var(--#{$prefix}link-external-icon-size);
+    &:hover,
+    &:active,
+    &:visited,
+    &:visited:hover {
+      @extend %df-disabled-link-style;
+    }
+  }
 }
 
+//TODO: move the mixin to the links after branding2023 removal and clean the include of this link
 @mixin df-link {
-  &:link {
-    @include df-link-normal;
+  color: var(--#{$prefix}link-color);
+  border-bottom: var(--#{$prefix}link-border-bottom);
+
+  &:hover {
+    color: var(--#{$prefix}link-hover-color);
+    background-color: var(--#{$prefix}link-hover-background);
+    border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
+    text-decoration: var(--#{$prefix}link-hover-text-decoration);
+  }
+  &:active {
+    color: var(--#{$prefix}link-active-color);
+    border-bottom-width: var(--#{$prefix}link-active-border-bottom-width);
+    border-bottom-color: var(--#{$prefix}link-active-color);
+    background-color: var(--#{$prefix}link-active-background);
   }
 
-  &:hover:not([aria-disabled='true']) {
-    @include df-link-hover;
+  &:focus-visible {
+    outline: var(--#{$prefix}link-focus-outline);
+    outline-offset: var(--#{$prefix}link-focus-outline-offset);
+    box-shadow: var(--#{$prefix}link-focus-box-shadow);
   }
 
   &:visited {
-    @include df-link-visited;
-  }
+    color: var(--#{$prefix}link-visited-color);
+    border-bottom-color: var(--#{$prefix}link-visited-color);
+
+    &:hover {
+      color: var(--#{$prefix}link-visited-hover-text-color);
+      background-color: var(--#{$prefix}link-visited-hover-background);
+      border-bottom-width: var(--#{$prefix}link-visited-hover-border-bottom-width);
+      border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
+    }
 
-  &:visited:hover {
-    @include df-link-visited;
-    @include df-link-visited-hover;
+    &:active {
+      color: var(--#{$prefix}link-visited-active-text-color);
+      background-color: var(--#{$prefix}link-visited-active-background);
+      border-bottom-width: var(--#{$prefix}link-visited-active-border-bottom-width);
+      border-bottom-color: var(--#{$prefix}link-visited-active-border-bottom-color);
+    }
   }
 
-  &:active:not([aria-disabled='true']) {
-    @include df-link-active;
-  }
+  @include df-disabled-link();
+}
 
-  &:focus-visible {
-    @include df-link-focus;
-  }
+//TODO remove mixin when we find change the web portal to avoid using links as buttons or make a different decision
+@mixin a-btn {
+  &:visited {
+    color: var(--#{$prefix}link-color);
+    border-color: var(--#{$prefix}btn-hover-border-color);
 
-  &:visited:active {
-    @include df-link-visited-active;
-  }
+    &:hover {
+      color: var(--#{$prefix}btn-hover-color);
+      background-color: var(--#{$prefix}btn-hover-bg);
+    }
 
-  &[aria-disabled='true'] {
-    &:hover,
-    &:active,
-    &:visited,
-    &:visited:hover,
-    &:link {
-      @include df-link-disabled;
+    &:active {
+      color: var(--#{$prefix}btn-active-color);
+      background-color: var(--#{$prefix}btn-active-bg);
     }
   }
+  &:hover,
+  &:active {
+    border-width: var(--#{$prefix}btn-border-width);
+  }
 }
 
+//TODO: Remove after branding2023 removal
 @mixin df-link-more-normal {
   text-transform: var(--#{$prefix}link-more-text-transform);
   font-weight: var(--#{$prefix}font-weight-semi-bold);