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:
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:
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:
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:
Duration
Input:
{
value: 1,
unit: 's'
}
Output:
Font weight
Input:
Output:
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:
Output:
Radii
Input:
[
{ unit: 'px', value: 12 },
{ unit: '%', value: 24 },
]
Output:
Radius
Input:
{ unit: 'px', value: 24 }
Output:
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:
Spacings
Input:
[
{ unit: 'px', value: 12 },
{ unit: '%', value: 24 },
{ unit: 'rem', value: 4 },
]
Output:
Steps timing function
Input:
{
stepsCount: 2,
jumpTerm: 'start',
}
Output:
Z-index
Input:
Output:
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)',
}
