@dialpad/dialtone 7.25.1 → 8.0.0-version8.2

package/lib/build/less/components/chip.less

@@ -16,9 +16,9 @@
 //  ----------------------------------------------------------------------------
 .d-chip {
   //  Component CSS Vars
-  --chip-color-text: var(--fc-primary);
-  --chip-color-background: var(--bgc-moderate-opaque);
-  --chip-border-radius: var(--br-pill);
+  --chip-color-text: var(--dt-color-foreground-primary);
+  --chip-color-background: var(--dt-color-surface-moderate-opaque);
+  --chip-border-radius: var(--dt-size-radius-pill);
 
   position: relative;
   display: inline-flex;
@@ -30,9 +30,9 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: var(--space-300) var(--space-400);
+  padding: var(--dt-space-300) var(--dt-space-400);
   color: var(--chip-color-text);
-  font-size: var(--fs-200);
+  font-size: var(--dt-font-size-200);
   font-family: inherit;
   line-height: var(--lh4);
   background-color: var(--chip-color-background);
@@ -46,8 +46,8 @@
   // not nested within the chip. Only apply if close button exists (more than one child).
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--size-500) + var(--space-200));
-    height: calc(var(--size-500) + var(--space-200));
+    width: calc(var(--dt-size-500) + var(--dt-space-200));
+    height: calc(var(--dt-size-500) + var(--dt-space-200));
     content: '';
   }
 
@@ -60,30 +60,30 @@
     cursor: pointer;
 
     &:hover {
-      --chip-color-background: var(--black-300);
+      --chip-color-background: var(--dt-color-black-300);
 
       text-decoration: none;
     }
 
     &:active {
-      --chip-color-background: var(--black-400);
+      --chip-color-background: var(--dt-color-black-400);
     }
 
     &:focus-visible {
       outline: none;
-      box-shadow: var(--bs-focus-ring);
+      box-shadow: var(--dt-shadow-focus);
     }
   }
 
   .d-avatar {
-    --avatar-size-shape: calc(var(--size-600) - var(--space-400));
+    --avatar-size-shape: var(--dt-space-550);
 
-    margin: calc(var(--space-200) * -1) var(--space-300) calc(var(--space-200) * -1) calc(calc(var(--space-300) + var(--space-200)) * -1);
+    margin: var(--dt-space-200-negative) var(--dt-space-300) var(--dt-space-200-negative) var(--dt-space-350-negative);
   }
 
   .d-svg {
-    width: @icon18;
-    height: @icon18;
+    width: var(--dt-icon-size-300);
+    height: var(--dt-icon-size-300);
   }
 }
 
@@ -92,8 +92,8 @@
   .d-btn--circle();
 
   position: absolute;
-  right: var(--space-200);
-  padding: calc(var(--space-200) + var(--space-100));
+  right: var(--dt-space-200);
+  padding: calc(var(--dt-space-200) + var(--dt-space-100));
   border-width: 0;
 
   &::before {
@@ -104,28 +104,28 @@
   }
 
   &:hover:not([disabled]) {
-    --button-color-background: hsla(var(--black-800-hsl) ~' / ' 15%);
+    --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 15%);
   }
 
   &:active:not([disabled]),
   &.d-btn--active:not([disabled]),
   &.d-btn--active:active:not([disabled]) {
-    --button-color-background: hsla(var(--black-800-hsl) ~' / ' 25%);
+    --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 25%);
   }
 
   .d-btn__icon .d-svg {
-    width: @icon18;
-    height: @icon18;
+    width: var(--dt-icon-size-300);
+    height: var(--dt-icon-size-300);
   }
 }
 
 .d-chip__icon {
-  padding-right: var(--space-300);
+  padding-right: var(--dt-space-300);
   line-height: 0;
 }
 
 .d-chip__label--active {
-  background-color: var(--black-400);
+  background-color: var(--dt-color-black-400);
 }
 
 //  ============================================================================
@@ -134,83 +134,83 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--xs {
-  padding: var(--space-200) calc(var(--space-200) + var(--space-300));
-  font-size: var(--fs-100);
+  padding: var(--dt-space-200) var(--dt-space-350);
+  font-size: var(--dt-font-size-100);
 
   .d-svg {
-    width: @icon14;
-    height: @icon14;
+    width: var(--dt-icon-size-200);
+    height: var(--dt-icon-size-200);
   }
 
   // reserves space within the chip for the close button, since the close button is
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--size-400) + var(--size-300));
-    height: calc(var(--size-400) + var(--size-300));
+    width: var(--dt-size-450);
+    height: var(--dt-size-450);
     content: '';
   }
 
   .d-avatar {
-    --avatar-size-shape: var(--size-500);
+    --avatar-size-shape: var(--dt-size-500);
 
-    margin-right: var(--space-300);
-    margin-left: calc(var(--space-300) * -1);
+    margin-right: var(--dt-space-300);
+    margin-left: var(--dt-space-300-negative);
   }
 }
 
 .d-chip__close--xs {
-  padding: var(--space-100);
+  padding: var(--dt-space-100);
 
   // Clickable area for the close button.
   &::before {
-    width: calc(var(--size-600) - var(--size-400)); // 24
-    height: calc(var(--size-600) - var(--size-400)); // 24
+    width: var(--dt-size-550);
+    height: var(--dt-size-550);
   }
 
   .d-btn__icon .d-svg {
-    width: @icon14;
-    height: @icon14;
+    width: var(--dt-icon-size-200);
+    height: var(--dt-icon-size-200);
   }
 }
 
 //  $$ SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--sm {
-  padding: var(--space-200) var(--space-400);
-  font-size: var(--fs-200);
+  padding: var(--dt-space-200) var(--dt-space-400);
+  font-size: var(--dt-font-size-200);
 
   .d-svg {
-    width: @icon16;
-    height: @icon16;
+    width: var(--dt-size-500);
+    height: var(--dt-size-500);
   }
 
   // reserves space within the chip for the close button, since the close button is
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--size-500) - var(--size-200)); // 14
-    height: calc(var(--size-500) - var(--size-200)); // 14
+    width: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
+    height: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
     content: '';
   }
 
   .d-avatar {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-300)); // 20
+    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-300)); // 20
 
-    margin-right: var(--space-300);
+    margin-right: var(--dt-space-300);
   }
 }
 
 .d-chip__close--sm {
-  padding: var(--space-200);
+  padding: var(--dt-space-200);
 
   &::before {
-    width: calc(var(--size-600) - var(--space-400)); // 24
-    height: calc(var(--size-600) - var(--space-400)); // 24
+    width: var(--dt-space-550);
+    height: var(--dt-space-550);
   }
 
   .d-btn__icon .d-svg {
-    width: @icon16;
-    height: @icon16;
+    width: var(--dt-size-500);
+    height: var(--dt-size-500);
   }
 }

package/lib/build/less/components/forms.less

@@ -1,5 +1,3 @@
-//@import (reference) '../variables/typography.less';
-
 //
 //  DIALTONE
 //  COMPONENTS: FORMS
@@ -37,12 +35,12 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-bottom: var(--space-300);
-  color: var(--fc-secondary);
-  font-weight: var(--fw-semibold);
-  font-size: var(--fs-200);
+  margin-bottom: var(--dt-space-300);
+  color: var(--dt-color-foreground-secondary);
+  font-weight: var(--dt-font-weight-semi-bold);
+  font-size: var(--dt-font-size-200);
   font-family: inherit;
-  line-height: var(--lh-300);
+  line-height: var(--dt-font-line-height-300);
   word-break: break-word;
   overflow-wrap: break-word;
 
@@ -52,19 +50,19 @@ fieldset {
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-label--xs {
-  font-size: var(--fs-100);
+  font-size: var(--dt-font-size-100);
 }
 
 .d-label--sm {
-  font-size: var(--fs-200);
+  font-size: var(--dt-font-size-200);
 }
 
 .d-label--lg {
-  font-size: var(--fs-200);
+  font-size: var(--dt-font-size-200);
 }
 
 .d-label--xl {
-  font-size: var(--fs-300);
+  font-size: var(--dt-font-size-300);
 }
 
 //  ============================================================================
@@ -73,50 +71,50 @@ fieldset {
 .d-description {
   display: flex;
   box-sizing: border-box;
-  color: var(--fc-tertiary);
-  font-size: var(--fs-100);
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
   font-family: inherit;
-  line-height: var(--lh-400);
+  line-height: var(--dt-font-line-height-400);
   fill: currentColor;
 }
 
 .d-label + .d-description {
-  margin-top: calc(var(--space-300) * -1);
-  margin-bottom: var(--space-300);
+  margin-top: var(--dt-space-300-negative);
+  margin-bottom: var(--dt-space-300);
 }
 
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-description--lg {
-  font-size: var(--fs-200);
+  font-size: var(--dt-font-size-200);
 }
 
 .d-description--xl {
-  font-size: var(--fs-200);
+  font-size: var(--dt-font-size-200);
 }
 
 //  ============================================================================
 //  $   VALIDATION MESSAGES
 //  ----------------------------------------------------------------------------
 .d-validation-message {
-  --validation-color-text: var(--fc-tertiary);
+  --validation-color-text: var(--dt-color-foreground-tertiary);
 
   display: flex;
-  gap: var(--space-300);
+  gap: var(--dt-space-300);
   align-items: flex-start;
-  margin-top: var(--space-400);
+  margin-top: var(--dt-space-400);
   color: var(--validation-color-text);
-  font-weight: var(--fw-medium);
-  font-size: var(--fs-100);
+  font-weight: var(--dt-font-weight-medium);
+  font-size: var(--dt-font-size-100);
   font-family: inherit;
-  line-height: var(--lh-300);
+  line-height: var(--dt-font-line-height-300);
 
   // Icon Slot
   &::before {
     display: block;
-    width: var(--size-500); // 16
-    min-width: var(--size-500); // 16
-    height: var(--size-500); // 16
+    width: var(--dt-size-500); // 16
+    min-width: var(--dt-size-500); // 16
+    height: var(--dt-size-500); // 16
     content: '';
   }
 }
@@ -125,7 +123,7 @@ fieldset {
 //  ----------------------------------------------------------------------------
 
 .d-validation-message--warning {
-  --validation-color-text: var(--fc-warning);
+  --validation-color-text: var(--dt-color-foreground-warning);
 
   &::before {
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==');
@@ -134,7 +132,7 @@ fieldset {
 }
 
 .d-validation-message--error {
-  --validation-color-text: var(--fc-critical);
+  --validation-color-text: var(--dt-color-foreground-critical);
 
   &::before {
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');
@@ -143,7 +141,7 @@ fieldset {
 }
 
 .d-validation-message--success {
-  --validation-color-text: var(--fc-success);
+  --validation-color-text: var(--dt-color-foreground-success);
 
   &::before {
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');

package/lib/build/less/components/icon.less

@@ -13,7 +13,7 @@
 //  $   SIZE
 //  ----------------------------------------------------------------------------
 .d-icon {
-  --icon-base-scale: var(--size-400); // replace with global variable eventually
+  --icon-base-scale: var(--dt-size-400); // replace with global variable eventually
   --icon-size-100: calc(var(--icon-base-scale) * 1.5);
   --icon-size-200: calc(var(--icon-base-scale) * 1.75);
   --icon-size-300: calc(var(--icon-base-scale) * 2.25);

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

@@ -1,6 +1,3 @@
-//@import (reference) '../variables/icons.less';
-//@import (reference) '../variables/sizes.less';
-
 //
 //  DIALTONE
 //  COMPONENTS: INPUTS
@@ -29,16 +26,16 @@
 .d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input-color-border: var(--bc-subtle);
-    --input-color-background: hsla(var(--black-900-hsl) / 0.03);
-    --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
-    --input-color-text: var(--fc-secondary);
-    --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
-    --input-border-radius: var(--size-400);
-    --input-padding-y: calc(var(--space-400) - var(--input-border-width));
-    --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
-    --input-font-size: var(--fs-200);
-    --input-line-height: var(--lh-200);
+    --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-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));
+    --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
+    --input-font-size: var(--dt-font-size-200);
+    --input-line-height: var(--dt-font-line-height-200);
 
     position: relative;
     display: inline-flex;
@@ -65,7 +62,7 @@
 
     //  --  Placeholder copy
     &::placeholder {
-        color: var(--fc-placeholder);
+        color: var(--dt-color-foreground-placeholder);
     }
     //  --  Remove input EDGE additions
     &::-ms-clear {
@@ -74,17 +71,17 @@
     //  --  FOCUS STATE
     &:focus,
     &:focus-within {
-        --input-color-background: hsla(var(--black-900-hsl) / 0.01);
-        --input-color-border: var(--bc-focus) !important;
+        --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(--size-100) var(--input-color-border) inset;
+        box-shadow: 0 0 0 var(--dt-size-100) var(--input-color-border) inset;
     }
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
         --input-color-border: transparent !important;
         --input-color-background: var(--input-color-background-disabled);
-        --input-color-text: var(--fc-disabled);
+        --input-color-text: var(--dt-color-foreground-disabled);
 
         &:focus,
         &:focus-within {
@@ -93,7 +90,7 @@
 
         //  --  Placeholder copy
         &::placeholder {
-            color: var(--fc-placeholder);
+            color: var(--dt-color-foreground-placeholder);
         }
     }
 
@@ -109,7 +106,7 @@
 
     &:-moz-focusring {
         color: transparent;
-        text-shadow: 0 0 0 var(--black-900);
+        text-shadow: 0 0 0 var(--dt-color-black-900);
     }
 
     &::-ms-expand {
@@ -123,11 +120,11 @@
     padding: 0;
 
     .d-input-icon.d-input-icon--right {
-        margin-right: var(--space-400);
+        margin-right: var(--dt-space-400);
     }
 
     .d-input-icon.d-input-icon--left {
-        margin-left: var(--space-400);
+        margin-left: var(--dt-space-400);
     }
 
     .d-input,
@@ -143,11 +140,11 @@
         }
 
         &.d-input-icon--right {
-            padding-right: calc(var(--space-300) + var(--space-200));
+            padding-right: var(--dt-space-350);
         }
 
         &.d-input-icon--left {
-            padding-left: calc(var(--space-300) + var(--space-200));
+            padding-left: var(--dt-space-350);
         }
     }
 }
@@ -175,9 +172,9 @@
 //  $  TEXTAREAS
 //  ----------------------------------------------------------------------------
 .d-textarea {
-    min-height: calc(var(--size-300) * 20); // 80
+    min-height: calc(var(--dt-size-300) * 20); // 80
     vertical-align: top;
-    border-bottom-right-radius: var(--size-300);
+    border-bottom-right-radius: var(--dt-size-300);
     resize: vertical;
     scroll-padding-block: var(--input-padding-y);
 }
@@ -187,42 +184,42 @@
 .d-textarea--xs {
     #d-internal__input-and-select-xs();
 
-    min-height: calc(var(--size-300) * 10); // 40
+    min-height: calc(var(--dt-size-300) * 10); // 40
 }
 
 .d-textarea--sm {
     #d-internal__input-and-select-sm();
 
-    min-height: calc(var(--size-300) * 12); // 48
+    min-height: var(--dt-size-650); // 48
 }
 
 .d-textarea--lg {
     #d-internal__input-and-select-lg();
 
-    min-height: calc(var(--size-300) * 23); // 92
+    min-height: calc(var(--dt-size-300) * 23); // 92
 }
 
 .d-textarea--xl {
     #d-internal__input-and-select-xl();
 
-    min-height: calc(var(--size-300) * 25); // 100
+    min-height: calc(var(--dt-size-300) * 25); // 100
 }
 
 //  $$  VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-input--warning,
 .d-textarea--warning {
-    --input-color-border: var(--bc-warning) !important;
+    --input-color-border: var(--dt-color-border-warning) !important;
 }
 
 .d-input--error,
 .d-textarea--error {
-    --input-color-border: var(--bc-critical) !important;
+    --input-color-border: var(--dt-color-border-critical) !important;
 }
 
 .d-input--success,
 .d-textarea--success {
-    --input-color-border: var(--bc-success) !important;
+    --input-color-border: var(--dt-color-border-success) !important;
 }
 
 //  ============================================================================
@@ -231,8 +228,8 @@
 .d-input-icon {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input-icon-size: var(--size-500);
-    --input-icon-container-height: var(--size-600);
+    --input-icon-size: var(--dt-size-500);
+    --input-icon-container-height: var(--dt-size-600);
 
     z-index: var(--zi-base1);
     display: inline-flex;
@@ -252,37 +249,37 @@
 //  $$ SIZES
 //  ----------------------------------------------------------------------------
 .d-input-icon.d-input--xs {
-    --input-icon-container-height: calc(var(--size-600) - var(--size-300));
+    --input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
 }
 
 .d-input-icon--xs {
     // Backwards-compatible to DT6 icons
-    --input-icon-size: @icon12;
+    --input-icon-size: var(--dt-icon-size-100);
 }
 
 .d-input-icon.d-input--sm {
-    --input-icon-container-height: var(--size-600);
+    --input-icon-container-height: var(--dt-size-600);
 }
 
 .d-input-icon--sm {
     // Backwards-compatible to DT6 icons
-    --input-icon-size: @icon14;
+    --input-icon-size: var(--dt-icon-size-200);
 }
 
 .d-input-icon.d-input--lg {
-    --input-icon-container-height: calc(var(--size-300) * 10);
+    --input-icon-container-height: calc(var(--dt-size-300) * 10);
 }
 
 .d-input-icon--lg {
     // Backwards-compatible to DT6 icons
-    --input-icon-size: @icon20;
+    --input-icon-size: var(--dt-icon-size-400);
 }
 
 .d-input-icon.d-input--xl {
-    --input-icon-container-height: calc(var(--size-300) * 14);
+    --input-icon-container-height: calc(var(--dt-size-300) * 14);
 }
 
 .d-input-icon--xl {
     // Backwards-compatible to DT6 icons
-    --input-icon-size: @icon24;
+    --input-icon-size: var(--dt-icon-size-500);
 }