CSS Custom Properties

Theming & Tokens

All visual properties are exposed as CSS custom properties. Override them at any scope to create custom themes. Use tokens.css alone for maximum control.

CSS Custom Properties
All available tokens with their default values.
Token Purpose Default
--disclosure-duration Animation duration 300ms
--disclosure-easing Animation timing function cubic-bezier(0.4, 0, 0.2, 1)
--disclosure-indicator-size Indicator width/height 20px
--disclosure-indicator-color Indicator color (closed) #666
--disclosure-indicator-color-open Indicator color (open) #00ff88
--disclosure-padding-x Summary horizontal padding 0
--disclosure-padding-y Summary vertical padding 8px
--disclosure-content-padding Content area padding 8px
--disclosure-indicator-gap Gap between indicator and label 8px
--disclosure-panel-bg Panel background (closed) #1a1a1a
--disclosure-panel-bg-open Panel background (open) #161616
--disclosure-panel-border Panel border color #333
--disclosure-panel-padding Panel content padding 8px 16px
--disclosure-faq-border FAQ divider color #333
--disclosure-faq-font-size FAQ question font size 18px
--disclosure-faq-content-padding FAQ answer padding 16px 0 0 24px
Theme Previews
Override tokens to create different themes. Each preview below uses a scoped CSS override.
Dark Theme (Default)
Dark panel disclosure

This uses the default dark theme token values.

Light Theme
Light panel disclosure

Override indicator and panel tokens for a light appearance.

Custom Accent (Purple + Amber)
Custom themed disclosure

Any color scheme can be applied by overriding the CSS custom properties.

Creating a Custom Theme
Override tokens at any CSS scope.
/* Light theme override */
.my-light-theme {
  --disclosure-indicator-color: #999;
  --disclosure-indicator-color-open: #059669;
  --disclosure-panel-bg: #fff;
  --disclosure-panel-bg-open: #f9fafb;
  --disclosure-panel-border: #e0e0e0;
  --disclosure-faq-border: #e0e0e0;
}

/* Or use tokens.css for full control */
<link rel="stylesheet" href="@disclosures/core/dist/tokens.css">
/* tokens.css provides ONLY the custom properties —
   you supply all structural styles yourself. */
Accessibility Features
prefers-reduced-motion

When the user has reduced motion enabled, the indicator transition is disabled via CSS and the JS animation duration is set to 0. Content still opens/closes but without animated height transitions.

focus-visible

Summary elements receive a 2px solid outline using the accent color when focused via keyboard (Tab navigation). Mouse clicks do not trigger the outline.

Try it: press Tab to focus the disclosures above.

/* Built-in reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .disclosure__indicator {
    transition: none;
  }
}

/* Built-in focus-visible styles */
.disclosure__summary:focus-visible {
  outline: 2px solid var(--disclosure-indicator-color-open);
  outline-offset: 2px;
}
tokens.css vs styles.css
styles.css

Tokens + BEM classes + variants + indicators. Drop in and go.

<link rel="stylesheet"
  href="dist/styles.css">
tokens.css

Only CSS custom properties. You write all structural CSS yourself.

<link rel="stylesheet"
  href="dist/tokens.css">