@dialpad/dialtone 8.21.3 → 8.21.5

package/lib/dist/js/dialtone_health_check/deprecated_icons.js

@@ -1,105 +0,0 @@
-/* eslint-disable complexity */
-const fs = require('fs');
-const iconRegex = /.*@dialpad\/dialtone\/(vue\/.*|.+\.svg)/gim;
-const brandIconsList = [
-  'IconAirtable',
-  'IconAmex',
-  'IconAppStoreBadge',
-  'IconApple',
-  'IconAsana',
-  'IconBrandDialpadMeetings',
-  'IconBrandDialpad',
-  'IconBullhorn',
-  'IconClockify',
-  'IconCopperCrm',
-  'IconDialpadAi',
-  'IconDinersClub',
-  'IconDiscover',
-  'IconEvernote',
-  'IconFacebook',
-  'IconFreshsalesCrm',
-  'IconFront',
-  'IconGmail',
-  'IconGoogleBusinessMessaging',
-  'IconGoogleCalendar',
-  'IconGoogleDocs',
-  'IconGoogleDrive',
-  'IconGoogleGlyph',
-  'IconGreenhouse',
-  'IconHighfive',
-  'IconHubspot',
-  'IconInstagram',
-  'IconIntercom',
-  'IconJcb',
-  'IconJiraServiceDesk',
-  'IconLineMessenger',
-  'IconLinkedin',
-  'IconMaestro',
-  'IconMastercard',
-  'IconMessenger',
-  'IconMicrosoftDynamics365',
-  'IconMicrosoftTeams',
-  'IconMicrosoft',
-  'IconMiro',
-  'IconMondayCom',
-  'IconOffice365',
-  'IconPipedrive',
-  'IconPlayStoreBadge',
-  'IconSalesforceGlyph',
-  'IconSalesforceLogo',
-  'IconServicenow',
-  'IconSlack',
-  'IconSnapchat',
-  'IconTelegram',
-  'IconTiktok',
-  'IconToggl',
-  'IconTwitter',
-  'IconUnionPay',
-  'IconViber',
-  'IconVisa',
-  'IconWeChat',
-  'IconWhatsapp',
-  'IconZendesk',
-  'IconZohoCrm',
-  'IconZohoDesk',
-  'IconZoho',
-  'IconZoom',
-];
-let totalIconsCount = 0;
-
-function isBrandIcon (source) {
-  const iconName = source.split('/').pop().slice(0, -2);
-  return brandIconsList.includes(iconName);
-}
-const main = (files, noLineNumbers) => {
-  try {
-    for (const file of files) {
-      const data = fs.readFileSync(file, 'utf8');
-      const lines = data.split('\n');
-      let iconCount = 0;
-
-      for (const [lineNumber, line] of lines.entries()) {
-        const iconMatch = iconRegex.exec(line);
-        // If import doesn't match or is a brand or spot icon, continue
-        if (!iconMatch ||
-            iconMatch.input.includes('/brand/') ||
-            iconMatch.input.includes('/spot/') ||
-            isBrandIcon(iconMatch.input)) continue;
-
-        if (!noLineNumbers) {
-          console.log(`\tdeprecated icon usage found on line ${lineNumber + 1}: ${iconMatch.input}`);
-        }
-        iconCount++;
-        totalIconsCount++;
-      }
-      if (iconCount > 0) {
-        console.log(`${file}: ${iconCount} Deprecated icons found`);
-      }
-    }
-    console.log(`Found ${totalIconsCount} total deprecated icons usage in this directory.`);
-  } catch (err) {
-    console.error(err);
-  }
-};
-
-module.exports = main;

package/lib/dist/js/dialtone_health_check/index.js

@@ -1,82 +0,0 @@
-#!/usr/bin/env node
-
-/* Will search the files in the provided directory for any properties that are not set to dialtone values.
-   It does this by simply checking whether the property is set to a less @variable or CSS var such as var(--val).
-   It does not compare to an actual list of dialtone token values so it is not perfect, and sometimes gives false
-   positives. This will however give a pretty good idea of where dialtone values aren't being used that should.
-
-   Searches some key properties by default as shown in the defaultSearch array below. You are however not limited to
-   this, you can make this application search any css property you wish. See the below options or run this application
-   with the -h switch for more details. */
-
-const path = require('path');
-const fs = require('fs');
-const { exit } = require('process');
-const { docopt } = require('docopt');
-const nonDialtoneProperties = require('./non_dialtone_properties');
-const deprecatedIcons = require('./deprecated_icons');
-
-const doc = `
-Usage:
-  ./dialtone_health_check <path> [options] (--icons|--properties) [<properties>]
-
-Examples:
-  ./dialtone_health_check <path> --ext=vue,js --no-line-numbers --icons
-  ./dialtone_health_check <path> --ext=vue,js --properties color,background-color
-  ./dialtone_health_check <path> --ext=vue,js --icons --properties color,background-color
-
-Arguments:
-  <properties>                CSS Properties to search. Default properties if list is not provided:
-                              color,background-color,border-color,font-family
-  <path>                      The directory to recursively search all files in.
-
-Options:
-  -p --properties             Verify the usage of non-dialtone properties.
-  -i --icons                  Verify the status of icons migration.
-  -h --help                   Show this screen.
-  --ext=<ext>                 Filter by file extension. comma separate to filter multiple. ex: js,vue
-  --no-line-numbers           Only output files and their total count, do not output individual instances and 
-                              their line number.
-`;
-const options = docopt(doc);
-const extensionFilters = options['--ext']?.split(',') ?? [''];
-const searchProperties = options['--properties'];
-const properties = options['<properties>']?.split(',');
-const noLineNumbers = options['--no-line-numbers'];
-const searchIcons = options['--icons'];
-const files = [];
-
-function fromDir (startPath, fileExtension) {
-  if (!fs.existsSync(startPath)) {
-    console.error('Directory not found');
-    exit(1);
-  }
-
-  const results = [];
-  const files = fs.readdirSync(startPath);
-  for (let i = 0; i < files.length; i++) {
-    const filename = path.join(startPath, files[i]);
-    const stat = fs.lstatSync(filename);
-    if (stat.isDirectory()) {
-      results.push(...fromDir(filename, fileExtension)); // recurse
-    } else if (filename.endsWith(fileExtension)) {
-      results.push(filename);
-    }
-  }
-  return results;
-}
-
-extensionFilters.forEach(extension => {
-  files.push(...fromDir(options['<path>'], extension));
-});
-if (files.length <= 0) {
-  console.error('No files found in directory');
-  exit(1);
-}
-if (!searchProperties && !searchIcons) {
-  console.error('You must set at least one flag [--icons|--properties]');
-  exit(1);
-}
-
-searchProperties && nonDialtoneProperties(properties, files, noLineNumbers);
-searchIcons && deprecatedIcons(files, noLineNumbers);

package/lib/dist/js/dialtone_health_check/non_dialtone_properties.js

@@ -1,44 +0,0 @@
-const fs = require('fs');
-const defaultSearch = [
-  'color',
-  'background-color',
-  'border-color',
-  'font-family',
-];
-let totalPropertiesCount = 0;
-
-const main = (props = defaultSearch, files, noLineNumbers) => {
-  const regex = props.map(property => {
-    return new RegExp(`^\\s*${property}:\\s(?:(?!var\\(--))(?:(?!@)).*`, 'gm');
-  });
-  try {
-    for (const file of files) {
-      const data = fs.readFileSync(file, 'utf8');
-      const lines = data.split('\n');
-      let propertiesMatch;
-      let propertiesCount = 0;
-
-      for (const [lineNumber, line] of lines.entries()) {
-        regex.forEach(re => {
-        // eslint-disable-next-line no-cond-assign
-          while (propertiesMatch = re.exec(line)) {
-            if (!noLineNumbers) {
-              console.log(`\tnon-dialtone property found on line ${lineNumber + 1}: ${propertiesMatch}`);
-            }
-            propertiesCount++;
-            totalPropertiesCount++;
-          }
-        });
-      }
-      if (propertiesCount > 0) {
-        console.log(`${file}: ${propertiesCount}`);
-      }
-    }
-    console.log(`Found ${totalPropertiesCount} total ${props.join(', ')} \
-   CSS properties that are not dialtone in this directory.`);
-  } catch (err) {
-    console.error(err);
-  }
-};
-
-module.exports = main;

package/lib/dist/js/dialtone_migration_helper/configs/box-shadows.mjs

@@ -1,19 +0,0 @@
-export default {
-  description:
-    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
-    '- Replaces var(--bs-{kind}) with var(--dt-shadow-{kind})\n\t' +
-      'eg. var(--bs-sm) with var(--dt-shadow-small)\n' +
-    '- Replaces @bs-{kind} with var(--dt-shadow-{kind})\n\t' +
-      'eg. @bs-card with var(--dt-shadow-card)\n',
-  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
-  expressions: [
-    // CSS variables
-    { from: /@bs-sm|var\(--bs-sm\)/gi, to: 'var(--dt-shadow-small)' },
-    { from: /@bs-md|var\(--bs-md\)/gi, to: 'var(--dt-shadow-medium)' },
-    { from: /@bs-lg|var\(--bs-lg\)/gi, to: 'var(--dt-shadow-large)' },
-    { from: /@bs-xl|var\(--bs-xl\)/gi, to: 'var(--dt-shadow-extra-large)' },
-    { from: /@bs-card|var\(--bs-card\)/gi, to: 'var(--dt-shadow-card)' },
-    { from: /@bs-focus-ring|var\(--bs-focus-ring\)/gi, to: 'var(--dt-shadow-focus)' },
-    { from: /@bs-focus-ring-inset|var\(--bs-focus-ring-inset\)/gi, to: 'var(--dt-shadow-focus-inset)' },
-  ],
-};

package/lib/dist/js/dialtone_migration_helper/configs/colors.mjs

@@ -1,69 +0,0 @@
-export default {
-    description:
-        'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
-        '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
-            'eg. var(--black-200) with var(--dt-color-black-200)\n' +
-        '- Replaces @{color}-{stop} with var(--dt-color-{color}-{stop})\n\t' +
-            'eg. @red-100 with var(--dt-color-red-100)\n' +
-        '- Replaces var(--fc-{kind}) with var(--dt-color-foreground-{kind})\n\t' +
-            'eg. var(--fc-success-inverted) with var(--dt-color-foreground-success-inverted)\n',
-    patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
-    expressions: [
-        // ------------------------------------------------------------ //
-        //                            Colors                            //
-        // ------------------------------------------------------------ //
-        // LESS variables
-        {
-            from: /@(black|purple|magenta|gold|green|red|blue|tan)(-[1-9]00)/g,
-            to: 'var(--dt-color-$1$2)',
-        },
-        // Neutral LESS variables
-        {
-            from: /@(white|black)/g,
-            to: 'var(--dt-color-neutral-$1)',
-        },
-        // CSS variables
-        {
-            from: /var\(--(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)(-(h|s|l|hsl))?\)/g,
-            to: 'var(--dt-color-$1$2$3)',
-        },
-        // Neutral CSS variables
-        {
-            from: /var\(--(white|black)(-(h|s|l|hsl))?\)/g,
-            to: 'var(--dt-color-neutral-$1$2)',
-        },
-        // Background colors
-        {
-            // eslint-disable-next-line max-len
-            from: /var\(--bgc-(primary|secondary|moderate|bold|strong|contrast|critical|success|warning|info)(-(subtle|opaque|subtle-opaque|strong))?\)/g,
-            to: 'var(--dt-color-surface-$1$2)',
-        },
-        // Special Background color cases
-        {
-            // eslint-disable-next-line max-len
-            from: /var\(--bgc-(error|danger)(-(subtle|opaque|subtle-opaque|strong))?\)/g,
-            to: 'var(--dt-color-surface-critical$2)',
-        },
-        // Border colors
-        {
-            // eslint-disable-next-line max-len
-            from: /var\(--bc-(default|subtle|moderate|bold|focus|critical|success|warning|brand|ai|accent)(-(inverted|subtle|strong|subtle-inverted|strong-inverted))?\)/g,
-            to: 'var(--dt-color-border-$1$2)',
-        },
-        // Font colors
-        {
-            // eslint-disable-next-line max-len
-            from: /var\(--fc-(primary|secondary|tertiary|muted|placeholder|disabled|critical|success|warning)(-(strong|inverted|strong-inverted))?\)/g,
-            to: 'var(--dt-color-foreground-$1$2)',
-        },
-        // Special Font color cases
-        {
-            from: /var\(--fc-(error|danger)(-(strong|inverted|strong-inverted))?\)/g,
-            to: 'var(--dt-color-foreground-critical$2)',
-        },
-        {
-            from: /d-(fc|bc)-white/g,
-            to: 'd-$1-neutral-white',
-        },
-    ],
-};

package/lib/dist/js/dialtone_migration_helper/configs/fonts.mjs

@@ -1,49 +0,0 @@
-export default {
-  description:
-    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
-    '- Replaces var(--fs-{stop}) with var(--dt-font-size-{stop})\n\t' +
-      'eg. var(--fs-200) with var(--dt-font-size-200)\n' +
-    '- Replaces @fs-{stop} with var(--dt-font-size-{stop})\n\t' +
-      'eg. @fs-100-tv with var(--dt-font-size-100-tv)\n' +
-    '- Replaces var(--fw-{kind}) with var(--dt-font-weight-{kind})\n\t' +
-      'eg. var(--fw-medium) with var(--dt-font-weight-medium)\n' +
-    '- Replaces @fw-{kind} with var(--dt-font-weight-{kind})\n\t' +
-      'eg. @fw-semibold with var(--dt-font-weight-semi-bold)\n' +
-    '- Replaces var(--lh-{stop}) with var(--dt-font-line-height-{stop})\n\t' +
-      'eg. var(--lh-200) with var(--dt-font-line-height-200)\n' +
-    '- Replaces @lh-{stop} with var(--dt-font-line-height-{stop})\n\t' +
-      'eg. @lh-100 with var(--dt-font-line-height-100)\n' +
-    '- Replaces var(--ff-{kind}) with var(--dt-font-family-{kind})\n\t' +
-      'eg. var(--ff-mono) with var(--dt-font-family-mono)',
-  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,json}'],
-  expressions: [
-    // ------------------------------------------------------------ //
-    //                            Fonts                             //
-    // ------------------------------------------------------------ //
-    // Size variables
-    {
-      from: /@fs(-[0-9]+)(-(mobile|tc8|tv))?|var\(--fs(-[0-9]+)(-(mobile|tc8|tv))?\)/g,
-      to: 'var(--dt-font-size$1$2$4$5)',
-    },
-    // Weight variables
-    {
-      from: /@fw-(normal|medium|bold)|var\(--fw-(normal|medium|bold)\)/g,
-      to: 'var(--dt-font-weight-$1$2)',
-    },
-    // Special weight case
-    {
-      from: /@fw-semibold|var\(--fw-semibold\)/g,
-      to: 'var(--dt-font-weight-semi-bold)',
-    },
-      // Line heights
-    {
-      from: /@lh(-[0-9]+)|var\(--lh(-[0-9]+)\)/g,
-      to: 'var(--dt-font-line-height$1$2)',
-    },
-    // Font family
-    {
-      from: /var\(--ff-(mono)\)/g,
-      to: 'var(--dt-font-family-$1)',
-    },
-  ],
-};

package/lib/dist/js/dialtone_migration_helper/configs/size-and-space.mjs

@@ -1,124 +0,0 @@
-export default {
-  description:
-    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
-    '- Replaces var(--{size}-{stop}) with var(--dt-size-{stop})\n\t' +
-      'eg. var(--size-200) with var(--dt-size-200)\n' +
-    '- Replaces @{size}{stop} with var(--dt-size-{stop})\n\t' +
-      'eg. @size4 with var(--dt-size-300)\n' +
-    '- Replaces @icon{size} with var(--dt-icon-size-{stop})\n\t' +
-      'eg. @icon12 with var(--dt-icon-size-100)\n' +
-    '- Replaces var(--su{stop}) with var(--dt-size-{stop})\n\t' +
-      'eg. var(--su0) with var(--dt-size-0)\n' +
-    '- Replaces @su{stop} with var(--dt-size-{stop})\n\t' +
-      'eg. @su8 with var(--dt-size-400)\n' +
-    '- Replaces var(--sun{stop}) with var(--dt-size-{stop}-negative)\n\t' +
-      'eg. var(--sun1) with var(--dt-size-100-negative)\n' +
-    '- Replaces var(--br{stop}) with var(--dt-size-radius-{stop})\n\t' +
-      'eg. var(--br4) with var(--dt-size-radius-300)\n' +
-    '- Replaces @br{stop} with var(--dt-size-radius-{stop})\n\t' +
-      'eg. @br-pill with var(--dt-size-radius-pill)\n',
-  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
-  expressions: [
-    // ------------------------------------------------------------ //
-    //                        Size and Space                        //
-    // ------------------------------------------------------------ //
-    {
-      from: /var\(--(size|space)(-[0-9]+)(-negative)?\)/gi,
-      to: 'var(--dt-$1$2$3)',
-    },
-
-    // Size LESS variables
-    { from: /@size0\b|var\(--size0\)/g, to: 'var(--dt-size-0)' },
-    { from: /@size1\b|var\(--size1\)/g, to: 'var(--dt-size-100)' },
-    { from: /@size2\b|var\(--size2\)/g, to: 'var(--dt-size-200)' },
-    { from: /@size4\b|var\(--size4\)/g, to: 'var(--dt-size-300)' },
-    { from: /@size6\b|var\(--size6\)/g, to: 'var(--dt-size-350)' },
-    { from: /@size8\b|var\(--size8\)/g, to: 'var(--dt-size-400)' },
-    { from: /@size12\b|var\(--size12\)/g, to: 'var(--dt-size-450)' },
-    { from: /@size16\b|var\(--size16\)/g, to: 'var(--dt-size-500)' },
-    { from: /@size20\b|var\(--size20\)/g, to: 'var(--dt-size-525)' },
-    { from: /@size24\b|var\(--size24\)/g, to: 'var(--dt-size-550)' },
-    { from: /@size32\b|var\(--size32\)/g, to: 'var(--dt-size-600)' },
-    { from: /@size42\b|var\(--size42\)/g, to: 'var(--dt-size-625)' },
-    { from: /@size48\b|var\(--size48\)/g, to: 'var(--dt-size-650)' },
-    { from: /@size64\b|var\(--size64\)/g, to: 'var(--dt-size-700)' },
-    { from: /@size72\b|var\(--size72\)/g, to: 'var(--dt-size-720)' },
-    { from: /@size84\b|var\(--size84\)/g, to: 'var(--dt-size-730)' },
-    { from: /@size96\b|var\(--size96\)/g, to: 'var(--dt-size-750)' },
-    { from: /@size102\b|var\(--size102\)/g, to: 'var(--dt-size-760)' },
-    { from: /@size114\b|var\(--size114\)/g, to: 'var(--dt-size-775)' },
-    { from: /@size128\b|var\(--size128\)/g, to: 'var(--dt-size-800)' },
-    { from: /@size164\b|var\(--size164\)/g, to: 'var(--dt-size-825)' },
-    { from: /@size216\b|var\(--size216\)/g, to: 'var(--dt-size-875)' },
-    { from: /@size264\b|var\(--size264\)/g, to: 'var(--dt-size-905)' },
-    { from: /@size332\b|var\(--size332\)/g, to: 'var(--dt-size-925)' },
-    { from: /@size464\b|var\(--size464\)/g, to: 'var(--dt-size-975)' },
-    { from: /@size512\b|var\(--size512\)/g, to: 'var(--dt-size-1000)' },
-    { from: /@size628\b|var\(--size628\)/g, to: 'var(--dt-size-1020)' },
-    { from: /@size764\b|var\(--size764\)/g, to: 'var(--dt-size-1040)' },
-    { from: /@size828\b|var\(--size828\)/g, to: 'var(--dt-size-1060)' },
-    { from: /@size912\b|var\(--size912\)/g, to: 'var(--dt-size-1080)' },
-    { from: /@size1024\b|var\(--size1024\)/g, to: 'var(--dt-size-1100)' },
-    { from: /@size1140\b|var\(--size1140\)/g, to: 'var(--dt-size-1115)' },
-    { from: /@size1268\b|var\(--size1268\)/g, to: 'var(--dt-size-1120)' },
-    { from: /@size1340\b|var\(--size1340\)/g, to: 'var(--dt-size-1130)' },
-
-    // Icon variables
-    { from: /@icon12\b|var\(--icon12\)/g, to: 'var(--dt-icon-size-100)' },
-    { from: /@icon14\b|var\(--icon14\)/g, to: 'var(--dt-icon-size-200)' },
-    { from: /@icon16\b|var\(--icon16\)/g, to: 'var(--dt-size-500)' },
-    { from: /@icon18\b|var\(--icon18\)/g, to: 'var(--dt-icon-size-300)' },
-    { from: /@icon20\b|var\(--icon20\)/g, to: 'var(--dt-icon-size-400)' },
-    { from: /@icon24\b|var\(--icon24\)/g, to: 'var(--dt-icon-size-500)' },
-    { from: /@icon32\b|var\(--icon32\)/g, to: 'var(--dt-icon-size-600)' },
-    { from: /@icon48\b|var\(--icon48\)/g, to: 'var(--dt-size-650)' },
-    { from: /@icon64\b|var\(--icon64\)/g, to: 'var(--dt-size-700)' },
-    // Variable prefixed with negative, must go before positive spacing
-    { from: /-@su1\b|-var\(--su1\)|[^-]var\(--sun1\)/g, to: 'var(--dt-space-100-negative)' },
-    { from: /-@su2\b|-var\(--su2\)|[^-]var\(--sun2\)/g, to: 'var(--dt-space-200-negative)' },
-    { from: /-@su4\b|-var\(--su4\)|[^-]var\(--sun4\)/g, to: 'var(--dt-space-300-negative)' },
-    { from: /-@su6\b|-var\(--su6\)|[^-]var\(--sun6\)/g, to: 'var(--dt-space-350-negative)' },
-    { from: /-@su8\b|-var\(--su8\)|[^-]var\(--sun8\)/g, to: 'var(--dt-space-400-negative)' },
-    { from: /-@su12\b|-var\(--su12\)|[^-]var\(--sun12\)/g, to: 'var(--dt-space-450-negative)' },
-    { from: /-@su16\b|-var\(--su16\)|[^-]var\(--sun16\)/g, to: 'var(--dt-space-500-negative)' },
-    { from: /-@su24\b|-var\(--su24\)|[^-]var\(--sun24\)/g, to: 'var(--dt-space-550-negative)' },
-    { from: /-@su32\b|-var\(--su32\)|[^-]var\(--sun32\)/g, to: 'var(--dt-space-600-negative)' },
-    { from: /-@su48\b|-var\(--su48\)|[^-]var\(--sun48\)/g, to: 'var(--dt-space-650-negative)' },
-    { from: /-@su64\b|-var\(--su64\)|[^-]var\(--sun64\)/g, to: 'var(--dt-space-700-negative)' },
-    { from: /-@su72\b|-var\(--su72\)|[^-]var\(--sun72\)/g, to: 'var(--dt-space-720-negative)' },
-    { from: /-@su84\b|-var\(--su84\)|[^-]var\(--sun84\)/g, to: 'var(--dt-space-730-negative)' },
-    { from: /-@su96\b|-var\(--su96\)|[^-]var\(--sun96\)/g, to: 'var(--dt-space-750-negative)' },
-    { from: /-@su102\b|-var\(--su102\)|[^-]var\(--sun102\)/g, to: 'var(--dt-space-760-negative)' },
-    { from: /-@su114\b|-var\(--su114\)|[^-]var\(--sun114\)/g, to: 'var(--dt-space-775-negative)' },
-    { from: /-@su128\b|-var\(--su128\)|[^-]var\(--sun128\)/g, to: 'var(--dt-space-800-negative)' },
-    // Positive spacing
-    { from: /@su0\b|var\(--su0\)/g, to: 'var(--dt-space-0)' },
-    { from: /@su1\b|var\(--su1\)/g, to: 'var(--dt-space-100)' },
-    { from: /@su2\b|var\(--su2\)/g, to: 'var(--dt-space-200)' },
-    { from: /@su4\b|var\(--su4\)/g, to: 'var(--dt-space-300)' },
-    { from: /@su6\b|var\(--su6\)/g, to: 'var(--dt-space-350)' },
-    { from: /@su8\b|var\(--su8\)/g, to: 'var(--dt-space-400)' },
-    { from: /@su12\b|var\(--su12\)/g, to: 'var(--dt-space-450)' },
-    { from: /@su16\b|var\(--su16\)/g, to: 'var(--dt-space-500)' },
-    { from: /@su24\b|var\(--su24\)/g, to: 'var(--dt-space-550)' },
-    { from: /@su32\b|var\(--su32\)/g, to: 'var(--dt-space-600)' },
-    { from: /@su48\b|var\(--su48\)/g, to: 'var(--dt-space-650)' },
-    { from: /@su64\b|var\(--su64\)/g, to: 'var(--dt-space-700)' },
-    { from: /@su72\b|var\(--su72\)/g, to: 'var(--dt-space-720)' },
-    { from: /@su84\b|var\(--su84\)/g, to: 'var(--dt-space-730)' },
-    { from: /@su96\b|var\(--su96\)/g, to: 'var(--dt-space-750)' },
-    { from: /@su102\b|var\(--su102\)/g, to: 'var(--dt-space-760)' },
-    { from: /@su114\b|var\(--su114\)/g, to: 'var(--dt-space-775)' },
-    { from: /@su128\b|var\(--su128\)/g, to: 'var(--dt-space-800)' },
-    // Border radius
-    { from: /@br-(pill|circle)|var\(--br-(pill|circle)\)/g, to: 'var(--dt-size-radius-$1$2)' },
-    { from: /@br0|var\(--br0\)/g, to: 'var(--dt-size-radius-0)' },
-    { from: /@br2\b|var\(--br2\)/g, to: 'var(--dt-size-radius-200)' },
-    { from: /@br4|var\(--br4\)/g, to: 'var(--dt-size-radius-300)' },
-    { from: /@br8|var\(--br8\)/g, to: 'var(--dt-size-radius-400)' },
-    { from: /@br12|var\(--br12\)/g, to: 'var(--dt-size-450)' },
-    { from: /@br16|var\(--br16\)/g, to: 'var(--dt-size-radius-500)' },
-    { from: /@br24|var\(--br24\)/g, to: 'var(--dt-size-550)' },
-    { from: /@br32|var\(--br32\)/g, to: 'var(--dt-size-radius-600)' },
-  ],
-};