Configuration

Density CSS is configured with --dn-* custom properties. Set a variable on an ancestor to customize the Density styles in that subtree.

Variables marked public are supported configuration. Internal variables are component implementation aliases: they are listed here for completeness, but can change more freely.

Color

Variable	Description	Owner	Stability
`--dn-color-accent`	Configures the accent.	src/colors.css	Public
`--dn-color-accent-active`	Configures the accent active.	src/colors.css	Public
`--dn-color-accent-hover`	Configures the accent hover.	src/colors.css	Public
`--dn-color-border`	Configures the border.	src/colors.css	Public
`--dn-color-border-strong`	Configures the border strong.	src/colors.css	Public
`--dn-color-card-border`	Configures the card border.	src/colors.css	Public
`--dn-color-card-shadow`	Configures the card shadow.	src/colors.css	Public
`--dn-color-card-shadow-subtle`	Configures the card shadow subtle.	src/colors.css	Public
`--dn-color-control-primary`	Configures the control primary.	src/colors.css	Public
`--dn-color-control-primary-active`	Configures the control primary active.	src/colors.css	Public
`--dn-color-control-primary-hover`	Configures the control primary hover.	src/colors.css	Public
`--dn-color-debug`	Configures the debug.	src/colors.css	Public
`--dn-color-depth-1`	Configures the depth 1.	src/colors.css	Public
`--dn-color-depth-2`	Configures the depth 2.	src/colors.css	Public
`--dn-color-depth-3`	Configures the depth 3.	src/colors.css	Public
`--dn-color-depth-4`	Configures the depth 4.	src/colors.css	Public
`--dn-color-depth-5`	Configures the depth 5.	src/colors.css	Public
`--dn-color-depth-6`	Configures the depth 6.	src/colors.css	Public
`--dn-color-depth-7`	Configures the depth 7.	src/colors.css	Public
`--dn-color-focus`	Configures the focus.	src/colors.css	Public
`--dn-color-focus-shadow`	Configures the focus shadow.	src/colors.css	Public
`--dn-color-mac-traffic-close`	Configures the mac traffic close.	src/colors.css	Public
`--dn-color-mac-traffic-close-border`	Configures the mac traffic close border.	src/colors.css	Public
`--dn-color-mac-traffic-minimize`	Configures the mac traffic minimize.	src/colors.css	Public
`--dn-color-mac-traffic-minimize-border`	Configures the mac traffic minimize border.	src/colors.css	Public
`--dn-color-mac-traffic-zoom`	Configures the mac traffic zoom.	src/colors.css	Public
`--dn-color-mac-traffic-zoom-border`	Configures the mac traffic zoom border.	src/colors.css	Public
`--dn-color-surface`	Configures the surface.	src/colors.css	Public
`--dn-color-surface-active`	Configures the surface active.	src/colors.css	Public
`--dn-color-surface-hover`	Configures the surface hover.	src/colors.css	Public
`--dn-color-text`	Configures the text.	src/colors.css	Public
`--dn-color-text-inverted`	Configures the text inverted.	src/colors.css	Public
`--dn-color-text-secondary`	Configures the text secondary.	src/colors.css	Public

Charts

Variable	Description	Owner	Stability
`--dn-color-chart-axis`	Configures the chart axis.	src/colors.css	Public
`--dn-color-chart-grid`	Configures the chart grid.	src/colors.css	Public
`--dn-color-chart-label`	Configures the chart label.	src/colors.css	Public
`--dn-color-chart-negative`	Configures the chart negative.	src/colors.css	Public
`--dn-color-chart-positive`	Configures the chart positive.	src/colors.css	Public
`--dn-color-chart-series-1`	Configures the chart series 1.	src/colors.css	Public
`--dn-color-chart-series-2`	Configures the chart series 2.	src/colors.css	Public
`--dn-color-chart-series-3`	Configures the chart series 3.	src/colors.css	Public
`--dn-color-chart-series-4`	Configures the chart series 4.	src/colors.css	Public
`--dn-color-chart-series-5`	Configures the chart series 5.	src/colors.css	Public
`--dn-color-chart-series-6`	Configures the chart series 6.	src/colors.css	Public

Button colors

Variable	Description	Owner	Stability
`--dn-color-button-primary-normal-background`	Configures the background color for primary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-primary-normal-border`	Configures the border color for primary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-primary-normal-icon`	Configures the icon color for primary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-primary-normal-text`	Configures the text color for primary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-primary-hover-background`	Configures the background color for primary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-primary-hover-border`	Configures the border color for primary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-primary-hover-icon`	Configures the icon color for primary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-primary-hover-text`	Configures the text color for primary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-primary-active-background`	Configures the background color for primary buttons in their active state.	src/colors.css	Public
`--dn-color-button-primary-active-border`	Configures the border color for primary buttons in their active state.	src/colors.css	Public
`--dn-color-button-primary-active-icon`	Configures the icon color for primary buttons in their active state.	src/colors.css	Public
`--dn-color-button-primary-active-text`	Configures the text color for primary buttons in their active state.	src/colors.css	Public
`--dn-color-button-primary-focus-background`	Configures the background color for primary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-primary-focus-border`	Configures the border color for primary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-primary-focus-icon`	Configures the icon color for primary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-primary-focus-text`	Configures the text color for primary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-primary-disabled-background`	Configures the background color for primary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-primary-disabled-border`	Configures the border color for primary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-primary-disabled-icon`	Configures the icon color for primary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-primary-disabled-text`	Configures the text color for primary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-primary-selected-background`	Configures the background color for primary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-primary-selected-border`	Configures the border color for primary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-primary-selected-icon`	Configures the icon color for primary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-primary-selected-text`	Configures the text color for primary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-primary-selected-active-background`	Configures the background color for primary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-primary-selected-active-border`	Configures the border color for primary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-primary-selected-active-icon`	Configures the icon color for primary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-primary-selected-active-text`	Configures the text color for primary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-secondary-normal-background`	Configures the background color for secondary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-secondary-normal-border`	Configures the border color for secondary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-secondary-normal-icon`	Configures the icon color for secondary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-secondary-normal-text`	Configures the text color for secondary buttons in their normal state.	src/colors.css	Public
`--dn-color-button-secondary-hover-background`	Configures the background color for secondary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-secondary-hover-border`	Configures the border color for secondary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-secondary-hover-icon`	Configures the icon color for secondary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-secondary-hover-text`	Configures the text color for secondary buttons in their hover state.	src/colors.css	Public
`--dn-color-button-secondary-active-background`	Configures the background color for secondary buttons in their active state.	src/colors.css	Public
`--dn-color-button-secondary-active-border`	Configures the border color for secondary buttons in their active state.	src/colors.css	Public
`--dn-color-button-secondary-active-icon`	Configures the icon color for secondary buttons in their active state.	src/colors.css	Public
`--dn-color-button-secondary-active-text`	Configures the text color for secondary buttons in their active state.	src/colors.css	Public
`--dn-color-button-secondary-focus-background`	Configures the background color for secondary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-secondary-focus-border`	Configures the border color for secondary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-secondary-focus-icon`	Configures the icon color for secondary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-secondary-focus-text`	Configures the text color for secondary buttons in their focus state.	src/colors.css	Public
`--dn-color-button-secondary-disabled-background`	Configures the background color for secondary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-secondary-disabled-border`	Configures the border color for secondary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-secondary-disabled-icon`	Configures the icon color for secondary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-secondary-disabled-text`	Configures the text color for secondary buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-secondary-selected-background`	Configures the background color for secondary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-secondary-selected-border`	Configures the border color for secondary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-secondary-selected-icon`	Configures the icon color for secondary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-secondary-selected-text`	Configures the text color for secondary buttons in their selected state.	src/colors.css	Public
`--dn-color-button-secondary-selected-active-background`	Configures the background color for secondary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-secondary-selected-active-border`	Configures the border color for secondary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-secondary-selected-active-icon`	Configures the icon color for secondary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-secondary-selected-active-text`	Configures the text color for secondary buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-outline-normal-background`	Configures the background color for outline buttons in their normal state.	src/colors.css	Public
`--dn-color-button-outline-normal-border`	Configures the border color for outline buttons in their normal state.	src/colors.css	Public
`--dn-color-button-outline-normal-icon`	Configures the icon color for outline buttons in their normal state.	src/colors.css	Public
`--dn-color-button-outline-normal-text`	Configures the text color for outline buttons in their normal state.	src/colors.css	Public
`--dn-color-button-outline-hover-background`	Configures the background color for outline buttons in their hover state.	src/colors.css	Public
`--dn-color-button-outline-hover-border`	Configures the border color for outline buttons in their hover state.	src/colors.css	Public
`--dn-color-button-outline-hover-icon`	Configures the icon color for outline buttons in their hover state.	src/colors.css	Public
`--dn-color-button-outline-hover-text`	Configures the text color for outline buttons in their hover state.	src/colors.css	Public
`--dn-color-button-outline-active-background`	Configures the background color for outline buttons in their active state.	src/colors.css	Public
`--dn-color-button-outline-active-border`	Configures the border color for outline buttons in their active state.	src/colors.css	Public
`--dn-color-button-outline-active-icon`	Configures the icon color for outline buttons in their active state.	src/colors.css	Public
`--dn-color-button-outline-active-text`	Configures the text color for outline buttons in their active state.	src/colors.css	Public
`--dn-color-button-outline-focus-background`	Configures the background color for outline buttons in their focus state.	src/colors.css	Public
`--dn-color-button-outline-focus-border`	Configures the border color for outline buttons in their focus state.	src/colors.css	Public
`--dn-color-button-outline-focus-icon`	Configures the icon color for outline buttons in their focus state.	src/colors.css	Public
`--dn-color-button-outline-focus-text`	Configures the text color for outline buttons in their focus state.	src/colors.css	Public
`--dn-color-button-outline-disabled-background`	Configures the background color for outline buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-outline-disabled-border`	Configures the border color for outline buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-outline-disabled-icon`	Configures the icon color for outline buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-outline-disabled-text`	Configures the text color for outline buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-outline-selected-background`	Configures the background color for outline buttons in their selected state.	src/colors.css	Public
`--dn-color-button-outline-selected-border`	Configures the border color for outline buttons in their selected state.	src/colors.css	Public
`--dn-color-button-outline-selected-icon`	Configures the icon color for outline buttons in their selected state.	src/colors.css	Public
`--dn-color-button-outline-selected-text`	Configures the text color for outline buttons in their selected state.	src/colors.css	Public
`--dn-color-button-outline-selected-active-background`	Configures the background color for outline buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-outline-selected-active-border`	Configures the border color for outline buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-outline-selected-active-icon`	Configures the icon color for outline buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-outline-selected-active-text`	Configures the text color for outline buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-ghost-normal-background`	Configures the background color for ghost buttons in their normal state.	src/colors.css	Public
`--dn-color-button-ghost-normal-border`	Configures the border color for ghost buttons in their normal state.	src/colors.css	Public
`--dn-color-button-ghost-normal-icon`	Configures the icon color for ghost buttons in their normal state.	src/colors.css	Public
`--dn-color-button-ghost-normal-text`	Configures the text color for ghost buttons in their normal state.	src/colors.css	Public
`--dn-color-button-ghost-hover-background`	Configures the background color for ghost buttons in their hover state.	src/colors.css	Public
`--dn-color-button-ghost-hover-border`	Configures the border color for ghost buttons in their hover state.	src/colors.css	Public
`--dn-color-button-ghost-hover-icon`	Configures the icon color for ghost buttons in their hover state.	src/colors.css	Public
`--dn-color-button-ghost-hover-text`	Configures the text color for ghost buttons in their hover state.	src/colors.css	Public
`--dn-color-button-ghost-active-background`	Configures the background color for ghost buttons in their active state.	src/colors.css	Public
`--dn-color-button-ghost-active-border`	Configures the border color for ghost buttons in their active state.	src/colors.css	Public
`--dn-color-button-ghost-active-icon`	Configures the icon color for ghost buttons in their active state.	src/colors.css	Public
`--dn-color-button-ghost-active-text`	Configures the text color for ghost buttons in their active state.	src/colors.css	Public
`--dn-color-button-ghost-focus-background`	Configures the background color for ghost buttons in their focus state.	src/colors.css	Public
`--dn-color-button-ghost-focus-border`	Configures the border color for ghost buttons in their focus state.	src/colors.css	Public
`--dn-color-button-ghost-focus-icon`	Configures the icon color for ghost buttons in their focus state.	src/colors.css	Public
`--dn-color-button-ghost-focus-text`	Configures the text color for ghost buttons in their focus state.	src/colors.css	Public
`--dn-color-button-ghost-disabled-background`	Configures the background color for ghost buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-ghost-disabled-border`	Configures the border color for ghost buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-ghost-disabled-icon`	Configures the icon color for ghost buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-ghost-disabled-text`	Configures the text color for ghost buttons in their disabled state.	src/colors.css	Public
`--dn-color-button-ghost-selected-background`	Configures the background color for ghost buttons in their selected state.	src/colors.css	Public
`--dn-color-button-ghost-selected-border`	Configures the border color for ghost buttons in their selected state.	src/colors.css	Public
`--dn-color-button-ghost-selected-icon`	Configures the icon color for ghost buttons in their selected state.	src/colors.css	Public
`--dn-color-button-ghost-selected-text`	Configures the text color for ghost buttons in their selected state.	src/colors.css	Public
`--dn-color-button-ghost-selected-active-background`	Configures the background color for ghost buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-ghost-selected-active-border`	Configures the border color for ghost buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-ghost-selected-active-icon`	Configures the icon color for ghost buttons in their selected-active state.	src/colors.css	Public
`--dn-color-button-ghost-selected-active-text`	Configures the text color for ghost buttons in their selected-active state.	src/colors.css	Public

Sizing and typography

Variable	Description	Owner	Stability
`--dn-size-2xs-font`	Configures the 2xs font.	src/sizes.css	Public
`--dn-size-2xs-line`	Configures the 2xs line.	src/sizes.css	Public
`--dn-size-3xl-font`	Configures the 3xl font.	src/sizes.css	Public
`--dn-size-3xl-line`	Configures the 3xl line.	src/sizes.css	Public
`--dn-size-2xl-font`	Configures the 2xl font.	src/sizes.css	Public
`--dn-size-2xl-line`	Configures the 2xl line.	src/sizes.css	Public
`--dn-size-control-font`	Configures the control font.	src/sizes.css	Public
`--dn-size-control-gap`	Configures the control gap.	src/sizes.css	Public
`--dn-size-control-height`	Configures the control height.	src/sizes.css	Public
`--dn-size-control-line`	Configures the control line.	src/sizes.css	Public
`--dn-size-control-pad`	Configures the control pad.	src/sizes.css	Public
`--dn-size-current-font`	Configures the current font.	src/sizes.css	Public
`--dn-size-current-line`	Configures the current line.	src/sizes.css	Public
`--dn-size-current-control-font`	Configures the current control font.	src/sizes.css	Public
`--dn-size-current-control-gap`	Configures the current control gap.	src/sizes.css	Public
`--dn-size-current-control-height`	Configures the current control height.	src/sizes.css	Public
`--dn-size-current-control-line`	Configures the current control line.	src/sizes.css	Public
`--dn-size-step-down-font`	Configures the step down font.	src/sizes.css	Public
`--dn-size-step-down-line`	Configures the step down line.	src/sizes.css	Public
`--dn-size-step-down-control-font`	Configures the step down control font.	src/sizes.css	Public
`--dn-size-step-down-control-gap`	Configures the step down control gap.	src/sizes.css	Public
`--dn-size-step-down-control-height`	Configures the step down control height.	src/sizes.css	Public
`--dn-size-step-down-control-line`	Configures the step down control line.	src/sizes.css	Public
`--dn-size-label-font`	Configures the label font.	src/sizes.css	Public
`--dn-size-label-line`	Configures the label line.	src/sizes.css	Public
`--dn-size-lg-font`	Configures the lg font.	src/sizes.css	Public
`--dn-size-lg-line`	Configures the lg line.	src/sizes.css	Public
`--dn-size-md-font`	Configures the md font.	src/sizes.css	Public
`--dn-size-md-line`	Configures the md line.	src/sizes.css	Public
`--dn-size-number-font`	Configures the number font.	src/sizes.css	Public
`--dn-size-number-line`	Configures the number line.	src/sizes.css	Public
`--dn-size-sm-font`	Configures the sm font.	src/sizes.css	Public
`--dn-size-sm-line`	Configures the sm line.	src/sizes.css	Public
`--dn-size-xl-font`	Configures the xl font.	src/sizes.css	Public
`--dn-size-xl-line`	Configures the xl line.	src/sizes.css	Public
`--dn-size-xs-font`	Configures the xs font.	src/sizes.css	Public
`--dn-size-xs-line`	Configures the xs line.	src/sizes.css	Public

Typography

Variable	Description	Owner	Stability
`--dn-font-family`	Configures the interface font family.	src/tokens.css	Public
`--dn-font-family-mono`	Configures the monospaced font family.	src/tokens.css	Public

Shape

Variable	Description	Owner	Stability
`--dn-radius-control`	Configures the control corner radius.	src/tokens.css	Public

Effects

Variable	Description	Owner	Stability
`--dn-shadow-focus`	Configures the focus-ring shadow.	src/tokens.css	Public

Button aliases

Variable	Description	Owner	Stability
`--dn-button-background`	Internal background alias for the button default state.	src/presentation-button.css	Internal
`--dn-button-border`	Internal border alias for the button default state.	src/presentation-button.css	Internal
`--dn-button-icon`	Internal icon alias for the button default state.	src/presentation-button.css	Internal
`--dn-button-text`	Internal text alias for the button default state.	src/presentation-button.css	Internal
`--dn-button-hover-background`	Internal background alias for the button hover state.	src/presentation-button.css	Internal
`--dn-button-hover-border`	Internal border alias for the button hover state.	src/presentation-button.css	Internal
`--dn-button-hover-icon`	Internal icon alias for the button hover state.	src/presentation-button.css	Internal
`--dn-button-hover-text`	Internal text alias for the button hover state.	src/presentation-button.css	Internal
`--dn-button-active-background`	Internal background alias for the button active state.	src/presentation-button.css	Internal
`--dn-button-active-border`	Internal border alias for the button active state.	src/presentation-button.css	Internal
`--dn-button-active-icon`	Internal icon alias for the button active state.	src/presentation-button.css	Internal
`--dn-button-active-text`	Internal text alias for the button active state.	src/presentation-button.css	Internal
`--dn-button-focus-background`	Internal background alias for the button focus state.	src/presentation-button.css	Internal
`--dn-button-focus-border`	Internal border alias for the button focus state.	src/presentation-button.css	Internal
`--dn-button-focus-icon`	Internal icon alias for the button focus state.	src/presentation-button.css	Internal
`--dn-button-focus-text`	Internal text alias for the button focus state.	src/presentation-button.css	Internal
`--dn-button-disabled-background`	Internal background alias for the button disabled state.	src/presentation-button.css	Internal
`--dn-button-disabled-border`	Internal border alias for the button disabled state.	src/presentation-button.css	Internal
`--dn-button-disabled-icon`	Internal icon alias for the button disabled state.	src/presentation-button.css	Internal
`--dn-button-disabled-text`	Internal text alias for the button disabled state.	src/presentation-button.css	Internal
`--dn-button-selected-background`	Internal background alias for the button selected state.	src/presentation-button.css	Internal
`--dn-button-selected-border`	Internal border alias for the button selected state.	src/presentation-button.css	Internal
`--dn-button-selected-icon`	Internal icon alias for the button selected state.	src/presentation-button.css	Internal
`--dn-button-selected-text`	Internal text alias for the button selected state.	src/presentation-button.css	Internal
`--dn-button-selected-active-background`	Internal background alias for the button selected-active state.	src/presentation-button.css	Internal
`--dn-button-selected-active-border`	Internal border alias for the button selected-active state.	src/presentation-button.css	Internal
`--dn-button-selected-active-icon`	Internal icon alias for the button selected-active state.	src/presentation-button.css	Internal
`--dn-button-selected-active-text`	Internal text alias for the button selected-active state.	src/presentation-button.css	Internal

Emphasis aliases

Variable	Description	Owner	Stability
`--dn-emphasis-content-color`	Internal inherited emphasis alias for content color.	src/presentation-*.css	Internal
`--dn-emphasis-input-background`	Internal inherited emphasis alias for input background.	src/presentation-*.css	Internal
`--dn-emphasis-input-border`	Internal inherited emphasis alias for input border.	src/presentation-*.css	Internal
`--dn-emphasis-label-color`	Internal inherited emphasis alias for label color.	src/presentation-*.css	Internal
`--dn-emphasis-pill-background`	Internal inherited emphasis alias for pill background.	src/presentation-*.css	Internal
`--dn-emphasis-pill-border`	Internal inherited emphasis alias for pill border.	src/presentation-*.css	Internal
`--dn-emphasis-pill-color`	Internal inherited emphasis alias for pill color.	src/presentation-*.css	Internal