Compare commits
2 commits
b54ffa943b
...
c8bb24d046
| Author | SHA1 | Date | |
|---|---|---|---|
c8bb24d046
|
|||
163a971af7
|
3 changed files with 241 additions and 3 deletions
98
RELEASE_NOTES.md
Normal file
98
RELEASE_NOTES.md
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
# OpenCD v1.0.0 — Release Notes
|
||||
|
||||
> *"I love it when a plan comes together."* — Col. John "Hannibal" Smith
|
||||
|
||||
**Release date:** 2026-05-25
|
||||
**Commit:** Latest on `main` (GPG-signed: `D1ADA6EC42B96E5BDAE95B5B48DF9E0094796329`)
|
||||
**Framework:** OpenCD — Physical CD jewel case HTML/CSS framework
|
||||
**Built on:** [Open Props](https://open-props.style) v2
|
||||
|
||||
---
|
||||
|
||||
## Team Credits
|
||||
|
||||
| Role | Profile | Key | Area |
|
||||
|------|---------|-----|------|
|
||||
| **Commander** | Hannibal Smith | `48DF9E0094796329` | Final synthesis, release, signed final commit |
|
||||
| **Recon** | Face | `696A18EFB764ADE` | RECON.md — Open Props audit, CD specs, ASW/trentuna study |
|
||||
| **Gate** | Amy Allen | `C103A95E28714F6C` | MISSION_BRIEF.md — quality criteria, findings, gate review |
|
||||
| **Prototype** | Murdock | `ABE295FFEB4571F8` | opencd.css + 3 HTML templates (jewel-case, leaflet, back-tray) |
|
||||
| **Production** | B.A. Baracus | `1D05905DE3C03A27` | Hardened opencd.css — zero magic numbers, Nous auth, ASW semantics |
|
||||
| **Validation** | Amy Allen | `C103A95E28714F6C` | VALIDATION.md — 12 PASS, 1 CONCERNS, 0 FAIL |
|
||||
| **Architect** | Hannibal Smith | `48DF9E0094796329` | DESIGN.md — framework architecture planning |
|
||||
|
||||
All commits are GPG-signed with individual team member keys.
|
||||
|
||||
---
|
||||
|
||||
## Deliverables
|
||||
|
||||
### Core Framework
|
||||
- **`opencd.css`** (711 lines) — CD jewel case CSS framework
|
||||
- ISO 15727 physical CD dimensions at 2× scale
|
||||
- 60+ `--cd-*` custom properties (zero Open Props token leakage)
|
||||
- ASW-style semantic surface layers in `oklch` colorspace
|
||||
- 7-component architecture: jewel case, spine, leaflet, disc art, advisory badge, back tray, grid overlay
|
||||
- Open/close state via BEM modifier + `data-jewel-state` attribute
|
||||
- Container query responsive design
|
||||
- Print styles with physical `mm` units
|
||||
- Grain texture utility classes
|
||||
- **Zero magic numbers** — every value is a `--cd-*` custom property
|
||||
|
||||
### Templates
|
||||
- **`templates/jewel-case.html`** — CD jewel case wrapper with open/close + scale demo controls
|
||||
- **`templates/leaflet.html`** — 4-page booklet with page-turn navigation
|
||||
- **`templates/back-tray.html`** — Dual spines, tracklist, credits, grid toggle
|
||||
|
||||
### Documentation
|
||||
- **`README.md`** — Project overview, quick start, philosophy
|
||||
- **`DESIGN.md`** — Architecture plan: 9 CSS modules, Open Props token mapping, responsibility matrix
|
||||
- **`RECON.md`** — Reconnaissance: Open Props audit, CD specification analysis, ASW/trentuna study
|
||||
- **`MISSION_BRIEF.md`** — Quality criteria, 4 findings, and gate review with CONCERNS verdict for initial prototype
|
||||
- **`VALIDATION.md`** — 12 PASS / 1 CONCERNS / 0 FAIL validation of production build (follow-up fixed)
|
||||
- **`RELEASE_NOTES.md`** — This file
|
||||
|
||||
### Infrastructure
|
||||
- **`.env.example`** — Nous auth configuration schema
|
||||
- **`.gitignore`** — Standard ignores (`.env`, editor files, build artifacts)
|
||||
|
||||
---
|
||||
|
||||
## Quality Summary
|
||||
|
||||
The production build passed validation with 12/12 PASS criteria, 0 FAIL. A single CONCERNS — three inline values violating the zero-magic-numbers principle — was addressed in this release (final synthesis pass). The three values (`font-weight: 600`, `opacity: 0.8`, `z-index: 1`) now use proper `--cd-*` custom properties: `--cd-font-weight-semibold`, `--cd-text-opacity-muted`, `--cd-z-stack-base`.
|
||||
|
||||
---
|
||||
|
||||
## Architecture Highlights
|
||||
|
||||
- **Physical-dimension-driven design** — every layout value traces back to real CD packaging measurements (ISO 15727)
|
||||
- **Custom property cascade** — `:root` defines dimension, color, typography, spacing, and motion tokens; components reference `--cd-*` only
|
||||
- **ASW-style colors** — Surface layers use custom `oklch` values instead of Open Props defaults, giving the framework a distinct visual identity
|
||||
- **Open Props integration** — Safely uses Open Props for internal values (font sizes, spacing ratios, shadows, easings) while exposing a clean `--cd-*` public API
|
||||
- **Responsive architecture** — Container queries at 350px/550px breakpoints; print styles auto-switch to physical `mm` units
|
||||
- **No JavaScript required** — Template interactions (open/close, page turns) use native HTML/CSS with minimal inline JS for demo controls
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
```html
|
||||
<!-- Include in your project -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/open-props">
|
||||
<link rel="stylesheet" href="opencd.css">
|
||||
|
||||
<!-- Use a template -->
|
||||
<h1>Your CD Project</h1>
|
||||
<article class="cd-jewel" data-jewel-state="open">
|
||||
<!-- ... -->
|
||||
</article>
|
||||
```
|
||||
|
||||
See `templates/jewel-case.html` for a complete working example.
|
||||
|
||||
---
|
||||
|
||||
**License:** MIT
|
||||
**Built with:** Open Props v2+
|
||||
**Nous deployment:** Portal URL and API key schema in `.env.example`
|
||||
131
VALIDATION.md
Normal file
131
VALIDATION.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
# VALIDATION — OpenCD Production Build (t_70b74145)
|
||||
|
||||
**Reviewer:** Amy Amanda Allen <amy@a-team.dev>
|
||||
**Date:** 2026-05-25
|
||||
**Parent task:** t_13557bde (B.A. Baracus — production opencd.css hardened)
|
||||
**Commit under review:** `415bb4f4029b9199b39e99582ccee24ac8c543b2`
|
||||
**GPG:** Signed with `1D05905DE3C03A27` (B.A. Baracus)
|
||||
|
||||
---
|
||||
|
||||
## Verdict: CONCERNS
|
||||
|
||||
The production build is structurally sound and the bulk of quality criteria are met. However, three inline values in the component CSS violate the file's own stated principle ("Zero magic numbers — every value is a --cd-* custom property"). These are minor but need documenting.
|
||||
|
||||
---
|
||||
|
||||
## 1. GPG Signature — PASS
|
||||
|
||||
| Check | Result | Evidence |
|
||||
|---|---|---|
|
||||
| Commit exists | ✓ | `415bb4f4029b9199b39e99582ccee24ac8c543b2` |
|
||||
| GPG-signed | ✓ | Signature present in `git log --show-signature` |
|
||||
| Correct key | ✓ | RSA `1D05905DE3C03A27` — B.A. Baracus <ba@a-team.dev> |
|
||||
| Author match | ✓ | `Author: B.A. Baracus <ba@a-team.dev>` |
|
||||
|
||||
*Note: B.A.'s public key not in Amy's keyring (expected — cross-team validation). Signature field is present and well-formed.*
|
||||
|
||||
---
|
||||
|
||||
## 2. Nous Auth — PASS
|
||||
|
||||
| Check | Result | Evidence |
|
||||
|---|---|---|
|
||||
| `.env.example` has auth config | ✓ | `NOUS_AGENT_KEY_ID=cmpkk7n6k000tkq0birz3zk5a` with placeholder key |
|
||||
| `.env` gitignored | ✓ | `.gitignore` line 2: `.env` |
|
||||
| `.gitignore` committed | ✓ | Commit `415bb4f` includes `.gitignore` |
|
||||
| `.env.example` committed | ✓ | Commit `415bb4f` includes `.env.example` |
|
||||
|
||||
`.env` (the actual secrets file) is gitignored and read-protected — intentional and correct behavior. The example file provides the full schema.
|
||||
|
||||
---
|
||||
|
||||
## 3. Template Variable Fixes — PASS
|
||||
|
||||
| Check | Result | Evidence |
|
||||
|---|---|---|
|
||||
| `var(--font-system-ui)` in jewel-case.html | FIXED ✓ | Line 19: `font-family: var(--font-sans)` |
|
||||
| `var(--font-system-ui)` in leaflet.html | FIXED ✓ | Line 19: `font-family: var(--font-sans)` |
|
||||
| `var(--font-system-ui)` in back-tray.html | FIXED ✓ | Line 19: `font-family: var(--font-sans)` |
|
||||
| Any remaining `--font-system-ui` in templates or CSS | NONE ✓ | Only in `RECON.md` (historical reference, not active code) |
|
||||
| `--cd-font-neo-grotesque` canonical throughout | CONSISTENT ✓ | Defined line 53, referenced as `--cd-font-label` line 54, used in all templates |
|
||||
|
||||
---
|
||||
|
||||
## 4. opencd.css — Zero Magic Numbers Review
|
||||
|
||||
**File structure:** 703 lines — custom properties / reset / jewel case / spine / leaflet / disc art / advisory badge / back tray / grid overlay / open/close states / responsive / print / grain texture.
|
||||
|
||||
### 4.1 Physical CD Dimensions — PASS
|
||||
|
||||
All dimensions documented with ISO 15727 reference and formula:
|
||||
```
|
||||
--cd-jewel-width: calc(280px * var(--cd-scale)); /* 142 mm × 2 */
|
||||
--cd-jewel-height: calc(245px * var(--cd-scale)); /* 125 mm × 2 */
|
||||
--cd-jewel-open-width: calc(560px * var(--cd-scale)); /* 284 mm × 2 */
|
||||
--cd-disc-diameter: calc(240px * var(--cd-scale)); /* 120 mm × 2 */
|
||||
--cd-disc-hole: calc(30px * var(--cd-scale)); /* Ø15 mm × 2 */
|
||||
--cd-leaflet-size: calc(240px * var(--cd-scale)); /* 120 mm sq × 2 */
|
||||
--cd-spine-width: calc(14px * var(--cd-scale)); /* ~7 mm × 2 */
|
||||
--cd-tray-width: calc(260px * var(--cd-scale)); /* ~130 mm × 2 */
|
||||
```
|
||||
|
||||
### 4.2 Custom Property Surface — PASS
|
||||
|
||||
~60 `--cd-*` tokens defined across: dimensions, surface colors (`oklch` — not Open Props), typography, spacing, text colors, grid colors, advisory badge, shadows, borders, letter spacing, motion/easing, print dimensions, grain texture, responsive breakpoints, disc decoration ratios.
|
||||
|
||||
### 4.3 Magic Number Audit — **CONCERNS**
|
||||
|
||||
The file header states: *"Zero magic numbers — every value is a --cd-* custom property"*
|
||||
|
||||
Three values in component CSS violate this:
|
||||
|
||||
| Line | Location | Value | Issue |
|
||||
|---|---|---|---|
|
||||
| 247 | `.spine-label` | `font-weight: 600` | Should be a `--cd-*` property (e.g. `--cd-font-weight-semibold`) |
|
||||
| 256 | `.spine-track` | `opacity: 0.8` | Should be a `--cd-*` property (e.g. `--cd-text-opacity-muted`) |
|
||||
| 373 | `.disc-hole` | `z-index: 1` | Should be a `--cd-*` property (e.g. `--cd-z-stack-base`) |
|
||||
|
||||
**Severity:** Low. These are minor and don't cause functional issues. They contradict the file's own stated principle. Open Props provides `--font-weight-6` (= 600) and `--elevation-z-*` for z-index, which could also serve here.
|
||||
|
||||
### 4.4 Grid Overlay — PASS
|
||||
|
||||
Five utility classes: `.cd-grid` (base), `--fine`, `--coarse`, `--crosshatch`, and content crosshatch. Uses `--cd-grid-color` / `--cd-grid-color-alt` from custom tokens (not Open Props directly, per Gate review Finding #2). All offset values are structural (not design magic numbers).
|
||||
|
||||
### 4.5 ASW Semantic Surface — PASS
|
||||
|
||||
Surface layers defined in `oklch` with custom values (not Open Props, per Gate review Finding #1):
|
||||
- `--cd-surface-1` through `--cd-surface-4` — ASW-style oklch values
|
||||
- `--cd-surface-0` — via `var(--gray-0)` for lightest surface
|
||||
- Semantic aliases: `--cd-tray-bg`, `--cd-tray-bg-raised`, `--cd-tray-bg-sunken`, `--cd-spine-bg`
|
||||
|
||||
### 4.6 Component Architecture — PASS
|
||||
|
||||
Component hierarchy clean: jewel case container → spine + inner → leaflet content + disc art + advisory badge → back tray. Open/closed state governed by both BEM modifier and `data-jewel-state` attribute. Container queries handle responsive layout. Print styles auto-switch to physical mm dimensions.
|
||||
|
||||
---
|
||||
|
||||
## 5. Additional Files — PASS
|
||||
|
||||
| File | Status | Notes |
|
||||
|---|---|---|
|
||||
| `templates/jewel-case.html` | ✓ | Demo controls for open/close + scale. Inline JS functional |
|
||||
| `templates/leaflet.html` | ✓ | 4-page booklet with page-turn navigation. Functional |
|
||||
| `templates/back-tray.html` | ✓ | Dual spines, tracklist, credits, grid toggle. Functional |
|
||||
| `.env.example` | ✓ | Nous auth schema provided |
|
||||
| `.gitignore` | ✓ | `.env` excluded, plus standard ignores |
|
||||
| `opencd.css` | ✓ | See §4 above |
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
```
|
||||
PASS 12 — GPG signature, Nous auth, template fixes, dimensions,
|
||||
surfaces, grid, components, responsive, print, grain,
|
||||
.env.example, .gitignore
|
||||
CONCERNS 1 — Three inline values violate zero-magic-numbers principle
|
||||
FAIL 0
|
||||
```
|
||||
|
||||
**Recommendation:** Accept the deliverable as production-ready. The three magic numbers are cosmetic inconsistencies with the stated principle, not functional defects. Consider addressing them in a follow-up commit for principle purity.
|
||||
15
opencd.css
15
opencd.css
|
|
@ -59,6 +59,9 @@
|
|||
--cd-font-size-title: var(--font-size-fluid-2);
|
||||
--cd-font-size-display: var(--font-size-fluid-3);
|
||||
|
||||
/* ── Font weights ── */
|
||||
--cd-font-weight-semibold: 600;
|
||||
|
||||
/* ── Spine font sizes ── */
|
||||
--cd-spine-font-xs: var(--font-size-0);
|
||||
--cd-spine-font-sm: var(--font-size-1);
|
||||
|
|
@ -82,6 +85,7 @@
|
|||
--cd-text-secondary: var(--gray-7);
|
||||
--cd-text-muted: var(--gray-5);
|
||||
--cd-text-on-spine: var(--gray-1);
|
||||
--cd-text-opacity-muted: 0.8;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Surface / Tray Mappings
|
||||
|
|
@ -173,6 +177,11 @@
|
|||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-disc-hole-scale: 0.6; /* decorative ring inside the hole */
|
||||
--cd-disc-hole-font-scale: 0.5; /* icon character in the hole */
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Z-Index Stacking
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-z-stack-base: 1; /* disc hole above disc art */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
|
|
@ -245,7 +254,7 @@
|
|||
|
||||
.cd-spine .spine-label {
|
||||
font-size: var(--cd-spine-font-sm);
|
||||
font-weight: 600;
|
||||
font-weight: var(--cd-font-weight-semibold);
|
||||
letter-spacing: var(--cd-letter-spacing-3);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -253,7 +262,7 @@
|
|||
.cd-spine .spine-track {
|
||||
font-size: var(--cd-spine-font-xs);
|
||||
letter-spacing: var(--cd-letter-spacing-1);
|
||||
opacity: 0.8;
|
||||
opacity: var(--cd-text-opacity-muted);
|
||||
}
|
||||
|
||||
/* ── Side spine variant ── */
|
||||
|
|
@ -369,7 +378,7 @@
|
|||
justify-content: center;
|
||||
font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
|
||||
color: var(--gray-4);
|
||||
z-index: 1;
|
||||
z-index: var(--cd-z-stack-base);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue