tessl/npm-unocss--preset-wind

Tailwind / Windi CSS compact preset for UnoCSS that provides comprehensive utility classes and theming system

—

Pending

Overview

Eval results

Files

Theme System

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

Comprehensive theming system extending UnoCSS preset-mini with extensive animation definitions, media queries, ARIA selectors, and design tokens.

Capabilities

Theme Object

Complete theme configuration combining preset-mini theme with Wind-specific extensions.

const theme: Theme;

interface Theme extends PresetMiniTheme {
  aria: AriaTheme;
  animation: AnimationTheme;
  media: MediaTheme;
  supports: SupportsTheme;
  preflightBase: PreflightBaseTheme;
}

ARIA Theme

ARIA attribute selectors for accessible styling.

interface AriaTheme {
  busy: string;
  checked: string;
  disabled: string;
  expanded: string;
  hidden: string;
  pressed: string;
  readonly: string;
  required: string;
  selected: string;
}

The ARIA theme provides the following selectors:

aria-busy: 'busy="true"'
aria-checked: 'checked="true"'
aria-disabled: 'disabled="true"'
aria-expanded: 'expanded="true"'
aria-hidden: 'hidden="true"'
aria-pressed: 'pressed="true"'
aria-readonly: 'readonly="true"'
aria-required: 'required="true"'
aria-selected: 'selected="true"'

Animation Theme

Extensive animation system with 80+ predefined keyframes, durations, timing functions, and properties.

interface AnimationTheme {
  keyframes: AnimationKeyframes;
  durations: AnimationDurations;
  timingFns: AnimationTimingFunctions;
  properties: AnimationProperties;
  counts: AnimationCounts;
  category: AnimationCategories;
}

interface AnimationKeyframes {
  // Attention Seekers
  pulse: string;
  bounce: string;
  spin: string;
  ping: string;
  'bounce-alt': string;
  flash: string;
  'pulse-alt': string;
  'rubber-band': string;
  'shake-x': string;
  'shake-y': string;
  'head-shake': string;
  swing: string;
  tada: string;
  wobble: string;
  jello: string;
  'heart-beat': string;
  
  // Specials
  hinge: string;
  'jack-in-the-box': string;
  'roll-in': string;
  'roll-out': string;
  
  // Lightspeed
  'light-speed-in-left': string;
  'light-speed-in-right': string;
  'light-speed-out-left': string;
  'light-speed-out-right': string;
  
  // Flippers  
  flip: string;
  'flip-in-x': string;
  'flip-in-y': string;
  'flip-out-x': string;
  'flip-out-y': string;
  
  // Rotating Entrances
  'rotate-in': string;
  'rotate-in-down-left': string;
  'rotate-in-down-right': string;
  'rotate-in-up-left': string;
  'rotate-in-up-right': string;
  
  // Rotating Exits
  'rotate-out': string;
  'rotate-out-down-left': string;
  'rotate-out-down-right': string;
  'rotate-out-up-left': string;
  'rotate-out-up-right': string;
  
  // Zooming Entrances
  'zoom-in': string;
  'zoom-in-down': string;
  'zoom-in-left': string;
  'zoom-in-right': string;
  'zoom-in-up': string;
  
  // Zooming Exits
  'zoom-out': string;
  'zoom-out-down': string;
  'zoom-out-left': string;
  'zoom-out-right': string;
  'zoom-out-up': string;
  
  // Bouncing Entrances
  'bounce-in': string;
  'bounce-in-down': string;
  'bounce-in-left': string;
  'bounce-in-right': string;
  'bounce-in-up': string;
  
  // Bouncing Exits
  'bounce-out': string;
  'bounce-out-down': string;
  'bounce-out-left': string;
  'bounce-out-right': string;
  'bounce-out-up': string;
  
  // Sliding Entrances
  'slide-in-down': string;
  'slide-in-left': string;
  'slide-in-right': string;
  'slide-in-up': string;
  
  // Sliding Exits
  'slide-out-down': string;
  'slide-out-left': string;
  'slide-out-right': string;
  'slide-out-up': string;
  
  // Fading Entrances
  'fade-in': string;
  'fade-in-down': string;
  'fade-in-down-big': string;
  'fade-in-left': string;
  'fade-in-left-big': string;
  'fade-in-right': string;
  'fade-in-right-big': string;
  'fade-in-up': string;
  'fade-in-up-big': string;
  'fade-in-top-left': string;
  'fade-in-top-right': string;
  'fade-in-bottom-left': string;
  'fade-in-bottom-right': string;
  
  // Fading Exits
  'fade-out': string;
  'fade-out-down': string;
  'fade-out-down-big': string;
  'fade-out-left': string;
  'fade-out-left-big': string;
  'fade-out-right': string;
  'fade-out-right-big': string;
  'fade-out-up': string;
  'fade-out-up-big': string;
  'fade-out-top-left': string;
  'fade-out-top-right': string;
  'fade-out-bottom-left': string;
  'fade-out-bottom-right': string;
  
  // Back Entrances
  'back-in-up': string;
  'back-in-down': string;
  'back-in-right': string;
  'back-in-left': string;
  
  // Back Exits
  'back-out-up': string;
  'back-out-down': string;
  'back-out-right': string;
  'back-out-left': string;
}

interface AnimationDurations {
  pulse: string;
  'heart-beat': string;
  'bounce-in': string;
  'bounce-out': string;
  'flip-out-x': string;
  'flip-out-y': string;
  hinge: string;
}

interface AnimationTimingFunctions {
  pulse: string;
  ping: string;
  'head-shake': string;
  'heart-beat': string;
  'pulse-alt': string;
  'light-speed-in-left': string;
  'light-speed-in-right': string;
  'light-speed-out-left': string;
  'light-speed-out-right': string;
}

interface AnimationCounts {
  spin: string;
  ping: string;
  pulse: string;
  'pulse-alt': string;
  bounce: string;
  'bounce-alt': string;
}

Media Theme

Media query definitions for responsive design and user preferences.

interface MediaTheme {
  portrait: string;
  landscape: string;
  os_dark: string;
  os_light: string;
  motion_ok: string;
  motion_not_ok: string;
  high_contrast: string;
  low_contrast: string;
  opacity_ok: string;
  opacity_not_ok: string;
  use_data_ok: string;
  use_data_not_ok: string;
  touch: string;
  stylus: string;
  pointer: string;
  mouse: string;
  hd_color: string;
}

The media theme provides the following queries:

portrait: '(orientation: portrait)'
landscape: '(orientation: landscape)'
os_dark: '(prefers-color-scheme: dark)'
os_light: '(prefers-color-scheme: light)'
motion_ok: '(prefers-reduced-motion: no-preference)'
motion_not_ok: '(prefers-reduced-motion: reduce)'
high_contrast: '(prefers-contrast: high)'
low_contrast: '(prefers-contrast: low)'
opacity_ok: '(prefers-reduced-transparency: no-preference)'
opacity_not_ok: '(prefers-reduced-transparency: reduce)'
use_data_ok: '(prefers-reduced-data: no-preference)'
use_data_not_ok: '(prefers-reduced-data: reduce)'
touch: '(hover: none) and (pointer: coarse)'
stylus: '(hover: none) and (pointer: fine)'
pointer: '(hover) and (pointer: coarse)'
mouse: '(hover) and (pointer: fine)'
hd_color: '(dynamic-range: high)'

Supports Theme

CSS @supports feature queries for progressive enhancement.

interface SupportsTheme {
  grid: string;
}

The supports theme provides:

grid: '(display: grid)'

Preflight Base Theme

Base CSS styles for consistent cross-browser rendering.

interface PreflightBaseTheme {
  [selector: string]: CSSObject;
}

The preflight base combines multiple base style systems:

Transform base styles
Touch action base styles
Scroll snap type base styles
Font variant numeric base styles
Border spacing base styles
Box shadows base styles
Ring base styles
Filter base styles
Backdrop filter base styles

Usage Example:

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

// Access animation keyframes
const pulseKeyframe = theme.animation.keyframes.pulse;

// Access media queries
const darkModeQuery = theme.media.os_dark;

// Access ARIA selectors
const checkedSelector = theme.aria.checked;

Install with Tessl CLI

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

docs