From 1eaaba6dfa7e953999879fce8d6f36d5a44204ba Mon Sep 17 00:00:00 2001 From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com> Date: Wed, 19 Aug 2026 09:20:40 +0000 Subject: [PATCH 1/2] fix(configurator): correct token metadata drift & misleading help (#684-689) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes a batch of display-only defects where the configurator/framework docs promised behaviour or values that no longer match reality. - #684: sync hardcoded --sf-size-l default in SIZE_TOKENS (2.75 → 3rem) to match the framework (core/tokens.css). - #685: drop the rawDefault="var(--sf-size-l)" + SIZE_SCALE picker on the Min touch size control; --sf-touch-target is a deliberately independent 2.75rem/44px WCAG floor, not an alias of the size scale. Help updated; remove now-unused SIZE_SCALE import. - #686: relabel the Z-index "Base offset" slider and rewrite its help — the framework rungs are independent literals, --sf-z-base is not added to them; it is only the base local-stacking rung consumed by the .sf-z-base utility. - #687: rework TokenRow.guessType to prefer generated syntax metadata (/length/number) and narrow the name fallback so border shorthands, --sf-border-width-* lengths and background shorthands no longer get a color picker. - #688: fix Icon sizes help class names (.sf-icon-* → .sf-icon--*, .sf-icon-box → .sf-icon--boxed). - #689: trim optional/legacy.css header to the fallbacks it actually ships (drop has() and the duplicated dvh). --- .../src/components/inputs/TokenRow.svelte | 21 ++++++++++++++++--- .../src/components/panels/MiscPanel.svelte | 17 ++++++--------- optional/legacy.css | 2 +- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte index a5ec5a7b9..6fae647a6 100644 --- a/configurator/src/components/inputs/TokenRow.svelte +++ b/configurator/src/components/inputs/TokenRow.svelte @@ -26,10 +26,25 @@ function guessType(t: SlashedToken): "color" | "font" | "number" | "text" { const n = t.name; - if (n.includes("color") || n.includes("source") || n.includes("-bg") || n.includes("-border")) return "color"; - if (n.includes("font") || n.includes("family")) return "font"; const syntax = t.syntax?.toLowerCase() ?? ""; - if (syntax.includes("number") || syntax.includes("length") || syntax.includes("integer")) return "number"; + + // Prefer the generated syntax metadata — it is authoritative and avoids the + // name-substring guessing that used to misfire (border shorthands / length + // scales / background shorthands wrongly getting a color picker). + if (syntax.includes("")) return "color"; + if (syntax.includes("number") || syntax.includes("length") || syntax.includes("integer") || syntax.includes("percentage")) return "number"; + + // Name-based fallback for tokens without a registered syntax. Deliberately + // narrow so compound / shorthand tokens are never treated as colors: + // • border shorthands (--sf-border, --sf-icon-box-border) and border-width + // length scales (--sf-border-width-*) must NOT get a color picker; + // • background shorthand parts (--sf-surface-bg-*, --sf-bg-layer-*) likewise. + // Genuine border/bg colors either live under the --sf-color-* namespace + // (matched by "color") or are single-value bg tokens ending in "-bg" + // (e.g. --sf-card-bg, --sf-icon-box-bg). + if (n.includes("color")) return "color"; + if (n.endsWith("-bg")) return "color"; + if (n.includes("font") || n.includes("family")) return "font"; return "text"; } diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte index e2723c17a..382fdf38e 100644 --- a/configurator/src/components/panels/MiscPanel.svelte +++ b/configurator/src/components/panels/MiscPanel.svelte @@ -2,7 +2,6 @@ import SliderRow from '../inputs/SliderRow.svelte'; import ColorInput from '../inputs/ColorInput.svelte'; import Section from '../inputs/Section.svelte'; - import { SIZE_SCALE } from '../../lib/variableScales'; let { overrides, onSet, onReset, onBulkChange }: { overrides: Record; @@ -27,7 +26,7 @@ { label: "XS", token: "--sf-size-xs", default: 1.5 }, { label: "S", token: "--sf-size-s", default: 2 }, { label: "M", token: "--sf-size-m", default: 2.5 }, - { label: "L", token: "--sf-size-l", default: 2.75 }, + { label: "L", token: "--sf-size-l", default: 3 }, { label: "XL", token: "--sf-size-xl", default: 3.5 }, ]; @@ -64,14 +63,10 @@
onSet("--sf-touch-target", `${v}px`)} onReset={() => onReset("--sf-touch-target")} - rawDefault="var(--sf-size-l)" - variableOptions={SIZE_SCALE} - currentRaw={overrides["--sf-touch-target"]} - onRawSet={(v) => onSet("--sf-touch-target", v)} />
@@ -88,8 +83,8 @@
onSet("--sf-z-base", String(v))} onReset={() => onReset("--sf-z-base")} @@ -285,7 +280,7 @@

- Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text. + Icon scale tokens used by .sf-icon--* utilities. Values are in em units relative to surrounding text.

{#each [ @@ -306,7 +301,7 @@
onSet("--sf-icon-box-pad", `${v}em`)} onReset={() => onReset("--sf-icon-box-pad")} diff --git a/optional/legacy.css b/optional/legacy.css index 79bbf2c03..5aa2698c2 100644 --- a/optional/legacy.css +++ b/optional/legacy.css @@ -1,6 +1,6 @@ /* SLASHED — optional/legacy.css @layer slashed.legacy - Fallbacks for older browser gaps: dynamic viewport units, focus-visible, scrollbar gutter, has(), dvh. + Fallbacks for older browser gaps: dynamic viewport units, focus-visible, scrollbar gutter. Load only when legacy support is needed. */ @layer slashed.legacy { From d33606bcc5352f8221f91233c3e3d072f25df0fd Mon Sep 17 00:00:00 2001 From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com> Date: Wed, 19 Aug 2026 09:32:58 +0000 Subject: [PATCH 2/2] fix(configurator): preserve existing touch-target & z-base overrides (review) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Address Greptile P1 backward-compat regressions on the MiscPanel controls: - Min touch size: restore the raw-CSS escape hatch (currentRaw/onRawSet) with an honest independent literal default (2.75rem, not var(--sf-size-l)) and no scale picker. Persisted var()/calc()/clamp() overrides are surfaced as editable raw text instead of being misread as an out-of-range px value and clobbered to a px literal on edit. Still satisfies #685 (no size-scale alias). - Z-index Base: revert the slider range to the original 0–1000 (step 10) so themes with a --sf-z-base above 10 are no longer rendered off-track and clamped/overwritten. The #686 fix (label + accurate help) is unchanged. --- configurator/src/components/panels/MiscPanel.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte index 382fdf38e..bdcde2a81 100644 --- a/configurator/src/components/panels/MiscPanel.svelte +++ b/configurator/src/components/panels/MiscPanel.svelte @@ -67,6 +67,9 @@ overridden={"--sf-touch-target" in overrides} onChange={(v) => onSet("--sf-touch-target", `${v}px`)} onReset={() => onReset("--sf-touch-target")} + rawDefault="2.75rem" + currentRaw={overrides["--sf-touch-target"]} + onRawSet={(v) => onSet("--sf-touch-target", v)} />
@@ -83,7 +86,7 @@
onSet("--sf-z-base", String(v))}