vira 32.0.0-beta.0 → 32.0.0

package/src/icons/lucide-icons.ts

@@ -1,120 +0,0 @@
-import {html, unsafeHTML} from 'element-vir';
-import * as lucideStaticImport from 'lucide-static';
-import {viraIconCssVars} from './icon-css-vars.js';
-import {type ViraIconSvg} from './icon-svg.js';
-
-/**
- * All supported Lucide icon names.
- *
- * @category Internal
- */
-export type LucideIconKey = keyof typeof lucideStaticImport;
-
-const defaultLucideAttributes: Readonly<Record<string, string>> = {
-    fill: String(viraIconCssVars['vira-icon-fill-color'].value),
-    stroke: String(viraIconCssVars['vira-icon-stroke-color'].value),
-    'stroke-width': String(viraIconCssVars['vira-icon-stroke-width'].value),
-};
-
-function setSvgAttribute({
-    svgString,
-    attributeName,
-    value,
-}: Readonly<{svgString: string; attributeName: string; value: string}>): string {
-    const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
-    const regex = new RegExp(String.raw`(\s)${escapedName}="[^"]*"`);
-
-    return regex.test(svgString)
-        ? svgString.replace(regex, `$1${attributeName}="${value}"`)
-        : svgString.replace(/<svg\b/, `<svg ${attributeName}="${value}"`);
-}
-
-function applySvgAttributes(
-    svgString: string,
-    attributes: Readonly<Record<string, string>>,
-): string {
-    return Object.entries(attributes).reduce(
-        (
-            result,
-            [
-                key,
-                value,
-            ],
-        ) => {
-            return setSvgAttribute({
-                svgString: result,
-                attributeName: key,
-                value,
-            });
-        },
-        svgString,
-    );
-}
-
-function isLucideIconKey(key: string): key is LucideIconKey {
-    return key in lucideStaticImport;
-}
-
-function getLucideIconSvg(key: LucideIconKey): string {
-    const svg = lucideStaticImport[key];
-
-    if (typeof svg !== 'string') {
-        throw new TypeError(`Lucide icon "${key}" is not a valid SVG string.`);
-    }
-
-    return svg;
-}
-
-function createLucideIconEntry(iconKey: LucideIconKey): ViraIconSvg {
-    return {
-        name: iconKey,
-        svgTemplate: html`
-            ${unsafeHTML(applySvgAttributes(getLucideIconSvg(iconKey), defaultLucideAttributes))}
-        `,
-    };
-}
-
-const lucideIconCache = new Map<LucideIconKey, ViraIconSvg>();
-
-/**
- * All [Lucide icons](https://lucide.dev) in a format compatible with `ViraIcon`. Each icon entry
- * can be accessed directly as a {@link ViraIconSvg}.
- *
- * @category Icon
- */
-export const lucideIcons: Readonly<Record<LucideIconKey, ViraIconSvg>> = new Proxy(
-    {} as Record<LucideIconKey, ViraIconSvg>,
-    {
-        get(_target, property: string) {
-            if (!isLucideIconKey(property)) {
-                return undefined;
-            }
-
-            const cached = lucideIconCache.get(property);
-
-            if (cached) {
-                return cached;
-            }
-
-            const entry = createLucideIconEntry(property);
-            lucideIconCache.set(property, entry);
-            return entry;
-        },
-        has(_target, property: string) {
-            return isLucideIconKey(property);
-        },
-        ownKeys() {
-            return Object.keys(lucideStaticImport);
-        },
-        getOwnPropertyDescriptor(_target, property: string) {
-            if (isLucideIconKey(property)) {
-                return {
-                    configurable: true,
-                    enumerable: true,
-                    writable: false,
-                };
-            }
-            return undefined;
-        },
-    },
-);

package/src/styles/form-styles.ts

@@ -1,86 +0,0 @@
-import {css, unsafeCSS} from 'element-vir';
-import {defineCssVars} from 'lit-css-vars';
-import {themeDefaultKey} from 'theme-vir/dist/color-theme/color-theme.js';
-import {viraFontCssVars} from './font.js';
-import {viraColorPalette} from './vira-color-palette.js';
-import {viraTheme} from './vira-color-theme.js';
-
-const defaultViraFormRadius = '6px';
-
-/**
- * CSS vars for vira form elements.
- *
- * @category CSS Vars
- * @category Styles
- */
-export const viraFormCssVars = defineCssVars({
-    'vira-form-border-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
-    'vira-form-placeholder-color':
-        viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value,
-
-    'vira-form-background-color': viraTheme.colors[themeDefaultKey].background.value,
-    'vira-form-foreground-color': viraTheme.colors[themeDefaultKey].foreground.value,
-
-    'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
-    'vira-form-secondary-body-foreground':
-        viraTheme.colors['vira-grey-foreground-header'].foreground.value,
-
-    'vira-form-text-selection-color':
-        viraTheme.colors['vira-brand-behind-bg-decoration'].background.value,
-    'vira-form-selection-hover-color':
-        viraTheme.colors['vira-brand-behind-bg-invisible'].background.value,
-    'vira-form-selection-active-color':
-        viraTheme.colors['vira-brand-behind-bg-decoration'].background.value,
-
-    'vira-form-error-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
-    'vira-form-error-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
-    'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
-
-    'vira-form-warning-color': viraTheme.colors['vira-yellow-behind-bg-non-body'].background.value,
-    'vira-form-warning-hover-color':
-        viraTheme.colors['vira-yellow-behind-bg-header'].background.value,
-    'vira-form-warning-active-color':
-        viraTheme.colors['vira-yellow-behind-bg-body'].background.value,
-
-    'vira-form-positive-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
-    'vira-form-positive-hover-color':
-        viraTheme.colors['vira-green-behind-bg-header'].background.value,
-    'vira-form-positive-active-color':
-        viraTheme.colors['vira-green-behind-bg-body'].background.value,
-
-    'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
-
-    'vira-form-label-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
-    'vira-form-small-text-size': '14px',
-    'vira-form-medium-text-size': '14px',
-    'vira-form-large-text-size': '22px',
-
-    'vira-form-radius': defaultViraFormRadius,
-    'vira-form-wrapper-radius': '12px',
-
-    'vira-form-focus-outline-color':
-        viraTheme.colors['vira-brand-foreground-header'].foreground.value,
-    'vira-form-focus-outline-border-radius': css`calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
-
-    'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,
-    'vira-form-plain-hover-color':
-        viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
-    'vira-form-plain-active-color':
-        viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
-
-    'vira-form-accent-primary-color':
-        viraTheme.colors['vira-brand-behind-bg-non-body'].background.value,
-    'vira-form-accent-primary-hover-color':
-        viraTheme.colors['vira-brand-behind-bg-header'].background.value,
-    'vira-form-accent-primary-active-color':
-        viraTheme.colors['vira-brand-behind-bg-body'].background.value,
-
-    'vira-form-danger-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
-    'vira-form-danger-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
-    'vira-form-danger-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
-
-    'vira-form-filled-background-color':
-        viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
-    'vira-form-filled-active-background-color':
-        viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
-});

package/src/styles/vira-color-palette.json

@@ -1,170 +0,0 @@
-{
-    "Red": {
-        "100": "#FFF6F5",
-        "150": "#FFEDEB",
-        "200": "#FFE4E1",
-        "250": "#FFDCD8",
-        "300": "#FFD1CB",
-        "350": "#FFC1B8",
-        "400": "#FFA79B",
-        "450": "#FF8274",
-        "500": "#FF564A",
-        "550": "#F43A32",
-        "600": "#E2322C",
-        "650": "#D02C27",
-        "700": "#BB2520",
-        "750": "#9E231D",
-        "800": "#82211A",
-        "850": "#701A13",
-        "900": "#611710",
-        "950": "#52140D",
-        "1000": "#43130D"
-    },
-    "Yellow": {
-        "100": "#FEF9E4",
-        "150": "#FDF2D1",
-        "200": "#FDEABF",
-        "250": "#FEE2AD",
-        "300": "#FDD89B",
-        "350": "#FAC986",
-        "400": "#EFB669",
-        "450": "#E29D34",
-        "500": "#CE8800",
-        "550": "#BB7B00",
-        "600": "#AC7100",
-        "650": "#9E6800",
-        "700": "#8C5C00",
-        "750": "#794D00",
-        "800": "#683E00",
-        "850": "#5B3301",
-        "900": "#502A05",
-        "950": "#442308",
-        "1000": "#381D0B"
-    },
-    "Green": {
-        "100": "#EBFFEE",
-        "150": "#DDFBE2",
-        "200": "#CDF8D6",
-        "250": "#BFF5CC",
-        "300": "#AFF0C0",
-        "350": "#9AE8B1",
-        "400": "#7FD99C",
-        "450": "#52C87F",
-        "500": "#1BB565",
-        "550": "#04A559",
-        "600": "#009852",
-        "650": "#008C4A",
-        "700": "#007C41",
-        "750": "#016A38",
-        "800": "#095831",
-        "850": "#024B29",
-        "900": "#014024",
-        "950": "#02371F",
-        "1000": "#062D1B"
-    },
-    "Teal": {
-        "100": "#E8FEFD",
-        "150": "#D9FAF8",
-        "200": "#C9F6F3",
-        "250": "#BAF2ED",
-        "300": "#A9EDE6",
-        "350": "#95E4DB",
-        "400": "#79D5CA",
-        "450": "#47C3B7",
-        "500": "#00B0A4",
-        "550": "#00A094",
-        "600": "#009389",
-        "650": "#00877D",
-        "700": "#00786F",
-        "750": "#00665F",
-        "800": "#01554F",
-        "850": "#004843",
-        "900": "#003E3A",
-        "950": "#033531",
-        "1000": "#072B29"
-    },
-    "Blue": {
-        "100": "#F5F9FF",
-        "150": "#EAF3FF",
-        "200": "#E0EDFF",
-        "250": "#D6E7FF",
-        "300": "#CBDFFF",
-        "350": "#B9D4FF",
-        "400": "#9EC3FF",
-        "450": "#7AADFF",
-        "500": "#5697FF",
-        "550": "#4988ED",
-        "600": "#427DDC",
-        "650": "#3B72CA",
-        "700": "#3365B6",
-        "750": "#2D569A",
-        "800": "#27487E",
-        "850": "#203D6C",
-        "900": "#1B345D",
-        "950": "#172C4F",
-        "1000": "#142540"
-    },
-    "Purple": {
-        "100": "#F9F7FF",
-        "150": "#F3EFFF",
-        "200": "#EDE8FF",
-        "250": "#E6E1FF",
-        "300": "#DED8FF",
-        "350": "#D2CBFF",
-        "400": "#C1B7FF",
-        "450": "#AD9BFF",
-        "500": "#9B80FF",
-        "550": "#8D6EF4",
-        "600": "#8265E3",
-        "650": "#775BD1",
-        "700": "#6A50BB",
-        "750": "#5A459E",
-        "800": "#4A3B82",
-        "850": "#3E3170",
-        "900": "#352A61",
-        "950": "#2D2452",
-        "1000": "#251F43"
-    },
-    "Pink": {
-        "100": "#FEF5FF",
-        "150": "#FFEAFF",
-        "200": "#FFE0FC",
-        "250": "#FFD7F8",
-        "300": "#FFCBF2",
-        "350": "#FFB9E9",
-        "400": "#FF9BDF",
-        "450": "#FF6DD6",
-        "500": "#F04AC5",
-        "550": "#DD3EB4",
-        "600": "#CC37A7",
-        "650": "#BC3099",
-        "700": "#A82988",
-        "750": "#8F2674",
-        "800": "#752361",
-        "850": "#641C53",
-        "900": "#561848",
-        "950": "#49153E",
-        "1000": "#3B1333"
-    },
-    "Slate": {
-        "100": "#F9F9F9",
-        "150": "#F2F2F2",
-        "200": "#EBEBEB",
-        "250": "#E5E5E5",
-        "300": "#DEDEDE",
-        "350": "#D2D2D2",
-        "400": "#C2C2C2",
-        "450": "#ADADAD",
-        "500": "#999999",
-        "550": "#8A8A8A",
-        "600": "#7F7F7F",
-        "650": "#747474",
-        "700": "#676767",
-        "750": "#585858",
-        "800": "#494949",
-        "850": "#3E3E3E",
-        "900": "#353535",
-        "950": "#2D2D2D",
-        "1000": "#252525"
-    }
-}

package/src/styles/vira-color-theme-object.ts

@@ -1,170 +0,0 @@
-import {check} from '@augment-vir/assert';
-import {
-    type AnyObject,
-    arrayToObject,
-    filterMap,
-    getEnumValues,
-    getObjectTypedKeys,
-    mapEnumToObject,
-    removeDuplicates,
-    removePrefix,
-    type RemovePrefix,
-    removeSuffix,
-    type RemoveSuffix,
-    type UnionToTuple,
-} from '@augment-vir/common';
-import {ContrastLevelName} from '@electrovir/color/dist/data/contrast/contrast.js';
-import {
-    type ColorThemeColor,
-    type themeDefaultKey,
-} from 'theme-vir/dist/color-theme/color-theme.js';
-import {viraTheme} from './vira-color-theme.js';
-
-const sortedContrastLevelNames = [
-    'highest-contrast' as const,
-    'lowest-contrast' as const,
-    ...getEnumValues(ContrastLevelName).sort(
-        (a, b) => Number(b.includes('-')) - Number(a.includes('-')),
-    ),
-];
-
-/**
- * `ContrastLevelName` values with the values containing internal dashes to the beginning so they
- * can be correctly used with `RemoveSuffix`.
- *
- * @category Internal
- */
-export type SortedContrastLevelName = [
-    'highest-contrast',
-    'lowest-contrast',
-    ...UnionToTuple<Extract<ContrastLevelName, `${string}-${string}`>>,
-    ...UnionToTuple<Exclude<ContrastLevelName, `${string}-${string}`>>,
-];
-
-/**
- * The names of all colors in {@link viraTheme}.
- *
- * @category Internal
- */
-export type ViraThemeColorName =
-    Extract<
-        keyof typeof viraTheme.colors,
-        `vira-${string}`
-    > extends `vira-${infer ColorPart}-${string}`
-        ? ColorPart
-        : never;
-
-const viraThemeColorNames = removeDuplicates(
-    filterMap(
-        Object.keys(viraTheme.colors),
-        (key) => key.split('-')[1],
-        (mappedKey) => mappedKey !== 'default',
-    ),
-).filter(check.isTruthy) as ViraThemeColorName[];
-
-/**
- * An enum of {@link ViraThemeColorName}.
- *
- * @category Internal
- */
-export const ViraThemeColorName = arrayToObject(
-    viraThemeColorNames,
-    (colorKey) => {
-        return {
-            key: colorKey,
-            value: colorKey,
-        };
-    },
-    {
-        useRequired: true,
-    },
-) satisfies Record<ViraThemeColorName, ViraThemeColorName> as {[Key in ViraThemeColorName]: Key};
-
-/**
- * All {@link viraTheme} color pair keys.
- *
- * @category Internal
- */
-export type AllViraThemeKeys = keyof typeof viraTheme.colors;
-
-/**
- * All {@link viraTheme} color pair keys.
- *
- * @category Internal
- */
-export const allViraThemeKeys = getObjectTypedKeys(viraTheme.colors);
-
-/**
- * All {@link viraTheme} color pair keys with the contrast level suffix removed.
- *
- * @category Internal
- */
-export type ViraThemeKeysWithoutContrastLevel = Exclude<
-    RemoveSuffix<RemoveSuffix<AllViraThemeKeys, SortedContrastLevelName>, ['-']>,
-    typeof themeDefaultKey
->;
-
-/**
- * All {@link viraTheme} color pair grouped by their color name, pair name, and contrast level.
- *
- * @category Internal
- */
-export type ViraThemeByKeys = {
-    [ColorName in ViraThemeColorName]: {
-        [PairName in RemovePrefix<ViraThemeKeysWithoutContrastLevel, `vira-${ColorName}-`>]: {
-            [ContrastLevel in RemovePrefix<
-                AllViraThemeKeys,
-                `vira-${ColorName}-${PairName}-`
-            >]: ColorThemeColor;
-        };
-    };
-};
-
-/**
- * All {@link viraTheme} color pair grouped by their color name, pair name, and contrast level. See
- * {@link viraTheme} for extensive documentation on what the colors pairs mean.
- *
- * @category Internal
- */
-export const viraThemeByKeys: ViraThemeByKeys = mapEnumToObject(ViraThemeColorName, (colorName) => {
-    const colorPairKeys = removeDuplicates(
-        filterMap(
-            allViraThemeKeys,
-            (key) => {
-                return sortedContrastLevelNames.reduce(
-                    (final, current) => {
-                        return removeSuffix({
-                            value: final,
-                            suffix: `-${current}`,
-                        });
-                    },
-                    removePrefix({
-                        value: key,
-                        prefix: `vira-${colorName}-`,
-                    }),
-                );
-            },
-            (mappedKey, originalKey) => {
-                return originalKey.startsWith(`vira-${colorName}-`);
-            },
-        ),
-    );
-
-    return arrayToObject(colorPairKeys, (colorPairKey) => {
-        return {
-            key: colorPairKey,
-            value: arrayToObject(sortedContrastLevelNames, (contrastLevel) => {
-                const finalKey = `vira-${colorName}-${colorPairKey}-${contrastLevel}`;
-
-                if (!check.hasKey(viraTheme.colors, finalKey)) {
-                    return undefined;
-                }
-
-                return {
-                    key: contrastLevel,
-                    value: viraTheme.colors[finalKey],
-                };
-            }),
-        };
-    });
-}) as AnyObject as ViraThemeByKeys;

package/src/util/color-local-storage.client.ts

@@ -1,7 +0,0 @@
-import {ColorFormatName} from '@electrovir/color/dist/data/color-class/color-formats.js';
-import {LocalStorageClient} from '@electrovir/local-storage-client';
-import {enumShape} from 'object-shape-tester';
-
-export const colorLocalStorageClient = new LocalStorageClient({
-    lastFormat: enumShape(ColorFormatName),
-});