@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/ (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/ (typically 24×24 viewBox, fill="currentColor" — Material Symbols / 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 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:

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):

// 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.