@design-factory/design-factory 20.0.0-next.2 → 20.0.0-next.3

package/index.d.ts

@@ -1711,37 +1711,27 @@ declare class DfTitleTruncateDirective implements OnInit, DoCheck {
 
 declare class DfWavesOfProgressDirective {
     /**
-     * The type of waves to display. In order to display the waves, the app using the directive must include the assets of Design Factory.
-     * It is possible to do so by adding the following snippet to the `angular.json` file in the `assets` configuration:
-     * @example
-     * "assets": [
-     *  {
-     *    "glob": "** / *", //remove the spaces between the asterisks and the slash
-     *    "input": "node-modules/@design-factory/design-factory/assets/",
-     *    "output": "assets/"
-     *  },
-     *  ...]
+     * The type of waves to display
      */
     readonly dfWavesOfProgress: i0.InputSignal<"circleDiagonal" | "circleUp" | "arrowRight" | "arrowUp">;
-    private readonly http;
-    elementRef: ElementRef<any>;
-    private readonly platformId;
-    private baseSvg;
+    /**
+     * The color of the waves. It can be one of the predefined brand colors or a custom color.
+     * @example
+     * 'dark-sky', 'vivid-crimson', 'light-forest', ['#000835', '#3A8BFF']
+     */
+    readonly color: i0.InputSignal<"dark-sky" | "dark-crimson" | "dark-pumpkin" | "dark-forest" | "dark-canary" | "dark-fuchsia" | "dark-violet" | "vivid-sky" | "vivid-crimson" | "vivid-pumpkin" | "vivid-forest" | "vivid-canary" | "vivid-fuchsia" | "vivid-violet" | "light-sky" | "light-crimson" | "light-pumpkin" | "light-forest" | "light-canary" | "light-fuchsia" | "light-violet" | [string, string]>;
+    readonly backgroundImage: i0.Signal<string>;
     /**
      * Prepares the SVG string by replacing color variables and encoding it.
+     * @param svgAsString - The SVG string to prepare.
      * @param bgColor - The background color.
      * @param lineColor - The line color.
      * @returns The prepared SVG string.
      */
-    prepareSvg(bgColor: string, lineColor: string): string;
-    /**
-     * Updates the SVG background image based on the current element's styles.
-     */
-    updateSvg(): void;
-    constructor();
-    private getSvg;
+    private prepareSvg;
+    private getWavesAsString;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfWavesOfProgressDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DfWavesOfProgressDirective, "[dfWavesOfProgress]", ["dfWavesOfProgress"], { "dfWavesOfProgress": { "alias": "dfWavesOfProgress"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DfWavesOfProgressDirective, "[dfWavesOfProgress]", ["dfWavesOfProgress"], { "dfWavesOfProgress": { "alias": "dfWavesOfProgress"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class DfWavesOfProgressModule {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "20.0.0-next.2",
+  "version": "20.0.0-next.3",
   "dependencies": {
     "tslib": "^2.0.0"
   },
@@ -14,7 +14,7 @@
     "@angular/localize": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@ng-bootstrap/ng-bootstrap": "~19.0.0",
-    "@ng-select/ng-select": "^15.0.0",
+    "@ng-select/ng-select": "^15.0.0 || ^20.0.0",
     "ag-grid-angular": "^32.0.0",
     "ag-grid-community": "^32.0.0",
     "bootstrap": "5.3.7",

package/schematics/migrations/20_0_0/colors-new-branding/index.d.ts

@@ -1,4 +1,8 @@
 import { type Rule } from '@angular-devkit/schematics';
+export declare function replaceContentFactory(isTemplate: boolean, loggingContext: {
+    warnings: boolean;
+    deprecatedColors: boolean;
+}): (content: string) => string;
 /**
  * This migration updates the classes regarding the colors.
  *

package/schematics/migrations/20_0_0/colors-new-branding/index.js

@@ -1,61 +1,101 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceContentFactory = replaceContentFactory;
 exports.default = colorNamesProcess;
 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");
 const style_updater_1 = require("../../utils/style-updater");
-const colorNamesMap = {
-    // light: 'neutral-soft',
-    secondary: 'neutral',
+const classBreak = '[^a-zA-Z-]'; // to avoid matching "bg-primary-light" for example
+const indent = `[ \t]*`;
+const colorsWithDeprecation = {
+    light: 'neutral-soft',
+    secondary: 'neutral'
+};
+const regExpColorsWithDeprecation = new RegExp(`(${indent}).*${classBreak}(bg|text|text-bg])-(${Object.keys(colorsWithDeprecation).join('|')})${classBreak}`, 'g');
+const safeColorMap = {
     dark: 'neutral',
     mystery: 'tip',
     yellow: 'chromatic1',
     love: 'chromatic2'
 };
-const removedColorsMap = ['pacific', 'dark-primary', 'dark-green'];
-const colorNames = Object.keys(colorNamesMap).join('|');
-const classBreak = '[^a-zA-Z-]'; // to avoid matching "bg-primary-light" for example
-const regExpSoft = new RegExp(`${classBreak}(bg|df-badge-outline)-[a-z]+-light${classBreak}`, 'g');
-const regExpSoftClass = new RegExp(`${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${colorNames})-soft${classBreak}`, 'g');
-const regExp = new RegExp(`${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${colorNames})${classBreak}`, 'g');
-const regExpLight = new RegExp(`.*?badge.*?${classBreak}(bg-light)${classBreak}`, 'g');
-const regExpRemoved = new RegExp(`([ \t]*).*${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${removedColorsMap.join('|')})${classBreak}.*`, 'g');
+const allColorNamesMap = {
+    ...colorsWithDeprecation,
+    ...safeColorMap
+};
+const removedColorsList = ['pacific', 'dark-primary', 'dark-green'];
+const regExpRemovedColors = new RegExp(`(${indent}).*${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${removedColorsList.join('|')})${classBreak}.*`, 'g');
+const colorNames = Object.keys(allColorNamesMap).join('|');
+/*
+  Matches "light" color variants, specifically for badges, as "light" colors are only defined for badges.
+  for exemple bg-*-light
+*/
+const regExpLight = new RegExp(`${classBreak}(bg|df-badge-outline)-[a-z]+-light${classBreak}`, 'g');
+const regExpBadgeLight = new RegExp(`.*?(badge|toast)${classBreak}bg-light${classBreak}`, 'g');
+const regExpSoftColor = new RegExp(`${classBreak}(bg|text|text-bg|df-badge-outline)-(${colorNames})-soft${classBreak}`, 'g');
+const regExpColors = new RegExp(`([ \t]*).*${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${colorNames})${classBreak}`, 'g');
+const regExpBadgeOrToast = /(badge|toast)/;
+const regExpBadgeOrButton = /(badge|btn)/;
 function replaceContentFactory(isTemplate, loggingContext) {
     return function replaceContent(content) {
+        // Replace the specific bg-light in the badge
+        content = content.replace(regExpBadgeLight, function (str) {
+            return str.replace('bg-light', 'bg-neutral-soft');
+        });
         // Replace the "light" variants by the "soft" ones
-        content = content.replace(regExpSoft, function (str) {
+        content = content.replace(regExpLight, function (str) {
             const result = str.replace('-light', '-soft');
             return result;
         });
         // Replace the old name by the new ones for the soft first
-        content = content.replace(regExpSoftClass, function (str, _prefix, color) {
+        content = content.replace(regExpSoftColor, function (str, _prefix, color) {
             let result = str;
-            const mappedColor = colorNamesMap[color];
+            const mappedColor = allColorNamesMap[color];
             if (mappedColor) {
                 result = result.replace(color, mappedColor);
             }
             return result;
         });
         // Replace the old name by the new ones
-        content = content.replace(regExp, function (str, _prefix, color) {
+        content = content.replace(regExpColors, function (str, indent, _prefix, color) {
             let result = str;
-            const mappedColor = colorNamesMap[color];
-            if (mappedColor) {
-                result = result.replace(color, mappedColor);
+            if (regExpBadgeOrToast.test(str)) {
+                const mappedColor = allColorNamesMap[color];
+                if (mappedColor) {
+                    result = result.replace(color, mappedColor);
+                }
+            }
+            else if (str.includes('btn') && (color === 'secondary' || color === 'light')) {
+                loggingContext.warnings = true;
+                const msg = `DF 20 migration: ${color} is no longer supported in buttons.`;
+                result = isTemplate ? `${indent}<!-- ${msg} -->\n${str}` : `${indent}\\* ${msg} *\\\n${str}`;
+            }
+            else {
+                // Safe color replacement
+                const mappedColor = safeColorMap[color];
+                if (mappedColor) {
+                    result = result.replace(color, mappedColor);
+                }
             }
             return result;
         });
-        // Special case for bg-light which is replaced only in the badge context (as bg-neutral-soft do not exist)
-        content = content.replace(regExpLight, function (str) {
-            return str.replace('bg-light', 'bg-neutral-soft');
+        // Warning for secondary and light colors
+        content = content.replace(regExpColorsWithDeprecation, function (str, _indent, _prefix) {
+            if (!regExpBadgeOrButton.test(str)) {
+                loggingContext.deprecatedColors = true;
+            }
+            return str;
         });
         // Removed colors
-        content = content.replace(regExpRemoved, function (str, indent, _, color) {
-            loggingContext.removedColor = true;
-            const msg = `DF 20 migration: ${color} has been removed`;
-            return isTemplate ? `${indent}<!-- ${msg} -->\n${str}` : `\\* ${msg} *\\\n${str}`;
+        content = content.replace(regExpRemovedColors, function (str, indent, _, color) {
+            let result = str;
+            if (!str.includes('navbar')) {
+                loggingContext.warnings = true;
+                const msg = `DF 20 migration: ${color} has been removed`;
+                result = isTemplate ? `${indent}<!-- ${msg} -->\n${str}` : `${indent}\\* ${msg} *\\\n${str}`;
+            }
+            return result;
         });
         return content;
     };
@@ -74,7 +114,7 @@ function replaceContentFactory(isTemplate, loggingContext) {
  */
 function colorNamesProcess() {
     return async (tree, context) => {
-        const loggingContext = { removedColor: false };
+        const loggingContext = { warnings: false, deprecatedColors: false };
         const { buildPaths, testPaths } = await (0, project_tsconfig_paths_1.getProjectTsConfigPaths)(tree);
         const basePath = process.cwd();
         const allPaths = [...buildPaths, ...testPaths];
@@ -101,8 +141,11 @@ function colorNamesProcess() {
                 styleUpdater.update(sourceFile, program.getTypeChecker());
             }
         }
-        if (loggingContext.removedColor) {
+        if (loggingContext.warnings) {
             context.logger.warn('Some removed color classes were found. Check your files for comments in your code.');
         }
+        if (loggingContext.deprecatedColors) {
+            context.logger.warn('Deprecated color classes (light, secondary) detected. Please review your usage of bg-light, text-light, text-bg-light, bg-secondary, text-secondary, and text-bg-secondary.');
+        }
     };
 }

package/schematics/migrations/20_0_0/modal-removal/index.d.ts

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates Angular code to remove the usage of the `DfModalService` from the Design Factory library.
+ *
+ * @returns the Rule to migrate the modal removal
+ */
+export default function modalRemoval(): Rule;

package/schematics/migrations/20_0_0/modal-removal/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = modalRemoval;
+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 path_1 = require("path");
+const core_1 = require("@angular-devkit/core");
+const regexImportDfModal = /import\s\{([^}]*)DfModalService(,\s*)?([^}]*)\}\sfrom\s['"]@design-factory\/design-factory['"];/gm;
+const regexDfModalService = /DfModalService/g;
+const replaceComponent = (text) => {
+    text = text.replace(regexImportDfModal, (_match, p1, _p2, p3) => {
+        return (`import { NgbModal } from '@ng-bootstrap/ng-bootstrap';` +
+            ((p1 + p3).trim()
+                ? `\nimport {${p3.trim() ? p1 : p1.replace(/(.*),\s*/, '$1')}${p3}} from '@design-factory/design-factory';`
+                : ''));
+    });
+    text = text.replace(regexDfModalService, 'NgbModal');
+    return text;
+};
+/**
+ * This migration updates Angular code to remove the usage of the `DfModalService` from the Design Factory library.
+ *
+ * @returns the Rule to migrate the modal removal
+ */
+function modalRemoval() {
+    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 `waves of progress` migration.');
+        }
+        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) {
+                const sourceText = sourceFile.getFullText();
+                const updatedText = replaceComponent(sourceText);
+                if (updatedText !== sourceText) {
+                    const absFilePath = (0, core_1.normalize)(path_1.posix.resolve('/', (0, core_1.normalize)(sourceFile.fileName)));
+                    const filePath = path_1.posix.relative((0, core_1.normalize)(process.cwd()), absFilePath);
+                    const recorder = tree.beginUpdate(filePath);
+                    recorder.remove(0, sourceText.length);
+                    recorder.insertRight(0, updatedText);
+                    tree.commitUpdate(recorder);
+                }
+            }
+        }
+    };
+}

package/schematics/migrations/20_0_0/style-import/index.d.ts

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates the global styles to import the correct path of design factory styles.
+ *
+ * @returns the Rule to migrate the style import
+ */
+export default function styleImport(): Rule;

package/schematics/migrations/20_0_0/style-import/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = styleImport;
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const regexDefault = /@import\s+['"]@design-factory\/design-factory['"];/g;
+/**
+ * This migration updates the global styles to import the correct path of design factory styles.
+ *
+ * @returns the Rule to migrate the style import
+ */
+function styleImport() {
+    return async (tree, _context) => {
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        for (const project of workspace.projects.values()) {
+            if (project.extensions['projectType'] === 'application') {
+                const sassStylePath = `${project.sourceRoot ?? ''}/styles.scss`;
+                if (tree.exists(sassStylePath)) {
+                    const styleText = tree.readText(sassStylePath);
+                    if (regexDefault.test(styleText)) {
+                        const recorder = tree.beginUpdate(sassStylePath);
+                        recorder.remove(0, styleText.length);
+                        recorder.insertRight(0, styleText.replace(regexDefault, '@import "@design-factory/design-factory/design-factory.scss";'));
+                        tree.commitUpdate(recorder);
+                    }
+                }
+                const cssStylePath = `${project.sourceRoot ?? ''}/styles.css`;
+                if (tree.exists(cssStylePath)) {
+                    const styleText = tree.readText(cssStylePath);
+                    if (regexDefault.test(styleText)) {
+                        const recorder = tree.beginUpdate(cssStylePath);
+                        recorder.remove(0, styleText.length);
+                        recorder.insertRight(0, styleText.replace(regexDefault, '@import "@design-factory/design-factory/design-factory.css";'));
+                        tree.commitUpdate(recorder);
+                    }
+                }
+            }
+        }
+    };
+}

package/schematics/migrations/20_0_0/waves-of-progress/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 wavesOfProgressRefactor(): Rule;

package/schematics/migrations/20_0_0/waves-of-progress/index.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = wavesOfProgressRefactor;
+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");
+const waveOfProgressDirective = /(<[^>]*?)\s(\[dfWavesOfProgress]="[^"]*")([^>]*?>)/g;
+const wavesClass = /class="([^"]*?)df-waves-(dark|vivid|light)-(sky|crimson|pumpkin|forest|canary|fuchsia|violet)([^"]*?)"/g;
+function replaceHtmlContent(content, loggingContext) {
+    return content.replace(waveOfProgressDirective, (match, _g1, wavesDirective, _g2) => {
+        if (wavesDirective) {
+            loggingContext.foundWaves = true;
+            return match.replace(wavesClass, (_match, classesBefore, tonality, color, classesAfter) => {
+                if (tonality && color) {
+                    if (classesBefore === '' && classesAfter === '') {
+                        return `color="${tonality}-${color}"`;
+                    }
+                    else {
+                        return `color="${tonality}-${color}" class="${classesBefore}${classesAfter}"`;
+                    }
+                }
+                loggingContext.complexCase = true;
+                return _match;
+            });
+        }
+        return match;
+    });
+}
+/**
+ * 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 wavesOfProgressRefactor() {
+    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 `waves of progress` migration.');
+        }
+        const loggingContext = { foundWaves: false, complexCase: false };
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, (content) => replaceHtmlContent(content, 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.foundWaves) {
+            _context.logger.warn('Waves of progress no longer relies on @design-factory/asset: please remove it from the angular.json assets configuration if not needed.' +
+                `Look for:  
+        {
+          "glob": "**/*",
+          "input": "node-modules/@design-factory/design-factory/assets/",
+          "output": "assets/"
+        },
+      ` +
+                `\n\nPlease keep in mind that the waves no longer need updateSvg() call, please remove it if you are using it.`);
+            if (loggingContext.complexCase) {
+                _context.logger.warn('The migration could not handle all cases. Please check the updated files for manual adjustments.');
+            }
+        }
+    };
+}

package/schematics/migrations/migration.json

@@ -60,6 +60,21 @@
       "version": "20.0.0",
       "factory": "./20_0_0/spinner-new-branding",
       "optional": true
+    },
+    "waves-of-progress": {
+      "description": "Refactor waves of progress",
+      "version": "20.0.0",
+      "factory": "./20_0_0/waves-of-progress"
+    },
+    "style-import": {
+      "description": "Sass default import for Design Factory styles has changed.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/style-import"
+    },
+    "modal-removal": {
+      "description": "DfModalService has been removed and replaced with NgbModal.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/modal-removal"
     }
   }
 }

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

@@ -65,10 +65,7 @@ $df-lightMappedColors: () !default;
     }
   }
 
-  $disabled-border-color: variable-switch-brand2023(
-    var(--#{$prefix}disabled-border-color),
-    var(--#{$prefix}disabled-color)
-  );
+  $disabled-border-color: #{variable-switch-brand2023('disabled-border-color', var(--#{$prefix}disabled-color))};
   &[disabled],
   &.disabled,
   &:has([disabled]),

package/styles/scss/components/button/_button.scss

@@ -829,63 +829,64 @@ $mapped-theme-colors: ();
   }
 
   .btn-outline-#{$colorClass}.df-btn-tertiary {
-    --#{$prefix}btn-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
-      var(--#{$prefix}color-#{$color}-alt-default-foreground)
-    );
-    @if $isBrand2023 {
-      --#{$prefix}btn-bg: transparent;
-    }
-
     --#{$prefix}btn-border-color: transparent;
 
-    --#{$prefix}btn-hover-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-hovered-foreground,
-      var(--#{$prefix}color-#{$color}-alt-hovered-foreground)
-    );
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}button-text-basic-color-#{$color}-hovered-background,
-      var(--#{$prefix}color-#{$color}-alt-hovered-background)
-    );
-    --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-hovered-background,
-      var(--#{$prefix}color-#{$color}-alt-hovered-background)
-    );
-
-    --#{$prefix}btn-active-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-pressed-foreground,
-      var(--#{$prefix}color-#{$color}-alt-pressed-foreground)
-    );
-    --#{$prefix}btn-active-bg: var(
-      --#{$prefix}button-text-basic-color-#{$color}-pressed-background,
-      var(--#{$prefix}color-#{$color}-alt-pressed-background)
-    );
-    --#{$prefix}btn-active-border-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-pressed-background,
-      var(--#{$prefix}color-#{$color}-alt-pressed-background)
-    );
-
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}button-text-basic-color-disabled-foreground);
-    --#{$prefix}btn-disabled-bg: var(--#{$prefix}button-text-basic-color-disabled-background);
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}button-text-basic-color-disabled-background);
+    @if $isBrand2023 {
+      --#{$prefix}btn-bg: transparent;
 
-    --#{$prefix}btn-focus-only-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
-      var(--#{$prefix}color-#{$color}-alt-default-foreground)
-    );
-    --#{$prefix}btn-focus-only-border-color: transparent;
-    --#{$prefix}btn-check-active-hover-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-foreground,
-      var(--#{$prefix}color-#{$color}-alt-activeHovered-foreground)
-    );
-    --#{$prefix}btn-check-active-hover-bg: var(
-      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
-      var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
-    );
-    --#{$prefix}btn-check-active-hover-border-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
-      var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
-    );
+      --#{$prefix}btn-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
+        var(--#{$prefix}color-#{$color}-alt-default-foreground)
+      );
+
+      --#{$prefix}btn-hover-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-hovered-foreground,
+        var(--#{$prefix}color-#{$color}-alt-hovered-foreground)
+      );
+      --#{$prefix}btn-hover-bg: var(
+        --#{$prefix}button-text-basic-color-#{$color}-hovered-background,
+        var(--#{$prefix}color-#{$color}-alt-hovered-background)
+      );
+      --#{$prefix}btn-hover-border-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-hovered-background,
+        var(--#{$prefix}color-#{$color}-alt-hovered-background)
+      );
+
+      --#{$prefix}btn-active-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-pressed-foreground,
+        var(--#{$prefix}color-#{$color}-alt-pressed-foreground)
+      );
+      --#{$prefix}btn-active-bg: var(
+        --#{$prefix}button-text-basic-color-#{$color}-pressed-background,
+        var(--#{$prefix}color-#{$color}-alt-pressed-background)
+      );
+      --#{$prefix}btn-active-border-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-pressed-background,
+        var(--#{$prefix}color-#{$color}-alt-pressed-background)
+      );
+
+      --#{$prefix}btn-disabled-color: var(--#{$prefix}button-text-basic-color-disabled-foreground);
+      --#{$prefix}btn-disabled-bg: var(--#{$prefix}button-text-basic-color-disabled-background);
+      --#{$prefix}btn-disabled-border-color: var(--#{$prefix}button-text-basic-color-disabled-background);
+
+      --#{$prefix}btn-focus-only-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
+        var(--#{$prefix}color-#{$color}-alt-default-foreground)
+      );
+      --#{$prefix}btn-focus-only-border-color: transparent;
+      --#{$prefix}btn-check-active-hover-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-activeHovered-foreground,
+        var(--#{$prefix}color-#{$color}-alt-activeHovered-foreground)
+      );
+      --#{$prefix}btn-check-active-hover-bg: var(
+        --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
+        var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
+      );
+      --#{$prefix}btn-check-active-hover-border-color: var(
+        --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
+        var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
+      );
+    }
 
     --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
         varWithDefault(

package/styles/scss/components/card/_card.scss

@@ -42,7 +42,7 @@
   }
 
   .card-text {
-    margin-block-end: var(--#{$prefix}card-text-block-end);
+    margin-block-end: var(--#{$prefix}card-text-margin-block-end);
 
     &:last-child {
       margin-block-end: 0;

package/styles/scss/components/collapse/_collapse.scss

@@ -1,3 +1,4 @@
+@use 'sass:meta';
 @import '../link/link.mixins';
 
 // @deprecated - will be removed in version 21
@@ -59,7 +60,11 @@ button.df-collapse {
 
   display: inline-flex;
   align-items: center;
-  gap: var(--#{$prefix}btn-icon-margin-end);
+  @if meta.variable-exists(df-btn-group-hover-box-shadow-color) {
+    gap: var(--#{$prefix}spacing-2);
+  } @else {
+    gap: var(--#{$prefix}btn-icon-margin-end);
+  }
 
   color: var(--#{$prefix}collapse-link-color);
   text-decoration: var(--#{$prefix}collapse-link-decoration);

package/styles/scss/components/datepicker/_datepicker.scss

@@ -4,15 +4,13 @@
   width: 100%;
 }
 
-.ngb-dp-navigation-select .form-select {
-  @include ltr {
-    padding-left: 0.5rem;
-    padding-right: 0;
-  }
-  @include rtl {
-    background-position: left 0.25rem center;
-    padding-left: 0;
-    padding-right: 0.5rem;
+.ngb-dp-navigation-select {
+  column-gap: var(--#{$prefix}spacing-2);
+  margin-inline: var(--#{$prefix}spacing-2);
+
+  .form-select {
+    padding-inline: var(--#{$prefix}spacing-3);
+    padding-block: var(--#{$prefix}spacing-2);
   }
 }
 
@@ -44,8 +42,8 @@
   justify-content: var(--#{$prefix}datepicker-navigation-arrow-justify-contents);
 
   .ngb-dp-arrow-btn {
-    padding-right: 0;
-    padding-left: 0;
+    margin-inline: 0;
+    padding-inline: 0;
     min-width: var(--#{$prefix}datepicker-arrow-width);
     height: var(--#{$prefix}datepicker-arrow-height);
     border-radius: var(--#{$prefix}datepicker-arrow-border-radius);

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

@@ -74,6 +74,12 @@ body,
       font-weight: var(--#{$prefix}dropdown-toggle-font-weight); // Fix IE11 bug
     }
 
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      &.btn-sm {
+        --#{$prefix}dropdown-toggle-margin: var(--#{$prefix}spacing-2);
+      }
+    }
+
     & > [class*='icon-']:before {
       margin-inline-end: var(--#{$prefix}dropdown-toggle-margin);
     }