@ossy/themes

Theme definitions for the Ossy design system. Provides color palettes, spacing scales, and surface variants used by @ossy/design-system.

Installation

npm install @ossy/themes

Available themes

| Theme | Description | |-------|-------------| | CloudLight | Light theme with cloud-inspired palette | | CloudDark | Dark theme variant |

Usage

Use themes with @ossy/design-system:

import { Theme } from '@ossy/design-system'
import { CloudLight, CloudDark } from '@ossy/themes'

// Single theme
<Theme theme={CloudLight}>
  <App />
</Theme>

// Multiple themes with switching
<Theme
  theme={CloudLight}
  themes={{ light: CloudLight, dark: CloudDark }}
  defaultTheme="light"
>
  <App />
</Theme>

Custom themes

Create custom themes by following the Theme interface from @ossy/types. Use normalizeTheme to ensure your theme has all required fields:

import { normalizeTheme } from '@ossy/themes'

const myTheme = normalizeTheme({
  // Your theme overrides
})

Pages (auto-discovered by @ossy/app)

| File | Page id | Default paths | |---|---|---| | home.page.jsx | themes/home | /themes (en), /teman (sv) | | theme.page.jsx | theme | /themes/:themeId (en), /teman/:themeId (sv) |

Install @ossy/themes and @ossy/app will auto-discover these pages, providing a theme browser and detail view.

Related packages

• @ossy/design-system — React components that consume themes
• @ossy/pages — Provides ThemeDisplay used by the detail page
• @ossy/types — TypeScript Theme interface

License

MIT