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

package/package.json

@@ -2,22 +2,22 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "19.1.2",
+  "version": "20.0.0-next.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@agnos-ui/angular-bootstrap": "~0.8.0",
-    "@agnos-ui/core-bootstrap": "~0.8.0",
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/localize": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@ng-bootstrap/ng-bootstrap": "~18.0.0",
-    "@ng-select/ng-select": "^14.1.0",
+    "@agnos-ui/angular-bootstrap": "~0.9.0",
+    "@agnos-ui/core-bootstrap": "~0.9.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/localize": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@ng-bootstrap/ng-bootstrap": "~19.0.0",
+    "@ng-select/ng-select": "^15.0.0",
     "ag-grid-angular": "^32.0.0",
     "ag-grid-community": "^32.0.0",
-    "bootstrap": "5.3.3"
+    "bootstrap": "5.3.6"
   },
   "peerDependenciesMeta": {
     "@angular/router": {
@@ -42,12 +42,6 @@
     "./styles/scss/*": {
       "sass": "./styles/scss/*.scss"
     },
-    ".": {
-      "sass": "./design-factory.scss",
-      "style": "./design-factory.css",
-      "types": "./index.d.ts",
-      "default": "./fesm2022/design-factory.mjs"
-    },
     "./design-factory.scss": "./design-factory.scss",
     "./design-factory.css": "./design-factory.css",
     "./design-factory-initial-branding.scss": "./design-factory-initial-branding.scss",
@@ -58,6 +52,10 @@
     },
     "./package.json": {
       "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/design-factory.mjs"
     }
   },
   "ng-update": {

package/schematics/migrations/20_0_0/navbar-toggler-logo-svg/index.d.ts

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates templates to use inline svg instead of navbar span for the toggler icon.
+ *
+ * @returns the Rule to migrate the navbar logo
+ */
+export default function navbarTogglerLogo(): Rule;

package/schematics/migrations/20_0_0/navbar-toggler-logo-svg/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = navbarTogglerLogo;
+const schematics_1 = require("@angular-devkit/schematics");
+const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
+const compiler_host_1 = require("../../utils/typescript/compiler_host");
+const template_updater_1 = require("../../utils/template-updater");
+function replaceHtmlContentFactory(loggingContext) {
+    function replaceHtmlContent(content) {
+        content = content.replace(/<span\s+class="navbar-toggler-icon"><\/span>/g, `<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>`);
+        loggingContext.foundComplexCase =
+            loggingContext.foundComplexCase || /([ \t]*<span[^>]+navbar-toggler-icon)/g.test(content);
+        content = content.replace(/([ \t]*<span[^>]+navbar-toggler-icon)/g, '<!-- TODO Avoid using spans with navbar-toggler-icon and replace with inline svgs. -->\n' +
+            '<!-- You can check an example of the inline svg in the SideNav example: https://design-factory.amadeus.net/components/sidenav/examples#basic -->\n$1');
+        return content;
+    }
+    return replaceHtmlContent;
+}
+/**
+ * This migration updates templates to use inline svg instead of navbar span for the toggler icon.
+ *
+ * @returns the Rule to migrate the navbar logo
+ */
+function navbarTogglerLogo() {
+    return async (tree, context) => {
+        const { buildPaths, testPaths } = await (0, project_tsconfig_paths_1.getProjectTsConfigPaths)(tree);
+        const basePath = process.cwd();
+        const allPaths = [...buildPaths, ...testPaths];
+        if (!allPaths.length) {
+            throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `Font Awesome 6` migration.');
+        }
+        const loggingContext = { foundComplexCase: false };
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContentFactory(loggingContext));
+        for (const tsconfigPath of allPaths) {
+            const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
+            const sourceFiles = program
+                .getSourceFiles()
+                .filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+            for (const sourceFile of sourceFiles) {
+                templateUpdater.update(sourceFile, program.getTypeChecker());
+            }
+        }
+        if (loggingContext.foundComplexCase) {
+            context.logger.warn('Found a more complex case of span with navbar-toggler-icon. Please check the comments in the code and replace it with an inline svg.');
+        }
+    };
+}

package/schematics/migrations/migration.json

@@ -42,6 +42,12 @@
       "description": "As of Design Factory version 18, in-house icons are separated from the Font Awesome ones. FW6 has renamed some icons to better depict their meaning.",
       "version": "18.0.0",
       "factory": "./18_0_0/font-awesome-6"
+    },
+    "navbar-toggler-logo-svg": {
+      "description": "Use inline svg for navbar toggler logo instead of span. Recommended for apps using the new amadeus branding.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/navbar-toggler-logo-svg",
+      "optional": true
     }
   }
 }

package/styles/scss/_common.scss

@@ -13,7 +13,7 @@
 
 @each $extension, $ratio in $df-size-ratios {
   .df-font-#{$extension} {
-    --#{$prefix}body-font-size: #{$font-size-base * $ratio};
+    --#{$prefix}body-font-size: #{get-sizing-brand2023($extension, $ratio)};
     font-size: var(--#{$prefix}body-font-size);
   }
 }

package/styles/scss/_common.variables.scss

@@ -13,7 +13,8 @@ $df-mandatory-indicator-font-weight: 700 !default;
 $df-mandatory-indicator-margin: 0.125rem !default;
 $df-subtitle-color: $gray-600 !default;
 $df-zindex-topmost: 10000 !default;
-
+$df-font-size-xs: $font-size-sm !default;
+$df-form-placeholder-font-style: italic !default;
 // Merge DF Spacer with BS ones
 // stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
 $spacers: map.merge(

package/styles/scss/agnosui/_variables.scss

@@ -15,7 +15,7 @@
     0 0 0 4px #{shades-css-var('primary', 'text-hover-color')}
   )
   !default,
-  $au-slider-label-now-font-weight: 500 !default,
+  $au-slider-label-now-font-weight: var(--#{$prefix}typo-weight-medium) !default,
   $au-slider-label-vertical-min-top: calc(100% - 0.5rem) !default,
   $au-slider-label-vertical-max-top: 0.25rem !default,
   $au-slider-disabled-color: var(--#{$prefix}disabled-color) !default,

package/styles/scss/bootstrap/_variables.scss

@@ -1,6 +1,8 @@
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:color';
+@use 'sass:meta';
+
 // stylelint-disable scss/dollar-variable-pattern
 // Variables
 //
@@ -1037,13 +1039,16 @@ $cyans-mapping: (
 $links-mapping: (
   'text-color': var(--#{$prefix}primary-500),
   'bg-color': transparent,
+  'box-shadow-color': var(--#{$prefix}primary-500),
   'text-hover-color': var(--#{$prefix}primary-500),
+  'box-shadow-hover-color': var(--#{$prefix}primary-500),
   'bg-hover-color': var(--#{$prefix}primary-100),
   'text-active-color': var(--#{$prefix}primary-800),
+  'box-shadow-active-color': var(--#{$prefix}primary-800),
   'bg-active-color': transparent,
   'text-visited-color': var(--#{$prefix}purple-500),
   'text-visited-hover-color': var(--#{$prefix}purple-500),
-  'bg-visisted-hover-color': var(--#{$prefix}primary-100),
+  'bg-visited-hover-color': var(--#{$prefix}primary-100),
   'text-visited-active-color': var(--#{$prefix}primary-800),
   'bg-visited-active-color': transparent
 ) !default;
@@ -1057,12 +1062,9 @@ $shade-maps: map.set($shade-maps, 'blue', $blues-mapping);
 $shade-maps: map.set($shade-maps, 'cyan', $cyans-mapping);
 $shade-maps: map.set($shade-maps, 'teal', $teals-mapping);
 $shade-maps: map.set($shade-maps, 'green', $greens-mapping);
-$shade-maps: map.set($shade-maps, 'yellow', $yellows-mapping);
 $shade-maps: map.set($shade-maps, 'orange', $oranges-mapping);
 $shade-maps: map.set($shade-maps, 'red', $reds-mapping);
 $shade-maps: map.set($shade-maps, 'pink', $pinks-mapping);
-$shade-maps: map.set($shade-maps, 'love', $loves-mapping);
-$shade-maps: map.set($shade-maps, 'mystery', $mysteries-mapping);
 $shade-maps: map.set($shade-maps, 'info', $infos-mapping);
 $shade-maps: map.set($shade-maps, 'success', $successes-mapping);
 $shade-maps: map.set($shade-maps, 'warning', $warnings-mapping);
@@ -1072,12 +1074,17 @@ $shade-maps: map.set($shade-maps, 'indigo', $indigos-mapping);
 $shade-maps: map.set($shade-maps, 'primary', $primaries-mapping);
 $shade-maps: map.set($shade-maps, 'white', $whites-mapping);
 $shade-maps: map.set($shade-maps, 'light', $lights-mapping);
-$shade-maps: map.set($shade-maps, 'dark', $darks-mapping);
 $shade-maps: map.set($shade-maps, 'pacific', $pacifics-mapping);
 $shade-maps: map.set($shade-maps, 'gray', $grays-mapping);
 $shade-maps: map.set($shade-maps, 'secondary', $secondaries-mapping);
+$shade-maps: map.set($shade-maps, 'dark', $darks-mapping);
 $shade-maps: map.set($shade-maps, 'links', $links-mapping);
 
+// TODO: Brand2023 - these colors are for the old branding only, to be removed
+$shade-maps: map.set($shade-maps, 'mystery', $mysteries-mapping);
+$shade-maps: map.set($shade-maps, 'yellow', $yellows-mapping);
+$shade-maps: map.set($shade-maps, 'love', $loves-mapping);
+
 $shade-colors: map.merge(
   $map1: $shade-colors,
   $map2: $infos
@@ -1337,7 +1344,7 @@ $link-color: shades-css-var('primary') !default;
 $link-decoration: none !default;
 // $link-shade-percentage:                   20% !default;
 $link-hover-color: $link-color !default;
-$link-hover-decoration: underline !default;
+$link-hover-decoration: none !default;
 
 // $stretched-link-pseudo-element:           after !default;
 // $stretched-link-z-index:                  1 !default;

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

@@ -174,7 +174,7 @@
       .accordion-button {
         padding: calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-y))
           calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-x));
-        font-size: $ratio * $font-size-base;
+        font-size: get-sizing-brand2023($extension, $ratio);
 
         &::after {
           width: $icon-with;
@@ -183,6 +183,10 @@
         }
       }
 
+      .accordion-body {
+        font-size: get-sizing-brand2023($extension, $ratio, $font-size-base, true);
+      }
+
       &.df-accordion-reverse {
         .accordion-button {
           &::before {

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

@@ -23,6 +23,7 @@
   --#{$prefix}alert-collapse-link-hover-bg: #{$df-alert-collapse-link-hover-bg};
 
   --#{$prefix}alert-collapse-icon-margin-start: #{$df-alert-collapse-icon-margin-start};
+  --#{$prefix}alert-font-size: #{$font-size-base};
 
   color: var(--#{$prefix}alert-color);
   background-color: var(--#{$prefix}alert-bg-color);
@@ -175,7 +176,11 @@
     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')};
+        --#{$prefix}alert-border-bottom-color: #{shades-css-var-brand2023(
+            'color-#{$state}-main-default-border',
+            $state,
+            'border-color'
+          )};
       }
     }
     &.alert-tip {

package/styles/scss/components/badge/_badge.mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 @mixin df-disable-badge($color, $bg-color, $changeBorder: false) {
   cursor: var(--#{$prefix}disabled-cursor);
   color: $color !important;

package/styles/scss/components/badge/_badge.scss

@@ -1,7 +1,29 @@
+@use 'sass:meta';
 @use 'sass:map';
 @import 'badge.mixins';
 
+$df-solidMappedColors: () !default;
+$df-lightMappedColors: () !default;
+@each $color, $value in $utilities-bg-colors {
+  $df-solidMappedColors: map.set($df-solidMappedColors, $color, $color);
+  $df-lightMappedColors: map.set($df-lightMappedColors, $color, $color + '-light');
+}
+
+@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  /* stylelint-disable-next-line scss/dollar-variable-default */
+  $df-solidMappedColors: map.set($df-solidMappedColors, 'white', 'neutral-alt');
+
+  /* stylelint-disable-next-line scss/dollar-variable-default */
+  $df-solidMappedColors: map.set($df-solidMappedColors, 'light', 'neutral');
+
+  /* stylelint-disable-next-line scss/dollar-variable-default */
+  $df-lightMappedColors: map.set($df-lightMappedColors, 'light', 'light');
+}
+
 %bg-badge-common {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    background-color: var(--#{$prefix}badge-background-color) !important;
+  }
   &:not(.rounded-pill):not(.df-badge-dot) {
     &:not(.df-closable) {
       &:hover:not([disabled]):not(.disabled) {
@@ -22,6 +44,14 @@
       color: var(--#{$prefix}badge-hover-color);
       background-color: var(--#{$prefix}badge-hover-background-color);
     }
+
+    &:not(.disabled) {
+      button:active,
+      span[role='button']:active {
+        color: var(--#{$prefix}badge-active-color);
+        background-color: var(--#{$prefix}badge-active-background-color);
+      }
+    }
   }
 
   &[disabled],
@@ -98,27 +128,79 @@
   }
 
   @each $color, $value in $utilities-bg-colors {
-    &.bg-#{$color} {
-      // in this case we also handle the .badge.bg-light
-      // TODO: Check if the tokens fixes the issue
-      --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-      --#{$prefix}badge-color: #{shades-css-var($color, 'bg-color', true)};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-hover-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'bg-hover-color', true)};
-      --#{$prefix}badge-active-background-color: #{shades-css-var($color, 'bg-active-color')};
-      --#{$prefix}badge-active-color: #{shades-css-var($color, 'bg-active-color', true)};
-      --#{$prefix}badge-dot-background-color: #{shades-css-var($color, 'bg-color')};
-      --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
-      @extend %bg-badge-common;
+    $mappedColor: map.get($df-solidMappedColors, $color);
+    @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 or $color != 'light' {
+      &.bg-#{$color} {
+        // in this case we also handle the .badge.bg-light
+        // TODO: Check if the tokens fixes the issue
+        --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
+        --#{$prefix}badge-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-default-foreground',
+            $color,
+            'bg-color',
+            true
+          )};
+        --#{$prefix}badge-background-color: var(--#{$prefix}badge-solid-color-#{$mappedColor}-default-background);
+        --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-hovered-background',
+            $color,
+            'bg-hover-color'
+          )};
+        --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-hovered-foreground',
+            $color,
+            'bg-hover-color',
+            true
+          )};
+        --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-pressed-background',
+            $color,
+            'bg-active-color'
+          )};
+        --#{$prefix}badge-active-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-pressed-foreground',
+            $color,
+            'bg-active-color',
+            true
+          )};
+        --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-default-background',
+            $color,
+            'bg-color'
+          )};
+        --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
+
+        @extend %bg-badge-common;
+      }
     }
 
     &.df-badge-outline-#{$color} {
-      --#{$prefix}badge-color: #{shades-css-var($color, 'text-color')};
+      --#{$prefix}badge-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-default-foreground',
+          $color,
+          'text-color'
+        )};
       --#{$prefix}badge-background-color: transparent;
-      --#{$prefix}badge-border-color: #{shades-css-var($color, 'border-color')};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-hover-alt-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'text-hover-color')};
-      --#{$prefix}badge-hover-border-color: #{shades-css-var($color, 'border-hover-color')};
+      --#{$prefix}badge-border-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-default-border',
+          $color,
+          'border-color'
+        )};
+      --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-hovered-background',
+          $color,
+          'bg-hover-alt-color'
+        )};
+      --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-hovered-foreground',
+          $color,
+          'text-hover-color'
+        )};
+      --#{$prefix}badge-hover-border-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-hovered-border',
+          $color,
+          'border-hover-color'
+        )};
       background-color: var(--#{$prefix}badge-background-color);
       color: var(--#{$prefix}badge-color);
       border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
@@ -160,17 +242,67 @@
       }
     }
 
-    &.bg-#{$color}-light {
+    $lightClassname: map.get($df-lightMappedColors, $color);
+    &.bg-#{$lightClassname} {
       --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-      --#{$prefix}badge-color: #{shades-css-var($color, 'text-light-color')};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-light-hover-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'text-light-hover-color')};
-      --#{$prefix}badge-active-background-color: #{shades-css-var($color, 'bg-light-active-color')};
-      --#{$prefix}badge-active-color: #{shades-css-var($color, 'bg-light-active-color', true)};
-      --#{$prefix}badge-dot-background-color: #{shades-css-var($color, 'bg-light-color')};
-      background-color: #{shades-css-var($color, 'bg-light-color')};
+      --#{$prefix}badge-background-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-background);
+      --#{$prefix}badge-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-default-foreground',
+          $color,
+          'text-light-color'
+        )};
+      --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-hovered-background',
+          $color,
+          'bg-light-hover-color'
+        )};
+      --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-hovered-foreground',
+          $color,
+          'text-light-hover-color'
+        )};
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}badge-hover-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-hovered-border);
+      }
+      --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-pressed-background',
+          $color,
+          'bg-light-active-color'
+        )};
+      --#{$prefix}badge-active-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-pressed-foreground',
+          $color,
+          'bg-light-active-color',
+          true
+        )};
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}badge-active-border-color: var(--#{$prefix}badge-soft-color-#{$color}-pressed-border);
+      }
+      --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-default-background',
+          $color,
+          'bg-light-color'
+        )};
+      background-color: #{shades-css-var-brand2023('', $color, 'bg-light-color')};
+
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        &:not(.df-badge-dot) {
+          --#{$prefix}badge-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-border);
+        }
+      }
+
+      border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
       @extend %bg-badge-common;
     }
+
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      // Additional colors mix (light grey background with colored icon)
+      &.bg-light {
+        .df-badge-icon.text-#{$color} {
+          color: var(--#{$prefix}badge-solid-color-#{$color}-default-background) !important;
+        }
+      }
+    }
   }
 }
 

package/styles/scss/components/breadcrumbs/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .breadcrumb {
   --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding};
   --#{$prefix}breadcrumb-item-active-font-weight: #{$df-breadcrumb-item-active-font-weight};
@@ -40,14 +42,12 @@
     }
 
     a {
-      &:focus-visible {
-        box-shadow: $df-breadcrumb-item-link-focus-box-shadow;
-        outline: $df-breadcrumb-item-link-outline;
-      }
-
-      &:hover:not([aria-disabled='true']) {
-        border-bottom-style: solid;
-        @include df-link-hover;
+      border-bottom: 0;
+      @if (not meta.variable-exists($name: 'df-enableBranding2023')) {
+        &:hover {
+          border-bottom: var(--#{$prefix}link-border-bottom);
+          border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
+        }
       }
     }
 

package/styles/scss/components/breadcrumbs/_breadcrumbs.variables.scss

@@ -15,7 +15,5 @@ $df-breadcrumb-icon-color: shades-css-var('primary', 'inert-color') !default;
 $df-breadcrumb-icon-margin: 0rem 0.5rem !default;
 $df-breadcrumb-icon-angle-left-content: '\f104' !default; // fa-angle-left
 $df-breadcrumb-icon-angle-right-content: '\f105' !default; // fa-angle-right
-$df-breadcrumb-item-link-focus-box-shadow: var(--#{$prefix}link-focus-box-shadow) !default;
-$df-breadcrumb-item-link-outline: none !default;
 
 $df-breadcrumb-separator-font: Font Awesome 6 Pro !default;