Add font shorthand and use Adobe Clean variable font (#6818)

Author: devongovett

.storybook-s2/docs/Icons.jsx

@@ -6,9 +6,9 @@ import {highlight} from './highlight' with {type: 'macro'};
 
 export function Icons() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans'})}>
+    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
-        <h1 className={style({fontSize: 'heading-2xl', color: 'heading', marginBottom: 48})}>
+        <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Workflow icons
         </h1>
         <P>Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These icons can be imported from <Code>@react-spectrum/s2/icons</Code>.</P>

.storybook-s2/docs/Intro.jsx

@@ -9,11 +9,11 @@ import CommunityIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Community_20_N.
 import DeviceTabletIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import DeviceDesktopIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import {highlight} from './highlight' with {type: 'macro'};
-import {H2, H3, H4, P, Pre, Code} from './typography';
+import {H2, H3, H4, P, Pre, Code, Strong} from './typography';
 
 export function Docs() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', marginY: 48, fontFamily: 'sans'})}>
+    <div className={style({maxWidth: 'lg', marginX: 'auto', marginY: 48})}>
       <header
         style={{
           backgroundImage: `url(${new URL('wallpaper_collaborative_S2_desktop.webp', import.meta.url).toString()})`,
@@ -25,12 +25,12 @@ export function Docs() {
           marginBottom: 48,
           borderRadius: 'xl'
         })}>
-        <h1 className={style({fontSize: 'heading-2xl', color: 'white'})}>
+        <h1 className={style({font: 'heading-2xl', color: 'white'})}>
           Spectrum 2 in React Spectrum
         </h1>
       </header>
       <main className={style({marginX: 48})}>
-        <P><strong>Introducing <Link href="https://s2.spectrum.adobe.com" target="_blank">Spectrum 2</Link></strong> – a new update to Adobe's design system, now in pre-release! Designed to support our growing suite of products, Spectrum 2 aims to work seamlessly across experiences by balancing personality and function.</P>
+        <P><Strong>Introducing <Link href="https://s2.spectrum.adobe.com" target="_blank">Spectrum 2</Link></Strong> – a new update to Adobe's design system, now in pre-release! Designed to support our growing suite of products, Spectrum 2 aims to work seamlessly across experiences by balancing personality and function.</P>
         <P>The React Spectrum team has been hard at work to bring the Spectrum 2 design to our components. Spectrum 2 in React Spectrum is built on <Link href="https://react-spectrum.adobe.com/react-aria/" target="_blank">React Aria Components</Link> and a new styling foundation powered by <Link href="https://github.com/adobe/spectrum-tokens" target="_blank">Spectrum Tokens</Link>. This gives you access to Spectrum design fundamentals such as colors, spacing, sizing, and typography in your own applications and custom components. Spectrum 2 also brings new features such as t-shirt sizing, improved form layout, dynamic new press interactions, and more.</P>
         <P>Check out the new Button design, with fresh new colors and icons, a fun new press scaling interaction, and support for t-shirt sizes.</P>
         <Example>
@@ -156,7 +156,7 @@ function App() {
         <Example>
           <Button variant="accent" onPress={() => alert('Hey there!')}>Hello Spectrum 2!</Button>
         </Example>
-        <P><strong>Note</strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
+        <P><Strong>Note</Strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
         <H3>Overriding the color scheme</H3>
         <P>By default, the page follows the user’s operating system color scheme setting, supporting both light and dark mode. The page background is set to the <Code>base</Code> Spectrum background layer by default. This can be configured by setting the <Code>data-color-scheme</Code> and <Code>data-background</Code> attributes on the <Code>{'<html>'}</Code> element. For example, to force the application to only render in light mode, set <Code>data-color-scheme="light"</Code>.</P>
         <Pre>{highlight(`<html data-color-scheme="light">

.storybook-s2/docs/StyleMacro.jsx

@@ -1,17 +1,17 @@
 import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {Link, LinkButton} from '@react-spectrum/s2';
+import {Link} from '@react-spectrum/s2';
 import {highlight} from './highlight' with {type: 'macro'};
-import {H2, H3, H3, P, Pre, Code} from './typography';
+import {H2, H3, H3, P, Pre, Code, Strong} from './typography';
 
 export function StyleMacro() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans', fontSize: 'body-lg'})}>
+    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
       <header
         className={style({
           paddingX: 48,
           marginBottom: 48
         })}>
-        <h1 className={style({fontSize: 'heading-2xl', color: 'heading'})}>
+        <h1 className={style({font: 'heading-2xl'})}>
           Style Macro
         </h1>
       </header>
@@ -22,14 +22,14 @@ export function StyleMacro() {
 <div className={style({backgroundColor: 'red-400', color: 'white'})}>
   {/* ... */}
 </div>`)}</Pre>
-        <P><strong>Atomic CSS</strong> scales as your application grows because it outputs a separate rule for each CSS property you write, ensuring there is no duplication across your whole app. The above example generates two CSS rules:</P>
+        <P><Strong>Atomic CSS</Strong> scales as your application grows because it outputs a separate rule for each CSS property you write, ensuring there is no duplication across your whole app. The above example generates two CSS rules:</P>
         <Pre>{highlight(`.bJ { background-color: #ffbcb4 }
 .ac { color: #fff }`, 'CSS')}</Pre>
         <P>These rules are reused across your app wherever the same values are used, which keeps your bundle size small even as you add features. In addition, you only pay for the values you use – there’s no unnecessary CSS custom properties for colors and other tokens that aren’t used.</P>
-        <P>The <Code>style</Code> macro <strong>colocates</strong> your styles with your component code, rather than in separate CSS files. Colocation enables you to:</P>
+        <P>The <Code>style</Code> macro <Strong>colocates</Strong> your styles with your component code, rather than in separate CSS files. Colocation enables you to:</P>
         <ul className="sb-unstyled">
-          <li className={style({lineHeight: 'body', color: 'body', marginTop: 0, marginBottom: 8})}><strong>Develop more efficiently</strong> – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.</li>
-          <li className={style({lineHeight: 'body', color: 'body', marginY: 0})}><strong>Refactor with confidence</strong> – Changing the styles in a component is guaranteed to never unintentionally affect any other parts of your application. When you delete a component, the corresponding styles are also removed, reducing technical debt.</li>
+          <li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Strong>Develop more efficiently</Strong> – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.</li>
+          <li className={style({font: 'body-lg', marginY: 0})}><Strong>Refactor with confidence</Strong> – Changing the styles in a component is guaranteed to never unintentionally affect any other parts of your application. When you delete a component, the corresponding styles are also removed, reducing technical debt.</li>
         </ul>
         <H2>Values</H2>
         <P>The <Code>style</Code> macro supports a constrained set of values for each CSS property, which conform to the Spectrum design system. For example, the <Code>backgroundColor</Code> property supports Spectrum colors, and does not allow arbitrary hex or rgb values by default. This helps make it easier to build consistent UIs that are maintainable over time.</P>
@@ -60,6 +60,7 @@ export function StyleMacro() {
     }
   }
 });
+
 function MyComponent({variant}) {
   return <div className={styles({variant})} />
 }`)}</Pre>
@@ -70,9 +71,11 @@ function MyComponent({variant}) {
     isSelected: 'gray-900'
   }
 });
+
 <div className={styles({isSelected: true})} />`)}</Pre>
         <P>Runtime conditions also work well with the <Link href="https://react-spectrum.adobe.com/react-aria/styling.html#render-props" target="_blank">render props</Link> in React Aria Components. If you define your styles inline, you’ll even get autocomplete for all of the available conditions.</P>
         <Pre>{highlight(`import {Checkbox} from 'react-aria-components';
+
 <Checkbox
   className={style({
     backgroundColor: {
@@ -97,6 +100,7 @@ function MyComponent({variant}) {
     }
   }
 });
+
 <div className={styles({isSelected, isEmphasized, isDisabled})} />`)}</Pre>
         <P>The above example has three runtime conditions (<Code>isSelected</Code>, <Code>isEmphasized</Code>, and <Code>isDisabled</Code>), and uses the <Code>forcedColors</Code> condition to apply styles for <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors" target="_blank">Windows High Contrast Mode</Link> (WHCM). The order of precedence follows the order the conditions are defined in the object, with the <Code>isSelected</Code> + <Code>isDisabled</Code> + <Code>forcedColors</Code> state having the highest priority.</P>
         <H2>Reusing styles</H2>
@@ -106,6 +110,7 @@ function MyComponent({variant}) {
   alignItems: 'center',
   columnGap: 8
 };
+
 const styles = style({
   ...horizontalStack,
   columnGap: 4
@@ -122,6 +127,7 @@ export function horizontalStack(gap: number) {
         <P>Then, import your macro and use it in a component.</P>
         <Pre>{highlight(`// component.tsx
 import {horizontalStack} from './style-utils' with {type: 'macro'};
+
 const styles = style({
   ...horizontalStack(4),
   backgroundColor: 'base'

.storybook-s2/docs/typography.js

@@ -3,30 +3,34 @@ import {Link} from '@react-spectrum/s2';
 
 export function H2({children}) {
   let id = anchorId(children);
-  return <h2 className={style({fontSize: 'heading-xl', lineHeight: 'heading', color: 'heading', marginTop: 48, marginBottom: 24})} id={id}>{children}</h2>
+  return <h2 className={style({font: 'heading-xl', marginTop: 48, marginBottom: 24})} id={id}>{children}</h2>
 }
 
 export function H3({children}) {
   let id = anchorId(children);
-  return <h3 className={style({fontSize: 'heading', lineHeight: 'heading', color: 'heading', marginTop: 32, marginBottom: 16})} id={anchorId(children)}>{children}</h3>
+  return <h3 className={style({font: 'heading', marginTop: 32, marginBottom: 16})} id={anchorId(children)}>{children}</h3>
 }
 
 export function H4({children}) {
   let id = anchorId(children);
-  return <h4 className={style({fontSize: 'heading-sm', lineHeight: 'heading', color: 'heading', marginTop: 32, marginBottom: 8})} id={anchorId(children)}>{children}</h4>
+  return <h4 className={style({font: 'heading-sm', marginTop: 32, marginBottom: 8})} id={anchorId(children)}>{children}</h4>
 }
 
 export function P({children}) {
-  return <p className={style({fontSize: 'body-lg', lineHeight: 'body', color: 'body', marginTop: 0, marginBottom: 24})}>{children}</p>
+  return <p className={style({font: 'body-lg', marginTop: 0, marginBottom: 24})}>{children}</p>
 }
 
 export function Code({children}) {
-  return <code className={style({fontFamily: 'code', fontSize: 'code-sm', backgroundColor: 'layer-1', paddingX: 4, borderWidth: 1, borderColor: 'gray-100', borderStyle: 'solid', borderRadius: 'sm'})}>{children}</code>;
+  return <code className={style({font: 'code-sm', backgroundColor: 'layer-1', paddingX: 4, borderWidth: 1, borderColor: 'gray-100', borderStyle: 'solid', borderRadius: 'sm'})}>{children}</code>;
+}
+
+export function Strong({children}) {
+  return <strong className={style({fontWeight: 'bold'})}>{children}</strong>;
 }
 
 export function Pre({children}) {
   return (
-    <pre className={'sb-unstyled ' + style({padding: 32, marginY: 32, backgroundColor: 'layer-1', borderRadius: 'xl', fontFamily: 'code', fontSize: 'code-sm', lineHeight: 'code'})}>
+    <pre className={'sb-unstyled ' + style({padding: 32, marginY: 32, backgroundColor: 'layer-1', borderRadius: 'xl', font: 'code-sm'})}>
       <code dangerouslySetInnerHTML={{__html: children}} />
     </pre>
   );

.storybook-s2/preview-head.html

@@ -6,7 +6,7 @@
 <script>
 (function(d) {
   var config = {
-    kitId: 'uei1lip',
+    kitId: 'fqj0dxc',
     scriptTimeout: 3000,
     async: true
   },

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -53,9 +53,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   alignItems: 'center',
   justifyContent: 'center',
   columnGap: 'text-to-visual',
-  fontFamily: 'sans',
+  font: 'control',
   fontWeight: 'medium',
-  fontSize: 'control',
   userSelect: 'none',
   height: 'control',
   minWidth: 'control',

packages/@react-spectrum/s2/src/Badge.tsx

@@ -45,8 +45,7 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
 
 const badge = style<BadgeStyleProps>({
   display: 'flex',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: 'control',

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -146,8 +146,7 @@ const linkStyles = style({
     }
   },
   transition: 'default',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   fontWeight: {
     default: 'normal',
     isCurrent: 'bold'
@@ -166,53 +165,23 @@ const linkStyles = style({
     default: 'focus-ring',
     forcedColors: 'Highlight'
   },
-  disableTapHighlight: true,
-  marginTop: {
-    size: {
-      M: size(6), // component-top-to-text-100
-      L: size(9) // component-top-to-text-200
-    }
-  },
-  marginBottom: {
-    size: {
-      M: size(8), // component-bottom-to-text-100
-      L: size(11) // component-bottom-to-text-200
-    }
-  }
+  disableTapHighlight: true
 });
 
-const currentStyles = style({
+const currentStyles = style<{size: string}>({
   color: {
     default: 'neutral',
     forcedColors: 'ButtonText'
   },
   transition: 'default',
-  fontFamily: 'sans',
-  fontSize: 'control',
-  fontWeight: 'bold',
-  marginTop: {
-    default: {
-      size: {
-        M: size(6), // component-top-to-text-100
-        L: size(9) // component-top-to-text-200
-      }
-    }
-  },
-  marginBottom: {
-    default: {
-      size: {
-        M: size(9), // component-bottom-to-text-100
-        L: size(11) // component-bottom-to-text-200
-      }
-    }
-  }
+  font: 'control',
+  fontWeight: 'bold'
 });
 
 // TODO: support user heading size customization, for now just set it to large
 const heading = style({
   margin: 0,
-  fontFamily: 'sans',
-  fontSize: 'heading-lg',
+  font: 'heading-lg',
   fontWeight: 'extra-bold'
 });
 
@@ -234,7 +203,7 @@ export function Breadcrumb({children, ...props}: BreadcrumbProps) {
       className={breadcrumbStyles({size, isCurrent})} >
       {isCurrent ?
         <span
-          className={currentStyles({size, isCurrent})}>
+          className={currentStyles({size})}>
           <Provider
             values={[
               [HeadingContext, {className: heading}]

packages/@react-spectrum/s2/src/Button.tsx

@@ -72,9 +72,8 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
   justifyContent: 'center',
   textAlign: 'start',
   columnGap: 'text-to-visual',
-  fontFamily: 'sans',
+  font: 'control',
   fontWeight: 'bold',
-  fontSize: 'control',
   userSelect: 'none',
   minHeight: 'control',
   minWidth: {

packages/@react-spectrum/s2/src/Checkbox.tsx

@@ -49,8 +49,7 @@ const wrapper = style({
   columnGap: 'text-to-control',
   alignItems: 'baseline',
   width: 'fit',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   transition: 'colors',
   color: {
     default: 'neutral',