@dialpad/dialtone 6.1.1 → 6.3.0

package/README.md

@@ -21,7 +21,7 @@ If you only need access to Dialtone's variables and customizations to build a fi
 
 ## Building Dialtone locally
 
-To build Dialtone locally, visit our [installation instructions](https://dialpad.design/getting-started/installation/).
+To build Dialtone locally, visit our [installation instructions](https://dialpad.design/getting-started/building-locally/).
 
 ## Contributing
 

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

@@ -36,6 +36,8 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
 
+  margin-bottom: var(--su6);
+
   font-weight: @fw-bold;
   font-size: var(--fs16);
   font-family: inherit;
@@ -76,7 +78,8 @@ fieldset {
   box-sizing: border-box;
 
   display: flex;
-  margin: var(--su0);
+  margin-bottom: var(--su6);
+
   color: var(--black-500);
   fill: currentColor;
   font-size: var(--fs12);
@@ -84,6 +87,10 @@ fieldset {
   line-height: var(--lh4);
 }
 
+.d-label + .d-description {
+  margin-top: var(--sun6);
+}
+
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-description--lg {
@@ -122,18 +129,14 @@ fieldset {
   }
 }
 
-.d-checkbox__copy .d-validation-message,
-.d-radio__copy .d-validation-message {
-  margin-top: var(--su2);
-}
-
 //  $$   VALIDATION STATES
 //  ----------------------------------------------------------------------------
 .d-validation-message--warning {
   --validation--fc:   var(--fc-warning);
 
   &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='hsl(43 100% 33%)'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='hsl(43 100% 33%)'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
   }
 }
 
@@ -141,7 +144,8 @@ fieldset {
   --validation--fc:   var(--fc-error);
 
   &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='hsl(0 100% 29%)'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='hsl(0 100% 29%)'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
   }
 }
 
@@ -149,6 +153,7 @@ fieldset {
   --validation--fc:   var(--fc-success);
 
   &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='hsl(115 94% 18%)'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='hsl(115 94% 18%)'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
   }
 }

package/lib/build/less/components/input.less

@@ -10,6 +10,7 @@
 //  • VARIABLES
 //  • INPUTS & TEXTAREAS
 //    - Base Style
+//    - Wrapper
 //    - Validation States
 //    - Sizes
 //  • INPUT ICONS
@@ -39,7 +40,6 @@
     position: relative;
     display: inline-flex;
     flex: 1 0%;
-    margin-top: var(--su6);
     padding:    0.7rem var(--su8);
     min-width: 0;
     width: 100%;
@@ -80,16 +80,18 @@
     &:focus {
         --input--bc: var(--input--focus-bc);
 
-        box-shadow: var(--bs-focus-ring);
+        box-shadow: var(--bs-focus-ring)!important;
         outline: 0;
     }
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
-        --input--bc:           var(--black-500);
+        --input--bc:           var(--black-500)!important;
         --input--bgc:          var(--black-200);
 
-        box-shadow: none;
+        &:focus {
+            box-shadow: none!important;
+        }
 
         //  --  Placeholder copy
         &::placeholder {
@@ -102,6 +104,12 @@
     }
 }
 
+//  $$  INPUT WRAPPER
+//  ----------------------------------------------------------------------------
+.d-input__wrapper {
+    position: relative;
+}
+
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-input--xs {
@@ -197,29 +205,29 @@
 //  ----------------------------------------------------------------------------
 .d-input--warning,
 .d-textarea--warning {
-    --input--bc:        var(--warning-color);
+    --input--bc:        var(--warning-color)!important;
     --input--focus-bc:  var(--warning-color);
 
     &:focus {
-        box-shadow: var(--bs-focus-ring-warning);
+        box-shadow: var(--bs-focus-ring-warning)!important;
     }
 }
 .d-input--error,
 .d-textarea--error {
-    --input--bc:        var(--error-color);
+    --input--bc:        var(--error-color)!important;
     --input--focus-bc:  var(--error-color);
 
     &:focus {
-        box-shadow: var(--bs-focus-ring-error);
+        box-shadow: var(--bs-focus-ring-error)!important;
     }
 }
 .d-input--success,
 .d-textarea--success {
-    --input--bc:        var(--success-color);
+    --input--bc:        var(--success-color)!important;
     --input--focus-bc:  var(--success-color);
 
     &:focus {
-        box-shadow: var(--bs-focus-ring-success);
+        box-shadow: var(--bs-focus-ring-success)!important;
     }
 }
 
@@ -231,10 +239,13 @@
     //  ------------------------------------------------------------------------
     --input-icon-size: @icon16;
 
+    display: inline-flex;
+    align-items: center;
     position: absolute;
+    top: 0;
     z-index:  var(--zi-base1);
     margin: 0;
-    margin-top: 1.6rem;
+    margin-top: 1rem;
     line-height: 0;
 
     height: var(--input-icon-size);
@@ -277,7 +288,7 @@
 //  ----------------------------------------------------------------------------
 .d-input-icon--xs {
     --input-icon-size: @icon12;
-    margin-top:        1.4rem;
+    margin-top:        0.8rem;
 
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
@@ -295,7 +306,7 @@
 
 .d-input-icon--sm {
     --input-icon-size: @icon14;
-    margin-top:        1.5rem;
+    margin-top:        0.9rem;
 
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
@@ -313,7 +324,7 @@
 
 .d-input-icon--lg {
     --input-icon-size: @icon20;
-    margin-top:        2.0rem;
+    margin-top:        1.4rem;
 
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
@@ -331,7 +342,7 @@
 
 .d-input-icon--xl {
     --input-icon-size: @icon24;
-    margin-top:        2.2rem;
+    margin-top:        1.6rem;
 
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present

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

@@ -169,6 +169,18 @@
                 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);
+            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-200);
+                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");
+            }
+        }
+
     }
 }
 
@@ -177,7 +189,7 @@
 .d-checkbox--warning {
     --check-radio--color:         var(--warning-color);
     --check-radio--bc:            var(--check-radio--color);
-    
+
     &:focus,
     &:checked:focus {
         box-shadow:               var(--bs-focus-ring-warning);
@@ -186,7 +198,7 @@
 .d-checkbox--error {
     --check-radio--color:         var(--error-color);
     --check-radio--bc:            var(--check-radio--color);
-    
+
     &:focus,
     &:checked:focus {
         box-shadow:               var(--bs-focus-ring-error);
@@ -252,7 +264,7 @@
     &:focus,
     &:checked:focus {
         box-shadow:               var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
-    } 
+    }
 }
 
 .d-radio--success {
@@ -262,5 +274,5 @@
     &:focus,
     &:checked:focus {
         box-shadow:               var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
-    } 
+    }
 }

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

@@ -34,7 +34,6 @@
   font-size: var(--fs18);
   font-family: inherit;
   line-height: var(--lh-tight);
-  margin-top: var(--su6);
 
   //  --  Arrows
   &:before,
@@ -104,7 +103,6 @@
 
   //  [2] Update the styles
   .d-input();
-  margin-top: 0;
 
   --select--bc: var(--black-500);
 

package/lib/dist/css/dialtone.css

@@ -970,6 +970,7 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
+  margin-bottom: var(--su6);
   color: currentColor;
   font-family: inherit;
   font-size: var(--fs16);
@@ -1001,13 +1002,16 @@ legend .d-label {
 .d-description {
   display: flex;
   box-sizing: border-box;
-  margin: var(--su0);
+  margin-bottom: var(--su6);
   color: var(--black-500);
   font-family: inherit;
   font-size: var(--fs12);
   line-height: var(--lh4);
   fill: currentColor;
 }
+.d-label + .d-description {
+  margin-top: var(--sun6);
+}
 .d-description--lg {
   font-size: var(--fs14);
   line-height: var(--lh6);
@@ -1034,27 +1038,26 @@ legend .d-label {
   height: var(--su16);
   margin-right: var(--su4);
 }
-.d-checkbox__copy .d-validation-message,
-.d-radio__copy .d-validation-message {
-  margin-top: var(--su2);
-}
 .d-validation-message--warning {
   --validation--fc: var(--fc-warning);
 }
 .d-validation-message--warning::before {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='hsl(43 100% 33%)'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
 }
 .d-validation-message--error {
   --validation--fc: var(--fc-error);
 }
 .d-validation-message--error::before {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='hsl(0 100% 29%)'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
 }
 .d-validation-message--success {
   --validation--fc: var(--fc-success);
 }
 .d-validation-message--success::before {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='hsl(115 94% 18%)'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
 }
 .d-input,
 .d-textarea {
@@ -1068,7 +1071,6 @@ legend .d-label {
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  margin-top: var(--su6);
   padding: 0.7rem var(--su8);
   border: 1px solid var(--input--bc);
   border-radius: var(--base--corner-radius);
@@ -1127,16 +1129,21 @@ legend .d-label {
 .d-input:focus,
 .d-textarea:focus {
   --input--bc: var(--input--focus-bc);
-  box-shadow: var(--bs-focus-ring);
+  box-shadow: var(--bs-focus-ring) !important;
   outline: 0;
 }
 .d-input[disabled],
 .d-textarea[disabled],
 .d-input[read-only],
 .d-textarea[read-only] {
-  --input--bc: var(--black-500);
+  --input--bc: var(--black-500)!important;
   --input--bgc: var(--black-200);
-  box-shadow: none;
+}
+.d-input[disabled]:focus,
+.d-textarea[disabled]:focus,
+.d-input[read-only]:focus,
+.d-textarea[read-only]:focus {
+  box-shadow: none!important;
 }
 .d-input[disabled]::-webkit-input-placeholder,
 .d-textarea[disabled]::-webkit-input-placeholder,
@@ -1178,6 +1185,9 @@ legend .d-label {
 .d-textarea[disabled] {
   cursor: not-allowed;
 }
+.d-input__wrapper {
+  position: relative;
+}
 .d-input--xs {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1308,39 +1318,42 @@ legend .d-label {
 }
 .d-input--warning,
 .d-textarea--warning {
-  --input--bc: var(--warning-color);
+  --input--bc: var(--warning-color)!important;
   --input--focus-bc: var(--warning-color);
 }
 .d-input--warning:focus,
 .d-textarea--warning:focus {
-  box-shadow: var(--bs-focus-ring-warning);
+  box-shadow: var(--bs-focus-ring-warning) !important;
 }
 .d-input--error,
 .d-textarea--error {
-  --input--bc: var(--error-color);
+  --input--bc: var(--error-color)!important;
   --input--focus-bc: var(--error-color);
 }
 .d-input--error:focus,
 .d-textarea--error:focus {
-  box-shadow: var(--bs-focus-ring-error);
+  box-shadow: var(--bs-focus-ring-error) !important;
 }
 .d-input--success,
 .d-textarea--success {
-  --input--bc: var(--success-color);
+  --input--bc: var(--success-color)!important;
   --input--focus-bc: var(--success-color);
 }
 .d-input--success:focus,
 .d-textarea--success:focus {
-  box-shadow: var(--bs-focus-ring-success);
+  box-shadow: var(--bs-focus-ring-success) !important;
 }
 .d-input-icon {
   --input-icon-size: 1.6rem;
+  display: inline-flex;
   position: absolute;
   z-index: var(--zi-base1);
+  top: 0;
+  align-items: center;
   width: var(--input-icon-size);
   height: var(--input-icon-size);
   margin: 0;
-  margin-top: 1.6rem;
+  margin-top: 1rem;
   line-height: 0;
 }
 .d-input-icon svg {
@@ -1362,7 +1375,7 @@ legend .d-label {
 }
 .d-input-icon--xs {
   --input-icon-size: 1.2rem;
-  margin-top: 1.4rem;
+  margin-top: 0.8rem;
 }
 .d-input-icon--xs.d-input-icon--left ~ .d-input,
 .d-input-icon--xs.d-input-icon--left ~ .d-textarea {
@@ -1373,7 +1386,7 @@ legend .d-label {
 }
 .d-input-icon--sm {
   --input-icon-size: 1.4rem;
-  margin-top: 1.5rem;
+  margin-top: 0.9rem;
 }
 .d-input-icon--sm.d-input-icon--left ~ .d-input,
 .d-input-icon--sm.d-input-icon--left ~ .d-textarea {
@@ -1384,7 +1397,7 @@ legend .d-label {
 }
 .d-input-icon--lg {
   --input-icon-size: 2rem;
-  margin-top: 2rem;
+  margin-top: 1.4rem;
 }
 .d-input-icon--lg.d-input-icon--left ~ .d-input,
 .d-input-icon--lg.d-input-icon--left ~ .d-textarea {
@@ -1395,7 +1408,7 @@ legend .d-label {
 }
 .d-input-icon--xl {
   --input-icon-size: 2.4rem;
-  margin-top: 2.2rem;
+  margin-top: 1.6rem;
 }
 .d-input-icon--xl.d-input-icon--left ~ .d-input,
 .d-input-icon--xl.d-input-icon--left ~ .d-textarea {
@@ -2030,6 +2043,16 @@ legend .d-label {
     --check-radio--bgc: var(--black-200);
     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");
   }
+  .d-checkbox--indeterminate,
+  .d-checkbox:indeterminate {
+    --check-radio--bgc: 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");
+  }
+  .d-checkbox--indeterminate[disabled],
+  .d-checkbox:indeterminate[disabled] {
+    --check-radio--bgc: var(--black-200);
+    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");
+  }
 }
 .d-checkbox--warning {
   --check-radio--color: var(--warning-color);
@@ -2109,7 +2132,6 @@ legend .d-label {
   box-sizing: border-box;
   width: 100%;
   width: -webkit-fill-available;
-  margin-top: var(--su6);
   font-family: inherit;
   font-size: var(--fs18);
   font-weight: inherit;
@@ -2190,8 +2212,6 @@ legend .d-label {
   width: 100%;
   min-width: 0;
   height: 100%;
-  margin-top: var(--su6);
-  margin-top: 0;
   padding: 0.7rem var(--su8);
   padding: 0.7rem 2em 0.7rem 0.8rem;
   border: 1px solid var(--input--bc);
@@ -2245,14 +2265,17 @@ legend .d-label {
 }
 .d-select__input:focus {
   --input--bc: var(--input--focus-bc);
-  box-shadow: var(--bs-focus-ring);
+  box-shadow: var(--bs-focus-ring) !important;
   outline: 0;
 }
 .d-select__input[disabled],
 .d-select__input[read-only] {
-  --input--bc: var(--black-500);
+  --input--bc: var(--black-500)!important;
   --input--bgc: var(--black-200);
-  box-shadow: none;
+}
+.d-select__input[disabled]:focus,
+.d-select__input[read-only]:focus {
+  box-shadow: none!important;
 }
 .d-select__input[disabled]::-webkit-input-placeholder,
 .d-select__input[read-only]::-webkit-input-placeholder {