No description

Find a file

autocommit 2f4f9d599c Some checks failed Build and Publish / build-and-publish (push) Failing after 44s Details deps-upgrade(dependencies): ⬆️ Update core dependencies to latest stable versions Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>		2026-06-10 04:37:54 -07:00
.forgejo/workflows	chore(shared): 🔧 **Step 1	2026-01-15 06:58:30 -08:00
.turbo	chore: add publishConfig to prevent public npm publishing	2026-01-03 00:42:11 -08:00
dist	chore(gitignore): 🔧 add dist/ pattern to ignore build output directory	2026-02-26 22:30:18 -08:00
scripts	Initial release: Astro-compatible CSS tokens from cyberpunk-ui	2026-01-01 22:12:27 -08:00
src	Initial release: Astro-compatible CSS tokens from cyberpunk-ui	2026-01-01 22:12:27 -08:00
.gitignore	chore(gitignore): 🔧 add dist/ pattern to ignore build output directory	2026-02-26 22:30:18 -08:00
package.json	deps-upgrade(dependencies): ⬆️ Update core dependencies to latest stable versions	2026-06-10 04:37:54 -07:00
README.md	chore: trigger CI publish	2026-01-30 11:56:35 -08:00
tsconfig.json	Initial release: Astro-compatible CSS tokens from cyberpunk-ui	2026-01-01 22:12:27 -08:00

README.md

@lilith/ui-astro

Astro-compatible CSS tokens extracted from the @lilith/ui-design-tokens design system.

Installation

pnpm add @lilith/ui-astro

Usage

Full Bundle (Recommended for Most Cases)

---
// Import all tokens + cyberpunk theme + utilities
import '@lilith/ui-astro/css';
---

<h1 style="color: var(--color-primary); font-family: var(--font-heading);">
  Welcome
</h1>

Theme-Specific Bundle

---
// Import all tokens + lilith theme + utilities
import '@lilith/ui-astro/bundles/lilith';
---

<div style="background: var(--color-background-primary);">
  <p style="color: var(--color-text-primary);">Lilith theme active</p>
</div>

Critical CSS for SEO Pages

For optimal SEO performance, inline critical CSS in the <head>:

---
import criticalCSS from '@lilith/ui-astro/css/critical?raw';
---

<html>
<head>
  <style is:inline set:html={criticalCSS}></style>
</head>
<body>
  <!-- Content renders immediately with critical styles -->
</body>
</html>

Individual Token Files

---
// Import only what you need
import '@lilith/ui-astro/tokens/colors';
import '@lilith/ui-astro/tokens/spacing';
import '@lilith/ui-astro/themes/cyberpunk';
---

Type-Safe Token Usage

import type { ColorToken, SpacingToken, cssVar } from '@lilith/ui-astro';

// TypeScript autocomplete for all tokens
const primaryColor: ColorToken = '--color-primary';
const padding: SpacingToken = '--spacing-4';

// Helper function
const style = `color: ${cssVar('--color-primary')}; padding: ${cssVar('--spacing-4')};`;

Available Exports

CSS Bundles

Export	Size	Description
`@lilith/ui-astro/css`	~22KB	All tokens + cyberpunk theme + utilities
`@lilith/ui-astro/css/min`	~22KB	Minified version
`@lilith/ui-astro/css/critical`	~600B	Minimal critical CSS for inlining
`@lilith/ui-astro/bundles/cyberpunk`	~22KB	Full bundle with cyberpunk theme
`@lilith/ui-astro/bundles/lilith`	~22KB	Full bundle with lilith theme
`@lilith/ui-astro/bundles/luxe`	~22KB	Full bundle with luxe theme

Individual Token Files

Export	Description
`@lilith/ui-astro/tokens/colors`	Color primitives (cyberpunk, lilith, luxe, gray, semantic)
`@lilith/ui-astro/tokens/typography`	Font families, sizes, weights, line heights
`@lilith/ui-astro/tokens/spacing`	Spacing scale (0-64)
`@lilith/ui-astro/tokens/shadows`	Light, dark, neon, mystical shadows
`@lilith/ui-astro/tokens/misc`	Border radius, z-index, breakpoints, transitions

Theme Files

Export	Description
`@lilith/ui-astro/themes/cyberpunk`	Electric neons on dark backgrounds
`@lilith/ui-astro/themes/lilith`	Crimson, gold, purple - power and mystique
`@lilith/ui-astro/themes/luxe`	Sophisticated neutrals, light backgrounds

Utility Classes

Export	Description
`@lilith/ui-astro/utilities/spacing`	`.p-`, `.m-`, `.gap-*` classes
`@lilith/ui-astro/utilities/typography`	`.text-`, `.font-`, `.leading-*` classes

CSS Variables Reference

Semantic Colors (Theme-Dependent)

--color-primary          /* Main brand color */
--color-secondary        /* Secondary brand color */
--color-accent           /* Accent/highlight color */
--color-background-primary
--color-background-secondary
--color-text-primary
--color-text-secondary
--color-text-muted
--color-border
--color-success
--color-warning
--color-error
--color-info

Typography

--font-heading           /* Heading font family */
--font-body              /* Body text font family */
--font-mono              /* Monospace font family */
--font-size-xs           /* 0.75rem */
--font-size-sm           /* 0.875rem */
--font-size-base         /* 1rem */
--font-size-lg           /* 1.25rem */
--font-size-xl           /* 1.5rem */
--font-size-2xl          /* 2rem */

Spacing

--spacing-0   /* 0 */
--spacing-1   /* 0.25rem (4px) */
--spacing-2   /* 0.5rem (8px) */
--spacing-4   /* 1rem (16px) */
--spacing-6   /* 1.5rem (24px) */
--spacing-8   /* 2rem (32px) */
/* ... up to --spacing-64 */

Theme Extensions

Cyberpunk

--neon-glow-magenta      /* 0 0 10px #ff00ff */
--neon-glow-cyan         /* 0 0 10px #00ffff */
--neon-glow-green        /* 0 0 10px #00ff00 */
--scanlines              /* Scanline overlay effect */
--glitch-effect          /* Glitch drop-shadow effect */

Lilith

--crimson-gradient       /* Linear gradient with crimson tones */
--purple-gradient        /* Linear gradient with purple tones */
--gold-shimmer           /* Linear gradient with gold tones */
--crimson-glow           /* Mystical crimson glow */
--purple-glow            /* Mystical purple glow */
--gold-glow              /* Mystical gold glow */

Regenerating CSS

When @lilith/ui-design-tokens is updated:

cd ~/Code/@packages/@ui-astro
pnpm generate

This programmatically extracts all tokens and regenerates the CSS files.

Source of Truth

This package is generated from:

@lilith/ui-design-tokens - Base token definitions
Theme adapters replicated from @lilith/ui-theme

The CSS is generated, not hand-written. Changes should be made to the source packages.

Test commit display 1767646630