feat: update variables

src/css/charts.scss

@@ -1,15 +1,18 @@
 :root {
-	--fr-label-color: #313b44;
-	--fr-axis-line-color: #f4f5f6;
+	--charts-label-color: #313b44;
+	--charts-axis-line-color: #f4f5f6;
 
-	--fr-stroke-width: 2px;
-	--fr-dataset-circle-stroke: #ffffff;
-	--fr-dataset-circle-stroke-width: var(--fr-stroke-width);
+	--charts-tooltip-title: var(--charts-label-color);
+	--charts-tooltip-label: var(--charts-label-color);
+	--charts-tooltip-value: #192734;
+	--charts-tooltip-bg: #ffffff;
 
-	--fr-tooltip-title: var(--fr-label-color);
-	--fr-tooltip-label: var(--fr-label-color);
-	--fr-tooltip-value: #192734;
-	--fr-tooltip-bg: #ffffff;
+	--charts-stroke-width: 2px;
+	--charts-dataset-circle-stroke: #ffffff;
+	--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
+
+	--charts-legend-label: var(--charts-label-color);
+	--charts-legend-value: var(--charts-label-color);
 }
 
 .chart-container {
@@ -21,35 +24,35 @@
 
 	.axis,
 	.chart-label {
-		fill: var(--fr-label-color);
+		fill: var(--charts-label-color);
 
 		line {
-			stroke: var(--fr-axis-line-color);
+			stroke: var(--charts-axis-line-color);
 		}
 	}
 
 	.dataset-units {
 		circle {
-			stroke: var(--fr-dataset-circle-stroke);
-			stroke-width: var(--fr-dataset-circle-stroke-width);
+			stroke: var(--charts-dataset-circle-stroke);
+			stroke-width: var(--charts-dataset-circle-stroke-width);
 		}
 
 		path {
 			fill: none;
 			stroke-opacity: 1;
-			stroke-width: var(--fr-stroke-width);
+			stroke-width: var(--charts-stroke-width);
 		}
 	}
 
 	.dataset-path {
-		stroke-width: var(--fr-stroke-width);
+		stroke-width: var(--charts-stroke-width);
 	}
 
 	.path-group {
 		path {
 			fill: none;
 			stroke-opacity: 1;
-			stroke-width: var(--fr-stroke-width);
+			stroke-width: var(--charts-stroke-width);
 		}
 	}
 
@@ -70,12 +73,12 @@
 	}
 
 	.legend-dataset-label {
-		fill: var(--fr-tooltip-label);
+		fill: var(--charts-legend-label);
 		font-weight: 600;
 	}
 
 	.legend-dataset-value {
-		fill: var(--fr-tooltip-value);
+		fill: var(--charts-legend-value);
 	}
 }
 
@@ -85,7 +88,7 @@
 	padding: 10px;
 	font-size: 12px;
 	text-align: center;
-	background: var(--fr-tooltip-bg);
+	background: var(--charts-tooltip-bg);
 	box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1),
 		0px 2px 6px rgba(17, 43, 66, 0.08),
 		0px 40px 30px -30px rgba(17, 43, 66, 0.1);
@@ -113,7 +116,7 @@
 		height: 12px;
 		width: 12px;
 		border-radius: 2px;
-		background: var(--fr-tooltip-bg);
+		background: var(--charts-tooltip-bg);
 		transform: rotate(45deg);
 		margin-top: -7px;
 		margin-left: -6px;
@@ -128,11 +131,15 @@
 			display: block;
 			padding: 16px;
 			margin: 0;
-			color: var(--fr-tooltip-title);
+			color: var(--charts-tooltip-title);
 			font-weight: 600;
 			line-height: 1;
 			pointer-events: none;
 			text-transform: uppercase;
+
+			strong {
+				color: var(--charts-tooltip-value);
+			}
 		}
 
 		ul {
@@ -170,11 +177,11 @@
 				max-width: 150px;
 				white-space: normal;
 
-				color: var(--fr-tooltip-label);
+				color: var(--charts-tooltip-label);
 			}
 
 			.tooltip-value {
-				color: var(--fr-tooltip-value);
+				color: var(--charts-tooltip-value);
 			}
 		}
 	}