@electrovir/color 1.7.12 → 2.0.0

package/dist/elements/vir-color-picker.element.js

@@ -1,272 +0,0 @@
-/* node:coverage disable */
-import { checkWrap } from '@augment-vir/assert';
-import { getObjectTypedValues } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
-import { CssVarSyntaxName } from 'lit-css-vars';
-import { ViraPopUpTrigger } from 'vira/dist/elements/pop-up/vira-pop-up-trigger.element.js';
-import { ViraIcon } from 'vira/dist/elements/vira-icon.element.js';
-import { ViraInput } from 'vira/dist/elements/vira-input.element.js';
-import { ViraSelect } from 'vira/dist/elements/vira-select.element.js';
-import { Copy24Icon } from 'vira/dist/icons/icon-svgs/24/copy-24.icon.js';
-import { viraFontCssVars } from 'vira/dist/styles/font.js';
-import { viraFormCssVars } from 'vira/dist/styles/form-styles.js';
-import { noNativeFormStyles } from 'vira/dist/styles/native-styles.js';
-import { viraShadows } from 'vira/dist/styles/shadows.js';
-import { ColorFormatName, colorFormats } from '../data/color-class/color-formats.js';
-import { Color } from '../data/color-class/color.js';
-import { colorLocalStorageClient } from '../data/local-storage.client.js';
-import { VirColorFormatSliders } from './vir-color-format-sliders.element.js';
-import { VirColorSwatch } from './vir-color-swatch.element.js';
-const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => {
-    return {
-        value: formatName,
-        label: formatName.toUpperCase(),
-    };
-});
-/**
- * A color picker element with a swatch that opens a popup with color format sliders.
- *
- * Set the width and height of the swatch using the provided CSS variables.
- *
- * @category Elements
- */
-export const VirColorPicker = defineElement()({
-    tagName: 'vir-color-picker',
-    cssVars: {
-        'vir-color-picker-swatch-width': {
-            default: '100px',
-            syntax: CssVarSyntaxName.Length,
-        },
-        'vir-color-picker-swatch-height': {
-            default: '100px',
-            syntax: CssVarSyntaxName.Length,
-        },
-    },
-    state() {
-        return {
-            selectedFormatName: colorLocalStorageClient.get.lastFormat() || ColorFormatName.rgb,
-            rawInput: undefined,
-        };
-    },
-    hostClasses: {
-        'vir-color-picker-always-show': ({ inputs }) => !!inputs.alwaysShowPicker,
-    },
-    styles: ({ cssVars, hostClasses }) => {
-        return css `
-            :host {
-                display: inline-flex;
-            }
-
-            ${hostClasses['vir-color-picker-always-show'].selector} {
-                flex-direction: column;
-                align-items: center;
-                gap: 4px;
-            }
-
-            button {
-                ${noNativeFormStyles}
-                cursor: pointer;
-                display: flex;
-            }
-
-            ${ViraPopUpTrigger} {
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-
-            .swatch-wrapper {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                align-items: center;
-
-                & ${VirColorSwatch} {
-                    width: ${cssVars['vir-color-picker-swatch-width'].value};
-                    height: ${cssVars['vir-color-picker-swatch-height'].value};
-                    box-sizing: border-box;
-                }
-            }
-
-            .code-button {
-                font-family: ${viraFontCssVars['vira-monospace'].value};
-                font-size: 12px;
-                color: #666;
-                display: flex;
-                justify-content: center;
-                gap: 2px;
-                align-items: center;
-
-                & ${ViraIcon} {
-                    width: 18px;
-                    aspect-ratio: 1;
-                }
-
-                &:hover {
-                    color: #000;
-                }
-
-                &:active {
-                    color: dodgerblue;
-                }
-            }
-
-            .picker {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                padding: 16px;
-                background: white;
-                border: 1px solid #ccc;
-                border-radius: 8px;
-            }
-
-            .pop-up .picker {
-                ${viraShadows.menuShadow}
-            }
-
-            .raw-input-wrapper {
-                text-align: left;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 8px;
-                font-size: 12px;
-                ${viraFormCssVars['vira-form-border-color'].name}: #ddd;
-                color: #666;
-
-                & ${ViraInput} {
-                    flex-grow: 1;
-                    width: unset;
-                    color: inherit;
-                    height: 20px;
-                    border: none;
-                }
-            }
-        `;
-    },
-    events: {
-        colorChange: defineElementEvent(),
-    },
-    render({ inputs, dispatch, events, state, updateState }) {
-        const color = Color.isColor(inputs.color)
-            ? inputs.color
-            : new Color(inputs.color || 'black');
-        const formatDefinition = colorFormats[state.selectedFormatName];
-        const rawInput = state.rawInput ?? color.toCss()[formatDefinition.rawSyntax];
-        const rawInputTemplate = html `
-            <div class="raw-input-wrapper">
-                <${ViraInput.assign({
-            value: rawInput,
-        })}
-                    ${listen(ViraInput.events.valueChange, (event) => {
-            const rawInput = event.detail;
-            updateState({
-                rawInput,
-            });
-            if (Color.isValidColorString(rawInput)) {
-                dispatch(new events.colorChange(rawInput));
-            }
-        })}
-                ></${ViraInput}>
-                <button
-                    class="code-button"
-                    ${listen('click', async () => {
-            await globalThis.navigator.clipboard.writeText(rawInput);
-        })}
-                >
-                    <${ViraIcon.assign({
-            icon: Copy24Icon,
-            fitContainer: true,
-        })}></${ViraIcon}>
-                </button>
-            </div>
-        `;
-        const hexValueTemplate = html `
-            <button
-                class="code-button"
-                ${listen('click', async () => {
-            await globalThis.navigator.clipboard.writeText(color.hexString);
-        })}
-            >
-                <span>${color.hexString}</span>
-                <${ViraIcon.assign({
-            icon: Copy24Icon,
-            fitContainer: true,
-        })}></${ViraIcon}>
-            </button>
-        `;
-        const swatchTemplate = html `
-            <div class="swatch-wrapper">
-                <${VirColorSwatch.assign({
-            backgroundColor: color,
-        })}></${VirColorSwatch}>
-                ${inputs.showHexValue ? hexValueTemplate : nothing}
-            </div>
-        `;
-        const pickerTemplate = html `
-            <div class="picker">
-                <${ViraSelect.assign({
-            options: colorFormatOptions,
-            value: state.selectedFormatName,
-        })}
-                    ${listen(ViraSelect.events.valueChange, (event) => {
-            const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
-            if (selectedFormat) {
-                updateState({
-                    selectedFormatName: selectedFormat,
-                });
-                colorLocalStorageClient.set.lastFormat(selectedFormat);
-            }
-        })}
-                ></${ViraSelect}>
-                ${rawInputTemplate}
-                <${VirColorFormatSliders.assign({
-            color,
-            colorFormatName: state.selectedFormatName,
-            showFormatName: false,
-        })}
-                    ${listen(VirColorFormatSliders.events.colorChange, (event) => {
-            dispatch(new events.colorChange(event.detail));
-            updateState({
-                rawInput: undefined,
-            });
-        })}
-                ></${VirColorFormatSliders}>
-            </div>
-        `;
-        if (inputs.alwaysShowPicker) {
-            return html `
-                ${swatchTemplate} ${pickerTemplate}
-            `;
-        }
-        else {
-            return html `
-                <${ViraPopUpTrigger.assign({
-                keepOpenAfterInteraction: true,
-            })}>
-                    <button
-                        class="trigger"
-                        slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
-                        ${listen('mousedown', () => {
-                const storedFormat = colorLocalStorageClient.get.lastFormat();
-                if (storedFormat) {
-                    updateState({
-                        selectedFormatName: storedFormat,
-                    });
-                }
-            })}
-                    >
-                        ${swatchTemplate}
-                    </button>
-                    <div
-                        class="pop-up"
-                        slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
-                    >
-                        ${pickerTemplate}
-                    </div>
-                </${ViraPopUpTrigger}>
-            `;
-        }
-    },
-});

package/dist/elements/vir-color-slider.element.d.ts

@@ -1,14 +0,0 @@
-import { type ColorCoordinateName, type ColorFormatName } from '../data/color-class/color-formats.js';
-import { Color } from '../data/color-class/color.js';
-/**
- * A slider for a specific color coordinate in a specific color space in a specific color.
- *
- * @category Elements
- */
-export declare const VirColorSlider: import("element-vir").DeclarativeElementDefinition<"vir-color-slider", {
-    color: Readonly<Color>;
-    colorFormatName: ColorFormatName;
-    colorCoordinateName: ColorCoordinateName;
-}, {}, {
-    valueChange: import("element-vir").DefineEvent<number>;
-}, "vir-color-slider-", "vir-color-slider-gradient", readonly [], readonly []>;

package/dist/elements/vir-color-slider.element.js

@@ -1,120 +0,0 @@
-/* node:coverage disable */
-import { assert, assertWrap } from '@augment-vir/assert';
-import { createArray } from '@augment-vir/common';
-import { extractEventTarget } from '@augment-vir/web';
-import { css, defineElement, defineElementEvent, html, listen, onDomRendered, unsafeCSS, } from 'element-vir';
-import { ViraInput } from 'vira/dist/elements/vira-input.element.js';
-import { viraFontCssVars } from 'vira/dist/styles/font.js';
-import { colorFormats, } from '../data/color-class/color-formats.js';
-import { Color } from '../data/color-class/color.js';
-/**
- * A slider for a specific color coordinate in a specific color space in a specific color.
- *
- * @category Elements
- */
-export const VirColorSlider = defineElement()({
-    tagName: 'vir-color-slider',
-    cssVars: {
-        'vir-color-slider-gradient': 'black',
-    },
-    styles: ({ cssVars }) => {
-        return css `
-            :host {
-                display: flex;
-                align-items: center;
-                font-family: ${viraFontCssVars['vira-monospace'].value};
-                gap: 2px;
-            }
-
-            input[type='range'] {
-                flex-grow: 1;
-                appearance: none;
-                background: ${cssVars['vir-color-slider-gradient'].value};
-                height: 9px;
-                border-radius: 4px;
-                cursor: pointer;
-            }
-
-            ${ViraInput} {
-                width: 76px;
-            }
-
-            .coordinate {
-                font-size: 18px;
-                margin-top: -4px;
-            }
-        `;
-    },
-    events: {
-        valueChange: defineElementEvent(),
-    },
-    render({ inputs, events, dispatch, cssVars }) {
-        const formatDefinition = colorFormats[inputs.colorFormatName];
-        const coordinateDefinition = formatDefinition.coords[inputs.colorCoordinateName];
-        if (!coordinateDefinition) {
-            throw new Error(`Invalid color coordinate '${inputs.colorCoordinateName}' for color format '${inputs.colorFormatName}'`);
-        }
-        const totalStops = 10;
-        const colorStops = createArray(totalStops, (index) => {
-            const value = coordinateDefinition.min +
-                (coordinateDefinition.max - coordinateDefinition.min) * (index / totalStops);
-            const stopColor = new Color({
-                [inputs.colorFormatName]: {
-                    ...inputs.color[inputs.colorFormatName],
-                    [inputs.colorCoordinateName]: value,
-                },
-            });
-            return stopColor.toCss()[formatDefinition.conversionFormat];
-        });
-        const gradient = css `linear-gradient(to right, ${unsafeCSS(colorStops.join(','))})`;
-        const coordinateValue = assertWrap.isNumber(inputs.color[inputs.colorFormatName][inputs.colorCoordinateName]);
-        const displayValue = coordinateDefinition.radix
-            ? Math.round(coordinateValue)
-                .toString(coordinateDefinition.radix)
-                .toUpperCase()
-                .padStart(coordinateDefinition.radixPad || 0, '0')
-            : String(coordinateValue);
-        return html `
-            <span class="coordinate">${inputs.colorCoordinateName.toUpperCase()}</span>
-            <input
-                type="range"
-                style=${css `
-                    ${cssVars['vir-color-slider-gradient'].name}: ${gradient};
-                `}
-                step=${Math.pow(10, coordinateDefinition.digits ? -coordinateDefinition.digits : 0)}
-                ${onDomRendered((element) => {
-            /**
-             * We must set these imperatively to force the input element to match the
-             * inputs, otherwise when swapping color formats these color sliders don't
-             * update correctly.
-             */
-            assert.instanceOf(element, HTMLInputElement);
-            element.min = String(coordinateDefinition.min);
-            element.max = String(coordinateDefinition.max);
-            element.value = String(coordinateValue);
-        })}
-                ${listen('input', (event) => {
-            const element = extractEventTarget(event, HTMLInputElement);
-            const newValue = Number(element.value);
-            if (isNaN(newValue)) {
-                return;
-            }
-            dispatch(new events.valueChange(newValue));
-        })}
-            />
-            <${ViraInput.assign({
-            value: displayValue,
-        })}
-                ${listen(ViraInput.events.valueChange, (event) => {
-            const newValue = coordinateDefinition.radix
-                ? parseInt(event.detail, coordinateDefinition.radix)
-                : Number(event.detail);
-            if (isNaN(newValue)) {
-                return;
-            }
-            dispatch(new events.valueChange(newValue));
-        })}
-            ></${ViraInput}>
-        `;
-    },
-});

package/dist/elements/vir-color-swatch.element.d.ts

@@ -1,20 +0,0 @@
-import { type Color } from '../data/color-class/color.js';
-/**
- * Show a background and/or foreground color. Note that if a foreground color is provided that it is
- * not actually applied to anything, you must provide a child element for it to be applied to.
- *
- * @category Elements
- */
-export declare const VirColorSwatch: import("element-vir").DeclarativeElementDefinition<"vir-color-swatch", ((Required<Pick<{
-    foregroundColor: string | Readonly<Color>;
-    backgroundColor: string | Readonly<Color>;
-}, "foregroundColor">> & Partial<Pick<{
-    foregroundColor: string | Readonly<Color>;
-    backgroundColor: string | Readonly<Color>;
-}, "backgroundColor">>) | (Required<Pick<{
-    foregroundColor: string | Readonly<Color>;
-    backgroundColor: string | Readonly<Color>;
-}, "backgroundColor">> & Partial<Pick<{
-    foregroundColor: string | Readonly<Color>;
-    backgroundColor: string | Readonly<Color>;
-}, "foregroundColor">>)) & {}, {}, {}, "vir-color-swatch-", "vir-color-swatch-", readonly [], readonly []>;

package/dist/elements/vir-color-swatch.element.js

@@ -1,48 +0,0 @@
-/* node:coverage disable */
-import { css, defineElement, html, unsafeCSS } from 'element-vir';
-/**
- * Show a background and/or foreground color. Note that if a foreground color is provided that it is
- * not actually applied to anything, you must provide a child element for it to be applied to.
- *
- * @category Elements
- */
-export const VirColorSwatch = defineElement()({
-    tagName: 'vir-color-swatch',
-    styles: css `
-        :host {
-            display: flex;
-            height: 400px;
-            width: 400px;
-            border: 1px solid black;
-            max-height: 100%;
-            max-width: 100%;
-            container-type: size;
-            overflow: hidden;
-        }
-
-        div {
-            flex-grow: 1;
-            height: 100%;
-            max-height: 100%;
-            width: 100%;
-            max-width: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-    `,
-    render({ inputs }) {
-        const backgroundColor = inputs.backgroundColor || inputs.foregroundColor;
-        const foregroundColor = inputs.foregroundColor || 'transparent';
-        return html `
-            <div
-                style=${css `
-                    background-color: ${unsafeCSS(backgroundColor)};
-                    color: ${unsafeCSS(foregroundColor)};
-                `}
-            >
-                <slot></slot>
-            </div>
-        `;
-    },
-});

package/dist/elements/vir-contrast-indicator.element.d.ts

@@ -1,10 +0,0 @@
-import { type CalculatedContrast, type FontWeight } from '../data/contrast/contrast.js';
-/**
- * Show contrast details for a calculated contrast.
- *
- * @category Elements
- */
-export declare const VirContrastIndicator: import("element-vir").DeclarativeElementDefinition<"vir-contrast-indicator", {
-    contrast: Readonly<CalculatedContrast>;
-    fontWeight: FontWeight;
-}, {}, {}, "vir-contrast-indicator-", "vir-contrast-indicator-", readonly [], readonly []>;

package/dist/elements/vir-contrast-indicator.element.js

@@ -1,96 +0,0 @@
-/* node:coverage disable */
-import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
-import { contrastLevelLabel, ContrastLevelName, contrastLevels, } from '../data/contrast/contrast.js';
-/**
- * Show contrast details for a calculated contrast.
- *
- * @category Elements
- */
-export const VirContrastIndicator = defineElement()({
-    tagName: 'vir-contrast-indicator',
-    styles: css `
-        :host {
-            display: inline-flex;
-            max-width: 100%;
-            font-size: 12px;
-        }
-
-        .wrapper {
-            text-align: center;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            max-width: 100%;
-            color: #aaa;
-        }
-
-        .${unsafeCSS(ContrastLevelName.Invisible)} {
-            color: red;
-        }
-        .${unsafeCSS(ContrastLevelName.Decoration)} {
-            color: #ff6600;
-        }
-        .${unsafeCSS(ContrastLevelName.Placeholder)} {
-            color: #a5a520;
-        }
-
-        .gauge {
-            align-self: center;
-            background-color: currentColor;
-            display: flex;
-            padding: 1px;
-            gap: 1px;
-            margin-bottom: 2px;
-            /* Sure sure if I actually want to keep this. */
-            display: none;
-        }
-
-        .gauge-level {
-            width: 10px;
-            height: 2px;
-
-            &.active {
-                background-color: white;
-            }
-        }
-
-        .gauge-text + .gauge-text {
-            border-left: 1px solid #ccc;
-            padding-left: 1ex;
-        }
-    `,
-    render({ inputs }) {
-        const gaugeLevels = contrastLevels
-            .toReversed()
-            .slice(1)
-            .map((level) => {
-            return html `
-                    <div
-                        class="gauge-level ${classMap({
-                active: level.min <= Math.abs(inputs.contrast.contrast),
-            })}"
-                    ></div>
-                `;
-        });
-        const title = [
-            inputs.contrast.contrastLevel.description,
-            '\nFont weights to font sizes:',
-            JSON.stringify(inputs.contrast.fontSizes, null, 4),
-        ].join('\n');
-        const fontSize = inputs.contrast.fontSizes[inputs.fontWeight] > 150
-            ? '-'
-            : `${inputs.contrast.fontSizes[inputs.fontWeight]}px`;
-        return html `
-            <div title=${title} class="wrapper ${inputs.contrast.contrastLevel.name}">
-                <div class="gauge">${gaugeLevels}</div>
-                <span>
-                    <span class="gauge-text">${Math.round(inputs.contrast.contrast)} Lc</span>
-                    <span class="gauge-text">
-                        ${contrastLevelLabel[inputs.contrast.contrastLevel.name]}
-                    </span>
-                    <span class="gauge-text">${fontSize}</span>
-                </span>
-            </div>
-        `;
-    },
-});