jera

official

Component library built on the same Base16 palette. CSS custom properties power 80+ Svelte 5 components.

Application @miozu/jera Language css Category frontend

Installation

pnpm add @miozu/jera

See the [design system documentation](/design-system) for full component reference.

Configuration

node_modules/@miozu/jera/styles/tokens.css

/* @miozu/jera — Base16 design tokens
 * Maps miozu-theme palette to CSS custom properties.
 * All components reference these tokens for consistent theming.
 */

:root {
  /* Backgrounds & surfaces */
  --color-base00: #232733;
  --color-base01: #2C3040;
  --color-base02: #3E4359;
  --color-base03: #565E78;

  /* Foregrounds */
  --color-base04: #737E99;
  --color-base05: #D0D2DB;
  --color-base06: #F3F4F7;
  --color-base07: #FAFDFB;

  /* Accents */
  --color-base08: #C974E6; /* magenta — functions, headings */
  --color-base09: #FF9982; /* peach — support, regex */
  --color-base0A: #E8D176; /* yellow — variables, tags */
  --color-base0B: #6DD672; /* green — strings, inserted */
  --color-base0C: #40FFE2; /* cyan — constants, booleans */
  --color-base0D: #83D2FC; /* blue — keywords, storage */
  --color-base0E: #EB3137; /* red — deprecated, errors */
  --color-base0F: #FF9837; /* orange — classes, bold */

  /* Semantic aliases */
  --bg: var(--color-base00);
  --surface: var(--color-base01);
  --border: var(--color-base02);
  --fg: var(--color-base05);
  --fg-muted: var(--color-base04);
  --accent: var(--color-base0D);
  --success: var(--color-base0B);
  --danger: var(--color-base0E);
  --warning: var(--color-base0A);
}

View source on Codeberg Browse all ports