@dialpad/dialtone 7.11.1 → 7.12.0

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

@@ -26,7 +26,9 @@
     text-decoration: underline;
     background-color: transparent;
     border: 0;
-    transition: all var(--td25) var(--ttf-in-out);
+    transition-timing-function: var(--ttf-out-quint);
+    transition-duration: var(--td300);
+    transition-property: background-color, border, box-shadow;
 
     //  Reset button appearance
     -webkit-appearance: none;
@@ -41,9 +43,8 @@
     }
 
     &:focus-visible {
-        border-radius: var(--br4);
         outline: none;
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
+        box-shadow: var(--bs-focus-ring);
     }
 }
 
@@ -59,23 +60,15 @@
     &:hover {
         color: var(--fc-warning-hover);
     }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
-    }
 }
 
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-link--danger {
-    color: var(--fc-error);
+    color: var(--fc-critical);
 
     &:hover {
-        color: var(--error-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
+        color: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
     }
 }
 
@@ -85,25 +78,17 @@
     color: var(--fc-success);
 
     &:hover {
-        color: var(--success-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
+        color: var(--green-500);
     }
 }
 
 //  $$  MUTED
 //  ----------------------------------------------------------------------------
 .d-link--muted {
-    color: var(--muted-color);
+    color: var(--fc-secondary);
 
     &:hover {
-        color: var(--muted-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
+        color: var(--fc-primary);
     }
 }
 
@@ -129,14 +114,10 @@
 //  $$  INVERTED
 //  ----------------------------------------------------------------------------
 .d-link--inverted {
-    color: var(--inverted-color);
+    color: var(--fc-primary-inverted);
 
     &:hover {
-        color: var(--inverted-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
+        color: var(--fc-secondary-inverted);
     }
 }
 

package/lib/build/less/components/modal.less

@@ -27,13 +27,13 @@
 .d-modal {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 60%);
+    --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
     --modal-dialog-padding: var(--space-600);
-    --modal-dialog-color-background: var(--white);
+    --modal-dialog-color-background: var(--bgc-primary);
     --modal-dialog-color-text: var(--fc-tertiary);
     --modal-header-color-text: var(--fc-secondary);
-    --modal-dialog-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
-    --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
+    --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
+    --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
 
     position: fixed;
     top: 0;
@@ -46,7 +46,7 @@
     align-items: center;
     justify-content: center;
     padding: var(--space-600); // 32
-    background-color: var(--modal-color-background);
+    background-color: var(--modal-backdrop-color-background);
     backface-visibility: hidden;
     visibility: hidden;
     opacity: 0;
@@ -54,26 +54,7 @@
 }
 
 .d-modal--transparent {
-  //  Component CSS Vars
-  //  ------------------------------------------------------------------------
-  --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 85%);
-
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--zi-hide);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-600); // 32
-  background-color: var(--d-bgc-transparent);
-  backface-visibility: hidden;
-  visibility: hidden;
-  opacity: 0;
-  will-change: visibility, z-index, opacity;
+  --modal-backdrop-color-background: var(--d-bgc-transparent);
 }
 
 //  $$  MODAL DIALOG
@@ -167,7 +148,7 @@
 .d-modal__banner {
   --modal-banner-padding-y: var(--space-500);
   --modal-banner-padding-x: var(--space-600);
-  --modal-banner-color-background: var(--gold-100);
+  --modal-banner-color-background: var(--bgc-warning);
 
   position: relative;
   box-sizing: border-box;

package/lib/build/less/components/notice.less

@@ -15,23 +15,30 @@
 .d-notice {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --notice-color-background: var(--black-100);
+    --notice-color-background: var(--bgc-secondary);
     --notice-color-text: var(--fc-primary);
-
-    display: flex;
-    align-items: center;
+    --notice-color-icon: var(--notice-color-text);
+    --notice-color-shadow: hsla(var(--black-900-hsl) / 0.06);
+    --notice-padding: var(--space-500);
+    --notice-font-size: var(--fs-200);
+    --notice-line-height: var(--lh-300);
+    --notice-border-radius: var(--size-400);
+    --notice-box-shadow: 0 0 0 var(--size-100) var(--notice-color-shadow) inset;
 
     //  Base Styles
     //  ------------------------------------------------------------------------
+    display: flex;
+    align-items: center;
     box-sizing: border-box;
     width: 100%;
     max-width: calc(var(--size-300) * 157); // 628
-    padding: calc(var(--space-300) * 3); // 12
+    padding: var(--notice-padding);
     color: var(--notice-color-text);
-    font-size: var(--fs-200);
-    line-height: var(--lh6);
+    font-size: var(--notice-font-size);
+    line-height: var(--notice-line-height);
     background-color: var(--notice-color-background);
-    border-radius: var(--br4);
+    border-radius: var(--notice-border-radius);
+    box-shadow: var(--notice-box-shadow);
 
     .d-toast & {
         max-width: calc(var(--size-300) * 116); // 464
@@ -49,7 +56,7 @@
     display: flex;
     flex: 1 auto;
     flex-direction: column;
-    margin-right: var(--space-500); // 16
+    margin-right: var(--space-500);
 }
 
 //  $$  ACTIONS
@@ -57,9 +64,8 @@
 .d-notice__actions {
     display: flex;
     flex: 0 auto;
+    gap: var(--space-400);
     align-items: center;
-
-    .d-flow8();
 }
 
 //  $$  ICON
@@ -67,8 +73,12 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    margin-right: var(--space-400); // 8
-    color: inherit;
+    margin-right: calc(var(--space-300) * 3);
+    color: var(--notice-color-icon);
+
+    .d-banner & {
+        margin-right: var(--space-400);
+    }
 }
 
 //  ============================================================================
@@ -79,14 +89,22 @@
     font-size: inherit;
 }
 
+.d-notice__message {
+    .d-notice__title:not([hidden]) + & {
+        font-size: var(--fs-100);
+    }
+}
+
 //  ============================================================================
 //  $   STYLES
 //  ============================================================================
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-notice.d-notice--important {
-    --notice-color-background: var(--black-800);
+    --notice-color-background: var(--bgc-contrast);
     --notice-color-text: var(--black-100);
+    --notice-color-shadow: transparent;
+    --notice-color-icon: var(--fc-primary-inverted);
 }
 
 //  $$  ERROR
@@ -94,14 +112,14 @@
 .d-notice--error,
 .d-banner--error,
 .d-toast--error {
-    --notice-color-background: var(--red-100);
-    --notice-color-text: var(--red-500);
+    --notice-color-background: var(--bgc-critical);
+    --notice-color-icon: var(--red-400);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--red-300);
-        --notice-color-text: var(--white);
+        --notice-color-background: var(--red-400);
+        --notice-color-text: var(--fc-primary-inverted);
     }
 }
 
@@ -110,13 +128,14 @@
 .d-notice--info,
 .d-banner--info,
 .d-toast--info {
-    --notice-color-background: var(--purple-100);
+    --notice-color-background: var(--bgc-info);
+    --notice-color-icon: var(--blue-500);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--purple-400);
-        --notice-color-text: var(--white);
+        --notice-color-background: var(--blue-400);
+        --notice-color-text: var(--fc-primary-inverted);
     }
 }
 
@@ -125,14 +144,14 @@
 .d-notice--success,
 .d-banner--success,
 .d-toast--success {
-    --notice-color-background: var(--green-100);
-    --notice-color-text: var(--green-500);
+    --notice-color-background: var(--bgc-success);
+    --notice-color-icon: var(--green-400);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--green-200);
-        --notice-color-text: var(--green-500);
+        --notice-color-background: var(--green-400);
+        --notice-color-text: var(--fc-primary-inverted);
     }
 }
 
@@ -141,12 +160,14 @@
 .d-notice--warning,
 .d-banner--warning,
 .d-toast--warning {
-    --notice-color-background: var(--gold-100);
+    --notice-color-background: var(--bgc-warning);
+    --notice-color-icon: var(--gold-400);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
         --notice-color-background: var(--gold-200);
         --notice-color-text: var(--fc-primary);
+        --notice-color-icon: var(--notice-color-text);
     }
 }

package/lib/build/less/components/popover.less

@@ -14,18 +14,21 @@
 //    - Content
 //    - Header / Footer
 
-
-//  $  POPOVER
+//  $  CSS CUSTOM PROPERTIES
 //  ----------------------------------------------------------------------------
-.d-popover {
-  //  $  CSS CUSTOM PROPERTIES
-  //  ----------------------------------------------------------------------------
-
+body {
   --popover-color-background: var(--black-100);
   --popover-border-width: var(--size-100); // 8
   --popover-border-radius: var(--size-400);
   --popover-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
+  --popover-color-border: var(--popover-color-shadow);
   --popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
+}
+
+//  $  POPOVER
+//  ----------------------------------------------------------------------------
+.d-popover {
+
 
   //  $  POPOVER DIALOG
   //  ----------------------------------------------------------------------------

package/lib/build/less/components/radio-checkbox.less

@@ -52,8 +52,8 @@
             display: none;
         }
 
-        &:focus-visible,
-        &:checked:focus-visible {
+        &:focus,
+        &:checked:focus {
           --check-radio-color-border: var(--check-radio-color);
 
           outline: 0;
@@ -67,6 +67,9 @@
 
     flex: 0 auto;
     align-self: flex-start;
+    transition-timing-function: var(--ttf-out-quint);
+    transition-duration: var(--td300);
+    transition-property: box-shadow;
 
     //  --  DISABLED
     &[disabled],
@@ -146,11 +149,11 @@
         background-repeat: no-repeat;
         background-position: center center;
         background-size: contain;
-        border-radius: var(--br2);
+        border-radius: var(--size-300);
 
         &:focus-visible,
         &:checked:focus-visible {
-            border-radius: var(--br2);
+            box-shadow: var(--bs-focus-ring);
         }
 
         &:checked {
@@ -205,36 +208,20 @@
 //  $$  CHECKBOX VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-checkbox--warning {
-    --check-radio-color: var(--warning-color);
+    --check-radio-color: var(--gold-500);
     --check-radio-color-border: var(--check-radio-color);
-
-    &:focus-visible,
-    &:checked:focus-visible {
-        box-shadow: var(--bs-focus-ring-warning);
-    }
 }
 
 .d-checkbox--error {
-    --check-radio-color: var(--error-color);
+    --check-radio-color: var(--red-300);
     --check-radio-color-border: var(--check-radio-color);
-
-    &:focus-visible,
-    &:checked:focus-visible {
-        box-shadow: var(--bs-focus-ring-error);
-    }
 }
 
 .d-checkbox--success {
-    --check-radio-color: var(--success-color);
+    --check-radio-color: var(--green-400);
     --check-radio-color-border: var(--check-radio-color);
-
-    &:focus-visible,
-    &:checked:focus-visible {
-        box-shadow: var(--bs-focus-ring-success);
-    }
 }
 
-
 //  ============================================================================
 //  $   RADIOS
 //  ----------------------------------------------------------------------------
@@ -272,34 +259,20 @@
     }
 }
 
+
 //  $$  RADIO VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-radio--warning {
-    --check-radio-color: var(--warning-color);
+    --check-radio-color: var(--gold-500);
     --check-radio-color-border: var(--check-radio-color);
-
-    &:focus-visible,
-    &:checked:focus-visible {
-      box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--space-200) var(--white);
-    }
 }
 
 .d-radio--error {
-    --check-radio-color: var(--error-color);
+    --check-radio-color: var(--red-300);
     --check-radio-color-border: var(--check-radio-color);
-
-    &:focus-visible,
-    &:checked:focus-visible {
-      box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--space-200) var(--white);
-    }
 }
 
 .d-radio--success {
-    --check-radio-color: var(--success-color);
+    --check-radio-color: var(--green-400);
     --check-radio-color-border: var(--check-radio-color);
-
-    &:focus-visible,
-    &:checked:focus-visible {
-      box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--space-200) var(--white);
-    }
 }

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

@@ -57,15 +57,14 @@
   // Use shared style properties of d-input (<input>, <textarea>)
   .d-input();
 
-  // Adjust space on right beneath arrows
-  padding-right: var(--select-notch-padding-right);
-
+  //  --  FOCUS STATE
   &:focus {
-    --select-color-border: var(--purple-400);
-
-    box-shadow: var(--bs-focus-ring);
+      --input-color-background: hsla(var(--black-900-hsl) / 0.03);
   }
 
+  // Adjust space on right beneath arrows
+  padding-right: var(--select-notch-padding-right);
+
   &[disabled],
   &[read-only] {
     color: var(--fc-disabled);
@@ -132,33 +131,15 @@
 //  $$  VALIDATION STATES
 //  ------------------------------------------------------------------------
 .d-select__input--success {
-  --input-color-border: var(--success-color);
-
-  &:focus {
-    --input-color-border: var(--success-color);
-
-    box-shadow: var(--bs-focus-ring-success) !important;
-  }
+  --input-color-border: var(--green-400);
 }
 
 .d-select__input--error {
-  --input-color-border: var(--error-color);
-
-  &:focus {
-    --input-color-border: var(--error-color);
-
-    box-shadow: var(--bs-focus-ring-error) !important;
-  }
+  --input-color-border: var(--red-300);
 }
 
 .d-select__input--warning {
   --input-color-border: var(--gold-400);
-
-  &:focus {
-    --input-color-border: var(--warning-color);
-
-    box-shadow: var(--bs-focus-ring-warning) !important;
-  }
 }
 
 .d-select--disabled {

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

@@ -17,9 +17,9 @@
 .d-table {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --table-color-th: var(--black-700);
-    --table-color-td: var(--black-600);
-    --table-color-border: var(--black-400);
+    --table-color-border: var(--black-300);
+    --table-th-color-text: var(--fc-secondary);
+    --table-td-color-text: var(--fc-tertiary);
 
     display: table;
     box-sizing: border-box;
@@ -34,7 +34,7 @@
     // Caption styles
     .d-table__caption {
       margin-bottom: var(--space-400); // 8
-      color: var(--table-color-th);
+      color: var(--table-th-color-text);
       font-weight: var(--fw-bold);
       font-size: var(--fs-200);
       .d-ta-unset();
@@ -53,13 +53,13 @@
 
     // Header Styles
     th {
-        color: var(--table-color-th);
+        color: var(--table-th-color-text);
         font-weight: var(--fw-bold);
     }
 
     // Cell Styles
     td {
-        color: var(--table-color-td);
+        color: var(--table-td-color-text);
     }
 
     // Header & Cell Styles
@@ -93,9 +93,9 @@
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------
 .d-table--inverted {
-    --table-color-th: var(--black-200);
-    --table-color-td: var(--black-400);
-    --table-color-border: var(--black-200);
+    --table-th-color-text: var(--fc-secondary-inverted);
+    --table-td-color-text: var(--black-400);
+    --table-color-border: var(--black-500);
 }
 
 //  ============================================================================
@@ -104,13 +104,13 @@
 .d-table--striped {
     // Row Styles
     tr:nth-child(even) {
-        background-color: hsl(var(--black-400-h), var(--black-400-s), var(--black-400-l), 0.1);
+        background-color: hsla(var(--bgc-bold-hsl) / 0.1);
     }
 
     &.d-table--inverted {
         // Row Styles
         tr:nth-child(even) {
-            background-color: hsl(var(--black-300-h), var(--black-300-s), var(--black-300-l), 0.1);
+            background-color: hsla(var(--bgc-primary-hsl) / 0.08);
         }
     }
 }

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

@@ -20,6 +20,10 @@
     color: var(--fc-tertiary);
     font-size: var(--fs-200);
 
+    &:focus {
+        outline: 0;
+    }
+
     // Add a bottom border unless no border is requested
     &:not(.d-tablist--no-border)::after {
         position: absolute;
@@ -40,9 +44,8 @@
 .d-tab {
     //  --  COMPONENT CSS VARS
     //  ------------------------------------------------------------------------
-    --tab-color-background: hsla(var(--white-hsl) ~' / ' 0%);
+    --tab-color-background: hsla(var(--white-hsl) / 0);
     --tab-color-text: inherit;
-    --tab-color-shadow: var(--focus-ring);
 
     position: relative;
     display: inline-flex;
@@ -58,9 +61,9 @@
     border: 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;
+    transition-timing-function: var(--ttf-out-quint);
+    transition-duration: var(--td300);
+    transition-property: background-color, border, color, box-shadow;
     fill: currentColor;
 
     &:first-of-type {
@@ -83,7 +86,7 @@
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0 0 0 var(--size-200) var(--tab-color-shadow);
+        box-shadow: var(--bs-focus-ring-inset);
     }
 
     &:hover {
@@ -107,7 +110,7 @@
     z-index: var(--zi-selected);
 
     &:hover {
-        --tab-color-background: hsla(var(--purple-400-hsl) ~' / ' 10%);
+        --tab-color-background: hsla(var(--purple-400-hsl) / 0.1);
         --tab-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
     }
 
@@ -122,23 +125,22 @@
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------
 .d-tablist--inverted {
-    --tab-color-text: var(--white);
+    --tab-color-text: var(--fc-primary-inverted);
 
     &::after {
-        background-color: hsla(var(--purple-600-hsl) ~' / ' 50%);
+        background-color: hsla(var(--purple-600-hsl) / 0.5);
     }
 
     .d-tab {
-        --tab-color-text: var(--white);
+        --tab-color-text: var(--fc-secondary-inverted);
 
         &:hover {
-            --tab-color-background: hsla(var(--white-hsl) ~' / ' 10%);
+            --tab-color-background: hsla(var(--white-hsl) / 0.1);
         }
     }
 
     .d-tab--selected {
-        --tab-color-text: var(--white);
-        --tab-color-shadow: var(--white);
+        --tab-color-text: var(--fc-primary-inverted);
 
         &::after {
             --tab-color-background: currentColor;