use color variable for yellow and red

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>

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,

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,
         },
       ],

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;

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,