Miscellaneous
Z-index, opacity, blur, breakpoint, and layout dimension tokens.
Z-Index
Named stacking layers. Do not use arbitrary z-index values.
| Token | CSS Variable | Value | Description |
|---|---|---|---|
zIndex.dropdown | --force-zIndex-dropdown | 100 | Dropdown menus, select lists. |
zIndex.sticky | --force-zIndex-sticky | 200 | Sticky table headers, section headers. |
zIndex.fixed | --force-zIndex-fixed | 300 | Fixed elements (topbar). |
zIndex.modal-backdrop | --force-zIndex-modal-backdrop | 400 | Modal overlay scrim. |
zIndex.modal | --force-zIndex-modal | 500 | Modal content panel. |
zIndex.popover | --force-zIndex-popover | 600 | Popovers that appear above modals. |
zIndex.tooltip | --force-zIndex-tooltip | 700 | Tooltips. Highest standard layer. |
zIndex.toast | --force-zIndex-toast | 800 | Toast notifications. Visible above everything. |
Opacity
Opacity values for disabled, subtle, and overlay states.
| Token | CSS Variable | Value | Description |
|---|---|---|---|
opacity.disabled | --force-opacity-disabled | 0.5 | Disabled elements. Apply to the entire element, not just text. |
opacity.subtle | --force-opacity-subtle | 0.7 | Subtle de-emphasis without full disabled treatment. |
opacity.overlay | --force-opacity-overlay | 0.5 | Overlay/scrim opacity. |
Blur
Backdrop blur values for glassmorphism and overlay effects.
| Token | CSS Variable | Value | Description |
|---|---|---|---|
blur.sm | --force-blur-sm | 8px | Subtle backdrop blur. |
blur.md | --force-blur-md | 16px | Medium backdrop blur for overlays. |
blur.lg | --force-blur-lg | 24px | Strong backdrop blur. |
blur.xl | --force-blur-xl | 40px | Maximum backdrop blur for frosted glass effects. |
Breakpoints
Responsive breakpoints for media queries.
| Token | CSS Variable | Value | Description |
|---|---|---|---|
breakpoint.sm | --force-breakpoint-sm | 576px | Small devices (phones landscape). |
breakpoint.md | --force-breakpoint-md | 768px | Medium devices (tablets). |
breakpoint.lg | --force-breakpoint-lg | 992px | Large devices (small desktops). |
breakpoint.xl | --force-breakpoint-xl | 1200px | Extra large devices (standard desktops). |
breakpoint.2xl | --force-breakpoint-2xl | 1400px | Wide screens. |
Layout
Fixed shell dimensions for the application layout (header, sidebar, content).
| Token | CSS Variable | Value | Description |
|---|---|---|---|
layout.header-height | --force-layout-header-height | 4rem | 64px. TopBar height. |
layout.sidebar-width | --force-layout-sidebar-width | 16rem | 256px. Sidebar expanded width. |
layout.sidebar-collapsed | --force-layout-sidebar-collapsed | 4rem | 64px. Sidebar collapsed width. |
layout.content-max-width | --force-layout-content-max-width | 87.5rem | 1400px. Optional reading-measure cap for narrow content types (forms, long-form prose, settings columns). Do NOT apply to the main content panel — the shell's content panel fills the available width between the sidebar and viewport edge. Use this token only when constraining an inner column for readability. |
layout.content-padding | --force-layout-content-padding | 1.5rem | 24px. Content area padding (matches spacing.6). |