Skip to content

fix(contrast-colors): replace depreciated colorspace #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karim-semmoud wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(contrast-colors): replace depreciated colorspace #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e987bd
fix(contrast-colors/lib): replace colorspace by colorSpace
karim-semmoud Mar 26, 2026
5ed3242
fix(contrast-colors/test): replace colorspace by colorSpace
karim-semmoud Mar 26, 2026
079bbdd
fix(contrast-colors/doc): replace colorspace by colorSpace
karim-semmoud Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/contrast-colors/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand All @@ -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 |
Expand Down
2 changes: 1 addition & 1 deletion packages/contrast-colors/lib/backgroundcolor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand Down
10 changes: 5 additions & 5 deletions packages/contrast-colors/lib/color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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]) {
Expand Down Expand Up @@ -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. */
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/contrast-colors/lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/contrast-colors/test/backgroundColor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, [
Expand Down Expand Up @@ -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, [
Expand Down Expand Up @@ -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, [
Expand Down
10 changes: 5 additions & 5 deletions packages/contrast-colors/test/colorSetters.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand All @@ -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
});
Expand All @@ -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
});
Expand All @@ -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
});
Expand All @@ -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
});
Expand Down
6 changes: 3 additions & 3 deletions packages/contrast-colors/test/createScale.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand All @@ -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
});
Expand All @@ -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
});
Expand Down
12 changes: 6 additions & 6 deletions packages/contrast-colors/test/searchColors.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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];
Expand All @@ -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];
Expand All @@ -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];
Expand All @@ -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];
Expand All @@ -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];
Expand Down
Loading