Brand Logo

1import * as React from 'react';
2 
3// @interlace/brand-logo v1.0.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/brand-logo
5// What changed since: https://ds.interlace.tools/c/brand-logo#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — BrandMark + BrandLogo (the canonical Interlace nav lockup)
10 *
11 * The locked two-bar Interlace mark plus the lowercase monospace wordmark
12 * "interlace". This is the SAME lockup eslint.interlace.tools ships in its
13 * top nav — one component so every *.interlace.tools site renders an
14 * identical brand header instead of hand-copied SVG.
15 *
16 * ## Geometry (locked — never bend)
17 *
18 * viewBox 0 0 100 100, two rx-14 bars (62×28) rotated -30° about the
19 * center; orange bar leads upper-left, green bar lower-right. See the
20 * brand-mark favicons (apps/registry/public/favicon.svg) for the same
21 * geometry.
22 *
23 * ## Color contract
24 *
25 * Bar fills read `var(--brand-mark-bar-o)` / `var(--brand-mark-bar-g)` —
26 * theme-paired decorative fills defined in
27 * `packages/ui/styles/interlace-theme.css` (light #a84c17/#0a6b47, dark
28 * #f4794a/#0d9460). Consumers outside this monorepo (e.g. the eslint docs
29 * site) define the same two custom properties and the lockup follows their
30 * theme switch automatically.
31 *
32 * | Rule | Concept                        | Where in this file                              |
33 * | ---- | ------------------------------ | ----------------------------------------------- |
34 * | R2   | Travels (high)                 | Zero product nouns beyond the brand itself      |
35 * | R4   | Extends native el              | `React.ComponentProps<'svg'>` / `<'span'>`      |
36 * | R6   | data-slot on every named part  | `brand-mark` / `brand-logo`                     |
37 * | R7   | className merged + ...rest     | `cn(...)` + `{...props}` on both parts          |
38 * | R18  | Tailwind only — no inline style| SVG geometry is numeric attrs, fills are tokens |
39 * | R19  | Tokens only — no raw hex       | `var(--brand-mark-bar-*)`                       |
40 * | R23  | CLS=0                          | Fixed width/height on the SVG                   |
41 * | R25  | Server component               | no hooks → no 'use client'                      |
42 * | R26  | a11y                           | Mark is aria-hidden; the wordmark names the brand |
43 */
44 
45import { cn } from '@/lib/utils';
46 
47// … truncated