vira 2.2.1 → 2.3.0

package/dist/elements/index.d.ts

@@ -1,4 +1,4 @@
-/** This file is automatically updated by update-element-exports.ts */
+/** This file is automatically updated by update-index-exports.ts */
 export * from './define-vira-element';
 export * from './vira-button/vira-button.element';
 export * from './vira-collapsible/vira-collapsible-wrapper.element';

package/dist/elements/index.js

@@ -1,4 +1,4 @@
-/** This file is automatically updated by update-element-exports.ts */
+/** This file is automatically updated by update-index-exports.ts */
 export * from './define-vira-element';
 export * from './vira-button/vira-button.element';
 export * from './vira-collapsible/vira-collapsible-wrapper.element';

package/dist/elements/vira-button/vira-button.element.js

@@ -64,8 +64,8 @@ export const ViraButton = defineViraElement()({
         }
 
         button {
-            cursor: pointer;
             ${noNativeFormStyles};
+            cursor: pointer;
             position: relative;
             width: 100%;
             height: 100%;

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

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars';
 export type ViraIconSvg = {
     name: string;
     svgTemplate: TemplateResult;
@@ -7,3 +8,4 @@ export declare function defineIcon({ name, svgTemplate, }: {
     name: string;
     svgTemplate: TemplateResult;
 }): ViraIconSvg;
+export declare function createColoredIcon(icon: ViraIconSvg, colors: Partial<Record<keyof typeof viraIconCssVars, string>>): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -1,3 +1,7 @@
+import { getObjectTypedKeys } from '@augment-vir/common';
+import { html } from 'element-vir';
+import { getAssertedValidColor } from '../styles/color';
+import { viraIconCssVars } from './icon-css-vars';
 export function defineIcon({ name, svgTemplate, }) {
     const iconSvg = {
         name,
@@ -5,3 +9,18 @@ export function defineIcon({ name, svgTemplate, }) {
     };
     return iconSvg;
 }
+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/index.d.ts

@@ -1,3 +1,5 @@
+/** This file is automatically updated by update-root-index-exports.ts */
 export * from './elements';
 export * from './icons';
+export * from './re-exports';
 export * from './styles';

package/dist/index.js

@@ -1,3 +1,5 @@
+/** This file is automatically updated by update-root-index-exports.ts */
 export * from './elements';
 export * from './icons';
+export * from './re-exports';
 export * from './styles';

package/dist/re-exports/colorjs-io.d.ts

@@ -0,0 +1,5 @@
+import ColorImport from 'colorjs.io';
+export type { ColorTypes } from 'colorjs.io/types/src/color';
+export type { Format } from 'colorjs.io/types/src/space';
+export type Color = typeof ColorImport;
+export declare const Color: Color;

package/dist/re-exports/colorjs-io.js

@@ -0,0 +1,2 @@
+import ColorImport from 'colorjs.io';
+export const Color = ColorImport;

package/dist/re-exports/index.d.ts

@@ -0,0 +1,2 @@
+/** This file is automatically updated by update-index-exports.ts */
+export * from './colorjs-io';

package/dist/re-exports/index.js

@@ -0,0 +1,2 @@
+/** This file is automatically updated by update-index-exports.ts */
+export * from './colorjs-io';

package/dist/styles/color.d.ts

@@ -0,0 +1,4 @@
+import { Format } from 'colorjs.io/types/src/space';
+import { ColorTypes } from '../re-exports/colorjs-io';
+export declare function getAssertedValidColor(input: ColorTypes | undefined): import("colorjs.io/types/src/color").default;
+export declare const rgbCssColorFormat: Format;

package/dist/styles/color.js

@@ -0,0 +1,26 @@
+import { wrapInTry } from '@augment-vir/common';
+import { Color } from '../re-exports/colorjs-io';
+export function getAssertedValidColor(input) {
+    try {
+        if (!input) {
+            throw new Error('invalid empty color');
+        }
+        return new Color(input);
+    }
+    catch (caught) {
+        const stringInput = String(input);
+        const inputForMessage = stringInput.toLowerCase().match(/\[\s*object\s+object\s*\]/)
+            ? wrapInTry({ callback: () => JSON.stringify(input), fallbackValue: stringInput })
+            : stringInput;
+        throw new Error(`Invalid color: ${inputForMessage}`);
+    }
+}
+export const rgbCssColorFormat = {
+    name: 'rgb',
+    coords: [
+        '<number>[0, 255]',
+        '<number>[0, 255]',
+        '<number>[0, 255]',
+    ],
+    commas: true,
+};

package/dist/styles/index.d.ts

@@ -1,6 +1,9 @@
+/** This file is automatically updated by update-index-exports.ts */
+export * from './color';
 export * from './disabled';
 export * from './durations';
 export * from './focus';
 export * from './native-styles';
 export * from './scrollbar';
 export * from './user-select';
+export * from './vira-css-vars';

package/dist/styles/index.js

@@ -1,6 +1,9 @@
+/** This file is automatically updated by update-index-exports.ts */
+export * from './color';
 export * from './disabled';
 export * from './durations';
 export * from './focus';
 export * from './native-styles';
 export * from './scrollbar';
 export * from './user-select';
+export * from './vira-css-vars';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "2.2.1",
+    "version": "2.3.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -40,17 +40,17 @@
         "test:docs": "virmator code-in-markdown check"
     },
     "dependencies": {
-        "@augment-vir/common": "^16.4.1",
-        "element-vir": "^16.3.1",
-        "lit-css-vars": "^3.0.0",
-        "spa-router-vir": "^2.1.1",
+        "@augment-vir/common": "^18.1.0",
+        "element-vir": "^16.3.2",
+        "lit-css-vars": "^3.0.1",
+        "spa-router-vir": "^3.0.2",
         "type-fest": "^4.3.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^16.4.1",
-        "@augment-vir/node-js": "^16.4.1",
+        "@augment-vir/browser-testing": "^18.1.0",
+        "@augment-vir/node-js": "^18.1.0",
         "@open-wc/testing": "^3.2.0",
-        "@types/chai": "^4.3.5",
+        "@types/chai": "^4.3.6",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.4.1",
         "@web/test-runner": "^0.17.1",
@@ -61,6 +61,6 @@
         "istanbul-smart-text-reporter": "^1.1.2",
         "typescript": "^5.2.2",
         "vite": "^4.4.9",
-        "vite-tsconfig-paths": "^4.2.0"
+        "vite-tsconfig-paths": "^4.2.1"
     }
 }