jellyfish_designtokens
Version:
Ultimate design tokens from Jelly Fish Design System
316 lines • 8.6 kB
JSON
{
"jf": {
"color": {
"shadow": {
"neutral": {
"value": "{jf.color.neutral}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "darken",
"value": "{jf.modifier.amount.5} ",
"space": "hsl"
}
}
}
},
"primary": {
"value": "{jf.color.primary}",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "lighten",
"value": "{jf.modifier.amount.1} ",
"space": "hsl"
}
}
}
}
}
},
"shadow": {
"neutral": {
"xs": {
"value": {
"x": "0",
"y": "2",
"blur": "8",
"spread": "-2",
"color": "rgba({jf.color.shadow.neutral} , 0.3)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"sm": {
"value": {
"x": "0",
"y": "8",
"blur": "16",
"spread": "-4",
"color": "rgba({jf.color.shadow.neutral} , 0.1)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"md": {
"value": [
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "-4",
"color": "rgba({jf.color.shadow.neutral} , 0.1)",
"type": "dropShadow"
},
{
"x": "0",
"y": "8",
"blur": "16",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral} , 0.1)",
"type": "dropShadow"
}
],
"type": "boxShadow"
},
"lg": {
"value": [
{
"x": "0",
"y": "4",
"blur": "12",
"spread": "-4",
"color": "rgba({jf.color.shadow.neutral}, 0.16 )",
"type": "dropShadow"
},
{
"x": "0",
"y": "16",
"blur": "32",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.12 )",
"type": "dropShadow"
}
],
"type": "boxShadow"
},
"xl": {
"value": [
{
"x": "0",
"y": "4",
"blur": "4",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.08)",
"type": "dropShadow"
},
{
"x": "0",
"y": "4",
"blur": "24",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.08)",
"type": "dropShadow"
},
{
"x": "0",
"y": "24",
"blur": "24",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.04)",
"type": "dropShadow"
},
{
"x": "0",
"y": "32",
"blur": "32",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.04)",
"type": "dropShadow"
},
{
"x": "0",
"y": "64",
"blur": "64",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.08)",
"type": "dropShadow"
},
{
"x": "0",
"y": "120",
"blur": "120",
"spread": "0",
"color": "rgba({jf.color.shadow.neutral}, 0.04)",
"type": "dropShadow"
}
],
"type": "boxShadow"
},
"inset": {
"value": [
{
"x": "0",
"y": "2",
"blur": "5",
"spread": "0",
"color": "rgba( {jf.color.shadow.neutral}, 0.5)",
"type": "innerShadow"
},
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "-2",
"color": "rgba( {jf.color.shadow.neutral}, 0.1)",
"type": "innerShadow"
}
],
"type": "boxShadow"
}
},
"primary": {
"xs": {
"value": {
"x": "0",
"y": "2",
"blur": "8",
"spread": "-2",
"color": "rgba({jf.color.shadow.primary} , 1)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"sm": {
"value": {
"x": "0",
"y": "8",
"blur": "16",
"spread": "-4",
"color": "rgba({jf.color.shadow.primary} , 0.5)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"md": {
"value": [
{
"x": "0",
"y": "4",
"blur": "12",
"spread": "-4",
"color": "rgba({jf.color.shadow.primary} , 0.8)",
"type": "dropShadow"
},
{
"x": "0",
"y": "8",
"blur": "16",
"spread": "0",
"color": "rgba({jf.color.shadow.primary} , 0.5)",
"type": "dropShadow"
}
],
"type": "boxShadow"
},
"lg": {
"value": [
{
"x": "0",
"y": "4",
"blur": "12",
"spread": "-4",
"color": "rgba({jf.color.shadow.primary}, 0.8 )",
"type": "dropShadow"
},
{
"x": "0",
"y": "16",
"blur": "32",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.5 )",
"type": "dropShadow"
}
],
"type": "boxShadow"
},
"xl": {
"value": [
{
"x": "0",
"y": "4",
"blur": "4",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.3)",
"type": "dropShadow"
},
{
"x": "0",
"y": "4",
"blur": "24",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.3)",
"type": "dropShadow"
},
{
"x": "0",
"y": "24",
"blur": "24",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.1)",
"type": "dropShadow"
},
{
"x": "0",
"y": "32",
"blur": "32",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.1)",
"type": "dropShadow"
},
{
"x": "0",
"y": "64",
"blur": "64",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.1)",
"type": "dropShadow"
},
{
"x": "0",
"y": "120",
"blur": "120",
"spread": "0",
"color": "rgba({jf.color.shadow.primary}, 0.1)",
"type": "dropShadow"
}
],
"type": "boxShadow"
},
"inset": {
"value": [
{
"x": "0",
"y": "2",
"blur": "5",
"spread": "0",
"color": "rgba( {jf.color.shadow.primary}, 0.5)",
"type": "innerShadow"
},
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "-2",
"color": "rgba( {jf.color.shadow.primary}, 0.1)",
"type": "innerShadow"
}
],
"type": "boxShadow"
}
}
}
}
}