@dialpad/dialtone 7.26.0 → 8.0.0-version8.2

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

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

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

@@ -0,0 +1,63 @@
+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 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|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)/gi,
+      to: '@dt-color-$1$2',
+    },
+    // Neutral LESS variables
+    {
+      from: /@(white|black)/gi,
+      to: '@dt-color-neutral-$1',
+    },
+    // CSS variables
+    {
+      from: /var\(--(black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)(-(h|s|l|hsl))?\)/gi,
+      to: 'var(--dt-color-$1$2$3)',
+    },
+    // Neutral CSS variables
+    {
+      from: /var\(--(white|black)(-(h|s|l|hsl))?\)/gi,
+      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))?\)/gi,
+      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))?\)/gi,
+      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))?\)/gi,
+      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))?\)/gi,
+      to: 'var(--dt-color-foreground-$1$2)',
+    },
+    // Special Font color cases
+    {
+      from: /var\(--fc-(error|danger)(-(strong|inverted|strong-inverted))?\)/gi,
+      to: 'var(--dt-color-foreground-critical$2)',
+    },
+  ],
+};

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

@@ -0,0 +1,38 @@
+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 var(--fw-{kind}) with var(--dt-font-weight-{kind})\n\t' +
+    'eg. var(--fw-medium) with var(--dt-font-weight-medium)\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)',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,json}'],
+  expressions: [
+    // ------------------------------------------------------------ //
+    //                            Fonts                             //
+    // ------------------------------------------------------------ //
+    // Size variables
+    {
+      from: /var\(--fs(-[0-9]+)(-(mobile|tc8|tv))?\)/g,
+      to: 'var(--dt-font-size$1$2)',
+    },
+    // Weight variables
+    {
+      from: /var\(--fw-(normal|medium|bold)\)/g,
+      to: 'var(--dt-font-weight-$1)',
+    },
+    // Special weight case
+    {
+      from: /var\(--fw-semibold\)/g,
+      to: 'var(--dt-font-weight-semi-bold)',
+    },
+    // Font family
+    {
+      from: /var\(--ff-(mono)\)/g,
+      to: 'var(--dt-font-family-$1)',
+    },
+  ],
+};

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

@@ -0,0 +1,77 @@
+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',
+  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)',
+    },
+    // Icon variables
+    { from: /@icon12/g, to: 'var(--dt-icon-size-100)' },
+    { from: /@icon14/g, to: 'var(--dt-icon-size-200)' },
+    { from: /@icon16/g, to: 'var(--dt-size-500)' },
+    { from: /@icon18/g, to: 'var(--dt-icon-size-300)' },
+    { from: /@icon20/g, to: 'var(--dt-icon-size-400)' },
+    { from: /@icon24/g, to: 'var(--dt-icon-size-500)' },
+    { 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
+    { 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)' },
+    { from: /var\(--sun6\)/g, to: 'var(--dt-size-350-negative)' },
+    { from: /var\(--sun8\)/g, to: 'var(--dt-size-400-negative)' },
+    { from: /var\(--sun12\)/g, to: 'var(--dt-size-450-negative)' },
+    { from: /var\(--sun16\)/g, to: 'var(--dt-size-500-negative)' },
+    { from: /var\(--sun24\)/g, to: 'var(--dt-size-550-negative)' },
+    { from: /var\(--sun32\)/g, to: 'var(--dt-size-600-negative)' },
+    { from: /var\(--sun48\)/g, to: 'var(--dt-size-650-negative)' },
+    { from: /var\(--sun64\)/g, to: 'var(--dt-size-700-negative)' },
+    { from: /var\(--sun72\)/g, to: 'var(--dt-size-720-negative)' },
+    { from: /var\(--sun84\)/g, to: 'var(--dt-size-730-negative)' },
+    { from: /var\(--sun96\)/g, to: 'var(--dt-size-750-negative)' },
+    { from: /var\(--sun102\)/g, to: 'var(--dt-size-760-negative)' },
+    { 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)' },
+  ],
+};

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

@@ -76,7 +76,7 @@ import yargs from 'yargs';
   configData.globbyConfig.cwd = configData.globbyConfig.cwd || cwd;
   // push ignore list to configuration array
   if (argv.ignore) {
-    configData.globbyConfig.ignore.push(...argv.ignore);
+    configData.globbyConfig.ignore = argv.ignore;
   }
 
   // run glob search with configData.patterns

package/lib/build/less/components/avatar.less

@@ -18,12 +18,12 @@
 .d-avatar {
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
-  --avatar-color-background: var(--bgc-moderate);
-  --avatar-color-text: var(--fc-secondary);
+  --avatar-color-background: var(--dt-color-surface-moderate);
+  --avatar-color-text: var(--dt-color-foreground-secondary);
   --avatar-gradient-angle: -180deg;
-  --avatar-gradient-stop-1: var(--blue-200);
-  --avatar-gradient-stop-2: var(--purple-100);
-  --avatar-gradient-stop-3: var(--gold-100);
+  --avatar-gradient-stop-1: var(--dt-color-blue-200);
+  --avatar-gradient-stop-2: var(--dt-color-purple-100);
+  --avatar-gradient-stop-3: var(--dt-color-gold-100);
   --avatar-gradient:
     conic-gradient(
       from var(--avatar-gradient-angle) at 50% 50%,
@@ -31,11 +31,11 @@
       var(--avatar-gradient-stop-2) 180deg,
       var(--avatar-gradient-stop-3) 360deg
     );
-  --avatar-size-shape: var(--size-600);
+  --avatar-size-shape: var(--dt-size-600);
   --avatar-size-image: 100%;
-  --avatar-size-text: var(--fs-200);
-  --avatar-presence-position-right: var(--space-200-negative);
-  --avatar-presence-position-bottom: var(--space-200-negative);
+  --avatar-size-text: var(--dt-font-size-200);
+  --avatar-presence-position-right: var(--dt-space-200-negative);
+  --avatar-presence-position-bottom: var(--dt-space-200-negative);
   --avatar-count-color-shadow: var(--theme-sidebar-color-background);
 
   position: relative;
@@ -54,7 +54,7 @@
     overflow: hidden;
     background-color: var(--avatar-color-background);
     background-image: var(--avatar-gradient);
-    border-radius: var(--br-pill);
+    border-radius: var(--dt-size-radius-pill);
 
     .d-avatar--no-gradient & {
       background-image: none;
@@ -65,13 +65,13 @@
     width: var(--avatar-size-image);
     height: var(--avatar-size-image);
     object-fit: cover;
-    border-radius: var(--br-pill);
+    border-radius: var(--dt-size-radius-pill);
   }
 
   &__initials {
-    font-weight: var(--fw-bold);
+    font-weight: var(--dt-font-weight-bold);
     font-size: var(--avatar-size-text);
-    line-height: var(--lh-100);
+    line-height: var(--dt-font-line-height-100);
     text-transform: uppercase;
   }
 
@@ -94,16 +94,16 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    min-width: calc(var(--size-300) * 3.5);
-    padding: var(--space-200) calc(var(--space-200) + var(--space-100));
-    color: var(--fc-primary-inverted);
-    font-weight: var(--fw-bold);
-    font-size: calc(var(--fs-100) - var(--size-200));
-    line-height: var(--lh-100);
+    min-width: calc(var(--dt-size-300) * 3.5);
+    padding: var(--dt-space-200) calc(var(--dt-space-200) + var(--dt-space-100));
+    color: var(--dt-color-foreground-primary-inverted);
+    font-weight: var(--dt-font-weight-bold);
+    font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
+    line-height: var(--dt-font-line-height-100);
     text-align: center;
-    background-color: var(--black-600);
-    border-radius: var(--br-pill);
-    box-shadow: 0 0 0 var(--size-200) var(--avatar-count-color-shadow);
+    background-color: var(--dt-color-black-600);
+    border-radius: var(--dt-size-radius-pill);
+    box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
 
     .dt-leftbar-row--selected &,
     .dt-leftbar-row__primary:hover & {
@@ -115,46 +115,46 @@
   //  ------------------------------------------------------------------------
 
   &--xs {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-200));
-    --avatar-presence-position-right: var(--space-300-negative);
-    --avatar-presence-position-bottom: var(--space-300-negative);
+    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
+    --avatar-presence-position-right: var(--dt-space-300-negative);
+    --avatar-presence-position-bottom: var(--dt-space-300-negative);
   }
 
   &--sm {
-    --avatar-size-shape: var(--size-550);
-    --avatar-size-text: var(--fs-100);
-    --avatar-presence-position-right: var(--space-200-negative);
-    --avatar-presence-position-bottom: var(--space-200-negative);
+    --avatar-size-shape: var(--dt-size-550);
+    --avatar-size-text: var(--dt-font-size-100);
+    --avatar-presence-position-right: var(--dt-space-200-negative);
+    --avatar-presence-position-bottom: var(--dt-space-200-negative);
   }
 
   &--md {
-    --avatar-size-shape: var(--size-600);
-    --avatar-size-text: var(--fs-200);
-    --avatar-presence-position-right: var(--space-100-negative);
-    --avatar-presence-position-bottom: var(--space-100-negative);
+    --avatar-size-shape: var(--dt-size-600);
+    --avatar-size-text: var(--dt-font-size-200);
+    --avatar-presence-position-right: var(--dt-space-100-negative);
+    --avatar-presence-position-bottom: var(--dt-space-100-negative);
   }
 
   &--lg {
-    --avatar-size-shape: var(--size-650);
-    --avatar-size-text: var(--fs-300);
-    --avatar-presence-position-right: var(--space-100);
-    --avatar-presence-position-bottom: var(--space-100);
+    --avatar-size-shape: var(--dt-size-650);
+    --avatar-size-text: var(--dt-font-size-300);
+    --avatar-presence-position-right: var(--dt-space-100);
+    --avatar-presence-position-bottom: var(--dt-space-100);
   }
 
   &--xl {
-    --avatar-size-shape: var(--size-700);
-    --avatar-size-text: var(--fs-400);
-    --avatar-presence-position-right: var(--space-300);
-    --avatar-presence-position-bottom: var(--space-300);
+    --avatar-size-shape: var(--dt-size-700);
+    --avatar-size-text: var(--dt-font-size-400);
+    --avatar-presence-position-right: var(--dt-space-300);
+    --avatar-presence-position-bottom: var(--dt-space-300);
   }
 
   //  --  GROUP
   //  ------------------------------------------------------------------------
 
   &--group {
-    --avatar-size-shape: calc(var(--size-300) * 4.5);
+    --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
 
-    width: var(--size-550);
-    height: var(--size-550);
+    width: var(--dt-size-550);
+    height: var(--dt-size-550);
   }
 }

package/lib/build/less/components/badge.less

@@ -20,19 +20,19 @@
 .d-badge {
   //  COMPONENT CSS VARIABLES
   //  --------------------------------------------------------------------------
-  --badge-color-text: var(--fc-primary);
-  --badge-color-background: var(--bgc-moderate-opaque);
-  --badge-color-background-ai: linear-gradient(to bottom right, var(--magenta-300) 0%, var(--purple-400) 100%);
-  --badge-radius: var(--size-300);
-  --badge-line-height: calc(var(--size-500) + var(--size-200));
-  --badge-font-size: var(--fs-100);
-  --badge-font-weight: var(--fw-semibold);
-  --badge-gap: var(--space-300);
-  --badge-letter-spacing: var(--size-50);
-  --badge-padding-y: var(--space-100);
-  --badge-padding-x: var(--space-400);
+  --badge-color-text: var(--dt-color-foreground-primary);
+  --badge-color-background: var(--dt-color-surface-moderate-opaque);
+  --badge-color-background-ai: linear-gradient(to bottom right, var(--dt-color-magenta-300) 0%, var(--dt-color-purple-400) 100%);
+  --badge-radius: var(--dt-size-300);
+  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
+  --badge-font-size: var(--dt-font-size-100);
+  --badge-font-weight: var(--dt-font-weight-semi-bold);
+  --badge-gap: var(--dt-space-300);
+  --badge-letter-spacing: var(--dt-size-50);
+  --badge-padding-y: var(--dt-space-100);
+  --badge-padding-x: var(--dt-space-400);
   --badge-text-case: none;
-  --badge-decorative-color: var(--black-900);
+  --badge-decorative-color: var(--dt-color-black-900);
 
   //  BASE STYLE
   //  --------------------------------------------------------------------------
@@ -41,7 +41,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-width: var(--size-550);
+  min-width: var(--dt-size-550);
   padding: var(--badge-padding-y) var(--badge-padding-x);
   color: var(--badge-color-text);
   font-weight: var(--badge-font-weight);
@@ -57,29 +57,29 @@
   //  --------------------------------------------------------------------------
 
   &--count {
-    --badge-radius: var(--br-pill);
-    --badge-padding-x: calc(var(--space-400) - var(--space-100));
-    --badge-padding-y: var(--space-300);
-    --badge-line-height: var(--size-500);
+    --badge-radius: var(--dt-size-radius-pill);
+    --badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
+    --badge-padding-y: var(--dt-space-300);
+    --badge-line-height: var(--dt-size-500);
   }
 
   //  TYPE
   //  --------------------------------------------------------------------------
 
   &--info {
-    --badge-color-background: var(--bgc-info);
+    --badge-color-background: var(--dt-color-surface-info);
   }
 
   &--success {
-    --badge-color-background: var(--bgc-success);
+    --badge-color-background: var(--dt-color-surface-success);
   }
 
   &--warning {
-    --badge-color-background: var(--bgc-warning);
+    --badge-color-background: var(--dt-color-surface-warning);
   }
 
   &--critical {
-    --badge-color-background: var(--bgc-critical);
+    --badge-color-background: var(--dt-color-surface-critical);
   }
 
   &--bulletin {
@@ -89,43 +89,43 @@
 
   &--ai {
     --badge-color-text: var(--theme-mention-color-foreground);
-    --badge-color-background: var(--magenta-300);
+    --badge-color-background: var(--dt-color-magenta-300);
 
     background-image: var(--badge-color-background-ai);
   }
 
-  &--decorate-black-400 { --badge-decorative-color: var(--black-400); }
-  &--decorate-black-500 { --badge-decorative-color: var(--black-500); }
-  &--decorate-black-900 { --badge-decorative-color: var(--black-900); }
-  &--decorate-red-200 { --badge-decorative-color: var(--red-200); }
-  &--decorate-red-300 { --badge-decorative-color: var(--red-300); }
-  &--decorate-red-400 { --badge-decorative-color: var(--red-400); }
-  &--decorate-purple-200 { --badge-decorative-color: var(--purple-200); }
-  &--decorate-purple-300 { --badge-decorative-color: var(--purple-300); }
-  &--decorate-purple-400 { --badge-decorative-color: var(--purple-400); }
-  &--decorate-purple-500 { --badge-decorative-color: var(--purple-500); }
-  &--decorate-blue-200 { --badge-decorative-color: var(--blue-200); }
-  &--decorate-blue-300 { --badge-decorative-color: var(--blue-300); }
-  &--decorate-blue-400 { --badge-decorative-color: var(--blue-400); }
-  &--decorate-green-300 { --badge-decorative-color: var(--green-300); }
-  &--decorate-green-400 { --badge-decorative-color: var(--green-400); }
-  &--decorate-green-500 { --badge-decorative-color: var(--green-500); }
-  &--decorate-gold-300 { --badge-decorative-color: var(--gold-300); }
-  &--decorate-gold-400 { --badge-decorative-color: var(--gold-400); }
-  &--decorate-gold-500 { --badge-decorative-color: var(--gold-500); }
-  &--decorate-magenta-200 { --badge-decorative-color: var(--magenta-200); }
-  &--decorate-magenta-300 { --badge-decorative-color: var(--magenta-300); }
-  &--decorate-magenta-400 { --badge-decorative-color: var(--magenta-400); }
+  &--decorate-black-400 { --badge-decorative-color: var(--dt-color-black-400); }
+  &--decorate-black-500 { --badge-decorative-color: var(--dt-color-black-500); }
+  &--decorate-black-900 { --badge-decorative-color: var(--dt-color-black-900); }
+  &--decorate-red-200 { --badge-decorative-color: var(--dt-color-red-200); }
+  &--decorate-red-300 { --badge-decorative-color: var(--dt-color-red-300); }
+  &--decorate-red-400 { --badge-decorative-color: var(--dt-color-red-400); }
+  &--decorate-purple-200 { --badge-decorative-color: var(--dt-color-purple-200); }
+  &--decorate-purple-300 { --badge-decorative-color: var(--dt-color-purple-300); }
+  &--decorate-purple-400 { --badge-decorative-color: var(--dt-color-purple-400); }
+  &--decorate-purple-500 { --badge-decorative-color: var(--dt-color-purple-500); }
+  &--decorate-blue-200 { --badge-decorative-color: var(--dt-color-blue-200); }
+  &--decorate-blue-300 { --badge-decorative-color: var(--dt-color-blue-300); }
+  &--decorate-blue-400 { --badge-decorative-color: var(--dt-color-blue-400); }
+  &--decorate-green-300 { --badge-decorative-color: var(--dt-color-green-300); }
+  &--decorate-green-400 { --badge-decorative-color: var(--dt-color-green-400); }
+  &--decorate-green-500 { --badge-decorative-color: var(--dt-color-green-500); }
+  &--decorate-gold-300 { --badge-decorative-color: var(--dt-color-gold-300); }
+  &--decorate-gold-400 { --badge-decorative-color: var(--dt-color-gold-400); }
+  &--decorate-gold-500 { --badge-decorative-color: var(--dt-color-gold-500); }
+  &--decorate-magenta-200 { --badge-decorative-color: var(--dt-color-magenta-200); }
+  &--decorate-magenta-300 { --badge-decorative-color: var(--dt-color-magenta-300); }
+  &--decorate-magenta-400 { --badge-decorative-color: var(--dt-color-magenta-400); }
 
   //  SLOTS
   //  --------------------------------------------------------------------------
 
   &__decorative {
     display: inline-flex;
-    width: var(--size-400);
-    height: var(--size-400);
+    width: var(--dt-size-400);
+    height: var(--dt-size-400);
     background-color: var(--badge-decorative-color);
-    border-radius: var(--size-200);
+    border-radius: var(--dt-size-200);
   }
 
   &__label {

package/lib/build/less/components/banner.less

@@ -1,5 +1,3 @@
-//@import (reference) '../utilities/spacing.less';
-
 //
 //  DIALTONE
 //  COMPONENTS: BANNERS
@@ -15,14 +13,14 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner-color-background: var(--bgc-secondary);
-    --banner-color-text: var(--fc-primary);
+    --banner-color-background: var(--dt-color-surface-secondary);
+    --banner-color-text: var(--dt-color-foreground-primary);
     --notice-color-icon: var(--toast-color-text);
-    --banner-color-border: var(--bc-subtle);
-    --banner-font-size: var(--fs-200);
-    --banner-line-height: var(--lh-200);
-    --banner-dialog-padding-y: var(--space-400);
-    --banner-dialog-padding-x: var(--space-500);
+    --banner-color-border: var(--dt-color-border-subtle);
+    --banner-font-size: var(--dt-font-size-200);
+    --banner-line-height: var(--dt-font-line-height-200);
+    --banner-dialog-padding-y: var(--dt-space-400);
+    --banner-dialog-padding-x: var(--dt-space-500);
 
     position: fixed;
     top: 0;
@@ -32,7 +30,7 @@
     display: flex;
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--size-650); // 48
+    min-height: var(--dt-size-650); // 48
     color: var(--banner-color-text);
     font-size: var(--banner-font-size);
     line-height: var(--banner-line-height);
@@ -43,7 +41,7 @@
 
     // If you want to hide and reveal the banner
     &[aria-hidden='true'] {
-        --topbar-height: var(--size-650);
+        --topbar-height: var(--dt-size-650);
 
         visibility: hidden;
         opacity: 0;
@@ -80,7 +78,7 @@
 
     .d-notice__content {
         flex-direction: row;
-        gap: var(--space-300);
+        gap: var(--dt-space-300);
         align-items: baseline;
     }
 }
@@ -91,52 +89,52 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-banner.d-banner--important {
-    --banner-color-background: var(--bgc-strong);
-    --banner-color-text: var(--fc-primary-inverted);
-    --notice-color-icon: var(--fc-primary-inverted);
+    --banner-color-background: var(--dt-color-surface-strong);
+    --banner-color-text: var(--dt-color-foreground-primary-inverted);
+    --notice-color-icon: var(--dt-color-foreground-primary-inverted);
     --banner-color-border: transparent;
 }
 
 //  $$  ERROR
 //  ----------------------------------------------------------------------------
 .d-banner--error {
-    --banner-color-background: var(--bgc-critical);
+    --banner-color-background: var(--dt-color-surface-critical);
 
     &.d-banner--important {
-        --banner-color-background: var(--bgc-critical-strong);
-        --banner-color-text: var(--fc-primary-inverted);
+        --banner-color-background: var(--dt-color-surface-critical-strong);
+        --banner-color-text: var(--dt-color-foreground-primary-inverted);
     }
 }
 
 //  $$  INFO
 //  ----------------------------------------------------------------------------
 .d-banner--info {
-    --banner-color-background: var(--bgc-info);
+    --banner-color-background: var(--dt-color-surface-info);
 
     &.d-banner--important {
-        --banner-color-background: var(--bgc-info-strong);
-        --banner-color-text: var(--fc-primary-inverted);
+        --banner-color-background: var(--dt-color-surface-info-strong);
+        --banner-color-text: var(--dt-color-foreground-primary-inverted);
     }
 }
 
 //  $$  SUCCESS
 //  ----------------------------------------------------------------------------
 .d-banner--success {
-    --banner-color-background: var(--bgc-success);
+    --banner-color-background: var(--dt-color-surface-success);
 
     &.d-banner--important {
-        --banner-color-background: var(--bgc-success-strong);
-        --banner-color-text: var(--fc-primary-inverted);
+        --banner-color-background: var(--dt-color-surface-success-strong);
+        --banner-color-text: var(--dt-color-foreground-primary-inverted);
     }
 }
 
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-banner--warning {
-    --banner-color-background: var(--bgc-warning);
+    --banner-color-background: var(--dt-color-surface-warning);
 
     &.d-banner--important {
-        --banner-color-background: var(--gold-200);
-        --banner-color-text: var(--fc-primary);
+        --banner-color-background: var(--dt-color-gold-200);
+        --banner-color-text: var(--dt-color-foreground-primary);
     }
 }