feat(link): new typography tokens, focus color and design, WHCM focus state (#3570)

* chore(link): adding yarn file

* feat(link): add new migration and changeset

* chore(link): add changeset and revert template file

* chore(link): updating lock file

* chore(link): adding missing metadata files

* feat(link): update inline story, template, inline style

* feat(link): updating changeset, inline docs, stories

* chore(link): update template layout and story

* chore(link): adding search metadata

* chore(link): adding reason for non quiet inline

Author: aramos-adobe

.changeset/tasty-eagles-draw.md

@@ -0,0 +1,31 @@
+---
+"@spectrum-css/link": major
+---
+
+### Link S2 migration
+
+The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant.
+
+#### Note
+
+- Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear
+- `--mod-spectrum-link-font-weight` can be used to adjust inline variant to match surrounding text. Apply font weights to this mod `inherit` does not apply.
+
+## New tokens
+
+### Color
+
+`spectrum-link-focus-indicator-color`
+`spectrum-link-focus-indicator-thickness`
+`spectrum-link-focus-indicator-gap`
+`spectrum-link-corner-radius`
+
+### Typography
+
+`spectrum-link-line-height`
+`spectrum-link-line-height-cjk-100`
+`spectrum-link-font-size`
+`spectrum-link-font-style`
+`spectrum-link-font-weight`
+`spectrum-link-text-underline-thickness`
+`spectrum-link-text-underline-gap`

components/link/dist/metadata.json

@@ -2,46 +2,78 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Link",
+    ".spectrum-Link--inline",
     ".spectrum-Link--quiet",
     ".spectrum-Link--quiet:hover",
     ".spectrum-Link--secondary",
     ".spectrum-Link--staticBlack",
     ".spectrum-Link--staticWhite",
     ".spectrum-Link:active",
     ".spectrum-Link:focus-visible",
-    ".spectrum-Link:hover"
+    ".spectrum-Link:hover",
+    ".spectrum-Link:lang(ja)",
+    ".spectrum-Link:lang(ko)",
+    ".spectrum-Link:lang(zh)"
   ],
   "modifiers": [
     "--mod-link-animation-duration",
+    "--mod-link-inline-font-weight",
+    "--mod-link-line-height-cjk",
     "--mod-link-text-color",
     "--mod-link-text-color-active",
     "--mod-link-text-color-black",
     "--mod-link-text-color-focus",
     "--mod-link-text-color-hover",
-    "--mod-link-text-color-primary-active",
-    "--mod-link-text-color-primary-default",
-    "--mod-link-text-color-primary-focus",
-    "--mod-link-text-color-primary-hover",
     "--mod-link-text-color-secondary-active",
     "--mod-link-text-color-secondary-default",
     "--mod-link-text-color-secondary-focus",
     "--mod-link-text-color-secondary-hover",
     "--mod-link-text-color-white"
   ],
-  "component": [],
+  "component": [
+    "--spectrum-link-corner-radius",
+    "--spectrum-link-default-font-family",
+    "--spectrum-link-focus-indicator-color",
+    "--spectrum-link-focus-indicator-gap",
+    "--spectrum-link-focus-indicator-thickness",
+    "--spectrum-link-font-size",
+    "--spectrum-link-font-style",
+    "--spectrum-link-font-weight",
+    "--spectrum-link-inline-font-weight",
+    "--spectrum-link-line-height",
+    "--spectrum-link-line-height-cjk",
+    "--spectrum-link-text-underline-gap",
+    "--spectrum-link-text-underline-thickness"
+  ],
   "global": [
     "--spectrum-accent-content-color-default",
     "--spectrum-accent-content-color-down",
     "--spectrum-accent-content-color-hover",
     "--spectrum-accent-content-color-key-focus",
     "--spectrum-animation-duration-100",
     "--spectrum-black",
+    "--spectrum-cjk-line-height-100",
+    "--spectrum-corner-radius-100",
+    "--spectrum-default-font-style",
+    "--spectrum-focus-indicator-color",
+    "--spectrum-focus-indicator-gap",
+    "--spectrum-focus-indicator-thickness",
+    "--spectrum-font-size-100",
+    "--spectrum-line-height-100",
+    "--spectrum-medium-font-weight",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",
     "--spectrum-neutral-content-color-key-focus",
+    "--spectrum-regular-font-weight",
+    "--spectrum-sans-font-family-stack",
+    "--spectrum-text-underline-gap",
+    "--spectrum-text-underline-thickness",
     "--spectrum-white"
   ],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-link-text-color"]
+  "high-contrast": [
+    "--highcontrast-link-focus-indicator-color",
+    "--highcontrast-link-text-color"
+  ]
 }

components/link/index.css

@@ -11,21 +11,28 @@
  * governing permissions and limitations under the License.
  */
 
-/* Windows high contrast mode */
-@media (forced-colors: active) {
-	.spectrum-Link {
-		--highcontrast-link-text-color: LinkText;
-	}
-}
+.spectrum-Link {
+	/* Focus state */
+	--spectrum-link-focus-indicator-color: var(--spectrum-focus-indicator-color);
+	--spectrum-link-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-link-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+	--spectrum-link-corner-radius: var(--spectrum-corner-radius-100);
 
-.spectrum-Link--secondary {
-	--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
-	--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
-	--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
-	--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
-}
+	/* Typography */
+	--spectrum-link-default-font-family: var(--spectrum-sans-font-family-stack);
+
+	/* Standalone */
+	--spectrum-link-line-height: var(--spectrum-line-height-100);
+	--spectrum-link-line-height-cjk: var(--spectrum-cjk-line-height-100);
+	--spectrum-link-font-size: var(--spectrum-font-size-100);
+	--spectrum-link-font-style: var(--spectrum-default-font-style);
+	--spectrum-link-font-weight: var(--spectrum-medium-font-weight);
+	--spectrum-link-text-underline-thickness: var(--spectrum-text-underline-thickness);
+	--spectrum-link-text-underline-gap: var(--spectrum-text-underline-gap);
+
+	/* Inline */
+	--spectrum-link-inline-font-weight: var(--spectrum-regular-font-weight);
 
-.spectrum-Link {
 	/* Remove the gray background on active links in IE 10. */
 	background-color: transparent;
 
@@ -36,29 +43,45 @@
 	outline: none;
 	cursor: pointer;
 
-	/* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */
-	color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
+	color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default)));
+	font-family: var(--spectrum-link-default-font-family);
+	font-weight: var(--spectrum-link-font-weight);
+	font-size: var(--spectrum-link-font-size);
+	font-style: var(--spectrum-link-font-style);
+	line-height: var(--spectrum-link-line-height);
+	text-decoration-thickness: var(--spectrum-link-text-underline-thickness);
+	text-underline-offset: var(--spectrum-link-text-underline-gap);
 
 	&:hover {
-		/* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */
-		--mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
+		--mod-link-text-color: var(--mod-link-text-color-hover, var(--spectrum-accent-content-color-hover));
 	}
 
 	&:active {
-		/* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */
-		--mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
+		--mod-link-text-color: var(--mod-link-text-color-active, var(--spectrum-accent-content-color-down));
 	}
 
 	&:focus-visible {
-		/* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */
-		--mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
+		--mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus));
 
-		text-decoration: underline;
-		text-decoration-style: double;
-		text-decoration-color: inherit;
+		outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color));
+		padding: var(--spectrum-link-focus-indicator-gap);
+		border-radius: var(--spectrum-link-corner-radius);
+	}
+
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		line-height: var(--mod-link-line-height-cjk, var(--spectrum-link-line-height-cjk));
 	}
 }
 
+.spectrum-Link--secondary {
+	--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
+	--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
+	--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
+	--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
+}
+
 .spectrum-Link--quiet {
 	text-decoration: none;
 
@@ -67,6 +90,10 @@
 	}
 }
 
+.spectrum-Link--inline {
+	--spectrum-link-font-weight: var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight));
+}
+
 .spectrum-Link--staticWhite {
 	--mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
 	--mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
@@ -80,3 +107,11 @@
 	--mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
 	--mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black));
 }
+
+/* Windows high contrast mode */
+@media (forced-colors: active) {
+	.spectrum-Link {
+		--highcontrast-link-text-color: LinkText;
+		--highcontrast-link-focus-indicator-color: LinkText;
+	}
+}