@sparkstone/css

@sparkstone/css is a lightweight SCSS framework inspired by Pico.css, but rebuilt from the ground up with oklch() color primitives and a powerful theme system based on native CSS variables.

📦 View on NPM · 💻 View on GitHub

🎨 Perceptually-uniform color scales via oklch()
🌗 Graceful light/dark theming using system preferences
🧱 Minimal class usage with sensible defaults
⚡ No JavaScript required for core styling
🧩 Sass functions and mixins for full control

Get Started

Install the package with your preferred package manager:

# pnpm
pnpm add @sparkstone/css

# yarn
yarn add @sparkstone/css

# npm
npm install @sparkstone/css

Then import the theme:

// SCSS
import "@sparkstone/css/src/theme.scss";

// or precompiled CSS
import "@sparkstone/css/theme.css";

Theming

The entire theme can be customized via CSS variables. For example:

:root {
  --color: rebeccapurple;
  --primary-color: blue;
  --accent-color: oklch(from var(--color) l c calc(h + 180));
  --error-color: maroon;
}

Light and dark mode follow system settings by default. Override manually with:

<html data-color-scheme="light">
<!-- or -->
<html data-color-scheme="dark">

Docs

Explore styled components and utilities:

Live Theme Preview

Try customizing the theme color: