@dialpad/dialtone 7.10.1 → 7.10.3

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

@@ -27,10 +27,10 @@
 .d-modal {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 60%);
-    --modal-dialog--bgc: var(--white);
-    --modal-dialog--fc: var(--black-700);
-    --modal-header--fc: var(--black-800);
+    --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 60%);
+    --modal-dialog-color-background: var(--white);
+    --modal-dialog-color-text: var(--fc-tertiary);
+    --modal-header-color-text: var(--fc-secondary);
 
     position: fixed;
     top: 0;
@@ -42,8 +42,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: var(--su32);
-    background-color: var(--modal--bgc);
+    padding: var(--space-600); // 32
+    background-color: var(--modal-color-background);
     backface-visibility: hidden;
     visibility: hidden;
     opacity: 0;
@@ -53,10 +53,7 @@
 .d-modal--transparent {
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
-  --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 85%);
-  --modal-dialog--bgc: var(--white);
-  --modal-dialog--fc: var(--black-700);
-  --modal-header--fc: var(--black-800);
+  --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 85%);
 
   position: fixed;
   top: 0;
@@ -68,7 +65,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--su32);
+  padding: var(--space-600); // 32
   background-color: var(--d-bgc-transparent);
   backface-visibility: hidden;
   visibility: hidden;
@@ -82,13 +79,13 @@
   position: relative;
   z-index: var(--zi-hide);
   width: 100%;
-  max-width: var(--size628);
+  max-width: calc(var(--size-300) * 157); // 628
   max-height: 100%;
   overflow-y: auto;
-  color: var(--modal-dialog--fc);
+  color: var(--modal-dialog-color-text);
   font-size: var(--fs-200);
   line-height: var(--lh8);
-  background-color: var(--modal-dialog--bgc);
+  background-color: var(--modal-dialog-color-background);
   border-radius: var(--br8);
   box-shadow: var(--bs-card);
   transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
@@ -115,17 +112,19 @@
 //  $   MODAL AREAS
 //  ----------------------------------------------------------------------------
 .d-modal__footer {
+  --modal-footer-padding: calc(var(--space-300) * 6); // 24
+
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  padding: 0 var(--su24) var(--su24) var(--su24);
+  padding: 0 var(--modal-footer-padding) var(--modal-footer-padding) var(--modal-footer-padding); // 0 24 24 24
 
   >:not(:first-child) {
-    margin-right: var(--su4);
+    margin-right: var(--space-300); // 4
   }
 
   >:not(:last-child) {
-    margin-left: var(--su4);
+    margin-left: var(--space-300); // 4
   }
 }
 
@@ -136,9 +135,11 @@
 //  $$  HEADER
 //  ----------------------------------------------------------------------------
 .d-modal__header {
+  --modal-header-padding: calc(var(--space-300) * 6); // 24
+
   margin: 0 !important;
-  padding: var(--su24) var(--su24) 0;
-  color: var(--modal-header--fc);
+  padding: var(--modal-header-padding) var(--modal-header-padding) 0;
+  color: var(--modal-header-color-text);
   font-weight: var(--fw-bold);
   font-size: var(--fs-300);
   line-height: var(--lh4);
@@ -148,8 +149,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0;
-  padding: var(--su4) var(--su24);
+  margin: calc(var(--space-300) * 3) 0; // 12 0
+  padding: var(--space-300) calc(var(--space-300) * 6); // 4 24
 }
 
 
@@ -158,8 +159,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__close {
   position: absolute;
-  top: var(--su8);
-  right: var(--su8);
+  top: var(--space-400); // 8
+  right: var(--space-400); // 8
   margin: 0 !important;
 }
 
@@ -171,8 +172,8 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  max-width: var(--size628);
-  padding: var(--su12) var(--su24);
+  max-width: calc(var(--size-300) * 157); // 628
+  padding: calc(var(--space-300) * 3) calc(var(--space-300) * 6); // 12 24
   font-size: var(--fs-200);
   line-height: var(--lh4);
   background-color: var(--gold-100);
@@ -205,22 +206,22 @@
   }
 
   .d-modal__header {
-    padding: var(--su32) var(--su32) 0;
+    padding: var(--space-600) var(--space-600) 0; // 32
   }
 
   .d-modal__content {
     padding-right: 0;
-    padding-left: var(--su32);
+    padding-left: var(--space-600); // 32
   }
 
   .d-modal__footer {
     margin-top: auto !important;
-    padding: 0 var(--su24) var(--su32) var(--su32);
+    padding: 0 calc(var(--space-300) * 6) var(--space-600) var(--space-600); // 0 24 32 32
   }
 
   .d-modal__banner {
     max-width: unset;
-    padding: var(--su12) var(--su32);
+    padding: calc(var(--space-300) * 3) var(--space-600); // 12 32
     border-radius: 0;
   }
 }
@@ -240,7 +241,7 @@
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-modal--danger {
-  --modal-header--fc: var(--fc-dark);
+  --modal-header-color-text: var(--fc-secondary);
 }
 
 

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

@@ -15,8 +15,8 @@
 .d-notice {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --notice--bgc: var(--black-100);
-    --notice--fc: var(--fc-primary);
+    --notice-color-background: var(--black-100);
+    --notice-color-text: var(--fc-primary);
 
     display: flex;
     align-items: center;
@@ -25,16 +25,16 @@
     //  ------------------------------------------------------------------------
     box-sizing: border-box;
     width: 100%;
-    max-width: var(--size628);
-    padding: var(--su12);
-    color: var(--notice--fc);
+    max-width: calc(var(--size-300) * 157); // 628
+    padding: calc(var(--space-300) * 3); // 12
+    color: var(--notice-color-text);
     font-size: var(--fs-200);
     line-height: var(--lh6);
-    background-color: var(--notice--bgc);
+    background-color: var(--notice-color-background);
     border-radius: var(--br4);
 
     .d-toast & {
-        max-width: var(--size464);
+        max-width: calc(var(--size-300) * 116); // 464
         box-shadow: var(--bs-sm);
         pointer-events: all;
     }
@@ -49,7 +49,7 @@
     display: flex;
     flex: 1 auto;
     flex-direction: column;
-    margin-right: var(--su16);
+    margin-right: var(--space-500); // 16
 }
 
 //  $$  ACTIONS
@@ -67,7 +67,7 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    margin-right: var(--su8);
+    margin-right: var(--space-400); // 8
     color: inherit;
 }
 
@@ -85,8 +85,8 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-notice.d-notice--important {
-    --notice--bgc: var(--black-800);
-    --notice--fc: var(--black-100);
+    --notice-color-background: var(--black-800);
+    --notice-color-text: var(--black-100);
 }
 
 //  $$  ERROR
@@ -94,14 +94,14 @@
 .d-notice--error,
 .d-banner--error,
 .d-toast--error {
-    --notice--bgc: var(--red-100);
-    --notice--fc: var(--red-500);
+    --notice-color-background: var(--red-100);
+    --notice-color-text: var(--red-500);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--red-300);
-        --notice--fc: var(--white);
+        --notice-color-background: var(--red-300);
+        --notice-color-text: var(--white);
     }
 }
 
@@ -110,13 +110,13 @@
 .d-notice--info,
 .d-banner--info,
 .d-toast--info {
-    --notice--bgc: var(--purple-100);
+    --notice-color-background: var(--purple-100);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--purple-400);
-        --notice--fc: var(--white);
+        --notice-color-background: var(--purple-400);
+        --notice-color-text: var(--white);
     }
 }
 
@@ -125,14 +125,14 @@
 .d-notice--success,
 .d-banner--success,
 .d-toast--success {
-    --notice--bgc: var(--green-100);
-    --notice--fc: var(--green-500);
+    --notice-color-background: var(--green-100);
+    --notice-color-text: var(--green-500);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--green-200);
-        --notice--fc: var(--green-500);
+        --notice-color-background: var(--green-200);
+        --notice-color-text: var(--green-500);
     }
 }
 
@@ -141,12 +141,12 @@
 .d-notice--warning,
 .d-banner--warning,
 .d-toast--warning {
-    --notice--bgc: var(--gold-100);
+    --notice-color-background: var(--gold-100);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--gold-200);
-        --notice--fc: var(--fc-primary);
+        --notice-color-background: var(--gold-200);
+        --notice-color-text: var(--fc-primary);
     }
 }

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

@@ -32,7 +32,7 @@
   overflow: auto;
   background-color: var(--white);
   border-color: var(--black-400);
-  border-radius: var(--su8);
+  border-radius: var(--br8); // 8
   box-shadow: var(--bs-card);
 }
 
@@ -55,21 +55,21 @@
   justify-content: flex-end;
   width: 100%;
   min-height: var(--size48);
-  padding-top: var(--su6);
-  padding-bottom: var(--su6);
+  padding-top: calc(var(--space-300) + var(--space-200)); // 6
+  padding-bottom: calc(var(--space-300) + var(--space-200)); // 6
   overflow: auto;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-semibold);
   font-size: var(--fs-200);
 }
 
 .d-popover__header {
   .d-popover__header-footer-base();
 
-  border-bottom: var(--su1) solid var(--black-300);
+  border-bottom: var(--size-100) solid var(--black-300);
 }
 
 .d-popover__footer {
   .d-popover__header-footer-base();
 
-  border-top: var(--su1) solid var(--black-300);
+  border-top: var(--size-100) solid var(--black-300);
 }

package/lib/build/less/components/presence.less

@@ -11,17 +11,18 @@
 .d-presence {
   --presence-color-border-base: var(--black-100);
   --presence-color-border-offline: var(--black-400);
-  --presence-color-background-base: var(--white);
+  --presence-color-background-base: var(--black-400);
   --presence-color-background-active: var(--green-400);
   --presence-color-background-busy: var(--red-300);
   --presence-color-background-away: var(--gold-300);
   --presence-color-background-offline: var(--white);
+  --presence-size: var(--size-200);
 
   display: inline-block;
   box-sizing: border-box;
   border-color: var(--presence-color-border-base);
   border-style: solid;
-  border-width: var(--size-200);
+  border-width: var(--presence-size);
   border-radius: var(--br-circle);
 
   &__inner {

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

@@ -25,22 +25,22 @@
 .d-radio {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --check-radio--color: var(--primary-color);
-    --check-radio--bc: var(--black-600);
-    --check-radio--bgc: var(--white);
+    --check-radio-color: var(--purple-400);
+    --check-radio-color-border: var(--black-600);
+    --check-radio-color-background: var(--white);
 
     //  [1] Check to see if we can use custom styles, if so reset the defaults
     //  ------------------------------------------------------------------------
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        width: 1em;
-        height: 1em;
+        width: var(--size-500); // 16
+        height: var(--size-500); // 16
 
         //  [2]  Now re-style the checkboxes and radios
         //  --------------------------------------------------------------------
         margin: 0;
         font-size: inherit;
-        background-color: var(--check-radio--bgc);
-        border: var(--su1) solid var(--check-radio--bc);
+        background-color: var(--check-radio-color-background);
+        border: var(--size-100) solid var(--check-radio-color-border);
         outline: 0;
         box-shadow: none;
         cursor: pointer;
@@ -54,14 +54,14 @@
 
         &:focus-visible,
         &:checked:focus-visible {
-          --check-radio--bc: var(--check-radio--color);
+          --check-radio-color-border: var(--check-radio-color);
 
           outline: 0;
           box-shadow: var(--bs-focus-ring);
         }
 
         &:checked {
-            --check-radio--bc: var(--check-radio--color);
+            --check-radio-color-border: var(--check-radio-color);
         }
     }
 
@@ -71,9 +71,9 @@
     //  --  DISABLED
     &[disabled],
     &--disabled {
-        --check-radio--color: var(--fc-disabled);
-        --check-radio--bc: var(--black-400);
-        --check-radio--bgc: var(--black-300);
+        --check-radio-color: var(--fc-disabled);
+        --check-radio-color-border: var(--black-400);
+        --check-radio-color-background: var(--black-300);
 
         cursor: not-allowed;
     }
@@ -86,9 +86,10 @@
 .d-checkbox-group,
 .d-radio-group {
     display: flex;
-    padding-right: var(--su1);
-    padding-bottom: var(--su2);
-    padding-left: var(--su1);
+    gap: var(--space-400); // 8
+    padding-right: var(--space-100); // 1
+    padding-bottom: var(--space-200); // 2
+    padding-left: var(--space-100); // 1
 
     //  --  Wrapper Disabled State
     &.d-checkbox-group--disabled,
@@ -110,7 +111,7 @@
 .d-radio__input {
     display: flex;
     align-self: flex-start;
-    padding-top: var(--su2);
+    padding-top: calc(var(--space-200) + var(--space-100)); // 3
 }
 
 
@@ -122,7 +123,6 @@
 .d-radio__copy {
     display: inline-flex;
     flex-direction: column;
-    margin-left: var(--su8);
 }
 
 .d-checkbox__label,
@@ -154,32 +154,32 @@
         }
 
         &:checked {
-            --check-radio--bgc: var(--check-radio--color);
+            --check-radio-color-background: var(--check-radio-color);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
 
             //  Disabled
             &[disabled] {
-                --check-radio--bgc: var(--black-300);
+                --check-radio-color-background: var(--black-300);
 
                 background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
             }
         }
 
         &--disabled:checked {
-            --check-radio--bgc: var(--black-300);
+            --check-radio-color-background: var(--black-300);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
         }
 
         &--indeterminate,
         &:indeterminate {
-            --check-radio--bgc: var(--check-radio--color);
+            --check-radio-color-background: var(--check-radio-color);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
 
             &[disabled] {
-                --check-radio--bgc: var(--black-300);
+                --check-radio-color-background: var(--black-300);
 
                 background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
             }
@@ -187,7 +187,7 @@
 
         &--indeterminate&--disabled,
         &:indeterminate&--disabled {
-            --check-radio--bgc: var(--black-300);
+            --check-radio-color-background: var(--black-300);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
         }
@@ -195,9 +195,9 @@
         //  Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color: var(--fc-disabled);
-            --check-radio--bc: var(--black-400);
-            --check-radio--bgc: var(--black-300);
+            --check-radio-color: var(--fc-disabled);
+            --check-radio-color-border: var(--black-400);
+            --check-radio-color-background: var(--black-300);
         }
     }
 }
@@ -205,8 +205,8 @@
 //  $$  CHECKBOX VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-checkbox--warning {
-    --check-radio--color: var(--warning-color);
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color: var(--warning-color);
+    --check-radio-color-border: var(--check-radio-color);
 
     &:focus-visible,
     &:checked:focus-visible {
@@ -215,8 +215,8 @@
 }
 
 .d-checkbox--error {
-    --check-radio--color: var(--error-color);
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color: var(--error-color);
+    --check-radio-color-border: var(--check-radio-color);
 
     &:focus-visible,
     &:checked:focus-visible {
@@ -225,8 +225,8 @@
 }
 
 .d-checkbox--success {
-    --check-radio--color: var(--success-color);
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color: var(--success-color);
+    --check-radio-color-border: var(--check-radio-color);
 
     &:focus-visible,
     &:checked:focus-visible {
@@ -245,29 +245,29 @@
         // Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color: var(--fc-disabled);
-            --check-radio--bc: var(--black-400);
-            --check-radio--bgc: var(--black-300);
+            --check-radio-color: var(--fc-disabled);
+            --check-radio-color-border: var(--black-400);
+            --check-radio-color-background: var(--black-300);
         }
 
         &:focus-visible,
         &:checked:focus-visible {
-          box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
+          box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
         }
 
         &:checked {
-            --check-radio--bgc: var(--check-radio--color);
+            --check-radio-color-background: var(--check-radio-color);
 
-            box-shadow: inset 0 0 0 var(--su2) var(--white);
+            box-shadow: inset 0 0 0 var(--size-200) var(--white);
 
             // Disabled
             &[disabled] {
-                --check-radio--bgc: var(--black-400);
+                --check-radio-color-background: var(--black-400);
             }
         }
 
         &--disabled:checked {
-            --check-radio--bgc: var(--black-400);
+            --check-radio-color-background: var(--black-400);
         }
     }
 }
@@ -275,31 +275,31 @@
 //  $$  RADIO VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-radio--warning {
-    --check-radio--color: var(--warning-color);
-    --check-radio--bc: var(--check-radio--color);
+    --check-radio-color: var(--warning-color);
+    --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(--su2) var(--white);
+      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--bc: var(--check-radio--color);
+    --check-radio-color: var(--error-color);
+    --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(--su2) var(--white);
+      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--bc: var(--check-radio--color);
+    --check-radio-color: var(--success-color);
+    --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(--su2) var(--white);
+      box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--space-200) var(--white);
     }
 }