From 59b0762a74cfb22af10bb7fdda9d379a09e2773b Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 7 Aug 2024 16:05:17 -0700 Subject: [PATCH] Add font shorthand and use Adobe Clean variable font (#6818) --- .storybook-s2/docs/Icons.jsx | 4 +- .storybook-s2/docs/Intro.jsx | 10 +- .storybook-s2/docs/StyleMacro.jsx | 22 ++- .storybook-s2/docs/typography.js | 16 +- .storybook-s2/preview-head.html | 2 +- .../@react-spectrum/s2/src/ActionButton.tsx | 3 +- packages/@react-spectrum/s2/src/Badge.tsx | 3 +- .../@react-spectrum/s2/src/Breadcrumbs.tsx | 45 +----- packages/@react-spectrum/s2/src/Button.tsx | 3 +- packages/@react-spectrum/s2/src/Checkbox.tsx | 3 +- .../@react-spectrum/s2/src/ColorSlider.tsx | 4 +- .../@react-spectrum/s2/src/ContextualHelp.tsx | 14 +- packages/@react-spectrum/s2/src/Dialog.tsx | 16 +- packages/@react-spectrum/s2/src/Field.tsx | 8 +- .../s2/src/IllustratedMessage.tsx | 19 ++- .../@react-spectrum/s2/src/InlineAlert.tsx | 46 +++--- packages/@react-spectrum/s2/src/Link.tsx | 9 +- packages/@react-spectrum/s2/src/Menu.tsx | 29 ++-- packages/@react-spectrum/s2/src/Picker.tsx | 21 ++- packages/@react-spectrum/s2/src/Radio.tsx | 3 +- packages/@react-spectrum/s2/src/Slider.tsx | 3 +- .../@react-spectrum/s2/src/StatusLight.tsx | 3 +- packages/@react-spectrum/s2/src/Switch.tsx | 3 +- packages/@react-spectrum/s2/src/TagGroup.tsx | 10 +- packages/@react-spectrum/s2/src/TextField.tsx | 3 +- packages/@react-spectrum/s2/src/Tooltip.tsx | 4 +- .../@react-spectrum/s2/src/style-utils.ts | 4 +- .../s2/stories/ActionButton.stories.tsx | 9 +- .../s2/stories/Divider.stories.tsx | 2 +- .../s2/stories/Link.stories.tsx | 5 +- .../s2/style/spectrum-theme.ts | 147 ++++++++++++------ .../@react-spectrum/s2/style/style-macro.ts | 20 ++- 32 files changed, 253 insertions(+), 240 deletions(-) diff --git a/.storybook-s2/docs/Icons.jsx b/.storybook-s2/docs/Icons.jsx index d1c6dc7019f..f5b9893fbae 100644 --- a/.storybook-s2/docs/Icons.jsx +++ b/.storybook-s2/docs/Icons.jsx @@ -6,9 +6,9 @@ import {highlight} from './highlight' with {type: 'macro'}; export function Icons() { return ( -
+
-

+

Workflow icons

Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These icons can be imported from @react-spectrum/s2/icons.

diff --git a/.storybook-s2/docs/Intro.jsx b/.storybook-s2/docs/Intro.jsx index 6e94c202e3f..959677ea13d 100644 --- a/.storybook-s2/docs/Intro.jsx +++ b/.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 ( -
+
-

+

Spectrum 2 in React Spectrum

-

Introducing Spectrum 2 – 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.

+

Introducing Spectrum 2 – 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.

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 React Aria Components and a new styling foundation powered by Spectrum Tokens. 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.

Check out the new Button design, with fresh new colors and icons, a fun new press scaling interaction, and support for t-shirt sizes.

@@ -156,7 +156,7 @@ function App() { -

Note: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the directions below instead of using page.css.

+

Note: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the directions below instead of using page.css.

Overriding the color scheme

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 base Spectrum background layer by default. This can be configured by setting the data-color-scheme and data-background attributes on the {''} element. For example, to force the application to only render in light mode, set data-color-scheme="light".

{highlight(`
diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.storybook-s2/docs/StyleMacro.jsx
index 31a3e33fc10..0a9c2115633 100644
--- a/.storybook-s2/docs/StyleMacro.jsx
+++ b/.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 (
-    

+    

       

-        

+        

           Style Macro
         

       

@@ -22,14 +22,14 @@ export function StyleMacro() {
 

   {/* ... */}
 
`)}
-

Atomic CSS 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:

+

Atomic CSS 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:

{highlight(`.bJ { background-color: #ffbcb4 }
 .ac { color: #fff }`, 'CSS')}

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.

-

The style macro colocates your styles with your component code, rather than in separate CSS files. Colocation enables you to:

+

The style macro colocates your styles with your component code, rather than in separate CSS files. Colocation enables you to:

    -
  • Develop more efficiently – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.
    • -
  • Refactor with confidence – 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.
    • +
  • Develop more efficiently – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.
    • +
  • Refactor with confidence – 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.

Values

The style macro supports a constrained set of values for each CSS property, which conform to the Spectrum design system. For example, the backgroundColor 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.

@@ -60,6 +60,7 @@ export function StyleMacro() { } } }); + function MyComponent({variant}) { return
}`)} @@ -70,9 +71,11 @@ function MyComponent({variant}) { isSelected: 'gray-900' } }); +
`)}

Runtime conditions also work well with the render props in React Aria Components. If you define your styles inline, you’ll even get autocomplete for all of the available conditions.

{highlight(`import {Checkbox} from 'react-aria-components';
+
 `)}

The above example has three runtime conditions (isSelected, isEmphasized, and isDisabled), and uses the forcedColors condition to apply styles for Windows High Contrast Mode (WHCM). The order of precedence follows the order the conditions are defined in the object, with the isSelected + isDisabled + forcedColors state having the highest priority.

Reusing styles

@@ -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) {

Then, import your macro and use it in a component.

{highlight(`// component.tsx
 import {horizontalStack} from './style-utils' with {type: 'macro'};
+
 const styles = style({
   ...horizontalStack(4),
   backgroundColor: 'base'
diff --git a/.storybook-s2/docs/typography.js b/.storybook-s2/docs/typography.js
index 8ec984c32e2..64e3f183764 100644
--- a/.storybook-s2/docs/typography.js
+++ b/.storybook-s2/docs/typography.js
@@ -3,30 +3,34 @@ import {Link} from '@react-spectrum/s2';
 
 export function H2({children}) {
   let id = anchorId(children);
-  return 
{children}

+  return 
{children}

 }
 
 export function H3({children}) {
   let id = anchorId(children);
-  return 
{children}

+  return 
{children}

 }
 
 export function H4({children}) {
   let id = anchorId(children);
-  return 
{children}

+  return 
{children}

 }
 
 export function P({children}) {
-  return 
{children}

+  return 
{children}

 }
 
 export function Code({children}) {
-  return {children};
+  return {children};
+}
+
+export function Strong({children}) {
+  return {children};
 }
 
 export function Pre({children}) {
   return (
-    
+    
       
     

   );
diff --git a/.storybook-s2/preview-head.html b/.storybook-s2/preview-head.html
index 3901b66fd7c..050321f834d 100644
--- a/.storybook-s2/preview-head.html
+++ b/.storybook-s2/preview-head.html
@@ -6,7 +6,7 @@