@dialpad/dialtone 7.10.1 → 7.10.2

package/lib/build/less/components/tooltip.less

@@ -37,22 +37,22 @@
 .d-tooltip {
     //  --  COMPONENT CSS VARS
     //  -----------------------
-    --tooltip--bgc: var(--black-800);
-    --tooltip--fc: var(--white);
+    --tooltip-color-background: var(--black-800);
+    --tooltip-color-text: var(--white);
 
     z-index: var(--zi-tooltip);
-    max-width: var(--size216);
-    padding: var(--su8);
-    color: var(--tooltip--fc);
+    max-width: calc(var(--size-300) * 54); // 216
+    padding: var(--space-400); // 8
+    color: var(--tooltip-color-text);
     font-size: var(--fs-100);
     line-height: var(--lh-300);
     text-align: center;
-    background-color: var(--tooltip--bgc);
-    border-radius: var(--br4);
+    background-color: var(--tooltip-color-background);
+    border-radius: var(--size-300); // 4
 
     &::after {
         position: absolute;
-        border: var(--su6) solid transparent;
+        border: calc(var(--size-300) + var(--size-200)) solid transparent; // 6
         content: '';
     }
 }
@@ -63,8 +63,8 @@
 .d-tooltip--inverted {
     //  --  COMPONENT CSS VARS
     //  -----------------------
-    --tooltip--bgc: var(--black-200);
-    --tooltip--fc: var(--black-700);
+    --tooltip-color-background: var(--black-200);
+    --tooltip-color-text: var(--black-700);
 }
 
 //  ============================================================================
@@ -119,13 +119,13 @@
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-  top: calc(100% + var(--su12));
-  transform: translateY(var(--su16));
+  top: calc(100% + calc(var(--space-300) * 3)); // 100% + 12
+  transform: translateY(var(--space-500)); // 16
 
   &::after {
-    top: var(--sun6);
+    top: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
     border-top-width: 0;
-    border-bottom-color: var(--tooltip--bgc);
+    border-bottom-color: var(--tooltip-color-background);
   }
 }
 
@@ -137,12 +137,12 @@
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-  bottom: calc(100% + var(--su12));
-  transform: translateY(var(--sun16));
+  bottom: calc(100% + calc(var(--space-300) * 3)); // 100% + 12
+  transform: translateY(calc(var(--space-500) * -1)); // -16
 
   &::after {
-    bottom: var(--sun6);
-    border-top-color: var(--tooltip--bgc);
+    bottom: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
+    border-top-color: var(--tooltip-color-background);
     border-bottom-width: 0;
   }
 }
@@ -153,10 +153,10 @@
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-  left: var(--sun2);
+  left: calc(var(--space-200) * -1); // -2
 
   &::after {
-    left: var(--su16);
+    left: var(--space-500); // 16
   }
 }
 
@@ -168,7 +168,7 @@
 .d-tooltip__arrow--bottom-center {
   &::after {
     left: 50%;
-    margin-left: var(--sun6);
+    margin-left: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
   }
 }
 
@@ -178,10 +178,10 @@
 .d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-  right: var(--sun2);
+  right: calc(var(--space-200) * -1); // -2
 
   &::after {
-    right: var(--su16);
+    right: var(--space-500); // 16
   }
 }
 
@@ -193,13 +193,13 @@
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-  right: calc(100% + var(--su12));
-  transform: translateX(var(--sun16));
+  right: calc(100% + calc(var(--space-300) * 3)); // 100% + 12
+  transform: translateX(calc(var(--space-500) * -1)); // -16
 
   &::after {
-    right: var(--sun6);
+    right: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
     border-right-width: 0;
-    border-left-color: var(--tooltip--bgc);
+    border-left-color: var(--tooltip-color-background);
   }
 }
 
@@ -211,12 +211,12 @@
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-  left: calc(100% + var(--su12));
-  transform: translateX(var(--su16));
+  left: calc(100% + calc(var(--space-300) * 3)); // 100% + 12
+  transform: translateX(var(--space-500)); // 16
 
   &::after {
-    left: var(--sun6);
-    border-right-color: var(--tooltip--bgc);
+    left: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
+    border-right-color: var(--tooltip-color-background);
     border-left-width: 0;
   }
 }
@@ -227,10 +227,10 @@
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-  top: var(--sun1);
+  top: calc(var(--space-100) * -1); // -1
 
   &::after {
-    top: var(--su8);
+    top: var(--space-400); // 8
   }
 }
 
@@ -242,7 +242,7 @@
 .d-tooltip__arrow--left-center {
   &::after {
     top: 50%;
-    margin-top: var(--sun6);
+    margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
   }
 }
 
@@ -252,9 +252,9 @@
 .d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-  bottom: var(--sun1);
+  bottom: calc(var(--space-100) * -1); // -1
 
   &::after {
-    bottom: var(--su8);
+    bottom: var(--space-400); // 8
   }
 }

package/lib/build/less/dialtone-globals.less

@@ -20,7 +20,7 @@
 
 html,
 body {
-    margin: var(--su0);
+    margin: 0;
     /* stylelint-disable-next-line meowtec/no-px */
     font-size: 10px; // [1]
 }

package/lib/build/less/themes/default.less

@@ -45,7 +45,7 @@
     nav-background-color-l:                 var(--purple-600-l);
     nav-background-color:                   hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
 
-    topbar-height:                                    var(--su64);
+    topbar-height:                                    var(--size-700);
 
     base--font-size:                                  var(--fs-200);
     base--font-family:                                @ff-custom;

package/lib/build/less/utilities/backgrounds.less

@@ -118,13 +118,13 @@
 //  --  BASE CLASS
 .d-bgg-pattern {
     position: relative;
-    padding-left: var(--su24) !important;
+    padding-left: calc(var(--space-300) * 6) !important;
 
     &::after {
         position: absolute;
-        top: var(--su1);
-        bottom: var(--su1);
-        left: var(--su1);
+        top: var(--space-100);
+        bottom: var(--space-100);
+        left: var(--space-100);
         min-width: 2rem;
         min-height: 2rem;
         background-image: var(--bgg-pattern);

package/lib/build/less/utilities/borders.less

@@ -32,11 +32,11 @@
 
 //  $$ DIRECTION
 //  ----------------------------------------------------------------------------
-.d-ba { border: var(--su1) solid !important; }
-.d-bt { border-top: var(--su1) solid !important; }
-.d-br { border-right: var(--su1) solid !important; }
-.d-bb { border-bottom: var(--su1) solid !important; }
-.d-bl { border-left: var(--su1) solid !important; }
+.d-ba { border: var(--size-100) solid !important; }
+.d-bt { border-top: var(--size-100) solid !important; }
+.d-br { border-right: var(--size-100) solid !important; }
+.d-bb { border-bottom: var(--size-100) solid !important; }
+.d-bl { border-left: var(--size-100) solid !important; }
 .d-bx { .d-br(); .d-bl(); }
 .d-by { .d-bt(); .d-bb(); }
 .d-ba-none { border: none !important; }
@@ -116,36 +116,36 @@
 
 //  $$ WIDTH
 //  ----------------------------------------------------------------------------
-.d-baw0 { border-width: var(--su0) !important; }
-.d-baw1 { border-width: var(--su1) !important; }
+.d-baw0 { border-width: 0 !important; }
+.d-baw1 { border-width: var(--size-100) !important; }
 .d-baw2 { border-width: var(--su2) !important; }
 .d-baw4 { border-width: var(--su4) !important; }
 .d-baw6 { border-width: var(--su6) !important; }
 
 //  --  Top Border width
-.d-btw0 { border-top-width: var(--su0) !important; }
-.d-btw1 { border-top-width: var(--su1) !important; }
+.d-btw0 { border-top-width: 0 !important; }
+.d-btw1 { border-top-width: var(--size-100) !important; }
 .d-btw2 { border-top-width: var(--su2) !important; }
 .d-btw4 { border-top-width: var(--su4) !important; }
 .d-btw6 { border-top-width: var(--su6) !important; }
 
 //  --  Right Border width
-.d-brw0 { border-right-width: var(--su0) !important; }
-.d-brw1 { border-right-width: var(--su1) !important; }
+.d-brw0 { border-right-width: 0 !important; }
+.d-brw1 { border-right-width: var(--size-100) !important; }
 .d-brw2 { border-right-width: var(--su2) !important; }
 .d-brw4 { border-right-width: var(--su4) !important; }
 .d-brw6 { border-right-width: var(--su6) !important; }
 
 //  --  Bottom Border width
-.d-bbw0 { border-bottom-width: var(--su0) !important; }
-.d-bbw1 { border-bottom-width: var(--su1) !important; }
+.d-bbw0 { border-bottom-width: 0 !important; }
+.d-bbw1 { border-bottom-width: var(--size-100) !important; }
 .d-bbw2 { border-bottom-width: var(--su2) !important; }
 .d-bbw4 { border-bottom-width: var(--su4) !important; }
 .d-bbw6 { border-bottom-width: var(--su6) !important; }
 
 //  --  Left Border width
-.d-blw0 { border-left-width: var(--su0) !important; }
-.d-blw1 { border-left-width: var(--su1) !important; }
+.d-blw0 { border-left-width: 0 !important; }
+.d-blw1 { border-left-width: var(--size-100) !important; }
 .d-blw2 { border-left-width: var(--su2) !important; }
 .d-blw4 { border-left-width: var(--su4) !important; }
 .d-blw6 { border-left-width: var(--su6) !important; }

package/lib/build/less/utilities/interactivity.less

@@ -42,7 +42,7 @@
 //      Sets the style, width, color, and other characteristics
 //      elements' outlines. These shouldn't be confused with borders.
 //  ----------------------------------------------------------------------------
-.d-ol-focusring { outline: solid var(--su4) var(--focus-ring) !important; }
+.d-ol-focusring { outline: solid var(--size-300) var(--focus-ring) !important; }
 .d-ol-none { outline: 0 !important; }
 
 

package/lib/build/less/utilities/typography.less

@@ -68,8 +68,8 @@ h6,
 p,
 ol,
 ul {
-    margin-top: var(--su0);
-    margin-bottom: var(--su0);
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 //  ============================================================================

package/lib/build/less/variables/borders.less

@@ -12,18 +12,17 @@
 //  ============================================================================
 //  $   RADIUS
 //  ----------------------------------------------------------------------------
-@br0:                       var(--su0);
-@br2:                       var(--su2);
-@br4:                       var(--su4);
-@br8:                       var(--su8);
-@br12:                      var(--su12);
-@br16:                      var(--su16);
-@br24:                      var(--su24);
-@br32:                      var(--su32);
+@br0:                       0;
+@br2:                       var(--size-200);
+@br4:                       var(--size-300);
+@br8:                       var(--size-400);
+@br12:                      calc(var(--size-400) + var(--size-300));
+@br16:                      var(--size-500);
+@br24:                      calc(var(--size-600) - var(--size-400));
+@br32:                      var(--size-600);
 @br-circle:                 50%;
 @br-pill:                   100em;
 
-
 @border-vars: {
     br0:                    @br0;
     br2:                    @br2;

package/lib/build/less/variables/sizes.less

@@ -8,8 +8,9 @@
 //  ============================================================================
 //  $   CSS VARS
 //  ============================================================================
+// I don't think these are used anymore. Confirm and remove.
 @input-button-vars: {
-    input-button__padding:                  0.7rem var(--su8);
+    input-button__padding:                  calc(var(--space-400) - var(--space-100)) var(--space-400);
     input-button__text-size:                var(--fs-200);
     input-button__line-height:              var(--lh4);
     input-button__icon-size:                @icon-size18;
@@ -22,8 +23,8 @@
 //      Target height: 24px
 //  ----------------------------------------------------------------------------
 .input-button-xs() {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: var(--space-100 / 2); // .5rem
+    padding-bottom: calc(var(--space-400) + var(--space-100)); // 5px
     font-size: var(--fs-100);
 
     .d-btn__icon {
@@ -36,8 +37,10 @@
 //      Target height: 32px
 //  ----------------------------------------------------------------------------
 .input-button-sm() {
-    padding-top: var(--su6);
-    padding-bottom: var(--su6);
+    --padding-y: calc(var(--space-300) + var(--space-200)); // 6
+
+    padding-top: var(--padding-y);
+    padding-bottom: var(--padding-y);
     font-size: var(--fs-200);
 
     .d-btn__icon {
@@ -50,8 +53,10 @@
 //      Target height: 48px
 //  ----------------------------------------------------------------------------
 .input-button-lg() {
-    padding-top: 1.1rem;
-    padding-bottom: 1.1rem;
+    --padding-y: calc(calc(var(--space-300) + var(--space-200)) + calc(var(--space-300) + var(--space-200))); // 11 yes this is awkward
+
+    padding-top: var(--padding-y);
+    padding-bottom: var(--padding-y);
     font-size: var(--fs-300);
 
     .d-btn__icon {
@@ -64,8 +69,10 @@
 //      Target height: 56px
 //  ----------------------------------------------------------------------------
 .input-button-xl() {
-    padding-top: 1.3rem;
-    padding-bottom: 1.3rem;
+    --padding-y: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100)); // 13
+
+    padding-top: var(--padding-y);
+    padding-bottom: var(--padding-y);
     font-size: var(--fs-300);
 
     .d-btn__icon {

package/lib/build/less/variables/visual-styles.less

@@ -29,22 +29,22 @@
     bs-focus-ring-inverted:    @bs-focus-ring-inverted;
 }
 
-@bs-sm:    0 var(--su2) var(--su4) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 15%);
-@bs-md:    0 var(--su2) var(--su8) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 25%);
-@bs-lg:    0 var(--su2) var(--su12) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
-@bs-xl:    0 var(--su2) var(--su16) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
+@bs-sm:    0 var(--size-200) var(--size-300) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 15%);
+@bs-md:    0 var(--size-200) var(--size-400) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 25%);
+@bs-lg:    0 var(--size-200) calc(var(--size-300) * 3) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
+@bs-xl:    0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
 
-@bs-card:  0 var(--su2) var(--su16) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 8%),
-           0 var(--su2) var(--su4) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 4%),
-           0 var(--su1) var(--su2) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 3%);
+@bs-card:  0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 8%),
+           0 var(--size-200) var(--size-300) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 4%),
+           0 var(--size-100) var(--size-200) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 3%);
 
-@bs-focus-ring:              0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring);
-@bs-focus-ring-error:        0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-error);
-@bs-focus-ring-success:      0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-success);
-@bs-focus-ring-warning:      0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-warning);
-@bs-focus-ring-circle:       0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--black-400);
-@bs-focus-ring-muted:        0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--black-500);
-@bs-focus-ring-inverted:     0 0 0 var(--su1) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
+@bs-focus-ring:              0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring);
+@bs-focus-ring-error:        0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-error);
+@bs-focus-ring-success:      0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-success);
+@bs-focus-ring-warning:      0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-warning);
+@bs-focus-ring-circle:       0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--black-400);
+@bs-focus-ring-muted:        0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--black-500);
+@bs-focus-ring-inverted:     0 0 0 var(--size-100) var(--white), 0 0 0 0.25em var(--focus-ring-inverted);
 
 //  ============================================================================
 //  $   TRANSITIONS