@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/color-picker/index.ts

@@ -6,11 +6,14 @@ import { keystep } from '~/shared/keystep';
 import copy from '~/components/copy';
 import input from '~/components/input';
 import range from '~/components/range';
+import contrast from '@esportsplus/ui/svg/contrast.svg';
 import './scss/index.scss';
 
 
 type A = Attributes & {
     [COLOR_PICKER_SWATCH]?: Attributes;
+    // The pad with upright opacity and hue rails under an hsl readout; no hex field or recent colors.
+    compact?: boolean;
     recent?: false | string[];
     state?: { error: string, value: string };
     value: string;
@@ -50,6 +53,13 @@ function fromHex(hex: string, previous: Hsva): Hsva | null {
     return { ...toHsv(rgba.r, rgba.g, rgba.b, previous), a: rgba.a };
 }
 
+function hsl({ a, h, s, v }: Hsva) {
+    let l = v * (1 - s / 2),
+        value = `${Math.round(h)}, ${Math.round((l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l)) * 100)}%, ${Math.round(l * 100)}%`;
+
+    return a < 1 ? `hsla(${value}, ${Number(a.toFixed(2))})` : `hsl(${value})`;
+}
+
 function parse(value: string) {
     let hex = value.trim().replace(HEX_PREFIX, '');
 
@@ -117,6 +127,7 @@ function toHsv(r: number, g: number, b: number, previous: Hsva) {
 function template(
     this: { attributes?: Pick<A, typeof COLOR_PICKER_SWATCH> } | void,
     {
+        compact = false,
         recent: initial = [],
         state = reactive({ error: '', value: '' }),
         value,
@@ -132,7 +143,7 @@ function template(
     let alpha: Channel = reactive({ active: false, error: '', value: Math.round(start.a * 100) }),
         color = reactive({ a: start.a, h: start.h, s: start.s, v: start.v }),
         dirty = { alpha: false, hue: false, pad: false },
-        history = initial !== false,
+        history = initial !== false && !compact,
         hue: Channel = reactive({ active: false, error: '', value: Math.round(start.h) }),
         id = `color-picker-${++uid}`,
         // Stand-ins for swatches pushed out of the recent list, fading out where they stood.
@@ -340,131 +351,157 @@ function template(
         }
     });
 
-    return html`
-        <div class='color-picker' ${this?.attributes} ${attributes} ${{ style: css }}>
-            <div
-                aria-label='Saturation and brightness'
-                aria-roledescription='2D slider'
-                aria-valuemax='100'
-                aria-valuemin='0'
-                class='color-picker-pad'
-                role='slider'
-                tabindex='0'
-                ${{
-                    'aria-valuenow': () => Math.round(color.s * 100),
-                    'aria-valuetext': () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`,
-                    onblur: () => {
-                        if (dirty.pad) {
-                            commit();
-                        }
-
-                        dirty.pad = false;
-                    },
-                    onkeydown: (e: KeyboardEvent) => {
-                        let delta = keystep(e, 0.01);
-
-                        if (delta === null) {
-                            return;
-                        }
-
-                        e.preventDefault();
-                        dirty.pad = true;
-
-                        // Left and right move saturation, the rest brightness, matching the axes on screen.
-                        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                            update({ s: clamp(color.s + delta, 0, 1) });
-                        }
-                        else {
-                            update({ v: clamp(color.v + delta, 0, 1) });
-                        }
-                    },
-                    onpointercancel: (e: PointerEvent) => {
-                        if (e.pointerId === pointer.pad) {
-                            pointer.pad = -1;
-                            commit();
-                        }
-                    },
-                    // Only the first pointer counts, so a second finger can't make the handle jump.
-                    onpointerdown: function(this: HTMLElement, e: PointerEvent) {
-                        if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
-                            return;
-                        }
-
-                        pointer.pad = e.pointerId;
-                        this.setPointerCapture(e.pointerId);
+    let alphaChannel = range({
+        'aria-label': 'Opacity',
+        'aria-valuetext': () => `${alpha.value}%`,
+        class: 'color-picker-channel color-picker-channel--alpha',
+        max: 100,
+        min: 0,
+        onblur: () => {
+            if (dirty.alpha && !pointer.alpha) {
+                commit();
+            }
+
+            dirty.alpha = false;
+        },
+        onchange: () => {
+            if (pointer.alpha) {
+                commit();
+            }
+        },
+        onkeydown: (e: KeyboardEvent) => slide('alpha', e),
+        onpointerdown: () => {
+            pointer.alpha = true;
+        },
+        orientation: compact ? 'vertical' : 'horizontal',
+        state: alpha,
+        step: 1
+    });
+
+    let hueChannel = range({
+        'aria-label': 'Hue',
+        'aria-valuetext': () => `${hue.value} degrees`,
+        class: 'color-picker-channel color-picker-channel--hue',
+        max: 360,
+        min: 0,
+        onblur: () => {
+            if (dirty.hue && !pointer.hue) {
+                commit();
+            }
+
+            dirty.hue = false;
+        },
+        onchange: () => {
+            if (pointer.hue) {
+                commit();
+            }
+        },
+        onkeydown: (e: KeyboardEvent) => slide('hue', e),
+        onpointerdown: () => {
+            pointer.hue = true;
+        },
+        orientation: compact ? 'vertical' : 'horizontal',
+        state: hue,
+        step: 1
+    });
+
+    let pad = html`
+        <div
+            aria-label='Saturation and brightness'
+            aria-roledescription='2D slider'
+            aria-valuemax='100'
+            aria-valuemin='0'
+            class='color-picker-pad'
+            role='slider'
+            tabindex='0'
+            ${{
+                'aria-valuenow': () => Math.round(color.s * 100),
+                'aria-valuetext': () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`,
+                onblur: () => {
+                    if (dirty.pad) {
+                        commit();
+                    }
+
+                    dirty.pad = false;
+                },
+                onkeydown: (e: KeyboardEvent) => {
+                    let delta = keystep(e, 0.01);
+
+                    if (delta === null) {
+                        return;
+                    }
+
+                    e.preventDefault();
+                    dirty.pad = true;
+
+                    // Left and right move saturation, the rest brightness, matching the axes on screen.
+                    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                        update({ s: clamp(color.s + delta, 0, 1) });
+                    }
+                    else {
+                        update({ v: clamp(color.v + delta, 0, 1) });
+                    }
+                },
+                onpointercancel: (e: PointerEvent) => {
+                    if (e.pointerId === pointer.pad) {
+                        pointer.pad = -1;
+                        commit();
+                    }
+                },
+                // Only the first pointer counts, so a second finger can't make the handle jump.
+                onpointerdown: function(this: HTMLElement, e: PointerEvent) {
+                    if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
+                        return;
+                    }
+
+                    pointer.pad = e.pointerId;
+                    this.setPointerCapture(e.pointerId);
+                    pick(this, e);
+                },
+                onpointermove: function(this: HTMLElement, e: PointerEvent) {
+                    if (e.pointerId === pointer.pad) {
                         pick(this, e);
-                    },
-                    onpointermove: function(this: HTMLElement, e: PointerEvent) {
-                        if (e.pointerId === pointer.pad) {
-                            pick(this, e);
-                        }
-                    },
-                    onpointerup: (e: PointerEvent) => {
-                        if (e.pointerId === pointer.pad) {
-                            pointer.pad = -1;
-                            commit();
-                        }
                     }
-                }}
-            >
-                <span
-                    class='color-picker-thumb'
-                    style='${() => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`}'
-                ></span>
+                },
+                onpointerup: (e: PointerEvent) => {
+                    if (e.pointerId === pointer.pad) {
+                        pointer.pad = -1;
+                        commit();
+                    }
+                }
+            }}
+        >
+            <span
+                class='color-picker-thumb'
+                style='${() => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`}'
+            ></span>
+        </div>
+    `;
+
+    if (compact) {
+        return html`
+            <div class='color-picker color-picker--compact' ${this?.attributes} ${attributes} ${{ style: css }}>
+                <div class='color-picker-header'>
+                    <svg aria-hidden='true' class='color-picker-icon'><use href='#${contrast}' /></svg>
+                    <span class='color-picker-value'>${() => hsl(read())}</span>
+                </div>
+                <div class='color-picker-body'>
+                    ${pad}
+                    ${alphaChannel}
+                    ${hueChannel}
+                </div>
             </div>
+        `;
+    }
+
+    return html`
+        <div class='color-picker' ${this?.attributes} ${attributes} ${{ style: css }}>
+            ${pad}
 
             <div class='color-picker-channels'>
                 <div class='color-picker-sliders'>
-                    ${range({
-                        'aria-label': 'Hue',
-                        'aria-valuetext': () => `${hue.value} degrees`,
-                        class: 'color-picker-channel color-picker-channel--hue',
-                        max: 360,
-                        min: 0,
-                        onblur: () => {
-                            if (dirty.hue && !pointer.hue) {
-                                commit();
-                            }
-
-                            dirty.hue = false;
-                        },
-                        onchange: () => {
-                            if (pointer.hue) {
-                                commit();
-                            }
-                        },
-                        onkeydown: (e: KeyboardEvent) => slide('hue', e),
-                        onpointerdown: () => {
-                            pointer.hue = true;
-                        },
-                        state: hue,
-                        step: 1
-                    })}
-                    ${range({
-                        'aria-label': 'Opacity',
-                        'aria-valuetext': () => `${alpha.value}%`,
-                        class: 'color-picker-channel color-picker-channel--alpha',
-                        max: 100,
-                        min: 0,
-                        onblur: () => {
-                            if (dirty.alpha && !pointer.alpha) {
-                                commit();
-                            }
-
-                            dirty.alpha = false;
-                        },
-                        onchange: () => {
-                            if (pointer.alpha) {
-                                commit();
-                            }
-                        },
-                        onkeydown: (e: KeyboardEvent) => slide('alpha', e),
-                        onpointerdown: () => {
-                            pointer.alpha = true;
-                        },
-                        state: alpha,
-                        step: 1
-                    })}
+                    ${hueChannel}
+                    ${alphaChannel}
                 </div>
                 <span aria-hidden='true' class='color-picker-preview'></span>
             </div>

package/src/components/color-picker/scss/index.scss

@@ -1,5 +1,7 @@
-@use '/shared';
-@use '/tokens';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/hidden';
+@use 'css-utilities/layer';
 @use 'variables';
 
 @mixin thumb {
@@ -28,63 +30,27 @@
     gap: var(--spacing);
 
     &-alpha {
+        @extend %font-geist-mono;
         align-items: center;
         border: 1px solid var(--control-border-color);
         border-radius: var(--control-border-radius);
         color: var(--color-muted);
         display: flex;
         flex: 0 0 56px;
-        font-family: var(--font-family-mono);
+        font-family: var(--font-family);
         font-variant-numeric: tabular-nums;
         height: var(--control-height);
         justify-content: center;
         user-select: none;
     }
 
-    // Sized by the native range, whose thumb already stops half its width short of each end. Qualified by the root so
-    // it wins over the reused range styles regardless of stylesheet order.
-    .color-picker-channel {
-        appearance: none;
-        background: none;
-        border: 0;
-        border-radius: 999px;
-        cursor: pointer;
-        display: block;
-        height: 28px;
-        margin: 0;
-        outline: none;
-        touch-action: none;
-        width: 100%;
-
-        &:focus-visible {
-            outline: var(--focus-width) solid var(--color);
-            outline-offset: 1px;
-        }
-
-        &::-webkit-slider-runnable-track {
-            @include track;
-        }
-
-        &::-moz-range-track {
-            @include track;
-        }
-
-        &::-webkit-slider-thumb {
-            @include thumb;
-            appearance: none;
-            margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
-        }
-
-        &::-moz-range-thumb {
-            @include thumb;
-        }
-
-        &:active::-webkit-slider-thumb {
-            scale: var(--thumb-scale-pressed);
-        }
+    &-body {
+        display: flex;
+        gap: var(--spacing);
 
-        &:active::-moz-range-thumb {
-            scale: var(--thumb-scale-pressed);
+        > .color-picker-pad {
+            flex: 1 1 auto;
+            min-width: 0;
         }
     }
 
@@ -94,14 +60,6 @@
         gap: var(--spacing);
     }
 
-    // Sits inside the hex field, at its end; the field's padding keeps typed text clear of it.
-    .color-picker-copy {
-        position: absolute;
-        right: var(--copy-inset);
-        top: 50%;
-        translate: 0 -50%;
-    }
-
     &-field {
         display: flex;
         flex: 1 1 auto;
@@ -109,6 +67,63 @@
         position: relative;
     }
 
+    .color {
+        // Sized by the native range, whose thumb already stops half its width short of each end. Qualified by the root so
+        // it wins over the reused range styles regardless of stylesheet order.
+        &-picker-channel {
+            appearance: none;
+            background: none;
+            border: 0;
+            border-radius: 999px;
+            cursor: pointer;
+            display: block;
+            height: 28px;
+            margin: 0;
+            outline: none;
+            touch-action: none;
+            width: 100%;
+
+            &::-moz-range-thumb {
+                @include thumb;
+            }
+
+            &::-moz-range-track {
+                @include track;
+            }
+
+            &::-webkit-slider-runnable-track {
+                @include track;
+            }
+
+            &::-webkit-slider-thumb {
+                @include thumb;
+                appearance: none;
+                margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
+            }
+
+            &:active::-moz-range-thumb {
+                scale: var(--thumb-scale-pressed);
+            }
+
+            &:active::-webkit-slider-thumb {
+                scale: var(--thumb-scale-pressed);
+            }
+
+            &:focus-visible {
+                outline: var(--focus-width) solid var(--color);
+                outline-offset: 1px;
+            }
+        }
+
+        // Sits inside the hex field, at its end; the field's padding keeps typed text clear of it.
+        &-picker-copy {
+            position: absolute;
+            right: var(--copy-inset);
+            top: 50%;
+            translate: 0 -50%;
+        }
+    }
+
     // Qualified by the wrapper so it wins over the reused input padding regardless of stylesheet order.
     &-field > #{&}-hex {
         padding-inline-end: calc(var(--control-height) - var(--copy-inset));
@@ -119,8 +134,16 @@
         gap: var(--size-100);
     }
 
+    &-header {
+        align-items: center;
+        color: var(--color);
+        display: flex;
+        gap: var(--size-100);
+    }
+
     &-hex {
-        font-family: var(--font-family-mono);
+        @extend %font-geist-mono;
+        font-family: var(--font-family);
         outline: none;
         text-transform: uppercase;
 
@@ -134,6 +157,12 @@
         }
     }
 
+    &-icon {
+        flex: 0 0 auto;
+        height: var(--size-400);
+        width: var(--size-400);
+    }
+
     // Pure black and white on purpose: the gradients are the color math, not a theme surface.
     &-pad {
         background-color: hsl(var(--hue) 100% 50%);
@@ -154,7 +183,7 @@
 
         &:focus-visible {
             outline: var(--focus-width) solid var(--color);
-            outline-offset: 2px;
+            outline-offset: calc(var(--size-100) / 4);
         }
     }
 
@@ -183,7 +212,7 @@
         display: flex;
         flex: 1;
         flex-direction: column;
-        gap: 4px;
+        gap: calc(var(--size-100) / 2);
         min-width: 0;
     }
 
@@ -192,13 +221,19 @@
     }
 
     &-swatch {
-        background: linear-gradient(var(--swatch), var(--swatch)), var(--checker);
-        border: 0;
-        border-radius: 50%;
-        box-shadow:
+        @extend %box-shadow-state;
+        --box-shadow-active:
+            var(--hairline),
+            0 0 0 2px var(--ring-offset-color),
+            0 0 0 4px var(--color);
+        --box-shadow-default:
             var(--hairline),
             0 0 0 0 var(--ring-offset-color),
             0 0 0 0 var(--color);
+        background: linear-gradient(var(--swatch), var(--swatch)), var(--checker);
+        border: 0;
+        border-radius: 50%;
+        box-shadow: var(--box-shadow);
         cursor: pointer;
         flex: 0 0 auto;
         height: var(--swatch-size);
@@ -207,41 +242,28 @@
         padding: 0;
         position: relative;
         touch-action: manipulation;
-        transition:
-            box-shadow var(--transition-duration) var(--transition-timing-function),
-            scale var(--transition-duration) var(--transition-timing-function);
+        transition: box-shadow var(--transition-duration) var(--transition-timing-function);
         user-select: none;
         width: var(--swatch-size);
 
+        // A stand-in for a dropped swatch, whose own node is already gone.
+        &--leaving {
+            animation: color-picker-swatch-leave var(--swatch-exit-duration) var(--swatch-exit-easing) forwards;
+            pointer-events: none;
+            position: absolute;
+        }
+
         // A larger hit area; with the gap, neighbours meet but never overlap.
         &::after {
             border-radius: 50%;
             content: '';
-            inset: -4px;
+            inset: calc(var(--size-100) / -2);
             position: absolute;
         }
 
-        &:active {
-            scale: 0.96;
-        }
-
         &:focus-visible {
             outline: var(--focus-width) solid var(--color);
-            outline-offset: 4px;
-        }
-
-        @include tokens.state(active) {
-            box-shadow:
-                var(--hairline),
-                0 0 0 2px var(--ring-offset-color),
-                0 0 0 4px var(--color);
-        }
-
-        // A stand-in for a dropped swatch, whose own node is already gone.
-        &--leaving {
-            animation: color-picker-swatch-leave var(--swatch-exit-duration) var(--swatch-exit-easing) forwards;
-            pointer-events: none;
-            position: absolute;
+            outline-offset: calc(var(--size-100) / 2);
         }
     }
 
@@ -268,28 +290,69 @@
         z-index: 1;
     }
 
-    @media (prefers-reduced-motion: reduce) {
-        .color-picker-channel {
-            &::-webkit-slider-thumb {
-                transition: none;
-            }
+    &-value {
+        font-variant-numeric: tabular-nums;
+    }
 
-            &::-moz-range-thumb {
-                transition: none;
-            }
+    // Stands the rails up beside the pad; the track fills the input and the thumb is a bar across it. Doubly
+    // qualified so it wins over both the channel styles above and the range's own vertical ones.
+    &#{&}--compact .color-picker-channel {
+        border-radius: var(--rail-radius);
+        flex: 0 0 var(--rail-width);
+        height: auto;
+        width: var(--rail-width);
+        writing-mode: vertical-lr;
+
+        &--alpha {
+            direction: rtl;
         }
 
-        &-swatch:active {
-            scale: 1;
+        &--hue {
+            direction: ltr;
         }
 
-        &-swatch {
-            transition: box-shadow var(--transition-duration) var(--transition-timing-function);
+        &::-moz-range-thumb {
+            background: none;
+            border-radius: var(--rail-radius);
+            height: var(--rail-thumb-height);
+            width: 100%;
         }
 
+        &::-moz-range-track {
+            border-radius: var(--rail-radius);
+            height: 100%;
+            width: 100%;
+        }
+
+        &::-webkit-slider-runnable-track {
+            border-radius: var(--rail-radius);
+            height: 100%;
+            width: 100%;
+        }
+
+        &::-webkit-slider-thumb {
+            background: none;
+            border-radius: var(--rail-radius);
+            height: var(--rail-thumb-height);
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
         &-thumb {
             transition: none;
         }
+
+        .color-picker-channel {
+            &::-moz-range-thumb {
+                transition: none;
+            }
+
+            &::-webkit-slider-thumb {
+                transition: none;
+            }
+        }
     }
 }