@salesforce-ux/design-tokens
Version:
Salesforce Design System Tokens & Styling Hooks
842 lines • 25.5 kB
JSON
{
"slds": {
"g": {
"sizing": {
"content": {
"1": {
"$type": "dimension",
"$value": {
"value": 20,
"unit": "ch"
},
"$deprecated": true,
"$description": "Sizing Content 1.",
"name": "1",
"originalValue": "20ch",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "1",
"themeOwned": false,
"cssProperties": [
"border-width",
"width"
]
},
"2": {
"$type": "dimension",
"$value": {
"value": 45,
"unit": "ch"
},
"$deprecated": true,
"$description": "Sizing Content 2.",
"name": "2",
"originalValue": "45ch",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "2",
"themeOwned": false,
"cssProperties": [
"border-width",
"width"
]
},
"3": {
"$type": "dimension",
"$value": {
"value": 60,
"unit": "ch"
},
"$deprecated": true,
"$description": "Sizing Content 3.",
"name": "3",
"originalValue": "60ch",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "3",
"themeOwned": false,
"cssProperties": [
"border-width",
"width"
]
}
},
"heading": {
"1": {
"$type": "dimension",
"$value": {
"value": 20,
"unit": "ch"
},
"$deprecated": true,
"$description": "Sizing Heading 1.",
"name": "1",
"originalValue": "20ch",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "1",
"themeOwned": false,
"cssProperties": [
"border-width",
"width"
]
},
"2": {
"$type": "dimension",
"$value": {
"value": 25,
"unit": "ch"
},
"$deprecated": true,
"$description": "Sizing Heading 2.",
"name": "2",
"originalValue": "25ch",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "2",
"themeOwned": false,
"cssProperties": [
"border-width",
"width"
]
},
"3": {
"$type": "dimension",
"$value": {
"value": 35,
"unit": "ch"
},
"$deprecated": true,
"$description": "Sizing Heading 3.",
"name": "3",
"originalValue": "35ch",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "3",
"themeOwned": false,
"cssProperties": [
"border-width",
"width"
]
}
}
},
"font": {
"family": {
"$type": "fontFamily",
"$value": "{slds.g.font.family-base}",
"$deprecated": true,
"$description": "System font stack for your application.",
"name": "family",
"originalValue": "{slds.g.font.family-base}",
"type": "fontFamily",
"category": "",
"scope": "",
"namespace": "family",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-family"
]
},
"weight": {
"bold": {
"$type": "fontWeight",
"$value": "bold",
"$deprecated": true,
"$description": "Bold font-weight, use to increase emphasis.",
"name": "bold",
"originalValue": "bold",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "bold",
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
},
"lineheight": {
"1": {
"$type": "number",
"$value": "{slds.g.font.line.height.1}",
"$deprecated": true,
"$description": "Font Lineheight 1 | 16px.",
"name": "1",
"originalValue": "{slds.g.font.line.height.1}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"2": {
"$type": "number",
"$value": "{slds.g.font.line.height.2}",
"$deprecated": true,
"$description": "Font Lineheight 2 | 20px.",
"name": "2",
"originalValue": "{slds.g.font.line.height.2}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"3": {
"$type": "number",
"$value": "{slds.g.font.line.height.3}",
"$deprecated": true,
"$description": "Font Lineheight 3 | 22px.",
"name": "3",
"originalValue": "{slds.g.font.line.height.3}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "3",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"4": {
"$type": "number",
"$value": "{slds.g.font.line.height.4}",
"$deprecated": true,
"$description": "Font Lineheight 4 | 24px.",
"name": "4",
"originalValue": "{slds.g.font.line.height.4}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "4",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"5": {
"$type": "number",
"$value": "{slds.g.font.line.height.5}",
"$deprecated": true,
"$description": "Font Lineheight 5 | 28px.",
"name": "5",
"originalValue": "{slds.g.font.line.height.5}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "5",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"6": {
"$type": "number",
"$value": "{slds.g.font.line.height.6}",
"$deprecated": true,
"$description": "Font Lineheight 6 | 32px.",
"name": "6",
"originalValue": "{slds.g.font.line.height.6}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "6",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"base": {
"$type": "number",
"$value": "{slds.g.font.line.height.base}",
"$deprecated": true,
"$description": "Font Lineheight Base | 1.5.",
"name": "base",
"originalValue": "{slds.g.font.line.height.base}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "base",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
},
"var": {
"base": {
"$type": "number",
"$value": "{slds.g.font.line.height.var.base}",
"$deprecated": true,
"name": "base",
"originalValue": "{slds.g.font.line.height.var.base}",
"type": "number",
"syntax": "<number>",
"category": "",
"scope": "",
"namespace": "base",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"line-height"
]
}
}
}
},
"color": {
"accent": {
"light": {
"1": {
"$type": "color",
"$value": "{alias.palette.electricBlue.95}",
"$deprecated": true,
"$description": "Color Accent Light 1.",
"name": "1",
"originalValue": "{alias.palette.electricBlue.95}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"2": {
"$type": "color",
"$value": "{alias.palette.electricBlue.90}",
"$deprecated": true,
"$description": "Color Accent Light 2.",
"name": "2",
"originalValue": "{alias.palette.electricBlue.90}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"dark": {
"1": {
"$type": "color",
"$value": "{alias.palette.electricBlue.20}",
"$deprecated": true,
"$description": "Color Accent Dark 1.",
"name": "1",
"originalValue": "{alias.palette.electricBlue.20}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"2": {
"$type": "color",
"$value": "{alias.palette.electricBlue.10}",
"$deprecated": true,
"$description": "Color Accent Dark 2.",
"name": "2",
"originalValue": "{alias.palette.electricBlue.10}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"error": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Step 100 in the Error color scale.",
"name": "100",
"originalValue": "{slds.g.color.neutral.base.100}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "100",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"warning": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Step 100 in the Warning color scale.",
"name": "100",
"originalValue": "{slds.g.color.neutral.base.100}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "100",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"success": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Step 100 in the Success color scale.",
"name": "100",
"originalValue": "{slds.g.color.neutral.base.100}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "100",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"info": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Info Base 100 - if used as a background, please use Info Base 60-10 to meet accessibility guidelines.",
"name": "100",
"originalValue": "{slds.g.color.neutral.base.100}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "100",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"brand": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Step 100 in the Brand color scale.",
"name": "100",
"originalValue": "{slds.g.color.neutral.base.100}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "100",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
},
"shadow": {
"insetinverse": {
"focus": {
"1": {
"$type": "shadow",
"$value": "{slds.g.shadow.inset.inverse.focus.1}",
"$deprecated": true,
"$description": "Shadow Inset inverse Focus 1.",
"name": "1",
"originalValue": "{slds.g.shadow.inset.inverse.focus.1}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
},
"blockstart": {
"1": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.start.1}",
"$deprecated": true,
"$description": "Shadow Blockstart 1.",
"name": "1",
"originalValue": "{slds.g.shadow.block.start.1}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"2": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.start.2}",
"$deprecated": true,
"$description": "Shadow Blockstart 2.",
"name": "2",
"originalValue": "{slds.g.shadow.block.start.2}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"3": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.start.3}",
"$deprecated": true,
"$description": "Shadow Blockstart 3.",
"name": "3",
"originalValue": "{slds.g.shadow.block.start.3}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "3",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"4": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.start.4}",
"$deprecated": true,
"$description": "Shadow Blockstart 4.",
"name": "4",
"originalValue": "{slds.g.shadow.block.start.4}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "4",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"blockend": {
"1": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.end.1}",
"$deprecated": true,
"$description": "Shadow Blockend 1.",
"name": "1",
"originalValue": "{slds.g.shadow.block.end.1}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"2": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.end.2}",
"$deprecated": true,
"$description": "Shadow Blockend 2.",
"name": "2",
"originalValue": "{slds.g.shadow.block.end.2}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"3": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.end.3}",
"$deprecated": true,
"$description": "Shadow Blockend 3.",
"name": "3",
"originalValue": "{slds.g.shadow.block.end.3}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "3",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"4": {
"$type": "shadow",
"$value": "{slds.g.shadow.block.end.4}",
"$deprecated": true,
"$description": "Shadow Blockend 4.",
"name": "4",
"originalValue": "{slds.g.shadow.block.end.4}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "4",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"inlinestart": {
"1": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.start.1}",
"$deprecated": true,
"$description": "Shadow Inlinestart 1.",
"name": "1",
"originalValue": "{slds.g.shadow.inline.start.1}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"2": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.start.2}",
"$deprecated": true,
"$description": "Shadow Inlinestart 2.",
"name": "2",
"originalValue": "{slds.g.shadow.inline.start.2}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"3": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.start.3}",
"$deprecated": true,
"$description": "Shadow Inlinestart 3.",
"name": "3",
"originalValue": "{slds.g.shadow.inline.start.3}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "3",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"4": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.start.4}",
"$deprecated": true,
"$description": "Shadow Inlinestart 4.",
"name": "4",
"originalValue": "{slds.g.shadow.inline.start.4}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "4",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"inlineend": {
"1": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.end.1}",
"$deprecated": true,
"$description": "Shadow Inlineend 1.",
"name": "1",
"originalValue": "{slds.g.shadow.inline.end.1}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "1",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"2": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.end.2}",
"$deprecated": true,
"$description": "Shadow Inlineend 2.",
"name": "2",
"originalValue": "{slds.g.shadow.inline.end.2}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "2",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"3": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.end.3}",
"$deprecated": true,
"$description": "Shadow Inlineend 3.",
"name": "3",
"originalValue": "{slds.g.shadow.inline.end.3}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "3",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"4": {
"$type": "shadow",
"$value": "{slds.g.shadow.inline.end.4}",
"$deprecated": true,
"$description": "Shadow Inlineend 4.",
"name": "4",
"originalValue": "{slds.g.shadow.inline.end.4}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "4",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
}
}
}
}