npm package: @smkb/design-ui
Description: Seminar Hakibutzim College (SMKB) — Vue 3 component library
Latest version: 0.10.0

# `@smkb/design-ui`

Vue 3 component library for the SMKB design system.

## Brand colors

Canonical palette (CSS variables on `:root` after importing tokens):

| Token | Hex | Notes |
| --- | --- | --- |
| `--smkb-brand-green` | `#4eb764` | **Primary** — same as `--smkb-color-primary` / `--smkb-green-600` |
| `--smkb-brand-blue` | `#15b7e0` | |
| `--smkb-brand-pink` | `#cc66a3` | |
| `--smkb-brand-yellow` | `#f6be53` | |

**Two names for brand colors:** `--smkb-brand-*` are **Layer 1** primitives (canonical marketing hex). `--smkb-color-brand-*` are **Layer 2** semantic aliases (`var(--smkb-brand-*)`), same idea as `--smkb-color-primary` — they stay aligned unless you override semantics for theming. Prefer **`--smkb-color-brand-*`** in app UI; use **`--smkb-brand-*`** when you mean the raw palette value. TypeScript: `tokens.colorBrandGreen`, … from `@smkb/design-ui`.

**Storybook:** **Documentation → Brand colors** and **Design Tokens → All Tokens** (this repo: `pnpm storybook`).

## Icons (in-repo SVG files)

Icons are plain **SVG files** committed under [`src/icons/svg/`](./src/icons/svg/) (same approach as logo assets). Components resolve a prop like `icon="home"` to `src/icons/svg/home.svg` (with `snake_case` → `kebab-case` normalization).

There is **no** Iconify or other icon runtime dependency.

### Where to see every icon

- **Storybook:** `pnpm storybook` → **Components → SmkbIcon → Icon Gallery** (filterable list).
- **In code:** import `SMKB_ICON_NAMES` from `@smkb/design-ui` for the sorted list of ids (filename without `.svg`).

### Adding or updating icons

1. Add a new file `your-icon.svg` in [`src/icons/svg/`](./src/icons/svg/) (typically 24×24 viewBox, `fill="currentColor"` — [Material Symbols](https://fonts.google.com/icons) / Google Fonts icons are a good visual match).
2. Rebuild the library (`pnpm run build` in this package). The map in [`src/icons/smkbIconMap.ts`](./src/icons/smkbIconMap.ts) uses `import.meta.glob` and picks up new files automatically.

**Optional:** to **regenerate all** SVG files from Iconify’s Material Symbols JSON API (same glyph set as before), run:

```bash
pnpm run generate-svg-icons
```

(Network required; overwrites existing `.svg` files in `src/icons/svg/`.)

## Vite (Vue 3) — imports and `optimizeDeps`

The library exports **named** members from `dist/index.js` (`SmkbBackButton`, `SmkbIconButton`, `resolveSmkbIconSvg`, `createSmkb`, etc.). Node and native ESM resolve them correctly.

If **Vite’s dependency pre-bundling** (`node_modules/.vite/deps/@smkb_design-ui.js`) ever reports **missing named exports** (often after upgrading `@smkb/design-ui` or changing the lockfile), try:

1. **Stop the dev server** and delete the Vite cache: remove the `node_modules/.vite` folder (or only `node_modules/.vite/deps`).
2. **Exclude the package from prebundling** (recommended; same approach as this repo’s Storybook):

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['@smkb/design-ui'],
  },
})
```

**Alternative:** use `app.use(createSmkb())` and **only** global components in templates (no named imports). You still need **tokens** and **`import '@smkb/design-ui/styles'`** (or equivalent) so CSS variables and component styles apply.

**Power Apps / iframes:** strict CSP may affect `v-html` icons; prefer **`icon` props** or **default-slot SVG** (as in `SmkbBackButton`). Use `tokens-nofonts.css` when custom fonts are blocked.