Interactions
The interaction tokens --nve-sys-interaction-* provide semantic interaction states for interactive components. These styles include the following categories:
defaultephasizedestructiveflat
All UI interactions contain a default set of six interactive states.
defaulthoveractiveselecteddisabledfocused
Below are HTML & CSS demonstrating how to consume the interaction design tokens. Custom elements replace demos over time.
Interactions
The --nve-sys-interaction-state-ratio-* provides a step ratio value for each interaction state. This combined with the CSS color-mix property allows colors to be dynamically computed from the base color.
Theme interaction state system for buttons showing hover, active, selected, and disabled states.
button {
background: color-mix(in oklab, var(--nve-sys-interaction-state-base) 100%, var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio, 0%));
}
button:hover {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);
}
button:active {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);
}
button:disabled {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);
}
button[selected] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);
}
Interactions
Theme interaction state system for menu items with all interactive states in both themes.
container
container
Tokens
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-color | --nve-ref-color-neutral-1200 | Use for default interactive element text color | ||
| --nve-sys-interaction-background | --nve-ref-color-neutral-600 | Use for default interactive element backgrounds | ||
| --nve-sys-interaction-background-100 | --nve-ref-color-neutral-600 | Use for subtle interactive element backgrounds | ||
| --nve-sys-interaction-background-200 | --nve-ref-color-neutral-500 | Use for standard interactive element backgrounds | ||
| --nve-sys-interaction-background-300 | --nve-ref-color-neutral-500 | Use for elevated interactive element backgrounds |
Emphasis
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-emphasis-color | --nve-sys-text-black-color | Use for text color in primary call-to-action buttons | ||
| --nve-sys-interaction-emphasis-background | --nve-sys-accent-primary-background | Use for background color in primary call-to-action buttons |
Destructive
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-destructive-background | --nve-ref-color-red-cardinal-1100 | Use for background color in destructive action buttons | ||
| --nve-sys-interaction-destructive-color | --nve-sys-text-white-color | Use for text color in destructive action buttons |
Highlighted
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-highlighted-background | --nve-ref-color-blue-cobalt-500 | Use for background color in highlighted interactive elements | ||
| --nve-sys-interaction-highlighted-muted-background | --nve-ref-color-blue-cobalt-300 | Use for subtle highlighted element backgrounds | ||
| --nve-sys-interaction-highlighted-color | --nve-sys-interaction-color | Use for text color in highlighted interactive elements |
Selected
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-selected-color | --nve-sys-text-emphasis-color | Use for text color in selected interactive elements | ||
| --nve-sys-interaction-selected-background | --nve-sys-interaction-background | Use for background color in selected interactive elements |
Disabled
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-disabled-color | --nve-ref-color-neutral-800 | Use for text color in disabled interactive elements | ||
| --nve-sys-interaction-disabled-background | --nve-ref-color-neutral-600 | Use for background color in disabled interactive elements |
Field
| Token | Value | Description | Demo | |
|---|---|---|---|---|
| --nve-sys-interaction-field-height | --nve-ref-size-800 | Use for standard height of form inputs and buttons | ||
| --nve-sys-interaction-field-color | --nve-sys-interaction-color | Use for text color in form inputs and text fields | ||
| --nve-sys-interaction-field-background | --nve-sys-interaction-background | Use for background color in form inputs and text fields | ||
| --nve-sys-interaction-field-background-100 | --nve-sys-interaction-background-100 | Use for subtle form input backgrounds | ||
| --nve-sys-interaction-field-background-200 | --nve-sys-interaction-background-200 | Use for standard form input backgrounds | ||
| --nve-sys-interaction-field-background-300 | --nve-sys-interaction-background-300 | Use for elevated form input backgrounds |