@xynon-yl/animus

v0.6.1

Published

2 days ago

Animus design system component library — tokens, components, and theming for the Xynon design language.

Downloads

137

0High
0Medium
0Low

xynonalx

@xynon-yl/animus

Animus design system component library — tokens, components, and theming for the Xynon design language. Built on Radix primitives, Tailwind CSS, and CSS variables.

Install

@xynon-yl/animus is published to GitHub Packages, which requires authentication.

One-time setup in the consumer app

Create a GitHub Personal Access Token (classic) with the read:packages scope.
Export it as GITHUB_TOKEN in your shell (or save it to your password manager and source it in .zshrc).

Add an .npmrc at the consumer app root:

@xynon-yl:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

(See .npmrc.example in this repo.)

Install:
```
npm install @xynon-yl/animus
```

Use

// Once at the app root
import '@xynon-yl/animus/styles.css';

import { ThemeProvider, Button, Card, Input } from '@xynon-yl/animus';

export function App() {
  return (
    <ThemeProvider>
      <Card>
        <Input placeholder="Search…" />
        <Button>Go</Button>
      </Card>
    </ThemeProvider>
  );
}

Every component is a named export — import { Button } from '@xynon-yl/animus'.

Theming

Three base themes are bundled — light, dark, forest. Switch by setting data-theme on <html>, or use the bundled hook/components.

import { useTheme, ThemeSwitcher, AccentPicker } from '@xynon-yl/animus';

function Header() {
  const { theme, setTheme, accent, setAccent } = useTheme();
  return (
    <header>
      <ThemeSwitcher />
      <AccentPicker />
    </header>
  );
}

AccentPicker lets the user choose any hex; the picked colour is mapped across the navy/bright ramps and the focus ring, so every component re-skins together.

Programmatic theming

import { useTheme, buildPalette } from '@xynon-yl/animus';

const { setAccent } = useTheme();
setAccent('#6660B0'); // any hex; cleared with setAccent(null)

Define a new base theme

In your consumer app's CSS, add a new [data-theme] block that sets the semantic tokens:

[data-theme='nautical'] {
  --bg: #0E1E2E;
  --fg: #E5EEF5;
  --primary: #4FA3C7;
  --primary-fg: #0E1E2E;
  --accent: #6FC5C5;
  --accent-fg: #0E1E2E;
  /* …see src/styles/tokens.css for the full set */
}

Then setTheme('nautical' as Theme) and add it to your THEMES array if you build a custom switcher.

What's exported

Components — Alert, Badge, Banner, Breadcrumb, Button, Card, Checkbox, Dialog, FormField (+ FormLabel / FormControl / FormHint / FormError / FormActions), Icon, Input, Kpi (+ KpiGroup), Label, Link, List (+ ListItem / Title / Description / Meta), NavBar, NavRail, NavItem, Panel, Popover, Progress, RadioGroup, Select, Sheet, Switch, Table (+ container, head, body, row, cells, caption), Tabs, Tag, Toast, Toggle (+ ToggleGroup), Tooltip.

Theming — ThemeProvider, useTheme, THEMES, Theme, ThemeSwitcher, AccentPicker.

Utilities — cn, buildPalette, parseHex, rgbToHsl, hslToHex, hexToHsl, shade, withAlpha, relativeLuminance, readableFg.

Styles — @xynon-yl/animus/styles.css (full bundle), @xynon-yl/animus/tokens.css (just the CSS variables).

Develop

npm install
npm run dev          # showcase at http://localhost:5174
npm run build:lib    # produce dist/ for publishing
npm run build:app    # produce dist-app/ for the showcase deploy
npm run type-check

The showcase app under src/showcase/ and src/main.tsx is not part of the published package — only src/index.ts and what it re-exports.

Publish

Tagged releases publish automatically via .github/workflows/publish.yml:

npm version patch    # or minor / major
git push --follow-tags

The workflow runs npm run build:lib and npm publish against GitHub Packages using the org's GITHUB_TOKEN.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@xynon-yl/animus

Install

One-time setup in the consumer app

Use

Theming

Programmatic theming

Define a new base theme

What's exported

Develop

Publish