Package Exports
- @vapor-ui/css-generator
Readme
@vapor-ui/css-generator
Generate CSS variables for Vapor UI design system themes.
Installation
npm install @vapor-ui/css-generator @vapor-ui/color-generator
Quick Start
import { generateCompleteCSS } from '@vapor-ui/css-generator';
const css = generateCompleteCSS({
colors: {
primary: { name: 'mint', color: '#6af574ff' },
background: {
name: 'neutral',
color: '#f8fafc',
lightness: { light: 98, dark: 8 },
},
},
scaling: 1.15,
radius: 'lg',
});
API
generateCompleteCSS(config, options?)
Generate complete theme CSS with colors, scaling, and radius.
interface CompleteCSSConfig {
colors: {
primary: { name: string; color: string };
background: {
name: string;
color: string;
lightness: { light: number; dark: number };
};
};
scaling: number;
radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
}
generateColorCSS(colorConfig, options?)
Generate color variables only.
import type { SemanticMappingConfig } from '@vapor-ui/color-generator';
const colorCSS = generateColorCSS({
primary: { name: 'mint', color: '#6af574ff' },
background: {
name: 'neutral',
color: '#f8fafc',
lightness: { light: 98, dark: 8 },
},
});
generateScalingCSS(scaling, options?)
Generate scaling variable.
const scalingCSS = generateScalingCSS(1.25);
// Output: :root { --vapor-scale-factor: 1.25; }
generateRadiusCSS(radius, options?)
Generate radius variable.
type RadiusKey = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
const radiusCSS = generateRadiusCSS('lg');
// Output: :root { --vapor-radius-factor: 1.5; }
Options
All functions support these options:
{
prefix?: string; // Default: 'vapor'
format?: 'compact' | 'readable'; // Default: 'readable'
classNames?: { // Theme class names
light: string; // Default: 'vapor-light-theme'
dark: string; // Default: 'vapor-dark-theme'
};
}
Additional options for generateCompleteCSS:
{
includeColorComments?: boolean; // Default: false
}
Examples
Custom options
const css = generateCompleteCSS(config, {
prefix: 'my-theme',
format: 'compact',
includeColorComments: true,
});
Individual generators
import { generateColorCSS, generateRadiusCSS, generateScalingCSS } from '@vapor-ui/css-generator';
const colorCSS = generateColorCSS(colorConfig);
const scalingCSS = generateScalingCSS(1.2);
const radiusCSS = generateRadiusCSS('xl');
Generated Variables
Colors
--{prefix}-color-{name}-{050-900}
: Color palettes--{prefix}-color-background-*
: Background colors--{prefix}-color-foreground-*
: Text colors--{prefix}-color-border-*
: Border colors
Other
--{prefix}-scale-factor
: Typography scale--{prefix}-radius-factor
: Border radius factor
Radius Values
The generateRadiusCSS
function accepts predefined radius keys:
'none'
: 0'sm'
: 0.5'md'
: 1'lg'
: 1.5'xl'
: 2'full'
: 3
Output Example
:root {
--vapor-color-mint-500: #6af574ff;
--vapor-color-background-canvas: #f8fafc;
--vapor-scale-factor: 1.15;
--vapor-radius-factor: 1.5;
}
:root.vapor-dark-theme {
--vapor-color-mint-800: #62e96b;
--vapor-color-background-canvas: #161717;
}