@neovici/cosmoz-tokens

Design tokens for Cosmoz web components, extracted from Untitled UI.

Installation

npm install @neovici/cosmoz-tokens

Usage

Import all tokens (CSS)

// Import all design tokens
import '@neovici/cosmoz-tokens';

This imports all token files:

• Primitives (colors)
• Typography (fonts, sizes)
• Spacing (border radius)
• Shadows
• Semantic tokens (with dark mode support)

Import specific token files

// Import only what you need
import '@neovici/cosmoz-tokens/primitives.css';
import '@neovici/cosmoz-tokens/typography.css';
import '@neovici/cosmoz-tokens/spacing.css';
import '@neovici/cosmoz-tokens/shadows.css';
import '@neovici/cosmoz-tokens/semantic.css';

Using normalize in web components

The normalize stylesheet provides CSS reset styles as a CSSStyleSheet for use with Shadow DOM:

import { component } from '@pionjs/pion';
import { normalize } from '@neovici/cosmoz-tokens/normalize';
import { style } from './my-component.css.js';

const MyComponent = () => {
	return html`<div>Hello World</div>`;
};

customElements.define(
	'my-component',
	component(MyComponent, {
		styleSheets: [normalize, style],
	}),
);

CSS Utilities

Reusable Lit CSS template literals for common styling patterns.

Skeuomorphic Highlight

Adds a subtle "lit from above" inner highlight effect to buttons using a ::before pseudo-element with a gradient mask:

import { skeumorphicHighlight } from '@neovici/cosmoz-tokens/skeumorphic';

const styles = css`
	.button {
		${skeumorphicHighlight}
	}
`;

Customization via CSS custom properties:

• --skeumorphic-color: Border color (default: rgba(255, 255, 255, 0.12))
• --skeumorphic-radius: Inner border radius (default: calc(var(--cz-radius-md) - 1px))

Truncate

Truncate text with ellipsis (equivalent to Tailwind's truncate):

import { truncate } from '@neovici/cosmoz-tokens/truncate';

const styles = css`
	.label {
		${truncate}
	}
`;

Dark Mode

Semantic tokens automatically adapt to dark mode. Enable it by adding a class or data attribute to the root element:

// Using class
document.documentElement.classList.add('dark-mode');

// Or using data attribute
document.documentElement.dataset.theme = 'dark';

Token Reference

Colors (Primitives)

Token	Description
--cz-color-brand-{25-950}	Brand color scale (indigo-based)
--cz-color-gray-{25-950}	Gray scale
--cz-color-error-{25-950}	Error/danger colors
--cz-color-warning-{25-950}	Warning colors
--cz-color-success-{25-950}	Success colors
--cz-color-white	Pure white
--cz-color-black	Pure black

Typography

Token	Description
--cz-font-body	Body font (Inter)
--cz-font-display	Display font (DM Sans)
--cz-font-mono	Monospace font
--cz-text-{xs-xl}	Text sizes with line heights
--cz-text-display-{xs-2xl}	Display sizes with line heights
--cz-font-weight-{regular-bold}	Font weights

Spacing

Token	Description
--cz-spacing	Base spacing unit (4px)
--cz-radius-{none-full}	Border radius scale

Shadows

Token	Description
--cz-shadow-{xs-3xl}	Shadow scale
--cz-shadow-skeumorphic	Button inset shadow
--cz-shadow-xs-skeumorphic	Combined shadow
--cz-focus-ring	Focus ring for inputs
--cz-focus-ring-error	Error state focus ring

Semantic Colors

Token	Description
--cz-color-text-*	Text colors
--cz-color-bg-*	Background colors
--cz-color-border-*	Border colors
--cz-color-fg-*	Foreground/icon colors

Development

# Install dependencies
npm install

# Run Storybook
npm run storybook:start

# Build Storybook
npm run storybook:build

License

Apache-2.0