vira 31.31.7 → 32.0.0

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

@@ -0,0 +1,308 @@
+/* node:coverage disable */
+// cspell:word cqmin
+import { assertWrap } from '@augment-vir/assert';
+import { getObjectTypedEntries, round } from '@augment-vir/common';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { noNativeSpacing } from '../../styles/native-styles.js';
+import { defineTable } from '../../util/define-table.js';
+import { ViraBoldText } from '../vira-bold-text.element.js';
+import { ViraColorSwatch } from './vira-color-swatch.element.js';
+import { ViraContrastIndicator } from './vira-contrast-indicator.element.js';
+/**
+ * A huge summary of a color pair's contrast levels, font sizes, font weights, etc.
+ *
+ * @category Elements
+ */
+export const ViraColorPairContrastSummary = defineElement()({
+    tagName: 'vira-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%;
+        }
+
+        ${ViraContrastIndicator} {
+            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">
+                <${ViraColorSwatch.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>
+                </${ViraColorSwatch}>
+                <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>
+
+                    <${ViraContrastIndicator.assign({
+            contrast,
+            fontWeight: fontWeightByName.Normal,
+        })}></${ViraContrastIndicator}>
+                </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/color/vira-color-pair.element.d.ts

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

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

@@ -0,0 +1,201 @@
+/* node:coverage disable */
+import { assertWrap, check } from '@augment-vir/assert';
+import { calculateContrast } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { noNativeFormStyles, noNativeSpacing } from '../../styles/native-styles.js';
+import { ViraContrastIndicator } from './vira-contrast-indicator.element.js';
+/**
+ * Showcase a foreground/backend color pair.
+ *
+ * @category Elements
+ */
+export const ViraColorPair = defineElement()({
+    tagName: 'vira-color-pair',
+    state() {
+        return {
+            previewElement: undefined,
+            forceShowEverything: false,
+        };
+    },
+    hostClasses: {
+        'vira-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['vira-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;
+                }
+            }
+
+            ${ViraContrastIndicator} {
+                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 `
+                      <${ViraContrastIndicator.assign({
+                contrast,
+                fontWeight: inputs.fontWeight,
+            })}></${ViraContrastIndicator}>
+                  `
+            : 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/color/vira-color-picker.element.d.ts

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