@salesforce-ux/design-tokens
Version:
Salesforce Design System Tokens & Styling Hooks
1,627 lines • 50.5 kB
JSON
{
"slds": {
"s": {
"alert": {
"font": {
"weight": {
"$type": "fontWeight",
"$value": "{slds.g.font.weight.4}",
"$description": "Alert font weight",
"name": "weight",
"originalValue": "{slds.g.font.weight.4}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"avatar": {
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Avatar default border radius",
"name": "border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
}
},
"backdrop": {
"color": {
"background": {
"$type": "color",
"$value": "rgba(24, 24, 24, 0.5)",
"$description": "Backdrop color",
"name": "background",
"originalValue": "rgba(24, 24, 24, 0.5)",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"button": {
"color": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background of neutral buttons",
"name": "background",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-hover": {
"$type": "color",
"$value": "transparent",
"$description": "Hover background of neutral buttons",
"name": "background-hover",
"originalValue": "transparent",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "hover",
"namespace": "background",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-focus": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Focus background of neutral buttons",
"name": "background-focus",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "focus",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-active": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Active background of neutral buttons",
"name": "background-active",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "active",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"border": {
"$type": "color",
"$value": "{slds.g.color.border.2}",
"$description": "Border color of neutral buttons",
"name": "border",
"originalValue": "{slds.g.color.border.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"hover": {
"$type": "color",
"$value": "{slds.g.color.accent.3}",
"$description": "Hover text color of neutral buttons",
"name": "hover",
"originalValue": "{slds.g.color.accent.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "hover",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"shadow": {
"focus": {
"$type": "shadow",
"$value": "0 0 3px var(--slds-g-color-accent-2)",
"$description": "Focus border color of neutral buttons",
"name": "focus",
"originalValue": "0 0 3px var(--slds-g-color-accent-2)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "focus",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"active": {
"$type": "shadow",
"$value": "0 0 3px var(--slds-g-color-accent-2)",
"$description": "Active border color of neutral buttons",
"name": "active",
"originalValue": "0 0 3px var(--slds-g-color-accent-2)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "active",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Default border radius for buttons",
"name": "border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
},
"spacing": {
"inline": {
"$type": "dimension",
"$value": "{slds.g.spacing.4}",
"$description": "Inline/horizontal spacing of buttons",
"name": "inline",
"originalValue": "{slds.g.spacing.4}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "inline",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"padding",
"margin",
"top",
"right",
"bottom",
"left"
]
}
}
},
"container": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.3}",
"$description": "Container text color",
"name": "color",
"originalValue": "{slds.g.color.on.surface.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"shadow": {
"$type": "shadow",
"$value": "{slds.g.shadow.2}",
"$description": "Container shadow",
"name": "shadow",
"originalValue": "{slds.g.shadow.2}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "shadow",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"color-border": {
"$type": "color",
"$value": "{slds.g.color.border.1}",
"$description": "Container border color",
"name": "color-border",
"originalValue": "{slds.g.color.border.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Container border radius",
"name": "border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
},
"heading": {
"font": {
"size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.2}",
"$description": "Container heading font size",
"name": "size",
"originalValue": "{slds.g.font.scale.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "size",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-size"
]
},
"weight": {
"$type": "fontWeight",
"$value": "{slds.g.font.weight.4}",
"$description": "Container heading font weight",
"name": "weight",
"originalValue": "{slds.g.font.weight.4}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"footer": {
"color": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Container footer background color",
"name": "background",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
},
"container-heading-var-font-size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.var.2}",
"$description": "Container heading variable font size",
"name": "container-heading-var-font-size",
"originalValue": "{slds.g.font.scale.var.2}",
"type": "dimension",
"syntax": "<length>",
"category": "var",
"scope": "heading",
"namespace": "container",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-size"
]
},
"helptext": {
"font": {
"size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.neg.1}",
"$description": "Text size of help text that sits below a form control, if present.",
"name": "size",
"originalValue": "{slds.g.font.scale.neg.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "size",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-size"
]
}
},
"spacing": {
"$type": "dimension",
"$value": "{slds.g.spacing.1}",
"$description": "Spacing between the helptext and the form control.",
"name": "spacing",
"originalValue": "{slds.g.spacing.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "spacing",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"padding",
"margin",
"top",
"right",
"bottom",
"left"
]
}
},
"icon": {
"color": {
"foreground": {
"$type": "color",
"$value": "{slds.g.color.on.surface.1}",
"$description": "Fill color for icons. The default is utility icons.",
"name": "foreground",
"originalValue": "{slds.g.color.on.surface.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "foreground",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Default border radius for icons.",
"name": "border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
}
},
"input": {
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Border radius for inputs",
"name": "border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
},
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Text color for inputs",
"name": "color",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background color for inputs",
"name": "color-background",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "background",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-background-disabled": {
"$type": "color",
"$value": "{slds.g.color.surface.container.3}",
"$description": "Background color for inputs when disabled",
"name": "color-background-disabled",
"originalValue": "{slds.g.color.surface.container.3}",
"type": "color",
"syntax": "<color>",
"category": "disabled",
"scope": "background",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-background-invalid": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background color for inputs when disabled",
"name": "color-background-invalid",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "invalid",
"scope": "background",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-border": {
"$type": "color",
"$value": "{slds.g.color.border.2}",
"$description": "Border color for inputs",
"name": "color-border",
"originalValue": "{slds.g.color.border.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-border-focus": {
"$type": "color",
"$value": "{slds.g.color.border.accent.2}",
"$description": "Border color for inputs on focus.",
"name": "color-border-focus",
"originalValue": "{slds.g.color.border.accent.2}",
"type": "color",
"syntax": "<color>",
"category": "focus",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-border-hover": {
"$type": "color",
"$value": "{slds.g.color.border.2}",
"$description": "Border color for inputs on hover.",
"name": "color-border-hover",
"originalValue": "{slds.g.color.border.2}",
"type": "color",
"syntax": "<color>",
"category": "hover",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-invalid": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Text color for inputs when disabled",
"name": "color-invalid",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "invalid",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"spacing": {
"$type": "dimension",
"$value": "{slds.g.spacing.2}",
"$description": "Spacing for inputs. Set as padding.",
"name": "spacing",
"originalValue": "{slds.g.spacing.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "spacing",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"padding",
"margin",
"top",
"right",
"bottom",
"left"
]
},
"shadow": {
"focus": {
"$type": "shadow",
"$value": "0 0 3px var(--slds-g-color-accent-2)",
"$description": "Box shadow for inputs on focus.",
"name": "focus",
"originalValue": "0 0 3px var(--slds-g-color-accent-2)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "focus",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"invalid": {
"$type": "shadow",
"$value": "inset 0 0 0 1px var(--slds-g-color-error-1)",
"$description": "Box shadow for inputs on focus.",
"name": "invalid",
"originalValue": "inset 0 0 0 1px var(--slds-g-color-error-1)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "invalid",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
},
"label": {
"spacing": {
"$type": "dimension",
"$value": "{slds.g.spacing.1}",
"$description": "Spacing between the label and the input",
"name": "spacing",
"originalValue": "{slds.g.spacing.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "spacing",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"padding",
"margin",
"top",
"right",
"bottom",
"left"
]
},
"font": {
"size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.neg.1}",
"$description": "Font size for form labels",
"name": "size",
"originalValue": "{slds.g.font.scale.neg.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "size",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-size"
]
}
},
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Text color for form labels",
"name": "color",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"sizing": {
"gap": {
"$type": "dimension",
"$value": "{slds.g.spacing.1}",
"$description": "Spacing gap between elements in the label container",
"name": "gap",
"originalValue": "{slds.g.spacing.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "gap",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
}
},
"link": {
"color": {
"$type": "color",
"$value": "var(--lwc-brandTextLink, var(--slds-g-color-accent-2))",
"$description": "Default color for links",
"name": "color",
"originalValue": "var(--lwc-brandTextLink, var(--slds-g-color-accent-2))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-hover": {
"$type": "color",
"$value": "var(--lwc-brandTextLinkActive, var(--slds-g-color-accent-3))",
"$description": "Default color for links on hover",
"name": "color-hover",
"originalValue": "var(--lwc-brandTextLinkActive, var(--slds-g-color-accent-3))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "hover",
"namespace": "color",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-focus": {
"$type": "color",
"$value": "var(--lwc-brandTextLinkActive, var(--slds-g-color-accent-3))",
"$description": "Default color for links on focus",
"name": "color-focus",
"originalValue": "var(--lwc-brandTextLinkActive, var(--slds-g-color-accent-3))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "focus",
"namespace": "color",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-active": {
"$type": "color",
"$value": "var(--lwc-brandTextLinkActive, var(--slds-g-color-accent-3))",
"$description": "Default color for links on active",
"name": "color-active",
"originalValue": "var(--lwc-brandTextLinkActive, var(--slds-g-color-accent-3))",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "active",
"namespace": "color",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"outline": {
"color": {
"$type": "color",
"$value": "{slds.g.color.brand.base.40}",
"$description": "Default outline color for links on focus",
"name": "color",
"originalValue": "{slds.g.color.brand.base.40}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"menu": {
"item": {
"color": {
"background": {
"active": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Active background color for menu/listbox items",
"name": "active",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "active",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"active": {
"$type": "color",
"$value": "{slds.g.color.accent.2}",
"$description": "Active text color for menu/listbox items",
"name": "active",
"originalValue": "{slds.g.color.accent.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "active",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
},
"navigation": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Default color for tabs",
"name": "color",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-active": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Default color for tabs",
"name": "color-active",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "active",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-hover": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Default color for tabs",
"name": "color-hover",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "hover",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Default color for tabs",
"name": "color-background",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "background",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-background-active": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Default color for tabs",
"name": "color-background-active",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "active",
"scope": "background",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-background-hover": {
"$type": "color",
"$value": "{slds.g.color.surface.container.3}",
"$description": "Default color for tabs",
"name": "color-background-hover",
"originalValue": "{slds.g.color.surface.container.3}",
"type": "color",
"syntax": "<color>",
"category": "hover",
"scope": "background",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-border": {
"$type": "color",
"$value": "{slds.g.color.border.2}",
"$description": "Default border color for tabs",
"name": "color-border",
"originalValue": "{slds.g.color.border.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-border-hover": {
"$type": "color",
"$value": "{slds.g.color.accent.2}",
"$description": "Default border color for tabs",
"name": "color-border-hover",
"originalValue": "{slds.g.color.accent.2}",
"type": "color",
"syntax": "<color>",
"category": "hover",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"radius-border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Default color for tabs",
"name": "radius-border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "border",
"namespace": "radius",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
},
"sizing": {
"border-hover": {
"$type": "dimension",
"$value": {
"value": 2,
"unit": "px"
},
"$description": "Default border color for tabs",
"name": "border-hover",
"originalValue": "2px",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "hover",
"namespace": "border",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
},
"border-active": {
"$type": "dimension",
"$value": {
"value": 3,
"unit": "px"
},
"$description": "Default border color for tabs",
"name": "border-active",
"originalValue": "3px",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "active",
"namespace": "border",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
},
"font": {
"weight": {
"$type": "fontWeight",
"$value": "normal",
"$description": "Default border color for tabs",
"name": "weight",
"originalValue": "normal",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"themeOwned": true,
"cssProperties": [
"font-weight"
]
},
"weight-active": {
"$type": "fontWeight",
"$value": "700",
"$description": "Default border color for tabs",
"name": "weight-active",
"originalValue": "700",
"type": "fontWeight",
"category": "",
"scope": "active",
"namespace": "weight",
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"pageheader": {
"color": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Background color of all page header",
"name": "background",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"row": {
"color": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background color of all page header rows",
"name": "background",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.2}",
"$description": "Border radius for all page headers",
"name": "border",
"originalValue": "{slds.g.radius.border.2}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
},
"title": {
"font": {
"size": {
"$type": "dimension",
"$value": {
"value": 1.125,
"unit": "rem"
},
"$description": "Font-size of all page header titles",
"name": "size",
"originalValue": "1.125rem",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "size",
"themeOwned": true,
"cssProperties": [
"font-size"
]
},
"weight": {
"$type": "fontWeight",
"$value": "{slds.g.font.weight.7}",
"$description": "Font-weight of all page header titles",
"name": "weight",
"originalValue": "{slds.g.font.weight.7}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"sizing": {
"border": {
"$type": "dimension",
"$value": {
"value": 1,
"unit": "px"
},
"$description": "Border width for all page headers",
"name": "border",
"originalValue": "1px",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
},
"shadow": {
"$type": "shadow",
"$value": "{slds.g.shadow.1}",
"$description": "Box shadow for all page headers",
"name": "shadow",
"originalValue": "{slds.g.shadow.1}",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "shadow",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"pill": {
"color": {
"background": {
"hover": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Hover background color for pills",
"name": "hover",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "hover",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
},
"table": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.3}",
"$description": "Text/icon color for the table",
"name": "color",
"originalValue": "{slds.g.color.on.surface.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"header": {
"color": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Background color for the table header",
"name": "background",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-hover": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background color for the table header cells on hover",
"name": "background-hover",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "hover",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-selected": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background color for the table cells on active/selected",
"name": "background-selected",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "selected",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"font": {
"weight": {
"$type": "fontWeight",
"$value": "{slds.g.font.weight.7}",
"$description": "Font weight for the table header",
"name": "weight",
"originalValue": "{slds.g.font.weight.7}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"resize": {
"color": {
"$type": "color",
"$value": "{slds.g.color.neutral.base.70}",
"$description": "Color of the resize handle on table columns",
"name": "color",
"originalValue": "{slds.g.color.neutral.base.70}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-active": {
"$type": "color",
"$value": "{slds.g.color.accent.2}",
"$description": "Active color of the resize handle on table columns",
"name": "color-active",
"originalValue": "{slds.g.color.accent.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "active",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"row": {
"color": {
"background-selected": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Background color of the selected table row",
"name": "background-selected",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "selected",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"border-selected-hover": {
"$type": "color",
"$value": "{slds.g.color.border.1}",
"$description": "Border color of the selected table row on hover",
"name": "border-selected-hover",
"originalValue": "{slds.g.color.border.1}",
"type": "color",
"syntax": "<color>",
"category": "hover",
"scope": "selected",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"cell": {
"shadow": {
"selected": {
"$type": "shadow",
"$value": "var(--slds-g-color-accent-2) 0 0 0 1px inset",
"$description": "Box shadow of the selected table cell",
"name": "selected",
"originalValue": "var(--slds-g-color-accent-2) 0 0 0 1px inset",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "selected",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
}
},
"table-header-color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Text/icon color for the table header",
"name": "table-header-color",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "color",
"scope": "header",
"namespace": "table",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
}