fix(design-system): drop Progress's component-scoped custom property (#664)

The Progress fill used a component-private `--ul-progress-fill` custom
property, re-pointed per `data-level` to map the three bands onto existing
tokens. It's the only place the design system *declares* a `--ul-*` custom
property outside `:root`, which claude.ai/design's `check_design_system`
flags as a mis-scoped token.

Thread the per-level color through `color` / `currentColor` instead: one
source of truth still feeds both the fill and the dither cap, the render is
unchanged, and no custom property is declared on a component selector. Add a
`.design-sync/NOTES.md` convention so future syncs don't reintroduce the
pattern or "fix" the finding by hoisting to `:root` (which the per-instance
value can't support).

Author: zachdunn

.design-sync/NOTES.md

@@ -64,6 +64,18 @@ restage by hand (or copy from main) in those worktrees.
 - `cfg.cssEntry` = `dist/uploads-ui.css` — one self-contained stylesheet carrying
   the `:root` token layer + `@font-face` + every `ul-` component class. No separate
   tokens package/glob; tokens are inline there and ship via the `styles.css` closure.
+- **No component-scoped custom-property *declarations* — thread per-instance
+  color through `color`/`currentColor` instead.** claude.ai/design's
+  `check_design_system` treats every `--*` declaration as a design token and
+  flags any declared outside a theme scope (`:root` / `[data-theme]`). A
+  component that needs one color knob shared across an element and its
+  pseudo-elements (e.g. Progress's fill + dither cap) must set `color:
+  var(--token)` on the element (overriding per `[data-*]`) and consume it as
+  `currentColor` — **not** declare a `--ul-*` custom property on a component
+  selector. Do **not** "fix" such a finding by hoisting the property to `:root`:
+  the value varies per instance, so hoisting breaks it. Consume-with-fallback
+  (`var(--ul-x, 116px)`, like `--ul-files-min-height`) is also fine — it's never
+  *declared*, so it isn't flagged.
 - **`@kind` token annotations are load-bearing — do not strip them.** The token
   declarations in `src/styles.css` / `src/tokens.css` carry trailing comments the
   claude.ai/design compiler reads to classify tokens: `--sans`/`--mono`/`--pixel`

packages/ui/src/styles.css

@@ -503,12 +503,15 @@
   );
 }
 .ul-progress__fill {
-  --ul-progress-fill: var(--muted);
+  /* Per-level fill color rides on `color` so the bar and its dither cap share
+   * one token without declaring a component-scoped custom property (which the
+   * claude.ai/design token compiler would flag as a mis-scoped token). */
+  color: var(--muted);
   position: relative;
   height: 100%;
   width: 0%;
   max-width: 100%;
-  background: var(--ul-progress-fill);
+  background: currentColor;
 }
 /* Solid body + 1-bit dither on the last two pixels */
 .ul-progress__fill::after {
@@ -519,20 +522,20 @@
   background-color: var(--line);
   background-image: linear-gradient(
     45deg,
-    var(--ul-progress-fill) 25%,
+    currentColor 25%,
     transparent 25% 50%,
-    var(--ul-progress-fill) 50% 75%,
+    currentColor 50% 75%,
     transparent 75%
   );
   background-size: 2px 2px;
   image-rendering: pixelated;
   pointer-events: none;
 }
 .ul-progress__fill[data-level="high"] {
-  --ul-progress-fill: var(--body);
+  color: var(--body);
 }
 .ul-progress__fill[data-level="full"] {
-  --ul-progress-fill: var(--accent);
+  color: var(--accent);
 }
 
 /* ── GalleryTile ───────────────────────────────────────────────────────── */