From 1742250fd017fd33528c626642e0300e982f6543 Mon Sep 17 00:00:00 2001 From: "Ricardo Q. Bazan" Date: Sat, 17 Oct 2026 15:23:45 -0500 Subject: [PATCH] docs: give the Copy and Copied icons their geometry here The brand guideline keeps the rules for drawing a UI icon and no longer lists icons, so design.md carries the geometry of the two icons the Install command box uses, matching src/components/Icon.astro. The render doesn't change. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01An6o9bF4mjtTFxdLfPtsqa --- docs/design.md | 11 ++++++++++- src/components/Icon.astro | 5 +++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/design.md b/docs/design.md index 1eb1322..5ce456a 100644 --- a/docs/design.md +++ b/docs/design.md @@ -177,7 +177,7 @@ The Index is read, not browsed: a list under the house's own sentence, not a gri | Published as | `meta` | `dim`, an App's Executable `ink`, a Library's Package `ink`; the Package is an underlined link at a 3px offset | | | Links | `small`, each an underlined link at a 3px offset | `dim`; underline `dim` on hover | A column, `gap: 4px` | | Install command box | `label` at line height 1.5, the Command colored by token ([content-model.md](content-model.md#command)), one line | `surface` background, 1px `rule` border, `rule-strong` on hover | `min-height: 44px`, `padding: 10px 12px`, full width of its column, the Command on the left and the icon on the right, 10px apart | -| Copy, Copied icon | The skill's UI icons, at their size | `dim`, `ink` while the box is hovered | | +| Copy, Copied icon | UI icons, drawn as [Copy and Copied icons](#copy-and-copied-icons) gives | `dim`, `ink` while the box is hovered | 14px | | Example | | `surface` background, 1px `rule` border | `margin-top: 32px`, 12px in one column | | Snippet header | `meta` | The name in the syntax `keyword` color, the language label in the syntax `comment` color | The name on the left and the label on the right (`space-between`, baseline, `gap: 16px`), `padding: 10px 16px`, a 1px `rule` below; a later Snippet's header also has one above | | Snippet code | `code` | `ink`, colored by token with the syntax palette | `padding: 18px 16px 20px`; a File snippet has no left padding, because its line numbers take it | @@ -197,6 +197,15 @@ Snippet code follows the text flow in the skill's `typography.md`; in a Terminal The Install command fits its box on one line. `text-overflow: ellipsis` is a last resort: when a Command doesn't fit, adjust the box or the type instead. +### Copy and Copied icons + +The two icons of the Install command box (rule 6). Each is drawn on `viewBox 0 0 16 16` by the stroke rules for UI icons in the skill's `iconography.md`. + +| Icon | Use | Geometry | +| --- | --- | --- | +| Copy | Copies the Install command. | `` and `` | +| Copied | Replaces Copy for 1.2 s after a copy. | `` | + ## og:image 1200×630, PNG, one per page. Each is generated from its page's content, with the same fonts and Signs as the pages, never drawn by hand. It only changes when the content changes, so cache it. diff --git a/src/components/Icon.astro b/src/components/Icon.astro index b7c0fe4..0492c0b 100644 --- a/src/components/Icon.astro +++ b/src/components/Icon.astro @@ -1,6 +1,7 @@ --- -// A UI icon, with the geometry and stroke rules of the skill's iconography.md: 16×16, shown at 14px, -// outlined in currentColor, aria-hidden. The control that holds it carries the accessible name. +// A UI icon, with the geometry of docs/design.md#copy-and-copied-icons and the stroke rules of the skill's +// iconography.md: 16×16, shown at 14px, outlined in currentColor, aria-hidden. The control that holds it +// carries the accessible name. import type { HTMLAttributes } from "astro/types"; interface Props extends HTMLAttributes<"svg"> {