outsystems-design-tokens
Version:
Store the Design Tokens used on the Ionic Framework and Widgets Library
811 lines (810 loc) • 15.7 kB
JSON
{
"primitives": {
"neutral": {
"100": {
"$type": "color",
"$value": "#F9F9F9"
},
"200": {
"$type": "color",
"$value": "#F2F2F2"
},
"300": {
"$type": "color",
"$value": "#E8E8E8"
},
"400": {
"$type": "color",
"$value": "#E1E1E1"
},
"500": {
"$type": "color",
"$value": "#CECECE"
},
"600": {
"$type": "color",
"$value": "#A2A2A2"
},
"700": {
"$type": "color",
"$value": "#8D8D8D"
},
"800": {
"$type": "color",
"$value": "#838383"
},
"900": {
"$type": "color",
"$value": "#646464"
},
"1000": {
"$type": "color",
"$value": "#3B3B3B"
},
"1100": {
"$type": "color",
"$value": "#303030"
},
"1200": {
"$type": "color",
"$value": "#242424"
}
},
"base": {
"white": {
"$type": "color",
"$value": "#FFFFFF"
},
"black": {
"$type": "color",
"$value": "#111111"
}
},
"red": {
"100": {
"$type": "color",
"$value": "#FFECEC"
},
"200": {
"$type": "color",
"$value": "#FFD9D9"
},
"300": {
"$type": "color",
"$value": "#FCC1C1"
},
"400": {
"$type": "color",
"$value": "#FAA1A1"
},
"500": {
"$type": "color",
"$value": "#F97D7D"
},
"600": {
"$type": "color",
"$value": "#F85151"
},
"700": {
"$type": "color",
"$value": "#D82424"
},
"800": {
"$type": "color",
"$value": "#CF1E1E"
},
"900": {
"$type": "color",
"$value": "#991B1B"
},
"1000": {
"$type": "color",
"$value": "#761515"
},
"1100": {
"$type": "color",
"$value": "#540F0F"
},
"1200": {
"$type": "color",
"$value": "#330909"
}
},
"pumpkin": {
"100": {
"$type": "color",
"$value": "#FFE0DB"
},
"200": {
"$type": "color",
"$value": "#FFD6D0"
},
"300": {
"$type": "color",
"$value": "#FBBDB1"
},
"400": {
"$type": "color",
"$value": "#F9947C"
},
"500": {
"$type": "color",
"$value": "#F75D07"
},
"600": {
"$type": "color",
"$value": "#DA5206"
},
"700": {
"$type": "color",
"$value": "#BD4705"
},
"800": {
"$type": "color",
"$value": "#9F3C05"
},
"900": {
"$type": "color",
"$value": "#803004"
},
"1000": {
"$type": "color",
"$value": "#602403"
},
"1100": {
"$type": "color",
"$value": "#401802"
},
"1200": {
"$type": "color",
"$value": "#210C01"
}
},
"orange": {
"100": {
"$type": "color",
"$value": "#FDF0EA"
},
"200": {
"$type": "color",
"$value": "#FFEBDE"
},
"300": {
"$type": "color",
"$value": "#FFD7BE"
},
"400": {
"$type": "color",
"$value": "#F9BE9D"
},
"500": {
"$type": "color",
"$value": "#F9AA84"
},
"600": {
"$type": "color",
"$value": "#FA9768"
},
"700": {
"$type": "color",
"$value": "#FF853B"
},
"800": {
"$type": "color",
"$value": "#D9711D"
},
"900": {
"$type": "color",
"$value": "#C15700"
},
"1000": {
"$type": "color",
"$value": "#9F4904"
},
"1100": {
"$type": "color",
"$value": "#562F1B"
},
"1200": {
"$type": "color",
"$value": "#432110"
}
},
"yellow": {
"100": {
"$type": "color",
"$value": "#FFF3D5"
},
"200": {
"$type": "color",
"$value": "#FFF0C7"
},
"300": {
"$type": "color",
"$value": "#FFEBB1"
},
"400": {
"$type": "color",
"$value": "#FFE07B"
},
"500": {
"$type": "color",
"$value": "#FFD600"
},
"600": {
"$type": "color",
"$value": "#F9BD0A"
},
"700": {
"$type": "color",
"$value": "#DF9C00"
},
"800": {
"$type": "color",
"$value": "#BA8200"
},
"900": {
"$type": "color",
"$value": "#A57107"
},
"1000": {
"$type": "color",
"$value": "#925F00"
},
"1100": {
"$type": "color",
"$value": "#533802"
},
"1200": {
"$type": "color",
"$value": "#3B2905"
}
},
"lime": {
"100": {
"$type": "color",
"$value": "#F3FECD"
},
"200": {
"$type": "color",
"$value": "#E9F7BB"
},
"300": {
"$type": "color",
"$value": "#DEEEAA"
},
"400": {
"$type": "color",
"$value": "#D6E79A"
},
"500": {
"$type": "color",
"$value": "#C7D981"
},
"600": {
"$type": "color",
"$value": "#B1C564"
},
"700": {
"$type": "color",
"$value": "#9DB229"
},
"800": {
"$type": "color",
"$value": "#6D7D05"
},
"900": {
"$type": "color",
"$value": "#606F00"
},
"1000": {
"$type": "color",
"$value": "#4F5B01"
},
"1100": {
"$type": "color",
"$value": "#384013"
},
"1200": {
"$type": "color",
"$value": "#2A310B"
}
},
"green": {
"100": {
"$type": "color",
"$value": "#E9FFEB"
},
"200": {
"$type": "color",
"$value": "#D1F7D4"
},
"300": {
"$type": "color",
"$value": "#B3EBB7"
},
"400": {
"$type": "color",
"$value": "#7FE089"
},
"500": {
"$type": "color",
"$value": "#23D643"
},
"600": {
"$type": "color",
"$value": "#1FBD3B"
},
"700": {
"$type": "color",
"$value": "#1BA433"
},
"800": {
"$type": "color",
"$value": "#0C830C"
},
"900": {
"$type": "color",
"$value": "#126F23"
},
"1000": {
"$type": "color",
"$value": "#0E531A"
},
"1100": {
"$type": "color",
"$value": "#093811"
},
"1200": {
"$type": "color",
"$value": "#051D09"
}
},
"teal": {
"100": {
"$type": "color",
"$value": "#D5F9F1"
},
"200": {
"$type": "color",
"$value": "#C7F1E8"
},
"300": {
"$type": "color",
"$value": "#B1E7DD"
},
"400": {
"$type": "color",
"$value": "#7BDBCA"
},
"500": {
"$type": "color",
"$value": "#00CFB7"
},
"600": {
"$type": "color",
"$value": "#00B7A2"
},
"700": {
"$type": "color",
"$value": "#009E8C"
},
"800": {
"$type": "color",
"$value": "#008576"
},
"900": {
"$type": "color",
"$value": "#006B5F"
},
"1000": {
"$type": "color",
"$value": "#005147"
},
"1100": {
"$type": "color",
"$value": "#003630"
},
"1200": {
"$type": "color",
"$value": "#001C19"
}
},
"aqua": {
"100": {
"$type": "color",
"$value": "#D9F5FF"
},
"200": {
"$type": "color",
"$value": "#CBEFFC"
},
"300": {
"$type": "color",
"$value": "#B3E9FC"
},
"400": {
"$type": "color",
"$value": "#80DEFA"
},
"500": {
"$type": "color",
"$value": "#27D3F9"
},
"600": {
"$type": "color",
"$value": "#22BBDC"
},
"700": {
"$type": "color",
"$value": "#1EA2BF"
},
"800": {
"$type": "color",
"$value": "#1893AF"
},
"900": {
"$type": "color",
"$value": "#127F98"
},
"1000": {
"$type": "color",
"$value": "#146172"
},
"1100": {
"$type": "color",
"$value": "#0A3741"
},
"1200": {
"$type": "color",
"$value": "#051C21"
}
},
"blue": {
"100": {
"$type": "color",
"$value": "#F0F2FF"
},
"200": {
"$type": "color",
"$value": "#E4E8FF"
},
"300": {
"$type": "color",
"$value": "#D0D7FA"
},
"400": {
"$type": "color",
"$value": "#B5C0F7"
},
"500": {
"$type": "color",
"$value": "#94A5F4"
},
"600": {
"$type": "color",
"$value": "#6986F2"
},
"700": {
"$type": "color",
"$value": "#105CEF"
},
"800": {
"$type": "color",
"$value": "#0F54DA"
},
"900": {
"$type": "color",
"$value": "#0D4BC3"
},
"1000": {
"$type": "color",
"$value": "#0B41A9"
},
"1100": {
"$type": "color",
"$value": "#09358A"
},
"1200": {
"$type": "color",
"$value": "#072561"
}
},
"indigo": {
"100": {
"$type": "color",
"$value": "#EBE8FF"
},
"200": {
"$type": "color",
"$value": "#E6E2FE"
},
"300": {
"$type": "color",
"$value": "#D3D1F2"
},
"400": {
"$type": "color",
"$value": "#BAB5EB"
},
"500": {
"$type": "color",
"$value": "#9D95E4"
},
"600": {
"$type": "color",
"$value": "#786BDD"
},
"700": {
"$type": "color",
"$value": "#5832ED"
},
"800": {
"$type": "color",
"$value": "#3B19C3"
},
"900": {
"$type": "color",
"$value": "#3516AE"
},
"1000": {
"$type": "color",
"$value": "#2E1397"
},
"1100": {
"$type": "color",
"$value": "#26107B"
},
"1200": {
"$type": "color",
"$value": "#1A0B57"
}
},
"violet": {
"100": {
"$type": "color",
"$value": "#ECE6FF"
},
"200": {
"$type": "color",
"$value": "#E5DEFC"
},
"300": {
"$type": "color",
"$value": "#DCD1FB"
},
"400": {
"$type": "color",
"$value": "#C9B6F9"
},
"500": {
"$type": "color",
"$value": "#B396F6"
},
"600": {
"$type": "color",
"$value": "#9A6CF4"
},
"700": {
"$type": "color",
"$value": "#7C20F2"
},
"800": {
"$type": "color",
"$value": "#711DDD"
},
"900": {
"$type": "color",
"$value": "#651AC5"
},
"1000": {
"$type": "color",
"$value": "#5817AB"
},
"1100": {
"$type": "color",
"$value": "#48128C"
},
"1200": {
"$type": "color",
"$value": "#330D63"
}
},
"purple": {
"100": {
"$type": "color",
"$value": "#F5EAFD"
},
"200": {
"$type": "color",
"$value": "#F2E2FF"
},
"300": {
"$type": "color",
"$value": "#E9D3FA"
},
"400": {
"$type": "color",
"$value": "#DEB9F8"
},
"500": {
"$type": "color",
"$value": "#D29BF6"
},
"600": {
"$type": "color",
"$value": "#C575F3"
},
"700": {
"$type": "color",
"$value": "#B73CF1"
},
"800": {
"$type": "color",
"$value": "#A737DC"
},
"900": {
"$type": "color",
"$value": "#9531C5"
},
"1000": {
"$type": "color",
"$value": "#812AAA"
},
"1100": {
"$type": "color",
"$value": "#6A238B"
},
"1200": {
"$type": "color",
"$value": "#4B1862"
}
},
"magenta": {
"100": {
"$type": "color",
"$value": "#FFECFB"
},
"200": {
"$type": "color",
"$value": "#FFE5FA"
},
"300": {
"$type": "color",
"$value": "#F9D4F1"
},
"400": {
"$type": "color",
"$value": "#F6BCEA"
},
"500": {
"$type": "color",
"$value": "#F39FE3"
},
"600": {
"$type": "color",
"$value": "#F07CDB"
},
"700": {
"$type": "color",
"$value": "#ED4AD3"
},
"800": {
"$type": "color",
"$value": "#D844C1"
},
"900": {
"$type": "color",
"$value": "#C13CAC"
},
"1000": {
"$type": "color",
"$value": "#A83495"
},
"1100": {
"$type": "color",
"$value": "#892B7A"
},
"1200": {
"$type": "color",
"$value": "#611E56"
}
},
"pink": {
"100": {
"$type": "color",
"$value": "#FFEDF4"
},
"200": {
"$type": "color",
"$value": "#FFDAE8"
},
"300": {
"$type": "color",
"$value": "#FDCCDE"
},
"400": {
"$type": "color",
"$value": "#F7BCD2"
},
"500": {
"$type": "color",
"$value": "#F0A8C3"
},
"600": {
"$type": "color",
"$value": "#FA8DC9"
},
"700": {
"$type": "color",
"$value": "#F45FB1"
},
"800": {
"$type": "color",
"$value": "#DF1B87"
},
"900": {
"$type": "color",
"$value": "#CC0D7E"
},
"1000": {
"$type": "color",
"$value": "#A70565"
},
"1100": {
"$type": "color",
"$value": "#860853"
},
"1200": {
"$type": "color",
"$value": "#69083D"
}
}
},
"state": {
"press": {
"$type": "color",
"$value": "#00000012",
"$description": "A subtle, semi-transparent overlay for interactive elements like avatars or images that don't have a dedicated pressed color."
},
"hover": {
"$type": "color",
"$value": "#0000000a"
},
"disabled": {
"$type": "color",
"$value": "#ffffff99",
"$description": "A semi-transparent overlay used to show that an element, like a button or input field, is inactive and can't be interacted with."
}
},
"shadow": {
"1": {
"$type": "color",
"$value": "#0000000a"
},
"2": {
"$type": "color",
"$value": "#0000000d"
},
"3": {
"$type": "color",
"$value": "#00000012"
},
"4": {
"$type": "color",
"$value": "#00000014"
},
"5": {
"$type": "color",
"$value": "#0000001f"
},
"6": {
"$type": "color",
"$value": "#00000029"
},
"7": {
"$type": "color",
"$value": "#0000002e"
}
}
}