Getting started

yemek is a private git-based package (no npm registry publish yet) — consumers install it straight from a pinned GitHub tag.

Install

// package.json
{
  "dependencies": {
    "yemek": "github:Script-hpp/yemek#v0.8.0"
  }
}

Always pin an exact #vX.Y.Z tag, never #main — that way a yemek redesign never silently breaks a consumer's build. See the releases list for available versions.

npm install

yemek's package.json has a prepare: npm run build script, so dist/ (gitignored in this source repo) gets built automatically the moment npm installs the git dependency.

Use a component

<script setup>
import { MetricRing } from 'yemek'
import 'yemek/style.css'
</script>

<template>
  <MetricRing :value="1800" :goal="2200" status="onTrack" unit-label="kcal" goal-prefix="of" />
</template>

Import yemek/style.css once, anywhere near your app's root — it defines every --yemek-* design token yemek's components read from.

Fonts

Fonts are not bundled into the library build on purpose — see Design tokens for why. Install @fontsource/familjen-grotesk and @fontsource/work-sans yourself and import only the weights you actually use.

Theming your app

yemek ships sensible default tokens, but every one of them is a plain CSS custom property — override any subset at your app's root to match your own surfaces/borders/text without touching yemek's actual brand/identity colors:

:root {
  --yemek-color-surface: #161c27;
  --yemek-color-border: #2a3242;
  --yemek-color-text: #f4f6fb;
}

See Design tokens for the full list.