Last active
January 8, 2022 20:09
-
-
Save danielgolden/673afc8bce8f96932b2394fedd9de4e1 to your computer and use it in GitHub Desktop.
Get stats on the One Core Color style adoption level of a given file in Figma
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const oneCorePaintStyles = [ | |
{ | |
"name": "Roles/Interactive/Interactive Primary", | |
"key": "18ecca921484122521d9d31c21d32217b76a8214", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#017c86", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.48627451062202454, | |
"b": 0.5254902243614197 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Interactive/Interactive Secondary", | |
"key": "db0a463191174195a36cc623f1d1c0749a50723d", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#e7e9e9", | |
"rgb": { | |
"r": 0.9058823585510254, | |
"g": 0.9137254953384399, | |
"b": 0.9137254953384399 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Interactive/Interactive Danger", | |
"key": "b56c9141946aadb53bb58f7f375fb3ba2b477d02", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#df2d24", | |
"rgb": { | |
"r": 0.8745098114013672, | |
"g": 0.1764705926179886, | |
"b": 0.1411764770746231 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Text/Text Primary", | |
"key": "7a0973353ae458a5a279bfe4c2db49ccc521a9bb", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#283636", | |
"rgb": { | |
"r": 0.1568627506494522, | |
"g": 0.21176470816135406, | |
"b": 0.21176470816135406 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Text/Text Secondary", | |
"key": "611ac06128407ba765571cde396c337f42e5333e", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#556060", | |
"rgb": { | |
"r": 0.3333333432674408, | |
"g": 0.3764705955982208, | |
"b": 0.3764705955982208 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Text/Text Emphasis", | |
"key": "02bca3df7a6d4fa8638173c47878d7264447b065", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#151d1d", | |
"rgb": { | |
"r": 0.08235294371843338, | |
"g": 0.11372549086809158, | |
"b": 0.11372549086809158 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Text/Text Muted", | |
"key": "ad7ad213369a33fb764108dba530dbaca382f7e1", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#6e7575", | |
"rgb": { | |
"r": 0.4313725531101227, | |
"g": 0.4588235318660736, | |
"b": 0.4588235318660736 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Text/Text Disabled", | |
"key": "7568de7c7daef24adddacbe7210581de017a488b", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#9fa5a5", | |
"rgb": { | |
"r": 0.6235294342041016, | |
"g": 0.6470588445663452, | |
"b": 0.6470588445663452 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Background/Background App", | |
"key": "4a9b88c71d8dc24f0b660278c25653269c076156", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f3f4f4", | |
"rgb": { | |
"r": 0.9529411792755127, | |
"g": 0.95686274766922, | |
"b": 0.95686274766922 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Background/Background Surface", | |
"key": "b523aa6f31036ff72c60877cffdab99a043dd022", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#ffffff", | |
"rgb": { | |
"r": 1, | |
"g": 1, | |
"b": 1 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Background/Background Surface Inverted", | |
"key": "6578690fbc8a65324fab91790d8cb587d0ceb197", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#283636", | |
"rgb": { | |
"r": 0.1568627506494522, | |
"g": 0.21176470816135406, | |
"b": 0.21176470816135406 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/States/States Success", | |
"key": "c325f3de317021942562315bcc3093db9aabe82d", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#02865b", | |
"rgb": { | |
"r": 0.007843137718737125, | |
"g": 0.5254902243614197, | |
"b": 0.35686275362968445 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/States/States Warning", | |
"key": "2151898447482186a20ba787934b531801b479c9", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#aa6701", | |
"rgb": { | |
"r": 0.6666666865348816, | |
"g": 0.40392157435417175, | |
"b": 0.003921568859368563 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/States/States Error", | |
"key": "93359dd10df621b92d5c24730042f7c79d8ac224", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#df2d24", | |
"rgb": { | |
"r": 0.8745098114013672, | |
"g": 0.1764705926179886, | |
"b": 0.1411764770746231 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/States/States Disabled", | |
"key": "a3a377a84591e52d7f935e5322f9432fba422e47", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#9fa5a5", | |
"rgb": { | |
"r": 0.6235294342041016, | |
"g": 0.6470588445663452, | |
"b": 0.6470588445663452 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Border/Border Regular", | |
"key": "5d32ea4c8c38a389f2a70f4381aa689b6aa57e4d", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#e7e9e9", | |
"rgb": { | |
"r": 0.9058823585510254, | |
"g": 0.9137254953384399, | |
"b": 0.9137254953384399 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Border/Border Subtle", | |
"key": "6e195286925da9647c3623a634a6e8d1973af065", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f3f4f4", | |
"rgb": { | |
"r": 0.9529411792755127, | |
"g": 0.95686274766922, | |
"b": 0.95686274766922 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Border/Border Strong", | |
"key": "0fbd7b53f591117775241cf3fd7101488df5397f", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#d1d4d4", | |
"rgb": { | |
"r": 0.8196078538894653, | |
"g": 0.8313725590705872, | |
"b": 0.8313725590705872 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Entity Status/Entity Status Operational", | |
"key": "2a7aad3c9369718bf40fe039cad6db56e4ec9c15", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#01b076", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.6901960968971252, | |
"b": 0.4627451002597809 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Entity Status/Entity Status Degraded", | |
"key": "57979f3be17fbd5fa8b477095e7aac27456b6170", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f0b400", | |
"rgb": { | |
"r": 0.9411764740943909, | |
"g": 0.7058823704719543, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Entity Status/Entity Status Anomaly", | |
"key": "1ea1ea6e861ec14d3dc04de659adf746f8f9af5c", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f07a0e", | |
"rgb": { | |
"r": 0.9411764740943909, | |
"g": 0.47843137383461, | |
"b": 0.054901961237192154 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Entity Status/Entity Status Unavailable", | |
"key": "e89f9c93bdfbbb82db5f3de40a2d2f21ba9a9856", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f5554b", | |
"rgb": { | |
"r": 0.9607843160629272, | |
"g": 0.3333333432674408, | |
"b": 0.29411765933036804 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Roles/Entity Status/Entity Status Unknown", | |
"key": "1e51898cf26af891a8b9cf2439eda59285784733", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#9fa5a5", | |
"rgb": { | |
"r": 0.6235294342041016, | |
"g": 0.6470588445663452, | |
"b": 0.6470588445663452 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 1", | |
"key": "9735f199dc6008c4fae3a57e99164dd616e0c741", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fafbfb", | |
"rgb": { | |
"r": 0.9803921580314636, | |
"g": 0.9843137264251709, | |
"b": 0.9843137264251709 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 2", | |
"key": "6129b49374bfb4725f849ab5eb26b0b9128dde22", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f3f4f4", | |
"rgb": { | |
"r": 0.9529411792755127, | |
"g": 0.95686274766922, | |
"b": 0.95686274766922 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 3", | |
"key": "0e250f7120c059156c744eac694256bc5ebb43a6", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#e7e9e9", | |
"rgb": { | |
"r": 0.9058823585510254, | |
"g": 0.9137254953384399, | |
"b": 0.9137254953384399 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 4", | |
"key": "b598f7f68abbbce30d94fdeff5a29e650072ed27", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#d1d4d4", | |
"rgb": { | |
"r": 0.8196078538894653, | |
"g": 0.8313725590705872, | |
"b": 0.8313725590705872 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 5", | |
"key": "20f646bc210260f90417f05c1bdf443718b26fbc", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#9fa5a5", | |
"rgb": { | |
"r": 0.6235294342041016, | |
"g": 0.6470588445663452, | |
"b": 0.6470588445663452 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 6", | |
"key": "8281c95e91465ff01741d9b12ab29b9d95e56d28", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#6e7575", | |
"rgb": { | |
"r": 0.4313725531101227, | |
"g": 0.4588235318660736, | |
"b": 0.4588235318660736 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 7", | |
"key": "6b3a4239699f66a342fac0ac3ee5ca92360c408b", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#556060", | |
"rgb": { | |
"r": 0.3333333432674408, | |
"g": 0.3764705955982208, | |
"b": 0.3764705955982208 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 8", | |
"key": "39eb766b93e0715574c884380cb3b7f9b9b32778", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#3f4c4c", | |
"rgb": { | |
"r": 0.24705882370471954, | |
"g": 0.2980392277240753, | |
"b": 0.2980392277240753 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 9", | |
"key": "0f0f11a1d81ad608faa88693d0d884f021bf1eaa", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#283636", | |
"rgb": { | |
"r": 0.1568627506494522, | |
"g": 0.21176470816135406, | |
"b": 0.21176470816135406 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Gray / Gray 10", | |
"key": "9000de94da7b0ca7ee9270c2dccb8f3772f0fa06", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#151d1d", | |
"rgb": { | |
"r": 0.08235294371843338, | |
"g": 0.11372549086809158, | |
"b": 0.11372549086809158 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 1", | |
"key": "aa7f67d5ae20c7cb53ff5135c4b78df8f41cf89f", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f0fbfc", | |
"rgb": { | |
"r": 0.9411764740943909, | |
"g": 0.9843137264251709, | |
"b": 0.9882352948188782 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 2", | |
"key": "e133acbfa09e21afb61ae280d033fba7e8732148", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#c6f2f6", | |
"rgb": { | |
"r": 0.7764706015586853, | |
"g": 0.9490196108818054, | |
"b": 0.9647058844566345 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 3", | |
"key": "32a8fda65109fccead58f0d588c2a739b1c2eb13", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#6cdae3", | |
"rgb": { | |
"r": 0.42352941632270813, | |
"g": 0.8549019694328308, | |
"b": 0.8901960849761963 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal/Teal 4", | |
"key": "36cd80a4601f79f541e0bfc83a914a4d1ab4f372", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#27bac8", | |
"rgb": { | |
"r": 0.15294118225574493, | |
"g": 0.729411780834198, | |
"b": 0.7843137383460999 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal/Teal 5", | |
"key": "7eb3fe1c9e35ea795820f135fd30c1ba4d08a976", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#019caa", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.6117647290229797, | |
"b": 0.6666666865348816 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 6", | |
"key": "3e2c6cbf4bed8c537ad017fe9155f84ac533acdf", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#017c86", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.48627451062202454, | |
"b": 0.5254902243614197 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 7", | |
"key": "2cba9ceb8ce12343bd852f02c59922e3d6efe702", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#02636b", | |
"rgb": { | |
"r": 0.007843137718737125, | |
"g": 0.38823530077934265, | |
"b": 0.41960784792900085 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 8", | |
"key": "35433f44abbac69f6a4047a0eeb504fc87e69785", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#004b51", | |
"rgb": { | |
"r": 0, | |
"g": 0.29411765933036804, | |
"b": 0.3176470696926117 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 9", | |
"key": "cd73a6e378f9ed2a17cf3880b055873cec282c63", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#00373c", | |
"rgb": { | |
"r": 0, | |
"g": 0.21568627655506134, | |
"b": 0.23529411852359772 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Teal / Teal 10", | |
"key": "bee740dee631198c641768cc532b6cafc383138a", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#021e1f", | |
"rgb": { | |
"r": 0.007843137718737125, | |
"g": 0.11764705926179886, | |
"b": 0.12156862765550613 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 1", | |
"key": "fbe436bbb36d7e7452de2c3021e3ab00ef8366f4", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f6fafd", | |
"rgb": { | |
"r": 0.9647058844566345, | |
"g": 0.9803921580314636, | |
"b": 0.9921568632125854 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 2", | |
"key": "ea45071f90ac59db22b60419416e435505cdaa11", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#e1ee00", | |
"rgb": { | |
"r": 0.8823529481887817, | |
"g": 0.929411768913269, | |
"b": 1 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 3", | |
"key": "df3337bf6731dce5afd266595961ea0255118317", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#a4d1fc", | |
"rgb": { | |
"r": 0.6431372761726379, | |
"g": 0.8196078538894653, | |
"b": 0.9882352948188782 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 4", | |
"key": "e5782cccb2c1f136196d142acf896dfe11ba01d9", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#63adfa", | |
"rgb": { | |
"r": 0.38823530077934265, | |
"g": 0.6784313917160034, | |
"b": 0.9803921580314636 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 5", | |
"key": "818fa9c049d0a0e01a96e71381182854f4a527c1", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#278ef8", | |
"rgb": { | |
"r": 0.15294118225574493, | |
"g": 0.5568627715110779, | |
"b": 0.9725490212440491 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 6", | |
"key": "08f69ba4346ee0e812902be29c580606329fceea", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#0c74df", | |
"rgb": { | |
"r": 0.0470588244497776, | |
"g": 0.45490196347236633, | |
"b": 0.8745098114013672 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 7", | |
"key": "9dd245bb6cbb4ef59cb46ba6cc19257420374527", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#0856aa", | |
"rgb": { | |
"r": 0.0313725508749485, | |
"g": 0.33725491166114807, | |
"b": 0.6666666865348816 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 8", | |
"key": "89d8cc1b79da057b72265d64cf5d696e245fafaa", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#074382", | |
"rgb": { | |
"r": 0.027450980618596077, | |
"g": 0.26274511218070984, | |
"b": 0.5098039507865906 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 9", | |
"key": "d9003c2d8d6a2ad943b6c077e059aa6d8f872ca2", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#042a51", | |
"rgb": { | |
"r": 0.01568627543747425, | |
"g": 0.16470588743686676, | |
"b": 0.3176470696926117 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Blue / Blue 10", | |
"key": "000bfc9cf63573d317a55e9fb5779f5ecab5e1e1", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#03172b", | |
"rgb": { | |
"r": 0.0117647061124444, | |
"g": 0.09019608050584793, | |
"b": 0.16862745583057404 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 1", | |
"key": "ddd54e322e17fc2a58a47b32e02397936006e325", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#eb00f2", | |
"rgb": { | |
"r": 0.9176470637321472, | |
"g": 1, | |
"b": 0.9490196108818054 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 2", | |
"key": "18481a1bb12c0faea3f25f7b0e33182d891a9bf3", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#bdf7d7", | |
"rgb": { | |
"r": 0.7411764860153198, | |
"g": 0.9686274528503418, | |
"b": 0.843137264251709 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 3", | |
"key": "63ec99d920c8f29ccdc21ddd0e974a0c567ed57e", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#6beaae", | |
"rgb": { | |
"r": 0.41960784792900085, | |
"g": 0.9176470637321472, | |
"b": 0.6823529601097107 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 4", | |
"key": "22aa4d5f779f9fd8d3d04f749176f2ec79411d0a", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#01c884", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.7843137383460999, | |
"b": 0.5176470875740051 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 5", | |
"key": "8b2d7efddf3ceefaa8a4a4e4cd88487e47d7ca06", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#01b076", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.6901960968971252, | |
"b": 0.4627451002597809 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 6", | |
"key": "d2212bf5ca7abce01f18c5109437efd5ee9669b3", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#02865b", | |
"rgb": { | |
"r": 0.007843137718737125, | |
"g": 0.5254902243614197, | |
"b": 0.35686275362968445 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 7", | |
"key": "cf25f655f3c7523b827b689641865af1c26c24ff", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#026747", | |
"rgb": { | |
"r": 0.007843137718737125, | |
"g": 0.40392157435417175, | |
"b": 0.27843138575553894 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 8", | |
"key": "edf661925f9de317149b42c36a5cf2a0b5ec4cf1", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#014d36", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.3019607961177826, | |
"b": 0.21176470816135406 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 9", | |
"key": "1bb28a49f327260d2b93572f6880b91fdb851ed2", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#013927", | |
"rgb": { | |
"r": 0.003921568859368563, | |
"g": 0.2235294133424759, | |
"b": 0.15294118225574493 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Green / Green 10", | |
"key": "fb3ac1bdedc70eed68e2c1a4198c05ac165699ff", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#021200", | |
"rgb": { | |
"r": 0.007843137718737125, | |
"g": 0.07058823853731155, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 1", | |
"key": "c7b25901352eb79a0e553e74fae58d4a2b6824e6", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fefae9", | |
"rgb": { | |
"r": 0.9960784316062927, | |
"g": 0.9803921580314636, | |
"b": 0.9137254953384399 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 2", | |
"key": "a93676a5061492778253ffb63eeaaa373e29b6b6", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fdf2c4", | |
"rgb": { | |
"r": 0.9921568632125854, | |
"g": 0.9490196108818054, | |
"b": 0.7686274647712708 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 3", | |
"key": "adf062c8fe17f2d56d430c4e6476ecff556f4752", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fce591", | |
"rgb": { | |
"r": 0.9882352948188782, | |
"g": 0.8980392217636108, | |
"b": 0.5686274766921997 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 4", | |
"key": "2f9ea0b27f59778db5b3abaa8d4357faf1c8f48c", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#00d23d", | |
"rgb": { | |
"r": 1, | |
"g": 0.8235294222831726, | |
"b": 0.239215686917305 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 5", | |
"key": "eb1e3a042ee5d8b82387404663966e5f9d08cf3c", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f0b400", | |
"rgb": { | |
"r": 0.9411764740943909, | |
"g": 0.7058823704719543, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 6", | |
"key": "2b3db4149d5459afee3316f7faed2fb03342a21a", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#aa6701", | |
"rgb": { | |
"r": 0.6666666865348816, | |
"g": 0.40392157435417175, | |
"b": 0.003921568859368563 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 7", | |
"key": "216752b52cd243d7cc718267aafcdf2a2081c830", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#864700", | |
"rgb": { | |
"r": 0.5254902243614197, | |
"g": 0.27843138575553894, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 8", | |
"key": "0313f7889a97d8ea819af7835d38e426090acda9", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#6c3401", | |
"rgb": { | |
"r": 0.42352941632270813, | |
"g": 0.20392157137393951, | |
"b": 0.003921568859368563 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 9", | |
"key": "0ac715e4ca6ba525cc0d0e6ea97f9fb9b3b164f6", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#461e02", | |
"rgb": { | |
"r": 0.27450981736183167, | |
"g": 0.11764705926179886, | |
"b": 0.007843137718737125 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Yellow/Yellow 10", | |
"key": "6be7e8070eb6545812f8c6b02f80529a47ca843b", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#261205", | |
"rgb": { | |
"r": 0.14901961386203766, | |
"g": 0.07058823853731155, | |
"b": 0.019607843831181526 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 1", | |
"key": "38c85c083760f912390291ec334a5f8e68bf0cdb", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fef5e9", | |
"rgb": { | |
"r": 0.9960784316062927, | |
"g": 0.9607843160629272, | |
"b": 0.9137254953384399 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 2", | |
"key": "d102496b813ea778d53411f547c8d9fa3f471241", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fde7c9", | |
"rgb": { | |
"r": 0.9921568632125854, | |
"g": 0.9058823585510254, | |
"b": 0.7882353067398071 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 3", | |
"key": "74333bc192b3180d10e07369e1e7c4e6d13bcc3e", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fcca8d", | |
"rgb": { | |
"r": 0.9882352948188782, | |
"g": 0.7921568751335144, | |
"b": 0.5529412031173706 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 4", | |
"key": "7ba53ba1a41df84bc877694229db427a2bf65c36", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#faa44a", | |
"rgb": { | |
"r": 0.9803921580314636, | |
"g": 0.6431372761726379, | |
"b": 0.29019609093666077 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 5", | |
"key": "84b6b043f519774501729556e0cb04ebe435814f", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f07a0e", | |
"rgb": { | |
"r": 0.9411764740943909, | |
"g": 0.47843137383461, | |
"b": 0.054901961237192154 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 6", | |
"key": "03c8594e31439e63ec6861b83e08b8ba9777db71", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#c25705", | |
"rgb": { | |
"r": 0.7607843279838562, | |
"g": 0.34117648005485535, | |
"b": 0.019607843831181526 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 7", | |
"key": "1acaa03892a52b5ea7d01ee4ae1a6e05bee0856f", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#973a08", | |
"rgb": { | |
"r": 0.5921568870544434, | |
"g": 0.22745098173618317, | |
"b": 0.0313725508749485 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 8", | |
"key": "31ea2c58a96a82284d3b1576d71b2459faab4750", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#7c2707", | |
"rgb": { | |
"r": 0.48627451062202454, | |
"g": 0.15294118225574493, | |
"b": 0.027450980618596077 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 9", | |
"key": "f69608f1a16a93e068b3a7a7e4e357c4ec2f095e", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#4d1804", | |
"rgb": { | |
"r": 0.3019607961177826, | |
"g": 0.0941176488995552, | |
"b": 0.01568627543747425 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Orange/Orange 10", | |
"key": "2b198d78c0c30c594261081d716a4eccf0f200a5", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#2d0d03", | |
"rgb": { | |
"r": 0.1764705926179886, | |
"g": 0.05098039284348488, | |
"b": 0.0117647061124444 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 1", | |
"key": "3afe02ea7a11b9bf22b5bf59964ecf507dfd13f6", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fdf4f4", | |
"rgb": { | |
"r": 0.9921568632125854, | |
"g": 0.95686274766922, | |
"b": 0.95686274766922 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 2", | |
"key": "cccda026b8aacd020f4d9b22235c18c61a1b0fd4", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fee5e5", | |
"rgb": { | |
"r": 0.9960784316062927, | |
"g": 0.8980392217636108, | |
"b": 0.8980392217636108 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 3", | |
"key": "6d800a7819d7819ff0aa18834c53c22ef0fbe118", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#fcbdba", | |
"rgb": { | |
"r": 0.9882352948188782, | |
"g": 0.7411764860153198, | |
"b": 0.729411780834198 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 4", | |
"key": "9c962c5ab22dc6f43ee01fa596208fc6f772223c", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f98982", | |
"rgb": { | |
"r": 0.9764705896377563, | |
"g": 0.5372549295425415, | |
"b": 0.5098039507865906 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 5", | |
"key": "90c4c6a1ded06965d0dba3534f82edb1b9570b1a", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#f5554b", | |
"rgb": { | |
"r": 0.9607843160629272, | |
"g": 0.3333333432674408, | |
"b": 0.29411765933036804 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 6", | |
"key": "03b2309cdd75da073fdb77477db9ce4e957eda5f", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#df2d24", | |
"rgb": { | |
"r": 0.8745098114013672, | |
"g": 0.1764705926179886, | |
"b": 0.1411764770746231 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 7", | |
"key": "14b388b3ec907b4aaff7cfe2a23d1fa81dffc07f", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#b00f0a", | |
"rgb": { | |
"r": 0.6901960968971252, | |
"g": 0.05882352963089943, | |
"b": 0.03921568766236305 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 8", | |
"key": "b5b25376d566bc177414c76588634bbc349fd44b", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#8e0000", | |
"rgb": { | |
"r": 0.5568627715110779, | |
"g": 0, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 9", | |
"key": "cab6ae8c5b6634d662f8b1b13151b4ee7245a159", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#5a0100", | |
"rgb": { | |
"r": 0.3529411852359772, | |
"g": 0.003921568859368563, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Red/Red 10", | |
"key": "6551fcb76d0eede4075adc6ed4dc2881541177a2", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#380000", | |
"rgb": { | |
"r": 0.21960784494876862, | |
"g": 0, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Basics/White", | |
"key": "72c2ccbff140288907986dc6f0aacd111ed1a43a", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#ffffff", | |
"rgb": { | |
"r": 1, | |
"g": 1, | |
"b": 1 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "Basics/Black", | |
"key": "774f267303d7d908ef0cf8dee5b41cb940c6241e", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 1, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#000000", | |
"rgb": { | |
"r": 0, | |
"g": 0, | |
"b": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "_Roles/Background/Background Light Transparent", | |
"key": "ce9c09a8a9445a076e56c39ab02fa4063d231053", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 0.20000000298023224, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#ffffff", | |
"rgb": { | |
"r": 1, | |
"g": 1, | |
"b": 1 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "_Roles/Background/Background Dark Transparent", | |
"key": "a47edce2a78d67ac531a36e865d140c419a747d5", | |
"description": "", | |
"color": { | |
"type": "SOLID", | |
"visible": true, | |
"opacity": 0.07999999821186066, | |
"blendMode": "NORMAL", | |
"color": { | |
"hex": "#000000", | |
"rgb": { | |
"r": 0, | |
"g": 0, | |
"b": 0 | |
} | |
} | |
} | |
} | |
] | |
/*-------------------------*/ | |
/*---- Utlity Functions ---*/ | |
/*-------------------------*/ | |
const rgbToHex = (r, g, b) => { | |
const componentToHex = (c) => { | |
c = Math.round(c * 255) | |
let hex = c.toString(16); | |
return hex.length === 1 ? "0" + hex : hex; | |
} | |
const combineComponents = (r, g, b) => { | |
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); | |
} | |
return combineComponents(r,g,b) | |
} | |
// Utility function for pushing a color into an array | |
// it's just saving me from repeating myself a bit | |
const pushColorToArray = (layer, colorType, array) => { | |
const styleIdType = colorType === 'fills' ? 'fillStyleId' : 'strokeStyleId' | |
const isSolidColor = layer?.fills[0]?.type === 'SOLID' | |
array.push( | |
{ | |
layerId: layer.id, | |
layerName: layer.name, | |
layerType: layer.type, | |
color: layer[colorType], | |
colorStyleId: layer[styleIdType], | |
// if it's a gradient assume it doesn't have a color style | |
// Unsafe assumption? Yes. Time saver? Yes. | |
hasColorStyle: isSolidColor ? layer[styleIdType].length > 0 : false, | |
visible: layer.visible, | |
colorType: colorType.slice(0, -1) // it's plural, make it singular | |
} | |
) | |
} | |
/*-------------------------*/ | |
/*-- Meat and potatoes --*/ | |
/*-------------------------*/ | |
// Get all styles in figma doc that have a color | |
// (the output will have a lot of data stored in prototype properites) | |
const rawLayersWithColor = figma.root.findAll(n => { | |
// does it have a fill or a stroke? | |
// if so, add it to the new array | |
if (n.id === "I161:205;661:207") { | |
debugger | |
} | |
return n?.fills?.length > 0 || n?.strokes?.length > 0 | |
}) | |
// Pull out the data taht we care about and make it accessible | |
// without needing to access prototype properties. | |
const layersWithColor = rawLayersWithColor.map((layer, index) => { | |
const hasFill = rawLayersWithColor[index].fills.length > 0 | |
const hasStroke = rawLayersWithColor[index].strokes.length > 0 | |
const hasFillAndStroke = hasFill && hasStroke | |
return { | |
id: rawLayersWithColor[index].id, | |
name: rawLayersWithColor[index].name, | |
fills: rawLayersWithColor[index].fills, | |
strokes: rawLayersWithColor[index].strokes, | |
fillStyleId: rawLayersWithColor[index].fillStyleId, | |
strokeStyleId: rawLayersWithColor[index].strokeStyleId, | |
visible: rawLayersWithColor[index].visible, | |
type: rawLayersWithColor[index].type, | |
hasFill: hasFill, | |
hasStroke: hasStroke, | |
hasFillAndStroke: hasFillAndStroke | |
} | |
}) | |
const allInstancesOfColor = layersWithColor.map(layer => { | |
let tempColors = [] | |
// get all each fill and stroke that isn't empty and add it | |
// as an item in a new flat array containing all color instances | |
if (layer.hasFillAndStroke) { | |
pushColorToArray(layer, 'fills', tempColors) | |
pushColorToArray(layer, 'strokes', tempColors) | |
} else if (layer.hasFill) { | |
pushColorToArray(layer, 'fills', tempColors) | |
} else if (layer.hasStroke) { | |
pushColorToArray(layer, 'strokes', tempColors) | |
} | |
return tempColors | |
}).flat() | |
// Checklist for verifying that a layers uses a One Core color style | |
// 1. If it's a fill, it's `fillStyleId` isn't an empty string (likewise if it's a stroke but for `strokeStyleId`) | |
// 2. The key extracted from it's (fill/stroke)styleId matches a key from the `oneCorePaintStyles` array | |
// This will give you the total number of colors that use a color style | |
// const amountOfColorsUsingColorStyle = allInstancesOfColor.reduce((prev, color, index) => { | |
// return color.hasColorStyle ? prev + 1 : prev | |
// }, 0) | |
const doesColorMatchAnyOneCoreStyle = (colorInHex) => { | |
// for every One Core color style... | |
return oneCorePaintStyles.some(style => { | |
// if the argument color matches the current style color | |
// return true | |
return colorInHex === style.color.color.hex | |
},false) | |
} | |
const doesKeyMatchAnyOneCoreColorStyleKey = (key) => { | |
// for every One Core color style... | |
return oneCorePaintStyles.some(style => { | |
// if the argument color matches the current style color | |
// return true | |
return key.includes(style.key) | |
},false) | |
} | |
// for each color that has a color style | |
const colorsWithColorStyle = allInstancesOfColor.filter(color => { | |
return color.hasColorStyle | |
}) | |
// If it's color matches a One Core color add it an array | |
const colorsUsingOneCoreStyle = (() => { | |
let colors = colorsWithColorStyle.filter(color => { | |
const {r, g, b} = color.color[0].color | |
const colorInHex = rgbToHex(r,g,b) | |
return doesColorMatchAnyOneCoreStyle(colorInHex) && doesKeyMatchAnyOneCoreColorStyleKey(color.colorStyleId) | |
}) | |
// add the style name to the colors | |
colors.map((color, index) => { | |
oneCorePaintStyles.map(style => { | |
if(color.colorStyleId.includes(style.key)) { | |
colors[index] = { | |
...color, | |
styleName: style.name | |
} | |
} | |
return | |
}) | |
}) | |
return colors | |
})() | |
// If it's *doesn't* color matches a One Core color add it an array | |
const colorsWithStyleNotUsingOneCoreStyle = colorsWithColorStyle.filter(color => { | |
const {r, g, b} = color.color[0].color | |
const colorInHex = rgbToHex(r,g,b) | |
return !doesKeyMatchAnyOneCoreColorStyleKey(color.colorStyleId) | |
}) | |
// Every color that isn't using a one core color style | |
// loop through all colors... | |
const colorsNotUsingOneCoreColorStyle = allInstancesOfColor.filter(color => { | |
// if the color isn't a solid color (a.k.a. a gradient), it get's added to the array | |
if (color.color[0].type !== 'SOLID') { | |
return true | |
} else { | |
const {r, g, b} = color.color[0].color | |
const colorInHex = rgbToHex(r,g,b) | |
return ( | |
// if the color doesn't match any one core color Aaand... | |
// if the color's styleId doesn't match any one core color Id | |
// (the styleId of colors that use styles contain the key of the | |
// original color style they use. In other words if it's a color | |
// that uses a one core color style, it's styleId property will | |
// contain the key of the one core color style) | |
!doesKeyMatchAnyOneCoreColorStyleKey(color.colorStyleId) | |
) | |
} | |
}) | |
const addOneCoreStyleNameToColor = () => { | |
colorsUsingOneCoreStyle.map((color, index) => { | |
oneCorePaintStyles.map(style => { | |
if(color.colorStyleId.includes(style.key)) { | |
debugger | |
colorsUsingOneCoreStyle[index] = { | |
...color, | |
styleName: style.name | |
} | |
} | |
return | |
}) | |
}) | |
} | |
const oneCoreColorStyleCoverage = `${((colorsUsingOneCoreStyle.length / allInstancesOfColor.length) * 100).toFixed(2)}%` | |
const fileColorStats = { | |
allInstancesOfColor: allInstancesOfColor, | |
colorsWithColorStyle: colorsWithColorStyle, | |
colorsUsingOneCoreStyle: colorsUsingOneCoreStyle, | |
colorsWithStyleNotUsingOneCoreStyle: colorsWithStyleNotUsingOneCoreStyle, | |
colorsNotUsingOneCoreColorStyle: colorsNotUsingOneCoreColorStyle, | |
oneCoreColorStyleCoverage: oneCoreColorStyleCoverage | |
} | |
console.log(fileColorStats); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment