@txkit/themes

@txkit/themes

CSS themes for txKit components.

v0.1.0-alpha - pure CSS, no JavaScript. Ships light + dark themes and three visual variants.

Overview

CSS custom property themes for txKit components. Light and dark base themes, plus soft, sharp, and rounded visual variants. All tokens are namespaced under --txkit-* to avoid clashes with your app's design system.

Install

npm install @txkit/themes

Usage

// Import all themes (light + dark)
import '@txkit/themes'

// Or import individually
import '@txkit/themes/base'  // light theme (default)
import '@txkit/themes/dark'  // dark theme

Visual Variants

import '@txkit/themes/variants/soft'     // softer shadows and borders
import '@txkit/themes/variants/sharp'    // sharp corners, no radius
import '@txkit/themes/variants/rounded'  // fully rounded elements

Customization

Override any --txkit-* CSS custom property:

:root {
  --txkit-color-primary: #4338ca;
  --txkit-radius-md: 8px;
  --txkit-font-family: 'Inter', sans-serif;
}

Token namespaces: --txkit-color-*, --txkit-radius-*, --txkit-shadow-*, --txkit-spacing-*, --txkit-font-*, --txkit-z-*, --txkit-transition.

Documentation

Visit txkit.dev for the full theming guide.

License

MIT