@design-factory/design-factory 20.0.2 → 21.0.0-next.1

package/design-factory.scss

@@ -1,3 +0,0 @@
-@use 'bootstrap/scss/functions';
-@import './styles/scss/themes/brand2023/variables';
-@import './styles/scss/df-styles';

package/fesm2022/design-factory-design-factory-tokens-style-dictionary.mjs

@@ -1,358 +0,0 @@
-import StyleDictionary from 'style-dictionary';
-import { transformTypes, transforms as transforms$1 } from 'style-dictionary/enums';
-import { fileHeader, sortByReference, usesReferences } from 'style-dictionary/utils';
-import Color from 'colorjs.io';
-import { EOL } from 'os';
-
-/**
- * Determines the best contrasting color from a list of foreground colors against a given background color.
- *
- * @param backgroundColor - The background color to compare against.
- * @param foregroundColors - An array of tuples where each tuple contains a color name and its corresponding color value.
- * @returns A tuple containing the name and value of the best contrasting color.
- *
- * The function iterates through the provided foreground colors and calculates the contrast ratio
- * against the background color. If a color with a contrast ratio greater than 4.5 is found, it is
- * immediately returned. If no such color is found, the color with the highest contrast ratio is returned.
- *
- * The function logs a message if no color meets the minimum contrast ratio of 4.5:1.
- */
-function getContrastedColor(backgroundColor, foregroundColors) {
-    const minContrast = 4.5;
-    const ratios = [];
-    let bestContrast = 0;
-    let bestMatch = ['', ''];
-    const refColor = new Color(backgroundColor);
-    for (const color of foregroundColors) {
-        if (color[1]) {
-            const contrast = refColor.contrast(new Color(color[1]), 'WCAG21');
-            if (contrast > minContrast) {
-                return color;
-            }
-            if (contrast > bestContrast) {
-                bestContrast = contrast;
-                bestMatch = color;
-            }
-            ratios.push(contrast.toFixed(2));
-        }
-    }
-    /*console.log(
-      `Found no color leading to ${minContrast}:1 contrast ratio against ${backgroundColor}. Best contrast ratio found: ${bestContrast.toFixed(2)}`
-    );
-    console.log(`Found ratios: ${ratios.join(', ')}, best match returned: ${bestMatch}`);*/
-    return bestMatch;
-}
-const hexaColorRegExp = /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/;
-/**
- * Converts a hexadecimal color string to an RGB array.
- *
- * @param hex - The hexadecimal color string (e.g., "#RRGGBB" or "#RGB").
- * @returns An array containing the RGB values [r, g, b] if the input is valid, otherwise `undefined`.
- */
-function hexToRgb(hex) {
-    hex = hex.replace(/^#/, '');
-    if (!hexaColorRegExp.test(hex)) {
-        return undefined;
-    }
-    if (hex.length === 3) {
-        hex = hex
-            .split('')
-            .map((char) => char + char)
-            .join('');
-    }
-    const r = parseInt(hex.substring(0, 2), 16);
-    const g = parseInt(hex.substring(2, 4), 16);
-    const b = parseInt(hex.substring(4, 6), 16);
-    return [r, g, b];
-}
-/**
- * Generates computed theme colors.
- * This function helps manage rgb values, as bootstrap requies rgb values for colors.
- * It also computes the best foreground color for each theme background color.
- */
-function getComputedThemeColors(tokens) {
-    const computedColors = [];
-    const dfThemeNeutral = tokens['df']['theme']?.['neutral'];
-    const foregroundColors = [
-        [`df-theme-neutral-0`, dfThemeNeutral?.['0']?.$value ?? '#ffffff'],
-        [`df-theme-neutral-100`, dfThemeNeutral?.['100']?.$value ?? '#1a1a1a'],
-        [`df-theme-neutral-110`, dfThemeNeutral?.['110']?.$value ?? '#000000']
-    ];
-    for (const [name, values] of Object.entries(tokens['df']['theme'] ?? {})) {
-        for (const [key, value] of Object.entries(values)) {
-            const color = value.$value;
-            computedColors.push({
-                name: `df-theme-${name}-${key}-rgb`,
-                $type: 'rgbRef',
-                $ref: `df-theme-${name}-${key}`,
-                $value: hexToRgb(color)?.join(', ') || ''
-            });
-            // Compute the best foreground color
-            const foregroundVar = getContrastedColor(color, foregroundColors)[0];
-            computedColors.push({
-                name: `df-theme-${name}-${key}-color`,
-                $type: 'ref',
-                $ref: foregroundVar
-            });
-            computedColors.push({
-                name: `df-theme-${name}-${key}-color-rgb`,
-                $type: 'ref',
-                $ref: `${foregroundVar}-rgb`
-            });
-        }
-    }
-    return computedColors;
-}
-const tier3ScopingMap = {
-    button: `.btn,${EOL}  .btn-close`, //needing .btn-close because the alert uses it// TODO: remove when wrapping alert
-    badge: '.badge',
-    footer: '.df-app-footer',
-    navbar: '.navbar',
-    link: `a,${EOL}  .df-app-footer,${EOL}  button.df-collapse` //collapse is a button styled as a link
-};
-const splitTokens = (allTokens) => {
-    const rootTokens = [];
-    const tier3Tokens = [];
-    // divide tokens in tier 3 and root tokens (all the remaining)
-    allTokens.forEach((token) => {
-        if (token.path[1] && Object.keys(tier3ScopingMap).includes(token.path[1])) {
-            tier3Tokens.push(token);
-        }
-        else {
-            rootTokens.push(token);
-        }
-    });
-    //grouping tokens into on object having as key the tier3 key and value the array of tokens
-    const groupedT3 = tier3Tokens.reduce((acc, token) => {
-        const key = token.path[1];
-        if (acc[key]) {
-            acc[key].push(token);
-        }
-        else {
-            acc[key] = [token];
-        }
-        return acc;
-    }, {});
-    return { rootTokens, groupedT3 };
-};
-
-const FONT_WEIGHT_FIGMA2CSS = {
-    light: '300',
-    regular: '400',
-    medium: '500',
-    bold: '700'
-};
-/**
- * Design Factory custom Style-Dictionary transforms
- */
-const transforms = {
-    /**
-     * Transform used to quote wrap font-family tokens.
-     * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.
-     */
-    fontFamily: '@design-factory/font-family',
-    /**
-     * Transform used to map font-weight tokens into useable css values.
-     * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.
-     */
-    fontWeight: '@design-factory/font-weight',
-    /**
-     * Transform used to create token names based on DF token naming convention.
-     */
-    tokenName: '@design-factory/token-name'
-};
-/**
- * Design Factory custom Style-Dictionary transform group
- */
-const transformGroups = {
-    /**
-     * Transform group that applies standard scss transforms and custom Design Factory transforms.
-     */
-    designFactory: '@design-factory'
-};
-/**
- * Design Factory custom Style-Dictionary filters
- */
-const filters = {
-    /**
-     * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}
-     */
-    scssVars: '@design-factory/scss-vars-filter',
-    /**
-     * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}
-     */
-    cssRoot: '@design-factory/root-filter'
-};
-/**
- * Design Factory custom Style-Dictionary formats
- */
-const formats = {
-    /**
-     * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}
-     */
-    scssVars: '@design-factory/scss-vars',
-    /**
-     * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}
-     */
-    cssRoot: '@design-factory/css-root'
-};
-/**
- * Registers Design Factory custom transforms, formats and filters with Style Dictionary.
- */
-const registerDf = () => {
-    /**
-     * Our font-family tokens do not have the expected $type font-family property, so we have to manage them manually
-     **/
-    StyleDictionary.registerTransform({
-        name: transforms.fontFamily,
-        type: transformTypes.value,
-        filter: (token) => token.name.includes('-font-') && (token.name.includes('family') || token.name.includes('Family')),
-        transform: (token) => `'${token.$value}'`
-    });
-    /**
-     * Our font tokens do not have the expected $type property, so we have to manage them manually
-     **/
-    StyleDictionary.registerTransform({
-        name: transforms.fontWeight,
-        type: transformTypes.value,
-        filter: (token) => token.name.startsWith('df-typo-weight-'),
-        transform: (token) => FONT_WEIGHT_FIGMA2CSS[token.$value.trim().toLowerCase()] || token.$value
-    });
-    /**
-     * Cannot use style-dictionary camelCase transform as we have some a specific naming convention for our tokens
-     **/
-    StyleDictionary.registerTransform({
-        name: transforms.tokenName,
-        type: transformTypes.name,
-        transform: (token) => token.path.join('-')
-    });
-    /**
-     * This is the Design Factory transform group, including DF custom transforms.
-     */
-    StyleDictionary.registerTransformGroup({
-        name: transformGroups.designFactory,
-        transforms: [
-            transforms$1.attributeCti,
-            transforms.tokenName,
-            transforms$1.timeSeconds,
-            transforms$1.htmlIcon,
-            transforms$1.sizeRem,
-            transforms$1.sizePxToRem,
-            transforms$1.colorCss,
-            transforms$1.assetUrl,
-            transforms.fontFamily,
-            transforms.fontWeight,
-            transforms$1.cubicBezierCss,
-            // object-value tokens
-            transforms$1.strokeStyleCssShorthand,
-            transforms$1.borderCssShorthand,
-            transforms$1.typographyCssShorthand,
-            transforms$1.transitionCssShorthand,
-            transforms$1.shadowCssShorthand
-        ]
-    });
-    /**
-     * This filter removes tokens ending with 'Italic' as italic styles are handled completely differently.
-     */
-    StyleDictionary.registerFilter({
-        name: filters.scssVars,
-        filter: (token) => !token.name.endsWith('Italic')
-    });
-    /**
-     * This filter removes colorPalette tokens from the dictionary.
-     * To be used with the @design-factory/css-root format.
-     */
-    StyleDictionary.registerFilter({
-        name: filters.cssRoot,
-        filter: (token) => !token.name.endsWith('Italic') && !token.name.startsWith('df-colorPalette')
-    });
-    /**
-     * Then we register the DF custom formats
-     */
-    /**
-     * This format generates a SCSS file with all the tokens as sass variables.
-     * For references, it will not map to the original token sass var, but to the original token as a CSS var.
-     */
-    StyleDictionary.registerFormat({
-        name: formats.scssVars,
-        format: async ({ dictionary, options, file }) => {
-            const { usesDtcg, withDefault, outputReferences } = options;
-            const header = await fileHeader({
-                file,
-                formatting: { lineSeparator: EOL, header: `/**${EOL}`, footer: `${EOL} */${EOL}${EOL}` }
-            });
-            const tokens = dictionary.tokens;
-            let allTokens = dictionary.allTokens;
-            allTokens = [...allTokens].sort(sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
-            return (`${header}${outputReferences ? `$prefix: df- !default;${EOL}${EOL}` : ''}` +
-                allTokens.reduce((acc, token) => {
-                    let value = token.$value;
-                    if (outputReferences && usesReferences(token.original.$value)) {
-                        if (token.original.$value.startsWith('{df.')) {
-                            value = `var(--#{$prefix}${token.original.$value.slice(4, -1).replace(/\./g, '-')})`;
-                        }
-                        else {
-                            value = `var(--${token.original.$value.slice(1, -1).replace(/\./g, '-')})`;
-                        }
-                    }
-                    return `${acc}$${token.name}: ${value}${withDefault ? ' !default' : ''};${EOL}`;
-                }, ''));
-        }
-    });
-    /**
-     * This format generates a CSS file with all tokens applied in root.
-     * Should be used with the @design-factory/root-filter filter.
-     */
-    StyleDictionary.registerFormat({
-        name: formats.cssRoot,
-        format: async ({ dictionary, options, file }) => {
-            const { usesDtcg, outputReferences, prefix = 'df-', selector = 'html:root' } = options;
-            const header = await fileHeader({
-                file,
-                formatting: { lineSeparator: EOL, header: `/**${EOL}`, footer: `${EOL} */${EOL}${EOL}` }
-            });
-            const tokens = dictionary.tokens;
-            let allTokens = dictionary.allTokens;
-            allTokens = [...allTokens].sort(sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
-            const { rootTokens, groupedT3 } = splitTokens(allTokens);
-            const getValueName = (token) => {
-                let value = token.$value;
-                if (outputReferences && usesReferences(token.original.$value)) {
-                    value = `var(--${prefix}${token.original.$value.slice(4, -1).replace(/\./g, '-')})`;
-                }
-                const name = token.name.startsWith('df-') ? `${prefix}${token.name.slice(3)}` : token.name;
-                return { value, name };
-            };
-            const computedThemeColors = getComputedThemeColors(dictionary.tokens);
-            return (`${header}${selector} {${EOL}` +
-                rootTokens.reduce((acc, token) => {
-                    const { value, name } = getValueName(token);
-                    return `${acc}  --${name}: ${value};${EOL}`;
-                }, '') +
-                (computedThemeColors.length
-                    ? `  /* Computed theme colors */${EOL}${computedThemeColors.reduce((acc, token) => {
-                        return `${acc}  --${prefix}${token.name.slice(3)}: ${token.$type === 'rgbRef' ? token.$value : `var(--${prefix}${token.$ref.slice(3)})`};${EOL}`;
-                    }, '')}`
-                    : '') +
-                (Object.keys(groupedT3).length
-                    ? `${EOL}  /* Tier 3 Scoped tokens */${EOL}` +
-                        Object.entries(groupedT3).reduce((acc, [key, tokens]) => {
-                            return (`${acc}  ${tier3ScopingMap[key]} {${EOL}` +
-                                tokens.reduce((innerAcc, token) => {
-                                    const { value, name } = getValueName(token);
-                                    return `${innerAcc}    --${name}: ${value};${EOL}`;
-                                }, '') +
-                                `  }${EOL}`);
-                        }, '')
-                    : '') +
-                `}${EOL}`);
-        }
-    });
-};
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { filters, formats, registerDf, transformGroups, transforms };
-//# sourceMappingURL=design-factory-design-factory-tokens-style-dictionary.mjs.map

package/fesm2022/design-factory-design-factory-tokens-style-dictionary.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-factory-design-factory-tokens-style-dictionary.mjs","sources":["../../../projects/design-factory/tokens/style-dictionary/utils.ts","../../../projects/design-factory/tokens/style-dictionary/config.ts","../../../projects/design-factory/tokens/style-dictionary/design-factory-design-factory-tokens-style-dictionary.ts"],"sourcesContent":["import Color from 'colorjs.io';\nimport type { TransformedToken, TransformedTokens } from 'style-dictionary/types';\nimport { EOL } from 'os';\n\n/**\n * Determines the best contrasting color from a list of foreground colors against a given background color.\n *\n * @param backgroundColor - The background color to compare against.\n * @param foregroundColors - An array of tuples where each tuple contains a color name and its corresponding color value.\n * @returns A tuple containing the name and value of the best contrasting color.\n *\n * The function iterates through the provided foreground colors and calculates the contrast ratio\n * against the background color. If a color with a contrast ratio greater than 4.5 is found, it is\n * immediately returned. If no such color is found, the color with the highest contrast ratio is returned.\n *\n * The function logs a message if no color meets the minimum contrast ratio of 4.5:1.\n */\nfunction getContrastedColor(backgroundColor: string, foregroundColors: [string, string | undefined][]) {\n  const minContrast = 4.5;\n  const ratios = [];\n  let bestContrast = 0;\n  let bestMatch: [string, string] = ['', ''];\n  const refColor = new Color(backgroundColor);\n  for (const color of foregroundColors) {\n    if (color[1]) {\n      const contrast = refColor.contrast(new Color(color[1]), 'WCAG21');\n      if (contrast > minContrast) {\n        return color;\n      }\n      if (contrast > bestContrast) {\n        bestContrast = contrast;\n        bestMatch = color as [string, string];\n      }\n      ratios.push(contrast.toFixed(2));\n    }\n  }\n  /*console.log(\n    `Found no color leading to ${minContrast}:1 contrast ratio against ${backgroundColor}. Best contrast ratio found: ${bestContrast.toFixed(2)}`\n  );\n  console.log(`Found ratios: ${ratios.join(', ')}, best match returned: ${bestMatch}`);*/\n  return bestMatch;\n}\n\nconst hexaColorRegExp = /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/;\n\n/**\n * Converts a hexadecimal color string to an RGB array.\n *\n * @param hex - The hexadecimal color string (e.g., \"#RRGGBB\" or \"#RGB\").\n * @returns An array containing the RGB values [r, g, b] if the input is valid, otherwise `undefined`.\n */\nfunction hexToRgb(hex: string) {\n  hex = hex.replace(/^#/, '');\n\n  if (!hexaColorRegExp.test(hex)) {\n    return undefined;\n  }\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map((char) => char + char)\n      .join('');\n  }\n\n  const r = parseInt(hex.substring(0, 2), 16);\n  const g = parseInt(hex.substring(2, 4), 16);\n  const b = parseInt(hex.substring(4, 6), 16);\n\n  return [r, g, b];\n}\n\nexport type ComputedThemeColor =\n  | { name: string; $type: 'ref'; $ref: string }\n  | { name: string; $type: 'rgbRef'; $ref: string; $value: string };\n\n/**\n * Generates computed theme colors.\n * This function helps manage rgb values, as bootstrap requies rgb values for colors.\n * It also computes the best foreground color for each theme background color.\n */\nexport function getComputedThemeColors(tokens: TransformedTokens): ComputedThemeColor[] {\n  const computedColors: ComputedThemeColor[] = [];\n  const dfThemeNeutral = tokens['df']['theme']?.['neutral'];\n  const foregroundColors: [string, string | undefined][] = [\n    [`df-theme-neutral-0`, dfThemeNeutral?.['0']?.$value ?? '#ffffff'],\n    [`df-theme-neutral-100`, dfThemeNeutral?.['100']?.$value ?? '#1a1a1a'],\n    [`df-theme-neutral-110`, dfThemeNeutral?.['110']?.$value ?? '#000000']\n  ];\n  for (const [name, values] of Object.entries(tokens['df']['theme'] ?? {})) {\n    for (const [key, value] of Object.entries(values as object)) {\n      const color = value.$value;\n      computedColors.push({\n        name: `df-theme-${name}-${key}-rgb`,\n        $type: 'rgbRef',\n        $ref: `df-theme-${name}-${key}`,\n        $value: hexToRgb(color)?.join(', ') || ''\n      });\n\n      // Compute the best foreground color\n      const foregroundVar = getContrastedColor(color, foregroundColors)[0];\n      computedColors.push({\n        name: `df-theme-${name}-${key}-color`,\n        $type: 'ref',\n        $ref: foregroundVar\n      });\n      computedColors.push({\n        name: `df-theme-${name}-${key}-color-rgb`,\n        $type: 'ref',\n        $ref: `${foregroundVar}-rgb`\n      });\n    }\n  }\n  return computedColors;\n}\n\nexport type Tier3Key = keyof typeof tier3ScopingMap;\nexport const tier3ScopingMap = {\n  button: `.btn,${EOL}  .btn-close`, //needing .btn-close because the alert uses it// TODO: remove when wrapping alert\n  badge: '.badge',\n  footer: '.df-app-footer',\n  navbar: '.navbar',\n  link: `a,${EOL}  .df-app-footer,${EOL}  button.df-collapse` //collapse is a button styled as a link\n};\n\nexport const splitTokens = (allTokens: TransformedToken[]) => {\n  const rootTokens: TransformedToken[] = [];\n  const tier3Tokens: TransformedToken[] = [];\n\n  // divide tokens in tier 3 and root tokens (all the remaining)\n  allTokens.forEach((token) => {\n    if (token.path[1] && Object.keys(tier3ScopingMap).includes(token.path[1])) {\n      tier3Tokens.push(token);\n    } else {\n      rootTokens.push(token);\n    }\n  });\n\n  //grouping tokens into on object having as key the tier3 key and value the array of tokens\n  const groupedT3 = tier3Tokens.reduce(\n    (acc, token) => {\n      const key = token.path[1] as Tier3Key;\n      if (acc[key]) {\n        acc[key].push(token);\n      } else {\n        acc[key] = [token];\n      }\n      return acc;\n    },\n    {} as Record<Tier3Key, TransformedToken[]>\n  );\n\n  return { rootTokens, groupedT3 };\n};\n","import StyleDictionary, { type TransformedToken } from 'style-dictionary';\nimport { transforms as sdTransforms, transformTypes } from 'style-dictionary/enums';\nimport { fileHeader, sortByReference, usesReferences } from 'style-dictionary/utils';\nimport { getComputedThemeColors, splitTokens, Tier3Key, tier3ScopingMap } from './utils';\nimport { EOL } from 'os';\n\nconst FONT_WEIGHT_FIGMA2CSS: Record<string, string> = {\n  light: '300',\n  regular: '400',\n  medium: '500',\n  bold: '700'\n};\n\n/**\n * Design Factory custom Style-Dictionary transforms\n */\nexport const transforms = {\n  /**\n   * Transform used to quote wrap font-family tokens.\n   * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.\n   */\n  fontFamily: '@design-factory/font-family',\n  /**\n   * Transform used to map font-weight tokens into useable css values.\n   * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.\n   */\n  fontWeight: '@design-factory/font-weight',\n  /**\n   * Transform used to create token names based on DF token naming convention.\n   */\n  tokenName: '@design-factory/token-name'\n} as const;\n\n/**\n * Design Factory custom Style-Dictionary transform group\n */\nexport const transformGroups = {\n  /**\n   * Transform group that applies standard scss transforms and custom Design Factory transforms.\n   */\n  designFactory: '@design-factory'\n} as const;\n\n/**\n * Design Factory custom Style-Dictionary filters\n */\nexport const filters = {\n  /**\n   * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}\n   */\n  scssVars: '@design-factory/scss-vars-filter',\n  /**\n   * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}\n   */\n  cssRoot: '@design-factory/root-filter'\n} as const;\n\n/**\n * Design Factory custom Style-Dictionary formats\n */\nexport const formats = {\n  /**\n   * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}\n   */\n  scssVars: '@design-factory/scss-vars',\n  /**\n   * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}\n   */\n  cssRoot: '@design-factory/css-root'\n} as const;\n\n/**\n * Registers Design Factory custom transforms, formats and filters with Style Dictionary.\n */\nexport const registerDf = () => {\n  /**\n   * Our font-family tokens do not have the expected $type font-family property, so we have to manage them manually\n   **/\n  StyleDictionary.registerTransform({\n    name: transforms.fontFamily,\n    type: transformTypes.value,\n    filter: (token) =>\n      token.name.includes('-font-') && (token.name.includes('family') || token.name.includes('Family')),\n    transform: (token) => `'${token.$value}'`\n  });\n  /**\n   * Our font tokens do not have the expected $type property, so we have to manage them manually\n   **/\n  StyleDictionary.registerTransform({\n    name: transforms.fontWeight,\n    type: transformTypes.value,\n    filter: (token) => token.name.startsWith('df-typo-weight-'),\n    transform: (token) => FONT_WEIGHT_FIGMA2CSS[token.$value.trim().toLowerCase()] || token.$value\n  });\n\n  /**\n   * Cannot use style-dictionary camelCase transform as we have some a specific naming convention for our tokens\n   **/\n  StyleDictionary.registerTransform({\n    name: transforms.tokenName,\n    type: transformTypes.name,\n    transform: (token) => token.path.join('-')\n  });\n\n  /**\n   * This is the Design Factory transform group, including DF custom transforms.\n   */\n  StyleDictionary.registerTransformGroup({\n    name: transformGroups.designFactory,\n    transforms: [\n      sdTransforms.attributeCti,\n      transforms.tokenName,\n      sdTransforms.timeSeconds,\n      sdTransforms.htmlIcon,\n      sdTransforms.sizeRem,\n      sdTransforms.sizePxToRem,\n      sdTransforms.colorCss,\n      sdTransforms.assetUrl,\n      transforms.fontFamily,\n      transforms.fontWeight,\n      sdTransforms.cubicBezierCss,\n      // object-value tokens\n      sdTransforms.strokeStyleCssShorthand,\n      sdTransforms.borderCssShorthand,\n      sdTransforms.typographyCssShorthand,\n      sdTransforms.transitionCssShorthand,\n      sdTransforms.shadowCssShorthand\n    ]\n  });\n\n  /**\n   * This filter removes tokens ending with 'Italic' as italic styles are handled completely differently.\n   */\n  StyleDictionary.registerFilter({\n    name: filters.scssVars,\n    filter: (token) => !token.name.endsWith('Italic')\n  });\n  /**\n   * This filter removes colorPalette tokens from the dictionary.\n   * To be used with the @design-factory/css-root format.\n   */\n  StyleDictionary.registerFilter({\n    name: filters.cssRoot,\n    filter: (token) => !token.name.endsWith('Italic') && !token.name.startsWith('df-colorPalette')\n  });\n\n  /**\n   * Then we register the DF custom formats\n   */\n\n  /**\n   * This format generates a SCSS file with all the tokens as sass variables.\n   * For references, it will not map to the original token sass var, but to the original token as a CSS var.\n   */\n  StyleDictionary.registerFormat({\n    name: formats.scssVars,\n    format: async ({ dictionary, options, file }) => {\n      const { usesDtcg, withDefault, outputReferences } = options;\n      const header = await fileHeader({\n        file,\n        formatting: { lineSeparator: EOL, header: `/**${EOL}`, footer: `${EOL} */${EOL}${EOL}` }\n      });\n\n      const tokens = dictionary.tokens;\n      let allTokens = dictionary.allTokens;\n      allTokens = [...allTokens].sort(\n        sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg })\n      );\n\n      return (\n        `${header}${outputReferences ? `$prefix: df- !default;${EOL}${EOL}` : ''}` +\n        allTokens.reduce((acc, token) => {\n          let value = token.$value;\n          if (outputReferences && usesReferences(token.original.$value)) {\n            if (token.original.$value.startsWith('{df.')) {\n              value = `var(--#{$prefix}${token.original.$value.slice(4, -1).replace(/\\./g, '-')})`;\n            } else {\n              value = `var(--${token.original.$value.slice(1, -1).replace(/\\./g, '-')})`;\n            }\n          }\n          return `${acc}$${token.name}: ${value}${withDefault ? ' !default' : ''};${EOL}`;\n        }, '')\n      );\n    }\n  });\n  /**\n   * This format generates a CSS file with all tokens applied in root.\n   * Should be used with the @design-factory/root-filter filter.\n   */\n  StyleDictionary.registerFormat({\n    name: formats.cssRoot,\n    format: async ({ dictionary, options, file }) => {\n      const { usesDtcg, outputReferences, prefix = 'df-', selector = 'html:root' } = options;\n      const header = await fileHeader({\n        file,\n        formatting: { lineSeparator: EOL, header: `/**${EOL}`, footer: `${EOL} */${EOL}${EOL}` }\n      });\n\n      const tokens = dictionary.tokens;\n      let allTokens = dictionary.allTokens;\n      allTokens = [...allTokens].sort(\n        sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg })\n      );\n\n      const { rootTokens, groupedT3 } = splitTokens(allTokens);\n\n      const getValueName = (token: TransformedToken) => {\n        let value = token.$value;\n        if (outputReferences && usesReferences(token.original.$value)) {\n          value = `var(--${prefix}${token.original.$value.slice(4, -1).replace(/\\./g, '-')})`;\n        }\n        const name = token.name.startsWith('df-') ? `${prefix}${token.name.slice(3)}` : token.name;\n        return { value, name };\n      };\n\n      const computedThemeColors = getComputedThemeColors(dictionary.tokens);\n      return (\n        `${header}${selector} {${EOL}` +\n        rootTokens.reduce((acc, token) => {\n          const { value, name } = getValueName(token);\n          return `${acc}  --${name}: ${value};${EOL}`;\n        }, '') +\n        (computedThemeColors.length\n          ? `  /* Computed theme colors */${EOL}${computedThemeColors.reduce((acc, token) => {\n              return `${acc}  --${prefix}${token.name.slice(3)}: ${token.$type === 'rgbRef' ? token.$value : `var(--${prefix}${token.$ref.slice(3)})`};${EOL}`;\n            }, '')}`\n          : '') +\n        (Object.keys(groupedT3).length\n          ? `${EOL}  /* Tier 3 Scoped tokens */${EOL}` +\n            Object.entries(groupedT3).reduce((acc, [key, tokens]) => {\n              return (\n                `${acc}  ${tier3ScopingMap[key as Tier3Key]} {${EOL}` +\n                tokens.reduce((innerAcc, token) => {\n                  const { value, name } = getValueName(token);\n                  return `${innerAcc}    --${name}: ${value};${EOL}`;\n                }, '') +\n                `  }${EOL}`\n              );\n            }, '')\n          : '') +\n        `}${EOL}`\n      );\n    }\n  });\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './config';\n"],"names":["sdTransforms"],"mappings":"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"}

package/styles/scss/_common.mixins.scss

@@ -1,30 +0,0 @@
-@import './utilities/form.mixins';
-@mixin rtl {
-  @if $df-enable-rtl {
-    [dir='rtl'] & {
-      @content;
-    }
-  }
-}
-
-@mixin ltr {
-  @if $df-enable-rtl {
-    [dir='ltr'] &,
-    html:not([dir='rtl']) & {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-@mixin heading {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @content;
-  }
-}

package/styles/scss/_common.root.scss

@@ -1,70 +0,0 @@
-:root {
-  --#{$prefix}disabled-color: #{$df-disabled-color};
-  --#{$prefix}disabled-bg-color: #{$gray-100};
-  --#{$prefix}focus-outline: #{$df-focus-outline};
-  --#{$prefix}disabled-cursor: #{$df-disabled-cursor};
-  --#{$prefix}link-hover-text-decoration: #{$df-link-hover-text-decoration};
-  --#{$prefix}disabled-opacity: #{$df-disabled-opacity};
-  --#{$prefix}font-family: #{$df-font-family};
-
-  --#{$prefix}dark-primary: #{$dark-primary};
-  --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
-  --#{$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};
-  --#{$prefix}focused-box-shadow: #{$df-focused-box-shadow};
-  --#{$prefix}box-shadow-blur: #{$focus-ring-blur};
-  --#{$prefix}box-shadow-width: #{$focus-ring-width};
-  --#{$prefix}box-shadow-opacity: #{$focus-ring-opacity};
-  --#{$prefix}box-shadow-color: #{$focus-ring-color};
-
-  // Form
-  --#{$prefix}form-valid-color-rgb: #{to-rgb($form-valid-color)};
-  --#{$prefix}form-invalid-border-color: #{variable-switch-brand2023(
-      'color-danger-alt-default-border',
-      $form-invalid-color
-    )};
-  --#{$prefix}form-invalid-color: #{variable-switch-brand2023(
-      'color-danger-alt-default-foreground',
-      $form-invalid-color
-    )};
-  --#{$prefix}form-invalid-color-rgb: #{variable-switch-brand2023(
-      'color-danger-alt-default-border-rgb',
-      to-rgb($form-invalid-color)
-    )};
-  --#{$prefix}form-warning-color: #{variable-switch-brand2023(
-      'color-warning-alt-default-foreground',
-      $df-form-feedback-warning-color
-    )};
-  --#{$prefix}form-warning-color-rgb: #{variable-switch-brand2023(
-      'color-warning-alt-default-foreground-rgb',
-      to-rgb($df-form-feedback-warning-color)
-    )};
-  --#{$prefix}form-feedback-warning-color: #{$df-form-feedback-warning-color};
-  --#{$prefix}form-feedback-help-warning-color: #{$df-form-feedback-help-warning-color};
-  --#{$prefix}form-feedback-warning-icon: #{$df-form-feedback-warning-icon};
-
-  @each $breakpoint, $value in $grid-breakpoints {
-    --#{$prefix}breakpoint-#{$breakpoint}: #{$value};
-  }
-
-  @each $color, $value in $shade-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-rgb {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text {
-    --#{$prefix}#{$color}-color: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text-rgb {
-    --#{$prefix}#{$color}-color-rgb: #{$value};
-  }
-}

package/styles/scss/_common.scss

@@ -1,51 +0,0 @@
-.mandatory-indicator {
-  // add
-  color: #{variable-switch-brand2023('color-danger-alt-default-foreground', $df-mandatory-indicator-color)};
-  font-weight: $df-mandatory-indicator-font-weight;
-  margin-left: $df-mandatory-indicator-margin;
-  margin-right: $df-mandatory-indicator-margin;
-}
-
-.df-subtitle {
-  // add
-  color: $df-subtitle-color;
-}
-
-@each $extension, $ratio in $df-size-ratios {
-  .df-font-#{$extension} {
-    --#{$prefix}body-font-size: #{get-sizing-brand2023($extension, $ratio)};
-    font-size: var(--#{$prefix}body-font-size);
-  }
-}
-
-// To be used to remove text-decoration on icon of DF
-.df-icon-wtd {
-  &::before {
-    display: inline-block;
-    text-decoration: none;
-  }
-}
-
-.df-focused {
-  border-radius: $df-focused-border-radius;
-  box-shadow: $df-focused-box-shadow;
-  border: $df-focused-border;
-  outline: var(--#{$prefix}focus-outline); //disable default
-}
-
-@each $degree, $value in $df-degrees {
-  .df-transform-r-#{$degree} {
-    transform: rotate($value);
-  }
-}
-
-.df-w-0 {
-  width: 0;
-}
-
-// CSS class for common app container
-.df-app-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}

package/styles/scss/_common.variables.scss

@@ -1,79 +0,0 @@
-@use 'sass:math';
-@use 'sass:map';
-// Common variables DF
-
-// stylelint-disable-next-line scss/dollar-variable-pattern
-$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;
-$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
-// @deprecated - will be removed in version 21, use $spacer-4 instead of '75'
-// stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
-$spacers: map.merge(
-  (
-    '75': (
-      calc($spacer * 0.75)
-    )
-  ),
-  $spacers
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-size-ratios: map.merge(
-  (
-    'sm': math.div($font-size-sm, $font-size-base),
-    'lg': math.div($font-size-lg, $font-size-base)
-  ),
-  $df-size-ratios
-);
-
-$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-enable-rtl: false !default;
-
-// Disabled state
-$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-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;
-
-//Windows High Contrast Mode
-$df-high-contrast-color: rgba(0, 0, 0, 0) !default;
-
-$df-degrees: (
-  0: 0deg,
-  45: 45deg,
-  90: 90deg,
-  135: 135deg,
-  180: 180deg,
-  225: 225deg,
-  270: 270deg,
-  315: 315deg,
-  360: 360deg
-) !default;