@dialpad/dialtone 6.6.1 → 6.9.0

package/lib/build/less/dialtone.less

@@ -7,61 +7,45 @@
 //
 //
 //  ============================================================================
-@import "dialtone-reset";
-@import "dialtone-variables";
+@import 'dialtone-reset';
+@import 'dialtone-variables';
 
 //  --  COMPONENTS
-@import "components/avatar";
-@import "components/badge";
-@import "components/banner";
-@import "components/breadcrumbs";
-@import "components/button";
-@import "components/forms";
-@import "components/input";
-@import "components/link";
-@import "components/list-group"; // Dialtone 5 shim
-@import "components/modal";
-@import "components/toast"; // Needs to come before Notice styles
-@import "components/notice";
-@import "components/radio-checkbox";
-@import "components/selects";
-@import "components/table";
-@import "components/tabs";
-@import "components/tooltip";
+@import 'components/avatar';
+@import 'components/badge';
+@import 'components/banner';
+@import 'components/breadcrumbs';
+@import 'components/button';
+@import 'components/forms';
+@import 'components/input';
+@import 'components/link';
+@import 'components/list-group'; // Dialtone 5 shim
+@import 'components/modal';
+@import 'components/toast'; // Needs to come before Notice styles
+@import 'components/notice';
+@import 'components/radio-checkbox';
+@import 'components/selects';
+@import 'components/table';
+@import 'components/tabs';
+@import 'components/tooltip';
 
-//  --  UTILITIES
-@import "utilities/backgrounds";
-@import "utilities/borders";
-@import "utilities/colors";
-@import "utilities/effects";
-@import "utilities/flex";
-@import "utilities/grid";
-@import "utilities/interactivity";
-@import "utilities/layout";
-@import "utilities/responsive";
-@import "utilities/sizing";
-@import "utilities/spacing";
-@import "utilities/svg";
-@import "utilities/typography";
+//  --  CONFIG
+@import 'utilities/internals';
 
+//  --  UTILITIES
+@import 'utilities/backgrounds';
+@import 'utilities/borders';
+@import 'utilities/colors';
+@import 'utilities/effects';
+@import 'utilities/flex';
+@import 'utilities/grid';
+@import 'utilities/interactivity';
+@import 'utilities/layout';
+@import 'utilities/sizing';
+@import 'utilities/spacing';
+@import 'utilities/svg';
+@import 'utilities/typography';
 
 //  --  THEMES & GLOBAL SETTINGS
-@import "dialtone-globals";
-@import "themes/default";
-
-//  --  RESPONSIVE CLASSES
-#d-internals #screen-xl({
-    #d-internals-collect-xl();
-});
-#d-internals #screen-lg({
-    #d-internals-collect-lg();
-});
-#d-internals #screen-md({
-    #d-internals-collect-md();
-});
-#d-internals #screen-sm({
-    #d-internals-collect-sm();
-});
-
-//  --  CONFIG
-@import "utilities/internals";
+@import 'dialtone-globals';
+@import 'themes/default';

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

@@ -1,12 +1,12 @@
-@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";
+//@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

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

@@ -16,8 +16,8 @@
 //      This won't output anything. We need to reference the core colors and the
 //      default theme so this file can compile on it's own.
 //  ----------------------------------------------------------------------------
-@import (reference) "../dialtone-variables";
-@import (reference) "default";
+@import (reference) '../dialtone-variables';
+@import (reference) 'default';
 
 //  ============================================================================
 //  $   THEME VARIABLES
@@ -74,8 +74,8 @@
     nav__background-color--s:   @nav__background-color--s;
     nav__background-color--l:   @nav__background-color--l;
 
-    btn--inverted__bg--hover:   fade(mix(#FFF, @primary-color, 90%),25%);
-    btn--inverted--primary__bg--hover: mix(#FFF, @primary-color, 90%);
+    btn--inverted__bg--hover:   fade(mix(#fff, @primary-color, 90%), 25%);
+    btn--inverted--primary__bg--hover: mix(#fff, @primary-color, 90%);
 }
 
 //  ============================================================================

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

@@ -1,5 +1,5 @@
-@import (reference) "../variables/colors.less";
-@import (reference) "../utilities/internals.less";
+//@import (reference) '../variables/colors.less';
+//@import (reference) '../utilities/internals.less';
 
 //
 //  DIALTONE
@@ -10,7 +10,6 @@
 //  visit https://dialpad.design/utilities/borders
 //
 //  TABLE OF CONTENTS
-//  • INTERNALS/MIXINS
 //  • BACKGROUND ATTACHMENT
 //  • BACKGROUND CLIP
 //  • BACKGROUND POSITION
@@ -19,57 +18,6 @@
 //  • GRADIENTS
 //  • PATTERNS
 //
-//  ============================================================================
-//  $   MIXINS
-//  ----------------------------------------------------------------------------
-#d-internals() {
-    #gradient-classes(@color) {
-        //  COLOR STOP 1, STARTING STOP
-        .d-bgg-from-@{color},
-        .h\:d-bgg-from-@{color}:hover,
-        .f\:d-bgg-from-@{color}:focus {
-            --bgg-from-opacity: 100%;
-            --bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
-            --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
-        }
-        .f\:d-bgg-from-@{color}:focus-within {
-            --bgg-from-opacity: 100%;
-            --bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
-            --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
-        }
-        #d-internals #dark-mode('.d\:d-bgg-from-@{color}', {
-            --bgg-from-opacity: 100%;
-            --bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
-            --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
-        });
-
-        //  COLOR STOP 2, ENDING STOP
-        .d-bgg-to-@{color},
-        .h\:d-bgg-to-@{color}:hover,
-        .f\:d-bgg-to-@{color}:focus {
-            --bgg-to-opacity: 100%;
-            --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
-        }
-        .f\:d-bgg-to-@{color}:focus-within {
-            --bgg-to-opacity: 100%;
-            --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
-        }
-        #d-internals #dark-mode('.d\:d-bgg-to-@{color}', {
-            --bgg-to-opacity: 100%;
-            --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
-        });
-    }
-
-    #gradient-stops(@color) {
-        #d-internals #gradient-classes(~"@{color}-600");
-        #d-internals #gradient-classes(~"@{color}-500");
-        #d-internals #gradient-classes(~"@{color}-400");
-        #d-internals #gradient-classes(~"@{color}-300");
-        #d-internals #gradient-classes(~"@{color}-200");
-        #d-internals #gradient-classes(~"@{color}-100");
-    }
-}
-
 //  ----------------------------------------------------------------------------
 //  --  Create background stops for most colors
 #d-internals #gradient-stops(black);
@@ -99,73 +47,77 @@
 //  ============================================================================
 //  $  BACKGROUND ATTACHMENT
 //  ----------------------------------------------------------------------------
-.d-bga-scroll                   { background-attachment: scroll !important; }
-.d-bga-fixed                    { background-attachment: fixed !important; }
-.d-bga-local                    { background-attachment: local !important; }
-.d-bga-unset                    { background-attachment: unset !important; }
-
+.d-bga-scroll { background-attachment: scroll !important; }
+.d-bga-fixed { background-attachment: fixed !important; }
+.d-bga-local { background-attachment: local !important; }
+.d-bga-unset { background-attachment: unset !important; }
 
 //  ============================================================================
 //  $  BACKGROUND CLIP
 //  ----------------------------------------------------------------------------
-.d-bgc-border-box               { background-clip: border-box !important; }
-.d-bgc-padding-box              { background-clip: padding-box !important; }
-.d-bgc-content-box              { background-clip: content-box !important; }
-.d-bgc-text                     { -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
-.d-bgc-unset                    { background-clip: unset !important; }
+.d-bgc-border-box { background-clip: border-box !important; }
+.d-bgc-padding-box { background-clip: padding-box !important; }
+.d-bgc-content-box { background-clip: content-box !important; }
+
+.d-bgc-text {
+  color: transparent !important;
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+}
+.d-bgc-unset { background-clip: unset !important; }
 
 
 //  ============================================================================
 //  $  BACKGROUND POSITION
 //  ----------------------------------------------------------------------------
-.d-bgp-t                        { background-position: top !important; }
-.d-bgp-tr                       { background-position: top right !important; }
-.d-bgp-r                        { background-position: right !important; }
-.d-bgp-br                       { background-position: bottom right !important; }
-.d-bgp-b                        { background-position: bottom !important; }
-.d-bgp-bl                       { background-position: bottom left !important; }
-.d-bgp-l                        { background-position: left !important; }
-.d-bgp-tl                       { background-position: top left !important; }
-.d-bgp-center                   { background-position: center !important; }
-.d-bgp-unset                    { background-position: unset !important; }
+.d-bgp-t { background-position: top !important; }
+.d-bgp-tr { background-position: top right !important; }
+.d-bgp-r { background-position: right !important; }
+.d-bgp-br { background-position: bottom right !important; }
+.d-bgp-b { background-position: bottom !important; }
+.d-bgp-bl { background-position: bottom left !important; }
+.d-bgp-l { background-position: left !important; }
+.d-bgp-tl { background-position: top left !important; }
+.d-bgp-center { background-position: center !important; }
+.d-bgp-unset { background-position: unset !important; }
 
 
 //  ============================================================================
 //  $  BACKGROUND REPEAT
 //  ----------------------------------------------------------------------------
-.d-bgr-repeat-x                 { background-repeat: repeat-x !important; }
-.d-bgr-repeat-y                 { background-repeat: repeat-y !important; }
-.d-bgr-repeat                   { background-repeat: repeat !important; }
-.d-bgr-space                    { background-repeat: space !important; }
-.d-bgr-none                     { background-repeat: no-repeat !important; }
-.d-bgr-unset                    { background-repeat: unset !important; }
+.d-bgr-repeat-x { background-repeat: repeat-x !important; }
+.d-bgr-repeat-y { background-repeat: repeat-y !important; }
+.d-bgr-repeat { background-repeat: repeat !important; }
+.d-bgr-space { background-repeat: space !important; }
+.d-bgr-none { background-repeat: no-repeat !important; }
+.d-bgr-unset { background-repeat: unset !important; }
 
 
 //  ============================================================================
 //  $  BACKGROUND SIZE
 //  ----------------------------------------------------------------------------
-.d-bgs-contain                  { background-size: contain !important; }
-.d-bgs-cover                    { background-size: cover !important; }
-.d-bgs-var                      { background-size: var(--bgg-size, 100% 100%) !important; }
-.d-bgs-auto                     { background-size: auto !important; }
-.d-bgs-unset                    { background-size: unset !important; }
+.d-bgs-contain { background-size: contain !important; }
+.d-bgs-cover { background-size: cover !important; }
+.d-bgs-var { background-size: var(--bgg-size, 100% 100%) !important; }
+.d-bgs-auto { background-size: auto !important; }
+.d-bgs-unset { background-size: unset !important; }
 
 
 //  ============================================================================
 //  $   GRADIENTS
 //  ----------------------------------------------------------------------------
-.d-bgg-to-t         { background-image: linear-gradient(to top, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-tr        { background-image: linear-gradient(to top right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-r         { background-image: linear-gradient(to right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-br        { background-image: linear-gradient(to bottom right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-b         { background-image: linear-gradient(to bottom, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-bl        { background-image: linear-gradient(to bottom left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-l         { background-image: linear-gradient(to left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-to-tl        { background-image: linear-gradient(to top left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-radial       { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-conic        { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
-.d-bgg-none         { background-image: none !important; }
-.d-bgg-unset        { background-image: unset !important; }
+.d-bgg-to-t { background-image: linear-gradient(to top, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-tr { background-image: linear-gradient(to top right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-r { background-image: linear-gradient(to right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-br { background-image: linear-gradient(to bottom right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-b { background-image: linear-gradient(to bottom, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-bl { background-image: linear-gradient(to bottom left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-l { background-image: linear-gradient(to left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-tl { background-image: linear-gradient(to top left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-radial { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-conic { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-none { background-image: none !important; }
+.d-bgg-unset { background-image: unset !important; }
 
 
 //  ============================================================================
@@ -177,41 +129,40 @@
     padding-left: var(--su24) !important;
 
     &::after {
-        content: "";
         position: absolute;
         top: var(--su1);
         bottom: var(--su1);
         left: var(--su1);
-
         min-width: 2rem;
         min-height: 2rem;
-        border-radius: 0.3rem;
+        background-image: var(--bgg-pattern);
         background-repeat: repeat-y;
         background-position: top left;
         background-clip: content-box;
-        background-image: var(--bgg-pattern);
+        border-radius: 0.3rem;
+        content: '';
     }
 }
 
 //  --  EACH PATTERN
-.d-bgg-pattern-blob-dark              { --bgg-pattern: var(--bgg-pattern-blob-dark) !important; }
-.d-bgg-pattern-chevrons-dark          { --bgg-pattern: var(--bgg-pattern-chevrons-dark) !important; }
-.d-bgg-pattern-crosses-dark           { --bgg-pattern: var(--bgg-pattern-crosses-dark) !important; }
-.d-bgg-pattern-crosshatch-dark        { --bgg-pattern: var(--bgg-pattern-crosshatch-dark) !important; }
-.d-bgg-pattern-dot-dash-dark          { --bgg-pattern: var(--bgg-pattern-dot-dash-dark) !important; }
-.d-bgg-pattern-dots-circles-dark      { --bgg-pattern: var(--bgg-pattern-dots-circles-dark) !important; }
-.d-bgg-pattern-horz-stripes-dark      { --bgg-pattern: var(--bgg-pattern-horz-stripes-dark) !important; }
-.d-bgg-pattern-slanted-stripes-dark   { --bgg-pattern: var(--bgg-pattern-slanted-stripes-dark) !important; }
-.d-bgg-pattern-steps-dark             { --bgg-pattern: var(--bgg-pattern-steps-dark) !important; }
-.d-bgg-pattern-stripe-dark            { --bgg-pattern: var(--bgg-pattern-stripe-dark) !important; }
-
-.d-bgg-pattern-blob-light             { --bgg-pattern: var(--bgg-pattern-blob-light) !important; }
-.d-bgg-pattern-chevrons-light         { --bgg-pattern: var(--bgg-pattern-chevrons-light) !important; }
-.d-bgg-pattern-crosses-light          { --bgg-pattern: var(--bgg-pattern-crosses-light) !important; }
-.d-bgg-pattern-crosshatch-light       { --bgg-pattern: var(--bgg-pattern-crosshatch-light) !important; }
-.d-bgg-pattern-dot-dash-light         { --bgg-pattern: var(--bgg-pattern-dot-dash-light) !important; }
-.d-bgg-pattern-dots-circles-light     { --bgg-pattern: var(--bgg-pattern-dots-circles-light) !important; }
-.d-bgg-pattern-horz-stripes-light     { --bgg-pattern: var(--bgg-pattern-horz-stripes-light) !important; }
-.d-bgg-pattern-slanted-stripes-light  { --bgg-pattern: var(--bgg-pattern-slanted-stripes-light) !important; }
-.d-bgg-pattern-steps-light            { --bgg-pattern: var(--bgg-pattern-steps-light) !important; }
-.d-bgg-pattern-stripe-light           { --bgg-pattern: var(--bgg-pattern-stripe-light) !important; }
+.d-bgg-pattern-blob-dark { --bgg-pattern: var(--bgg-pattern-blob-dark) !important; }
+.d-bgg-pattern-chevrons-dark { --bgg-pattern: var(--bgg-pattern-chevrons-dark) !important; }
+.d-bgg-pattern-crosses-dark { --bgg-pattern: var(--bgg-pattern-crosses-dark) !important; }
+.d-bgg-pattern-crosshatch-dark { --bgg-pattern: var(--bgg-pattern-crosshatch-dark) !important; }
+.d-bgg-pattern-dot-dash-dark { --bgg-pattern: var(--bgg-pattern-dot-dash-dark) !important; }
+.d-bgg-pattern-dots-circles-dark { --bgg-pattern: var(--bgg-pattern-dots-circles-dark) !important; }
+.d-bgg-pattern-horz-stripes-dark { --bgg-pattern: var(--bgg-pattern-horz-stripes-dark) !important; }
+.d-bgg-pattern-slanted-stripes-dark { --bgg-pattern: var(--bgg-pattern-slanted-stripes-dark) !important; }
+.d-bgg-pattern-steps-dark { --bgg-pattern: var(--bgg-pattern-steps-dark) !important; }
+.d-bgg-pattern-stripe-dark { --bgg-pattern: var(--bgg-pattern-stripe-dark) !important; }
+
+.d-bgg-pattern-blob-light { --bgg-pattern: var(--bgg-pattern-blob-light) !important; }
+.d-bgg-pattern-chevrons-light { --bgg-pattern: var(--bgg-pattern-chevrons-light) !important; }
+.d-bgg-pattern-crosses-light { --bgg-pattern: var(--bgg-pattern-crosses-light) !important; }
+.d-bgg-pattern-crosshatch-light { --bgg-pattern: var(--bgg-pattern-crosshatch-light) !important; }
+.d-bgg-pattern-dot-dash-light { --bgg-pattern: var(--bgg-pattern-dot-dash-light) !important; }
+.d-bgg-pattern-dots-circles-light { --bgg-pattern: var(--bgg-pattern-dots-circles-light) !important; }
+.d-bgg-pattern-horz-stripes-light { --bgg-pattern: var(--bgg-pattern-horz-stripes-light) !important; }
+.d-bgg-pattern-slanted-stripes-light { --bgg-pattern: var(--bgg-pattern-slanted-stripes-light) !important; }
+.d-bgg-pattern-steps-light { --bgg-pattern: var(--bgg-pattern-steps-light) !important; }
+.d-bgg-pattern-stripe-light { --bgg-pattern: var(--bgg-pattern-stripe-light) !important; }