@workday/canvas-kit-docs/dist/mdx/style-props/STYLE_PROPS.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock, StylePropsTable} from '@workday/canvas-kit-docs';

import {
  backgroundStyleFnConfigs,
  borderStyleFnConfigs,
  colorStyleFnConfigs,
  depthStyleFnConfigs,
  flexStyleFnConfigs,
  flexItemStyleFnConfigs,
  gridStyleFnConfigs,
  gridItemStyleFnConfigs,
  layoutStyleFnConfigs,
  otherStyleFnConfigs,
  positionStyleFnConfigs,
  spaceStyleFnConfigs,
  textStyleFnConfigs,
} from '@workday/canvas-kit-react/layout';

import Background from './examples/Background';
import Border from './examples/Border';
import Color from './examples/Color';
import Depth from './examples/Depth';
import FlexExample from './examples/Flex';
import FlexItem from './examples/FlexItem';
import GridExample from './examples/Grid';
import GridItem from './examples/GridItem';
import Layout from './examples/Layout';
import Other from './examples/Other';
import Position from './examples/Position';
import Space from './examples/Space';
import Text from './examples/Text';


# Style Props

Style props provide a common, ergonomic API for modifying a component's styles by passing styles
with props.

## System Prop Values

Many style props are design-system-aware and translate `SystemPropValues` for you automatically. In
the example below, the `padding` prop translates the value `s` to `16px` and `frenchVanilla100` to
`#ffffff`. These `SystemPropValues` are also included in our types, so your IDE's intellisense
should suggest these values as you work. This allows you to use Canvas design tokens fluidly without
disrupting your workflow.

```tsx
<Box padding="s" backgroundColor="frenchVanilla100">
  Hello, style props!
</Box>
```

There are seven types of system prop values: `color`, `depth`, `font`, `fontSize`, `fontWeight`,
`shape`, and `space` — corresponding to our Canvas design tokens. Each style prop section below
includes a table. The "System" column in that table will tell you which system prop values are
supported.

## Background

Background style props allow you to adjust the background styles of components.

<ExampleCodeBlock code={Background} />

<StylePropsTable styleProps={backgroundStyleFnConfigs} />

## Border

Border style props allow you to adjust the border styles of components.

<ExampleCodeBlock code={Border} />

<StylePropsTable styleProps={borderStyleFnConfigs} />

## Color

Color style props allow you to adjust the color styles of components.

<ExampleCodeBlock code={Color} />

<StylePropsTable styleProps={colorStyleFnConfigs} />

## Depth

Depth style props allow you to adjust the depth styles of components.

<ExampleCodeBlock code={Depth} />

<StylePropsTable styleProps={depthStyleFnConfigs} />

## Flex

Flex style props allow you to adjust the flex styles of components.

<ExampleCodeBlock code={FlexExample} />

<StylePropsTable styleProps={flexStyleFnConfigs} />

## Flex Item

Flex item style props allow you to adjust the flex item styles of components.

<ExampleCodeBlock code={FlexItem} />

<StylePropsTable styleProps={flexItemStyleFnConfigs} />

## Grid

Grid style props allow you to adjust the grid styles of components.

<ExampleCodeBlock code={GridExample} />

<StylePropsTable styleProps={gridStyleFnConfigs} />

## Grid Item

Grid item style props allow you to adjust the grid item styles of components.

<ExampleCodeBlock code={GridItem} />

<StylePropsTable styleProps={gridItemStyleFnConfigs} />

## Layout

Layout style props allow you to adjust the layout styles of components.

<ExampleCodeBlock code={Layout} />

<StylePropsTable styleProps={layoutStyleFnConfigs} />

## Other

Other style props allow you to adjust the other, miscellaneous styles of components.

<ExampleCodeBlock code={Other} />

<StylePropsTable styleProps={otherStyleFnConfigs} />

## Position

Position style props allow you to adjust the position styles of components.

<ExampleCodeBlock code={Position} />

<StylePropsTable styleProps={positionStyleFnConfigs} />

## Space

Space style props allow you to adjust the space styles of components.

<ExampleCodeBlock code={Space} />

<StylePropsTable styleProps={spaceStyleFnConfigs} />

## Text

Text style props allow you to adjust the text styles of components.

<ExampleCodeBlock code={Text} />

<StylePropsTable styleProps={textStyleFnConfigs} />