22.1.4 • Published 3 weeks ago

@ojiepermana/angular-theme

Licence

MIT

Version

22.1.4

Deps

Size

682 kB

Vulns

Weekly

Summary Dependency Versions

@ojiepermana/angular-theme

Theme layer for the @ojiepermana/angular design system: a runtime provider (mode / color / neutral / brand), design tokens, and the Tailwind v4 CSS that the components are styled against.

bun add @ojiepermana/angular-theme
# or: npm install @ojiepermana/angular-theme

Entry points

Import path	Contents
`@ojiepermana/angular-theme/styles`	`provideUiTheme`, `ThemeModeService`, `ThemeColorService`, `ThemeBrandService`, `ThemeRadiusService`, `ThemeSpaceService`, …
`@ojiepermana/angular-theme/component/settings`	Navigation-aligned right-side settings drawer; theme axes plus optional consumer-owned layout/navigation adapter
`@ojiepermana/angular-theme/layout`	Layout shell building blocks
`@ojiepermana/angular-theme/shell`	Application shell root: `<Shell>` with `mode` / `device` / `color` axes, its own desktop titlebar, and the Tauri/Electron window bridge
`@ojiepermana/angular-theme/page`	Page-level scaffolding
`@ojiepermana/angular-theme/theme.css`	Base tokens + component styles only — lightweight, no runtime axes
`@ojiepermana/angular-theme/theme-full.css`	Base + every runtime axis (color, neutral, radius, space) — needed for `ThemeColorService`/`ThemeNeutralService` switching
`@ojiepermana/angular-theme/styles/css/*`	Raw CSS assets (per-axis color + neutral palettes, Tailwind map)

The CSS is published with the package and addressable by name. Use theme-full.css for the full design system (runtime color/neutral switching); use the lightweight theme.css plus only the axes you need for a smaller bundle.

/* styles.css — full design system */
@import '@ojiepermana/angular-theme/theme-full.css'; /* base + all color + neutral palettes */
@import 'tailwindcss';
@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css'; /* maps tokens → bg-primary, bg-brand, text-foreground, … */

For a lightweight setup, import the base then opt in to specific axes:

/* styles.css — base + only the axes you use */
@import '@ojiepermana/angular-theme/theme.css'; /* base tokens + components, no axes */
@import 'tailwindcss';
@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';
@import '@ojiepermana/angular-theme/styles/css/color/index.css'; /* opt in to accent palettes */
@import '@ojiepermana/angular-theme/styles/css/neutral/index.css'; /* opt in to neutral families */

Requires Tailwind CSS ^4.3.0.

Provider

import { provideUiTheme } from '@ojiepermana/angular-theme/styles';

export const appConfig = {
  providers: [
    provideUiTheme({
      mode: 'light',
      color: 'base', // accent palette (base, red…rose, brand)
      neutral: 'base', // gray family (base, slate, gray, zinc, …)
      radius: 'md', // corner radius preset (none, xs, sm, md, xl, full)
      space: 'normal', // spacing density preset (compact, normal, relaxed, spacious)
      brand: { color: '221 83% 53%', foreground: '0 0% 100%' }, // consumer brand
    }),
  ],
};

mode — bootstraps ThemeModeService and persists the default mode (light / dark / system).
color — bootstraps ThemeColorService; initial accent palette (<html theme-color>).
neutral — initial neutral family (<html theme-neutral>); composes with any accent.
radius — bootstraps ThemeRadiusService; initial corner-radius preset (<html theme-radius>). Drives the single --radius-base knob so the whole --radius-* scale and rounded-* utilities follow. Values: none, xs, sm, md (default), xl, full; each uses Tailwind's stock radius value with the same name.
space — bootstraps ThemeSpaceService; initial spacing-density preset (<html theme-space>). Drives the single --spacing-base knob so every p-* / m-* / gap-* / w-* / h-* utility follows. Values: compact, normal (default), relaxed, spacious.
brand — bootstraps ThemeBrandService; sets --brand / bg-brand and the theme-color='brand' accent preset. Accepts an HSL triplet string ('221 83% 53%') or { color, foreground }. Settable at runtime via setBrand().

A persisted choice (localStorage theme-color / theme-neutral / theme-radius / theme-space / theme-brand) always wins over the configured default.

Color system (FluxUI-style)

Four independent axes switch at runtime via attribute selectors on <html>:

accent (theme-color) — base (core), red … rose, and brand. Each re-tints the full palette. base = no override.
neutral (theme-neutral) — base (core), slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe. Overrides the gray family and Layout's decorative pattern source, and is layered after accent so it wins both token groups. With neutral base, surface patterns follow the active accent; every other neutral gives them its own soft family hue.
radius (theme-radius) — none, xs, sm, md (default), xl, full. Sets the --radius-base knob; the full --radius-* scale and rounded-* utilities follow.
space (theme-space) — compact, normal (default), relaxed, spacious. Sets the --spacing-base knob; every p-* / m-* / gap-* / w-* / h-* utility follows.

theme-full.css (i.e. styles/css/index.css) bundles the core base theme plus every accent and neutral palette, so switching needs no runtime CSS loading. The lightweight theme.css ships base only — import the axis files you need on top of it (or use theme-full.css) to enable runtime switching.

Material Symbols icons (opt-in)

provideUiTheme() makes no external network request by default. To preload the Material Symbols font from Google Fonts:

provideUiTheme({ icons: { materialSymbols: true } });

Leave it off (the default) for privacy / offline / strict CSP, and self-host the font in your own stylesheet if you need it.

Support and security

Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the bundled SUPPORT.md. Report suspected vulnerabilities privately using the instructions in the bundled SECURITY.md. This package is MIT licensed; see the bundled LICENSE.

Keywords

angular theme layout design-system