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.
<style>
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%)
);
color: var(--nve-sys-interaction-color);
border: 0;
padding: 12px;
cursor: pointer;
margin-bottom: 6px;
width: 100px;
}
button:hover,
button[hover] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);
}
button:active,
button[active] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);
}
button:disabled,
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);
}
</style>
<section>
<button>button</button>
<button hover>hover</button>
<button active>active</button>
<button selected>selected</button>
<button disabled>disabled</button>
</section>
<section style="--nve-sys-interaction-state-base: var(--nve-sys-interaction-emphasis-background)">
<button>button</button>
<button hover>hover</button>
<button active>active</button>
<button selected>selected</button>
<button disabled>disabled</button>
</section>
button hover active selected disabled button hover active selected disabled
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.
<style>
.menu {
display: flex;
flex-direction: column;
max-width: 200px;
width: 100%;
margin: 0;
padding: 0;
}
.menu-item {
width: 100%;
display: block;
border: 0;
cursor: pointer;
text-align: left;
padding: var(--nve-ref-size-200) var(--nve-ref-size-300);
color: var(--nve-sys-interaction-color);
font-size: var(--nve-ref-font-size-300);
border-radius: var(--nve-ref-border-radius-xs);
background-image: linear-gradient(
color-mix(
in oklab,
var(--nve-sys-interaction-state-base) 100%,
var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)
)
0 0
) !important;
}
.menu-item:hover,
.menu-item[hover] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);
}
.menu-item:active,
.menu-item[active] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);
}
.menu-item[selected] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);
}
.menu-item[disabled] {
--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);
cursor: not-allowed;
}
.menu-item[readonly] {
--nve-sys-interaction-state-ratio: 0;
}
.menu-item:focus,
.menu-item[focused] {
outline-offset: -3px;
outline: 5px auto -webkit-focus-ring-color;
outline: Highlight solid 2px;
}
</style>
<div nve-layout="grid gap:md">
<section nve-theme="root light" nve-layout="span:12 row gap:sm pad:md align:stretch">
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item">default</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" hover>hover</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" active>active</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" selected>selected</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" disabled>disabled</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" focused>focused</div>
<div class="menu-item">item</div>
</div>
</section>
<section nve-theme="root dark" nve-layout="span:12 row gap:sm pad:md align:stretch">
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item">default</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" hover>hover</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" active>active</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" selected>selected</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" disabled>disabled</div>
<div class="menu-item">item</div>
</div>
<div class="menu">
<div class="menu-item">item</div>
<div class="menu-item" focused>focused</div>
<div class="menu-item">item</div>
</div>
</section>
<section nve-theme="root light" nve-layout="span:6 pad:md align:stretch">
<nve-card>
<nve-card-content nve-layout="grid gap:md">
<div nve-layout="span:5 column gap:xs">
<div class="menu-item">default</div>
<div class="menu-item" hover>hover</div>
<div class="menu-item" active>active</div>
<div class="menu-item" selected>selected</div>
<div class="menu-item" disabled>disabled</div>
<div class="menu-item" focused>focused</div>
</div>
<div nve-layout="span:7">container</div>
</nve-card-content>
</nve-card>
</section>
<section nve-theme="root dark" nve-layout="span:6 pad:md align:stretch">
<nve-card>
<nve-card-content nve-layout="grid gap:md">
<div nve-layout="span:5 column gap:xs">
<div class="menu-item">default</div>
<div class="menu-item" hover>hover</div>
<div class="menu-item" active>active</div>
<div class="menu-item" selected>selected</div>
<div class="menu-item" disabled>disabled</div>
<div class="menu-item" focused>focused</div>
</div>
<div nve-layout="span:7">container</div>
</nve-card-content>
</nve-card>
</section>
</div>
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