@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
15,217 lines • 400 kB
JSON
{
"auraImports": [
"force:mqCommons",
"force:fontCommons"
],
"props": {
"PALETTE_BLUE_10": {
"originalValue": "{!PALETTE_BLUE_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_10",
"value": "#001639",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 10"
},
"PALETTE_BLUE_65": {
"originalValue": "{!PALETTE_BLUE_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_65",
"value": "#57a3fd",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 65"
},
"PALETTE_BLUE_15": {
"originalValue": "{!PALETTE_BLUE_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_15",
"value": "#03234d",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 15"
},
"PALETTE_BLUE_90": {
"originalValue": "{!PALETTE_BLUE_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_90",
"value": "#d8e6fe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 90"
},
"PALETTE_BLUE_80": {
"originalValue": "{!PALETTE_BLUE_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_80",
"value": "#aacbff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 80"
},
"PALETTE_BLUE_70": {
"originalValue": "{!PALETTE_BLUE_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_70",
"value": "#78b0fd",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 70"
},
"PALETTE_BLUE_60": {
"originalValue": "{!PALETTE_BLUE_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_60",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 60"
},
"PALETTE_BLUE_50": {
"originalValue": "{!PALETTE_BLUE_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_50",
"value": "#0176d3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 50"
},
"PALETTE_BLUE_40": {
"originalValue": "{!PALETTE_BLUE_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_40",
"value": "#0b5cab",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 40"
},
"PALETTE_BLUE_95": {
"originalValue": "{!PALETTE_BLUE_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_95",
"value": "#eef4ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 95"
},
"PALETTE_BLUE_30": {
"originalValue": "{!PALETTE_BLUE_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_30",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 30"
},
"PALETTE_BLUE_20": {
"originalValue": "{!PALETTE_BLUE_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_BLUE_20",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Blue 20"
},
"PALETTE_CLOUD_BLUE_90": {
"originalValue": "{!PALETTE_CLOUD_BLUE_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_90",
"value": "#cfe9fe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 90"
},
"PALETTE_CLOUD_BLUE_80": {
"originalValue": "{!PALETTE_CLOUD_BLUE_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_80",
"value": "#90d0fe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 80"
},
"PALETTE_CLOUD_BLUE_70": {
"originalValue": "{!PALETTE_CLOUD_BLUE_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_70",
"value": "#1ab9ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 70"
},
"PALETTE_CLOUD_BLUE_60": {
"originalValue": "{!PALETTE_CLOUD_BLUE_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_60",
"value": "#0d9dda",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 60"
},
"PALETTE_CLOUD_BLUE_50": {
"originalValue": "{!PALETTE_CLOUD_BLUE_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_50",
"value": "#107cad",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 50"
},
"PALETTE_CLOUD_BLUE_40": {
"originalValue": "{!PALETTE_CLOUD_BLUE_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_40",
"value": "#05628a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 40"
},
"PALETTE_CLOUD_BLUE_95": {
"originalValue": "{!PALETTE_CLOUD_BLUE_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_95",
"value": "#eaf5fe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 95"
},
"PALETTE_CLOUD_BLUE_30": {
"originalValue": "{!PALETTE_CLOUD_BLUE_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_30",
"value": "#084968",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 30"
},
"PALETTE_CLOUD_BLUE_20": {
"originalValue": "{!PALETTE_CLOUD_BLUE_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_20",
"value": "#023248",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 20"
},
"PALETTE_CLOUD_BLUE_10": {
"originalValue": "{!PALETTE_CLOUD_BLUE_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_10",
"value": "#001a28",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 10"
},
"PALETTE_CLOUD_BLUE_65": {
"originalValue": "{!PALETTE_CLOUD_BLUE_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_65",
"value": "#08abed",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 65"
},
"PALETTE_CLOUD_BLUE_15": {
"originalValue": "{!PALETTE_CLOUD_BLUE_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_CLOUD_BLUE_15",
"value": "#0a2636",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Cloud Blue 15"
},
"PALETTE_GREEN_15": {
"originalValue": "{!PALETTE_GREEN_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_15",
"value": "#0c2912",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 15"
},
"PALETTE_GREEN_90": {
"originalValue": "{!PALETTE_GREEN_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_90",
"value": "#cdefc4",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 90"
},
"PALETTE_GREEN_80": {
"originalValue": "{!PALETTE_GREEN_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_80",
"value": "#91db8b",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 80"
},
"PALETTE_GREEN_70": {
"originalValue": "{!PALETTE_GREEN_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_70",
"value": "#45c65a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 70"
},
"PALETTE_GREEN_60": {
"originalValue": "{!PALETTE_GREEN_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_60",
"value": "#3ba755",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 60"
},
"PALETTE_GREEN_50": {
"originalValue": "{!PALETTE_GREEN_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_50",
"value": "#2e844a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 50"
},
"PALETTE_GREEN_40": {
"originalValue": "{!PALETTE_GREEN_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_40",
"value": "#396547",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 40"
},
"PALETTE_GREEN_95": {
"originalValue": "{!PALETTE_GREEN_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_95",
"value": "#ebf7e6",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 95"
},
"PALETTE_GREEN_30": {
"originalValue": "{!PALETTE_GREEN_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_30",
"value": "#194e31",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 30"
},
"PALETTE_GREEN_20": {
"originalValue": "{!PALETTE_GREEN_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_20",
"value": "#1c3326",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 20"
},
"PALETTE_GREEN_10": {
"originalValue": "{!PALETTE_GREEN_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_10",
"value": "#071b12",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 10"
},
"PALETTE_GREEN_65": {
"originalValue": "{!PALETTE_GREEN_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_GREEN_65",
"value": "#41b658",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Green 65"
},
"PALETTE_HOT_ORANGE_90": {
"originalValue": "{!PALETTE_HOT_ORANGE_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_90",
"value": "#ffded5",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 90"
},
"PALETTE_HOT_ORANGE_80": {
"originalValue": "{!PALETTE_HOT_ORANGE_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_80",
"value": "#feb9a5",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 80"
},
"PALETTE_HOT_ORANGE_70": {
"originalValue": "{!PALETTE_HOT_ORANGE_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_70",
"value": "#ff906e",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 70"
},
"PALETTE_HOT_ORANGE_60": {
"originalValue": "{!PALETTE_HOT_ORANGE_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_60",
"value": "#ff5d2d",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 60"
},
"PALETTE_HOT_ORANGE_50": {
"originalValue": "{!PALETTE_HOT_ORANGE_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_50",
"value": "#d83a00",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 50"
},
"PALETTE_HOT_ORANGE_40": {
"originalValue": "{!PALETTE_HOT_ORANGE_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_40",
"value": "#aa3001",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 40"
},
"PALETTE_HOT_ORANGE_95": {
"originalValue": "{!PALETTE_HOT_ORANGE_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_95",
"value": "#fef1ed",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 95"
},
"PALETTE_HOT_ORANGE_30": {
"originalValue": "{!PALETTE_HOT_ORANGE_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_30",
"value": "#7e2600",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 30"
},
"PALETTE_HOT_ORANGE_20": {
"originalValue": "{!PALETTE_HOT_ORANGE_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_20",
"value": "#4a2413",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 20"
},
"PALETTE_HOT_ORANGE_10": {
"originalValue": "{!PALETTE_HOT_ORANGE_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_10",
"value": "#281202",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 10"
},
"PALETTE_HOT_ORANGE_65": {
"originalValue": "{!PALETTE_HOT_ORANGE_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_65",
"value": "#ff784f",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 65"
},
"PALETTE_HOT_ORANGE_15": {
"originalValue": "{!PALETTE_HOT_ORANGE_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_HOT_ORANGE_15",
"value": "#421604",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Hot Orange 15"
},
"PALETTE_INDIGO_90": {
"originalValue": "{!PALETTE_INDIGO_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_90",
"value": "#e0e5f8",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 90"
},
"PALETTE_INDIGO_80": {
"originalValue": "{!PALETTE_INDIGO_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_80",
"value": "#bec7f6",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 80"
},
"PALETTE_INDIGO_70": {
"originalValue": "{!PALETTE_INDIGO_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_70",
"value": "#9ea9f1",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 70"
},
"PALETTE_INDIGO_60": {
"originalValue": "{!PALETTE_INDIGO_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_60",
"value": "#7f8ced",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 60"
},
"PALETTE_INDIGO_50": {
"originalValue": "{!PALETTE_INDIGO_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_50",
"value": "#5867e8",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 50"
},
"PALETTE_INDIGO_40": {
"originalValue": "{!PALETTE_INDIGO_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_40",
"value": "#3a49da",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 40"
},
"PALETTE_INDIGO_95": {
"originalValue": "{!PALETTE_INDIGO_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_95",
"value": "#f1f3fb",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 95"
},
"PALETTE_INDIGO_30": {
"originalValue": "{!PALETTE_INDIGO_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_30",
"value": "#2f2cb7",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 30"
},
"PALETTE_INDIGO_20": {
"originalValue": "{!PALETTE_INDIGO_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_20",
"value": "#321d71",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 20"
},
"PALETTE_INDIGO_10": {
"originalValue": "{!PALETTE_INDIGO_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_10",
"value": "#200647",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 10"
},
"PALETTE_INDIGO_65": {
"originalValue": "{!PALETTE_INDIGO_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_65",
"value": "#8e9bef",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 65"
},
"PALETTE_INDIGO_15": {
"originalValue": "{!PALETTE_INDIGO_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_INDIGO_15",
"value": "#1f0974",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Indigo 15"
},
"PALETTE_NEUTRAL_90": {
"originalValue": "{!PALETTE_NEUTRAL_90}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_90",
"value": "#e5e5e5",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 90"
},
"PALETTE_NEUTRAL_80": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_80",
"value": "#c9c9c9",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 80"
},
"PALETTE_NEUTRAL_70": {
"originalValue": "{!PALETTE_NEUTRAL_70}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_70",
"value": "#aeaeae",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 70"
},
"PALETTE_NEUTRAL_100": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_100",
"value": "#ffffff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 100"
},
"PALETTE_NEUTRAL_60": {
"originalValue": "{!PALETTE_NEUTRAL_60}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_60",
"value": "#939393",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 60"
},
"PALETTE_NEUTRAL_50": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_50",
"value": "#747474",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 50"
},
"PALETTE_NEUTRAL_40": {
"originalValue": "{!PALETTE_NEUTRAL_40}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_40",
"value": "#5c5c5c",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 40"
},
"PALETTE_NEUTRAL_95": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_95",
"value": "#f3f3f3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 95"
},
"PALETTE_NEUTRAL_30": {
"originalValue": "{!PALETTE_NEUTRAL_30}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_30",
"value": "#444444",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 30"
},
"PALETTE_NEUTRAL_20": {
"originalValue": "{!PALETTE_NEUTRAL_20}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_20",
"value": "#2e2e2e",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 20"
},
"PALETTE_NEUTRAL_10": {
"originalValue": "{!PALETTE_NEUTRAL_10}",
"release": "2.16.0",
"primitive": true,
"name": "PALETTE_NEUTRAL_10",
"value": "#181818",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Neutral 10"
},
"PALETTE_ORANGE_90": {
"originalValue": "{!PALETTE_ORANGE_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_90",
"value": "#fedfd0",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 90"
},
"PALETTE_ORANGE_80": {
"originalValue": "{!PALETTE_ORANGE_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_80",
"value": "#ffba90",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 80"
},
"PALETTE_ORANGE_70": {
"originalValue": "{!PALETTE_ORANGE_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_70",
"value": "#fe9339",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 70"
},
"PALETTE_ORANGE_60": {
"originalValue": "{!PALETTE_ORANGE_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_60",
"value": "#dd7a01",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 60"
},
"PALETTE_ORANGE_50": {
"originalValue": "{!PALETTE_ORANGE_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_50",
"value": "#a96404",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 50"
},
"PALETTE_ORANGE_40": {
"originalValue": "{!PALETTE_ORANGE_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_40",
"value": "#825101",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 40"
},
"PALETTE_ORANGE_95": {
"originalValue": "{!PALETTE_ORANGE_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_95",
"value": "#fff1ea",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 95"
},
"PALETTE_ORANGE_30": {
"originalValue": "{!PALETTE_ORANGE_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_30",
"value": "#5f3e02",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 30"
},
"PALETTE_ORANGE_20": {
"originalValue": "{!PALETTE_ORANGE_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_20",
"value": "#3e2b02",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 20"
},
"PALETTE_ORANGE_10": {
"originalValue": "{!PALETTE_ORANGE_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_10",
"value": "#201600",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 10"
},
"PALETTE_ORANGE_65": {
"originalValue": "{!PALETTE_ORANGE_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_65",
"value": "#f38303",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 65"
},
"PALETTE_ORANGE_15": {
"originalValue": "{!PALETTE_ORANGE_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_ORANGE_15",
"value": "#371e03",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Orange 15"
},
"PALETTE_PINK_50": {
"originalValue": "{!PALETTE_PINK_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_50",
"value": "#e3066a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 50"
},
"PALETTE_PINK_40": {
"originalValue": "{!PALETTE_PINK_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_40",
"value": "#b60554",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 40"
},
"PALETTE_PINK_95": {
"originalValue": "{!PALETTE_PINK_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_95",
"value": "#fef0f3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 95"
},
"PALETTE_PINK_30": {
"originalValue": "{!PALETTE_PINK_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_30",
"value": "#8a033e",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 30"
},
"PALETTE_PINK_20": {
"originalValue": "{!PALETTE_PINK_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_20",
"value": "#61022a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 20"
},
"PALETTE_PINK_65": {
"originalValue": "{!PALETTE_PINK_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_65",
"value": "#fe7298",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 65"
},
"PALETTE_PINK_10": {
"originalValue": "{!PALETTE_PINK_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_10",
"value": "#370114",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 10"
},
"PALETTE_PINK_15": {
"originalValue": "{!PALETTE_PINK_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_15",
"value": "#4b0620",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 15"
},
"PALETTE_PINK_90": {
"originalValue": "{!PALETTE_PINK_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_90",
"value": "#fddde3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 90"
},
"PALETTE_PINK_80": {
"originalValue": "{!PALETTE_PINK_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_80",
"value": "#fdb6c5",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 80"
},
"PALETTE_PINK_70": {
"originalValue": "{!PALETTE_PINK_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_70",
"value": "#fe8aa7",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 70"
},
"PALETTE_PINK_60": {
"originalValue": "{!PALETTE_PINK_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PINK_60",
"value": "#ff538a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Pink 60"
},
"PALETTE_PURPLE_15": {
"originalValue": "{!PALETTE_PURPLE_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_15",
"value": "#300b60",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 15"
},
"PALETTE_PURPLE_90": {
"originalValue": "{!PALETTE_PURPLE_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_90",
"value": "#ece1f9",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 90"
},
"PALETTE_PURPLE_80": {
"originalValue": "{!PALETTE_PURPLE_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_80",
"value": "#d7bff2",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 80"
},
"PALETTE_PURPLE_70": {
"originalValue": "{!PALETTE_PURPLE_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_70",
"value": "#c29ef1",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 70"
},
"PALETTE_PURPLE_60": {
"originalValue": "{!PALETTE_PURPLE_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_60",
"value": "#ad7bee",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 60"
},
"PALETTE_PURPLE_50": {
"originalValue": "{!PALETTE_PURPLE_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_50",
"value": "#9050e9",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 50"
},
"PALETTE_PURPLE_40": {
"originalValue": "{!PALETTE_PURPLE_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_40",
"value": "#7526e3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 40"
},
"PALETTE_PURPLE_95": {
"originalValue": "{!PALETTE_PURPLE_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_95",
"value": "#f6f2fb",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 95"
},
"PALETTE_PURPLE_30": {
"originalValue": "{!PALETTE_PURPLE_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_30",
"value": "#5a1ba9",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 30"
},
"PALETTE_PURPLE_20": {
"originalValue": "{!PALETTE_PURPLE_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_20",
"value": "#401075",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 20"
},
"PALETTE_PURPLE_10": {
"originalValue": "{!PALETTE_PURPLE_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_10",
"value": "#240643",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 10"
},
"PALETTE_PURPLE_65": {
"originalValue": "{!PALETTE_PURPLE_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_PURPLE_65",
"value": "#b78def",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Purple 65"
},
"PALETTE_RED_90": {
"originalValue": "{!PALETTE_RED_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_90",
"value": "#feded8",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 90"
},
"PALETTE_RED_80": {
"originalValue": "{!PALETTE_RED_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_80",
"value": "#feb8ab",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 80"
},
"PALETTE_RED_70": {
"originalValue": "{!PALETTE_RED_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_70",
"value": "#fe8f7d",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 70"
},
"PALETTE_RED_60": {
"originalValue": "{!PALETTE_RED_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_60",
"value": "#fe5c4c",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 60"
},
"PALETTE_RED_50": {
"originalValue": "{!PALETTE_RED_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_50",
"value": "#ea001e",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 50"
},
"PALETTE_RED_95": {
"originalValue": "{!PALETTE_RED_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_95",
"value": "#fef1ee",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 95"
},
"PALETTE_RED_40": {
"originalValue": "{!PALETTE_RED_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_40",
"value": "#ba0517",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 40"
},
"PALETTE_RED_30": {
"originalValue": "{!PALETTE_RED_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_30",
"value": "#8e030f",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 30"
},
"PALETTE_RED_20": {
"originalValue": "{!PALETTE_RED_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_20",
"value": "#640103",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 20"
},
"PALETTE_RED_10": {
"originalValue": "{!PALETTE_RED_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_10",
"value": "#300c01",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 10"
},
"PALETTE_RED_65": {
"originalValue": "{!PALETTE_RED_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_65",
"value": "#fe7765",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 65"
},
"PALETTE_RED_15": {
"originalValue": "{!PALETTE_RED_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_RED_15",
"value": "#4a0c04",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Red 15"
},
"PALETTE_TEAL_15": {
"originalValue": "{!PALETTE_TEAL_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_15",
"value": "#072825",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 15"
},
"PALETTE_TEAL_90": {
"originalValue": "{!PALETTE_TEAL_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_90",
"value": "#acf3e4",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 90"
},
"PALETTE_TEAL_80": {
"originalValue": "{!PALETTE_TEAL_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_80",
"value": "#04e1cb",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 80"
},
"PALETTE_TEAL_70": {
"originalValue": "{!PALETTE_TEAL_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_70",
"value": "#01c3b3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 70"
},
"PALETTE_TEAL_60": {
"originalValue": "{!PALETTE_TEAL_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_60",
"value": "#06a59a",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 60"
},
"PALETTE_TEAL_50": {
"originalValue": "{!PALETTE_TEAL_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_50",
"value": "#0b827c",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 50"
},
"PALETTE_TEAL_40": {
"originalValue": "{!PALETTE_TEAL_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_40",
"value": "#056764",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 40"
},
"PALETTE_TEAL_95": {
"originalValue": "{!PALETTE_TEAL_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_95",
"value": "#def9f3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 95"
},
"PALETTE_TEAL_30": {
"originalValue": "{!PALETTE_TEAL_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_30",
"value": "#024d4c",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 30"
},
"PALETTE_TEAL_20": {
"originalValue": "{!PALETTE_TEAL_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_20",
"value": "#023434",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 20"
},
"PALETTE_TEAL_10": {
"originalValue": "{!PALETTE_TEAL_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_10",
"value": "#071b12",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 10"
},
"PALETTE_TEAL_65": {
"originalValue": "{!PALETTE_TEAL_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_TEAL_65",
"value": "#03b4a7",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Teal 65"
},
"PALETTE_VIOLET_15": {
"originalValue": "{!PALETTE_VIOLET_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_15",
"value": "#3d0157",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 15"
},
"PALETTE_VIOLET_90": {
"originalValue": "{!PALETTE_VIOLET_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_90",
"value": "#f2defe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 90"
},
"PALETTE_VIOLET_80": {
"originalValue": "{!PALETTE_VIOLET_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_80",
"value": "#e5b9fe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 80"
},
"PALETTE_VIOLET_70": {
"originalValue": "{!PALETTE_VIOLET_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_70",
"value": "#d892fe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 70"
},
"PALETTE_VIOLET_60": {
"originalValue": "{!PALETTE_VIOLET_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_60",
"value": "#cb65ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 60"
},
"PALETTE_VIOLET_50": {
"originalValue": "{!PALETTE_VIOLET_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_50",
"value": "#ba01ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 50"
},
"PALETTE_VIOLET_40": {
"originalValue": "{!PALETTE_VIOLET_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_40",
"value": "#9602c7",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 40"
},
"PALETTE_VIOLET_95": {
"originalValue": "{!PALETTE_VIOLET_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_95",
"value": "#f9f0ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 95"
},
"PALETTE_VIOLET_30": {
"originalValue": "{!PALETTE_VIOLET_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_30",
"value": "#730394",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 30"
},
"PALETTE_VIOLET_20": {
"originalValue": "{!PALETTE_VIOLET_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_20",
"value": "#481a54",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 20"
},
"PALETTE_VIOLET_10": {
"originalValue": "{!PALETTE_VIOLET_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_10",
"value": "#2e0039",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 10"
},
"PALETTE_VIOLET_65": {
"originalValue": "{!PALETTE_VIOLET_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_VIOLET_65",
"value": "#d17dfe",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Violet 65"
},
"PALETTE_YELLOW_70": {
"originalValue": "{!PALETTE_YELLOW_70}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_70",
"value": "#e4a201",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 70"
},
"PALETTE_YELLOW_60": {
"originalValue": "{!PALETTE_YELLOW_60}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_60",
"value": "#ca8501",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 60"
},
"PALETTE_YELLOW_50": {
"originalValue": "{!PALETTE_YELLOW_50}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_50",
"value": "#a86403",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 50"
},
"PALETTE_YELLOW_40": {
"originalValue": "{!PALETTE_YELLOW_40}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_40",
"value": "#8c4b02",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 40"
},
"PALETTE_YELLOW_95": {
"originalValue": "{!PALETTE_YELLOW_95}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_95",
"value": "#fbf3e0",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 95"
},
"PALETTE_YELLOW_30": {
"originalValue": "{!PALETTE_YELLOW_30}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_30",
"value": "#6f3400",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 30"
},
"PALETTE_YELLOW_20": {
"originalValue": "{!PALETTE_YELLOW_20}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_20",
"value": "#4f2100",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 20"
},
"PALETTE_YELLOW_10": {
"originalValue": "{!PALETTE_YELLOW_10}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_10",
"value": "#281202",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 10"
},
"PALETTE_YELLOW_65": {
"originalValue": "{!PALETTE_YELLOW_65}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_65",
"value": "#d79304",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 65"
},
"PALETTE_YELLOW_15": {
"originalValue": "{!PALETTE_YELLOW_15}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_15",
"value": "#2e2204",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 15"
},
"PALETTE_YELLOW_90": {
"originalValue": "{!PALETTE_YELLOW_90}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_90",
"value": "#f9e3b6",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 90"
},
"PALETTE_YELLOW_80": {
"originalValue": "{!PALETTE_YELLOW_80}",
"release": "2.14.0",
"primitive": true,
"name": "PALETTE_YELLOW_80",
"value": "#fcc003",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Yellow 80"
},
"COLOR_BACKGROUND_ROW_ACTIVE": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_ROW_ACTIVE",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Used as the background color for the active state on rows or items on list-like components."
},
"COLOR_BACKGROUND_LIGHT": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"release": "2.8.0",
"primitive": true,
"name": "COLOR_BACKGROUND_LIGHT",
"value": "#ffffff",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Light variant of COLOR_BACKGROUND."
},
"COLOR_BACKGROUND_ROW_HOVER": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_ROW_HOVER",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Used as the background color for the hover state on rows or items on list-like components."
},
"COLOR_BACKGROUND_ERROR_DARK": {
"originalValue": "{!PALETTE_RED_40}",
"primitive": true,
"name": "COLOR_BACKGROUND_ERROR_DARK",
"value": "#ba0517",
"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."
},
"COLOR_BACKGROUND_INFO": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"primitive": true,
"value": "#747474",
"comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_BACKGROUND_INFO"
},
"COLOR_BACKGROUND_ALT_INVERSE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"release": "1.0.0",
"primitive": true,
"name": "COLOR_BACKGROUND_ALT_INVERSE",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Alternative background color for dark portions of the app."
},
"COLOR_BACKGROUND_ROW_NEW": {
"originalValue": "{!PALETTE_GREEN_90}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_ROW_NEW",
"value": "#cdefc4",
"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."
},
"COLOR_BACKGROUND_SUCCESS_DARK": {
"originalValue": "{!PALETTE_GREEN_50}",
"primitive": true,
"name": "COLOR_BACKGROUND_SUCCESS_DARK",
"value": "#2e844a",
"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."
},
"COLOR_BACKGROUND_STENCIL": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_STENCIL",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Used as background for loading stencils on white background."
},
"COLOR_BACKGROUND_WARNING": {
"originalValue": "{!PALETTE_ORANGE_70}",
"primitive": true,
"name": "COLOR_BACKGROUND_WARNING",
"value": "#fe9339",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Color for UI elements that have to do with warning."
},
"COLOR_BACKGROUND_HIGHLIGHT_SEARCH": {
"originalValue": "{!GORSE}",
"primitive": true,
"name": "COLOR_BACKGROUND_HIGHLIGHT_SEARCH",
"value": "#fff03f",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for highlighting text in search results."
},
"COLOR_BACKGROUND_DESTRUCTIVE_HOVER": {
"originalValue": "{!PALETTE_RED_30}",
"primitive": true,
"name": "COLOR_BACKGROUND_DESTRUCTIVE_HOVER",
"value": "#8e030f",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Hover color for UI elements related to destructive actions."
},
"COLOR_BACKGROUND": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default background color for the whole app."
},
"COLOR_BRAND_DARK": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"primitive": true,
"name": "COLOR_BRAND_DARK",
"value": "#0176d3",
"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."
},
"COLOR_BACKGROUND_BACKDROP": {
"originalValue": "{!WHITE_TRANSPARENT_75}",
"primitive": true,
"name": "COLOR_BACKGROUND_BACKDROP",
"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."
},
"COLOR_BACKGROUND_DARK": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"release": "2.8.0",
"primitive": true,
"name": "COLOR_BACKGROUND_DARK",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Dark variant of COLOR_BACKGROUND."
},
"COLOR_BRAND": {
"originalValue": "{!PALETTE_BLUE_60}",
"access": "global",
"primitive": true,
"name": "COLOR_BRAND",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Our product brand blue."
},
"COLOR_BACKGROUND_DESTRUCTIVE": {
"originalValue": "{!PALETTE_RED_40}",
"primitive": true,
"name": "COLOR_BACKGROUND_DESTRUCTIVE",
"value": "#ba0517",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Color for UI elements related to destructive actions."
},
"COLOR_BACKGROUND_SUCCESS": {
"originalValue": "{!PALETTE_GREEN_70}",
"primitive": true,
"name": "COLOR_BACKGROUND_SUCCESS",
"value": "#45c65a",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Color for UI elements that have to do with success."
},
"COLOR_BACKGROUND_WARNING_DARK": {
"originalValue": "{!PALETTE_ORANGE_70}",
"primitive": true,
"name": "COLOR_BACKGROUND_WARNING_DARK",
"value": "#fe9339",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Dark Color for UI elements that have to do with warning."
},
"COLOR_BACKGROUND_OFFLINE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"primitive": true,
"value": "#444444",
"comment": "Color for UI elements related to the offline state.",
"originalValue": "{!PALETTE_NEUTRAL_30}",
"name": "COLOR_BACKGROUND_OFFLINE"
},
"COLOR_BACKGROUND_STENCIL_ALT": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_STENCIL_ALT",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Used as an alternate background for loading stencils on gray backgrounds."
},
"COLOR_BACKGROUND_INVERSE_LIGHT": {
"originalValue": "{!PALETTE_BLUE_20}",
"release": "2.8.0",
"primitive": true,
"name": "COLOR_BACKGROUND_INVERSE_LIGHT",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Light variant of COLOR_BACKGROUND_INVERSE."
},
"COLOR_BACKGROUND_CUSTOMER": {
"originalValue": "{!PALETTE_ORANGE_70}",
"primitive": true,
"name": "COLOR_BACKGROUND_CUSTOMER",
"value": "#fe9339",
"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."
},
"COLOR_BACKGROUND_ERROR": {
"originalValue": "{!PALETTE_RED_60}",
"primitive": true,
"name": "COLOR_BACKGROUND_ERROR",
"value": "#fe5c4c",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Color for UI elements related to errors."
},
"COLOR_BACKGROUND_ALT": {
"originalValue": "{!WHITE}",
"access": "global",
"release": "1.0.0",
"primitive": true,
"name": "COLOR_BACKGROUND_ALT",
"value": "#FFFFFF",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Second default background color for the app."
},
"COLOR_BACKGROUND_SUCCESS_DARKER": {
"originalValue": "{!PALETTE_GREEN_30}",
"primitive": true,
"name": "COLOR_BACKGROUND_SUCCESS_DARKER",
"value": "#194e31",
"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."
},
"COLOR_BACKGROUND_ROW_SELECTED": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_ROW_SELECTED",
"value": "#f3f3f3",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Used as the background color for selected rows or items on list-like components."
},
"COLOR_BRAND_DARKER": {
"originalValue": "{!PALETTE_BLUE_30}",
"primitive": true,
"name": "COLOR_BRAND_DARKER",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Our product brand blue, darkened even further."
},
"COLOR_BACKGROUND_SELECTION": {
"originalValue": "{!PALETTE_BLUE_90}",
"primitive": true,
"name": "COLOR_BACKGROUND_SELECTION",
"value": "#d8e6fe",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for text selected with a mouse."
},
"COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE": {
"originalValue": "{!PALETTE_RED_30}",
"primitive": true,
"name": "COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE",
"value": "#8e030f",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Active color for UI elements related to destructive actions."
},
"COLOR_BACKGROUND_INVERSE": {
"originalValue": "{!PALETTE_BLUE_10}",
"access": "global",
"release": "1.0.0",
"primitive": true,
"name": "COLOR_BACKGROUND_INVERSE",
"value": "#001639",
"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)."
},
"COLOR_BACKGROUND_HIGHLIGHT": {
"originalValue": "{!LEMON_CHIFFON}",
"access": "global",
"primitive": true,
"name": "COLOR_BACKGROUND_HIGHLIGHT",
"value": "#FAFFBD",
"scope": "global",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for highlighting UI elements."
},
"COLOR_BORDER_ERROR_DARK": {
"originalValue": "{!PALETTE_RED_70}",
"primitive": true,
"name": "COLOR_BORDER_ERROR_DARK",
"value": "#fe8f7d",
"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."
},
"COLOR_BORDER_BRAND_DARK": {
"originalValue": "{!PALETTE_BLUE_30}",
"primitive": true,
"name": "COLOR_BORDER_BRAND_DARK",
"value": "#014486",
"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."
},
"COLOR_BORDER_INFO": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"primitive": true,
"value": "#747474",
"comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_BORDER_INFO"
},
"COLOR_BORDER_WARNING": {
"originalValue": "{!PALETTE_ORANGE_70}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_WARNING",
"value": "#fe9339",
"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."
},
"COLOR_BORDER_DESTRUCTIVE_HOVER": {
"originalValue": "{!PALETTE_RED_40}",
"primitive": true,
"name": "COLOR_BORDER_DESTRUCTIVE_HOVER",
"value": "#ba0517",
"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."
},
"COLOR_BORDER": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER",
"value": "#c9c9c9",
"cssProperties": [
"border*",
"box-shadow",
"background*"
],
"type": "color",
"category": "border-color",
"comment": "Default border color for UI elements."
},
"COLOR_BORDER_SUCCESS_DARK": {
"originalValue": "{!PALETTE_GREEN_50}",
"primitive": true,
"name": "COLOR_BORDER_SUCCESS_DARK",
"value": "#2e844a",
"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."
},
"COLOR_BORDER_DESTRUCTIVE": {
"originalValue": "{!PALETTE_RED_50}",
"primitive": true,
"name": "COLOR_BORDER_DESTRUCTIVE",
"value": "#ea001e",
"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."
},
"COLOR_BORDER_SEPARATOR_ALT_2": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_SEPARATOR_ALT_2",
"value": "#c9c9c9",
"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."
},
"COLOR_BORDER_OFFLINE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"primitive": true,
"value": "#444444",
"comment": "Border color for UI elements related to the offline state.",
"originalValue": "{!PALETTE_NEUTRAL_30}",
"name": "COLOR_BORDER_OFFLINE"
},
"COLOR_BORDER_SUCCESS": {
"originalValue": "{!PALETTE_GREEN_80}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_SUCCESS",
"value": "#91db8b",
"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."
},
"COLOR_BORDER_SEPARATOR": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_SEPARATOR",
"value": "#f3f3f3",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"type": "color",
"category": "border-color",
"comment": "Lightest separator color - used as default separator on white backgrounds."
},
"COLOR_BORDER_BRAND": {
"originalValue": "{!PALETTE_BLUE_60}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_BRAND",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"type": "color",
"category": "border-color",
"comment": "Our product brand blue."
},
"COLOR_BORDER_SELECTION_ACTIVE": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"primitive": true,
"name": "COLOR_BORDER_SELECTION_ACTIVE",
"value": "#f3f3f3",
"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."
},
"COLOR_BORDER_ERROR": {
"originalValue": "{!PALETTE_RED_50}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_ERROR",
"value": "#ea001e",
"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."
},
"COLOR_BORDER_SELECTION_HOVER": {
"originalValue": "{!PALETTE_BLUE_60}",
"primitive": true,
"name": "COLOR_BORDER_SELECTION_HOVER",
"value": "#1b96ff",
"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."
},
"COLOR_BORDER_ROW_SELECTED_HOVER": {
"originalValue": "{!PALETTE_BLUE_60}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_ROW_SELECTED_HOVER",
"value": "#1b96ff",
"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."
},
"COLOR_BORDER_CUSTOMER": {
"originalValue": "{!PALETTE_ORANGE_70}",
"primitive": true,
"name": "COLOR_BORDER_CUSTOMER",
"value": "#fe9339",
"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."
},
"COLOR_BORDER_SELECTION": {
"originalValue": "{!PALETTE_BLUE_50}",
"primitive": true,
"name": "COLOR_BORDER_SELECTION",
"value": "#0176d3",
"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."
},
"COLOR_BORDER_ROW_SELECTED": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_ROW_SELECTED",
"value": "#0176d3",
"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."
},
"COLOR_BORDER_SEPARATOR_ALT": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_SEPARATOR_ALT",
"value": "#c9c9c9",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"type": "color",
"category": "border-color",
"comment": "Medium separator color - used as default separator on light gray backgrounds."
},
"COLOR_BORDER_INVERSE": {
"originalValue": "{!PALETTE_BLUE_10}",
"primitive": true,
"name": "COLOR_BORDER_INVERSE",
"value": "#001639",
"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."
},
"COLOR_BORDER_DESTRUCTIVE_ACTIVE": {
"originalValue": "{!PALETTE_RED_30}",
"primitive": true,
"name": "COLOR_BORDER_DESTRUCTIVE_ACTIVE",
"value": "#8e030f",
"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."
},
"COLOR_BORDER_ERROR_ALT": {
"originalValue": "{!PALETTE_RED_70}",
"primitive": true,
"name": "COLOR_BORDER_ERROR_ALT",
"value": "#fe8f7d",
"scope": "global",
"cssProperties": [
"border*",
"box-shadow",
"outline",
"outline-color"
],
"type": "color",
"category": "border-color",
"comment": "Alternative border color for UI elements related to errors."
},
"COLOR_BORDER_SEPARATOR_INVERSE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"primitive": true,
"name": "COLOR_BORDER_SEPARATOR_INVERSE",
"value": "#032d60",
"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."
},
"BORDER_RADIUS_SMALL": {
"originalValue": "{!BORDER_RADIUS_SMALL}",
"access": "global",
"primitive": true,
"name": "BORDER_RADIUS_SMALL",
"value": "0.125rem",
"scope": "global",
"cssProperties": [
"border*radius"
],
"type": "size",
"category": "radius"
},
"BORDER_RADIUS_MEDIUM": {
"originalValue": "{!BORDER_RADIUS_MEDIUM}",
"access": "global",
"primitive": true,
"name": "BORDER_RADIUS_MEDIUM",
"value": "0.25rem",
"scope": "global",
"cssProperties": [
"border*radius"
],
"type": "size",
"category": "radius",
"comment": "Icons in lists, record home icon, unbound input elements"
},
"BORDER_RADIUS_LARGE": {
"originalValue": "{!BORDER_RADIUS_LARGE}",
"access": "global",
"primitive": true,
"name": "BORDER_RADIUS_LARGE",
"value": "0.5rem",
"scope": "global",
"cssProperties": [
"border*radius"
],
"type": "size",
"category": "radius"
},
"BORDER_RADIUS_CIRCLE": {
"originalValue": "{!BORDER_RADIUS_CIRCLE}",
"access": "global",
"primitive": true,
"name": "BORDER_RADIUS_CIRCLE",
"value": "50%",
"scope": "global",
"cssProperties": [
"border*radius"
],
"type": "size",
"category": "radius",
"comment": "Circle for global use, action icon bgd shape"
},
"BORDER_WIDTH_THIN": {
"originalValue": "1px",
"access": "global",
"primitive": true,
"name": "BORDER_WIDTH_THIN",
"value": "1px",
"scope": "global",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow",
"stroke",
"stroke-width"
],
"type": "size",
"category": "border-style"
},
"BORDER_WIDTH_THICK": {
"originalValue": "2px",
"access": "global",
"primitive": true,
"name": "BORDER_WIDTH_THICK",
"value": "2px",
"scope": "global",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow",
"stroke",
"stroke-width"
],
"type": "size",
"category": "border-style"
},
"SHADOW_ACTIVE": {
"originalValue": "{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_X_SMALL}px {!BRAND_ACCESSIBLE}",
"primitive": true,
"name": "SHADOW_ACTIVE",
"value": "0 0 2px #0176d3",
"scope": "global",
"cssProperties": [
"box-shadow"
],
"type": "box-shadow",
"category": "shadow",
"comment": "Shadow for active states on interactive elements."
},
"SHADOW_DRAG": {
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_40}",
"access": "global",
"primitive": true,
"name": "SHADOW_DRAG",
"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."
},
"SHADOW_DROP_DOWN": {
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"access": "global",
"primitive": true,
"name": "SHADOW_DROP_DOWN",
"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."
},
"DURATION_INSTANTLY": {
"originalValue": "{!DURATION_INSTANTLY}",
"access": "global",
"primitive": true,
"name": "DURATION_INSTANTLY",
"value": "0s",
"scope": "global",
"cssProperties": [
"animation*",
"transition*"
],
"type": "time",
"category": "time",
"comment": "0 seconds, 0 frames"
},
"DURATION_IMMEDIATELY": {
"originalValue": "{!DURATION_IMMEDIATELY}",
"access": "global",
"primitive": true,
"name": "DURATION_IMMEDIATELY",
"value": "0.05s",
"scope": "global",
"cssProperties": [
"animation*",
"transition*"
],
"type": "time",
"category": "time",
"comment": "0.05 seconds, 3 frames"
},
"DURATION_QUICKLY": {
"originalValue": "{!DURATION_QUICKLY}",
"access": "global",
"primitive": true,
"name": "DURATION_QUICKLY",
"value": "0.1s",
"scope": "global",
"cssProperties": [
"animation*",
"transition*"
],
"type": "time",
"category": "time",
"comment": "0.1 seconds, 6 frames"
},
"DURATION_PROMPTLY": {
"originalValue": "{!DURATION_PROMPTLY}",
"access": "global",
"primitive": true,
"name": "DURATION_PROMPTLY",
"value": "0.2s",
"scope": "global",
"cssProperties": [
"animation*",
"transition*"
],
"type": "time",
"category": "time",
"comment": "0.2 seconds, 12 frames"
},
"DURATION_SLOWLY": {
"originalValue": "{!DURATION_SLOWLY}",
"access": "global",
"primitive": true,
"name": "DURATION_SLOWLY",
"value": "0.4s",
"scope": "global",
"cssProperties": [
"animation*",
"transition*"
],
"type": "time",
"category": "time",
"comment": "0.4 seconds, 24 frames"
},
"DURATION_PAUSED": {
"originalValue": "{!DURATION_PAUSED}",
"access": "global",
"primitive": true,
"name": "DURATION_PAUSED",
"value": "3.2s",
"scope": "global",
"cssProperties": [
"animation*",
"transition*"
],
"type": "time",
"category": "time",
"comment": "3.2 seconds, 192 frames"
},
"FONT_FAMILY": {
"originalValue": "{!SANS_SERIF}",
"access": "global",
"primitive": true,
"name": "FONT_FAMILY",
"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"
},
"FONT_FAMILY_HEADING": {
"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'",
"originalValue": "{!SANS_SERIF}",
"name": "FONT_FAMILY_HEADING"
},
"FONT_FAMILY_MONOSPACE": {
"category": "font",
"type": "font",
"cssProperties": [
"font",
"font-family"
],
"scope": "global",
"primitive": true,
"value": "Consolas, Menlo, Monaco, Courier, monospace",
"originalValue": "{!MONOSPACE}",
"name": "FONT_FAMILY_MONOSPACE"
},
"FONT_SIZE_1": {
"originalValue": "{!FONT_SIZE_1}",
"primitive": true,
"name": "FONT_SIZE_1",
"value": "0.625rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 1"
},
"FONT_SIZE_2": {
"originalValue": "{!FONT_SIZE_2}",
"primitive": true,
"name": "FONT_SIZE_2",
"value": "0.75rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 2"
},
"FONT_SIZE_3": {
"originalValue": "{!FONT_SIZE_3}",
"primitive": true,
"name": "FONT_SIZE_3",
"value": "0.8125rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 3"
},
"VAR_FONT_SIZE_10": {
"originalValue": "{!FONT_SIZE_10}",
"primitive": true,
"name": "VAR_FONT_SIZE_10",
"value": "2rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 10"
},
"FONT_SIZE_4": {
"originalValue": "{!FONT_SIZE_4}",
"primitive": true,
"name": "FONT_SIZE_4",
"value": "0.875rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 4"
},
"VAR_FONT_SIZE_11": {
"originalValue": "{!FONT_SIZE_11}",
"primitive": true,
"name": "VAR_FONT_SIZE_11",
"value": "2.625rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 11"
},
"FONT_SIZE_5": {
"originalValue": "{!FONT_SIZE_5}",
"primitive": true,
"name": "FONT_SIZE_5",
"value": "1rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 5"
},
"FONT_SIZE_6": {
"originalValue": "{!FONT_SIZE_6}",
"primitive": true,
"name": "FONT_SIZE_6",
"value": "1.125rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 6"
},
"FONT_SIZE_7": {
"originalValue": "{!FONT_SIZE_7}",
"primitive": true,
"name": "FONT_SIZE_7",
"value": "1.25rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 7"
},
"FONT_SIZE_8": {
"originalValue": "{!FONT_SIZE_8}",
"primitive": true,
"name": "FONT_SIZE_8",
"value": "1.5rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 8"
},
"VAR_FONT_SIZE_1": {
"originalValue": "{!FONT_SIZE_1}",
"primitive": true,
"name": "VAR_FONT_SIZE_1",
"value": "0.625rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 1"
},
"FONT_SIZE_9": {
"originalValue": "{!FONT_SIZE_9}",
"primitive": true,
"name": "FONT_SIZE_9",
"value": "1.75rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 9"
},
"VAR_FONT_SIZE_2": {
"originalValue": "{!FONT_SIZE_2}",
"primitive": true,
"name": "VAR_FONT_SIZE_2",
"value": "0.75rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 2"
},
"VAR_FONT_SIZE_3": {
"originalValue": "{!FONT_SIZE_3}",
"primitive": true,
"name": "VAR_FONT_SIZE_3",
"value": "0.8125rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 3"
},
"FONT_SIZE_10": {
"originalValue": "{!FONT_SIZE_10}",
"primitive": true,
"name": "FONT_SIZE_10",
"value": "2rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 10"
},
"VAR_FONT_SIZE_4": {
"originalValue": "{!FONT_SIZE_4}",
"primitive": true,
"name": "VAR_FONT_SIZE_4",
"value": "0.875rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 4"
},
"FONT_SIZE_11": {
"originalValue": "{!FONT_SIZE_11}",
"primitive": true,
"name": "FONT_SIZE_11",
"value": "2.625rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Constant typography token for font size 11"
},
"VAR_FONT_SIZE_5": {
"originalValue": "{!FONT_SIZE_5}",
"primitive": true,
"name": "VAR_FONT_SIZE_5",
"value": "1rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 5"
},
"VAR_FONT_SIZE_6": {
"originalValue": "{!FONT_SIZE_6}",
"primitive": true,
"name": "VAR_FONT_SIZE_6",
"value": "1.125rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 6"
},
"VAR_FONT_SIZE_7": {
"originalValue": "{!FONT_SIZE_7}",
"primitive": true,
"name": "VAR_FONT_SIZE_7",
"value": "1.25rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 7"
},
"VAR_FONT_SIZE_8": {
"originalValue": "{!FONT_SIZE_8}",
"primitive": true,
"name": "VAR_FONT_SIZE_8",
"value": "1.5rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 8"
},
"VAR_FONT_SIZE_9": {
"originalValue": "{!FONT_SIZE_9}",
"primitive": true,
"name": "VAR_FONT_SIZE_9",
"value": "1.75rem",
"scope": "global",
"cssProperties": [
"font",
"font-size"
],
"type": "font-size",
"category": "font-size",
"comment": "Variable typography token for font size 9"
},
"FONT_WEIGHT_LIGHT": {
"originalValue": "{!FONT_WEIGHT_LIGHT}",
"access": "global",
"primitive": true,
"name": "FONT_WEIGHT_LIGHT",
"value": "300",
"deprecated": true,
"scope": "global",
"cssProperties": [
"font",
"font-weight"
],
"type": "font-weight",
"category": "font",
"comment": "Use for large headings only."
},
"FONT_WEIGHT_REGULAR": {
"originalValue": "{!FONT_WEIGHT_REGULAR}",
"access": "global",
"primitive": true,
"name": "FONT_WEIGHT_REGULAR",
"value": "400",
"scope": "global",
"cssProperties": [
"font",
"font-weight"
],
"type": "font-weight",
"category": "font",
"comment": "Most all body copy."
},
"FONT_WEIGHT_BOLD": {
"originalValue": "{!FONT_WEIGHT_BOLD}",
"access": "global",
"primitive": true,
"name": "FONT_WEIGHT_BOLD",
"value": "700",
"scope": "global",
"cssProperties": [
"font",
"font-weight"
],
"type": "font-weight",
"category": "font",
"comment": "Used sparingly for emphasized text within regular body copy."
},
"LINE_HEIGHT_HEADING": {
"originalValue": "1.25",
"access": "global",
"primitive": true,
"name": "LINE_HEIGHT_HEADING",
"value": "1.25",
"scope": "global",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Unitless line-heights for reusability"
},
"LINE_HEIGHT_TEXT": {
"originalValue": "1.5",
"access": "global",
"primitive": true,
"name": "LINE_HEIGHT_TEXT",
"value": "1.5",
"scope": "global",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Unitless line-heights for reusability"
},
"LINE_HEIGHT_RESET": {
"originalValue": "1",
"access": "global",
"primitive": true,
"name": "LINE_HEIGHT_RESET",
"value": "1",
"scope": "global",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Remove extra leading. Unitless line-heights for reusability"
},
"VAR_LINE_HEIGHT_TEXT": {
"originalValue": "1.5",
"primitive": true,
"name": "VAR_LINE_HEIGHT_TEXT",
"value": "1.5",
"scope": "global",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Variable unitless line-heights for reusability"
},
"OPACITY_5": {
"originalValue": "0.5",
"primitive": true,
"name": "OPACITY_5",
"value": "0.5",
"scope": "global",
"cssProperties": [
"opacity"
],
"type": "opacity",
"category": "opacity",
"comment": "50% transparency of an element"
},
"OPACITY_8": {
"originalValue": "0.8",
"primitive": true,
"name": "OPACITY_8",
"value": "0.8",
"scope": "global",
"cssProperties": [
"opacity"
],
"type": "opacity",
"category": "opacity",
"comment": "80% transparency of an element"
},
"BRAND_HEADER_CONTRAST_WEAK_DISABLED": {
"originalValue": "rgba(166,166,166,0.25)",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_WEAK_DISABLED",
"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"
},
"COLOR_GRAY_11": {
"originalValue": "{!PALETTE_GRAY_11}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_11",
"value": "#3e3e3c",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 11"
},
"BRAND_PRIMARY_TRANSPARENT_10": {
"originalValue": "rgba(21,137,238,0.1)",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_PRIMARY_TRANSPARENT_10",
"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%"
},
"COLOR_GRAY_12": {
"originalValue": "{!PALETTE_GRAY_12}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_12",
"value": "#2B2826",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 12"
},
"BRAND_BACKGROUND_DARK_TRANSPARENT": {
"originalValue": "rgba(221,219,218,0)",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_BACKGROUND_DARK_TRANSPARENT",
"value": "rgba(221,219,218,0)",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug"
},
"COLOR_GRAY_13": {
"originalValue": "{!PALETTE_GRAY_13}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_13",
"value": "#080707",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 13"
},
"BRAND_HEADER": {
"originalValue": "{!PALETTE_GRAY_1}",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER",
"value": "#FFFFFF",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Background color a branded app header"
},
"BRAND_LIGHT_ACTIVE": {
"originalValue": "{!BRAND_LIGHT_ACTIVE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_LIGHT_ACTIVE",
"value": "#e3e5ed",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_LIGHT"
},
"BRAND_HEADER_CONTRAST_WARM": {
"originalValue": "{!PALETTE_RED_40}",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_WARM",
"value": "#ba0517",
"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"
},
"BRAND_HEADER_ICON_DISABLED": {
"originalValue": "rgba(145,145,145,0.25)",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_ICON_DISABLED",
"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"
},
"BRAND_HEADER_CONTRAST_ACTIVE": {
"originalValue": "#505050",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_ACTIVE",
"value": "#505050",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_HEADER_CONTRAST"
},
"BRAND_BACKGROUND_PRIMARY": {
"originalValue": "#fafaf9",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_BACKGROUND_PRIMARY",
"value": "#fafaf9",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Primary page background color"
},
"BRAND_PRIMARY": {
"originalValue": "{!BRAND_PRIMARY}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_PRIMARY",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Primary brand color"
},
"BRAND_HEADER_CONTRAST_WEAK_ACTIVE": {
"originalValue": "#818181",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_WEAK_ACTIVE",
"value": "#818181",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WEAK"
},
"BRAND_CONTRAST_ACTIVE": {
"originalValue": "{!BRAND_CONTRAST_ACTIVE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_CONTRAST_ACTIVE",
"value": "#0d0e12",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_CONTRAST"
},
"BRAND_HEADER_CONTRAST_COOL": {
"originalValue": "{!PALETTE_BLUE_30}",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_COOL",
"value": "#014486",
"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"
},
"BRAND_HEADER_CONTRAST_INVERSE": {
"originalValue": "#ffffff",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_INVERSE",
"value": "#ffffff",
"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"
},
"BRAND_DARK": {
"originalValue": "{!BRAND_DARK}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_DARK",
"value": "#0176d3",
"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"
},
"BRAND_ACCESSIBLE": {
"originalValue": "{!BRAND_ACCESSIBLE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_ACCESSIBLE",
"value": "#0176d3",
"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"
},
"BRAND_BACKGROUND_DARK": {
"originalValue": "#e8e8e8",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_BACKGROUND_DARK",
"value": "#e8e8e8",
"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"
},
"BRAND_TEXT_LINK_ACTIVE": {
"originalValue": "{!BRAND_TEXT_LINK_ACTIVE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_TEXT_LINK_ACTIVE",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_TEXT_LINK"
},
"COLOR_GRAY_1": {
"originalValue": "{!PALETTE_GRAY_1}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_1",
"value": "#FFFFFF",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 1"
},
"COLOR_GRAY_2": {
"originalValue": "{!PALETTE_GRAY_2}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_2",
"value": "#fafaf9",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 2"
},
"BRAND_HEADER_ICON_ACTIVE": {
"originalValue": "#818181",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_ICON_ACTIVE",
"value": "#818181",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_HEADER_ICON"
},
"COLOR_GRAY_3": {
"originalValue": "{!PALETTE_GRAY_3}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_3",
"value": "#f3f2f2",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 3"
},
"BRAND_HEADER_ICON": {
"originalValue": "#919191",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_ICON",
"value": "#919191",
"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"
},
"BRAND_DISABLED": {
"originalValue": "{!BRAND_DISABLED}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_DISABLED",
"value": "#c9c7c5",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Disabled state of BRAND_A11Y"
},
"BRAND_TEXT_LINK": {
"originalValue": "{!BRAND_TEXT_LINK}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_TEXT_LINK",
"value": "#0b5cab",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Primary text link brand color"
},
"COLOR_GRAY_4": {
"originalValue": "{!PALETTE_GRAY_4}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_4",
"value": "#ecebea",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 4"
},
"COLOR_GRAY_5": {
"originalValue": "{!PALETTE_GRAY_5}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_5",
"value": "#dddbda",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 5"
},
"COLOR_GRAY_6": {
"originalValue": "{!PALETTE_GRAY_6}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_6",
"value": "#c9c7c5",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 6"
},
"BRAND_ACCESSIBLE_ACTIVE": {
"originalValue": "{!BRAND_ACCESSIBLE_ACTIVE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_ACCESSIBLE_ACTIVE",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_A11Y"
},
"COLOR_GRAY_7": {
"originalValue": "{!PALETTE_GRAY_7}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_7",
"value": "#b0adab",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 7"
},
"BRAND_DARK_ACTIVE": {
"originalValue": "{!BRAND_DARK_ACTIVE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_DARK_ACTIVE",
"value": "#253045",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_DARK"
},
"COLOR_GRAY_8": {
"originalValue": "{!PALETTE_GRAY_8}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_8",
"value": "#969492",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 8"
},
"BRAND_HEADER_CONTRAST_INVERSE_ACTIVE": {
"originalValue": "#eeeeee",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_INVERSE_ACTIVE",
"value": "#eeeeee",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_HEADER_CONTRAST"
},
"BRAND_HEADER_CONTRAST_COOL_ACTIVE": {
"originalValue": "{!PALETTE_BLUE_30}",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_COOL_ACTIVE",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_HEADER_CONTRAST_COOL"
},
"COLOR_GRAY_9": {
"originalValue": "{!PALETTE_GRAY_9}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_9",
"value": "#706e6b",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 9"
},
"BRAND_CONTRAST": {
"originalValue": "{!BRAND_CONTRAST}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_CONTRAST",
"value": "#1a1b1e",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Variant of BRAND that is accessible with BRAND"
},
"BRAND_HEADER_CONTRAST_WEAK": {
"originalValue": "#919191",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_WEAK",
"value": "#919191",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Weak contrast ratio, useful for iconography"
},
"BRAND_PRIMARY_ACTIVE": {
"originalValue": "{!BRAND_PRIMARY_ACTIVE}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_PRIMARY_ACTIVE",
"value": "#0176d3",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_PRIMARY"
},
"BRAND_BACKGROUND_PRIMARY_TRANSPARENT": {
"originalValue": "rgba(176,196,223,0)",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_BACKGROUND_PRIMARY_TRANSPARENT",
"value": "rgba(176,196,223,0)",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug"
},
"BRAND_HEADER_CONTRAST": {
"originalValue": "#5e5e5e",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST",
"value": "#5e5e5e",
"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"
},
"BRAND_PRIMARY_TRANSPARENT": {
"originalValue": "rgba(21,137,238,0.1)",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_PRIMARY_TRANSPARENT",
"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"
},
"BRAND_HEADER_CONTRAST_WARM_ACTIVE": {
"originalValue": "{!PALETTE_RED_40}",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_HEADER_CONTRAST_WARM_ACTIVE",
"value": "#ba0517",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WARM"
},
"BRAND_PRIMARY_TRANSPARENT_40": {
"originalValue": "rgba(21,137,238,0.4)",
"themeable": true,
"release": "2.6.0",
"primitive": true,
"name": "BRAND_PRIMARY_TRANSPARENT_40",
"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%"
},
"BRAND_LIGHT": {
"originalValue": "{!BRAND_LIGHT}",
"themeable": true,
"access": "global",
"release": "2.6.0",
"primitive": true,
"name": "BRAND_LIGHT",
"value": "#f4f6fe",
"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"
},
"COLOR_GRAY_10": {
"originalValue": "{!PALETTE_GRAY_10}",
"release": "2.5.0",
"primitive": true,
"name": "COLOR_GRAY_10",
"value": "#514f4d",
"scope": "global",
"cssProperties": [
"background-color",
"border*color",
"box-shadow",
"fill",
"color"
],
"type": "color",
"category": "color",
"comment": "Gray Color 10"
},
"SIZE_X_SMALL": {
"originalValue": "{!SIZE_X_SMALL}",
"access": "global",
"primitive": true,
"name": "SIZE_X_SMALL",
"value": "12rem",
"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."
},
"SIZE_XXX_SMALL": {
"originalValue": "{!SIZE_XXX_SMALL}",
"primitive": true,
"name": "SIZE_XXX_SMALL",
"value": "3rem",
"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."
},
"SQUARE_ICON_UTILITY_LARGE": {
"originalValue": "{!SIZE_SQUARE_X_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_UTILITY_LARGE",
"value": "1.5rem",
"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."
},
"SIZE_XX_SMALL": {
"originalValue": "{!SIZE_XX_SMALL}",
"access": "global",
"primitive": true,
"name": "SIZE_XX_SMALL",
"value": "6rem",
"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."
},
"SQUARE_ICON_SMALL_BOUNDARY": {
"originalValue": "{!SIZE_SQUARE_X_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_SMALL_BOUNDARY",
"value": "1.5rem",
"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"
},
"SIZE_SMALL": {
"originalValue": "{!SIZE_SMALL}",
"access": "global",
"primitive": true,
"name": "SIZE_SMALL",
"value": "15rem",
"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."
},
"SQUARE_ICON_UTILITY_MEDIUM": {
"originalValue": "{!SIZE_SQUARE_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_UTILITY_MEDIUM",
"value": "1.25rem",
"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."
},
"SQUARE_ICON_X_SMALL_BOUNDARY": {
"originalValue": "{!SIZE_SQUARE_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_X_SMALL_BOUNDARY",
"value": "1.25rem",
"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."
},
"SQUARE_ICON_UTILITY_SMALL": {
"originalValue": "{!SIZE_SQUARE_MEDIUM}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_UTILITY_SMALL",
"value": "1rem",
"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."
},
"SQUARE_ICON_MEDIUM_BOUNDARY": {
"originalValue": "{!SIZE_SQUARE_XX_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_MEDIUM_BOUNDARY",
"value": "2rem",
"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"
},
"SQUARE_ICON_LARGE_CONTENT": {
"originalValue": "{!SIZE_SQUARE_XX_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_LARGE_CONTENT",
"value": "2rem",
"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)"
},
"SQUARE_ICON_LARGE_BOUNDARY": {
"originalValue": "3rem",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_LARGE_BOUNDARY",
"value": "3rem",
"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"
},
"SIZE_MEDIUM": {
"originalValue": "{!SIZE_MEDIUM}",
"access": "global",
"primitive": true,
"name": "SIZE_MEDIUM",
"value": "20rem",
"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."
},
"SQUARE_ICON_MEDIUM_CONTENT": {
"originalValue": "{!SIZE_SQUARE_MEDIUM}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_MEDIUM_CONTENT",
"value": "1rem",
"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)"
},
"SIZE_X_LARGE": {
"originalValue": "{!SIZE_X_LARGE}",
"access": "global",
"primitive": true,
"name": "SIZE_X_LARGE",
"value": "40rem",
"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."
},
"SQUARE_ICON_X_SMALL_CONTENT": {
"originalValue": "{!SIZE_SQUARE_XXX_SMALL}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_X_SMALL_CONTENT",
"value": "0.5rem",
"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."
},
"VAR_SQUARE_ICON_MEDIUM_BOUNDARY": {
"originalValue": "{!SIZE_SQUARE_XX_LARGE}",
"primitive": true,
"name": "VAR_SQUARE_ICON_MEDIUM_BOUNDARY",
"value": "2rem",
"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"
},
"SQUARE_ICON_MEDIUM_BOUNDARY_ALT": {
"originalValue": "{!SIZE_SQUARE_XXX_LARGE}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_MEDIUM_BOUNDARY_ALT",
"value": "2.25rem",
"scope": "global",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"type": "size",
"category": "sizing",
"comment": "Icon button boundary."
},
"SIZE_XX_LARGE": {
"originalValue": "{!SIZE_XX_LARGE}",
"access": "global",
"primitive": true,
"name": "SIZE_XX_LARGE",
"value": "60rem",
"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."
},
"SQUARE_ICON_LARGE_BOUNDARY_ALT": {
"originalValue": "5rem",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_LARGE_BOUNDARY_ALT",
"value": "5rem",
"scope": "global",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"type": "size",
"category": "sizing",
"comment": "Anchor: avatar"
},
"SIZE_LARGE": {
"originalValue": "{!SIZE_LARGE}",
"access": "global",
"primitive": true,
"name": "SIZE_LARGE",
"value": "25rem",
"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."
},
"SQUARE_ICON_SMALL_CONTENT": {
"originalValue": "{!SIZE_SQUARE_XX_SMALL}",
"access": "global",
"primitive": true,
"name": "SQUARE_ICON_SMALL_CONTENT",
"value": "0.75rem",
"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)"
},
"SQUARE_ICON_XX_SMALL_BOUNDARY": {
"originalValue": "{!SIZE_SQUARE_MEDIUM}",
"primitive": true,
"name": "SQUARE_ICON_XX_SMALL_BOUNDARY",
"value": "1rem",
"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."
},
"SQUARE_ICON_MEDIUM_CONTENT_ALT": {
"originalValue": "{!SIZE_SQUARE_SMALL}",
"primitive": true,
"name": "SQUARE_ICON_MEDIUM_CONTENT_ALT",
"value": "0.875rem",
"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"
},
"VAR_SPACING_X_LARGE": {
"originalValue": "{!SPACING_X_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_X_LARGE",
"value": "2rem",
"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"
},
"VAR_SPACING_HORIZONTAL_SMALL": {
"originalValue": "{!SPACING_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_SMALL",
"value": "0.75rem",
"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"
},
"VAR_SPACING_HORIZONTAL_XX_LARGE": {
"originalValue": "{!SPACING_XX_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_XX_LARGE",
"value": "3rem",
"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"
},
"SPACING_X_SMALL": {
"originalValue": "{!SPACING_X_SMALL}",
"access": "global",
"primitive": true,
"name": "SPACING_X_SMALL",
"value": "0.5rem",
"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"
},
"SPACING_XXX_SMALL": {
"originalValue": "{!SPACING_XXX_SMALL}",
"access": "global",
"primitive": true,
"name": "SPACING_XXX_SMALL",
"value": "0.125rem",
"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"
},
"SPACING_XX_SMALL": {
"originalValue": "{!SPACING_XX_SMALL}",
"access": "global",
"primitive": true,
"name": "SPACING_XX_SMALL",
"value": "0.25rem",
"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"
},
"VAR_SPACING_VERTICAL_LARGE": {
"originalValue": "{!SPACING_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_LARGE",
"value": "1.5rem",
"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"
},
"VAR_SPACING_LARGE": {
"originalValue": "{!SPACING_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_LARGE",
"value": "1.5rem",
"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"
},
"VAR_SPACING_MEDIUM": {
"originalValue": "{!SPACING_MEDIUM}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_MEDIUM",
"value": "1rem",
"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"
},
"VAR_SPACING_VERTICAL_MEDIUM": {
"originalValue": "{!SPACING_MEDIUM}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_MEDIUM",
"value": "1rem",
"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"
},
"VAR_SPACING_VERTICAL_X_SMALL": {
"originalValue": "{!SPACING_X_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_X_SMALL",
"value": "0.5rem",
"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"
},
"SPACING_SMALL": {
"originalValue": "{!SPACING_SMALL}",
"access": "global",
"primitive": true,
"name": "SPACING_SMALL",
"value": "0.75rem",
"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"
},
"VAR_SPACING_VERTICAL_XXX_SMALL": {
"originalValue": "{!SPACING_XXX_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_XXX_SMALL",
"value": "0.125rem",
"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"
},
"VAR_SPACING_X_SMALL": {
"originalValue": "{!SPACING_X_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_X_SMALL",
"value": "0.5rem",
"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"
},
"VAR_SPACING_XXX_SMALL": {
"originalValue": "{!SPACING_XXX_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_XXX_SMALL",
"value": "0.125rem",
"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"
},
"VAR_SPACING_HORIZONTAL_X_LARGE": {
"originalValue": "{!SPACING_X_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_X_LARGE",
"value": "2rem",
"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"
},
"VAR_SPACING_HORIZONTAL_XX_SMALL": {
"originalValue": "{!SPACING_XX_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_XX_SMALL",
"value": "0.25rem",
"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"
},
"VAR_SPACING_XX_LARGE": {
"originalValue": "{!SPACING_XX_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_XX_LARGE",
"value": "3rem",
"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"
},
"SPACING_MEDIUM": {
"originalValue": "{!SPACING_MEDIUM}",
"access": "global",
"primitive": true,
"name": "SPACING_MEDIUM",
"value": "1rem",
"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"
},
"VAR_SPACING_VERTICAL_XX_LARGE": {
"originalValue": "{!SPACING_XX_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_XX_LARGE",
"value": "3rem",
"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"
},
"VAR_SPACING_VERTICAL_SMALL": {
"originalValue": "{!SPACING_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_SMALL",
"value": "0.75rem",
"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"
},
"VAR_SPACING_SMALL": {
"originalValue": "{!SPACING_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_SMALL",
"value": "0.75rem",
"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"
},
"SPACING_NONE": {
"originalValue": "{!SPACING_NONE}",
"primitive": true,
"name": "SPACING_NONE",
"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"
},
"VAR_SPACING_HORIZONTAL_LARGE": {
"originalValue": "{!SPACING_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_LARGE",
"value": "1.5rem",
"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"
},
"SPACING_X_LARGE": {
"originalValue": "{!SPACING_X_LARGE}",
"access": "global",
"primitive": true,
"name": "SPACING_X_LARGE",
"value": "2rem",
"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"
},
"SPACING_XX_LARGE": {
"originalValue": "{!SPACING_XX_LARGE}",
"access": "global",
"primitive": true,
"name": "SPACING_XX_LARGE",
"value": "3rem",
"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"
},
"VAR_SPACING_HORIZONTAL_XXX_SMALL": {
"originalValue": "{!SPACING_XXX_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_XXX_SMALL",
"value": "0.125rem",
"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"
},
"VAR_SPACING_HORIZONTAL_X_SMALL": {
"originalValue": "{!SPACING_X_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_X_SMALL",
"value": "0.5rem",
"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"
},
"VAR_SPACING_XX_SMALL": {
"originalValue": "{!SPACING_XX_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_XX_SMALL",
"value": "0.25rem",
"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"
},
"VAR_SPACING_HORIZONTAL_MEDIUM": {
"originalValue": "{!SPACING_MEDIUM}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_HORIZONTAL_MEDIUM",
"value": "1rem",
"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"
},
"VAR_SPACING_VERTICAL_XX_SMALL": {
"originalValue": "{!SPACING_XX_SMALL}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_XX_SMALL",
"value": "0.25rem",
"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"
},
"VAR_SPACING_VERTICAL_X_LARGE": {
"originalValue": "{!SPACING_X_LARGE}",
"access": "global",
"release": "2.7.0",
"primitive": true,
"name": "VAR_SPACING_VERTICAL_X_LARGE",
"value": "2rem",
"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"
},
"SPACING_LARGE": {
"originalValue": "{!SPACING_LARGE}",
"access": "global",
"primitive": true,
"name": "SPACING_LARGE",
"value": "1.5rem",
"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"
},
"COLOR_TEXT_ACTION_LABEL": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_ACTION_LABEL",
"value": "#747474",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Action label text color"
},
"COLOR_TEXT_LINK_INVERSE": {
"originalValue": "{!WHITE}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_INVERSE",
"value": "#FFFFFF",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Link color on dark background"
},
"COLOR_TEXT_LINK_INVERSE_ACTIVE": {
"originalValue": "{!WHITE_TRANSPARENT_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_INVERSE_ACTIVE",
"value": "rgba(255, 255, 255, 0.50)",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Link color on dark background - active state"
},
"COLOR_TEXT_ACTION_LABEL_ACTIVE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_ACTION_LABEL_ACTIVE",
"value": "#032d60",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Action label active text color"
},
"COLOR_TEXT_WARNING": {
"originalValue": "{!PALETTE_ORANGE_70}",
"primitive": true,
"name": "COLOR_TEXT_WARNING",
"value": "#fe9339",
"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."
},
"COLOR_TEXT_LINK_FOCUS": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_FOCUS",
"value": "#014486",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Focus link text"
},
"COLOR_TEXT_DESTRUCTIVE_HOVER": {
"originalValue": "{!PALETTE_RED_40}",
"primitive": true,
"name": "COLOR_TEXT_DESTRUCTIVE_HOVER",
"value": "#ba0517",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color for destructive actions - hover state"
},
"COLOR_TEXT_LINK_DISABLED": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_DISABLED",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Disabled link text"
},
"COLOR_TEXT_DEFAULT": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_DEFAULT",
"value": "#032d60",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Body text color"
},
"COLOR_TEXT_DESTRUCTIVE": {
"originalValue": "{!PALETTE_RED_50}",
"primitive": true,
"name": "COLOR_TEXT_DESTRUCTIVE",
"value": "#ea001e",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color for destructive actions"
},
"COLOR_TEXT_LINK_HOVER": {
"originalValue": "{!BRAND_TEXT_LINK_ACTIVE}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_HOVER",
"value": "#014486",
"scope": "global",
"cssProperties": [
"color",
"border*"
],
"type": "color",
"category": "text-color",
"comment": "Hover link text"
},
"COLOR_TEXT_SUCCESS": {
"originalValue": "{!PALETTE_GREEN_50}",
"primitive": true,
"name": "COLOR_TEXT_SUCCESS",
"value": "#2e844a",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color for success text."
},
"COLOR_TEXT_WEAK": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_WEAK",
"value": "#747474",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for text that is purposefully de-emphasized to create visual hierarchy."
},
"COLOR_TEXT_PLACEHOLDER_INVERSE": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_PLACEHOLDER_INVERSE",
"value": "#f3f3f3",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Input placeholder text on dark backgrounds."
},
"COLOR_TEXT_LINK": {
"originalValue": "{!BRAND_ACCESSIBLE}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK",
"value": "#0176d3",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Link text (508)"
},
"COLOR_TEXT_WARNING_ALT": {
"originalValue": "{!PALETTE_YELLOW_40}",
"primitive": true,
"name": "COLOR_TEXT_WARNING_ALT",
"value": "#8c4b02",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for texts that are related to warnings on a light background."
},
"COLOR_TEXT_ICON_DEFAULT": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_ICON_DEFAULT",
"value": "#747474",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Default icon color."
},
"COLOR_TEXT_BRAND": {
"originalValue": "{!PALETTE_BLUE_60}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_BRAND",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Our product brand blue."
},
"COLOR_TEXT_ERROR": {
"originalValue": "{!PALETTE_RED_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_ERROR",
"value": "#ea001e",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Error text for inputs and error misc"
},
"COLOR_TEXT_CUSTOMER": {
"originalValue": "{!PALETTE_ORANGE_70}",
"primitive": true,
"name": "COLOR_TEXT_CUSTOMER",
"value": "#fe9339",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Customer text used in anchor subtitle"
},
"COLOR_TEXT_BRAND_PRIMARY": {
"originalValue": "{!WHITE}",
"primitive": true,
"name": "COLOR_TEXT_BRAND_PRIMARY",
"value": "#FFFFFF",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color found on any primary brand color"
},
"COLOR_TEXT_LINK_ACTIVE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_ACTIVE",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Active link text"
},
"COLOR_TEXT_REQUIRED": {
"originalValue": "{!PALETTE_RED_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_REQUIRED",
"value": "#ea001e",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color of required field marker."
},
"COLOR_TEXT_LINK_INVERSE_DISABLED": {
"originalValue": "{!WHITE_TRANSPARENT_15}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_INVERSE_DISABLED",
"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"
},
"COLOR_TEXT_INVERSE": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_INVERSE",
"value": "#ffffff",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Inverse text color for dark backgrounds"
},
"COLOR_TEXT_PLACEHOLDER": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_PLACEHOLDER",
"value": "#747474",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Input placeholder text."
},
"COLOR_TEXT_INVERSE_WEAK": {
"originalValue": "{!PALETTE_NEUTRAL_70}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_INVERSE_WEAK",
"value": "#aeaeae",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Weak inverse text color for dark backgrounds"
},
"COLOR_TEXT_LINK_INVERSE_HOVER": {
"originalValue": "{!WHITE_TRANSPARENT_75}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LINK_INVERSE_HOVER",
"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"
},
"COLOR_TEXT_SUCCESS_INVERSE": {
"originalValue": "{!PALETTE_GREEN_70}",
"primitive": true,
"name": "COLOR_TEXT_SUCCESS_INVERSE",
"value": "#45c65a",
"scope": "global",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color for success text on dark backgrounds."
},
"COLOR_TEXT_LABEL": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"primitive": true,
"name": "COLOR_TEXT_LABEL",
"value": "#747474",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color for field labels."
},
"SQUARE_TAPPABLE": {
"originalValue": "2.75rem",
"access": "global",
"release": "1.0.0",
"primitive": true,
"name": "SQUARE_TAPPABLE",
"value": "2.75rem",
"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"
},
"SQUARE_TAPPABLE_SMALL": {
"originalValue": "2rem",
"release": "2.10.0",
"primitive": true,
"name": "SQUARE_TAPPABLE_SMALL",
"value": "2rem",
"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"
},
"SQUARE_TAPPABLE_X_SMALL": {
"originalValue": "1.5rem",
"release": "2.10.0",
"primitive": true,
"name": "SQUARE_TAPPABLE_X_SMALL",
"value": "1.5rem",
"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"
},
"SQUARE_TAPPABLE_XX_SMALL": {
"originalValue": "1.25rem",
"release": "2.10.0",
"primitive": true,
"name": "SQUARE_TAPPABLE_XX_SMALL",
"value": "1.25rem",
"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"
},
"HEIGHT_TAPPABLE": {
"originalValue": "2.75rem",
"release": "2.10.0",
"primitive": true,
"name": "HEIGHT_TAPPABLE",
"value": "2.75rem",
"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"
},
"HEIGHT_TAPPABLE_SMALL": {
"originalValue": "2rem",
"release": "2.10.0",
"primitive": true,
"name": "HEIGHT_TAPPABLE_SMALL",
"value": "2rem",
"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"
},
"Z_INDEX_DROPDOWN": {
"originalValue": "7000",
"primitive": true,
"name": "Z_INDEX_DROPDOWN",
"value": "7000",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Dropdown"
},
"Z_INDEX_DOCKED": {
"originalValue": "4",
"primitive": true,
"name": "Z_INDEX_DOCKED",
"value": "4",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Docked element"
},
"Z_INDEX_REMINDER": {
"originalValue": "8500",
"primitive": true,
"name": "Z_INDEX_REMINDER",
"value": "8500",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Notifications under modals"
},
"Z_INDEX_SPINNER": {
"originalValue": "9050",
"primitive": true,
"name": "Z_INDEX_SPINNER",
"value": "9050",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Spinner"
},
"Z_INDEX_DEFAULT": {
"originalValue": "1",
"primitive": true,
"name": "Z_INDEX_DEFAULT",
"value": "1",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Default"
},
"Z_INDEX_DEEPDIVE": {
"originalValue": "-99999",
"primitive": true,
"name": "Z_INDEX_DEEPDIVE",
"value": "-99999",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Deep dive"
},
"Z_INDEX_TOAST": {
"originalValue": "10000",
"primitive": true,
"name": "Z_INDEX_TOAST",
"value": "10000",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Toasts"
},
"Z_INDEX_DIALOG": {
"originalValue": "6000",
"primitive": true,
"name": "Z_INDEX_DIALOG",
"value": "6000",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Dialog"
},
"Z_INDEX_POPUP": {
"originalValue": "5000",
"primitive": true,
"name": "Z_INDEX_POPUP",
"value": "5000",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Popup"
},
"Z_INDEX_MODAL": {
"originalValue": "9000",
"primitive": true,
"name": "Z_INDEX_MODAL",
"value": "9000",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Modal"
},
"Z_INDEX_STICKY": {
"originalValue": "100",
"primitive": true,
"name": "Z_INDEX_STICKY",
"value": "100",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Stickied element"
},
"Z_INDEX_OVERLAY": {
"originalValue": "8000",
"primitive": true,
"name": "Z_INDEX_OVERLAY",
"value": "8000",
"scope": "global",
"cssProperties": [
"z-index"
],
"type": "z-index",
"category": "z-index",
"comment": "Overlay"
},
"COLOR_BACKGROUND_MODAL_BRAND": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"name": "COLOR_BACKGROUND_MODAL_BRAND",
"value": "#014486",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable modal header"
},
"COLOR_BACKGROUND_NOTIFICATION": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#ffffff",
"comment": "Background color for notification list item.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_NOTIFICATION"
},
"COLOR_BACKGROUND_NOTIFICATION_BADGE_ACTIVE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"name": "COLOR_BACKGROUND_NOTIFICATION_BADGE_ACTIVE",
"value": "#032d60",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Notifications badge background color."
},
"COLOR_BACKGROUND_NOTIFICATION_BADGE_HOVER": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"name": "COLOR_BACKGROUND_NOTIFICATION_BADGE_HOVER",
"value": "#014486",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Notifications badge background color."
},
"COLOR_CONTRAST_PRIMARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_CONTRAST_PRIMARY"
},
"COLOR_FOREGROUND_PRIMARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#ffffff",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_FOREGROUND_PRIMARY"
},
"COLOR_BACKGROUND_TEMP_MODAL_TINT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "rgba(126, 140, 153, 0.80)",
"comment": "The color of the mask overlay that appears when you enter a modal state.",
"originalValue": "{!REGENT_GREY_TRANSPARENT_80}",
"name": "COLOR_BACKGROUND_TEMP_MODAL_TINT"
},
"COLOR_BACKGROUND_INDICATOR_DOT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#032d60",
"comment": "Color of the indicator dot.",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_BACKGROUND_INDICATOR_DOT"
},
"COLOR_BACKGROUND_ALT_2": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#f3f3f3",
"comment": "Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_ALT_2"
},
"COLOR_BACKGROUND_UTILITY_BAR_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#f3f3f3",
"comment": "Hover color for utility bar item.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_UTILITY_BAR_HOVER"
},
"FILL_BRAND_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"fill"
],
"deprecated": true,
"value": "#014486",
"comment": "Brand hover fill color",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "FILL_BRAND_HOVER"
},
"FILL_BRAND": {
"type": "color",
"category": "background-color",
"cssProperties": [
"fill"
],
"deprecated": true,
"value": "#0176d3",
"comment": "Brand fill color",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "FILL_BRAND"
},
"COLOR_BACKGROUND_CHROME_DESKTOP": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BACKGROUND_CHROME_DESKTOP",
"value": "#ffffff",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for default desktop chrome (ex. global header)"
},
"COLOR_BACKGROUND_MODAL_BUTTON_ACTIVE": {
"originalValue": "{!BLACK_TRANSPARENT_16}",
"access": "global",
"name": "COLOR_BACKGROUND_MODAL_BUTTON_ACTIVE",
"value": "rgba(0, 0, 0, 0.16)",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Active button backgrounds on modal headers"
},
"COLOR_BACKGROUND_INPUT_CHECKBOX_SELECTED": {
"originalValue": "{!PALETTE_BLUE_60}",
"access": "global",
"name": "COLOR_BACKGROUND_INPUT_CHECKBOX_SELECTED",
"value": "#1b96ff",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Selected checkboxes"
},
"COLOR_BACKGROUND_INPUT_CHECKBOX": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BACKGROUND_INPUT_CHECKBOX",
"value": "#ffffff",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default checkboxes"
},
"COLOR_BACKGROUND_PRIMARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#ffffff",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PRIMARY"
},
"COLOR_BACKGROUND_TEMP_MODAL_TINT_ALT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "rgba(255, 255, 255, 0.75)",
"comment": "The color of the mask overlay that appears when you enter a modal state.",
"originalValue": "{!WHITE_TRANSPARENT_75}",
"name": "COLOR_BACKGROUND_TEMP_MODAL_TINT_ALT"
},
"COLOR_BACKGROUND_BRAND_PRIMARY_FOCUS": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#014486",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BACKGROUND_BRAND_PRIMARY_FOCUS"
},
"COLOR_BACKGROUND_BRAND_PRIMARY_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#032d60",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_BACKGROUND_BRAND_PRIMARY_ACTIVE"
},
"COLOR_BACKGROUND_BRAND_PRIMARY_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#014486",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BACKGROUND_BRAND_PRIMARY_HOVER"
},
"COLOR_BACKGROUND_CHROME_MOBILE": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"name": "COLOR_BACKGROUND_CHROME_MOBILE",
"value": "#0176d3",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for default mobile chrome (ex. global header)"
},
"COLOR_BACKGROUND_INPUT_SEARCH": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "rgba(0, 0, 0, 0.16)",
"comment": "Background color for search input fields.",
"originalValue": "{!BLACK_TRANSPARENT_16}",
"name": "COLOR_BACKGROUND_INPUT_SEARCH"
},
"COLOR_CONTRAST_SECONDARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#ffffff",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_CONTRAST_SECONDARY"
},
"COLOR_BACKGROUND_BROWSER": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"name": "COLOR_BACKGROUND_BROWSER",
"value": "#747474",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Secondary top bar background color (child browser, file preview, etc.)"
},
"COLOR_BACKGROUND_BRAND_PRIMARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_BACKGROUND_BRAND_PRIMARY"
},
"COLOR_BACKGROUND_TEMP_MODAL": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "rgba(126, 140, 153, 0.80)",
"comment": "Used as the default background color for temporary dialog elements, such as the progress spinner background.",
"originalValue": "{!REGENT_GREY_TRANSPARENT_80}",
"name": "COLOR_BACKGROUND_TEMP_MODAL"
},
"COLOR_BACKGROUND_SHADE": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_SHADE",
"value": "#f3f3f3",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"specificity": "builders",
"category": "background-color",
"comment": "Used as gray background when more contrast is desired."
},
"COLOR_BACKGROUND_MODAL": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BACKGROUND_MODAL",
"value": "#ffffff",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Standard modal header"
},
"COLOR_BACKGROUND_TOGGLE_ACTIVE_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#014486",
"comment": "Hovered active toggle background color.",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BACKGROUND_TOGGLE_ACTIVE_HOVER"
},
"COLOR_BACKGROUND_PAYLOAD": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_PAYLOAD",
"value": "#f3f3f3",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for payloads in the feed."
},
"COLOR_BACKGROUND_MODAL_BUTTON": {
"originalValue": "{!BLACK_TRANSPARENT_07}",
"access": "global",
"name": "COLOR_BACKGROUND_MODAL_BUTTON",
"value": "rgba(0, 0, 0, 0.07)",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Button backgrounds on modal headers"
},
"FILL_BRAND_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"fill"
],
"deprecated": true,
"value": "#032d60",
"comment": "Brand active fill color",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "FILL_BRAND_ACTIVE"
},
"COLOR_BACKGROUND_UTILITY_BAR_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#1b96ff",
"comment": "Active color for utility bar item.",
"originalValue": "{!PALETTE_BLUE_60}",
"name": "COLOR_BACKGROUND_UTILITY_BAR_ACTIVE"
},
"COLOR_BACKGROUND_ORG_SWITCHER_ARROW": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#001639",
"comment": "Stage left org switcher dropdown arrow background color.",
"originalValue": "{!PALETTE_BLUE_10}",
"name": "COLOR_BACKGROUND_ORG_SWITCHER_ARROW"
},
"COLOR_BACKGROUND_TOGGLE_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#014486",
"comment": "Active toggle background color.",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BACKGROUND_TOGGLE_ACTIVE"
},
"COLOR_BACKGROUND_ERROR_ALT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#fe8f7d",
"comment": "Alternative color for UI elements related to errors.",
"originalValue": "{!PALETTE_RED_70}",
"name": "COLOR_BACKGROUND_ERROR_ALT"
},
"PAGE_COLOR_BACKGROUND_PRIMARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#ffffff",
"comment": "Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "PAGE_COLOR_BACKGROUND_PRIMARY"
},
"COLOR_BACKGROUND_SHADE_DARK": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BACKGROUND_SHADE_DARK",
"value": "#c9c9c9",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"specificity": "builders",
"category": "background-color",
"comment": "Used as gray background in conjunction with Shade when more contrast is desired."
},
"COLOR_BACKGROUND_NOTIFICATION_BADGE_FOCUS": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"name": "COLOR_BACKGROUND_NOTIFICATION_BADGE_FOCUS",
"value": "#014486",
"deprecated": true,
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Notifications badge background color."
},
"COLOR_BACKGROUND_ACTIONBAR_ICON_UTILITY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#747474",
"comment": "Background for utility icons that live in the action bar on mobile.",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_BACKGROUND_ACTIONBAR_ICON_UTILITY"
},
"COLOR_BACKGROUND_SECONDARY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_SECONDARY"
},
"COLOR_BORDER_INPUT_CHECKBOX_SELECTED_CHECKMARK": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BORDER_INPUT_CHECKBOX_SELECTED_CHECKMARK",
"value": "#ffffff",
"deprecated": true,
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"category": "border-color",
"comment": "The borders to create the checkmark"
},
"COLOR_STROKE_DISABLED": {
"type": "color",
"category": "border-color",
"cssProperties": [
"stroke"
],
"deprecated": true,
"value": "#f3f3f3",
"comment": "Disabled stroke color.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_STROKE_DISABLED"
},
"COLOR_STROKE_BRAND_ACTIVE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"stroke"
],
"deprecated": true,
"value": "#032d60",
"comment": "Active stroke color for our product brand blue.",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_STROKE_BRAND_ACTIVE"
},
"COLOR_BORDER_PRIMARY": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#c9c9c9",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BORDER_PRIMARY"
},
"COLOR_BORDER_BRAND_PRIMARY_FOCUS": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_BORDER_BRAND_PRIMARY_FOCUS"
},
"COLOR_BORDER_BRAND_PRIMARY_HOVER": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_BORDER_BRAND_PRIMARY_HOVER"
},
"COLOR_BORDER_BUTTON_BRAND": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"name": "COLOR_BORDER_BUTTON_BRAND",
"value": "#0176d3",
"deprecated": true,
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"category": "border-color",
"comment": "Border color for brandable primary button"
},
"COLOR_BORDER_BRAND_PRIMARY_ACTIVE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#032d60",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_BORDER_BRAND_PRIMARY_ACTIVE"
},
"COLOR_BORDER_BRAND_PRIMARY": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#1b96ff",
"originalValue": "{!PALETTE_BLUE_60}",
"name": "COLOR_BORDER_BRAND_PRIMARY"
},
"COLOR_BORDER_BUTTON_FOCUS_INVERSE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BORDER_BUTTON_FOCUS_INVERSE"
},
"COLOR_BORDER_CANVAS_ELEMENT_SELECTION_HOVER": {
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BORDER_CANVAS_ELEMENT_SELECTION_HOVER",
"value": "#014486",
"deprecated": true,
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"specificity": "builders",
"category": "border-color",
"comment": "Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders."
},
"COLOR_BORDER_CANVAS_ELEMENT_SELECTION": {
"originalValue": "{!PALETTE_CLOUD_BLUE_70}",
"name": "COLOR_BORDER_CANVAS_ELEMENT_SELECTION",
"value": "#1ab9ff",
"deprecated": true,
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"specificity": "builders",
"category": "border-color",
"comment": "Used to delineate the boundary of a selected canvas element. Specific to builders."
},
"COLOR_STROKE_BRAND_HOVER": {
"type": "color",
"category": "border-color",
"cssProperties": [
"stroke"
],
"deprecated": true,
"value": "#0176d3",
"comment": "Hover stroke color for our product brand blue.",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_STROKE_BRAND_HOVER"
},
"COLOR_STROKE_HEADER_BUTTON": {
"type": "color",
"category": "border-color",
"cssProperties": [
"stroke"
],
"deprecated": true,
"value": "#aeaeae",
"comment": "Stroke color for our global header buttons.",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_STROKE_HEADER_BUTTON"
},
"COLOR_BORDER_LINK_FOCUS_INVERSE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"deprecated": true,
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BORDER_LINK_FOCUS_INVERSE"
},
"COLOR_STROKE_BRAND": {
"type": "color",
"category": "border-color",
"cssProperties": [
"stroke"
],
"deprecated": true,
"value": "#0176d3",
"comment": "Our product brand blue.",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_STROKE_BRAND"
},
"COLOR_BORDER_HINT": {
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_BORDER_HINT",
"value": "#032d60",
"deprecated": true,
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"specificity": "builders",
"category": "border-color",
"comment": "Used to delineate the boundary of a specific region. Specific to builders."
},
"ELEVATION_32": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "32",
"comment": "Deprecated",
"originalValue": "{!OFFSET_XX_LARGE}",
"name": "ELEVATION_32"
},
"ELEVATION_SHADOW_16": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 16px 16px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_LARGE}px {!OFFSET_X_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_SHADOW_16"
},
"ELEVATION_INVERSE_SHADOW_0": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "none",
"comment": "Deprecated",
"originalValue": "none",
"name": "ELEVATION_INVERSE_SHADOW_0"
},
"SHADOW_LINK_FOCUS_INVERSE": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 0 3px #f3f3f3",
"comment": "Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.",
"originalValue": "{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_NEUTRAL_95}",
"name": "SHADOW_LINK_FOCUS_INVERSE"
},
"ELEVATION_INVERSE_SHADOW_2": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated: Use SHADOW_DOCKED",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_INVERSE_SHADOW_2"
},
"ELEVATION_INVERSE_SHADOW_4": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -4px 4px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_MEDIUM}px {!OFFSET_MEDIUM}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_INVERSE_SHADOW_4"
},
"ELEVATION_16": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "16",
"comment": "Deprecated",
"originalValue": "{!OFFSET_X_LARGE}",
"name": "ELEVATION_16"
},
"ELEVATION_SHADOW_3_BELOW": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 3px 3px 0 rgba(0, 0, 0, 0.16) inset",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} {!OFFSET_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16} inset",
"name": "ELEVATION_SHADOW_3_BELOW"
},
"SHADOW_SOFT_PRIMARY_HOVER": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "none",
"originalValue": "none",
"name": "SHADOW_SOFT_PRIMARY_HOVER"
},
"ELEVATION_INVERSE_SHADOW_8": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -8px 8px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_LARGE}px {!OFFSET_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_INVERSE_SHADOW_8"
},
"SHADOW_SOFT_PRIMARY": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "none",
"comment": "Soft dropshadow found on general UI elements such as containers",
"originalValue": "none",
"name": "SHADOW_SOFT_PRIMARY"
},
"ELEVATION_INVERSE_SHADOW_32": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -32px 32px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_XX_LARGE}px {!OFFSET_XX_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_INVERSE_SHADOW_32"
},
"SHADOW_HARD_PRIMARY": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "none",
"comment": "Hard dropshadow found on general UI elements such as containers",
"originalValue": "none",
"name": "SHADOW_HARD_PRIMARY"
},
"SHADOW_ACTION_OVERFLOW_FOOTER": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -2px 4px #f3f3f3",
"comment": "Shadow above overflow menu close bar.",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!PALETTE_NEUTRAL_95}",
"name": "SHADOW_ACTION_OVERFLOW_FOOTER"
},
"ELEVATION_0": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE}",
"name": "ELEVATION_0"
},
"ELEVATION_3_INSET": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "-3",
"comment": "Deprecated",
"originalValue": "-{!OFFSET_SMALL}",
"name": "ELEVATION_3_INSET"
},
"ELEVATION_2": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "2",
"comment": "Deprecated",
"originalValue": "{!OFFSET_X_SMALL}",
"name": "ELEVATION_2"
},
"SHADOW_OVERLAY": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -2px 4px rgba(0, 0, 0, 0.07)",
"comment": "Shadow for overlays.",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}",
"name": "SHADOW_OVERLAY"
},
"SHADOW_BUTTON": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 1px 1px 0 rgba(0, 0, 0, 0.05)",
"comment": "Shadow for buttons.",
"originalValue": "{!OFFSET_NONE} 1px 1px {!OFFSET_NONE} {!BLACK_TRANSPARENT_05}",
"name": "SHADOW_BUTTON"
},
"ELEVATION_4": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "4",
"comment": "Deprecated",
"originalValue": "{!OFFSET_MEDIUM}",
"name": "ELEVATION_4"
},
"ELEVATION_SHADOW_0": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "none",
"comment": "Deprecated",
"originalValue": "none",
"name": "ELEVATION_SHADOW_0"
},
"ELEVATION_INVERSE_SHADOW_16": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -16px 16px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_X_LARGE}px {!OFFSET_X_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_INVERSE_SHADOW_16"
},
"ELEVATION_SHADOW_2": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 2px 2px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_SHADOW_2"
},
"ELEVATION_8": {
"type": "number",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "8",
"comment": "Deprecated",
"originalValue": "{!OFFSET_LARGE}",
"name": "ELEVATION_8"
},
"ELEVATION_SHADOW_4": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 4px 4px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} {!OFFSET_MEDIUM}px {!OFFSET_MEDIUM}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_SHADOW_4"
},
"SHADOW_FOCUS_INSET": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 0 2px 2px #1b96ff inset",
"comment": "Inset shadow for editable grid",
"originalValue": "{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!PALETTE_BLUE_60} inset",
"name": "SHADOW_FOCUS_INSET"
},
"ELEVATION_INVERSE_SHADOW_3_BELOW": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16} inset",
"name": "ELEVATION_INVERSE_SHADOW_3_BELOW"
},
"SHADOW_SOFT_PRIMARY_ACTIVE": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "none",
"originalValue": "none",
"name": "SHADOW_SOFT_PRIMARY_ACTIVE"
},
"ELEVATION_SHADOW_8": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 8px 8px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} {!OFFSET_LARGE}px {!OFFSET_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_SHADOW_8"
},
"SHADOW_IMAGE": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 1px 1px rgba(0, 0, 0, 0.16)",
"comment": "Shadow on images.",
"originalValue": "{!OFFSET_NONE} 1px 1px {!BLACK_TRANSPARENT_16}",
"name": "SHADOW_IMAGE"
},
"ELEVATION_SHADOW_32": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"deprecated": true,
"value": "0 32px 32px 0 rgba(0, 0, 0, 0.16)",
"comment": "Deprecated",
"originalValue": "{!OFFSET_NONE} {!OFFSET_XX_LARGE}px {!OFFSET_XX_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "ELEVATION_SHADOW_32"
},
"FONT_SIZE_HEADING_MEDIUM": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.125rem",
"comment": "Medium headings.",
"originalValue": "{!FONT_SIZE_6}",
"name": "FONT_SIZE_HEADING_MEDIUM"
},
"FONT_SIZE_MEDIUM": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1rem",
"originalValue": "1rem",
"name": "FONT_SIZE_MEDIUM"
},
"FONT_SIZE_TEXT_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.8125rem",
"comment": "Small body text.",
"originalValue": "{!FONT_SIZE_3}",
"name": "FONT_SIZE_TEXT_SMALL"
},
"FONT_SIZE_MEDIUM_A": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.125rem",
"originalValue": "1.125rem",
"name": "FONT_SIZE_MEDIUM_A"
},
"FONT_SIZE_X_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.5rem",
"originalValue": "1.5rem",
"name": "FONT_SIZE_X_LARGE"
},
"FONT_SIZE_X_LARGE_A": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.57rem",
"originalValue": "1.57rem",
"name": "FONT_SIZE_X_LARGE_A"
},
"FONT_SIZE_HEADING_X_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.75rem",
"comment": "Extra large headings.",
"originalValue": "{!FONT_SIZE_9}",
"name": "FONT_SIZE_HEADING_X_LARGE"
},
"FONT_SIZE_XX_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "2rem",
"originalValue": "2rem",
"name": "FONT_SIZE_XX_LARGE"
},
"FONT_SIZE_TEXT_XX_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.625rem",
"comment": "Extra extra small text.",
"originalValue": "{!FONT_SIZE_1}",
"name": "FONT_SIZE_TEXT_XX_SMALL"
},
"FONT_SIZE_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.25rem",
"originalValue": "1.25rem",
"name": "FONT_SIZE_LARGE"
},
"FONT_SIZE_HEADING_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.5rem",
"comment": "Large headings.",
"originalValue": "{!FONT_SIZE_8}",
"name": "FONT_SIZE_HEADING_LARGE"
},
"FONT_SIZE_TEXT_X_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.25rem",
"comment": "Extra large body text.",
"originalValue": "{!FONT_SIZE_7}",
"name": "FONT_SIZE_TEXT_X_LARGE"
},
"FONT_SIZE_X_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.625rem",
"originalValue": "0.625rem",
"name": "FONT_SIZE_X_SMALL"
},
"FONT_SIZE_HEADING_XX_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.625rem",
"comment": "Extra Extra small headings.",
"originalValue": "{!FONT_SIZE_1}",
"name": "FONT_SIZE_HEADING_XX_SMALL"
},
"FONT_SIZE_HEADING_X_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.75rem",
"comment": "Extra small headings.",
"originalValue": "{!FONT_SIZE_2}",
"name": "FONT_SIZE_HEADING_X_SMALL"
},
"FONT_SIZE_TEXT_LARGE": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1.125rem",
"comment": "Large body text.",
"originalValue": "{!FONT_SIZE_6}",
"name": "FONT_SIZE_TEXT_LARGE"
},
"FONT_SIZE_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.875rem",
"originalValue": "0.875rem",
"name": "FONT_SIZE_SMALL"
},
"FONT_SIZE_TEXT_MEDIUM": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "1rem",
"comment": "Medium body text.",
"originalValue": "{!FONT_SIZE_5}",
"name": "FONT_SIZE_TEXT_MEDIUM"
},
"FONT_SIZE_TEXT_X_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.75rem",
"comment": "Extra small body text.",
"originalValue": "{!FONT_SIZE_2}",
"name": "FONT_SIZE_TEXT_X_SMALL"
},
"FONT_SIZE_HEADING_SMALL": {
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"deprecated": true,
"value": "0.875rem",
"comment": "Small headings.",
"originalValue": "{!FONT_SIZE_4}",
"name": "FONT_SIZE_HEADING_SMALL"
},
"FONT_FAMILY_TEXT": {
"category": "font",
"type": "font",
"cssProperties": [
"font",
"font-family"
],
"deprecated": true,
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"comment": "Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings.",
"originalValue": "{!SANS_SERIF}",
"name": "FONT_FAMILY_TEXT"
},
"SQUARE_ICON_MEDIUM": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"deprecated": true,
"value": "2.375rem",
"comment": "Use squareIconMediumBoundary",
"originalValue": "2.375rem",
"name": "SQUARE_ICON_MEDIUM"
},
"SQUARE_ICON_SMALL": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"deprecated": true,
"value": "1rem",
"comment": "Small tap target size",
"originalValue": "1rem",
"name": "SQUARE_ICON_SMALL"
},
"SQUARE_ICON_XX_SMALL_CONTENT": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"deprecated": true,
"value": ".875rem",
"comment": "Very small icons to replace force font with temporary override.",
"originalValue": ".875rem",
"name": "SQUARE_ICON_XX_SMALL_CONTENT"
},
"SQUARE_ICON_LARGE": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"deprecated": true,
"value": "3.125rem",
"comment": "Large tap target size.",
"originalValue": "3.125rem",
"name": "SQUARE_ICON_LARGE"
},
"COMPONENT_SPACING_MARGIN": {
"category": "spacing",
"type": "size",
"cssProperties": [
"margin*",
"padding*"
],
"deprecated": true,
"value": "0",
"originalValue": "0",
"name": "COMPONENT_SPACING_MARGIN"
},
"COMPONENT_SPACING_PADDING": {
"category": "spacing",
"type": "size",
"cssProperties": [
"margin*",
"padding*"
],
"deprecated": true,
"value": "1rem",
"originalValue": "{!SPACING_MEDIUM}",
"name": "COMPONENT_SPACING_PADDING"
},
"COLOR_TEXT_ICON_INVERSE_HINT_HOVER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "rgba(255, 255, 255, 0.75)",
"comment": "Hovered icon color for a button that has a parent element that has a hover state",
"originalValue": "{!WHITE_TRANSPARENT_75}",
"name": "COLOR_TEXT_ICON_INVERSE_HINT_HOVER"
},
"COLOR_TEXT_TAB_LABEL_SELECTED": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"name": "COLOR_TEXT_TAB_LABEL_SELECTED",
"value": "#0176d3",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for text on a selected tab in a tab group."
},
"COLOR_TEXT_ICON_INVERSE_HINT": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "rgba(255, 255, 255, 0.50)",
"comment": "Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over.",
"originalValue": "{!WHITE_TRANSPARENT_50}",
"name": "COLOR_TEXT_ICON_INVERSE_HINT"
},
"COLOR_TEXT_TAB_LABEL_DISABLED": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_TEXT_TAB_LABEL_DISABLED",
"value": "#f3f3f3",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for disabled text in a tab group."
},
"COLOR_TEXT_TERTIARY": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#747474",
"comment": "Tertiary body text color",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_TEXT_TERTIARY"
},
"COLOR_TEXT_INVERSE_ACTIVE": {
"originalValue": "{!PALETTE_CLOUD_BLUE_70}",
"access": "global",
"name": "COLOR_TEXT_INVERSE_ACTIVE",
"value": "#1ab9ff",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Active state on a standalone link on a dark background."
},
"COLOR_TEXT_PRIMARY": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#032d60",
"comment": "Primary body text color",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_TEXT_PRIMARY"
},
"COLOR_TEXT_LINK_PRIMARY_FOCUS": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_LINK_PRIMARY_FOCUS"
},
"COLOR_TEXT_TAB_LABEL_FOCUS": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"name": "COLOR_TEXT_TAB_LABEL_FOCUS",
"value": "#014486",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for text in focus state in a tab group."
},
"COLOR_TEXT_ICON_DEFAULT_HINT_BORDERLESS": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#f3f3f3",
"comment": "Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_TEXT_ICON_DEFAULT_HINT_BORDERLESS"
},
"COLOR_TEXT_PILL": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"name": "COLOR_TEXT_PILL",
"value": "#0176d3",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text color for pills."
},
"COLOR_TEXT_LINK_PRIMARY_HOVER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_LINK_PRIMARY_HOVER"
},
"COLOR_TEXT_TAB_LABEL_ACTIVE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"name": "COLOR_TEXT_TAB_LABEL_ACTIVE",
"value": "#032d60",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for text in active state in a tab group."
},
"COLOR_TEXT_TAB_LABEL_HOVER": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"name": "COLOR_TEXT_TAB_LABEL_HOVER",
"value": "#014486",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for text in hover state in a tab group."
},
"COLOR_TEXT_TOAST": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_TEXT_TOAST",
"value": "#f3f3f3",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for text on toast messages."
},
"COLOR_TEXT_TOGGLE_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#c9c9c9",
"comment": "Color for disabled toggles",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_TEXT_TOGGLE_DISABLED"
},
"COLOR_TEXT_BROWSER": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_TEXT_BROWSER",
"value": "#ffffff",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Top bar icon color"
},
"COLOR_TEXT_LINK_PRIMARY_ACTIVE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#032d60",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_TEXT_LINK_PRIMARY_ACTIVE"
},
"COLOR_TEXT_LINK_PRIMARY": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_LINK_PRIMARY"
},
"COLOR_TEXT_BROWSER_ACTIVE": {
"originalValue": "{!BLACK_TRANSPARENT_40}",
"access": "global",
"name": "COLOR_TEXT_BROWSER_ACTIVE",
"value": "rgba(0, 0, 0, 0.40)",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Top bar active icon color"
},
"COLOR_TEXT_ICON_BRAND": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"name": "COLOR_TEXT_ICON_BRAND",
"value": "#0176d3",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Color for non-interactive icons that represent a selected item in a list"
},
"COLOR_TEXT_INVERSE_HOVER": {
"originalValue": "{!PALETTE_NEUTRAL_70}",
"access": "global",
"name": "COLOR_TEXT_INVERSE_HOVER",
"value": "#aeaeae",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Hover state on a standalone link on a dark background."
},
"COLOR_TEXT_MODAL": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_TEXT_MODAL",
"value": "#ffffff",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Modal header title"
},
"COLOR_TEXT_MODAL_BUTTON": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"access": "global",
"name": "COLOR_TEXT_MODAL_BUTTON",
"value": "#747474",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Modal header button text color"
},
"COLOR_TEXT_ICON_UTILITY": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#aeaeae",
"comment": "Color for interactive utility icons",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_TEXT_ICON_UTILITY"
},
"COLOR_TEXT_SECONDARY": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"deprecated": true,
"value": "#747474",
"comment": "Secondary body text color",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_TEXT_SECONDARY"
},
"COLOR_TEXT_STAGE_LEFT": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_TEXT_STAGE_LEFT",
"value": "#f3f3f3",
"deprecated": true,
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Text in stage left navigation."
},
"TEXT_TRANSFORM": {
"type": "text-transform",
"category": "text-transform",
"cssProperties": [
"text-transform"
],
"deprecated": true,
"value": "none",
"comment": "Default value for text-transform",
"originalValue": "none",
"name": "TEXT_TRANSFORM"
},
"COLOR_BACKGROUND_NOTIFICATION_NEW": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Background color for a new notification list item.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_NOTIFICATION_NEW"
},
"FILL_HEADER_BUTTON_FOCUS": {
"type": "color",
"category": "background-color",
"cssProperties": [
"fill"
],
"value": "#0176d3",
"comment": "Focused header button icon color",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "FILL_HEADER_BUTTON_FOCUS"
},
"COLOR_BACKGROUND_REMINDER_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Background color for reminder notification on hover",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_REMINDER_HOVER"
},
"COLOR_BACKGROUND_NOTIFICATION_BADGE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ea001e",
"comment": "Notifications badge background color.",
"access": "global",
"originalValue": "{!PALETTE_RED_50}",
"name": "COLOR_BACKGROUND_NOTIFICATION_BADGE"
},
"FILL_HEADER_BUTTON_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"fill"
],
"value": "#014486",
"comment": "Hovered header button icon color",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "FILL_HEADER_BUTTON_HOVER"
},
"COLOR_BACKGROUND_INPUT_DISABLED": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Disabled input",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_INPUT_DISABLED"
},
"COLOR_BACKGROUND_TOGGLE_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#939393",
"comment": "Hovered toggle background color.",
"originalValue": "{!PALETTE_NEUTRAL_60}",
"name": "COLOR_BACKGROUND_TOGGLE_HOVER"
},
"COLOR_BACKGROUND_REMINDER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Background color for reminder notification",
"release": "2.5.0",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_REMINDER"
},
"COLOR_BACKGROUND_BUTTON_SUCCESS_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#2e844a",
"comment": "Hovered background color for success buttons",
"originalValue": "{!PALETTE_GREEN_50}",
"name": "COLOR_BACKGROUND_BUTTON_SUCCESS_HOVER"
},
"FILL_HEADER_BUTTON": {
"type": "color",
"category": "background-color",
"cssProperties": [
"fill"
],
"value": "#aeaeae",
"comment": "Header button icon color",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "FILL_HEADER_BUTTON"
},
"COLOR_BACKGROUND_TOGGLE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#aeaeae",
"comment": "Toggle background color.",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_BACKGROUND_TOGGLE"
},
"COLOR_BACKGROUND_BUTTON_SUCCESS": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#45c65a",
"comment": "Background color for success buttons",
"originalValue": "{!PALETTE_GREEN_70}",
"name": "COLOR_BACKGROUND_BUTTON_SUCCESS"
},
"COLOR_BACKGROUND_INPUT_CHECKBOX_DISABLED": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Disabled checkboxes",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BACKGROUND_INPUT_CHECKBOX_DISABLED"
},
"COLOR_BACKGROUND_PILL": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Background color for pills.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PILL"
},
"COLOR_BACKGROUND_SPINNER_DOT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#aeaeae",
"comment": "Color of the spinner dot.",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_BACKGROUND_SPINNER_DOT"
},
"COLOR_BACKGROUND_BACKDROP_TINT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "The color of the mask overlay that provides user feedback on interaction.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_BACKDROP_TINT"
},
"COLOR_BACKGROUND_INPUT_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Selected input field (when user has clicked or tabbed into field)",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_INPUT_ACTIVE"
},
"COLOR_BACKGROUND_SCROLLBAR": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "The background color of an internal scrollbar.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_SCROLLBAR"
},
"COLOR_BACKGROUND_TOGGLE_DISABLED": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#aeaeae",
"comment": "Disabled toggle background color.",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_BACKGROUND_TOGGLE_DISABLED"
},
"COLOR_BACKGROUND_TOAST": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#747474",
"comment": "Background color for toast messaging.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_BACKGROUND_TOAST"
},
"COLOR_BACKGROUND_POST": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Background color of comment posts in the feed.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_POST"
},
"COLOR_BACKGROUND_INPUT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Default input field",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_INPUT"
},
"COLOR_BACKGROUND_TOAST_SUCCESS": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#2e844a",
"comment": "Background color for success toast messaging.",
"access": "global",
"originalValue": "{!PALETTE_GREEN_50}",
"name": "COLOR_BACKGROUND_TOAST_SUCCESS"
},
"COLOR_BACKGROUND_IMAGE_OVERLAY": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "rgba(0, 0, 0, 0.40)",
"comment": "Color of mask overlay that sits on top of an image when text is present.",
"originalValue": "{!BLACK_TRANSPARENT_40}",
"name": "COLOR_BACKGROUND_IMAGE_OVERLAY"
},
"COLOR_BACKGROUND_BUTTON_SUCCESS_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#2e844a",
"comment": "Active background color for success buttons",
"originalValue": "{!PALETTE_GREEN_50}",
"name": "COLOR_BACKGROUND_BUTTON_SUCCESS_ACTIVE"
},
"COLOR_BACKGROUND_TOAST_ERROR": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ea001e",
"comment": "Background color for error toast messaging.",
"access": "global",
"originalValue": "{!PALETTE_RED_50}",
"name": "COLOR_BACKGROUND_TOAST_ERROR"
},
"COLOR_BACKGROUND_SCROLLBAR_TRACK": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "The background color of an internal scrollbar track.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BACKGROUND_SCROLLBAR_TRACK"
},
"COLOR_BACKGROUND_INPUT_ERROR": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#fddde3",
"comment": "Background color for input field that has encountered an error.",
"access": "global",
"originalValue": "{!PALETTE_PINK_90}",
"name": "COLOR_BACKGROUND_INPUT_ERROR"
},
"COLOR_BORDER_BUTTON_INVERSE_DISABLED": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.15)",
"comment": "Border color for disabled inverse button.",
"access": "global",
"originalValue": "{!WHITE_TRANSPARENT_15}",
"name": "COLOR_BORDER_BUTTON_INVERSE_DISABLED"
},
"COLOR_BORDER_ICON_INVERSE_HINT_HOVER": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.75)",
"comment": "Hovered border color for a button with an icon that has a parent element that has a hover state",
"originalValue": "{!WHITE_TRANSPARENT_75}",
"name": "COLOR_BORDER_ICON_INVERSE_HINT_HOVER"
},
"COLOR_BORDER_ICON_INVERSE_HINT": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.50)",
"comment": "Border color for a button with an icon that has a parent element that has a hover state",
"originalValue": "{!WHITE_TRANSPARENT_50}",
"name": "COLOR_BORDER_ICON_INVERSE_HINT"
},
"COLOR_BORDER_TAB_ACTIVE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Border color for an active tab.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BORDER_TAB_ACTIVE"
},
"COLOR_BORDER_INPUT_DISABLED": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Border color on disabled form elements.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BORDER_INPUT_DISABLED"
},
"COLOR_BORDER_REMINDER": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Border color on notification reminders.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BORDER_REMINDER"
},
"COLOR_BORDER_BUTTON_BRAND_DISABLED": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "transparent",
"comment": "Border color for brandable primary button - disabled state",
"access": "global",
"originalValue": "{!TRANSPARENT}",
"name": "COLOR_BORDER_BUTTON_BRAND_DISABLED"
},
"COLOR_BORDER_BUTTON_DEFAULT": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Border color for default secondary button",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BORDER_BUTTON_DEFAULT"
},
"COLOR_BORDER_INPUT_ACTIVE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#1b96ff",
"comment": "Border color on active form elements.",
"access": "global",
"originalValue": "{!PALETTE_BLUE_60}",
"name": "COLOR_BORDER_INPUT_ACTIVE"
},
"COLOR_BORDER_INPUT": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Border color on form elements.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BORDER_INPUT"
},
"COLOR_BORDER_TOGGLE_CHECKED": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "These borders create the faux checkmark when the checkbox toggle is in the checked state.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BORDER_TOGGLE_CHECKED"
},
"COLOR_BORDER_TAB_SELECTED": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#0176d3",
"comment": "Border color for a selected tab in a tab group.",
"access": "global",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_BORDER_TAB_SELECTED"
},
"BORDER_STROKE_WIDTH_THIN": {
"category": "border-style",
"type": "size",
"cssProperties": [
"border*",
"*width",
"*height",
"box-shadow",
"stroke",
"stroke-width"
],
"value": "1px",
"originalValue": "{!BORDER_WIDTH_THIN}",
"name": "BORDER_STROKE_WIDTH_THIN"
},
"BORDER_STROKE_WIDTH_THICK": {
"category": "border-style",
"type": "size",
"cssProperties": [
"border*",
"*width",
"*height",
"box-shadow",
"stroke",
"stroke-width"
],
"value": "2px",
"originalValue": "{!BORDER_WIDTH_THICK}",
"name": "BORDER_STROKE_WIDTH_THICK"
},
"SHADOW_REMINDER": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "0 2px 3px 0 rgba(0, 0, 0, 0.20)",
"comment": "Shadow for notifications that should be elevated above other components but under modals.",
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_20}",
"name": "SHADOW_REMINDER"
},
"SHADOW_BUTTON_FOCUS": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "0 0 3px #0176d3",
"comment": "Custom glow for focus states on UI elements with explicit containers.",
"access": "global",
"originalValue": "{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_BLUE_50}",
"name": "SHADOW_BUTTON_FOCUS"
},
"SHADOW_BUTTON_FOCUS_INVERSE": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "0 0 3px #f3f3f3",
"comment": "Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds.",
"access": "global",
"originalValue": "{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_NEUTRAL_95}",
"name": "SHADOW_BUTTON_FOCUS_INVERSE"
},
"SHADOW_INLINE_EDIT": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "0 2px 4px 4px rgba(0, 0, 0, 0.16)",
"comment": "Shadow to make inline edit card pop out.",
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_16}",
"name": "SHADOW_INLINE_EDIT"
},
"SHADOW_DOCKED": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
"comment": "Shadow on elements that are docked to the bottom of the viewport.",
"originalValue": "{!OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}",
"name": "SHADOW_DOCKED"
},
"SHADOW_HEADER": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "0 2px 4px rgba(0, 0, 0, 0.07)",
"comment": "Shadow for header.",
"access": "global",
"originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}",
"name": "SHADOW_HEADER"
},
"DURATION_TOAST_SHORT": {
"type": "time",
"category": "time",
"cssProperties": [
"animation*",
"transition*"
],
"value": "4.8s",
"comment": "4.8 seconds",
"originalValue": "4.8s",
"name": "DURATION_TOAST_SHORT"
},
"DURATION_TOAST_MEDIUM": {
"type": "time",
"category": "time",
"cssProperties": [
"animation*",
"transition*"
],
"value": "9.6s",
"comment": "9.6 seconds",
"originalValue": "9.6s",
"name": "DURATION_TOAST_MEDIUM"
},
"ILLUSTRATION_EMPTY_STATE_ASSISTANT": {
"type": "string",
"category": "illustrations",
"value": "/assets/images/illustrations/empty-state-assistant.svg",
"originalValue": "/assets/images/illustrations/empty-state-assistant.svg",
"name": "ILLUSTRATION_EMPTY_STATE_ASSISTANT"
},
"ILLUSTRATION_EMPTY_STATE_EVENTS": {
"type": "string",
"category": "illustrations",
"value": "/assets/images/illustrations/empty-state-events.svg",
"originalValue": "/assets/images/illustrations/empty-state-events.svg",
"name": "ILLUSTRATION_EMPTY_STATE_EVENTS"
},
"ILLUSTRATION_EMPTY_STATE_TASKS": {
"type": "string",
"category": "illustrations",
"value": "/assets/images/illustrations/empty-state-tasks.svg",
"originalValue": "/assets/images/illustrations/empty-state-tasks.svg",
"name": "ILLUSTRATION_EMPTY_STATE_TASKS"
},
"BANNER_USER_DEFAULT_IMAGE": {
"category": "utility",
"type": "string",
"value": "",
"originalValue": "",
"name": "BANNER_USER_DEFAULT_IMAGE"
},
"BANNER_GROUP_DEFAULT_IMAGE": {
"category": "utility",
"type": "string",
"value": "",
"originalValue": "",
"name": "BANNER_GROUP_DEFAULT_IMAGE"
},
"USER_DEFAULT_AVATAR": {
"category": "utility",
"type": "string",
"value": "/profile_avatar_200.png",
"originalValue": "/profile_avatar_200.png",
"name": "USER_DEFAULT_AVATAR"
},
"USER_DEFAULT_AVATAR_MEDIUM": {
"category": "utility",
"type": "string",
"value": "/profile_avatar_160.png",
"originalValue": "/profile_avatar_160.png",
"name": "USER_DEFAULT_AVATAR_MEDIUM"
},
"USER_DEFAULT_AVATAR_SMALL": {
"category": "utility",
"type": "string",
"value": "/profile_avatar_96.png",
"originalValue": "/profile_avatar_96.png",
"name": "USER_DEFAULT_AVATAR_SMALL"
},
"GROUP_DEFAULT_AVATAR": {
"category": "utility",
"type": "string",
"value": "/group_avatar_200.png",
"originalValue": "/group_avatar_200.png",
"name": "GROUP_DEFAULT_AVATAR"
},
"GROUP_DEFAULT_AVATAR_MEDIUM": {
"category": "utility",
"type": "string",
"value": "/group_avatar_160.png",
"originalValue": "/group_avatar_160.png",
"name": "GROUP_DEFAULT_AVATAR_MEDIUM"
},
"GROUP_DEFAULT_AVATAR_SMALL": {
"category": "utility",
"type": "string",
"value": "/group_avatar_96.png",
"originalValue": "/group_avatar_96.png",
"name": "GROUP_DEFAULT_AVATAR_SMALL"
},
"LINE_HEIGHT_TAB": {
"category": "line-height",
"type": "number",
"cssProperties": [
"font",
"*height"
],
"value": "2.5rem",
"comment": "Line heights for tabs",
"access": "global",
"originalValue": "2.5rem",
"name": "LINE_HEIGHT_TAB"
},
"BORDER_RADIUS_PILL": {
"type": "size",
"category": "radius",
"cssProperties": [
"border*radius"
],
"value": "15rem",
"access": "global",
"originalValue": "{!BORDER_RADIUS_PILL}",
"name": "BORDER_RADIUS_PILL"
},
"HEIGHT_PILL": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.625rem",
"comment": "Minimum height of a pill.",
"originalValue": "1.625rem",
"name": "HEIGHT_PILL"
},
"HEIGHT_HEADER": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "2.75rem",
"comment": "Brand header. Phone 44px; Tablet 50px",
"access": "global",
"originalValue": "2.75rem",
"name": "HEIGHT_HEADER"
},
"HEIGHT_FOOTER": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "3.75rem",
"comment": "Action footer menu. Phone 44px; Tablet 50px",
"access": "global",
"originalValue": "3.75rem",
"name": "HEIGHT_FOOTER"
},
"HEIGHT_INPUT": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.875rem",
"comment": "Text input height",
"originalValue": "1.875rem",
"name": "HEIGHT_INPUT"
},
"WIDTH_STAGE_LEFT_COLLAPSED": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "4rem",
"comment": "Stage left for desktop when closed (showing icons only).",
"access": "global",
"originalValue": "4rem",
"name": "WIDTH_STAGE_LEFT_COLLAPSED"
},
"WIDTH_STAGE_LEFT_EXPANDED": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "15rem",
"comment": "Stage left for desktop when open.",
"access": "global",
"originalValue": "15rem",
"name": "WIDTH_STAGE_LEFT_EXPANDED"
},
"MAX_WIDTH_ACTION_OVERFLOW_MENU": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "512px",
"comment": "Maximum width for action overflow menu so that it's not full-screen for tablet.",
"originalValue": "512px",
"name": "MAX_WIDTH_ACTION_OVERFLOW_MENU"
},
"LINE_CLAMP": {
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": 3,
"comment": "Default amount of line breaks before text is truncated",
"originalValue": 3,
"name": "LINE_CLAMP"
},
"COLOR_TEXT_ICON_INVERSE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Icon color on dark background",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_ICON_INVERSE"
},
"COLOR_TEXT_BUTTON_INVERSE_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "rgba(255, 255, 255, 0.50)",
"comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.",
"access": "global",
"originalValue": "{!WHITE_TRANSPARENT_50}",
"name": "COLOR_TEXT_BUTTON_INVERSE_DISABLED"
},
"COLOR_TEXT_INPUT_ICON": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#aeaeae",
"comment": "Input icon",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_TEXT_INPUT_ICON"
},
"COLOR_TEXT_ICON_INVERSE_ACTIVE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Icon color on dark background - active state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_ICON_INVERSE_ACTIVE"
},
"COLOR_TEXT_BUTTON_DEFAULT_HOVER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#0176d3",
"comment": "Text color for default secondary button - hover state",
"access": "global",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_BUTTON_DEFAULT_HOVER"
},
"COLOR_TEXT_INPUT_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#747474",
"comment": "Input disabled text",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_TEXT_INPUT_DISABLED"
},
"COLOR_TEXT_BUTTON_DEFAULT": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#0176d3",
"comment": "Text color for default secondary button",
"access": "global",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_BUTTON_DEFAULT"
},
"COLOR_TEXT_ICON_DEFAULT_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#c9c9c9",
"comment": "Default icon color - disabled state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_TEXT_ICON_DEFAULT_DISABLED"
},
"COLOR_TEXT_BUTTON_BRAND_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Text color for brandable primary button - disabled state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_BUTTON_BRAND_DISABLED"
},
"COLOR_TEXT_BUTTON_BRAND_HOVER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Text color for brandable primary button - hover state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_BUTTON_BRAND_HOVER"
},
"COLOR_TEXT_ICON_DEFAULT_HOVER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#0176d3",
"comment": "Default icon color - hover state.",
"access": "global",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_ICON_DEFAULT_HOVER"
},
"COLOR_TEXT_BUTTON_BRAND": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Text color for brandable primary button",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_BUTTON_BRAND"
},
"COLOR_TEXT_BUTTON_DEFAULT_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#c9c9c9",
"comment": "Text color for default secondary button - disabled state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_TEXT_BUTTON_DEFAULT_DISABLED"
},
"COLOR_TEXT_TAB_LABEL": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#032d60",
"comment": "Color for default text in a tab group.",
"access": "global",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_TEXT_TAB_LABEL"
},
"COLOR_TEXT_ICON_DEFAULT_ACTIVE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#032d60",
"comment": "Default icon color - active state.",
"access": "global",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_TEXT_ICON_DEFAULT_ACTIVE"
},
"COLOR_TEXT_ICON_DEFAULT_HINT": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#aeaeae",
"comment": "Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_TEXT_ICON_DEFAULT_HINT"
},
"COLOR_TEXT_BUTTON_BRAND_ACTIVE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Text color for brandable primary button - active state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_BUTTON_BRAND_ACTIVE"
},
"COLOR_TEXT_BUTTON_INVERSE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#f3f3f3",
"comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_TEXT_BUTTON_INVERSE"
},
"COLOR_TEXT_BUTTON_DEFAULT_ACTIVE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#0176d3",
"comment": "Text color for default secondary button - active state",
"access": "global",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "COLOR_TEXT_BUTTON_DEFAULT_ACTIVE"
},
"COLOR_TEXT_ICON_INVERSE_DISABLED": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "rgba(255, 255, 255, 0.15)",
"comment": "Icon color on dark background - disabled state",
"access": "global",
"originalValue": "{!WHITE_TRANSPARENT_15}",
"name": "COLOR_TEXT_ICON_INVERSE_DISABLED"
},
"COLOR_TEXT_BUTTON_DEFAULT_HINT": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#aeaeae",
"comment": "Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "COLOR_TEXT_BUTTON_DEFAULT_HINT"
},
"COLOR_TEXT_ICON_INVERSE_HOVER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"comment": "Icon color on dark background - hover state",
"access": "global",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_ICON_INVERSE_HOVER"
},
"COLOR_TEXT_INPUT_FOCUS_INVERSE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#032d60",
"comment": "Typed input text",
"access": "global",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_TEXT_INPUT_FOCUS_INVERSE"
},
"AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "White avatar group background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST"
},
"AVATAR_GROUP_COLOR_BACKGROUND_INVERSE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#747474",
"comment": "Dark gray avatar group background color.",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "AVATAR_GROUP_COLOR_BACKGROUND_INVERSE"
},
"BADGE_COLOR_BACKGROUND_LIGHTEST": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "White badge background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "BADGE_COLOR_BACKGROUND_LIGHTEST"
},
"BADGE_COLOR_BACKGROUND_INVERSE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#747474",
"comment": "Dark gray badge background color.",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "BADGE_COLOR_BACKGROUND_INVERSE"
},
"BRAND_BAND_DEFAULT_IMAGE": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "",
"originalValue": "",
"name": "BRAND_BAND_DEFAULT_IMAGE"
},
"BRAND_BAND_COLOR_BACKGROUND_PRIMARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_PRIMARY"
},
"BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT"
},
"BRAND_BAND_COLOR_BACKGROUND_SECONDARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_SECONDARY"
},
"BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT"
},
"BRAND_BAND_IMAGE_HEIGHT_SMALL": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "6rem",
"originalValue": "6rem",
"name": "BRAND_BAND_IMAGE_HEIGHT_SMALL"
},
"BRAND_BAND_IMAGE_HEIGHT_MEDIUM": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "12.5rem",
"originalValue": "12.5rem",
"name": "BRAND_BAND_IMAGE_HEIGHT_MEDIUM"
},
"BRAND_BAND_IMAGE_HEIGHT_LARGE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "18.75rem",
"originalValue": "18.75rem",
"name": "BRAND_BAND_IMAGE_HEIGHT_LARGE"
},
"BRAND_BAND_SCRIM_HEIGHT": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "3.125rem",
"originalValue": "3.125rem",
"name": "BRAND_BAND_SCRIM_HEIGHT"
},
"TEMPLATE_GUTTERS": {
"scope": "component",
"category": "spacing",
"type": "size",
"cssProperties": [
"margin*",
"padding*"
],
"value": "0",
"originalValue": "0",
"name": "TEMPLATE_GUTTERS"
},
"TEMPLATE_PROFILE_GUTTERS": {
"scope": "component",
"category": "spacing",
"type": "size",
"cssProperties": [
"margin*",
"padding*"
],
"value": "0",
"originalValue": "0",
"name": "TEMPLATE_PROFILE_GUTTERS"
},
"BUTTON_ICON_COLOR_BORDER_PRIMARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#ffffff",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "BUTTON_ICON_COLOR_BORDER_PRIMARY"
},
"BUTTON_ICON_BOUNDARY_TOUCH": {
"scope": "component",
"type": "sizing",
"category": "height",
"cssProperties": [
"width",
"height"
],
"value": "2.75rem",
"originalValue": "2.75rem",
"name": "BUTTON_ICON_BOUNDARY_TOUCH"
},
"BUTTON_COLOR_BORDER_PRIMARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "BUTTON_COLOR_BORDER_PRIMARY"
},
"BUTTON_COLOR_BORDER_BRAND_PRIMARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#0176d3",
"deprecated": true,
"originalValue": "{!PALETTE_BLUE_50}",
"name": "BUTTON_COLOR_BORDER_BRAND_PRIMARY"
},
"BUTTON_COLOR_BORDER_SECONDARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.80)",
"deprecated": true,
"originalValue": "{!WHITE_TRANSPARENT_80}",
"name": "BUTTON_COLOR_BORDER_SECONDARY"
},
"BUTTON_BORDER_RADIUS": {
"scope": "component",
"type": "size",
"category": "radius",
"cssProperties": [
"border*radius"
],
"value": ".25rem",
"originalValue": ".25rem",
"name": "BUTTON_BORDER_RADIUS"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - focus state"
},
"BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY": {
"originalValue": "{!PALETTE_BLUE_50}",
"name": "BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY",
"value": "#0176d3",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Use BRAND_ACCESSIBLE to pick up theming capabilities"
},
"COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED": {
"originalValue": "{!TRANSPARENT}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED",
"value": "transparent",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Disabled button backgrounds on inverse/dark backgrounds"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - hover state"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT",
"value": "#ffffff",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button"
},
"COLOR_BACKGROUND_BUTTON_ICON_DISABLED": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_DISABLED",
"value": "#ffffff",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - disabled state"
},
"COLOR_BACKGROUND_BUTTON_ICON_FOCUS": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_FOCUS",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - focus state"
},
"BUTTON_COLOR_BACKGROUND_SECONDARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.80)",
"deprecated": true,
"originalValue": "{!WHITE_TRANSPARENT_80}",
"name": "BUTTON_COLOR_BACKGROUND_SECONDARY"
},
"COLOR_BACKGROUND_BUTTON_BRAND_DISABLED": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND_DISABLED",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button - disabled state"
},
"COLOR_BACKGROUND_BUTTON_BRAND_HOVER": {
"originalValue": "{!PALETTE_BLUE_30}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND_HOVER",
"value": "#014486",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button - hover state"
},
"COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE": {
"originalValue": "{!BLACK_TRANSPARENT_24}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE",
"value": "rgba(0, 0, 0, 0.24)",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Active button backgrounds on inverse backgrounds on mobile"
},
"COLOR_BACKGROUND_BUTTON_ICON_HOVER": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_HOVER",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - hover state"
},
"COLOR_BACKGROUND_BUTTON_BRAND": {
"originalValue": "{!PALETTE_BLUE_50}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND",
"value": "#0176d3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button"
},
"COLOR_BACKGROUND_BUTTON_ICON": {
"originalValue": "{!TRANSPARENT}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON",
"value": "transparent",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED",
"value": "#ffffff",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - disabled state"
},
"COLOR_BACKGROUND_BUTTON_ICON_ACTIVE": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_ACTIVE",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - active state"
},
"COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE": {
"originalValue": "{!PALETTE_BLUE_20}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE",
"value": "#032d60",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button - active state"
},
"COLOR_BACKGROUND_BUTTON_INVERSE": {
"originalValue": "{!TRANSPARENT}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_INVERSE",
"value": "transparent",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Button backgrounds on inverse/dark backgrounds"
},
"BUTTON_COLOR_BACKGROUND_PRIMARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "BUTTON_COLOR_BACKGROUND_PRIMARY"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE",
"value": "#f3f3f3",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - active state"
},
"LINE_HEIGHT_BUTTON": {
"originalValue": "1.875rem",
"access": "global",
"name": "LINE_HEIGHT_BUTTON",
"value": "1.875rem",
"scope": "component",
"cssProperties": [
"font",
"*height",
"bottom"
],
"type": "number",
"category": "line-height",
"comment": "Line heights for regular buttons"
},
"LINE_HEIGHT_BUTTON_SMALL": {
"originalValue": "1.75rem",
"access": "global",
"name": "LINE_HEIGHT_BUTTON_SMALL",
"value": "1.75rem",
"scope": "component",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Line heights for small buttons"
},
"BUTTON_LINE_HEIGHT_TOUCH": {
"originalValue": "2.65rem",
"name": "BUTTON_LINE_HEIGHT_TOUCH",
"value": "2.65rem",
"deprecated": true,
"scope": "component",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Line height for touch screens"
},
"BUTTON_COLOR_TEXT_PRIMARY": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ffffff",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "BUTTON_COLOR_TEXT_PRIMARY"
},
"CARD_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Default Card component background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "CARD_COLOR_BACKGROUND"
},
"CARD_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "CARD_COLOR_BORDER"
},
"CARD_FOOTER_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "transparent",
"originalValue": "transparent",
"name": "CARD_FOOTER_COLOR_BORDER"
},
"CARD_SHADOW": {
"scope": "component",
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "none",
"originalValue": "none",
"name": "CARD_SHADOW"
},
"CARD_FONT_WEIGHT": {
"scope": "component",
"category": "font",
"type": "font-weight",
"cssProperties": [
"font",
"font-weight"
],
"value": "400",
"comment": "Use for active tab.",
"originalValue": "400",
"name": "CARD_FONT_WEIGHT"
},
"CARD_FOOTER_MARGIN": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.75rem",
"originalValue": "{!SPACING_SMALL}",
"name": "CARD_FOOTER_MARGIN"
},
"CARD_BODY_PADDING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0 1rem",
"originalValue": "0 {!SPACING_MEDIUM}",
"name": "CARD_BODY_PADDING"
},
"CARD_WRAPPER_SPACING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "1rem",
"originalValue": "{!SPACING_MEDIUM}",
"name": "CARD_WRAPPER_SPACING"
},
"CARD_HEADER_PADDING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.75rem 1rem 0",
"originalValue": "{!SPACING_SMALL} {!SPACING_MEDIUM} 0",
"name": "CARD_HEADER_PADDING"
},
"CARD_SPACING_LARGE": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "1.5rem",
"originalValue": "{!SPACING_LARGE}",
"name": "CARD_SPACING_LARGE"
},
"CARD_HEADER_MARGIN": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0 0 0.75rem",
"originalValue": "0 0 {!SPACING_SMALL}",
"name": "CARD_HEADER_MARGIN"
},
"CARD_SPACING_MARGIN": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "Use for vertical spacing between cards",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "1rem",
"originalValue": "{!SPACING_MEDIUM}",
"name": "CARD_SPACING_MARGIN"
},
"CARD_FOOTER_PADDING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0 1rem 0.75rem",
"originalValue": "0 {!SPACING_MEDIUM} {!SPACING_SMALL}",
"name": "CARD_FOOTER_PADDING"
},
"CARD_SPACING_SMALL": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.75rem",
"originalValue": "{!SPACING_SMALL}",
"name": "CARD_SPACING_SMALL"
},
"CARD_FOOTER_TEXT_ALIGN": {
"scope": "component",
"category": "text",
"type": "text-align",
"cssProperties": [
"text-align"
],
"value": "right",
"originalValue": "right",
"name": "CARD_FOOTER_TEXT_ALIGN"
},
"CAROUSEL_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Default background for carousel card",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "CAROUSEL_COLOR_BACKGROUND"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Default background for carousel navigation indicators",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Default hover background for carousel navigation indicators",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#014486",
"comment": "Default focus background for carousel navigation indicators",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#0176d3",
"comment": "Default background for active state on carousel navigation indicators",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE"
},
"CAROUSEL_INDICATOR_WIDTH": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1rem",
"comment": "Default width for carousel indicator width",
"originalValue": "1rem",
"name": "CAROUSEL_INDICATOR_WIDTH"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Inbound chat message background color.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#014486",
"comment": "Outbound chat message background color.",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#747474",
"comment": "Outbound agent chat message background color.",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_STATUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Status chat message background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_STATUS"
},
"LINE_HEIGHT_TOGGLE": {
"scope": "component",
"category": "line-height",
"type": "number",
"cssProperties": [
"font",
"*height"
],
"value": "1.3rem",
"comment": "Line heights for toggle buttons",
"originalValue": "1.3rem",
"name": "LINE_HEIGHT_TOGGLE"
},
"SQUARE_TOGGLE_SLIDER": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.25rem",
"comment": "Slider size for toggle.",
"originalValue": "1.25rem",
"name": "SQUARE_TOGGLE_SLIDER"
},
"WIDTH_TOGGLE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "3rem",
"comment": "Slider width.",
"originalValue": "3rem",
"name": "WIDTH_TOGGLE"
},
"HEIGHT_TOGGLE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.5rem",
"comment": "Slider height.",
"originalValue": "1.5rem",
"name": "HEIGHT_TOGGLE"
},
"COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND"
},
"COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*"
],
"value": "#444444",
"originalValue": "{!PALETTE_NEUTRAL_30}",
"name": "COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR"
},
"COLOR_PICKER_SWATCH_SHADOW": {
"scope": "component",
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "inset 0 0 1px rgba(0,0,0,0.4)",
"originalValue": "inset 0 0 1px rgba(0,0,0,0.4)",
"name": "COLOR_PICKER_SWATCH_SHADOW"
},
"COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE": {
"scope": "component",
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"value": "0.75rem",
"originalValue": "0.75rem",
"name": "COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE"
},
"COLOR_PICKER_SELECTOR_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "14rem",
"originalValue": "14rem",
"name": "COLOR_PICKER_SELECTOR_WIDTH"
},
"COLOR_PICKER_SWATCHES_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "13.3rem",
"originalValue": "13.3rem",
"name": "COLOR_PICKER_SWATCHES_WIDTH"
},
"COLOR_PICKER_RANGE_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "5rem",
"originalValue": "5rem",
"name": "COLOR_PICKER_RANGE_HEIGHT"
},
"COLOR_PICKER_SLIDER_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "1.5rem",
"originalValue": "1.5rem",
"name": "COLOR_PICKER_SLIDER_HEIGHT"
},
"COLOR_PICKER_THUMB_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "0.375rem",
"originalValue": "0.375rem",
"name": "COLOR_PICKER_THUMB_WIDTH"
},
"COLOR_PICKER_RANGE_INDICATOR_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "0.75rem",
"originalValue": "0.75rem",
"name": "COLOR_PICKER_RANGE_INDICATOR_SIZE"
},
"COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "4.2rem",
"originalValue": "4.2rem",
"name": "COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH"
},
"COLOR_PICKER_SWATCH_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "1.25rem",
"originalValue": "1.25rem",
"name": "COLOR_PICKER_SWATCH_SIZE"
},
"TABLE_COLOR_BACKGROUND_STRIPES": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Alternating row background color for tables",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "TABLE_COLOR_BACKGROUND_STRIPES"
},
"TABLE_COLOR_BACKGROUND_HEADER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Default background color for table headers",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "TABLE_COLOR_BACKGROUND_HEADER"
},
"TABLE_COLOR_BACKGROUND_HEADER_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Hover state for table header cells",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "TABLE_COLOR_BACKGROUND_HEADER_HOVER"
},
"TABLE_COLOR_BACKGROUND_HEADER_FOCUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Focused state for table header cells",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "TABLE_COLOR_BACKGROUND_HEADER_FOCUS"
},
"TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#aeaeae",
"comment": "Resizable handle color for table header cells",
"originalValue": "{!PALETTE_NEUTRAL_70}",
"name": "TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE"
},
"TABLE_BORDER_RADIUS": {
"scope": "component",
"type": "size",
"category": "radius",
"cssProperties": [
"border*radius"
],
"value": "0",
"originalValue": "0",
"name": "TABLE_BORDER_RADIUS"
},
"TABLE_CELL_SPACING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.5rem",
"originalValue": "{!SPACING_X_SMALL}",
"name": "TABLE_CELL_SPACING"
},
"TABLE_COLOR_TEXT_HEADER": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#444444",
"originalValue": "{!PALETTE_NEUTRAL_30}",
"name": "TABLE_COLOR_TEXT_HEADER"
},
"DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color"
],
"value": "#747474",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH"
},
"COLOR_BACKGROUND_DOCKED_PANEL_HEADER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Docked panel header’s background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_DOCKED_PANEL_HEADER"
},
"COLOR_BACKGROUND_DOCKED_PANEL": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Docked panel’s background color when open.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_DOCKED_PANEL"
},
"HEIGHT_DOCKED_BAR": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "2.5rem",
"comment": "Height of the docked bar.",
"originalValue": "2.5rem",
"name": "HEIGHT_DOCKED_BAR"
},
"UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#fe5c4c",
"comment": "Utility bar notifications badge background color.",
"originalValue": "{!PALETTE_RED_60}",
"name": "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE"
},
"UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Utility bar notifications focus background color.",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_FOCUS"
},
"DROP_ZONE_SLOT_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "0.25rem",
"originalValue": "0.25rem",
"name": "DROP_ZONE_SLOT_HEIGHT"
},
"COLOR_BACKGROUND_ICON_WAFFLE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#747474",
"comment": "Default color for animated icon waffle for app switcher.",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "COLOR_BACKGROUND_ICON_WAFFLE"
},
"TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Default background color for a typing icon dot.",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY"
},
"TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY_DARK": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Active background color for a typing icon dot when animcating.",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "TYPING_ICON_DOT_COLOR_BACKGROUND_GRAY_DARK"
},
"GLOBAL_ACTION_FILL_HOVER": {
"scope": "component",
"category": "fill",
"type": "color",
"cssProperties": [
"background",
"color",
"fill"
],
"value": "#014486",
"comment": "Brand fill color",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "GLOBAL_ACTION_FILL_HOVER"
},
"GLOBAL_ACTION_ICON_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*width",
"*height"
],
"value": "1.5rem",
"comment": "Global action icon size",
"originalValue": "1.5rem",
"name": "GLOBAL_ACTION_ICON_SIZE"
},
"TYPING_ICON_DOT_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*width",
"*height"
],
"value": ".5rem",
"comment": "Typing icon size",
"originalValue": ".5rem",
"name": "TYPING_ICON_DOT_SIZE"
},
"EINSTEIN_HEADER_BACKGROUND": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "/einstein-headers/einstein-header-background.svg",
"originalValue": "/einstein-headers/einstein-header-background.svg",
"name": "EINSTEIN_HEADER_BACKGROUND"
},
"EINSTEIN_HEADER_FIGURE": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "/einstein-headers/einstein-figure.svg",
"originalValue": "/einstein-headers/einstein-figure.svg",
"name": "EINSTEIN_HEADER_FIGURE"
},
"EINSTEIN_HEADER_BACKGROUND_COLOR": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "#90d0fe",
"comment": "Background color for Einstein header",
"originalValue": "{!PALETTE_CLOUD_BLUE_80}",
"name": "EINSTEIN_HEADER_BACKGROUND_COLOR"
},
"EINSTEIN_HEADER_TEXT_SHADOW": {
"scope": "component",
"type": "shadow",
"category": "text-shadow",
"cssProperties": [
"text-shadow"
],
"value": "#cfe9fe",
"comment": "Text shadow color for Einstein header background to make text more readable",
"originalValue": "{!PALETTE_CLOUD_BLUE_90}",
"name": "EINSTEIN_HEADER_TEXT_SHADOW"
},
"FILES_Z_INDEX_HOVER": {
"scope": "component",
"type": "number",
"category": "z-index",
"cssProperties": [
"z-index"
],
"value": 5,
"originalValue": 5,
"name": "FILES_Z_INDEX_HOVER"
},
"FORM_LABEL_FONT_SIZE": {
"scope": "component",
"type": "size",
"cssProperties": [
"font",
"font-size"
],
"category": "font-size",
"value": "0.75rem",
"originalValue": "0.75rem",
"name": "FORM_LABEL_FONT_SIZE"
},
"GLOBAL_HEADER_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "#ffffff",
"comment": "Global Header background color",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "GLOBAL_HEADER_COLOR_BACKGROUND"
},
"BRAND_LOGO_IMAGE": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "/logo-noname.svg",
"originalValue": "/logo-noname.svg",
"name": "BRAND_LOGO_IMAGE"
},
"SQUARE_ICON_GLOBAL_IDENTITY_ICON": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.25rem",
"comment": "Global identity icon size.",
"originalValue": "1.25rem",
"name": "SQUARE_ICON_GLOBAL_IDENTITY_ICON"
},
"COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER",
"value": "#ffffff",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Hovered context bar item background color."
},
"COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE",
"value": "#ffffff",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Active context bar item background color."
},
"COLOR_BACKGROUND_CONTEXT_BAR": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Default context bar background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR"
},
"COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Context TAB bar item background color.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM"
},
"COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_HOVER": {
"originalValue": "{!WHITE_TRANSPARENT_20}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_HOVER",
"value": "rgba(255, 255, 255, 0.20)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Hovered context bar item background color."
},
"COLOR_BACKGROUND_CONTEXT_BAR_SHADOW": {
"originalValue": "{!GRADIENT_SHADOW_BOTTOM}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_SHADOW",
"value": "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "gradient",
"category": "background-color",
"comment": "A Gradient used for putting shadows on the bottom when box-shadow is not possible."
},
"COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_ACTIVE": {
"originalValue": "{!WHITE_TRANSPARENT_40}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_INVERSE_ITEM_ACTIVE",
"value": "rgba(255, 255, 255, 0.40)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Active context bar item background color."
},
"COLOR_BACKGROUND_CONTEXT_BAR_BRAND_ACCENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#0d9dda",
"comment": "Brand color in context bar for default theme",
"originalValue": "{!PALETTE_CLOUD_BLUE_60}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_BRAND_ACCENT"
},
"COLOR_BACKGROUND_CONTEXT_BAR_ACTION_HIGHLIGHT": {
"originalValue": "{!WHITE_TRANSPARENT_20}",
"name": "COLOR_BACKGROUND_CONTEXT_BAR_ACTION_HIGHLIGHT",
"value": "rgba(255, 255, 255, 0.20)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Highlight for context bar action (hover and focus states)."
},
"COLOR_BORDER_CONTEXT_BAR_DIVIDER": {
"originalValue": "{!WHITE_TRANSPARENT_20}",
"name": "COLOR_BORDER_CONTEXT_BAR_DIVIDER",
"value": "rgba(255, 255, 255, 0.20)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"category": "border-color",
"comment": "Divider in context bar"
},
"COLOR_BORDER_CONTEXT_BAR_ITEM": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "rgba(0, 0, 0, 0.20)",
"comment": "Border color in context bar",
"originalValue": "{!BLACK_TRANSPARENT_20}",
"name": "COLOR_BORDER_CONTEXT_BAR_ITEM"
},
"COLOR_BORDER_CONTEXT_BAR_INVERSE_ITEM": {
"originalValue": "{!WHITE_TRANSPARENT_20}",
"name": "COLOR_BORDER_CONTEXT_BAR_INVERSE_ITEM",
"value": "rgba(255, 255, 255, 0.20)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"border*",
"box-shadow"
],
"type": "color",
"category": "border-color",
"comment": "Border color in context bar on dark background"
},
"COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#0d9dda",
"comment": "Border color in context bar for default theme",
"originalValue": "{!PALETTE_CLOUD_BLUE_60}",
"name": "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT"
},
"COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ALT": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Alternate border color in context bar for default theme",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ALT"
},
"COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_HOVER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#321d71",
"comment": "Hovered border color in context bar for default theme",
"originalValue": "{!PALETTE_INDIGO_20}",
"name": "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_HOVER"
},
"COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ACTIVE": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Active border color in context bar for default theme",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BORDER_CONTEXT_BAR_THEME_DEFAULT_ACTIVE"
},
"HEIGHT_CONTEXT_BAR": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "2.5rem",
"comment": "Context bar height.",
"originalValue": "2.5rem",
"name": "HEIGHT_CONTEXT_BAR"
},
"GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_ACTIVE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "3px",
"comment": "Context bar tab accent height when tab is active.",
"originalValue": "3px",
"name": "GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_ACTIVE"
},
"GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_FOCUS": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "4px",
"comment": "Context bar tab accent height when tab is focused.",
"originalValue": "4px",
"name": "GLOBALNAVIGATION_ITEM_HEIGHT_ACCENT_FOCUS"
},
"COLOR_TEXT_CONTEXT_BAR": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#444444",
"comment": "Context bar text color",
"originalValue": "{!PALETTE_NEUTRAL_30}",
"name": "COLOR_TEXT_CONTEXT_BAR"
},
"COLOR_TEXT_CONTEXT_BAR_INVERSE": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_TEXT_CONTEXT_BAR_INVERSE",
"value": "#ffffff",
"deprecated": true,
"scope": "component",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Context bar text color on a dark background"
},
"COLOR_TEXT_CONTEXT_BAR_ACTION_TRIGGER": {
"originalValue": "{!WHITE_TRANSPARENT_40}",
"name": "COLOR_TEXT_CONTEXT_BAR_ACTION_TRIGGER",
"value": "rgba(255, 255, 255, 0.40)",
"deprecated": true,
"scope": "component",
"cssProperties": [
"color",
"fill"
],
"type": "color",
"category": "text-color",
"comment": "Context bar action trigger text color"
},
"ILLUSTRATION_COLOR_PRIMARY": {
"type": "color",
"category": "stroke-color",
"cssProperties": [
"stroke",
"fill"
],
"value": "#90d0fe",
"comment": "Primary color for illustrations",
"originalValue": "{!PALETTE_CLOUD_BLUE_80}",
"name": "ILLUSTRATION_COLOR_PRIMARY"
},
"ILLUSTRATION_COLOR_SECONDARY": {
"type": "color",
"category": "stroke-color",
"cssProperties": [
"stroke",
"fill"
],
"value": "#cfe9fe",
"comment": "Secondary color for illustrations",
"originalValue": "{!PALETTE_CLOUD_BLUE_90}",
"name": "ILLUSTRATION_COLOR_SECONDARY"
},
"INPUT_STATIC_FONT_SIZE": {
"scope": "component",
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"value": "0.8125rem",
"originalValue": "{!FONT_SIZE_3}",
"name": "INPUT_STATIC_FONT_SIZE"
},
"INPUT_STATIC_FONT_WEIGHT": {
"scope": "component",
"category": "font",
"type": "font-weight",
"cssProperties": [
"font",
"font-weight"
],
"value": "400",
"originalValue": "400",
"name": "INPUT_STATIC_FONT_WEIGHT"
},
"INPUT_READONLY_FONT_WEIGHT": {
"scope": "component",
"category": "font",
"type": "font-weight",
"cssProperties": [
"font",
"font-weight"
],
"value": "400",
"originalValue": "400",
"name": "INPUT_READONLY_FONT_WEIGHT"
},
"INPUT_STATIC_COLOR": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#181818",
"originalValue": "{!PALETTE_NEUTRAL_10}",
"name": "INPUT_STATIC_COLOR"
},
"PAGE_HEADER_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Default Page Header background color",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "PAGE_HEADER_COLOR_BACKGROUND"
},
"PAGE_HEADER_COLOR_BACKGROUND_ALT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Secondary Page Header background color",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "PAGE_HEADER_COLOR_BACKGROUND_ALT"
},
"COLOR_BACKGROUND_ANCHOR": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"access": "global",
"name": "COLOR_BACKGROUND_ANCHOR",
"value": "#f3f3f3",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Use COLOR_BACKGROUND_PAGE_HEADER instead."
},
"COLOR_BACKGROUND_PAGE_HEADER": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PAGE_HEADER",
"value": "#ffffff",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Page Header background color"
},
"PAGE_HEADER_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "transparent",
"originalValue": "transparent",
"name": "PAGE_HEADER_COLOR_BORDER"
},
"PAGE_HEADER_JOINED_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "PAGE_HEADER_JOINED_COLOR_BORDER"
},
"PAGE_HEADER_BORDER_RADIUS": {
"scope": "component",
"type": "size",
"category": "radius",
"cssProperties": [
"border*radius"
],
"value": "0",
"originalValue": "0",
"name": "PAGE_HEADER_BORDER_RADIUS"
},
"PAGE_HEADER_SHADOW": {
"scope": "component",
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "none",
"originalValue": "none",
"name": "PAGE_HEADER_SHADOW"
},
"PAGE_HEADER_TITLE_FONT_SIZE": {
"scope": "component",
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"value": "1.125rem",
"originalValue": "{!FONT_SIZE_6}",
"name": "PAGE_HEADER_TITLE_FONT_SIZE"
},
"PAGE_HEADER_TITLE_FONT_WEIGHT": {
"scope": "component",
"category": "font-weight",
"type": "font-weight",
"cssProperties": [
"font-weight"
],
"value": "400",
"originalValue": "400",
"name": "PAGE_HEADER_TITLE_FONT_WEIGHT"
},
"PAGE_HEADER_ICON_SIZE": {
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "2.25rem",
"comment": "Page header Entity Icon size",
"originalValue": "2.25rem",
"name": "PAGE_HEADER_ICON_SIZE"
},
"PAGE_HEADER_SPACING_MARGIN": {
"originalValue": "0",
"name": "PAGE_HEADER_SPACING_MARGIN",
"value": "0",
"deprecated": true,
"scope": "component",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"type": "size",
"category": "spacing",
"comment": ""
},
"PAGE_HEADER_SPACING_PADDING": {
"originalValue": "{!SPACING_MEDIUM}",
"name": "PAGE_HEADER_SPACING_PADDING",
"value": "1rem",
"deprecated": true,
"scope": "component",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"type": "size",
"category": "spacing",
"comment": ""
},
"PAGE_HEADER_SPACING_ROW": {
"originalValue": "{!SPACING_SMALL} {!SPACING_MEDIUM}",
"name": "PAGE_HEADER_SPACING_ROW",
"value": "0.75rem 1rem",
"deprecated": true,
"scope": "component",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"type": "size",
"category": "spacing",
"comment": ""
},
"PANEL_DOCKED_LEFT_SHADOW": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "1px 0 3px rgba(0,0,0,0.25)",
"comment": "Dropshadow found on docked UI panels when positioned to the left of a viewport",
"originalValue": "1px 0 3px rgba(0,0,0,0.25)",
"name": "PANEL_DOCKED_LEFT_SHADOW"
},
"PANEL_DOCKED_RIGHT_SHADOW": {
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "-1px 0 3px 0 rgba(0,0,0,0.25)",
"comment": "Dropshadow found on docked UI panels when positioned to the left of a viewport",
"originalValue": "-1px 0 3px 0 rgba(0,0,0,0.25)",
"name": "PANEL_DOCKED_RIGHT_SHADOW"
},
"COLOR_BACKGROUND_PATH_INCOMPLETE_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "The hover background color for Salespath stages that have not been completed.",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "COLOR_BACKGROUND_PATH_INCOMPLETE_HOVER"
},
"COLOR_BACKGROUND_PATH_STEP_ACTION_ACTIVE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#001639",
"comment": "The background color for the step action arrow that are the active stage",
"originalValue": "{!PALETTE_BLUE_10}",
"name": "COLOR_BACKGROUND_PATH_STEP_ACTION_ACTIVE"
},
"COLOR_BACKGROUND_PATH_INCOMPLETE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "The background color for Salespath stages that have not been completed.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "COLOR_BACKGROUND_PATH_INCOMPLETE"
},
"COLOR_BACKGROUND_PATH_ACTIVE_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#032d60",
"comment": "The hover background color for Salespath stages that are the active stage.",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_BACKGROUND_PATH_ACTIVE_HOVER"
},
"COLOR_BACKGROUND_PATH_LOST": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ea001e",
"comment": "The background color for the final stage of a Salespath when it has been lost.",
"originalValue": "{!PALETTE_RED_50}",
"name": "COLOR_BACKGROUND_PATH_LOST"
},
"COLOR_BACKGROUND_PATH_ACTIVE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#014486",
"comment": "The background color for Salespath stages that are the active stage.",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BACKGROUND_PATH_ACTIVE"
},
"COLOR_BACKGROUND_GUIDANCE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "The background color for Salespath guidance coaching section.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_GUIDANCE"
},
"COLOR_BACKGROUND_PATH_WON": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#2e844a",
"comment": "The background color for the final stage of a Salespath when it has been lost.",
"originalValue": "{!PALETTE_GREEN_50}",
"name": "COLOR_BACKGROUND_PATH_WON"
},
"COLOR_BACKGROUND_PATH_CURRENT_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "The hover background color for Salespath stages that are the current stage.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PATH_CURRENT_HOVER"
},
"COLOR_BACKGROUND_PATH_CURRENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "The background color for Salespath stages that are the current stage.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PATH_CURRENT"
},
"COLOR_BACKGROUND_PATH_COMPLETE_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#2e844a",
"comment": "The hover background color for Salespath stages that are complete.",
"originalValue": "{!PALETTE_GREEN_50}",
"name": "COLOR_BACKGROUND_PATH_COMPLETE_HOVER"
},
"COLOR_BACKGROUND_PATH_COMPLETE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#3ba755",
"comment": "The background color for Salespath stages that are complete.",
"originalValue": "{!PALETTE_GREEN_60}",
"name": "COLOR_BACKGROUND_PATH_COMPLETE"
},
"COLOR_BACKGROUND_PATH_STEP_ACTION_CURRENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#014486",
"comment": "The background color for the step action arrow that are the current stage",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BACKGROUND_PATH_STEP_ACTION_CURRENT"
},
"COLOR_BACKGROUND_PATH_EXPANDED": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "The background color for the overall Salespath coaching section.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PATH_EXPANDED"
},
"COLOR_BORDER_PATH_DIVIDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Used as a separator between dark colors like the stages of salespath.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BORDER_PATH_DIVIDER"
},
"COLOR_BORDER_PATH_CURRENT": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#014486",
"comment": "Used as a border color for the active Path step.",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_BORDER_PATH_CURRENT"
},
"COLOR_BORDER_PATH_CURRENT_HOVER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#032d60",
"comment": "Used as a border color for the current path step on hover.",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_BORDER_PATH_CURRENT_HOVER"
},
"LINE_HEIGHT_SALESPATH": {
"scope": "component",
"category": "line-height",
"type": "number",
"cssProperties": [
"font",
"*height"
],
"value": "1.5rem",
"comment": "Line heights for salespath",
"originalValue": "1.5rem",
"name": "LINE_HEIGHT_SALESPATH"
},
"HEIGHT_SALES_PATH": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"*flex*",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "2rem",
"comment": "Height of Path",
"originalValue": "2rem",
"name": "HEIGHT_SALES_PATH"
},
"PATH_BUTTON_WIDTH_FIXED": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"*flex*",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "13rem",
"comment": "Width of action button to right",
"originalValue": "13rem",
"name": "PATH_BUTTON_WIDTH_FIXED"
},
"WIDTH_PATH_BORDER_CURRENT": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"*flex*",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "0.125rem",
"comment": "Border width of current stage for path item",
"originalValue": "0.125rem",
"name": "WIDTH_PATH_BORDER_CURRENT"
},
"COLOR_TEXT_PATH_CURRENT": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color"
],
"value": "#014486",
"comment": "Used as a text color for the active Path step.",
"originalValue": "{!PALETTE_BLUE_30}",
"name": "COLOR_TEXT_PATH_CURRENT"
},
"COLOR_TEXT_PATH_CURRENT_HOVER": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color"
],
"value": "#032d60",
"comment": "Used as a text hover color for the active Path step.",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "COLOR_TEXT_PATH_CURRENT_HOVER"
},
"POPOVER_WALKTHROUGH_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#001639",
"comment": "The default background color for Popover Walkthrough",
"originalValue": "{!PALETTE_BLUE_10}",
"name": "POPOVER_WALKTHROUGH_COLOR_BACKGROUND"
},
"POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#032d60",
"comment": "The default background color for Popover Walkthrough Header",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND"
},
"POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#0176d3",
"comment": "The default background color for alternative Popover Walkthrough",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT"
},
"POPOVER_WALKTHROUGH_HEADER_IMAGE": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "",
"originalValue": "",
"name": "POPOVER_WALKTHROUGH_HEADER_IMAGE"
},
"POPOVER_WALKTHROUGH_ALT_IMAGE": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "",
"originalValue": "",
"name": "POPOVER_WALKTHROUGH_ALT_IMAGE"
},
"POPOVER_WALKTHROUGH_ALT_NUBBIN_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#0176d3",
"comment": "The background color for nubbins on the bottom of alternate walkthrough popovers",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "POPOVER_WALKTHROUGH_ALT_NUBBIN_COLOR_BACKGROUND"
},
"NUBBIN_SIZE_DEFAULT": {
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*"
],
"value": "1rem",
"comment": "Tooltip nubbin square size",
"originalValue": "1rem",
"name": "NUBBIN_SIZE_DEFAULT"
},
"NUBBIN_TRIANGLE_OFFSET": {
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*"
],
"value": "-0.1875rem",
"comment": "Tooltip nubbin offset for branded popovers",
"originalValue": "-0.1875rem",
"name": "NUBBIN_TRIANGLE_OFFSET"
},
"POPOVER_BRAND_BORDER_WIDTH": {
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*"
],
"value": "0.25rem",
"comment": "The default border width for Branded Popover",
"originalValue": "0.25rem",
"name": "POPOVER_BRAND_BORDER_WIDTH"
},
"POPOVER_COLOR_TEXT": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color"
],
"value": "#c9c9c9",
"comment": "Text color for step counter in walkthrough variant of popovers",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "POPOVER_COLOR_TEXT"
},
"PROGRESS_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "The default background color for Progress Indicator",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "PROGRESS_COLOR_BACKGROUND"
},
"PROGRESS_COLOR_BACKGROUND_SHADE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "The shaded background color for Progress Indicator",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "PROGRESS_COLOR_BACKGROUND_SHADE"
},
"PROGRESS_BAR_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "The background color for the Progress Bar",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "PROGRESS_BAR_COLOR_BACKGROUND"
},
"PROGRESS_BAR_COLOR_BACKGROUND_FILL": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#1ab9ff",
"comment": "The background color of the fill for the Progress Bar",
"originalValue": "{!PALETTE_CLOUD_BLUE_70}",
"name": "PROGRESS_BAR_COLOR_BACKGROUND_FILL"
},
"PROGRESS_BAR_COLOR_BACKGROUND_FILL_SUCCESS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#2e844a",
"comment": "The success background color of the fill for the Progress Bar",
"originalValue": "{!PALETTE_GREEN_50}",
"name": "PROGRESS_BAR_COLOR_BACKGROUND_FILL_SUCCESS"
},
"PROGRESS_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Borders of each indicator item within the Progress Indicator",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "PROGRESS_COLOR_BORDER"
},
"PROGRESS_COLOR_BORDER_SHADE": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Shaded borders of each indicator item within the Progress Indicator",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "PROGRESS_COLOR_BORDER_SHADE"
},
"PROGRESS_COLOR_BORDER_HOVER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#0176d3",
"comment": "Hovered border color of each indicator item within the Progress Indicator",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "PROGRESS_COLOR_BORDER_HOVER"
},
"PROGRESS_COLOR_BORDER_ACTIVE": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#1b96ff",
"comment": "Active border color of each indicator item within the Progress Indicator",
"originalValue": "{!PALETTE_BLUE_60}",
"name": "PROGRESS_COLOR_BORDER_ACTIVE"
},
"PROGRESS_BAR_HEIGHT": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height",
"*flex*",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "0.125rem",
"comment": "Height of the Progress Bar",
"originalValue": "0.125rem",
"name": "PROGRESS_BAR_HEIGHT"
},
"COLOR_BACKGROUND_PROGRESS_RING_CONTENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "#ffffff",
"comment": "Inner color for progress ring component",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "COLOR_BACKGROUND_PROGRESS_RING_CONTENT"
},
"PROGRESS_RING_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width",
"top",
"right",
"bottom",
"left"
],
"value": "0.1875rem",
"comment": "Thickness of the Progress Ring's ring",
"originalValue": "0.1875rem",
"name": "PROGRESS_RING_WIDTH"
},
"RADIO_BUTTON_GROUP_LINE_HEIGHT_TOUCH": {
"scope": "component",
"category": "line-height",
"type": "number",
"cssProperties": [
"font",
"*height"
],
"value": "2.69rem",
"comment": "Line height for touch screens",
"originalValue": "2.69rem",
"name": "RADIO_BUTTON_GROUP_LINE_HEIGHT_TOUCH"
},
"NOTIFICATION_COLOR_BACKGROUND_INVERSE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#747474",
"comment": "Dark notification component background color.",
"originalValue": "{!PALETTE_NEUTRAL_50}",
"name": "NOTIFICATION_COLOR_BACKGROUND_INVERSE"
},
"SLIDER_HANDLE_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#1b96ff",
"originalValue": "{!PALETTE_BLUE_60}",
"name": "SLIDER_HANDLE_COLOR_BACKGROUND"
},
"SLIDER_HANDLE_COLOR_BACKGROUND_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "SLIDER_HANDLE_COLOR_BACKGROUND_HOVER"
},
"SLIDER_HANDLE_COLOR_BACKGROUND_FOCUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "SLIDER_HANDLE_COLOR_BACKGROUND_FOCUS"
},
"SLIDER_HANDLE_COLOR_BACKGROUND_ACTIVE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#0176d3",
"originalValue": "{!PALETTE_BLUE_50}",
"name": "SLIDER_HANDLE_COLOR_BACKGROUND_ACTIVE"
},
"SLIDER_TRACK_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "SLIDER_TRACK_COLOR_BACKGROUND"
},
"SLIDER_TRACK_COLOR_BACKGROUND_FILL": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#1b96ff",
"originalValue": "{!PALETTE_BLUE_60}",
"name": "SLIDER_TRACK_COLOR_BACKGROUND_FILL"
},
"SLIDER_COLOR_BACKGROUND_DISABLED": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "SLIDER_COLOR_BACKGROUND_DISABLED"
},
"SLIDER_HANDLE_SHADOW": {
"scope": "component",
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "rgba(0, 0, 0, 0.16) 0 2px 3px",
"originalValue": "{!BLACK_TRANSPARENT_16} 0 2px 3px",
"name": "SLIDER_HANDLE_SHADOW"
},
"SLIDER_HANDLE_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "",
"cssProperties": [
"*width",
"*height"
],
"value": "1rem",
"originalValue": "1rem",
"name": "SLIDER_HANDLE_SIZE"
},
"SLIDER_TRACK_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "",
"cssProperties": [
"*width",
"*height"
],
"value": "4px",
"originalValue": "4px",
"name": "SLIDER_TRACK_HEIGHT"
},
"SLIDER_TRACK_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "",
"cssProperties": [
"*width",
"*height"
],
"value": "100%",
"originalValue": "100%",
"name": "SLIDER_TRACK_WIDTH"
},
"SPINNER_SIZE_XX_SMALL": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "Spinner size for xx-small modifier",
"cssProperties": [
"*width",
"*height",
"transform"
],
"value": "0.5rem",
"originalValue": "0.5rem",
"name": "SPINNER_SIZE_XX_SMALL"
},
"SPINNER_SIZE_X_SMALL": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "Spinner size for x-small modifier",
"cssProperties": [
"*width",
"*height",
"transform"
],
"value": "1rem",
"originalValue": "1rem",
"name": "SPINNER_SIZE_X_SMALL"
},
"SPINNER_SIZE_SMALL": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "Spinner size for small modifier",
"cssProperties": [
"*width",
"*height",
"transform"
],
"value": "1.25rem",
"originalValue": "1.25rem",
"name": "SPINNER_SIZE_SMALL"
},
"SPINNER_SIZE_MEDIUM": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "Spinner size for medium modifier",
"cssProperties": [
"*width",
"*height",
"transform"
],
"value": "2rem",
"originalValue": "2rem",
"name": "SPINNER_SIZE_MEDIUM"
},
"SPINNER_SIZE_LARGE": {
"scope": "component",
"category": "sizing",
"type": "size",
"comment": "Spinner size for large modifier",
"cssProperties": [
"*width",
"*height",
"transform"
],
"value": "2.75rem",
"originalValue": "2.75rem",
"name": "SPINNER_SIZE_LARGE"
},
"SPLIT_VIEW_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Split View background color.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "SPLIT_VIEW_COLOR_BACKGROUND"
},
"SPLIT_VIEW_COLOR_BACKGROUND_ROW_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Split View background color on row hover.",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "SPLIT_VIEW_COLOR_BACKGROUND_ROW_HOVER"
},
"SPLIT_VIEW_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Row dividers in Split View list",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "SPLIT_VIEW_COLOR_BORDER"
},
"SPLIT_VIEW_WIDTH": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "25rem",
"comment": "Default width for split view container",
"originalValue": "25rem",
"name": "SPLIT_VIEW_WIDTH"
},
"TABS_FONT_WEIGHT": {
"scope": "component",
"category": "font",
"type": "font-weight",
"cssProperties": [
"font",
"font-weight"
],
"value": "400",
"comment": "Use for active tab.",
"originalValue": "400",
"name": "TABS_FONT_WEIGHT"
},
"VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Vertical navigation shaded background color on row hover.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_HOVER"
},
"VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_ACTIVE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#f3f3f3",
"comment": "Vertical navigation shaded background color on row active.",
"originalValue": "{!PALETTE_NEUTRAL_95}",
"name": "VERTICAL_NAVIGATION_COLOR_BACKGROUND_SHADE_ROW_ACTIVE"
},
"WELCOME_MAT_TEXT_COLOR_INFO": {
"scope": "component",
"type": "color",
"category": "color",
"cssProperties": [
"color",
"background*",
"border*",
"box-shadow"
],
"value": "#032d60",
"comment": "Text color for the Info section",
"originalValue": "{!PALETTE_BLUE_20}",
"name": "WELCOME_MAT_TEXT_COLOR_INFO"
},
"WELCOME_MAT_BACKGROUND_IMAGE_INFO": {
"scope": "component",
"type": "string",
"category": "color",
"cssProperties": [
"color",
"background*",
"border*",
"box-shadow"
],
"value": "/welcome-mat/bg-info@2x.png",
"comment": "Background Image Path for the Welcome Mat Info section",
"originalValue": "/welcome-mat/bg-info@2x.png",
"name": "WELCOME_MAT_BACKGROUND_IMAGE_INFO"
},
"WELCOME_MAT_BACKGROUND_COLOR_INFO": {
"scope": "component",
"type": "color",
"category": "color",
"cssProperties": [
"color",
"background*",
"border*",
"box-shadow"
],
"value": "#cfe9fe",
"comment": "Background overflow color for the Welcome Mat Info section",
"originalValue": "{!PALETTE_CLOUD_BLUE_90}",
"name": "WELCOME_MAT_BACKGROUND_COLOR_INFO"
},
"WELCOME_MAT_COLOR_BACKGROUND_PROGRESS_BAR": {
"scope": "component",
"type": "color",
"category": "color",
"cssProperties": [
"color",
"background*",
"border*",
"box-shadow"
],
"value": "#ffffff",
"comment": "Progress Bar background is white",
"originalValue": "{!PALETTE_NEUTRAL_100}",
"name": "WELCOME_MAT_COLOR_BACKGROUND_PROGRESS_BAR"
},
"WELCOME_MAT_COLOR_ACTION_SHADOW": {
"scope": "component",
"type": "color",
"category": "color",
"cssProperties": [
"color",
"background*",
"border*",
"box-shadow"
],
"value": "rgba(0,0,0,0.05)",
"comment": "Box Shadow declaration",
"originalValue": "rgba(0,0,0,0.05)",
"name": "WELCOME_MAT_COLOR_ACTION_SHADOW"
},
"WELCOME_MAT_COLOR_ICON_COMPLETE": {
"scope": "component",
"type": "color",
"category": "color",
"cssProperties": [
"color",
"background*",
"border*",
"box-shadow"
],
"value": "#c9c9c9",
"comment": "Completed icon color for the Welcome Mat Boxes",
"originalValue": "{!PALETTE_NEUTRAL_80}",
"name": "WELCOME_MAT_COLOR_ICON_COMPLETE"
},
"WELCOME_MAT_FONT_SIZE_INFO_TITLE": {
"scope": "component",
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"value": "2.625rem",
"comment": "Font size for the info title",
"originalValue": "2.625rem",
"name": "WELCOME_MAT_FONT_SIZE_INFO_TITLE"
},
"WELCOME_MAT_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "52.0625rem",
"comment": "Welcome Mat Width",
"originalValue": "52.0625rem",
"name": "WELCOME_MAT_WIDTH"
},
"WELCOME_MAT_MIN_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "25rem",
"comment": "Min height for Overlay",
"originalValue": "25rem",
"name": "WELCOME_MAT_MIN_HEIGHT"
},
"WELCOME_MAT_MAX_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "37.5rem",
"comment": "Max height for Overlay",
"originalValue": "37.5rem",
"name": "WELCOME_MAT_MAX_HEIGHT"
},
"WELCOME_MAT_WIDTH_PROGRESS_BAR": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "12.5rem",
"comment": "Welcome Mat Progress Bar width",
"originalValue": "12.5rem",
"name": "WELCOME_MAT_WIDTH_PROGRESS_BAR"
},
"WELCOME_MAT_COMPLETE_ICON_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "1.25rem",
"comment": "Size of the green completed check mark",
"originalValue": "1.25rem",
"name": "WELCOME_MAT_COMPLETE_ICON_SIZE"
},
"WELCOME_MAT_CHECK_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "0.625rem",
"comment": "Size of the check mark in the green icon",
"originalValue": "0.625rem",
"name": "WELCOME_MAT_CHECK_SIZE"
},
"WELCOME_MAT_SPACING_INFO": {
"scope": "component",
"category": "spacing",
"type": "size",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "7.75rem",
"comment": "Bottom spacing (safe area) for background image",
"originalValue": "7.75rem",
"name": "WELCOME_MAT_SPACING_INFO"
}
},
"aliases": {
"PALETTE_PINK_50": {
"value": "#e3066a"
},
"PALETTE_NEUTRAL_15": {
"value": "#242424"
},
"PALETTE_VIOLET_15": {
"value": "#3d0157"
},
"PALETTE_DARK_GRAY_TRANSPARENT_40": {
"value": "rgba(8, 7, 7, 0.4)"
},
"PALETTE_YELLOW_70": {
"value": "#e4a201"
},
"PALETTE_BLUE_10": {
"value": "#001639"
},
"PALETTE_INDIGO_90": {
"value": "#e0e5f8"
},
"PALETTE_BLUE_65": {
"value": "#57a3fd"
},
"WHITE_TRANSPARENT_30": {
"value": "rgba(255, 255, 255, 0.30)"
},
"PALETTE_GRAY_8": {
"value": "#969492"
},
"PALETTE_PINK_40": {
"value": "#b60554"
},
"WHITE_TRANSPARENT_75": {
"value": "rgba(255, 255, 255, 0.75)"
},
"WHITE_TRANSPARENT_97": {
"value": "rgba(255, 255, 255, 0.97)"
},
"PALETTE_PINK_95": {
"value": "#fef0f3"
},
"PALETTE_DARK_GRAY_TRANSPARENT_30": {
"value": "rgba(8, 7, 7, 0.3)"
},
"PALETTE_YELLOW_60": {
"value": "#ca8501"
},
"PALETTE_INDIGO_80": {
"value": "#bec7f6"
},
"WHITE_TRANSPARENT_20": {
"value": "rgba(255, 255, 255, 0.20)"
},
"PALETTE_GRAY_9": {
"value": "#706e6b"
},
"PALETTE_DARK_GRAY_TRANSPARENT_20": {
"value": "rgba(8, 7, 7, 0.2)"
},
"PALETTE_YELLOW_50": {
"value": "#a86403"
},
"PALETTE_INDIGO_70": {
"value": "#9ea9f1"
},
"WHITE_TRANSPARENT_10": {
"value": "rgba(255, 255, 255, 0.10)"
},
"PALETTE_PINK_30": {
"value": "#8a033e"
},
"PALETTE_PURPLE_15": {
"value": "#300b60"
},
"PALETTE_DARK_GRAY_TRANSPARENT_10": {
"value": "rgba(8, 7, 7, 0.1)"
},
"PALETTE_TEAL_15": {
"value": "#072825"
},
"PALETTE_YELLOW_40": {
"value": "#8c4b02"
},
"PALETTE_YELLOW_95": {
"value": "#fbf3e0"
},
"PALETTE_INDIGO_60": {
"value": "#7f8ced"
},
"PALETTE_PINK_20": {
"value": "#61022a"
},
"PALETTE_PINK_65": {
"value": "#fe7298"
},
"PALETTE_YELLOW_30": {
"value": "#6f3400"
},
"BLACK_TRANSPARENT_90": {
"value": "rgba(0, 0, 0, 0.90)"
},
"PALETTE_ORANGE_90": {
"value": "#fedfd0"
},
"PALETTE_INDIGO_50": {
"value": "#5867e8"
},
"PALETTE_GREEN_15": {
"value": "#0c2912"
},
"PALETTE_PINK_10": {
"value": "#370114"
},
"PALETTE_YELLOW_20": {
"value": "#4f2100"
},
"PALETTE_WARM_GRAY_10": {
"value": "#514f4d"
},
"BLACK_TRANSPARENT_80": {
"value": "rgba(0, 0, 0, 0.80)"
},
"PALETTE_ORANGE_80": {
"value": "#ffba90"
},
"PALETTE_INDIGO_40": {
"value": "#3a49da"
},
"PALETTE_BLUE_15": {
"value": "#03234d"
},
"PALETTE_INDIGO_95": {
"value": "#f1f3fb"
},
"PALETTE_YELLOW_10": {
"value": "#281202"
},
"PALETTE_WARM_GRAY_11": {
"value": "#3e3e3c"
},
"BLACK_TRANSPARENT_70": {
"value": "rgba(0, 0, 0, 0.70)"
},
"PALETTE_YELLOW_65": {
"value": "#d79304"
},
"PALETTE_ORANGE_70": {
"value": "#fe9339"
},
"PALETTE_INDIGO_30": {
"value": "#2f2cb7"
},
"BRAND_LIGHT_ACTIVE": {
"value": "#e3e5ed"
},
"PALETTE_WARM_GRAY_12": {
"value": "#2B2826"
},
"BLACK_TRANSPARENT_60": {
"value": "rgba(0, 0, 0, 0.60)"
},
"PALETTE_ORANGE_60": {
"value": "#dd7a01"
},
"PALETTE_INDIGO_20": {
"value": "#321d71"
},
"PALETTE_COOL_GRAY_1": {
"value": "#FFFFFF"
},
"WHITE_TRANSPARENT_15": {
"value": "rgba(255, 255, 255, 0.15)"
},
"PALETTE_WARM_GRAY_13": {
"value": "#080707"
},
"BLACK_TRANSPARENT_50": {
"value": "rgba(0, 0, 0, 0.50)"
},
"PALETTE_ORANGE_50": {
"value": "#a96404"
},
"PALETTE_INDIGO_10": {
"value": "#200647"
},
"PALETTE_INDIGO_65": {
"value": "#8e9bef"
},
"PALETTE_COOL_GRAY_2": {
"value": "#F9F9FA"
},
"PALETTE_RED_90": {
"value": "#feded8"
},
"WHITE": {
"value": "#FFFFFF"
},
"BLACK_TRANSPARENT_40": {
"value": "rgba(0, 0, 0, 0.40)"
},
"PALETTE_ORANGE_40": {
"value": "#825101"
},
"PALETTE_ORANGE_95": {
"value": "#fff1ea"
},
"PALETTE_COOL_GRAY_10": {
"value": "#4E5356"
},
"PALETTE_COOL_GRAY_3": {
"value": "#F2F2F3"
},
"PALETTE_PINK_15": {
"value": "#4b0620"
},
"BRAND_BACKGROUND_PRIMARY": {
"value": "#eef4ff"
},
"BLACK_TRANSPARENT_30": {
"value": "rgba(0, 0, 0, 0.30)"
},
"BRAND_PRIMARY": {
"value": "#1b96ff"
},
"PALETTE_ORANGE_30": {
"value": "#5f3e02"
},
"PALETTE_COOL_GRAY_11": {
"value": "#3E4041"
},
"PALETTE_COOL_GRAY_4": {
"value": "#E9EAEC"
},
"PALETTE_RED_80": {
"value": "#feb8ab"
},
"PALETTE_WARM_GRAY_1": {
"value": "#FFFFFF"
},
"BLACK_TRANSPARENT_20": {
"value": "rgba(0, 0, 0, 0.20)"
},
"PALETTE_YELLOW_15": {
"value": "#2e2204"
},
"PALETTE_ORANGE_20": {
"value": "#3e2b02"
},
"PALETTE_COOL_GRAY_12": {
"value": "#292C2E"
},
"BRAND_CONTRAST_ACTIVE": {
"value": "#0d0e12"
},
"PALETTE_COOL_GRAY_5": {
"value": "#D9DBDD"
},
"PALETTE_RED_70": {
"value": "#fe8f7d"
},
"PALETTE_WARM_GRAY_2": {
"value": "#fafaf9"
},
"BLACK_TRANSPARENT_10": {
"value": "rgba(0, 0, 0, 0.10)"
},
"PALETTE_ORANGE_10": {
"value": "#201600"
},
"PALETTE_ORANGE_65": {
"value": "#f38303"
},
"PALETTE_COOL_GRAY_13": {
"value": "#070808"
},
"PALETTE_COOL_GRAY_6": {
"value": "#C4C6CA"
},
"PALETTE_RED_60": {
"value": "#fe5c4c"
},
"PALETTE_WARM_GRAY_3": {
"value": "#f3f2f2"
},
"PALETTE_INDIGO_15": {
"value": "#1f0974"
},
"PALETTE_COOL_GRAY_7": {
"value": "#ABADB0"
},
"PALETTE_RED_50": {
"value": "#ea001e"
},
"PALETTE_RED_95": {
"value": "#fef1ee"
},
"PALETTE_WARM_GRAY_4": {
"value": "#ecebea"
},
"BRAND_DARK": {
"value": "#0176d3"
},
"PALETTE_CLOUD_BLUE_90": {
"value": "#cfe9fe"
},
"PALETTE_COOL_GRAY_8": {
"value": "#919297"
},
"PALETTE_RED_40": {
"value": "#ba0517"
},
"BRAND_ACCESSIBLE": {
"value": "#0176d3"
},
"PALETTE_WARM_GRAY_5": {
"value": "#dddbda"
},
"BLACK_TRANSPARENT_24": {
"value": "rgba(0, 0, 0, 0.24)"
},
"PALETTE_CLOUD_BLUE_80": {
"value": "#90d0fe"
},
"BRAND_BACKGROUND_DARK": {
"value": "#014486"
},
"PALETTE_COOL_GRAY_9": {
"value": "#6B6D70"
},
"PALETTE_RED_30": {
"value": "#8e030f"
},
"PALETTE_WARM_GRAY_6": {
"value": "#c9c7c5"
},
"PALETTE_CLOUD_BLUE_70": {
"value": "#1ab9ff"
},
"PALETTE_RED_20": {
"value": "#640103"
},
"PALETTE_WARM_GRAY_7": {
"value": "#b0adab"
},
"BRAND_TEXT_LINK_ACTIVE": {
"value": "#014486"
},
"PALETTE_ORANGE_15": {
"value": "#371e03"
},
"PALETTE_CLOUD_BLUE_60": {
"value": "#0d9dda"
},
"PALETTE_RED_10": {
"value": "#300c01"
},
"PALETTE_RED_65": {
"value": "#fe7765"
},
"PALETTE_WARM_GRAY_8": {
"value": "#969492"
},
"BLACK_TRANSPARENT_05": {
"value": "rgba(0, 0, 0, 0.05)"
},
"BLACK_TRANSPARENT_16": {
"value": "rgba(0, 0, 0, 0.16)"
},
"PALETTE_CLOUD_BLUE_50": {
"value": "#107cad"
},
"PALETTE_HOT_ORANGE_90": {
"value": "#ffded5"
},
"PALETTE_WARM_GRAY_9": {
"value": "#706e6b"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_90": {
"value": "rgba(255, 255, 255, 0.9)"
},
"PALETTE_NEUTRAL_90": {
"value": "#e5e5e5"
},
"PALETTE_CLOUD_BLUE_40": {
"value": "#05628a"
},
"PALETTE_VIOLET_90": {
"value": "#f2defe"
},
"PALETTE_CLOUD_BLUE_95": {
"value": "#eaf5fe"
},
"PALETTE_HOT_ORANGE_80": {
"value": "#feb9a5"
},
"BRAND_DISABLED": {
"value": "#c9c7c5"
},
"BLACK_TRANSPARENT_07": {
"value": "rgba(0, 0, 0, 0.07)"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_80": {
"value": "rgba(255, 255, 255, 0.8)"
},
"PALETTE_NEUTRAL_80": {
"value": "#c9c9c9"
},
"BRAND_TEXT_LINK": {
"value": "#0b5cab"
},
"PALETTE_CLOUD_BLUE_30": {
"value": "#084968"
},
"PALETTE_VIOLET_80": {
"value": "#e5b9fe"
},
"PALETTE_HOT_ORANGE_70": {
"value": "#ff906e"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_70": {
"value": "rgba(255, 255, 255, 0.7)"
},
"PALETTE_NEUTRAL_70": {
"value": "#aeaeae"
},
"PALETTE_CLOUD_BLUE_20": {
"value": "#023248"
},
"PALETTE_VIOLET_70": {
"value": "#d892fe"
},
"PALETTE_HOT_ORANGE_60": {
"value": "#ff5d2d"
},
"PALETTE_NEUTRAL_100": {
"value": "#ffffff"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_60": {
"value": "rgba(255, 255, 255, 0.6)"
},
"PALETTE_NEUTRAL_60": {
"value": "#939393"
},
"PALETTE_CLOUD_BLUE_10": {
"value": "#001a28"
},
"PALETTE_PURPLE_90": {
"value": "#ece1f9"
},
"PALETTE_VIOLET_60": {
"value": "#cb65ff"
},
"PALETTE_CLOUD_BLUE_65": {
"value": "#08abed"
},
"PALETTE_HOT_ORANGE_50": {
"value": "#d83a00"
},
"PALETTE_TEAL_90": {
"value": "#acf3e4"
},
"PALETTE_RED_15": {
"value": "#4a0c04"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_50": {
"value": "rgba(255, 255, 255, 0.5)"
},
"PALETTE_NEUTRAL_50": {
"value": "#747474"
},
"BRAND_ACCESSIBLE_ACTIVE": {
"value": "#014486"
},
"PALETTE_PURPLE_80": {
"value": "#d7bff2"
},
"PALETTE_VIOLET_50": {
"value": "#ba01ff"
},
"PALETTE_HOT_ORANGE_40": {
"value": "#aa3001"
},
"PALETTE_TEAL_80": {
"value": "#04e1cb"
},
"PALETTE_HOT_ORANGE_95": {
"value": "#fef1ed"
},
"BRAND_DARK_ACTIVE": {
"value": "#253045"
},
"PALETTE_GREEN_90": {
"value": "#cdefc4"
},
"PALETTE_GRAY_10": {
"value": "#514f4d"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_40": {
"value": "rgba(255, 255, 255, 0.4)"
},
"PALETTE_NEUTRAL_40": {
"value": "#5c5c5c"
},
"PALETTE_NEUTRAL_95": {
"value": "#f3f3f3"
},
"PALETTE_PURPLE_70": {
"value": "#c29ef1"
},
"PALETTE_VIOLET_40": {
"value": "#9602c7"
},
"PALETTE_HOT_ORANGE_30": {
"value": "#7e2600"
},
"PALETTE_TEAL_70": {
"value": "#01c3b3"
},
"PALETTE_VIOLET_95": {
"value": "#f9f0ff"
},
"PALETTE_GREEN_80": {
"value": "#91db8b"
},
"PALETTE_BLUE_90": {
"value": "#d8e6fe"
},
"PALETTE_GRAY_11": {
"value": "#3e3e3c"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_30": {
"value": "rgba(255, 255, 255, 0.3)"
},
"PALETTE_NEUTRAL_30": {
"value": "#444444"
},
"PALETTE_PURPLE_60": {
"value": "#ad7bee"
},
"PALETTE_VIOLET_30": {
"value": "#730394"
},
"PALETTE_HOT_ORANGE_20": {
"value": "#4a2413"
},
"PALETTE_TEAL_60": {
"value": "#06a59a"
},
"PALETTE_GREEN_70": {
"value": "#45c65a"
},
"PALETTE_BLUE_80": {
"value": "#aacbff"
},
"PALETTE_GRAY_12": {
"value": "#2B2826"
},
"PALETTE_GRAY_1": {
"value": "#FFFFFF"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_20": {
"value": "rgba(255, 255, 255, 0.2)"
},
"PALETTE_NEUTRAL_20": {
"value": "#2e2e2e"
},
"WHITE_TRANSPARENT_90": {
"value": "rgba(255, 255, 255, 0.90)"
},
"BRAND_CONTRAST": {
"value": "#1a1b1e"
},
"PALETTE_PURPLE_50": {
"value": "#9050e9"
},
"PALETTE_VIOLET_20": {
"value": "#481a54"
},
"PALETTE_HOT_ORANGE_10": {
"value": "#281202"
},
"PALETTE_TEAL_50": {
"value": "#0b827c"
},
"PALETTE_HOT_ORANGE_65": {
"value": "#ff784f"
},
"PALETTE_GREEN_60": {
"value": "#3ba755"
},
"PALETTE_BLUE_70": {
"value": "#78b0fd"
},
"PALETTE_GRAY_13": {
"value": "#080707"
},
"PALETTE_GRAY_2": {
"value": "#fafaf9"
},
"PALETTE_NEUTRAL_10": {
"value": "#181818"
},
"WHITE_TRANSPARENT_80": {
"value": "rgba(255, 255, 255, 0.80)"
},
"PALETTE_NEUTRAL_65": {
"value": "#a0a0a0"
},
"PALETTE_PURPLE_40": {
"value": "#7526e3"
},
"PALETTE_VIOLET_10": {
"value": "#2e0039"
},
"PALETTE_CLOUD_BLUE_15": {
"value": "#0a2636"
},
"PALETTE_TEAL_40": {
"value": "#056764"
},
"PALETTE_PURPLE_95": {
"value": "#f6f2fb"
},
"PALETTE_VIOLET_65": {
"value": "#d17dfe"
},
"PALETTE_DARK_GRAY_TRANSPARENT_90": {
"value": "rgba(8, 7, 7, 0.9)"
},
"PALETTE_TEAL_95": {
"value": "#def9f3"
},
"PALETTE_GREEN_50": {
"value": "#2e844a"
},
"PALETTE_BLUE_60": {
"value": "#1b96ff"
},
"PALETTE_GRAY_3": {
"value": "#f3f2f2"
},
"BRAND_PRIMARY_ACTIVE": {
"value": "#0176d3"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_10": {
"value": "rgba(255, 255, 255, 0.1)"
},
"PALETTE_PINK_90": {
"value": "#fddde3"
},
"PALETTE_PURPLE_30": {
"value": "#5a1ba9"
},
"PALETTE_TEAL_30": {
"value": "#024d4c"
},
"PALETTE_DARK_GRAY_TRANSPARENT_80": {
"value": "rgba(8, 7, 7, 0.8)"
},
"PALETTE_GREEN_40": {
"value": "#396547"
},
"PALETTE_BLUE_50": {
"value": "#0176d3"
},
"PALETTE_GREEN_95": {
"value": "#ebf7e6"
},
"PALETTE_GRAY_4": {
"value": "#ecebea"
},
"PALETTE_NEUTRAL_00": {
"value": "#000000"
},
"PALETTE_PINK_80": {
"value": "#fdb6c5"
},
"PALETTE_PURPLE_20": {
"value": "#401075"
},
"PALETTE_TEAL_20": {
"value": "#023434"
},
"PALETTE_DARK_GRAY_TRANSPARENT_70": {
"value": "rgba(8, 7, 7, 0.7)"
},
"PALETTE_GREEN_30": {
"value": "#194e31"
},
"PALETTE_BLUE_40": {
"value": "#0b5cab"
},
"PALETTE_BLUE_95": {
"value": "#eef4ff"
},
"PALETTE_GRAY_5": {
"value": "#dddbda"
},
"WHITE_TRANSPARENT_60": {
"value": "rgba(255, 255, 255, 0.60)"
},
"PALETTE_PINK_70": {
"value": "#fe8aa7"
},
"PALETTE_PURPLE_10": {
"value": "#240643"
},
"PALETTE_TEAL_10": {
"value": "#071b12"
},
"PALETTE_PURPLE_65": {
"value": "#b78def"
},
"PALETTE_DARK_GRAY_TRANSPARENT_60": {
"value": "rgba(8, 7, 7, 0.6)"
},
"PALETTE_TEAL_65": {
"value": "#03b4a7"
},
"PALETTE_YELLOW_90": {
"value": "#f9e3b6"
},
"BRAND_LIGHT": {
"value": "#f4f6fe"
},
"PALETTE_GREEN_20": {
"value": "#1c3326"
},
"PALETTE_BLUE_30": {
"value": "#014486"
},
"PALETTE_GRAY_6": {
"value": "#c9c7c5"
},
"WHITE_TRANSPARENT_50": {
"value": "rgba(255, 255, 255, 0.50)"
},
"PALETTE_PINK_60": {
"value": "#ff538a"
},
"PALETTE_DARK_GRAY_TRANSPARENT_50": {
"value": "rgba(8, 7, 7, 0.5)"
},
"PALETTE_HOT_ORANGE_15": {
"value": "#421604"
},
"PALETTE_YELLOW_80": {
"value": "#fcc003"
},
"PALETTE_GREEN_10": {
"value": "#071b12"
},
"PALETTE_BLUE_20": {
"value": "#032d60"
},
"PALETTE_GREEN_65": {
"value": "#41b658"
},
"WHITE_TRANSPARENT_40": {
"value": "rgba(255, 255, 255, 0.40)"
},
"PALETTE_GRAY_7": {
"value": "#b0adab"
},
"BLACK": {
"value": "#000000"
},
"ALUMINIUM_BLUE": {
"value": "hsl(210, 25%, 48%)"
},
"FOREST_GREEN": {
"value": "#027E46"
},
"KOROMIKO": {
"value": "#FFB75D"
},
"RAIN_PURPLE_900": {
"value": "hsl(257, 39.2%, 42%)"
},
"SUNSHADE": {
"value": "#FF9E2C"
},
"FUN_GREEN": {
"value": "#028048"
},
"ATHENS_BLUE": {
"value": "hsl(210, 42.36%, 96.53%)"
},
"ROME_BLUE": {
"value": "hsl(210, 30.56%, 82.72%)"
},
"EMERALD": {
"value": "#4BCA81"
},
"MALIBU": {
"value": "#5EB4FF"
},
"SEA_GREEN_100": {
"value": "hsl(177, 64.7%, 51.9%)"
},
"GEYSER": {
"value": "#D8DDE6"
},
"RHINO_BLUE": {
"value": "hsl(210, 42.86%, 28%)"
},
"SALEM": {
"value": "#04844B"
},
"SEA_GREEN_300": {
"value": "hsl(177, 61.3%, 47.1%)"
},
"REGENT_GREY": {
"value": "#7E8C99"
},
"MIDNIGHT_BLUE": {
"value": "#00396B"
},
"SEA_GREEN_500": {
"value": "hsl(177, 62.6%, 41.2%)"
},
"GHOST_BLUE": {
"value": "hsl(210, 25.93%, 59.5%)"
},
"SKY_BLUE_100": {
"value": "hsl(208, 93.3%, 70.1%)"
},
"SEA_GREEN_700": {
"value": "hsl(177, 65.3%, 35.7%)"
},
"CERULEAN": {
"value": "#00A1DF"
},
"SNOWY_MINT": {
"value": "#D9FFDF"
},
"KAITOKE_GREEN": {
"value": "#004a29"
},
"SKY_BLUE_300": {
"value": "hsl(208, 89.6%, 61.4%)"
},
"SEA_GREEN_900": {
"value": "hsl(177, 65.3%, 30.9%)"
},
"ENDEAVOUR": {
"value": "#005FB2"
},
"TANGERINE": {
"value": "#FF9A3C"
},
"SANTORINI": {
"value": "#006DCC"
},
"DEEP_BLUSH": {
"value": "#EA8288"
},
"SKY_BLUE_500": {
"value": "hsl(208, 84.3%, 55.3%)"
},
"TOREA_BAY": {
"value": "#0B2399"
},
"DEEP_COVE": {
"value": "#061C3F"
},
"AZURE": {
"value": "#1589EE"
},
"BISCAY": {
"value": "#16325C"
},
"MAROON": {
"value": "#870500"
},
"SKY_BLUE_700": {
"value": "hsl(208, 73.9%, 48.3%)"
},
"STEAM": {
"value": "#E0E5EE"
},
"CINNAMON": {
"value": "#844800"
},
"VALENCIA": {
"value": "#D4504C"
},
"SKY_BLUE_900": {
"value": "hsl(208, 77%, 41.8%)"
},
"LINK_WATER": {
"value": "#F4F6F9"
},
"TRANSPARENT": {
"value": "transparent"
},
"TABASCO": {
"value": "#A61A14"
},
"BIGSTONE_BLUE": {
"value": "hsl(210, 66.67%, 12%)"
},
"SPIDER_BLUE": {
"value": "hsl(210, 28.57%, 72%)"
},
"SCIENCE_BLUE": {
"value": "#0070D2"
},
"LEMON_CHIFFON": {
"value": "#FAFFBD"
},
"SAN_JUAN": {
"value": "#2A426C"
},
"RAIN_PURPLE_100": {
"value": "hsl(257, 83.1%, 76.3%)"
},
"MEXICAN_RED": {
"value": "#A12B2B"
},
"ROLLINGSTONE_BLUE": {
"value": "hsl(210, 33.33%, 37.5%)"
},
"WHITE_LILAC": {
"value": "#EEF1F6"
},
"FLUSH_MAHOGANY": {
"value": "#C23934"
},
"GRADIENT_SHADOW_BOTTOM": {
"value": "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)"
},
"RAIN_PURPLE_300": {
"value": "hsl(257, 72.2%, 67.6%)"
},
"GORSE": {
"value": "#fff03f"
},
"REGENT_GREY_TRANSPARENT_80": {
"value": "rgba(126, 140, 153, 0.80)"
},
"ZODIAC_BLUE": {
"value": "hsl(210, 53.85%, 19.5%)"
},
"RAIN_PURPLE_500": {
"value": "hsl(257, 61.2%, 58.8%)"
},
"PIPPIN": {
"value": "#FFDDE1"
},
"SPARTA_BLUE": {
"value": "hsl(210, 32.2%, 92.62%)"
},
"PATTEN_BLUE": {
"value": "#D8EDFF"
},
"RAIN_PURPLE_700": {
"value": "hsl(257, 50.2%, 50%)"
},
"BORDER_RADIUS_SMALL": {
"value": "0.125rem"
},
"BORDER_RADIUS_MEDIUM": {
"value": "0.25rem"
},
"BORDER_RADIUS_LARGE": {
"value": "0.5rem"
},
"BORDER_RADIUS_CIRCLE": {
"value": "50%"
},
"BORDER_RADIUS_PILL": {
"value": "15rem"
},
"BORDER_WIDTH_THIN": {
"value": "1px"
},
"BORDER_WIDTH_THICK": {
"value": "2px"
},
"OFFSET_NONE": {
"value": "0"
},
"OFFSET_X_SMALL": {
"value": 2
},
"OFFSET_SMALL": {
"value": 3
},
"OFFSET_MEDIUM": {
"value": 4
},
"OFFSET_LARGE": {
"value": 8
},
"OFFSET_X_LARGE": {
"value": 16
},
"OFFSET_XX_LARGE": {
"value": 32
},
"DURATION_INSTANTLY": {
"value": "0s"
},
"DURATION_IMMEDIATELY": {
"value": "0.05s"
},
"DURATION_QUICKLY": {
"value": "0.1s"
},
"DURATION_PROMPTLY": {
"value": "0.2s"
},
"DURATION_SLOWLY": {
"value": "0.4s"
},
"DURATION_PAUSED": {
"value": "3.2s"
},
"SANS_SERIF": {
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
},
"MONOSPACE": {
"value": "Consolas, Menlo, Monaco, Courier, monospace"
},
"FONT_SIZE_1": {
"value": "0.625rem"
},
"FONT_SIZE_2": {
"value": "0.75rem"
},
"FONT_SIZE_3": {
"value": "0.8125rem"
},
"FONT_SIZE_4": {
"value": "0.875rem"
},
"FONT_SIZE_5": {
"value": "1rem"
},
"FONT_SIZE_6": {
"value": "1.125rem"
},
"FONT_SIZE_7": {
"value": "1.25rem"
},
"FONT_SIZE_8": {
"value": "1.5rem"
},
"FONT_SIZE_9": {
"value": "1.75rem"
},
"FONT_SIZE_10": {
"value": "2rem"
},
"FONT_SIZE_11": {
"value": "2.625rem"
},
"FONT_WEIGHT_LIGHT": {
"value": "300"
},
"FONT_WEIGHT_REGULAR": {
"value": "400"
},
"FONT_WEIGHT_BOLD": {
"value": "700"
},
"SIZE_SQUARE_XX_LARGE": {
"value": "2rem"
},
"SIZE_X_SMALL": {
"value": "12rem"
},
"SIZE_XXX_SMALL": {
"value": "3rem"
},
"SIZE_SQUARE_SMALL": {
"value": "0.875rem"
},
"SIZE_XX_SMALL": {
"value": "6rem"
},
"SIZE_SMALL": {
"value": "15rem"
},
"SIZE_SQUARE_XX_SMALL": {
"value": "0.75rem"
},
"SIZE_SQUARE_XXX_LARGE": {
"value": "2.25rem"
},
"SIZE_SQUARE_X_LARGE": {
"value": "1.5rem"
},
"SIZE_MEDIUM": {
"value": "20rem"
},
"SIZE_X_LARGE": {
"value": "40rem"
},
"SIZE_SQUARE_LARGE": {
"value": "1.25rem"
},
"SIZE_SQUARE_MEDIUM": {
"value": "1rem"
},
"SIZE_XX_LARGE": {
"value": "60rem"
},
"SIZE_SQUARE_X_SMALL": {
"value": "0.8125rem"
},
"SIZE_SQUARE_XXX_SMALL": {
"value": "0.5rem"
},
"SIZE_LARGE": {
"value": "25rem"
},
"SPACING_X_SMALL": {
"value": "0.5rem"
},
"SPACING_XXX_SMALL": {
"value": "0.125rem"
},
"SPACING_XX_SMALL": {
"value": "0.25rem"
},
"SPACING_SMALL": {
"value": "0.75rem"
},
"SPACING_MEDIUM": {
"value": "1rem"
},
"SPACING_NONE": {
"value": "0"
},
"SPACING_X_LARGE": {
"value": "2rem"
},
"SPACING_XX_LARGE": {
"value": "3rem"
},
"SPACING_LARGE": {
"value": "1.5rem"
}
}
}