vira 29.5.3 → 29.5.5

package/dist/icons/colored-icon.d.ts

@@ -0,0 +1,11 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type CSSResult } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+import { type ViraIconSvg } from './icon-svg.js';
+/**
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
+ * the original icon can be used.
+ *
+ * @category Icon
+ */
+export declare function createColoredIcon(icon: ViraIconSvg, colors: PartialWithUndefined<Record<keyof typeof viraIconCssVars, string | CSSResult>>): ViraIconSvg;

package/dist/icons/colored-icon.js

@@ -0,0 +1,34 @@
+import { check } from '@augment-vir/assert';
+import { getObjectTypedKeys } from '@augment-vir/common';
+import { css, html, unsafeCSS } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+import { defineIcon } from './icon-svg.js';
+/**
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
+ * the original icon can be used.
+ *
+ * @category Icon
+ */
+export function createColoredIcon(icon, colors) {
+    const colorStyles = getObjectTypedKeys(colors)
+        .map((cssVarName) => {
+        if (colors[cssVarName]) {
+            return `${viraIconCssVars[cssVarName].name}: ${String(colors[cssVarName])};`;
+        }
+        else {
+            return undefined;
+        }
+    })
+        .filter(check.isTruthy)
+        .join(' ');
+    const styles = css `
+        ${unsafeCSS(colorStyles)}
+        display: inline-flex;
+    `;
+    return defineIcon({
+        name: icon.name,
+        svgTemplate: html `
+            <div style=${styles}>${icon.svgTemplate}</div>
+        `,
+    });
+}

package/dist/icons/icon-svg.d.ts

@@ -1,5 +1,4 @@
 import { type TemplateResult } from 'element-vir';
-import { viraIconCssVars } from './icon-css-vars.js';
 /**
  * An individual Vira icon SVG definition.
  *
@@ -18,10 +17,3 @@ export declare function defineIcon({ name, svgTemplate, }: {
     name: string;
     svgTemplate: TemplateResult;
 }): ViraIconSvg;
-/**
- * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
- * the original icon can be used.
- *
- * @category Icon
- */
-export declare function createColoredIcon(icon: ViraIconSvg, colors: Partial<Record<keyof typeof viraIconCssVars, string>>): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -1,7 +1,3 @@
-import { getObjectTypedKeys, stringify } from '@augment-vir/common';
-import Color from 'colorjs.io';
-import { html } from 'element-vir';
-import { viraIconCssVars } from './icon-css-vars.js';
 /**
  * A function used to define an individual Vira icon SVG.
  *
@@ -14,35 +10,3 @@ export function defineIcon({ name, svgTemplate, }) {
     };
     return iconSvg;
 }
-function getAssertedValidColor(input) {
-    try {
-        if (!input) {
-            throw new Error('invalid empty color');
-        }
-        return new Color(input);
-    }
-    catch {
-        throw new Error(`Invalid color: ${stringify(input)}`);
-    }
-}
-/**
- * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
- * the original icon can be used.
- *
- * @category Icon
- */
-export function createColoredIcon(icon, colors) {
-    const colorStyles = getObjectTypedKeys(colors)
-        .map((cssVarName) => {
-        const colorValue = colors[cssVarName];
-        const color = getAssertedValidColor(colorValue);
-        return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
-    })
-        .join(' ');
-    return defineIcon({
-        name: icon.name,
-        svgTemplate: html `
-            <div style=${colorStyles}>${icon.svgTemplate}</div>
-        `,
-    });
-}

package/dist/icons/index.d.ts

@@ -1,4 +1,5 @@
 /** This file is automatically updated by update-icon-exports.ts */
+export * from './colored-icon.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
 export * from './icon-svgs/arrow-up-24.icon.js';

package/dist/icons/index.js

@@ -45,6 +45,7 @@ import { StatusWarning24Icon } from './icon-svgs/status-warning-24.icon.js';
 import { Sun24Icon } from './icon-svgs/sun-24.icon.js';
 import { Upload24Icon } from './icon-svgs/upload-24.icon.js';
 import { X24Icon } from './icon-svgs/x-24.icon.js';
+export * from './colored-icon.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
 export * from './icon-svgs/arrow-up-24.icon.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "29.5.3",
+    "version": "29.5.5",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -41,7 +41,6 @@
         "@augment-vir/assert": "^31.59.3",
         "@augment-vir/common": "^31.59.3",
         "@augment-vir/web": "^31.59.3",
-        "colorjs.io": "^0.6.1",
         "date-vir": "^8.1.1",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.5.0",