Refactor color values to json file

client/src/colors.json

@@ -0,0 +1,96 @@
+{
+  "transparent": "transparent",
+  "current": "currentColor",
+  "white": "#ffffff",
+  "black": "#0A0A0A",
+  "blue": {
+    "200": "#D2E0FA",
+    "300": "#B4CCFA",
+    "400": "#7FACFA",
+    "500": "#558AED",
+    "600": "#3D6DCC",
+    "700": "#2957A6",
+    "800": "#153D7A",
+    "900": "#00224D"
+  },
+  "sky": {
+    "200": "#CCECFF",
+    "300": "#A1DCFF",
+    "400": "#72CAFF",
+    "500": "#41B5FA",
+    "600": "#2198DF",
+    "700": "#007AC3",
+    "800": "#13609C",
+    "900": "#0D4169"
+  },
+  "green": {
+    "200": "#C4F5D9",
+    "300": "#A4EBC2",
+    "400": "#78DEA3",
+    "500": "#54CE8B",
+    "600": "#5BB782",
+    "700": "#419B73",
+    "800": "#3E8261",
+    "900": "#2C5C49"
+  },
+  "red": {
+    "200": "#F5DCD7",
+    "300": "#F2C1B8",
+    "400": "#F09D8D",
+    "500": "#EF7D68",
+    "600": "#DD6751",
+    "700": "#C65540",
+    "800": "#A14737",
+    "900": "#803729"
+  },
+  "orange": {
+    "200": "#FFDECC",
+    "300": "#FFC3A1",
+    "400": "#FFA776",
+    "500": "#FE955A",
+    "600": "#E68B4E",
+    "700": "#CC7B3D",
+    "800": "#A66635",
+    "900": "#7D4E2A"
+  },
+  "yellow": {
+    "200": "#FAEBC8",
+    "300": "#FADD98",
+    "400": "#FAC852",
+    "500": "#FBBA20",
+    "600": "#E3A81D",
+    "700": "#C7912C",
+    "800": "#AB7B22",
+    "900": "#876422"
+  },
+  "stone": {
+    "200": "#F2F1EB",
+    "300": "#E5E3DA",
+    "400": "#CBC9BE",
+    "500": "#B8B6AC",
+    "600": "#ABA99F",
+    "700": "#959388",
+    "800": "#7B7A71",
+    "900": "#616059"
+  },
+  "gray": {
+    "200": "#EDF2F6",
+    "300": "#E0E5EC",
+    "400": "#C5D2DA",
+    "500": "#B1C1CA",
+    "600": "#9EADB5",
+    "700": "#87949D",
+    "800": "#6F787E",
+    "900": "#585F63"
+  },
+  "slate": {
+    "200": "#E6F0FA",
+    "300": "#D7E6F5",
+    "400": "#C8DDF0",
+    "500": "#AFC8DF",
+    "600": "#97B3CD",
+    "700": "#7D95AC",
+    "800": "#62788C",
+    "900": "#4D5E6E"
+  }
+}

client/src/components/circle/CircleDiagram.vue

@@ -5,6 +5,8 @@ import * as _ from 'lodash'
 import {useCircleStore} from '@/stores/circle';
 import * as log from 'loglevel';
 
+import colors from "@/colors.json";
+
 const circleStore = useCircleStore();
 
 function someFinished(learningSequence) {
@@ -22,7 +24,7 @@ function allFinished(learningSequence) {
 }
 
 onMounted(async () => {
-  log.info('CircleDiagram mounted');
+  log.debug('CircleDiagram mounted');
   render();
 });
 
@@ -55,17 +57,6 @@ const pieData = computed(() => {
   return {}
 })
 
-
-const blue900 = '#00224D',
-  blue700 = '#1A5197',
-  gray100 = '#EDF2F6',
-  gray300 = '#E0E5EC',
-  gray500 = '#B1C1CA',
-  sky400 = '#72CAFF',
-  sky500 = '#41B5FA',
-  green500 = '#54CE8B',
-  green400 = '#78DEA3'
-
 const width = 450
 const height = 450
 const radius = Math.min(width, height) / 2.4
@@ -89,29 +80,29 @@ function render() {
     .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
     .attr('transform', 'rotate(-90, 10, 0)')
     .attr('stroke-width', arrowStrokeWidth)
-    .attr('stroke', gray500)
+    .attr('stroke', colors.gray[500])
 
   const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
 
   function getColor(d) {
-    let color = gray300
+    let color = colors.gray[300];
     if (d.someFinished) {
-      color = sky500
+      color = colors.sky[500];
     }
     if (d.allFinished) {
-      color = green500
+      color = colors.green[500];
     }
     return color
   }
 
   function getHoverColor(d) {
-    let color = gray100
+    let color = colors.gray[200];
     if (d.someFinished) {
-      color = sky400
+      color = colors.sky[400];
     }
     if (d.allFinished) {
-      color = green400
+      color = colors.green[400];
     }
     return color
   }
@@ -131,7 +122,7 @@ function render() {
   const learningSequences = g.selectAll('.learningSegmentArc').data(pieData.value).enter().append('g')
     .attr('class', 'learningSegmentArc')
     .attr('role', 'button')
-    .attr('fill', gray300)
+    .attr('fill', colors.gray[300])
 
 
   learningSequences
@@ -172,7 +163,7 @@ function render() {
 
   const learningSequenceText = learningSequences
     .append('text')
-    .attr('fill', blue900)
+    .attr('fill', colors.blue[900])
     .style('font-size', 15)
     .text((d) => {
       return d.title
@@ -231,7 +222,7 @@ function render() {
   all_arows.last().remove()
 
   //Draw arrow paths
-  arrows.append('path').attr('fill', gray500).attr('d', arrow)
+  arrows.append('path').attr('fill', colors.gray[500]).attr('d', arrow)
   return svg
 }
 
@@ -243,7 +234,7 @@ function render() {
     <pre hidden>{{ pieData }}</pre>
     <pre hidden>{{ render() }}</pre>
     <svg class="circle-visualization h-full">
-      <circle v-if="!circleStore.circle" :cx="width / 2" :cy="height / 2" :r="radius" :color="gray300"/>
+      <circle v-if="!circleStore.circle" :cx="width / 2" :cy="height / 2" :r="radius" :color="colors.gray[300]"/>
       <circle v-if="!circleStore.circle" :cx="width / 2" :cy="height / 2" :r="radius / 2.5" color="white"/>
     </svg>
   </div>

client/src/components/circle/LearningPathDiagram.vue

@@ -1,6 +1,7 @@
 <script>
 import * as d3 from 'd3';
 import { useLearningPathStore } from '../../stores/learningPath';
+import colors from '@/colors.json';
 
 export default {
   props: {
@@ -85,35 +86,25 @@ export default {
   mounted() {
     const circleWidth = this.vertical ? 60 : 200
     const radius = (circleWidth * 0.8) / 2
-    const blue900 = '#00224D',
-      blue700 = '#1A5197',
-      gray100 = '#EDF2F6',
-      gray300 = '#E0E5EC',
-      gray500 = '#B1C1CA',
-      sky400 = '#72CAFF',
-      sky500 = '#41B5FA',
-      green500 = '#54CE8B',
-      green400 = '#78DEA3'
-
 
     function getColor(d) {
-      let color = gray300
+      let color = colors.gray[300]
       if (d.someFinished) {
-        color = sky500
+        color = colors.sky[500]
       }
       if (d.allFinished) {
-        color = green500
+        color = colors.green[500]
       }
       return color
     }
 
     function getHoverColor(d) {
-      let color = gray100
+      let color = colors.gray[200]
       if (d.someFinished) {
-        color = sky400
+        color = colors.sky[400]
       }
       if (d.allFinished) {
-        color = green400
+        color = colors.green[400]
       }
       return color
     }
@@ -175,7 +166,7 @@ export default {
       .enter()
       .append('g')
       .attr('class', 'learningSegmentArc')
-      .attr('fill', gray300)
+      .attr('fill', colors.gray[300])
 
     arcs
       .transition()
@@ -190,7 +181,7 @@ export default {
 
     const circlesText = circle_groups
       .append('text')
-      .attr('fill', blue900)
+      .attr('fill', colors.blue[900])
       .style('font-size', 19)
       .text((d) => d.title)
 
@@ -250,7 +241,7 @@ export default {
 
     const topicTitles = topicGroups
       .append('text')
-      .attr('fill', blue900)
+      .attr('fill', colors.blue[900])
       .style('font-size', 16)
       .text((d) => d.title)
 

client/src/main.ts

@@ -1,5 +1,6 @@
-import {createApp} from 'vue'
+import { createApp } from 'vue'
-import {createPinia} from 'pinia'
+import { createPinia } from 'pinia'
+import * as log from 'loglevel'
 
 // import {setupI18n} from './i18n'
 import App from './App.vue'
@@ -7,6 +8,13 @@ import router from './router'
 
 import '../tailwind.css'
 
+if (window.location.href.indexOf('localhost') >= 0) {
+  log.setLevel('trace')
+} else {
+  log.setLevel('warn')
+}
+
+
 // const i18n = setupI18n()
 const app = createApp(App)
 

client/tailwind.config.js

@@ -1,4 +1,4 @@
-const colors = require('tailwindcss/colors')
+const colors = require('./src/colors.json');
 
 module.exports = {
   content: [
@@ -18,38 +18,7 @@ module.exports = {
       backgroundImage: {
       }
     },
-    colors: {
+    colors: colors,
-      transparent: 'transparent',
-      current: 'currentColor',
-      'white': '#ffffff',
-      'black': '#0A0A0A',
-      'blue': {
-        700: '#2957A6',
-        900: '#00224D',
-      },
-      'sky': {
-        400: '#72CAFF',
-        500: '#41B5FA',
-      },
-      'orange': {
-        500: '#FE955A',
-        600: '#E68B4E',
-      },
-      'green': {
-        500: '#54CE8B',
-        600: '#5BB782',
-      },
-      'red': {
-        500: '#EF7D68',
-      },
-      'gray': {
-        200: '#EDF2F6',
-        300: '#E0E5EC',
-        500: '#B1C1CA',
-        700: '#6F787E',
-        900: '#585F63',
-      },
-    }
   },
   safelist: [{
     pattern: /bg-(blue|sky|orange|green|red)-(400|500|600|700)/,