OSCL docs

Make it yours

Small, scoped tokens. A whole different feel.

A theme for your context

Wrap your component preview with data-oscl-theme="light" or data-oscl-theme="dark". Local preview controls do not change the website theme.

tsx

<div data-oscl-theme="dark">
  <Button>Your next idea</Button>
</div>

OSCL variables and selectors are scoped. Your application chooses its fonts and global styles.

css

[data-oscl-theme="dark"] {
  --oscl-accent: #7b8cff;
  --oscl-background: #10131b;
  --oscl-surface: #1a1f2e;
}