@electrovir/color 1.7.12 → 2.0.0-beta.0

package/dist/elements/vir-color-pair-contrast-summary.element.js

@@ -1,307 +0,0 @@
-/* node:coverage disable */
-import { assertWrap } from '@augment-vir/assert';
-import { getObjectTypedEntries, round } from '@augment-vir/common';
-import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
-import { ViraBoldText } from 'vira/dist/elements/vira-bold-text.element.js';
-import { viraFontCssVars } from 'vira/dist/styles/font.js';
-import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
-import { defineTable } from 'vira/dist/util/define-table.js';
-import { Color } from '../data/color-class/color.js';
-import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '../data/contrast/contrast.js';
-import { VirColorSwatch } from './vir-color-swatch.element.js';
-import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
-/**
- * A huge summary of a color pair's contrast levels, font sizes, font weights, etc.
- *
- * @category Elements
- */
-export const VirColorPairContrastSummary = defineElement()({
-    tagName: 'vir-color-pair-contrast-summary',
-    styles: css `
-        :host {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 32px;
-        }
-
-        /* Color overlay styles */
-        .color-overlay {
-            display: flex;
-            align-items: center;
-            max-width: 100%;
-            gap: 8px;
-        }
-
-        .constant-size-wrapper {
-            display: flex;
-            align-items: baseline;
-            gap: 5cqmin;
-            font-size: 20cqmin;
-        }
-
-        .square {
-            margin: 12px 0;
-            width: 20cqmin;
-            height: 20cqmin;
-            background-color: currentColor;
-        }
-
-        .foreground-content {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-        }
-
-        .needed-size {
-            display: flex;
-            justify-content: center;
-            top: 100%;
-            left: 0;
-            text-align: center;
-            position: absolute;
-            width: 100%;
-        }
-
-        ${VirContrastIndicator} {
-            width: 100%;
-        }
-
-        .color-overlay td {
-            padding: 4px 8px;
-            font-weight: bold;
-        }
-
-        .color-overlay th {
-            padding: 4px 8px;
-            text-align: end;
-            font-weight: normal;
-        }
-
-        /* Text weights styles */
-        .text-weights td {
-            padding: 4px;
-        }
-
-        .size-display {
-            height: 50px;
-            width: 100px;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-        }
-
-        .cell-size {
-            width: 5em;
-        }
-
-        /* Contrast levels styles */
-        .contrast-levels td {
-            padding: 4px;
-        }
-
-        .contrast-levels tr {
-            opacity: 0.4;
-        }
-
-        .contrast-levels .selected-row {
-            opacity: 1;
-            font-weight: bold;
-        }
-
-        pre {
-            ${noNativeSpacing};
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-        }
-
-        .monospace-font {
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-        }
-    `,
-    render({ inputs }) {
-        const contrast = calculateContrast({
-            background: new Color(inputs.backgroundColor).toCss().rgb,
-            foreground: new Color(inputs.foregroundColor).toCss().rgb,
-        });
-        const { rows: colorPairRows } = defineTable({
-            headers: [
-                {
-                    key: 'colorLayer',
-                },
-                {
-                    key: 'colorValue',
-                },
-            ],
-            originalData: getObjectTypedEntries({
-                'Foreground:': new Color(inputs.foregroundColor).toFormattedStrings().hexString,
-                'Background:': new Color(inputs.backgroundColor).toFormattedStrings().hexString,
-                'Contrast:': `${contrast.contrast} Lc`.padEnd(9, ' '),
-            }),
-            dataMap: ([colorLayer, value,]) => {
-                return {
-                    colorLayer,
-                    colorValue: html `
-                        <pre>${value}</pre>
-                    `,
-                };
-            },
-        });
-        const { rows: weightRows } = defineTable({
-            headers: [
-                {
-                    key: 'weight',
-                },
-                {
-                    key: 'size',
-                },
-            ],
-            originalData: Object.entries(contrast.fontSizes).map(([weight, size,]) => {
-                return {
-                    weight: Number(weight),
-                    size,
-                };
-            }),
-            dataMap: ({ size, weight }) => {
-                return {
-                    size: `${round(size, {
-                        digits: 1,
-                    })}px`,
-                    weight: html `
-                        <span
-                            style=${css `
-                                font-weight: ${weight};
-                            `}
-                        >
-                            ${weight}
-                        </span>
-                    `,
-                };
-            },
-        });
-        const { rows: levelRows } = defineTable({
-            headers: [
-                {
-                    key: 'boundaryLc',
-                },
-                {
-                    key: 'levelName',
-                },
-            ],
-            originalData: contrastLevels,
-            dataMap: (contrastLevel) => {
-                return {
-                    boundaryLc: `${contrastLevel.min} Lc`,
-                    levelName: contrastLevelLabel[contrastLevel.name],
-                };
-            },
-        });
-        return html `
-            <div class="color-overlay">
-                <${VirColorSwatch.assign({
-            backgroundColor: inputs.backgroundColor,
-            foregroundColor: inputs.foregroundColor,
-        })}>
-                    <div class="foreground-content">
-                        <div class="constant-size-wrapper">
-                            <div class="square"></div>
-                            <b>Aa</b>
-                        </div>
-                        <div class="needed-size">
-                            <span
-                                style=${css `
-                                    font-size: ${contrast.fontSizes[fontWeightByName.Normal]}px;
-                                    line-height: ${contrast.fontSizes[fontWeightByName.Normal] *
-            0.77}px;
-                                    visibility: ${unsafeCSS(contrast.fontSizes[fontWeightByName.Normal] > 900
-            ? 'hidden'
-            : 'visible')};
-                                `}
-                            >
-                                Min Size
-                            </span>
-                        </div>
-                    </div>
-                </${VirColorSwatch}>
-                <div class="details">
-                    <table>
-                        <tbody>
-                            ${colorPairRows.map((row) => {
-            const cells = row.cells.map((cell, index) => {
-                const element = index ? 'td' : 'th';
-                return html `
-                                        <${element}>${cell.content}</${element}>
-                                    `;
-            });
-            return html `
-                                    <tr>${cells}</tr>
-                                `;
-        })}
-                        </tbody>
-                    </table>
-
-                    <${VirContrastIndicator.assign({
-            contrast,
-            fontWeight: fontWeightByName.Normal,
-        })}></${VirContrastIndicator}>
-                </div>
-            </div>
-
-            <table class="text-weights">
-                ${weightRows.map((row) => {
-            const cells = row.cells.map((cell) => {
-                return html `
-                            <td class="cell-${cell.key} monospace-font">${cell.content}</td>
-                        `;
-            });
-            return html `
-                        <tr>
-                            ${cells}
-                            <td>
-                                <div
-                                    class="size-display"
-                                    style=${css `
-                                        background-color: ${unsafeCSS(inputs.backgroundColor)};
-                                        color: ${unsafeCSS(inputs.foregroundColor)};
-                                        font-weight: ${row.data.weight};
-                                        font-size: ${row.data.size}px;
-                                    `}
-                                >
-                                    <span>Text</span>
-                                </div>
-                            </td>
-                        </tr>
-                    `;
-        })}
-            </table>
-
-            <table class="contrast-levels">
-                ${levelRows.map((row) => {
-            const isSelectedRow = contrast.contrastLevel.name === row.data.name;
-            const cells = row.cells.map((cell) => {
-                return html `
-                            <td><${ViraBoldText.assign({
-                    bold: isSelectedRow,
-                    text: assertWrap.isString(cell.content),
-                })}><${ViraBoldText}></td>
-                        `;
-            });
-            const title = [
-                row.data.description,
-                '\nFont weights to font sizes:',
-                JSON.stringify(calculateFontSizes(row.data.min), null, 4),
-            ].join('\n');
-            return html `
-                        <tr
-                            title=${title}
-                            class=${classMap({
-                'selected-row': isSelectedRow,
-            })}
-                        >
-                            ${cells}
-                        </tr>
-                    `;
-        })}
-            </table>
-        `;
-    },
-});

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

@@ -1,17 +0,0 @@
-import { type ColorPair } from '../data/color-css.js';
-import { type FontWeight } from '../data/contrast/contrast.js';
-/**
- * Showcase a foreground/backend color pair.
- *
- * @category Elements
- */
-export declare const VirColorPair: import("element-vir").DeclarativeElementDefinition<"vir-color-pair", {
-    color: Readonly<ColorPair>;
-    showVarValues: boolean;
-    showVarNames: boolean;
-    showContrast: boolean;
-    fontWeight: FontWeight;
-}, {
-    previewElement: undefined | HTMLElement;
-    forceShowEverything: boolean;
-}, {}, "vir-color-pair-no-contrast-tips", "vir-color-pair-", readonly [], readonly []>;

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

@@ -1,201 +0,0 @@
-/* node:coverage disable */
-import { assertWrap, check } from '@augment-vir/assert';
-import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
-import { viraFontCssVars } from 'vira/dist/styles/font.js';
-import { noNativeFormStyles, noNativeSpacing } from 'vira/dist/styles/native-styles.js';
-import { calculateContrast } from '../data/contrast/contrast.js';
-import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
-/**
- * Showcase a foreground/backend color pair.
- *
- * @category Elements
- */
-export const VirColorPair = defineElement()({
-    tagName: 'vir-color-pair',
-    state() {
-        return {
-            previewElement: undefined,
-            forceShowEverything: false,
-        };
-    },
-    hostClasses: {
-        'vir-color-pair-no-contrast-tips': ({ inputs, state }) => {
-            return !inputs.showContrast && !state.forceShowEverything;
-        },
-    },
-    styles: ({ hostClasses }) => {
-        return css `
-            :host {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                max-width: 100%;
-            }
-
-            .color-preview {
-                ${noNativeFormStyles};
-                cursor: pointer;
-                font-size: 32px;
-                padding-left: 12px;
-                padding-right: 0;
-                border: 1px solid #ccc;
-                border-radius: 8px;
-                display: flex;
-                gap: 8px;
-                align-items: baseline;
-
-                & b {
-                    margin: 12px 0;
-                    font-weight: bold;
-                    text-decoration: underline;
-                }
-
-                & .square {
-                    margin: 12px 0;
-                    width: 24px;
-                    height: 24px;
-                    background-color: currentColor;
-                }
-            }
-            ${hostClasses['vir-color-pair-no-contrast-tips'].selector} {
-                & .needed-size-wrapper {
-                    display: none;
-                }
-
-                & .color-preview {
-                    padding: 4px 24px;
-                }
-            }
-
-            .needed-size-wrapper {
-                align-self: stretch;
-                width: 56px;
-                position: relative;
-                overflow: hidden;
-                border-left: 1px solid #ccc;
-            }
-
-            .needed-size {
-                top: 0;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                left: 6px;
-                position: absolute;
-
-                & span {
-                    margin: 0 auto;
-                }
-            }
-
-            .css-var-names {
-                font-family: ${viraFontCssVars['vira-monospace'].value};
-                display: flex;
-                max-width: 100%;
-                flex-direction: column;
-                opacity: 0.6;
-                margin-top: 4px;
-            }
-
-            p {
-                ${noNativeSpacing};
-                display: flex;
-                gap: 0;
-                flex-wrap: wrap;
-
-                & span:last-child {
-                    margin-left: 1ex;
-                }
-            }
-
-            ${VirContrastIndicator} {
-                margin-top: 1px;
-            }
-        `;
-    },
-    render({ state, updateState, inputs }) {
-        const colorRows = [
-            'foreground',
-            'background',
-        ].map((layerKey) => {
-            const keyString = [
-                inputs.color[layerKey].name,
-                inputs.showVarValues || state.forceShowEverything ? ':' : '',
-            ]
-                .filter(check.isTruthy)
-                .join('');
-            const valueTemplate = inputs.showVarValues || state.forceShowEverything
-                ? html `
-                          <span>${inputs.color[layerKey].default}</span>
-                      `
-                : nothing;
-            return html `
-                <p>
-                    <span>${keyString}</span>
-                    ${valueTemplate}
-                </p>
-            `;
-        });
-        const cssVarNamesTemplate = inputs.showVarNames || state.forceShowEverything
-            ? html `
-                      <div class="css-var-names">${colorRows}</div>
-                  `
-            : nothing;
-        const contrast = state.previewElement
-            ? calculateContrast({
-                foreground: globalThis
-                    .getComputedStyle(state.previewElement)
-                    .getPropertyValue('color'),
-                background: globalThis
-                    .getComputedStyle(state.previewElement)
-                    .getPropertyValue('background-color'),
-            })
-            : undefined;
-        const contrastTemplate = contrast && (inputs.showContrast || state.forceShowEverything)
-            ? html `
-                      <${VirContrastIndicator.assign({
-                contrast,
-                fontWeight: inputs.fontWeight,
-            })}></${VirContrastIndicator}>
-                  `
-            : nothing;
-        return html `
-            <button
-                ${listen('click', () => {
-            updateState({
-                forceShowEverything: !state.forceShowEverything,
-            });
-        })}
-                ${onDomCreated((element) => {
-            updateState({
-                previewElement: assertWrap.instanceOf(element, HTMLElement),
-            });
-        })}
-                class="color-preview"
-                style=${css `
-                    color: ${unsafeCSS(inputs.color.foreground.default)};
-                    background: ${unsafeCSS(inputs.color.background.default)};
-                `}
-            >
-                <div class="square"></div>
-                <b>Aa</b>
-                <div class="needed-size-wrapper">
-                    <span class="needed-size">
-                        <span
-                            style=${css `
-                                visibility: ${unsafeCSS((contrast?.fontSizes[400] || Infinity) > 150
-            ? 'hidden'
-            : 'visible')};
-                                font-weight: ${inputs.fontWeight};
-                                font-size: ${contrast ? contrast.fontSizes[400] : 14}px;
-                            `}
-                        >
-                            Min
-                        </span>
-                    </span>
-                </div>
-            </button>
-            ${contrastTemplate} ${cssVarNamesTemplate}
-        `;
-    },
-});

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

@@ -1,20 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { Color } from '../data/color-class/color.js';
-/**
- * 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 declare const VirColorPicker: import("element-vir").DeclarativeElementDefinition<"vir-color-picker", Readonly<{
-    color: string | Readonly<Color> | undefined;
-} & PartialWithUndefined<{
-    alwaysShowPicker: boolean;
-    showHexValue: boolean;
-}>>, {
-    selectedFormatName: "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "rgb" | "hex";
-    rawInput: undefined | string;
-}, {
-    colorChange: import("element-vir").DefineEvent<string>;
-}, "vir-color-picker-always-show", "vir-color-picker-swatch-width" | "vir-color-picker-swatch-height", readonly [], readonly []>;