@dialpad/dialtone 7.11.2 → 7.13.0

package/README.md

@@ -27,6 +27,12 @@ To build Dialtone locally, visit our [installation instructions](https://dialpad
 
 If you're interested in contributing to Dialtone, please read our [contributing docs](https://github.com/dialpad/dialtone/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.
 
-## Questions?
+## Requesting features / reporting bugs
 
-If you have a question, please feel free to [open an issue](https://github.com/dialpad/dialtone/issues/new).
+Requesting a feature or reporting a bug? Please do so at the below links:
+
+- [Request Feature](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10901&pid=12428)
+- [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10878&pid=12428)
+
+
+Please also feel free to contact us via the [#dialtone slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions

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

@@ -24,7 +24,7 @@
   --badge-color-background: var(--black-200);
   --badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
   --badge-radius: var(--size-300);
-  --badge-line-height: var(--size-500);
+  --badge-line-height: calc(var(--size-500) + var(--size-200));
   --badge-font-size: var(--fs-100);
   --badge-font-weight: var(--fw-semibold);
   --badge-gap: var(--space-300);
@@ -59,25 +59,26 @@
     --badge-radius: var(--br-pill);
     --badge-padding-x: calc(var(--space-400) - var(--space-100));
     --badge-padding-y: var(--space-300);
+    --badge-line-height: var(--size-500);
   }
 
   //  TYPE
   //  --------------------------------------------------------------------------
 
   &--info {
-    --badge-color-background: var(--blue-100);
+    --badge-color-background: var(--bgc-info);
   }
 
   &--success {
-    --badge-color-background: var(--green-100);
+    --badge-color-background: var(--bgc-success);
   }
 
   &--warning {
-    --badge-color-background: var(--gold-100);
+    --badge-color-background: var(--bgc-warning);
   }
 
   &--critical {
-    --badge-color-background: var(--red-100);
+    --badge-color-background: var(--bgc-critical);
   }
 
   &--bulletin {

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

@@ -15,8 +15,14 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner--bgc: var(--black-100);
-    --banner--fc: var(--fc-primary);
+    --banner-color-background: var(--bgc-secondary);
+    --banner-color-text: var(--fc-primary);
+    --notice-color-icon: var(--toast-color-text);
+    --banner-color-border: 1px solid hsla(var(--black-900-hsl) ~' / ' 10%);
+    --banner-font-size: var(--fs-200);
+    --banner-line-height: var(--lh-200);
+    --banner-dialog-padding-y: var(--space-400);
+    --banner-dialog-padding-x: var(--space-500);
 
     position: fixed;
     top: 0;
@@ -27,10 +33,10 @@
     box-sizing: border-box;
     width: 100%;
     min-height: calc(var(--size-300) * 12); // 48
-    color: var(--banner--fc);
-    font-size: var(--fs-200);
-    line-height: var(--lh6);
-    background-color: var(--banner--bgc);
+    color: var(--banner-color-text);
+    font-size: var(--banner-font-size);
+    line-height: var(--banner-line-height);
+    background-color: var(--banner-color-background);
     border-radius: 0;
     box-shadow: none;
 
@@ -69,13 +75,13 @@
     max-width: 128rem;
     min-height: 100%;
     margin: 0 auto;
-    padding: var(--space-400);
+    padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
+    border-bottom: var(--banner-color-border);
 
     .d-notice__content {
         flex-direction: row;
-        align-items: center;
-
-        .d-flow4();
+        gap: var(--space-300);
+        align-items: baseline;
     }
 }
 
@@ -85,52 +91,52 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-banner.d-banner--important {
-    --banner--bgc: var(--black-800);
-    --banner--fc: var(--black-100);
+    --banner-color-background: var(--bgc-contrast);
+    --banner-color-text: var(--black-100);
+    --notice-color-icon: var(--black-100);
+    --banner-color-border: transparent;
 }
 
 //  $$  ERROR
 //  ----------------------------------------------------------------------------
 .d-banner--error {
-    --banner--bgc: var(--red-100);
-    --banner--fc: var(--red-500);
+    --banner-color-background: var(--bgc-critical);
 
     &.d-banner--important {
-        --banner--bgc: var(--red-300);
-        --banner--fc: var(--white);
+        --banner-color-background: var(--red-400);
+        --banner-color-text: var(--fc-primary-inverted);
     }
 }
 
 //  $$  INFO
 //  ----------------------------------------------------------------------------
 .d-banner--info {
-    --banner--bgc: var(--purple-100);
+    --banner-color-background: var(--bgc-info);
 
     &.d-banner--important {
-        --banner--bgc: var(--purple-400);
-        --banner--fc: var(--white);
+        --banner-color-background: var(--blue-400);
+        --banner-color-text: var(--fc-primary-inverted);
     }
 }
 
 //  $$  SUCCESS
 //  ----------------------------------------------------------------------------
 .d-banner--success {
-    --banner--bgc: var(--green-100);
-    --banner--fc: var(--green-500);
+    --banner-color-background: var(--bgc-success);
 
     &.d-banner--important {
-        --banner--bgc: var(--green-200);
-        --banner--fc: var(--green-500);
+        --banner-color-background: var(--green-400);
+        --banner-color-text: var(--fc-primary-inverted);
     }
 }
 
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-banner--warning {
-    --banner--bgc: var(--gold-100);
+    --banner-color-background: var(--bgc-warning);
 
     &.d-banner--important {
-        --banner--bgc: var(--gold-200);
-        --banner--fc: var(--fc-primary);
+        --banner-color-background: var(--gold-200);
+        --banner-color-text: var(--fc-primary);
     }
 }

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

@@ -7,33 +7,46 @@
 //
 //  TABLE OF CONTENTS
 //  • WRAPPER
-//  • ITEMS & LINKS
 //  • INVERTED STYLE
+//  • ITEMS & LINKS
 //
-//  ============================================================================
-//  $  WRAPPER
-//  ----------------------------------------------------------------------------
-.d-breadcrumbs > ol {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-size: var(--fs-200);
-    line-height: var(--lh6);
-    list-style: none;
-}
 
-//  ============================================================================
-//  $  ITEMS & LINKS
-//  ----------------------------------------------------------------------------
 .d-breadcrumbs {
-    //  --  INDIVIDUAL ITEMS
-    .d-breadcrumbs__item {
-        position: relative;
+    --breadcrumbs-font-size: var(--fs-200);
+    --breadcrumbs-line-height: var(--lh-300);
+    --breadcrumbs-color-separator: var(--black-500);
+    --breadcrumbs-color-text: var(--fc-secondary);
+
+    //  ============================================================================
+    //  $  INVERTED STYLE
+    //  ----------------------------------------------------------------------------
+    &--inverted {
+        --breadcrumbs-color-separator: var(--black-300);
+        --breadcrumbs-color-text: var(--fc-secondary-inverted);
+    }
+
+    //  ============================================================================
+    //  $  WRAPPER
+    //  ----------------------------------------------------------------------------
+
+    > ol {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        box-sizing: border-box;
         margin: 0;
-        margin-left: var(--space-400);
+        padding: 0;
+        font-size: var(--breadcrumbs-font-size);
+        line-height: var(--breadcrumbs-line-height);
+        list-style: none;
+    }
+
+    //  ============================================================================
+    //  $  ITEMS & LINKS
+    //  ----------------------------------------------------------------------------
+    &__item {
+        position: relative;
+        margin: 0 0 0 var(--space-400);
         padding: 0;
         list-style: none;
 
@@ -45,33 +58,26 @@
                 position: absolute;
                 right: calc(calc(var(--space-400) + var(--space-300)) * -1);
                 margin-top: calc(var(--space-100) * -1);
-                color: var(--fc-tertiary);
+                color: var(--breadcrumbs-color-separator);
                 content: '/';
             }
         }
-    }
 
-    //  --  SELECTED STATE (CURRENT PAGE)
-    .d-breadcrumbs__item--selected .d-link {
-        text-decoration: none;
-        cursor: default;
-    }
-}
+        .d-link {
+            color: var(--breadcrumbs-color-text);
+        }
 
+        //  --  SELECTED STATE (CURRENT PAGE)
+        &--selected {
+            --breadcrumbs-color-text: var(--fc-primary);
 
-//  ============================================================================
-//  $  INVERTED STYLE
-//  ----------------------------------------------------------------------------
-.d-breadcrumbs.d-breadcrumbs--inverted {
-    //  --  ITEM
-    .d-breadcrumbs__item:not(:last-of-type)::before {
-        color: var(--inverted-color);
-    }
+            font-weight: var(--fw-medium);
+            cursor: default;
 
-    //  --  SELECTED STATE (CURRENT PAGE)
-    .d-breadcrumbs__item--selected .d-link {
-        &:hover {
-            color: var(--inverted-color);
+            .d-breadcrumbs--inverted & {
+                --breadcrumbs-color-text: var(--fc-primary-inverted);
+            }
         }
     }
 }
+

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

@@ -72,21 +72,21 @@
     box-shadow: var(--button--bs);
     cursor: pointer;
     transition-timing-function: var(--ttf-out-quint);
-    transition-duration: var(--td300);
+    transition-duration: var(--td200);
     transition-property: background-color, border, box-shadow;
     user-select: none;
     fill: currentColor;
 
     //  --  STATES
     //  ------------------------------------------------------------------------
-    &:hover {
+    &:hover:not([disabled]) {
         --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) ~' / ' 4%);
     }
 
-    &:active,
-    &.d-btn--active,
-    &.d-btn--active:active {
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
         --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) ~' / ' 14%);
     }
@@ -98,9 +98,9 @@
     }
 
     &[disabled] {
-        --button-color-border: transparent;
-        --button-color-text: var(--fc-disabled);
-        --button-color-background: var(--black-300);
+        --button-color-border: transparent !important;
+        --button-color-text: var(--fc-disabled) !important;
+        --button-color-background: var(--black-300) !important;
 
         cursor: not-allowed;
         transition: none;
@@ -238,24 +238,18 @@
     --button-color-text: var(--black-800);
     --button-border-radius: var(--br-circle);
 
-    transition-duration: 150ms;
-
-    &:hover {
+    &:hover:not([disabled]) {
         --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-color-text: var(--muted-color-hover);
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--fc-secondary);
         --button-color-background: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
-    &:focus-visible {
-        box-shadow: var(--bs-focus-ring-circle);
-    }
-
     .d-btn__icon {
         margin: unset;
     }
@@ -307,14 +301,14 @@
     --button-color-text: var(--white);
     --button-color-background: var(--purple-400);
 
-    &:hover {
+    &:hover:not([disabled]) {
       --button-color-text: var(--white);
       --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 6%));
     }
 
-    &:active,
-    &.d-btn--active,
-    &.d-btn--active:active {
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
       --button-color-text: var(--white);
       --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 12%));
     }
@@ -323,24 +317,20 @@
 //  $$  MUTED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--muted {
-    --button-color-text: var(--muted-color);
+    --button-color-text: var(--fc-secondary);
 
-    &:hover {
-        --button-color-text: var(--muted-color-hover);
+    &:hover:not([disabled]) {
+        --button-color-text: var(--fc-secondary);
         --button-color-background: hsla(var(--black-800-hsl) ~' / ' 5%);
     }
 
-    &:active,
-    &.d-btn--active,
-    &.d-btn--active:active {
-        --button-color-text: var(--muted-color-hover);
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--fc-secondary);
         --button-color-background: hsla(var(--black-800-hsl) ~' / ' 10%);
     }
 
-    &:focus-visible {
-        box-shadow: var(--bs-focus-ring-muted);
-    }
-
     &.d-btn--outlined {
         --button-color-border: var(--black-600);
     }
@@ -349,40 +339,36 @@
 //  $$  DANGER BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--danger {
-    --button-color-text: var(--error-color);
+    --button-color-text: var(--red-300);
 
-    &:hover {
-        --button-color-text: var(--error-color-hover);
-        --button-color-background: hsla(var(--error-color-hsl) ~' / ' 3%);
+    &:hover:not([disabled]) {
+        --button-color-text: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
+        --button-color-background: hsla(var(--red-300-hsl) / 0.03);
     }
 
-    &:active,
-    &.d-btn--active,
-    &.d-btn--active:active {
-        --button-color-text: var(--error-color-hover);
-        --button-color-background: hsla(var(--error-color-hsl) ~' / ' 9%);
-    }
-
-    &:focus-visible {
-        box-shadow: var(--bs-focus-ring-error);
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
+        --button-color-background: hsla(var(--red-300-hsl) / 0.09);
     }
 
     &.d-btn--outlined {
-        --button-color-border: var(--error-color);
+        --button-color-border: var(--red-300);
     }
 
     &.d-btn--primary {
         --button-color-text: var(--white);
-        --button-color-background: var(--error-color);
+        --button-color-background: var(--red-300);
 
-        &:hover {
+        &:hover:not([disabled]) {
             --button-color-text: var(--white);
             --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 4%));
         }
 
-        &:active,
-        &.d-btn--active,
-        &.d-btn--active:active {
+        &:active:not([disabled]),
+        &.d-btn--active:not([disabled]),
+        &.d-btn--active:active:not([disabled]) {
             --button-color-text: var(--white);
             --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
         }
@@ -396,22 +382,18 @@
     --button-color-text: var(--white);
     --button-color-background: transparent;
 
-    &:hover {
+    &:hover:not([disabled]) {
         --button-color-text: var(--white);
         --button-color-background: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
-    &:active,
-    &.d-btn--active,
-    &.d-btn--active:active {
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
         --button-color-text: var(--white);
         --button-color-background: hsla(var(--white-hsl) ~' / ' 30%);
     }
 
-    &:focus-visible {
-        box-shadow: var(--bs-focus-ring-inverted);
-    }
-
     //  --  OUTLINED
     &.d-btn--outlined {
         --button-color-border: var(--white);
@@ -422,14 +404,14 @@
         --button-color-text: var(--purple-400);
         --button-color-background: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
-        &:hover {
+        &:hover:not([disabled]) {
             --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 {
+        &:active:not([disabled]),
+        &.d-btn--active:not([disabled]),
+        &.d-btn--active:active:not([disabled]) {
             --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%);
         }
@@ -439,11 +421,38 @@
 //  $$  ICON ONLY
 //  ----------------------------------------------------------------------------
 .d-btn--icon-only {
-    // --button-padding: ;
+    --button-padding-x: var(--button-padding-y-md);
+    --button-padding-y: var(--button-padding-y-md);
 
     .d-btn__icon {
         margin: unset;
     }
+
+    //  Adjust padding based on sizes
+    &.d-btn--xs {
+        --button-padding-y: var(--button-padding-y-xs);
+        --button-padding-x: var(--button-padding-y-xs);
+    }
+
+    &.d-btn--sm {
+        --button-padding-y: var(--button-padding-y-sm);
+        --button-padding-x: var(--button-padding-y-sm);
+    }
+
+    &.d-btn--md {
+        --button-padding-x: var(--button-padding-y-md);
+        --button-padding-y: var(--button-padding-y-md);
+    }
+
+    &.d-btn--lg {
+        --button-padding-x: calc(var(--button-padding-y-lg) + var(--space-100));
+        --button-padding-y: calc(var(--button-padding-y-lg) + var(--space-100));
+    }
+
+    &.d-btn--xl {
+        --button-padding-x: calc(var(--button-padding-y-xl) + var(--space-300));
+        --button-padding-y: calc(var(--button-padding-y-xl) + var(--space-300));
+    }
 }
 
 //  $$  LOADING STATE
@@ -455,9 +464,9 @@
 //  $$  DISABLED STATE
 //  ----------------------------------------------------------------------------
 .d-btn--disabled {
-    --button-color-text: var(--fc-disabled);
-    --button-color-background: var(--black-300);
-    --button-color-border: transparent;
+    --button-color-text: var(--fc-disabled) !important;
+    --button-color-background: var(--black-300) !important;
+    --button-color-border: transparent !important;
 
     cursor: not-allowed;
     transition: none;
@@ -472,8 +481,8 @@
 
     display: flex;
 
-    &:hover,
-    &:active {
+    &:hover:not([disabled]),
+    &:active:not([disabled]) {
         --button-color-text: hsla(var(--white-hsl) ~' / ' 90%);
         --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
     }
@@ -482,7 +491,7 @@
         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 {
+    &:active:not([disabled]) {
         --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
     }
 

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

@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background: var(--white);
+  background: var(--bgc-primary);
   border-radius: var(--size-300);
   box-shadow: var(--bs-card);
 }

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

@@ -39,7 +39,7 @@
   border: none;
   border-radius: var(--chip-border-radius);
   transition-timing-function: var(--ttf-in-out);
-  transition-duration: 75ms;
+  transition-duration: var(--td200);
   transition-property: background-color;
 
   // Reserves space within the chip for the close button, since the close button is
@@ -71,7 +71,7 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: var(--bs-focus-ring-muted);
+      box-shadow: var(--bs-focus-ring);
     }
   }
 

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

@@ -22,6 +22,7 @@
 //  ----------------------------------------------------------------------------
 fieldset {
   min-width: 0;
+  margin: 0;
   padding: 0;
   border: none;
 }
@@ -132,7 +133,7 @@ fieldset {
 }
 
 .d-validation-message--error {
-  --validation-color-text: var(--fc-error);
+  --validation-color-text: var(--fc-critical);
 
   &::before {
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');