OpenAgents

Commit

Fix SarahUI styling: cascade layer order and the missing basecoat structure

72f36d0c32f1 · AtlantisPleb · · parent fae0eee58f22 

Fix SarahUI styling: cascade layer order and the missing basecoat structure

All eight SarahUI button variants rendered identically on staging. Two
independent causes, both from the Step 6 port:

1. Cascade layers. DaisyUI emits into its own `daisyui` layer, and in the
   deployed bundle that layer is first declared at byte 37569 while
   `components` is declared at 10838. A later-declared layer wins over an
   earlier one REGARDLESS of specificity, so DaisyUI's flat `.btn` beat
   every `.btn[data-variant=...]` rule in sarah.css. The rules were in the
   bundle all along (61 occurrences) and simply lost the cascade. Fixed by
   declaring the order explicitly, placed before the tailwindcss import so
   it is the first multi-name @layer statement -- only the first one
   establishes order; later statements can add names but cannot reorder.

2. Missing structure. Sarah imports 13 basecoat component stylesheets;
   this repo imported only base/base.css. sarah.css's `.btn` deliberately
   sets just gap, border, radius, colour, font, and transition -- display,
   padding, min-height, and background come from basecoat's button.css. So
   even with the cascade fixed, SarahUI controls would inherit DaisyUI's
   geometry. Imported the same 13 Sarah does, carrying its warning never to
   import basecoat.css/basecoat-base.css/basecoat-components.css.

Consequence worth knowing: sarah.css now wins the `.btn` base for
DaisyUI-classed buttons too (roughly 19 usages of `btn btn-primary`,
`btn btn-ghost` and similar). Their `btn-*` modifiers still apply from the
daisyui layer, but base geometry is now Sarah's. That is the `.btn`
collision inherent to running two component systems, which UI-003 records
as a transitional exception under the owner's basecoat decision.

CSS-only change; no test behaviour is affected.

Deploy story

What this commit did to the running system — joined from the forge receipt chain, the part a commit page elsewhere cannot show.

Not deployed through the forge lane

No push, promotion, build, or deploy receipt references this commit (receipts are scanned over a bounded recent window). Changes shipped by full node replacement carry their proof in the release gate receipt instead.

Changed files

  • modified assets/css/app.css

Diff

1 file changed, +38 -0

assets/css/app.css modified +38

@@ -1,9 +1,47 @@

1 1 
/* See the Tailwind configuration guide for advanced usage
2 2 
   https://tailwindcss.com/docs/configuration */
3 3
4 
/* Cascade-layer order, declared before any @import so it is the FIRST @layer
5 
 * statement in the bundle — only the first one establishes order; later ones
6 
 * can add names but cannot reorder existing layers.
7 
 *
8 
 * DaisyUI emits into its own `daisyui` layer. Without this line that layer is
9 
 * declared after `components`, and a later-declared layer beats an earlier one
10 
 * regardless of specificity, so DaisyUI's flat `.btn` overrode every
11 
 * `.btn[data-variant=...]` rule in sarah.css and all eight SarahUI button
12 
 * variants rendered identically. Listing `daisyui` before `components` keeps
13 
 * Sarah's component styles authoritative, which is what sarah.css's own
14 
 * "must stay last so its declarations win" note requires. */
15 
@layer theme, base, daisyui, components, utilities;
16
4 17 
@import "tailwindcss" source(none);
5 18 
@import "phoenix-colocated/openagents/colocated.css";
19 
/* Basecoat component structure, vendored at tag 1.0.2 (6953a4a). Import
20 
 * components individually and only when a surface uses one: component CSS
21 
 * lives in @layer components and is emitted whether or not the class appears
22 
 * in markup. Never import basecoat.css, basecoat-base.css, or
23 
 * basecoat-components.css. See assets/vendor/basecoat/README.md.
24 
 *
25 
 * These carry the structure (display, padding, min-height, background) that
26 
 * sarah.css deliberately does not set — its .btn only adds gap, border,
27 
 * radius, colour, font, and transition on top. Without them SarahUI controls
28 
 * fall back to DaisyUI's geometry. This list matches Sarah's exactly. */
6 29 
@import "../vendor/basecoat/base/base.css";
30 
@import "../vendor/basecoat/components/button.css";
31 
@import "../vendor/basecoat/components/input.css";
32 
@import "../vendor/basecoat/components/textarea.css";
33 
@import "../vendor/basecoat/components/label.css";
34 
@import "../vendor/basecoat/components/field.css";
35 
@import "../vendor/basecoat/components/form.css";
36 
@import "../vendor/basecoat/components/alert.css";
37 
@import "../vendor/basecoat/components/badge.css";
38 
@import "../vendor/basecoat/components/card.css";
39 
@import "../vendor/basecoat/components/avatar.css";
40 
@import "../vendor/basecoat/components/item.css";
41 
@import "../vendor/basecoat/components/empty.css";
42 
@import "../vendor/basecoat/components/kbd.css";
43
44 
/* Sarah's identity. Must stay last so its declarations win. */
7 45 
@import "./sarah.css";
8 46 
@source "../css";
9 47 
@source "../js";

This page updates live while a promote is in flight · changelog