# CSS

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

```typescript
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:**

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

**Output:**

```typescript
'12px dashed #ffffff80'
```

### Breakpoint

**Input:**

```typescript
{
  value: 12,
  unit: 'rem'
}
```

**Output:**

```typescript
'12rem'
```

### Color

#### RGB

**Input:**

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

**Output:**

```typescript
'rgba(12, 12, 12, 0.5)'
```

#### HEX

**Input:**

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

**Output:**

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

#### HSB

**Input:**

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

**Output:**

```typescript
'#ff00ff80'
```

#### HSL

**Input:**

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

**Output:**

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

#### LAB

**Input:**

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

**Output:**

```typescript
'lab(12% 12 12 / 0.5)'
```

#### LCH

**Input:**

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

**Output:**

```typescript
'lch(12% 12 12)'
```

### Cubic bezier

**Input:**

```typescript
[0.12, 0.21, 0.12, 0.21]
```

**Output:**

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

### Dimension

**Input:**

```typescript
{
  value: 12,
  unit: 'px'
}
```

**Output:**

```typescript
'12px'
```

### Duration

**Input:**

```typescript
{
  value: 1,
  unit: 's'
}
```

**Output:**

```typescript
"1s"
```

### Font weight

**Input:**

```typescript
900
```

**Output:**

```typescript
"900'
```

### Gradient

#### Conic

**Input:**

```typescript
{
  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:**

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

#### Linear

**Input:**

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

**Output:**

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

#### Radial

**Input:**

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

**Output:**

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

### Gradients

**Input:**

```typescript
[
  {
    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:**

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

### Opacity

**Input:**

```typescript
0.1
```

**Output:**

```typescript
'0.1'
```

### Radii

**Input:**

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

**Output:**

```typescript
'12px 24%'
```

### Radius

**Input:**

```typescript
{ unit: 'px', value: 24 }
```

**Output:**

```typescript
'24px'
```

### Shadow

**Input:**

```typescript
{
  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:**

```typescript
'inset 12px 12px 12px 12px #ffffff'
```

### Shadows

**Input:**

```typescript
[
  {
    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:**

```typescript
'inset 12px 12px 12px 12px #ffffff, inset 12px 12px 12px 12px #ffffff'
```

### Spacing

**Input:**

```typescript
{ unit: 'px', value: 24 }
```

**Output:**

```typescript
'24px'
```

### Spacings

**Input:**

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

**Output:**

```typescript
'12px 24% 4rem'
```

### Steps timing function

**Input:**

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

**Output:**

```typescript
'steps(2, start)'
```

### Z-index

**Input:**

```typescript
10
```

**Output:**

```typescript
"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:**

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

**Output:**

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

### Text style

**Input:**

```typescript
{
  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:**

```typescript
{
  '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:**

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

**Output:**

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