Refactor color values to json file
This commit is contained in:
Daniel Egger
parent
13f1154a94
commit
8b79201ba6
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {createApp} from 'vue'
|
||||
import {createPinia} from 'pinia'
|
||||
import { createApp } from 'vue'
|
||||
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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
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',
|
||||
},
|
||||
}
|
||||
colors: colors,
|
||||
},
|
||||
safelist: [{
|
||||
pattern: /bg-(blue|sky|orange|green|red)-(400|500|600|700)/,
|
||||
|
|
|
|||
Loading…
Reference in New Issue