@gwenui/themes

The foundational design system layer for GwenUI. This package provides a standardized set of OKLCH-based design tokens, responsive typography systems, and a flexible Tailwind CSS preset designed for high-end digital experiences.

✨ Features

• Modern Color Space: Built entirely on OKLCH for superior color mixing and perceptual uniformity.
• Dynamic Theming: Seamless Light and Dark mode transition via CSS variables.
• Typography Engine: Integrated self-hosted font support for Plus Jakarta Sans, Lora, and Ubuntu Mono.
• Tailwind V4 Ready: Native support for the latest Tailwind @theme architecture.
• Enterprise Scale: Built for consistency across multiple repositories and platforms.

🚀 Installation

Install the package via your preferred package manager:

# Using pnpm
pnpm add @gwenui/themes

# Using npm
npm install @gwenui/themes

# Using yarn
yarn add @gwenui/themes

🛠️ Integration

1. CSS Injection

Import the complete theme layer into your global CSS entry point. This includes typography, tokens, and base resets.

/* src/styles/globals.css */
@import "@gwenui/themes/css";

2. Tailwind Configuration

Add the GwenUI preset to your tailwind.config.ts to extend your utility classes with GwenUI tokens.

import type { Config } from "tailwindcss";
import { gwenPreset } from "@gwenui/themes";

const config: Config = {
  // Use the GwenUI preset
  presets: [gwenPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  // ... rest of your config
};

export default config;

📂 Project Structure

The package is organized to separate concerns between tokens, typography, and logic:

gwenui-themes/
├── src/
│   ├── css/
│   │   ├── index.css     # Main entry point (combines all)
│   │   ├── tokens.css    # OKLCH variables & @theme mapping
│   │   └── fonts.css     # @font-face declarations
│   ├── fonts/            # Self-hosted font assets (TTF/WOFF2)
│   │   ├── Lora/
│   │   ├── PlusJakartaSans/
│   │   └── UbuntuMono/
│   └── tailwind/
│       └── preset.ts     # Tailwind configuration preset
├── package.json          # Package metadata & exports
└── README.md             # Documentation

🖋️ Typography Setup

To use self-hosted fonts, ensure the .ttf files are placed in their respective directories within src/fonts/. The system expects the following naming convention:

• Plus Jakarta Sans: PlusJakartaSans-[Weight].ttf
• Lora: Lora-[Weight].ttf
• Ubuntu Mono: UbuntuMono-[Weight].ttf

Once files are added, the @font-face rules in fonts.css will automatically link them to the CSS variables --font-sans, --font-serif, and --font-mono.

📄 License

Distributed under the MIT License. See LICENSE for more information.

Built with precision by JinXSuper 🧡