@underundre/undesign
v0.1.0
Published
Shared design tokens (colors, themes, Tailwind preset) for UnderUndre projects
Readme
@underundre/undesign
Shared design tokens (colors, themes, Tailwind preset, CSS variables) for UnderUndre projects. One source of truth for brand colors across all apps.
- Tailwind preset — drop-in
presets: [tailwindPreset] - DaisyUI themes — light + dark, ready to use
- CSS custom properties — for projects without Tailwind
- Raw TypeScript exports — for programmatic access with autocomplete
Install
npm install @underundre/undesignNo .npmrc config, no auth, no PAT — standard public npm registry.
Usage
Tailwind CSS preset
The package ships both ESM and CommonJS builds, so it works with any tailwind config style.
ESM (tailwind.config.js with "type": "module" or .mjs):
import { tailwindPreset } from "@underundre/undesign/tailwind";
export default {
presets: [tailwindPreset],
content: ["./src/**/*.{js,ts,jsx,tsx}"],
plugins: [],
};CommonJS (tailwind.config.cjs):
const { tailwindPreset } = require("@underundre/undesign/tailwind");
module.exports = {
presets: [tailwindPreset],
content: ["./src/**/*.{js,ts,jsx,tsx}"],
plugins: [],
};Now every bg-brand-purple, text-orange-500, border-green-300 etc. class works automatically — no need to redefine colors in your config.
DaisyUI themes
ESM:
import daisyui from "daisyui";
import { tailwindPreset } from "@underundre/undesign/tailwind";
import { daisyuiThemes } from "@underundre/undesign/daisyui";
export default {
presets: [tailwindPreset],
plugins: [daisyui],
daisyui: {
themes: daisyuiThemes,
},
};CommonJS:
const { tailwindPreset } = require("@underundre/undesign/tailwind");
const { daisyuiThemes } = require("@underundre/undesign/daisyui");
module.exports = {
presets: [tailwindPreset],
plugins: [require("daisyui")],
daisyui: {
themes: daisyuiThemes,
},
};Exposes two themes: undrlla (light) and undrlla-dark. Switch with data-theme="undrlla-dark" on <html> or via DaisyUI's theme controller component.
CSS Custom Properties
For projects without Tailwind (vanilla CSS, styled-components, CSS Modules):
@import "@underundre/undesign/css";
.button {
background: var(--brand-purple);
color: var(--color-base-content);
}
.button:hover {
background: var(--purple-600);
}All brand colors and scales available as CSS vars. Dark theme auto-applies under .dark or [data-theme="undrlla-dark"].
Direct TypeScript import
Useful for computed styles, chart colors, theming libraries that need raw hex values:
import { brand, purple, orange, green, semantic } from "@underundre/undesign";
console.log(brand.purple); // "#4e007a"
console.log(purple[500]); // "#4e007a"
console.log(semantic.error); // "#ff5724"
// Use in styled-components, CSS-in-JS, chart libraries, etc.
const chartColors = [purple[500], orange[500], green[500]];All exports are fully typed — you get autocomplete and type safety.
Colors
Brand palette
| Role | Name | Hex | Tailwind class |
|------|------|-----|----------------|
| Primary | Purple | #4e007a | bg-brand-purple, purple-500 |
| Secondary | Orange | #b45500 | bg-brand-orange, orange-500 |
| Accent | Green | #69a700 | bg-brand-green, green-500 |
| Error | Red | #CC0000 | bg-brand-red |
Each color (except red) has a full 50–900 scale. Semantic colors (info, success, warning, error) are also exported.
Semantic colors
| Token | Light | Dark |
|-------|-------|------|
| info | #2094f3 | #66c7f4 |
| success | #009485 | #87d039 |
| warning | #ff9900 | #e2d562 |
| error | #ff5724 | #ff6f6f |
Themes
Two DaisyUI themes ship with the package:
undrlla— Light theme. White surfaces, dark content.undrlla-dark— Dark theme. Black surfaces, light content.
Both themes use the same brand colors (primary: purple, secondary: orange, accent: green) — only neutral/surface colors differ.
Package structure
@underundre/undesign/
├── dist/
│ ├── index.js # Main entry (re-exports everything)
│ ├── colors.js # Raw color values
│ ├── tailwind-preset.js # Tailwind preset
│ ├── daisyui-themes.js # DaisyUI theme objects
│ └── tokens.css # CSS custom properties
└── src/ # TypeScript sources (for reference)Subpath exports:
@underundre/undesign→dist/index.js@underundre/undesign/tailwind→dist/tailwind-preset.js@underundre/undesign/daisyui→dist/daisyui-themes.js@underundre/undesign/css→dist/tokens.css
Publishing (maintainers)
First-time setup
- Create npm account at https://www.npmjs.com/signup (or use existing)
- Create scope
@underundre:- If your npm username is
underundre, the scope is yours automatically - Otherwise create an org named
underundre(Free plan is fine for public packages)
- If your npm username is
- Generate npm access token:
- Go to https://www.npmjs.com/settings/YOUR_USERNAME/tokens
- "Generate New Token" → Granular Access Token
- Permissions → Packages and scopes: Read and write
- Selected packages and scopes: Select scopes →
@underundre - Organizations (if applicable): Read-only →
underundre - Expiration: 365 days (or your preference)
- Copy the token (
npm_xxx...)
- Add token to GitHub repo secrets:
- Go to https://github.com/UnderUndre/undesign/settings/secrets/actions
- "New repository secret" → Name:
NPM_TOKEN→ paste the token
- Publish v0.1.0:
- Go to https://github.com/UnderUndre/undesign/actions → "Publish to npm" → "Run workflow"
- Or via git tag (see below)
Releasing a new version
Automated via GitHub Actions on git tag push:
# Bump version (patch/minor/major) — creates a commit and tag automatically
npm version patch # 0.1.0 → 0.1.1
npm version minor # 0.1.0 → 0.2.0
npm version major # 0.1.0 → 1.0.0
# Push changes + tag
git push && git push --tagsThe workflow runs automatically on tag push and publishes the built package to npm.
Manual publish
You can also trigger the workflow manually from the Actions tab via the "Run workflow" button — useful for the initial publish or republishing the current version.
Local development
npm install
npm run build # Compile TS and generate CSSThe build step runs tsc (TypeScript compilation) and then scripts/generate-css.js (derives dist/tokens.css from the compiled color definitions).
License
MIT