@dialpad/dialtone 7.10.1 → 7.10.2

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

@@ -32,8 +32,8 @@
     );
   --avatar-size-shape: var(--size-600);
   --avatar-size-text: var(--fs-200);
-  --avatar-presence-position-right: var(--sun2);
-  --avatar-presence-position-bottom: var(--sun2);
+  --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
+  --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
 
   position: relative;
   display: flex;
@@ -67,36 +67,36 @@
   //  ------------------------------------------------------------------------
 
   &--xs {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-200));
-    --avatar-presence-position-right: var(--sun4);
-    --avatar-presence-position-bottom: var(--sun4);
+    --avatar-size-shape: calc(var(--size-500) + var(--size-200)); // 18
+    --avatar-presence-position-right: calc(var(--space-300) * -1); // -4
+    --avatar-presence-position-bottom: calc(var(--space-300) * -1); // -4
   }
 
   &--sm {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-400));
+    --avatar-size-shape: calc(var(--size-500) + var(--size-400)); // 24
     --avatar-size-text: var(--fs-100);
-    --avatar-presence-position-right: var(--sun2);
-    --avatar-presence-position-bottom: var(--sun2);
+    --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
+    --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
   }
 
   &--md {
-    --avatar-size-shape: var(--size-600);
+    --avatar-size-shape: var(--size-600); // 32
     --avatar-size-text: var(--fs-200);
-    --avatar-presence-position-right: var(--sun1);
-    --avatar-presence-position-bottom: var(--sun1);
+    --avatar-presence-position-right: calc(var(--space-100) * -1); // -1
+    --avatar-presence-position-bottom: calc(var(--space-100) * -1); // -1
   }
 
   &--lg {
-    --avatar-size-shape: calc(var(--size-600) + var(--size-500));
+    --avatar-size-shape: calc(var(--size-600) + var(--size-500)); // 48
     --avatar-size-text: var(--fs-300);
-    --avatar-presence-position-right: var(--su1);
-    --avatar-presence-position-bottom: var(--su1);
+    --avatar-presence-position-right: var(--space-100); // 1
+    --avatar-presence-position-bottom: var(--space-100); // 1
   }
 
   &--xl {
-    --avatar-size-shape: var(--size-700);
+    --avatar-size-shape: var(--size-700); // 64
     --avatar-size-text: var(--fs-400);
-    --avatar-presence-position-right: var(--su4);
-    --avatar-presence-position-bottom: var(--su4);
+    --avatar-presence-position-right: var(--space-300); // 4
+    --avatar-presence-position-bottom: var(--space-300); // 4
   }
 }

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

@@ -23,7 +23,7 @@
   --badge-color-text: var(--fc-primary);
   --badge-color-background: var(--black-200);
   --badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
-  --badge-border-radius: var(--size-300);
+  --badge-radius: var(--size-300);
   --badge-line-height: var(--size-500);
   --badge-font-size: var(--fs-100);
   --badge-font-weight: var(--fw-semibold);
@@ -50,13 +50,13 @@
   text-align: center;
   text-transform: var(--badge-text-case);
   background-color: var(--badge-color-background);
-  border-radius: var(--badge-border-radius);
+  border-radius: var(--badge-radius);
 
   //  Kind
   //  --------------------------------------------------------------------------
 
   &--count {
-    --badge-border-radius: var(--br-pill);
+    --badge-radius: var(--br-pill);
     --badge-padding-x: calc(var(--space-400) - var(--space-100));
     --badge-padding-y: var(--space-300);
   }
@@ -81,12 +81,12 @@
   }
 
   &--bulletin {
-    --badge-color-text: var(--fc-primary-inverted);
+    --badge-color-text: var(--white);
     --badge-color-background: var(--purple-400);
   }
 
   &--ai {
-    --badge-color-text: var(--fc-primary-inverted);
+    --badge-color-text: var(--white);
     --badge-color-background: var(--magenta-300);
 
     background-image: var(--badge-color-background-ai);

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

@@ -26,7 +26,7 @@
     display: flex;
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--su48);
+    min-height: calc(var(--size-300) * 12); // 48
     color: var(--banner--fc);
     font-size: var(--fs-200);
     line-height: var(--lh6);
@@ -36,7 +36,7 @@
 
     // If you want to hide and reveal the banner
     &[aria-hidden='true'] {
-        --topbar-height: var(--sun64);
+        --topbar-height: calc(var(--size-3) * 16); // -64
 
         visibility: hidden;
         opacity: 0;
@@ -69,7 +69,7 @@
     max-width: 128rem;
     min-height: 100%;
     margin: 0 auto;
-    padding: var(--su8);
+    padding: var(--space-400);
 
     .d-notice__content {
         flex-direction: row;

package/lib/build/less/components/breadcrumbs.less

@@ -33,19 +33,19 @@
     .d-breadcrumbs__item {
         position: relative;
         margin: 0;
-        margin-left: var(--su6);
+        margin-left: var(--space-400);
         padding: 0;
         list-style: none;
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
-            margin-right: var(--su12);
+            margin-right: calc(var(--space-400) + var(--space-300));
 
             &::before {
                 position: absolute;
-                right: var(--sun12);
-                margin-top: var(--su1);
-                color: var(--muted-color);
+                right: calc(calc(var(--space-400) + var(--space-300)) * -1);
+                margin-top: calc(var(--space-100) * -1);
+                color: var(--fc-tertiary);
                 content: '/';
             }
         }

package/lib/build/less/components/button.less

@@ -20,27 +20,27 @@
 .d-btn {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --button--fc: var(--primary-color);
-    --button--bgc: transparent;
-    --button--bc: transparent;
-    --button--br: var(--base--corner-radius);
+    --button-color-text: var(--purple-400);
+    --button-color-background: transparent;
+    --button-color-border: transparent;
+    --button-radius: var(--size-300);
 
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    padding: calc(var(--su8) - var(--su1));  // Subtract border
-    color: var(--button--fc);
+    padding: calc(var(--space-400) - var(--space-100));  // Subtract border
+    color: var(--button-color-text);
     font-size: var(--fs-200);
     font-family: inherit;
     line-height: var(--lh4);
     text-transform: inherit;
     text-decoration: none;
     vertical-align: middle;
-    background-color: var(--button--bgc);
-    border: 0.1rem solid var(--button--bc);
-    border-radius: var(--button--br);
+    background-color: var(--button-color-background);
+    border: var(--size-100) solid var(--button-color-border);
+    border-radius: var(--button-radius);
     box-shadow: var(--button--bs);
     cursor: pointer;
     transition-timing-function: var(--ttf-in-out);
@@ -52,15 +52,15 @@
     //  --  STATES
     //  ------------------------------------------------------------------------
     &:hover {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
+        --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button-color-background: hsla(var(--purple-400-hsl) ~' / ' 3%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
+        --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button-color-background: hsla(var(--purple-400-hsl) ~' / ' 9%);
     }
 
 
@@ -89,7 +89,7 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-btn--xs {
-    padding: calc(var(--su6) - var(--su1)) calc(var(--su8) - var(--su1));  // Subtract border
+    padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100));  // Subtract border
     font-size: var(--fs-100);
 
     .d-btn__icon .d-svg {
@@ -101,7 +101,7 @@
 //  $$ SMALL
 //  ----------------------------------------------------------------------------
 .d-btn--sm {
-    padding: calc(var(--su6) - var(--su1)) calc(var(--su8) - var(--su1));  // Subtract border
+    padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100));  // Subtract border
     font-size: var(--fs-200);
     line-height: var(--lh6);
 
@@ -114,7 +114,7 @@
 //  $$  LARGE
 //  ----------------------------------------------------------------------------
 .d-btn--lg {
-    padding: calc(var(--su12) - var(--su1)) calc(var(--su16) - var(--su1)); // Subtract border
+    padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100)); // Subtract border
     font-size: var(--fs-300);
 
     .d-btn__icon .d-svg {
@@ -126,7 +126,7 @@
 //  $$  EXTRA LARGE
 //  ----------------------------------------------------------------------------
 .d-btn--xl {
-    padding: calc(var(--su12) - var(--su1)) calc(var(--su16) - var(--su1)); // Subtract border
+    padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100)); // Subtract border
     font-size: var(--fs-300);
     line-height: var(--lh8);
 
@@ -159,14 +159,14 @@
 
 .d-btn__icon--left,
 .d-btn__icon--right {
-    margin-top: var(--sun4);
-    margin-bottom: var(--sun4);
+    margin-top: calc(var(--space-300) * -1);
+    margin-bottom: calc(var(--space-300) * -1);
 }
 
 .d-btn__icon--top,
 .d-btn__icon--bottom {
-    margin-right: var(--sun4);
-    margin-left: var(--sun4);
+    margin-right: calc(var(--space-300) * -1);
+    margin-left: calc(var(--space-300) * -1);
 }
 
 .d-btn__icon--left,
@@ -180,31 +180,31 @@
 }
 
 .d-btn__icon--left:not(:only-child) {
-    margin-left: var(--sun2);
+    margin-left: calc(var(--space-200) * -1);
 }
 
 .d-btn__icon--right:not(:only-child) {
-    margin-right: var(--sun2);
+    margin-right: calc(var(--space-200) * -1);
 }
 
 .d-btn__icon--left ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--right {
-    margin-left: var(--su4);
+    margin-left: var(--space-300);
 }
 
 .d-btn__icon--right ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--left {
-    margin-right: var(--su4);
+    margin-right: var(--space-300);
 }
 
 .d-btn__icon--top ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--bottom {
-    margin-top: var(--su4);
+    margin-top: var(--space-300);
 }
 
 .d-btn__icon--bottom ~ .d-btn__label,
 .d-btn__label ~ .d-btn__icon--top {
-    margin-bottom: var(--su4);
+    margin-bottom: var(--space-300);
 }
 
 //  ============================================================================
@@ -213,22 +213,22 @@
 //  $$  CIRCLE BUTTONS
 //  ----------------------------------------------------------------------------
 .d-btn--circle {
-    --button--fc: var(--black-800);
-    --button--br: var(--br-circle);
+    --button-color-text: var(--black-800);
+    --button-radius: var(--br-circle);
 
-    padding: calc(var(--su8) + var(--su1));
+    padding: calc(var(--space-400) + var(--space-100));
     transition-duration: 150ms;
 
     &:hover {
-        --button--fc: var(--muted-color-hover);
-        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+        --button-color-text: var(--muted-color-hover);
+        --button-color-background: hsla(var(--black-800-hsl) ~' / ' 3%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--muted-color-hover);
-        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
+        --button-color-text: var(--muted-color-hover);
+        --button-color-background: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
     &:focus-visible {
@@ -244,75 +244,75 @@
     }
 
     &.d-btn--outlined {
-        --button--bc: var(--black-700);
+        --button-color-border: var(--black-700);
     }
 
     //  Adjust padding based on sizes
     &.d-btn--xs {
-        padding: calc(var(--su8) - var(--su1));
+        padding: calc(var(--space-400) - var(--space-100));
 
-        --button--br: var(--br-circle);
+        --button-radius: var(--br-circle);
     }
 
     &.d-btn--sm {
-        padding: var(--su8);
+        padding: var(--space-400);
 
-        --button--br: var(--br-circle);
+        --button-radius: var(--br-circle);
     }
 
     &.d-btn--lg {
-        padding: calc(var(--su12) + var(--su1));
+        padding: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
 
-        --button--br: var(--br-circle);
+        --button-radius: var(--br-circle);
     }
 
     &.d-btn--xl {
-        padding: calc(var(--su16) - var(--su1));
+        padding: calc(var(--space-500) - var(--space-100));
 
-        --button--br: var(--br-circle);
+        --button-radius: var(--br-circle);
     }
 }
 
 //  $$  OUTLINED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--outlined {
-    --button--bc: var(--primary-color);
+    --button-color-border: var(--purple-400);
 }
 
 //  $$  PRIMARY BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--primary {
-    --button--fc: var(--white);
-    --button--bgc: var(--primary-color);
+    --button-color-text: var(--white);
+    --button-color-background: var(--purple-400);
 
     &:hover {
-      --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+      --button-color-text: var(--white);
+      --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 5%));
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-      --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
+      --button-color-text: var(--white);
+      --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 10%));
     }
 }
 
 //  $$  MUTED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--muted {
-    --button--fc: var(--muted-color);
+    --button-color-text: var(--muted-color);
 
     &:hover {
-        --button--fc: var(--muted-color-hover);
-        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+        --button-color-text: var(--muted-color-hover);
+        --button-color-background: hsla(var(--black-800-hsl) ~' / ' 3%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--muted-color-hover);
-        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
+        --button-color-text: var(--muted-color-hover);
+        --button-color-background: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
     &:focus-visible {
@@ -320,25 +320,25 @@
     }
 
     &.d-btn--outlined {
-        --button--bc: var(--black-600);
+        --button-color-border: var(--black-600);
     }
 }
 
 //  $$  DANGER BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--danger {
-    --button--fc: var(--error-color);
+    --button-color-text: var(--error-color);
 
     &:hover {
-        --button--fc: var(--error-color-hover);
-        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 6%);
+        --button-color-text: var(--error-color-hover);
+        --button-color-background: hsla(var(--error-color-hsl) ~' / ' 6%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--error-color-hover);
-        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 20%);
+        --button-color-text: var(--error-color-hover);
+        --button-color-background: hsla(var(--error-color-hsl) ~' / ' 20%);
     }
 
     &:focus-visible {
@@ -346,23 +346,23 @@
     }
 
     &.d-btn--outlined {
-        --button--bc: var(--error-color);
+        --button-color-border: var(--error-color);
     }
 
     &.d-btn--primary {
-        --button--fc: var(--white);
-        --button--bgc: var(--error-color);
+        --button-color-text: var(--white);
+        --button-color-background: var(--error-color);
 
         &:hover {
-            --button--fc: var(--white);
-            --button--bgc: hsl(var(--red-300-h), var(--red-300-s), 40%);
+            --button-color-text: var(--white);
+            --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 40%);
         }
 
         &:active,
         &.d-btn--active,
         &.d-btn--active:active {
-            --button--fc: var(--white);
-            --button--bgc: hsl(var(--red-300-h), var(--red-300-s), 27%);
+            --button-color-text: var(--white);
+            --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 27%);
         }
     }
 }
@@ -371,19 +371,19 @@
 //  ----------------------------------------------------------------------------
 //  --  Base, clear inverted button
 .d-btn--inverted {
-    --button--fc: var(--white);
-    --button--bgc: transparent;
+    --button-color-text: var(--white);
+    --button-color-background: transparent;
 
     &:hover {
-        --button--fc: var(--white);
-        --button--bgc: hsla(var(--white-hsl) ~' / ' 15%);
+        --button-color-text: var(--white);
+        --button-color-background: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--white);
-        --button--bgc: hsla(var(--white-hsl) ~' / ' 30%);
+        --button-color-text: var(--white);
+        --button-color-background: hsla(var(--white-hsl) ~' / ' 30%);
     }
 
     &:focus-visible {
@@ -392,24 +392,24 @@
 
     //  --  OUTLINED
     &.d-btn--outlined {
-        --button--bc: var(--white);
+        --button-color-border: var(--white);
     }
 
     //  --  PRIMARY
     &.d-btn--primary {
-        --button--fc: var(--primary-color);
-        --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
+        --button-color-text: var(--purple-400);
+        --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
         &:hover {
-            --button--fc: var(--primary-color-hover);
-            --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
+            --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+            --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
         }
 
         &:active,
         &.d-btn--active,
         &.d-btn--active:active {
-            --button--fc: var(--primary-color-hover);
-            --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
+            --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+            --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
         }
     }
 }
@@ -417,7 +417,7 @@
 //  $$  ICON ONLY
 //  ----------------------------------------------------------------------------
 .d-btn--icon-only {
-    padding: calc(var(--su8) + var(--su1));
+    padding: calc(var(--space-400) + var(--space-100));
 
     .d-btn__icon {
         margin: unset;
@@ -455,7 +455,7 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~' / ' 90%);
+        box-shadow: 0 0 0 var(--space-100) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~' / ' 90%);
     }
 
     &:active {
@@ -467,8 +467,8 @@
       justify-content: center;
       width: 2em;
       height: 2em;
-      margin-right: var(--su8);
-      margin-left: var(--sun4);
+      margin-right: var(--space-400);
+      margin-left: calc(var(--space-300) * -1);
       background-color: var(--white);
       border-radius: var(--br2);
     }
@@ -517,9 +517,9 @@
     //  Show the loading animation
     &::before {
         position: absolute;
-        width: var(--su16);
-        height: var(--su16);
-        border: var(--su2) solid currentColor;
+        width: var(--size-500);
+        height: var(--size-500);
+        border: var(--size-200) solid currentColor;
         border-left-color: transparent !important;
         border-radius: var(--br-circle);
         animation: d-loading-circle 900ms infinite linear;

package/lib/build/less/components/card.less

@@ -24,7 +24,7 @@
   flex-direction: column;
   justify-content: center;
   background: var(--white);
-  border-radius: var(--su4);
+  border-radius: var(--size-300);
   box-shadow: var(--bs-card);
 }
 
@@ -39,13 +39,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: var(--su8) var(--su8) 0 var(--su16);
+  padding: var(--size-500) var(--size-500) 0;
 }
 
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-card__content {
-  padding: var(--su16);
+  padding: var(--size-500);
   overflow-y: auto;
 }
 
@@ -54,5 +54,5 @@
 .d-card__footer {
   display: flex;
   align-items: center;
-  padding: var(--su8);
+  padding: 0 var(--size-500) var(--size-500);
 }