inqud-ui-tokens

Framework-agnostic INQUD design tokens as CSS custom properties. Consumed by inqud-ui-core-react (React) and inqud-ui-core-angular (Angular), and usable from any framework or plain HTML.

Install

npm install inqud-ui-tokens

Usage

Import the stylesheet once at the root of your app:

import 'inqud-ui-tokens/tokens.css'

Or in CSS/SCSS:

@import 'inqud-ui-tokens/tokens.css';

Then reference the tokens:

.my-button {
  background: var(--inqud-primary-600);
  color: var(--inqud-white);
  border-radius: var(--inqud-radius-lg);
  font-family: var(--inqud-font-sans);
}

Theming

Dark is the default theme (declared on :root). Switch to light by setting the attribute on a root element — no JavaScript required beyond toggling it:

<html data-theme="light"> ... </html>

Notes

• The Onest font is not bundled. Load it yourself (e.g. via @fontsource/onest or a <link>); --inqud-font-sans references it.
• --inqud-neutral-* are aliases of the --inqud-grey-* scale.
• The --inqud-primary-* scale is anchored on the brand green (--inqud-primary-600 = --inqud-ambitious-green = #077453).