@elixpo/lixsketch 5.5.11 → 5.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/react/index.js +29 -29
  2. package/dist/react/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/react/components/canvas/FindBar.jsx +1 -1
  5. package/src/react/components/modals/CanvasPropertiesModal.jsx +1 -1
  6. package/src/react/components/sidebars/ArrowSidebar.jsx +6 -6
  7. package/src/react/components/sidebars/CircleSidebar.jsx +3 -3
  8. package/src/react/components/sidebars/FrameSidebar.jsx +1 -1
  9. package/src/react/components/sidebars/LineSidebar.jsx +4 -4
  10. package/src/react/components/sidebars/PaintbrushSidebar.jsx +5 -5
  11. package/src/react/components/sidebars/RectangleSidebar.jsx +4 -4
  12. package/src/react/components/sidebars/TextSidebar.jsx +5 -5
package/dist/react/index.js CHANGED
@@ -1469,7 +1469,7 @@ function ColorGrid({ colors, selected, onSelect }) {
1469
1469
  "button",
1470
1470
  {
1471
1471
  onClick: () => onSelect(c),
1472
- className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#5B57D1] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1472
+ className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1473
1473
  style: !isTrans ? { backgroundColor: c } : void 0,
1474
1474
  children: isTrans && /* @__PURE__ */ jsx6("svg", { className: "w-full h-full text-text-dim", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6("line", { x1: "4", y1: "16", x2: "16", y2: "4", stroke: "currentColor", strokeWidth: "2" }) })
1475
1475
  },
@@ -1541,7 +1541,7 @@ function RectangleSidebar() {
1541
1541
  "button",
1542
1542
  {
1543
1543
  onClick: () => updateThickness(w),
1544
- className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-muted hover:bg-white/[0.06]"}`,
1544
+ className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
1545
1545
  children: /* @__PURE__ */ jsx6("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
1546
1546
  },
1547
1547
  w
@@ -1558,7 +1558,7 @@ function RectangleSidebar() {
1558
1558
  "button",
1559
1559
  {
1560
1560
  onClick: () => updateStyle(s.v),
1561
- className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#5B57D1]/20" : "hover:bg-white/[0.06]"}`,
1561
+ className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#7667a8]/20" : "hover:bg-white/[0.06]"}`,
1562
1562
  children: /* @__PURE__ */ jsx6("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx6("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
1563
1563
  },
1564
1564
  s.v
@@ -1571,7 +1571,7 @@ function RectangleSidebar() {
1571
1571
  "button",
1572
1572
  {
1573
1573
  onClick: () => updateFill(f.value),
1574
- className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
1574
+ className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
1575
1575
  children: [
1576
1576
  /* @__PURE__ */ jsx6("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
1577
1577
  t(f.label)
@@ -1672,7 +1672,7 @@ function CircleSidebar() {
1672
1672
  "button",
1673
1673
  {
1674
1674
  onClick: () => updateThickness(w),
1675
- className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-muted hover:bg-white/[0.06]"}`,
1675
+ className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
1676
1676
  children: /* @__PURE__ */ jsx7("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
1677
1677
  },
1678
1678
  w
@@ -1685,7 +1685,7 @@ function CircleSidebar() {
1685
1685
  "button",
1686
1686
  {
1687
1687
  onClick: () => updateStyle(s.v),
1688
- className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#5B57D1]/20" : "hover:bg-white/[0.06]"}`,
1688
+ className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#7667a8]/20" : "hover:bg-white/[0.06]"}`,
1689
1689
  children: /* @__PURE__ */ jsx7("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx7("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
1690
1690
  },
1691
1691
  s.v
@@ -1698,7 +1698,7 @@ function CircleSidebar() {
1698
1698
  "button",
1699
1699
  {
1700
1700
  onClick: () => updateFill(f.value),
1701
- className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
1701
+ className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === f.value ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
1702
1702
  children: [
1703
1703
  /* @__PURE__ */ jsx7("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
1704
1704
  t(f.label)
@@ -1721,7 +1721,7 @@ function ColorGrid3({ colors, selected, onSelect }) {
1721
1721
  "button",
1722
1722
  {
1723
1723
  onClick: () => onSelect(c),
1724
- className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#5B57D1] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1724
+ className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1725
1725
  style: { backgroundColor: c }
1726
1726
  },
1727
1727
  c
@@ -1775,7 +1775,7 @@ function LineSidebar() {
1775
1775
  "button",
1776
1776
  {
1777
1777
  onClick: () => updateThickness(w),
1778
- className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-muted hover:bg-white/[0.06]"}`,
1778
+ className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
1779
1779
  children: /* @__PURE__ */ jsx8("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
1780
1780
  },
1781
1781
  w
@@ -1788,7 +1788,7 @@ function LineSidebar() {
1788
1788
  "button",
1789
1789
  {
1790
1790
  onClick: () => updateStyle(s.v),
1791
- className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#5B57D1]/20" : "hover:bg-white/[0.06]"}`,
1791
+ className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#7667a8]/20" : "hover:bg-white/[0.06]"}`,
1792
1792
  children: /* @__PURE__ */ jsx8("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx8("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
1793
1793
  },
1794
1794
  s.v
@@ -1801,7 +1801,7 @@ function LineSidebar() {
1801
1801
  "button",
1802
1802
  {
1803
1803
  onClick: () => updateSloppiness(s.v),
1804
- className: `w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${sloppiness === s.v ? "bg-[#5B57D1]/20 text-accent-blue" : "text-text-muted hover:bg-white/6"}`,
1804
+ className: `w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${sloppiness === s.v ? "bg-[#7667a8]/20 text-accent-blue" : "text-text-muted hover:bg-white/6"}`,
1805
1805
  children: s.l
1806
1806
  },
1807
1807
  s.v
@@ -1847,7 +1847,7 @@ function ColorGrid4({ colors, selected, onSelect }) {
1847
1847
  "button",
1848
1848
  {
1849
1849
  onClick: () => onSelect(c),
1850
- className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#5B57D1] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1850
+ className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1851
1851
  style: { backgroundColor: c }
1852
1852
  },
1853
1853
  c
@@ -1900,7 +1900,7 @@ function ArrowSidebar() {
1900
1900
  "button",
1901
1901
  {
1902
1902
  onClick: () => updateHead(h.value),
1903
- className: `w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-secondary hover:bg-white/[0.06]"}`,
1903
+ className: `w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-secondary hover:bg-white/[0.06]"}`,
1904
1904
  children: /* @__PURE__ */ jsx9(SvgIcon, { svg: h.svg })
1905
1905
  },
1906
1906
  h.value
@@ -1925,7 +1925,7 @@ function ArrowSidebar() {
1925
1925
  "button",
1926
1926
  {
1927
1927
  onClick: () => updateThickness(w),
1928
- className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-secondary hover:bg-white/[0.06]"}`,
1928
+ className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-secondary hover:bg-white/[0.06]"}`,
1929
1929
  children: /* @__PURE__ */ jsx9("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
1930
1930
  },
1931
1931
  w
@@ -1938,7 +1938,7 @@ function ArrowSidebar() {
1938
1938
  "button",
1939
1939
  {
1940
1940
  onClick: () => updateOutline(s.v),
1941
- className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? "bg-[#5B57D1]/20" : "hover:bg-white/[0.06]"}`,
1941
+ className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? "bg-[#7667a8]/20" : "hover:bg-white/[0.06]"}`,
1942
1942
  children: /* @__PURE__ */ jsx9("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx9("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
1943
1943
  },
1944
1944
  s.v
@@ -1956,7 +1956,7 @@ function ArrowSidebar() {
1956
1956
  "button",
1957
1957
  {
1958
1958
  onClick: () => updateType(a.v),
1959
- className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
1959
+ className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
1960
1960
  children: [
1961
1961
  /* @__PURE__ */ jsx9("i", { className: `bx ${a.i} text-sm` }),
1962
1962
  " ",
@@ -1972,7 +1972,7 @@ function ArrowSidebar() {
1972
1972
  "button",
1973
1973
  {
1974
1974
  onClick: () => updateCurvature(c.v),
1975
- className: `flex-1 py-1 rounded-md text-xs text-center transition-all duration-100 ${curvature === c.v ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-secondary hover:bg-white/[0.06]"}`,
1975
+ className: `flex-1 py-1 rounded-md text-xs text-center transition-all duration-100 ${curvature === c.v ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-secondary hover:bg-white/[0.06]"}`,
1976
1976
  children: c.l
1977
1977
  },
1978
1978
  c.v
@@ -1995,7 +1995,7 @@ function ColorGrid5({ colors, selected, onSelect }) {
1995
1995
  "button",
1996
1996
  {
1997
1997
  onClick: () => onSelect(c),
1998
- className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#5B57D1] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1998
+ className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${selected === c ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
1999
1999
  style: { backgroundColor: c }
2000
2000
  },
2001
2001
  c
@@ -2050,7 +2050,7 @@ function PaintbrushSidebar() {
2050
2050
  "button",
2051
2051
  {
2052
2052
  onClick: () => updateThickness(w),
2053
- className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-muted hover:bg-white/[0.06]"}`,
2053
+ className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
2054
2054
  children: /* @__PURE__ */ jsx10("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
2055
2055
  },
2056
2056
  w
@@ -2067,7 +2067,7 @@ function PaintbrushSidebar() {
2067
2067
  "button",
2068
2068
  {
2069
2069
  onClick: () => updateTaper(t2.v),
2070
- className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${taper === t2.v ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2070
+ className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${taper === t2.v ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2071
2071
  children: [
2072
2072
  /* @__PURE__ */ jsx10("i", { className: `bx ${t2.i} text-sm` }),
2073
2073
  " ",
@@ -2088,7 +2088,7 @@ function PaintbrushSidebar() {
2088
2088
  "button",
2089
2089
  {
2090
2090
  onClick: () => updateRoughness(r.v),
2091
- className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${roughness === r.v ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2091
+ className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${roughness === r.v ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2092
2092
  children: [
2093
2093
  /* @__PURE__ */ jsx10("i", { className: `bx ${r.i} text-sm` }),
2094
2094
  " ",
@@ -2114,7 +2114,7 @@ function PaintbrushSidebar() {
2114
2114
  step: "0.05",
2115
2115
  value: opacity,
2116
2116
  onChange: (e) => updateOpacity(parseFloat(e.target.value)),
2117
- className: "w-28 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#5B57D1]"
2117
+ className: "w-28 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#7667a8]"
2118
2118
  }
2119
2119
  )
2120
2120
  ] }),
@@ -2214,7 +2214,7 @@ function TextSidebar() {
2214
2214
  "button",
2215
2215
  {
2216
2216
  onClick: () => updateColor(c),
2217
- className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? "border-[#5B57D1] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
2217
+ className: `w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? "border-[#7667a8] scale-110" : "border-white/[0.08] hover:border-white/20"}`,
2218
2218
  style: { backgroundColor: c }
2219
2219
  },
2220
2220
  c
@@ -2230,7 +2230,7 @@ function TextSidebar() {
2230
2230
  "button",
2231
2231
  {
2232
2232
  onClick: () => updateFont(f.value),
2233
- className: `flex items-center px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${font === f.value ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2233
+ className: `flex items-center px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${font === f.value ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2234
2234
  style: { fontFamily: f.value },
2235
2235
  children: f.label
2236
2236
  },
@@ -2245,7 +2245,7 @@ function TextSidebar() {
2245
2245
  "button",
2246
2246
  {
2247
2247
  onClick: () => updateSize(s),
2248
- className: `w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${fontSize === s ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-muted hover:bg-white/[0.06]"}`,
2248
+ className: `w-8 h-8 flex items-center justify-center rounded-lg text-xs transition-all duration-100 ${fontSize === s ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
2249
2249
  children: s
2250
2250
  },
2251
2251
  s
@@ -2259,7 +2259,7 @@ function TextSidebar() {
2259
2259
  "button",
2260
2260
  {
2261
2261
  onClick: toggleCodeMode,
2262
- className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${codeMode ? "bg-[#5B57D1] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2262
+ className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${codeMode ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
2263
2263
  children: [
2264
2264
  /* @__PURE__ */ jsx11("div", { className: `w-6 h-3 rounded-full transition-all duration-150 relative ${codeMode ? "bg-white/30" : "bg-white/10"}`, children: /* @__PURE__ */ jsx11("div", { className: `absolute top-0.5 w-2 h-2 rounded-full bg-white transition-all duration-150 ${codeMode ? "left-3.5" : "left-0.5"}` }) }),
2265
2265
  codeMode ? t("sidebar.on") : t("sidebar.off")
@@ -2270,7 +2270,7 @@ function TextSidebar() {
2270
2270
  "button",
2271
2271
  {
2272
2272
  onClick: () => updateLanguage(lang),
2273
- className: `px-1.5 py-0.5 rounded text-[9px] transition-all duration-100 ${language === lang ? "bg-[#5B57D1]/20 text-[#5B57D1]" : "text-text-dim hover:bg-white/[0.06] hover:text-text-secondary"}`,
2273
+ className: `px-1.5 py-0.5 rounded text-[9px] transition-all duration-100 ${language === lang ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-dim hover:bg-white/[0.06] hover:text-text-secondary"}`,
2274
2274
  children: lang
2275
2275
  },
2276
2276
  lang
@@ -2387,7 +2387,7 @@ function FrameSidebar() {
2387
2387
  type: "text",
2388
2388
  value: frameName,
2389
2389
  onChange: updateName,
2390
- className: "w-32 px-2.5 py-1.5 bg-white/[0.05] border border-white/[0.1] rounded-lg text-white text-xs outline-none focus:border-[#5B57D1]/50 transition-all duration-150 font-[lixFont]",
2390
+ className: "w-32 px-2.5 py-1.5 bg-white/[0.05] border border-white/[0.1] rounded-lg text-white text-xs outline-none focus:border-[#7667a8]/50 transition-all duration-150 font-[lixFont]",
2391
2391
  spellCheck: false
2392
2392
  }
2393
2393
  )
@@ -3386,7 +3386,7 @@ function FindBar() {
3386
3386
  rect.setAttribute("width", w + 8);
3387
3387
  rect.setAttribute("height", h + 8);
3388
3388
  rect.setAttribute("fill", "rgba(91, 87, 209, 0.15)");
3389
- rect.setAttribute("stroke", "#5B57D1");
3389
+ rect.setAttribute("stroke", "#7667a8");
3390
3390
  rect.setAttribute("stroke-width", "2");
3391
3391
  rect.setAttribute("stroke-dasharray", "4,2");
3392
3392
  rect.setAttribute("rx", "4");