outsystems-design-tokens
Version:
Store the Design Tokens used on the Ionic Framework and Widgets Library
806 lines • 15.6 kB
JSON
{
"primitives": {
"neutral": {
"100": {
"$type": "color",
"$value": "#F3F3F3"
},
"200": {
"$type": "color",
"$value": "#EAE9E9"
},
"300": {
"$type": "color",
"$value": "#E0E0E0"
},
"400": {
"$type": "color",
"$value": "#D5D5D5"
},
"500": {
"$type": "color",
"$value": "#a2a2a2"
},
"600": {
"$type": "color",
"$value": "#8c8c8c"
},
"700": {
"$type": "color",
"$value": "#777777"
},
"800": {
"$type": "color",
"$value": "#626262"
},
"900": {
"$type": "color",
"$value": "#4e4e4e"
},
"1000": {
"$type": "color",
"$value": "#3b3b3b"
},
"1100": {
"$type": "color",
"$value": "#292929"
},
"1200": {
"$type": "color",
"$value": "#242424"
}
},
"base": {
"white": {
"$type": "color",
"$value": "#ffffff"
},
"black": {
"$type": "color",
"$value": "#111111"
}
},
"red": {
"100": {
"$type": "color",
"$value": "#FDE1E1"
},
"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": "#e52929"
},
"800": {
"$type": "color",
"$value": "#bf2222"
},
"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": "#FFE8DB"
},
"200": {
"$type": "color",
"$value": "#FFE0D0"
},
"300": {
"$type": "color",
"$value": "#ffcfb1"
},
"400": {
"$type": "color",
"$value": "#ffb37b"
},
"500": {
"$type": "color",
"$value": "#ff9400"
},
"600": {
"$type": "color",
"$value": "#e18300"
},
"700": {
"$type": "color",
"$value": "#c37100"
},
"800": {
"$type": "color",
"$value": "#a45f00"
},
"900": {
"$type": "color",
"$value": "#844d00"
},
"1000": {
"$type": "color",
"$value": "#633a00"
},
"1100": {
"$type": "color",
"$value": "#422700"
},
"1200": {
"$type": "color",
"$value": "#221400"
}
},
"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": "#966503"
},
"1000": {
"$type": "color",
"$value": "#704B02"
},
"1100": {
"$type": "color",
"$value": "#533802"
},
"1200": {
"$type": "color",
"$value": "#2C1E02"
}
},
"lime": {
"100": {
"$type": "color",
"$value": "#EBFCD4"
},
"200": {
"$type": "color",
"$value": "#E4F7CB"
},
"300": {
"$type": "color",
"$value": "#d3efb2"
},
"400": {
"$type": "color",
"$value": "#bbe77d"
},
"500": {
"$type": "color",
"$value": "#a0df18"
},
"600": {
"$type": "color",
"$value": "#8dc515"
},
"700": {
"$type": "color",
"$value": "#7aab12"
},
"800": {
"$type": "color",
"$value": "#678f0f"
},
"900": {
"$type": "color",
"$value": "#53730c"
},
"1000": {
"$type": "color",
"$value": "#3e5709"
},
"1100": {
"$type": "color",
"$value": "#2a3a06"
},
"1200": {
"$type": "color",
"$value": "#151e03"
}
},
"green": {
"100": {
"$type": "color",
"$value": "#E2F9E4"
},
"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": "#178a2b"
},
"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": "#1988a0"
},
"900": {
"$type": "color",
"$value": "#146d81"
},
"1000": {
"$type": "color",
"$value": "#0f5261"
},
"1100": {
"$type": "color",
"$value": "#0a3741"
},
"1200": {
"$type": "color",
"$value": "#051c21"
}
},
"blue": {
"100": {
"$type": "color",
"$value": "#E9ECFC"
},
"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": "#411bd5"
},
"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": "#FDEAEE"
},
"200": {
"$type": "color",
"$value": "#FFE3E9"
},
"300": {
"$type": "color",
"$value": "#fad3dc"
},
"400": {
"$type": "color",
"$value": "#f8b9c9"
},
"500": {
"$type": "color",
"$value": "#f69bb3"
},
"600": {
"$type": "color",
"$value": "#f3759a"
},
"700": {
"$type": "color",
"$value": "#f13b7d"
},
"800": {
"$type": "color",
"$value": "#dc3672"
},
"900": {
"$type": "color",
"$value": "#c53066"
},
"1000": {
"$type": "color",
"$value": "#aa2a58"
},
"1100": {
"$type": "color",
"$value": "#8b2248"
},
"1200": {
"$type": "color",
"$value": "#621833"
}
}
},
"state": {
"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."
},
"press": {
"$type": "color",
"$value": "#24242414",
"$description": "A subtle, semi-transparent overlay for interactive elements like avatars or images that don't have a dedicated pressed color."
}
},
"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"
}
}
}