@dialpad/dialtone 7.10.1 → 7.10.3

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

@@ -23,10 +23,9 @@
 .d-select {
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
-  --select--bc: var(--black-500);
-  --select--bgc: var(--white);
-  --select--fc: var(--black-800);
-  --select--bs: var(--focus-ring);
+  --select-color-border: var(--black-500);
+  --select-color-background: var(--white);
+  --select-color-text: var(--black-800);
 
   position: relative;
   display: inline-flex; // important to the children alignment
@@ -99,11 +98,13 @@
 //  $  SELECT MENU INPUT
 //  ----------------------------------------------------------------------------
 .d-select__input {
+  --select-input-padding: calc(var(--space-400) - var(--space-100)) 2em calc(var(--space-400) - var(--space-100)) var(--space-400);// 7px 2em 7px 8px
+
   height: 100%; // Fill the height of its parent
-  padding: 0.7rem 2em 0.7rem 0.8rem !important;
-  color: var(--select--fc);
-  background-color: var(--select--bgc);
-  border-color: var(--select--bc);
+  padding: var(--select-input-padding) !important;
+  color: var(--select-color-text);
+  background-color: var(--select-color-background);
+  border-color: var(--select-color-border);
   //  [1] Reset the appearance
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -112,10 +113,10 @@
   //  [2] Update the styles
   .d-input();
 
-  --select--bc: var(--black-600);
+  --select-color-border: var(--black-600);
 
   &:focus {
-    --select--bc: var(--primary-color);
+    --select-color-border: var(--purple-400);
 
     box-shadow: var(--bs-focus-ring);
   }
@@ -143,30 +144,30 @@
 //  $$  VALIDATION STATES
 //  ------------------------------------------------------------------------
 .d-select__input--success {
-  --select--bc: var(--success-color);
+  --select-color-border: var(--success-color);
 
   &:focus {
-    --select--bc: var(--success-color);
+    --select-color-border: var(--success-color);
 
     box-shadow: var(--bs-focus-ring-success) !important;
   }
 }
 
 .d-select__input--error {
-  --select--bc: var(--error-color);
+  --select-color-border: var(--error-color);
 
   &:focus {
-    --select--bc: var(--error-color);
+    --select-color-border: var(--error-color);
 
     box-shadow: var(--bs-focus-ring-error) !important;
   }
 }
 
 .d-select__input--warning {
-  --select--bc: var(--warning-color);
+  --select-color-border: var(--warning-color);
 
   &:focus {
-    --select--bc: var(--warning-color);
+    --select-color-border: var(--warning-color);
 
     box-shadow: var(--bs-focus-ring-warning) !important;
   }

package/lib/build/less/components/skeleton.less

@@ -13,9 +13,9 @@
 .skeleton-placeholder {
   display: flex;
   width: 100%;
-  background: var(--placeholder-from-color, @black-300);
+  background: var(--placeholder-from-color, var(--black-300));
   animation-duration: 1000ms;
-  fill: var(--placeholder-from-color, @black-300);
+  fill: var(--placeholder-from-color, var(--black-300));
   stroke: none;
 
   &--animate {
@@ -27,17 +27,17 @@
 // the animation is used by the skeleton component
 @keyframes placeholder-throb {
   10% {
-    background: var(--placeholder-from-color, @black-300);
-    fill: var(--placeholder-from-color, @black-300);
+    background: var(--placeholder-from-color, var(--black-300));
+    fill: var(--placeholder-from-color, var(--black-300));
   }
 
   50% {
-    background: var(--placeholder-to-color, @black-200);
-    fill: var(--placeholder-to-color, @black-200);
+    background: var(--placeholder-to-color, var(--black-200));
+    fill: var(--placeholder-to-color, var(--black-200));
   }
 
   90% {
-    background: var(--placeholder-from-color, @black-300);
-    fill: var(--placeholder-from-color, @black-300);
+    background: var(--placeholder-from-color, var(--black-300));
+    fill: var(--placeholder-from-color, var(--black-300));
   }
 }

package/lib/build/less/components/table.less

@@ -17,15 +17,15 @@
 .d-table {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --table--th: var(--black-700);
-    --table--td: var(--black-600);
-    --table--bc: var(--black-400);
+    --table-color-th: var(--black-700);
+    --table-color-td: var(--black-600);
+    --table-color-border: var(--black-400);
 
     display: table;
     box-sizing: border-box;
     width: 100%;
     max-width: 100%;
-    margin: var(--su0);
+    margin: 0;
     font-size: var(--fs-200);
     line-height: var(--lh2);
     border-collapse: collapse;
@@ -33,8 +33,8 @@
 
     // Caption styles
     .d-table__caption {
-      margin-bottom: var(--su8);
-      color: var(--table--th);
+      margin-bottom: var(--space-400); // 8
+      color: var(--table-color-th);
       font-weight: var(--fw-bold);
       font-size: var(--fs-200);
       .d-ta-unset();
@@ -42,7 +42,7 @@
 
     // Table Head Styles
     thead {
-        border-bottom: var(--su2) solid var(--table--bc);
+        border-bottom: var(--size-200) solid var(--table-color-border);
 
         // Column Header Styles
         th {
@@ -53,21 +53,21 @@
 
     // Header Styles
     th {
-        color: var(--table--th);
+        color: var(--table-color-th);
         font-weight: var(--fw-bold);
     }
 
     // Cell Styles
     td {
-        color: var(--table--td);
+        color: var(--table-color-td);
     }
 
     // Header & Cell Styles
     th,
     td {
-        padding: var(--su16);
+        padding: var(--space-500); // 16
         text-align: left;
-        border-bottom: var(--su1) solid var(--table--bc);
+        border-bottom: var(--size-100) solid var(--table-color-border);
     }
 
     // Nested Table Body, First Row Styles, used internally on the Dialtone site
@@ -75,7 +75,7 @@
         // Header & Cell Styles
         td,
         th {
-            border-top: var(--su2) solid var(--table--bc);
+            border-top: var(--size-200) solid var(--table-color-border);
         }
     }
 
@@ -93,9 +93,9 @@
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------
 .d-table--inverted {
-    --table--th: var(--black-200);
-    --table--td: var(--black-400);
-    --table--bc: var(--black-200);
+    --table-color-th: var(--black-200);
+    --table-color-td: var(--black-400);
+    --table-color-border: var(--black-200);
 }
 
 //  ============================================================================
@@ -104,13 +104,13 @@
 .d-table--striped {
     // Row Styles
     tr:nth-child(even) {
-        background-color: hsl(var(--black-500-h), var(--black-500-s), var(--black-500-l), 0.1);
+        background-color: hsl(var(--black-400-h), var(--black-400-s), var(--black-400-l), 0.1);
     }
 
     &.d-table--inverted {
         // Row Styles
         tr:nth-child(even) {
-            background-color: hsl(var(--black-200-h), var(--black-200-s), var(--black-200-l), 0.1);
+            background-color: hsl(var(--black-300-h), var(--black-300-s), var(--black-300-l), 0.1);
         }
     }
 }

package/lib/build/less/components/tabs.less

@@ -27,7 +27,7 @@
         bottom: 0;
         left: 0;
         z-index: var(--zi-base1);
-        height: var(--su1);
+        height: var(--size-100);
         background-color: var(--black-400);
         content: '';
     }
@@ -40,30 +40,29 @@
 .d-tab {
     //  --  COMPONENT CSS VARS
     //  ------------------------------------------------------------------------
-    --tab--bgc: hsla(var(--white-hsl) ~' / ' 0%);
-    --tab--fc: inherit;
-    --tab--oc: var(--focus-ring);
+    --tab-color-background: hsla(var(--white-hsl) ~' / ' 0%);
+    --tab-color-text: inherit;
+    --tab-color-shadow: var(--focus-ring);
 
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    margin: 0 var(--su2);
-    padding: var(--su12);
-    color: var(--tab--fc);
+    margin: 0 var(--space-200);
+    padding: calc(var(--space-300) * 3); // 12
+    color: var(--tab-color-text);
     font: inherit;
     line-height: 1;
-    background-color: var(--tab--bgc);
+    background-color: var(--tab-color-background);
     border: 0;
-    border-radius: var(--br4) var(--br4) 0 0;
+    border-radius: var(--size-300) var(--size-300) 0 0; // 4 4 0 0
     cursor: pointer;
     transition-timing-function: var(--ttf-in-out);
     transition-duration: var(--td50);
     transition-property: background-color, color;
     fill: currentColor;
 
-
     &:first-of-type {
         margin-left: 0;
     }
@@ -77,19 +76,19 @@
         right: 0;
         bottom: 0;
         left: 0;
-        height: var(--su2);
-        background-color: var(--tab--bgc);
+        height: var(--size-200);
+        background-color: var(--tab-color-background);
         content: '';
     }
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0 0 0 var(--su2) var(--tab--oc);
+        box-shadow: 0 0 0 var(--size-200) var(--tab-color-shadow);
     }
 
     &:hover {
-        --tab--bgc: var(--black-100);
-        --tab--fc: var(--fc-primary);
+        --tab-color-background: var(--black-100);
+        --tab-color-text: var(--fc-primary);
     }
 
     //  Turn off animations if someone doesn't want them.
@@ -103,18 +102,18 @@
 //  $   SELECTED STYLE
 //  ----------------------------------------------------------------------------
 .d-tab--selected {
-    --tab--fc: var(--primary-color);
+    --tab-color-text: var(--purple-400);
 
     z-index: var(--zi-selected);
 
     &:hover {
-        --tab--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
-        --tab--fc: var(--primary-color-hover);
+        --tab-color-background: hsla(var(--purple-400-hsl) ~' / ' 10%);
+        --tab-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
     }
 
     &::after,
     &:hover::after {
-        --tab--bgc: var(--primary-color);
+        --tab-color-background: var(--purple-400);
     }
 }
 
@@ -123,26 +122,26 @@
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------
 .d-tablist--inverted {
-    --tab--fc: var(--white);
+    --tab-color-text: var(--white);
 
     &::after {
         background-color: hsla(var(--purple-600-hsl) ~' / ' 50%);
     }
 
     .d-tab {
-        --tab--fc: var(--white);
+        --tab-color-text: var(--white);
 
         &:hover {
-            --tab--bgc: hsla(var(--white-hsl) ~' / ' 10%);
+            --tab-color-background: hsla(var(--white-hsl) ~' / ' 10%);
         }
     }
 
     .d-tab--selected {
-        --tab--fc: var(--white);
-        --tab--oc: var(--white);
+        --tab-color-text: var(--white);
+        --tab-color-shadow: var(--white);
 
         &::after {
-            --tab--bgc: currentColor;
+            --tab-color-background: currentColor;
         }
     }
 }
@@ -155,6 +154,6 @@
     font-size: var(--fs-100);
 
     .d-tab {
-        padding: var(--su12);
+        padding: calc(var(--space-300) * 3); // 12
     }
 }

package/lib/build/less/components/toast.less

@@ -14,7 +14,7 @@
 //  ----------------------------------------------------------------------------
 .d-toast-wrapper {
     position: absolute;
-    top: var(--su32);
+    top: var(--size-600); // 32
     left: 50%;
     transform: translateX(-50%);
 
@@ -27,20 +27,20 @@
 .d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --toast--bgc: var(--black-100);
-    --toast--fc: var(--fc-primary);
+    --toast-color-background: var(--black-100);
+    --toast-color-text: var(--fc-primary);
 
     z-index: var(--zi-notification);
     box-sizing: border-box;
     width: 100%;
-    max-width: var(--size628);
-    margin-bottom: var(--su8);
-    padding: var(--su12);
-    color: var(--toast--fc);
+    max-width: calc(var(--size-300) * 157); // 628
+    margin-bottom: var(--space-400); // 8
+    padding: calc(var(--space-300) * 3); // 12
+    color: var(--toast-color-text);
     font-size: var(--fs-200);
     line-height: var(--lh6);
     word-break: normal;
-    background-color: var(--toast--bgc);
+    background-color: var(--toast-color-background);
     border-radius: var(--br4);
     .d-bs-md();
 
@@ -70,11 +70,11 @@
     align-items: center;
 
     .d-notice__content {
-        margin-right: var(--su16);
+        margin-right: var(--space-500); // 16
     }
 
     .d-notice__actions {
-        margin-left: var(--su32);
+        margin-left: var(--space-600); // 32
     }
 }
 
@@ -84,54 +84,54 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-toast.d-toast--important {
-    --toast--bgc: var(--black-800);
-    --toast--fc: var(--black-100);
+    --toast-color-background: var(--black-800);
+    --toast-color-text: var(--black-100);
 }
 
 //  $$  ERROR
 //  ----------------------------------------------------------------------------
 .d-toast--error {
-    --toast--bgc: var(--red-100);
-    --toast--fc: var(--red-500);
+    --toast-color-background: var(--red-100);
+    --toast-color-text: var(--red-500);
 
     &.d-toast--important {
-        --toast--bgc: var(--red-300);
-        --toast--fc: var(--white);
+        --toast-color-background: var(--red-300);
+        --toast-color-text: var(--white);
     }
 }
 
 //  $$  INFO
 //  ----------------------------------------------------------------------------
 .d-toast--info {
-    --toast--bgc: var(--purple-100);
-    --toast--fc: var(--fc-primary);
+    --toast-color-background: var(--purple-100);
+    --toast-color-text: var(--fc-primary);
 
     &.d-toast--important {
-        --toast--bgc: var(--purple-400);
-        --toast--fc: var(--white);
+        --toast-color-background: var(--purple-400);
+        --toast-color-text: var(--white);
     }
 }
 
 //  $$  SUCCESS
 //  ----------------------------------------------------------------------------
 .d-toast--success {
-    --toast--bgc: var(--green-100);
-    --toast--fc: var(--green-500);
+    --toast-color-background: var(--green-100);
+    --toast-color-text: var(--green-500);
 
     &.d-toast--important {
-        --toast--bgc: var(--green-200);
-        --toast--fc: var(--green-500);
+        --toast-color-background: var(--green-200);
+        --toast-color-text: var(--green-500);
     }
 }
 
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-toast--warning {
-    --toast--bgc: var(--gold-100);
+    --toast-color-background: var(--gold-100);
 
     &.d-toast--important {
-        --toast--bgc: var(--gold-200);
-        --toast--fc: var(--fc-primary);
+        --toast-color-background: var(--gold-200);
+        --toast-color-text: var(--fc-primary);
     }
 }
 
@@ -172,7 +172,7 @@
 
 .d-toast--organizer,
 .d-toast--viewing {
-  border-top: var(--su4) solid var(--magenta-300);
+  border-top: var(--size-300) solid var(--magenta-300);
 
   .d-notice__icon {
     color: var(--magenta-300);
@@ -182,7 +182,7 @@
 .d-toast--chat,
 .d-toast--organizer,
 .d-toast--viewing {
-  --toast--bgc: var(--white);
+  --toast-color-background: var(--white);
 
   .d-notice__icon {
     align-self: flex-start;

package/lib/build/less/components/toggle.less

@@ -23,38 +23,38 @@
 .d-toggle {
   //  Component specific CSS Vars
   //  ------------------------------------------------------------------------
-  --toggle-ta: var(--ttf-in-out);
-  --toggle-ts: var(--td200);
-  --toggle-bgc: var(--black-400);
-  --toggle-height: var(--su24);
-  --toggle-width: var(--su48);
-  --toggle-icon-size: var(--su16);
+  --toggle-transition-timing-function: var(--ttf-in-out);
+  --toggle-transition-speed: var(--td200);
+  --toggle-color-background: var(--black-400);
+  --toggle-size-height: calc(var(--size-300) * 6); // 24
+  --toggle-size-width: calc(var(--size-300) * 12); // 48
+  --toggle-size-icon: var(--size-500); // 16
 
   //  $$  BASE STYLE
   //  ----------------------------------------------------------------------------
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  width: var(--toggle-width);
-  height: var(--toggle-height);
+  width: var(--toggle-size-width);
+  height: var(--toggle-size-height);
   padding: 0;
   line-height: var(--lh4);
   vertical-align: middle;
-  background-color: var(--toggle-bgc);
-  border: var(--su1) solid var(--toggle-bgc);
-  border-radius: var(--toggle-width);
+  background-color: var(--toggle-color-background);
+  border: var(--size-100) solid var(--toggle-color-background);
+  border-radius: var(--toggle-size-width);
   cursor: pointer;
 
   &__inner {
     position: absolute;
-    top: calc(var(--su4) - var(--su1));
-    left: var(--su24);
-    width: var(--toggle-icon-size);
-    height: var(--toggle-icon-size);
+    top: calc(var(--space-300) - var(--space-100)); // 3
+    left: calc(var(--space-300) * 6); // 24
+    width: var(--toggle-size-icon);
+    height: var(--toggle-size-icon);
 
     .d-toggle--small & {
-      top: var(--su1);
-      left: calc(var(--su16) + var(--su1));
+      top: var(--space-100); // 1
+      left: calc(var(--space-500) + var(--space-100)); // 17
     }
 
     .d-toggle--indeterminate & {
@@ -69,60 +69,60 @@
 
   &::after {
     position: absolute;
-    top: var(--su1);
-    left: var(--su1);
-    width: calc(var(--toggle-icon-size) + var(--su4));
-    height: calc(var(--toggle-icon-size) + var(--su4));
+    top: var(--space-100); // 1
+    left: var(--space-100); // 1
+    width: calc(var(--toggle-size-icon) + var(--size-300));
+    height: calc(var(--toggle-size-icon) + var(--size-300));
     background-color: var(--white);
     border-radius: var(--br-circle);
     cursor: pointer;
-    transition: left var(--toggle-ts) var(--toggle-ta);
+    transition: left var(--toggle-transition-speed) var(--toggle-transition-timing-function);
     content: ' ';
   }
 
   //  $$  TOGGLE VARIANTS
   //  ----------------------------------------------------------------------------
   &--small {
-    --toggle-height: calc(var(--su16) + var(--su2));
-    --toggle-width: calc(var(--su32) + var(--su4));
-    --toggle-icon-size: calc(var(--su12) + var(--su2));
+    --toggle-size-height: calc(var(--size-500) + var(--size-200)); // 18
+    --toggle-size-width: calc(var(--size-600) + var(--size-300)); // 36
+    --toggle-size-icon: calc(var(--size-500) - var(--size-200)); // 14
 
     &::before {
       position: absolute;
-      top: calc(var(--su4) * -1);
+      top: calc(var(--space-300) * -1); // -4
       right: 0;
-      bottom: calc(var(--su4) * -1);
+      bottom: calc(var(--space-300) * -1); // -4
       left: 0;
       content: '';
     }
   }
 
   &--small::after {
-    width: var(--toggle-icon-size);
-    height: var(--toggle-icon-size);
+    width: var(--toggle-size-icon);
+    height: var(--toggle-size-icon);
   }
 
   //  $$  CHECKED TOGGLE
   //  ----------------------------------------------------------------------------
   &--checked {
-    --toggle-bgc: var(--primary-color);
+    --toggle-color-background: var(--purple-400);
 
     .d-toggle__inner {
-      left: var(--su6);
+      left: calc(var(--space-300) + var(--space-200)); // 6
       background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
     }
 
     &.d-toggle--small .d-toggle__inner {
-      left: calc(var(--su2) + var(--su1));
+      left: calc(var(--space-100) + var(--space-200)); // 3
     }
 
     &::after {
-      left: calc(var(--su24) + var(--su1));
+      left: calc(calc(var(--space-300) * 6) + var(--space-100)); // 25
     }
 
     &.d-toggle--small::after {
-      right: var(--su1);
-      left: calc(var(--su16) + var(--su2) + var(--su1));
+      right: var(--space-100); // 1
+      left: calc(calc(var(--space-300) * 5) - var(--space-100)); // 19
     }
   }
 
@@ -161,5 +161,5 @@
 }
 
 .d-toggle-group {
-  gap: var(--su8);
+  gap: var(--space-400); // 8
 }