feat: replace focus ring mixin and added new mixin where needed

* Removed older focus ring mixin. Added mixin to match calcite-components. Replaced older mixin. Added new mixin where it was needed. (#945)

* use var for animation speed

src/components/calcite-action/calcite-action.scss

@@ -24,15 +24,17 @@
   transition: color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;
   text-align: unset;
   position: relative;
-
+  @include focus-style-base();
   &:hover,
   &:focus {
     background-color: var(--calcite-app-background-hover);
     color: var(--calcite-app-foreground-hover);
     fill: var(--calcite-app-foreground-hover);
   }
 
-  @include focusRingInset();
+  &:focus {
+    @include focus-style-inset();
+  }
 
   .icon-container {
     min-width: var(--calcite-app-icon-size);

src/components/calcite-block/calcite-block.scss

@@ -45,7 +45,10 @@
   font-size: var(--calcite-app-font-size-0);
   text-align: unset;
   color: var(--calcite-app-foreground);
-  @include focusRingInset();
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-inset();
+  }
 }
 
 .header,

src/components/calcite-handle/calcite-handle.scss

@@ -16,15 +16,15 @@
   color: var(--calcite-app-border);
   line-height: 0;
   cursor: move;
-  @include focusRingInset();
-  &:focus {
-    outline-offset: var(--calcite-app-outline-inset);
-    color: var(--calcite-app-foreground);
-  }
   &:hover {
     background-color: var(--calcite-app-background-hover);
     color: var(--calcite-app-foreground);
   }
+  @include focus-style-base();
+  &:focus {
+    color: var(--calcite-app-foreground);
+    @include focus-style-inset();
+  }
   &--activated {
     background-color: var(--calcite-app-background-active);
     color: var(--calcite-app-foreground-active);

src/components/calcite-pick-list-item/calcite-pick-list-item.scss

@@ -37,8 +37,10 @@
   padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);
   align-items: center;
   cursor: pointer;
-
-  @include focusRingInset();
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-inset();
+  }
 }
 
 .text-container {

src/components/calcite-tip-manager/calcite-tip-manager.scss

@@ -46,6 +46,10 @@ $tip-max-width: 540px;
   position: relative;
   padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;
   min-height: 150px;
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-outset();
+  }
 }
 
 .tip-container {
@@ -57,6 +61,10 @@ $tip-max-width: 540px;
   display: flex;
   justify-content: center;
   align-items: flex-start;
+  @include focus-style-base();
+  &:focus {
+    @include focus-style-inset();
+  }
 }
 
 ::slotted(calcite-tip-group) {

src/components/calcite-tip/calcite-tip.scss

@@ -62,6 +62,11 @@ $tip-image-max-width: 100% !default;
 
 ::slotted(a) {
   color: var(--calcite-app-foreground-link);
+  @include focus-style-base();
+}
+
+::slotted(a:focus) {
+  @include focus-style-outset();
 }
 
 .image-frame {

src/components/calcite-value-list-item/calcite-value-list-item.scss

@@ -38,13 +38,16 @@ calcite-pick-list-item {
   color: var(--calcite-app-border);
   line-height: 0;
   cursor: move;
-  @include focusRingInset();
+  @include focus-style-base();
   &:hover,
   &:focus {
     background-color: var(--calcite-app-background-hover);
     outline-offset: var(--calcite-app-outline-inset);
     color: var(--calcite-app-foreground);
   }
+  &:focus {
+    @include focus-style-inset();
+  }
   &--activated {
     background-color: var(--calcite-app-background-active);
     color: var(--calcite-app-foreground-active);

src/demos/tip/basic.html

@@ -25,7 +25,7 @@ <h2>With thumbnail</h2>
             <p>
               This is another paragraph in a subsequent "info" slot.
             </p>
-            <a href="http://www.esri.com">This is the "link" slot.</a>
+            <a href="http://www.esri.com">This is a link.</a>
           </calcite-tip>
         </div>
         <hr />
@@ -52,7 +52,7 @@ <h2>Without heading</h2>
             <p>
               This is another paragraph in a subsequent "info" slot.
             </p>
-            <a href="http://www.esri.com">This is the "link" slot.</a>
+            <a href="http://www.esri.com">This is a link.</a>
           </calcite-tip>
         </div>
         <h2>Without header</h2>
@@ -65,7 +65,7 @@ <h2>Without header</h2>
             <p>
               This is another paragraph in a subsequent "info" slot.
             </p>
-            <a href="http://www.esri.com">This is the "link" slot.</a>
+            <a href="http://www.esri.com">This is a link.</a>
           </calcite-tip>
         </div>
         <hr />

src/scss/mixins/_utilities.scss

@@ -23,8 +23,21 @@
   -webkit-box-orient: vertical;
 }
 
-@mixin focusRingInset() {
-  &:focus {
-    outline-offset: var(--calcite-app-outline-inset);
-  }
+// place on the element that receives focus style, not in focus
+@mixin focus-style-base() {
+  outline-offset: 0;
+  outline-color: transparent;
+  transition: outline-offset var(--calcite-app-animation-time-fast) ease-in-out,
+    outline-color var(--calcite-app-animation-time-fast) ease-in-out;
+}
+
+// place on the element that receives focus style, while in focus
+@mixin focus-style-outset() {
+  outline: 2px solid var(--calcite-ui-blue-1);
+  outline-offset: 2px;
+}
+
+@mixin focus-style-inset() {
+  outline: 2px solid var(--calcite-ui-blue-1);
+  outline-offset: -2px;
 }