@electrovir/color 1.7.7 → 1.7.9

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.
Files changed (11) hide show
  1. package/dist/data/contrast/contrast.js +3 -1
  2. package/dist/demo/all-book-pages.js +2 -0
  3. package/dist/demo/vir-demo.element.js +3 -3
  4. package/dist/elements/vir-all-spaces-color-picker.element.js +3 -1
  5. package/dist/elements/vir-color-details.element.js +4 -1
  6. package/dist/elements/vir-color-format-sliders.element.js +1 -1
  7. package/dist/elements/vir-color-pair-contrast-summary.element.js +7 -2
  8. package/dist/elements/vir-color-pair.element.js +7 -15
  9. package/dist/elements/vir-color-picker.element.js +9 -1
  10. package/dist/elements/vir-color-slider.element.js +2 -1
  11. package/package.json +31 -28
package/dist/data/contrast/contrast.js CHANGED
@@ -47,7 +47,9 @@ export function calculateContrast({ background, foreground, }) {
47
47
  if (cached) {
48
48
  return cached;
49
49
  }
50
- const contrast = round(Number(calcAPCA(foreground, background)), { digits: 1 });
50
+ const contrast = round(Number(calcAPCA(foreground, background)), {
51
+ digits: 1,
52
+ });
51
53
  const result = {
52
54
  contrast,
53
55
  fontSizes: calculateFontSizes(contrast),
package/dist/demo/all-book-pages.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { virAllSpacesColorPickerBookPage } from '../elements/vir-all-spaces-color-picker.element.book.js';
2
2
  import { virColorPairContrastSummaryBookPage } from '../elements/vir-color-pair-contrast-summary.element.book.js';
3
+ import { virColorPairBookPage } from '../elements/vir-color-pair.element.book.js';
3
4
  import { virColorPickerBookPage } from '../elements/vir-color-picker.element.book.js';
4
5
  import { colorExamplesPage } from './color-examples.book.js';
5
6
  import { elementsBookPage, examplesBookPage } from './top-level-pages.js';
@@ -8,6 +9,7 @@ export const allBookPages = [
8
9
  examplesBookPage,
9
10
  colorExamplesPage,
10
11
  virAllSpacesColorPickerBookPage,
12
+ virColorPairBookPage,
11
13
  virColorPairContrastSummaryBookPage,
12
14
  virColorPickerBookPage,
13
15
  ];
package/dist/demo/vir-demo.element.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* node:coverage disable */
2
- import { ElementBookApp, ElementBookSlotName } from 'element-book';
2
+ import { ElementBookApp } from 'element-book';
3
3
  import { css, defineElement, html } from 'element-vir';
4
- import { noNativeSpacing } from 'vira';
4
+ import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
5
5
  import { allBookPages } from './all-book-pages.js';
6
6
  export const VirDemo = defineElement()({
7
7
  tagName: 'vir-demo',
@@ -36,7 +36,7 @@ export const VirDemo = defineElement()({
36
36
  basePath: 'color',
37
37
  },
38
38
  })}>
39
- <h1 slot=${ElementBookSlotName.NavHeader}>@electrovir/color</h1>
39
+ <h1 slot=${ElementBookApp.slotNames.navHeader}>@electrovir/color</h1>
40
40
  </${ElementBookApp}>
41
41
  `;
42
42
  },
package/dist/elements/vir-all-spaces-color-picker.element.js CHANGED
@@ -53,7 +53,9 @@ export const VirAllSpacesColorPicker = defineElement()({
53
53
  dispatch(new events.colorChange(event.detail));
54
54
  })}
55
55
  ></${VirColorDetails}>
56
- <${VirAllColorSpaceSliders.assign({ color })}
56
+ <${VirAllColorSpaceSliders.assign({
57
+ color,
58
+ })}
57
59
  ${listen(VirAllColorSpaceSliders.events.colorChange, (event) => {
58
60
  const colorSyntax = getColorSyntaxFromCssString(state.inputColorString || '#');
59
61
  updateState({
package/dist/elements/vir-color-details.element.js CHANGED
@@ -2,7 +2,10 @@
2
2
  import { check } from '@augment-vir/assert';
3
3
  import { getObjectTypedEntries, mapObject } from '@augment-vir/common';
4
4
  import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
5
- import { defineTable, noNativeSpacing, viraFontCssVars, ViraInput } from 'vira';
5
+ import { ViraInput } from 'vira/dist/elements/vira-input.element.js';
6
+ import { viraFontCssVars } from 'vira/dist/styles/font.js';
7
+ import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
8
+ import { defineTable } from 'vira/dist/util/define-table.js';
6
9
  import { ColorSyntaxName } from '../data/color-class/color-formats.js';
7
10
  import { Color } from '../data/color-class/color.js';
8
11
  import { VirColorSwatch } from './vir-color-swatch.element.js';
package/dist/elements/vir-color-format-sliders.element.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* node:coverage disable */
2
2
  import { getObjectTypedKeys } from '@augment-vir/common';
3
3
  import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
4
- import { noNativeSpacing } from 'vira';
4
+ import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
5
5
  import { colorFormats, } from '../data/color-class/color-formats.js';
6
6
  import { VirColorSlider } from './vir-color-slider.element.js';
7
7
  /**
package/dist/elements/vir-color-pair-contrast-summary.element.js CHANGED
@@ -2,7 +2,10 @@
2
2
  import { assertWrap } from '@augment-vir/assert';
3
3
  import { getObjectTypedEntries, round } from '@augment-vir/common';
4
4
  import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
5
- import { defineTable, noNativeSpacing, ViraBoldText, viraFontCssVars } from 'vira';
5
+ import { ViraBoldText } from 'vira/dist/elements/vira-bold-text.element.js';
6
+ import { viraFontCssVars } from 'vira/dist/styles/font.js';
7
+ import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
8
+ import { defineTable } from 'vira/dist/util/define-table.js';
6
9
  import { Color } from '../data/color-class/color.js';
7
10
  import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '../data/contrast/contrast.js';
8
11
  import { VirColorSwatch } from './vir-color-swatch.element.js';
@@ -153,7 +156,9 @@ export const VirColorPairContrastSummary = defineElement()({
153
156
  };
154
157
  }), ({ size, weight }) => {
155
158
  return {
156
- size: `${round(size, { digits: 1 })}px`,
159
+ size: `${round(size, {
160
+ digits: 1,
161
+ })}px`,
157
162
  weight: html `
158
163
  <span
159
164
  style=${css `
package/dist/elements/vir-color-pair.element.js CHANGED
@@ -1,9 +1,8 @@
1
1
  /* node:coverage disable */
2
2
  import { assertWrap, check } from '@augment-vir/assert';
3
3
  import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
4
- import { setCssVarValue } from 'lit-css-vars';
5
- import { noNativeFormStyles, noNativeSpacing, viraFontCssVars } from 'vira';
6
- import { colorCss } from '../data/color-css.js';
4
+ import { viraFontCssVars } from 'vira/dist/styles/font.js';
5
+ import { noNativeFormStyles, noNativeSpacing } from 'vira/dist/styles/native-styles.js';
7
6
  import { calculateContrast } from '../data/contrast/contrast.js';
8
7
  import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
9
8
  /**
@@ -110,17 +109,7 @@ export const VirColorPair = defineElement()({
110
109
  margin-top: 1px;
111
110
  }
112
111
  `,
113
- render({ state, updateState, inputs, host }) {
114
- setCssVarValue({
115
- onElement: host,
116
- forCssVar: inputs.color.background,
117
- toValue: inputs.color.background.default,
118
- });
119
- setCssVarValue({
120
- onElement: host,
121
- forCssVar: inputs.color.foreground,
122
- toValue: inputs.color.foreground.default,
123
- });
112
+ render({ state, updateState, inputs }) {
124
113
  const colorRows = [
125
114
  'foreground',
126
115
  'background',
@@ -179,7 +168,10 @@ export const VirColorPair = defineElement()({
179
168
  });
180
169
  })}
181
170
  class="color-preview"
182
- style=${colorCss(inputs.color)}
171
+ style=${css `
172
+ color: ${unsafeCSS(inputs.color.foreground.default)};
173
+ background: ${unsafeCSS(inputs.color.background.default)};
174
+ `}
183
175
  >
184
176
  <div class="square"></div>
185
177
  <b>Aa</b>
package/dist/elements/vir-color-picker.element.js CHANGED
@@ -3,7 +3,15 @@ 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
5
  import { CssVarSyntaxName } from 'lit-css-vars';
6
- import { Copy24Icon, noNativeFormStyles, viraFontCssVars, viraFormCssVars, ViraIcon, ViraInput, ViraPopUpTrigger, ViraSelect, viraShadows, } from 'vira';
6
+ import { ViraPopUpTrigger } from 'vira/dist/elements/pop-up/vira-pop-up-trigger.element.js';
7
+ import { ViraIcon } from 'vira/dist/elements/vira-icon.element.js';
8
+ import { ViraInput } from 'vira/dist/elements/vira-input.element.js';
9
+ import { ViraSelect } from 'vira/dist/elements/vira-select.element.js';
10
+ import { Copy24Icon } from 'vira/dist/icons/icon-svgs/24/copy-24.icon.js';
11
+ import { viraFontCssVars } from 'vira/dist/styles/font.js';
12
+ import { viraFormCssVars } from 'vira/dist/styles/form-styles.js';
13
+ import { noNativeFormStyles } from 'vira/dist/styles/native-styles.js';
14
+ import { viraShadows } from 'vira/dist/styles/shadows.js';
7
15
  import { ColorFormatName, colorFormats } from '../data/color-class/color-formats.js';
8
16
  import { Color } from '../data/color-class/color.js';
9
17
  import { colorLocalStorageClient } from '../data/local-storage.client.js';
package/dist/elements/vir-color-slider.element.js CHANGED
@@ -3,7 +3,8 @@ import { assert, assertWrap } from '@augment-vir/assert';
3
3
  import { createArray } from '@augment-vir/common';
4
4
  import { extractEventTarget } from '@augment-vir/web';
5
5
  import { css, defineElement, defineElementEvent, html, listen, onDomRendered, unsafeCSS, } from 'element-vir';
6
- import { viraFontCssVars, ViraInput } from 'vira';
6
+ import { ViraInput } from 'vira/dist/elements/vira-input.element.js';
7
+ import { viraFontCssVars } from 'vira/dist/styles/font.js';
7
8
  import { colorFormats, } from '../data/color-class/color-formats.js';
8
9
  import { Color } from '../data/color-class/color.js';
9
10
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@electrovir/color",
3
- "version": "1.7.7",
3
+ "version": "1.7.9",
4
4
  "description": "A wrapper for culori with an extremely simple API.",
5
5
  "keywords": [
6
6
  "color",
@@ -49,64 +49,67 @@
49
49
  "test:spelling": "virmator spellcheck",
50
50
  "test:update": "npm test update"
51
51
  },
52
+ "overrides": {
53
+ "@electrovir/color": "file:./"
54
+ },
52
55
  "dependencies": {
53
- "@augment-vir/assert": "^31.59.0",
54
- "@augment-vir/common": "^31.59.0",
55
- "@augment-vir/web": "^31.59.0",
56
- "@electrovir/local-storage-client": "^0.0.2",
56
+ "@augment-vir/assert": "^31.68.1",
57
+ "@augment-vir/common": "^31.68.1",
58
+ "@augment-vir/web": "^31.68.1",
59
+ "@electrovir/local-storage-client": "^0.1.0",
57
60
  "apca-w3": "^0.1.9",
58
61
  "color-name": "^2.1.0",
59
62
  "culori": "^4.0.2",
60
63
  "object-shape-tester": "^6.11.0",
61
- "type-fest": "^5.4.1"
64
+ "type-fest": "^5.4.4"
62
65
  },
63
66
  "devDependencies": {
64
- "@augment-vir/test": "^31.59.0",
65
- "@eslint/eslintrc": "^3.3.3",
67
+ "@augment-vir/test": "^31.68.1",
68
+ "@eslint/eslintrc": "^3.3.5",
66
69
  "@eslint/js": "^9.39.2",
67
- "@stylistic/eslint-plugin": "^5.7.0",
70
+ "@stylistic/eslint-plugin": "^5.10.0",
68
71
  "@stylistic/eslint-plugin-ts": "^4.4.1",
69
72
  "@types/color-name": "^2.0.0",
70
73
  "@types/culori": "^4.0.1",
71
- "@typescript-eslint/eslint-plugin": "^8.53.0",
72
- "@web/dev-server-esbuild": "^1.0.4",
74
+ "@typescript-eslint/eslint-plugin": "^8.56.1",
75
+ "@web/dev-server-esbuild": "^1.0.5",
73
76
  "@web/test-runner": "^0.20.2",
74
77
  "@web/test-runner-commands": "^0.9.0",
75
78
  "@web/test-runner-playwright": "^0.11.1",
76
79
  "@web/test-runner-visual-regression": "^0.10.0",
77
- "cspell": "^9.6.0",
78
- "dependency-cruiser": "^17.3.6",
79
- "element-book": "^26.15.3",
80
- "element-vir": "^26.14.3",
81
- "esbuild": "^0.27.2",
80
+ "cspell": "^9.7.0",
81
+ "dependency-cruiser": "^17.3.8",
82
+ "element-book": "^26.17.0",
83
+ "element-vir": "^26.14.6",
84
+ "esbuild": "^0.27.3",
82
85
  "eslint": "^9.39.2",
83
86
  "eslint-config-prettier": "^10.1.8",
84
- "eslint-plugin-jsdoc": "^62.0.0",
87
+ "eslint-plugin-jsdoc": "^62.7.1",
85
88
  "eslint-plugin-monorepo-cop": "^1.0.2",
86
- "eslint-plugin-playwright": "^2.5.0",
89
+ "eslint-plugin-playwright": "^2.9.0",
87
90
  "eslint-plugin-prettier": "^5.5.5",
88
91
  "eslint-plugin-require-extensions": "^0.1.3",
89
- "eslint-plugin-sonarjs": "^3.0.5",
90
- "eslint-plugin-unicorn": "^62.0.0",
92
+ "eslint-plugin-sonarjs": "^4.0.1",
93
+ "eslint-plugin-unicorn": "^63.0.0",
91
94
  "execute-in-browser": "^1.0.9",
92
95
  "istanbul-smart-text-reporter": "^1.1.5",
93
- "lit-css-vars": "^3.2.2",
96
+ "lit-css-vars": "^3.6.2",
94
97
  "markdown-code-example-inserter": "^3.0.3",
95
- "npm-check-updates": "^19.3.1",
98
+ "npm-check-updates": "^19.6.3",
96
99
  "prettier": "~3.3.3",
97
100
  "prettier-plugin-interpolated-html-tags": "^2.0.1",
98
101
  "prettier-plugin-jsdoc": "^1.8.0",
99
- "prettier-plugin-multiline-arrays": "^4.1.3",
102
+ "prettier-plugin-multiline-arrays": "^4.1.4",
100
103
  "prettier-plugin-organize-imports": "^4.3.0",
101
- "prettier-plugin-packagejson": "^2.5.21",
104
+ "prettier-plugin-packagejson": "^3.0.2",
102
105
  "prettier-plugin-sort-json": "^4.2.0",
103
106
  "prettier-plugin-toml": "^2.0.6",
104
107
  "runstorm": "^1.0.0",
105
- "typedoc": "^0.28.16",
108
+ "typedoc": "^0.28.17",
106
109
  "typescript": "^5.9.3",
107
- "typescript-eslint": "^8.53.0",
108
- "vira": "^28.19.7",
109
- "virmator": "^14.4.3",
110
+ "typescript-eslint": "^8.56.1",
111
+ "vira": "^31.5.2",
112
+ "virmator": "^14.8.3",
110
113
  "vite": "^7.3.1"
111
114
  },
112
115
  "peerDependencies": {