WORK-438
ID:WORK-438Status:pending

Skeleton/skin re-bucketing of the Lumina CSS

The wholesale pass the WORK-410 spike sized: re-bucket Lumina's CSS into the two @layers per the spike's cut-line rule, so structure ships in @refrakt-md/skeleton and aesthetics stay in Lumina's skin. Mechanical and low-risk per declaration, but large (~114 files / ~6,058 declarations; the spike estimates ≈40% skeleton / 55% skin / 5% content).

Priority:highComplexity:complexMilestone:v0.23.0Source:SPEC-094
claude/milestone-v0.24.0-split View source

Criteria completion

Criteria completion: 0 of 3 (0%) checked; tracking started on Jun 15, no incremental history yet0%25%50%75%100%Jun 15Jun 15

Tracking started Jun 15 — check back for trends.

Relationships

Implements 1
Related 10
Branches 4
claude/milestone-v0.24.0-split current pending
claude/v023-skeleton-rebucket in-progresschangeset-release/main pendingmain pendingclaude/defer-work-417 pending
History 1
  1. 860a8b6
    Created (pending)by bjornolofandersson

Scope

  • Apply the spike's cut-line rule declaration-by-declaration: skeleton = correctness (layout/position/overflow/z-index, zone resets, interaction mechanisms, token-referencing structure); skin = colour/border/radius/shadow/font + token values; content = assets + assignment (handled by WORK-423 surface + WORK-437 icons).
  • Move structure into @layer skeleton (the WORK-436 package); keep aesthetics in Lumina's @layer skin, low-specificity, no !important.
  • Seam with WORK-425: surfaces.css arrives already attribute-keyed from WORK-425 (rune-names → [data-elevation]). 438 only assigns its declarations to layers (its treatments → skin); it does not re-derive the surface mapping. This file is where the surface-axis and skeleton/skin threads meet.
  • Sequence by file group so it parallelizes and stays reviewable: (a) rune CSS (92 files), (b) dimension CSS (12 files), (c) layout CSS (10 files). Split into sub-items per group if scheduling needs it.
  • Guard with the gallery + CSS-coverage + contracts the whole way; the visual diff via the harness (WORK-409) is the regression net.

Acceptance Criteria

  • Lumina's rune + dimension + layout CSS is bucketed into @layer skeleton (in the package) and @layer skin, following the spike's cut-line rule; no !important, low-specificity skin.
  • No rendered change for unchanged content (CSS-coverage + structure contracts green; gallery/visual diff clean where the harness can run).
  • Skeleton carries no colour/border/radius/shadow/font or token values; skin carries no structural layout the rune breaks without.

Dependencies

  • Requires WORK-435 (spacing tokens — the gate) and WORK-436 (the skeleton package + layer infra); for surfaces.css, follows WORK-425 (which hands over the attribute-keyed file); composes with the surface treatment (WORK-423) and icons (WORK-437). Validated by the proof skin (WORK-440).

References

  • SPEC-094 §3 · WORK-410 FINDINGS (cut-line rule + scope estimate) · packages/lumina/styles/.