@electrovir/color 1.7.2 → 1.7.3

package/dist/data/color-css.d.ts

@@ -0,0 +1,15 @@
+import { type CSSResult } from 'element-vir';
+import { type SingleCssVarDefinition } from 'lit-css-vars';
+/**
+ * A foreground/background color pair.
+ *
+ * @category Internal
+ */
+export type ColorPair = Record<'foreground' | 'background', SingleCssVarDefinition>;
+/**
+ * Creates foreground and background CSS code. The foreground color is applied to the CSS `color`
+ * property and the background color is applied to the CSS `background-color` property.
+ *
+ * @category Color Theme
+ */
+export declare function colorCss(color: Readonly<ColorPair>): CSSResult;

package/dist/data/color-css.js

@@ -0,0 +1,13 @@
+import { css } from 'element-vir';
+/**
+ * Creates foreground and background CSS code. The foreground color is applied to the CSS `color`
+ * property and the background color is applied to the CSS `background-color` property.
+ *
+ * @category Color Theme
+ */
+export function colorCss(color) {
+    return css `
+        color: ${color.foreground.value};
+        background-color: ${color.background.value};
+    `;
+}

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

@@ -1,11 +1,5 @@
-import { type SingleCssVarDefinition } from 'lit-css-vars';
+import { type ColorPair } from '../data/color-css.js';
 import { type FontWeight } from '../data/contrast/contrast.js';
-/**
- * A foreground/background color pair.
- *
- * @category Internal
- */
-export type ColorPair = Record<'foreground' | 'background', SingleCssVarDefinition>;
 /**
  * Showcase a foreground/backend color pair.
  *

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

@@ -2,6 +2,7 @@
 import { assertWrap, check } from '@augment-vir/assert';
 import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
 import { noNativeFormStyles, noNativeSpacing, viraFontCssVars } from 'vira';
+import { colorCss } from '../data/color-css.js';
 import { calculateContrast } from '../data/contrast/contrast.js';
 import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
 /**
@@ -167,10 +168,7 @@ export const VirColorPair = defineElement()({
             });
         })}
                 class="color-preview"
-                style=${css `
-                    color: ${unsafeCSS(inputs.color.foreground.default)};
-                    background: ${unsafeCSS(inputs.color.background.default)};
-                `}
+                style=${colorCss(inputs.color)}
             >
                 <div class="square"></div>
                 <b>Aa</b>

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './data/color-class/color-formats.js';
 export * from './data/color-class/color-name-length.js';
 export * from './data/color-class/color.js';
+export * from './data/color-css.js';
 export * from './data/contrast/contrast.js';
 export * from './elements/vir-all-color-space-sliders.element.js';
 export * from './elements/vir-all-spaces-color-picker.element.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from './data/color-class/color-formats.js';
 export * from './data/color-class/color-name-length.js';
 export * from './data/color-class/color.js';
+export * from './data/color-css.js';
 export * from './data/contrast/contrast.js';
 export * from './elements/vir-all-color-space-sliders.element.js';
 export * from './elements/vir-all-spaces-color-picker.element.js';

package/package.json

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