diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 794f22164..4a04e7e04 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -36,6 +36,7 @@
- fixes inconsistencies when objects were double quoted [#2390](https://github.com/terrastruct/d2/pull/2390)
- fixes globs not applying to spread substitutions [#2426](https://github.com/terrastruct/d2/issues/2426)
- fixes panic when classes were mixed with layers incorrectly [#2448](https://github.com/terrastruct/d2/pull/2448)
+ - fixes panic when gradient colors are used in sketch mode [#2481](https://github.com/terrastruct/d2/pull/2487)
- fixes panic using glob ampersand filters with composite values [#2489](https://github.com/terrastruct/d2/pull/2489)
- Formatter:
- fixes substitutions in quotes surrounded by text [#2462](https://github.com/terrastruct/d2/pull/2462)
diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go
index 04b97e134..579af9633 100644
--- a/d2renderers/d2sketch/sketch_test.go
+++ b/d2renderers/d2sketch/sketch_test.go
@@ -1357,6 +1357,14 @@ item -> customer: is(Adult)
customer -> item: true
`,
},
+ {
+ name: "test-gradient-fill-values-in-sketch-mode",
+ script: `
+ x->y
+ x.style.fill: "linear-gradient(#000000,#ffffff)"
+ y.style.fill: "linear-gradient(#ffffff,#000000)"
+ `,
+ },
}
runa(t, tcs)
}
diff --git a/d2renderers/d2sketch/testdata/test-gradient-fill-values-in-sketch-mode/sketch.exp.svg b/d2renderers/d2sketch/testdata/test-gradient-fill-values-in-sketch-mode/sketch.exp.svg
new file mode 100644
index 000000000..d6fb8498c
--- /dev/null
+++ b/d2renderers/d2sketch/testdata/test-gradient-fill-values-in-sketch-mode/sketch.exp.svg
@@ -0,0 +1,118 @@
+
\ No newline at end of file
diff --git a/lib/color/color.go b/lib/color/color.go
index cbd8971f7..7417a2b9d 100644
--- a/lib/color/color.go
+++ b/lib/color/color.go
@@ -86,6 +86,11 @@ func darkenCSS(colorString string) (string, error) {
}
func LuminanceCategory(colorString string) (string, error) {
+ // check if colorString matches the `url('#grad-')` format
+ // which is used to refer to a or element.
+ if IsURLGradientID(colorString) {
+ return "normal", nil
+ }
l, err := Luminance(colorString)
if err != nil {
return "", err
diff --git a/lib/color/gradient.go b/lib/color/gradient.go
index 29f29acc3..51dbde637 100644
--- a/lib/color/gradient.go
+++ b/lib/color/gradient.go
@@ -246,3 +246,9 @@ var GradientRegex = regexp.MustCompile(`^(linear|radial)-gradient\((.+)\)$`)
func IsGradient(color string) bool {
return GradientRegex.MatchString(color)
}
+
+var URLGradientID = regexp.MustCompile(`^url\('#grad-[a-f0-9]{40}'\)$`)
+
+func IsURLGradientID(color string) bool {
+ return URLGradientID.MatchString(color)
+}