@salesforce-ux/design-tokens
Version:
Salesforce Design System Tokens & Styling Hooks
795 lines • 24.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": {
"lineheight": {
"1": {
"$type": "number",
"$value": "{slds.g.font.line.height.1}",
"$deprecated": true,
"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,
"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,
"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,
"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,
"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,
"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,
"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"
]
}
}
},
"family": {
"$type": "fontFamily",
"$value": "{slds.g.font.family-base}",
"$deprecated": true,
"name": "family",
"originalValue": "{slds.g.font.family-base}",
"type": "fontFamily",
"category": "",
"scope": "",
"namespace": "family",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-family"
]
}
},
"color": {
"accent": {
"dark": {
"1": {
"$type": "color",
"$value": "var(--lwc-brandDark, var(--slds-g-color-brand-base-20))",
"$deprecated": true,
"$description": "Brand accent color for UI elements. This is the lightest value of the dark accent ranges. This accent should not have any text/icon on top of it.",
"name": "1",
"originalValue": "var(--lwc-brandDark, var(--slds-g-color-brand-base-20))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "1",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"2": {
"$type": "color",
"$value": "var(--lwc-brandDarkActive, var(--slds-g-color-brand-base-10))",
"$deprecated": true,
"$description": "Brand accent color for UI elements. This is one step darker than accent-dark-1. This accent should not have any text/icon on top of it.",
"name": "2",
"originalValue": "var(--lwc-brandDarkActive, var(--slds-g-color-brand-base-10))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "2",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"light": {
"1": {
"$type": "color",
"$value": "var(--lwc-brandLight, var(--slds-g-color-brand-base-95))",
"$deprecated": true,
"$description": "Brand accent color for UI elements. This is the lightest value of the light accent ranges. This accent should not have any text/icon on top of it.",
"name": "1",
"originalValue": "var(--lwc-brandLight, var(--slds-g-color-brand-base-95))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "1",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"2": {
"$type": "color",
"$value": "var(--lwc-brandLightActive, var(--slds-g-color-brand-base-90))",
"$deprecated": true,
"$description": "Brand accent color for UI elements. This is one step darker than accent-light-1. This accent should not have any text/icon on top of it.",
"name": "2",
"originalValue": "var(--lwc-brandLightActive, var(--slds-g-color-brand-base-90))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "2",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"error": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Error Base 100 - if used as a background, please use Error 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"
]
}
}
},
"warning": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Warning Base 100 - if used as a background, please use Warning 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"
]
}
}
},
"success": {
"base": {
"100": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.100}",
"$deprecated": true,
"$description": "Success Base 100 - if used as a background, please use Success 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"
]
}
}
},
"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": "Brand Base 100 - if used as a background, please use Brand 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"
]
}
}
}
},
"shadow": {
"insetinverse": {
"focus": {
"1": {
"$type": "shadow",
"$value": "{slds.g.shadow.inset.inverse.focus.1}",
"$deprecated": true,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"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,
"name": "4",
"originalValue": "{slds.g.shadow.inline.end.4}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "4",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
}
}
}
}