Skip to content

feat(configurator): make consume tokens read-only #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 4 commits into from
Jun 13, 2026
Merged

feat(configurator): make consume tokens read-only #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1b752c
feat(configurator): make consume tokens read-only
claude Jun 13, 2026
efd78e1
fix(tests): update presets test to use a knob token
claude Jun 13, 2026
bca3ef4
fix(tests): use shadow-strength knob for preset-deactivation test
claude Jun 13, 2026
81ea64a
fix(tests): use power-knob number input for preset-deactivation test
claude Jun 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 42 additions & 9 deletions configurator/src/components/TokenRow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
}
</script>

<div class="row" class:row--modified={modified}>
<div class="row" class:row--modified={modified && !isConsume} class:row--consume={isConsume}>
<div class="row__info">
{#if friendly}
<div class="row__name-line">
Expand Down Expand Up @@ -162,14 +162,23 @@
</div>

<div class="row__control">
<TokenEditor {token} />
<button
class="cfg-btn cfg-btn--ghost cfg-btn--icon row__reset"
onclick={() => clearOverride(token.name)}
disabled={!modified}
title={modified ? 'Reset to framework default' : 'No override to reset'}
aria-label="Reset {token.name}"
>⟲</button>
{#if isConsume}
<div
class="row__readonly"
title="Consumption token — derived from configure tokens. Edit the upstream source instead."
>
<code class="row__readonly-val">{token.value}</code>
</div>
{:else}
<TokenEditor {token} />
<button
class="cfg-btn cfg-btn--ghost cfg-btn--icon row__reset"
onclick={() => clearOverride(token.name)}
disabled={!modified}
title={modified ? 'Reset to framework default' : 'No override to reset'}
aria-label="Reset {token.name}"
>⟲</button>
{/if}
</div>
</div>

Expand Down Expand Up @@ -325,6 +334,30 @@
}
.row__reset { flex-shrink: 0; font-size: 14px; line-height: 1; }

/* Consume tokens — whole row is subtly de-emphasised and not interactive. */
.row--consume { opacity: 0.7; }
.row--consume:hover { background: transparent; }

.row__readonly {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
padding: 7px 10px;
background: var(--cfg-bg-2);
border: 1px dashed var(--cfg-border);
border-radius: var(--cfg-radius-s);
overflow: hidden;
}
.row__readonly-val {
font-family: var(--cfg-mono);
font-size: 11.5px;
color: var(--cfg-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 720px) {
.row {
grid-template-columns: 1fr;
Expand Down
20 changes: 10 additions & 10 deletions configurator/tests-e2e/presets.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,18 @@ test('shadow presets: switching leaves no leftovers from the previous preset', a

test('hand-edited values show NO active preset (never a wrong one)', async ({ page }) => {
await gotoClean(page);
await sideItem(page, 'Borders').click();
await page.locator('.presets__btn', { hasText: 'Pill' }).click();
await sideItem(page, 'Shadows').click();
await page.locator('.presets__btn', { hasText: 'Strong' }).click();
await page.keyboard.press('a');
// Hand-edit one of the preset's tokens in Advanced search.
await page.fill('#cfg-search', '--sf-radius-m');
const row = page.locator('.row', { hasText: '--sf-radius-m' }).first();
const input = row.locator('input[type="text"], input:not([type])').first();
await input.fill('3px');
await input.press('Enter');
await page.fill('#cfg-search', '');
// Open the power-knobs section and hand-edit --sf-shadow-strength to a value
// that differs from what the Strong preset set, deactivating it.
const power = page.locator('details.power');
await power.locator('summary').click();
const knob = power.locator('.knob', { hasText: '--sf-shadow-strength' });
await knob.locator('input[type="number"]').fill('0.05');
await knob.locator('input[type="number"]').press('Enter');
await page.keyboard.press('b');
await sideItem(page, 'Borders').click();
await sideItem(page, 'Shadows').click();
await expect(page.locator('.presets__btn[aria-pressed="true"]')).toHaveCount(0);
});

Expand Down