@inkdropapp/css

The common stylesheets and design tokens for Inkdrop.

This package ships Inkdrop's design system in two parallel forms:

• CSS files — native cascade layers (@layer) for the reset, design tokens, utilities, and themes.
• TypeScript modules — the same token values exported as typed objects, for use in JS/TS (inline styles, component props, computed colors).

It ships source only (raw .css and .ts) with no build step — consume it through a bundler.

Install

pnpm add @inkdropapp/css

Usage

CSS

Import layers.css first — it declares the cascade-layer order that everything else relies on for correct precedence — then pull in the layers you need:

@import '@inkdropapp/css/layers.css'; /* declares @layer order — must come first */
@import '@inkdropapp/css/reset.css';
@import '@inkdropapp/css/tokens.css';
@import '@inkdropapp/css/utilities.css';
@import '@inkdropapp/css/status.css';
@import '@inkdropapp/css/task-progress.css';
@import '@inkdropapp/css/tags.css';
@import '@inkdropapp/css/markdown.css';

Or, from a JS bundler:

import '@inkdropapp/css/layers.css'
import '@inkdropapp/css/tokens.css'
// ...

tokens.css exposes the design tokens as CSS custom properties:

.note-tag {
  color: hsl(var(--hsl-slate-500));
  font-weight: var(--font-weights-semibold);
}

TypeScript

The same values are available as typed objects:

import { hsl, colors, fontWeights } from '@inkdropapp/css/tokens'
import { tags, tagsDark } from '@inkdropapp/css/tags'
import { status } from '@inkdropapp/css/status'

const activeColor = `hsl(${hsl.slate400})` // "hsl(215 16% 47%)"
const weight = fontWeights.semibold // 600

Cascade layers

layers.css declares the order (lowest → highest precedence):

reset, base, tokens, recipes, utilities, theme, theme.ui, theme.preview, theme.syntax

| Layer | File | Contents | | --------------- | ------------------- | ------------------------------------------------------------------------------- | | reset | reset.css | CSS reset / normalize | | tokens | tokens.css | Design tokens as custom properties (--hsl-*, --color-*, --font-weights-*) | | utilities | utilities.css | Utility classes and base sizing variables | | theme.ui | status.css | Note status colors (--note-status-*) | | theme | task-progress.css | Task progress view colors (light + dark) | | theme.preview | markdown.css | GFM markdown preview and alert colors (light + dark via light-dark()) | | theme.preview | mermaid.css | Mermaid diagram colors (--mermaid-*, light + dark via light-dark()) | | — | tags.css | Tag color palettes |

TypeScript exports

| Module | Exports | Description | | ------------------ | ---------------------------------- | -------------------------------------------------- | | tokens.ts | hsl, colors, fontWeights | Color channel triplets, named colors, font weights | | tags.ts | tags, tagsDark | Per-color tag style objects (light + dark) | | status.ts | status | Note status colors keyed by NOTE_STATUS | | markdown.ts | markdown | GFM alert colors | | task-progress.ts | taskProgress, taskProgressDark | Task progress view colors (light + dark) |

status.ts keys its map by NOTE_STATUS from inkdrop-model (an optional dependency).

Preview

tags.html is a standalone page for previewing the tag color styles — open it in a browser after referencing the CSS.

Development

pnpm install
pnpm lint      # oxlint
pnpm format    # oxfmt — formats **/*.{js,ts,json}

Linting and formatting use the oxc toolchain (oxlint + oxfmt); config lives in .oxlintrc.json and .oxfmtrc.json.

License

MIT © Takuya Matsuyama