@dialpad/dialtone 6.6.1 → 6.9.0

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+# [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)
+
+
+### Bug Fixes
+
+* rename thumb down and thumb up to filename conventions ([9a22ad0](https://github.com/dialpad/dialtone/commit/9a22ad01b4b0bda24f7cd76a4465a76fce1ebbc9))
+
+# [6.8.0](https://github.com/dialpad/dialtone/compare/v6.7.0...v6.8.0) (2021-11-19)
+
+
+### Bug Fixes
+
+* allow highlighting within code wells on doc site ([#504](https://github.com/dialpad/dialtone/issues/504)) ([6bddff7](https://github.com/dialpad/dialtone/commit/6bddff7c2de5c8f7e70d063fbde54393601be71e))
+* correct icon size documentation to match implementation ([#506](https://github.com/dialpad/dialtone/issues/506)) ([ae4d871](https://github.com/dialpad/dialtone/commit/ae4d871bf4d0e2e0e21a8eac775cbf142e5f1506))
+* remove fill from IconRaiseHand because it is colored by currentColor ([#501](https://github.com/dialpad/dialtone/issues/501)) ([af5ad68](https://github.com/dialpad/dialtone/commit/af5ad683de8c26923d31bf4027dd4d209062815a))
+
+
+### Features
+
+* add less/css linter to Dialtone ([#490](https://github.com/dialpad/dialtone/issues/490)) ([1c563d9](https://github.com/dialpad/dialtone/commit/1c563d9341eac189f56c9106239248a1cbde0b57))
+* add spot illustration support into dialtone ([#502](https://github.com/dialpad/dialtone/issues/502)) ([6893861](https://github.com/dialpad/dialtone/commit/6893861105fbb3e7019b68e82515cfeb70c66c85))
+
+# [6.7.0](https://github.com/dialpad/dialtone/compare/v6.6.1...v6.7.0) (2021-11-11)
+
+
+### Bug Fixes
+
+* bad syntax in vue files when style tags are used in SVG ([#498](https://github.com/dialpad/dialtone/issues/498)) ([9a7297e](https://github.com/dialpad/dialtone/commit/9a7297ede72f7b7b1778790a6bad958acf310d15))
+
+
+### Features
+
+* add SVGs for thumbs up and down including update to json file ([#497](https://github.com/dialpad/dialtone/issues/497)) ([88ec960](https://github.com/dialpad/dialtone/commit/88ec960ebca4b77e2fe8836b62f01d393c4d6f3e))
+
 ## [6.6.1](https://github.com/dialpad/dialtone/compare/v6.6.0...v6.6.1) (2021-11-09)
 
 

package/lib/build/less/components/avatar.less

@@ -18,23 +18,21 @@
 .d-avatar {
   //  Component CSS Vars
   //  ------------------------------------------------------------------------
-  --avatar--fc:           var(--fc-lighter);
-  --avatar--bgc:          var(--fc-dark);
-  --avatar--size:         var(--su12);
+  --avatar--fc: var(--fc-lighter);
+  --avatar--bgc: var(--fc-dark);
+  --avatar--size: var(--su12);
 
+  width: var(--avatar--size);
   height: var(--avatar--size);
-  width:  var(--avatar--size);
-
-  border-radius: 50%;
-
-  color:            var(--avatar--fc);
+  color: var(--avatar--fc);
   background-color: var(--avatar--bgc);
+  border-radius: 50%;
 
   img {
-    height:        var(--avatar--size);
-    width:         var(--avatar--size);
+    width: var(--avatar--size);
+    height: var(--avatar--size);
+    object-fit: cover;
     border-radius: inherit;
-    object-fit:    cover;
   }
 
   //  --  SIZES
@@ -54,83 +52,98 @@
   //  --  COLORS
   //  ------------------------------------------------------------------------
   &.d-avatar--purple-800 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--purple-800);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--purple-800);
   }
+
   &.d-avatar--purple-700 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--purple-700);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--purple-700);
   }
+
   &.d-avatar--purple-600 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--purple-600);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--purple-600);
   }
+
   &.d-avatar--purple-500 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--purple-500);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--purple-500);
   }
+
   &.d-avatar--purple-400 {
-      --avatar--fc:    var(--purple-800);
-      --avatar--bgc:   var(--purple-400);
+      --avatar--fc: var(--purple-800);
+      --avatar--bgc: var(--purple-400);
   }
+
   &.d-avatar--purple-300 {
-      --avatar--fc:    var(--purple-800);
-      --avatar--bgc:   var(--purple-300);
+      --avatar--fc: var(--purple-800);
+      --avatar--bgc: var(--purple-300);
   }
+
   &.d-avatar--purple-200 {
-      --avatar--fc:    var(--purple-800);
-      --avatar--bgc:   var(--purple-200);
+      --avatar--fc: var(--purple-800);
+      --avatar--bgc: var(--purple-200);
   }
 
   &.d-avatar--orange-500 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--orange-500);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--orange-500);
   }
+
   &.d-avatar--orange-400 {
-      --avatar--fc:    var(--orange-600);
-      --avatar--bgc:   var(--orange-400);
+      --avatar--fc: var(--orange-600);
+      --avatar--bgc: var(--orange-400);
   }
+
   &.d-avatar--orange-300 {
-      --avatar--fc:    var(--orange-600);
-      --avatar--bgc:   var(--orange-300);
+      --avatar--fc: var(--orange-600);
+      --avatar--bgc: var(--orange-300);
   }
+
   &.d-avatar--orange-200 {
-      --avatar--fc:    var(--orange-600);
-      --avatar--bgc:   var(--orange-200);
+      --avatar--fc: var(--orange-600);
+      --avatar--bgc: var(--orange-200);
   }
 
   &.d-avatar--pink-600 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--pink-600);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--pink-600);
   }
+
   &.d-avatar--pink-500 {
-      --avatar--fc:    var(--white);
-      --avatar--bgc:   var(--pink-500);
+      --avatar--fc: var(--white);
+      --avatar--bgc: var(--pink-500);
   }
+
   &.d-avatar--pink-400 {
-      --avatar--fc:    var(--pink-700);
-      --avatar--bgc:   var(--pink-400);
+      --avatar--fc: var(--pink-700);
+      --avatar--bgc: var(--pink-400);
   }
+
   &.d-avatar--pink-300 {
-      --avatar--fc:    var(--pink-700);
-      --avatar--bgc:   var(--pink-300);
+      --avatar--fc: var(--pink-700);
+      --avatar--bgc: var(--pink-300);
   }
 
   &.d-avatar--yellow-500 {
-      --avatar--fc:    var(--yellow-600);
-      --avatar--bgc:   var(--yellow-500);
+      --avatar--fc: var(--yellow-600);
+      --avatar--bgc: var(--yellow-500);
   }
+
   &.d-avatar--yellow-400 {
-      --avatar--fc:    var(--yellow-600);
-      --avatar--bgc:   var(--yellow-400);
+      --avatar--fc: var(--yellow-600);
+      --avatar--bgc: var(--yellow-400);
   }
+
   &.d-avatar--yellow-300 {
-      --avatar--fc:    var(--yellow-600);
-      --avatar--bgc:   var(--yellow-300);
+      --avatar--fc: var(--yellow-600);
+      --avatar--bgc: var(--yellow-300);
   }
+
   &.d-avatar--yellow-200 {
-      --avatar--fc:    var(--yellow-600);
-      --avatar--bgc:   var(--yellow-200);
+      --avatar--fc: var(--yellow-600);
+      --avatar--bgc: var(--yellow-200);
   }
 }
 
@@ -141,13 +154,12 @@
 //  $$  INITIALS
 //  ----------------------------------------------------------------------------
 .d-avatar--initials {
-  font-family: inherit;
-  font-weight: var(--fw-bold);
-  text-align: center;
-
   display: flex;
   align-items: center;
   justify-content: center;
+  font-weight: var(--fw-bold);
+  font-family: inherit;
+  text-align: center;
 
   //  --  SIZES
   //  ------------------------------------------------------------------------
@@ -175,22 +187,22 @@
   //  ------------------------------------------------------------------------
   &.d-avatar--sm {
     .d-svg {
+      width: var(--su16);
       height: var(--su16);
-      width:  var(--su16);
     }
   }
 
   &.d-avatar--md {
     .d-svg {
+      width: var(--su24);
       height: var(--su24);
-      width:  var(--su24);
     }
   }
 
   &.d-avatar--lg {
     .d-svg {
+      width: var(--su32);
       height: var(--su32);
-      width:  var(--su32);
     }
   }
 }

package/lib/build/less/components/badge.less

@@ -15,20 +15,18 @@
 //  ----------------------------------------------------------------------------
 .d-badge {
   //  Component CSS Vars
-  --badge--fc:           var(--fc-dark);
-  --badge--bgc:          var(--black-050);
+  --badge--fc: var(--fc-dark);
+  --badge--bgc: var(--black-050);
 
   display: inline-block;
   padding: var(--su2) var(--su6) var(--su1);
-  border-radius: var(--su4);
-
-  background-color: var(--badge--bgc);
-
+  color: var(--badge--fc);
+  font-weight: bold;
   font-size: var(--fs10);
   line-height: var(--lh6);
-  font-weight: bold;
   text-transform: uppercase;
-  color: var(--badge--fc);
+  background-color: var(--badge--bgc);
+  border-radius: var(--su4);
 }
 
 
@@ -36,50 +34,63 @@
 //  $   STYLE VARIATIONS
 //  ----------------------------------------------------------------------------
 .d-badge--white {
-  --badge--bgc:          var(--white);
+  --badge--bgc: var(--white);
 }
+
 .d-badge--black-700 {
-  --badge--fc:           var(--white);
-  --badge--bgc:          var(--black-700);
+  --badge--fc: var(--white);
+  --badge--bgc: var(--black-700);
 }
+
 .d-badge--purple-100 {
-  --badge--bgc:          var(--purple-100);
+  --badge--bgc: var(--purple-100);
 }
+
 .d-badge--purple-300 {
-  --badge--bgc:          var(--purple-300);
+  --badge--bgc: var(--purple-300);
 }
+
 .d-badge--purple-500 {
-  --badge--bgc:          var(--purple-500);
-  --badge--fc:           var(--white);
+  --badge--bgc: var(--purple-500);
+  --badge--fc: var(--white);
 }
+
 .d-badge--purple-700 {
-  --badge--fc:           var(--white);
-  --badge--bgc:          var(--purple-700);
+  --badge--fc: var(--white);
+  --badge--bgc: var(--purple-700);
 }
+
 .d-badge--orange-400 {
-  --badge--bgc:          var(--orange-400);
+  --badge--bgc: var(--orange-400);
 }
+
 .d-badge--pink-300 {
-  --badge--bgc:          var(--pink-300);
+  --badge--bgc: var(--pink-300);
 }
+
 .d-badge--pink-500 {
-  --badge--bgc:          var(--pink-500);
+  --badge--bgc: var(--pink-500);
 }
+
 .d-badge--pink-600 {
-  --badge--fc:           var(--white);
-  --badge--bgc:          var(--pink-600);
+  --badge--fc: var(--white);
+  --badge--bgc: var(--pink-600);
 }
+
 .d-badge--pink-700 {
-  --badge--fc:           var(--white);
-  --badge--bgc:          var(--pink-700);
+  --badge--fc: var(--white);
+  --badge--bgc: var(--pink-700);
 }
+
 .d-badge--yellow-300 {
-  --badge--bgc:          var(--yellow-300);
+  --badge--bgc: var(--yellow-300);
 }
+
 .d-badge--green-400 {
-  --badge--bgc:          var(--green-400);
+  --badge--bgc: var(--green-400);
 }
+
 .d-badge--red-500 {
-  --badge--fc:           var(--white);
-  --badge--bgc:          var(--red-500);
+  --badge--fc: var(--white);
+  --badge--bgc: var(--red-500);
 }

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

@@ -1,4 +1,4 @@
-@import (reference) "../utilities/spacing.less";
+//@import (reference) '../utilities/spacing.less';
 
 //
 //  DIALTONE
@@ -15,62 +15,59 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner--bgc:          var(--black-025);
-    --banner--fc:           var(--fc-dark);
+    --banner--bgc: var(--black-025);
+    --banner--fc: var(--fc-dark);
 
-    display: flex;
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     z-index: var(--zi-navigation-fixed);
+    display: flex;
+    box-sizing: border-box;
     width: 100%;
     min-height: var(--su48);
-
-    box-sizing: border-box;
-    box-shadow: none;
-    border-radius: 0;
-
     color: var(--banner--fc);
-    background-color: var(--banner--bgc);
-
     font-size: var(--fs14);
     line-height: var(--lh6);
+    background-color: var(--banner--bgc);
+    border-radius: 0;
+    box-shadow: none;
 
     // If you want to hide and reveal the banner
-    &[aria-hidden="true"] {
+    &[aria-hidden='true'] {
         --topbar-height: var(--sun64);
+
         visibility: hidden;
         opacity: 0;
     }
-    &[aria-hidden="false"] {
+
+    &[aria-hidden='false'] {
         visibility: visible;
         opacity: 1;
     }
 
     //  If you want to put the banner above the topbar
     &.d-banner--pinned {
-        z-index: calc(~"var(--zi-navigation-fixed) + 1");
-        transform: translate3d(0,0,0);
+        z-index: calc(~'var(--zi-navigation-fixed) + 1');
+        transform: translate3d(0, 0, 0);
     }
 }
 
 .d-banner--transform {
-    transform: translate3d(0,var(--topbar-height),0);
+    transform: translate3d(0, var(--topbar-height), 0);
 }
 
 //  ============================================================================
 //  $   CONTENT CONTAINER
 //  ----------------------------------------------------------------------------
 .d-banner__dialog {
+    position: relative;
     display: flex;
     align-items: center;
-    position: relative;
-
     width: 100%;
-    min-height: 100%;
     max-width: 128rem;
-
+    min-height: 100%;
     margin: 0 auto;
     padding: var(--su8);
 
@@ -88,52 +85,52 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-banner.d-banner--important {
-    --banner--bgc:          var(--black-800);
-    --banner--fc:           var(--black-025);
+    --banner--bgc: var(--black-800);
+    --banner--fc: var(--black-025);
 }
 
 //  $$  ERROR
 //  ----------------------------------------------------------------------------
 .d-banner--error {
-    --banner--bgc:          var(--red-100);
-    --banner--fc:           var(--red-700);
+    --banner--bgc: var(--red-100);
+    --banner--fc: var(--red-700);
 
     &.d-banner--important {
-        --banner--bgc:          var(--red-500);
-        --banner--fc:           var(--white);
+        --banner--bgc: var(--red-500);
+        --banner--fc: var(--white);
     }
 }
 
 //  $$  INFO
 //  ----------------------------------------------------------------------------
 .d-banner--info {
-    --banner--bgc:          var(--purple-100);
+    --banner--bgc: var(--purple-100);
 
     &.d-banner--important {
-        --banner--bgc:          var(--purple-500);
-        --banner--fc:           var(--white);
+        --banner--bgc: var(--purple-500);
+        --banner--fc: var(--white);
     }
 }
 
 //  $$  SUCCESS
 //  ----------------------------------------------------------------------------
 .d-banner--success {
-    --banner--bgc:          var(--green-100);
-    --banner--fc:           var(--green-700);
+    --banner--bgc: var(--green-100);
+    --banner--fc: var(--green-700);
 
     &.d-banner--important {
-        --banner--bgc:          var(--green-300);
-        --banner--fc:           var(--green-700);
+        --banner--bgc: var(--green-300);
+        --banner--fc: var(--green-700);
     }
 }
 
 //  $$  WARNING
 //  ----------------------------------------------------------------------------
 .d-banner--warning {
-    --banner--bgc:          var(--yellow-100);
+    --banner--bgc: var(--yellow-100);
 
     &.d-banner--important {
-        --banner--bgc:          var(--yellow-400);
-        --banner--fc:           var(--fc-dark);
+        --banner--bgc: var(--yellow-400);
+        --banner--fc: var(--fc-dark);
     }
 }

package/lib/build/less/components/breadcrumbs.less

@@ -14,16 +14,15 @@
 //  $  WRAPPER
 //  ----------------------------------------------------------------------------
 .d-breadcrumbs > ol {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     font-size: var(--fs14);
     line-height: var(--lh6);
+    list-style: none;
 }
 
 //  ============================================================================
@@ -42,12 +41,12 @@
         &:not(:last-of-type) {
             margin-right: var(--su12);
 
-            &:before {
+            &::before {
                 position: absolute;
                 right: var(--sun12);
                 margin-top: var(--su1);
                 color: var(--muted-color);
-                content: "/";
+                content: '/';
             }
         }
     }
@@ -65,7 +64,7 @@
 //  ----------------------------------------------------------------------------
 .d-breadcrumbs.d-breadcrumbs--inverted {
     //  --  ITEM
-    .d-breadcrumbs__item:not(:last-of-type):before {
+    .d-breadcrumbs__item:not(:last-of-type)::before {
         color: var(--inverted-color);
     }