npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@ismail-elkorchi/ui-tokens

v0.1.2

Published

CSS design tokens packaged as reusable variables for any UI.

Downloads

142

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

ismail-elkorchiismail-elkorchi

Keywords

design-tokenscss-variablesthemeui-kit

Readme

UI Tokens

Design tokens for UIK with W3C DTCG JSON sources, CSS custom properties, and a Tailwind v4 bridge.

What this package provides

  • Resolved JSON outputs for light/dark + density contexts (built from DTCG token sources in the repo).
  • CSS custom properties under the --uik- prefix.
  • Tailwind v4 theme mappings (strict + compat) for utility classes.
  • A tiny JS/TS runtime for programmatic access.

Installation

npm install @ismail-elkorchi/ui-tokens

Outputs (what to import)

CSS entrypoints:

  • @ismail-elkorchi/ui-tokens/index.css (base CSS + strict Tailwind theme mapping)
  • @ismail-elkorchi/ui-tokens/base.css (CSS variables + theme/density layers)
  • @ismail-elkorchi/ui-tokens/uik-tailwind.strict.css
  • @ismail-elkorchi/ui-tokens/uik-tailwind.compat.css
  • @ismail-elkorchi/ui-tokens/themes/uik-theme-base.css
  • @ismail-elkorchi/ui-tokens/themes/uik-light.css
  • @ismail-elkorchi/ui-tokens/themes/uik-dark.css
  • @ismail-elkorchi/ui-tokens/themes/uik-density-comfortable.css
  • @ismail-elkorchi/ui-tokens/themes/uik-density-compact.css

Resolved JSON outputs:

  • @ismail-elkorchi/ui-tokens/tokens.resolved.light.comfortable.json
  • @ismail-elkorchi/ui-tokens/tokens.resolved.light.compact.json
  • @ismail-elkorchi/ui-tokens/tokens.resolved.dark.comfortable.json
  • @ismail-elkorchi/ui-tokens/tokens.resolved.dark.compact.json

JS/TS entrypoint:

  • @ismail-elkorchi/ui-tokens (ESM, with types)

Non-Tailwind usage

Quick start:

@import "@ismail-elkorchi/ui-tokens/index.css";

Explicit control (theme + density):

@import "@ismail-elkorchi/ui-tokens/base.css";
@import "@ismail-elkorchi/ui-tokens/themes/uik-light.css";
@import "@ismail-elkorchi/ui-tokens/themes/uik-density-comfortable.css";

Set attributes on a root element to switch variants:

<html data-uik-theme="dark" data-uik-density="compact"></html>

Defaults are light + comfortable when attributes are not present.

Tailwind v4 usage

Strict vs compat:

  • uik-tailwind.strict.css resets Tailwind theme variables first and then re-declares UIK tokens.
  • uik-tailwind.compat.css only adds UIK tokens without resets.

Strict example:

@import "tailwindcss";
@import "@ismail-elkorchi/ui-tokens/index.css";

Compat example:

@import "tailwindcss";
@import "@ismail-elkorchi/ui-tokens/base.css";
@import "@ismail-elkorchi/ui-tokens/uik-tailwind.compat.css";

Example utilities:

<div
  class="bg-uik-surface-bg text-uik-text-default border-uik-border-default rounded-uik-3 shadow-uik-2 ring-uik-focus-ring-default"
>
  ...
</div>

Programmatic usage (JS/TS)

import {
  THEME_ATTRIBUTE,
  DENSITY_ATTRIBUTE,
  BREAKPOINT_ATTRIBUTE,
  setTheme,
  setDensity,
  getCssVarName,
  createBreakpointObserver,
} from "@ismail-elkorchi/ui-tokens";

const cssVar = getCssVarName("color.accent.1");

setTheme(document.documentElement, "dark");
setDensity(document.documentElement, "compact");

document.documentElement.setAttribute(THEME_ATTRIBUTE, "dark");
document.documentElement.setAttribute(DENSITY_ATTRIBUTE, "compact");

createBreakpointObserver();
document.documentElement.setAttribute(BREAKPOINT_ATTRIBUTE, "md");

Guarantees

  • All CSS custom properties are prefixed with --uik-.
  • Tailwind utilities are derived from tokens; no hard-coded design values.
  • Validation gates cover build output presence and Tailwind parsing.