fix(cloud): compiled stylesheets keep only the first color-mix() value per rule, so dark selected states turn solid blue #315

What is wrong

In dark mode the served /public/global.css sets --ui-selected to plain --color-blue-400 and --ui-app-accent-border to var(--app-accent, <blue-400>) instead of the color-mix() values from tokens.css; :root keeps its mix. Selected Kanban cards and the active /me tab turn solid bright blue with about 2:1 text contrast, the Kanban drop-target column fills solid blue, and the drop line (#288) is barely visible (nightly visual check, screenshots 10–13 and 30). Expected: the mixed values.

The same loss hits 32 declarations in global.css, in light mode too (for example --ui-state-error-icon-surface and -border become solid red, --ui-app-accent-text loses its darkening, a dragging .file-dropzone fills solid blue), plus 6 in the built @k2b/ui styles.css. docs-site/assets/generated/cloud-components.css shows the same pattern.

How to reproduce

# Bun alone: of two adjacent @supports rules with the same condition, the second disappears (Bun 1.4.2).
printf '@supports (display: grid) { .a { --a: 1 } }\n@supports (display: grid) { .b { --b: 2 } }\n' > /tmp/s.css
bun -e 'console.log(await (await Bun.build({ entrypoints: ["/tmp/s.css"] })).outputs[0].text())'   # only .a

# Cloud: build the global stylesheet the way Core does and read the dark tokens.
WORKSPACE_ROOT=$PWD DIST_DIR=/tmp/cloud-extras bun packages/core/scripts/build-extras.ts
grep -A12 '^\.dark {' /tmp/cloud-extras/public/global.css | grep -E 'ui-selected|ui-app-accent-border'
#   --ui-selected: oklch(70.7% .165 254.624);
#   --ui-app-accent-border: var(--app-accent, oklch(70.7% .165 254.624));

Suspected cause

Bun bug oven-sh/bun#24770 (fix open in oven-sh/bun#38589, not released; 1.4.2 is current): the CSS pass drops an @supports rule whose condition equals the one before it. Tailwind's color-mix() polyfill, which bun-plugin-tailwind@0.1.2 always enables, writes fallback; @supports (color: color-mix(in lab, red, red)) { & { mixed } } for every declaration with a var() inside color-mix(). Bun hoists those nested blocks behind the rule's declarations, so they become adjacent and only the first one per rule survives. In .dark (packages/cloud/src/styles/tokens.css:139) that is --ui-surface-subtle; --ui-active (:141), --ui-selected (:142), --ui-app-accent-text, --ui-app-accent-border (:144) and --ui-focus keep only the fallback, which is the first color when a variable cannot be resolved at build time.

Proposal

Until Bun ships the fix, patch bun-plugin-tailwind@0.1.2 through the existing patchedDependencies to compile with only the @property polyfill. Tailwind v4's supported browsers and Cloud's inline styles already require color-mix(), and one patch covers global.css, @k2b/ui, the docs site, and app stylesheets. Add a test that every color-mix() token in tokens.css survives compilation, and remove the patch once a Bun release contains oven-sh/bun#38589.