@fastwork/xosmoz-theme
v0.0.16
Published
Xosmoz Theme - Design tokens and theming system for Xosmoz
Readme
@fastwork/xosmoz-theme
Design tokens and theming system for the Xosmoz design system.
Installation
npm install @fastwork/xosmoz-themeUsage
Multi-Theme System (DaisyUI-style) 🎨
Xosmoz includes a powerful multi-theme system inspired by DaisyUI. Choose from predefined themes or create your own!
Available Themes
- light - Clean, modern light theme (default)
- dark - Elegant dark theme
Quick Start
/* Import base styles and non-color tokens */
@import '@fastwork/xosmoz-theme/base.css';
/* Import all themes (light + dark) */
@import '@fastwork/xosmoz-theme/themes.css';
/* OR import specific theme only */
@import '@fastwork/xosmoz-theme/themes/light.css';
/* @import '@fastwork/xosmoz-theme/themes/dark.css'; */Then set the theme via HTML attribute:
<!-- Light theme (default) -->
<html>...</html>
<!-- Dark theme -->
<html data-theme="dark">...</html>Using Theme Variables
All themes use the same semantic CSS variables, so your components work across all themes:
.button {
background-color: var(--xz-color-primary-bg-100);
color: var(--xz-color-primary-fg);
padding: var(--xz-spacing-4);
border-radius: var(--xz-radius-md);
}
.card {
background: var(--xz-color-bg-200);
color: var(--xz-color-content-100);
border: 1px solid var(--xz-color-border);
box-shadow: var(--xz-shadow-md);
}
.alert-success {
background: var(--xz-color-success-bg-100);
color: var(--xz-color-success-fg);
}Theme Switching with JavaScript
function setTheme(themeName) {
document.documentElement.setAttribute('data-theme', themeName);
localStorage.setItem('theme', themeName);
}
// Usage
setTheme('dark'); // Switch to dark theme
setTheme('light'); // Switch to light theme
// Load saved theme on page load
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);Creating Custom Themes
You can create custom themes in two ways:
1. CSS-only (Recommended for simple themes)
[data-theme="my-custom-theme"] {
--xz-color-bg-100: oklch(1.00 0 0);
--xz-color-bg-200: oklch(0.98 0 0);
--xz-color-content-100: oklch(0.20 0 0);
--xz-color-border: oklch(0.90 0.005 260);
--xz-color-primary-bg-100: oklch(0.58 .2524 30);
--xz-color-primary-fg: oklch(1 0 0);
/* ... other theme variables */
}2. Programmatic theme creation
import { createCustomTheme, themes } from '@fastwork/xosmoz-theme';
const myTheme = createCustomTheme(
'sunset',
{
primary: '#ff6b6b',
primaryForeground: '#ffffff',
secondary: '#feca57',
secondaryForeground: '#000000',
background: '#2d3436',
foreground: '#dfe6e9',
// ... other colors
},
'dark' // Base theme to extend from
);
// Use the theme configuration
console.log(myTheme.colors.primary); // '#ff6b6b'Theme Variables Reference
All themes support these semantic CSS variables:
Base Colors:
--xz-color-bg-100/--xz-color-bg-200/--xz-color-bg-300/--xz-color-bg-400- Background shades--xz-color-content-100/--xz-color-content-200- Text/content colors--xz-color-border- Border color--xz-color-input- Input border color--xz-color-ring- Focus ring color
Semantic Colors (primary, danger, success, warning, info):
--xz-color-{name}-bg-100- Main background color--xz-color-{name}-bg-200- Hover/darker background color--xz-color-{name}-content-100- Main content color--xz-color-{name}-content-200- Muted content color--xz-color-{name}-fg- Foreground/text color for use on background
Using Design Tokens in JavaScript/TypeScript
import { lightTheme, darkTheme, typography, spacing } from '@fastwork/xosmoz-theme';
// Access color tokens from themes
console.log(lightTheme.colors.fastwork[500]); // 'oklch(0.72 .1881 260)'
console.log(darkTheme.colors.gray[300]); // 'oklch(0.90 0.005 260)'
// Access typography
console.log(typography.fontSize.lg); // '1.125rem'
// Access spacing
console.log(spacing[4]); // '1rem'Generate CSS Variables Programmatically
import { generateCSSVariables, lightTheme, typography, spacing, borderRadius, shadows } from '@fastwork/xosmoz-theme';
// Construct a complete theme object
const themeObject = {
colors: lightTheme.colors,
typography,
spacing,
borderRadius,
shadows,
};
// Generate CSS custom properties as a string
const cssVars = generateCSSVariables(themeObject);
console.log(cssVars);
// Output:
// :root {
// --xosmoz-color-fastwork-100: oklch(0.96 .0223 260);
// --xosmoz-color-fastwork-200: oklch(0.94 .0299 260);
// ...
// }Design Tokens
Colors
- Primary, Secondary, Accent - Main brand colors
- Neutral - Grayscale palette
- Semantic colors - Success, Warning, Error, Info
- Each color has 11 shades (50-950) for maximum flexibility
Typography
- Font sizes: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
- Font weights: thin, extralight, light, normal, medium, semibold, bold, extrabold, black
- Font families: sans, serif, mono
- Line heights: none, tight, snug, normal, relaxed, loose
Spacing
- Comprehensive spacing scale from 0 to 96
- Based on rem units for accessibility
- Includes fractional values (0.5, 1.5, 2.5, etc.)
Border Radius
- From none to full circle
- Standard sizes: sm, base, md, lg, xl, 2xl, 3xl
Shadows
- Multiple elevation levels: xs, sm, base, md, lg, xl, 2xl
- Inner shadow support
- Optimized for light and dark modes
Available CSS Files
After building, the following CSS files are generated in dist/:
Files
base.css- Base styles, CSS resets, and non-color design tokens (typography, spacing, borders, shadows)themes.css- All predefined themes (light + dark) in one filethemes/light.css- Light theme colors onlythemes/dark.css- Dark theme colors only
Import Examples
/* Recommended: Base + all themes */
@import '@fastwork/xosmoz-theme/base.css';
@import '@fastwork/xosmoz-theme/themes.css';
/* OR: Base + specific theme only */
@import '@fastwork/xosmoz-theme/base.css';
@import '@fastwork/xosmoz-theme/themes/light.css';// In JavaScript/TypeScript
import '@fastwork/xosmoz-theme/base.css';
import '@fastwork/xosmoz-theme/themes.css';Development
# Build the package
npm run build
# Watch mode for development
npm run dev
# Lint code
npm run lint
# Clean build artifacts
npm run cleanLicense
MIT