@salesforce-ux/design-tokens
Version:
Salesforce Design System Tokens & Styling Hooks
2,157 lines • 67.9 kB
JSON
{
"slds": {
"s": {
"alert": {
"font": {
"weight": {
"$type": "fontWeight",
"$value": "{slds.g.font.weight.6}",
"$description": "Alert font weight",
"name": "weight",
"originalValue": "{slds.g.font.weight.6}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
},
"close": {
"button": {
"hover": {
"$type": "color",
"$value": "{slds.g.color.on.surface.3}",
"$description": "Alert close button hover state",
"name": "hover",
"originalValue": "{slds.g.color.on.surface.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "hover",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
},
"avatar": {
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.circle}",
"$description": "Avatar default border radius",
"name": "border",
"originalValue": "{slds.g.radius.border.circle}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
}
},
"backdrop": {
"color": {
"background": {
"$type": "color",
"$value": "color-mix(in oklab, var(--slds-g-color-palette-neutral-20),transparent 20%)",
"$extensions": {
"com.salesforce-ux.mode": {
"dark": {
"$value": "color-mix(in oklab, var(--slds-g-color-palette-neutral-95),transparent 20%)"
}
}
},
"$description": "Backdrop color",
"name": "background",
"originalValue": "color-mix(in oklab, var(--slds-g-color-palette-neutral-20),transparent 20%)",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "background",
"themeOwned": true,
"cssProperties": [
"background-color"
]
}
}
},
"button": {
"color": {
"$type": "color",
"$value": "{slds.g.color.accent.2}",
"$description": "Text color for non-brand and non-feedback button family",
"name": "color",
"originalValue": "{slds.g.color.accent.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"shadow": {
"focus": {
"$type": "shadow",
"$value": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
"$description": "Focus border color of neutral buttons",
"name": "focus",
"originalValue": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "focus",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"focus-inverse": {
"$type": "shadow",
"$value": "0 0 0 2px var(--slds-g-color-brand-base-15), 0 0 0 4px var(--slds-g-color-surface-1)",
"$description": "Focus border color of inverse buttons",
"name": "focus-inverse",
"originalValue": "0 0 0 2px var(--slds-g-color-brand-base-15), 0 0 0 4px var(--slds-g-color-surface-1)",
"type": "shadow",
"category": "",
"scope": "inverse",
"namespace": "focus",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"active": {
"$type": "shadow",
"$value": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset",
"$description": "Active border color of neutral buttons",
"name": "active",
"originalValue": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "active",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"brand": {
"shadow": {
"hover": {
"$type": "shadow",
"$value": "0 2px 0 0 light-dark(var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-70))",
"$description": "Hover shadow for brand buttons",
"name": "hover",
"originalValue": "0 2px 0 0 light-dark(var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-70))",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "hover",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"transform": {
"hover": {
"$type": "string",
"$value": "translateY(-2px)",
"$description": "Transform button to animate vertical movement on hover",
"name": "hover",
"originalValue": "translateY(-2px)",
"type": "string",
"category": "",
"scope": "",
"namespace": "hover",
"themeOwned": true,
"cssProperties": [
"transform"
]
}
}
},
"bordered": {
"shadow": {
"hover": {
"$type": "shadow",
"$value": "0 1.5px 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-70))",
"$description": "Hover shadow for bordered buttons",
"name": "hover",
"originalValue": "0 1.5px 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-70))",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "hover",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
},
"transform": {
"hover": {
"$type": "string",
"$value": "translateY(-1.5px)",
"$description": "Transform button to animate vertical movement on hover",
"name": "hover",
"originalValue": "translateY(-1.5px)",
"type": "string",
"category": "",
"scope": "",
"namespace": "hover",
"themeOwned": true,
"cssProperties": [
"transform"
]
}
}
},
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.pill}",
"$description": "Default border radius for buttons",
"name": "border",
"originalValue": "{slds.g.radius.border.pill}",
"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"
]
}
}
},
"button-color-background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background of neutral buttons",
"name": "button-color-background",
"originalValue": "{slds.g.color.surface.container.1}",
"type": "color",
"syntax": "<color>",
"category": "background",
"scope": "color",
"namespace": "button",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"button-color-background-hover": {
"$type": "color",
"$value": "{slds.g.color.brand.base.90}",
"$description": "Hover background of neutral buttons",
"name": "button-color-background-hover",
"originalValue": "{slds.g.color.brand.base.90}",
"type": "color",
"syntax": "<color>",
"category": "background",
"scope": "color",
"namespace": "button",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"button-color-background-focus": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Focus background of neutral buttons",
"name": "button-color-background-focus",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "background",
"scope": "color",
"namespace": "button",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"button-color-background-active": {
"$type": "color",
"$value": "{slds.g.color.surface.container.2}",
"$description": "Active background of neutral buttons",
"name": "button-color-background-active",
"originalValue": "{slds.g.color.surface.container.2}",
"type": "color",
"syntax": "<color>",
"category": "background",
"scope": "color",
"namespace": "button",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"button-color-border": {
"$type": "color",
"$value": "{slds.g.color.border.2}",
"$description": "Border color of neutral buttons",
"name": "button-color-border",
"originalValue": "{slds.g.color.border.2}",
"type": "color",
"syntax": "<color>",
"category": "border",
"scope": "color",
"namespace": "button",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"button-color-hover": {
"$type": "color",
"$value": "{slds.g.color.on.surface.3}",
"$description": "Hover text color of neutral buttons",
"name": "button-color-hover",
"originalValue": "{slds.g.color.on.surface.3}",
"type": "color",
"syntax": "<color>",
"category": "hover",
"scope": "color",
"namespace": "button",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"container": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.1}",
"$description": "Container text color",
"name": "color",
"originalValue": "{slds.g.color.on.surface.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"shadow": {
"$type": "shadow",
"$value": "none",
"$description": "Container shadow",
"name": "shadow",
"originalValue": "none",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "shadow",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"footer": {
"sizing": {
"border": {
"$type": "dimension",
"$value": "{slds.g.sizing.border.1}",
"$description": "Container border size",
"name": "border",
"originalValue": "{slds.g.sizing.border.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
},
"color": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Container footer background color",
"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"
]
}
},
"font": {
"align": {
"$type": "string",
"$value": "right",
"$description": "Container footer font alignment",
"name": "align",
"originalValue": "right",
"type": "string",
"category": "",
"scope": "",
"namespace": "align",
"themeOwned": true,
"cssProperties": [
"text-align"
]
},
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Container heading font color",
"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": {
"border": {
"$type": "dimension",
"$value": "0",
"$description": "Container border width",
"name": "border",
"originalValue": "0",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
},
"radius": {
"border": {
"$type": "dimension",
"$value": "{slds.g.radius.border.4}",
"$description": "Container border radius",
"name": "border",
"originalValue": "{slds.g.radius.border.4}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
},
"heading": {
"font": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.3}",
"$description": "Container heading font 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"
]
},
"size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.3}",
"$description": "Container heading font size",
"name": "size",
"originalValue": "{slds.g.font.scale.3}",
"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"
]
},
"align": {
"$type": "string",
"$value": "left",
"$description": "Container heading font alignment",
"name": "align",
"originalValue": "left",
"type": "string",
"category": "",
"scope": "",
"namespace": "align",
"themeOwned": true,
"cssProperties": [
"text-align"
]
}
}
},
"content": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.1}",
"$description": "Container content text color",
"name": "color",
"originalValue": "{slds.g.color.on.surface.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"container-color-border": {
"$type": "color",
"$value": "transparent",
"$description": "Container border color",
"name": "container-color-border",
"originalValue": "transparent",
"type": "color",
"syntax": "<color>",
"category": "border",
"scope": "color",
"namespace": "container",
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"container-heading-var-font-size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.var.3}",
"$description": "Container heading variable font size",
"name": "container-heading-var-font-size",
"originalValue": "{slds.g.font.scale.var.3}",
"type": "dimension",
"syntax": "<length>",
"category": "var",
"scope": "heading",
"namespace": "container",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-size"
]
},
"header": {
"sizing": {
"height": {
"$type": "dimension",
"$value": {
"value": 3.125,
"unit": "rem"
},
"$description": "Header height",
"name": "height",
"originalValue": "3.125rem",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "height",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
}
},
"helptext": {
"color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.1}",
"$description": "Default color for helptext.",
"name": "color",
"originalValue": "{slds.g.color.on.surface.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"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.circle}",
"$description": "Default border radius for icons.",
"name": "border",
"originalValue": "{slds.g.radius.border.circle}",
"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": {
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Background color for inputs",
"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-disabled": {
"$type": "color",
"$value": "{slds.g.color.disabled.container.1}",
"$description": "Background color for inputs when disabled",
"name": "background-disabled",
"originalValue": "{slds.g.color.disabled.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "disabled",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-invalid": {
"$type": "color",
"$value": "{slds.g.color.error.container.1}",
"$description": "Background color for inputs when disabled",
"name": "background-invalid",
"originalValue": "{slds.g.color.error.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "invalid",
"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 for inputs",
"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"
]
},
"border-disabled": {
"$type": "color",
"$value": "{slds.g.color.border.disabled.1}",
"$description": "Disabled border color for input containers",
"name": "border-disabled",
"originalValue": "{slds.g.color.border.disabled.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "disabled",
"namespace": "border",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"border-focus": {
"$type": "color",
"$value": "{slds.g.color.border.2}",
"$description": "Border color for inputs on focus.",
"name": "border-focus",
"originalValue": "{slds.g.color.border.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "focus",
"namespace": "border",
"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": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
"$description": "Box shadow for inputs on focus.",
"name": "focus",
"originalValue": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "focus",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"invalid": {
"$type": "shadow",
"$value": "none",
"$description": "Box shadow for inputs on focus.",
"name": "invalid",
"originalValue": "none",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "invalid",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
},
"input-color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.2}",
"$description": "Text color for inputs",
"name": "input-color",
"originalValue": "{slds.g.color.on.surface.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "color",
"namespace": "input",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"input-color-disabled": {
"$type": "color",
"$value": "{slds.g.color.on.disabled.1}",
"$description": "Disabled text color for input content",
"name": "input-color-disabled",
"originalValue": "{slds.g.color.on.disabled.1}",
"type": "color",
"syntax": "<color>",
"category": "disabled",
"scope": "color",
"namespace": "input",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"input-color-invalid": {
"$type": "color",
"$value": "{slds.g.color.error.1}",
"$description": "Text color for inputs when disabled",
"name": "input-color-invalid",
"originalValue": "{slds.g.color.error.1}",
"type": "color",
"syntax": "<color>",
"category": "invalid",
"scope": "color",
"namespace": "input",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"label": {
"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"
]
},
"font": {
"size": {
"$type": "dimension",
"$value": "{slds.g.font.size.base}",
"$description": "Font size for form labels",
"name": "size",
"originalValue": "{slds.g.font.size.base}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "size",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-size"
]
},
"weight": {
"$type": "fontWeight",
"$value": "{slds.g.font.weight.6}",
"$description": "Default font weight for input labels.",
"name": "weight",
"originalValue": "{slds.g.font.weight.6}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
},
"spacing": {
"$type": "dimension",
"$value": "{slds.g.spacing.2}",
"$description": "Spacing between the label and the input",
"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"
]
},
"spacing-gap": {
"$type": "dimension",
"$value": "{slds.g.spacing.1}",
"$description": "Default gap spacing for input labels.",
"name": "spacing-gap",
"originalValue": "{slds.g.spacing.1}",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "gap",
"namespace": "spacing",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"padding",
"margin",
"top",
"right",
"bottom",
"left"
]
}
},
"link": {
"color": {
"$type": "color",
"$value": "{slds.g.color.accent.2}",
"$description": "Default color for links",
"name": "color",
"originalValue": "{slds.g.color.accent.2}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-hover": {
"$type": "color",
"$value": "{slds.g.color.accent.3}",
"$description": "Default color for links on hover",
"name": "color-hover",
"originalValue": "{slds.g.color.accent.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "hover",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-focus": {
"$type": "color",
"$value": "{slds.g.color.accent.3}",
"$description": "Default color for links on focus",
"name": "color-focus",
"originalValue": "{slds.g.color.accent.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "focus",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"color-active": {
"$type": "color",
"$value": "{slds.g.color.accent.3}",
"$description": "Default color for links on active",
"name": "color-active",
"originalValue": "{slds.g.color.accent.3}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "active",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"outline": {
"color": {
"$type": "color",
"$value": "{slds.g.color.brand.base.15}",
"$description": "Default outline color for links on focus",
"name": "color",
"originalValue": "{slds.g.color.brand.base.15}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
},
"mark": {
"color": {
"foreground-checked": {
"$type": "color",
"$value": "{slds.g.color.on.accent.1}",
"$description": "Color of checkmarks",
"name": "foreground-checked",
"originalValue": "{slds.g.color.on.accent.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "checked",
"namespace": "foreground",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background": {
"$type": "color",
"$value": "{slds.g.color.surface.container.1}",
"$description": "Color of checkmark background unchecked",
"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-checked": {
"$type": "color",
"$value": "{slds.g.color.accent.container.1}",
"$description": "Color of background checkmarks are on",
"name": "background-checked",
"originalValue": "{slds.g.color.accent.container.1}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "checked",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"foreground-invalid": {
"$type": "color",
"$value": "{slds.g.color.error.base.100}",
"$description": "Color of background checkmarks are on",
"name": "foreground-invalid",
"originalValue": "{slds.g.color.error.base.100}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "invalid",
"namespace": "foreground",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"background-invalid": {
"$type": "color",
"$value": "{slds.g.color.error.base.40}",
"$description": "Color of background checkmarks are on",
"name": "background-invalid",
"originalValue": "{slds.g.color.error.base.40}",
"type": "color",
"syntax": "<color>",
"category": "",
"scope": "invalid",
"namespace": "background",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
},
"shadow": {
"focus": {
"$type": "shadow",
"$value": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
"$description": "Box shadow for checked inputs on focus.",
"name": "focus",
"originalValue": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "focus",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"checked": {
"$type": "shadow",
"$value": "0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.08) inset, 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset",
"$description": "Box shadow for checked inputs when checked.",
"name": "checked",
"originalValue": "0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.08) inset, 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "checked",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
},
"menu": {
"item": {
"color": {
"background": {
"active": {
"$type": "color",
"$value": "{slds.g.color.brand.base.90}",
"$description": "Active background color for menu/listbox items",
"name": "active",
"originalValue": "{slds.g.color.brand.base.90}",
"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.1}",
"$description": "Active text color for menu/listbox items",
"name": "active",
"originalValue": "{slds.g.color.accent.1}",
"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.1}",
"$description": "Default color for tabs",
"name": "color",
"originalValue": "{slds.g.color.on.surface.1}",
"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.3}",
"$description": "Default color for tabs",
"name": "color-active",
"originalValue": "{slds.g.color.accent.3}",
"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.brand.base.15}",
"$description": "Default color for tabs",
"name": "color-hover",
"originalValue": "{slds.g.color.brand.base.15}",
"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.1}",
"$description": "Default color for tabs",
"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-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.brand.base.90}",
"$description": "Default color for tabs",
"name": "color-background-hover",
"originalValue": "{slds.g.color.brand.base.90}",
"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.1}",
"$description": "Default border color for tabs",
"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"
]
},
"color-border-hover": {
"$type": "color",
"$value": "{slds.g.color.brand.base.15}",
"$description": "Default border color for tabs",
"name": "color-border-hover",
"originalValue": "{slds.g.color.brand.base.15}",
"type": "color",
"syntax": "<color>",
"category": "hover",
"scope": "border",
"namespace": "color",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
},
"sizing": {
"border-hover": {
"$type": "dimension",
"$value": {
"value": 3,
"unit": "px"
},
"$description": "Default border color for tabs",
"name": "border-hover",
"originalValue": "3px",
"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"
]
},
"height": {
"$type": "dimension",
"$value": {
"value": 2.5,
"unit": "rem"
},
"$description": "Default height for tabs",
"name": "height",
"originalValue": "2.5rem",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "height",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
},
"font": {
"weight": {
"$type": "fontWeight",
"$value": "600",
"$description": "Default border color for tabs",
"name": "weight",
"originalValue": "600",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"themeOwned": true,
"cssProperties": [
"font-weight"
]
},
"weight-active": {
"$type": "fontWeight",
"$value": "600",
"$description": "Default border color for tabs",
"name": "weight-active",
"originalValue": "600",
"type": "fontWeight",
"category": "",
"scope": "active",
"namespace": "weight",
"themeOwned": true,
"cssProperties": [
"font-weight"
]
},
"lineheight": {
"$type": "dimension",
"$value": {
"value": 2.5,
"unit": "rem"
},
"$description": "Default lineheight for tabs",
"name": "lineheight",
"originalValue": "2.5rem",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "lineheight",
"themeOwned": true,
"cssProperties": [
"line-height"
]
}
}
},
"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.2}",
"$description": "Background color of all page header rows",
"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"
]
}
}
},
"radius": {
"border": {
"$type": "dimension",
"$value": "0",
"$description": "Border radius for all page headers",
"name": "border",
"originalValue": "0",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"themeOwned": true,
"cssProperties": [
"border-radius"
]
}
},
"title": {
"font": {
"size": {
"$type": "dimension",
"$value": "{slds.g.font.scale.5}",
"$description": "Font-size of all page header titles",
"name": "size",
"originalValue": "{slds.g.font.scale.5}",
"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": "Font-weight of all page header titles",
"name": "weight",
"originalValue": "{slds.g.font.weight.4}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"sizing": {
"border": {
"$type": "dimension",
"$value": "0",
"$description": "Border width for all page headers",
"name": "border",
"originalValue": "0",
"type": "dimension",
"syntax": "<length>",
"category": "",
"scope": "",
"namespace": "border",
"themeOwned": true,
"cssProperties": [
"border-width",
"width"
]
}
},
"shadow": {
"$type": "shadow",
"$value": "none",
"$description": "Box shadow for all page headers",
"name": "shadow",
"originalValue": "none",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "shadow",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
},
"action": {
"bottom": {
"spacing": {
"$type": "dimension",
"$value": "{slds.g.spacing.1}",
"$description": "bottom spacing for pageheader action.",
"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"
]
}
}
}
},
"pill": {
"color": {
"background": {
"hover": {
"$type": "color",
"$value": "{slds.g.color.brand.base.90}",
"$description": "Hover background color for pills",
"name": "hover",
"originalValue": "{slds.g.color.brand.base.90}",
"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.neutral.base.0}",
"$description": "Text/icon color for the table",
"name": "color",
"originalValue": "{slds.g.color.neutral.base.0}",
"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.3}",
"$description": "Background color for the table header cells on hover",
"name": "background-hover",
"originalValue": "{slds.g.color.surface.container.3}",
"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.6}",
"$description": "Font weight for the table header",
"name": "weight",
"originalValue": "{slds.g.font.weight.6}",
"type": "fontWeight",
"category": "",
"scope": "",
"namespace": "weight",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"font-weight"
]
}
}
},
"resize": {
"color": {
"$type": "color",
"$value": "{slds.g.color.border.1}",
"$description": "Color of the resize handle on table columns",
"name": "color",
"originalValue": "{slds.g.color.border.1}",
"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.3}",
"$description": "Active color of the resize handle on table columns",
"name": "color-active",
"originalValue": "{slds.g.color.accent.3}",
"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.brand.base.90}",
"$description": "Background color of the selected table row",
"name": "background-selected",
"originalValue": "{slds.g.color.brand.base.90}",
"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.accent.2}",
"$description": "Border color of the selected table row on hover",
"name": "border-selected-hover",
"originalValue": "{slds.g.color.border.accent.2}",
"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-brand-base-15) 0 0 0 2px inset",
"$description": "Box shadow of the selected table cell",
"name": "selected",
"originalValue": "var(--slds-g-color-brand-base-15) 0 0 0 2px inset",
"type": "shadow",
"category": "",
"scope": "",
"namespace": "selected",
"themeOwned": true,
"cssProperties": [
"box-shadow"
]
}
}
}
},
"table-header-color": {
"$type": "color",
"$value": "{slds.g.color.on.surface.1}",
"$description": "Text/icon color for the table header",
"name": "table-header-color",
"originalValue": "{slds.g.color.on.surface.1}",
"type": "color",
"syntax": "<color>",
"category": "color",
"scope": "header",
"namespace": "table",
"inherits": true,
"themeOwned": true,
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
]
}
}
}
}