# Style Macro

The `style` macro supports a constrained set of values per property that conform to Spectrum 2.

## Colors

All Spectrum 2 color tokens are available across color properties (e.g., `backgroundColor`, `color`, `borderColor`).
`baseColors` consists of the semantic and global colors listed below.

#### 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.

* `base`
* `layer-1`
* `layer-2`
* `pasteboard`
* `elevated`
* `accent`
* `accent-subtle`
* `neutral`
* `neutral-subdued`
* `neutral-subtle`
* `negative`
* `negative-subtle`
* `informative`
* `informative-subtle`
* `positive`
* `positive-subtle`
* `notice`
* `notice-subtle`
* `gray`
* `gray-subtle`
* `red`
* `red-subtle`
* `orange`
* `orange-subtle`
* `yellow`
* `yellow-subtle`
* `chartreuse`
* `chartreuse-subtle`
* `celery`
* `celery-subtle`
* `green`
* `green-subtle`
* `seafoam`
* `seafoam-subtle`
* `cyan`
* `cyan-subtle`
* `blue`
* `blue-subtle`
* `indigo`
* `indigo-subtle`
* `purple`
* `purple-subtle`
* `fuchsia`
* `fuchsia-subtle`
* `magenta`
* `magenta-subtle`
* `pink`
* `pink-subtle`
* `turquoise`
* `turquoise-subtle`
* `cinnamon`
* `cinnamon-subtle`
* `brown`
* `brown-subtle`
* `silver`
* `silver-subtle`
* `disabled`

#### 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.

* `accent`
* `neutral`
* `neutral-subdued`
* `negative`
* `disabled`
* `heading`
* `title`
* `body`
* `detail`
* `code`

#### 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.

* `accent` scale (e.g., `accent-100`, `accent-200`, ..., `accent-1600`)
* `informative` scale (e.g., `informative-100`, `informative-200`, ..., `informative-1600`)
* `negative` scale (e.g., `negative-100`, `negative-200`, ..., `negative-1600`)
* `notice` scale (e.g., `notice-100`, `notice-200`, ..., `notice-1600`)
* `positive` scale (e.g., `positive-100`, `positive-200`, ..., `positive-1600`)

#### Global colors

The following values are available across all color properties.

* `gray` scale (e.g., `gray-25`, `gray-50`, `gray-75`, `gray-100`, ..., `gray-1600`)
* `blue` scale (e.g., `blue-100`, `blue-200`, ..., `blue-1600`)
* `red` scale (e.g., `red-100`, `red-200`, ..., `red-1600`)
* `orange` scale (e.g., `orange-100`, `orange-200`, ..., `orange-1600`)
* `yellow` scale (e.g., `yellow-100`, `yellow-200`, ..., `yellow-1600`)
* `chartreuse` scale (e.g., `chartreuse-100`, `chartreuse-200`, ..., `chartreuse-1600`)
* `celery` scale (e.g., `celery-100`, `celery-200`, ..., `celery-1600`)
* `green` scale (e.g., `green-100`, `green-200`, ..., `green-1600`)
* `seafoam` scale (e.g., `seafoam-100`, `seafoam-200`, ..., `seafoam-1600`)
* `cyan` scale (e.g., `cyan-100`, `cyan-200`, ..., `cyan-1600`)
* `indigo` scale (e.g., `indigo-100`, `indigo-200`, ..., `indigo-1600`)
* `purple` scale (e.g., `purple-100`, `purple-200`, ..., `purple-1600`)
* `fuchsia` scale (e.g., `fuchsia-100`, `fuchsia-200`, ..., `fuchsia-1600`)
* `magenta` scale (e.g., `magenta-100`, `magenta-200`, ..., `magenta-1600`)
* `pink` scale (e.g., `pink-100`, `pink-200`, ..., `pink-1600`)
* `turquoise` scale (e.g., `turquoise-100`, `turquoise-200`, ..., `turquoise-1600`)
* `brown` scale (e.g., `brown-100`, `brown-200`, ..., `brown-1600`)
* `silver` scale (e.g., `silver-100`, `silver-200`, ..., `silver-1600`)
* `cinnamon` scale (e.g., `cinnamon-100`, `cinnamon-200`, ..., `cinnamon-1600`)

<StyleMacroProperties properties={getPropertyDefinitions('color')}/>

## Dimensions

Spacing props like `margin` and `padding` accept values on a **4px grid**. These are specified in `px` and get converted to `rem`. In addition to numbers, these named options are available:

* `edge-to-text` – default spacing between the edge of a control and its text. Relative to control height.
* `pill` – default spacing between the edge of a pill-shaped control and its text. Relative to control height.
* `text-to-control` – default spacing between text and a control (e.g., label and input). Scales with font size.
* `text-to-visual` – default spacing between text and a visual element (e.g., icon). Scales with font size.

Size props like `width` and `height` accept arbitrary pixel values. Values are converted to `rem` and multiplied by 1.25x on touch devices to increase hit targets.

<StyleMacroProperties properties={getPropertyDefinitions('dimensions')}/>

## Text

Spectrum 2 typography can be applied via the `font` [shorthand](#shorthands), which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs.

```tsx
<main>
  <h1 className={style({font: 'heading-xl'})}>Heading</h1>
  <p className={style({font: 'body'})}>Body</p>
  <ul className={style({font: 'body-sm', fontWeight: 'bold'})}>
    <li>List item</li>
  </ul>
</main>
```

Type scales include: UI, Body, Heading, Title, Detail, and Code. Each scale has a default and additional t-shirt sizes (e.g., `ui-sm`, `heading-2xl`, `code-xl`).

<S2Typography/>

<StyleMacroProperties properties={getPropertyDefinitions('text')}/>

## Effects

<StyleMacroProperties properties={getPropertyDefinitions('effects')}/>

## Layout

<StyleMacroProperties properties={getPropertyDefinitions('layout')}/>

## Misc

<StyleMacroProperties properties={getPropertyDefinitions('misc')}/>

## Shorthands

Shorthands apply their provided value to commonly grouped properties.

<StyleMacroProperties properties={getShorthandDefinitions('shorthand')}/>

## Conditions

<StyleMacroProperties properties={getPropertyDefinitions('conditions')}/>