@makogai/extension-brand

Shared CSS for Makogai Chrome extensions — design tokens, popup shell, and GitHub Pages docs.

Install

npm install @makogai/extension-brand

While developing in this monorepo:

"@makogai/extension-brand": "file:../packages/brand"

Publish (maintainers):

cd packages/brand
npm login
npm publish --access public

Usage

Extension popup

In src/popup/main.ts:

import '@makogai/extension-brand/popup.css';
import './app.css'; // extension-only rules

In scripts/build.mjs, concatenate brand + app CSS into dist/popup/popup.css, or rely on esbuild if you bundle CSS via imports (see extension template).

GitHub Pages docs

At build time:

await fs.copy(
  path.join(root, 'node_modules/@makogai/extension-brand/css/docs.css'),
  path.join(root, 'docs/styles.css')
);

Or link from jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@makogai/extension-brand@1/css/docs.css" />

Files

| Export | Contents | |--------|----------| | tokens.css | CSS variables, light/dark themes | | popup-base.css | Popup layout, buttons, nav, settings, info | | popup.css | tokens + popup-base | | docs.css | tokens + marketing site layout |

Maintainers

Re-split from Session Copy when updating shared styles:

node scripts/build-css.mjs
npm version patch
npm publish --access public

License

MIT