Ocean Theme
A deep teal and cyan palette inspired by ocean depths.
Preview
Palette
border
intent
focus
typography
foreground
radius
surface
UI Preview
Card Title
This card uses theme tokens.
Palette
border
intent
focus
typography
foreground
radius
surface
UI Preview
Card Title
This card uses theme tokens.
A deep teal and cyan palette inspired by ocean depths.
Overview
Ocean is a preset theme that provides a complete set of design tokens for css, tailwind styling profiles. It includes light and dark mode palettes, typography scales, spacing, and interactive states.
Palette
Ocean defines a full semantic color palette including surface layers, foreground colors, primary/secondary actions, and semantic states (success, warning, destructive). The palette is designed for WCAG AA contrast compliance in both light and dark modes.
Typography
The theme inherits the project’s font configuration and applies a six-step type scale (xs, sm, base, md, lg, xl) with paired line-heights. Heading and body text follow the Solidiom typeset conventions.
Tokens
Ocean exposes semantic tokens through CSS custom properties:
- Surface:
--sol-surface,--sol-surface-raised,--sol-surface-overlay,--sol-surface-sunken - Foreground:
--sol-foreground,--sol-foreground-muted,--sol-foreground-subtle - Primary:
--sol-primary,--sol-primary-hover,--sol-primary-foreground - States:
--sol-success,--sol-warning,--sol-destructive - Radius:
--sol-radius-sm,--sol-radius,--sol-radius-lg,--sol-radius-full
Outputs
Ocean ships in the following output formats:
- css — CSS custom properties stylesheet
- tailwind — Tailwind CSS configuration mapping
Installation
pnpm add @solidiom/themesImport the theme in your project’s entry point and apply it through your chosen styling profile. The theme can be used standalone or extended to create a custom theme.