@vifui/styles
v0.6.0-alpha.14
Published
CSS styles and design tokens for VifUI
Maintainers
abdulazeez70Readme
@vifui/styles
CSS styles and design tokens for VifUI component library
Overview
This package contains all the CSS styles, design tokens, and themes for VifUI components. It's built with Tailwind CSS 4.0 and uses modern CSS features like CSS variables and oklch() colors.
Installation
npm install @vifui/stylesNote: This package is typically installed automatically as a peer dependency of @vifui/core.
Usage
Import All Styles
// In your main.js or main entry file
import "@vifui/styles";Import Specific Components
// Import only what you need for better tree-shaking
import "@vifui/styles/base";
import "@vifui/styles/components/button";
import "@vifui/styles/components/card";
import "@vifui/styles/themes/default";Structure
@vifui/styles/
├── base/ # Base styles and resets
│ └── base.css
├── components/ # Component-specific styles
│ ├── accordion.css
│ ├── alert.css
│ ├── avatar.css
│ ├── badge.css
│ ├── breadcrumb.css
│ ├── button.css
│ ├── card.css
│ ├── checkbox.css
│ ├── divider.css
│ └── spinner.css
├── themes/ # Theme definitions
│ └── default.css # Light/dark mode themes
├── utilities/ # Utility classes
│ └── index.css
└── index.css # Main entry (imports all)Design Tokens
Colors
/* Primary palette (Vuesax authentic) */
--vuesax-primary: oklch(0.61 0.2 263.6); /* Blue */
--vuesax-success: oklch(0.77 0.2 145.5); /* Green */
--vuesax-warning: oklch(0.82 0.18 83.7); /* Yellow */
--vuesax-danger: oklch(0.62 0.22 10); /* Red */
/* Semantic tokens */
--primary: var(--vuesax-primary);
--success: var(--vuesax-success);
--warning: var(--vuesax-warning);
--danger: var(--vuesax-danger);Spacing
--spacing: 0.25rem;Border Radius
--radius: 0.875rem;
--radius-sm: 0.5rem;
--radius-md: 0.875rem;
--radius-lg: 1rem;
--radius-xl: 1.25rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;Shadows
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md:
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl:
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);Transitions
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--transition-fast: 150ms;
--transition-base: 200ms;
--transition-slow: 300ms;Dark Mode
Dark mode is automatically supported. The theme switches based on:
- User's system preference (
prefers-color-scheme) - Manual toggle via
darkclass on root element
<!-- Enable dark mode -->
<html class="dark">
<!-- Your app -->
</html>Dark Mode Customization
.dark {
/* Override dark mode colors */
--background: oklch(15% 0.005 286);
--foreground: oklch(99.11% 0 0);
--primary: oklch(0.65 0.2 263.6);
}Customization
Override Design Tokens
/* In your global CSS file */
@import "@vifui/styles";
:root {
/* Customize primary color */
--primary: oklch(0.7 0.25 270);
/* Customize radius */
--radius: 0.5rem;
/* Customize transitions */
--transition-base: 300ms;
}Create Custom Themes
/* custom-theme.css */
@import "@vifui/styles/base";
@import "@vifui/styles/utilities";
:root {
/* Your custom colors */
--primary: oklch(0.65 0.25 150);
--success: oklch(0.8 0.2 140);
/* ... more tokens */
}
/* Import only needed components */
@import "@vifui/styles/components/button";
@import "@vifui/styles/components/card";Tailwind CSS Integration
This package requires Tailwind CSS 4.0+. Make sure your project is configured:
// tailwind.config.js
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
// VifUI uses theme colors automatically
};Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Modern CSS features used:
- CSS Variables
oklch()color space- CSS Grid
- Flexbox
License
MIT © AbdulAzeez Olamide
Related Packages
- @vifui/core - Vue components
Part of the VifUI component library