@dialpad/dialtone 7.10.0 → 7.10.2

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

@@ -22,22 +22,22 @@
 
 .d-chip__label {
   //  Component CSS Vars
-  --chip--fc: var(--fc-primary);
-  --chip--bgc: var(--black-200);
-  --chip--br: var(--su102);
+  --chip-color-text: var(--fc-primary);
+  --chip-color-background: var(--black-200);
+  --chip-border-radius: var(--br-pill);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: var(--su4) var(--su8);
-  color: var(--chip--fc);
+  padding: var(--space-300) var(--space-400);
+  color: var(--chip-color-text);
   font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh4);
-  background-color: var(--chip--bgc);
+  background-color: var(--chip-color-background);
   border: none;
-  border-radius: var(--chip--br);
+  border-radius: var(--chip-border-radius);
   transition-timing-function: var(--ttf-in-out);
   transition-duration: 75ms;
   transition-property: background-color;
@@ -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(--su16) + var(--su2));
-    height: calc(var(--su16) + var(--su2));
+    width: calc(var(--size-500) + var(--space-200));
+    height: calc(var(--size-500) + var(--space-200));
     content: '';
   }
 
@@ -60,13 +60,13 @@
     cursor: pointer;
 
     &:hover {
-      --chip--bgc: var(--black-300);
+      --chip-color-background: var(--black-300);
 
       text-decoration: none;
     }
 
     &:active {
-      --chip--bgc: var(--black-400);
+      --chip-color-background: var(--black-400);
     }
 
     &:focus-visible {
@@ -76,9 +76,9 @@
   }
 
   .d-avatar {
-    --avatar-size-shape: var(--su24);
+    --avatar-size-shape: calc(var(--size-600) - var(--space-400));
 
-    margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
+    margin: calc(var(--space-200) * -1) var(--space-300) calc(var(--space-200) * -1) calc(calc(var(--space-300) + var(--space-200)) * -1);
   }
 
   .d-svg {
@@ -92,14 +92,14 @@
   .d-btn--circle();
 
   position: absolute;
-  right: var(--su2);
-  padding: calc(var(--su2) + var(--su1));
-  border-width: var(--su0);
+  right: var(--space-200);
+  padding: calc(var(--space-200) + var(--space-100));
+  border-width: 0;
 
   &::before {
     position: absolute;
-    width: 2.6rem;
-    height: 2.8rem;
+    width: 2.6rem; // magic number
+    height: 2.8rem; // magic number
     content: '';
   }
 
@@ -118,7 +118,7 @@
 }
 
 .d-chip__icon {
-  padding-right: var(--su4);
+  padding-right: var(--space-300);
   line-height: 0;
 }
 
@@ -132,11 +132,9 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--xs {
-  padding: var(--su2) var(--su6);
+  padding: var(--space-200) calc(var(--space-200) + var(--space-300));
   font-size: var(--fs-100);
 
-
-
   .d-svg {
     width: @icon14;
     height: @icon14;
@@ -146,26 +144,26 @@
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: var(--su12);
-    height: var(--su12);
+    width: calc(var(--size-400) + var(--size-300));
+    height: calc(var(--size-400) + var(--size-300));
     content: '';
   }
 
   .d-avatar {
-    --avatar-size-shape: var(--su16);
+    --avatar-size-shape: var(--size-500);
 
-    margin-right: var(--su4);
-    margin-left: var(--sun4);
+    margin-right: var(--space-300);
+    margin-left: calc(var(--space-300) * -1);
   }
 }
 
 .d-chip__close--xs {
-  padding: var(--su1);
+  padding: var(--space-100);
 
   // Clickable area for the close button.
   &::before {
-    width: var(--su24);
-    height: var(--su24);
+    width: calc(var(--size-600) - var(--size-400)); // 24
+    height: calc(var(--size-600) - var(--size-400)); // 24
   }
 
   .d-btn__icon .d-svg {
@@ -177,7 +175,7 @@
 //  $$ SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--sm {
-  padding: var(--su2) var(--su8);
+  padding: var(--space-200) var(--space-400);
   font-size: var(--fs-200);
 
   .d-svg {
@@ -189,25 +187,25 @@
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--su12) + var(--su2));
-    height: calc(var(--su12) + var(--su2));
+    width: calc(var(--size-500) - var(--size-200)); // 14
+    height: calc(var(--size-500) - var(--size-200)); // 14
     content: '';
   }
 
   .d-avatar {
-    --avatar-size-shape: calc(var(--su24) - var(--su4));
+    --avatar-size-shape: calc(var(--size-500) + var(--size-300)); // 20
 
-    margin-right: var(--su4);
-    margin-left: var(--sun6);
+    margin-right: var(--space-300);
+    margin-left: calc(var(--space-300) + var(--space-200)); // 6
   }
 }
 
 .d-chip__close--sm {
-  padding: var(--su2);
+  padding: var(--space-200);
 
   &::before {
-    width: var(--su24);
-    height: var(--su24);
+    width: calc(var(--size-600) - var(--space-400)); // 24
+    height: calc(var(--size-600) - var(--space-400)); // 24
   }
 
   .d-btn__icon .d-svg {

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

@@ -21,8 +21,8 @@
 //  $  FIELDSETS
 //  ----------------------------------------------------------------------------
 fieldset {
-  min-width: var(--su0);
-  padding: var(--su0);
+  min-width: 0;
+  padding: 0;
   border: none;
 }
 
@@ -36,7 +36,7 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200)); // 6
   color: currentColor;
   font-weight: @fw-bold;
   font-size: var(--fs-200);
@@ -78,7 +78,7 @@ fieldset {
 .d-description {
   display: flex;
   box-sizing: border-box;
-  margin-bottom: var(--su6);
+  margin-bottom: calc(var(--space-300) + var(--space-200)); // 6
   color: var(--black-600);
   font-size: var(--fs-100);
   font-family: inherit;
@@ -87,7 +87,7 @@ fieldset {
 }
 
 .d-label + .d-description {
-  margin-top: var(--sun6);
+  margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
 }
 
 //  $$  SIZES
@@ -109,8 +109,9 @@ fieldset {
   --validation--fc: var(--fc-tertiary);
 
   display: inline-flex;
+  gap: var(--space-300); // 4
   align-items: flex-start;
-  margin-top: var(--su6);
+  margin-top: calc(var(--space-300) + var(--space-200)); // 6
   color: var(--validation--fc);
   font-weight: inherit;
   font-size: var(--fs-100);
@@ -119,10 +120,9 @@ fieldset {
 
   // Icon Slot
   &::before {
-    width: var(--su16);
-    min-width: var(--su16);
-    height: var(--su16);
-    margin-right: var(--su4);
+    width: var(--size-500); // 16
+    min-width: var(--size-500); // 16
+    height: var(--size-500); // 16
     content: '';
   }
 }

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

@@ -13,7 +13,7 @@
 //  $   SIZE
 //  ----------------------------------------------------------------------------
 .d-icon {
-  --icon-base-scale: 0.8rem; // replace with global variable eventually
+  --icon-base-scale: var(--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

@@ -26,10 +26,10 @@
 .d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input--focus-bc: var(--primary-color);
-    --input--bc: var(--black-600);
-    --input--bgc: var(--white);
-    --input--fc: var(--black-800);
+    --input-color-border-focus: var(--purple-400);
+    --input-color-border: var(--black-600);
+    --input-color-background: var(--white);
+    --input-color-text: var(--black-800);
 
     position: relative;
     display: inline-flex;
@@ -37,14 +37,14 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    padding: 0.7rem var(--su8);
-    color: var(--input--fc);
+    padding: calc(var(--space-400) - var(--space-100)) var(--space-400); // 7 8
+    color: var(--input-color-text);
     font-weight: inherit;
     font-size: var(--fs-200);
     font-family: inherit;
     line-height: var(--lh4);
-    background-color: var(--input--bgc);
-    border: 1px solid var(--input--bc);
+    background-color: var(--input-color-background);
+    border: 1px solid var(--input-color-border);
     border-radius: var(--base--corner-radius);
     outline: none;
     box-shadow: none;
@@ -63,7 +63,7 @@
     //  --  FOCUS
     &:focus,
     &:focus-within {
-        --input--bc: var(--input--focus-bc);
+        --input-color-border: var(--input-color-border-focus);
 
         outline: 0;
         box-shadow: var(--bs-focus-ring) !important;
@@ -71,9 +71,9 @@
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
-        --input--bc: var(--black-400) !important;
-        --input--bgc: var(--black-300);
-        --input--fc: var(--fc-disabled);
+        --input-color-border: var(--black-400) !important;
+        --input-color-background: var(--black-300);
+        --input-color-text: var(--fc-disabled);
 
         &:focus,
         &:focus-within {
@@ -97,11 +97,11 @@
     padding: 0;
 
     .d-input-icon.d-input-icon--right {
-        margin-right: var(--su8);
+        margin-right: var(--space-400); // 8
     }
 
     .d-input-icon.d-input-icon--left {
-        margin-left: var(--su8);
+        margin-left: var(--space-400); // 8
     }
 
     .d-input,
@@ -117,11 +117,11 @@
         }
 
         &.d-input-icon--right {
-            padding-right: var(--su6);
+            padding-right: calc(var(--space-300) + var(--space-200)); // 6
         }
 
         &.d-input-icon--left {
-            padding-left: var(--su6);
+            padding-left: calc(var(--space-300) + var(--space-200)); // 6
         }
     }
 }
@@ -149,7 +149,7 @@
 //  $  TEXTAREAS
 //  ----------------------------------------------------------------------------
 .d-textarea {
-    min-height: 8rem;
+    min-height: calc(var(--size-300) * 20); // 80
     vertical-align: top;
 }
 
@@ -158,33 +158,33 @@
 .d-textarea--xs {
     .input-button-xs();
 
-    min-height: 4rem;
+    min-height: calc(var(--size-300) * 10); // 40
 }
 
 .d-textarea--sm {
     .input-button-sm();
 
-    min-height: 4.8rem;
+    min-height: calc(var(--size-300) * 12); // 48
 }
 
 .d-textarea--lg {
     .input-button-lg();
 
-    min-height: 9.2rem;
+    min-height: calc(var(--size-300) * 23); // 92
 }
 
 .d-textarea--xl {
     .input-button-xl();
 
-    min-height: 10rem;
+    min-height: calc(var(--size-300) * 25); // 100
 }
 
 //  $$  VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-input--warning,
 .d-textarea--warning {
-    --input--bc: var(--warning-color) !important;
-    --input--focus-bc: var(--warning-color);
+    --input-color-border: var(--warning-color) !important;
+    --input-color-border-focus: var(--warning-color);
 
     &:focus,
     &:focus-within {
@@ -194,8 +194,8 @@
 
 .d-input--error,
 .d-textarea--error {
-    --input--bc: var(--error-color) !important;
-    --input--focus-bc: var(--error-color);
+    --input-color-border: var(--error-color) !important;
+    --input-color-border-focus: var(--error-color);
 
     &:focus,
     &:focus-within {
@@ -205,8 +205,8 @@
 
 .d-input--success,
 .d-textarea--success {
-    --input--bc: var(--success-color) !important;
-    --input--focus-bc: var(--success-color);
+    --input-color-border: var(--success-color) !important;
+    --input-color-border-focus: var(--success-color);
 
     &:focus,
     &:focus-within {
@@ -220,12 +220,12 @@
 .d-input-icon {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input-icon-size: @icon16;
+    --input-icon-size: var(--size-500);
 
     z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
-    height: 3.6rem;
+    height: calc(var(--size-300) * 9); // 36
     margin: 0;
     line-height: 0;
 
@@ -240,7 +240,7 @@
 //  $$ SIZES
 //  ----------------------------------------------------------------------------
 .d-input-icon.d-input--xs {
-    height: 2.8rem;
+    height: calc(var(--size-600) - var(--size-300)); // 28
 }
 
 .d-input-icon--xs {
@@ -248,7 +248,7 @@
 }
 
 .d-input-icon.d-input--sm {
-    height: 3.2rem;
+    height: var(--size-600); // 32
 }
 
 .d-input-icon--sm {
@@ -256,7 +256,7 @@
 }
 
 .d-input-icon.d-input--lg {
-    height: 4.8rem;
+    height: calc(var(--size-300) * 12); // 48
 }
 
 .d-input-icon--lg {
@@ -264,7 +264,7 @@
 }
 
 .d-input-icon.d-input--xl {
-    height: 5.6rem;
+    height: calc(var(--size-300) * 14); // 56
 }
 
 .d-input-icon--xl {

package/lib/build/less/components/link.less

@@ -19,9 +19,9 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    margin: var(--su0);
-    padding: var(--su0);
-    color: var(--primary-color);
+    margin: 0;
+    padding: 0;
+    color: var(--purple-400);
     font: inherit;
     text-decoration: underline;
     background-color: transparent;
@@ -35,7 +35,7 @@
     fill: currentColor;
 
     &:hover {
-        color: var(--primary-color-hover);
+        color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
         text-decoration: none;
         cursor: pointer;
     }
@@ -43,7 +43,7 @@
     &:focus-visible {
         border-radius: var(--br4);
         outline: none;
-        box-shadow: 0 0 0 var(--su2) var(--focus-ring);
+        box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
     }
 }
 
@@ -61,7 +61,7 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 var(--su2) var(--focus-ring-warning);
+        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
     }
 }
 
@@ -75,7 +75,7 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 var(--su2) var(--focus-ring-error);
+        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
     }
 }
 
@@ -89,7 +89,7 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 var(--su2) var(--focus-ring-success);
+        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
     }
 }
 
@@ -103,7 +103,7 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 var(--su2) var(--focus-ring-muted);
+        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
     }
 }
 
@@ -136,7 +136,7 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 var(--su2) var(--focus-ring-inverted);
+        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
     }
 }
 

package/lib/build/less/components/list-group.less

@@ -17,7 +17,7 @@
 .d-list-group--header,
 .d-list-group--link {
     display: block;
-    padding: var(--su4) var(--su24);
+    padding: var(--size-300) calc(var(--size-300) * 6); // 4 24
 }
 
 .d-list-group--header {
@@ -33,16 +33,16 @@
 
     &:hover {
         color: var(--black-900);
-        background-color: hsla(var(--primary-color-hsl) ~' / ' 85%);
+        background-color: hsla(var(--purple-400-hsl) ~' / ' 85%);
     }
 
     &-selected {
         color: var(--white);
-        background-color: var(--primary-color);
+        background-color: var(--purple-400);
 
         &:hover {
             color: var(--white);
-            background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
+            background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
         }
     }
 }