vira 31.31.7 → 32.0.0-beta.0

package/src/elements/color/vira-color-pair-contrast-summary.element.ts

@@ -0,0 +1,340 @@
+/* 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<{
+    foregroundColor: string;
+    backgroundColor: string;
+}>()({
+    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/src/elements/color/vira-color-pair.element.ts

@@ -0,0 +1,222 @@
+/* node:coverage disable */
+
+import {assertWrap, check} from '@augment-vir/assert';
+import {type ColorPair} from '@electrovir/color/dist/data/color-css.js';
+import {calculateContrast, type FontWeight} 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<{
+    color: Readonly<ColorPair>;
+    showVarValues: boolean;
+    showVarNames: boolean;
+    showContrast: boolean;
+    fontWeight: FontWeight;
+}>()({
+    tagName: 'vira-color-pair',
+    state() {
+        return {
+            previewElement: undefined as undefined | HTMLElement,
+            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',
+            ] as const
+        ).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}
+        `;
+    },
+});