jellyfish_designtokens
Version:
Ultimate design tokens from Jelly Fish Design System
639 lines • 23.2 kB
JSON
{
"jf": {
"button": {
"base": {
"regular": {
"size": {
"sm": {
"value": "{jf.form-component.base.size.height.sm}",
"type": "dimension"
},
"md": {
"value": "{jf.form-component.base.size.height.md}",
"type": "dimension"
},
"lg": {
"value": "{jf.form-component.base.size.height.lg}",
"type": "dimension"
},
"min-width": {
"value": "{jf.component.dimension.xl2}",
"type": "dimension"
}
},
"spacing": {
"sm": {
"value": "{jf.form-component.base.spacing.padding.horizontals.sm}",
"type": "spacing"
},
"md": {
"value": "{jf.form-component.base.spacing.padding.horizontals.md}",
"type": "spacing"
},
"lg": {
"value": "{jf.form-component.base.spacing.padding.horizontals.lg}",
"type": "spacing"
}
}
},
"border": {
"radius": {
"default": {
"value": "{jf.form-component.border-radius.default}",
"type": "borderRadius"
},
"alt": {
"value": "{jf.form-component.border-radius.alt}",
"type": "borderRadius"
}
},
"outlined": {
"primary": {
"value": {
"color": "{jf.color.border.primary}",
"width": "{jf.form-component.border.width.default}",
"style": "solid"
},
"type": "border",
"description": "Default border for primary outlined buttons"
},
"secondary": {
"value": {
"color": "{jf.color.border.secondary}",
"width": "{jf.form-component.border.width.default}",
"style": "solid"
},
"type": "border",
"description": "Default border for primary outlined buttons"
},
"neutral": {
"value": {
"color": "{jf.color.border.default}",
"width": "{jf.form-component.border.width.default}",
"style": "solid"
},
"type": "border",
"description": "Default border for primary outlined buttons"
},
"critical": {
"value": {
"color": "{jf.color.border.critical}",
"width": "{jf.form-component.border.width.default}",
"style": "solid"
},
"type": "border",
"description": "Default border for primary outlined buttons"
}
},
"filled": {
"value": {
"color": "transparent",
"width": "{jf.form-component.border.width.default}",
"style": "solid"
},
"type": "border",
"description": "Default border for primary outlined buttons"
},
"text": {
"value": {
"color": "transparent",
"width": "{jf.form-component.border.width.default}",
"style": "solid"
},
"type": "border",
"description": "Default border for text buttons"
}
},
"color": {
"bg": {
"filled": {
"primary": {
"enabled": {
"value": "{jf.container.color.bg.filled.regular.primary.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.filled.regular.primary.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.filled.regular.primary.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.filled.regular.primary.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.filled.regular.primary.disabled}",
"type": "color"
}
},
"secondary": {
"enabled": {
"value": "{jf.container.color.bg.filled.regular.secondary.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.filled.regular.secondary.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.filled.regular.secondary.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.filled.regular.secondary.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.filled.regular.secondary.disabled}",
"type": "color"
}
},
"neutral": {
"enabled": {
"value": "{jf.container.color.bg.filled.regular.alt.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.filled.regular.alt.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.filled.regular.alt.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.filled.regular.alt.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.filled.regular.alt.disabled}",
"type": "color"
}
},
"critical": {
"enabled": {
"value": "{jf.container.color.bg.filled.regular.critical.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.filled.regular.critical.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.filled.regular.critical.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.filled.regular.critical.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.filled.regular.critical.disabled}",
"type": "color"
}
}
},
"outlined": {
"primary": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.primary.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.primary.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.primary.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.primary.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.primary.disabled}",
"type": "color"
}
},
"secondary": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.secondary.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.secondary.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.secondary.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.secondary.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.secondary.disabled}",
"type": "color"
}
},
"neutral": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.alt.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.alt.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.alt.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.alt.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.alt.disabled}",
"type": "color"
}
},
"critical": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.critical.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.critical.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.critical.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.critical.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.critical.disabled}",
"type": "color"
}
}
},
"text": {
"primary": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.primary.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.primary.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.primary.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.primary.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.primary.disabled}",
"type": "color"
}
},
"secondary": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.secondary.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.secondary.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.secondary.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.secondary.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.secondary.disabled}",
"type": "color"
}
},
"neutral": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.alt.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.alt.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.alt.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.alt.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.alt.disabled}",
"type": "color"
}
},
"critical": {
"enabled": {
"value": "{jf.container.color.bg.naked.regular.critical.enabled}",
"type": "color"
},
"hover": {
"value": "{jf.container.color.bg.naked.regular.critical.hover}",
"type": "color"
},
"selected": {
"value": "{jf.container.color.bg.naked.regular.critical.selected}",
"type": "color"
},
"focus": {
"value": "{jf.container.color.bg.naked.regular.critical.focus}",
"type": "color"
},
"disabled": {
"value": "{jf.container.color.bg.naked.regular.critical.disabled}",
"type": "color"
}
}
}
}
}
},
"spacing": {
"gap": {
"inline": {
"sm": {
"value": "{jf.form-component.spacing.gap.inline.xs3}",
"type": "spacing"
},
"md": {
"value": "{jf.form-component.spacing.gap.inline.xs2}",
"type": "spacing"
},
"lg": {
"value": "{jf.form-component.spacing.gap.inline.xs}",
"type": "spacing"
}
}
}
},
"label": {
"value": {
"fontFamily": "{jf.font.family.navigation}",
"fontWeight": "{jf.font.weight.navigation}",
"lineHeight": "{jf.font.line-height.navigation.md}",
"fontSize": "{jf.font.size.label.md}",
"letterSpacing": "{jf.font.letter-spacing.label.md}",
"paragraphSpacing": "{jf.spacing.margin.paragraph.none}",
"textDecoration": "none",
"textCase": "{jf.font.case.navigation}"
},
"type": "typography"
},
"children": {
"color": {
"fg": {
"outlined": {
"neutral": {
"value": "{jf.color.fg.muted}",
"type": "color"
},
"primary": {
"value": "{jf.color.fg.primary}",
"type": "color"
},
"secondary": {
"value": "{jf.color.fg.critical}",
"type": "color"
},
"critical": {
"value": "{jf.color.fg.critical}",
"type": "color"
}
},
"filled": {
"primary": {
"value": "{jf.color.fg.white}",
"type": "color"
},
"secondary": {
"value": "{jf.color.fg.white}",
"type": "color"
},
"neutral": {
"value": "{jf.color.fg.default}",
"type": "color"
},
"critical": {
"value": "{jf.color.fg.critical}",
"type": "color"
}
},
"text": {
"neutral": {
"enabled": {
"value": "{jf.color.fg.muted}",
"type": "color"
},
"hover": {
"value": "{jf.color.fg.muted}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "lighten",
"value": "{jf.bg.modifier.amount.hover} ",
"space": "hsl"
}
}
}
},
"selected": {
"value": "{jf.color.fg.muted}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.selected} ",
"space": "hsl"
}
}
}
},
"focus": {
"value": "{jf.color.fg.muted}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.focus} ",
"space": "hsl"
}
}
}
}
},
"primary": {
"enabled": {
"value": "{jf.color.fg.primary}",
"type": "color"
},
"hover": {
"value": "{jf.color.fg.primary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "lighten",
"value": "{jf.bg.modifier.amount.hover} ",
"space": "hsl"
}
}
}
},
"selected": {
"value": "{jf.color.fg.primary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.selected} ",
"space": "hsl"
}
}
}
},
"focus": {
"value": "{jf.color.fg.primary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.focus} ",
"space": "hsl"
}
}
}
}
},
"secondary": {
"enabled": {
"value": "{jf.color.fg.secondary}",
"type": "color"
},
"hover": {
"value": "{jf.color.fg.secondary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "lighten",
"value": "{jf.bg.modifier.amount.hover} ",
"space": "hsl"
}
}
}
},
"selected": {
"value": "{jf.color.fg.secondary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.selected} ",
"space": "hsl"
}
}
}
},
"focus": {
"value": "{jf.color.fg.secondary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.focus} ",
"space": "hsl"
}
}
}
}
},
"critical": {
"enabled": {
"value": "{jf.color.fg.critical}",
"type": "color"
},
"hover": {
"value": "{jf.color.fg.critical}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "lighten",
"value": "{jf.bg.modifier.amount.hover} ",
"space": "hsl"
}
}
}
},
"selected": {
"value": "{jf.color.fg.critical}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.selected} ",
"space": "hsl"
}
}
}
},
"focus": {
"value": "{jf.color.fg.critical}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.bg.modifier.amount.focus} ",
"space": "hsl"
}
}
}
}
}
}
}
}
}
}
}
}