ContentStudio Design System

Welcome to the ContentStudio Design System, a collection of reusable components built with Vue.js, TypeScript, and Tailwind CSS. This design system is designed to provide a consistent and flexible foundation for building modern web applications.

Installation

To get started with the design system, follow these steps:

1. Install dependencies using pnpm:

pnpm install

2. Start the development environment:

# Watch for changes and rebuild
pnpm build:watch

# Run documentation site
pnpm dev:docs

Usage

Dynamic theming

Load the default theme variables automatically (already included in the compiled style.css). To override them at runtime, call the theme generator:

import { generatePalette, applyTheme } from '@contentstudio/ui'

// create your palette (change primary brand color, etc.)
const palette = generatePalette({ primary: '#ff0066' })

// apply CSS variables to :root
applyTheme(palette)

If you are using Nuxt/SSR, compute the palette on the server and inline the generated variables in a <style> tag during rendering to avoid FOUC.

Import the components you need in your Vue.js application:

import { Button } from '@contentstudio/ui';

Components

• Button: A versatile button component that supports various styles, sizes, and states.
• Input: A customizable input field component.
• Select: A dropdown select component.
• Checkbox: A simple checkbox component.
• Radio: A radio button component.

Utilities

The design system provides several utility modules to help maintain consistency across your application:

• Colors: Color palette and theme management utilities
• Forms: Form-related utilities for handling inputs and validation
• Position: Utilities for handling element positioning
• Radius: Border radius presets and utilities
• Sizes: Size-related utilities and constants
• States: Component state management utilities

For detailed documentation on each utility, refer to the Utilities Documentation.

Missing Components Checklist

To enhance the design system, consider adding the following components:

• [ ] Modal: A component for displaying modals and dialogs.
• [ ] Tooltip: A component for displaying tooltips on hover or focus.
• [ ] Accordion: A collapsible panel component.
• [ ] Tabs: A tabbed navigation component.
• [ ] Slider: A component for selecting a value from a range.
• [ ] Date Picker: A component for selecting dates.
• [ ] Avatar: A component for displaying user avatars.
• [ ] Breadcrumbs: A component for displaying navigation breadcrumbs.
• [ ] Pagination: A component for navigating through paginated content.

Contributing

Contributions are welcome! Please read the contributing guidelines before making a contribution.

License

This project is licensed under the MIT License. See the LICENSE file for more information.