@jflamb/keycaps-tokens

Framework-neutral Keycaps CSS custom properties, locally hosted Piazzolla, Sofia Sans and Lilex assets, semantic light/dark themes, reduced-motion defaults, and forced-color support.

@import "@jflamb/keycaps-tokens";

Set data-theme="light" or data-theme="dark" on the root element for an explicit theme. Without an explicit value, Keycaps follows the system color scheme.

The semantic Layered Plate ladder is available as --kc-color-surface-minimal, --kc-color-surface-tonal, and --kc-color-surface-contrast, with matching inverse text tokens. Selector and settling transitions use --kc-duration-settle and --kc-ease-settle; reduced motion resolves that duration and its offset/rotation tokens to zero.

Long-form content

Styling for the elements a CMS or a markdown pipeline emits ships separately, because a product surface that renders no articles should not pay for it:

@import "@jflamb/keycaps-tokens/prose.css";

<article class="kc-prose">…</article>

Everything in it is scoped to .kc-prose, so importing it changes nothing until that class appears.

Email rendering

Email renderers consume the generated, flattened theme rather than copying CSS values or relying on custom properties inside an email client:

import theme from "@jflamb/keycaps-tokens/email-theme.json" with { type: "json" };

The same artifact is published at https://jflamb.github.io/keycaps-design-system/email-theme.json. It contains only validated appearance data; email content and HTML remain the consumer's responsibility.

New projects should use the --kc-* properties. Existing jflamb applications can opt into compatibility aliases with:

@import "@jflamb/keycaps-tokens/legacy.css";

Documentation: https://jflamb.github.io/keycaps-design-system/

License

MIT for the tokens, base styles, and build output — see LICENSE.

The bundled font binaries are not MIT. Piazzolla, Sofia Sans and Lilex remain under the SIL Open Font License 1.1, which is why this package declares MIT AND OFL-1.1. Keep LICENSE-PIAZZOLLA.txt, LICENSE-SOFIA-SANS.txt and LICENSE-LILEX.txt with the WOFF2 files if you copy them out of dist/fonts/.