@electrovir/color 1.7.1 → 1.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data/color-css.d.ts +15 -0
- package/dist/data/color-css.js +13 -0
- package/dist/elements/vir-color-pair.element.d.ts +1 -7
- package/dist/elements/vir-color-pair.element.js +2 -4
- package/dist/elements/vir-color-picker.element.js +9 -16
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +19 -19
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type CSSResult } from 'element-vir';
|
|
2
|
+
import { type SingleCssVarDefinition } from 'lit-css-vars';
|
|
3
|
+
/**
|
|
4
|
+
* A foreground/background color pair.
|
|
5
|
+
*
|
|
6
|
+
* @category Internal
|
|
7
|
+
*/
|
|
8
|
+
export type ColorPair = Record<'foreground' | 'background', SingleCssVarDefinition>;
|
|
9
|
+
/**
|
|
10
|
+
* Creates foreground and background CSS code. The foreground color is applied to the CSS `color`
|
|
11
|
+
* property and the background color is applied to the CSS `background-color` property.
|
|
12
|
+
*
|
|
13
|
+
* @category Color Theme
|
|
14
|
+
*/
|
|
15
|
+
export declare function colorCss(color: Readonly<ColorPair>): CSSResult;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { css } from 'element-vir';
|
|
2
|
+
/**
|
|
3
|
+
* Creates foreground and background CSS code. The foreground color is applied to the CSS `color`
|
|
4
|
+
* property and the background color is applied to the CSS `background-color` property.
|
|
5
|
+
*
|
|
6
|
+
* @category Color Theme
|
|
7
|
+
*/
|
|
8
|
+
export function colorCss(color) {
|
|
9
|
+
return css `
|
|
10
|
+
color: ${color.foreground.value};
|
|
11
|
+
background-color: ${color.background.value};
|
|
12
|
+
`;
|
|
13
|
+
}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ColorPair } from '../data/color-css.js';
|
|
2
2
|
import { type FontWeight } from '../data/contrast/contrast.js';
|
|
3
|
-
/**
|
|
4
|
-
* A foreground/background color pair.
|
|
5
|
-
*
|
|
6
|
-
* @category Internal
|
|
7
|
-
*/
|
|
8
|
-
export type ColorPair = Record<'foreground' | 'background', SingleCssVarDefinition>;
|
|
9
3
|
/**
|
|
10
4
|
* Showcase a foreground/backend color pair.
|
|
11
5
|
*
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { assertWrap, check } from '@augment-vir/assert';
|
|
3
3
|
import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
|
|
4
4
|
import { noNativeFormStyles, noNativeSpacing, viraFontCssVars } from 'vira';
|
|
5
|
+
import { colorCss } from '../data/color-css.js';
|
|
5
6
|
import { calculateContrast } from '../data/contrast/contrast.js';
|
|
6
7
|
import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
|
|
7
8
|
/**
|
|
@@ -167,10 +168,7 @@ export const VirColorPair = defineElement()({
|
|
|
167
168
|
});
|
|
168
169
|
})}
|
|
169
170
|
class="color-preview"
|
|
170
|
-
style=${
|
|
171
|
-
color: ${unsafeCSS(inputs.color.foreground.default)};
|
|
172
|
-
background: ${unsafeCSS(inputs.color.background.default)};
|
|
173
|
-
`}
|
|
171
|
+
style=${colorCss(inputs.color)}
|
|
174
172
|
>
|
|
175
173
|
<div class="square"></div>
|
|
176
174
|
<b>Aa</b>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { checkWrap } from '@augment-vir/assert';
|
|
3
3
|
import { getObjectTypedValues } from '@augment-vir/common';
|
|
4
4
|
import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
|
|
5
|
+
import { CssVarSyntaxName } from 'lit-css-vars';
|
|
5
6
|
import { Copy24Icon, noNativeFormStyles, viraFontCssVars, viraFormCssVars, ViraIcon, ViraInput, ViraPopUpTrigger, ViraSelect, viraShadows, } from 'vira';
|
|
6
7
|
import { ColorFormatName, colorFormats } from '../data/color-class/color-formats.js';
|
|
7
8
|
import { Color } from '../data/color-class/color.js';
|
|
@@ -22,8 +23,14 @@ const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName
|
|
|
22
23
|
export const VirColorPicker = defineElement()({
|
|
23
24
|
tagName: 'vir-color-picker',
|
|
24
25
|
cssVars: {
|
|
25
|
-
'vir-color-picker-swatch-width':
|
|
26
|
-
|
|
26
|
+
'vir-color-picker-swatch-width': {
|
|
27
|
+
default: '100px',
|
|
28
|
+
syntax: CssVarSyntaxName.Length,
|
|
29
|
+
},
|
|
30
|
+
'vir-color-picker-swatch-height': {
|
|
31
|
+
default: '100px',
|
|
32
|
+
syntax: CssVarSyntaxName.Length,
|
|
33
|
+
},
|
|
27
34
|
},
|
|
28
35
|
state() {
|
|
29
36
|
return {
|
|
@@ -248,17 +255,3 @@ export const VirColorPicker = defineElement()({
|
|
|
248
255
|
}
|
|
249
256
|
},
|
|
250
257
|
});
|
|
251
|
-
if ('CSS' in globalThis) {
|
|
252
|
-
globalThis.CSS.registerProperty({
|
|
253
|
-
name: String(VirColorPicker.cssVars['vir-color-picker-swatch-width'].name),
|
|
254
|
-
syntax: '<length>',
|
|
255
|
-
inherits: true,
|
|
256
|
-
initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-width'].default,
|
|
257
|
-
});
|
|
258
|
-
globalThis.CSS.registerProperty({
|
|
259
|
-
name: String(VirColorPicker.cssVars['vir-color-picker-swatch-height'].name),
|
|
260
|
-
syntax: '<length>',
|
|
261
|
-
inherits: true,
|
|
262
|
-
initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-height'].default,
|
|
263
|
-
});
|
|
264
|
-
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './data/color-class/color-formats.js';
|
|
2
2
|
export * from './data/color-class/color-name-length.js';
|
|
3
3
|
export * from './data/color-class/color.js';
|
|
4
|
+
export * from './data/color-css.js';
|
|
4
5
|
export * from './data/contrast/contrast.js';
|
|
5
6
|
export * from './elements/vir-all-color-space-sliders.element.js';
|
|
6
7
|
export * from './elements/vir-all-spaces-color-picker.element.js';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './data/color-class/color-formats.js';
|
|
2
2
|
export * from './data/color-class/color-name-length.js';
|
|
3
3
|
export * from './data/color-class/color.js';
|
|
4
|
+
export * from './data/color-css.js';
|
|
4
5
|
export * from './data/contrast/contrast.js';
|
|
5
6
|
export * from './elements/vir-all-color-space-sliders.element.js';
|
|
6
7
|
export * from './elements/vir-all-spaces-color-picker.element.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@electrovir/color",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.3",
|
|
4
4
|
"description": "A wrapper for culori with an extremely simple API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"color",
|
|
@@ -50,47 +50,47 @@
|
|
|
50
50
|
"test:update": "npm test update"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@augment-vir/assert": "^31.
|
|
54
|
-
"@augment-vir/common": "^31.
|
|
55
|
-
"@augment-vir/web": "^31.
|
|
53
|
+
"@augment-vir/assert": "^31.59.0",
|
|
54
|
+
"@augment-vir/common": "^31.59.0",
|
|
55
|
+
"@augment-vir/web": "^31.59.0",
|
|
56
56
|
"@electrovir/local-storage-client": "^0.0.2",
|
|
57
57
|
"apca-w3": "^0.1.9",
|
|
58
58
|
"color-name": "^2.1.0",
|
|
59
59
|
"culori": "^4.0.2",
|
|
60
60
|
"object-shape-tester": "^6.11.0",
|
|
61
|
-
"type-fest": "^5.
|
|
61
|
+
"type-fest": "^5.4.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@augment-vir/test": "^31.
|
|
64
|
+
"@augment-vir/test": "^31.59.0",
|
|
65
65
|
"@eslint/eslintrc": "^3.3.3",
|
|
66
66
|
"@eslint/js": "^9.39.2",
|
|
67
67
|
"@stylistic/eslint-plugin": "^5.7.0",
|
|
68
68
|
"@stylistic/eslint-plugin-ts": "^4.4.1",
|
|
69
69
|
"@types/color-name": "^2.0.0",
|
|
70
70
|
"@types/culori": "^4.0.1",
|
|
71
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
71
|
+
"@typescript-eslint/eslint-plugin": "^8.53.0",
|
|
72
72
|
"@web/dev-server-esbuild": "^1.0.4",
|
|
73
73
|
"@web/test-runner": "^0.20.2",
|
|
74
74
|
"@web/test-runner-commands": "^0.9.0",
|
|
75
75
|
"@web/test-runner-playwright": "^0.11.1",
|
|
76
76
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
77
|
-
"cspell": "^9.
|
|
77
|
+
"cspell": "^9.6.0",
|
|
78
78
|
"dependency-cruiser": "^17.3.6",
|
|
79
|
-
"element-book": "^26.
|
|
80
|
-
"element-vir": "^26.14.
|
|
79
|
+
"element-book": "^26.15.2",
|
|
80
|
+
"element-vir": "^26.14.2",
|
|
81
81
|
"esbuild": "^0.27.2",
|
|
82
82
|
"eslint": "^9.39.2",
|
|
83
83
|
"eslint-config-prettier": "^10.1.8",
|
|
84
84
|
"eslint-plugin-jsdoc": "^62.0.0",
|
|
85
85
|
"eslint-plugin-monorepo-cop": "^1.0.2",
|
|
86
|
-
"eslint-plugin-playwright": "^2.
|
|
87
|
-
"eslint-plugin-prettier": "^5.5.
|
|
86
|
+
"eslint-plugin-playwright": "^2.5.0",
|
|
87
|
+
"eslint-plugin-prettier": "^5.5.5",
|
|
88
88
|
"eslint-plugin-require-extensions": "^0.1.3",
|
|
89
89
|
"eslint-plugin-sonarjs": "^3.0.5",
|
|
90
90
|
"eslint-plugin-unicorn": "^62.0.0",
|
|
91
91
|
"execute-in-browser": "^1.0.9",
|
|
92
92
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
93
|
-
"lit-css-vars": "^3.
|
|
93
|
+
"lit-css-vars": "^3.2.2",
|
|
94
94
|
"markdown-code-example-inserter": "^3.0.3",
|
|
95
95
|
"npm-check-updates": "^19.3.1",
|
|
96
96
|
"prettier": "~3.3.3",
|
|
@@ -98,15 +98,15 @@
|
|
|
98
98
|
"prettier-plugin-jsdoc": "^1.8.0",
|
|
99
99
|
"prettier-plugin-multiline-arrays": "^4.1.3",
|
|
100
100
|
"prettier-plugin-organize-imports": "^4.3.0",
|
|
101
|
-
"prettier-plugin-packagejson": "^2.5.
|
|
102
|
-
"prettier-plugin-sort-json": "^4.
|
|
101
|
+
"prettier-plugin-packagejson": "^2.5.21",
|
|
102
|
+
"prettier-plugin-sort-json": "^4.2.0",
|
|
103
103
|
"prettier-plugin-toml": "^2.0.6",
|
|
104
104
|
"runstorm": "^1.0.0",
|
|
105
|
-
"typedoc": "^0.28.
|
|
105
|
+
"typedoc": "^0.28.16",
|
|
106
106
|
"typescript": "^5.9.3",
|
|
107
|
-
"typescript-eslint": "^8.
|
|
108
|
-
"vira": "^28.19.
|
|
109
|
-
"virmator": "^14.4.
|
|
107
|
+
"typescript-eslint": "^8.53.0",
|
|
108
|
+
"vira": "^28.19.6",
|
|
109
|
+
"virmator": "^14.4.3",
|
|
110
110
|
"vite": "^7.3.1"
|
|
111
111
|
},
|
|
112
112
|
"peerDependencies": {
|