@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 |

Semantic colors on base.color (inherited by Cloud themes) include accent, contrast, info, warning, and danger. Feedback components such as Alert and Badge read these as --color-* CSS variables.

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
})

Responsive tokens (media)

Themes may declare a media map. Keys are CSS media queries; values are partial token trees. @ossy/design-system createCss emits matching @media blocks that redeclare CSS variables (used by Text, inputs, etc.).

Cloud themes inherit compact typography from base at (max-width: 900px) — the same breakpoint as the app shell’s compact chrome. Body/default stays at 1rem so iOS does not zoom focused inputs.

normalizeTheme deep-merges media with base.media, so a custom theme can override one query or one text token without dropping the rest of the compact scale:

const myTheme = normalizeTheme({
  media: {
    '(max-width: 900px)': {
      text: {
        display: { 'font-size': '1.75rem' },
      },
    },
  },
})
// heading-primary / hero / body tokens from base.media remain

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