@dialpad/dialtone-css 1.0.0

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

@@ -0,0 +1,105 @@
+/* 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.cjs

@@ -0,0 +1,82 @@
+#!/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.cjs

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,124 @@
+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)' },
+  ],
+};