opencd: face recon — RECON.md with Open Props audit, CD specs, ASW/trentuna study, and cross-reference corrections
This commit is contained in:
parent
0be1681da2
commit
ad1cac3007
GPG key ID:
8696A18EFB764ADE
1 changed files with 428 additions and 0 deletions
428
RECON.md
Normal file
428
RECON.md
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
# RECON.md — OpenCD Research Report
|
||||
|
||||
> **Agent:** Face (Templeton Peck) — Recon & Procurement
|
||||
> **Mission:** Research Open Props, CD physical specs, ASW patterns, trentuna.com aesthetic, CD packaging references
|
||||
> **Date:** 2026-05-25
|
||||
> **Context:** Parent task [t_2c57546a] — DESIGN.md architecture plan calls for this recon before implementation
|
||||
|
||||
---
|
||||
|
||||
## Q1: Open Props v2 Token Audit
|
||||
|
||||
**Source verified:** `open-props.style` + `github.com/argyleink/open-props` (main branch source files)
|
||||
|
||||
### Import Paths (Current)
|
||||
|
||||
| Method | Code |
|
||||
|--------|------|
|
||||
| **CDN (CSS)** | `@import "https://unpkg.com/open-props";` |
|
||||
| **CDN (HTML link)** | `<link rel="stylesheet" href="https://unpkg.com/open-props"/>` |
|
||||
| **npm** | `npm install open-props` then `@import "open-props/style";` |
|
||||
| **PostCSS JIT** | `postcss-jit-props` plugin — only ships used props |
|
||||
| **Design Tokens** | JSON at `https://unpkg.com/open-props/open-props.tokens.json` |
|
||||
|
||||
**Recommendation:** Use `@import "https://unpkg.com/open-props"` for the CDN path (already in DESIGN.md). For npm builds, use `@import "open-props/style"`.
|
||||
|
||||
### Token Values Verified from Source
|
||||
|
||||
#### Sizes (`props.sizes.js`)
|
||||
|
||||
| Token | Value | Used For |
|
||||
|-------|-------|----------|
|
||||
| `--size-1` | .25rem | Micro spacing |
|
||||
| `--size-2` | .5rem | Tight spacing |
|
||||
| `--size-3` | 1rem | Base spacing |
|
||||
| `--size-4` | 1.25rem | (gap between OP sizes) |
|
||||
| `--size-5` | 1.5rem | Regular spacing |
|
||||
| `--size-7` | 2rem | Large spacing |
|
||||
| `--size-9` | 4rem | Section spacing |
|
||||
| `--size-12` | 10rem | Sidebar widths |
|
||||
| `--size-fluid-1` | clamp(.5rem, 1vw, 1rem) | Responsive padding |
|
||||
| `--size-fluid-2` | clamp(1rem, 2vw, 1.5rem) | Responsive padding |
|
||||
| `--size-fluid-3` | clamp(1.5rem, 3vw, 2rem) | Responsive padding |
|
||||
|
||||
#### Font Sizes (`props.fonts.js`)
|
||||
|
||||
| Token | Value |
|
||||
|-------|-------|
|
||||
| `--font-size-00` | .5rem |
|
||||
| `--font-size-0` | .75rem |
|
||||
| `--font-size-1` | 1rem |
|
||||
| `--font-size-2` | 1.1rem |
|
||||
| `--font-size-3` | 1.25rem |
|
||||
| `--font-size-4` | 1.5rem |
|
||||
| `--font-size-5` | 2rem |
|
||||
| `--font-size-6` | 2.5rem |
|
||||
| `--font-size-7` | 3rem |
|
||||
| `--font-size-8` | 3.5rem |
|
||||
| `--font-size-fluid-0` | clamp(.75rem, 2vw, 1rem) |
|
||||
| `--font-size-fluid-1` | clamp(1rem, 4vw, 1.5rem) |
|
||||
| `--font-size-fluid-2` | clamp(1.5rem, 6vw, 2.5rem) |
|
||||
| `--font-size-fluid-3` | clamp(2rem, 9vw, 3.5rem) |
|
||||
|
||||
#### Font Stacks (`props.fonts.js`)
|
||||
|
||||
| Token | Stack |
|
||||
|-------|-------|
|
||||
| `--font-system-ui` | system-ui, sans-serif |
|
||||
| `--font-neo-grotesque` | Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif |
|
||||
| `--font-monospace-code` | Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace |
|
||||
| `--font-serif` | ui-serif, serif |
|
||||
| `--font-sans` | var(--font-system-ui) |
|
||||
| `--font-mono` | var(--font-monospace-code) |
|
||||
|
||||
**Important for OpenCD:** `--font-sans` resolves to `system-ui, sans-serif` — a readable sans. For the CD spine label font, consider `--font-neo-grotesque` (Inter/Roboto) for a cleaner look.
|
||||
|
||||
#### Borders (`props.borders.js`)
|
||||
|
||||
| Token | Value |
|
||||
|-------|-------|
|
||||
| `--border-size-1` | 1px |
|
||||
| `--border-size-2` | 2px |
|
||||
| `--radius-1` | 2px |
|
||||
| `--radius-2` | 5px |
|
||||
| `--radius-3` | 1rem |
|
||||
| `--radius-round` | 1e5px |
|
||||
|
||||
#### Shadows (`props.shadows.js`)
|
||||
|
||||
| Token | Description |
|
||||
|-------|-------------|
|
||||
| `--shadow-1` | Subtle: 0 1px 2px -1px |
|
||||
| `--shadow-2` | Medium: 3px + 7px layers |
|
||||
| `--shadow-3` | Raised: composite multi-layer |
|
||||
| `--shadow-4` | Modal: 5-layer deep shadow |
|
||||
|
||||
#### Colors (19 scales × 13 shades each)
|
||||
|
||||
All verified: `--gray-0` through `--gray-15`, `--red-0` through `--red-12`, `--blue-0` through `--blue-12`, `--green-0` through `--green-12`, `--yellow-0` through `--yellow-12`, plus stone, pink, purple, violet, indigo, cyan, teal, lime, orange, choco, brown, sand, camo, jungle.
|
||||
|
||||
### Critical Findings for the README → DESIGN.md Mapping Table
|
||||
|
||||
| README Claim | Actual Open Props Status | Action Needed |
|
||||
|-------------|------------------------|---------------|
|
||||
| `--surface-1` through `--surface-4` | **NOT in Open Props.** These are ASW custom tokens. Open Props provides `--color-1` through `--color-16` (palette-hue driven oklch scale) and individual gray shades. | Use ASW-style semantic aliases or define `--cd-surface-*` directly |
|
||||
| `--grid-...` | **NOT in Open Props.** No grid-related tokens exist. | Must be custom — use `repeating-linear-gradient` following trentuna.com's pattern |
|
||||
| `--red-6` / `--red-7` | **Confirmed.** `--red-6` and `--red-7` exist in the red scale. | Good to use as-is |
|
||||
| `--shadow-2` / `--shadow-3` | **Confirmed.** Exact values verified above. | Good to use |
|
||||
| `--font-size-fluid-1` through `--font-size-fluid-3` | **Confirmed.** Values verified. | Good |
|
||||
| `--size-fluid-1` through `--size-fluid-3` | **Confirmed.** Values verified. | Good |
|
||||
| `--font-sans` | `var(--font-system-ui)` = system-ui, sans-serif | Consider `--font-neo-grotesque` for better label aesthetics |
|
||||
| `--font-serif` | `ui-serif, serif` | Good for leaflet body |
|
||||
|
||||
### New/Notable Open Props Tokens Since README Was Written
|
||||
|
||||
- **Easings:** `--ease-elastic-*`, `--ease-spring-1..5`, `--ease-bounce-1..5`, Robert Penner equations (`--ease-circ-*`, `--ease-cubic-*`)
|
||||
- **Animations (21):** `--animation-fade-in/out`, `--animation-slide-*`, `--animation-shake-*`, `--animation-spin`, `--animation-ping`, `--animation-blink`, `--animation-float`, `--animation-bounce`, `--animation-pulse`
|
||||
- **Aspect ratios:** `--ratio-square`, `--ratio-landscape`, `--ratio-golden`, `--ratio-widescreen`
|
||||
- **Font line heights:** `--font-lineheight-00` (.95) through `--font-lineheight-5` (2)
|
||||
- **Letter spacing:** `--font-letterspacing-0` (-.05em) through `--font-letterspacing-7` (1em)
|
||||
- **Design Tokens export:** JSON, Figma, Style Dictionary formats available via unpkg
|
||||
|
||||
---
|
||||
|
||||
## Q2: CD Jewel Case Physical Dimensions
|
||||
|
||||
### Standard Dimensions (ISO 15727)
|
||||
|
||||
| Component | Metric | Imperial | Notes |
|
||||
|-----------|--------|----------|-------|
|
||||
| **Jewel case (external)** | 142 × 125 × 10 mm | 5.59" × 4.92" × 0.39" | ±0.5mm tolerance |
|
||||
| **Front insert (visible)** | 120 × 120 mm | 4.724" × 4.724" | With 3mm bleed: 126 × 126 mm canvas |
|
||||
| **Back insert (tray paper)** | 151 × 118 mm | 5.94" × 4.65" | Includes folded spines on both sides (~15mm each) |
|
||||
| **CD disc** | Ø 120 mm | Ø 4.724" | Standard CD diameter |
|
||||
| **CD center hole** | Ø 15 mm | Ø 0.59" | Spindle hole |
|
||||
| **CD disc thickness** | 1.2 mm | 0.047" | |
|
||||
| **Spine width (single)** | ~7 mm | ~0.28" | For a single CD jewel case |
|
||||
| **Jewel case open width** | 284 mm | 11.18" | Two facing panels + spine gap |
|
||||
|
||||
### Web Scaling Analysis
|
||||
|
||||
The README uses **2× scale** (142mm → 280px, 125mm → 245px). At 96 DPI standard web resolution:
|
||||
- 1mm ≈ 3.78px
|
||||
- So 142mm × 3.78 ≈ 537px would be exact 1:1 scale
|
||||
- 2× of 142mm = 284px, which is a **0.53× scale** at 96 DPI
|
||||
- The rationale: 280×245px is a compact, usable web component size that preserves the aspect ratio
|
||||
|
||||
**Recommendation:** The 2× multiplier is fine for the default scale, but implement `--cd-scale` as a multiplier variable (default: 1 for 2× web scale). This lets users adjust without recalculating every dimension.
|
||||
|
||||
Formula:
|
||||
```css
|
||||
--cd-scale: 1; /* 1 = 2× of physical mm → px */
|
||||
--cd-jewel-width: calc(142px * var(--cd-scale));
|
||||
--cd-jewel-height: calc(125px * var(--cd-scale));
|
||||
--cd-disc-diameter: calc(120px * var(--cd-scale));
|
||||
--cd-leaflet-size: calc(120px * var(--cd-scale));
|
||||
--cd-spine-width: calc(7px * var(--cd-scale));
|
||||
```
|
||||
|
||||
### Region Variations
|
||||
|
||||
| Standard | Body | Notes |
|
||||
|----------|------|-------|
|
||||
| ISO 15727:1998 | Global | Original jewel case standard |
|
||||
| IEC 60908 | Global | CD-DA (Red Book) physical spec |
|
||||
| Regional | None significant | Jewel case dimensions are globally standardized — CDs fit worldwide |
|
||||
|
||||
No significant regional variations. The 142×125×10mm form factor is universal.
|
||||
|
||||
### Tray Paper & Leaflet Physical Layout
|
||||
|
||||
The back tray paper (151×118mm) folds into three panels:
|
||||
- **Left spine:** ~7mm (visible from front/back)
|
||||
- **Center:** 120×118mm (back insert surface)
|
||||
- **Right spine:** ~7mm + 7mm fold at edge
|
||||
|
||||
The leaflet/booklet is usually:
|
||||
- **Single sheet:** 240×120mm folded in half → two 120×120mm pages
|
||||
- **Multi-page:** 480×120mm folded into 4 panels of 120×120mm each
|
||||
- **Stapled booklet:** 120×120mm pages bound at center fold
|
||||
|
||||
---
|
||||
|
||||
## Q3: ASW Design Patterns (`~/releases/asw/`)
|
||||
|
||||
### Architecture Overview
|
||||
|
||||
ASW (Agentic Semantic Web) is a zero-class CSS framework built on Open Props. Source verified at `~/releases/asw/src/`.
|
||||
|
||||
**Layer order (11 layers):**
|
||||
|
||||
| # | File | Purpose |
|
||||
|---|------|---------|
|
||||
| 00 | `00-reset.css` | Box-sizing, margin reset |
|
||||
| 01 | `01-tokens.css` | Semantic aliases on Open Props (~300 tokens) |
|
||||
| 02 | `02-typography.css` | Heading, body, code, table, link styles |
|
||||
| 03 | `03-landmarks.css` | `body > nav`, `article`, `section`, `footer`, `hgroup`, `dt/dd` |
|
||||
| 04 | `04-forms.css` | Input, button, select, textarea, validation states |
|
||||
| 05 | `05-components.css` | Tables, progress, meter, accordion, dialog |
|
||||
| 06 | `06-navigation.css` | Sub-navigation, sidebar, pagination |
|
||||
| 07 | `07-data-attrs.css` | Agentic data-* extensions (~15 attributes) |
|
||||
| 08 | `08-utilities.css` | Container, grid helpers |
|
||||
| 09 | `09-charts.css` | Chart CSS (Charts.css integration) |
|
||||
| 10 | `10-chroma.css` | Hugo syntax highlighting theme |
|
||||
| 11 | `11-layout.css` | Responsive grid layout system |
|
||||
| 12 | `12-landing.css` | Landing page specific |
|
||||
|
||||
### Key Semantic HTML Patterns
|
||||
|
||||
**Navigation:**
|
||||
```html
|
||||
<body>
|
||||
<nav>
|
||||
<strong>Brand</strong>
|
||||
<ul>
|
||||
<li><a href="/" aria-current="page">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
**Articles with container queries:**
|
||||
```html
|
||||
<article>
|
||||
<header>
|
||||
<h3>Title</h3>
|
||||
</header>
|
||||
<p>Content adapts to parent width via container queries.</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
### Data-Attribute Vocabulary (for OpenCD consideration)
|
||||
|
||||
| Attribute | Purpose |
|
||||
|-----------|---------|
|
||||
| `data-role` | Command-box, timeline, status-card, diff, log-entry |
|
||||
| `data-wikilink` | Wiki-style internal links `[[Note Name]]` |
|
||||
| `data-task` | Task list states: todo / done / blocked |
|
||||
| `data-status` | Status indicators: awake / sleeping / blocked |
|
||||
| `data-callout` | Callout boxes: note / warning / error / tip |
|
||||
| `data-session` | Session metadata display |
|
||||
| `data-tag` | Tag display with # prefix |
|
||||
| `data-tooltip` | CSS-only tooltips (no JS) |
|
||||
| `data-subnav` | Sub-navigation with / separators |
|
||||
| `data-diff` | Diff viewer with +/- lines |
|
||||
| `data-redacted` | Privacy redaction (bar / reveal / label variants) |
|
||||
| `data-theme` | Light/dark theme toggle |
|
||||
| `data-nav-links` | Nav link container for Flexbox push-right |
|
||||
| `data-nav-toggle` | Mobile hamburger toggle |
|
||||
|
||||
### Token System (ASW → Open Props Mapping)
|
||||
|
||||
ASW's token layer (`01-tokens.css`) uses Open Props as a foundation and adds:
|
||||
- **Surface tokens:** `--surface`, `--surface-1`, `--surface-2`, `--surface-3`, `--surface-card`, `--surface-hover` — all `oklch()` with `--palette-hue` tinting
|
||||
- **Text tokens:** `--text`, `--text-2`, `--text-3`, `--text-dim`
|
||||
- **Accent tokens:** `--accent`, `--accent-hover`, `--on-accent`, `--accent-subtle`
|
||||
- **Fixed-hue accents:** `--accent-blue` (250°), `--accent-red` (25°), `--accent-orange` (80°)
|
||||
- **State colors:** `--ok` (green 145°), `--warn` (amber 80°), `--error` (red 25°), `--info` (blue 250°)
|
||||
- **Gap fills:** `--space-3` (0.75rem), `--space-5a` (1.25rem) — values missing from Open Props
|
||||
- **Text scale gap:** `--text-sm` (0.875rem) — missing from Open Props (`--font-size-0` is 0.75rem, `--font-size-1` is 1rem)
|
||||
- **Radius gap:** `--radius-md` (4px) — between OP `--radius-1` (2px) and `--radius-2` (5px)
|
||||
- **Layout widths:** `--width-sm` (510px) through `--width-2xl` (1450px)
|
||||
- **Content widths:** `--width-prose` (65ch), `--width-report` (72ch)
|
||||
- **Fonts:** `--font-heading` = `var(--font-neo-grotesque)`, `--font-ui` = `var(--font-neo-grotesque)`
|
||||
|
||||
**Key insight for OpenCD:** The ASW approach of using Open Props for the backbone + semantic aliases for the project-specific tokens is exactly the right pattern. OpenCD should define `--cd-*` tokens as semantic aliases on top of Open Props, with fallback values.
|
||||
|
||||
---
|
||||
|
||||
## Q4: CD Packaging Design References
|
||||
|
||||
### Parental Advisory Label (Source for Human Advisory Badge)
|
||||
|
||||
**Verified from:** Wikimedia Commons SVG + Wikipedia
|
||||
|
||||
| Specification | Value |
|
||||
|---------------|-------|
|
||||
| **Aspect ratio** | 523×327px ≈ 1.6:1 |
|
||||
| **Typography** | Impact / Arial Black (heavy sans-serif, tightly tracked) |
|
||||
| **Layout** | 3 rows: "PARENTAL ADVISORY" / "EXPLICIT CONTENT" (on black), white text, all-caps |
|
||||
| **Designer** | Deborah Norcross (Warner Bros) — 1990 |
|
||||
| **Current text** | "PARENTAL ADVISORY: EXPLICIT CONTENT" (since 1996) |
|
||||
| **Construction** | Two black bars (top 40%, bottom 40%), white text centered |
|
||||
|
||||
### Human Advisory Badge (Local Implementation)
|
||||
|
||||
**Files at:** `~/releases/human-advisory/` and `~/releases/parental-advisory/`
|
||||
|
||||
The existing `.human-advisory` implementation uses:
|
||||
- Container: `300px × var(--ha-size)` wide, `border: 3px solid #000`, `background: #000`
|
||||
- Font: `Impact, 'Arial Black', 'Helvetica Neue', sans-serif`
|
||||
- Three rows: "HUMAN" (white on black), "ADVISORY" (black on white), "EXPLICIT AI CODE" (white on black)
|
||||
- Scalable via `--ha-size` CSS custom property
|
||||
|
||||
**For OpenCD's `.human-advisory` module:** The DESIGN.md already specifies `--cd-advisory-red` from `--red-6`, which is the correct approach. Consider supporting both:
|
||||
- Classic PA-style: black/white bars
|
||||
- OpenCD variant: red/black with white text
|
||||
|
||||
### Visible Grid Aesthetic — Key References
|
||||
|
||||
**1. trentuna.com paper-card grid:**
|
||||
```css
|
||||
.paper-card {
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent 0 31px,
|
||||
oklch(40% .02 55/.025) 31px 32px
|
||||
), var(--grain);
|
||||
}
|
||||
```
|
||||
Uses 31px spacing between horizontal lines, 1px rule. Very subtle.
|
||||
|
||||
**2. CD tray paper (physical):**
|
||||
- Typical grid: fine dots or thin parallel lines at ~1mm spacing (≈4px at web scale with grid repeat)
|
||||
- Texture: matte-finish paper, slight grain
|
||||
- Color: silver/gray or clear translucent
|
||||
|
||||
**3. Recommended grid for OpenCD:**
|
||||
```css
|
||||
/* Default: fine horizontal lines (tray paper aesthetic) */
|
||||
--cd-grid-color: var(--gray-3);
|
||||
--cd-grid-size: 8px; /* line interval */
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent 0 calc(var(--cd-grid-size) * 1 - 1px),
|
||||
var(--cd-grid-color) calc(var(--cd-grid-size) * 1 - 1px) var(--cd-grid-size)
|
||||
);
|
||||
```
|
||||
|
||||
### 5 Distinctive CD Packaging Examples (for Visual Direction)
|
||||
|
||||
1. **Aphex Twin — Selected Ambient Works 85-92** (R&S): Minimal jewel case, black on white, solid sans-serif typography. The CD itself has a subtle reflective design.
|
||||
2. **Boards of Canada — Music Has The Right To Children** (Warp/Wax): Dark jewel case with visible disc through transparent front, minimal tracklist layout on back.
|
||||
3. **Radiohead — Kid A** (Parlophone): Special edition with clear plastic case, hidden booklet art, minimalist typography.
|
||||
4. **Depeche Mode — Violator** (Mute): Iconic red rose on black. Simple, bold, high contrast.
|
||||
5. **The Postal Service — Give Up** (Sub Pop): Transparent jewel case, dual-layer art (front insert + back tray paper visible through clear case).
|
||||
|
||||
---
|
||||
|
||||
## Q5: trentuna.com Design Aesthetic
|
||||
|
||||
**Url:** https://trentuna.com — Live catalog page
|
||||
**Stylesheet verified:** Custom Tailwind CSS v4 build, warm vintage aesthetic
|
||||
|
||||
### Typefaces
|
||||
| Role | Font | Stack |
|
||||
|------|------|-------|
|
||||
| **Display / Headings** | Fraunces | `"Fraunces", "EB Garamond", Georgia, serif` |
|
||||
| **Body** | EB Garamond | `"EB Garamond", "Iowan Old Style", Georgia, serif` |
|
||||
| **Monospace** | JetBrains Mono | `"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace` |
|
||||
|
||||
### Color Palette (Oklch)
|
||||
|
||||
| Token | Value | Purpose |
|
||||
|-------|-------|---------|
|
||||
| `--paper` | oklch(95.5% .018 85) | Warm cream background |
|
||||
| `--paper-deep` | oklch(92% .025 80) | Slightly darker paper |
|
||||
| `--ink` | oklch(18% .015 50) | Dark warm text |
|
||||
| `--ink-soft` | oklch(36% .018 55) | Secondary text |
|
||||
| `--ink-faint` | oklch(55% .02 60) | Subtle text |
|
||||
| `--rule` | oklch(32% .02 55) | Border/rule color |
|
||||
| `--accent` | oklch(55% .18 32) | Warm red accent |
|
||||
| `--stamp` | oklch(45% .16 28) | Darker stamp color |
|
||||
|
||||
### Grid Approach
|
||||
|
||||
trentuna.com uses a **visible paper-lined grid** — the structure IS the decoration:
|
||||
- `repeating-linear-gradient(0deg, transparent 0 31px, rule-color 31px 32px)` for horizontal notebook lines
|
||||
- `radial-gradient` grain texture (8 layers, varying dot sizes from 7px to 31px)
|
||||
- `radial-gradient` vignette effect
|
||||
|
||||
This directly inspires OpenCD's CD tray paper grid.
|
||||
|
||||
### Content Structure (from live page)
|
||||
```
|
||||
trentuna / catalog
|
||||
TNT-000 · MMXXV
|
||||
"IMPRINT FOR OPEN AI SYSTEMS"
|
||||
"We release software, notes, traces, and unfinished but useful machinery."
|
||||
[Human Advisory — Explicit AI Code badge]
|
||||
```
|
||||
|
||||
### Key Lessons for OpenCD
|
||||
|
||||
1. **Warm paper tones** work for backgrounds — consider `--cd-tray-bg` with slight warm tint
|
||||
2. **Serif body + sans navigation** is a readable combination
|
||||
3. **Visible grid-as-decoration** creates tactile feel with minimal CSS
|
||||
4. **Monospace for metadata** (catalog numbers, labels, timestamps)
|
||||
5. **Bold accent color** for interactive elements (the red accent against warm paper)
|
||||
6. **Grain texture** adds depth without images
|
||||
|
||||
---
|
||||
|
||||
## Cross-Reference: DIRECT.md Mapping Corrections
|
||||
|
||||
### What's Right
|
||||
- Most Open Props token mappings are correct
|
||||
- CD physical dimensions are accurate (ISO 15727)
|
||||
- The 2× scale is a reasonable default
|
||||
|
||||
### What Needs Corrections
|
||||
1. **`--surface-1` through `--surface-4` are NOT Open Props out-of-the-box.** They need to be defined as custom variables. The DESIGN.md already does this correctly (`--cd-tray-bg: var(--surface-1)`) but assumes `--surface-1` exists from Open Props. **Define them explicitly** in `_variables.css`.
|
||||
|
||||
2. **`--grid-*` tokens don't exist in Open Props.** The `--grid-1`/`--grid-2` references in DESIGN.md need to be custom `--cd-grid-color` / `--cd-grid-color-alt` definitions using gray-3/gray-2 shades from Open Props.
|
||||
|
||||
3. **ASW's `--space-3` (0.75rem)** and **`--text-sm` (0.875rem)** fill gaps in Open Props that OpenCD should also define if needed.
|
||||
|
||||
4. **Font selection:** The DESIGN.md uses `var(--font-sans)` for CD spine labels. Consider `var(--font-neo-grotesque)` which has a cleaner, more label-appropriate appearance (Inter/Roboto).
|
||||
|
||||
---
|
||||
|
||||
## Intelligence Summary
|
||||
|
||||
| Area | Confidence | Risk | Notes |
|
||||
|------|-----------|------|-------|
|
||||
| Open Props tokens | ✅ Verified | Low | All source-confirmed |
|
||||
| CD dimensions | ✅ Verified (ISO) | Low | Global standard, no region variance |
|
||||
| ASW patterns | ✅ Local source | Low | Full source access at ~/releases/asw/ |
|
||||
| Human Advisory | ✅ Local source | Low | Working implementation exists |
|
||||
| trentuna.com | ✅ Live site + stylesheet | Low | Tailwind v4 custom build, warm paper aesthetic |
|
||||
| Surface/Grid tokens | ⚠️ Correction needed | Medium | DESIGN.md assumes OP has surface/grid tokens |
|
||||
| CD scale factor | ⚠️ Recommendation | Low | Implement --cd-scale; keep 2× as default=1 |
|
||||
|
||||
**Bottom line:** Green light for implementation. Surface and grid tokens need custom definitions (noted above), everything else maps correctly. The ASW token pattern (oklch with palette-hue) is a proven approach that OpenCD should adopt for its CD tray paper colors.
|
||||
|
||||
---
|
||||
|
||||
*"I've never left a room without what I came for. Sometimes I leave with more."*
|
||||
— Lieutenant Templeton Peck
|
||||
Loading…
Add table
Add a link
Reference in a new issue