@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/components/TypeDemo.astro

@@ -0,0 +1,249 @@
+---
+// Live typography examples for the Typography page, set in the site's own Inter and
+// JetBrains Mono, so what you see is what the fonts do.
+import '../styles/typography.css';
+import { langOf } from '../lib/i18n';
+
+interface Props {
+  kind: 'faces' | 'styles' | 'ui' | 'features' | 'numbers' | 'vietnamese' | 'leading';
+}
+const { kind } = Astro.props;
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+
+// Every text style, read from the tokens, with a sample in its role.
+import { tokensByPrefix } from '../lib/tokens';
+const groups: { name: string; styles: { id: string; sample: string; tnum?: boolean }[] }[] = [
+  { name: 'Display', styles: [
+    { id: 'display.large', sample: 'Sync everything' },
+    { id: 'display.medium', sample: 'Sync everything' },
+    { id: 'display.small', sample: 'Sync everything' },
+  ] },
+  { name: 'Heading', styles: [
+    { id: 'heading.xlarge', sample: 'Connect your first store' },
+    { id: 'heading.large', sample: 'Orders' },
+    { id: 'heading.medium', sample: 'Sync settings' },
+    { id: 'heading.small', sample: 'Online store → ERP' },
+    { id: 'heading.xsmall', sample: 'Inventory' },
+  ] },
+  { name: 'Body', styles: [
+    { id: 'body.large', sample: 'Orders from your online store are copied to the ERP every 5 minutes.' },
+    { id: 'body.default', sample: 'Last synced 2 minutes ago. 3 orders are waiting.' },
+    { id: 'body.small', sample: 'Updated by Linh · 24/10/2026 09:41' },
+  ] },
+  { name: 'Label', styles: [
+    { id: 'label.default', sample: 'Save changes' },
+    { id: 'label.small', sample: 'Synced' },
+  ] },
+  { name: 'Code', styles: [
+    { id: 'code.default', sample: 'order_id: SO-10421' },
+  ] },
+];
+// What each style is for, in Vietnamese (the English text is the token's description).
+const useVi: Record<string, string> = {
+  'display.large': 'Hero của trang marketing. Dưới 768 px, dùng display.small.',
+  'display.medium': 'Mở đầu một phần của trang marketing. Dưới 768 px, dùng display.small.',
+  'display.small': 'Tiêu đề trang marketing. Dưới 768 px, dùng heading.xlarge.',
+  'heading.xlarge': 'Tiêu đề lớn: màn hình trống, onboarding, các phần của tài liệu và landing page.',
+  'heading.large': 'Tiêu đề trang, mỗi trang một tiêu đề.',
+  'heading.medium': 'Tiêu đề phần và tiêu đề dialog.',
+  'heading.small': 'Tiêu đề card, panel và drawer.',
+  'heading.xsmall': 'Tiêu đề nhóm trong form, danh sách và menu; tiêu đề banner.',
+  'body.large': 'Chữ để đọc: mô tả, hướng dẫn, tài liệu, email.',
+  'body.default': 'Chữ giao diện mặc định: ô bảng, ô nhập, thông báo.',
+  'body.small': 'Chữ phụ: helper text, metadata, mốc thời gian, tooltip.',
+  'label.default': 'Nút, nhãn của form, tab, mục menu và mục điều hướng.',
+  'label.small': 'Badge, tag, nút nhỏ, header của bảng.',
+  'code.default': 'Khối code, ID, key, JSON. Cùng cỡ với body.default: JetBrains Mono và Inter có cùng x-height.',
+};
+const fontTokens = new Map(tokensByPrefix('font').map((t) => [t.name, t]));
+const info = (id: string) => {
+  const t = fontTokens.get(`font.${id}`)!;
+  const [weight, rest] = t.resolved.split(' ');
+  const [size, lh] = rest.split('/');
+  const px = (v: string) => Math.round(parseFloat(v) * 16);
+  return { cssVar: t.cssVar, weight, size: px(size), lh: px(lh), use: vi && useVi[id] ? useVi[id] : t.description.replace(/^\d+\/\d+\. /, '') };
+};
+const features = [
+  { tag: 'cv05', what: L('Lowercase l with a tail', 'Chữ l thường có đuôi'), sample: 'Il1 · lI1' },
+  { tag: 'cv08', what: L('Uppercase I with serifs', 'Chữ I hoa có chân'), sample: 'Il1 · lI1' },
+  { tag: 'zero', what: L('Slashed zero', 'Số 0 có gạch chéo'), sample: 'O0 · 0O' },
+];
+---
+
+{kind === 'faces' && (
+  <div class="type-faces">
+    <figure class="type-face">
+      <p class="type-face-sample">Aa</p>
+      <figcaption>
+        <b>Inter</b>
+        <span>{L('Interface and reading text. Weights 400, 500, 600; 700 for display.', 'Chữ giao diện và chữ để đọc. Độ đậm 400, 500, 600; 700 cho display.')}</span>
+        <span class="type-face-line">{L('Đồng bộ đơn hàng · Sync orders 0123456789', 'Đồng bộ đơn hàng · Ổn định 0123456789')}</span>
+      </figcaption>
+    </figure>
+    <figure class="type-face is-mono">
+      <p class="type-face-sample">Aa</p>
+      <figcaption>
+        <b>JetBrains Mono</b>
+        <span>{L('Code, IDs, API keys and token names. Weight 400.', 'Code, ID, API key và tên token. Độ đậm 400.')}</span>
+        <span class="type-face-line">order_id: SO-10421 · 0O Il1</span>
+      </figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'styles' && (
+  <div class="type-styles" lang="en">
+    {groups.map((g) => (
+      <section class="type-group">
+        <p class="type-group-name">{g.name}</p>
+        {g.styles.map((st) => {
+          const i = info(st.id);
+          return (
+            <div class="type-row">
+              <div class="type-meta">
+                <code>font.{st.id}</code>
+                <span class="type-num">{i.size}/{i.lh} · {i.weight}</span>
+              </div>
+              <div class="type-specimen" style={`font:var(${i.cssVar});${st.tnum ? 'font-variant-numeric:tabular-nums;' : ''}`}>{st.sample}</div>
+              <p class="type-use">{i.use}</p>
+            </div>
+          );
+        })}
+      </section>
+    ))}
+  </div>
+)}
+
+{kind === 'ui' && (
+  <figure class="type-ui">
+    <div class="type-ui-scroll">
+    <div class="type-ui-screen">
+      <div class="ui-page-head">
+        <span class="ui-crumb" data-n="1" style="font:var(--bh-font-body-small)">{L('Integrations / Online store', 'Tích hợp / Cửa hàng online')}</span>
+        <span class="ui-title" data-n="2" style="font:var(--bh-font-heading-large)">{L('Orders', 'Đơn hàng')}</span>
+      </div>
+      <div class="ui-metrics">
+        <div class="ui-card">
+          <span data-n="3" style="font:var(--bh-font-body-small)">{L('Synced today', 'Đồng bộ hôm nay')}</span>
+          <span data-n="4" style="font:var(--bh-font-heading-large);font-variant-numeric:tabular-nums">{L('1,204', '1.204')}</span>
+        </div>
+        <div class="ui-card">
+          <span style="font:var(--bh-font-body-small)">{L('Failed', 'Lỗi')}</span>
+          <span style="font:var(--bh-font-heading-large);font-variant-numeric:tabular-nums">3</span>
+        </div>
+      </div>
+      <div class="ui-card ui-panel">
+        <div class="ui-panel-head">
+          <span data-n="5" style="font:var(--bh-font-heading-small)">{L('Recent orders', 'Đơn hàng gần đây')}</span>
+          <span class="ui-btn" data-n="6" style="font:var(--bh-font-label-default)">{L('Retry failed', 'Thử lại đơn lỗi')}</span>
+        </div>
+        <p class="ui-desc" data-n="7" style="font:var(--bh-font-body-default)">{L('Orders copied from the online store to the ERP in the last 24 hours.', 'Đơn hàng được chép từ cửa hàng online sang ERP trong 24 giờ qua.')}</p>
+        <table class="ui-table" data-no-stack>
+          <thead><tr><th data-n="8" style="font:var(--bh-font-label-small)">{L('Order', 'Đơn hàng')}</th><th style="font:var(--bh-font-label-small)">{L('Status', 'Trạng thái')}</th><th style="font:var(--bh-font-label-small);text-align:right">{L('Total', 'Tổng tiền')}</th></tr></thead>
+          <tbody>
+            <tr><td data-n="9" style="font:var(--bh-font-code-default)">SO-10421</td><td><span class="ui-badge" data-n="10" style="font:var(--bh-font-label-small)">{L('Synced', 'Đã đồng bộ')}</span></td><td style="font:var(--bh-font-body-default);font-variant-numeric:tabular-nums;text-align:right"><span data-n="11">{L('1,250,000 ₫', '1.250.000 ₫')}</span></td></tr>
+            <tr><td style="font:var(--bh-font-code-default)">SO-10420</td><td><span class="ui-badge is-error" style="font:var(--bh-font-label-small)">{L('Failed', 'Lỗi')}</span></td><td style="font:var(--bh-font-body-default);font-variant-numeric:tabular-nums;text-align:right">{L('480,000 ₫', '480.000 ₫')}</td></tr>
+          </tbody>
+        </table>
+        <span class="ui-meta" data-n="12" style="font:var(--bh-font-body-small)">{L('Updated 2 minutes ago', 'Cập nhật 2 phút trước')}</span>
+      </div>
+    </div>
+    </div>
+    <ol class="type-ui-legend">
+      <li><b>Breadcrumb</b> <code>body.small</code></li>
+      <li><b>{L('Page title', 'Tiêu đề trang')}</b> <code>heading.large</code></li>
+      <li><b>{L('Card label', 'Nhãn trong card')}</b> <code>body.small</code></li>
+      <li><b>{L('Number in a card', 'Số trong card')}</b> <code>heading.large</code> + {L('tabular figures', 'số đều cột')}</li>
+      <li><b>{L('Card title', 'Tiêu đề card')}</b> <code>heading.small</code></li>
+      <li><b>{L('Button', 'Nút')}</b> <code>label.default</code></li>
+      <li><b>{L('Description', 'Mô tả')}</b> <code>body.default</code></li>
+      <li><b>{L('Table header', 'Header của bảng')}</b> <code>label.small</code></li>
+      <li><b>{L('Order ID', 'Mã đơn hàng')}</b> <code>code.default</code></li>
+      <li><b>{L('Badge', 'Badge')}</b> <code>label.small</code></li>
+      <li><b>{L('Table cell, amount', 'Ô bảng, số tiền')}</b> <code>body.default</code> + {L('tabular figures', 'số đều cột')}</li>
+      <li><b>{L('Timestamp', 'Mốc thời gian')}</b> <code>body.small</code></li>
+    </ol>
+  </figure>
+)}
+
+{kind === 'features' && (
+  <div class="table-wrap">
+    <table class="type-features">
+      <thead><tr><th scope="col">{L('Feature', 'Tính năng')}</th><th scope="col">{L('What it does', 'Tác dụng')}</th><th scope="col">{L('Off', 'Tắt')}</th><th scope="col">{L('On', 'Bật')}</th></tr></thead>
+      <tbody>
+        {features.map((f) => (
+          <tr>
+            <td><code>{f.tag}</code></td>
+            <td>{f.what}</td>
+            <td><span class="type-glyphs" style="--bh-font-features:normal">{f.sample}</span></td>
+            <td><span class="type-glyphs" style={`--bh-font-features:'${f.tag}'`}>{f.sample}</span></td>
+          </tr>
+        ))}
+        <tr>
+          <td><code>cv05 cv08 zero</code></td>
+          <td>{L('All three, for codes people read and type', 'Cả ba, cho mã mà người dùng đọc và gõ')}</td>
+          <td><span class="type-glyphs" style="--bh-font-features:normal">SKU-I01l0O</span></td>
+          <td><span class="type-glyphs" style="--bh-font-features:'cv05','cv08','zero'">SKU-I01l0O</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+)}
+
+{kind === 'numbers' && (
+  <div class="type-numbers">
+    <figure>
+      <figcaption>{L('Proportional (default)', 'Số tỉ lệ (mặc định)')}</figcaption>
+      <p set:html={L('1,111.11<br />9,840.00<br />704.18', '1.111,11<br />9.840,00<br />704,18')} />
+    </figure>
+    <figure>
+      <figcaption><code>tabular-nums</code></figcaption>
+      <p class="is-tabular" set:html={L('1,111.11<br />9,840.00<br />704.18', '1.111,11<br />9.840,00<br />704,18')} />
+    </figure>
+  </div>
+)}
+
+{kind === 'vietnamese' && (
+  <div class="type-vi">
+    <div class="type-vi-head" aria-hidden="true"><span>{L('Style', 'Text style')}</span><span>{L('English line height', 'Line height tiếng Anh')}</span><span>{L('Vietnamese line height', 'Line height tiếng Việt')}</span></div>
+    {groups.flatMap((g) => g.styles).map((st) => {
+      const i = info(st.id);
+      const t = fontTokens.get(`font.${st.id}`)!;
+      const viLh = t.viResolved ? Math.round(parseFloat(t.viResolved.split('/')[1]) * 16) : i.lh;
+      const sample = st.id.startsWith('display') ? 'Ẫm · Ổn' : 'Ổn định · Ấn Độ · Ẫm · Ở đây';
+      return (
+        <div class="type-vi-row">
+          <div class="type-meta">
+            <code>font.{st.id}</code>
+            <span class="type-num">{i.size}/{i.lh} → {i.size}/{viLh}</span>
+          </div>
+          <span class="type-vi-box" lang="vi" style={`font:${t.resolved}`}>{sample}</span>
+          <span class="type-vi-box" lang="vi" style={`font:var(${i.cssVar})`}>{sample}</span>
+        </div>
+      );
+    })}
+  </div>
+)}
+
+{kind === 'leading' && (() => {
+  const body = fontTokens.get('font.body.default')!;
+  const viLh = body.viResolved ? Math.round(parseFloat(body.viResolved.split('/')[1]) * 16) : 24;
+  const en = ['Orders sync every 5 minutes.', 'Index, Item and Order lists.', 'Online store to the ERP.'];
+  const viText = ['Ổn định đơn hàng mỗi 5 phút.', 'Ấn Độ, Ẫm và Ở đây có ưu đãi.', 'Ổn định, Ấn Độ, Ẫm.'];
+  const cols = [
+    { lang: 'en', text: en, lh: 20, title: L('English, 14/20', 'Tiếng Anh, 14/20'), note: L('Fits.', 'Vừa.'), bad: false },
+    { lang: 'vi', text: viText, lh: 20, title: L('Vietnamese at the English line height, 14/20', 'Tiếng Việt với line height tiếng Anh, 14/20'), note: L('Marks on capitals touch the line above.', 'Dấu trên chữ hoa chạm vào dòng trên.'), bad: true },
+    { lang: 'vi', text: viText, lh: viLh, title: L(`Vietnamese, 14/${viLh}`, `Tiếng Việt, 14/${viLh}`), note: L('Every mark stays in its own line.', 'Mọi dấu nằm gọn trong dòng của nó.'), bad: false },
+  ];
+  return (
+    <div class="type-leading">
+      {cols.map((c) => (
+        <figure class={c.bad ? 'is-bad' : ''}>
+          <p class="type-leading-text" lang={c.lang} style={`font-family:var(--bh-font-family-sans);font-size:14px;font-weight:400;line-height:${c.lh}px;--lh:${c.lh}px`}>{c.text.map((line, i) => <>{i > 0 && <br />}{line}</>)}</p>
+          <figcaption><b>{c.title}</b><span>{c.note}</span></figcaption>
+        </figure>
+      ))}
+    </div>
+  );
+})()}

package/dist/docs/src/components/logos/Fig.astro

@@ -0,0 +1,28 @@
+---
+// A logo figure. The site shows a PNG drawn at 3× and displayed at 1×: shrinking a larger
+// picture softens the 30° edges, so they don't show stair steps on 100% screens the way an
+// SVG does. The PNGs are made from the same SVG by scripts/build-logo-figures.mjs, which
+// builds the site with LOGO_SVG=1 (this component then draws the SVG and tags it with its id)
+// and photographs every tagged figure at 3×.
+interface Props {
+  id: string; // file name in /brand/logos/fig/, without .png
+  w: number; // size in CSS px, whole numbers
+  h: number;
+  viewBox: string;
+  class?: unknown;
+  style?: string;
+  label?: string; // accessible name; empty = decorative
+}
+
+const { id, w, h, viewBox, class: cls, style = '', label = '' } = Astro.props;
+const capture = process.env.LOGO_SVG === '1';
+const box = { width: w, height: h, style: `--w:${w}px;--h:${h}px;${style}` };
+---
+
+{capture ? (
+  <svg data-fig={id} class:list={[cls]} xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} {...box} aria-hidden="true">
+    <slot />
+  </svg>
+) : (
+  <img class:list={['fig', cls]} src={`/brand/logos/fig/${id}.png`} {...box} alt={label} decoding="async" />
+)}

package/dist/docs/src/components/logos/LogoAnatomy.astro

@@ -0,0 +1,101 @@
+---
+// Anatomy of the lockup on its triangle grid. The grid is the icon's construction grid (28 bands
+// across the icon), continued over the whole lockup and its clear space, so every measure reads
+// in grid units. Every 7th line is darker: one hexagon side is two of those triangles.
+import { BAND, COLORS, ICON_H, ICON_PATH, ICON_SCALE, ICON_TOP, ICON_W, WORDMARKS, X_HEIGHT } from '../../lib/logo-geometry';
+import { triGrid } from '../../lib/tri-grid';
+import Fig from './Fig.astro';
+import { langOf } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const L = {
+  en: {
+    alt: 'The beehexa lockup on a triangle grid. One side of the hexagon equals the x-height of the wordmark (x). The icon is 2x tall; the gap between icon and wordmark is 10 grid bands; the clear space is x on every side.',
+    legend: [
+      ['Icon', '2x tall. One hexagon side is the x-height of the wordmark, so icon and text share one unit.'],
+      ['Gap', '10 grid bands: half of the white top face, which is 20 bands wide. The two lengths marked 10 are equal.'],
+      ['Wordmark', '“beehexa” in Inter Display 500, lowercase, outlined.'],
+    ],
+  },
+  vi: {
+    alt: 'Lockup beehexa trên lưới tam giác. Một cạnh lục giác bằng x-height của wordmark (x). Icon cao 2x; khoảng cách giữa icon và wordmark là 10 dải lưới; vùng trống là x ở mọi phía.',
+    legend: [
+      ['Icon', 'Cao 2x. Một cạnh lục giác bằng x-height của wordmark, nên icon và chữ dùng chung một đơn vị.'],
+      ['Khoảng cách', '10 dải lưới: bằng nửa mặt trắng trên cùng, vốn rộng 20 dải. Hai đoạn ghi 10 dài bằng nhau.'],
+      ['Wordmark', 'Chữ “beehexa” bằng Inter Display 500, viết thường, đã chuyển thành nét vẽ.'],
+    ],
+  },
+}[lang];
+
+const iconPx = 112; // x = 56 px
+const s = iconPx / ICON_H;
+const X = X_HEIGHT;
+const px = (n: number) => n / s; // screen px to drawing units
+const fs = px(12);
+const sw = px(1);
+const tick = px(4);
+const inkStart = ICON_W + 10 * BAND; // the wordmark's first stroke, 10 bands after the icon
+const iconBottom = ICON_TOP + ICON_H;
+// One hexagon edge, upper left: from the left vertex to the top vertex.
+const edge = { x1: 0, y1: ICON_TOP + 75 * ICON_SCALE, x2: 129.9 * ICON_SCALE, y2: ICON_TOP };
+
+const dimH = (x1: number, x2: number, y: number) => `M${x1} ${y - tick}V${y + tick}M${x1} ${y}H${x2}M${x2} ${y - tick}V${y + tick}`;
+const dimV = (y1: number, y2: number, x: number) => `M${x - tick} ${y1}H${x + tick}M${x} ${y1}V${y2}M${x - tick} ${y2}H${x + tick}`;
+
+// The figure fills its panel edge to edge (FIG_W is wider than the content column; the panel
+// crops it), with the lockup centred on whole pixels and the grid running under everything.
+const FIG_W = 1040;
+const FIG_H = 288;
+// The white top face: 20 bands wide, from (37.1, 85.7) to (222.7, 85.7) in icon units.
+const faceY = ICON_TOP + 85.7 * ICON_SCALE;
+const faceMid = 129.9 * ICON_SCALE;
+const faceRight = 222.7 * ICON_SCALE;
+
+const diagrams = [WORDMARKS.beehexa].map((word) => {
+  const left = Math.round((FIG_W - word.width * s) / 2);
+  const top = Math.round((FIG_H - iconPx) / 2);
+  const box = { x1: -left / s, y1: ICON_TOP - top / s, x2: (FIG_W - left) / s, y2: ICON_TOP + (FIG_H - top) / s };
+  // Fine grid: 1 band. Major grid: 7 bands, so one hexagon side (x) is two major triangle sides.
+  return { word, box, grid: triGrid(0, ICON_TOP, BAND, box), major: triGrid(0, ICON_TOP, 7 * BAND, box), viewBox: `${box.x1} ${box.y1} ${FIG_W / s} ${FIG_H / s}` };
+});
+---
+
+<figure class="logo-figure">
+  <div class="logo-stage bg-white anatomy-stage bleed-stage">
+    {diagrams.map((d) => (
+      <Fig id={`anatomy-${lang}`} class={['diagram px-center bleed']} viewBox={d.viewBox} w={FIG_W} h={FIG_H} label={L.alt}>
+        <path class="d-grid" d={d.grid} stroke-width={sw} style="opacity:.06" />
+        <path class="d-grid" d={d.major} stroke-width={sw} style="opacity:.18" />
+        <path fill={COLORS.yellow} fill-rule="evenodd" transform={`translate(0 ${ICON_TOP}) scale(${ICON_SCALE})`} d={ICON_PATH} />
+        <path fill={COLORS.graphite} transform={`translate(${d.word.x} 0)`} d={d.word.d} />
+
+        {/* x on the icon: one hexagon side */}
+        <line class="d-measure" x1={edge.x1} y1={edge.y1} x2={edge.x2} y2={edge.y2} stroke-width={px(2)} stroke-linecap="round" />
+        <text class="d-label" x={edge.x2 * 0.42 - px(6)} y={(edge.y1 + edge.y2) / 2 - px(6)} font-size={fs} text-anchor="end" stroke-width={px(4)}>x</text>
+
+        {/* x on the wordmark: baseline and x-height */}
+        <g class="d-guide" stroke-width={sw} stroke-dasharray={`${px(3)} ${px(3)}`}>
+          <line x1={inkStart} x2={d.word.width + px(28)} y1="0" y2="0" />
+          <line x1={inkStart} x2={d.word.width + px(28)} y1={-X} y2={-X} />
+        </g>
+        <path class="d-measure" d={dimV(-X, 0, d.word.width + px(20))} stroke-width={sw} />
+        <text class="d-label" x={d.word.width + px(28)} y={-X / 2 + fs * 0.35} font-size={fs} stroke-width={px(4)}>x</text>
+
+        {/* icon height */}
+        <path class="d-measure" d={dimV(ICON_TOP, iconBottom, -px(20))} stroke-width={sw} />
+        <text class="d-label" x={-px(28)} y={ICON_TOP + ICON_H / 2 + fs * 0.35} font-size={fs} text-anchor="end" stroke-width={px(4)}>2x</text>
+
+        {/* the gap is half the white top face: two equal lengths on one line */}
+        <path class="d-measure" d={dimH(faceMid, faceRight, faceY)} stroke-width={sw} />
+        <text class="d-label" x={(faceMid + faceRight) / 2} y={faceY - px(8)} font-size={fs} text-anchor="middle" stroke-width={px(4)}>10</text>
+        <path class="d-measure" d={dimH(ICON_W, inkStart, faceY)} stroke-width={sw} />
+        <text class="d-label" x={(ICON_W + inkStart) / 2} y={faceY - px(8)} font-size={fs} text-anchor="middle" stroke-width={px(4)}>10</text>
+      </Fig>
+    ))}
+  </div>
+</figure>
+
+<ul class="diagram-legend">
+  {L.legend.map(([title, text]) => <li><b>{title}</b>{text}</li>)}
+</ul>

package/dist/docs/src/components/logos/LogoClearSpace.astro

@@ -0,0 +1,81 @@
+---
+// Clear space: x on every side, where x is the x-height of the wordmark, which is also one side of
+// the hexagon. Drawn the way GitLab shows its own: a grid of quarter-x cells on which every edge of
+// the logo and of the margin is a line; the margin is tinted; the wordmark's own "x", set in the
+// corner, is the unit.
+import { COLORS, ICON_H, ICON_PATH, ICON_SCALE, ICON_TOP, WORDMARKS, X_HEIGHT } from '../../lib/logo-geometry';
+import { langOf } from '../../lib/i18n';
+import Fig from './Fig.astro';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const L = {
+  en: {
+    alt: 'Clear space. x is the x-height of the wordmark, the height of its letter x. An empty margin of x surrounds the lockup on all four sides.',
+    caption: 'Clear space x = the x-height of the wordmark: the height of its “x”, the same as the lowercase “e” without its round overshoot. It is also one side of the hexagon and half the icon height.',
+  },
+  vi: {
+    alt: 'Vùng trống. x là x-height của wordmark, tức chiều cao chữ x trong wordmark. Lề trống rộng x bao quanh lockup ở cả bốn phía.',
+    caption: 'Vùng trống x = x-height của wordmark: chiều cao chữ “x”, cũng là chiều cao chữ “e” khi bỏ phần nét cong nhô ra. x còn bằng một cạnh lục giác và nửa chiều cao icon.',
+  },
+}[lang];
+
+const FIG_W = 1040;
+const FIG_H = 272;
+const iconPx = 80; // x = 40 px, one grid cell = 10 px
+const s = iconPx / ICON_H;
+const X = X_HEIGHT;
+const cell = X / 4; // a quarter x: 10 px
+const px = (n: number) => n / s;
+// The wordmark's own "x": flat on the baseline and flat on top, so it is exactly x-height tall.
+// Its subpath index in the wordmark (b, e, e, h, e, x, a) and its left and right edges.
+// (Archived 550 option: x1 5686, x2 6713.)
+const X_GLYPH = { x1: 5637, x2: 6648 } as const;
+
+// Grid lines between two edges: the span is cut into equal cells as close as possible to a
+// quarter x, so both edges fall exactly on a line.
+const split = (a: number, b: number) => { const n = Math.max(1, Math.round((b - a) / cell)); return Array.from({ length: n + 1 }, (_, i) => a + ((b - a) * i) / n); };
+// Lines outside the clear space: whole quarter-x cells, counted outwards from its edge.
+const outward = (edge: number, limit: number, dir: 1 | -1) => { const out: number[] = []; for (let v = edge + dir * cell; dir > 0 ? v <= limit : v >= limit; v += dir * cell) out.push(v); return out; };
+
+const diagrams = [WORDMARKS.beehexa].map((word) => {
+  const left = Math.round((FIG_W - word.width * s) / 2);
+  const top = Math.round((FIG_H - iconPx) / 2);
+  const box = { x1: -left / s, y1: ICON_TOP - top / s, x2: (FIG_W - left) / s, y2: ICON_TOP + (FIG_H - top) / s };
+  const ink = { x1: 0, y1: ICON_TOP, x2: word.width, y2: ICON_TOP + ICON_H };
+  const zone = { x1: -X, y1: ICON_TOP - X, x2: word.width + X, y2: ICON_TOP + ICON_H + X };
+
+  // Every edge of the logo and of the clear space is a grid line.
+  const xs = [...outward(zone.x1, box.x1, -1), ...split(zone.x1, ink.x1), ...split(ink.x1, ink.x2), ...split(ink.x2, zone.x2), ...outward(zone.x2, box.x2, 1)];
+  const ys = [...outward(zone.y1, box.y1, -1), ...split(zone.y1, ink.y1), ...split(ink.y1, ink.y2), ...split(ink.y2, zone.y2), ...outward(zone.y2, box.y2, 1)];
+  const grid = [...new Set(xs)].map((x) => `M${x} ${box.y1}V${box.y2}`).concat([...new Set(ys)].map((y) => `M${box.x1} ${y}H${box.x2}`)).join('');
+  // Guides along the edges of the logo and of the clear space, across the whole figure.
+  const guides = [
+    ...[zone.x1, ink.x1, ink.x2, zone.x2].map((x) => `M${x} ${box.y1}V${box.y2}`),
+    ...[zone.y1, ink.y1, ink.y2, zone.y2].map((y) => `M${box.x1} ${y}H${box.x2}`),
+  ].join('');
+  // The unit: the wordmark's "x" in the bottom right corner of the clear space, standing on its
+  // bottom edge, so it fills the margin from edge to edge and is centred in its x-by-x corner.
+  const g = X_GLYPH;
+  const gX = zone.x2 - X / 2 - (g.x1 + g.x2) / 2;
+  return { word, ink, zone, grid, guides, viewBox: `${box.x1} ${box.y1} ${FIG_W / s} ${FIG_H / s}`, glyph: word.d.split(/ (?=M)/)[5], gX, labelX: zone.x2 - X };
+});
+---
+
+<figure class="logo-figure">
+  <div class="logo-stage bg-white clear-stage bleed-stage">
+    {diagrams.map((d) => (
+      <Fig id="clearspace" class={['diagram px-center bleed']} viewBox={d.viewBox} w={FIG_W} h={FIG_H} label={L.alt}>
+        <path fill-rule="evenodd" fill="#2b2a28" fill-opacity=".06" d={`M${d.zone.x1} ${d.zone.y1}H${d.zone.x2}V${d.zone.y2}H${d.zone.x1}Z M${d.ink.x1} ${d.ink.y1}V${d.ink.y2}H${d.ink.x2}V${d.ink.y1}Z`} />
+        {/* lines centred on the edges; 2/3 px is two whole device pixels in the 3× picture */}
+        <path class="d-grid" d={d.grid} stroke-width={px(2 / 3)} style="opacity:.1" />
+        <path class="d-grid" d={d.guides} stroke-width={px(2 / 3)} style="opacity:.32" />
+        <path fill="#d5d4d3" transform={`translate(${d.gX} ${d.zone.y2})`} d={d.glyph} />
+        <text class="d-label" x={d.labelX - px(6)} y={d.zone.y2 - X / 2 + px(4)} font-size={px(12)} text-anchor="end">x =</text>
+        <path fill={COLORS.yellow} fill-rule="evenodd" transform={`translate(0 ${ICON_TOP}) scale(${ICON_SCALE})`} d={ICON_PATH} />
+        <path fill={COLORS.graphite} transform={`translate(${d.word.x} 0)`} d={d.word.d} />
+      </Fig>
+    ))}
+  </div>
+  <figcaption>{L.caption}</figcaption>
+</figure>

package/dist/docs/src/components/logos/LogoColourVersions.astro

@@ -0,0 +1,45 @@
+---
+// The four colour versions, made from three colours: yellow, graphite and white. Each version is
+// shown once, on a background of the same three colours.
+import LogoSvg from './LogoSvg.astro';
+import { langOf } from '../../lib/i18n';
+import type { Version } from '../../lib/logo-geometry';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const Y = '#FCB017', G = '#2B2A28', W = '#FFFFFF';
+type Card = { v: Version; bg: string; title: string; text: string; codes: string[] };
+const cards: Card[] = lang === 'vi'
+  ? [
+      { v: 'light', bg: W, title: '1. Màu', text: 'Bản chính, cho nền sáng. Icon vàng, chữ xám ghi.', codes: [Y, G] },
+      { v: 'dark', bg: G, title: '2. Màu trên nền tối', text: 'Cho nền tối. Icon vàng, chữ trắng.', codes: [Y, W] },
+      { v: 'white', bg: G, title: '3. Trắng', text: 'Cho ảnh và nền màu đậm, nơi màu vàng bị chìm hoặc chọi màu.', codes: [W] },
+      { v: 'graphite', bg: Y, title: '4. Xám ghi', text: 'Cho nền vàng và khi chỉ in được một màu: in một màu, khắc, đóng dấu.', codes: [G] },
+    ]
+  : [
+      { v: 'light', bg: W, title: '1. Colour', text: 'The main version, for light backgrounds. Yellow icon, graphite text.', codes: [Y, G] },
+      { v: 'dark', bg: G, title: '2. Colour on dark', text: 'For dark backgrounds. Yellow icon, white text.', codes: [Y, W] },
+      { v: 'white', bg: G, title: '3. White', text: 'For photos and strong colours, where the yellow would sink or clash.', codes: [W] },
+      { v: 'graphite', bg: Y, title: '4. Graphite', text: 'For yellow backgrounds and one-colour work: one-colour print, engraving, stamps.', codes: [G] },
+    ];
+const names: Record<string, string> = lang === 'vi'
+  ? { [Y]: 'Vàng', [G]: 'Xám ghi', [W]: 'Trắng' }
+  : { [Y]: 'Yellow', [G]: 'Graphite', [W]: 'White' };
+---
+
+<div class="logo-cards versions">
+  {cards.map((c) => (
+    <div class="logo-card">
+      <div class="logo-stage version-stage" style={`background:${c.bg}`}>
+        <LogoSvg version={c.v} iconPx={32} class="px-center" label="" />
+      </div>
+      <div class="logo-card-body">
+        <p class="card-title">{c.title}</p>
+        <p>{c.text}</p>
+        <p class="card-codes">
+          {c.codes.map((hex) => <span><i style={`background:${hex}`} />{names[hex]} <code>{hex}</code></span>)}
+        </p>
+      </div>
+    </div>
+  ))}
+</div>

package/dist/docs/src/components/logos/LogoConstruction.astro

@@ -0,0 +1,84 @@
+---
+// The icon on its construction grid: an equilateral triangle grid, 28 bands across the icon.
+// Drawn in the icon's own units (259.8 × 300).
+import { COLORS, ICON_PATH } from '../../lib/logo-geometry';
+import Fig from './Fig.astro';
+import { langOf } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const L = {
+  en: {
+    alt: 'The icon drawn on a triangle grid of 28 bands. Strokes and white gaps are each 3 bands; the top face is 20 bands wide.',
+    n28: '28 bands', n20: '20 bands', n3: '3 bands',
+    legend: [
+      ['Grid', 'Equilateral triangles. 1 band = icon width ÷ 28; 1 triangle side = 1.155 bands.'],
+      ['Hexagon', 'Regular, pointy top. Height = 28 triangle sides; every edge is at 30° or vertical.'],
+      ['Stroke and gap', 'Both 3 bands (1 : 1), so the layers stay apart at 16 px.'],
+      ['Top face', '20 bands wide, 71% of the icon. White areas are 40% of the icon.'],
+    ],
+  },
+  vi: {
+    alt: 'Icon dựng trên lưới tam giác 28 dải. Nét vàng và khe trắng đều 3 dải; mặt trên rộng 20 dải.',
+    n28: '28 dải', n20: '20 dải', n3: '3 dải',
+    legend: [
+      ['Lưới', 'Tam giác đều. 1 dải = bề rộng icon ÷ 28; 1 cạnh tam giác = 1.155 dải.'],
+      ['Lục giác', 'Lục giác đều, đỉnh nhọn. Cao = 28 cạnh tam giác; mọi cạnh nghiêng 30° hoặc thẳng đứng.'],
+      ['Nét và khe', 'Cùng 3 dải (1 : 1), nên ba lớp vẫn tách nhau ở 16 px.'],
+      ['Mặt trên', 'Rộng 20 dải, bằng 71% icon. Phần trắng chiếm 40% icon.'],
+    ],
+  },
+}[lang];
+
+const W = 259.8;
+const H = 300;
+const h = W / 28; // one band
+const a = h / Math.cos(Math.PI / 6); // one triangle side
+const t = Math.tan(Math.PI / 6);
+const px = 300; // icon height on screen
+const s = px / H;
+const m = 44 / s; // margin for labels
+const fs = 12 / s;
+const sw = 1 / s;
+
+// Grid lines, cut to the icon's box here rather than with a clip path.
+const lines: string[] = [];
+for (let k = 0; k <= 28; k++) lines.push(`M${k * h} 0V${H}`);
+const cut = (slope: number, c: number) => {
+  // y = slope * x + c, inside 0 ≤ x ≤ W and 0 ≤ y ≤ H
+  const xs = [0, W, (0 - c) / slope, (H - c) / slope].filter((x) => x >= -1e-6 && x <= W + 1e-6);
+  const pts = xs.map((x) => [x, slope * x + c]).filter(([, y]) => y >= -1e-6 && y <= H + 1e-6).sort((p, q) => p[0] - q[0]);
+  if (pts.length < 2) return;
+  const [p1, p2] = [pts[0], pts[pts.length - 1]];
+  if (Math.hypot(p2[0] - p1[0], p2[1] - p1[1]) > 0.5) lines.push(`M${p1[0]} ${p1[1]}L${p2[0]} ${p2[1]}`);
+};
+for (let n = -14; n <= 28; n++) cut(t, n * a);
+for (let n = 0; n <= 42; n++) cut(-t, n * a);
+
+const w = Math.round((W + 2 * m) * s);
+const hh = Math.round((H + 2 * m) * s);
+// Measures: the top face is 20 bands wide; the outline stroke is 3 bands.
+const face = { x1: 37.1, x2: 222.7, y: 85.7 };
+---
+
+<figure class="logo-figure">
+  <div class="logo-stage bg-white construction-stage">
+    <Fig id={`construction-${lang}`} class="diagram px-center" viewBox={`${-m} ${-m} ${w / s} ${hh / s}`} w={w} h={hh} label={L.alt}>
+      <path fill={COLORS.yellow} fill-rule="evenodd" d={ICON_PATH} opacity=".9" />
+      <path class="d-grid" d={lines.join('')} stroke-width={sw} />
+      <rect class="d-guide" x="0" y="0" width={W} height={H} stroke-width={sw} stroke-dasharray={`${3 / s} ${3 / s}`} />
+      <g class="d-measure" stroke-width={1.5 * sw}>
+        <path d={`M${face.x1} ${face.y - 4 / s}V${face.y + 4 / s}M${face.x1} ${face.y}H${face.x2}M${face.x2} ${face.y - 4 / s}V${face.y + 4 / s}`} />
+        <path d={`M0 ${-16 / s}V${-8 / s}M0 ${-12 / s}H${W}M${W} ${-16 / s}V${-8 / s}`} />
+        <path d={`M${3 * h} ${H + 8 / s}V${H + 16 / s}M0 ${H + 12 / s}H${3 * h}M0 ${H + 8 / s}V${H + 16 / s}`} />
+      </g>
+      <text class="d-label" x={W / 2} y={-20 / s} font-size={fs} text-anchor="middle">{L.n28}</text>
+      <text class="d-label" x={W / 2} y={face.y - 8 / s} font-size={fs} text-anchor="middle">{L.n20}</text>
+      <text class="d-label" x={3 * h + 6 / s} y={H + 16 / s} font-size={fs}>{L.n3}</text>
+    </Fig>
+  </div>
+</figure>
+
+<ul class="diagram-legend" style="--cols:4">
+  {L.legend.map(([title, text]) => <li><b>{title}</b>{text}</li>)}
+</ul>