@electrovir/color 1.2.0 → 1.3.0

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

@@ -0,0 +1,14 @@
+/**
+ * A color swatch alongside the color in all of its different supported formats.
+ *
+ * @category Internal
+ */
+export declare const VirColorDetails: import("element-vir").DeclarativeElementDefinition<"vir-color-details", {
+    color: string;
+    /** Show a text input that triggers an event when it is edited, for changing the color. */
+    showInput: boolean;
+}, {
+    inputColorString: undefined | string;
+}, {
+    colorChange: import("element-vir").DefineEvent<string>;
+}, "vir-color-details-", "vir-color-details-", readonly [], readonly []>;

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

@@ -0,0 +1,122 @@
+/* node:coverage disable */
+import { getObjectTypedEntries, omitObjectKeys } from '@augment-vir/common';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { defineTable, noNativeSpacing, viraFontCssVars, ViraInput } from 'vira';
+import { Color } from '../color-class/color.js';
+import { VirColorSwatch } from './vir-color-swatch.element.js';
+/**
+ * A color swatch alongside the color in all of its different supported formats.
+ *
+ * @category Internal
+ */
+export const VirColorDetails = defineElement()({
+    tagName: 'vir-color-details',
+    styles: css `
+        :host {
+            display: flex;
+            gap: 16px;
+        }
+
+        ${VirColorSwatch} {
+            height: 200px;
+            width: 200px;
+        }
+
+        .swatch {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            align-items: center;
+        }
+
+        ${ViraInput} {
+            font-size: 14px;
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+            max-width: 200px;
+        }
+
+        td {
+            font-weight: bold;
+        }
+
+        th {
+            padding: 4px 8px;
+            font-weight: normal;
+            text-align: right;
+        }
+        pre {
+            ${noNativeSpacing};
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent(),
+    },
+    state() {
+        return {
+            inputColorString: undefined,
+        };
+    },
+    render({ inputs, dispatch, events, state, updateState }) {
+        const color = new Color(inputs.color);
+        const colorStrings = omitObjectKeys(color.toFormattedStrings(), ['name']);
+        if (state.inputColorString == undefined) {
+            updateState({
+                inputColorString: inputs.color,
+            });
+        }
+        const { rows } = defineTable([
+            {
+                key: 'colorFormat',
+            },
+            {
+                key: 'formattedString',
+            },
+        ], getObjectTypedEntries(colorStrings), ([colorFormat, value,]) => {
+            return {
+                colorFormat: `${colorFormat}:`,
+                formattedString: html `
+                        <pre>${value}</pre>
+                    `,
+            };
+        });
+        const inputTemplate = inputs.showInput
+            ? html `
+                  <${ViraInput.assign({
+                value: state.inputColorString || '',
+                fitText: true,
+            })}
+                      ${listen(ViraInput.events.valueChange, (event) => {
+                updateState({
+                    inputColorString: event.detail,
+                });
+                dispatch(new events.colorChange(event.detail));
+            })}
+                  ></${ViraInput}>
+              `
+            : '';
+        return html `
+            <div class="swatch">
+                <${VirColorSwatch.assign({
+            backgroundColor: inputs.color,
+        })}></${VirColorSwatch}>
+                ${inputTemplate}
+            </div>
+            <table>
+                <tbody>
+                    ${rows.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>
+        `;
+    },
+});

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

@@ -0,0 +1,9 @@
+/**
+ * A huge summary of a color pair's contrast levels, font sizes, font weights, etc.
+ *
+ * @category Elements
+ */
+export declare const VirColorPairContrastSummary: import("element-vir").DeclarativeElementDefinition<"vir-color-pair-contrast-summary", {
+    foregroundColor: string;
+    backgroundColor: string;
+}, {}, {}, "vir-color-pair-contrast-summary-", "vir-color-pair-contrast-summary-", readonly [], readonly []>;

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

@@ -0,0 +1,290 @@
+/* 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 { defineTable, noNativeSpacing, ViraBoldText, viraFontCssVars } from 'vira';
+import { Color } from '../color-class/color.js';
+import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '../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([
+            {
+                key: 'colorLayer',
+            },
+            {
+                key: 'colorValue',
+            },
+        ], getObjectTypedEntries({
+            'Foreground:': new Color(inputs.foregroundColor).toCss().hex,
+            'Background:': new Color(inputs.backgroundColor).toCss().hex,
+            'Contrast:': `${contrast.contrast} Lc`.padEnd(9, ' '),
+        }), ([colorLayer, value,]) => {
+            return {
+                colorLayer,
+                colorValue: html `
+                        <pre>${value}</pre>
+                    `,
+            };
+        });
+        const { rows: weightRows } = defineTable([
+            {
+                key: 'weight',
+            },
+            {
+                key: 'size',
+            },
+        ], Object.entries(contrast.fontSizes).map(([weight, size,]) => {
+            return {
+                weight: Number(weight),
+                size,
+            };
+        }), ({ size, weight }) => {
+            return {
+                size: `${round(size, { digits: 1 })}px`,
+                weight: html `
+                        <span
+                            style=${css `
+                                font-weight: ${weight};
+                            `}
+                        >
+                            ${weight}
+                        </span>
+                    `,
+            };
+        });
+        const { rows: levelRows } = defineTable([
+            {
+                key: 'boundaryLc',
+            },
+            {
+                key: 'levelName',
+            },
+        ], contrastLevels, (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-swatch.element.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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;
+    backgroundColor: string;
+}, "foregroundColor">> & Partial<Pick<{
+    foregroundColor: string;
+    backgroundColor: string;
+}, "backgroundColor">>) | (Required<Pick<{
+    foregroundColor: string;
+    backgroundColor: string;
+}, "backgroundColor">> & Partial<Pick<{
+    foregroundColor: string;
+    backgroundColor: string;
+}, "foregroundColor">>)) & {}, {}, {}, "vir-color-swatch-", "vir-color-swatch-", readonly [], readonly []>;

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

@@ -0,0 +1,48 @@
+/* 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",