tessl/npm-unocss--preset-mini

The minimal preset for UnoCSS, providing essential utilities for atomic CSS generation with modular theme, rules, and variants.

—

Pending

Overview

Eval results

Files

Theme System

Name: tessl/npm-unocss--preset-mini
Author: tessl

Comprehensive theme configuration providing the foundation for all utility generation, including colors, spacing, typography, breakpoints, and design tokens based on Tailwind CSS standards.

Capabilities

Theme Object

The main theme configuration object containing all design tokens and configuration values.

const theme: Theme;

interface Theme {
  /** Size properties */
  width?: Record<string, string>;
  height?: Record<string, string>;
  maxWidth?: Record<string, string>;
  maxHeight?: Record<string, string>;
  minWidth?: Record<string, string>;
  minHeight?: Record<string, string>;
  inlineSize?: Record<string, string>;
  blockSize?: Record<string, string>;
  maxInlineSize?: Record<string, string>;
  maxBlockSize?: Record<string, string>;
  minInlineSize?: Record<string, string>;
  minBlockSize?: Record<string, string>;
  
  /** Border and corner properties */
  borderRadius?: Record<string, string>;
  
  /** Responsive breakpoints */
  breakpoints?: Record<string, string>;
  verticalBreakpoints?: Record<string, string>;
  
  /** Color system */
  colors?: Colors;
  borderColor?: Colors;
  backgroundColor?: Colors;
  textColor?: Colors;
  shadowColor?: Colors;
  accentColor?: Colors;
  
  /** Typography */
  fontFamily?: Record<string, string>;
  fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
  fontWeight?: Record<string, string>;
  lineHeight?: Record<string, string>;
  letterSpacing?: Record<string, string>;
  wordSpacing?: Record<string, string>;
  textIndent?: Record<string, string>;
  textShadow?: Record<string, string | string[]>;
  textStrokeWidth?: Record<string, string>;
  
  /** Layout and spacing */
  spacing?: Record<string, string>;
  
  /** Effects */
  boxShadow?: Record<string, string | string[]>;
  blur?: Record<string, string>;
  dropShadow?: Record<string, string | string[]>;
  
  /** Borders and outlines */
  ringWidth?: Record<string, string>;
  lineWidth?: Record<string, string>;
  
  /** Animation and transitions */
  duration?: Record<string, string>;
  easing?: Record<string, string>;
  transitionProperty?: Record<string, string>;
  animation?: ThemeAnimation;
  
  /** Accessibility and interaction */
  aria?: Record<string, string>;
  data?: Record<string, string>;
  zIndex?: Record<string, string>;
  
  /** Media and container queries */
  media?: Record<string, string>;
  supports?: Record<string, string>;
  containers?: Record<string, string>;
  
  /** Grid layout */
  gridAutoColumn?: Record<string, string>;
  gridAutoRow?: Record<string, string>;
  gridColumn?: Record<string, string>;
  gridRow?: Record<string, string>;
  gridTemplateColumn?: Record<string, string>;
  gridTemplateRow?: Record<string, string>;
  
  /** Container configuration */
  container?: {
    center?: boolean;
    padding?: string | Record<string, string>;
    maxWidth?: Record<string, string>;
  };
  
  /** CSS custom properties configuration */
  preflightRoot?: Arrayable<string>;
  preflightBase?: Record<string, string | number>;
}

interface ThemeAnimation {
  keyframes?: Record<string, string>;
  durations?: Record<string, string>;
  timingFns?: Record<string, string>;
  properties?: Record<string, object>;
  counts?: Record<string, string | number>;
  category?: Record<string, string>;
}

Usage Example:

import { theme } from "@unocss/preset-mini/theme";

// Access theme values
const primaryColor = theme.colors?.blue?.[500]; // '#3b82f6'
const smallSpacing = theme.spacing?.['1']; // '0.25rem'
const mediumBreakpoint = theme.breakpoints?.md; // '768px'

Colors Object

Complete color palette with semantic color names and numeric scales, compatible with Tailwind CSS.

const colors: Colors;

interface Colors {
  [key: string]: Colors & { DEFAULT?: string } | string;
}

The colors object includes:

Standard Colors (each with scales 50-950):

red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Neutral Colors (each with scales 50-950):

gray, slate, zinc, neutral, stone

Special Colors:

black: '#000'
white: '#fff'
transparent: 'transparent'
current: 'currentColor'
inherit: 'inherit'

Theme-specific Colors:

light: Light theme color scales (50-950)
dark: Dark theme color scales (50-950)

Color Aliases:

lightblue / lightBlue → sky
warmgray / warmGray → stone
truegray / trueGray → neutral
coolgray / coolGray → gray
bluegray / blueGray → slate

Usage Examples:

import { colors } from "@unocss/preset-mini/colors";

// Standard color access
const primaryBlue = colors.blue[500]; // '#3b82f6'
const lightGray = colors.gray[100]; // '#f3f4f6'

// Default color values (color[400])
const defaultBlue = colors.blue.DEFAULT; // '#60a5fa'

// Short scale access (numeric/100)
const blue5 = colors.blue[5]; // Same as colors.blue[500]

// Special colors
const transparent = colors.transparent; // 'transparent'
const currentColor = colors.current; // 'currentColor'

// Aliases
const skyBlue = colors.lightBlue[300]; // Same as colors.sky[300]

Default Theme Values

The theme includes comprehensive default values for all CSS properties:

Spacing Scale (0-96, plus larger values):

spacing: {
  '0': '0px',
  '1': '0.25rem',  // 4px
  '2': '0.5rem',   // 8px
  '4': '1rem',     // 16px
  '8': '2rem',     // 32px
  // ... continues to 96
  'xs': '0.75rem',
  'sm': '0.875rem',
  // ... additional named sizes
}

Breakpoints:

breakpoints: {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
  '2xl': '1536px',
}

Font Families:

fontFamily: {
  'sans': ['ui-sans-serif', 'system-ui', ...],
  'serif': ['ui-serif', 'Georgia', ...],
  'mono': ['ui-monospace', 'SFMono-Regular', ...],
}

Border Radius:

borderRadius: {
  'none': '0px',
  'sm': '0.125rem',
  'DEFAULT': '0.25rem',
  'md': '0.375rem',
  'lg': '0.5rem',
  'xl': '0.75rem',
  '2xl': '1rem',
  '3xl': '1.5rem',
  'full': '9999px',
}

Theme Customization

The theme can be extended or overridden in UnoCSS configuration:

import { defineConfig } from "unocss";
import { presetMini } from "@unocss/preset-mini";

export default defineConfig({
  presets: [presetMini()],
  theme: {
    // Extend existing colors
    colors: {
      brand: {
        50: '#eff6ff',
        500: '#3b82f6',
        900: '#1e3a8a',
      },
    },
    // Override breakpoints
    breakpoints: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1400px',
    },
    // Add custom spacing
    spacing: {
      '18': '4.5rem',
      '88': '22rem',
    },
  },
});

Install with Tessl CLI

npx tessl i tessl/npm-unocss--preset-mini

docs

css-rules.md

index.md

preset-configuration.md