@dialpad/dialtone 8.3.1-version8.1 → 8.5.0-version8.1

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

@@ -2,16 +2,18 @@ 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',
+      '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: /var\(--bs-sm\)/gi, to: 'var(--dt-shadow-small)' },
-    { from: /var\(--bs-md\)/gi, to: 'var(--dt-shadow-medium)' },
-    { from: /var\(--bs-lg\)/gi, to: 'var(--dt-shadow-large)' },
-    { from: /var\(--bs-xl\)/gi, to: 'var(--dt-shadow-extra-large)' },
-    { from: /var\(--bs-card\)/gi, to: 'var(--dt-shadow-card)' },
-    { from: /var\(--bs-focus-ring\)/gi, to: 'var(--dt-shadow-focus)' },
-    { from: /var\(--bs-focus-ring-inset\)/gi, to: 'var(--dt-shadow-focus-inset)' },
+    { 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/build/js/dialtone_migration_helper/configs/colors.mjs

@@ -2,9 +2,11 @@ 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' +
+            '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',
+            'eg. var(--fc-success-inverted) with var(--dt-color-foreground-success-inverted)\n',
     patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md}'],
     expressions: [
         // ------------------------------------------------------------ //
@@ -12,7 +14,7 @@ export default {
         // ------------------------------------------------------------ //
         // LESS variables
         {
-            from: /@(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)/g,
+            from: /@(black|purple|magenta|gold|green|red|blue|tan)(-[1-9]00)/g,
             to: 'var(--dt-color-$1$2)',
         },
         // Neutral LESS variables

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

@@ -2,13 +2,19 @@ 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' +
+      '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' +
+      '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 var(--ff-{kind}) with var(--dt-font-family-{kind})\n\t' +
-    'eg. var(--ff-mono) with var(--dt-font-family-mono)',
+      '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: [
     // ------------------------------------------------------------ //
@@ -16,18 +22,23 @@ export default {
     // ------------------------------------------------------------ //
     // Size variables
     {
-      from: /var\(--fs(-[0-9]+)(-(mobile|tc8|tv))?\)/g,
-      to: 'var(--dt-font-size$1$2)',
+      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: /var\(--fw-(normal|medium|bold)\)/g,
-      to: 'var(--dt-font-weight-$1)',
+      from: /@fw-(normal|medium|bold)|var\(--fw-(normal|medium|bold)\)/g,
+      to: 'var(--dt-font-weight-$1$2)',
     },
     // Special weight case
     {
-      from: /var\(--fw-semibold\)/g,
+      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
     {

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

@@ -2,11 +2,21 @@ 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 var(--su{stop}) with var(--dt-size-{stop})\n\t' +
-    'eg. var(--su0) with var(--dt-size-0)\n' +
-  '- Replaces var(--sun{stop}) with var(--dt-size-{stop}-negative)\n\t' +
-    'eg. var(--sun1) with var(--dt-size-100-negative)\n',
+      '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: [
     // ------------------------------------------------------------ //
@@ -16,6 +26,43 @@ export default {
       from: /var\(--(size|space)(-[0-9]+)(-negative)?\)/gi,
       to: 'var(--dt-$1$2$3)',
     },
+
+    // Size LESS variables
+    { from: /@size0\b/g, to: 'var(--dt-size-0)' },
+    { from: /@size1\b/g, to: 'var(--dt-size-100)' },
+    { from: /@size2\b/g, to: 'var(--dt-size-200)' },
+    { from: /@size4\b/g, to: 'var(--dt-size-300)' },
+    { from: /@size6\b/g, to: 'var(--dt-size-350)' },
+    { from: /@size8\b/g, to: 'var(--dt-size-400)' },
+    { from: /@size12\b/g, to: 'var(--dt-size-450)' },
+    { from: /@size16\b/g, to: 'var(--dt-size-500)' },
+    { from: /@size20\b/g, to: 'var(--dt-size-525)' },
+    { from: /@size24\b/g, to: 'var(--dt-size-550)' },
+    { from: /@size32\b/g, to: 'var(--dt-size-600)' },
+    { from: /@size42\b/g, to: 'var(--dt-size-625)' },
+    { from: /@size48\b/g, to: 'var(--dt-size-650)' },
+    { from: /@size64\b/g, to: 'var(--dt-size-700)' },
+    { from: /@size72\b/g, to: 'var(--dt-size-720)' },
+    { from: /@size84\b/g, to: 'var(--dt-size-730)' },
+    { from: /@size96\b/g, to: 'var(--dt-size-750)' },
+    { from: /@size102\b/g, to: 'var(--dt-size-760)' },
+    { from: /@size114\b/g, to: 'var(--dt-size-775)' },
+    { from: /@size128\b/g, to: 'var(--dt-size-800)' },
+    { from: /@size164\b/g, to: 'var(--dt-size-825)' },
+    { from: /@size216\b/g, to: 'var(--dt-size-875)' },
+    { from: /@size264\b/g, to: 'var(--dt-size-905)' },
+    { from: /@size332\b/g, to: 'var(--dt-size-925)' },
+    { from: /@size464\b/g, to: 'var(--dt-size-975)' },
+    { from: /@size512\b/g, to: 'var(--dt-size-1000)' },
+    { from: /@size628\b/g, to: 'var(--dt-size-1020)' },
+    { from: /@size764\b/g, to: 'var(--dt-size-1040)' },
+    { from: /@size828\b/g, to: 'var(--dt-size-1060)' },
+    { from: /@size912\b/g, to: 'var(--dt-size-1080)' },
+    { from: /@size1024\b/g, to: 'var(--dt-size-1100)' },
+    { from: /@size1140\b/g, to: 'var(--dt-size-1115)' },
+    { from: /@size1268\b/g, to: 'var(--dt-size-1120)' },
+    { from: /@size1340\b/g, to: 'var(--dt-size-1130)' },
+
     // Icon variables
     { from: /@icon12/g, to: 'var(--dt-icon-size-100)' },
     { from: /@icon14/g, to: 'var(--dt-icon-size-200)' },
@@ -26,26 +73,26 @@ export default {
     { from: /@icon32/g, to: 'var(--dt-icon-size-600)' },
     { from: /@icon48/g, to: 'var(--dt-size-650)' },
     { from: /@icon64/g, to: 'var(--dt-size-700)' },
-    // Positive spacing variables
-    { from: /var\(--su0\)/g, to: 'var(--dt-size-0)' },
-    { from: /var\(--su1\)/g, to: 'var(--dt-size-100)' },
-    { from: /var\(--su2\)/g, to: 'var(--dt-size-200)' },
-    { from: /var\(--su4\)/g, to: 'var(--dt-size-300)' },
-    { from: /var\(--su6\)/g, to: 'var(--dt-size-350)' },
-    { from: /var\(--su8\)/g, to: 'var(--dt-size-400)' },
-    { from: /var\(--su12\)/g, to: 'var(--dt-size-450)' },
-    { from: /var\(--su16\)/g, to: 'var(--dt-size-500)' },
-    { from: /var\(--su24\)/g, to: 'var(--dt-size-550)' },
-    { from: /var\(--su32\)/g, to: 'var(--dt-size-600)' },
-    { from: /var\(--su48\)/g, to: 'var(--dt-size-650)' },
-    { from: /var\(--su64\)/g, to: 'var(--dt-size-700)' },
-    { from: /var\(--su72\)/g, to: 'var(--dt-size-720)' },
-    { from: /var\(--su84\)/g, to: 'var(--dt-size-730)' },
-    { from: /var\(--su96\)/g, to: 'var(--dt-size-750)' },
-    { from: /var\(--su102\)/g, to: 'var(--dt-size-760)' },
-    { from: /var\(--su114\)/g, to: 'var(--dt-size-775)' },
-    { from: /var\(--su128\)/g, to: 'var(--dt-size-800)' },
-    // Negative spacing variables
+    // Positive spacing
+    { from: /@su0\b|var\(--su0\)/g, to: 'var(--dt-size-0)' },
+    { from: /@su1\b|var\(--su1\)/g, to: 'var(--dt-size-100)' },
+    { from: /@su2\b|var\(--su2\)/g, to: 'var(--dt-size-200)' },
+    { from: /@su4\b|var\(--su4\)/g, to: 'var(--dt-size-300)' },
+    { from: /@su6\b|var\(--su6\)/g, to: 'var(--dt-size-350)' },
+    { from: /@su8\b|var\(--su8\)/g, to: 'var(--dt-size-400)' },
+    { from: /@su12\b|var\(--su12\)/g, to: 'var(--dt-size-450)' },
+    { from: /@su16\b|var\(--su16\)/g, to: 'var(--dt-size-500)' },
+    { from: /@su24\b|var\(--su24\)/g, to: 'var(--dt-size-550)' },
+    { from: /@su32\b|var\(--su32\)/g, to: 'var(--dt-size-600)' },
+    { from: /@su48\b|var\(--su48\)/g, to: 'var(--dt-size-650)' },
+    { from: /@su64\b|var\(--su64\)/g, to: 'var(--dt-size-700)' },
+    { from: /@su72\b|var\(--su72\)/g, to: 'var(--dt-size-720)' },
+    { from: /@su84\b|var\(--su84\)/g, to: 'var(--dt-size-730)' },
+    { from: /@su96\b|var\(--su96\)/g, to: 'var(--dt-size-750)' },
+    { from: /@su102\b|var\(--su102\)/g, to: 'var(--dt-size-760)' },
+    { from: /@su114\b|var\(--su114\)/g, to: 'var(--dt-size-775)' },
+    { from: /@su128\b|var\(--su128\)/g, to: 'var(--dt-size-800)' },
+    // Negative spacing
     { from: /var\(--sun1\)/g, to: 'var(--dt-size-100-negative)' },
     { from: /var\(--sun2\)/g, to: 'var(--dt-size-200-negative)' },
     { from: /var\(--sun4\)/g, to: 'var(--dt-size-300-negative)' },
@@ -64,14 +111,14 @@ export default {
     { from: /var\(--sun114\)/g, to: 'var(--dt-size-775-negative)' },
     { from: /var\(--sun128\)/g, to: 'var(--dt-size-800-negative)' },
     // Border radius
-    { from: /var\(--br-(pill|circle)\)/g, to: 'var(--dt-size-radius-$1)' },
-    { from: /var\(--br0\)/g, to: 'var(--dt-size-radius-0)' },
-    { from: /var\(--br2\)/g, to: 'var(--dt-size-radius-200)' },
-    { from: /var\(--br4\)/g, to: 'var(--dt-size-radius-300)' },
-    { from: /var\(--br8\)/g, to: 'var(--dt-size-radius-400)' },
-    { from: /var\(--br12\)/g, to: 'var(--dt-size-450)' },
-    { from: /var\(--br16\)/g, to: 'var(--dt-size-radius-500)' },
-    { from: /var\(--br24\)/g, to: 'var(--dt-size-550)' },
-    { from: /var\(--br32\)/g, to: 'var(--dt-size-radius-600)' },
+    { from: /@br-(pill|circle)|var\(--br-(pill|circle)\)/g, to: 'var(--dt-size-radius-$1)' },
+    { 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)' },
   ],
 };

package/lib/build/js/dialtone_migration_helper/helpers.mjs

@@ -75,12 +75,10 @@ export const findMatchedFiles = async (fileList, config) => {
         return f.matches > 0;
       });
 
-    const matchedFiles = filtered.reduce((prev, current) => {
+    return filtered.reduce((prev, current) => {
       const fn = path.relative(config.globbyConfig.cwd, current.file);
       return [...prev, fn];
     }, []);
-
-    return matchedFiles;
   });
 };
 

package/lib/build/js/dialtone_migration_helper/index.mjs

@@ -24,18 +24,18 @@ import yargs from 'yargs';
   const argv = yargs(hideBin(process.argv))
     .scriptName('dialtone-migration-helper')
     .usage(
-      '$0 --file migration-config-file.js --cwd "../root/directory --ignore "**/ignored/**", "**/another_ignored/**"',
+      '$0 --cwd "../root/directory" --include "file1.ext" "**/*.ext2" --ignore "**/ignored/**", "**/another_ignored/**"',
     )
     .options({
-      config: {
-        type: 'string',
-        description: 'Migration configuration module.',
-      },
       cwd: {
         type: 'string',
         description: 'Root directory for scan. Defaults to CWD.',
         default: process.cwd(),
       },
+      include: {
+        type: 'array',
+        description: 'Glob patters to include during search, if omitted, will include all the files on the CWD.',
+      },
       ignore: {
         type: 'array',
         description: 'Other glob patterns to ignore during search. .gitignore included by default.',
@@ -57,11 +57,10 @@ import yargs from 'yargs';
   );
 
   // load configuration from arg or list
-  const [configData, configFile] = !argv.config
-    ? await inquireForFile(CONFIG_FOLDER, configList).catch((err) =>
-      error('inquireForFile: ' + err),
-    )
-    : await readConfigFile(argv.config).catch((err) => error('readConfigFile: ' + err));
+  const [configData, configFile] = await inquireForFile(CONFIG_FOLDER, configList)
+      .catch((err) =>
+        error('inquireForFile: ' + err),
+      );
 
   // set up some globby defaults
   configData.globbyConfig = configData.globbyConfig || {};
@@ -74,6 +73,10 @@ import yargs from 'yargs';
   // take CWD if specified from command line
   const cwd = !argv.cwd ? process.cwd() : normalize(argv.cwd);
   configData.globbyConfig.cwd = configData.globbyConfig.cwd || cwd;
+  // push include list to configuration array
+  if (argv.include) {
+    configData.patterns = argv.include;
+  }
   // push ignore list to configuration array
   if (argv.ignore) {
     configData.globbyConfig.ignore = argv.ignore;
@@ -88,7 +91,8 @@ import yargs from 'yargs';
     console.log(
       '\n' +
         chalk.cyan('??') +
-        ' No matches found! Check your patterns and cwd settings if you think this is an error.',
+        ' No matches found! Check your patterns and cwd settings if you think this is an error ' +
+        `patterns: [${configData.patterns}] | cwd: [${configData.globbyConfig.cwd}] `,
     );
     process.exit(0);
   }

package/lib/build/less/components/input.less

@@ -26,10 +26,10 @@
 .d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input-color-border: var(--dt-color-border-subtle);
-    --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
-    --input-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
-    --input-color-text: var(--dt-color-foreground-secondary);
+    --input-color-border: var(--dt-inputs-color-border-default);
+    --input-color-background: var(--dt-inputs-color-background-default);
+    --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
+    --input-color-text: var(--dt-inputs-color-foreground-default);
     --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
     --input-border-radius: var(--dt-size-400);
     --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
@@ -62,7 +62,7 @@
 
     //  --  Placeholder copy
     &::placeholder {
-        color: var(--dt-color-foreground-placeholder);
+        color: var(--dt-inputs-color-foreground-placeholder);
     }
     //  --  Remove input EDGE additions
     &::-ms-clear {
@@ -71,17 +71,17 @@
     //  --  FOCUS STATE
     &:focus,
     &:focus-within {
-        --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.01);
-        --input-color-border: var(--dt-color-border-focus) !important;
+        --input-color-background: var(--dt-inputs-color-background-focus);
+        --input-color-border: var(--dt-inputs-color-border-focus) !important;
 
-        box-shadow: 0 0 0 var(--dt-size-100) var(--input-color-border) inset;
+        box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
     }
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
-        --input-color-border: transparent !important;
-        --input-color-background: var(--input-color-background-disabled);
-        --input-color-text: var(--dt-color-foreground-disabled);
+        --input-color-border: var(--dt-inputs-color-border-disabled) !important;
+        --input-color-background: var(--dt-inputs-color-background-disabled);
+        --input-color-text: var(--dt-inputs-color-foreground-disabled);
 
         &:focus,
         &:focus-within {
@@ -90,7 +90,7 @@
 
         //  --  Placeholder copy
         &::placeholder {
-            color: var(--dt-color-foreground-placeholder);
+            color: var(--dt-inputs-color-foreground-placeholder);
         }
     }
 
@@ -209,17 +209,17 @@
 //  ----------------------------------------------------------------------------
 .d-input--warning,
 .d-textarea--warning {
-    --input-color-border: var(--dt-color-border-warning) !important;
+    --input-color-border: var(--dt-inputs-color-border-warning) !important;
 }
 
 .d-input--error,
 .d-textarea--error {
-    --input-color-border: var(--dt-color-border-critical) !important;
+    --input-color-border: var(--dt-inputs-color-border-critical) !important;
 }
 
 .d-input--success,
 .d-textarea--success {
-    --input-color-border: var(--dt-color-border-success) !important;
+    --input-color-border: var(--dt-inputs-color-border-success) !important;
 }
 
 //  ============================================================================

package/lib/build/less/components/selects.less

@@ -19,7 +19,7 @@
 .d-select {
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
-  --select-color-border: var(--dt-color-black-500);
+  --select-color-border: var(--dt-inputs-color-border-default);
   --select-notch-position-right: var(--dt-size-400);
 
   position: relative;
@@ -55,7 +55,7 @@
 
   //  --  FOCUS STATE
   &:focus {
-      --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
+      --input-color-background: var(--dt-inputs-color-background-focus);
   }
 
   // Adjust space on right beneath arrows
@@ -63,8 +63,8 @@
 
   &[disabled],
   &[read-only] {
-    color: var(--dt-color-foreground-disabled);
-    background: var(--input-color-background-disabled);
+    color: var(--dt-inputs-color-foreground-disabled);
+    background: var(--dt-inputs-color-background-disabled);
     border-color: transparent;
     border-style: solid;
     border-width: var(--input-border-width);
@@ -127,15 +127,15 @@
 //  $$  VALIDATION STATES
 //  ------------------------------------------------------------------------
 .d-select__input--success {
-  --input-color-border: var(--dt-color-border-success);
+  --input-color-border: var(--dt-inputs-color-border-success);
 }
 
 .d-select__input--error {
-  --input-color-border: var(--dt-color-border-critical);
+  --input-color-border: var(--dt-inputs-color-border-critical);
 }
 
 .d-select__input--warning {
-  --input-color-border: var(--dt-color-border-warning);
+  --input-color-border: var(--dt-inputs-color-border-warning);
 }
 
 .d-select--disabled {

package/lib/build/less/themes/example.less

@@ -33,9 +33,9 @@
 //
 //      @nav__background-color: This sets the navigation background color.
 //  ----------------------------------------------------------------------------
-@primary-color:                 @dt-color-purple-400;
+@primary-color:                 var(--dt-color-purple-400);
 @primary-color--hover:          darken(@primary-color, 10%);
-@nav__background-color:         @dt-color-black-400;
+@nav__background-color:         var(--dt-color-black-400);
 
 //  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 //  ----------------------------------------------------------------------------

package/lib/dist/css/dialtone.css

@@ -1558,10 +1558,10 @@ legend .d-label {
 .d-textarea--md,
 .d-input__wrapper--md,
 .d-input__wrapper {
-  --input-color-border: var(--dt-color-border-subtle);
-  --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
-  --input-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
-  --input-color-text: var(--dt-color-foreground-secondary);
+  --input-color-border: var(--dt-inputs-color-border-default);
+  --input-color-background: var(--dt-inputs-color-background-default);
+  --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
+  --input-color-text: var(--dt-inputs-color-foreground-default);
   --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50));
   --input-border-radius: var(--dt-size-400);
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
@@ -1597,7 +1597,7 @@ legend .d-label {
 .d-textarea--md::placeholder,
 .d-input__wrapper--md::placeholder,
 .d-input__wrapper::placeholder {
-  color: var(--dt-color-foreground-placeholder);
+  color: var(--dt-inputs-color-foreground-placeholder);
 }
 .d-input::-ms-clear,
 .d-input--md::-ms-clear,
@@ -1619,9 +1619,9 @@ legend .d-label {
 .d-textarea--md:focus-within,
 .d-input__wrapper--md:focus-within,
 .d-input__wrapper:focus-within {
-  --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.01);
-  --input-color-border: var(--dt-color-border-focus) !important;
-  box-shadow: 0 0 0 var(--dt-size-100) var(--input-color-border) inset;
+  --input-color-background: var(--dt-inputs-color-background-focus);
+  --input-color-border: var(--dt-inputs-color-border-focus) !important;
+  box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
 }
 .d-input[disabled],
 .d-input--md[disabled],
@@ -1635,9 +1635,9 @@ legend .d-label {
 .d-textarea--md[read-only],
 .d-input__wrapper--md[read-only],
 .d-input__wrapper[read-only] {
-  --input-color-border: transparent !important;
-  --input-color-background: var(--input-color-background-disabled);
-  --input-color-text: var(--dt-color-foreground-disabled);
+  --input-color-border: var(--dt-inputs-color-border-disabled) !important;
+  --input-color-background: var(--dt-inputs-color-background-disabled);
+  --input-color-text: var(--dt-inputs-color-foreground-disabled);
 }
 .d-input[disabled]:focus,
 .d-input--md[disabled]:focus,
@@ -1677,7 +1677,7 @@ legend .d-label {
 .d-textarea--md[read-only]::placeholder,
 .d-input__wrapper--md[read-only]::placeholder,
 .d-input__wrapper[read-only]::placeholder {
-  color: var(--dt-color-foreground-placeholder);
+  color: var(--dt-inputs-color-foreground-placeholder);
 }
 .d-input[disabled],
 .d-input--md[disabled],
@@ -1832,15 +1832,15 @@ legend .d-label {
 }
 .d-input--warning,
 .d-textarea--warning {
-  --input-color-border: var(--dt-color-border-warning) !important;
+  --input-color-border: var(--dt-inputs-color-border-warning) !important;
 }
 .d-input--error,
 .d-textarea--error {
-  --input-color-border: var(--dt-color-border-critical) !important;
+  --input-color-border: var(--dt-inputs-color-border-critical) !important;
 }
 .d-input--success,
 .d-textarea--success {
-  --input-color-border: var(--dt-color-border-success) !important;
+  --input-color-border: var(--dt-inputs-color-border-success) !important;
 }
 .d-input-icon {
   --input-icon-size: var(--dt-size-500);
@@ -2684,7 +2684,7 @@ legend .d-label {
   }
 }
 .d-select {
-  --select-color-border: var(--dt-color-black-500);
+  --select-color-border: var(--dt-inputs-color-border-default);
   --select-notch-position-right: var(--dt-size-400);
   position: relative;
   width: stretch;
@@ -2707,10 +2707,10 @@ legend .d-label {
 .d-select__input {
   --select-color-border: var(--input-color-border);
   --select-notch-padding-right: var(--dt-space-550);
-  --input-color-border: var(--dt-color-border-subtle);
-  --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
-  --input-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
-  --input-color-text: var(--dt-color-foreground-secondary);
+  --input-color-border: var(--dt-inputs-color-border-default);
+  --input-color-background: var(--dt-inputs-color-background-default);
+  --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
+  --input-color-text: var(--dt-inputs-color-foreground-default);
   --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50));
   --input-border-radius: var(--dt-size-400);
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
@@ -2742,22 +2742,22 @@ legend .d-label {
   padding-right: var(--select-notch-padding-right);
 }
 .d-select__input::placeholder {
-  color: var(--dt-color-foreground-placeholder);
+  color: var(--dt-inputs-color-foreground-placeholder);
 }
 .d-select__input::-ms-clear {
   display: none;
 }
 .d-select__input:focus,
 .d-select__input:focus-within {
-  --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.01);
-  --input-color-border: var(--dt-color-border-focus) !important;
-  box-shadow: 0 0 0 var(--dt-size-100) var(--input-color-border) inset;
+  --input-color-background: var(--dt-inputs-color-background-focus);
+  --input-color-border: var(--dt-inputs-color-border-focus) !important;
+  box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
 }
 .d-select__input[disabled],
 .d-select__input[read-only] {
-  --input-color-border: transparent !important;
-  --input-color-background: var(--input-color-background-disabled);
-  --input-color-text: var(--dt-color-foreground-disabled);
+  --input-color-border: var(--dt-inputs-color-border-disabled) !important;
+  --input-color-background: var(--dt-inputs-color-background-disabled);
+  --input-color-text: var(--dt-inputs-color-foreground-disabled);
 }
 .d-select__input[disabled]:focus,
 .d-select__input[read-only]:focus,
@@ -2767,7 +2767,7 @@ legend .d-label {
 }
 .d-select__input[disabled]::placeholder,
 .d-select__input[read-only]::placeholder {
-  color: var(--dt-color-foreground-placeholder);
+  color: var(--dt-inputs-color-foreground-placeholder);
 }
 .d-select__input[disabled] {
   cursor: not-allowed;
@@ -2783,12 +2783,12 @@ legend .d-label {
   display: none;
 }
 .d-select__input:focus {
-  --input-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
+  --input-color-background: var(--dt-inputs-color-background-focus);
 }
 .d-select__input[disabled],
 .d-select__input[read-only] {
-  color: var(--dt-color-foreground-disabled);
-  background: var(--input-color-background-disabled);
+  color: var(--dt-inputs-color-foreground-disabled);
+  background: var(--dt-inputs-color-background-disabled);
   border-color: transparent;
   border-style: solid;
   border-width: var(--input-border-width);
@@ -2853,13 +2853,13 @@ legend .d-label {
   --select-notch-position-right: var(--dt-size-450);
 }
 .d-select__input--success {
-  --input-color-border: var(--dt-color-border-success);
+  --input-color-border: var(--dt-inputs-color-border-success);
 }
 .d-select__input--error {
-  --input-color-border: var(--dt-color-border-critical);
+  --input-color-border: var(--dt-inputs-color-border-critical);
 }
 .d-select__input--warning {
-  --input-color-border: var(--dt-color-border-warning);
+  --input-color-border: var(--dt-inputs-color-border-warning);
 }
 .d-select--disabled::before,
 .d-select--disabled::after {