@hashicorp/design-system-components 0.0.19 → 0.0.20

package/app/styles/@hashicorp/design-system-components.scss

@@ -1,6 +1,7 @@
 // these are files coming from the 'design-system-tokens' package
 @use "tokens";
 @use "helpers/elevation";
+@use "helpers/focus-ring";
 
 @use "../mixins/generic-focus-state";
 

package/app/styles/components/button.scss

@@ -22,6 +22,7 @@ $hds-button-focus-border-width: 3px;
   display: flex;
   font-family: var(--token-typography-font-stack-text);
   justify-content: center;
+  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y
   max-width: fit-content;
   position: relative;
@@ -34,9 +35,6 @@ $hds-button-focus-border-width: 3px;
   &:disabled:focus,
   &[disabled]:focus,
   &.is-disabled:focus,
-  &:disabled:focus-visible,
-  &[disabled]:focus-visible,
-  &.is-disabled:focus-visible,
   &:disabled:hover,
   &[disabled]:hover,
   &.is-disabled:hover {
@@ -45,7 +43,6 @@ $hds-button-focus-border-width: 3px;
     box-shadow: none;
     color: var(--token-color-palette-neutral-400);
     cursor: not-allowed;
-    outline-color: var(--token-color-palette-alpha-200);
 
     &::before {
       border-color: transparent;
@@ -62,7 +59,6 @@ $hds-button-focus-border-width: 3px;
   }
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     &::before {
       // the position absolute of an element is computed from the inside of the border of the container
@@ -149,7 +145,6 @@ $size-props: (
   color: var(--token-color-palette-neutral-0);
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     background-color: var(--token-color-action-background-primary);
     border-color: var(--token-color-action-border-on-primary);
@@ -192,12 +187,10 @@ $size-props: (
   color: var(--token-color-palette-neutral-600);
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     background-color: var(--token-color-palette-neutral-50);
     border-color: var(--token-color-action-border-on-primary);
     color: var(--token-color-palette-neutral-600);
-    outline-color: var(--token-color-action-border-on-primary);
     &::before {
       border-color: #5990FF;
     }
@@ -227,12 +220,10 @@ $size-props: (
   color: var(--token-color-critical-foreground-on-faint);
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     background-color: var(--token-color-palette-neutral-50);
     border-color: var(--token-color-critical-border-on-primary);
     color: var(--token-color-critical-foreground-on-faint);
-    outline-color: var(--token-color-critical-border-on-primary);
     &::before {
       border-color: #DD7578;
     }

package/app/styles/components/link/standalone.scss

@@ -18,14 +18,14 @@ $hds-link-standalone-border-width: 1px;
   align-items: center;
   background-color: transparent; // needs to exist for a11y
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
-  color: var(--token-color-action-foreground-on-faint);
   display: flex;
   font-family: var(--token-typography-font-stack-text);
   isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   justify-content: center;
+  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent;
   position: relative;
-  text-decoration: underline;
+  // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
   text-decoration-color: transparent;
   width: fit-content;
 
@@ -62,6 +62,9 @@ $hds-link-standalone-border-width: 1px;
 
 .hds-link-standalone__text {
   flex: 1 0 0;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.25s ease-in;
 
   .hds-link-standalone__icon + & {
     margin-left: 0.375rem;
@@ -112,34 +115,38 @@ $size-props: (
 // COLORS & STATES
 // The "primary" and "secondary" variants share a lot of styles for the interactive states
 // Note: the order of the pseuo-selectors need to stay the way they are
+//
+// For an explanation of the ":focus/:focus-visible" states see:
+// - https://github.com/hashicorp/design-system-components/issues/161
+// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 
 .hds-link-standalone {
+  // default focus for browsers that still rely on ":focus"
   &:focus,
-  &:focus-visible,
   &.is-focus {
     &::before {
       @include hds-generic-focus-state();
     }
   }
-  &:hover,
-  &.is-hover {
-    text-decoration: underline;
-    transition: text-decoration-color 0.25s ease-in;
+  // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+  &:focus:not(:focus-visible) {
+    &::before {
+      @include hds-remove-focus-state();
+    }
   }
-  &:active,
-  &.is-active {
-    text-decoration: underline;
-
+  // set focus for browsers that support ":focus-visible"
+  &:focus-visible {
+    &::before {
+      @include hds-generic-focus-state();
+    }
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &:focus-visible:active,
   &.is-focus.is-active {
     &::before {
-      content: none;
+      @include hds-remove-focus-state();
     }
   }
-
 }
 
 .hds-link-standalone--color-primary {
@@ -148,12 +155,20 @@ $size-props: (
   &:hover,
   &.is-hover {
     color: var(--token-color-action-background-hover);
-    text-decoration-color: #4E81E8; // custom color by design
+
+    .hds-link-standalone__text {
+      text-decoration-color: #4E81E8; // custom color by design
+    }
   }
+
   &:active,
   &.is-active {
     color: var(--token-color-action-background-active);
-    text-decoration-color: #396ED6; // custom color by design
+
+    .hds-link-standalone__text {
+      text-decoration-color: #396ED6; // custom color by design
+    }
+
     &::before {
       background-color: var(--token-color-action-background-faint);
     }
@@ -165,12 +180,19 @@ $size-props: (
 
   &:hover,
   &.is-hover {
-    text-decoration-color: #4D4D4F; // custom color by design
+    .hds-link-standalone__text {
+      text-decoration-color: #4D4D4F; // custom color by design
+    }
   }
+
   &:active,
   &.is-active {
     color: var(--token-color-neutral-foreground-secondary);
-    text-decoration-color: #6E7075; // custom color by design
+
+    .hds-link-standalone__text {
+      text-decoration-color: #6E7075; // custom color by design
+    }
+
     &::before {
       background-color: var(--token-color-palette-neutral-200);
     }

package/app/styles/mixins/_generic-focus-state.scss

@@ -1,3 +1,7 @@
 @mixin hds-generic-focus-state() {
   box-shadow: var(--token-focus-ring-box-shadow);
 }
+
+@mixin hds-remove-focus-state() {
+  box-shadow: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.4.7",
-    "@hashicorp/ember-flight-icons": "^2.0.0",
+    "@hashicorp/ember-flight-icons": "^2.0.1",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
     "ember-cli-sass": "^10.0.1",