@electrovir/color 1.7.11 → 1.7.12

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 (8) hide show
  1. package/dist/data/color-class/color.d.ts +2 -1
  2. package/dist/data/color-class/color.js +9 -9
  3. package/dist/data/contrast/contrast.js +6 -4
  4. package/dist/demo/vir-demo.element.js +3 -1
  5. package/dist/elements/vir-color-pair.element.js +78 -74
  6. package/dist/elements/vir-color-picker.element.js +78 -76
  7. package/dist/elements/vir-color-slider.element.js +25 -23
  8. package/package.json +26 -26
package/dist/data/color-class/color.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type PartialWithUndefined, type RequireExactlyOne } from '@augment-vir/common';
2
+ import { type Color as CuloriColor } from 'culori';
2
3
  import { ColorFormatName, ColorSyntaxName, type ColorCoordsByFormat, type ColorValue, type HexColor } from './color-formats.js';
3
4
  /**
4
5
  * An update to an existing {@link Color} instance. Used in {@link Color.set}.
@@ -42,7 +43,6 @@ export type SerializedColor = AllColorsValues & {
42
43
  * @category Color
43
44
  */
44
45
  export declare class Color {
45
- #private;
46
46
  constructor(
47
47
  /** Any valid CSS color string or an object of color coordinate values. */
48
48
  initValue: string | Readonly<ColorUpdate>);
@@ -66,6 +66,7 @@ export declare class Color {
66
66
  toString(): string;
67
67
  /** The color syntax the this color was set with. */
68
68
  protected originalColorSyntax: ColorSyntaxName;
69
+ protected internalColor: CuloriColor;
69
70
  /** All current color values. These are updated whenever {@link Color.set} is called. */
70
71
  protected readonly _allColors: {
71
72
  names: string[];
package/dist/data/color-class/color.js CHANGED
@@ -42,7 +42,7 @@ export class Color {
42
42
  */
43
43
  static deserialize(input) {
44
44
  const parsed = JSON.parse(input);
45
- const newColor = new Color('black');
45
+ const newColor = new Color(parsed.hexString);
46
46
  getObjectTypedEntries(parsed).forEach(([key, value,]) => {
47
47
  if (key === 'originalColorSyntax') {
48
48
  newColor.originalColorSyntax = assertWrap.isEnumValue(value, ColorSyntaxName, 'Cannot deserialize: invalid color syntax.');
@@ -55,7 +55,7 @@ export class Color {
55
55
  }
56
56
  /** Get the distance from this Color class instance to the given CSS color string. */
57
57
  getRgbDistance(distanceFrom) {
58
- return distanceRgb(this.#internalColor, distanceFrom);
58
+ return distanceRgb(this.internalColor, distanceFrom);
59
59
  }
60
60
  /** Get the closest named CSS color to this Color class instance's current color. */
61
61
  getClosestNamedColor() {
@@ -84,7 +84,7 @@ export class Color {
84
84
  }
85
85
  /** The color syntax the this color was set with. */
86
86
  originalColorSyntax = ColorSyntaxName.hex;
87
- #internalColor = assertWrap.isDefined(parse('black'));
87
+ internalColor = assertWrap.isDefined(parse('black'));
88
88
  /** All current color values. These are updated whenever {@link Color.set} is called. */
89
89
  _allColors = {
90
90
  names: ['black'],
@@ -146,7 +146,7 @@ export class Color {
146
146
  throw new Error(`Unable to parse invalid color string: '${cssColorString}'`);
147
147
  }
148
148
  this.originalColorSyntax = getColorSyntaxFromCssString(cssColorString);
149
- this.#internalColor = newColor;
149
+ this.internalColor = newColor;
150
150
  this.pullFromInternalColor();
151
151
  }
152
152
  /**
@@ -186,15 +186,15 @@ export class Color {
186
186
  getEnumValues(ColorFormatName).forEach((colorFormatName) => {
187
187
  const colorFormatDefinition = colorFormats[colorFormatName];
188
188
  const mappedColorFormatName = colorFormatDefinition.conversionFormat;
189
- const originalColorDefinition = check.isKeyOf(this.#internalColor.mode, colorFormats)
190
- ? colorFormats[this.#internalColor.mode]
189
+ const originalColorDefinition = check.isKeyOf(this.internalColor.mode, colorFormats)
190
+ ? colorFormats[this.internalColor.mode]
191
191
  : undefined;
192
192
  const converted = clampGamut(colorFormatDefinition.colorSpace === originalColorDefinition?.colorSpace
193
193
  ? mappedColorFormatName
194
- : 'rgb')(converter(mappedColorFormatName)(this.#internalColor));
194
+ : 'rgb')(converter(mappedColorFormatName)(this.internalColor));
195
195
  /* node:coverage ignore next 5: technically this shouldn't happen, idk how to manually trigger it. */
196
196
  if (!converted) {
197
- assert.never(`Failed to convert color '${JSON.stringify(this.#internalColor)}' to '${colorFormatName}'.`);
197
+ assert.never(`Failed to convert color '${JSON.stringify(this.internalColor)}' to '${colorFormatName}'.`);
198
198
  }
199
199
  getObjectTypedKeys(this[colorFormatName]).forEach((coordName) => {
200
200
  const coordValue = converted[coordName];
@@ -206,7 +206,7 @@ export class Color {
206
206
  }
207
207
  });
208
208
  });
209
- this._allColors.hexString = formatHex(this.#internalColor);
209
+ this._allColors.hexString = formatHex(this.internalColor);
210
210
  this._allColors.names = findMatchingColorNames(this.rgb);
211
211
  this._allColors[ColorSyntaxName.name] = this._allColors.names[0] || '';
212
212
  }
package/dist/data/contrast/contrast.js CHANGED
@@ -30,10 +30,12 @@ export const FontWeightName = mapObjectValues(fontWeightByName, (key) => key);
30
30
  *
31
31
  * @category Internal
32
32
  */
33
- export const fontWeightToName = Object.fromEntries(Object.entries(fontWeightByName).map(([key, value,]) => [
34
- value,
35
- key,
36
- ]));
33
+ export const fontWeightToName = Object.fromEntries(Object.entries(fontWeightByName).map(([key, value,]) => {
34
+ return [
35
+ value,
36
+ key,
37
+ ];
38
+ }));
37
39
  /** Cache for contrast calculations to avoid redundant computation. */
38
40
  const contrastCache = new Map();
39
41
  /**
package/dist/demo/vir-demo.element.js CHANGED
@@ -36,7 +36,9 @@ export const VirDemo = defineElement()({
36
36
  basePath: 'color',
37
37
  },
38
38
  })}>
39
- <h1 slot=${ElementBookApp.slotNames.navHeader}>@electrovir/color</h1>
39
+ <h1 slot=${ElementBookApp.slotNames['element-book-app-nav-header']}>
40
+ @electrovir/color
41
+ </h1>
40
42
  </${ElementBookApp}>
41
43
  `;
42
44
  },
package/dist/elements/vir-color-pair.element.js CHANGED
@@ -19,96 +19,100 @@ export const VirColorPair = defineElement()({
19
19
  };
20
20
  },
21
21
  hostClasses: {
22
- 'vir-color-pair-no-contrast-tips': ({ inputs, state }) => !inputs.showContrast && !state.forceShowEverything,
22
+ 'vir-color-pair-no-contrast-tips': ({ inputs, state }) => {
23
+ return !inputs.showContrast && !state.forceShowEverything;
24
+ },
23
25
  },
24
- styles: ({ hostClasses }) => css `
25
- :host {
26
- display: flex;
27
- flex-direction: column;
28
- align-items: center;
29
- max-width: 100%;
30
- }
26
+ styles: ({ hostClasses }) => {
27
+ return css `
28
+ :host {
29
+ display: flex;
30
+ flex-direction: column;
31
+ align-items: center;
32
+ max-width: 100%;
33
+ }
31
34
 
32
- .color-preview {
33
- ${noNativeFormStyles};
34
- cursor: pointer;
35
- font-size: 32px;
36
- padding-left: 12px;
37
- padding-right: 0;
38
- border: 1px solid #ccc;
39
- border-radius: 8px;
40
- display: flex;
41
- gap: 8px;
42
- align-items: baseline;
35
+ .color-preview {
36
+ ${noNativeFormStyles};
37
+ cursor: pointer;
38
+ font-size: 32px;
39
+ padding-left: 12px;
40
+ padding-right: 0;
41
+ border: 1px solid #ccc;
42
+ border-radius: 8px;
43
+ display: flex;
44
+ gap: 8px;
45
+ align-items: baseline;
43
46
 
44
- & b {
45
- margin: 12px 0;
46
- font-weight: bold;
47
- text-decoration: underline;
48
- }
47
+ & b {
48
+ margin: 12px 0;
49
+ font-weight: bold;
50
+ text-decoration: underline;
51
+ }
49
52
 
50
- & .square {
51
- margin: 12px 0;
52
- width: 24px;
53
- height: 24px;
54
- background-color: currentColor;
55
- }
56
- }
57
- ${hostClasses['vir-color-pair-no-contrast-tips'].selector} {
58
- & .needed-size-wrapper {
59
- display: none;
53
+ & .square {
54
+ margin: 12px 0;
55
+ width: 24px;
56
+ height: 24px;
57
+ background-color: currentColor;
58
+ }
60
59
  }
60
+ ${hostClasses['vir-color-pair-no-contrast-tips'].selector} {
61
+ & .needed-size-wrapper {
62
+ display: none;
63
+ }
61
64
 
62
- & .color-preview {
63
- padding: 4px 24px;
65
+ & .color-preview {
66
+ padding: 4px 24px;
67
+ }
64
68
  }
65
- }
66
69
 
67
- .needed-size-wrapper {
68
- align-self: stretch;
69
- width: 56px;
70
- position: relative;
71
- overflow: hidden;
72
- border-left: 1px solid #ccc;
73
- }
70
+ .needed-size-wrapper {
71
+ align-self: stretch;
72
+ width: 56px;
73
+ position: relative;
74
+ overflow: hidden;
75
+ border-left: 1px solid #ccc;
76
+ }
74
77
 
75
- .needed-size {
76
- top: 0;
77
- height: 100%;
78
- display: flex;
79
- align-items: center;
80
- left: 6px;
81
- position: absolute;
78
+ .needed-size {
79
+ top: 0;
80
+ height: 100%;
81
+ display: flex;
82
+ align-items: center;
83
+ left: 6px;
84
+ position: absolute;
82
85
 
83
- & span {
84
- margin: 0 auto;
86
+ & span {
87
+ margin: 0 auto;
88
+ }
85
89
  }
86
- }
87
90
 
88
- .css-var-names {
89
- font-family: ${viraFontCssVars['vira-monospace'].value};
90
- display: flex;
91
- max-width: 100%;
92
- flex-direction: column;
93
- opacity: 0.6;
94
- margin-top: 4px;
95
- }
91
+ .css-var-names {
92
+ font-family: ${viraFontCssVars['vira-monospace'].value};
93
+ display: flex;
94
+ max-width: 100%;
95
+ flex-direction: column;
96
+ opacity: 0.6;
97
+ margin-top: 4px;
98
+ }
96
99
 
97
- p {
98
- ${noNativeSpacing};
99
- display: flex;
100
- gap: 0;
101
- flex-wrap: wrap;
100
+ p {
101
+ ${noNativeSpacing};
102
+ display: flex;
103
+ gap: 0;
104
+ flex-wrap: wrap;
102
105
 
103
- & span:last-child {
104
- margin-left: 1ex;
106
+ & span:last-child {
107
+ margin-left: 1ex;
108
+ }
105
109
  }
106
- }
107
110
 
108
- ${VirContrastIndicator} {
109
- margin-top: 1px;
110
- }
111
- `,
111
+ ${VirContrastIndicator} {
112
+ margin-top: 1px;
113
+ }
114
+ `;
115
+ },
112
116
  render({ state, updateState, inputs }) {
113
117
  const colorRows = [
114
118
  'foreground',
package/dist/elements/vir-color-picker.element.js CHANGED
@@ -51,98 +51,100 @@ export const VirColorPicker = defineElement()({
51
51
  hostClasses: {
52
52
  'vir-color-picker-always-show': ({ inputs }) => !!inputs.alwaysShowPicker,
53
53
  },
54
- styles: ({ cssVars, hostClasses }) => css `
55
- :host {
56
- display: inline-flex;
57
- }
58
-
59
- ${hostClasses['vir-color-picker-always-show'].selector} {
60
- flex-direction: column;
61
- align-items: center;
62
- gap: 4px;
63
- }
64
-
65
- button {
66
- ${noNativeFormStyles}
67
- cursor: pointer;
68
- display: flex;
69
- }
54
+ styles: ({ cssVars, hostClasses }) => {
55
+ return css `
56
+ :host {
57
+ display: inline-flex;
58
+ }
70
59
 
71
- ${ViraPopUpTrigger} {
72
- width: 100%;
73
- height: 100%;
74
- box-sizing: border-box;
75
- }
60
+ ${hostClasses['vir-color-picker-always-show'].selector} {
61
+ flex-direction: column;
62
+ align-items: center;
63
+ gap: 4px;
64
+ }
76
65
 
77
- .swatch-wrapper {
78
- display: flex;
79
- flex-direction: column;
80
- gap: 4px;
81
- align-items: center;
66
+ button {
67
+ ${noNativeFormStyles}
68
+ cursor: pointer;
69
+ display: flex;
70
+ }
82
71
 
83
- & ${VirColorSwatch} {
84
- width: ${cssVars['vir-color-picker-swatch-width'].value};
85
- height: ${cssVars['vir-color-picker-swatch-height'].value};
72
+ ${ViraPopUpTrigger} {
73
+ width: 100%;
74
+ height: 100%;
86
75
  box-sizing: border-box;
87
76
  }
88
- }
89
77
 
90
- .code-button {
91
- font-family: ${viraFontCssVars['vira-monospace'].value};
92
- font-size: 12px;
93
- color: #666;
94
- display: flex;
95
- justify-content: center;
96
- gap: 2px;
97
- align-items: center;
78
+ .swatch-wrapper {
79
+ display: flex;
80
+ flex-direction: column;
81
+ gap: 4px;
82
+ align-items: center;
98
83
 
99
- & ${ViraIcon} {
100
- width: 18px;
101
- aspect-ratio: 1;
84
+ & ${VirColorSwatch} {
85
+ width: ${cssVars['vir-color-picker-swatch-width'].value};
86
+ height: ${cssVars['vir-color-picker-swatch-height'].value};
87
+ box-sizing: border-box;
88
+ }
102
89
  }
103
90
 
104
- &:hover {
105
- color: #000;
106
- }
91
+ .code-button {
92
+ font-family: ${viraFontCssVars['vira-monospace'].value};
93
+ font-size: 12px;
94
+ color: #666;
95
+ display: flex;
96
+ justify-content: center;
97
+ gap: 2px;
98
+ align-items: center;
99
+
100
+ & ${ViraIcon} {
101
+ width: 18px;
102
+ aspect-ratio: 1;
103
+ }
104
+
105
+ &:hover {
106
+ color: #000;
107
+ }
107
108
 
108
- &:active {
109
- color: dodgerblue;
109
+ &:active {
110
+ color: dodgerblue;
111
+ }
110
112
  }
111
- }
112
113
 
113
- .picker {
114
- display: flex;
115
- flex-direction: column;
116
- gap: 4px;
117
- padding: 16px;
118
- background: white;
119
- border: 1px solid #ccc;
120
- border-radius: 8px;
121
- }
114
+ .picker {
115
+ display: flex;
116
+ flex-direction: column;
117
+ gap: 4px;
118
+ padding: 16px;
119
+ background: white;
120
+ border: 1px solid #ccc;
121
+ border-radius: 8px;
122
+ }
122
123
 
123
- .pop-up .picker {
124
- ${viraShadows.menuShadow}
125
- }
124
+ .pop-up .picker {
125
+ ${viraShadows.menuShadow}
126
+ }
126
127
 
127
- .raw-input-wrapper {
128
- text-align: left;
129
- display: flex;
130
- align-items: center;
131
- justify-content: center;
132
- gap: 8px;
133
- font-size: 12px;
134
- ${viraFormCssVars['vira-form-border-color'].name}: #ddd;
135
- color: #666;
128
+ .raw-input-wrapper {
129
+ text-align: left;
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ gap: 8px;
134
+ font-size: 12px;
135
+ ${viraFormCssVars['vira-form-border-color'].name}: #ddd;
136
+ color: #666;
136
137
 
137
- & ${ViraInput} {
138
- flex-grow: 1;
139
- width: unset;
140
- color: inherit;
141
- height: 20px;
142
- border: none;
138
+ & ${ViraInput} {
139
+ flex-grow: 1;
140
+ width: unset;
141
+ color: inherit;
142
+ height: 20px;
143
+ border: none;
144
+ }
143
145
  }
144
- }
145
- `,
146
+ `;
147
+ },
146
148
  events: {
147
149
  colorChange: defineElementEvent(),
148
150
  },
package/dist/elements/vir-color-slider.element.js CHANGED
@@ -17,32 +17,34 @@ export const VirColorSlider = defineElement()({
17
17
  cssVars: {
18
18
  'vir-color-slider-gradient': 'black',
19
19
  },
20
- styles: ({ cssVars }) => css `
21
- :host {
22
- display: flex;
23
- align-items: center;
24
- font-family: ${viraFontCssVars['vira-monospace'].value};
25
- gap: 2px;
26
- }
20
+ styles: ({ cssVars }) => {
21
+ return css `
22
+ :host {
23
+ display: flex;
24
+ align-items: center;
25
+ font-family: ${viraFontCssVars['vira-monospace'].value};
26
+ gap: 2px;
27
+ }
27
28
 
28
- input[type='range'] {
29
- flex-grow: 1;
30
- appearance: none;
31
- background: ${cssVars['vir-color-slider-gradient'].value};
32
- height: 9px;
33
- border-radius: 4px;
34
- cursor: pointer;
35
- }
29
+ input[type='range'] {
30
+ flex-grow: 1;
31
+ appearance: none;
32
+ background: ${cssVars['vir-color-slider-gradient'].value};
33
+ height: 9px;
34
+ border-radius: 4px;
35
+ cursor: pointer;
36
+ }
36
37
 
37
- ${ViraInput} {
38
- width: 76px;
39
- }
38
+ ${ViraInput} {
39
+ width: 76px;
40
+ }
40
41
 
41
- .coordinate {
42
- font-size: 18px;
43
- margin-top: -4px;
44
- }
45
- `,
42
+ .coordinate {
43
+ font-size: 18px;
44
+ margin-top: -4px;
45
+ }
46
+ `;
47
+ },
46
48
  events: {
47
49
  valueChange: defineElementEvent(),
48
50
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@electrovir/color",
3
- "version": "1.7.11",
3
+ "version": "1.7.12",
4
4
  "description": "A wrapper for culori with an extremely simple API.",
5
5
  "keywords": [
6
6
  "color",
@@ -53,52 +53,52 @@
53
53
  "@electrovir/color": "file:./"
54
54
  },
55
55
  "dependencies": {
56
- "@augment-vir/assert": "^32.2.1",
57
- "@augment-vir/common": "^32.2.1",
58
- "@augment-vir/web": "^32.2.1",
59
- "@electrovir/local-storage-client": "^0.1.0",
56
+ "@augment-vir/assert": "^32.2.3",
57
+ "@augment-vir/common": "^32.2.3",
58
+ "@augment-vir/web": "^32.2.3",
59
+ "@electrovir/local-storage-client": "^0.1.1",
60
60
  "apca-w3": "^0.1.9",
61
61
  "color-name": "^2.1.1",
62
62
  "culori": "^4.0.2",
63
- "object-shape-tester": "^6.14.1"
63
+ "object-shape-tester": "^6.15.0"
64
64
  },
65
65
  "devDependencies": {
66
- "@augment-vir/test": "^32.2.1",
66
+ "@augment-vir/test": "^32.2.3",
67
67
  "@eslint/eslintrc": "^3.3.6",
68
68
  "@eslint/js": "10.0.1",
69
69
  "@stylistic/eslint-plugin": "^5.10.0",
70
70
  "@stylistic/eslint-plugin-ts": "^4.4.1",
71
71
  "@types/color-name": "^2.0.0",
72
72
  "@types/culori": "^4.0.1",
73
- "@typescript-eslint/eslint-plugin": "^8.65.0",
73
+ "@typescript-eslint/eslint-plugin": "^8.68.0",
74
74
  "@web/dev-server-esbuild": "^2.0.0",
75
75
  "@web/test-runner": "^1.0.0",
76
76
  "@web/test-runner-commands": "^1.0.1",
77
77
  "@web/test-runner-playwright": "^1.0.0",
78
78
  "@web/test-runner-visual-regression": "^1.0.1",
79
- "cspell": "^10.0.1",
80
- "dependency-cruiser": "^18.1.0",
81
- "element-book": "^26.17.3",
82
- "element-vir": "^26.17.1",
83
- "esbuild": "^0.28.1",
84
- "eslint": "^10.7.0",
79
+ "cspell": "^10.1.1",
80
+ "dependency-cruiser": "^18.2.0",
81
+ "element-book": "^26.17.5",
82
+ "element-vir": "^26.17.3",
83
+ "esbuild": "^0.28.2",
84
+ "eslint": "^10.9.1",
85
85
  "eslint-config-prettier": "^10.1.8",
86
- "eslint-plugin-jsdoc": "^63.2.2",
86
+ "eslint-plugin-jsdoc": "^64.2.1",
87
87
  "eslint-plugin-monorepo-cop": "^1.0.2",
88
- "eslint-plugin-playwright": "^2.10.5",
88
+ "eslint-plugin-playwright": "^2.11.0",
89
89
  "eslint-plugin-prettier": "^5.5.6",
90
90
  "eslint-plugin-require-extensions": "^0.1.3",
91
91
  "eslint-plugin-sonarjs": "^4.2.0",
92
- "eslint-plugin-unicorn": "^72.0.0",
93
- "execute-in-browser": "^1.0.9",
92
+ "eslint-plugin-unicorn": "^73.0.0",
93
+ "execute-in-browser": "^1.0.10",
94
94
  "istanbul-smart-text-reporter": "^1.1.5",
95
95
  "lit-css-vars": "^3.6.3",
96
96
  "markdown-code-example-inserter": "^3.0.6",
97
- "npm-check-updates": "^22.2.9",
97
+ "npm-check-updates": "^23.1.0",
98
98
  "prettier": "~3.3.3",
99
- "prettier-plugin-interpolated-html-tags": "^2.0.1",
99
+ "prettier-plugin-interpolated-html-tags": "^2.0.2",
100
100
  "prettier-plugin-jsdoc": "^1.8.1",
101
- "prettier-plugin-multiline-arrays": "^4.1.10",
101
+ "prettier-plugin-multiline-arrays": "^4.1.11",
102
102
  "prettier-plugin-organize-imports": "^4.3.0",
103
103
  "prettier-plugin-packagejson": "^3.0.2",
104
104
  "prettier-plugin-sort-json": "^4.2.0",
@@ -106,13 +106,13 @@
106
106
  "runstorm": "^1.0.6",
107
107
  "typedoc": "^0.28.20",
108
108
  "typescript": "^6.0.3",
109
- "typescript-eslint": "^8.65.0",
110
- "vira": "^31.28.1",
111
- "virmator": "^14.30.0",
112
- "vite": "^8.1.5"
109
+ "typescript-eslint": "^8.68.0",
110
+ "vira": "^31.31.6",
111
+ "virmator": "^14.33.0",
112
+ "vite": "^8.2.2"
113
113
  },
114
114
  "peerDependencies": {
115
- "element-vir": ">=26",
115
+ "element-vir": "^26",
116
116
  "lit-css-vars": ">=3",
117
117
  "vira": ">=28"
118
118
  },