Skip to content

v3.1.0: Tailwind v4 Native, Mathematical Contrast Gate & Streamlined AI Workflows

Choose a tag to compare

View all tags
@omid-io omid-io released this 03 Sep 18:01
· 13 commits to main since this release
v3.1.0
1ed0f99

🚀 Vibe UI Suite v3.1.0: Tailwind v4 Native, Mathematical Contrast Gate & Streamlined AI Workflows

Vibe UI Suite v3.1.0 establishes native integration with Tailwind CSS v4 (@theme), introduces mathematical WCAG 2.2 AA Contrast Ratio Evaluation directly inside the Design Critic, and simplifies the user journey for both beginners and senior engineers using AI coding assistants.

⚡ Highlights & Key Innovations

1. 🎨 Native Tailwind CSS v4 (@theme) & Zero-Config

  • Direct @theme Stylesheet: @omid-io/tokens now provides packages/tokens/v4.css (exported as @omid-io/tokens/v4).
  • Zero Configuration Files: Developers simply write in their global CSS: 
    @import "tailwindcss";
@import "@omid-io/tokens/v4.css";
    Unlocking immediate access to bg-vibe-canvas, text-vibe-primary, border-vibe-border, transition-vibe-spring, and shadow-vibe-brutal.
  • Clean Next.js 15 Starter: Upgraded examples/nextjs-starter to tailwindcss@^4.0.0 and @tailwindcss/postcss@^4.0.0, eliminating obsolete tailwind.config.ts and deprecated autoprefixer.

2. 🤖 30-Second AI Assistant Workflow (Cursor, Claude Code, Windsurf)

  • Option A: The Prompt (Zero Install):
    Copy and paste directly to your AI:

    "Design and style this application using Vibe UI standards (https://github.com/omid-io/vibe-ui-suite): OKLCH color palettes, Tailwind CSS v4 (@theme), mathematical WCAG 2.2 AA contrast (>= 4.5:1), zero raw emojis, and fixed-structure semantic RTL."

  • Option B: 1-Command Setup: 
    npx @omid-io/tokens init
    Automatically generates .cursorrules, CLAUDE.md, and .windsurfrules.

3. 🔍 Mathematical WCAG Contrast Gate in Design Critic

  • Replaced heuristic color checks with pure-Python relative luminance math ($L = 0.2126 R' + 0.7152 G' + 0.0722 B'$) and contrast ratio calculation:
    $$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$
  • The Critic (vibe_core/critic.py) mathematically evaluates canvas background against primary text, flagging any combination falling below $4.5:1$ (WCAG AA).

4. 🛡️ Robustness & Security Hardening

  • CLI Path Safety: Fixed potential ValueError in vibe_cli.py and scripts/generate.py when specifying output paths outside the repository root.
  • Security Hygiene: Relocated raw root install scripts (install.sh, install.ps1) into scripts/ to eliminate security flags.
  • Synchronized Registries: All packages, manifests, and the VS Code / Cursor extension bumped to 3.1.0.

📦 Distribution Assets

🛡️ Verification Proof

======================================================================
🛡️  VIBE UI V3 PRODUCTION VALIDATION & QUALITY GATES
======================================================================
  [PASS] Version Synchronization (64.3ms)
  [PASS] Schema Validation (8 Schemas) (61.4ms)
  [PASS] Knowledge Base Validation (13 Datasets) (68.5ms)
  [PASS] Search & Recommendation Unit Tests (70.4ms)
  [PASS] Design Critic & AutoRefiner Unit Tests (188.0ms)
  [PASS] Full Pipeline Integration Tests (E2E) (285.3ms)
  [PASS] Stratified 100-Scenario Benchmark (2002.5ms)
  [PASS] Physical Runtime Evals (WCAG AA & DOM) (189.0ms)
======================================================================
✅ ALL QUALITY GATES PASSED (Total time: 2929.7ms)
======================================================================

Contributors

theme
Assets 3
Loading