jellyfish_designtokens
Version:
Ultimate design tokens from Jelly Fish Design System
299 lines • 8.13 kB
JSON
{
"jf": {
"color": {
"shadow": {
"neutral": {
"value": "{jf.color.neutral}",
"type": "color"
},
"primary": {
"value": "{jf.color.primary}",
"type": "color",
"$extensions": {}
}
}
},
"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"
}
}
}
}
}