@itmaxglobal/design-system
v0.1.2
Published
A CSS-only Bootstrap-style design system with light and dark themes.
Maintainers
itmaxglobalReadme
ITMAX Design System
A CSS-only Bootstrap-style design system with primitive color scales, semantic light/dark theme tokens, utilities, layout helpers, and core components.
Install from npm
npm install @itmaxglobal/design-systemImport the CSS in your app:
import "@itmaxglobal/design-system/css";Or use the minified file directly:
import "@itmaxglobal/design-system/css/min";Use from CDN
After publishing the package to npm, CDN users can link the built CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@itmaxglobal/[email protected]/dist/design-system.min.css">Use a pinned version in production.
Theme Switching
Light mode is the default:
<html>Dark mode is enabled with data-theme:
<html data-theme="dark">Example toggle:
const root = document.documentElement;
const nextTheme = root.dataset.theme === "dark" ? "light" : "dark";
root.dataset.theme = nextTheme;
localStorage.setItem("theme", nextTheme);Architecture
The system is built in layers:
src/tokens.css- primitive color tokens and semantic theme tokens.src/foundation.css- reset, body, typography, links, focus styles.src/layout.css- containers, rows, columns, responsive grid.src/utilities.css- spacing, text, display, color, border, alpha helpers.src/components/*- buttons, forms, alerts, badges, modals.
Components use semantic tokens such as --color-primary, --color-surface, and --color-text, so they switch automatically between light and dark mode.
Color Strategy
The palette keeps your real shade scales:
--primary-light-50: #001689;
--primary-dark-50: #8b9aea;Then theme-aware aliases point to the active theme:
--primary-50: var(--primary-light-50);In dark mode:
[data-theme="dark"] {
--primary-50: var(--primary-dark-50);
}Use alpha tokens only for soft backgrounds, focus rings, and overlays:
.bg-primary-alpha-10 {
background-color: rgb(var(--primary-rgb) / 0.1);
}Build
npm run buildThis creates:
dist/design-system.cssdist/design-system.min.css
Example Classes
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline btn-primary">Outline</button>
<button class="btn btn-flat btn-error">Flat error</button>
<button class="btn btn-link btn-success">Link success</button>
<button class="btn btn-icon btn-primary" aria-label="Save"><svg>...</svg></button>
<div class="alert alert-success">Success alert</div>