Legends: add two more border variables

Author: ramiy

src/components/_legend.scss

@@ -5,7 +5,7 @@
 
   &.legend {
     padding: 1rem;
-    border: 1px solid var(--legend-border-color);
+    border: var(--legend-border-width) var(--legend-border-style) var(--legend-border-color);
     list-style: none;
 
     font-size: 1rem;

src/general/_properties.scss

@@ -14,8 +14,7 @@
 @property --color-8,
 @property --color-9,
 @property --color-10,
-@property --chart-bg-color,
-@property --legend-border-color {
+@property --chart-bg-color {
   syntax: '<color>';
   initial-value: transparent;
   inherits: true;
@@ -40,24 +39,27 @@
   inherits: true;
 }
 
-// Axes
+// Axes + Legends
 @property --primary-axis-width,
 @property --secondary-axes-width,
-@property --data-axes-width {
+@property --data-axes-width,
+@property --legend-border-width {
   syntax: '<length>';
   initial-value: 1px;
   inherits: true;
 }
 @property --primary-axis-style,
 @property --secondary-axes-style,
-@property --data-axes-style {
+@property --data-axes-style,
+@property --legend-border-style {
   syntax: '<line-style>';
   initial-value: solid;
   inherits: true;
 }
 @property --primary-axis-color,
 @property --secondary-axes-color,
-@property --data-axes-color {
+@property --data-axes-color,
+@property --legend-border-color {
   syntax: '<color>';
   initial-value: transparent;
   inherits: true;

src/general/_variables.scss

@@ -40,5 +40,7 @@ $max-axes: 10;
 
   // Legend
   --legend-border-color: rgb(200, 200, 200);
+  --legend-border-style: solid;
+  --legend-border-width: 1px;
 
 }