Transforms

Transforms are functions that manipulate a style rule.

bg

Transforms the bg key into background.

const style = csx({
  bg: 'black',
})

Becomes:

const style = {
  background: 'black',
}

fg

Transforms the fg key into color. Fg stands for the foreground.

const style = csx({
  fg: 'black',
})

Becomes:

const style = {
  color: 'black',
}

radii

Transforms the radii key into borderRadius.

const style = csx({
  radii: '1rem',
})

Becomes:

const style = {
  borderRadius: '1rem',
}

z

Transforms the z key into zIndex.

const style = csx({
  z: 999,
})

Becomes:

const style = {
  zIndex: 999,
}

boxShadow

Transforms the box-shadow tokens deeply.

const style = csx({
  boxShadow: '$space-1 $color-red-100',
})

Becomes:

const style = {
  boxShadow: '0.0625rem red',
}

border

Transforms the border tokens deeply.

const style = csx({
  border: '$border-width-1 solid $color-red-100',
})

Becomes:

const style = {
  boxShadow: '0.0625rem solid red',
}

container

Transforms the container tokens deeply.

const style = csx({
  container: '$container-sidebar / inline-size',
})

Becomes:

const style = {
  container: 'sl-containers-sidebar / inline-size',
}

font

Transforms the font tokens deeply.

const style = csx({
  font: '$font-size-1 $font-family-sans',
})

Becomes:

const style = {
  font: '1rem sans-serif',
}

margin

Transforms the margin tokens deeply.

const style = csx({
  margin: '1rem $space-1 1rem',
})

Becomes:

const style = {
  margin: '1rem var(--sl-space-1) 1rem',
}

marginX

Transforms marginX into marginLeft and marginRight.

const style = csx({
  marginX: '1rem',
})

Becomes:

const style = {
  marginLeft: '1rem',
  marginRight: '1rem',
}

marginY

Transforms marginY into marginTop and marginBottom.

const style = csx({
  marginY: '1rem',
})

Becomes:

const style = {
  marginTop: '1rem',
  marginBottom: '1rem',
}

padding

Transforms the padding tokens deeply.

const style = csx({
  padding: '1rem $space-1 1rem',
})

Becomes:

const style = {
  padding: '1rem var(--sl-space-1) 1rem',
}

paddingX

Transforms paddingX into paddingLeft and paddingRight.

const style = csx({
  paddingX: '1rem',
})

Becomes:

const style = {
  paddingLeft: '1rem',
  paddingRight: '1rem',
}

paddingY

Transforms paddingY into paddingTop and paddingBottom.

const style = csx({
  paddingY: '1rem',
})

Becomes:

const style = {
  paddingTop: '1rem',
  paddingBottom: '1rem',
}

size

Transforms size into height and width.

const style = csx({
  size: '1rem',
})

Becomes:

const style = {
  height: '1rem',
  width: '1rem',
}

minSize

Transforms minSize into minHeight and minWidth.

const style = csx({
  size: '1rem',
})

Becomes:

const style = {
  minHeight: '1rem',
  minWidth: '1rem',
}

maxSize

Transforms maxSize into maxHeight and maxWidth.

const style = csx({
  size: '1rem',
})

Becomes:

const style = {
  maxHeight: '1rem',
  maxWidth: '1rem',
}

absoluteSize

Transforms absoluteSize into minHeight, minWidth, maxHeight, and maxWidth.

const style = csx({
  absoluteSize: '1rem',
})

Becomes:

const style = {
  minHeight: '1rem',
  minWidth: '1rem',
  maxHeight: '1rem',
  maxWidth: '1rem',
}

Cascade Layers Namespaces