@design-factory/design-factory 17.1.0 → 18.0.1

package/schematics/migrations/18_0_0/media-object-border-0/index.d.ts

@@ -0,0 +1,6 @@
+import { Rule } from '@angular-devkit/schematics';
+/**
+ * This migration migrates css classes of the media-object in a card adding the class-border-0
+ * @returns the Rule to migrate the classes
+ */
+export default function mediaObjectBorderClassesUpdate(): Rule;

package/schematics/migrations/18_0_0/media-object-border-0/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = mediaObjectBorderClassesUpdate;
+const schematics_1 = require("@angular-devkit/schematics");
+const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
+const template_updater_1 = require("../../utils/template-updater");
+const compiler_host_1 = require("../../utils/typescript/compiler_host");
+function replaceHtmlContent(content) {
+    const regex = new RegExp(`(<[a-z]+\\s[^>]*\\sclass="|<[a-z]+\\sclass=")([^"]*)df-media-button-interactive([^"]*")`, 'g');
+    return content.replace(regex, (_match, g1, g2, g3) => {
+        if (g2.includes('card') || g3.includes('card')) {
+            return `${g1}${g2}df-media-button-interactive border-0${g3}`;
+        }
+        return _match;
+    });
+}
+/**
+ * This migration migrates css classes of the media-object in a card adding the class-border-0
+ * @returns the Rule to migrate the classes
+ */
+function mediaObjectBorderClassesUpdate() {
+    return async (tree) => {
+        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 `MediaObjectBorder0` migration.');
+        }
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContent);
+        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());
+            }
+        }
+    };
+}

package/schematics/migrations/18_0_0/stepper-classes-18.0.0/index.d.ts

@@ -0,0 +1,13 @@
+import { Rule } from '@angular-devkit/schematics';
+/**
+ * This migration migrates css classes of the stepper that were renamed as of DF 16.
+ * This migrates:
+ * - any element that contains the class df-stepper-step-600 into df-stepper-step-future
+ * - any element that contains the class df-stepper-outline-number-400 into df-stepper-outline-number-future
+ * - any element that contains the class df-stepper-step-brown into df-stepper-step-warning
+ * - any element that contains the class df-stepper-step-green into df-stepper-step-completed
+ * - any element that contains the class df-stepper-step-primary into df-stepper-step-current
+ *
+ * @returns the Rule to migrate the classes
+ */
+export default function stepperClassesUpdate(): Rule;

package/schematics/migrations/18_0_0/stepper-classes-18.0.0/index.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = stepperClassesUpdate;
+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 colorMapping = {
+    current: 'visited'
+};
+const stepperStepMapping = {};
+for (const key of Object.keys(colorMapping)) {
+    const replaced = colorMapping[key];
+    stepperStepMapping[`df-stepper-step-${key}`] = `df-stepper-step-${replaced}`;
+    stepperStepMapping[`df-stepper-outline-number-${key}`] = `df-stepper-outline-number-${replaced}`;
+    stepperStepMapping[`df-stepper-number-${key}`] = `df-stepper-outline-number-${replaced}`;
+}
+const updates = Object.keys(stepperStepMapping).map((key) => ({
+    key,
+    regex: new RegExp(`(<[a-z]+\\s[^>]*\\sclass="|<[a-z]+\\sclass=")([^"]*)${key}([^"]*")`, 'g'),
+    replacement: stepperStepMapping[key]
+}));
+function replaceHtmlContent(content) {
+    for (const update of updates) {
+        content = content.replace(update.regex, (_match, g1, g2, g3) => `${g1}${g2}${stepperStepMapping[update.key]}${g3}`);
+    }
+    return content;
+}
+/**
+ * This migration migrates css classes of the stepper that were renamed as of DF 16.
+ * This migrates:
+ * - any element that contains the class df-stepper-step-600 into df-stepper-step-future
+ * - any element that contains the class df-stepper-outline-number-400 into df-stepper-outline-number-future
+ * - any element that contains the class df-stepper-step-brown into df-stepper-step-warning
+ * - any element that contains the class df-stepper-step-green into df-stepper-step-completed
+ * - any element that contains the class df-stepper-step-primary into df-stepper-step-current
+ *
+ * @returns the Rule to migrate the classes
+ */
+function stepperClassesUpdate() {
+    return async (tree) => {
+        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 `NavbarUpdate` migration.');
+        }
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContent);
+        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());
+            }
+        }
+    };
+}

package/schematics/migrations/helpers.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dedent = void 0;
+exports.dedent = dedent;
 /**
  * Template string function that can be used to dedent the resulting
  * string literal. The smallest common indentation will be omitted.
@@ -29,4 +29,3 @@ function dedent(strings, ...values) {
     const result = minLineIndent > 0 ? joinedString.replace(omitMinIndentRegex, '') : joinedString;
     return result.replace(omitEmptyLineWhitespaceRegex, '');
 }
-exports.dedent = dedent;

package/schematics/migrations/migration.json

@@ -27,6 +27,21 @@
       "description": "As of Design Factory version 16, some css classes for the stepper have been renamed.",
       "version": "16.0.0",
       "factory": "./16_0_0/stepper-classes"
+    },
+    "stepper-classes-18.0.0": {
+      "description": "As of Design Factory version 18, some css classes for the stepper have been renamed.",
+      "version": "18.0.0",
+      "factory": "./18_0_0/stepper-classes-18.0.0"
+    },
+    "media-object-border-0": {
+      "description": "As of Design Factory version 18, the media object component needs border-0 class when inside a card.",
+      "version": "18.0.0",
+      "factory": "./18_0_0/media-object-border-0"
+    },
+    "font-awesome-6": {
+      "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"
     }
   }
 }

package/schematics/migrations/utils/component-resource-collector.js

@@ -8,9 +8,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentResourceCollector = void 0;
+const tslib_1 = require("tslib");
 const path_1 = require("path");
 const core_1 = require("@angular-devkit/core");
-const ts = require("typescript");
+const ts = tslib_1.__importStar(require("typescript"));
 const decorators_1 = require("./typescript/decorators");
 const functions_1 = require("./typescript/functions");
 const line_mappings_1 = require("./typescript/line-mappings");

package/schematics/migrations/utils/project_tsconfig_paths.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getProjectTsConfigPaths = void 0;
+exports.getProjectTsConfigPaths = getProjectTsConfigPaths;
 const core_1 = require("@angular-devkit/core");
 /**
  * Gets all tsconfig paths from a CLI project by reading the workspace configuration
@@ -44,7 +44,6 @@ async function getProjectTsConfigPaths(tree) {
         testPaths: [...testPaths]
     };
 }
-exports.getProjectTsConfigPaths = getProjectTsConfigPaths;
 /** Get options for all configurations for the passed builder target. */
 function* allTargetOptions(target) {
     if (target.options) {

package/schematics/migrations/utils/style-updater.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleUpdater = void 0;
+const tslib_1 = require("tslib");
 const core_1 = require("@angular-devkit/core");
 const component_resource_collector_1 = require("./component-resource-collector");
-const ts = require("typescript");
+const ts = tslib_1.__importStar(require("typescript"));
 const path_1 = require("path");
 class StyleUpdater {
     constructor(tree, replaceContent) {

package/schematics/migrations/utils/template-updater.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TemplateUpdater = void 0;
+const tslib_1 = require("tslib");
 const core_1 = require("@angular-devkit/core");
 const component_resource_collector_1 = require("./component-resource-collector");
-const ts = require("typescript");
+const ts = tslib_1.__importStar(require("typescript"));
 const path_1 = require("path");
 class TemplateUpdater {
     constructor(tree, replaceContent) {

package/schematics/migrations/utils/typescript/compiler_host.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canMigrateFile = exports.createProgramOptions = exports.createMigrationProgram = void 0;
+exports.createMigrationProgram = createMigrationProgram;
+exports.createProgramOptions = createProgramOptions;
+exports.canMigrateFile = canMigrateFile;
+const tslib_1 = require("tslib");
 const path_1 = require("path");
-const ts = require("typescript");
+const ts = tslib_1.__importStar(require("typescript"));
 const parse_tsconfig_1 = require("./parse_tsconfig");
 /**
  * Creates a TypeScript program instance for a TypeScript project within
@@ -18,7 +21,6 @@ function createMigrationProgram(tree, tsconfigPath, basePath, fakeFileRead, addi
     const { rootNames, options, host } = createProgramOptions(tree, tsconfigPath, basePath, fakeFileRead, additionalFiles);
     return ts.createProgram(rootNames, options, host);
 }
-exports.createMigrationProgram = createMigrationProgram;
 /**
  * Creates the options necessary to instantiate a TypeScript program.
  * @param tree Virtual file system tree that contains the source files.
@@ -39,7 +41,6 @@ function createProgramOptions(tree, tsconfigPath, basePath, fakeFileRead, additi
     const host = createMigrationCompilerHost(tree, options, basePath, fakeFileRead);
     return { rootNames: parsed.fileNames.concat(additionalFiles || []), options, host };
 }
-exports.createProgramOptions = createProgramOptions;
 function createMigrationCompilerHost(tree, options, basePath, fakeRead) {
     const host = ts.createCompilerHost(options, true);
     const defaultReadFile = host.readFile;
@@ -82,4 +83,3 @@ function canMigrateFile(basePath, sourceFile, program) {
     // https://github.com/angular/angular-cli/blob/0b0961c9c233a825b6e4bb59ab7f0790f9b14676/packages/angular_devkit/schematics/src/tree/host-tree.ts#L131
     return !(0, path_1.relative)(basePath, sourceFile.fileName).startsWith('..');
 }
-exports.canMigrateFile = canMigrateFile;

package/schematics/migrations/utils/typescript/decorators.js

@@ -7,8 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCallDecoratorImport = exports.getAngularDecorators = void 0;
-const ts = require("typescript");
+exports.getAngularDecorators = getAngularDecorators;
+exports.getCallDecoratorImport = getCallDecoratorImport;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
 const imports_1 = require("./imports");
 /**
  * Gets all decorators which are imported from an Angular package
@@ -23,7 +25,6 @@ function getAngularDecorators(typeChecker, decorators) {
         name: importData.symbolName
     }));
 }
-exports.getAngularDecorators = getAngularDecorators;
 function getCallDecoratorImport(typeChecker, decorator) {
     if (!ts.isCallExpression(decorator.expression)) {
         return null;
@@ -38,4 +39,3 @@ function getCallDecoratorImport(typeChecker, decorator) {
     }
     return identifier ? (0, imports_1.getImportOfIdentifier)(identifier, typeChecker) : null;
 }
-exports.getCallDecoratorImport = getCallDecoratorImport;

package/schematics/migrations/utils/typescript/functions.js

@@ -7,8 +7,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.unwrapExpression = void 0;
-const ts = require("typescript");
+exports.unwrapExpression = unwrapExpression;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
 /**
  * Unwraps a given expression TypeScript node. Expressions can be wrapped within multiple
  * parentheses. e.g. "(((({exp}))))()". The function should return the TypeScript node
@@ -17,4 +18,3 @@ const ts = require("typescript");
 function unwrapExpression(node) {
     return ts.isParenthesizedExpression(node) ? unwrapExpression(node.expression) : node;
 }
-exports.unwrapExpression = unwrapExpression;

package/schematics/migrations/utils/typescript/imports.js

@@ -7,8 +7,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImportOfIdentifier = void 0;
-const ts = require("typescript");
+exports.getImportOfIdentifier = getImportOfIdentifier;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
 /** Resolves the import of the specified identifier. */
 function getImportOfIdentifier(node, typeChecker) {
     // Free standing identifiers which resolve to an import will be handled
@@ -42,7 +43,6 @@ function getImportOfIdentifier(node, typeChecker) {
     }
     return null;
 }
-exports.getImportOfIdentifier = getImportOfIdentifier;
 /**
  * Resolves the import of the specified identifier. Expects the identifier to resolve
  * to a fine-grained import declaration with import specifiers.

package/schematics/migrations/utils/typescript/line-mappings.js

@@ -7,7 +7,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeLineStartsMap = exports.getLineAndCharacterFromPosition = void 0;
+exports.getLineAndCharacterFromPosition = getLineAndCharacterFromPosition;
+exports.computeLineStartsMap = computeLineStartsMap;
 /*
  * Line mapping utilities which can be used to retrieve line and character based
  * on an absolute character position in a given file. This functionality is similar
@@ -28,7 +29,6 @@ function getLineAndCharacterFromPosition(lineStartsMap, position) {
     const lineIndex = findClosestLineStartPosition(lineStartsMap, position);
     return { character: position - lineStartsMap[lineIndex], line: lineIndex };
 }
-exports.getLineAndCharacterFromPosition = getLineAndCharacterFromPosition;
 /**
  * Computes the line start map of the given text. This can be used in order to
  * retrieve the line and character of a given text position index.
@@ -53,7 +53,6 @@ function computeLineStartsMap(text) {
     result.push(pos);
     return result;
 }
-exports.computeLineStartsMap = computeLineStartsMap;
 /** Finds the closest line start for the given position. */
 function findClosestLineStartPosition(linesMap, position, low = 0, high = linesMap.length - 1) {
     while (low <= high) {

package/schematics/migrations/utils/typescript/parse_tsconfig.js

@@ -7,9 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseTsconfigFile = void 0;
-const path = require("path");
-const ts = require("typescript");
+exports.parseTsconfigFile = parseTsconfigFile;
+const tslib_1 = require("tslib");
+const path = tslib_1.__importStar(require("path"));
+const ts = tslib_1.__importStar(require("typescript"));
 function parseTsconfigFile(tsconfigPath, basePath) {
     const { config } = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
     const parseConfigHost = {
@@ -26,4 +27,3 @@ function parseTsconfigFile(tsconfigPath, basePath) {
     }
     return ts.parseJsonConfigFileContent(config, parseConfigHost, basePath, {});
 }
-exports.parseTsconfigFile = parseTsconfigFile;

package/schematics/migrations/utils/typescript/property-name.js

@@ -7,8 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasPropertyNameText = exports.getPropertyNameText = void 0;
-const ts = require("typescript");
+exports.getPropertyNameText = getPropertyNameText;
+exports.hasPropertyNameText = hasPropertyNameText;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
 /**
  * Gets the text of the given property name. Returns null if the property
  * name couldn't be determined statically.
@@ -19,9 +21,7 @@ function getPropertyNameText(node) {
     }
     return null;
 }
-exports.getPropertyNameText = getPropertyNameText;
 /** Checks whether the given property name has a text. */
 function hasPropertyNameText(node) {
     return ts.isStringLiteral(node) || ts.isNumericLiteral(node) || ts.isIdentifier(node);
 }
-exports.hasPropertyNameText = hasPropertyNameText;

package/schematics/ng-add/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ngAdd;
 const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
 const dependencies_1 = require("@schematics/angular/utility/dependencies");
@@ -45,6 +46,9 @@ function addDFStyles(options) {
         if (tree.exists(stylePath)) {
             const recorder = tree.beginUpdate(stylePath);
             recorder.insertRight(tree.readText(stylePath).length, `
+// If you are using webpack configuration - comment the following line to avoid preprocessor stylesheet errors
+$font-path: '@design-factory/design-factory/assets/fonts';
+
 @import '@design-factory/design-factory/design-factory.scss';
 `);
             tree.commitUpdate(recorder);
@@ -73,11 +77,6 @@ function addDFStyles(options) {
 function ngAdd(options) {
     return (_tree, context) => {
         context.addTask(new tasks_1.RunSchematicTask('@angular/localize', 'ng-add', options.project ? { project: options.project } : {}));
-        return (0, schematics_1.chain)([
-            addDependencies(),
-            install(),
-            addDFStyles(options)
-        ]);
+        return (0, schematics_1.chain)([addDependencies(), install(), addDFStyles(options)]);
     };
 }
-exports.default = ngAdd;

package/styles/scss/_common.mixins.scss

@@ -16,4 +16,15 @@
   } @else {
     @content;
   }
-}
+}
+
+@mixin heading {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}

package/styles/scss/_common.root.scss

@@ -12,6 +12,7 @@
   --#{$prefix}dark-primary-rgb: #{to-rgb($dark-primary)};
   --#{$prefix}white-color: #{color-contrast($white)};
   --#{$prefix}black-color: #{color-contrast($black)};
+  --#{$prefix}alt-body: #{to-rgb($body-color)};
 
   // Box-shadow
   --#{$prefix}box-shadow: #{$df-box-shadow};

package/styles/scss/_common.variables.scss

@@ -6,6 +6,7 @@
 $font-path: '../../../../assets/fonts' !default;
 $df-brand-primary-85: #006cd4 !default; // deprecated sass var
 $df-font-family: Design-Factory-icon !default;
+$df-font-awesome-font-family: 'Font Awesome 6 Pro' !default;
 $df-font-icon-color: $gray-600 !default;
 $df-mandatory-indicator-color: $danger !default;
 $df-mandatory-indicator-font-weight: 700 !default;
@@ -36,8 +37,9 @@ $df-size-ratios: map.merge(
 $df-cursor-type: pointer !default;
 $df-focused-border-radius: $border-radius !default;
 $df-focused-box-shadow: $input-btn-focus-box-shadow !default; // $input-btn-focus-box-shadow need to be customize for changing the whole box-shadow
-$df-focused-inset-box-shadow: inset 0 0 var(--#{$prefix}box-shadow-blur, $input-btn-focus-blur) var(--#{$prefix}box-shadow-width, $input-btn-focus-width) var(--#{$prefix}box-shadow-color, $input-btn-focus-color) !default; // default $input-btn-focus-box-shadow
-$df-focused-border: $border-width solid shades-css-var("primary") !default;
+$df-focused-inset-box-shadow: inset 0 0 var(--#{$prefix}box-shadow-blur, $input-btn-focus-blur)
+  var(--#{$prefix}box-shadow-width, $input-btn-focus-width) var(--#{$prefix}box-shadow-color, $input-btn-focus-color) !default; // default $input-btn-focus-box-shadow
+$df-focused-border: $border-width solid shades-css-var('primary') !default;
 $df-enable-rtl: false !default;
 
 // Disabled state
@@ -45,16 +47,18 @@ $df-disabled-bg-color: var(--#{$prefix}gray-100) !default;
 $df-disabled-color: var(--#{$prefix}gray-300) !default;
 $df-disabled-opacity: 1 !default;
 $df-disabled-cursor: not-allowed !default;
-$df-hover-bg-color: shades-css-var('white', 'bg-hover-color') !default; // hover on light (white) bg not button. Migrate to white color shade ?
+$df-hover-bg-color: var(
+  --#{$prefix}primary-100
+) !default; // hover on light (white) bg not button. Migrate to white color shade ?
 $df-focus-outline: none !default;
 
 // TODO propagate the usage of the variables for the link hover text-decoration
 $df-link-hover-text-decoration: none !default;
 // TODO same for visited / disabled / more link / icon in link ?
 // stylelint-disable scss/dollar-variable-pattern
-$shade-colors-rgb: map-loop($shade-colors, to-rgb, "$value") !default;
-$shade-colors-text: map-loop($shade-colors, color-contrast, "$value") !default;
-$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
+$shade-colors-rgb: map-loop($shade-colors, to-rgb, '$value') !default;
+$shade-colors-text: map-loop($shade-colors, color-contrast, '$value') !default;
+$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, '$value') !default;
 
 //Windows High Contrast Mode
 $df-high-contrast-color: rgba(0, 0, 0, 0) !default;

package/styles/scss/_variables.scss

@@ -57,3 +57,4 @@
 @import 'components/separator/separator.variables';
 @import 'components/toast/toast.variables';
 @import 'components/scrollspy/scrollspy.variables';
+@import 'components/tooltip/tooltip.variables';

package/styles/scss/agnosui/_variables.scss

@@ -1,59 +1,18 @@
-// stylelint-disable scss/dollar-variable-pattern
-// //slider variables
-$au-slider-color-background: $gray-300 !default;
-// $au-slider-font-size:                                1rem !default;
-// $au-slider-line-height:                              1.5 !default;
-// $au-slider-primary-size:                             100% !default;
-// $au-slider-secondary-size:                           0.25rem !default;
-// $au-slider-border-radius:                            0.125rem !default;
-// $au-slider-vertical-margin-inline-start:             1rem !default;
-// $au-slider-vertical-margin-inline-end:               3rem !default;
-// $au-slider-translate-vertical:                       translateY(-50%) !default;
-// $au-slider-translate-horizontal:                     translateX(-50%) !default;
-// $au-focus-ring-opacity:                              0.25 !default;
-// $au-focus-ring-width:                                0.25rem !default;
-// $au-focus-ring-color:                                rgba(#0d6efd, $au-focus-ring-opacity) !default;
-// $au-slider-handle-color:                             var(--#{$prefix}primary) !default;
-// $au-slider-handle-size:                              1.25rem !default;
-// $au-slider-handle-border:  none !default;
-$au-slider-handle-border-hover: 0.0625rem solid $white !default;
-// $au-slider-handle-border-radius:                     50% !default;
-// $au-slider-handle-outline:                           none !default;
-$au-slider-handle-focus-box-shadow: $btn-focus-box-shadow !default;
-// $au-slider-progress-color:                           var(--#{$prefix}primary) !default;
-// $au-slider-progress-height:                          0.25rem !default;
-// $au-slider-progress-vertical-transform:              rotate(90deg) !default;
-// $au-slider-margin-block-end:                         calc((#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2 + 0.5rem);
-// $au-slider-margin-block-start:                       calc((#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2 + #{$au-slider-font-size} * 1.5 + 0.5rem);
-$au-slider-label-now-font-weight: 500 !default;
-// $au-slider-label-font-weight:                        normal !default;
-// $au-slider-label-margin-block-start:                 calc(
-// 	-1 * (#{$au-slider-font-size} * #{$au-slider-line-height} + (#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2)
-//                                                      ) !default;
-// $au-slider-label-min-position:                       0 !default;
-// $au-slider-label-max-position:                       0 !default;
-// $au-slider-label-now-transform:                      translateX(-50%) !default;
-// $au-slider-label-vertical-margin-inline-start:       1rem !default;
-// $au-slider-label-vertical-min-transform:             translateY(-75%) !default;
-// $au-slider-label-vertical-max-transform:             translateY(-25%) !default;
-// $au-slider-label-vertical-white-space:               nowrap !default;
-$au-slider-label-vertical-min-top: calc(100% - 0.5rem) !default;
-$au-slider-label-vertical-max-top: 0.25rem !default;
-// $au-slider-label-vertical-now-transform:             translateY(-50%) !default;
-// $au-slider-clickable-area-translateY:                translateY(-50%) !default;
-// $au-slider-clickable-area-translateX:                translateX(-50%) !default;
-// $au-slider-clickable-area-main-size:                 1.5rem !default;
-// $au-slider-clickable-area-secondary-size:            100% !default;
-// $au-slider-clickable-area-vertical-flex-shrink:      0 !default;
-$au-slider-disabled-color: var(--#{$prefix}disabled-color) !default;
-// $au-slider-disabled-cursor:                          not-allowed !default;
-
-// $au-slider-bar-size-sm:                              0.2rem !default;
-// $au-slider-handle-size-sm:                           1rem !default;
-// $au-slider-font-size-sm:                             0.875rem !default;
-// $au-slider-offset-sm:                                0rem !default;
-
-// $au-slider-bar-size-lg:                              0.3125rem !default;
-// $au-slider-handle-size-lg:                           1.5rem !default;
-// $au-slider-font-size-lg:                             1.125rem !default;
-// $au-slider-offset-lg:                                0rem !default;
+@use '@agnos-ui/core-bootstrap/scss/variables' with (
+  $prefix: 'df-',
+  $au-slider-color-background: var(--#{$prefix}gray-300),
+  $au-slider-handle-hover-color: #{shades-css-var('primary', 'text-hover-color')},
+  $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')},
+  $au-slider-handle-focus-box-shadow: (
+    0 0 0 2px var(--#{$prefix}body-bg),
+    0 0 0 4px var(--#{$prefix}primary)
+  ),
+  $au-slider-handle-focus-hover-box-shadow: (
+    0 0 0 2px var(--#{$prefix}body-bg),
+    0 0 0 4px #{shades-css-var('primary', 'text-hover-color')}
+  ),
+  $au-slider-label-now-font-weight: 500,
+  $au-slider-label-vertical-min-top: calc(100% - 0.5rem),
+  $au-slider-label-vertical-max-top: 0.25rem,
+  $au-slider-disabled-color: var(--#{$prefix}disabled-color)
+);

package/styles/scss/bootstrap/_maps.scss

@@ -16,7 +16,7 @@
 $utilities-colors: map.merge(
   $theme-colors-rgb,
   (
-    "yellow": to-rgb($yellow)
+    'yellow': to-rgb($yellow)
   )
 ) !default;
 // scss-docs-end utilities-colors
@@ -37,10 +37,11 @@ $utilities-colors: map.merge(
 $utilities-bg: map.merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-bg),
-    "dark-primary": to-rgb($dark-primary),
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-bg),
+    'alt-body': to-rgb($body-color),
+    'dark-primary': to-rgb($dark-primary)
   )
 ) !default;
 // $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
@@ -48,4 +49,4 @@ $utilities-bg: map.merge(
 
 // $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
-// $gutters: $spacers !default;
+// $gutters: $spacers !default;

package/styles/scss/bootstrap/_rtl-styles-override.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @if $df-enable-rtl {
   [dir='rtl'] body {
     text-align: right;
@@ -20,7 +22,7 @@
 
     // Alert overrides
     .alert-dismissible .btn-close {
-      left:0;
+      left: 0;
       right: auto;
     }
 
@@ -67,7 +69,7 @@
     }
 
     // stylelint-disable declaration-no-important
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
       @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
@@ -103,7 +105,7 @@
       }
     }
 
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
       @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
@@ -122,4 +124,4 @@
       }
     }
   }
-}
+}