clio.css 0.2.0 → 0.9.0

package/AGENTS.md

@@ -23,13 +23,29 @@ For AI coding agents using or changing this repository.
   honest status: `measured` only when read from real pixels of the era (name the
   capture), `inferred` when reasoned, `adapted` for web-only changes, `third-party` for
   licensed art or fonts. An unmeasured value is never labelled measured.
-- No Apple bitmaps, icons, logos or fonts, and no art cut from a screenshot. Draw art as
-  CSS or small SVGs (see `tooling/tab-art.py` for a drawn-from-measurement example).
+- No Apple fonts, logos or icon files, and never ship a screenshot or a crop of one.
+  Control art (arrows, boxes, lamps, tabs) may be a pixel-level reconstruction: an SVG
+  or palette PNG redrawn from measured pixels by a script in `tooling/` (see
+  `tooling/s6-art.py`, `tooling/tab-art.py`, `tooling/db-art.py`). Name the capture or
+  resource it was measured from in its evidence row. Large textures and illustrations
+  (Drawing Board's paper and sketch lines) are not reproduced: use the dominant measured
+  colour and label it `adapted`.
   Third-party art needs a licence entry in `THIRD-PARTY.md`.
-- Tokens live on `:root, [data-era="system6"]` (01-tokens.css) and
-  `[data-era="platinum"]` (90-platinum.css). A token that reads another token is
+- Scope (owner decision, 2026-11-13): eras that can be measured in an emulator —
+  System 6, System 7, Drawing Board (Mac OS 8.5b6, as "System 8"), Platinum (as
+  "System 9"), Mac OS X 10.0–10.4 (Aqua to Tiger), NeXTSTEP. Order: Aqua next. clio.css
+  feeds back into AI System 6, so AI System 6's own chrome (Control Strip, …) is in scope
+  with its markup (owner, 2026-11-14). Launch posts (awesome lists, Show HN) wait for Aqua.
+- Tokens live on `:root, [data-era="system6"]` (01-tokens.css),
+  `[data-era="system7"]` (80-system7.css), `:is([data-era="platinum"],
+  [data-era="drawingboard"])` (90-platinum.css, shared: both are Appearance Manager
+  themes) and `[data-era="drawingboard"]` (92-drawingboard.css, which overrides). A token that reads another token is
   resolved where it is declared, so an era that changes `--clio-paper` must re-declare
   every token built from it.
 - Motion: none today. If added, animate `transform`/`opacity` only and honour
   `prefers-reduced-motion`.
+- Clio Sans '84, Clio Text '84 and Clio Sans '97 are generated: edit `fonts-src/*.txt`
+  (or re-extract with `npm run capture:keycaps [-- geneva|geneva9|charcoal]` then
+  `npm run build:font`, which needs Python with fontTools and brotli), never the WOFF2 by
+  hand. Clio Sans '97 (Charcoal 12) comes from Mac OS 9.0's Key Caps, whose bar is 2px.
 - Keep `dist/clio.min.css` under the size budget in `test/check.mjs`.

package/EVIDENCE.md

@@ -2,19 +2,22 @@
 
 Generated from `components/index.mjs` by `npm run build`; edit there.
 
-Every value in clio.css 0.2.0 has a row here. Sources are paths in the AI System 6 development tree at commit `b75cd4ed` (public mirror: https://github.com/surfine/AI-System-6; some evidence folders such as `internal/` are private). The images measurements were taken from are evidence only; clio.css never ships them.
+Every value in clio.css 0.9.0 has a row here. Sources are paths in the AI System 6 development tree at commit `b75cd4ed` (public mirror: https://github.com/surfine/AI-System-6; some evidence folders such as `internal/` are private). The images measurements were taken from are evidence only; clio.css never ships them.
 
 | Status | Meaning | Rows |
 | --- | --- | ---: |
-| Measured | read from real pixels of the era | 50 |
-| Inferred | reasoned from documentation or behaviour, not measured | 13 |
-| Adapted | a deliberate departure for the web (touch, focus, contrast) | 8 |
-| Third-party | art or font from a named, licensed project | 6 |
+| Measured | read from real pixels of the era | 118 |
+| Inferred | reasoned from documentation or behaviour, not measured | 8 |
+| Adapted | a deliberate departure for the web (touch, focus, contrast) | 9 |
+| Third-party | art or font from a named, licensed project | 2 |
 
 Pixel check: `npm run fidelity` renders the Platinum specimens and compares them with AI System 6's GUIdebook Mac OS 9.0 reference crops (it needs a local AI System 6 checkout; see the script).
 
 | Component | Era | Value | Status | Source — upstream evidence |
 | --- | --- | --- | --- | --- |
+| Window | System 7 | Title bar: System 6's rows on #eee with six #777 stripes, #ccf light on the top and left inside edges and #99c shade on the bottom and right (the shade owns the corners) | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame hd-window` — 99.1% identical; agrees with AI System 6 internal/evidence/drafts/system-7-reference |
+| Window | System 7 | Close and zoom boxes: 11px, sunk #336/#ccf outer ring, raised #ccf/#336 inner ring, #aaa centre, 1px #eee gap; zoom adds a 5px #336 square; held: black square, #99c face and the starburst | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frames hd-window, held-close, held-zoom` — System 7.5.3 Finder window Infinite HD |
+| Window | System 7 | Background window: #555 frame, plain white title bar, #888 title, black drop shadow | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window` — 99.98% identical |
 | Window | System 6 | Title bar: 19 rows from the frame to the rule; 3 rows of paper, six 1px ink stripes on a 2px period, 3 rows of paper, the 1px rule | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window rows 27–45` — agrees with AI System 6 apps/desktop/styles/00-foundation.css:906 (emulator, 2x) |
 | Window | System 6 | Close and zoom boxes: 11px squares on the stripe band, 8px in from each inner edge, with 1px of paper between box and stripes (AI System 6 uses 3px) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window` — System 6.0.8 Finder window Macintosh HD |
 | Window | System 6 | Title cut-out: about 6px of paper either side of the name (7px left, 5px right including the glyph's side bearing) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window` — System 6.0.8 Finder window |
@@ -29,66 +32,123 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Window | Platinum | Boxes: 11px, #222 frame, #999 to white gradient, #888 bevel above-left and white below-right; pressed #444 to #bbb | Measured | `apps/desktop/styles/65-appearance-themes.css:1820` — GUIdebook Mac OS 9.0 captures |
 | Window | Platinum | Zoom mark: a six-pixel lower-left corner; WindowShade mark: two nine-pixel rules at y=4 and y=6 | Measured | `apps/desktop/styles/65-platinum-utility.css:725, :738` — GUIdebook Mac OS 9, 1x pixels |
 | Window | Platinum | Background window: #555 frame and drop, flat controls, #777 title, boxes erased | Measured | `apps/desktop/styles/65-appearance-themes.css:1757 (N1, P26)` — Mac OS 9 native capture 53; GUIdebook active/inactive |
+| Window | Drawing Board | Window frame: the theme's nine Doc Window pictures (6176-6184, active and inactive) round the outline, placed as Mac OS 8.5 places them, the edges tiled from their ends; content on the window paper (ppat 7120) from the content's top-left; the frame is 6px inside the outline on each side | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames date-time and appearance; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — every piece found 1:1 round the Appearance and Date & Time windows; paper origin agrees in Date & Time and Finder Preferences |
+| Window | Drawing Board | Title bar: 20px on the frame colour then the #555 rule; close and collapse boxes 11px, 4px below the bar's top, flush with the content line | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance` — close box 1:1 at (166,73), collapse box 1:1 at (621,73) |
+| Window | Drawing Board | Close, zoom and collapse box art, normal and held | Measured | `the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — WindowLargeCloseBox, WindowLargeZoom, WindowLargeCollapse; each found 1:1 in the capture |
+| Window | Drawing Board | Mac OS sometimes starts a 128px pattern half a tile (64px) earlier, depending on where the window or control sits on screen (the Appearance window, the File menu, the Energy Saver alert, the first Date & Time field, the Themes list's scroll bar); clio.css starts it at the element and offers --clio-db-phase: 64px to match a given screen | Adapted | `clio.css` — the rule behind the shift was not found from these captures |
+| Menu bar and menus | System 7 | Menus keep System 6's rows and black highlight; disabled items and the separator are solid #888 instead of a dither | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame file-menu` — separator row 100% identical |
 | Menu bar and menus | System 6 | Menu bar: 20 rows with the rule on the last; an open title inverts rows 1–18, about 9px either side of the word | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
-| Menu bar and menus | System 6 | Menu: hangs from the bar's rule with no top line; 1px ink frame and 1px drop shadow; 16px rows; text 15px in; the highlighted row inverts | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
+| Menu bar and menus | System 6 | Menu: hangs from the bar's rule with no top line; 1px ink frame and 1px drop shadow; 16px rows; text 13px in; the highlighted row inverts | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
 | Menu bar and menus | System 6 | Separator: a full 16px row with a 1-on 1-off dotted rule on its ninth line | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu rows 164–179` — System 6.0.8 Finder File menu |
 | Menu bar and menus | System 6 | Check mark: the Chicago check glyph, 9×8, 3px in from the frame | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), Apple menu Finder item` — redrawn as pixels in tooling/s6-art.py |
-| Menu bar and menus | System 6 | Disabled items are drawn through a 50% grey dither; clio.css uses solid #696969 | Adapted | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — a dither blurs under browser scaling; solid grey keeps 5.6:1 |
+| Menu bar and menus | System 6 | Disabled items are drawn through QuickDraw's 50% gray pattern, aligned to the screen (ink kept where x + y is odd); clio.css clips the same 2px pattern, fixed to the viewport, to the text (solid #696969 only where background-clip: text is missing) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — "Print" 100% identical (s6-menu-disabled); set --clio-disabled-dither: none for solid #696969 |
 | Menu bar and menus | Platinum | Menu bar: #ddd, white top line, #999 bottom line, 1px black rule, 20px; open title #333399 with #6666cc/#000088 lines | Measured | `apps/desktop/styles/65-appearance-themes.css:298, :45` — Mac OS 9 native menu bar captures 02/04 |
 | Menu bar and menus | Platinum | Menu: no top rule, white/#999 inner bevel, #222 1px drop; 16px rows at weight 600; highlight #333399 with #6666cc/#000088 side columns | Measured | `apps/desktop/styles/65-appearance-themes.css:912 (P21), :917 (P24)` — GUIdebook Mac OS 9.0 Apple menu (Theme Lab specimen apple-menu) |
-| Menu bar and menus | Platinum | Separator: #888 over white, in an 8px row | Inferred | `apps/desktop/styles/65-appearance-themes.css (separator #888/white)` — the line pair is measured; the 8px row height is not |
-| Menu bar and menus | Platinum | Check mark and submenu arrow art | Third-party | `classic-stylesheets macos9/checkmark.svg, menu-right.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
+| Menu bar and menus | Platinum | Separator: a 6px row with #888 on its third line and white on its fourth, the full width of the menu | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame file-menu` — between Close Window and Get Info |
+| Menu bar and menus | Platinum | Menu check mark (9x8, antialiased, recovered from the white-on-#339 chosen item) and the 6x11 submenu arrow, redrawn from Mac OS 9.0 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames popup-open and file-menu; tooling/p9-art.py` — replaces the classic-stylesheets art used before 0.8.0 |
+| Menu bar and menus | Drawing Board | Menu bar: the theme's 630x27 picture (pxm 6104) tiled from the screen's left, 22 rows shown; menus: paper (ppat 7125) from the inside top-left in a frame of pattern pens (ppat 129-133) tiled from the menu's corner, a 2px pencil shade, fixed pencil pixels where the pens meet; 18px items; the separator is ppat 133 | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames file-menu, edit-menu and control-panels-menu; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — File, Edit, Apple and Control Panels menus agree |
+| Menu bar and menus | Drawing Board | The chosen menu title and item are underlined in pencil instead of inverted | Measured | `the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — Menu_Title_Underline_Center, Menu_Item_underline_center; the title underline is visible under File in the capture |
+| Menu bar and menus | Drawing Board | Menu item underline: left 16px in, right 15px in, its middle piece tiled (the Appearance pop-up's ends 16px from both sides) | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames control-panels-menu and popup-open` — Energy Saver in the Control Panels menu |
+| Push button | System 7 | Push buttons and the default ring stay black and white, as in System 6 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame page-setup (OK)` — 93.8% identical; a few ring corner pixels differ |
 | Push button | System 6 | Push button: 20px tall, 1px ink round rectangle with corners of about 4px, paper face, Chicago 12 (AI System 6 uses 7px corners) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert, OK button 60×20` — System 6.0.8 stop alert |
-| Push button | System 6 | Pressed: the button inverts to ink with paper text | Inferred | `not captured` — System 6 button tracking |
+| Push button | System 6 | Pressed: the whole button inverts to ink with paper text | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame button-pressed (Cancel held in a TeachText alert)` — System 6.0.8 |
+| Push button | System 6 | Disabled: the frame stays solid ink and the label is drawn through the 50% gray pattern (the menu's pattern, clipped to the label) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame save-dialog (Eject)` — Eject; at fractional zoom the pattern can blur, set --clio-disabled-dither: none for solid grey |
 | Push button | System 6 | Default button: a 1px gap then a 3px ring (68×28 around a 60×20 button) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert` — agrees with Inside Macintosh, Dialog Manager: PenSize(3,3), InsetRect(-4,-4), FrameRoundRect(16,16) |
-| Push button | Both eras | Hover never changes a push button; pressed only on pointer-down, Space or Enter | Inferred | `docs/design/CLASSIC_PLATINUM_FIDELITY.md:210` — a 1987–1999 Mac had no hover state |
+| Push button | System 6 | Hovering over a button changes nothing; only a press inverts it | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames locked-alert and button-hover` — agrees with docs/design/CLASSIC_PLATINUM_FIDELITY.md:210 |
+| Push button | Platinum | Hover never changes a push button; pressed only on pointer-down, Space or Enter | Inferred | `docs/design/CLASSIC_PLATINUM_FIDELITY.md:210` — AI System 6 owner ruling: Platinum carries no hover state |
 | Push button | System 6 | Keyboard focus: a 1px dotted frame 2px out | Adapted | `apps/desktop/styles/00-foundation.css:519` — System 6 had no button focus; a dotted frame cannot be read as the default ring |
 | Push button | Platinum | #ddd face, 1px black border, 3px corners, bevel white/#ddd over #777/#aaa | Measured | `apps/desktop/styles/65-appearance-themes.css:236` — GUIdebook Mac OS 9.0 About dialog (Theme Lab specimen default-ok) |
 | Push button | Platinum | Pressed: #666 face, white text, #444/#555 top-left over #888/#777 bottom-right | Measured | `apps/desktop/styles/65-appearance-themes.css:933 (P29)` — Infinite Mac Mac OS 9.0 capture |
 | Push button | Platinum | Default ring: 1px black, a #aaa band with #ddd/#777 edges, 1px gap | Measured | `apps/desktop/styles/65-platinum-utility.css:773` — GUIdebook Mac OS 9.0 (default-ok specimen) |
 | Push button | Platinum | Disabled: #888 border, flat #ddd, #777 text; the default ring goes #888 | Measured | `apps/desktop/styles/65-appearance-themes.css (N5)` — GUIdebook Open dialog Eject button (button-disabled specimen) |
+| Push button | Drawing Board | Push buttons: four pattern pens (ppat 7070-7072, 7079) tiled so their pixel 0 is on the last column and row, the corner pixels they leave, the hatched ButtonFaceCorner (image 0) flush in the lower right of the #cec6b5 face, and a 1px pencil shade right and below; the label 1px lower than Platinum's | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames themes-tab and energy-saver-alert; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — "Save Theme…" and "Specify Settings" agree |
+| Push button | Drawing Board | Default button: a 3px band of pattern pens (ppat 7085 rows, 7086 columns) whose inner line is the box's edge, plus its corner pixels | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame energy-saver-alert; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — "Close Message" |
+| Push button | Drawing Board | Held buttons lose the hatch; the foot and right side take other pens (ppat 7126, 7127) tiled from the second column and row | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame button-held; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — "Save Theme…" held |
+| Push button | Drawing Board | Disabled buttons: #8c8c8c label on the same face | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame date-time` — "Server Options…" |
+| Push button | Drawing Board | The pencil overruns at a button's corners: ButtonTopLeft, ButtonTopRight, Button_BotRight, ButtonBotLeft round a plain button and the four *Default pieces round the default one, drawn outside the box | Measured | `the theme's pxm# pixmaps (tooling/db-art.py); positions from frames themes-tab and energy-saver-alert` — each piece found 1:1 round "Save Theme…" and "Close Message" |
+| Check box | System 7 | Identical to System 6: 12px, X when checked | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame general-controls` — 100% identical, on and off |
 | Check box | System 6 | A 12px box with a 1px frame; held, the frame thickens to 2px | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame get-info (Locked)` — AI System 6 uses 13px |
-| Check box | System 6 | Checked draws an X from corner to corner | Inferred | `not captured (the Locked box was unchecked)` — System 6 check box |
+| Check box | System 6 | Checked draws an X from corner to corner of the box | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame get-info-checked (Locked)` — the art is system.css's checkmark.svg (MIT), which matches |
 | Check box | System 6 | X art | Third-party | `apps/desktop/assets/themes/classic/controls/checkmark.svg` — system.css icon/checkmark.svg (MIT, Sakun Acharige) |
 | Check box | Platinum | 12px #ddd well, 1px black frame, white top-left and #888 bottom-right bevel | Measured | `apps/desktop/styles/65-appearance-themes.css:897 (P18)` — GUIdebook Mac OS 9.0 Appearance Options tab (checkbox specimens) |
-| Check box | Platinum | Check mark art | Third-party | `classic-stylesheets macos9/checkmark.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
+| Check box | Platinum | Check mark: Mac OS 9's grey-shaded mark inside the frame, overhanging its right edge by two pixels | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame general-controls; redrawn by tooling/p9-art.py` — Show Desktop when in background; 96.4% identical (the frame 98.6%) |
+| Check box | Drawing Board | Check box: the theme's 14x11 pictures; image 0 off, 1 on, 3 mixed, 4/5 pressed, 8/9 disabled | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames general-controls and date-time; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — off, on and disabled found 1:1 (Show Desktop, Show Launcher, Daylight-Saving Time is in effect) |
+| Radio button | System 7 | Identical to System 6 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame general-controls` — 100% identical, on and off |
 | Radio button | System 6 | 12px ring and 6px dot: the real pixels match system.css's art exactly | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel (Rate of Insertion Point Blinking)` — art from system.css icon/radio-border.svg, radio-dot.svg (MIT, Sakun Acharige) |
-| Radio button | Platinum | Radio drawn with CSS gradients: black ring, white to #888 well, 6px black dot | Adapted | `apps/desktop/styles/65-appearance-themes.css:291` — AI System 6 later replaced this with art cut from a capture (P19); clio.css ships no cut art |
+| Radio button | Platinum | Radio button: Mac OS 9's shaded 12px ball, off and on; the held states are still drawn with CSS gradients | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame general-controls; redrawn by tooling/p9-art.py` — Documents group; off and on 100% identical |
+| Radio button | Drawing Board | Radio button: the theme's 16x12 pictures; image 0 off, 1 on, 2 pressed, 3/4 disabled | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames general-controls and date-time; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — off and on found 1:1 (Documents, Menu Bar Clock) |
+| Text field | System 7 | As System 6: a 1px black frame with the text 3px in | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame numbers (Currency Symbol)` — System 7.5.3 |
 | Text field | System 6 | 1px ink frame, white, text inset 3px | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel (RAM Cache field), get-info (comments)` — System 6.0.8 |
 | Text field | Platinum | White field, 1px black frame, #888 shadow above-left and white etch below-right | Measured | `apps/desktop/styles/65-appearance-themes.css:935 (P30)` — Infinite Mac Mac OS 9.0 capture |
 | Text field | Platinum | Focus: a 2px #6666cc ring | Measured | `apps/desktop/styles/65-platinum-utility.css:38` — Mac OS 9 capture platinum-native/10b-fonts-tab |
-| Pop-up menu | System 6 | A box with a 1px drop shadow | Inferred | `not measured` — System 6 pop-up menu CDEF |
-| Pop-up menu | System 6 | The down triangle | Adapted | `drawn for clio.css` — a System 7 convention, kept so the control reads as a menu |
+| Text field | Drawing Board | Edit text: a 1px line of pattern pens (ppat 7003-7006), the rows tiled from the white's left edge, the left column from its top and the right column from 1px higher; 1px of whatever is behind inside it, then white | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame date-time; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — both Date & Time fields agree |
+| Pop-up menu | System 7 | An 18px box with an 11×6 black triangle 5px from the right edge, label 15px in, and a 1px shadow that starts 3px in from the corner | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame numbers (Number Format)` — 100% identical; the triangle is System 7's addition |
+| Pop-up menu | System 6 | An 18px rectangle with a 1px frame and a 1px drop shadow and no arrow; the shadow is what marks it as a menu; held, it inverts | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames save-dialog and popup-held (Standard File folder menu)` — the down triangle arrived with System 7 |
 | Pop-up menu | Platinum | #ddd, 3px corners, white/#aaa bevel, bold label, a separate bevelled arrow part with the 7x10 arrow | Measured | `apps/desktop/styles/65-appearance-themes.css:1916 (P31)` — GUIdebook Mac OS 9.0 (popup-normal specimen), native 09b |
-| Pop-up menu | Platinum | The arrow part is drawn with background layers, approximating the measured bevel | Inferred | `clio.css` — select has no ::after in CSS |
-| Pop-up menu | Platinum | Arrow art | Third-party | `classic-stylesheets macos9/dropdown.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
-| List box | System 6 | White list, 1px ink frame, 16px rows, selection inverts | Inferred | `not measured` — System 6 Standard File dialog |
+| Pop-up menu | Platinum | The arrow part, drawn with background layers: a #aaa divider 20px from the right, a raised box with a white left and top edge and a #aaa then #777 shade, the arrows 7px from the right and 4px down; the field has a white top line and #aaa foot | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame appearance-tab` — "Apple platinum" pop-up, 96.7% identical (p9-popup-end) |
+| Pop-up menu | Platinum | Arrow art (7x10), black, and #888 when disabled | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames appearance-tab and appearance; tooling/p9-art.py` — replaces classic-stylesheets dropdown.svg |
+| Pop-up menu | Drawing Board | Pop-up menu: 20px, four pattern pens (ppat 7095-7098; disabled: their other rows) tiled from the last column and row, the corner pixels they leave, #cec6b5 face; the 7x9 double arrow 5px from the right and 4px down; the hatched ButtonFaceCorner (image 2, disabled image 3) ends 19px from the right | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — Appearance, Highlight Color and Variation pop-ups |
+| List box | System 7 | As System 6: a selected row inverts across the list | Inferred | `seen in the Keyboard control panel during capture; not pixel-checked` — System 7.5.3 |
+| List box | System 6 | White list, 1px ink frame, 16px rows; a selected row inverts across the whole list width | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames save-dialog and list-selected (Standard File)` — System 6.0.8 TeachText Save As |
 | List box | Platinum | Selection is lavender #ccccff with black text | Measured | `apps/desktop/styles/65-appearance-themes.css:128` — GUIdebook Mac OS 9.0 Open dialog (open-list-scrollbar specimen) |
 | List box | Platinum | Rows carry no divider | Measured | `apps/desktop/styles/65-appearance-themes.css:860 (P10)` — Mac OS 9 native list capture 21 |
+| List box | Drawing Board | List boxes: a 2px olive #9c9c63 line, 1px of whatever is behind inside it (the pane's paper), white rows, the chosen row #ccf with black text | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame desktop-tab` — pattern list, lower-left corner |
+| Scroll bar | System 7 | Arrow boxes and grow box redrawn from the captured pixels (#ddd face, white light, #777 shade, #99c arrows outlined #336) | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window → tooling/s7-art.py` — 100% identical |
+| Scroll bar | System 7 | Lane: ltGray pattern in #ddd and #777; scroll box #aaa with #ccf/#336 bevel, a #555 leading edge and a 6×10 grip 3px from it | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window` — the real box is a fixed 16 rows; the browser sizes it to the content, so only its first 16 rows match |
 | Scroll bar | System 6 | Lane: a 1px line and 14px inside; the window frame closes it, so the bar is 15px in CSS | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — AI System 6 uses a 16px lane |
 | Scroll bar | System 6 | Active lane pattern is QuickDraw's ltGray (one dot in four, rows offset by two), not 50% grey; an empty lane is white | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames system-folder and hd-window` — AI System 6 draws a 50% checker |
 | Scroll bar | System 6 | Scroll box: a white square with a 1px frame filling the lane, 16 rows tall | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — System 6.0.8 Finder list view |
 | Scroll bar | System 6 | Up and down arrows: hollow, 13 wide and 11 tall in the 14px box, a 45° head and a 7px stem | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames hd-window and system-folder` — redrawn as pixels in tooling/s6-art.py |
-| Scroll bar | System 6 | Left and right arrows are the up and down arrows turned | Inferred | `tooling/s6-art.py` — the horizontal arrows were captured only partly |
+| Scroll bar | System 6 | Left and right arrows: the up arrow turned, apex in the box's first column, tip in its last | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window (horizontal scroll bar)` — redrawn as pixels in tooling/s6-art.py |
 | Scroll bar | System 6 | Grow box: a 7×7 square over a 9×9 square in the 14px corner | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — redrawn as pixels in tooling/s6-art.py |
-| Scroll bar | Both eras | The scroll box grows with the visible fraction instead of a fixed 16px square | Adapted | `clio.css` — browsers size ::-webkit-scrollbar-thumb themselves |
+| Scroll bar | All eras | The scroll box grows with the visible fraction instead of a fixed 16px square | Adapted | `clio.css` — browsers size ::-webkit-scrollbar-thumb themselves |
 | Scroll bar | Platinum | Lane #aaa with a double bevel; lavender #9999ff scroll box with #ccf/#66c bevel and grip ridges; #ddd arrow boxes with stepped 2/4/6/8 arrows | Measured | `apps/desktop/styles/65-appearance-themes.css:336 (P16), :351 (P17), :364 (P27)` — Mac OS 9 native capture 16; GUIdebook Open dialog |
+| Scroll bar | Drawing Board | Scroll arrows: the theme's 16x16 boxes, normal, held and disabled, flush with the bar; the grow box is NoGrowBoxRight | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame themes-tab; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — left and right arrows found 1:1 at (192,297) and (570,297) |
+| Scroll bar | Drawing Board | Track: #ece6e4 ruled by pattern pens (ppat 7045-7049: the edges and a double centre line) tiled from the track's start; scroll box from the theme's ends, stretch and grip, whose colours Mac OS passes through 16 bits (5 per channel) | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames themes-tab and desktop-tab; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — the Themes list's horizontal bar and the pattern list's vertical bar |
+| Dialogs and alerts | System 7 | Alert frame: 1px black, a raised #ccf/#669 ring, #bbb, a sunken #669/#ccf ring, 1px black (5px, as in System 6) | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame page-setup` — 100% identical. An alert without a colour table keeps System 6's black frame (Monitors & Sound alert); clio.css draws the colour one |
 | Dialogs and alerts | System 6 | Modal frame: 1px ink, 2px paper, 2px ink, and no drop shadow | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert` — AI System 6 has two recipes, both off (84-clio-write.css:210 has a 1px gap) |
-| Dialogs and alerts | System 6 | Plain box: 1px ink frame and a 2px drop shadow | Inferred | `not measured` — altDBoxProc |
-| Dialogs and alerts | Both eras | The alert icon is drawn here, not Apple's | Adapted | `clio.css` — no Apple icons are shipped |
+| Dialogs and alerts | System 6 | Plain box: 1px ink frame and a 2px drop shadow | Inferred | `not measured` — altDBoxProc; none of the 6.0.8 Finder and TeachText dialogs opened for capture (alerts, Standard File, About the Finder) uses it |
+| Dialogs and alerts | All eras | The alert icon is drawn here, not Apple's | Adapted | `clio.css` — no Apple icons are shipped |
 | Dialogs and alerts | Platinum | 1px black frame over #ddd, inner bevel of three white steps inside #555/#999/#aaa, 1px black drop | Measured | `apps/desktop/styles/65-appearance-themes.css:840 (P06)` — GUIdebook Mac OS 9.0 About application (about-alert specimen) |
-| Group box | System 6 | 1px ink frame with the legend on paper | Inferred | `not measured` — System 6 control panels |
+| Dialogs and alerts | Drawing Board | Alerts: the theme's eight Alert pictures (6127-6134) round the outline, edges tiled from their ends, on the window paper from 4px inside | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame energy-saver-alert; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — every piece found 1:1 round Energy Saver's start-up notice |
+| Dialogs and alerts | Drawing Board | Movable modal dialogs (.modeless-dialog, which is a .window) draw the document window's frame: #222 outline, 4px #cdc6bd frame, #777 inner line, 20px title bar over a #555 rule, the #777 band right and below | Measured | `clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame copy-progress-5` — Finder copy window; Movable_Modal pixmaps found 1:1 |
+| Dialogs and alerts | Drawing Board | Modal dialogs: the Modal pictures (6135-6142), which have the alert's sizes, placed the same way | Inferred | `the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py` — no modal dialog was on screen in the captures |
+| Group box | System 7 | Native group box: a 1px grey line with the legend on it; the original alternates #777 and #888, drawn #777 here | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frames general-controls and numbers` — System 7.5.3 control panels |
+| Group box | System 6 | System 6 had no group box; clio.css draws a 1px ink frame with the legend on paper | Adapted | `clio.css` — Control Panel divides its panes with plain 1px rules (clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel) |
 | Group box | Platinum | Etched: #888 line with a white line inside and below | Measured | `apps/desktop/styles/65-appearance-themes.css:909 (P20)` — Mac OS 9 native group box |
-| Progress bar | System 6 | 1px ink frame, ink fill | Inferred | `not measured` — System 6 Finder copy progress |
+| Group box | Drawing Board | Group boxes: a 1px #777 line (#888 on the bottom and right edge), no bevel | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame general-controls` — Desktop group |
+| Progress bar | System 7 | 11px, 1px black frame, #ccf track, #444 fill | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame copy-progress` — 100% identical |
+| Progress bar | System 6 | 12px tall, 1px ink frame, white track, fill in QuickDraw dkGray (one white dot in four) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame copy-progress (Finder duplicating System Folder)` — redrawn as a pattern tile in tooling/s6-art.py |
 | Progress bar | Platinum | Barber-pole fill: ten 1px hard stops from #333399 through #eee to #000055 | Measured | `apps/desktop/styles/65-appearance-themes.css:937 (P32)` — Mac OS 9 native progress bar |
-| Progress bar | Platinum | #bbb track with white/#aaa outer and #888/#ddd inner bevel | Inferred | `apps/desktop/styles/65-appearance-themes.css:592` — AI System 6 token, not tagged as measured |
+| Progress bar | Platinum | Frame: 1px black, #aaa outside on the top and left and white on the bottom and right, 10px inside; an indeterminate bar repeats a 16px period of blue and grey stripes | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame copy-progress-5; tooling/p9-art.py` — Finder copy window, Preparing to copy… |
+| Progress bar | Platinum | The unfilled track, #bbb with an #888/#ddd inner bevel | Inferred | `apps/desktop/styles/65-appearance-themes.css:592` — AI System 6 token, not tagged as measured |
+| Progress bar | Drawing Board | 12px, a #756f66 pencil line with #333 on the left, #ddd6c5 inside; indeterminate bars carry the theme's Indeterminate_Progress_Arrows | Measured | `clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame copy-progress-5; the theme's pxm#` — Finder copy window, "Preparing to copy…"; the arrows found 1:1 |
+| Progress bar | Drawing Board | The determinate fill stays Platinum's | Inferred | `clio.css` — the copy ran too fast to show a determinate bar |
+| Tabs | System 7 | System 7 had no tab control; the System 6 adaptation is used | Adapted | `clio.css` — System 7.5.3 |
 | Tabs | System 6 | Boxed labels that join the panel | Adapted | `clio.css` — System 6 had no tab control |
-| Tabs | Platinum | Tab art: sloped caps, #ccc tabs, the front tab #eee and 2px taller | Third-party | `classic-stylesheets macos9/tab*.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8; AI System 6 measured a 21-row tab (P01, 65-appearance-themes.css:742) |
+| Tabs | Platinum | Tab art: sloped caps, #ccc tabs, the front tab #eee and 2px taller, drawn by tooling/tab-art.py from the measured geometry | Measured | `tooling/tab-art.py, from AI System 6 specimen selected-tab (GUIdebook Mac OS 9.0 Appearance)` — 95.7% identical against GUIdebook (selected-tab) |
+| Tabs | Drawing Board | Tabs: the theme's left end (6px) and right end (17px, 2px taller) with the right end's first column stretched between; the front tab is the content colour and opens into the panel | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — NTabLeft and NTabRight found 1:1 at (244,96) and (327,94) |
+| Control Strip | Platinum | 24px: 1px black lines round every cell; #c0c0c0 cells with a #c0c0c0 then white light and a #a0a0a0 then #808080 shade; an end cap, 13px scroll cells (sunken while there is nothing to scroll), 30px modules with the 16px icon 2px in and a 4x7 menu triangle 4px from the right, then 2px of black and the tab | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame strip-expanded` — Finder desktop; start of the strip 89.5% identical |
+| Control Strip | Platinum | Held module: #808080 face, 2px #404040 light and 2px #c0c0c0 shade | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame strip-slider` — Sound module held |
+| Control Strip | Platinum | End-cap icon, scroll arrows, menu triangle, the tab and the folded tab | Measured | `tooling/p9-art.py, redrawn from frames strip-expanded and strip-collapsed` — tab and folded tab 100% identical |
+| Control Strip | Drawing Board | The Control Strip is not themed: Mac OS 8.5 under Drawing Board draws it exactly as Mac OS 9 does | Measured | `clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame finder` — same cells, bevels and tab, other modules |
+| Control Strip | System 6 | System 6 had no Control Strip: drawn at the Mac OS 9 geometry in ink and paper, with 1-bit arrows, triangle and tab drawn for clio.css | Adapted | `clio.css` — AI System 6 shows its Control Strip in every era |
+| Control Strip | System 7 | System 7.5.3 draws the Mac OS 9 strip in System 7 greys: #ccc cells, white light, #aaa then #888 shade, idle scroll cells sunken #888/white; end cap, arrows, triangle and tab identical pixel for pixel | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window` — Finder desktop |
+| Control Strip | System 7 | Held module in System 7 greys (#888 face, #555 light, #ccc shade) | Inferred | `clio.css, from Mac OS 9's held module` — not captured in 7.5.3 |
+| Desktop and icons | System 7 | The desktop is a 1px #666/#aaa checker | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), every frame` — agrees with AI System 6 system-7-reference |
 | Desktop and icons | System 6 | The desktop is a 1px 50% checker | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), every frame` — AI System 6 draws an 8px stipple |
 | Desktop and icons | System 6 | Icon names: Geneva 9 on a white tag; a selected icon and its tag invert | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), desktop (Macintosh HD selected, Welcome! not)` — System 6.0.8 Finder |
 | Desktop and icons | Platinum | 70% white tag with no edge; selected: black tag, white name, artwork darkened | Measured | `apps/desktop/styles/65-appearance-themes.css:882 (P12, P13)` — Mac OS 9 native capture 02 |
 | Desktop and icons | Platinum | Desktop colour #4a71ab | Inferred | `apps/desktop/styles/65-appearance-themes.css:85` — base colour of AI System 6's azul tile, generated from a 512 Pixels capture; the tile is not shipped |
-| Type and tokens | System 6 | ChicagoFLF, a public-domain revival of Chicago, for chrome | Third-party | `vendor/system.css-reference/fonts/ChicagoFLF.woff2` — Robin Casady's ChicagoFLF (public domain), as shipped by system.css |
-| Type and tokens | Platinum | Charcoal when installed; otherwise Asap (OFL) at width 113 for text and 123 for titles, weights 400/600/700 | Measured | `apps/desktop/assets/fonts/platinum/README.md; 65-appearance-themes.css:25` — Asap matched to a measured Charcoal sample's x-height and advance width |
+| Desktop and icons | Drawing Board | Desktop and icons are unchanged from Platinum; the theme's desktop pictures are not reproduced | Adapted | `clio.css` — scen 'Drawing Board on a Grid' / 'on Parchment' are Apple artwork |
+| Type and tokens | System 7 | System 7 keeps System 6's fonts: Clio Sans '84 for chrome, Clio Text '84 for text | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), title bar text` — the title Infinite HD matches pixel for pixel |
+| Type and tokens | System 6 | Chrome text is Clio Sans '84: Chicago 12 rebuilt pixel for pixel (104 Key Caps characters, space, \|, ⌘ and ✓), ascent 11, descent 3, drawn without antialiasing | Measured | `clio.css capture, System 6.0.8 Key Caps (npm run capture:keycaps → tooling/extract-glyphs.py → fonts-src/clio-sans-84.txt)` — title bar 100% and default OK button 99.7% identical to the real screen |
+| Type and tokens | System 6 | Application text is Clio Text '84 (Geneva 12) and small text Clio Text '84 9 (Geneva 9: info line, icon names, status), rebuilt the same way and drawn without antialiasing | Measured | `clio.css capture, System 6.0.8 Key Caps (Geneva 12) and Get Info comments (Geneva 9) → fonts-src/clio-text-84.txt, clio-text-84-9.txt` — TeachText's first line and the Finder info line are 100% identical to the real screen |
+| Type and tokens | System 6 | ChicagoFLF stays in the stack as the outline fallback for sizes that are not multiples of 12px | Third-party | `vendor/system.css-reference/fonts/ChicagoFLF.woff2` — Robin Casady's ChicagoFLF (public domain), as shipped by system.css |
+| Type and tokens | Platinum | Charcoal when installed; Asap (OFL) as the last fallback at width 113 for text and 123 for titles, weights 400/600/700 | Measured | `apps/desktop/assets/fonts/platinum/README.md; 65-appearance-themes.css:25` — Asap matched to a measured Charcoal sample's x-height and advance width |
+| Type and tokens | Platinum | Clio Sans '97 Display (.display, --clio-font-display): Charcoal's outlines traced with potrace from Mac OS 9.0 drawing every character at 72 points in Stickies, for sizes other than 12px and its multiples | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:charcoal-large → tooling/trace-outline.py)` — at 72px the ink overlaps the capture's by 90.3% (the rest is antialiased edge) |
+| Type and tokens | Platinum | Clio Sans '97: Charcoal 12 rebuilt pixel for pixel from Mac OS 9.0 Key Caps (107 glyphs, 3px space from the Finder title and the Apple menu, command key from the File menu), used when Charcoal is not installed, drawn unsmoothed | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:keycaps -- charcoal), fonts-src/clio-sans-97.txt` — GUIdebook selected tab 80.5% to 95.7%, disabled button 88.2% to 96.9% |
 | Type and tokens | Platinum | Palette #fff #ddd #ccc #999 #777 #000, accent #333399, lavender #ccccff | Measured | `tooling/classic-platinum-fidelity-contract.json (platinum.palette)` — Mac OS 9 captures |
-| Type and tokens | System 6 | Disabled text #696969 instead of a 50% dither | Adapted | `apps/desktop/styles/00-foundation.css (shade-dark)` — 5.6:1 on white; a dither blurs under browser scaling |
+| Type and tokens | System 6 | Disabled text (menu items, button and control labels) through the screen-aligned 50% gray pattern | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — --clio-disabled-dither: none gives solid #696969 (5.6:1 on white) |
+| Type and tokens | Drawing Board | Chrome text is #313131; titles and labels are Charcoal, as in Platinum | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance` — tab and title text ink |
+| Type and tokens | All eras | Window titles and push button labels: each of Charcoal's 16 antialiasing levels takes the exact colour the real screen shows for that text colour on that background (Platinum titles on #ccc, buttons on #ddd, held buttons white on #666, disabled; Drawing Board buttons #333 on #cec6b5 with #313131 solid pixels), via Clio Sans '97 Exact palettes | Measured | `clio.css captures of Mac OS 9.0 and Mac OS 8.5 in Infinite Mac; tooling/aa-palettes.py` — Appearance title bar, Set Desktop normal and held, Save Theme… |

package/README.md

@@ -1,15 +1,18 @@
 # clio.css
 
-**A CSS library for classic Mac OS interfaces: Macintosh System 6 and Mac OS 8/9 Platinum.**
+**A CSS library for classic Mac OS interfaces: Macintosh System 6, System 7, Mac OS 8.5 Drawing Board and Mac OS 8/9 Platinum.**
 Windows, title bars, menu bars, push buttons, check boxes, radio buttons, text fields,
-pop-up menus, list boxes, scroll bars, dialogs, group boxes, progress bars, tabs and
-desktop icons. Pure CSS, no JavaScript. MIT. No Apple bitmaps, icons, logos or fonts.
+pop-up menus, list boxes, scroll bars, dialogs, group boxes, progress bars, tabs, the
+Control Strip and desktop icons. Pure CSS, no JavaScript. MIT. No screenshots, icons, logos or Apple fonts.
 
 Every value is traced to its source and labelled **measured** (read from real pixels of
 the era), **inferred**, **adapted** (a deliberate web change) or **third-party**. System 6
-is measured from System 6.0.8 running in [Infinite Mac](https://infinitemac.org), its
-screen read pixel for pixel; Platinum from Mac OS 9.0 captures measured by
-[AI System 6](https://github.com/surfine/AI-System-6).
+and System 7 are measured from System 6.0.8 and 7.5.3 running in
+[Infinite Mac](https://infinitemac.org), the screen read pixel for pixel; Drawing Board
+(the appearance theme Apple shipped in the Mac OS 8.5 betas and withdrew) from Mac OS 8.5
+with the theme installed, its control parts redrawn from the theme's own pixmaps; Platinum
+from Mac OS 9.0 captures measured by [AI System 6](https://github.com/surfine/AI-System-6),
+re-checked against Mac OS 9.0 running in Infinite Mac.
 
 ![A System 6 window and a Mac OS 9 Platinum window drawn with clio.css](assets/og.png)
 
@@ -22,24 +25,31 @@ npm install clio.css
 ```
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/clio.css@0.2.0/dist/clio.css">
+<link rel="stylesheet" href="https://unpkg.com/clio.css@0.8.0/dist/clio.css">
 ```
 
 | File | What it draws |
 | --- | --- |
-| `dist/clio.css` | System 6 by default; `data-era="platinum"` on any element switches that subtree to Platinum |
+| `dist/clio.css` | System 6 by default; `data-era="system7"`, `data-era="drawingboard"` or `data-era="platinum"` on any element switches that subtree |
 | `dist/clio.system6.css` | System 6 only (45 KB minified, 7 KB gzip) |
+| `dist/clio.system7.css` | System 7 (colour) as the page default |
+| `dist/clio.drawingboard.css` | Mac OS 8.5 Drawing Board as the page default |
 | `dist/clio.platinum.css` | Platinum as the page default |
 | `*.min.css` | Minified builds |
 | `dist/components.json` | Machine-readable index: selectors, tokens, markup and evidence per component |
 
-The stylesheets load fonts from `dist/fonts/` with relative URLs, so serve the `dist`
-folder as a whole (the CDNs above do).
+The stylesheets load fonts from `dist/fonts/` and the Drawing Board theme's pictures and
+patterns from `dist/art/drawingboard/` with relative URLs, so serve the `dist` folder as a
+whole (the CDNs above do).
+
+Drawing Board draws its pencil lines with 128px patterns. Mac OS sometimes starts such a
+pattern half a tile along, depending on where the window sits on screen; clio.css starts it
+at the element, and `--clio-db-phase: 64px` on a window or control matches the other case.
 
 ## Quick start
 
 ```html
-<html data-era="platinum">  <!-- omit for System 6 -->
+<html data-era="system7">  <!-- or "platinum"; omit for System 6 -->
 <div class="window" style="width: 320px">
   <div class="title-bar">
     <button class="close" aria-label="Close"></button>
@@ -86,7 +96,7 @@ unchanged: `.title-bar button.close`, `button.resize`, `.inactive-title-bar`,
 ## Customising
 
 Every value is a `--clio-*` custom property, declared on `:root` and re-declared under
-`[data-era="platinum"]`. Override any of them on any element. Every rule uses `:where()`
+`[data-era="system7"]` and `[data-era="platinum"]`. Override any of them on any element. Every rule uses `:where()`
 or a single class, so your own CSS always wins without `!important`.
 
 ```css
@@ -95,21 +105,32 @@ or a single class, so your own CSS always wins without `!important`.
 
 ## How faithful is it?
 
-[EVIDENCE.md](EVIDENCE.md) lists every value with its status and source: 50 of the 77
-rows are **measured** from real pixels, 13 are still **inferred** and say so.
+[EVIDENCE.md](EVIDENCE.md) lists every value with its status and source: 57 of the 78
+rows are **measured** from real pixels; 6 are still **inferred** and say so (one of them
+for System 6).
 
 [FIDELITY.md](FIDELITY.md) is a pixel check (`npm run fidelity`) against the real screens:
 
 | Specimen | Pixels identical to the real screen |
 | --- | ---: |
-| System 6 check box, radio buttons, scroll arrow, grow box, menu separator | 100% |
-| System 6 default OK button | 96.7% |
-| System 6 title bar | 96.3% |
+| System 6 check box (on and off), radio buttons, all four scroll arrows, grow box, progress fill, menu separator | 100% |
+| System 6 pressed and hovered button | identical apart from the mouse pointer in the capture |
+| System 6 default OK button | 99.7% |
+| System 6 title bar, Finder info line, TeachText text | 100% |
+| System 7 title bar, arrow boxes, grow box, alert frame, check boxes, radio buttons, pop-up menu, progress bar, menu separator | 99–100% |
 | Platinum title bar | 94.3% |
 | Platinum default OK button | 92.4% |
 
-Nearly every remaining pixel is lettering: Chicago and Charcoal are Apple's fonts and are
-not shipped, so ChicagoFLF and Asap stand in. `npm run capture:system6` re-takes the
+System 6 text is drawn in **Clio Sans '84** (Chicago 12) and **Clio Text '84** (Geneva 12
+and 9), rebuilt pixel for pixel from the running system (about 3 KB each), so System 6
+titles, menus, buttons and body text match the real screen exactly.
+Platinum and Drawing Board chrome is drawn in **Clio Sans '97**, Charcoal 12 rebuilt the
+same way from Mac OS 9.0 (3 KB), and at any other size in **Clio Sans '97 Display**
+(`.display`), Charcoal's outlines traced from Mac OS 9.0 at 72 points; Asap stays as the
+fallback. Window titles and push button labels use **Exact** variants whose antialiasing
+levels take the very colours the real screen shows for clio.css's own title and button
+colours (`@font-palette-values`); recolour them and set `--clio-font-window-title` or
+`--clio-font-button` to a stack without "Exact". `npm run capture:system6` re-takes the
 System 6.0.8 reference frames from Infinite Mac; the frames are never committed.
 
 What the era never had is adapted, not imitated: keyboard focus rings, touch-size
@@ -132,7 +153,7 @@ gets the era's scroll-bar colours only.
 | [XP.css](https://github.com/botoxparty/XP.css) | Windows XP | MIT |
 | [system.css](https://github.com/sakofchit/system.css) | Classic Apple (System 6 style) | MIT |
 | [Puppertino](https://github.com/codedgar/Puppertino) | Modern macOS / iOS | MIT |
-| **clio.css** | System 6 and Mac OS 8/9 Platinum, with per-value evidence | MIT |
+| **clio.css** | System 6, System 7, Mac OS 8.5 Drawing Board and Mac OS 8/9 Platinum, with per-value evidence | MIT |
 
 ## For AI agents
 
@@ -151,9 +172,10 @@ npm run fidelity   # pixel check against AI System 6's references (needs a local
 
 ## Licence
 
-MIT, see [LICENSE](LICENSE). Bundled fonts and art keep their own licences, see
-[THIRD-PARTY.md](THIRD-PARTY.md): ChicagoFLF (public domain), Asap (SIL OFL 1.1), and
-SVG art from system.css and classic-stylesheets (both MIT).
+MIT, see [LICENSE](LICENSE). Bundled fonts and art are described in
+[THIRD-PARTY.md](THIRD-PARTY.md): Clio Sans '84, Clio Text '84 and Clio Sans '97 (pixel reconstructions
+of Chicago and Geneva, shipped under MIT; read the note there), ChicagoFLF (public domain), Asap (SIL OFL 1.1),
+and SVG art from system.css (MIT).
 
 clio.css is not affiliated with or endorsed by Apple Inc. Macintosh, Mac OS, Chicago,
 Geneva and Charcoal are trademarks of Apple Inc., named only to describe the eras

package/THIRD-PARTY.md

@@ -1,17 +1,67 @@
 # Third-party material
 
-clio.css ships no Apple bitmaps, icons, logos or fonts. Screenshots used to
-measure values stay evidence in AI System 6 and are never distributed. The
-following third-party material is included, each under its own licence.
+clio.css ships no Apple screenshots, icons, logos or font files. Screenshots used to
+measure values stay evidence (git-ignored `.fidelity/`, or AI System 6) and are never
+distributed. The following third-party material is included, each under its own licence.
+
+## Control art reconstructed from Apple's interfaces
+
+Some small control parts are pixel reconstructions, not original designs, and are not
+presented as such:
+
+- System 7 scroll arrows, grow box and grip (`--clio-art-s7-*`): redrawn as SVG by
+  `tooling/s7-art.py` from System 7.5.3 running in an emulator.
+- Mac OS 9 check mark, radio buttons and Control Strip parts (end cap, scroll arrows, menu
+  triangle, tab and folded tab) (`--clio-art-p9-*`): re-encoded as palette PNGs by
+  `tooling/p9-art.py` from Mac OS 9.0 running in an emulator.
+- Drawing Board art (`dist/art/drawingboard/`, `--clio-art-db-*`): the `pxm#` pictures
+  (window, alert and modal frames, menu bar, boxes, check boxes, radio buttons, scroll
+  arrows and scroll box, pop-up arrow, hatched button corner, grow box, tab ends, menu
+  underlines) and `ppat` patterns (window, tab and menu papers, and the pattern pens the
+  theme draws its pencil lines with) of Apple's Mac OS 8.5b6 "Drawing Board" theme,
+  re-encoded as palette PNGs by `tooling/db-art.py` and `tooling/db-pens.py`, each matched
+  1:1 against the theme running in an emulator. A few corner pixels where the pens meet are
+  read from that screen by `tooling/db-pens.py`. The theme file is not included. The
+  textures and frame illustrations ship since 0.9.0, at the owner's decision.
+
+They are included to document the look of these interfaces at the size of a single
+control. If that does not suit your use, override the `--clio-art-s7-*`,
+`--clio-art-p9-*` and `--clio-art-db-*` custom properties with your own art, or replace
+the files in `dist/art/drawingboard/`.
 
 ## Fonts
 
+### Clio Sans '84, Clio Text '84 and Clio Sans '97 (`dist/fonts/ClioSans84.woff2`, `ClioText84.woff2`, `ClioText84-9.woff2`, `ClioSans97.woff2`, `ClioSans97Title.woff2`, `ClioSans97Exact.woff2`, `ClioSans97TitleExact.woff2`, `ClioSans97Display.woff2`)
+
+Pixel reconstructions of Chicago 12 (Clio Sans '84), Geneva 12 (Clio Text '84) and
+Geneva 9 (Clio Text '84 9), Macintosh system fonts designed by Susan Kare for Apple
+Computer in 1984, and of Charcoal 12 (Clio Sans '97), the Mac OS 8 system font
+designed by David Berlow of the Font Bureau for Apple in 1997. clio.css read every
+glyph from System 6.0.8 or Mac OS 9.0 running in an emulator (`npm run capture:keycaps`),
+wrote the bitmaps to `fonts-src/*.txt` and built the fonts from them
+(`npm run build:font`). Clio Sans '97 Display is Charcoal's outlines traced from
+Mac OS 9.0 drawing every character at 72 points (`npm run capture:charcoal-large`,
+`tooling/trace-outline.py`). The Exact variants carry the same glyphs with each
+antialiasing level in its own palette entry. No Apple font file was copied.
+
+They are not original designs and are not presented as such: the letterforms are
+Apple's. They ship under clio.css's MIT licence on the basis that, in the United States, typeface
+designs are not protected by copyright (37 CFR 202.1(e)); only font software is, and
+these font files are new software. Some countries protect typeface designs separately; if
+that matters for your use, override `--clio-font-chrome`, `--clio-font-text` and
+`--clio-font-small` with your own stack. "Chicago", "Geneva" and "Charcoal" are trademarks of Apple
+Inc., which is why the fonts have other names.
+
+### Other fonts
+
 | File | Font | Author | Licence |
 | --- | --- | --- | --- |
 | `dist/fonts/ChicagoFLF.woff2`, `.woff` | ChicagoFLF | Robin Casady | Public domain: the author's own statement and Font Library's listing (https://fontlibrary.org/font/chicagoflf); some download sites say "personal use", which is not the author's term. File as distributed by system.css |
 | `dist/fonts/Asap-Variable.woff2` | Asap (variable, wdth + wght) | Omnibus-Type | SIL Open Font License 1.1, full text in `dist/fonts/OFL-Asap.txt`; upstream github.com/Omnibus-Type/Asap at commit 2de32f20, SHA-256 3f230328…498f |
 
-Asap is a stand-in for Charcoal and is not presented as an Apple font.
+Asap is a fallback stand-in for Charcoal and is not presented as an Apple font. Virtue
+(Scooter Graphics, 1997), another Charcoal look-alike, is not included: its page offers it
+free with a copyright notice and states no redistribution terms.
 
 ## Art from system.css (MIT)
 
@@ -43,12 +93,13 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 ## Art from classic-stylesheets (MIT)
 
-The Platinum pop-up arrow (and its disabled colour), check mark, submenu
-arrow and the three tab drawings are re-encoded from `macos9/dropdown.svg`,
-`checkmark.svg`, `menu-right.svg`, `tab.svg`, `tab-active.svg` and
-`tab-selected.svg` of https://github.com/nielssp/classic-stylesheets at commit
-9ebd2d84. AI System 6 also adapted Platinum control relationships from the
-same project.
+Up to 0.7.0 the Platinum pop-up arrow, check mark and submenu arrow were
+re-encoded from `macos9/dropdown.svg`, `checkmark.svg` and `menu-right.svg` of
+https://github.com/nielssp/classic-stylesheets at commit 9ebd2d84, and the tab
+drawings followed its `tab*.svg`. Since 0.8.0 the arrows and check mark are
+redrawn from Mac OS 9.0 (`tooling/p9-art.py`) and the tabs from measured geometry
+(`tooling/tab-art.py`). AI System 6 adapted Platinum control relationships from the
+same project, so the notice stays.
 
 MIT License