Atscript UI Styles

atscript-ui-styles

Install

npx skills add moostjs/atscript-ui      # installs all atscript-ui skills (this one + general + forms + tables + wf)
npx skills add mav-rik/vunor            # design system primitives (palette / scope / layer / surface / c8 / i8 / fingertip)

pnpm add @atscript/ui-styles vunor unocss @unocss/preset-icons unplugin-vue-components

Quick start (UnoCSS path)

// uno.config.ts
import { defineConfig } from "unocss";
import { asPresetVunor, allShortcuts } from "@atscript/ui-styles";
import { vunorShortcuts } from "vunor/theme";

export default defineConfig({
  presets: asPresetVunor({
    // Full presetVunor() theme is accepted flat. Omitted fields fall back to
    // atscript-ui's baked defaults (`defaultAsVunorOptions`). `palette.colors`
    // and `fingertip` shallow-merge per-key.
    baseRadius: "0.5rem",
    palette: { colors: { primary: "#a855f7" } }, // keeps grey/neutral/error
    // fingertip: { m: "36px" },
    // iconOverrides: { search: '<svg>...</svg>' },
  }),
  shortcuts: [vunorShortcuts(allShortcuts)],
});

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import unocss from "unocss/vite";
import Components from "unplugin-vue-components/vite";
import { AsResolver } from "@atscript/ui-styles/vite";

export default defineConfig({
  plugins: [vue(), Components({ resolvers: [AsResolver()] }), unocss()],
});

// main.ts
import "virtual:uno.css";
// ...

AsResolver() auto-imports Tier-1 primary components. Tier-2 defaults (AsInput, AsFilterDialog, AsConfigDialog, …) are imported explicitly.

Quick start (no UnoCSS)

import "@atscript/ui-styles/css/all"; // form + table + wf + aooth + common
// or per-package:
// import "@atscript/ui-styles/css/form";
// import "@atscript/ui-styles/css/table";
// import "@atscript/ui-styles/css/wf";

Pre-built CSS has the default vunor palette baked in — no runtime palette tuning. Override individual CSS custom properties for brand colors.

Invariants

Key imports

// Preset + extractor
import { asPresetVunor, createAsBaseUnoConfig, createAsExtractor } from "@atscript/ui-styles";
import type {
  AsPresetVunorOptions,
  AsBaseUnoConfigOptions,
  AsExtractorOptions,
} from "@atscript/ui-styles";

// Shortcuts
import {
  commonShortcuts,
  formShortcuts,
  tableShortcuts,
  wfShortcuts,
  aoothShortcuts,
  allShortcuts,
} from "@atscript/ui-styles";

// Class / helper maps (generated, mostly for advanced build setups)
import {
  componentClasses,
  componentPackages,
  getComponentClasses,
  getHelperClasses,
  helperAliases,
} from "@atscript/ui-styles";

// Baked icon map (read-only)
import { bakedIcons } from "@atscript/ui-styles";

// vunor re-exports — author your own shortcuts without a second import
import { defineShortcuts, mergeVunorShortcuts, toUnoShortcut } from "@atscript/ui-styles";
import type { TVunorShortcut } from "@atscript/ui-styles";

// Vite subpath
import { AsResolver } from "@atscript/ui-styles/vite";

// Pre-built CSS (no JS exports, side-effect import only)
// "@atscript/ui-styles/css/all"   "@atscript/ui-styles/css/form"
// "@atscript/ui-styles/css/table" "@atscript/ui-styles/css/wf"

References — load only what's needed

See also

Reference docs: https://ui.atscript.dev/styling/. Source: https://github.com/moostjs/atscript-ui.