UNPKG

jellyfish_designtokens

Version:

Ultimate design tokens from Jelly Fish Design System

1,322 lines 47.3 kB
{ "jf": { "container": { "color": { "bg": { "filled": { "regular": { "default": { "enabled": { "value": "{jf.color.bg.regular.default}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.default}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.default}", "type": "color" } }, "alt": { "enabled": { "value": "{jf.color.bg.regular.alt}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.alt}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.alt}", "type": "color" } }, "primary": { "enabled": { "value": "{jf.color.bg.regular.primary}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.primary}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.primary}", "type": "color" } }, "secondary": { "enabled": { "value": "{jf.color.bg.regular.secondary}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.secondary}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.secondary}", "type": "color" } }, "success": { "enabled": { "value": "{jf.color.bg.regular.success}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.success}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.success}", "type": "color" } }, "critical": { "enabled": { "value": "{jf.color.bg.regular.critical}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.critical}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.critical}", "type": "color" } }, "warning": { "enabled": { "value": "{jf.color.bg.regular.warning}", "type": "color" }, "hover": { "value": "{jf.color.bg.regular.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.regular.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.regular.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.regular.warning}", "type": "color" }, "disabled": { "value": "{jf.color.bg.regular.warning}", "type": "color" } } }, "subtle": { "default": { "enabled": { "value": "{jf.color.bg.subtle.default}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "srgb" } } } }, "focus": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.default}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.default}", "type": "color" } }, "alt": { "enabled": { "value": "{jf.color.bg.subtle.alt}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.alt}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.alt}", "type": "color" } }, "primary": { "enabled": { "value": "{jf.color.bg.subtle.primary}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.primary}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.primary}", "type": "color" } }, "secondary": { "enabled": { "value": "{jf.color.bg.subtle.secondary}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.secondary}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.secondary}", "type": "color" } }, "success": { "enabled": { "value": "{jf.color.bg.subtle.success}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.success}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.success}", "type": "color" } }, "critical": { "enabled": { "value": "{jf.color.bg.subtle.critical}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.critical}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.critical}", "type": "color" } }, "warning": { "enabled": { "value": "{jf.color.bg.subtle.warning}", "type": "color" }, "hover": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.warning}", "type": "color" }, "disabled": { "value": "{jf.color.bg.subtle.warning}", "type": "color" } } } }, "naked": { "regular": { "default": { "enabled": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "srgb" } } } }, "focus": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.default}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } }, "alt": { "enabled": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.alt}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } }, "primary": { "enabled": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.primary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } }, "secondary": { "enabled": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.secondary}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } }, "success": { "enabled": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.success}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } }, "critical": { "enabled": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.critical}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } }, "warning": { "enabled": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "hover": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "lighten", "value": "{jf.bg.modifier.amount.hover} ", "space": "hsl" } } } }, "selected": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.selected} ", "space": "hsl" } } } }, "focus": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "darken", "value": "{jf.bg.modifier.amount.focus} ", "space": "hsl" } } } }, "loading": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } }, "disabled": { "value": "{jf.color.bg.subtle.warning}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "alpha", "value": "{jf.opacity.transparent}", "space": "hsl" } } } } } } } } } } } }