clio.css 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/EVIDENCE.md +33 -25
  2. package/README.md +21 -12
  3. package/dist/clio.css +67 -50
  4. package/dist/clio.min.css +2 -2
  5. package/dist/clio.platinum.css +67 -50
  6. package/dist/clio.platinum.min.css +2 -2
  7. package/dist/clio.system6.css +62 -46
  8. package/dist/clio.system6.min.css +2 -2
  9. package/dist/components.json +131 -75
  10. package/llms.txt +1 -1
  11. package/package.json +3 -2
package/EVIDENCE.md CHANGED
@@ -2,54 +2,59 @@
2
2
 
3
3
  Generated from `components/index.mjs` by `npm run build`; edit there.
4
4
 
5
- Every value in clio.css 0.1.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.
5
+ 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.
6
6
 
7
7
  | Status | Meaning | Rows |
8
8
  | --- | --- | ---: |
9
- | Measured | read from real pixels of the era | 29 |
10
- | Inferred | reasoned from documentation or behaviour, not measured | 26 |
11
- | Adapted | a deliberate departure for the web (touch, focus, contrast) | 7 |
12
- | Third-party | art or font from a named, licensed project | 7 |
9
+ | Measured | read from real pixels of the era | 50 |
10
+ | Inferred | reasoned from documentation or behaviour, not measured | 13 |
11
+ | Adapted | a deliberate departure for the web (touch, focus, contrast) | 8 |
12
+ | Third-party | art or font from a named, licensed project | 6 |
13
13
 
14
14
  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).
15
15
 
16
16
  | Component | Era | Value | Status | Source — upstream evidence |
17
17
  | --- | --- | --- | --- | --- |
18
- | Window | System 6 | Title bar: a 17px box below a 1px inset; 2px paper, a 12px row of six 1px ink stripes on a 2px period, 2px paper, a 1px rule | Measured | `apps/desktop/styles/00-foundation.css:906` — System 6.0.8 running in an emulator, read at exact 2x pixels |
19
- | Window | System 6 | Close and zoom boxes are 11px squares, 7px in from each end, with 3px of paper cut out of the stripes around them | Measured | `apps/desktop/styles/00-foundation.css:906` — same capture |
18
+ | 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) |
19
+ | 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 |
20
+ | 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 |
20
21
  | Window | System 6 | Zoom box: an inner square of 7 of the frame's 11 pixels sharing its top-left corner | Measured | `apps/desktop/styles/10-windows.css:1059` — System 6 zoom box, 7:11 |
21
- | Window | System 6 | An inactive window draws a plain white title strip with its name; no stripes, close box or zoom box | Measured | `apps/desktop/styles/00-foundation.css:951` — observed behaviour of System 6 |
22
- | Window | System 6 | Pressed close box shows a starburst | Inferred | `apps/desktop/styles/10-windows.css (close-box ::before/::after)` — System 6 close-box tracking; pixels redrawn for clio.css |
23
- | Window | System 6 | The window frame has a 1px ink drop shadow on the right and bottom | Inferred | `not in AI System 6 (it sets no window shadow)` — Inside Macintosh, Window Manager: documentProc frame; to be measured |
24
- | Window | System 6 | The details bar closes with two 1px rules | Inferred | `not measured` — System 6 Finder window header |
22
+ | Window | System 6 | An inactive window draws a plain white title strip with its name; no stripes, close box or zoom box | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert (Macintosh HD behind the alert)` — agrees with AI System 6 apps/desktop/styles/00-foundation.css:951 |
23
+ | Window | System 6 | A held close or zoom box draws the same starburst: eight 3px rays and a centre dot inside the frame | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), mouse held on each box` — the cursor covered the lower half; it is drawn as the mirror of the upper half |
24
+ | Window | System 6 | The window frame has a 1px ink drop shadow on the right and bottom | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window x=239, y=152` — AI System 6 sets no window shadow |
25
+ | Window | System 6 | Finder info line: 17 rows of Geneva 9, text 15px in, closed by 1px ink, 1px paper, 1px ink | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window rows 46–65` — System 6.0.8 Finder window |
25
26
  | Window | Platinum | Frame: 1px black line, a raised 4px strip (white top/left, #999 bottom/right), the black content line; 2px 5px 5px padding | Measured | `apps/desktop/styles/65-appearance-themes.css:1744 (P14)` — Mac OS 8/9 window captures 16 and 21 |
26
27
  | Window | Platinum | Title bar 19px: #ccc, six white/#777 ridge pairs from row 1, #999 shadow row, black rule; #ccc covers behind the boxes | Measured | `apps/desktop/styles/65-appearance-themes.css:104` — GUIdebook Mac OS 9.0 Appearance window (Theme Lab specimen active-titlebar) |
27
28
  | Window | Platinum | Title in bold Charcoal; on other systems Asap at width 123 shifted (-1px, -1px), the metrics the title bar was measured with | Measured | `apps/desktop/styles/65-appearance-themes.css:1803` — GUIdebook Mac OS 9.0 Appearance window |
28
29
  | 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 |
29
30
  | 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 |
30
31
  | 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 |
31
- | Menu bar and menus | System 6 | Menu bar 20px with a 1px ink rule; selected title inverts | Inferred | `docs/design/CLASSIC_PLATINUM_FIDELITY.md:87` — historical reference ~20px; not yet measured from a capture |
32
- | Menu bar and menus | System 6 | Menu: paper, 1px ink frame, 1px ink drop shadow; 16px rows; the highlighted row inverts | Inferred | `apps/desktop/styles/00-foundation.css:1094` — System 6 menus; Chicago 12 line spacing |
33
- | Menu bar and menus | System 6 | Separator: a dotted grey rule through a full-height row | Inferred | `not measured` — System 6 menus |
32
+ | 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 |
33
+ | 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 |
34
+ | 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 |
35
+ | 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 |
36
+ | 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 |
34
37
  | 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 |
35
38
  | 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) |
36
39
  | 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 |
37
40
  | 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 |
38
- | Push button | System 6 | 1px ink round rectangle, paper face, Chicago 12; pressed inverts to ink with paper text | Inferred | `apps/desktop/styles/10-windows.css:3588` — AI System 6 Theme Lab default-ok specimen (authored, not a capture) |
39
- | Push button | System 6 | Default button: a 1px gap then a 3px ring | Inferred | `apps/desktop/styles/00-foundation.css:79` — Inside Macintosh, Dialog Manager: PenSize(3,3), InsetRect(-4,-4), FrameRoundRect(16,16) |
41
+ | 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 |
42
+ | Push button | System 6 | Pressed: the button inverts to ink with paper text | Inferred | `not captured` — System 6 button tracking |
43
+ | 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) |
40
44
  | 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 |
41
45
  | 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 |
42
46
  | 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) |
43
47
  | 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 |
44
48
  | 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) |
45
49
  | 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) |
46
- | Check box | System 6 | A 12px box; checked draws an X from corner to corner | Inferred | `apps/desktop/styles/00-foundation.css:965` — System 6 check box; AI System 6 uses 13px, clio.css 12px to match the radio |
50
+ | 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 |
51
+ | Check box | System 6 | Checked draws an X from corner to corner | Inferred | `not captured (the Locked box was unchecked)` — System 6 check box |
47
52
  | Check box | System 6 | X art | Third-party | `apps/desktop/assets/themes/classic/controls/checkmark.svg` — system.css icon/checkmark.svg (MIT, Sakun Acharige) |
48
53
  | 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) |
49
54
  | Check box | Platinum | Check mark art | Third-party | `classic-stylesheets macos9/checkmark.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
50
- | Radio button | System 6 | 12px ring and 6px dot art | Third-party | `apps/desktop/assets/themes/classic/controls/radio-*.svg` — system.css icon/radio-border.svg, radio-dot.svg (MIT, Sakun Acharige) |
55
+ | 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) |
51
56
  | 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 |
52
- | Text field | System 6 | 1px ink frame, white, Geneva 12 | Inferred | `apps/desktop/styles/00-foundation.css:189` — System 6 dialog edit text |
57
+ | 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 |
53
58
  | 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 |
54
59
  | 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 |
55
60
  | Pop-up menu | System 6 | A box with a 1px drop shadow | Inferred | `not measured` — System 6 pop-up menu CDEF |
@@ -60,12 +65,15 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
60
65
  | List box | System 6 | White list, 1px ink frame, 16px rows, selection inverts | Inferred | `not measured` — System 6 Standard File dialog |
61
66
  | 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) |
62
67
  | List box | Platinum | Rows carry no divider | Measured | `apps/desktop/styles/65-appearance-themes.css:860 (P10)` — Mac OS 9 native list capture 21 |
63
- | Scroll bar | System 6 | A 16px lane | Inferred | `apps/desktop/styles/00-foundation.css:1173` — System 6 document window frame |
64
- | Scroll bar | System 6 | 50% grey lane pattern | Inferred | `apps/desktop/styles/00-foundation.css:1177` — drawn as a 1px checker here; AI System 6 uses a 2px cell |
65
- | Scroll bar | System 6 | Hollow arrow art | Inferred | `drawn for clio.css` — System 6 scroll arrows; to be measured |
68
+ | 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 |
69
+ | 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 |
70
+ | 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 |
71
+ | 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 |
72
+ | 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 |
73
+ | 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 |
66
74
  | 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 |
67
75
  | 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 |
68
- | Dialogs and alerts | System 6 | Modal frame: 1px ink, 1px paper gap, 2px ink | Inferred | `apps/desktop/styles/84-clio-write.css:210` — AI System 6 has two recipes (this one and 00-foundation.css .system-modal); neither is measured |
76
+ | 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) |
69
77
  | Dialogs and alerts | System 6 | Plain box: 1px ink frame and a 2px drop shadow | Inferred | `not measured` — altDBoxProc |
70
78
  | Dialogs and alerts | Both eras | The alert icon is drawn here, not Apple's | Adapted | `clio.css` — no Apple icons are shipped |
71
79
  | 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) |
@@ -76,8 +84,8 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
76
84
  | 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 |
77
85
  | Tabs | System 6 | Boxed labels that join the panel | Adapted | `clio.css` — System 6 had no tab control |
78
86
  | 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) |
79
- | Desktop and icons | System 6 | A 50% grey desktop pattern | Inferred | `apps/desktop/styles/00-foundation.css:224` — System 6.0.8 default desktop; AI System 6 draws an 8px stipple |
80
- | Desktop and icons | System 6 | White name tag; a selected icon inverts | Inferred | `apps/desktop/styles/00-foundation.css (desktop-label tokens)` — System 6 Finder |
87
+ | 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 |
88
+ | 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 |
81
89
  | 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 |
82
90
  | 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 |
83
91
  | 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 |
package/README.md CHANGED
@@ -6,9 +6,10 @@ pop-up menus, list boxes, scroll bars, dialogs, group boxes, progress bars, tabs
6
6
  desktop icons. Pure CSS, no JavaScript. MIT. No Apple bitmaps, icons, logos or fonts.
7
7
 
8
8
  Every value is traced to its source and labelled **measured** (read from real pixels of
9
- the era), **inferred**, **adapted** (a deliberate web change) or **third-party**. The
10
- measurements come from [AI System 6](https://github.com/surfine/AI-System-6), which
11
- recreates these eras against System 6.0.8 in an emulator and Mac OS 9.0 captures.
9
+ the era), **inferred**, **adapted** (a deliberate web change) or **third-party**. System 6
10
+ is measured from System 6.0.8 running in [Infinite Mac](https://infinitemac.org), its
11
+ screen read pixel for pixel; Platinum from Mac OS 9.0 captures measured by
12
+ [AI System 6](https://github.com/surfine/AI-System-6).
12
13
 
13
14
  ![A System 6 window and a Mac OS 9 Platinum window drawn with clio.css](assets/og.png)
14
15
 
@@ -21,13 +22,13 @@ npm install clio.css
21
22
  ```
22
23
 
23
24
  ```html
24
- <link rel="stylesheet" href="https://unpkg.com/clio.css@0.1.0/dist/clio.css">
25
+ <link rel="stylesheet" href="https://unpkg.com/clio.css@0.2.0/dist/clio.css">
25
26
  ```
26
27
 
27
28
  | File | What it draws |
28
29
  | --- | --- |
29
30
  | `dist/clio.css` | System 6 by default; `data-era="platinum"` on any element switches that subtree to Platinum |
30
- | `dist/clio.system6.css` | System 6 only (42 KB minified, 7 KB gzip) |
31
+ | `dist/clio.system6.css` | System 6 only (45 KB minified, 7 KB gzip) |
31
32
  | `dist/clio.platinum.css` | Platinum as the page default |
32
33
  | `*.min.css` | Minified builds |
33
34
  | `dist/components.json` | Machine-readable index: selectors, tokens, markup and evidence per component |
@@ -94,14 +95,22 @@ or a single class, so your own CSS always wins without `!important`.
94
95
 
95
96
  ## How faithful is it?
96
97
 
97
- [EVIDENCE.md](EVIDENCE.md) lists every value with its status and source. Of the 69
98
- rows, the Platinum chrome is almost all **measured**; much of System 6 beyond the
99
- title bar is still **inferred** and marked as such.
98
+ [EVIDENCE.md](EVIDENCE.md) lists every value with its status and source: 50 of the 77
99
+ rows are **measured** from real pixels, 13 are still **inferred** and say so.
100
100
 
101
- [FIDELITY.md](FIDELITY.md) has a pixel check (`npm run fidelity`) that renders the
102
- Platinum specimens and compares them with Mac OS 9.0 GUIdebook captures: the active title
103
- bar matches 94% of pixels exactly, and nearly all the rest is the label, because
104
- Charcoal is not shipped (Asap stands in).
101
+ [FIDELITY.md](FIDELITY.md) is a pixel check (`npm run fidelity`) against the real screens:
102
+
103
+ | Specimen | Pixels identical to the real screen |
104
+ | --- | ---: |
105
+ | System 6 check box, radio buttons, scroll arrow, grow box, menu separator | 100% |
106
+ | System 6 default OK button | 96.7% |
107
+ | System 6 title bar | 96.3% |
108
+ | Platinum title bar | 94.3% |
109
+ | Platinum default OK button | 92.4% |
110
+
111
+ Nearly every remaining pixel is lettering: Chicago and Charcoal are Apple's fonts and are
112
+ not shipped, so ChicagoFLF and Asap stand in. `npm run capture:system6` re-takes the
113
+ System 6.0.8 reference frames from Infinite Mac; the frames are never committed.
105
114
 
106
115
  What the era never had is adapted, not imitated: keyboard focus rings, touch-size
107
116
  controls on `pointer: coarse` (title-bar boxes get a 45px hit area while their art stays
package/dist/clio.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! clio.css 0.1.0 | MIT | https://surfine.github.io/clio.css/
1
+ /*! clio.css 0.2.0 | MIT | https://surfine.github.io/clio.css/
2
2
  * Classic Mac OS interface CSS: System 6 and Mac OS 9 Platinum.
3
3
  * Measured values traced to AI System 6; see EVIDENCE.md.
4
4
  * Includes art from system.css (MIT) and classic-stylesheets (MIT); see THIRD-PARTY.md. */
@@ -25,7 +25,9 @@
25
25
  font-display: swap;
26
26
  }
27
27
 
28
- /* Tokens: Macintosh System 6 is the default era.
28
+ /* Tokens: Macintosh System 6 is the default era. Measured values come from
29
+ System 6.0.8 running in Infinite Mac, read from the emulator canvas 1:1
30
+ (tooling/capture-system6.mjs).
29
31
  Every value below is traceable in EVIDENCE.md. A value marked [M] there was
30
32
  measured from real pixels; [I] is inferred; [A] is a deliberate web
31
33
  adaptation (contrast, focus, touch). Platinum re-declares these tokens in
@@ -47,7 +49,8 @@
47
49
  --clio-font-text: Geneva, "Clio Asap", "Helvetica Neue", Arial, sans-serif;
48
50
  --clio-font-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
49
51
  --clio-font-size: 12px;
50
- --clio-font-size-small: 10px;
52
+ /* Geneva 9: the Finder info line and icon names. */
53
+ --clio-font-size-small: 9px;
51
54
  --clio-chrome-weight: 400;
52
55
  --clio-font-stretch-text: normal;
53
56
  --clio-font-stretch-title: normal;
@@ -97,7 +100,8 @@
97
100
  --clio-shade-display: none;
98
101
  --clio-box-size: 11px;
99
102
  --clio-box-inset: 7px;
100
- --clio-box-isolation: 3px;
103
+ /* 1px of paper between a box and the stripes (HD window, 6.0.8). */
104
+ --clio-box-isolation: 1px;
101
105
 
102
106
  /* Menus */
103
107
  --clio-menubar-height: 20px;
@@ -105,29 +109,35 @@
105
109
  --clio-menubar-border: 1px solid var(--clio-ink);
106
110
  --clio-menubar-shadow: none;
107
111
  --clio-menubar-padding: 0 8px;
108
- --clio-menu-title-padding: 0 8px;
112
+ /* "File" highlight is 41px wide: about 9px each side of the word. */
113
+ --clio-menu-title-padding: 0 9px;
114
+ /* The open title's highlight leaves the bar's top row white. */
115
+ --clio-menu-title-inset: 1px;
109
116
  --clio-menu-title-active-bg: var(--clio-ink);
110
117
  --clio-menu-title-active-fg: var(--clio-paper);
111
118
  --clio-menu-title-active-shadow: none;
112
119
  --clio-menu-bg: var(--clio-paper);
113
120
  --clio-menu-border: 1px solid var(--clio-ink);
114
- --clio-menu-border-top-width: 1px;
121
+ /* A menu hangs from the bar's own rule; it draws no top line. */
122
+ --clio-menu-border-top-width: 0;
115
123
  --clio-menu-shadow: 1px 1px 0 var(--clio-ink);
116
124
  --clio-menu-item-height: 16px;
117
- --clio-menu-item-padding: 0 12px 0 16px;
125
+ --clio-menu-item-padding: 0 12px 0 15px;
118
126
  --clio-menu-item-weight: 400;
119
127
  --clio-menu-item-active-bg: var(--clio-ink);
120
128
  --clio-menu-item-active-fg: var(--clio-paper);
121
129
  --clio-menu-item-active-shadow: none;
130
+ /* A full 16px row with a 1-on 1-off dotted rule on its ninth line. */
122
131
  --clio-menu-separator:
123
- repeating-linear-gradient(to right, var(--clio-ink) 0 1px, transparent 1px 2px) 0 50% / 100% 1px no-repeat;
132
+ repeating-linear-gradient(to right, var(--clio-ink) 0 1px, transparent 1px 2px) 0 8px / 100% 1px no-repeat;
124
133
  --clio-menu-separator-height: 16px;
125
134
 
126
135
  /* Push buttons */
127
136
  --clio-button-bg: var(--clio-paper);
128
137
  --clio-button-fg: var(--clio-ink);
129
138
  --clio-button-border: 1px solid var(--clio-ink);
130
- --clio-button-radius: 7px;
139
+ /* 20px tall; corners turn over about 4px (alert OK button, 6.0.8). */
140
+ --clio-button-radius: 4px;
131
141
  --clio-button-shadow: 0 0 0 0 transparent;
132
142
  --clio-button-padding: 0 12px;
133
143
  --clio-button-min-width: 59px;
@@ -160,7 +170,8 @@
160
170
  --clio-field-bg: var(--clio-paper);
161
171
  --clio-field-border: 1px solid var(--clio-ink);
162
172
  --clio-field-shadow: none;
163
- --clio-field-padding: 2px 3px;
173
+ /* Edit text: 1px frame, text inset 3px (Control Panel RAM cache field). */
174
+ --clio-field-padding: 3px;
164
175
  --clio-field-focus-shadow: none;
165
176
 
166
177
  /* Pop-up menus */
@@ -173,8 +184,10 @@
173
184
  --clio-popup-weight: 400;
174
185
 
175
186
  /* Scroll bars */
176
- --clio-scrollbar-size: 16px;
177
- --clio-scrollbar-track: var(--clio-art-s6-desktop) 0 0 / 2px 2px repeat, #808080;
187
+ /* The lane line plus 14px; the window frame is the 16th line. The lane is
188
+ QuickDraw's ltGray, one dot in four. */
189
+ --clio-scrollbar-size: 15px;
190
+ --clio-scrollbar-track: var(--clio-art-s6-ltgray) 0 0 / 4px 2px repeat, #ffffff;
178
191
  --clio-scrollbar-track-shadow: none;
179
192
  --clio-scrollbar-thumb-bg: var(--clio-paper);
180
193
  --clio-scrollbar-thumb-border: 1px solid var(--clio-ink);
@@ -192,17 +205,22 @@
192
205
 
193
206
  /* Dialogs */
194
207
  --clio-dialog-bg: var(--clio-paper);
195
- /* [I] dBoxProc: a 1px frame, a 1px paper gap, then a 2px ink border. */
208
+ /* Modal frame (stop alert, 6.0.8): 1px ink, 2px paper, 2px ink; no shadow. */
196
209
  --clio-modal-border: 1px solid var(--clio-ink);
197
- --clio-modal-frame: inset 0 0 0 1px var(--clio-paper), inset 0 0 0 3px var(--clio-ink);
198
- --clio-modal-padding: 16px 18px;
210
+ --clio-modal-frame: inset 0 0 0 2px var(--clio-paper), inset 0 0 0 4px var(--clio-ink);
211
+ --clio-modal-padding: 18px 20px;
199
212
  --clio-plain-dialog-border: 1px solid var(--clio-ink);
200
213
  --clio-plain-dialog-shadow: 2px 2px 0 var(--clio-ink);
201
214
 
202
215
  /* Bars, lists, groups, progress, tabs */
203
216
  --clio-details-bg: var(--clio-paper);
204
- /* [I] Finder's info line closes with two 1px rules. */
217
+ /* Finder's info line: 17 rows of Geneva 9, closed by 1px ink, 1px paper,
218
+ 1px ink. */
205
219
  --clio-details-border: 3px double var(--clio-ink);
220
+ --clio-details-font-size: 9px;
221
+ --clio-details-height: 17px;
222
+ --clio-details-padding: 0 15px;
223
+ --clio-scrollbar-corner: var(--clio-art-s6-grow) 0 0 / 14px 14px no-repeat, var(--clio-paper);
206
224
  --clio-list-bg: var(--clio-paper);
207
225
  --clio-list-border: 1px solid var(--clio-ink);
208
226
  --clio-list-shadow: none;
@@ -235,20 +253,24 @@
235
253
  --clio-art-s6-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v1H4zM0 4h1v4H0zM11 4h1v4h-1zM2 1h2v1H2zM8 1h2v1H8zM10 2h1v2h-1zM1 2h1v2H1zM4 11h4v1H4zM2 10h2v1H2zM8 10h2v1H8zM10 8h1v2h-1zM1 8h1v2H1z'/%3E%3C/svg%3E");
236
254
  --clio-art-s6-radio-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 1h2v2H2zM8 1h2v2H8zM9 2h2v2H9zM1 2h2v2H1zM4 10h4v2H4zM2 9h2v2H2zM8 9h2v2H8zM9 8h2v2H9zM1 8h2v2H1z'/%3E%3C/svg%3E");
237
255
  --clio-art-s6-radio-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM1 5h4v1H1zM0 1h6v4H0z'/%3E%3C/svg%3E");
238
- --clio-art-s6-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,3.5 14.5,9.5 11.5,9.5 11.5,13.5 5.5,13.5 5.5,9.5 2.5,9.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
239
- --clio-art-s6-up-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,3.5 14.5,9.5 11.5,9.5 11.5,13.5 5.5,13.5 5.5,9.5 2.5,9.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
240
- --clio-art-s6-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,13.5 14.5,7.5 11.5,7.5 11.5,3.5 5.5,3.5 5.5,7.5 2.5,7.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
241
- --clio-art-s6-down-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,13.5 14.5,7.5 11.5,7.5 11.5,3.5 5.5,3.5 5.5,7.5 2.5,7.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
242
- --clio-art-s6-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='3.5,8.5 9.5,14.5 9.5,11.5 13.5,11.5 13.5,5.5 9.5,5.5 9.5,2.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
243
- --clio-art-s6-left-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='3.5,8.5 9.5,14.5 9.5,11.5 13.5,11.5 13.5,5.5 9.5,5.5 9.5,2.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
244
- --clio-art-s6-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='13.5,8.5 7.5,14.5 7.5,11.5 3.5,11.5 3.5,5.5 7.5,5.5 7.5,2.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
245
- --clio-art-s6-right-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='13.5,8.5 7.5,14.5 7.5,11.5 3.5,11.5 3.5,5.5 7.5,5.5 7.5,2.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
246
256
  --clio-art-s6-popup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h11v1H0zM1 1h9v1H1zM2 2h7v1H2zM3 3h5v1H3zM4 4h3v1H4zM5 5h1v1H5z'/%3E%3C/svg%3E");
247
257
  --clio-art-s6-submenu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11'%3E%3Cpath d='m0 0 6 5.5L0 11Z'/%3E%3C/svg%3E");
248
258
  --clio-art-s6-submenu-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11'%3E%3Cpath fill='%23fff' d='m0 0 6 5.5L0 11Z'/%3E%3C/svg%3E");
249
- --clio-art-s6-menucheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M9 0h1v2H9zM8 2h1v2H8zM7 4h1v2H7zM6 5h1v2H6zM5 6h1v3H5zM4 7h1v3H4zM3 6h1v3H3zM2 5h1v2H2zM1 4h1v2H1zM0 4h1v1H0z'/%3E%3C/svg%3E");
250
- --clio-art-s6-menucheck-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M9 0h1v2H9zM8 2h1v2H8zM7 4h1v2H7zM6 5h1v2H6zM5 6h1v3H5zM4 7h1v3H4zM3 6h1v3H3zM2 5h1v2H2zM1 4h1v2H1zM0 4h1v1H0z'/%3E%3C/svg%3E");
251
259
  --clio-art-s6-desktop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3Cpath fill='%23fff' d='M1 0h1v1H1zM0 1h1v1H0z'/%3E%3C/svg%3E");
260
+ /* Measured from System 6.0.8 (tooling/s6-art.py). */
261
+ --clio-art-s6-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h3v1h-3zM4 4h5v1h-5zM3 5h7v1h-7zM2 6h9v1h-9zM4 7h5v1h-5zM4 8h5v1h-5zM4 9h5v1h-5zM4 10h5v1h-5z'/%3E%3Cpath fill='%23000' d='M6 1h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM8 3h1v1h-1zM3 4h1v1h-1zM9 4h1v1h-1zM2 5h1v1h-1zM10 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM0 7h4v1h-4zM9 7h4v1h-4zM3 8h1v1h-1zM9 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM3 10h1v1h-1zM9 10h1v1h-1zM3 11h7v1h-7z'/%3E%3C/svg%3E");
262
+ --clio-art-s6-up-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 2h3v1h-3zM4 3h5v1h-5zM3 4h7v1h-7zM2 5h9v1h-9zM1 6h11v1h-11zM0 7h13v1h-13zM3 8h7v1h-7zM3 9h7v1h-7zM3 10h7v1h-7zM3 11h7v1h-7z'/%3E%3C/svg%3E");
263
+ --clio-art-s6-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M4 3h5v1h-5zM4 4h5v1h-5zM4 5h5v1h-5zM4 6h5v1h-5zM2 7h9v1h-9zM3 8h7v1h-7zM4 9h5v1h-5zM5 10h3v1h-3zM6 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M3 2h7v1h-7zM3 3h1v1h-1zM9 3h1v1h-1zM3 4h1v1h-1zM9 4h1v1h-1zM3 5h1v1h-1zM9 5h1v1h-1zM0 6h4v1h-4zM9 6h4v1h-4zM1 7h1v1h-1zM11 7h1v1h-1zM2 8h1v1h-1zM10 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM4 10h1v1h-1zM8 10h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM6 12h1v1h-1z'/%3E%3C/svg%3E");
264
+ --clio-art-s6-down-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 2h7v1h-7zM3 3h7v1h-7zM3 4h7v1h-7zM3 5h7v1h-7zM0 6h13v1h-13zM1 7h11v1h-11zM2 8h9v1h-9zM3 9h7v1h-7zM4 10h5v1h-5zM5 11h3v1h-3z'/%3E%3C/svg%3E");
265
+ --clio-art-s6-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h2v1h-2zM4 4h7v1h-7zM3 5h8v1h-8zM2 6h9v1h-9zM3 7h8v1h-8zM4 8h7v1h-7zM5 9h2v1h-2zM6 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM7 3h5v1h-5zM3 4h1v1h-1zM11 4h1v1h-1zM2 5h1v1h-1zM11 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM2 7h1v1h-1zM11 7h1v1h-1zM3 8h1v1h-1zM11 8h1v1h-1zM4 9h1v1h-1zM7 9h5v1h-5zM5 10h1v1h-1zM7 10h1v1h-1zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
266
+ --clio-art-s6-left-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h3v1h-3zM4 3h8v1h-8zM3 4h9v1h-9zM2 5h10v1h-10zM2 6h10v1h-10zM2 7h10v1h-10zM3 8h9v1h-9zM4 9h8v1h-8zM5 10h3v1h-3zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
267
+ --clio-art-s6-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h2v1h-2zM4 4h7v1h-7zM3 5h8v1h-8zM2 6h9v1h-9zM3 7h8v1h-8zM4 8h7v1h-7zM5 9h2v1h-2zM6 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM7 3h5v1h-5zM3 4h1v1h-1zM11 4h1v1h-1zM2 5h1v1h-1zM11 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM2 7h1v1h-1zM11 7h1v1h-1zM3 8h1v1h-1zM11 8h1v1h-1zM4 9h1v1h-1zM7 9h5v1h-5zM5 10h1v1h-1zM7 10h1v1h-1zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
268
+ --clio-art-s6-right-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h3v1h-3zM4 3h8v1h-8zM3 4h9v1h-9zM2 5h10v1h-10zM2 6h10v1h-10zM2 7h10v1h-10zM3 8h9v1h-9zM4 9h8v1h-8zM5 10h3v1h-3zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
269
+ --clio-art-s6-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM8 2h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM1 5h3v1h-3zM5 5h1v1h-1zM7 5h3v1h-3zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM2 8h1v1h-1zM5 8h1v1h-1zM8 8h1v1h-1zM5 9h1v1h-1z'/%3E%3C/svg%3E");
270
+ --clio-art-s6-ltgray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM2 1h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M1 0h3v1h-3zM0 1h2v1h-2zM3 1h1v1h-1z'/%3E%3C/svg%3E");
271
+ --clio-art-s6-grow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM2 4h1v1h-1zM8 4h5v1h-5zM2 5h1v1h-1zM8 5h1v1h-1zM12 5h1v1h-1zM2 6h1v1h-1zM8 6h1v1h-1zM12 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM12 7h1v1h-1zM2 8h7v1h-7zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM4 10h1v1h-1zM12 10h1v1h-1zM4 11h1v1h-1zM12 11h1v1h-1zM4 12h9v1h-9z'/%3E%3C/svg%3E");
272
+ --clio-art-s6-menucheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z'/%3E%3C/svg%3E");
273
+ --clio-art-s6-menucheck-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z'/%3E%3C/svg%3E");
252
274
  }
253
275
 
254
276
  /* Base. clio.css styles elements only inside its own components, plus bare
@@ -460,17 +482,10 @@
460
482
  justify-self: end;
461
483
  }
462
484
 
463
- /* Pressed close box: the starburst System 6 draws while the mouse is held. */
464
- .title-bar > :is(.close, .close-box)::before {
465
- content: "";
466
- position: absolute;
467
- inset: -1px;
468
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath d='M1 5h3v1H1zM7 5h3v1H7zM5 1h1v3H5zM5 7h1v3H5zM2 2h1v1H2zM3 3h1v1H3zM7 7h1v1H7zM8 8h1v1H8zM8 2h1v1H8zM7 3h1v1H7zM2 8h1v1H2zM3 7h1v1H3z'/%3E%3C/svg%3E") 0 0 / 11px 11px no-repeat;
469
- opacity: 0;
470
- }
471
-
472
- .title-bar > :is(.close, .close-box):is(:active, .active)::before {
473
- opacity: 1;
485
+ /* Held close or zoom box: System 6 draws the same starburst in both
486
+ (measured, 6.0.8); the zoom box's inner square goes while it is held. */
487
+ .title-bar > :is(.close, .close-box, .resize, .resize-box, .zoom):is(:active, .active) {
488
+ background: var(--clio-art-s6-burst) 0 0 / 11px 11px no-repeat border-box, var(--clio-paper);
474
489
  }
475
490
 
476
491
  /* Zoom box: an inner square sharing the outer frame's top-left corner,
@@ -531,13 +546,14 @@
531
546
  flex: none;
532
547
  justify-content: space-between;
533
548
  gap: 16px;
534
- padding: 2px 8px 1px;
549
+ min-height: var(--clio-details-height);
550
+ padding: var(--clio-details-padding);
535
551
  border-bottom: var(--clio-details-border);
536
552
  background: var(--clio-details-bg);
537
553
  box-shadow: var(--clio-details-shadow, none);
538
554
  font-family: var(--clio-font-text);
539
- font-size: var(--clio-font-size);
540
- line-height: 16px;
555
+ font-size: var(--clio-details-font-size);
556
+ line-height: var(--clio-details-height);
541
557
  white-space: nowrap;
542
558
  }
543
559
 
@@ -646,7 +662,7 @@
646
662
  /* Inside a menu bar or a parent item, a menu is a drop-down. */
647
663
  :where(.menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"]) li > :is(.menu, ul[role="menu"]) {
648
664
  position: absolute;
649
- top: 100%;
665
+ top: calc(100% + 1px);
650
666
  left: 0;
651
667
  display: none;
652
668
  }
@@ -727,10 +743,10 @@
727
743
  position: absolute;
728
744
  top: 50%;
729
745
  left: 3px;
730
- width: 10px;
731
- height: 10px;
732
- margin-top: -5px;
733
- background: var(--clio-art-s6-menucheck) 0 0 / 10px 10px no-repeat;
746
+ width: 9px;
747
+ height: 8px;
748
+ margin-top: -4px;
749
+ background: var(--clio-art-s6-menucheck) 0 0 / 9px 8px no-repeat;
734
750
  }
735
751
 
736
752
  :where(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active)::before,
@@ -1393,7 +1409,7 @@
1393
1409
  :where(html.clio-scrollbars)::-webkit-scrollbar-corner {
1394
1410
  border-top: 1px solid var(--clio-ink);
1395
1411
  border-left: 1px solid var(--clio-ink);
1396
- background: var(--clio-scrollbar-button-bg);
1412
+ background: var(--clio-scrollbar-corner);
1397
1413
  }
1398
1414
 
1399
1415
  @supports not selector(::-webkit-scrollbar) {
@@ -1474,6 +1490,7 @@
1474
1490
  --clio-menubar-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #999999;
1475
1491
  --clio-menubar-padding: 0 8px;
1476
1492
  --clio-menu-title-padding: 0 10px;
1493
+ --clio-menu-title-inset: 0px;
1477
1494
  --clio-menu-title-active-bg: #333399;
1478
1495
  --clio-menu-title-active-fg: #ffffff;
1479
1496
  --clio-menu-title-active-shadow: inset 0 1px 0 #6666cc, inset 0 -1px 0 #000088;
@@ -1583,6 +1600,10 @@
1583
1600
  --clio-details-bg: #dddddd;
1584
1601
  --clio-details-border: 1px solid #000000;
1585
1602
  --clio-details-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #aaaaaa;
1603
+ --clio-details-font-size: 12px;
1604
+ --clio-details-height: 20px;
1605
+ --clio-details-padding: 0 8px;
1606
+ --clio-scrollbar-corner: #dddddd;
1586
1607
  --clio-list-bg: #ffffff;
1587
1608
  --clio-list-border: 1px solid #000000;
1588
1609
  --clio-list-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff;
@@ -1697,10 +1718,6 @@
1697
1718
  box-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff, inset -1px -1px 0 #999999;
1698
1719
  }
1699
1720
 
1700
- [data-era="platinum"] .title-bar > :is(.close, .close-box)::before {
1701
- display: none;
1702
- }
1703
-
1704
1721
  /* Zoom: a six-pixel lower-left corner inside the frame. */
1705
1722
  [data-era="platinum"] .title-bar > :is(.resize, .resize-box, .zoom)::before {
1706
1723
  top: 0;