CSS Custom Properties

All design tokens are defined in css/tokens.css and can be overridden to customize the system.

The values below show the DS2 defaults. Switching the root theme to data-ui-theme="xna" swaps in the XNA token set (for example --ds2-font-family: "Open Sans", Arial, sans-serif, --ds2-font-size-base: 0.875rem, and --ds2-font-weight-bold: 600).

Color Tokens

Property	Default	Description
`--ds2-color-main`	`#003a60`	Primary brand color (navy)
`--ds2-color-main-dark`	`#00203c`	Darker variant of main
`--ds2-color-highlight`	`#e17100`	Accent/highlight color (orange)
`--ds2-color-highlight-light`	`#fff8ec`	Highlight background tint
`--ds2-color-focus`	`#0ff`	Focus ring color (cyan)
`--ds2-color-focus-light`	`#dbffff`	Light focus background
`--ds2-color-success`	`#0ba63c`	Success/positive state
`--ds2-color-warning`	`#bd8908`	Warning state
`--ds2-color-error`	`#dc143c`	Error/danger state
`--ds2-color-white`	`#fff`	White
`--ds2-color-black`	`#000`	Black
`--ds2-color-grey-1`	`#f8f8f8`	Lightest grey (backgrounds)
`--ds2-color-grey-2`	`#dfdfdf`	Borders
`--ds2-color-grey-3`	`#a4a4a4`	Muted elements
`--ds2-color-grey-4`	`#909090`	Input borders
`--ds2-color-grey-5`	`#6e6e6e`	Secondary text
`--ds2-color-grey-6`	`#f0f0f0`	Table row alt background

Typography Tokens

Property	Default	Description
`--ds2-font-family`	`"Public Sans", sans-serif`	Base font family (XNA overrides to `Open Sans, Arial, sans-serif`)
`--ds2-font-size-xs`	`0.75rem`	Extra-small text
`--ds2-font-size-sm`	`0.875rem`	Small text / default body
`--ds2-font-size-base`	`1rem`	Base text
`--ds2-font-size-lg`	`1.125rem`	Large text
`--ds2-font-size-xl`	`1.25rem`	Extra-large text
`--ds2-font-weight-normal`	`400`	Normal weight
`--ds2-font-weight-semibold`	`600`	Semibold
`--ds2-font-weight-bold`	`700`	Bold

Spacing Tokens

Property	Default	Description
`--ds2-space-1`	`0.25rem`	4px
`--ds2-space-2`	`0.5rem`	8px
`--ds2-space-3`	`0.75rem`	12px
`--ds2-space-4`	`1rem`	16px
`--ds2-space-5`	`1.5rem`	24px
`--ds2-space-6`	`2rem`	32px

Layout & Border Tokens

Property	Default	Description
`--ds2-border-radius`	`4px`	Standard border radius
`--ds2-border-width`	`1px`	Standard border width
`--ds2-shadow-sm`	`0 1px 2px rgb(0 0 0/8%)`	Small shadow
`--ds2-shadow-md`	`0 2px 8px rgb(0 0 0/12%)`	Medium shadow
`--ds2-shadow-lg`	`0 4px 16px rgb(0 0 0/16%)`	Large shadow
`--ds2-shadow-focus`	`0 0 0 3px var(--ds2-color-focus)`	Focus ring shadow

Transition Tokens

Property	Default	Description
`--ds2-transition-fast`	`100ms ease`	Fast micro-interactions
`--ds2-transition-base`	`250ms ease`	Standard transitions

Z-Index Tokens

Property	Default	Description
`--ds2-z-dropdown`	`100`	Dropdowns & popovers
`--ds2-z-modal`	`500`	Modal dialogs
`--ds2-z-tooltip`	`700`	Tooltips
`--ds2-z-toast`	`900`	Toast notifications

Component-Level Custom Properties

Some Web Components expose additional custom properties for fine-grained control:

Side Panel

Property	Default	Description
`--ds2-sidepanel-width`	`19.25rem`	Panel width when open

Theming Example

/* Override tokens for a custom theme */
:root {
  --ds2-color-main: #1a5276;
  --ds2-color-highlight: #f39c12;
  --ds2-border-radius: 8px;
  --ds2-font-family: "Inter", sans-serif;
}