Lapikit styling guide: structure, themes, and breakpoints

Customize

Integrate your style and design system into Lapikit components

By default, Lapikit provides a comprehensive design system inspired by modern UI principles, offering a coherent foundation that can be adapted to the widest possible audience. With Lapikit, you can quickly customize components using a configuration file that you specify in the Vite plugin.

Configuration Setup

Lapikit uses a Vite plugin to process your configuration. You need to:

1. Create a configuration file (TypeScript or JavaScript) manually or with the CLI
2. Import and configure the Lapikit Vite plugin
3. Specify the path to your configuration file

Example vite.config.ts:

Default configuration path: src/plugins/lapikit.ts

Configuration Structure

Lapikit customization is divided into 4 main parts:

• Breakpoints: Device-specific breakpoints and thresholds for responsive design
• Theme: Theme management including color schemes and theme definitions
• Typography: Font family definitions and typography settings
• Styles: Global styling variables and design tokens (spacing, shape, dialog, modal, animation)

Breakpoints

Breakpoints configuration manages responsive design behavior across different devices.

devices

Type: {[key: string]: number | string}

Define device-specific breakpoints for responsive behavior. Values should reference threshold keys.

Default values:

thresholds

Type: {[key: string]: number | string}

Set the actual breakpoint values that correspond to your device keys. These define the pixel widths at which your layout adapts.

Default values:

Theme

Theme configuration handles color schemes and theme definitions.

defaultTheme

Type: string
Default: "light"

Set the default theme to be used by your application.

colorScheme

Type: boolean
Default: true

Enable or disable automatic color scheme detection based on user preferences.

themes

Type: FragThemes

Define your custom themes with colors and variables. Lapikit provides a comprehensive color system organized by semantic categories.

Color Categories:

• label: Text colors with hierarchy levels (primary, secondary, tertiary, quaternary)
• accent: Action and status colors (primary, success, warning, destructive, info)
• separator: Border and divider colors (default, opaque)
• state: Interactive state colors (placeholder, disabled, link, highlight, shadow)
• background: Surface colors with grouping support (primary, secondary, tertiary, grouped)

Default themes:

Each theme can contain:

• dark (boolean): Whether this is a dark theme
• colors ({[key: string]: {[key: string]: string} | string}): Color definitions organized by semantic categories
• variables ({[key: string]: string | number}): Custom CSS variables for theme-specific customization

Typography

Typography configuration manages font families and text styling.

defaultTypography

Type: string
Default: "default"

Set the default typography family to be used.

fonts

Type: FragTypography

Define custom font families with support for sans-serif, monospace, and serif font stacks.

Default configuration:

Styles

Global styling configuration for design tokens and variables.

Type: FragStyles

Define global styling variables that can be used throughout your application. The styles object supports multiple categories of design tokens.

spacing

Type: string
Default: "0.125rem" (2px)

Base spacing unit used throughout the component system.

shape

Type: {[key: string]: string | number}

Border radius values for different component sizes.

Default values:

dialog

Type: {[key: string]: string | number}

Maximum width values for dialog components.

Default values:

modal

Type: {[key: string]: string | number}

Maximum width values for modal components.

Default values:

animation

Type: {[key: string]: string | number}

Animation timing and duration values.

Default values:

Complete styles example:

Example Configuration

Here’s a complete example of a configuration file (src/plugins/lapikit.ts) with all default values:

Vite Plugin Configuration

Lapikit provides a Vite plugin to automatically process your configuration and generate the necessary CSS files during the build process.

Import:

Usage:

Plugin Options:

The next steps

See also the Breakpoints and Application pages to take full advantage of the visual possibilities.