Base Styles
The base styles system defines the foundational design tokens for the UI library. Built on OKLCH color space for better perceptual uniformity and accessibility, it includes semantic colors, theme support, and CSS custom properties. You can customize brand colors and other theme variables in your app's styles.css file.
Installation
Import
Usage
The base styles are defined in @veraclins-dev/ui/css/styles.css using OKLCH color space. Import the base styles in your app's styles.css file using a relative path to node_modules (Tailwind requires relative paths). Then override specific CSS variables to customize your brand colors. The base styles include semantic colors (primary, secondary, destructive, success, warning, info, neutral) with solid and soft variants, plus component-specific colors (card, popover, sidebar). All colors automatically adapt to light and dark themes. To customize, override the CSS variables in your app's :root and .dark selectors. The base styles use OKLCH format: oklch(lightness chroma hue) for better perceptual uniformity.
Design Guidelines
Base styles are defined as CSS custom properties in the UI package. Import @veraclins-dev/ui/css/styles.css first using a relative path (e.g., '../node_modules/@veraclins-dev/ui/css/styles.css') since Tailwind requires relative paths. It's important to add the UI package path as a @source directive to ensure Tailwind generates the styles used in the components in the final bundle. Then override variables in your app's styles.css. Use OKLCH color space for customizations to maintain perceptual uniformity. Always define both :root (light mode) and .dark (dark mode) variants. Ensure proper contrast ratios for accessibility. The base styles provide a complete color system with hover states, soft variants, and foreground colors for proper text contrast. Customize only what you need - the base styles provide sensible defaults.
Base Color System
Overview of the base color system with semantic colors and component colors
OKLCH Color Space
Understanding OKLCH color space and its benefits
Theme Support
How light and dark themes are automatically supported
Customizing Colors
How to customize brand colors and theme variables in your app