@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
7,022 lines • 163 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)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Light variant of COLOR_BACKGROUND."
},
{
"access": "global",
"primitive": true,
"name": "colorBackgroundRowHover",
"value": "rgb(243, 243, 243)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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."
},
{
"primitive": true,
"name": "colorBackgroundInfo",
"value": "rgb(116, 116, 116)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for UI elements related to providing neutral information (not error, success, or warning)."
},
{
"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)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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",
"release": "1.0.0",
"primitive": true,
"name": "colorBackground",
"value": "rgb(243, 243, 243)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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."
},
{
"primitive": true,
"name": "colorBackgroundOffline",
"value": "rgb(68, 68, 68)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Color for UI elements related to the offline state."
},
{
"access": "global",
"primitive": true,
"name": "colorBackgroundStencilAlt",
"value": "rgb(243, 243, 243)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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)",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-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."
},
{
"primitive": true,
"name": "colorBorderInfo",
"value": "rgb(116, 116, 116)",
"scope": "global",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"type": "color",
"category": "border-color",
"comment": "Border color for UI elements related to providing neutral information (not error, success, or warning)."
},
{
"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(229, 229, 229)",
"scope": "global",
"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."
},
{
"primitive": true,
"name": "colorBorderSeparatorAlt2",
"value": "rgb(201, 201, 201)",
"scope": "global",
"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."
},
{
"primitive": true,
"name": "colorBorderOffline",
"value": "rgb(68, 68, 68)",
"scope": "global",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"type": "color",
"category": "border-color",
"comment": "Border color for UI elements related to the offline state."
},
{
"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)",
"scope": "global",
"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)",
"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 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(229, 229, 229)",
"scope": "global",
"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(1, 68, 134, 0)",
"scope": "global",
"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(238, 244, 255)",
"scope": "global",
"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(1, 68, 134)",
"scope": "global",
"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)",
"scope": "global",
"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(68, 68, 68)",
"scope": "global",
"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(24, 24, 24)",
"scope": "global",
"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(24, 24, 24)",
"scope": "global",
"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(68, 68, 68)",
"scope": "global",
"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)",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Input placeholder text on dark backgrounds."
},
{
"access": "global",
"primitive": true,
"name": "colorTextLink",
"value": "rgb(11, 92, 171)",
"scope": "global",
"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)",
"scope": "global",
"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)",
"scope": "global",
"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)",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Input placeholder text."
},
{
"access": "global",
"primitive": true,
"name": "colorTextInverseWeak",
"value": "rgb(174, 174, 174)",
"scope": "global",
"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(68, 68, 68)",
"scope": "global",
"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"
}
]
}