@dialpad/dialtone 6.8.1 → 6.12.0

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+# [6.12.0](https://github.com/dialpad/dialtone/compare/v6.11.0...v6.12.0) (2022-01-13)
+
+
+### Features
+
+* add documentation for new skeleton component ([#521](https://github.com/dialpad/dialtone/issues/521)) ([574f976](https://github.com/dialpad/dialtone/commit/574f97679619e730050d5a75cadb4fbb020e5af8))
+* implement focus visible ([#524](https://github.com/dialpad/dialtone/issues/524)) ([20938ee](https://github.com/dialpad/dialtone/commit/20938ee94efed2a8ea8c7632a631e2f41ff9a1da))
+* implement focus visible polyfill ([#528](https://github.com/dialpad/dialtone/issues/528)) ([0c3a661](https://github.com/dialpad/dialtone/commit/0c3a661eb2748e03a2a2bfcf75642e7b241bd8bf))
+
+# [6.11.0](https://github.com/dialpad/dialtone/compare/v6.10.0...v6.11.0) (2022-01-04)
+
+
+### Bug Fixes
+
+* generate missing hover/focus classes ([#522](https://github.com/dialpad/dialtone/issues/522)) ([0cc761b](https://github.com/dialpad/dialtone/commit/0cc761b5b6ee86746dfbd54e48400652b819348c))
+* responsive variations not working ([#526](https://github.com/dialpad/dialtone/issues/526)) ([c29d53d](https://github.com/dialpad/dialtone/commit/c29d53dc1c3c89a839d3c9724380f5b2e27e0cc2))
+* svg sizes showing up as NaN in svg utility class page ([#525](https://github.com/dialpad/dialtone/issues/525)) ([67c2b26](https://github.com/dialpad/dialtone/commit/67c2b26704e0bfe1209f578cfcec222645cfc549))
+
+
+### Features
+
+* add file upload spot illustration ([#527](https://github.com/dialpad/dialtone/issues/527)) ([e1533e8](https://github.com/dialpad/dialtone/commit/e1533e856f570688aa5ffc3dd37ae05c3a842987))
+
+# [6.10.0](https://github.com/dialpad/dialtone/compare/v6.9.0...v6.10.0) (2021-12-15)
+
+
+### Bug Fixes
+
+* add important to padding ([#518](https://github.com/dialpad/dialtone/issues/518)) ([2a7b0a5](https://github.com/dialpad/dialtone/commit/2a7b0a5d0ff700f9bf24369701f0dd4c93988ec3))
+
+
+### Features
+
+* **button:** add muted styles ([#516](https://github.com/dialpad/dialtone/issues/516)) ([5bea155](https://github.com/dialpad/dialtone/commit/5bea155057620865174e596c539660185029f499))
+
+# [6.9.0](https://github.com/dialpad/dialtone/compare/v6.8.1...v6.9.0) (2021-12-07)
+
+
+### Features
+
+* add foundational a11y documentation ([#512](https://github.com/dialpad/dialtone/issues/512)) ([fd7d771](https://github.com/dialpad/dialtone/commit/fd7d77197576ad1506bd1dda71051aa841bcb412))
+* add responsive variations ([#474](https://github.com/dialpad/dialtone/issues/474)) ([7d7aaa4](https://github.com/dialpad/dialtone/commit/7d7aaa4b9f47bfdf48162cfa0013cb8be33ded67)), closes [#478](https://github.com/dialpad/dialtone/issues/478) [#479](https://github.com/dialpad/dialtone/issues/479) [#480](https://github.com/dialpad/dialtone/issues/480) [#486](https://github.com/dialpad/dialtone/issues/486) [#489](https://github.com/dialpad/dialtone/issues/489)
+* add windows logo as system icon ([#517](https://github.com/dialpad/dialtone/issues/517)) ([3ee2445](https://github.com/dialpad/dialtone/commit/3ee24455842b379328409a1ca30399174be46402))
+* button group css classes ([#514](https://github.com/dialpad/dialtone/issues/514)) ([edb75d7](https://github.com/dialpad/dialtone/commit/edb75d7bb672223d4faaeae5e59b1e77d7644191))
+
 ## [6.8.1](https://github.com/dialpad/dialtone/compare/v6.8.0...v6.8.1) (2021-11-23)
 
 

package/lib/build/less/components/banner.less

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE

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

@@ -1,4 +1,4 @@
-@import (reference) '../variables/icons.less';
+//@import (reference) '../variables/icons.less';
 
 //
 //  DIALTONE
@@ -58,9 +58,9 @@
         --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
     }
 
-    &:focus {
-        outline: none;
-        box-shadow: var(--bs-focus-ring);
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--bs-focus-ring);
     }
 
     &[disabled] {
@@ -192,7 +192,7 @@
         --button--bgc: var(--black-100);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-circle);
     }
 
@@ -260,14 +260,14 @@
 //  $$  MUTED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--muted {
-    --button--fc: var(--black-700);
+    --button--fc: var(--muted-color);
 
     &:hover {
-      --button--fc: var(--black-800);
-      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 10%);
+      --button--fc: var(--muted-color-hover);
+      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 7.5%);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-muted);
     }
 
@@ -286,7 +286,7 @@
         --button--fc: var(--error-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-error);
     }
 
@@ -317,7 +317,7 @@
         --button--bgc: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: var(--bs-focus-ring-inverted);
     }
 
@@ -363,13 +363,12 @@
     background-color: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
 
     &:hover,
-    &:focus,
     &:active {
         color: hsla(var(--white-hsl) ~' / ' 90%);
         background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su1) var(--white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~' / ' 90%);
     }
 
@@ -443,3 +442,22 @@
         content: '';
     }
 }
+
+//  ============================================================================
+//  $   BUTTON GROUP
+//  ----------------------------------------------------------------------------
+.d-btn-group {
+    display: flex;
+
+    &.d-btn-group--start {
+        justify-content: start;
+    }
+
+    &.d-btn-group--end {
+        justify-content: end;
+    }
+
+    &.d-btn-group--space-between {
+        justify-content: space-between;
+    }
+}

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

@@ -1,4 +1,4 @@
-@import (reference) '../variables/typography.less';
+//@import (reference) '../variables/typography.less';
 
 //
 //  DIALTONE

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

@@ -1,5 +1,5 @@
-@import (reference) '../variables/icons.less';
-@import (reference) '../variables/sizes.less';
+//@import (reference) '../variables/icons.less';
+//@import (reference) '../variables/sizes.less';
 
 //
 //  DIALTONE

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

@@ -40,7 +40,7 @@
         cursor: pointer;
     }
 
-    &:focus {
+    &:focus-visible {
         border-radius: 4px;
         outline: none;
         box-shadow: 0 0 0 var(--su2) var(--focus-ring);
@@ -60,7 +60,7 @@
         color: var(--fc-warning-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-warning);
     }
 }
@@ -74,7 +74,7 @@
         color: var(--error-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-error);
     }
 }
@@ -88,7 +88,7 @@
         color: var(--success-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-success);
     }
 }
@@ -102,7 +102,7 @@
         color: var(--muted-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-muted);
     }
 }
@@ -135,7 +135,7 @@
         color: var(--inverted-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: 0 0 0 var(--su2) var(--focus-ring-inverted);
     }
 }

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

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE

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

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE

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

@@ -52,12 +52,12 @@
             display: none;
         }
 
-        &:focus,
-        &:checked:focus {
-            --check-radio--bc: var(--check-radio--color);
+        &:focus-visible,
+        &:checked:focus-visible {
+          --check-radio--bc: var(--check-radio--color);
 
-            outline: 0;
-            box-shadow: var(--bs-focus-ring);
+          outline: 0;
+          box-shadow: var(--bs-focus-ring);
         }
 
         &:checked {
@@ -149,8 +149,8 @@
         background-size: contain;
         border-radius: var(--br2);
 
-        &:focus,
-        &:checked:focus {
+        &:focus-visible,
+        &:checked:focus-visible {
             border-radius: var(--br2);
         }
 
@@ -209,8 +209,8 @@
     --check-radio--color: var(--warning-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
+    &:focus-visible,
+    &:checked:focus-visible {
         box-shadow: var(--bs-focus-ring-warning);
     }
 }
@@ -219,8 +219,8 @@
     --check-radio--color: var(--error-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
+    &:focus-visible,
+    &:checked:focus-visible {
         box-shadow: var(--bs-focus-ring-error);
     }
 }
@@ -229,8 +229,8 @@
     --check-radio--color: var(--success-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
+    &:focus-visible,
+    &:checked:focus-visible {
         box-shadow: var(--bs-focus-ring-success);
     }
 }
@@ -251,9 +251,9 @@
             --check-radio--bgc: var(--black-075);
         }
 
-        &:focus,
-        &:checked:focus {
-            box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
+        &:focus-visible,
+        &:checked:focus-visible {
+          box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--su2) var(--white);
         }
 
         &:checked {
@@ -279,9 +279,9 @@
     --check-radio--color: var(--warning-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
-        box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
+    &:focus-visible,
+    &:checked:focus-visible {
+      box-shadow: var(--bs-focus-ring-warning), inset 0 0 0 var(--su2) var(--white);
     }
 }
 
@@ -289,9 +289,9 @@
     --check-radio--color: var(--error-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
-        box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
+    &:focus-visible,
+    &:checked:focus-visible {
+      box-shadow: var(--bs-focus-ring-error), inset 0 0 0 var(--su2) var(--white);
     }
 }
 
@@ -299,8 +299,8 @@
     --check-radio--color: var(--success-color);
     --check-radio--bc: var(--check-radio--color);
 
-    &:focus,
-    &:checked:focus {
-        box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
+    &:focus-visible,
+    &:checked:focus-visible {
+      box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
     }
 }

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

@@ -1,6 +1,6 @@
-@import (reference) '../variables/sizes.less';
-@import (reference) '../variables/icons.less';
-@import (reference) 'input.less';
+//@import (reference) '../variables/sizes.less';
+//@import (reference) '../variables/icons.less';
+//@import (reference) 'input.less';
 
 //
 //  DIALTONE
@@ -100,14 +100,14 @@
 //  ----------------------------------------------------------------------------
 .d-select__input {
   height: 100%; // Fill the height of its parent
-  padding: 0.7rem 2em 0.7rem 0.8rem;
+  padding: 0.7rem 2em 0.7rem 0.8rem !important;
   color: var(--select--fc);
   background-color: var(--select--bgc);
   border-color: var(--select--bc);
   //  [1] Reset the appearance
   -webkit-appearance: none;
-      -moz-appearance: none;
-          appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 
   //  [2] Update the styles
   .d-input();
@@ -148,7 +148,7 @@
   &:focus {
     --select--bc: var(--success-color);
 
-    box-shadow: var(--bs-focus-ring-success);
+    box-shadow: var(--bs-focus-ring-success) !important;
   }
 }
 
@@ -158,7 +158,7 @@
   &:focus {
     --select--bc: var(--error-color);
 
-    box-shadow: var(--bs-focus-ring-error);
+    box-shadow: var(--bs-focus-ring-error) !important;
   }
 }
 
@@ -168,7 +168,7 @@
   &:focus {
     --select--bc: var(--warning-color);
 
-    box-shadow: var(--bs-focus-ring-warning);
+    box-shadow: var(--bs-focus-ring-warning) !important;
   }
 }
 

package/lib/build/less/components/skeleton.less

@@ -0,0 +1,43 @@
+//
+//  DIALTONE
+//  COMPONENTS: SKELETON
+//
+//  These are the styles for skeleton component.
+//  The --placeholder-from-color and --placeholder-to-color custom properties can be set on the parent class of the
+//  placeholder to control the animation colors.
+//  For further documentation of these styles, please visit https://dialpad.design/components/skeleton
+
+//  ============================================================================
+//  @   SKELETON CONTAINER
+//  ----------------------------------------------------------------------------
+.skeleton-placeholder {
+  display: flex;
+  width: 100%;
+  background: var(--placeholder-from-color, @black-075);
+  animation-duration: 1000ms;
+  fill: var(--placeholder-from-color, @black-075);
+  stroke: none;
+
+  &--animate {
+    animation-name: placeholder-throb;
+    animation-iteration-count: infinite;
+  }
+}
+
+// the animation is used by the skeleton component
+@keyframes placeholder-throb {
+  10% {
+    background: var(--placeholder-from-color, @black-075);
+    fill: var(--placeholder-from-color, @black-075);
+  }
+
+  50% {
+    background: var(--placeholder-to-color, @black-050);
+    fill: var(--placeholder-to-color, @black-050);
+  }
+
+  90% {
+    background: var(--placeholder-from-color, @black-075);
+    fill: var(--placeholder-from-color, @black-075);
+  }
+}

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

@@ -1,4 +1,4 @@
-@import (reference) '../utilities/typography.less';
+//@import (reference) '../utilities/typography.less';
 
 //
 //  DIALTONE

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

@@ -82,7 +82,7 @@
         content: '';
     }
 
-    &:focus {
+    &:focus-visible {
         outline: none;
         box-shadow: 0 0 0 var(--su2) var(--tab--oc);
     }

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

@@ -1,5 +1,5 @@
-@import (reference) '../utilities/spacing.less';
-@import (reference) '../utilities/effects.less';
+//@import (reference) '../utilities/spacing.less';
+//@import (reference) '../utilities/effects.less';
 
 //
 //  DIALTONE

package/lib/build/less/components/tooltip.less

@@ -100,8 +100,8 @@
         &:extend(.d-tooltip--hide);
     }
 
-    &:focus-visible,
-    &:hover {
+    &:hover,
+    &:focus-visible {
         .d-tooltip {
             &:extend(.d-tooltip--show);
         }

package/lib/build/less/dialtone-globals.less

@@ -56,3 +56,13 @@ body {
 .d-svg-primary--fill {
     fill: var(--primary-color);
 }
+
+//  ============================================================================
+//  @   FOCUS VISIBLE
+//  ----------------------------------------------------------------------------
+// This will hide the focus indicator if the element receives focus via the mouse,
+// but it will still show up on keyboard focus.
+//
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}

package/lib/build/less/dialtone.less

@@ -25,10 +25,14 @@
 @import 'components/notice';
 @import 'components/radio-checkbox';
 @import 'components/selects';
+@import 'components/skeleton';
 @import 'components/table';
 @import 'components/tabs';
 @import 'components/tooltip';
 
+//  --  CONFIG
+@import 'utilities/internals';
+
 //  --  UTILITIES
 @import 'utilities/backgrounds';
 @import 'utilities/borders';
@@ -38,32 +42,11 @@
 @import 'utilities/grid';
 @import 'utilities/interactivity';
 @import 'utilities/layout';
-@import 'utilities/responsive';
 @import 'utilities/sizing';
 @import 'utilities/spacing';
 @import 'utilities/svg';
 @import 'utilities/typography';
 
-
 //  --  THEMES & GLOBAL SETTINGS
 @import 'dialtone-globals';
 @import 'themes/default';
-
-//stylelint-disable
-//  --  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();
-});
-//stylelint-enable
-
-//  --  CONFIG
-@import 'utilities/internals';

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/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);
@@ -169,7 +117,9 @@
 .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-internals #generate-hover-focus(d-bgg-none, {.d-bgg-none();});
 .d-bgg-unset { background-image: unset !important; }
+#d-internals #generate-hover-focus(d-bgg-unset, {.d-bgg-unset();});
 
 
 //  ============================================================================

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

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