Metadata-Version: 2.4
Name: mgf-brand-web
Version: 0.2.0
Summary: The Magogi Foundation brand-web kit as an installable package — tokenized CSS + components + self-hosted fonts + logo/pattern assets, shipped as package data so every MGF web surface shares one source of truth. Sibling of mgf-common under the mgf.* namespace.
Project-URL: Homepage, https://codeberg.org/magogi-admin/mgf-brand-web
Project-URL: Issues, https://codeberg.org/magogi-admin/mgf-brand-web/issues
Project-URL: Changelog, https://codeberg.org/magogi-admin/mgf-brand-web/src/branch/main/CHANGELOG.md
Author: Bassam Alsanie, mgf-brand-web contributors
License: MIT
License-File: LICENSE
Keywords: brand,css,design-system,fonts,magogi,web
Classifier: Development Status :: 3 - Alpha
Classifier: Intended Audience :: Developers
Classifier: License :: OSI Approved :: MIT License
Classifier: Operating System :: OS Independent
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Programming Language :: Python :: 3.13
Classifier: Topic :: Software Development :: User Interfaces
Classifier: Typing :: Typed
Requires-Python: >=3.11
Provides-Extra: dev
Requires-Dist: import-linter>=2.0; extra == 'dev'
Requires-Dist: mgf-standard<0.2,>=0.1.6; extra == 'dev'
Requires-Dist: mgf-test-supervisor<0.2,>=0.1.3; extra == 'dev'
Requires-Dist: mypy>=1.10; extra == 'dev'
Requires-Dist: pytest-cov>=5.0; extra == 'dev'
Requires-Dist: pytest-timeout<3,>=2.3; extra == 'dev'
Requires-Dist: pytest>=8.0; extra == 'dev'
Requires-Dist: ruff<0.16,>=0.4; extra == 'dev'
Provides-Extra: standards
Requires-Dist: mgf-common[standards]<0.50,>=0.47; extra == 'standards'
Description-Content-Type: text/markdown

# mgf-brand-web

The **Magogi Foundation brand-web kit** as an installable package — the CSS
implementation of the [Magogi Brand Book][bb] (tokenized colours + typography +
components) plus the self-hosted OFL fonts, Cornerstone-Orbit logo marks, and
Federation-Lattice patterns, shipped as **package data**.

`mgf-brand` ships only design tokens + prose; **mgf-brand-web fills the
component-CSS gap** so every MGF web surface (the cloud console, internal tools,
…) consumes **one source of truth** instead of copying CSS — the drift the
federation kept hitting. Sibling of `mgf-common` under the `mgf.*` namespace.

## Use it

```bash
pip install mgf-brand-web   # resolves from the self-hosted devpi index
```

Mount the kit's static directory (FastAPI/Starlette example):

```python
from fastapi.staticfiles import StaticFiles
from mgf.brand_web import static_dir

app.mount("/static/brand", StaticFiles(directory=static_dir()), name="brand")
```

Then load it in your `<head>` (load order matters: **tokens → fonts → base →
components**):

```html
<link rel="icon" href="/static/brand/logo/magogi-favicon.svg" />
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="/static/brand/fonts/inter-latin.woff2" />
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="/static/brand/fonts/space-grotesk-latin.woff2" />
<link rel="stylesheet" href="/static/brand/tokens.css" />
<link rel="stylesheet" href="/static/brand/fonts.css" />
<link rel="stylesheet" href="/static/brand/base.css" />
<link rel="stylesheet" href="/static/brand/components.css" />
<!-- operator tools only: control-surface components -->
<link rel="stylesheet" href="/static/brand/instruments.css" />
```

`instruments.css` is an **optional, additive** fifth layer for operator/console
surfaces (state chips, a dark streaming console, the telemetry live-pane, …).
Load it after `components.css`; pure content/marketing surfaces can skip it.

See [`src/mgf/brand_web/static/README.md`](src/mgf/brand_web/static/README.md)
for the full class vocabulary and the brand rules baked in (one gold flame per
view, colour+dot+label status, automatic dark mode). A live gallery of the
instrument layer lives at [`docs/instruments-demo.html`](docs/instruments-demo.html).

## What's inside

`tokens.css` · `base.css` · `components.css` · `instruments.css` · `fonts.css`
+ `fonts/` (Inter, Space Grotesk, JetBrains Mono) · `logo/` (Cornerstone Orbit +
favicon) · `pattern/` (Federation Lattice). It is **framework-free** (enforced
by an import-linter contract) so any web stack can depend on it.

## Provenance

The token set is reconciled to the Brand Book and kept in step with the flagship
`mgf-website`'s `global.css`. First consumer:
[`mgf-cloud-app`](https://codeberg.org/magogi-admin/mgf-cloud-app).

[bb]: https://codeberg.org/magogi-admin/mgf-brand — `brand/MAGOGI_BRAND_BOOK.md`
