@sparkstone/css

Quickstart

Install, pick a build, set a color.

Install

# pnpm
pnpm add @sparkstone/css

# yarn
yarn add @sparkstone/css

# npm
npm install @sparkstone/css

Pick a build

The package root is the class build. The classless build, which is the 1.x theme, lives at /classless. 

// Sass, either build. Needs the Node package importer:
//   sass --pkg-importer=node
//   importers: [new NodePackageImporter()]
@use "pkg:@sparkstone/css";
@use "pkg:@sparkstone/css/classless";
// Precompiled CSS
import "@sparkstone/css";           // dist/index.css
import "@sparkstone/css/classless"; // dist/classless.css

A complete page

Switch the tab to see the same page in the other build.

<!DOCTYPE html>
<html lang="en" data-color-scheme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <style>
      :root {
        --color: teal;
      }
    </style>
  </head>
  <body class="prose">
    <main class="container">
      <h1>Hello</h1>
      <p>Body copy, and <a href="#" class="link">a link</a>.</p>

      <article class="card">
        <h2>A card</h2>
        <p>Cards are just articles.</p>
        <footer class="card-actions">
          <button class="btn btn-secondary">Cancel</button>
          <button class="btn">Confirm</button>
        </footer>
      </article>
    </main>
  </body>
</html>

Set your color

One custom property drives the whole palette. Everything else is derived from it in oklch. 

:root {
  --color: teal;
}

Coming from 1.x