@dialpad/dialtone 6.2.0 → 6.4.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/banner.less

@@ -1,3 +1,5 @@
+@import (reference) "../utilities/spacing.less";
+
 //
 //  DIALTONE
 //  COMPONENTS: BANNERS

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

@@ -1,3 +1,5 @@
+@import (reference) "../variables/icons.less";
+
 //
 //  DIALTONE
 //  COMPONENTS: BUTTONS

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

@@ -1,3 +1,5 @@
+@import (reference) "../variables/typography.less";
+
 //
 //  DIALTONE
 //  COMPONENTS: FORMS

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

@@ -1,3 +1,6 @@
+@import (reference) '../variables/icons.less';
+@import (reference) '../variables/sizes.less';
+
 //
 //  DIALTONE
 //  COMPONENTS: INPUTS
@@ -86,8 +89,9 @@
     //  --  DISABLED / READ-ONLY
     &[disabled],
     &[read-only] {
-        --input--bc:           var(--black-500)!important;
-        --input--bgc:          var(--black-200);
+        --input--bc:           var(--black-200)!important;
+        --input--bgc:          var(--black-075);
+        --input--fc:           var(--black-400);
 
         &:focus {
             box-shadow: none!important;
@@ -239,6 +243,8 @@
     //  ------------------------------------------------------------------------
     --input-icon-size: @icon16;
 
+    display: inline-flex;
+    align-items: center;
     position: absolute;
     top: 0;
     z-index:  var(--zi-base1);

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

@@ -1,3 +1,5 @@
+@import (reference) '../utilities/spacing.less';
+
 //
 //  DIALTONE
 //  COMPONENTS: MODALS

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

@@ -1,3 +1,5 @@
+@import (reference) '../utilities/spacing.less';
+
 //
 //  DIALTONE
 //  COMPONENTS: NOTICES
@@ -9,6 +11,7 @@
 //  ============================================================================
 //  $   BASE WRAPPER
 //  ----------------------------------------------------------------------------
+
 .d-notice {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------

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

@@ -68,10 +68,12 @@
     align-self: flex-start;
 
     //  --  DISABLED
-    &[disabled] {
-        --check-radio--bc:  var(--black-200);
-        --check-radio--bgc: var(--black-100);
-        cursor: not-allowed;
+    &[disabled],
+    &--disabled {
+        --check-radio--color:   var(--black-200);
+        --check-radio--bc:      var(--black-200);
+        --check-radio--bgc:     var(--black-075);
+        cursor:                 not-allowed;
     }
 }
 
@@ -91,7 +93,7 @@
     &.d-radio-group--disabled {
         .d-checkbox__label,
         .d-radio__label {
-            color: var(--black-400);
+            color: var(--black-200);
             cursor: not-allowed;
         }
     }
@@ -148,12 +150,6 @@
         background-repeat: no-repeat;
         background-size: contain;
 
-        //  Disabled
-        &[disabled] {
-            --check-radio--bc:      var(--black-400);
-            --check-radio--bgc:     var(--black-200);
-        }
-
         &:focus,
         &:checked:focus {
             border-radius: var(--br2);
@@ -165,10 +161,41 @@
 
             //  Disabled
             &[disabled] {
-                --check-radio--bgc:     var(--black-200);
+                --check-radio--bgc:     var(--black-075);
                 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-075);
+            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-075);
+                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");
+            }
+        }
+
+        &--indeterminate&--disabled,
+        &:indeterminate&--disabled {
+            --check-radio--bgc:     var(--black-075);
+            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");
+        }
+
+        //  Disabled
+        &[disabled],
+        &--disabled {
+            --check-radio--color:   var(--black-200);
+            --check-radio--bc:      var(--black-200);
+            --check-radio--bgc:     var(--black-075);
+        }
+
     }
 }
 
@@ -177,7 +204,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 +213,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);
@@ -211,9 +238,11 @@
         border-radius: var(--br-circle);
 
         // Disabled
-        &[disabled] {
-            --check-radio--bc:      var(--black-400);
-            --check-radio--bgc:     var(--black-200);
+        &[disabled],
+        &--disabled {
+            --check-radio--color:   var(--black-200);
+            --check-radio--bc:      var(--black-200);
+            --check-radio--bgc:     var(--black-075);
         }
 
         &:focus,
@@ -227,9 +256,13 @@
 
             // Disabled
             &[disabled] {
-                --check-radio--bgc:     var(--black-400);
+                --check-radio--bgc:     var(--black-200);
             }
         }
+
+        &--disabled:checked {
+            --check-radio--bgc:     var(--black-200);
+        }
     }
 }
 
@@ -252,7 +285,7 @@
     &:focus,
     &:checked:focus {
         box-shadow:               var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
-    } 
+    }
 }
 
 .d-radio--success {
@@ -262,5 +295,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

@@ -1,3 +1,7 @@
+@import (reference) '../variables/sizes.less';
+@import (reference) '../variables/icons.less';
+@import (reference) 'input.less';
+
 //
 //  DIALTONE
 //  COMPONENTS: SELECT MENUS
@@ -119,8 +123,9 @@
     box-shadow: var(--bs-focus-ring);
   }
   &:disabled {
-    background: var(--black-200);
-    border: 1px solid var(--black-500);
+    color: var(--black-400);
+    background: var(--black-075);
+    border: 1px solid var(--black-200);
   }
   &::-moz-focus-inner {
     outline: none !important;
@@ -162,3 +167,10 @@
     box-shadow: var(--bs-focus-ring-warning);
   }
 }
+
+.d-select--disabled {
+  &:before,
+  &:after {
+    border-color: var(--black-400) transparent;
+  }
+}

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

@@ -1,3 +1,5 @@
+@import (reference) '../utilities/typography.less';
+
 //
 //  DIALTONE
 //  COMPONENTS: TABLES

package/lib/build/less/components/toast.less

@@ -1,3 +1,6 @@
+@import (reference) "../utilities/spacing.less";
+@import (reference) "../utilities/effects.less";
+
 //
 //  DIALTONE
 //  COMPONENTS: TOAST

package/lib/build/less/themes/default.less

@@ -1,3 +1,13 @@
+@import (reference) "../variables/colors.less";
+@import (reference) "../variables/layout.less";
+@import (reference) "../variables/borders.less";
+@import (reference) "../variables/visual-styles.less";
+@import (reference) "../variables/icons.less";
+@import (reference) "../variables/sizes.less";
+@import (reference) "../variables/typography.less";
+@import (reference) "../utilities/internals.less";
+@import (reference) "../utilities/grid.less";
+
 //
 //  DIALTONE
 //  THEME VARIABLES
@@ -21,6 +31,8 @@
 //  ============================================================================
 //  $   SET VARIABLES
 //  ----------------------------------------------------------------------------
+
+
 @theme-vars: {
     primary-color-h:                        var(--purple-500-h);
     primary-color-s:                        var(--purple-500-s);

package/lib/build/less/themes/example.less

@@ -33,9 +33,9 @@
 //
 //      @nav__background-color: This sets the navigation background color.
 //  ----------------------------------------------------------------------------
-@primary-color:                 @navy;
+@primary-color:                 @purple-500;
 @primary-color--hover:          darken(@primary-color, 10%);
-@nav__background-color:         @ash;
+@nav__background-color:         @black-400;
 
 //  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 //  ----------------------------------------------------------------------------

package/lib/build/less/utilities/backgrounds.less

@@ -1,3 +1,6 @@
+@import (reference) "../variables/colors.less";
+@import (reference) "../utilities/internals.less";
+
 //
 //  DIALTONE
 //  UTILITIES: BACKGROUNDS

package/lib/build/less/utilities/borders.less

@@ -1,3 +1,7 @@
+@import (reference) "../variables/spacing.less";
+@import (reference) "../utilities/internals.less";
+@import (reference) "../variables/borders.less";
+
 //
 //  DIALTONE
 //  UTILITIES: BORDERS

package/lib/build/less/utilities/colors.less

@@ -1,3 +1,5 @@
+@import (reference) "../utilities/internals.less";
+
 //
 //  DIALTONE
 //  UTILITIES: COLORS

package/lib/build/less/utilities/effects.less

@@ -1,3 +1,5 @@
+@import (reference) "../variables/spacing.less";
+
 //
 //  DIALTONE
 //  UTILITIES: EFFECTS

package/lib/build/less/utilities/grid.less

@@ -1,3 +1,5 @@
+@import (reference) "../utilities/spacing.less";
+
 //
 //  DIALTONE
 //  UTILITIES: GRID

package/lib/build/less/utilities/layout.less

@@ -1,3 +1,7 @@
+@import (reference) "../variables/spacing.less";
+@import (reference) "../utilities/internals.less";
+@import (reference) "../utilities/responsive.less";
+
 //
 //  DIALTONE
 //  UTILITIES: LAYOUT

package/lib/build/less/utilities/sizing.less

@@ -1,3 +1,6 @@
+@import (reference) "../variables/layout.less";
+@import (reference) "../utilities/internals.less";
+
 //
 //  DIALTONE
 //  UTILITIES: SIZING

package/lib/build/less/utilities/spacing.less

@@ -1,3 +1,6 @@
+@import (reference) "../variables/spacing.less";
+@import (reference) "internals.less";
+
 //
 //  DIALTONE
 //  UTILITIES: SPACING

package/lib/build/less/utilities/svg.less

@@ -1,3 +1,5 @@
+@import (reference) "../variables/icons.less";
+
 //
 //  DIALTONE
 //  UTILITIES: SVG

package/lib/build/less/utilities/typography.less

@@ -1,3 +1,8 @@
+@import (reference) '../variables/typography.less';
+@import (reference) '../variables/spacing.less';
+@import (reference) '../utilities/internals.less';
+@import (reference) '../utilities/grid.less';
+
 //
 //  DIALTONE
 //  UTILTIES: TYPOGRAPHY