---
title: "ThemedCSSProps"
description: "The style-object type accepted by [css](https://pitlane.tools/package/theme/function/css.md) and every [tva](https://pitlane.tools/package/theme/function/tva.md) slot."
url: "https://pitlane.tools/package/theme/interface/ThemedCSSProps"
---

# ThemedCSSProps

```ts
import type { ThemedCSSProps } from "@pitlane/theme";
```

The style-object type accepted by [css](https://pitlane.tools/package/theme/function/css.md) and every [tva](https://pitlane.tools/package/theme/function/tva.md) slot.

Two layers stack. Token-mapped longhands enforce the matching token brand plus the small set of CSS keywords the table lists, and the literal `0` where the value is a length. Every other property carries csstype's value union, so closed-grammar properties such as `display`, `position`, `resize`, and `overflow` only accept their real keywords. Unknown keys — nested selectors, at-rules, and CSS custom properties — recurse or stay loose.

`Wide` below is the CSS-wide keyword union `"inherit" | "initial" | "unset" | "revert" | "revert-layer"`.

| Property family | Accepted values |
| --- | --- |
| `color`, `backgroundColor`, `borderColor`, the four per-side and two logical border colors, `outlineColor`, `textDecorationColor`, `columnRuleColor`, `caretColor`, `accentColor`, `fill`, `stroke` | `ColorToken \| "transparent" \| "currentColor" \| Wide` |
| `width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, their `blockSize`/`inlineSize` logical forms, `flexBasis` | `DimensionToken \| 0 \| "auto" \| "min-content" \| "max-content" \| "fit-content" \| Wide` |
| `top`, `right`, `bottom`, `left`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, and their `inset*`/`margin*` logical start/end forms | `DimensionToken \| 0 \| "auto" \| Wide` |
| `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, the logical padding start/end forms, `fontSize`, `textIndent`, `outlineOffset`, the four corner radii, `rowGap`, `columnGap` | `DimensionToken \| 0 \| Wide` |
| `letterSpacing`, `wordSpacing` | `DimensionToken \| 0 \| "normal" \| Wide` |
| `borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `outlineWidth` | `DimensionToken \| 0 \| "thin" \| "medium" \| "thick" \| Wide` |
| `padding`, `borderRadius` | a single value as the longhand, or a tuple of 1–4 `DimensionToken \| 0` values, space-joined |
| `margin`, `inset` | a single value as the longhand, or a tuple of 1–4 `DimensionToken \| 0 \| "auto"` values, space-joined |
| `gap`, `paddingBlock`, `paddingInline` | the longhand value, or a 2-tuple of `DimensionToken \| 0` |
| `marginBlock`, `marginInline`, `insetBlock`, `insetInline` | the longhand value, or a 2-tuple of `DimensionToken \| 0 \| "auto"` |
| `fontFamily` | `FontFamilyToken \| Wide` |
| `fontWeight` | `FontWeightToken \| "normal" \| "bold" \| "lighter" \| "bolder" \| Wide` |
| `lineHeight` | `NumberToken \| DimensionToken \| "normal" \| Wide` |
| `opacity`, `zIndex`, `flexGrow`, `flexShrink`, `order` | `NumberToken \| number \| Wide` (plain numbers stay legal) |
| `transitionDuration`, `transitionDelay`, `animationDuration`, `animationDelay` | `DurationToken \| Wide` |
| `transitionTimingFunction`, `animationTimingFunction` | `CubicBezierToken \| "ease" \| "linear" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "step-start" \| "step-end" \| Wide` |
| `boxShadow`, `textShadow` | `ShadowToken \| "none" \| Wide` |
| every other CSS property | csstype's union for that property, with `dimension` tokens for lengths and `duration` tokens for times |

Tuple items take no CSS-wide keyword; `Wide` applies only to a single value.

## See

[css](https://pitlane.tools/package/theme/function/css.md)

## Extends

- `KeywordProps`
- `TokenMappedProps`

## Indexable

```ts
[key: string]:
  | string
  | number
  | ThemedCSSProps
  | readonly (string | number)[]
  | null
  | undefined
```

## Properties

### accentColor?

```ts
optional accentColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.accentColor
```

---

### animationDelay?

```ts
optional animationDelay?: DurationToken | Wide;
```

#### Inherited from

```ts
TokenMappedProps.animationDelay
```

---

### animationDuration?

```ts
optional animationDuration?: DurationToken | Wide;
```

#### Inherited from

```ts
TokenMappedProps.animationDuration
```

---

### animationTimingFunction?

```ts
optional animationTimingFunction?: Easing;
```

#### Inherited from

```ts
TokenMappedProps.animationTimingFunction
```

---

### backgroundColor?

```ts
optional backgroundColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.backgroundColor
```

---

### blockSize?

```ts
optional blockSize?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.blockSize
```

---

### borderBlockColor?

```ts
optional borderBlockColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderBlockColor
```

---

### borderBottomColor?

```ts
optional borderBottomColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderBottomColor
```

---

### borderBottomLeftRadius?

```ts
optional borderBottomLeftRadius?: Size;
```

#### Inherited from

```ts
TokenMappedProps.borderBottomLeftRadius
```

---

### borderBottomRightRadius?

```ts
optional borderBottomRightRadius?: Size;
```

#### Inherited from

```ts
TokenMappedProps.borderBottomRightRadius
```

---

### borderBottomWidth?

```ts
optional borderBottomWidth?: LineWidth;
```

#### Inherited from

```ts
TokenMappedProps.borderBottomWidth
```

---

### borderColor?

```ts
optional borderColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderColor
```

---

### borderInlineColor?

```ts
optional borderInlineColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderInlineColor
```

---

### borderLeftColor?

```ts
optional borderLeftColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderLeftColor
```

---

### borderLeftWidth?

```ts
optional borderLeftWidth?: LineWidth;
```

#### Inherited from

```ts
TokenMappedProps.borderLeftWidth
```

---

### borderRadius?

```ts
optional borderRadius?: Size | Repeat1to4<PadItem>;
```

#### Inherited from

```ts
TokenMappedProps.borderRadius
```

---

### borderRightColor?

```ts
optional borderRightColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderRightColor
```

---

### borderRightWidth?

```ts
optional borderRightWidth?: LineWidth;
```

#### Inherited from

```ts
TokenMappedProps.borderRightWidth
```

---

### borderTopColor?

```ts
optional borderTopColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.borderTopColor
```

---

### borderTopLeftRadius?

```ts
optional borderTopLeftRadius?: Size;
```

#### Inherited from

```ts
TokenMappedProps.borderTopLeftRadius
```

---

### borderTopRightRadius?

```ts
optional borderTopRightRadius?: Size;
```

#### Inherited from

```ts
TokenMappedProps.borderTopRightRadius
```

---

### borderTopWidth?

```ts
optional borderTopWidth?: LineWidth;
```

#### Inherited from

```ts
TokenMappedProps.borderTopWidth
```

---

### bottom?

```ts
optional bottom?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.bottom
```

---

### boxShadow?

```ts
optional boxShadow?: ShadowLike;
```

#### Inherited from

```ts
TokenMappedProps.boxShadow
```

---

### caretColor?

```ts
optional caretColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.caretColor
```

---

### color?

```ts
optional color?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.color
```

---

### columnGap?

```ts
optional columnGap?: Size;
```

#### Inherited from

```ts
TokenMappedProps.columnGap
```

---

### columnRuleColor?

```ts
optional columnRuleColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.columnRuleColor
```

---

### fill?

```ts
optional fill?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.fill
```

---

### flexBasis?

```ts
optional flexBasis?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.flexBasis
```

---

### flexGrow?

```ts
optional flexGrow?: Numeric;
```

#### Inherited from

```ts
TokenMappedProps.flexGrow
```

---

### flexShrink?

```ts
optional flexShrink?: Numeric;
```

#### Inherited from

```ts
TokenMappedProps.flexShrink
```

---

### fontFamily?

```ts
optional fontFamily?: Wide | FontFamilyToken;
```

#### Inherited from

```ts
TokenMappedProps.fontFamily
```

---

### fontSize?

```ts
optional fontSize?: Size;
```

#### Inherited from

```ts
TokenMappedProps.fontSize
```

---

### fontWeight?

```ts
optional fontWeight?:
  | "normal"
  | Wide
  | FontWeightToken
  | "bold"
  | "lighter"
  | "bolder";
```

#### Inherited from

```ts
TokenMappedProps.fontWeight
```

---

### gap?

```ts
optional gap?: Size | readonly [PadItem, PadItem];
```

#### Inherited from

```ts
TokenMappedProps.gap
```

---

### height?

```ts
optional height?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.height
```

---

### inlineSize?

```ts
optional inlineSize?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.inlineSize
```

---

### inset?

```ts
optional inset?: SizeAuto | Repeat1to4<MarginItem>;
```

#### Inherited from

```ts
TokenMappedProps.inset
```

---

### insetBlock?

```ts
optional insetBlock?: SizeAuto | readonly [MarginItem, MarginItem];
```

#### Inherited from

```ts
TokenMappedProps.insetBlock
```

---

### insetBlockEnd?

```ts
optional insetBlockEnd?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.insetBlockEnd
```

---

### insetBlockStart?

```ts
optional insetBlockStart?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.insetBlockStart
```

---

### insetInline?

```ts
optional insetInline?: SizeAuto | readonly [MarginItem, MarginItem];
```

#### Inherited from

```ts
TokenMappedProps.insetInline
```

---

### insetInlineEnd?

```ts
optional insetInlineEnd?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.insetInlineEnd
```

---

### insetInlineStart?

```ts
optional insetInlineStart?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.insetInlineStart
```

---

### left?

```ts
optional left?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.left
```

---

### letterSpacing?

```ts
optional letterSpacing?: SpacingText;
```

#### Inherited from

```ts
TokenMappedProps.letterSpacing
```

---

### lineHeight?

```ts
optional lineHeight?:
  | DimensionToken
  | "normal"
  | Wide
  | NumberToken;
```

#### Inherited from

```ts
TokenMappedProps.lineHeight
```

---

### margin?

```ts
optional margin?: SizeAuto | Repeat1to4<MarginItem>;
```

#### Inherited from

```ts
TokenMappedProps.margin
```

---

### marginBlock?

```ts
optional marginBlock?: SizeAuto | readonly [MarginItem, MarginItem];
```

#### Inherited from

```ts
TokenMappedProps.marginBlock
```

---

### marginBlockEnd?

```ts
optional marginBlockEnd?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginBlockEnd
```

---

### marginBlockStart?

```ts
optional marginBlockStart?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginBlockStart
```

---

### marginBottom?

```ts
optional marginBottom?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginBottom
```

---

### marginInline?

```ts
optional marginInline?: SizeAuto | readonly [MarginItem, MarginItem];
```

#### Inherited from

```ts
TokenMappedProps.marginInline
```

---

### marginInlineEnd?

```ts
optional marginInlineEnd?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginInlineEnd
```

---

### marginInlineStart?

```ts
optional marginInlineStart?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginInlineStart
```

---

### marginLeft?

```ts
optional marginLeft?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginLeft
```

---

### marginRight?

```ts
optional marginRight?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginRight
```

---

### marginTop?

```ts
optional marginTop?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.marginTop
```

---

### maxBlockSize?

```ts
optional maxBlockSize?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.maxBlockSize
```

---

### maxHeight?

```ts
optional maxHeight?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.maxHeight
```

---

### maxInlineSize?

```ts
optional maxInlineSize?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.maxInlineSize
```

---

### maxWidth?

```ts
optional maxWidth?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.maxWidth
```

---

### minBlockSize?

```ts
optional minBlockSize?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.minBlockSize
```

---

### minHeight?

```ts
optional minHeight?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.minHeight
```

---

### minInlineSize?

```ts
optional minInlineSize?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.minInlineSize
```

---

### minWidth?

```ts
optional minWidth?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.minWidth
```

---

### opacity?

```ts
optional opacity?: Numeric;
```

#### Inherited from

```ts
TokenMappedProps.opacity
```

---

### order?

```ts
optional order?: Numeric;
```

#### Inherited from

```ts
TokenMappedProps.order
```

---

### outlineColor?

```ts
optional outlineColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.outlineColor
```

---

### outlineOffset?

```ts
optional outlineOffset?: Size;
```

#### Inherited from

```ts
TokenMappedProps.outlineOffset
```

---

### outlineWidth?

```ts
optional outlineWidth?: LineWidth;
```

#### Inherited from

```ts
TokenMappedProps.outlineWidth
```

---

### padding?

```ts
optional padding?: Size | Repeat1to4<PadItem>;
```

#### Inherited from

```ts
TokenMappedProps.padding
```

---

### paddingBlock?

```ts
optional paddingBlock?: Size | readonly [PadItem, PadItem];
```

#### Inherited from

```ts
TokenMappedProps.paddingBlock
```

---

### paddingBlockEnd?

```ts
optional paddingBlockEnd?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingBlockEnd
```

---

### paddingBlockStart?

```ts
optional paddingBlockStart?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingBlockStart
```

---

### paddingBottom?

```ts
optional paddingBottom?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingBottom
```

---

### paddingInline?

```ts
optional paddingInline?: Size | readonly [PadItem, PadItem];
```

#### Inherited from

```ts
TokenMappedProps.paddingInline
```

---

### paddingInlineEnd?

```ts
optional paddingInlineEnd?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingInlineEnd
```

---

### paddingInlineStart?

```ts
optional paddingInlineStart?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingInlineStart
```

---

### paddingLeft?

```ts
optional paddingLeft?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingLeft
```

---

### paddingRight?

```ts
optional paddingRight?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingRight
```

---

### paddingTop?

```ts
optional paddingTop?: Size;
```

#### Inherited from

```ts
TokenMappedProps.paddingTop
```

---

### right?

```ts
optional right?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.right
```

---

### rowGap?

```ts
optional rowGap?: Size;
```

#### Inherited from

```ts
TokenMappedProps.rowGap
```

---

### stroke?

```ts
optional stroke?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.stroke
```

---

### textDecorationColor?

```ts
optional textDecorationColor?: ColorLike;
```

#### Inherited from

```ts
TokenMappedProps.textDecorationColor
```

---

### textIndent?

```ts
optional textIndent?: Size;
```

#### Inherited from

```ts
TokenMappedProps.textIndent
```

---

### textShadow?

```ts
optional textShadow?: ShadowLike;
```

#### Inherited from

```ts
TokenMappedProps.textShadow
```

---

### top?

```ts
optional top?: SizeAuto;
```

#### Inherited from

```ts
TokenMappedProps.top
```

---

### transitionDelay?

```ts
optional transitionDelay?: DurationToken | Wide;
```

#### Inherited from

```ts
TokenMappedProps.transitionDelay
```

---

### transitionDuration?

```ts
optional transitionDuration?: DurationToken | Wide;
```

#### Inherited from

```ts
TokenMappedProps.transitionDuration
```

---

### transitionTimingFunction?

```ts
optional transitionTimingFunction?: Easing;
```

#### Inherited from

```ts
TokenMappedProps.transitionTimingFunction
```

---

### width?

```ts
optional width?: SizeIntrinsic;
```

#### Inherited from

```ts
TokenMappedProps.width
```

---

### wordSpacing?

```ts
optional wordSpacing?: SpacingText;
```

#### Inherited from

```ts
TokenMappedProps.wordSpacing
```

---

### zIndex?

```ts
optional zIndex?: Numeric;
```

#### Inherited from

```ts
TokenMappedProps.zIndex
```

761 more properties are inherited from `KeywordProps` and not listed individually.