{ "properties": [ { "release": "2.14.0", "primitive": true, "name": "paletteBlue10", "value": "rgb(0, 22, 57)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue65", "value": "rgb(87, 163, 253)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue15", "value": "rgb(3, 35, 77)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue90", "value": "rgb(216, 230, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue80", "value": "rgb(170, 203, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue70", "value": "rgb(120, 176, 253)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue60", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue50", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue40", "value": "rgb(11, 92, 171)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue95", "value": "rgb(238, 244, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue30", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteBlue20", "value": "rgb(3, 45, 96)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Blue 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue90", "value": "rgb(207, 233, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue80", "value": "rgb(144, 208, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue70", "value": "rgb(26, 185, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue60", "value": "rgb(13, 157, 218)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue50", "value": "rgb(16, 124, 173)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue40", "value": "rgb(5, 98, 138)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue95", "value": "rgb(234, 245, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue30", "value": "rgb(8, 73, 104)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue20", "value": "rgb(2, 50, 72)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue10", "value": "rgb(0, 26, 40)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue65", "value": "rgb(8, 171, 237)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteCloudBlue15", "value": "rgb(10, 38, 54)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Cloud Blue 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen15", "value": "rgb(12, 41, 18)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen90", "value": "rgb(205, 239, 196)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen80", "value": "rgb(145, 219, 139)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen70", "value": "rgb(69, 198, 90)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen60", "value": "rgb(59, 167, 85)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen50", "value": "rgb(46, 132, 74)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen40", "value": "rgb(57, 101, 71)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen95", "value": "rgb(235, 247, 230)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen30", "value": "rgb(25, 78, 49)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen20", "value": "rgb(28, 51, 38)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen10", "value": "rgb(7, 27, 18)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteGreen65", "value": "rgb(65, 182, 88)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Green 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange90", "value": "rgb(255, 222, 213)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange80", "value": "rgb(254, 185, 165)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange70", "value": "rgb(255, 144, 110)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange60", "value": "rgb(255, 93, 45)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange50", "value": "rgb(216, 58, 0)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange40", "value": "rgb(170, 48, 1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange95", "value": "rgb(254, 241, 237)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange30", "value": "rgb(126, 38, 0)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange20", "value": "rgb(74, 36, 19)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange10", "value": "rgb(40, 18, 2)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange65", "value": "rgb(255, 120, 79)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteHotOrange15", "value": "rgb(66, 22, 4)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Hot Orange 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo90", "value": "rgb(224, 229, 248)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo80", "value": "rgb(190, 199, 246)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo70", "value": "rgb(158, 169, 241)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo60", "value": "rgb(127, 140, 237)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo50", "value": "rgb(88, 103, 232)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo40", "value": "rgb(58, 73, 218)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo95", "value": "rgb(241, 243, 251)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo30", "value": "rgb(47, 44, 183)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo20", "value": "rgb(50, 29, 113)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo10", "value": "rgb(32, 6, 71)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo65", "value": "rgb(142, 155, 239)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteIndigo15", "value": "rgb(31, 9, 116)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Indigo 15" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral90", "value": "rgb(229, 229, 229)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 90" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral80", "value": "rgb(201, 201, 201)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 80" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral70", "value": "rgb(174, 174, 174)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 70" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral100", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 100" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral60", "value": "rgb(147, 147, 147)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 60" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral50", "value": "rgb(116, 116, 116)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 50" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral40", "value": "rgb(92, 92, 92)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 40" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral95", "value": "rgb(243, 243, 243)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 95" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral30", "value": "rgb(68, 68, 68)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 30" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral20", "value": "rgb(46, 46, 46)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 20" }, { "release": "2.16.0", "primitive": true, "name": "paletteNeutral10", "value": "rgb(24, 24, 24)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Neutral 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange90", "value": "rgb(254, 223, 208)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange80", "value": "rgb(255, 186, 144)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange70", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange60", "value": "rgb(221, 122, 1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange50", "value": "rgb(169, 100, 4)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange40", "value": "rgb(130, 81, 1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange95", "value": "rgb(255, 241, 234)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange30", "value": "rgb(95, 62, 2)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange20", "value": "rgb(62, 43, 2)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange10", "value": "rgb(32, 22, 0)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange65", "value": "rgb(243, 131, 3)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteOrange15", "value": "rgb(55, 30, 3)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Orange 15" }, { "release": "2.14.0", "primitive": true, "name": "palettePink50", "value": "rgb(227, 6, 106)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 50" }, { "release": "2.14.0", "primitive": true, "name": "palettePink40", "value": "rgb(182, 5, 84)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 40" }, { "release": "2.14.0", "primitive": true, "name": "palettePink95", "value": "rgb(254, 240, 243)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 95" }, { "release": "2.14.0", "primitive": true, "name": "palettePink30", "value": "rgb(138, 3, 62)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 30" }, { "release": "2.14.0", "primitive": true, "name": "palettePink20", "value": "rgb(97, 2, 42)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 20" }, { "release": "2.14.0", "primitive": true, "name": "palettePink65", "value": "rgb(254, 114, 152)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 65" }, { "release": "2.14.0", "primitive": true, "name": "palettePink10", "value": "rgb(55, 1, 20)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 10" }, { "release": "2.14.0", "primitive": true, "name": "palettePink15", "value": "rgb(75, 6, 32)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 15" }, { "release": "2.14.0", "primitive": true, "name": "palettePink90", "value": "rgb(253, 221, 227)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 90" }, { "release": "2.14.0", "primitive": true, "name": "palettePink80", "value": "rgb(253, 182, 197)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 80" }, { "release": "2.14.0", "primitive": true, "name": "palettePink70", "value": "rgb(254, 138, 167)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 70" }, { "release": "2.14.0", "primitive": true, "name": "palettePink60", "value": "rgb(255, 83, 138)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Pink 60" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple15", "value": "rgb(48, 11, 96)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 15" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple90", "value": "rgb(236, 225, 249)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 90" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple80", "value": "rgb(215, 191, 242)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 80" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple70", "value": "rgb(194, 158, 241)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 70" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple60", "value": "rgb(173, 123, 238)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 60" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple50", "value": "rgb(144, 80, 233)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 50" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple40", "value": "rgb(117, 38, 227)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 40" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple95", "value": "rgb(246, 242, 251)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 95" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple30", "value": "rgb(90, 27, 169)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 30" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple20", "value": "rgb(64, 16, 117)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 20" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple10", "value": "rgb(36, 6, 67)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 10" }, { "release": "2.14.0", "primitive": true, "name": "palettePurple65", "value": "rgb(183, 141, 239)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Purple 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed90", "value": "rgb(254, 222, 216)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed80", "value": "rgb(254, 184, 171)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed70", "value": "rgb(254, 143, 125)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed60", "value": "rgb(254, 92, 76)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed50", "value": "rgb(234, 0, 30)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed95", "value": "rgb(254, 241, 238)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed40", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed30", "value": "rgb(142, 3, 15)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed20", "value": "rgb(100, 1, 3)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed10", "value": "rgb(48, 12, 1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed65", "value": "rgb(254, 119, 101)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteRed15", "value": "rgb(74, 12, 4)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Red 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal15", "value": "rgb(7, 40, 37)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal90", "value": "rgb(172, 243, 228)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal80", "value": "rgb(4, 225, 203)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal70", "value": "rgb(1, 195, 179)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal60", "value": "rgb(6, 165, 154)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal50", "value": "rgb(11, 130, 124)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal40", "value": "rgb(5, 103, 100)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal95", "value": "rgb(222, 249, 243)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal30", "value": "rgb(2, 77, 76)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal20", "value": "rgb(2, 52, 52)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal10", "value": "rgb(7, 27, 18)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteTeal65", "value": "rgb(3, 180, 167)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Teal 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet15", "value": "rgb(61, 1, 87)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet90", "value": "rgb(242, 222, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet80", "value": "rgb(229, 185, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 80" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet70", "value": "rgb(216, 146, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet60", "value": "rgb(203, 101, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet50", "value": "rgb(186, 1, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet40", "value": "rgb(150, 2, 199)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet95", "value": "rgb(249, 240, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet30", "value": "rgb(115, 3, 148)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet20", "value": "rgb(72, 26, 84)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet10", "value": "rgb(46, 0, 57)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteViolet65", "value": "rgb(209, 125, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Violet 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow70", "value": "rgb(228, 162, 1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 70" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow60", "value": "rgb(202, 133, 1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 60" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow50", "value": "rgb(168, 100, 3)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 50" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow40", "value": "rgb(140, 75, 2)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 40" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow95", "value": "rgb(251, 243, 224)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 95" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow30", "value": "rgb(111, 52, 0)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 30" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow20", "value": "rgb(79, 33, 0)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 20" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow10", "value": "rgb(40, 18, 2)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 10" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow65", "value": "rgb(215, 147, 4)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 65" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow15", "value": "rgb(46, 34, 4)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 15" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow90", "value": "rgb(249, 227, 182)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 90" }, { "release": "2.14.0", "primitive": true, "name": "paletteYellow80", "value": "rgb(252, 192, 3)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Yellow 80" }, { "access": "global", "primitive": true, "name": "colorBackgroundRowActive", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for the active state on rows or items on list-like components." }, { "release": "2.8.0", "primitive": true, "name": "colorBackgroundLight", "value": "rgb(255, 255, 255)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Light variant of COLOR_BACKGROUND." }, { "access": "global", "primitive": true, "name": "colorBackgroundRowHover", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for the hover state on rows or items on list-like components." }, { "primitive": true, "name": "colorBackgroundErrorDark", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Dark color for UI elements related to errors. Accessible with white text." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "primitive": true, "value": "rgb(116, 116, 116)", "comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBackgroundInfo" }, { "access": "global", "release": "1.0.0", "primitive": true, "name": "colorBackgroundAltInverse", "value": "rgb(3, 45, 96)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Alternative background color for dark portions of the app." }, { "access": "global", "primitive": true, "name": "colorBackgroundRowNew", "value": "rgb(205, 239, 196)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for the new state on rows or items on list-like components." }, { "primitive": true, "name": "colorBackgroundSuccessDark", "value": "rgb(46, 132, 74)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Dark color for UI elements that have to do with success. Accessible with white text." }, { "access": "global", "primitive": true, "name": "colorBackgroundStencil", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as background for loading stencils on white background." }, { "primitive": true, "name": "colorBackgroundWarning", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements that have to do with warning." }, { "primitive": true, "name": "colorBackgroundHighlightSearch", "value": "rgb(255, 240, 63)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for highlighting text in search results." }, { "primitive": true, "name": "colorBackgroundDestructiveHover", "value": "rgb(142, 3, 15)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hover color for UI elements related to destructive actions." }, { "access": "global", "primitive": true, "name": "colorBackground", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for the whole app." }, { "access": "global", "primitive": true, "name": "colorBrandDark", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text." }, { "primitive": true, "name": "colorBackgroundBackdrop", "value": "rgba(255, 255, 255, 0.75)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "The color of the mask overlay that appears when you enter a modal state." }, { "release": "2.8.0", "primitive": true, "name": "colorBackgroundDark", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Dark variant of COLOR_BACKGROUND." }, { "access": "global", "primitive": true, "name": "colorBrand", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Our product brand blue." }, { "primitive": true, "name": "colorBackgroundDestructive", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements related to destructive actions." }, { "primitive": true, "name": "colorBackgroundSuccess", "value": "rgb(69, 198, 90)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements that have to do with success." }, { "primitive": true, "name": "colorBackgroundWarningDark", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Dark Color for UI elements that have to do with warning." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "primitive": true, "value": "rgb(68, 68, 68)", "comment": "Color for UI elements related to the offline state.", "name": "colorBackgroundOffline" }, { "access": "global", "primitive": true, "name": "colorBackgroundStencilAlt", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as an alternate background for loading stencils on gray backgrounds." }, { "release": "2.8.0", "primitive": true, "name": "colorBackgroundInverseLight", "value": "rgb(3, 45, 96)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Light variant of COLOR_BACKGROUND_INVERSE." }, { "primitive": true, "name": "colorBackgroundCustomer", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for UI elements related to the concept of an external user or customer." }, { "primitive": true, "name": "colorBackgroundError", "value": "rgb(254, 92, 76)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Color for UI elements related to errors." }, { "access": "global", "release": "1.0.0", "primitive": true, "name": "colorBackgroundAlt", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Second default background color for the app." }, { "primitive": true, "name": "colorBackgroundSuccessDarker", "value": "rgb(25, 78, 49)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Darker color for UI elements that have to do with success. Accessible with white text." }, { "access": "global", "primitive": true, "name": "colorBackgroundRowSelected", "value": "rgb(243, 243, 243)", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "type": "color", "category": "background-color", "comment": "Used as the background color for selected rows or items on list-like components." }, { "primitive": true, "name": "colorBrandDarker", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Our product brand blue, darkened even further." }, { "primitive": true, "name": "colorBackgroundSelection", "value": "rgb(216, 230, 254)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for text selected with a mouse." }, { "primitive": true, "name": "colorBackgroundDestructiveActive", "value": "rgb(142, 3, 15)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active color for UI elements related to destructive actions." }, { "access": "global", "release": "1.0.0", "primitive": true, "name": "colorBackgroundInverse", "value": "rgb(0, 22, 57)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for dark portions of the app (like Stage Left or tooltips)." }, { "access": "global", "primitive": true, "name": "colorBackgroundHighlight", "value": "rgb(250, 255, 189)", "scope": "global", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for highlighting UI elements." }, { "primitive": true, "name": "colorBorderErrorDark", "value": "rgb(254, 143, 125)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Dark alternative border color for UI elements related to errors." }, { "primitive": true, "name": "colorBorderBrandDark", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text." }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "primitive": true, "value": "rgb(116, 116, 116)", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBorderInfo" }, { "access": "global", "primitive": true, "name": "colorBorderWarning", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with warnings." }, { "primitive": true, "name": "colorBorderDestructiveHover", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Hover border color for UI elements that have to do with destructive actions." }, { "access": "global", "primitive": true, "name": "colorBorder", "value": "rgb(201, 201, 201)", "cssProperties": [ "border*", "box-shadow", "background*" ], "type": "color", "category": "border-color", "comment": "Default border color for UI elements." }, { "primitive": true, "name": "colorBorderSuccessDark", "value": "rgb(46, 132, 74)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Dark alternative border color for UI elements that have to do with success." }, { "primitive": true, "name": "colorBorderDestructive", "value": "rgb(234, 0, 30)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with destructive actions." }, { "access": "global", "primitive": true, "name": "colorBorderSeparatorAlt2", "value": "rgb(201, 201, 201)", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired." }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "primitive": true, "value": "rgb(68, 68, 68)", "comment": "Border color for UI elements related to the offline state.", "name": "colorBorderOffline" }, { "access": "global", "primitive": true, "name": "colorBorderSuccess", "value": "rgb(145, 219, 139)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with success." }, { "access": "global", "primitive": true, "name": "colorBorderSeparator", "value": "rgb(243, 243, 243)", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Lightest separator color - used as default separator on white backgrounds." }, { "access": "global", "primitive": true, "name": "colorBorderBrand", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Our product brand blue." }, { "primitive": true, "name": "colorBorderSelectionActive", "value": "rgb(243, 243, 243)", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders." }, { "access": "global", "primitive": true, "name": "colorBorderError", "value": "rgb(234, 0, 30)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements that have to do with errors." }, { "primitive": true, "name": "colorBorderSelectionHover", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a component that is being hovered over. Specific to builders." }, { "access": "global", "primitive": true, "name": "colorBorderRowSelectedHover", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Used as the border color for the hover state on selected rows or items on list-like components." }, { "primitive": true, "name": "colorBorderCustomer", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color for UI elements related to the concept of an external user or customer." }, { "primitive": true, "name": "colorBorderSelection", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a selected component. Specific to builders." }, { "access": "global", "primitive": true, "name": "colorBorderRowSelected", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Used as the border color for selected rows or items on list-like components." }, { "access": "global", "primitive": true, "name": "colorBorderSeparatorAlt", "value": "rgb(201, 201, 201)", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Medium separator color - used as default separator on light gray backgrounds." }, { "primitive": true, "name": "colorBorderInverse", "value": "rgb(0, 22, 57)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Border color to match UI elements using color-background-inverse." }, { "primitive": true, "name": "colorBorderDestructiveActive", "value": "rgb(142, 3, 15)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Active border color for UI elements that have to do with destructive actions." }, { "primitive": true, "name": "colorBorderErrorAlt", "value": "rgb(254, 143, 125)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Alternative border color for UI elements related to errors." }, { "access": "global", "primitive": true, "name": "colorBorderSeparatorInverse", "value": "rgb(3, 45, 96)", "scope": "global", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "type": "color", "category": "border-color", "comment": "Used as a separator on dark backgrounds, such as stage left navigation." }, { "access": "global", "primitive": true, "name": "borderRadiusSmall", "value": "2", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius" }, { "access": "global", "primitive": true, "name": "borderRadiusMedium", "value": "4", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius", "comment": "Icons in lists, record home icon, unbound input elements" }, { "access": "global", "primitive": true, "name": "borderRadiusLarge", "value": "8", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius" }, { "access": "global", "primitive": true, "name": "borderRadiusCircle", "value": "0.5", "scope": "global", "cssProperties": [ "border*radius" ], "type": "size", "category": "radius", "comment": "Circle for global use, action icon bgd shape" }, { "access": "global", "primitive": true, "name": "borderWidthThin", "value": "1px", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "border-style" }, { "access": "global", "primitive": true, "name": "borderWidthThick", "value": "2px", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "border-style" }, { "primitive": true, "name": "shadowActive", "value": "0 0 2px #0176d3", "scope": "global", "cssProperties": [ "box-shadow" ], "type": "box-shadow", "category": "shadow", "comment": "Shadow for active states on interactive elements." }, { "access": "global", "primitive": true, "name": "shadowDrag", "value": "0 2px 4px 0 rgba(0, 0, 0, 0.40)", "scope": "global", "cssProperties": [ "box-shadow" ], "type": "box-shadow", "category": "shadow", "comment": "Shadow for drag-n-drop." }, { "access": "global", "primitive": true, "name": "shadowDropDown", "value": "0 2px 3px 0 rgba(0, 0, 0, 0.16)", "scope": "global", "cssProperties": [ "box-shadow" ], "type": "box-shadow", "category": "shadow", "comment": "Shadow for drop down." }, { "access": "global", "primitive": true, "name": "durationInstantly", "value": "0s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0 seconds, 0 frames" }, { "access": "global", "primitive": true, "name": "durationImmediately", "value": "0.05s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.05 seconds, 3 frames" }, { "access": "global", "primitive": true, "name": "durationQuickly", "value": "0.1s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.1 seconds, 6 frames" }, { "access": "global", "primitive": true, "name": "durationPromptly", "value": "0.2s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.2 seconds, 12 frames" }, { "access": "global", "primitive": true, "name": "durationSlowly", "value": "0.4s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "0.4 seconds, 24 frames" }, { "access": "global", "primitive": true, "name": "durationPaused", "value": "3.2s", "scope": "global", "cssProperties": [ "animation*", "transition*" ], "type": "time", "category": "time", "comment": "3.2 seconds, 192 frames" }, { "access": "global", "primitive": true, "name": "fontFamily", "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "scope": "global", "cssProperties": [ "font", "font-family" ], "type": "font", "category": "font", "comment": "Default font-family for Salesforce applications" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "scope": "global", "primitive": true, "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "name": "fontFamilyHeading" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "scope": "global", "primitive": true, "value": "Consolas, Menlo, Monaco, Courier, monospace", "name": "fontFamilyMonospace" }, { "primitive": true, "name": "fontSize1", "value": "10", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 1" }, { "primitive": true, "name": "fontSize2", "value": "12", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 2" }, { "primitive": true, "name": "fontSize3", "value": "13", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 3" }, { "primitive": true, "name": "varFontSize10", "value": "32", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 10" }, { "primitive": true, "name": "fontSize4", "value": "14", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 4" }, { "primitive": true, "name": "varFontSize11", "value": "42", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 11" }, { "primitive": true, "name": "fontSize5", "value": "16", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 5" }, { "primitive": true, "name": "fontSize6", "value": "18", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 6" }, { "primitive": true, "name": "fontSize7", "value": "20", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 7" }, { "primitive": true, "name": "fontSize8", "value": "24", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 8" }, { "primitive": true, "name": "varFontSize1", "value": "10", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 1" }, { "primitive": true, "name": "fontSize9", "value": "28", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 9" }, { "primitive": true, "name": "varFontSize2", "value": "12", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 2" }, { "primitive": true, "name": "varFontSize3", "value": "13", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 3" }, { "primitive": true, "name": "fontSize10", "value": "32", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 10" }, { "primitive": true, "name": "varFontSize4", "value": "14", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 4" }, { "primitive": true, "name": "fontSize11", "value": "42", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Constant typography token for font size 11" }, { "primitive": true, "name": "varFontSize5", "value": "16", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 5" }, { "primitive": true, "name": "varFontSize6", "value": "18", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 6" }, { "primitive": true, "name": "varFontSize7", "value": "20", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 7" }, { "primitive": true, "name": "varFontSize8", "value": "24", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 8" }, { "primitive": true, "name": "varFontSize9", "value": "28", "scope": "global", "cssProperties": [ "font", "font-size" ], "type": "font-size", "category": "font-size", "comment": "Variable typography token for font size 9" }, { "access": "global", "primitive": true, "name": "fontWeightLight", "value": "300", "deprecated": true, "scope": "global", "cssProperties": [ "font", "font-weight" ], "type": "font-weight", "category": "font", "comment": "Use for large headings only." }, { "access": "global", "primitive": true, "name": "fontWeightRegular", "value": "400", "scope": "global", "cssProperties": [ "font", "font-weight" ], "type": "font-weight", "category": "font", "comment": "Most all body copy." }, { "access": "global", "primitive": true, "name": "fontWeightBold", "value": "700", "scope": "global", "cssProperties": [ "font", "font-weight" ], "type": "font-weight", "category": "font", "comment": "Used sparingly for emphasized text within regular body copy." }, { "access": "global", "primitive": true, "name": "lineHeightHeading", "value": "1.25", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Unitless line-heights for reusability" }, { "access": "global", "primitive": true, "name": "lineHeightText", "value": "1.5", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Unitless line-heights for reusability" }, { "access": "global", "primitive": true, "name": "lineHeightReset", "value": "1", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Remove extra leading. Unitless line-heights for reusability" }, { "primitive": true, "name": "varLineHeightText", "value": "1.5", "scope": "global", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Variable unitless line-heights for reusability" }, { "primitive": true, "name": "opacity5", "value": "0.5", "scope": "global", "cssProperties": [ "opacity" ], "type": "opacity", "category": "opacity", "comment": "50% transparency of an element" }, { "primitive": true, "name": "opacity8", "value": "0.8", "scope": "global", "cssProperties": [ "opacity" ], "type": "opacity", "category": "opacity", "comment": "80% transparency of an element" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastWeakDisabled", "value": "rgba(166, 166, 166, 0.25)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_CONTRAST_WEAK" }, { "release": "2.5.0", "primitive": true, "name": "colorGray11", "value": "rgb(62, 62, 60)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 11" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandPrimaryTransparent10", "value": "rgba(21, 137, 238, 0.1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 10%" }, { "release": "2.5.0", "primitive": true, "name": "colorGray12", "value": "rgb(43, 40, 38)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 12" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandBackgroundDarkTransparent", "value": "rgba(221, 219, 218, 0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug" }, { "release": "2.5.0", "primitive": true, "name": "colorGray13", "value": "rgb(8, 7, 7)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 13" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeader", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Background color a branded app header" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandLightActive", "value": "rgb(227, 229, 237)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_LIGHT" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastWarm", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER_CONTRAST that provides a warm color" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderIconDisabled", "value": "rgba(145, 145, 145, 0.25)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_ICON" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastActive", "value": "rgb(80, 80, 80)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandBackgroundPrimary", "value": "rgb(250, 250, 249)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary page background color" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandPrimary", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary brand color" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastWeakActive", "value": "rgb(129, 129, 129)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WEAK" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandContrastActive", "value": "rgb(13, 14, 18)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_CONTRAST" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastCool", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER_CONTRAST that provides a cool color" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastInverse", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER that is accessible with BRAND_HEADER" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandDark", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND that is accessible with light colors" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandAccessible", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND that is accessible with white" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandBackgroundDark", "value": "rgb(232, 232, 232)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandTextLinkActive", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_TEXT_LINK" }, { "release": "2.5.0", "primitive": true, "name": "colorGray1", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 1" }, { "release": "2.5.0", "primitive": true, "name": "colorGray2", "value": "rgb(250, 250, 249)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 2" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderIconActive", "value": "rgb(129, 129, 129)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_ICON" }, { "release": "2.5.0", "primitive": true, "name": "colorGray3", "value": "rgb(243, 242, 242)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 3" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderIcon", "value": "rgb(145, 145, 145)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Icons of BRAND_HEADER that is accessible with BRAND_HEADER" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandDisabled", "value": "rgb(201, 199, 197)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_A11Y" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandTextLink", "value": "rgb(11, 92, 171)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary text link brand color" }, { "release": "2.5.0", "primitive": true, "name": "colorGray4", "value": "rgb(236, 235, 234)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 4" }, { "release": "2.5.0", "primitive": true, "name": "colorGray5", "value": "rgb(221, 219, 218)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 5" }, { "release": "2.5.0", "primitive": true, "name": "colorGray6", "value": "rgb(201, 199, 197)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 6" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandAccessibleActive", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_A11Y" }, { "release": "2.5.0", "primitive": true, "name": "colorGray7", "value": "rgb(176, 173, 171)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 7" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandDarkActive", "value": "rgb(37, 48, 69)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_DARK" }, { "release": "2.5.0", "primitive": true, "name": "colorGray8", "value": "rgb(150, 148, 146)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 8" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastInverseActive", "value": "rgb(238, 238, 238)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastCoolActive", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_COOL" }, { "release": "2.5.0", "primitive": true, "name": "colorGray9", "value": "rgb(112, 110, 107)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 9" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandContrast", "value": "rgb(26, 27, 30)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND that is accessible with BRAND" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastWeak", "value": "rgb(145, 145, 145)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Weak contrast ratio, useful for iconography" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandPrimaryActive", "value": "rgb(1, 118, 211)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_PRIMARY" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandBackgroundPrimaryTransparent", "value": "rgba(176, 196, 223, 0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrast", "value": "rgb(94, 94, 94)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER that is accessible with BRAND_HEADER" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandPrimaryTransparent", "value": "rgba(21, 137, 238, 0.1)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandHeaderContrastWarmActive", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WARM" }, { "themeable": true, "release": "2.6.0", "primitive": true, "name": "brandPrimaryTransparent40", "value": "rgba(21, 137, 238, 0.4)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 40%" }, { "themeable": true, "access": "global", "release": "2.6.0", "primitive": true, "name": "brandLight", "value": "rgb(244, 246, 254)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Light variant of BRAND that is accessible with dark colors" }, { "release": "2.5.0", "primitive": true, "name": "colorGray10", "value": "rgb(81, 79, 77)", "scope": "global", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Gray Color 10" }, { "access": "global", "primitive": true, "name": "sizeXSmall", "value": "192", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "primitive": true, "name": "sizeXxxSmall", "value": "48", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconUtilityLarge", "value": "24", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Large utility icon without border." }, { "access": "global", "primitive": true, "name": "sizeXxSmall", "value": "96", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconSmallBoundary", "value": "24", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Search Results: Outer colored tile" }, { "access": "global", "primitive": true, "name": "sizeSmall", "value": "240", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconUtilityMedium", "value": "20", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Medium utility icon without border." }, { "access": "global", "primitive": true, "name": "squareIconXSmallBoundary", "value": "20", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Very small icon button boundary." }, { "access": "global", "primitive": true, "name": "squareIconUtilitySmall", "value": "16", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Small utility icon without border." }, { "access": "global", "primitive": true, "name": "squareIconMediumBoundary", "value": "32", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Stage left & actions: Outer colored tile" }, { "access": "global", "primitive": true, "name": "squareIconLargeContent", "value": "32", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Anchor: Icon content (white shape)" }, { "access": "global", "primitive": true, "name": "squareIconLargeBoundary", "value": "48", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Anchor: Outer colored tile" }, { "access": "global", "primitive": true, "name": "sizeMedium", "value": "320", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconMediumContent", "value": "16", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Stage left & actions: Icon content (white shape)" }, { "access": "global", "primitive": true, "name": "sizeXLarge", "value": "640", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconXSmallContent", "value": "8", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Very small icons in icon buttons." }, { "primitive": true, "name": "varSquareIconMediumBoundary", "value": "32", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Variable medium boundary for square icons" }, { "access": "global", "primitive": true, "name": "squareIconMediumBoundaryAlt", "value": "36", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Icon button boundary." }, { "access": "global", "primitive": true, "name": "sizeXxLarge", "value": "960", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconLargeBoundaryAlt", "value": "80", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Anchor: avatar" }, { "access": "global", "primitive": true, "name": "sizeLarge", "value": "400", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Generic sizing token scale for UI components." }, { "access": "global", "primitive": true, "name": "squareIconSmallContent", "value": "12", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Search Results: Icon content (white shape)" }, { "primitive": true, "name": "squareIconXxSmallBoundary", "value": "16", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Very very small icon button boundary." }, { "primitive": true, "name": "squareIconMediumContentAlt", "value": "14", "scope": "global", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "sizing", "comment": "Alternate medium tap target size" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingXLarge", "value": "32", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size X Large" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalSmall", "value": "12", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalXxLarge", "value": "48", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XX Large" }, { "access": "global", "primitive": true, "name": "spacingXSmall", "value": "8", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size X small" }, { "access": "global", "primitive": true, "name": "spacingXxxSmall", "value": "2", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size XXX small" }, { "access": "global", "primitive": true, "name": "spacingXxSmall", "value": "4", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size XX small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalLarge", "value": "24", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Large" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingLarge", "value": "24", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size Large" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingMedium", "value": "16", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalMedium", "value": "16", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalXSmall", "value": "8", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size X Small" }, { "access": "global", "primitive": true, "name": "spacingSmall", "value": "12", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalXxxSmall", "value": "2", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XXX Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingXSmall", "value": "8", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size X Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingXxxSmall", "value": "2", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size XXX Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalXLarge", "value": "32", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size X Large" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalXxSmall", "value": "4", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XX Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingXxLarge", "value": "48", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size XX Large" }, { "access": "global", "primitive": true, "name": "spacingMedium", "value": "16", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalXxLarge", "value": "48", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XX Large" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalSmall", "value": "12", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingSmall", "value": "12", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size Small" }, { "primitive": true, "name": "spacingNone", "value": "0", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for 0" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalLarge", "value": "24", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Large" }, { "access": "global", "primitive": true, "name": "spacingXLarge", "value": "32", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size X Large" }, { "access": "global", "primitive": true, "name": "spacingXxLarge", "value": "48", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size XX Large" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalXxxSmall", "value": "2", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XXX Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalXSmall", "value": "8", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size X Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingXxSmall", "value": "4", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size XX Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingHorizontalMedium", "value": "16", "scope": "global", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalXxSmall", "value": "4", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XX Small" }, { "access": "global", "release": "2.7.0", "primitive": true, "name": "varSpacingVerticalXLarge", "value": "32", "scope": "global", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size X Large" }, { "access": "global", "primitive": true, "name": "spacingLarge", "value": "24", "scope": "global", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Constant spacing token for size Large" }, { "access": "global", "primitive": true, "name": "colorTextActionLabel", "value": "rgb(116, 116, 116)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Action label text color" }, { "access": "global", "primitive": true, "name": "colorTextLinkInverse", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Link color on dark background" }, { "access": "global", "primitive": true, "name": "colorTextLinkInverseActive", "value": "rgba(255, 255, 255, 0.5)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Link color on dark background - active state" }, { "access": "global", "primitive": true, "name": "colorTextActionLabelActive", "value": "rgb(3, 45, 96)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Action label active text color" }, { "primitive": true, "name": "colorTextWarning", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for texts or icons that are related to warnings on a dark background." }, { "access": "global", "primitive": true, "name": "colorTextLinkFocus", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Focus link text" }, { "primitive": true, "name": "colorTextDestructiveHover", "value": "rgb(186, 5, 23)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color for destructive actions - hover state" }, { "access": "global", "primitive": true, "name": "colorTextLinkDisabled", "value": "rgb(3, 45, 96)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Disabled link text" }, { "access": "global", "primitive": true, "name": "colorTextDefault", "value": "rgb(3, 45, 96)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Body text color" }, { "primitive": true, "name": "colorTextDestructive", "value": "rgb(234, 0, 30)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color for destructive actions" }, { "access": "global", "primitive": true, "name": "colorTextLinkHover", "value": "rgb(1, 68, 134)", "scope": "global", "cssProperties": [ "color", "border*" ], "type": "color", "category": "text-color", "comment": "Hover link text" }, { "primitive": true, "name": "colorTextSuccess", "value": "rgb(46, 132, 74)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color for success text." }, { "access": "global", "primitive": true, "name": "colorTextWeak", "value": "rgb(116, 116, 116)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for text that is purposefully de-emphasized to create visual hierarchy." }, { "access": "global", "primitive": true, "name": "colorTextPlaceholderInverse", "value": "rgb(243, 243, 243)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Input placeholder text on dark backgrounds." }, { "access": "global", "primitive": true, "name": "colorTextLink", "value": "rgb(1, 118, 211)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Link text (508)" }, { "primitive": true, "name": "colorTextWarningAlt", "value": "rgb(140, 75, 2)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for texts that are related to warnings on a light background." }, { "access": "global", "primitive": true, "name": "colorTextIconDefault", "value": "rgb(116, 116, 116)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Default icon color." }, { "access": "global", "primitive": true, "name": "colorTextBrand", "value": "rgb(27, 150, 255)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Our product brand blue." }, { "access": "global", "primitive": true, "name": "colorTextError", "value": "rgb(234, 0, 30)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Error text for inputs and error misc" }, { "primitive": true, "name": "colorTextCustomer", "value": "rgb(254, 147, 57)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Customer text used in anchor subtitle" }, { "primitive": true, "name": "colorTextBrandPrimary", "value": "rgb(255, 255, 255)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color found on any primary brand color" }, { "access": "global", "primitive": true, "name": "colorTextLinkActive", "value": "rgb(3, 45, 96)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Active link text" }, { "access": "global", "primitive": true, "name": "colorTextRequired", "value": "rgb(234, 0, 30)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color of required field marker." }, { "access": "global", "primitive": true, "name": "colorTextLinkInverseDisabled", "value": "rgba(255, 255, 255, 0.15)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Link color on dark background - disabled state" }, { "access": "global", "primitive": true, "name": "colorTextInverse", "value": "rgb(255, 255, 255)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Inverse text color for dark backgrounds" }, { "access": "global", "primitive": true, "name": "colorTextPlaceholder", "value": "rgb(116, 116, 116)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Input placeholder text." }, { "access": "global", "primitive": true, "name": "colorTextInverseWeak", "value": "rgb(174, 174, 174)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Weak inverse text color for dark backgrounds" }, { "access": "global", "primitive": true, "name": "colorTextLinkInverseHover", "value": "rgba(255, 255, 255, 0.75)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Link color on dark background - hover state" }, { "primitive": true, "name": "colorTextSuccessInverse", "value": "rgb(69, 198, 90)", "scope": "global", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color for success text on dark backgrounds." }, { "access": "global", "primitive": true, "name": "colorTextLabel", "value": "rgb(116, 116, 116)", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color for field labels." }, { "access": "global", "release": "1.0.0", "primitive": true, "name": "squareTappable", "value": "44", "scope": "global", "property": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "touch", "comment": "Tap target size for elements that rely on width and height dimensions" }, { "release": "2.10.0", "primitive": true, "name": "squareTappableSmall", "value": "32", "scope": "global", "property": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "touch", "comment": "Small tap target size for elements that rely on width and height dimensions" }, { "release": "2.10.0", "primitive": true, "name": "squareTappableXSmall", "value": "24", "scope": "global", "property": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "touch", "comment": "X-small tap target size for elements that rely on width and height dimensions" }, { "release": "2.10.0", "primitive": true, "name": "squareTappableXxSmall", "value": "20", "scope": "global", "property": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "touch", "comment": "Xx-small tap target size for elements that rely on width and height dimensions" }, { "release": "2.10.0", "primitive": true, "name": "heightTappable", "value": "44", "scope": "global", "property": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "touch", "comment": "Tap target size for elements that rely on height or line-height" }, { "release": "2.10.0", "primitive": true, "name": "heightTappableSmall", "value": "32", "scope": "global", "property": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "type": "size", "category": "touch", "comment": "Small tap target size for elements that rely on height or line-height" }, { "primitive": true, "name": "zIndexDropdown", "value": "7000", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Dropdown" }, { "primitive": true, "name": "zIndexDocked", "value": "4", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Docked element" }, { "primitive": true, "name": "zIndexReminder", "value": "8500", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Notifications under modals" }, { "primitive": true, "name": "zIndexSpinner", "value": "9050", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Spinner" }, { "primitive": true, "name": "zIndexDefault", "value": "1", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Default" }, { "primitive": true, "name": "zIndexDeepdive", "value": "-99999", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Deep dive" }, { "primitive": true, "name": "zIndexToast", "value": "10000", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Toasts" }, { "primitive": true, "name": "zIndexDialog", "value": "6000", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Dialog" }, { "primitive": true, "name": "zIndexPopup", "value": "5000", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Popup" }, { "primitive": true, "name": "zIndexModal", "value": "9000", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Modal" }, { "primitive": true, "name": "zIndexSticky", "value": "100", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Stickied element" }, { "primitive": true, "name": "zIndexOverlay", "value": "8000", "scope": "global", "cssProperties": [ "z-index" ], "type": "z-index", "category": "z-index", "comment": "Overlay" }, { "access": "global", "name": "colorBackgroundModalBrand", "value": "rgb(1, 68, 134)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable modal header" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(255, 255, 255)", "comment": "Background color for notification list item.", "name": "colorBackgroundNotification" }, { "access": "global", "name": "colorBackgroundNotificationBadgeActive", "value": "rgb(3, 45, 96)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Notifications badge background color." }, { "access": "global", "name": "colorBackgroundNotificationBadgeHover", "value": "rgb(1, 68, 134)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Notifications badge background color." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(243, 243, 243)", "name": "colorContrastPrimary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(255, 255, 255)", "name": "colorForegroundPrimary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgba(126, 140, 153, 0.8)", "comment": "The color of the mask overlay that appears when you enter a modal state.", "name": "colorBackgroundTempModalTint" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(3, 45, 96)", "comment": "Color of the indicator dot.", "name": "colorBackgroundIndicatorDot" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(243, 243, 243)", "comment": "Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.", "name": "colorBackgroundAlt2" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(243, 243, 243)", "comment": "Hover color for utility bar item.", "name": "colorBackgroundUtilityBarHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "fill" ], "deprecated": true, "value": "rgb(1, 68, 134)", "comment": "Brand hover fill color", "name": "fillBrandHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "fill" ], "deprecated": true, "value": "rgb(1, 118, 211)", "comment": "Brand fill color", "name": "fillBrand" }, { "access": "global", "name": "colorBackgroundChromeDesktop", "value": "rgb(255, 255, 255)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for default desktop chrome (ex. global header)" }, { "access": "global", "name": "colorBackgroundModalButtonActive", "value": "rgba(0, 0, 0, 0.16)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active button backgrounds on modal headers" }, { "access": "global", "name": "colorBackgroundInputCheckboxSelected", "value": "rgb(27, 150, 255)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Selected checkboxes" }, { "access": "global", "name": "colorBackgroundInputCheckbox", "value": "rgb(255, 255, 255)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default checkboxes" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(255, 255, 255)", "name": "colorBackgroundPrimary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgba(255, 255, 255, 0.75)", "comment": "The color of the mask overlay that appears when you enter a modal state.", "name": "colorBackgroundTempModalTintAlt" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 68, 134)", "name": "colorBackgroundBrandPrimaryFocus" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(3, 45, 96)", "name": "colorBackgroundBrandPrimaryActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 68, 134)", "name": "colorBackgroundBrandPrimaryHover" }, { "access": "global", "name": "colorBackgroundChromeMobile", "value": "rgb(1, 118, 211)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for default mobile chrome (ex. global header)" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgba(0, 0, 0, 0.16)", "comment": "Background color for search input fields.", "name": "colorBackgroundInputSearch" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(255, 255, 255)", "name": "colorContrastSecondary" }, { "access": "global", "name": "colorBackgroundBrowser", "value": "rgb(116, 116, 116)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Secondary top bar background color (child browser, file preview, etc.)" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 118, 211)", "name": "colorBackgroundBrandPrimary" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgba(126, 140, 153, 0.8)", "comment": "Used as the default background color for temporary dialog elements, such as the progress spinner background.", "name": "colorBackgroundTempModal" }, { "access": "global", "name": "colorBackgroundShade", "value": "rgb(243, 243, 243)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "specificity": "builders", "category": "background-color", "comment": "Used as gray background when more contrast is desired." }, { "access": "global", "name": "colorBackgroundModal", "value": "rgb(255, 255, 255)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Standard modal header" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 68, 134)", "comment": "Hovered active toggle background color.", "name": "colorBackgroundToggleActiveHover" }, { "access": "global", "name": "colorBackgroundPayload", "value": "rgb(243, 243, 243)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for payloads in the feed." }, { "access": "global", "name": "colorBackgroundModalButton", "value": "rgba(0, 0, 0, 0.07)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Button backgrounds on modal headers" }, { "type": "color", "category": "background-color", "cssProperties": [ "fill" ], "deprecated": true, "value": "rgb(3, 45, 96)", "comment": "Brand active fill color", "name": "fillBrandActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(27, 150, 255)", "comment": "Active color for utility bar item.", "name": "colorBackgroundUtilityBarActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(0, 22, 57)", "comment": "Stage left org switcher dropdown arrow background color.", "name": "colorBackgroundOrgSwitcherArrow" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 68, 134)", "comment": "Active toggle background color.", "name": "colorBackgroundToggleActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(254, 143, 125)", "comment": "Alternative color for UI elements related to errors.", "name": "colorBackgroundErrorAlt" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(255, 255, 255)", "comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.", "name": "pageColorBackgroundPrimary" }, { "name": "colorBackgroundShadeDark", "value": "rgb(201, 201, 201)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "specificity": "builders", "category": "background-color", "comment": "Used as gray background in conjunction with Shade when more contrast is desired." }, { "access": "global", "name": "colorBackgroundNotificationBadgeFocus", "value": "rgb(1, 68, 134)", "deprecated": true, "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Notifications badge background color." }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(116, 116, 116)", "comment": "Background for utility icons that live in the action bar on mobile.", "name": "colorBackgroundActionbarIconUtility" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "deprecated": true, "value": "rgb(243, 243, 243)", "name": "colorBackgroundSecondary" }, { "access": "global", "name": "colorBorderInputCheckboxSelectedCheckmark", "value": "rgb(255, 255, 255)", "deprecated": true, "cssProperties": [ "border*", "box-shadow" ], "type": "color", "category": "border-color", "comment": "The borders to create the checkmark" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "deprecated": true, "value": "rgb(243, 243, 243)", "comment": "Disabled stroke color.", "name": "colorStrokeDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "deprecated": true, "value": "rgb(3, 45, 96)", "comment": "Active stroke color for our product brand blue.", "name": "colorStrokeBrandActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(201, 201, 201)", "name": "colorBorderPrimary" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 118, 211)", "name": "colorBorderBrandPrimaryFocus" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(1, 118, 211)", "name": "colorBorderBrandPrimaryHover" }, { "access": "global", "name": "colorBorderButtonBrand", "value": "rgb(1, 118, 211)", "deprecated": true, "cssProperties": [ "border*", "box-shadow" ], "type": "color", "category": "border-color", "comment": "Border color for brandable primary button" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(3, 45, 96)", "name": "colorBorderBrandPrimaryActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(27, 150, 255)", "name": "colorBorderBrandPrimary" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(243, 243, 243)", "name": "colorBorderButtonFocusInverse" }, { "name": "colorBorderCanvasElementSelectionHover", "value": "rgb(1, 68, 134)", "deprecated": true, "cssProperties": [ "border*", "box-shadow" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders." }, { "name": "colorBorderCanvasElementSelection", "value": "rgb(26, 185, 255)", "deprecated": true, "cssProperties": [ "border*", "box-shadow" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a selected canvas element. Specific to builders." }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "deprecated": true, "value": "rgb(1, 118, 211)", "comment": "Hover stroke color for our product brand blue.", "name": "colorStrokeBrandHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "deprecated": true, "value": "rgb(174, 174, 174)", "comment": "Stroke color for our global header buttons.", "name": "colorStrokeHeaderButton" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "deprecated": true, "value": "rgb(243, 243, 243)", "name": "colorBorderLinkFocusInverse" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "deprecated": true, "value": "rgb(1, 118, 211)", "comment": "Our product brand blue.", "name": "colorStrokeBrand" }, { "name": "colorBorderHint", "value": "rgb(3, 45, 96)", "deprecated": true, "cssProperties": [ "border*", "box-shadow" ], "type": "color", "specificity": "builders", "category": "border-color", "comment": "Used to delineate the boundary of a specific region. Specific to builders." }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "32", "comment": "Deprecated", "name": "elevation32" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 16px 16px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationShadow16" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "none", "comment": "Deprecated", "name": "elevationInverseShadow0" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 0 3px #f3f3f3", "comment": "Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.", "name": "shadowLinkFocusInverse" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -2px 2px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated: Use SHADOW_DOCKED", "name": "elevationInverseShadow2" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -4px 4px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationInverseShadow4" }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "16", "comment": "Deprecated", "name": "elevation16" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 3px 3px 0 rgba(0, 0, 0, 0.16) inset", "comment": "Deprecated", "name": "elevationShadow3Below" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "none", "name": "shadowSoftPrimaryHover" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -8px 8px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationInverseShadow8" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "none", "comment": "Soft dropshadow found on general UI elements such as containers", "name": "shadowSoftPrimary" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -32px 32px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationInverseShadow32" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "none", "comment": "Hard dropshadow found on general UI elements such as containers", "name": "shadowHardPrimary" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -2px 4px #f3f3f3", "comment": "Shadow above overflow menu close bar.", "name": "shadowActionOverflowFooter" }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0", "comment": "Deprecated", "name": "elevation0" }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "-3", "comment": "Deprecated", "name": "elevation3Inset" }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "2", "comment": "Deprecated", "name": "elevation2" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -2px 4px rgba(0, 0, 0, 0.07)", "comment": "Shadow for overlays.", "name": "shadowOverlay" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 1px 1px 0 rgba(0, 0, 0, 0.05)", "comment": "Shadow for buttons.", "name": "shadowButton" }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "4", "comment": "Deprecated", "name": "elevation4" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "none", "comment": "Deprecated", "name": "elevationShadow0" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -16px 16px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationInverseShadow16" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 2px 2px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationShadow2" }, { "type": "number", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "8", "comment": "Deprecated", "name": "elevation8" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 4px 4px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationShadow4" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 0 2px 2px #1b96ff inset", "comment": "Inset shadow for editable grid", "name": "shadowFocusInset" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset", "comment": "Deprecated", "name": "elevationInverseShadow3Below" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "none", "name": "shadowSoftPrimaryActive" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 8px 8px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationShadow8" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 1px 1px rgba(0, 0, 0, 0.16)", "comment": "Shadow on images.", "name": "shadowImage" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "deprecated": true, "value": "0 32px 32px 0 rgba(0, 0, 0, 0.16)", "comment": "Deprecated", "name": "elevationShadow32" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "18", "comment": "Medium headings.", "name": "fontSizeHeadingMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "16", "name": "fontSizeMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "13", "comment": "Small body text.", "name": "fontSizeTextSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "18", "name": "fontSizeMediumA" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "24", "name": "fontSizeXLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "25.12", "name": "fontSizeXLargeA" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "28", "comment": "Extra large headings.", "name": "fontSizeHeadingXLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "32", "name": "fontSizeXxLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "10", "comment": "Extra extra small text.", "name": "fontSizeTextXxSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "20", "name": "fontSizeLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "24", "comment": "Large headings.", "name": "fontSizeHeadingLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "20", "comment": "Extra large body text.", "name": "fontSizeTextXLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "10", "name": "fontSizeXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "10", "comment": "Extra Extra small headings.", "name": "fontSizeHeadingXxSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "12", "comment": "Extra small headings.", "name": "fontSizeHeadingXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "18", "comment": "Large body text.", "name": "fontSizeTextLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "14", "name": "fontSizeSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "16", "comment": "Medium body text.", "name": "fontSizeTextMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "12", "comment": "Extra small body text.", "name": "fontSizeTextXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "deprecated": true, "value": "14", "comment": "Small headings.", "name": "fontSizeHeadingSmall" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "deprecated": true, "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "comment": "Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings.", "name": "fontFamilyText" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "deprecated": true, "value": "38", "comment": "Use squareIconMediumBoundary", "name": "squareIconMedium" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "deprecated": true, "value": "16", "comment": "Small tap target size", "name": "squareIconSmall" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "deprecated": true, "value": "14", "comment": "Very small icons to replace force font with temporary override.", "name": "squareIconXxSmallContent" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "deprecated": true, "value": "50", "comment": "Large tap target size.", "name": "squareIconLarge" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "deprecated": true, "value": "0", "name": "componentSpacingMargin" }, { "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "deprecated": true, "value": "16", "name": "componentSpacingPadding" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgba(255, 255, 255, 0.75)", "comment": "Hovered icon color for a button that has a parent element that has a hover state", "name": "colorTextIconInverseHintHover" }, { "access": "global", "name": "colorTextTabLabelSelected", "value": "rgb(1, 118, 211)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for text on a selected tab in a tab group." }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgba(255, 255, 255, 0.5)", "comment": "Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over.", "name": "colorTextIconInverseHint" }, { "access": "global", "name": "colorTextTabLabelDisabled", "value": "rgb(243, 243, 243)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for disabled text in a tab group." }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(116, 116, 116)", "comment": "Tertiary body text color", "name": "colorTextTertiary" }, { "access": "global", "name": "colorTextInverseActive", "value": "rgb(26, 185, 255)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Active state on a standalone link on a dark background." }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(3, 45, 96)", "comment": "Primary body text color", "name": "colorTextPrimary" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(1, 118, 211)", "name": "colorTextLinkPrimaryFocus" }, { "access": "global", "name": "colorTextTabLabelFocus", "value": "rgb(1, 68, 134)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for text in focus state in a tab group." }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(243, 243, 243)", "comment": "Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "name": "colorTextIconDefaultHintBorderless" }, { "access": "global", "name": "colorTextPill", "value": "rgb(1, 118, 211)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text color for pills." }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(1, 118, 211)", "name": "colorTextLinkPrimaryHover" }, { "access": "global", "name": "colorTextTabLabelActive", "value": "rgb(3, 45, 96)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for text in active state in a tab group." }, { "access": "global", "name": "colorTextTabLabelHover", "value": "rgb(1, 68, 134)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for text in hover state in a tab group." }, { "access": "global", "name": "colorTextToast", "value": "rgb(243, 243, 243)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for text on toast messages." }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(201, 201, 201)", "comment": "Color for disabled toggles", "name": "colorTextToggleDisabled" }, { "access": "global", "name": "colorTextBrowser", "value": "rgb(255, 255, 255)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Top bar icon color" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(3, 45, 96)", "name": "colorTextLinkPrimaryActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(1, 118, 211)", "name": "colorTextLinkPrimary" }, { "access": "global", "name": "colorTextBrowserActive", "value": "rgba(0, 0, 0, 0.4)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Top bar active icon color" }, { "access": "global", "name": "colorTextIconBrand", "value": "rgb(1, 118, 211)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Color for non-interactive icons that represent a selected item in a list" }, { "access": "global", "name": "colorTextInverseHover", "value": "rgb(174, 174, 174)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Hover state on a standalone link on a dark background." }, { "access": "global", "name": "colorTextModal", "value": "rgb(255, 255, 255)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Modal header title" }, { "access": "global", "name": "colorTextModalButton", "value": "rgb(116, 116, 116)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Modal header button text color" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(174, 174, 174)", "comment": "Color for interactive utility icons", "name": "colorTextIconUtility" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "deprecated": true, "value": "rgb(116, 116, 116)", "comment": "Secondary body text color", "name": "colorTextSecondary" }, { "access": "global", "name": "colorTextStageLeft", "value": "rgb(243, 243, 243)", "deprecated": true, "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Text in stage left navigation." }, { "type": "text-transform", "category": "text-transform", "cssProperties": [ "text-transform" ], "deprecated": true, "value": "none", "comment": "Default value for text-transform", "name": "textTransform" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Background color for a new notification list item.", "access": "global", "name": "colorBackgroundNotificationNew" }, { "type": "color", "category": "background-color", "cssProperties": [ "fill" ], "value": "rgb(1, 118, 211)", "comment": "Focused header button icon color", "name": "fillHeaderButtonFocus" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Background color for reminder notification on hover", "name": "colorBackgroundReminderHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(234, 0, 30)", "comment": "Notifications badge background color.", "access": "global", "name": "colorBackgroundNotificationBadge" }, { "type": "color", "category": "background-color", "cssProperties": [ "fill" ], "value": "rgb(1, 68, 134)", "comment": "Hovered header button icon color", "name": "fillHeaderButtonHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Disabled input", "access": "global", "name": "colorBackgroundInputDisabled" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(147, 147, 147)", "comment": "Hovered toggle background color.", "name": "colorBackgroundToggleHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Background color for reminder notification", "release": "2.5.0", "name": "colorBackgroundReminder" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(46, 132, 74)", "comment": "Hovered background color for success buttons", "name": "colorBackgroundButtonSuccessHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "fill" ], "value": "rgb(174, 174, 174)", "comment": "Header button icon color", "name": "fillHeaderButton" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(174, 174, 174)", "comment": "Toggle background color.", "name": "colorBackgroundToggle" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(69, 198, 90)", "comment": "Background color for success buttons", "name": "colorBackgroundButtonSuccess" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Disabled checkboxes", "access": "global", "name": "colorBackgroundInputCheckboxDisabled" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Background color for pills.", "access": "global", "name": "colorBackgroundPill" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(174, 174, 174)", "comment": "Color of the spinner dot.", "name": "colorBackgroundSpinnerDot" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "The color of the mask overlay that provides user feedback on interaction.", "name": "colorBackgroundBackdropTint" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Selected input field (when user has clicked or tabbed into field)", "access": "global", "name": "colorBackgroundInputActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "The background color of an internal scrollbar.", "access": "global", "name": "colorBackgroundScrollbar" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(174, 174, 174)", "comment": "Disabled toggle background color.", "name": "colorBackgroundToggleDisabled" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Background color for toast messaging.", "access": "global", "name": "colorBackgroundToast" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Background color of comment posts in the feed.", "name": "colorBackgroundPost" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default input field", "access": "global", "name": "colorBackgroundInput" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(46, 132, 74)", "comment": "Background color for success toast messaging.", "access": "global", "name": "colorBackgroundToastSuccess" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0.4)", "comment": "Color of mask overlay that sits on top of an image when text is present.", "name": "colorBackgroundImageOverlay" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(46, 132, 74)", "comment": "Active background color for success buttons", "name": "colorBackgroundButtonSuccessActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(234, 0, 30)", "comment": "Background color for error toast messaging.", "access": "global", "name": "colorBackgroundToastError" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "The background color of an internal scrollbar track.", "access": "global", "name": "colorBackgroundScrollbarTrack" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(253, 221, 227)", "comment": "Background color for input field that has encountered an error.", "access": "global", "name": "colorBackgroundInputError" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.15)", "comment": "Border color for disabled inverse button.", "access": "global", "name": "colorBorderButtonInverseDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.75)", "comment": "Hovered border color for a button with an icon that has a parent element that has a hover state", "name": "colorBorderIconInverseHintHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.5)", "comment": "Border color for a button with an icon that has a parent element that has a hover state", "name": "colorBorderIconInverseHint" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Border color for an active tab.", "name": "colorBorderTabActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Border color on disabled form elements.", "access": "global", "name": "colorBorderInputDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Border color on notification reminders.", "name": "colorBorderReminder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0)", "comment": "Border color for brandable primary button - disabled state", "access": "global", "name": "colorBorderButtonBrandDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Border color for default secondary button", "access": "global", "name": "colorBorderButtonDefault" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(27, 150, 255)", "comment": "Border color on active form elements.", "access": "global", "name": "colorBorderInputActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Border color on form elements.", "access": "global", "name": "colorBorderInput" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "These borders create the faux checkmark when the checkbox toggle is in the checked state.", "name": "colorBorderToggleChecked" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "comment": "Border color for a selected tab in a tab group.", "access": "global", "name": "colorBorderTabSelected" }, { "category": "border-style", "type": "size", "cssProperties": [ "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "1px", "name": "borderStrokeWidthThin" }, { "category": "border-style", "type": "size", "cssProperties": [ "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "2px", "name": "borderStrokeWidthThick" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 3px 0 rgba(0, 0, 0, 0.20)", "comment": "Shadow for notifications that should be elevated above other components but under modals.", "name": "shadowReminder" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 0 3px #0176d3", "comment": "Custom glow for focus states on UI elements with explicit containers.", "access": "global", "name": "shadowButtonFocus" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 0 3px #f3f3f3", "comment": "Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds.", "access": "global", "name": "shadowButtonFocusInverse" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 4px 4px rgba(0, 0, 0, 0.16)", "comment": "Shadow to make inline edit card pop out.", "name": "shadowInlineEdit" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 -2px 2px 0 rgba(0, 0, 0, 0.16)", "comment": "Shadow on elements that are docked to the bottom of the viewport.", "name": "shadowDocked" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 4px rgba(0, 0, 0, 0.07)", "comment": "Shadow for header.", "access": "global", "name": "shadowHeader" }, { "type": "time", "category": "time", "cssProperties": [ "animation*", "transition*" ], "value": "4.8s", "comment": "4.8 seconds", "name": "durationToastShort" }, { "type": "time", "category": "time", "cssProperties": [ "animation*", "transition*" ], "value": "9.6s", "comment": "9.6 seconds", "name": "durationToastMedium" }, { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-assistant.svg", "name": "illustrationEmptyStateAssistant" }, { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-events.svg", "name": "illustrationEmptyStateEvents" }, { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-tasks.svg", "name": "illustrationEmptyStateTasks" }, { "category": "utility", "type": "string", "value": "", "name": "bannerUserDefaultImage" }, { "category": "utility", "type": "string", "value": "", "name": "bannerGroupDefaultImage" }, { "category": "utility", "type": "string", "value": "/profile_avatar_200.png", "name": "userDefaultAvatar" }, { "category": "utility", "type": "string", "value": "/profile_avatar_160.png", "name": "userDefaultAvatarMedium" }, { "category": "utility", "type": "string", "value": "/profile_avatar_96.png", "name": "userDefaultAvatarSmall" }, { "category": "utility", "type": "string", "value": "/group_avatar_200.png", "name": "groupDefaultAvatar" }, { "category": "utility", "type": "string", "value": "/group_avatar_160.png", "name": "groupDefaultAvatarMedium" }, { "category": "utility", "type": "string", "value": "/group_avatar_96.png", "name": "groupDefaultAvatarSmall" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "40", "comment": "Line heights for tabs", "access": "global", "name": "lineHeightTab" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "240", "access": "global", "name": "borderRadiusPill" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "26", "comment": "Minimum height of a pill.", "name": "heightPill" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "44", "comment": "Brand header. Phone 44px; Tablet 50px", "access": "global", "name": "heightHeader" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "60", "comment": "Action footer menu. Phone 44px; Tablet 50px", "access": "global", "name": "heightFooter" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "30", "comment": "Text input height", "name": "heightInput" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "64", "comment": "Stage left for desktop when closed (showing icons only).", "access": "global", "name": "widthStageLeftCollapsed" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "240", "comment": "Stage left for desktop when open.", "access": "global", "name": "widthStageLeftExpanded" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "512px", "comment": "Maximum width for action overflow menu so that it's not full-screen for tablet.", "name": "maxWidthActionOverflowMenu" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": 3, "comment": "Default amount of line breaks before text is truncated", "name": "lineClamp" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Icon color on dark background", "access": "global", "name": "colorTextIconInverse" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgba(255, 255, 255, 0.5)", "comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "access": "global", "name": "colorTextButtonInverseDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(174, 174, 174)", "comment": "Input icon", "access": "global", "name": "colorTextInputIcon" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Icon color on dark background - active state", "access": "global", "name": "colorTextIconInverseActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(1, 118, 211)", "comment": "Text color for default secondary button - hover state", "access": "global", "name": "colorTextButtonDefaultHover" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(116, 116, 116)", "comment": "Input disabled text", "access": "global", "name": "colorTextInputDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(1, 118, 211)", "comment": "Text color for default secondary button", "access": "global", "name": "colorTextButtonDefault" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(201, 201, 201)", "comment": "Default icon color - disabled state", "access": "global", "name": "colorTextIconDefaultDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Text color for brandable primary button - disabled state", "access": "global", "name": "colorTextButtonBrandDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Text color for brandable primary button - hover state", "access": "global", "name": "colorTextButtonBrandHover" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(1, 118, 211)", "comment": "Default icon color - hover state.", "access": "global", "name": "colorTextIconDefaultHover" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Text color for brandable primary button", "access": "global", "name": "colorTextButtonBrand" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(201, 201, 201)", "comment": "Text color for default secondary button - disabled state", "access": "global", "name": "colorTextButtonDefaultDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(3, 45, 96)", "comment": "Color for default text in a tab group.", "access": "global", "name": "colorTextTabLabel" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(3, 45, 96)", "comment": "Default icon color - active state.", "access": "global", "name": "colorTextIconDefaultActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(174, 174, 174)", "comment": "Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "access": "global", "name": "colorTextIconDefaultHint" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Text color for brandable primary button - active state", "access": "global", "name": "colorTextButtonBrandActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(243, 243, 243)", "comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "access": "global", "name": "colorTextButtonInverse" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(1, 118, 211)", "comment": "Text color for default secondary button - active state", "access": "global", "name": "colorTextButtonDefaultActive" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgba(255, 255, 255, 0.15)", "comment": "Icon color on dark background - disabled state", "access": "global", "name": "colorTextIconInverseDisabled" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(174, 174, 174)", "comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.", "access": "global", "name": "colorTextButtonDefaultHint" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "comment": "Icon color on dark background - hover state", "access": "global", "name": "colorTextIconInverseHover" }, { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(3, 45, 96)", "comment": "Typed input text", "access": "global", "name": "colorTextInputFocusInverse" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "White avatar group background color.", "name": "avatarGroupColorBackgroundLightest" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Dark gray avatar group background color.", "name": "avatarGroupColorBackgroundInverse" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "White badge background color.", "name": "badgeColorBackgroundLightest" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Dark gray badge background color.", "name": "badgeColorBackgroundInverse" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "", "name": "brandBandDefaultImage" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundPrimary" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundPrimaryTransparent" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundSecondary" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgba(0, 0, 0, 0)", "name": "brandBandColorBackgroundSecondaryTransparent" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "96", "name": "brandBandImageHeightSmall" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "200", "name": "brandBandImageHeightMedium" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "300", "name": "brandBandImageHeightLarge" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "50", "name": "brandBandScrimHeight" }, { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "0", "name": "templateGutters" }, { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "margin*", "padding*" ], "value": "0", "name": "templateProfileGutters" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "name": "buttonIconColorBorderPrimary" }, { "scope": "component", "type": "sizing", "category": "height", "cssProperties": [ "width", "height" ], "value": "44", "name": "buttonIconBoundaryTouch" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "name": "buttonColorBorderPrimary" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "deprecated": true, "name": "buttonColorBorderBrandPrimary" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.8)", "deprecated": true, "name": "buttonColorBorderSecondary" }, { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "4", "name": "buttonBorderRadius" }, { "access": "global", "name": "colorBackgroundButtonDefaultFocus", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - focus state" }, { "name": "buttonColorBackgroundBrandPrimary", "value": "rgb(1, 118, 211)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Use BRAND_ACCESSIBLE to pick up theming capabilities" }, { "access": "global", "name": "colorBackgroundButtonInverseDisabled", "value": "rgba(0, 0, 0, 0)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Disabled button backgrounds on inverse/dark backgrounds" }, { "access": "global", "name": "colorBackgroundButtonDefaultHover", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - hover state" }, { "access": "global", "name": "colorBackgroundButtonDefault", "value": "rgb(255, 255, 255)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button" }, { "access": "global", "name": "colorBackgroundButtonIconDisabled", "value": "rgb(255, 255, 255)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - disabled state" }, { "access": "global", "name": "colorBackgroundButtonIconFocus", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - focus state" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.8)", "deprecated": true, "name": "buttonColorBackgroundSecondary" }, { "access": "global", "name": "colorBackgroundButtonBrandDisabled", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button - disabled state" }, { "access": "global", "name": "colorBackgroundButtonBrandHover", "value": "rgb(1, 68, 134)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button - hover state" }, { "access": "global", "name": "colorBackgroundButtonInverseActive", "value": "rgba(0, 0, 0, 0.24)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active button backgrounds on inverse backgrounds on mobile" }, { "access": "global", "name": "colorBackgroundButtonIconHover", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - hover state" }, { "access": "global", "name": "colorBackgroundButtonBrand", "value": "rgb(1, 118, 211)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button" }, { "access": "global", "name": "colorBackgroundButtonIcon", "value": "rgba(0, 0, 0, 0)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button" }, { "access": "global", "name": "colorBackgroundButtonDefaultDisabled", "value": "rgb(255, 255, 255)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - disabled state" }, { "access": "global", "name": "colorBackgroundButtonIconActive", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Background color for icon-only button - active state" }, { "access": "global", "name": "colorBackgroundButtonBrandActive", "value": "rgb(3, 45, 96)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Brandable primary button - active state" }, { "access": "global", "name": "colorBackgroundButtonInverse", "value": "rgba(0, 0, 0, 0)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Button backgrounds on inverse/dark backgrounds" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "name": "buttonColorBackgroundPrimary" }, { "access": "global", "name": "colorBackgroundButtonDefaultActive", "value": "rgb(243, 243, 243)", "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default secondary button - active state" }, { "access": "global", "name": "lineHeightButton", "value": "30", "scope": "component", "cssProperties": [ "font", "*height", "bottom" ], "type": "number", "category": "line-height", "comment": "Line heights for regular buttons" }, { "access": "global", "name": "lineHeightButtonSmall", "value": "28", "scope": "component", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Line heights for small buttons" }, { "name": "buttonLineHeightTouch", "value": "42.4", "deprecated": true, "scope": "component", "cssProperties": [ "font", "*height" ], "type": "number", "category": "line-height", "comment": "Line height for touch screens" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(255, 255, 255)", "name": "buttonColorTextPrimary" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default Card component background color.", "name": "cardColorBackground" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "name": "cardColorBorder" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0)", "name": "cardFooterColorBorder" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "none", "name": "cardShadow" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Use for active tab.", "name": "cardFontWeight" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "12", "name": "cardFooterMargin" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0", "name": "cardBodyPadding" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "16", "name": "cardWrapperSpacing" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0.75rem 1rem 0", "name": "cardHeaderPadding" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "24", "name": "cardSpacingLarge" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0", "name": "cardHeaderMargin" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "Use for vertical spacing between cards", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "16", "name": "cardSpacingMargin" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "0", "name": "cardFooterPadding" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "12", "name": "cardSpacingSmall" }, { "scope": "component", "category": "text", "type": "text-align", "cssProperties": [ "text-align" ], "value": "right", "name": "cardFooterTextAlign" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default background for carousel card", "name": "carouselColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default background for carousel navigation indicators", "name": "carouselIndicatorColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Default hover background for carousel navigation indicators", "name": "carouselIndicatorColorBackgroundHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "Default focus background for carousel navigation indicators", "name": "carouselIndicatorColorBackgroundFocus" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "comment": "Default background for active state on carousel navigation indicators", "name": "carouselIndicatorColorBackgroundActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "16", "comment": "Default width for carousel indicator width", "name": "carouselIndicatorWidth" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Inbound chat message background color.", "name": "chatMessageColorBackgroundInbound" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "Outbound chat message background color.", "name": "chatMessageColorBackgroundOutbound" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Outbound agent chat message background color.", "name": "chatMessageColorBackgroundOutboundAgent" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Status chat message background color.", "name": "chatMessageColorBackgroundStatus" }, { "scope": "component", "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "20.8", "comment": "Line heights for toggle buttons", "name": "lineHeightToggle" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20", "comment": "Slider size for toggle.", "name": "squareToggleSlider" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "48", "comment": "Slider width.", "name": "widthToggle" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "24", "comment": "Slider height.", "name": "heightToggle" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(243, 243, 243)", "name": "colorPickerSliderThumbColorBackground" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*" ], "value": "rgb(68, 68, 68)", "name": "colorPickerSliderThumbBorderColor" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "inset 0 0 1px rgba(0,0,0,0.4)", "name": "colorPickerSwatchShadow" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "name": "colorPickerInputCustomHexFontSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "224", "name": "colorPickerSelectorWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "212.8", "name": "colorPickerSwatchesWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "80", "name": "colorPickerRangeHeight" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "24", "name": "colorPickerSliderHeight" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "6", "name": "colorPickerThumbWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "12", "name": "colorPickerRangeIndicatorSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "67.2", "name": "colorPickerInputCustomHexWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "20", "name": "colorPickerSwatchSize" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Alternating row background color for tables", "name": "tableColorBackgroundStripes" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default background color for table headers", "name": "tableColorBackgroundHeader" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Hover state for table header cells", "name": "tableColorBackgroundHeaderHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Focused state for table header cells", "name": "tableColorBackgroundHeaderFocus" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(174, 174, 174)", "comment": "Resizable handle color for table header cells", "name": "tableColorBackgroundHeaderResizableHandle" }, { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0", "name": "tableBorderRadius" }, { "scope": "component", "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "8", "name": "tableCellSpacing" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(68, 68, 68)", "name": "tableColorTextHeader" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color" ], "value": "rgb(116, 116, 116)", "name": "datepickerColorTextDayAdjacentMonth" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Docked panel header’s background color.", "name": "colorBackgroundDockedPanelHeader" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Docked panel’s background color when open.", "name": "colorBackgroundDockedPanel" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "40", "comment": "Height of the docked bar.", "name": "heightDockedBar" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(254, 92, 76)", "comment": "Utility bar notifications badge background color.", "name": "utilityBarColorBackgroundNotificationBadge" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Utility bar notifications focus background color.", "name": "utilityBarColorBackgroundNotificationFocus" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "4", "name": "dropZoneSlotHeight" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Default color for animated icon waffle for app switcher.", "name": "colorBackgroundIconWaffle" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Default background color for a typing icon dot.", "name": "typingIconDotColorBackgroundGray" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Active background color for a typing icon dot when animcating.", "name": "typingIconDotColorBackgroundGrayDark" }, { "scope": "component", "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(1, 68, 134)", "comment": "Brand fill color", "name": "globalActionFillHover" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*width", "*height" ], "value": "24", "comment": "Global action icon size", "name": "globalActionIconSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*width", "*height" ], "value": "8", "comment": "Typing icon size", "name": "typingIconDotSize" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/einstein-headers/einstein-header-background.svg", "name": "einsteinHeaderBackground" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/einstein-headers/einstein-figure.svg", "name": "einsteinHeaderFigure" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(144, 208, 254)", "comment": "Background color for Einstein header", "name": "einsteinHeaderBackgroundColor" }, { "scope": "component", "type": "shadow", "category": "text-shadow", "cssProperties": [ "text-shadow" ], "value": "#cfe9fe", "comment": "Text shadow color for Einstein header background to make text more readable", "name": "einsteinHeaderTextShadow" }, { "scope": "component", "type": "number", "category": "z-index", "cssProperties": [ "z-index" ], "value": 5, "name": "filesZIndexHover" }, { "scope": "component", "type": "size", "cssProperties": [ "font", "font-size" ], "category": "font-size", "value": "12", "name": "formLabelFontSize" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(255, 255, 255)", "comment": "Global Header background color", "name": "globalHeaderColorBackground" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*" ], "value": "/logo-noname.svg", "name": "brandLogoImage" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20", "comment": "Global identity icon size.", "name": "squareIconGlobalIdentityIcon" }, { "name": "colorBackgroundContextBarItemHover", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hovered context bar item background color." }, { "name": "colorBackgroundContextBarItemActive", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active context bar item background color." }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Default context bar background color.", "name": "colorBackgroundContextBar" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Context TAB bar item background color.", "name": "colorBackgroundContextTabBarItem" }, { "name": "colorBackgroundContextBarInverseItemHover", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Hovered context bar item background color." }, { "name": "colorBackgroundContextBarShadow", "value": "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 1)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "gradient", "category": "background-color", "comment": "A Gradient used for putting shadows on the bottom when box-shadow is not possible." }, { "name": "colorBackgroundContextBarInverseItemActive", "value": "rgba(255, 255, 255, 0.4)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Active context bar item background color." }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(13, 157, 218)", "comment": "Brand color in context bar for default theme", "name": "colorBackgroundContextBarBrandAccent" }, { "name": "colorBackgroundContextBarActionHighlight", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Highlight for context bar action (hover and focus states)." }, { "name": "colorBorderContextBarDivider", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "border*", "box-shadow" ], "type": "color", "category": "border-color", "comment": "Divider in context bar" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0.2)", "comment": "Border color in context bar", "name": "colorBorderContextBarItem" }, { "name": "colorBorderContextBarInverseItem", "value": "rgba(255, 255, 255, 0.2)", "deprecated": true, "scope": "component", "cssProperties": [ "border*", "box-shadow" ], "type": "color", "category": "border-color", "comment": "Border color in context bar on dark background" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(13, 157, 218)", "comment": "Border color in context bar for default theme", "name": "colorBorderContextBarThemeDefault" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Alternate border color in context bar for default theme", "name": "colorBorderContextBarThemeDefaultAlt" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(50, 29, 113)", "comment": "Hovered border color in context bar for default theme", "name": "colorBorderContextBarThemeDefaultHover" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Active border color in context bar for default theme", "name": "colorBorderContextBarThemeDefaultActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "40", "comment": "Context bar height.", "name": "heightContextBar" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3px", "comment": "Context bar tab accent height when tab is active.", "name": "globalnavigationItemHeightAccentActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "4px", "comment": "Context bar tab accent height when tab is focused.", "name": "globalnavigationItemHeightAccentFocus" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(68, 68, 68)", "comment": "Context bar text color", "name": "colorTextContextBar" }, { "name": "colorTextContextBarInverse", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Context bar text color on a dark background" }, { "name": "colorTextContextBarActionTrigger", "value": "rgba(255, 255, 255, 0.4)", "deprecated": true, "scope": "component", "cssProperties": [ "color", "fill" ], "type": "color", "category": "text-color", "comment": "Context bar action trigger text color" }, { "type": "color", "category": "stroke-color", "cssProperties": [ "stroke", "fill" ], "value": "rgb(144, 208, 254)", "comment": "Primary color for illustrations", "name": "illustrationColorPrimary" }, { "type": "color", "category": "stroke-color", "cssProperties": [ "stroke", "fill" ], "value": "rgb(207, 233, 254)", "comment": "Secondary color for illustrations", "name": "illustrationColorSecondary" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "name": "inputStaticFontSize" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "name": "inputStaticFontWeight" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "name": "inputReadonlyFontWeight" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgb(24, 24, 24)", "name": "inputStaticColor" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Default Page Header background color", "name": "pageHeaderColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Secondary Page Header background color", "name": "pageHeaderColorBackgroundAlt" }, { "access": "global", "name": "colorBackgroundAnchor", "value": "rgb(243, 243, 243)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Use COLOR_BACKGROUND_PAGE_HEADER instead." }, { "name": "colorBackgroundPageHeader", "value": "rgb(255, 255, 255)", "deprecated": true, "scope": "component", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Page Header background color" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0)", "name": "pageHeaderColorBorder" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "name": "pageHeaderJoinedColorBorder" }, { "scope": "component", "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0", "name": "pageHeaderBorderRadius" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "none", "name": "pageHeaderShadow" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "name": "pageHeaderTitleFontSize" }, { "scope": "component", "category": "font-weight", "type": "font-weight", "cssProperties": [ "font-weight" ], "value": "400", "name": "pageHeaderTitleFontWeight" }, { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height" ], "value": "36", "comment": "Page header Entity Icon size", "name": "pageHeaderIconSize" }, { "name": "pageHeaderSpacingMargin", "value": "0", "deprecated": true, "scope": "component", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "type": "size", "category": "spacing", "comment": "" }, { "name": "pageHeaderSpacingPadding", "value": "16", "deprecated": true, "scope": "component", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "type": "size", "category": "spacing", "comment": "" }, { "name": "pageHeaderSpacingRow", "value": "12", "deprecated": true, "scope": "component", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "type": "size", "category": "spacing", "comment": "" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "1px 0 3px rgba(0,0,0,0.25)", "comment": "Dropshadow found on docked UI panels when positioned to the left of a viewport", "name": "panelDockedLeftShadow" }, { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "-1px 0 3px 0 rgba(0,0,0,0.25)", "comment": "Dropshadow found on docked UI panels when positioned to the left of a viewport", "name": "panelDockedRightShadow" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "The hover background color for Salespath stages that have not been completed.", "name": "colorBackgroundPathIncompleteHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(0, 22, 57)", "comment": "The background color for the step action arrow that are the active stage", "name": "colorBackgroundPathStepActionActive" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "The background color for Salespath stages that have not been completed.", "name": "colorBackgroundPathIncomplete" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(3, 45, 96)", "comment": "The hover background color for Salespath stages that are the active stage.", "name": "colorBackgroundPathActiveHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(234, 0, 30)", "comment": "The background color for the final stage of a Salespath when it has been lost.", "name": "colorBackgroundPathLost" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "The background color for Salespath stages that are the active stage.", "name": "colorBackgroundPathActive" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "The background color for Salespath guidance coaching section.", "name": "colorBackgroundGuidance" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(46, 132, 74)", "comment": "The background color for the final stage of a Salespath when it has been lost.", "name": "colorBackgroundPathWon" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "The hover background color for Salespath stages that are the current stage.", "name": "colorBackgroundPathCurrentHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "The background color for Salespath stages that are the current stage.", "name": "colorBackgroundPathCurrent" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(46, 132, 74)", "comment": "The hover background color for Salespath stages that are complete.", "name": "colorBackgroundPathCompleteHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(59, 167, 85)", "comment": "The background color for Salespath stages that are complete.", "name": "colorBackgroundPathComplete" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "The background color for the step action arrow that are the current stage", "name": "colorBackgroundPathStepActionCurrent" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "The background color for the overall Salespath coaching section.", "name": "colorBackgroundPathExpanded" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Used as a separator between dark colors like the stages of salespath.", "name": "colorBorderPathDivider" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(1, 68, 134)", "comment": "Used as a border color for the active Path step.", "name": "colorBorderPathCurrent" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(3, 45, 96)", "comment": "Used as a border color for the current path step on hover.", "name": "colorBorderPathCurrentHover" }, { "scope": "component", "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "24", "comment": "Line heights for salespath", "name": "lineHeightSalespath" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "32", "comment": "Height of Path", "name": "heightSalesPath" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "208", "comment": "Width of action button to right", "name": "pathButtonWidthFixed" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2", "comment": "Border width of current stage for path item", "name": "widthPathBorderCurrent" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color" ], "value": "rgb(1, 68, 134)", "comment": "Used as a text color for the active Path step.", "name": "colorTextPathCurrent" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color" ], "value": "rgb(3, 45, 96)", "comment": "Used as a text hover color for the active Path step.", "name": "colorTextPathCurrentHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(0, 22, 57)", "comment": "The default background color for Popover Walkthrough", "name": "popoverWalkthroughColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(3, 45, 96)", "comment": "The default background color for Popover Walkthrough Header", "name": "popoverWalkthroughHeaderColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(1, 118, 211)", "comment": "The default background color for alternative Popover Walkthrough", "name": "popoverWalkthroughColorBackgroundAlt" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "", "name": "popoverWalkthroughHeaderImage" }, { "scope": "component", "type": "string", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "", "name": "popoverWalkthroughAltImage" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow", "text-shadow" ], "value": "rgb(1, 118, 211)", "comment": "The background color for nubbins on the bottom of alternate walkthrough popovers", "name": "popoverWalkthroughAltNubbinColorBackground" }, { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*" ], "value": "16", "comment": "Tooltip nubbin square size", "name": "nubbinSizeDefault" }, { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*" ], "value": "-3", "comment": "Tooltip nubbin offset for branded popovers", "name": "nubbinTriangleOffset" }, { "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "top", "right", "bottom", "left", "margin*", "padding*" ], "value": "4", "comment": "The default border width for Branded Popover", "name": "popoverBrandBorderWidth" }, { "scope": "component", "type": "color", "category": "text-color", "cssProperties": [ "color" ], "value": "rgb(201, 201, 201)", "comment": "Text color for step counter in walkthrough variant of popovers", "name": "popoverColorText" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "The default background color for Progress Indicator", "name": "progressColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "The shaded background color for Progress Indicator", "name": "progressColorBackgroundShade" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "The background color for the Progress Bar", "name": "progressBarColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(26, 185, 255)", "comment": "The background color of the fill for the Progress Bar", "name": "progressBarColorBackgroundFill" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(46, 132, 74)", "comment": "The success background color of the fill for the Progress Bar", "name": "progressBarColorBackgroundFillSuccess" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Borders of each indicator item within the Progress Indicator", "name": "progressColorBorder" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Shaded borders of each indicator item within the Progress Indicator", "name": "progressColorBorderShade" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "comment": "Hovered border color of each indicator item within the Progress Indicator", "name": "progressColorBorderHover" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(27, 150, 255)", "comment": "Active border color of each indicator item within the Progress Indicator", "name": "progressColorBorderActive" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "*width", "*height", "*flex*", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2", "comment": "Height of the Progress Bar", "name": "progressBarHeight" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*" ], "value": "rgb(255, 255, 255)", "comment": "Inner color for progress ring component", "name": "colorBackgroundProgressRingContent" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width", "top", "right", "bottom", "left" ], "value": "3", "comment": "Thickness of the Progress Ring's ring", "name": "progressRingWidth" }, { "scope": "component", "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "43.04", "comment": "Line height for touch screens", "name": "radioButtonGroupLineHeightTouch" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(116, 116, 116)", "comment": "Dark notification component background color.", "name": "notificationColorBackgroundInverse" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(27, 150, 255)", "name": "sliderHandleColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "name": "sliderHandleColorBackgroundHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "name": "sliderHandleColorBackgroundFocus" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(1, 118, 211)", "name": "sliderHandleColorBackgroundActive" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "name": "sliderTrackColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(27, 150, 255)", "name": "sliderTrackColorBackgroundFill" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "name": "sliderColorBackgroundDisabled" }, { "scope": "component", "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "rgba(0, 0, 0, 0.16) 0 2px 3px", "name": "sliderHandleShadow" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "", "cssProperties": [ "*width", "*height" ], "value": "16", "name": "sliderHandleSize" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "", "cssProperties": [ "*width", "*height" ], "value": "4px", "name": "sliderTrackHeight" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "", "cssProperties": [ "*width", "*height" ], "value": "1", "name": "sliderTrackWidth" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "Spinner size for xx-small modifier", "cssProperties": [ "*width", "*height", "transform" ], "value": "8", "name": "spinnerSizeXxSmall" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "Spinner size for x-small modifier", "cssProperties": [ "*width", "*height", "transform" ], "value": "16", "name": "spinnerSizeXSmall" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "Spinner size for small modifier", "cssProperties": [ "*width", "*height", "transform" ], "value": "20", "name": "spinnerSizeSmall" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "Spinner size for medium modifier", "cssProperties": [ "*width", "*height", "transform" ], "value": "32", "name": "spinnerSizeMedium" }, { "scope": "component", "category": "sizing", "type": "size", "comment": "Spinner size for large modifier", "cssProperties": [ "*width", "*height", "transform" ], "value": "44", "name": "spinnerSizeLarge" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Split View background color.", "name": "splitViewColorBackground" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Split View background color on row hover.", "name": "splitViewColorBackgroundRowHover" }, { "scope": "component", "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Row dividers in Split View list", "name": "splitViewColorBorder" }, { "scope": "component", "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "400", "comment": "Default width for split view container", "name": "splitViewWidth" }, { "scope": "component", "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Use for active tab.", "name": "tabsFontWeight" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Vertical navigation shaded background color on row hover.", "name": "verticalNavigationColorBackgroundShadeRowHover" }, { "scope": "component", "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(243, 243, 243)", "comment": "Vertical navigation shaded background color on row active.", "name": "verticalNavigationColorBackgroundShadeRowActive" }, { "scope": "component", "type": "color", "category": "color", "cssProperties": [ "color", "background*", "border*", "box-shadow" ], "value": "rgb(3, 45, 96)", "comment": "Text color for the Info section", "name": "welcomeMatTextColorInfo" }, { "scope": "component", "type": "string", "category": "color", "cssProperties": [ "color", "background*", "border*", "box-shadow" ], "value": "/welcome-mat/bg-info@2x.png", "comment": "Background Image Path for the Welcome Mat Info section", "name": "welcomeMatBackgroundImageInfo" }, { "scope": "component", "type": "color", "category": "color", "cssProperties": [ "color", "background*", "border*", "box-shadow" ], "value": "rgb(207, 233, 254)", "comment": "Background overflow color for the Welcome Mat Info section", "name": "welcomeMatBackgroundColorInfo" }, { "scope": "component", "type": "color", "category": "color", "cssProperties": [ "color", "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Progress Bar background is white", "name": "welcomeMatColorBackgroundProgressBar" }, { "scope": "component", "type": "color", "category": "color", "cssProperties": [ "color", "background*", "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0.05)", "comment": "Box Shadow declaration", "name": "welcomeMatColorActionShadow" }, { "scope": "component", "type": "color", "category": "color", "cssProperties": [ "color", "background*", "border*", "box-shadow" ], "value": "rgb(201, 201, 201)", "comment": "Completed icon color for the Welcome Mat Boxes", "name": "welcomeMatColorIconComplete" }, { "scope": "component", "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "42", "comment": "Font size for the info title", "name": "welcomeMatFontSizeInfoTitle" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "833", "comment": "Welcome Mat Width", "name": "welcomeMatWidth" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "400", "comment": "Min height for Overlay", "name": "welcomeMatMinHeight" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "600", "comment": "Max height for Overlay", "name": "welcomeMatMaxHeight" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "200", "comment": "Welcome Mat Progress Bar width", "name": "welcomeMatWidthProgressBar" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "20", "comment": "Size of the green completed check mark", "name": "welcomeMatCompleteIconSize" }, { "scope": "component", "category": "sizing", "type": "size", "cssProperties": [ "*height", "*width" ], "value": "10", "comment": "Size of the check mark in the green icon", "name": "welcomeMatCheckSize" }, { "scope": "component", "category": "spacing", "type": "size", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow" ], "value": "124", "comment": "Bottom spacing (safe area) for background image", "name": "welcomeMatSpacingInfo" } ] }