outsystems-design-tokens
Version:
Store the Design Tokens used on the Ionic Framework and Widgets Library
1,100 lines • 24.8 kB
JSON
{
"semantics": {
"primary": {
"100": {
"$type": "color",
"$value": "{primitives.blue.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.blue.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.blue.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.blue.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.blue.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.blue.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.blue.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.blue.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.blue.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.blue.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.blue.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.blue.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.primary.700}"
}
},
"info": {
"100": {
"$type": "color",
"$value": "{primitives.blue.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.blue.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.blue.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.blue.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.blue.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.blue.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.blue.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.blue.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.blue.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.blue.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.blue.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.blue.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.info.700}"
}
},
"success": {
"100": {
"$type": "color",
"$value": "{primitives.green.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.green.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.green.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.green.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.green.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.green.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.green.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.green.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.green.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.green.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.green.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.green.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.success.700}"
}
},
"danger": {
"100": {
"$type": "color",
"$value": "{primitives.red.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.red.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.red.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.red.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.red.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.red.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.red.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.red.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.red.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.red.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.red.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.red.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.danger.700}"
}
},
"warning": {
"100": {
"$type": "color",
"$value": "{primitives.yellow.100}"
},
"200": {
"$type": "color",
"$value": "{primitives.yellow.200}"
},
"300": {
"$type": "color",
"$value": "{primitives.yellow.300}"
},
"400": {
"$type": "color",
"$value": "{primitives.yellow.400}"
},
"500": {
"$type": "color",
"$value": "{primitives.yellow.500}"
},
"600": {
"$type": "color",
"$value": "{primitives.yellow.600}"
},
"700": {
"$type": "color",
"$value": "{primitives.yellow.700}"
},
"800": {
"$type": "color",
"$value": "{primitives.yellow.800}"
},
"900": {
"$type": "color",
"$value": "{primitives.yellow.900}"
},
"1000": {
"$type": "color",
"$value": "{primitives.yellow.1000}"
},
"1100": {
"$type": "color",
"$value": "{primitives.yellow.1100}"
},
"1200": {
"$type": "color",
"$value": "{primitives.yellow.1200}"
},
"base": {
"$type": "color",
"$value": "{semantics.warning.500}"
}
}
},
"bg": {
"primary": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.primary.base}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.900}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.primary.100}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.300}"
}
}
},
"danger": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.danger.800}"
},
"press": {
"$type": "color",
"$value": "{semantics.danger.1000}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.danger.100}"
},
"press": {
"$type": "color",
"$value": "{semantics.danger.300}"
}
}
},
"success": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.success.900}"
},
"press": {
"$type": "color",
"$value": "{semantics.success.1100}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.success.100}"
},
"press": {
"$type": "color",
"$value": "{semantics.success.300}"
}
}
},
"info": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.info.900}"
},
"press": {
"$type": "color",
"$value": "{semantics.info.1100}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.info.100}"
},
"press": {
"$type": "color",
"$value": "{semantics.info.300}"
}
}
},
"warning": {
"base": {
"default": {
"$type": "color",
"$value": "{semantics.warning.500}"
},
"press": {
"$type": "color",
"$value": "{semantics.warning.700}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{semantics.warning.200}"
},
"press": {
"$type": "color",
"$value": "{semantics.warning.400}"
}
}
},
"body": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"neutral": {
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.400}"
}
},
"base": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.700}"
}
},
"subtlest": {
"default": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.200}"
}
},
"bold": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1000}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
}
},
"boldest": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
},
"press": {
"$type": "color",
"$value": "{primitives.base.black}"
}
}
},
"surface": {
"default": {
"$type": "color",
"$value": "{primitives.base.white}",
"$description": "input"
},
"inverse": {
"$type": "color",
"$value": "{primitives.base.white}"
}
},
"input": {
"default": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"read-only": {
"$type": "color",
"$value": "{primitives.neutral.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.200}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.100}"
},
"bold": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.200}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.400}"
},
"read-only": {
"$type": "color",
"$value": "{primitives.neutral.300}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.300}"
}
}
},
"select": {
"default": {
"$type": "color",
"$value": "{semantics.primary.100}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.300}"
}
},
"extended": {
"pumpkin": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.pumpkin.700}"
},
"press": {
"$type": "color",
"$value": "{primitives.pumpkin.900}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.pumpkin.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.pumpkin.300}"
}
}
},
"orange": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.orange.800}"
},
"press": {
"$type": "color",
"$value": "{primitives.orange.1000}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.orange.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.orange.300}"
}
}
},
"lime": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.lime.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.lime.1100}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.lime.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.lime.300}"
}
}
},
"teal": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.teal.800}"
},
"press": {
"$type": "color",
"$value": "{primitives.teal.1000}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.teal.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.teal.300}"
}
}
},
"aqua": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.aqua.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.aqua.1100}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.aqua.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.aqua.300}"
}
}
},
"indigo": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.indigo.700}"
},
"press": {
"$type": "color",
"$value": "{primitives.indigo.900}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.indigo.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.indigo.300}"
}
}
},
"violet": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.violet.700}"
},
"press": {
"$type": "color",
"$value": "{primitives.violet.900}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.violet.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.violet.300}"
}
}
},
"purple": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.purple.800}"
},
"press": {
"$type": "color",
"$value": "{primitives.purple.1000}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.purple.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.purple.300}"
}
}
},
"magenta": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.magenta.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.magenta.1100}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.magenta.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.magenta.300}"
}
}
},
"pink": {
"base": {
"default": {
"$type": "color",
"$value": "{primitives.pink.900}"
},
"press": {
"$type": "color",
"$value": "{primitives.pink.1100}"
}
},
"subtle": {
"default": {
"$type": "color",
"$value": "{primitives.pink.100}"
},
"press": {
"$type": "color",
"$value": "{primitives.pink.300}"
}
}
}
}
},
"text": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
},
"subtle": {
"$type": "color",
"$value": "{primitives.neutral.1000}"
},
"subtlest": {
"$type": "color",
"$value": "{primitives.neutral.800}"
},
"primary": {
"$type": "color",
"$value": "{semantics.primary.900}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"danger": {
"$type": "color",
"$value": "{semantics.danger.900}"
},
"info": {
"$type": "color",
"$value": "{semantics.info.900}"
},
"warning": {
"$type": "color",
"$value": "{semantics.warning.1000}"
},
"success": {
"$type": "color",
"$value": "{semantics.success.900}"
},
"link": {
"default": {
"$type": "color",
"$value": "{semantics.primary.base}"
},
"press": {
"$type": "color",
"$value": "{semantics.primary.800}"
},
"visited": {
"$type": "color",
"$value": "{semantics.primary.900}"
}
},
"inverse": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"select": {
"$type": "color",
"$value": "{semantics.primary.800}"
},
"extended": {
"pumpkin": {
"$type": "color",
"$value": "{primitives.pumpkin.900}"
},
"orange": {
"$type": "color",
"$value": "{primitives.orange.900}"
},
"lime": {
"$type": "color",
"$value": "{primitives.lime.1000}"
},
"teal": {
"$type": "color",
"$value": "{primitives.teal.900}"
},
"aqua": {
"$type": "color",
"$value": "{primitives.aqua.900}"
},
"indigo": {
"$type": "color",
"$value": "{primitives.indigo.900}"
},
"violet": {
"$type": "color",
"$value": "{primitives.violet.900}"
},
"purple": {
"$type": "color",
"$value": "{primitives.purple.1000}"
},
"magenta": {
"$type": "color",
"$value": "{primitives.magenta.1100}"
},
"pink": {
"$type": "color",
"$value": "{primitives.pink.1000}"
}
}
},
"border": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.400}"
},
"boldest": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
},
"subtle": {
"$type": "color",
"$value": "{primitives.neutral.100}"
},
"subtlest": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"primary": {
"$type": "color",
"$value": "{semantics.primary.base}"
},
"success": {
"$type": "color",
"$value": "{semantics.success.900}"
},
"warning": {
"$type": "color",
"$value": "{semantics.warning.900}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.300}"
},
"focus": {
"0": {
"$type": "text",
"$value": "none"
},
"default": {
"$type": "color",
"$value": "{primitives.blue.400}"
},
"error": {
"$type": "color",
"$value": "{primitives.red.400}"
}
},
"danger": {
"default": {
"$type": "color",
"$value": "{semantics.danger.800}"
},
"press": {
"$type": "color",
"$value": "{semantics.danger.1000}"
}
},
"input": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"press": {
"$type": "color",
"$value": "{primitives.neutral.700}"
},
"read-only": {
"$type": "color",
"$value": "{primitives.neutral.500}"
}
}
},
"icon": {
"default": {
"$type": "color",
"$value": "{primitives.neutral.1200}"
},
"subtle": {
"$type": "color",
"$value": "{primitives.neutral.1000}"
},
"subtlest": {
"$type": "color",
"$value": "{primitives.neutral.800}"
},
"disabled": {
"$type": "color",
"$value": "{primitives.neutral.500}"
},
"primary": {
"$type": "color",
"$value": "{semantics.primary.900}"
},
"select": {
"$type": "color",
"$value": "{semantics.primary.800}"
},
"info": {
"$type": "color",
"$value": "{semantics.info.900}"
},
"success": {
"$type": "color",
"$value": "{semantics.success.900}"
},
"danger": {
"$type": "color",
"$value": "{semantics.danger.900}"
},
"warning": {
"$type": "color",
"$value": "{semantics.warning.1000}"
},
"inverse": {
"$type": "color",
"$value": "{primitives.base.white}"
},
"link": {
"default": {
"$type": "color",
"$value": "{text.link.default}"
},
"press": {
"$type": "color",
"$value": "{text.link.press}"
},
"visited": {
"$type": "color",
"$value": "{text.link.visited}"
}
},
"extended": {
"pumpkin": {
"$type": "color",
"$value": "{primitives.pumpkin.900}"
},
"orange": {
"$type": "color",
"$value": "{primitives.orange.900}"
},
"lime": {
"$type": "color",
"$value": "{primitives.lime.1000}"
},
"teal": {
"$type": "color",
"$value": "{primitives.teal.900}"
},
"aqua": {
"$type": "color",
"$value": "{primitives.aqua.900}"
},
"indigo": {
"$type": "color",
"$value": "{primitives.indigo.900}"
},
"violet": {
"$type": "color",
"$value": "{primitives.violet.900}"
},
"purple": {
"$type": "color",
"$value": "{primitives.purple.1000}"
},
"magenta": {
"$type": "color",
"$value": "{primitives.magenta.1100}"
},
"pink": {
"$type": "color",
"$value": "{primitives.pink.1000}"
}
}
},
"state": {
"disabled": {
"$type": "color",
"$value": "#ffffff99"
},
"press": {
"$type": "color",
"$value": "#24242414"
}
},
"elevation": {
"1": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.1}",
"type": "dropShadow",
"x": "0",
"y": "0",
"blur": "4",
"spread": "0"
},
{
"color": "{shadow.3}",
"type": "dropShadow",
"x": "0",
"y": "3",
"blur": "9",
"spread": "0"
}
]
},
"2": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.2}",
"type": "dropShadow",
"x": "0",
"y": "1",
"blur": "5",
"spread": "0"
},
{
"color": "{shadow.4}",
"type": "dropShadow",
"x": "0",
"y": "8",
"blur": "25",
"spread": "0"
}
]
},
"3": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.2}",
"type": "dropShadow",
"x": "0",
"y": "2",
"blur": "7",
"spread": "0"
},
{
"color": "{shadow.6}",
"type": "dropShadow",
"x": "0",
"y": "6",
"blur": "32",
"spread": "0"
}
]
},
"4": {
"$type": "boxShadow",
"$value": [
{
"color": "{shadow.5}",
"type": "dropShadow",
"x": "0",
"y": "3",
"blur": "12",
"spread": "0"
},
{
"color": "{shadow.7}",
"type": "dropShadow",
"x": "0",
"y": "15",
"blur": "48",
"spread": "0"
}
]
}
},
"backdrop": {
"$type": "composition",
"$value": {
"opacity": "0.7",
"fill": "{primitives.base.black}"
}
}
}