From 6ac821178f1390ec1afc85b8ba79390de9d7d3af Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Wed, 5 Aug 2026 08:41:24 -0400 Subject: [PATCH] fix(design): declare --tp-fill so the token check can see it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The swatch set it inline only, and a custom property that exists nowhere in a stylesheet is exactly what check_design_tokens reports as unresolvable — it was right, and it caught this on the commit that introduced it. Declaring it on .tp-swatch is the real fix rather than a silencer: a token that resolves to nothing now renders as bare checks instead of an invalid gradient, which is what the inline value would produce when empty. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs --- frontend/src/components/TokenPreview.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/components/TokenPreview.vue b/frontend/src/components/TokenPreview.vue index 07fb8df..a2d5e5b 100644 --- a/frontend/src/components/TokenPreview.vue +++ b/frontend/src/components/TokenPreview.vue @@ -259,6 +259,13 @@ function ruleWidth(value: string): string { completely, and a 15% tint shows exactly as much of them as it should. Layering the fill as a gradient is what lets one element do both. */ .tp-swatch { + /* Declared here, overridden inline per swatch. Two reasons it is a real + default rather than a formality: a token that resolves to nothing renders + as bare checks instead of an invalid gradient, and a custom property that + exists ONLY as an inline style is invisible to the CI token check — which + reads it as an unresolvable reference, correctly, since nothing in any + stylesheet declares it. */ + --tp-fill: transparent; width: 100%; height: 100%; border-radius: calc(var(--fs-radius-sm) - 2px);