Stage 3: split styles.css into a shared base plus per-skin sheets
The 919-line stylesheet had a clean seam: `main`'s version is 278 lines and this branch only ever APPENDED to it. Verified that directly — a diff of main's styles.css against our first 298 lines differs only by the @layer statement and the 7.css import. - ui/src/styles.css (296) keeps the shared half: the @layer statement, the Tailwind import, the OKLCH tokens, @theme inline, the data-text interface sizes, the animations and the accent axis. The @layer statement must stay first here — it is one of only two rule types allowed above @import, and it is what sorts `skin` above `utilities`. - app/skins/7like/7like.css (636) takes the whole win7 section plus the scoped-7.css import that feeds layer(skin). - app/skins/shadlike/shadlike.css is near-empty by nature, not by omission: that skin IS the shared token system plus inline Tailwind, so there is no framework to bridge and no cascade to invert. The file documents why, and what does/does not belong in it. Both are @imported from styles.css, so one bundle still ships both, scoped by `.win7` exactly as before. One real trap caught here: the @font-face url() is resolved relative to the stylesheet, so moving the win7 section three directories deeper would have silently 404'd Noto Sans — the build stays green and the app just falls back to a different font. Fixed by moving the fonts INTO the skin (they exist only for the Win7 look, where Noto Sans substitutes for Segoe UI), which keeps `./fonts/...` correct wherever the folder goes. Confirmed in the built output: both woff2 emitted as hashed assets with the url rewritten to ./media/. Verified: build clean, built CSS keeps `@layer theme,base,components, utilities,skin,skinfix` and all 7.css selectors, the live window's opaque interior is pixel-identical to the pre-refactor baseline, and both harness renders (light and dark) diff to exactly zero. A layer-assignment mistake here would not be subtle — 7.css would lose to ~1900 Tailwind utilities and the app would look nothing like this. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
/* ==========================================================================
|
||||
shadlike skin — the modern, shadcn-style look
|
||||
==========================================================================
|
||||
|
||||
Intentionally near-empty, and that is not an oversight.
|
||||
|
||||
This skin IS the shared foundation: the OKLCH token system, `@theme inline`,
|
||||
the data-text interface sizes and the accent axis all live in ui/src/styles.css
|
||||
because both skins consume them, and everything else the modern look needs is
|
||||
a Tailwind utility written inline in its templates. There is no third-party
|
||||
framework to bridge and no cascade inversion to undo, so there is simply
|
||||
nothing left for a skin-level stylesheet to say.
|
||||
|
||||
Compare app/skins/7like/7like.css, which is 630 lines: all of it exists to
|
||||
import 7.css above `utilities`, re-point the app's semantic tokens at Win7
|
||||
values, and hand individual properties back where 7.css's dialog metrics are
|
||||
wrong for this app.
|
||||
|
||||
This file exists so the folder is self-contained and symmetrical with the
|
||||
other skin — modern-only rules that should not leak into the win7 cascade
|
||||
have a home here. Rules that BOTH skins need belong in ui/src/styles.css
|
||||
instead; anything added here is dead weight under .win7.
|
||||
|
||||
Scoping note: 7like scopes itself with the `.win7` class that 7.scoped.css
|
||||
requires. This skin is the default (no marker class), so any rule added here
|
||||
must NOT be written so broadly that it also matches under .win7 — prefer
|
||||
scoping to the component, not to bare elements. */
|
||||
Reference in New Issue
Block a user