Cynosurev0.5.0What changed
One small, themeable, accessible interface kit.
React components, Facet icons and a token system that restyles all of it. Built once and used by all my projects: extensions, web apps and sites.
sh
pnpm add @arshad-shah/cynosureGetting startedOne small, themeable, accessible UI system, used by all my projects: browser extensions, web apps and sites. Same feel and layout everywhere; each project sets its accent, its scale and any token it needs.
ThemingcreateTheme derives accent hover/active (OKLCH), soft and ring mixes, on-accent text with WCAG contrast ≥ 4.5:1, the code colours (--cy-color-syntax-*, keywords from the accent; see Code editors) and eight chart series c
IconsCynosure ships two kinds of icon, both drawn by the same Icon component.
AccessibilityThis page lists what Cynosure's components do for keyboard, touch, low-vision and screen reader users, and how each point is checked. Everything here is taken from the source, the component READMEs and the tests that run
Code editors and highlightersCynosure has one set of code colours, as tokens, so any editor or highlighter can be styled from your theme: CodeMirror, Monaco, Shiki, Prism, highlight.js, or your own. Cynosure does not include an editor and adds no de
Using Cynosure without ReactPages that don't run React (Astro pages, static sites, plain TypeScript apps) can still use Cynosure's tokens and icons. They do not get the components: those are React, because the components are what provide keyboard,
Build-tool adaptersCynosure needs no plugin: import @arshad-shah/cynosure/styles.css (or per-component styles/<name>.css) and the components. For shadow roots use @arshad-shah/cynosure/styles.inline (css string or createStyleSheet()).
ComponentsEvery Cynosure component, grouped by what it is for.
ChangelogEvery release of Cynosure, newest first.
- Badge: leave out the text for a status dot alone in the tone's own colour: with a label it is an image named by it, without one it is decoration hidden from assistive technology.
- Button: --cy-button-hover-bg and --cy-button-hover-ink tokens set the fill and text colour on hover, for one button whose hover differs from its variant.
- Button: --cy-button-square-width sets the width of a square (icon-only) button such as an IconButton; it defaults to the height. TitleBar widens its window controls with it.
- Card: title and description put a header above the content (headingLevel, default 3), sharing its row with actions. New token --cy-card-title-size.