--interactive-surface-bg
Interactive Surface Library
A drop-in CSS interaction primitive for buttons, cards, and icon controls. This page makes each feature visible: token values, state behavior, accessibility outcomes, and creative ways to compose the same primitive.
Tokens are shown with live values and color codes.
Token map: color codes and vars
These are the same variables consumed by interactive-surface.css. Each card
includes the variable and its current value in this demo theme.
--interactive-surface-fg
--interactive-surface-border-color
--interactive-surface-focus-ring-color
--accent-main
--accent-soft
.my-control { --interactive-surface-bg:rgb(15 79 127); --interactive-surface-fg:rgb(244 251 255);
--interactive-surface-focus-ring-color:rgb(30 91 240); }
Editing Light theme token overrides.
Card surfaces
The same primitive works for card-like affordances with no extra runtime logic.
Icon micro controls
Role-based icon colors can change by mode while keeping a consistent hit target.
light-icon: var(--icon-light)
dark-icon: var(--icon-dark)
accessibility-icon: var(--icon-accessibility)
icon-only keeps 44px minimum target
disabled + aria-disabled support
Accessibility highlights
Side-by-side comparison: left inherits the full interaction/accessibility model; right is a plain control baseline.
With interactive-surface
- Focus ring is visible with
:focus-visiblefallback. - Pressed and disabled states map directly to ARIA attributes.
- Reduced motion and forced colors are supported by default.
Plain controls baseline
- No unified hover/active model.
- No tokenized theming contract.
- Requires extra CSS to reach parity with contrast and motion handling.
Creative composition ideas
Use the same primitive for launcher bars, filters, and dashboard cards.
Command launcher
Filter chip row
Playlist card
README and wiki links
This section mirrors README content so GitHub Pages users can test the library and read docs without switching pages.