Skip to content

Commit 7385295

Browse files
GarthDBcursoragent
GarthDB
and
cursoragent
authored
feat: add colorSpace as canonical name, deprecate colorspace (non-breaking) (#264)
* feat: add colorSpace as canonical name, deprecate colorspace (non-breaking) - Accept both colorspace and colorSpace in Color/Theme/createScale; prefer colorSpace - Add colorSpace getter/setter; keep colorspace as deprecated alias with console.warn - Theme.updateColor accepts param.colorSpace ?? param.colorspace - TypeScript: add colorSpace to types, @deprecated colorspace - docs/ui: use colorSpace in config, URL serialization, and internal classes - URL config parsing supports both keys for backward compatibility Refs #190, supersedes approach in PR #191 (deprecation alias avoids breaking change). Co-authored-by: Cursor <cursoragent@cursor.com> * chore: add changeset for colorSpace deprecation alias Co-authored-by: Cursor <cursoragent@cursor.com> * fix: remove duplicate formulaString/largeText/smallText in createOutputParameters.js Co-authored-by: Cursor <cursoragent@cursor.com> * fix(contrast-colors): improve TS return types and add type tests - Fix convertColorValue return type: overloads for object=true (Record<string, number>) vs default (string) - Fix createScale return type: overloads for asFun=true (Scale) vs default (CssColor[]) - Export consumer-facing types: CssColor, Colorspace, CreateScaleOptions, etc. - Add chroma-js.d.ts shim for type-checking without @types/chroma-js - Add tsd and test/index.test-d.ts to lock return types and prevent regressions - Add moon test-types task for CI Co-authored-by: Cursor <cursoragent@cursor.com> * ci: do not fail job when run-report action has bad credentials Use continue-on-error for moonrepo/run-report-action so missing or invalid MOON_GH_TOKEN (e.g. on fork PRs) does not mark the job failed. Co-authored-by: Cursor <cursoragent@cursor.com> * ci: capture moon ci log on failure and use GITHUB_TOKEN - Run moon ci with tee to save full output to moon-ci.log - Upload moon-ci.log artifact when job fails for debugging - Use GITHUB_TOKEN for run-report-action instead of MOON_GH_TOKEN Co-authored-by: Cursor <cursoragent@cursor.com> * fix(ci): ensure deps install before moon ci; fix moon task inputs/outputs - CI: use GITHUB_TOKEN, run pnpm install --frozen-lockfile before moon ci, upload moon-ci.log on failure, continue-on-error for run-report - Moon: use @group() instead of @globs() for task inputs/outputs so contrast-colors literal sources are hashed and cache invalidates correctly Co-authored-by: Cursor <cursoragent@cursor.com> * chore: update lockfile after removing @types/chroma-js from contrast-colors Co-authored-by: Cursor <cursoragent@cursor.com> * fix: colorSpace deprecation bugs - Use colorSpace (not colorspace) in Color._generateColorScale to avoid spamming deprecation warning on every scale regeneration - Use colorSpaceVal in params.js OKLAB/OKLCH smoothing check so URL configs with old colorspace key still enable first-color smoothing - Add console.warn in theme.js updateColor when deprecated colorspace key is used (consistent with Color constructor/setter) - Fix Output error message to reference this._output not colorSpace Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent c9060b5 commit 7385295

26 files changed

Lines changed: 653 additions & 121 deletions

‎.changeset/colorSpace-deprecation-alias.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@adobe/leonardo-contrast-colors": minor
3+
---
4+
5+
Add `colorSpace` as the canonical property name and deprecate `colorspace` (non-breaking). The constructor, `Theme.updateColor`, and `createScale()` accept both names; `colorSpace` takes precedence. The old `colorspace` getter/setter remain as deprecated aliases and emit a console warning. TypeScript types include `colorSpace` and mark `colorspace` as `@deprecated`. Existing code continues to work.

‎.github/workflows/ci.yml‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,15 @@ jobs:
1111
- uses: moonrepo/setup-toolchain@v0.6.2
1212
with:
1313
auto-install: true
14-
- run: moon ci
14+
- run: pnpm install --frozen-lockfile
15+
- run: moon ci 2>&1 | tee moon-ci.log; exit ${PIPESTATUS[0]}
16+
- uses: actions/upload-artifact@v4
17+
if: failure()
18+
with:
19+
name: moon-ci-log
20+
path: moon-ci.log
1521
- uses: 'moonrepo/run-report-action@v1.9.0'
1622
if: success() || failure()
23+
continue-on-error: true
1724
with:
18-
access-token: ${{ secrets.MOON_GH_TOKEN }}
25+
access-token: ${{ secrets.GITHUB_TOKEN }}

‎docs/ui/moon.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ tasks:
2626
command: 'parcel src/index.html src/theme.html src/scales.html src/tools.html src/demo.html --no-hmr'
2727
platform: node
2828
inputs:
29-
- '@globs(sources)'
29+
- '@group(sources)'
3030
local: true
3131
deps:
3232
- ~:makeDistDir
@@ -97,9 +97,9 @@ tasks:
9797
- ~:copyUIIcons
9898
- ~:copyWorkflowIcons
9999
inputs:
100-
- '@globs(sources)'
100+
- '@group(sources)'
101101
outputs:
102-
- '@globs(output)'
102+
- '@group(output)'
103103
lint:
104104
command: 'eslint src/'
105105
platform: node

‎docs/ui/src/demo.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,41 +20,41 @@ let uiRatios = [1, 1.12, 1.3, 2, 3.01, 4.52, 7, 11, 16];
2020
let purpleScale = new Leo.Color({
2121
name: 'purple',
2222
colorKeys: ['#7a4beb', '#ac80f4', '#2f0071'],
23-
colorspace: 'LAB',
23+
colorSpace: 'LAB',
2424
ratios: uiRatios
2525
});
2626

2727
let blueScale = new Leo.Color({
2828
name: 'blue',
2929
colorKeys: ['#0272d4', '#b2f0ff', '#55cfff', '#0037d7'],
30-
colorspace: 'CAM02',
30+
colorSpace: 'CAM02',
3131
ratios: uiRatios
3232
});
3333

3434
let greenScale = new Leo.Color({
3535
name: 'green',
3636
colorKeys: ['#4eb076', '#2a5a45', '#a7e3b4'],
37-
colorspace: 'HSL',
37+
colorSpace: 'HSL',
3838
ratios: uiRatios
3939
});
4040
let redScale = new Leo.Color({
4141
name: 'red',
4242
colorKeys: ['#ea2825', '#ffc1ad', '#fd937e'],
43-
colorspace: 'LAB',
43+
colorSpace: 'LAB',
4444
ratios: uiRatios
4545
});
4646

4747
let goldScale = new Leo.Color({
4848
name: 'gold',
4949
colorKeys: ['#e8b221', '#a06a00', '#ffdd7c'],
50-
colorspace: 'HSL',
50+
colorSpace: 'HSL',
5151
ratios: uiRatios
5252
});
5353

5454
let grayScale = new Leo.BackgroundColor({
5555
name: 'gray',
5656
colorKeys: ['#4a5b7b', '#72829c', '#a6b2c6'],
57-
colorspace: 'HSL',
57+
colorSpace: 'HSL',
5858
ratios: baseRatios
5959
});
6060

‎docs/ui/src/js/addColorsFromImage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function addColorsFromImage() {
6262
let newColor = new Leo.BackgroundColor({
6363
name: colorName,
6464
colorKeys: [color.hex()],
65-
colorspace: 'CAM02p',
65+
colorSpace: 'CAM02p',
6666
ratios: ratios,
6767
smooth: true
6868
});
@@ -96,7 +96,7 @@ function addColorsFromImage() {
9696
let newColor = new Leo.BackgroundColor({
9797
name: colorName,
9898
colorKeys: color,
99-
colorspace: 'CAM02p',
99+
colorSpace: 'CAM02p',
100100
ratios: ratios,
101101
smooth: true
102102
});

‎docs/ui/src/js/colorDetailsPanel.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ function showColorDetails(e, colorId) {
214214
interpSelect.name = thisId.concat('_mode');
215215
interpSelect.oninput = throttle(themeUpdateParams, 20);
216216
interpSelect.addEventListener('change', (e) => {
217-
_theme.updateColor = {color: colorData.name, colorspace: e.target.value};
217+
_theme.updateColor = {color: colorData.name, colorSpace: e.target.value};
218218
updateRamps(colorData, thisId);
219219
updateColorDots(chartsModeSelect.value, scaleType, colorData.colorKeys, id);
220220
create3dModel('tabModelContent', colorData, chartsModeSelect.value);
@@ -252,7 +252,7 @@ function showColorDetails(e, colorId) {
252252
for (let index in opts) {
253253
interpSelect.options[interpSelect.options.length] = new Option(opts[index], index);
254254
}
255-
interpSelect.value = colorData.colorspace;
255+
interpSelect.value = colorData.colorSpace;
256256

257257
// Smoothing
258258
let smoothFormItem = document.createElement('div');
@@ -307,7 +307,7 @@ function showColorDetails(e, colorId) {
307307
</svg>
308308
<span class="spectrum-ActionButton-label">Download SVG gradient</span>`;
309309
downloadGradient.addEventListener('click', (e) => {
310-
downloadSVGgradient(colorData.backgroundColorScale, colorData.colorspace, colorData.name);
310+
downloadSVGgradient(colorData.backgroundColorScale, colorData.colorSpace, colorData.name);
311311
});
312312

313313
let panelExport = document.createElement('div');

‎docs/ui/src/js/colorScale.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function addColorScale(newColor, addToTheme = true) {
4141
newColor = new Leo.BackgroundColor({
4242
name: colorNameValue,
4343
colorKeys: ['#000000'],
44-
colorspace: 'RGB',
44+
colorSpace: 'RGB',
4545
ratios: ratios,
4646
output: 'RGB'
4747
});

‎docs/ui/src/js/colorScaleDiverging.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function colorScaleDiverging(scaleType = 'diverging') {
6363
// If class is preset to smooth, check the smooth switch in the UI
6464
if (colorClass.smooth === true) smooth.checked = true;
6565

66-
interpolationMode.value = colorClass.colorspace;
66+
interpolationMode.value = colorClass.colorSpace;
6767

6868
let gradientId = `${scaleType}_gradient`;
6969
let buttonId = `${scaleType}_addKeyColor`;
@@ -136,8 +136,8 @@ function colorScaleDiverging(scaleType = 'diverging') {
136136
});
137137

138138
interpolationMode.addEventListener('change', (e) => {
139-
let colorspace = e.target.value;
140-
colorClass.colorspace = colorspace;
139+
let colorSpaceVal = e.target.value;
140+
colorClass.colorSpace = colorSpaceVal;
141141

142142
updateRamps(colorClass, scaleType, scaleType);
143143
createSamples(sampleNumber.value, scaleType);
@@ -169,7 +169,7 @@ function colorScaleDiverging(scaleType = 'diverging') {
169169

170170
const gradientColors = colorClass.colors;
171171
setTimeout(() => {
172-
downloadSVGgradient(gradientColors, colorClass.colorspace, filename);
172+
downloadSVGgradient(gradientColors, colorClass.colorSpace, filename);
173173
colorClass.swatches = originalSwatches;
174174
}, 500);
175175
});

‎docs/ui/src/js/colorScaleSequential.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function colorScaleSequential(scaleType = 'sequential') {
6161
smooth.disabled = true;
6262
smoothWrapper.classList.add('is-disabled');
6363
}
64-
interpolationMode.value = colorClass.colorspace;
64+
interpolationMode.value = colorClass.colorSpace;
6565

6666
let gradientId = `${scaleType}_gradient`;
6767
let buttonId = `${scaleType}_addKeyColor`;
@@ -121,8 +121,8 @@ function colorScaleSequential(scaleType = 'sequential') {
121121
});
122122

123123
interpolationMode.addEventListener('change', (e) => {
124-
let colorspace = e.target.value;
125-
colorClass.colorspace = colorspace;
124+
let colorSpaceVal = e.target.value;
125+
colorClass.colorSpace = colorSpaceVal;
126126

127127
updateRamps(colorClass, scaleType, scaleType);
128128
createSamples(sampleNumber.value, scaleType);
@@ -152,7 +152,7 @@ function colorScaleSequential(scaleType = 'sequential') {
152152
let filename = `${scaleName}_${scaleType}`;
153153

154154
setTimeout(() => {
155-
downloadSVGgradient(gradientColors, colorClass.colorspace, filename);
155+
downloadSVGgradient(gradientColors, colorClass.colorSpace, filename);
156156
colorClass.swatches = originalSwatches;
157157
}, 500);
158158
});

‎docs/ui/src/js/createOutputParameters.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function createJSOutput() {
5050
name: "${thisColor.name}",
5151
colorKeys: [${thisColor.colorKeys.map((c) => `'${c}'`)}],
5252
ratios: [${thisColor.ratios}],
53-
colorspace: "${thisColor.colorspace}",
53+
colorSpace: "${thisColor.colorSpace}",
5454
smooth: ${thisColor.smooth}
5555
});`;
5656
colorDeclarations.push(colorString);
@@ -125,10 +125,6 @@ function createTokensOutput() {
125125
let largeText = _theme.formula === 'wcag3' ? 60 : 3;
126126
let smallText = _theme.formula === 'wcag3' ? 75 : 4.5;
127127

128-
let formulaString = _theme.formula === 'wcag2' ? 'WCAG 2.x (relative luminance)' : 'WCAG 3 (APCA)';
129-
let largeText = _theme.formula === 'wcag3' ? 60 : 3;
130-
let smallText = _theme.formula === 'wcag3' ? 75 : 4.5;
131-
132128
for (let i = 1; i < contrastColors.length; i++) {
133129
let thisColor = contrastColors[i];
134130
for (let j = 0; j < thisColor.values.length; j++) {

0 commit comments

Comments
 (0)