From fdd5396019b192711f577fb0f6f77d9b0c9f6fd0 Mon Sep 17 00:00:00 2001
From: jsmolka <jsmolka@pm.me>
Date: Fri, 19 Jan 2024 12:08:00 +0100
Subject: [PATCH] use color variable for yellow and red

---
 src/components/chart/ChartHeartRate.vue |  2 +-
 src/styles/_base.scss                   |  2 ++
 src/utils/notify.js                     |  6 +++---
 src/views/activities/get/Index.vue      | 12 ++++++++----
 tailwind.config.js                      |  2 ++
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/chart/ChartHeartRate.vue b/src/components/chart/ChartHeartRate.vue
index a31a5d5..b0503c9 100644
--- a/src/components/chart/ChartHeartRate.vue
+++ b/src/components/chart/ChartHeartRate.vue
@@ -1,5 +1,5 @@
 <template>
-  <g class="stroke-2 stroke-[#bf616a]">
+  <g class="stroke-2 stroke-red">
     <Polyline v-for="points in polylines" :points="points" />
   </g>
 </template>
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 70321a5..3dc9c73 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -28,6 +28,8 @@
   --brand-1: #{hsv(206, 46%, 80%)};
   --brand-2: #{hsv(206, 46%, 75%)};
   --brand-3: #{hsv(206, 46%, 70%)};
+  --yellow: #ebcb8b;
+  --red: #bf616a;
 }
 
 html,
diff --git a/src/utils/notify.js b/src/utils/notify.js
index b27eed1..0041021 100644
--- a/src/utils/notify.js
+++ b/src/utils/notify.js
@@ -16,17 +16,17 @@ class Notify extends Notyf {
       types: [
         {
           type: 'info',
-          background: '#5e81ac',
+          background: 'var(--brand-3)',
           icon: false,
         },
         {
           type: 'warn',
-          background: '#ebcb8b',
+          background: 'var(--yellow)',
           icon: false,
         },
         {
           type: 'error',
-          background: '#bf616a',
+          background: 'var(--red)',
           icon: false,
         },
       ],
diff --git a/src/views/activities/get/Index.vue b/src/views/activities/get/Index.vue
index fc97468..e9c223a 100644
--- a/src/views/activities/get/Index.vue
+++ b/src/views/activities/get/Index.vue
@@ -79,6 +79,10 @@ const exportTcx = () => {
   );
 };
 
+const color = (name) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(name);
+};
+
 const exportGraphic = () => {
   const w = 1000;
   const h = 0.4 * w;
@@ -91,11 +95,11 @@ const exportGraphic = () => {
 
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = '#242933';
+  ctx.fillStyle = color('--shade-8');
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   ctx.lineWidth = 2;
-  ctx.strokeStyle = '#2d3340';
+  ctx.strokeStyle = color('--shade-7');
   for (const ry of [25, 50, 75]) {
     ctx.beginPath();
     ctx.moveTo(x(0), y(ry));
@@ -104,8 +108,8 @@ const exportGraphic = () => {
   }
 
   const data = [
-    { polylines: activity.polylinesHeartRate, style: '#bf616a' },
-    { polylines: activity.polylinesPower, style: '#6286b3' },
+    { polylines: activity.polylinesHeartRate, style: color('--red') },
+    { polylines: activity.polylinesPower, style: color('--brand-3') },
   ];
   for (const { polylines, style } of data) {
     ctx.lineWidth = 3;
diff --git a/tailwind.config.js b/tailwind.config.js
index de28751..8ddf029 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,8 @@ export default {
         2: 'var(--brand-2)',
         3: 'var(--brand-3)',
       },
+      yellow: 'var(--yellow)',
+      red: 'var(--red)',
       black: colors.black,
       white: colors.white,
       transparent: colors.transparent,