fix(issue#4343) add color operands (#4346)

* Add missing color operand support to resolve issue #4343.
This commit is contained in:
Daniel Puckowski
2025-07-12 16:56:49 -04:00
committed by GitHub
parent 67404cd50c
commit f086c79e2d
3 changed files with 96 additions and 1 deletions

View File

@@ -2231,6 +2231,17 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
}
parserInput.restore();
},
colorOperand: function () {
parserInput.save();
// hsl or rgb or lch operand
const match = parserInput.$re(/^[lchrgbs]\s+/);
if (match) {
return new tree.Keyword(match[0]);
}
parserInput.restore();
},
multiplication: function () {
let m;
let a;
@@ -2495,7 +2506,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
entities.color() || entities.variable() ||
entities.property() || entities.call() ||
entities.quoted(true) || entities.colorKeyword() ||
entities.mixinLookup();
this.colorOperand() || entities.mixinLookup();
if (negate) {
o.parensInOp = true;

View File

@@ -102,3 +102,39 @@
--semi-transparent-dark-background: #001e00ee;
--semi-transparent-dark-background-2: #001e00;
}
.color-oklch-sub {
background: oklch(from #0000FF calc(l - 0.1) c h);
}
.color-oklch-add {
background: oklch(from #0000FF calc(l + 0.1) c h);
}
.color-oklch-mult {
background: oklch(from #0000FF calc(l * 0.1) c h);
}
.color-oklch-div {
background: oklch(from #0000FF calc(l / 2) c h);
}
.color-hsl-sub {
background: hsl(from #0000FF calc(h - 1) s l);
}
.color-hsl-add {
background: hsl(from #0000FF calc(h + 1) s l);
}
.color-hsl-mult {
background: hsl(from #0000FF calc(h * 1) s l);
}
.color-hsl-div {
background: hsl(from #0000FF calc(h / 2) s l);
}
.color-rgb-sub {
background: rgb(from #0000FF calc(r - 1) g b);
}
.color-rgb-add {
background: rgb(from #0000FF calc(r + 1) g b);
}
.color-rgb-mult {
background: rgb(from #0000FF calc(r * 1) g b);
}
.color-rgb-div {
background: rgb(from #0000FF calc(r / 2) g b);
}

View File

@@ -114,3 +114,51 @@
--semi-transparent-dark-background: #001e00ee;
--semi-transparent-dark-background-2: rgba(0, 30, 0, 238); // invalid opacity will be capped
}
.color-oklch-sub {
background: oklch(from #0000FF calc(l - 0.1) c h);
}
.color-oklch-add {
background: oklch(from #0000FF calc(l + 0.1) c h);
}
.color-oklch-mult {
background: oklch(from #0000FF calc(l * 0.1) c h);
}
.color-oklch-div {
background: oklch(from #0000FF calc(l / 2) c h);
}
.color-hsl-sub {
background: hsl(from #0000FF calc(h - 1) s l);
}
.color-hsl-add {
background: hsl(from #0000FF calc(h + 1) s l);
}
.color-hsl-mult {
background: hsl(from #0000FF calc(h * 1) s l);
}
.color-hsl-div {
background: hsl(from #0000FF calc(h / 2) s l);
}
.color-rgb-sub {
background: rgb(from #0000FF calc(r - 1) g b);
}
.color-rgb-add {
background: rgb(from #0000FF calc(r + 1) g b);
}
.color-rgb-mult {
background: rgb(from #0000FF calc(r * 1) g b);
}
.color-rgb-div {
background: rgb(from #0000FF calc(r / 2) g b);
}