Layers
Layers define the position of an element on the z-axis in the UI. Layer types are categories of elements that build up to higher layers as they stack or nest. Read more about the popover explainer.
The layers in order of stacking are the following:
canvas - body, documentcontainer - cards, steps, tabsoverlay - modals, drawers, dropdowns (menus, filters, combobox)popover - tooltips, toasts, notifications
Theme layer object reference showing semantic backgrounds for canvas, container, overlay, and popover.
<style>
.layer-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding: 24px;
background: var(--nve-sys-layer-canvas-background);
}
.layer-demo h2,
.layer-demo ul {
margin: 0 0 12px 0;
font-weight: normal;
}
.canvas {
background: var(--nve-sys-layer-canvas-background);
color: var(--nve-sys-layer-canvas-color);
padding: var(--nve-ref-size-600);
}
.container {
background: var(--nve-sys-layer-container-background);
color: var(--nve-sys-layer-container-color);
padding: var(--nve-ref-size-500);
box-shadow: var(--nve-ref-shadow-100);
border-radius: var(--nve-ref-border-radius-lg);
width: 400px;
height: 300px;
}
.overlay {
background: var(--nve-sys-layer-overlay-background);
color: var(--nve-sys-layer-overlay-color);
padding: var(--nve-ref-size-600);
box-shadow: var(--nve-ref-shadow-200);
border-radius: var(--nve-ref-border-radius-lg);
width: 400px;
height: 300px;
}
.backdrop {
background: var(--nve-sys-layer-backdrop-background);
padding: 24px;
width: 400px;
height: 300px;
display: flex;
place-content: center;
place-items: center;
}
.backdrop .overlay {
width: 300px;
height: 200px;
}
.popover {
background: var(--nve-sys-layer-popover-background);
color: var(--nve-sys-layer-popover-color);
padding: var(--nve-ref-size-400);
box-shadow: var(--nve-ref-shadow-300);
border-radius: var(--nve-ref-border-radius-md);
width: 400px;
height: 130px;
}
</style>
<section class="layer-demo">
<div class="canvas">
<h2>canvas</h2>
<ul>
<li>document</li>
<li>body</li>
</ul>
</div>
<div class="container">
<h2>container</h2>
<ul>
<li>cards</li>
<li>steps</li>
<li>tabs</li>
</ul>
</div>
<div class="backdrop">
<div class="overlay">
<h2>overlay/backdrop</h2>
<ul>
<li>modals</li>
<li>drawers</li>
<li>dropdown menus</li>
</ul>
</div>
</div>
<div class="popover">
<h2>popover</h2>
<ul>
<li>tooltips</li>
<li>toasts</li>
<li>notifications</li>
</ul>
</div>
</section>
overlay/backdrop
- modals
- drawers
- dropdown menus
popover
- tooltips
- toasts
- notifications
Theme layer stacking (canvas, container, overlay, popover) in light and dark modes.
<style>
body {
padding: 0 !important;
}
</style>
<div nve-theme="light root" nve-layout="column gap:lg pad:lg" style="height: 50vh">
<nve-card style="width: 500px; height: 300px">
<nve-card-header>
<div slot="title">Card</div>
<div slot="subtitle">Sub Title</div>
</nve-card-header>
<nve-card-content>
<nve-input>
<label>label</label>
<input type="text" value="input" />
<nve-control-message>message</nve-control-message>
</nve-input>
</nve-card-content>
<nve-card-footer>
<nve-button>button <nve-icon name="arrow" direction="right"></nve-icon></nve-button>
</nve-card-footer>
</nve-card>
<div nve-layout="column gap:md">
<nve-input>
<label>label</label>
<input type="text" value="input" />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-button>button <nve-icon name="arrow" direction="right"></nve-icon></nve-button>
</div>
<nve-dialog size="sm" closable position="top" alignment="end" style="--min-width: 400px">
<h3 nve-text="heading">Dialog</h3>
<p nve-text="body" style="margin-bottom: 48px">hello there</p>
<nve-button id="dropdown-btn">button</nve-button>
<nve-dropdown anchor="dropdown-btn" closable position="bottom" alignment="start">
<nve-search rounded>
<label>dropdown content</label>
<nve-icon-button
id="tooltip-btn-1"
icon-name="information-circle-stroke"
container="flat"
aria-label="more details"
slot="label"
></nve-icon-button>
<input type="search" placeholder="search" />
</nve-search>
<nve-tooltip anchor="tooltip-btn-1" position="top">tooltip</nve-tooltip>
</nve-dropdown>
</nve-dialog>
</div>
<div nve-theme="dark root" nve-layout="column gap:lg pad:lg" style="height: 50vh; position: relative">
<nve-card style="width: 500px; height: 300px">
<nve-card-header>
<div slot="title">Card</div>
<div slot="subtitle">Sub Title</div>
</nve-card-header>
<nve-card-content>
<nve-input>
<label>label</label>
<input type="text" value="input" />
<nve-control-message>message</nve-control-message>
</nve-input>
</nve-card-content>
<nve-card-footer>
<nve-button>button <nve-icon name="arrow" direction="right"></nve-icon></nve-button>
</nve-card-footer>
</nve-card>
<div nve-layout="column gap:md">
<nve-input>
<label>label</label>
<input type="text" value="input" />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-button>button <nve-icon name="arrow" direction="right"></nve-icon></nve-button>
</div>
<div id="dark" style="position: absolute; right: 48px; top: 0"></div>
<nve-dialog size="sm" closable position="bottom" alignment="end" anchor="dark" style="--min-width: 400px">
<h3 nve-text="heading">Dialog</h3>
<p nve-text="body" style="margin-bottom: 48px">hello there</p>
<nve-button id="dropdown-btn">button</nve-button>
<nve-dropdown anchor="dropdown-btn" closable position="bottom" alignment="start">
<nve-search rounded>
<label>dropdown content</label>
<nve-icon-button
id="tooltip-btn-2"
icon-name="information-circle-stroke"
container="flat"
aria-label="more details"
slot="label"
></nve-icon-button>
<input type="search" placeholder="search" />
</nve-search>
<nve-tooltip anchor="tooltip-btn-2" position="top">tooltip</nve-tooltip>
</nve-dropdown>
</nve-dialog>
</div>
Layer Tokens
Canvas
| Token | Value | Description | Demo | |
| --nve-sys-layer-canvas-background | --nve-ref-color-neutral-300 | Use for page body background, the base surface in the layer hierarchy | |
| --nve-sys-layer-canvas-accent-background | --nve-ref-color-neutral-400 | Use for subtle accent backgrounds on the page body | |
| --nve-sys-layer-canvas-color | --nve-sys-text-color | Use for text color on the page body background | |
Shell
| Token | Value | Description | Demo | |
| --nve-sys-layer-shell-background | --nve-ref-color-scheme-base | Use for application shell or navigation bar backgrounds | |
| --nve-sys-layer-shell-accent-background | --nve-ref-color-neutral-100 | Use for subtle accent backgrounds on the application shell | |
| --nve-sys-layer-shell-color | --nve-sys-text-color | Use for text color on the application shell | |
Container
| Token | Value | Description | Demo | |
| --nve-sys-layer-container-background | --nve-ref-color-white | Use for card, panel, and tab container backgrounds | |
| --nve-sys-layer-container-accent-background | --nve-ref-color-neutral-100 | Use for subtle accent backgrounds within containers | |
| --nve-sys-layer-container-color | --nve-sys-text-color | Use for text color on container surfaces | |
Overlay
| Token | Value | Description | Demo | |
| --nve-sys-layer-overlay-background | --nve-ref-color-white | Use for modal, drawer, and dropdown menu backgrounds | |
| --nve-sys-layer-overlay-accent-background | --nve-ref-color-neutral-100 | Use for subtle accent backgrounds within overlays | |
| --nve-sys-layer-overlay-color | --nve-sys-text-color | Use for text color on overlay surfaces | |
Popover
| Token | Value | Description | Demo | |
| --nve-sys-layer-popover-background | --nve-ref-color-neutral-1200 | Use for tooltip, toast, and notification backgrounds | |
| --nve-sys-layer-popover-color | --nve-sys-text-white-color | Use for text color on popover surfaces | |
| --nve-sys-layer-popover-accent-background | --nve-ref-color-neutral-1100 | Use for subtle accent backgrounds within popovers | |
| --nve-sys-layer-popover-offset | --nve-ref-size-50 | Use for spacing between popover and its anchor element | |
| --nve-sys-layer-popover-arrow-offset | --nve-ref-size-100 | Use for positioning popover arrow indicators | |
| --nve-sys-layer-popover-arrow-padding | --nve-ref-size-150 | Use for padding around popover arrow indicators | |