Merge pull request #2487 from melsonic/issue-2481

fix: made gradients work in sketch mode

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)

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)
 }

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-<sha1-hash>')` format
+	// which is used to refer to a <linearGradient> or <radialGradient> element.
+	if IsURLGradientID(colorString) {
+		return "normal", nil
+	}
 	l, err := Luminance(colorString)
 	if err != nil {
 		return "", err

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)
+}