@karaoke-cms/theme-base

Shared CSS foundation for karaoke-cms themes. Provides design tokens, resets, typography, layout primitives, and structural component styles that all themes build on top of.

Theme authors import the CSS layers and override tokens — no need to rewrite boilerplate layout or reset styles.

Installation

npm install @karaoke-cms/theme-base

Usage

In your theme's main CSS file:

@import '@karaoke-cms/theme-base/tokens.css';
@import '@karaoke-cms/theme-base/base.css';

/* Override tokens */
:root {
    --font-size-base: 1.0625rem;
    --color-accent: #6366f1;
}

/* Add theme-specific styles */

Exports

| Export | Description | |--------|-------------| | ./tokens.css | Default CSS custom property values (colors, spacing, typography) | | ./base.css | Structural layout, resets, typography, component styles | | ./styles-astro.css | Combined Astro-aware stylesheet | | . (JS) | tokensCssPath and baseCssPath — absolute file paths for programmatic use |

What's new in 0.19.0

• New package — extracted from inline theme styles
• Design tokens as CSS custom properties (--color-*, --font-*, --spacing-*, --width-*)
• Structural styles: page-body grid, sidebar regions, prose, listings, tags, navigation
• Responsive breakpoints included