diff --git a/.storybook-s2/docs/Colors.jsx b/.storybook-s2/docs/Colors.jsx new file mode 100644 index 00000000000..a3db5085d1e --- /dev/null +++ b/.storybook-s2/docs/Colors.jsx @@ -0,0 +1,149 @@ +import {getColorScale, colorSwatch} from './color.macro' with {type: 'macro'}; +import {style} from '../../packages/@react-spectrum/s2/style' with {type: 'macro'}; +import {Link, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2'; +import {P, Code} from './typography'; + +export function Colors() { + return ( + <> + + Background colors + +

The backgroundColor property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible. Some background colors also automatically update according to states such as isHovered (see runtime conditions below).

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + Text colors + +

The color property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible. Some text colors also automatically update according to states such as isHovered (see runtime conditions below).

+
+ + + + + + + + + + +
+ + + + Semantic colors + +

The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.

+
+ + + + + +
+ + + + Global colors + +

The following values are available across all color properties.

+
+ + + + + + + + + + + + + + + + + + + +
+ + + + ); +} + +function ColorScale({scale}) { + return scale.map(([name, className]) => ( + + )) +} + +function Color({name, className}) { + return ( +
+
+
{name}
+
+ ); +} diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.storybook-s2/docs/StyleMacro.jsx index 0a9c2115633..4074492793c 100644 --- a/.storybook-s2/docs/StyleMacro.jsx +++ b/.storybook-s2/docs/StyleMacro.jsx @@ -1,7 +1,8 @@ import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; -import {Link} from '@react-spectrum/s2'; +import {Link, InlineAlert, Heading, Content} from '@react-spectrum/s2'; import {highlight} from './highlight' with {type: 'macro'}; import {H2, H3, H3, P, Pre, Code, Strong} from './typography'; +import {Colors} from './Colors'; export function StyleMacro() { return ( @@ -34,10 +35,97 @@ export function StyleMacro() {

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.

Colors

-

The Spectrum 2 color palette is available across all color properties. The backgroundColor property also supports Spectrum’s background layers. In addition, semantic colors such as accent and negative are available across all properties, and automatically update according to states such as isHovered (see runtime conditions below).

+

The Spectrum 2 color palette is available across all color properties. See the following sections for color values available for each property.

+

Spacing and sizing

Spacing properties such as margin and padding, and sizing properties such as width and height support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent.

Internally, spacing and sizing values are converted from pixels to rems, which scale according to the user’s font size preference. In addition, sizing values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets. Spacing values do not scale and remain fixed.

+

Typography

+

Spectrum 2 does not include specific components for typography. Instead, you can use the style macro to apply Spectrum typography to any HTML element or component.

+

The font shorthand applies default values for the fontFamily, fontSize, fontWeight, lineHeight, and color properties, following Spectrum design pairings. These individual properties can also be set to override the default set by the shorthand.

+ 
{highlight(`

+  
Heading

+  
Body

+  
    
+    
  • List item
    • 
+  

+

+`)}
+

There are several different type scales.

+
    +
  • UI – use within interactive UI components.
    • +
  • Body – use for the content of pages that are primarily text.
    • +
  • Heading – use for headings in content pages.
    • +
  • Title – use for titles within UI components such as cards or panels.
    • +
  • Detail – use for less important metadata.
    • +
  • Code – use for source code.
    • +
+

Each type scale has a default size, and several t-shirt size modifiers for additional sizes.

+
+
    +
  • ui-xs
    • +
  • ui-sm
    • +
  • ui
    • +
  • ui-lg
    • +
  • ui-xl
    • +
  • ui-2xl
    • +
  • ui-3xl
    • +
+
    +
  • body-2xs
    • +
  • body-xs
    • +
  • body-sm
    • +
  • body
    • +
  • body-lg
    • +
  • body-xl
    • +
  • body-2xl
    • +
  • body-3xl
    • +
+
    +
  • heading-2xs
    • +
  • heading-xs
    • +
  • heading-sm
    • +
  • heading
    • +
  • heading-lg
    • +
  • heading-xl
    • +
  • heading-2xl
    • +
  • heading-3xl
    • +
+
    +
  • title-xs
    • +
  • title-sm
    • +
  • title
    • +
  • title-lg
    • +
  • title-xl
    • +
  • title-2xl
    • +
  • title-3xl
    • +
+
    +
  • detail-sm
    • +
  • detail
    • +
  • detail-lg
    • +
  • detail-xl
    • +
+
    +
  • code-sm
    • +
  • code
    • +
  • code-lg
    • +
  • code-xl
    • +
+
+ + Important Note + Only use {''} and {''} inside other Spectrum components with predefined styles, such as {''} and {''}. They do not include any styles by default, and should not be used standalone. Use HTML elements with the style macro directly instead. +

Conditional styles

The style macro also supports conditional styles, such as media queries, UI states such as hover and press, and component variants. Conditional values are defined as an object where each key is a condition. This keeps all values for each property together in one place so it is easy to see where overrides are coming from.

This example sets the padding of a div to 8px by default, and 32px at the large media query breakpoint (1024px) defined by Spectrum.

@@ -132,6 +220,20 @@ const styles = style({ ...horizontalStack(4), backgroundColor: 'base' });`)} +

Built-in Utilities

+

The focusRing utility generates styles for the standard Spectrum focus ring, allowing you to reuse it in custom components.

+ 
{highlight(`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Button} from 'react-aria-components';
+
+const buttonStyle = style({
+  ...focusRing(),
+  // ...
+});
+        
+export function CustomButton(props) {
+  return
) diff --git a/.storybook-s2/docs/color.macro.ts b/.storybook-s2/docs/color.macro.ts new file mode 100644 index 00000000000..a461713f311 --- /dev/null +++ b/.storybook-s2/docs/color.macro.ts @@ -0,0 +1,10 @@ +import {colorScale} from '../../packages/@react-spectrum/s2/style/tokens'; +import {style} from '../../packages/@react-spectrum/s2/style'; + +export function getColorScale(name: string) { + return Object.keys(colorScale(name)).map((k) => [k, colorSwatch.call(this, k)]); +} + +export function colorSwatch(color: string, type = 'backgroundColor') { + return style.call(this, {'--v': {type, value: color}, backgroundColor: '--v', size: 20, borderRadius: 'sm', borderWidth: 1, borderColor: 'gray-1000/15', borderStyle: 'solid'}); +}