@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
13,167 lines • 313 kB
JSON
{
"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"
}
]
}