Add theming to Link, use BodyText in Button (#2743)

## Summary:
This PR addresses font theming in WB Link, and updates internal typography usage in Button. 

Longer version: I investigated why Link wasn't using the themed font by comparing it to WB Button. Button used Label typography styles to wrap its text content, which set a themed font on a child `span`. I updated Button to use BodyText. Rather than wrapping Link's contents in an extra span, I elected to add a `font` declaration and account for font weight differences with component tokens.

Issue: WB-2052

## Test plan:
1. Verify Link has Lato font family and regular weight in OG
2. Verify Link has Jakarta font family and bold weight in TB
3. Verify Button has no visual changes in either theme, including color
4. Check font-size scaling for larger sizes in chrome://settings > Appearance > Font Size

Author: marcysutton

Reviewers: beaesguerra, marcysutton

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2743

Author: marcysutton

.changeset/forty-icons-wait.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-breadcrumbs": minor
+"@khanacademy/wonder-blocks-link": minor
+---
+
+Add font theming to Link and Breadcrumbs with links

.changeset/lazy-dolphins-stare.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Add new font tokens for Links: textDecoration underlineOffset and thickness, font family, and font weight

.changeset/red-numbers-fold.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": patch
+---
+
+Update ButtonCore to use BodyText component internally for text

.storybook/preview-head.html

@@ -22,7 +22,7 @@
 <style>
     body {
         font-family: "Lato", sans-serif;
-        font-size: 16px!important;
+        font-size: 1.6rem!important;
     }
 
     /* Overrides the ArgTypes table tabs to avoid some z-index issues with

__docs__/wonder-blocks-link/link-testing-snapshots.stories.tsx

@@ -22,7 +22,7 @@ const generateCells = (rtl: boolean = false) => [
     {
         name: "Primary",
         props: {
-            children: rtl ? rtlText : "This is a Link",
+            children: rtl ? rtlText : "This is my Link",
         },
     },
     {
@@ -61,10 +61,6 @@ type Story = StoryObj<typeof Link>;
  */
 const meta = {
     title: "Packages / Link / Testing / Snapshots / Link",
-    args: {
-        children: "This is a Link",
-        href: "https://www.khanacademy.org",
-    },
     parameters: {
         chromatic: {
             modes: {

packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs-item.tsx

@@ -4,7 +4,7 @@ import {StyleSheet} from "aphrodite";
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import Link from "@khanacademy/wonder-blocks-link";
-import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {font, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 type Props = AriaProps & {
     /**
@@ -72,6 +72,8 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         marginRight: spacing.xxxSmall_4,
+        lineHeight: "inherit",
+        fontFamily: font.family.sans,
     },
 
     separator: {

packages/wonder-blocks-button/src/components/button-core.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {CSSProperties, StyleSheet} from "aphrodite";
 
-import {LabelLarge, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {BodyText} from "@khanacademy/wonder-blocks-typography";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 
@@ -68,10 +68,11 @@ const ButtonCore: React.ForwardRefExoticComponent<
         size === "large" && sharedStyles.large,
     ];
 
-    const Label = size === "small" ? LabelSmall : LabelLarge;
-
     const label = (
-        <Label
+        <BodyText
+            size={size === "small" ? "small" : undefined}
+            weight={size === "large" ? "bold" : undefined}
+            tag="span"
             style={[
                 sharedStyles.text,
                 size === "small" && sharedStyles.smallText,
@@ -82,7 +83,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
             testId={testId ? `${testId}-inner-label` : undefined}
         >
             {children}
-        </Label>
+        </BodyText>
     );
 
     const sizeMapping = {

packages/wonder-blocks-link/package.json

@@ -9,7 +9,16 @@
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/css/vars.css"
+  },
   "scripts": {
+    "build:css": "pnpm exec wonder-blocks-tokens .",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
   },
@@ -19,7 +28,9 @@
     "@khanacademy/wonder-blocks-clickable": "workspace:*",
     "@khanacademy/wonder-blocks-core": "workspace:*",
     "@khanacademy/wonder-blocks-icon": "workspace:*",
-    "@khanacademy/wonder-blocks-tokens": "workspace:*"
+    "@khanacademy/wonder-blocks-tokens": "workspace:*",
+    "@khanacademy/wonder-blocks-typography": "workspace:*",
+    "@khanacademy/wonder-blocks-styles": "workspace:*"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "catalog:",

packages/wonder-blocks-link/src/components/link-core.tsx

@@ -8,7 +8,9 @@ import {
     spacing,
     semanticColor,
     border,
+    font,
 } from "@khanacademy/wonder-blocks-tokens";
+import {focusStyles} from "@khanacademy/wonder-blocks-styles";
 import {isClientSideUrl} from "@khanacademy/wonder-blocks-clickable";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import externalLinkIcon from "@phosphor-icons/core/bold/arrow-square-out-bold.svg";
@@ -19,6 +21,7 @@ import type {
 } from "@khanacademy/wonder-blocks-clickable";
 import type {StyleDeclaration} from "aphrodite";
 import type {SharedProps} from "./link";
+import theme from "../theme";
 
 type Props = SharedProps &
     ChildrenProps &
@@ -156,6 +159,8 @@ const linkContentStyles = StyleSheet.create({
 
 const sharedStyles = StyleSheet.create({
     shared: {
+        fontFamily: theme.root.font.family,
+        fontWeight: theme.root.font.weight,
         cursor: "pointer",
         textDecoration: "none",
         outline: "none",
@@ -167,7 +172,7 @@ const sharedStyles = StyleSheet.create({
  * The object that contains the default and inverse colors for the link
  * component.
  */
-const theme = {
+const states = {
     color: {
         // Primary link color
         default: {
@@ -209,49 +214,37 @@ const _generateStyles = (inline: boolean, light: boolean) => {
         return styles[buttonType];
     }
 
-    const variant = light ? theme.color.inverse : theme.color.default;
+    const variant = light ? states.color.inverse : states.color.default;
 
     const focusStyling = {
-        outline: `${border.width.thin} solid ${variant.focus.border}`,
-        borderRadius: border.radius.radius_040,
+        ...focusStyles.focus[":focus-visible"],
+        borderRadius: border.radius.radius_010,
         outlineOffset: border.width.medium,
     };
 
     const pressStyling = {
         color: variant.press.foreground,
         textDecoration: "underline currentcolor solid",
-        // TODO(WB-1521): Update the underline offset to be 4px after
-        // the Link audit.
-        // textUnderlineOffset: 4,
+        textUnderlineOffset: font.textDecoration.underlineOffset,
     };
 
     const newStyles: StyleDeclaration = {
         rest: {
             color: variant.rest.foreground,
             ":hover": {
-                // TODO(WB-1521): Update text decoration to the 1px dashed
-                // underline after the Link audit.
-                // textDecoration: "underline currentcolor dashed 2px",
                 textDecoration: "underline currentcolor solid",
                 color: variant.hover.foreground,
-                // TODO(WB-1521): Update the underline offset to be 4px after
-                // the Link audit.
-                // textUnderlineOffset: 4,
+                textUnderlineOffset: font.textDecoration.underlineOffset,
             },
             // Focus styles only show up with keyboard navigation.
             // Mouse users don't see focus styles.
             ":focus-visible": focusStyling,
             ":active": pressStyling,
         },
         restInline: {
-            // TODO(WB-1521): Update text decoration to the 1px dashed
-            // underline after the Link audit.
-            // textDecoration: "underline currentcolor solid 1px",
             textDecoration: "underline currentcolor solid",
-            // TODO(WB-1521): Update the underline offset to be 4px after
-            // the Link audit.
-            // textUnderlineOffset: 4,
-            textUnderlineOffset: border.width.medium,
+            textDecorationThickness: font.textDecoration.thickness,
+            textUnderlineOffset: font.textDecoration.underlineOffset,
         },
         focus: focusStyling,
         press: pressStyling,

packages/wonder-blocks-link/src/theme/default.ts

@@ -0,0 +1,8 @@
+export default {
+    root: {
+        font: {
+            family: "inherit",
+            weight: "inherit",
+        },
+    },
+};