Skip to content

Instantly share code, notes, and snippets.

@danielgolden
Last active January 8, 2022 20:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielgolden/673afc8bce8f96932b2394fedd9de4e1 to your computer and use it in GitHub Desktop.
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
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