diff --git a/packages/contrast-colors/README.md b/packages/contrast-colors/README.md index 21f31386..b29f7b73 100644 --- a/packages/contrast-colors/README.md +++ b/packages/contrast-colors/README.md @@ -156,7 +156,7 @@ Class function used to define colors for a theme. Parameters are destructured an | ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- | | `name` | String | User-defined name for a color, (eg "Blue"). Used to name output color values | | `colorKeys` | Array of strings | List of specific colors to interpolate between in order to generate a full lightness scale of the color. | -| `colorspace` | Enum | The [colorspace](#Supported-interpolation-colorspaces) in which the key colors will be interpolated within. | +| `colorSpace` | Enum | The [colorSpace](#Supported-interpolation-colorspaces) in which the key colors will be interpolated within. | | `ratios` | Array or Object | List of target contrast ratios, or object with named keys for each value. | | `smooth` | Boolean | Applies bezier smoothing to interpolation (false by default) | | `output` | Enum | Desired color output format | @@ -166,7 +166,7 @@ Class function used to define colors for a theme. Parameters are destructured an | Setter | Description of output | | ------------------ | --------------------------------- | | `Color.colorKeys` | Sets the color keys | -| `Color.colorspace` | Sets the interpolation colorspace | +| `Color.colorSpace` | Sets the interpolation colorSpace | | `Color.ratios` | Sets the ratios | | `Color.name` | Sets the name | | `Color.smooth` | Sets the smoothing option | diff --git a/packages/contrast-colors/lib/backgroundcolor.js b/packages/contrast-colors/lib/backgroundcolor.js index d438f62a..e3254b00 100644 --- a/packages/contrast-colors/lib/backgroundcolor.js +++ b/packages/contrast-colors/lib/backgroundcolor.js @@ -33,7 +33,7 @@ class BackgroundColor extends Color { const backgroundColorScale = createScale({ swatches: 1000, colorKeys: this._colorKeys, - colorspace: this._colorspace, + colorSpace: this.colorSpace, shift: 1, smooth: this._smooth }); diff --git a/packages/contrast-colors/lib/color.js b/packages/contrast-colors/lib/color.js index 5b96b368..73abf462 100644 --- a/packages/contrast-colors/lib/color.js +++ b/packages/contrast-colors/lib/color.js @@ -20,7 +20,7 @@ class Color { this._name = name; this._colorKeys = colorKeys; this._modifiedKeys = colorKeys; - this._colorspace = colorSpace; + this._colorSpace = colorSpace; this._ratios = ratios; this._smooth = smooth; this._output = output; @@ -32,7 +32,7 @@ class Color { if (!this._colorKeys) { throw new Error('Color Keys are undefined'); } - if (!colorSpaces[this._colorspace]) { + if (!colorSpaces[this._colorSpace]) { throw new Error(`Colorspace “${colorSpace}” not supported`); } if (!colorSpaces[this._output]) { @@ -69,12 +69,12 @@ class Color { } set colorSpace(colorSpace) { - this._colorspace = colorSpace; + this._colorSpace = colorSpace; this._generateColorScale(); } get colorSpace() { - return this._colorspace; + return this._colorSpace; } /** @deprecated Use `colorSpace` instead. */ @@ -154,7 +154,7 @@ class Color { this._colorScale = createScale({ swatches: 3000, colorKeys: this._modifiedKeys, - colorSpace: this._colorspace, + colorSpace: this._colorSpace, shift: 1, smooth: this._smooth, asFun: true diff --git a/packages/contrast-colors/lib/utils.js b/packages/contrast-colors/lib/utils.js index 94fd5ae0..c1e2ef4c 100644 --- a/packages/contrast-colors/lib/utils.js +++ b/packages/contrast-colors/lib/utils.js @@ -470,7 +470,7 @@ const searchColors = (color, bgRgbArray, baseV, ratioValues, formula) => { const colorScale = createScale({ swatches: colorLen, colorKeys: color._modifiedKeys, - colorspace: color._colorspace, + colorSpace: color._colorSpace, shift: 1, smooth: color._smooth, asFun: true diff --git a/packages/contrast-colors/test/backgroundColor.test.js b/packages/contrast-colors/test/backgroundColor.test.js index 880ecc0e..a3ea1716 100644 --- a/packages/contrast-colors/test/backgroundColor.test.js +++ b/packages/contrast-colors/test/backgroundColor.test.js @@ -125,7 +125,7 @@ test('should generate 101 blue toned grayscale colors in HSL space', (t) => { const colors = new BackgroundColor({ name: 'Color', colorKeys: ['#4a5b7b', '#72829c', '#a6b2c6'], - colorspace: 'HSL' + colorSpace: 'HSL' }).backgroundColorScale; t.deepEqual(colors, [ @@ -237,7 +237,7 @@ test('should generate 101 blue toned grayscale colors in LAB space', (t) => { const colors = new BackgroundColor({ name: 'Color', colorKeys: ['#4a5b7b', '#72829c', '#a6b2c6'], - colorspace: 'LAB' + colorSpace: 'LAB' }).backgroundColorScale; t.deepEqual(colors, [ @@ -349,7 +349,7 @@ test('should generate 101 blue colors in HSLuv space', (t) => { const colors = new BackgroundColor({ name: 'Color', colorKeys: ['#6FA7FF', '#B5E6FF'], - colorspace: 'HSLuv' + colorSpace: 'HSLuv' }).backgroundColorScale; t.deepEqual(colors, [ diff --git a/packages/contrast-colors/test/colorSetters.test.js b/packages/contrast-colors/test/colorSetters.test.js index 88b8635f..5afd960d 100644 --- a/packages/contrast-colors/test/colorSetters.test.js +++ b/packages/contrast-colors/test/colorSetters.test.js @@ -16,7 +16,7 @@ test('should set color name of Color class', (t) => { const color = new Color({ name: 'colorName', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'CAM02', + colorSpace: 'CAM02', ratios: [3, 4.5], smooth: true }); @@ -31,7 +31,7 @@ test('should set color keys of Color class', (t) => { const color = new Color({ name: 'colorName', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'CAM02', + colorSpace: 'CAM02', ratios: [3, 4.5], smooth: true }); @@ -46,7 +46,7 @@ test('should set colorspace of Color class', (t) => { const color = new Color({ name: 'colorName', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'CAM02', + colorSpace: 'CAM02', ratios: [3, 4.5], smooth: true }); @@ -60,7 +60,7 @@ test('should set ratios of Color class', (t) => { const color = new Color({ name: 'colorName', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'CAM02', + colorSpace: 'CAM02', ratios: [3, 4.5], smooth: true }); @@ -74,7 +74,7 @@ test('should set smooth of Color class', (t) => { const color = new Color({ name: 'colorName', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'CAM02', + colorSpace: 'CAM02', ratios: [3, 4.5], smooth: true }); diff --git a/packages/contrast-colors/test/createScale.test.js b/packages/contrast-colors/test/createScale.test.js index 8c88e368..587147e6 100644 --- a/packages/contrast-colors/test/createScale.test.js +++ b/packages/contrast-colors/test/createScale.test.js @@ -16,7 +16,7 @@ test('should generate 8 colors in Lab', (t) => { const scale = createScale({ swatches: 8, colorKeys: ['#CCFFA9', '#FEFEC5', '#5F0198'], - colorspace: 'LAB', + colorSpace: 'LAB', shift: 1, fullScale: true }); @@ -27,7 +27,7 @@ test('should generate 8 colors in OKlab', (t) => { const scale = createScale({ swatches: 8, colorKeys: ['#CCFFA9', '#FEFEC5', '#5F0198'], - colorspace: 'OKLAB', + colorSpace: 'OKLAB', shift: 1, fullScale: true }); @@ -38,7 +38,7 @@ test('should generate 8 colors in OKLCh', (t) => { const scale = createScale({ swatches: 8, colorKeys: ['#CCFFA9', '#FEFEC5', '#5F0198'], - colorspace: 'OKLCH', + colorSpace: 'OKLCH', shift: 1, fullScale: true }); diff --git a/packages/contrast-colors/test/searchColors.test.js b/packages/contrast-colors/test/searchColors.test.js index 1d7974dd..3703cbb6 100644 --- a/packages/contrast-colors/test/searchColors.test.js +++ b/packages/contrast-colors/test/searchColors.test.js @@ -17,7 +17,7 @@ test('should return blue color of 3.12:1 against white', (t) => { const color = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [3.12] }); const bgRgbArray = [255, 255, 255]; @@ -30,7 +30,7 @@ test('should return blue color of 3.12:1 against black', (t) => { const color = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [3.12] }); const bgRgbArray = [0, 0, 0]; @@ -43,7 +43,7 @@ test('should return blue colors of 3:1 and 4.5:1 against white', (t) => { const color = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [3, 4.5] }); const bgRgbArray = [255, 255, 255]; @@ -56,7 +56,7 @@ test('should return blue colors of 3:1 and 4.5:1 against black', (t) => { const color = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [3, 4.5] }); const bgRgbArray = [0, 0, 0]; @@ -69,7 +69,7 @@ test('should return blue color of -1.3 against light gray', (t) => { const color = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [-1.3] }); const bgRgbArray = [166, 166, 166]; @@ -82,7 +82,7 @@ test('should return blue color of -2 against dark gray', (t) => { const color = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [-2] }); const bgRgbArray = [99, 99, 99]; diff --git a/packages/contrast-colors/test/theme.test.js b/packages/contrast-colors/test/theme.test.js index bda196c8..919099df 100644 --- a/packages/contrast-colors/test/theme.test.js +++ b/packages/contrast-colors/test/theme.test.js @@ -16,19 +16,19 @@ test('should generate theme for three colors', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -82,19 +82,19 @@ test('should output theme as key-value pairs', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -133,19 +133,19 @@ test('should generate theme for three colors in LCH format', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -200,19 +200,19 @@ test('should generate theme for three colors with negative ratios', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -271,19 +271,19 @@ test('should generate theme for three colors using variables as parameters', (t) const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: baseRatios }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: tempRatios }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: tempRatios }); const theme = new Theme({ @@ -337,19 +337,19 @@ test('should increase contrast of existing theme', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -406,19 +406,19 @@ test('should generate theme with increased contrast', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -475,19 +475,19 @@ test('should generate white theme with increased contrast', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -544,19 +544,19 @@ test('should generate dark theme with increased contrast', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -637,19 +637,19 @@ test('should generate colors with user-defined names', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: grayRatios }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: blueRatios }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: redRatios }); const theme = new Theme({ @@ -724,19 +724,19 @@ test('should generate colors with user-defined names as key-value pairs', (t) => const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: grayRatios }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: blueRatios }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: redRatios }); const theme = new Theme({ @@ -796,19 +796,19 @@ test('should generate colors with user-defined names and increased contrast', (t const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: grayRatios }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: blueRatios }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: redRatios }); const theme = new Theme({ @@ -868,7 +868,7 @@ test('should generate 2 colors (CAM02 interpolation)', (t) => { const gray = new Color({ name: 'gray', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'CAM02', + colorSpace: 'CAM02', ratios: [3, 4.5] }); const theme = new Theme({colors: [gray], backgroundColor: '#f5f5f5'}); @@ -882,7 +882,7 @@ test('should generate 2 colors (LAB interpolation)', (t) => { name: 'Indigo', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'LAB' + colorSpace: 'LAB' }); const theme = new Theme({colors: [indigo], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -895,7 +895,7 @@ test('should generate 2 colors (LCH interpolation)', (t) => { name: 'Indigo', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'LCH' + colorSpace: 'LCH' }); const theme = new Theme({colors: [indigo], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -908,7 +908,7 @@ test('should generate 2 colors (HSL interpolation)', (t) => { name: 'Indigo', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'HSL' + colorSpace: 'HSL' }); const theme = new Theme({colors: [indigo], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -921,7 +921,7 @@ test('should generate 2 colors (HSLuv interpolation)', (t) => { name: 'Indigo', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'HSLuv' + colorSpace: 'HSLuv' }); const theme = new Theme({colors: [indigo], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -934,7 +934,7 @@ test('should generate 2 colors (HSV interpolation)', (t) => { name: 'Indigo', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'HSV' + colorSpace: 'HSV' }); const theme = new Theme({colors: [indigo], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -947,7 +947,7 @@ test('should generate 2 colors (RGB interpolation)', (t) => { name: 'Indigo', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'RGB' + colorSpace: 'RGB' }); const theme = new Theme({colors: [indigo], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -960,7 +960,7 @@ test('should generate 2 colors on dark background', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'LCH' + colorSpace: 'LCH' }); const theme = new Theme({colors: [color], backgroundColor: '#323232'}); const themeColors = theme.contrastColorValues; @@ -974,7 +974,7 @@ test('should generate 2 colors with bidirectional contrast (light background)', name: 'Color', colorKeys: ['#012676'], ratios: [-1.25, 4.5], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#D8D8D8'}); const themeColors = theme.contrastColorValues; @@ -987,7 +987,7 @@ test('should generate 2 colors with bidirectional contrast (dark background)', ( name: 'Color', colorKeys: ['#012676'], ratios: [-1.25, 4.5], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#323232'}); const themeColors = theme.contrastColorValues; @@ -1002,7 +1002,7 @@ test('should generate black when ratio darker than available colors', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [21], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#d8d8d8'}); const themeColors = theme.contrastColorValues; @@ -1015,7 +1015,7 @@ test('should generate white when ratio lighter than available colors', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [21], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#323232'}); const themeColors = theme.contrastColorValues; @@ -1028,7 +1028,7 @@ test('should generate white when negative ratio lighter than available colors (l name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [-21], - colorspace: 'LCH' + colorSpace: 'LCH' }); const theme = new Theme({colors: [color], backgroundColor: '#f5f5f5'}); const themeColors = theme.contrastColorValues; @@ -1040,7 +1040,7 @@ test('should generate white when negative ratio lighter than available colors (w name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [-21], - colorspace: 'LCH' + colorSpace: 'LCH' }); const theme = new Theme({colors: [color], backgroundColor: '#ffffff'}); const themeColors = theme.contrastColorValues; @@ -1053,7 +1053,7 @@ test('should generate black when negative ratio darker than available colors (gr name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [-21], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#323232'}); const themeColors = theme.contrastColorValues; @@ -1066,7 +1066,7 @@ test('should generate black when negative ratio darker than available colors (bl name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [-21], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#000000'}); const themeColors = theme.contrastColorValues; @@ -1080,7 +1080,7 @@ test('should generate slightly lighter & darker grays on a darker midtone gray b name: 'Color', colorKeys: ['#000000'], ratios: [1.2, -1.2], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#6b6b6b'}); const themeColors = theme.contrastColorValues; @@ -1092,7 +1092,7 @@ test('should generate slightly lighter & darker grays on a lighter midtone gray name: 'Color', colorKeys: ['#000000'], ratios: [1.2, -1.2], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#787878'}); const themeColors = theme.contrastColors; @@ -1114,7 +1114,7 @@ test('should generate slightly lighter & darker oranges on a darker midtone slat name: 'Color', colorKeys: ['#ff8602', '#ab3c00', '#ffd88b'], ratios: [1.2, -1.2], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#537a9c'}); const themeColors = theme.contrastColorValues; @@ -1127,7 +1127,7 @@ test('should generate slightly lighter & darker oranges on a lighter midtone sla name: 'Color', colorKeys: ['#ff8602', '#ab3c00', '#ffd88b'], ratios: [1.2, -1.2], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#537b9d'}); const themeColors = theme.contrastColorValues; @@ -1141,7 +1141,7 @@ test('should generate 2 colors in HEX format', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -1157,7 +1157,7 @@ test('should generate 2 colors in RGB format', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -1173,7 +1173,7 @@ test('should generate 2 colors in HSL format', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -1189,7 +1189,7 @@ test('should generate 2 colors in HSV format', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -1205,7 +1205,7 @@ test('should generate 2 colors in LAB format', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -1221,7 +1221,7 @@ test('should generate 2 colors in LCH format', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -1239,19 +1239,19 @@ test('should add a color to existing theme', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -1263,7 +1263,7 @@ test('should add a color to existing theme', (t) => { const yellow = new Color({ name: 'yellow', colorKeys: ['#ffff00'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [2, 3, 4.5, 8, 12] }); theme.addColor = yellow; @@ -1324,25 +1324,25 @@ test('should remove a color from existing theme', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const yellow = new Color({ name: 'yellow', colorKeys: ['#ffff00'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -1402,19 +1402,19 @@ test('should use APCA to generate theme for three colors', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca', '#323232'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [8, 60, 75, 90, 106] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [40, 60, 75, 90] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [40, 60, 75, 90] }); const theme = new Theme({ diff --git a/packages/contrast-colors/test/themeSetters.test.js b/packages/contrast-colors/test/themeSetters.test.js index f2b04ea0..9f343ba0 100644 --- a/packages/contrast-colors/test/themeSetters.test.js +++ b/packages/contrast-colors/test/themeSetters.test.js @@ -18,7 +18,7 @@ test('should set theme output to HEX', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -34,7 +34,7 @@ test('should set theme output to RGB', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -50,7 +50,7 @@ test('should set theme output to HSL', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -66,7 +66,7 @@ test('should set theme output to HSV', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -82,7 +82,7 @@ test('should set theme output to LAB', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -98,7 +98,7 @@ test('should set theme output to LCH', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -116,7 +116,7 @@ test('should set theme saturation to 60%', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -132,7 +132,7 @@ test('should set theme saturation to 60% (updated)', (t) => { name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], - colorspace: 'CAM02' + colorSpace: 'CAM02' }); const theme = new Theme({ colors: [color], @@ -149,7 +149,7 @@ test('should set colorspace for one color in theme to CAM02', (t) => { const gray = new Color({ name: 'gray', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [3, 4.5] }); gray.colorspace = 'CAM02'; @@ -163,19 +163,19 @@ test('should remove a color by its class', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -224,19 +224,19 @@ test('should remove a color by its name', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -285,19 +285,19 @@ test('should set contrast multiple times', (t) => { const gray = new BackgroundColor({ name: 'gray', colorKeys: ['#cacaca'], - colorspace: 'HSL', + colorSpace: 'HSL', ratios: [-1.8, -1.2, 1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21] }); const blue = new Color({ name: 'blue', colorKeys: ['#0000ff'], - colorspace: 'LAB', + colorSpace: 'LAB', ratios: [2, 3, 4.5, 8, 12] }); const red = new Color({ name: 'red', colorKeys: ['#ff0000'], - colorspace: 'RGB', + colorSpace: 'RGB', ratios: [2, 3, 4.5, 8, 12] }); const theme = new Theme({ @@ -361,7 +361,7 @@ test('should update predefined color keys', (t) => { name: 'Color', colorKeys: ['#cacaca'], ratios: [1.2, -1.2], - colorspace: 'LCH' + colorSpace: 'LCH' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#537b9d'}); @@ -378,7 +378,7 @@ test('should update predefined color keys as object return', (t) => { name: 'Color', colorKeys: ['#ff8602', '#ab3c00', '#ffd88b'], ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21], - colorspace: 'RGB' + colorSpace: 'RGB' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#e1e1e1'}); theme.updateColor = {color: 'Color', colorKeys: ['#ff00ff']}; @@ -410,18 +410,18 @@ test('should update predefined colors interpolation', (t) => { name: 'Color', colorKeys: ['#ff8602', '#ab3c00', '#ffd88b'], ratios: [1.2, -1.2], - colorspace: 'RGB' + colorSpace: 'RGB' }); // positive & negative ratios const theme = new Theme({colors: [color], backgroundColor: '#537b9d'}); - theme.updateColor = {color: 'Color', colorspace: 'LCH'}; + theme.updateColor = {color: 'Color', colorSpace: 'LCH'}; const themeColors = theme.contrastColorValues; t.deepEqual(themeColors, ['#d86202', '#b84601']); }); // // Formula setter // test('should set formula to wcag3 with updated contrast values', t => { -// const color = new Color({ name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], colorspace: 'CAM02' }); +// const color = new Color({ name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], colorSpace: 'CAM02' }); // const theme = new Theme({ colors: [color], backgroundColor: '#f5f5f5', output: 'HEX' }); // theme.formula = 'wcag3'; // const themeColors = theme.contrastColors;