@aitianyu.cn/ts-theme

Tianyu UI theme system — CSS variables for colors, control styles, and base layout.

Installation

npm install @aitianyu.cn/ts-theme

What's inside

| Layer | Files | Purpose | |---|---|---| | Color themes | content/colors/<name>-<mode>/base.css | CSS custom properties for the full color palette | | Control styles | content/styles/simple.css, scifi.css | Shape, shadow, spacing, and motion tokens | | Component reset | content/styles/component.css | Box-model normalization and .ts-ctrl / .ts-input base classes | | Basic theme | content/basic-theme/core_ui.css, dialog.css, dialog.animation.css | z-index scale, full-viewport layout, and dialog primitives |

Color themes

Five palettes, each in light and dark mode:

| ID | Name | Primary | |---|---|---| | simple | Mono | Neutral grey | | sky | Sky (天空) | Blue #2196f3 | | dusk | Dusk | Purple | | meadow | Meadow | Green | | vivid | Vivid | Red |

Control styles

| ID | Character | |---|---| | simple | Flat, minimal, no shadows | | scifi | Volumetric glow, cinematic shadows |

TypeScript API

import {
  themeColors,       // readonly tuple of all color IDs
  resolveTheme,      // map legacy name → ThemeColor | null
  getThemePath,      // absolute path to a color CSS file
  getLegacyThemePath,// resolve old name then return path
  getStylePath,      // absolute path to a control-style CSS file
  getComponentBasePath, // absolute path to component.css
  getBasicThemePath, // absolute path to a basic-theme CSS file
  getContentRoot,    // absolute path to the content/ directory
  listThemes,        // all 10 theme combinations as ThemeMeta[]
} from "@aitianyu.cn/ts-theme";

Types

type ThemeColor   = "simple" | "sky" | "dusk" | "meadow" | "vivid";
type ThemeMode    = "light" | "dark";
type ControlStyle = "simple" | "scifi";

interface ThemeMeta {
  color:   ThemeColor;
  mode:    ThemeMode;
  cssPath: string;
}

Examples

import { getThemePath, getStylePath, getComponentBasePath } from "@aitianyu.cn/ts-theme";

// Resolve file paths and inject them into your bundler / SSR layer
const colorCss    = getThemePath("sky", "dark");
const styleCss    = getStylePath("scifi");
const componentCss = getComponentBasePath();

import { resolveTheme, getThemePath } from "@aitianyu.cn/ts-theme";

// Accept a legacy name from user config
const color = resolveTheme("tianyu-default"); // → "sky"
if (color) {
  const cssPath = getThemePath(color, "light");
}

import { listThemes } from "@aitianyu.cn/ts-theme";

// Enumerate all themes (e.g. to build a picker UI)
for (const { color, mode, cssPath } of listThemes()) {
  console.log(`${color}-${mode}`, cssPath);
}

Legacy name map

Old theme names from earlier Tianyu UI versions are still accepted by resolveTheme and getLegacyThemePath:

| Legacy name | Resolves to | |---|---| | tianyu-default | sky | | tianyu-green | meadow | | tianyu-mono | simple | | tianyu-purple | dusk | | tianyu-red | vivid |

CSS variables reference

Color tokens (defined per theme)

| Variable | Role | |---|---| | --ts_ui_bgc | Page background | | --ts_ui_content_bgc | Content area background | | --ts_ui_blk_1 … --ts_ui_blk_8 | Main color scale (dark → light in light mode) | | --ts_ui_blk_11 … --ts_ui_blk_18 | Fine-grained mid-range scale | | --ts_ctrl_primary / --ts_ctrl_secondary | Control accent colors | | --ts_ctrl_surface / --ts_ctrl_border | Control surface and border | | --ts_ctrl_text / --ts_ctrl_text_secondary | Control text | | --ts_ui_fatal_* / --ts_ui_error_* / --ts_ui_warning_* / --ts_ui_success_* | Semantic status colors (bg / border / front) |

Style tokens (defined per control style)

| Variable | Role | |---|---| | --ts_ctrl_radius / _sm / _lg | Border radius scale | | --ts_ctrl_shadow / _hover / _focus | Box shadow | | --ts_ctrl_glow / _focus | Glow effect (scifi only) | | --ts_ctrl_border_width / _style | Border dimensions | | --ts_ctrl_transition / _fast | Transition timing | | --ts_ctrl_font_size / _sm / _lg | Font size scale | | --ts_ctrl_padding_x/y / _sm / _lg | Padding scale |

z-index scale (core_ui.css)

| Variable | Value | |---|---| | --ts_ui_background_zindex | 0 | | --ts_ui_major_base_zindex | 100 | | --ts_ui_major_hover_zindex | 8000 | | --ts_ui_msg_zindex | 9000 | | --ts_ui_dialog_zindex | 99999 |

License

Apache-2.0