import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';

<Meta title="Brand/Isotype/Frames" />

<Title>Isotype — Frames</Title>
<Subtitle>Second mark in the Xertica isotipos series: two overlapping hollow squares.</Subtitle>

---

## Overview

`IsotypeFrames` renders two overlapping hollow square frames in fixed brand colors. Their intersection blends into a third color purely from SVG stroke opacity — no third color is ever hardcoded, it's a rendering side-effect.

```tsx
import { IsotypeFrames } from 'xertica-ui/brand';

<IsotypeFrames variant="blue-magenta" className="w-64" />
```

---

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `IsotypeFrameVariantId` | `'blue-magenta'` | Which registered color pair to render. |
| `className` | `string` | — | Additional classes on the root — use for sizing (`w-64`, `max-w-md`, etc). `aspect-square` is built in. |
| `aria-label` | `string` | — | Omit for decorative use (root gets `aria-hidden`); set it to render as `role="img"` instead. |

---

## Variants

The registry (`ISOTYPE_FRAME_VARIANTS` in `frame-variants.ts`) holds ordered `[back, front]` color pairs — the front (second) color is painted on top and dominates the intersection blend. Add a new color combination by adding an entry there and widening `IsotypeFrameVariantId`; `IsotypeFrames.tsx` itself never needs to change.

```tsx
import { ISOTYPE_FRAME_VARIANT_IDS, IsotypeFrames } from 'xertica-ui/brand';

ISOTYPE_FRAME_VARIANT_IDS.map(variant => <IsotypeFrames key={variant} variant={variant} />);
```

---

## AI Best Practices

> [!IMPORTANT]
> - **Colors are fixed brand hex values, not theme tokens** — same rule as the grid `Isotype`: never replace `ISOTYPE_COLORS` with CSS custom properties.
> - **The intersection color is derived, not data** — it comes from stroke opacity compositing; never hardcode a third color per variant.
> - **New color pairs are data, not components** — add variants via `ISOTYPE_FRAME_VARIANTS`/`IsotypeFrameVariantId` in `frame-variants.ts`.
> - **Pair order controls the blend** — `[back, front]`, the front color dominates the intersection.