@dialpad/dialtone 6.11.0 → 6.12.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [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)
 
 

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

@@ -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);
     }
 
@@ -267,7 +267,7 @@
       --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%);
     }
 

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/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

@@ -106,8 +106,8 @@
   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/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/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,6 +25,7 @@
 @import 'components/notice';
 @import 'components/radio-checkbox';
 @import 'components/selects';
+@import 'components/skeleton';
 @import 'components/table';
 @import 'components/tabs';
 @import 'components/tooltip';

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

@@ -308,7 +308,7 @@
     '.d-gr',
     { .template(@value) { grid-row: span @value ~' / ' span @value !important; } },
     1 2 3 4 5 6 7 8 9 10 11 12
-);;
+);
 
 .d-gr-full { grid-row: 1 ~' / ' -1 !important; }
 

package/lib/build/less/utilities/internals.less

@@ -52,6 +52,10 @@
         --fco: 100%;
         color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
       }
+      .fv\:d-fc-@{color-name}:focus-visible {
+        --fco: 100%;
+        color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
+      }
       #d-internals #dark-mode('.d\:d-fc-@{color-name}', {
         --fco: 100%;
         color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
@@ -69,6 +73,10 @@
         --bco: 100%;
         border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
       }
+      .fv\:d-bc-@{color-name}:focus-visible {
+        --bco: 100%;
+        border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
+      }
       #d-internals #dark-mode('.d\:d-bc-@{color-name}', {
         --bco: 100%;
         border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
@@ -95,6 +103,10 @@
         --bgo: 100%;
         background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
       }
+      .fv\:d-bgc-@{color-name}:focus-visible {
+        --bgo: 100%;
+        background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
+      }
       #d-internals #dark-mode('.d\:d-bgc-@{color-name}', {
         --bgo: 100%;
         background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
@@ -141,6 +153,9 @@
       .f\:@{className}:focus-within {
         @mixin();
       }
+      .fv\:@{className}:focus-visible {
+        @mixin();
+      }
     }
 
     //  ========================================================================
@@ -161,6 +176,9 @@
       .f\:d-fco@{opacity}:focus-within {
         --fco: ~'@{opacity}%' !important;
       }
+      .fv\:d-fco@{opacity}:focus-visible {
+        --fco: ~'@{opacity}%' !important;
+      }
       #d-internals #dark-mode('.d\:d-fco@{opacity}', {
         --fco: ~'@{opacity}%' !important;
       });
@@ -175,6 +193,9 @@
       .f\:d-bco@{opacity}:focus-within {
         --bco: ~'@{opacity}%' !important;
       }
+      .fv\:d-bco@{opacity}:focus-visible {
+        --bco: ~'@{opacity}%' !important;
+      }
       #d-internals #dark-mode('.d\:d-bco@{opacity}', {
         --bco: ~'@{opacity}%' !important;
       });
@@ -196,6 +217,9 @@
       .f\:d-bgo@{opacity}:focus-within {
         --bgo: ~'@{opacity}%' !important;
       }
+      .fv\:d-bgo@{opacity}:focus-visible {
+        --bgo: ~'@{opacity}%' !important;
+      }
       #d-internals #dark-mode('.d\:d-bgo@{opacity}', {
         --bgo: ~'@{opacity}%' !important;
       });
@@ -209,6 +233,9 @@
       .f\:d-bgg-from-@{opacity}:focus-within {
         --bgg-from-opacity: ~'@{opacity}%' !important;
       }
+      .fv\:d-bgg-from-@{opacity}:focus-visible {
+        --bgg-from-opacity: ~'@{opacity}%' !important;
+      }
       #d-internals #dark-mode('.d\:d-bgg-from-@{opacity}', {
         --bgg-from-opacity: ~'@{opacity}%' !important;
       });
@@ -222,6 +249,9 @@
       .f\:d-bgg-to-@{opacity}:focus-within {
         --bgg-to-opacity: ~'@{opacity}%' !important;
       }
+      .fv\:d-bgg-to-@{opacity}:focus-visible {
+        --bgg-to-opacity: ~'@{opacity}%' !important;
+      }
       #d-internals #dark-mode('.d\:d-bgg-to-@{opacity}', {
         --bgg-to-opacity: ~'@{opacity}%' !important;
       });
@@ -377,6 +407,11 @@
         --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%);
       }
+      .fv\:d-bgg-from-@{color}:focus-visible {
+        --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));
@@ -394,6 +429,10 @@
         --bgg-to-opacity: 100%;
         --bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
       }
+      .fv\:d-bgg-to-@{color}:focus-visible {
+        --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;

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

@@ -120,15 +120,15 @@
 //  ============================================================================
 //  $   DISPLAY
 //  ----------------------------------------------------------------------------
-.d-d-block { display: block !important; };;;;
-.d-d-flex { display: flex !important; };;;;
-.d-d-grid { display: grid !important; };;;;
-.d-d-inline { display: inline !important; };;;;
-.d-d-inline-block { display: inline-block !important; };;;;
-.d-d-inline-flex { display: inline-flex !important; };;;;
-.d-d-inline-grid { display: inline-grid !important; };;;;
-.d-d-none { display: none !important; };;;;
-.d-d-unset { display: unset !important; };;
+.d-d-block { display: block !important; }
+.d-d-flex { display: flex !important; }
+.d-d-grid { display: grid !important; }
+.d-d-inline { display: inline !important; }
+.d-d-inline-block { display: inline-block !important; }
+.d-d-inline-flex { display: inline-flex !important; }
+.d-d-inline-grid { display: inline-grid !important; }
+.d-d-none { display: none !important; }
+.d-d-unset { display: unset !important; }
 
 
 //  ============================================================================
@@ -152,12 +152,12 @@
 //  ============================================================================
 //  $   POSITION
 //  ----------------------------------------------------------------------------
-.d-ps-static { position: static !important; };;;;
-.d-ps-relative { position: relative !important; };;;;
-.d-ps-absolute { position: absolute !important; };;;;
-.d-ps-fixed { position: fixed !important; };;;;
-.d-ps-sticky { position: sticky !important; };;;;
-.d-ps-unset { position: unset !important; };;
+.d-ps-static { position: static !important; }
+.d-ps-relative { position: relative !important; }
+.d-ps-absolute { position: absolute !important; }
+.d-ps-fixed { position: fixed !important; }
+.d-ps-sticky { position: sticky !important; }
+.d-ps-unset { position: unset !important; }
 
 
 //  ============================================================================