You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.0 KiB
107 lines
3.0 KiB
<script lang="ts">
|
|
/**
|
|
* Color control for the demo Live tab — the answer to "the demo only shows
|
|
* roles, not the palette". Exposes the FULL component `color` surface:
|
|
* the evaluative `intent` axis + the `color` axis (hierarchy roles AND the
|
|
* 31 donor palette scales, THEMING §25.5). Enforces the doctrine visually:
|
|
* an evaluative `intent` wins, so under `intent !== 'neutral'` the `color`
|
|
* section is disabled with a note.
|
|
*
|
|
* `color` is a REAL prop (Button accepts `color="teal"`), so this drives the
|
|
* component prop directly — it is NOT a theme override.
|
|
*/
|
|
import { HIERARCHY_ROLES, INTENTS, PALETTE_GROUPS } from './harness.svelte';
|
|
|
|
let {
|
|
intent = $bindable('neutral'),
|
|
color = $bindable(undefined),
|
|
showIntent = true
|
|
}: {
|
|
intent?: string;
|
|
color?: string | undefined;
|
|
showIntent?: boolean;
|
|
} = $props();
|
|
|
|
const intentWins = $derived(showIntent && intent !== 'neutral');
|
|
</script>
|
|
|
|
{#if showIntent}
|
|
<label data-uix-control style="grid-column: 1 / -1;">
|
|
<span data-uix-control-label>
|
|
intent
|
|
<span data-uix-control-hint>evaluative · wins over color when not neutral</span>
|
|
</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each INTENTS as i}
|
|
<button data-uix-chip data-active={intent === i} onclick={() => (intent = i)}>{i}</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
{/if}
|
|
|
|
<div data-uix-control style="grid-column: 1 / -1;" data-uix-faded={intentWins ? 'true' : undefined}>
|
|
<span data-uix-control-label>
|
|
color
|
|
<span data-uix-control-hint>
|
|
{#if intentWins}
|
|
ignored — intent='{intent}' wins (doctrine §4)
|
|
{:else}
|
|
hierarchy role or any of the 31 palette scales
|
|
{/if}
|
|
</span>
|
|
</span>
|
|
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each HIERARCHY_ROLES as r}
|
|
<button
|
|
data-uix-chip
|
|
data-active={color === r}
|
|
disabled={intentWins}
|
|
onclick={() => (color = r)}
|
|
>{r}</button>
|
|
{/each}
|
|
</span>
|
|
|
|
<div data-uix-swatches>
|
|
{#each PALETTE_GROUPS as group}
|
|
<div data-uix-swatch-group>
|
|
<span data-uix-swatch-group-label>{group.label}</span>
|
|
<div data-uix-swatch-row>
|
|
{#each group.scales as scale}
|
|
<button
|
|
type="button"
|
|
data-uix-swatch
|
|
data-active={color === scale}
|
|
disabled={intentWins}
|
|
title={scale}
|
|
aria-label={scale}
|
|
onclick={() => (color = scale)}
|
|
>
|
|
<span style="background: var(--scale-{scale}-9);"></span>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<label
|
|
data-uix-control-label
|
|
style="display: inline-flex; align-items: center; gap: var(--uix-space-2); margin-block-start: var(--uix-space-2);"
|
|
>
|
|
custom value
|
|
<span data-uix-control-hint>any raw CSS colour</span>
|
|
<input
|
|
type="color"
|
|
disabled={intentWins}
|
|
oninput={(e) => (color = e.currentTarget.value)}
|
|
aria-label="custom colour value"
|
|
style="inline-size: 1.8rem; block-size: 1.4rem; padding: 0; border: none; background: none; cursor: pointer;"
|
|
/>
|
|
</label>
|
|
{#if color}
|
|
<span data-uix-swatch-active>
|
|
selected · <code>color="{color}"</code>
|
|
</span>
|
|
{/if}
|
|
</div>
|