CSS

To convert a token to CSS, you can import all the functions under the CSS namespace: @specifyapp/sdk/css

import { dimensionToCss, colorToCss, ... } from '@specifyapp/sdk/css';

Primitives tokens

Here is the list of the primitives tokens for the CSS parser with an example of their respective output type.

Border

Input:

{
  color: { model: 'hex', hex: '#ffffff', alpha: 0.5 },
  style: 'dashed',
  width: {
    value: 12,
    unit: 'px',
  },
  rectangleCornerRadii: null,
}

Output:

'12px dashed #ffffff80'

Breakpoint

Input:

{
  value: 12,
  unit: 'rem'
}

Output:

'12rem'

Color

RGB

Input:

{
  model: 'rgb',
  red: 12,
  green: 12,
  blue: 12,
  alpha: 0.5,
}

Output:

'rgba(12, 12, 12, 0.5)'

HEX

Input:

{
  model: 'hsb',
  hue: 12,
  saturation: 12,
  brightness: 12,
  alpha: 0.1,
}

Output:

'hsva(12, 12%, 12%, 0.1)'

HSB

Input:

{
  model: 'hex',
  hex: '#ff00ff',
  alpha: 0.5,
}

Output:

'#ff00ff80'

HSL

Input:

{
  model: 'hsl',
  hue: 12,
  saturation: 12,
  lightness: 12,
  alpha: 0.5,
}

Output:

'hsla(12, 12%, 12%, 0.5)'

LAB

Input:

{
  model: 'lab',
  bAxis: 12,
  aAxis: 12,
  lightness: 12,
  alpha: 0.5,
}

Output:

'lab(12% 12 12 / 0.5)'

LCH

Input:

{
  model: 'lch',
  chroma: 12,
  hue: 12,
  lightness: 12,
  alpha: 1,
}

Output:

'lch(12% 12 12)'

Cubic bezier

Input:

[0.12, 0.21, 0.12, 0.21]

Output:

'cubic-bezier(0.12, 0.21, 0.12, 0.21)'

Dimension

Input:

{
  value: 12,
  unit: 'px'
}

Output:

'12px'

Duration

Input:

{
  value: 1,
  unit: 's'
}

Output:

"1s"

Font weight

Input:

900

Output:

"900'

Gradient

Conic

Input:

{
  type: 'conic',
  colorStops: [
    {
      color: {
        model: 'hex',
        hex: '#ffffff',
        alpha: 1,
      },
      position: 0,
    },
    {
      color: {
        model: 'hex',
        hex: '#ffff00',
        alpha: 1,
      },
      position: 1,
    },
  ],
  angle: 12,
  position: 'center',
}

Output:

'conic-gradient(from 12deg at center, #ffffff 0%, #ffff00 100%)'

Linear

Input:

{
  type: 'linear',
  colorStops: [
    {
      color: {
        model: 'hex',
        hex: '#ffffff',
        alpha: 1,
      },
      position: 0,
    },
    {
      color: {
        model: 'hex',
        hex: '#ffff00',
        alpha: 1,
      },
      position: 1,
    },
  ],
  angle: 12,
}

Output:

'linear-gradient(12deg, #ffffff 0%, #ffff00 100%)'

Radial

Input:

{
  type: 'radial',
  colorStops: [
    {
      color: {
        model: 'hex',
        hex: '#ffffff',
        alpha: 1,
      },
      position: 0,
    },
    {
      color: {
        model: 'hex',
        hex: '#ffff00',
        alpha: 1,
      },
      position: 1,
    },
  ],
  position: 'center',
}

Output:

'radial-gradient(circle at center, #ffffff 0%, #ffff00 100%)'

Gradients

Input:

[
  {
    type: 'conic',
    colorStops: [
      {
        color: {
          model: 'hex',
          hex: '#ffffff',
          alpha: 1,
        },
        position: 0,
      },
      {
        color: {
          model: 'hex',
          hex: '#ffff00',
          alpha: 1,
        },
        position: 1,
      },
    ],
    angle: 12,
    position: 'center',
  },
  {
    type: 'linear',
    colorStops: [
      {
        color: {
          model: 'hex',
          hex: '#ffffff',
          alpha: 1,
        },
        position: 0,
      },
      {
        color: {
          model: 'hex',
          hex: '#ffff00',
          alpha: 1,
        },
        position: 1,
      },
    ],
    angle: 12,
  },
]

Output:

'conic-gradient(from 12deg at center, #ffffff 0%, #ffff00 100%), linear-gradient(12deg, #ffffff 0%, #ffff00 100%)'

Opacity

Input:

0.1

Output:

'0.1'

Radii

Input:

[
  { unit: 'px', value: 12 },
  { unit: '%', value: 24 },
]

Output:

'12px 24%'

Radius

Input:

{ unit: 'px', value: 24 }

Output:

'24px'

Shadow

Input:

{
  color: { model: 'hex', hex: '#ffffff', alpha: 1 },
  offsetX: { value: 12, unit: 'px' },
  offsetY: { value: 12, unit: 'px' },
  blurRadius: { value: 12, unit: 'px' },
  spreadRadius: { value: 12, unit: 'px' },
  type: 'inner',
}

Output:

'inset 12px 12px 12px 12px #ffffff'

Shadows

Input:

[
  {
    color: { model: 'hex', hex: '#ffffff', alpha: 1 },
    offsetX: { value: 12, unit: 'px' },
    offsetY: { value: 12, unit: 'px' },
    blurRadius: { value: 12, unit: 'px' },
    spreadRadius: { value: 12, unit: 'px' },
    type: 'inner',
  },
  {
    color: { model: 'hex', hex: '#ffffff', alpha: 1 },
    offsetX: { value: 12, unit: 'px' },
    offsetY: { value: 12, unit: 'px' },
    blurRadius: { value: 12, unit: 'px' },
    spreadRadius: { value: 12, unit: 'px' },
    type: 'inner',
  },
]

Output:

'inset 12px 12px 12px 12px #ffffff, inset 12px 12px 12px 12px #ffffff'

Spacing

Input:

{ unit: 'px', value: 24 }

Output:

'24px'

Spacings

Input:

[
  { unit: 'px', value: 12 },
  { unit: '%', value: 24 },
  { unit: 'rem', value: 4 },
]

Output:

'12px 24% 4rem'

Steps timing function

Input:

{
  stepsCount: 2,
  jumpTerm: 'start',
}

Output:

'steps(2, start)'

Z-index

Input:

10

Output:

"10"

Composites tokens

Here is the list of the composites tokens for the CSS parser with an example of their respective output type.

Font

Input:

{
  family: 'fontFamily',
  postScriptName: 'Postscript',
  files: [],
  weight: 'bold',
  style: 'italic',
}

Output:

{
  'font-style': 'italic',
  'font-family': "'Postscript'",
  'font-weight': 'bold',
}

Text style

Input:

{
  font: {
    family: 'textStyleFamily',
    postScriptName: 'Postscript',
    files: [],
    weight: 'bold',
    style: 'italic',
  },
  color: {
    model: 'hex',
    hex: '#ffffff',
    alpha: 0.5,
  },
  fontSize: { value: 12, unit: 'em' },
  fontFeatures: ['all-petite-caps'],
  lineHeight: { value: 12, unit: 'rem' },
  letterSpacing: { value: 12, unit: 'rem' },
  paragraphSpacing: { value: 12, unit: 'rem' },
  textAlignHorizontal: 'center',
  textAlignVertical: 'bottom',
  textDecoration: 'dashed',
  textIndent: { value: 12, unit: 'rem' },
  textTransform: 'capitalize',
}

Output:

{
  'font-style': 'italic',
  'font-family': "'Postscript'",
  'font-weight': 'bold',
  'font-size': '12em',
  color: '#ffffff80',
  'text-indent': '12rem',
  'line-height': '12rem',
  'letter-spacing': '12rem',
  'text-align': 'center',
  'text-transform': 'capitalize',
  'text-decoration': 'dashed',
}

Transition

Input:

{
  duration: {
    value: 12,
    unit: 's',
  },
  delay: {
    value: 10,
    unit: 'ms',
  },
  timingFunction: {
    jumpTerm: 'end',
    stepsCount: 2,
  },
}

Output:

{
  delay: '10ms',
  duration: '12s',
  'timing-function': 'steps(2, end)',
}