From 68d35da856512d1833a8ab0fdaf2d85dbda9ecc6 Mon Sep 17 00:00:00 2001 From: Harsh Rao Date: Sat, 8 Feb 2025 15:20:47 +0530 Subject: [PATCH 1/2] refactor --- .../src/themer/{themes.js => themes.ts} | 186 +++++++++--------- 1 file changed, 94 insertions(+), 92 deletions(-) rename src/simulator/src/themer/{themes.js => themes.ts} (63%) diff --git a/src/simulator/src/themer/themes.js b/src/simulator/src/themer/themes.ts similarity index 63% rename from src/simulator/src/themer/themes.js rename to src/simulator/src/themer/themes.ts index d4f8caa1..290bbd29 100644 --- a/src/simulator/src/themer/themes.js +++ b/src/simulator/src/themer/themes.ts @@ -1,4 +1,6 @@ -export default { +import { Themes } from './themer.types' + +const themes: Themes = { 'Default Theme': { '--text-navbar--alt': '#000', '--br-secondary': '#7d7d7d', @@ -57,32 +59,32 @@ export default { '--text-navbar--alt': '#fff', '--br-secondary': '#665627', '--cus-radio_label': '#0F111A', - '--primary': '#0F111A', //header bg, panels bg - '--text-lite': '#FFF', //normal state text - '--text-dark': 'white', //text state on hover, on drop down menu , context menu + '--primary': '#0F111A', + '--text-lite': '#FFF', + '--text-dark': 'white', '--text-panel': 'white', '--bg-navbar': '#0F111A', - '--br-circuit': '#0F111A', //panel border, tabbar circuit border - '--br-primary': '#665627', //panel border, tabbar circuit border + '--br-circuit': '#0F111A', + '--br-primary': '#665627', '--br-circuit-cur': '#cccccc', '--bg-circuit': '#bdc2ca', - '--bg-primary-moz': '#0f111ae6', //dialog bg - '--bg-primary-chr': '#0f111ab3', //dialog bg - '--bg-tabs': '#727d8d', //tabs bar primary bg, - '--bg-icons': '#4d647a', //ce icon bg - '--bg-text': '#727d8d', //drop down, content menu, text bg on hover - '--bg-secondary': '#536c84', //border color input button, - '--canvas-fill': '#1B2C33', //canvas bg - '--canvas-stroke': '#6A7980', //canvas stroke + '--bg-primary-moz': '#0f111ae6', + '--bg-primary-chr': '#0f111ab3', + '--bg-tabs': '#727d8d', + '--bg-icons': '#4d647a', + '--bg-text': '#727d8d', + '--bg-secondary': '#536c84', + '--canvas-fill': '#1B2C33', + '--canvas-stroke': '#6A7980', '--context-text': 'white', '--bg-toggle-btn-primary': '#48a69d', '--primary-btn-hov': '#3f9189', '--btn-danger': '#c33c6c', '--btn-danger-darken': '#b03662', - '--qp-br-tl': '#282d46', //more ligthen than qp box shadow 1 + '--qp-br-tl': '#282d46', '--qp-br-rd': '#1d2132', - '--qp-box-shadow-1': '#1d2132', //lil lighten base - '--qp-box-shadow-2': '#0a0b11', //lil darken base + '--qp-box-shadow-1': '#1d2132', + '--qp-box-shadow-2': '#0a0b11', '--cus-btn-hov--bg': '#48a69d', '--cus-btn-hov-text': '#fff', '--node': '#285963', @@ -110,42 +112,41 @@ export default { '--text-navbar--alt': '#000', '--br-secondary': '#6B6B6B', '--cus-radio_label': '#6B6B6B', - '--primary': '#EAEAEB', //header bg - '--text-dark': '#6B6B6B', //normal state text - '--text-lite': 'white', //text state on hover, on drop down menu , context menu + '--primary': '#EAEAEB', + '--text-dark': '#6B6B6B', + '--text-lite': 'white', '--text-panel': '#6B6B6B', '--bg-navbar': '#6b6b6b', - '--qp-br-tl': '#969696', //more ligthen than qp box shadow 1 + '--qp-br-tl': '#969696', '--qp-br-rd': '#545454', - '--qp-box-shadow-1': '#747474', //lil lighten base .. top left shadow - '--qp-box-shadow-2': '#5f5f5f', //lil darken base //down right shadow - // "--bg-tabs": "#EAEAEB", //tabs bar primary bg, - '--bg-tabs': '#A4A4A4', //tabs bar primary bg, + '--qp-box-shadow-1': '#747474', + '--qp-box-shadow-2': '#5f5f5f', + '--bg-tabs': '#A4A4A4', '--br-circuit-cur': '#42B983', '--bg-circuit': '#D7D7D7', '--br-circuit': '#42B983', - '--br-primary': '#42B983', //panel border, tabbar circuit border + '--br-primary': '#42B983', '--context-text-hov': '#6B6B6B', '--context-text': 'white', - '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', //dialog bg, navbar dropwdown //.9 opacity of nav - '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', //dialog bg navbar dropwdown // .7 opacity of nav - '--bg-icons': '#DDDDDD', //ce icon bg - '--bg-text': '#ddd', //drop down, content menu, text bg on hover - '--bg-secondary': '#6B6B6B', //border color input button, + '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', + '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', + '--bg-icons': '#DDDDDD', + '--bg-text': '#ddd', + '--bg-secondary': '#6B6B6B', '--bg-toggle-btn-primary': '#42B983', '--primary-btn-hov': '#66C89C', '--btn-danger': '#BF2424', '--btn-danger-darken': '#BF414C', '--cus-btn-hov--bg': '#42B983', '--cus-btn-hov-text': '#fff', - '--canvas-fill': 'white', //canvas bg - '--canvas-stroke': '#BABABA', //canvas stroke + '--canvas-fill': 'white', + '--canvas-stroke': '#BABABA', '--node': '#42B983', '--stroke': '#6B6B6B', '--fill': '#EAEAEB', - '--hover-and-sel': '#FFE99B', //yellow - '--wire-draw': '#6B6B6B', //black - '--wire-cnt': '#42B983', // + '--hover-and-sel': '#FFE99B', + '--wire-draw': '#6B6B6B', + '--wire-cnt': '#42B983', '--wire-pow': '#52E539', '--wire-sel': '#0FB2F2', '--wire-lose': '#F10530', @@ -165,42 +166,41 @@ export default { '--text-navbar--alt': '#000', '--br-secondary': '#6B6B6B', '--cus-radio_label': '#6B6B6B', - '--primary': '#EAEAEB', //header bg - '--text-dark': '#6B6B6B', //normal state text - '--text-lite': 'white', //text state on hover, on drop down menu , context menu + '--primary': '#EAEAEB', + '--text-dark': '#6B6B6B', + '--text-lite': 'white', '--text-panel': '#656565', '--bg-navbar': '#6b6b6b', - '--qp-br-tl': '#969696', //more ligthen than qp box shadow 1 + '--qp-br-tl': '#969696', '--qp-br-rd': '#545454', - '--qp-box-shadow-1': '#747474', //lil lighten base .. top left shadow - '--qp-box-shadow-2': '#5f5f5f', //lil darken base //down right shadow - // "--bg-tabs": "#EAEAEB", //tabs bar primary bg, - '--bg-tabs': '#A4A4A4', //tabs bar primary bg, + '--qp-box-shadow-1': '#747474', + '--qp-box-shadow-2': '#5f5f5f', + '--bg-tabs': '#A4A4A4', '--br-circuit-cur': '#6b6b6b', '--bg-circuit': '#D7D7D7', '--br-circuit': '#6b6b6b', - '--br-primary': '#6B6B6B', //panel border, tabbar circuit border + '--br-primary': '#6B6B6B', '--context-text-hov': '#6B6B6B', '--context-text': 'white', - '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', //dialog bg, navbar dropwdown //.9 opacity of nav - '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', //dialog bg navbar dropwdown // .7 opacity of nav - '--bg-icons': '#DDDDDD', //ce icon bg - '--bg-text': '#ddd', //drop down, content menu, text bg on hover - '--bg-secondary': '#6B6B6B', //border color input button, + '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', + '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', + '--bg-icons': '#DDDDDD', + '--bg-text': '#ddd', + '--bg-secondary': '#6B6B6B', '--bg-toggle-btn-primary': '#3ac8a4', '--primary-btn-hov': '#71D7BD', '--btn-danger': '#fc8771', '--btn-danger-darken': '#FDB2A4', '--cus-btn-hov--bg': '#3ac8a4', '--cus-btn-hov-text': '#fff', - '--canvas-fill': 'white', //canvas bg - '--canvas-stroke': '#BABABA', //canvas stroke + '--canvas-fill': 'white', + '--canvas-stroke': '#BABABA', '--node': '#42B983', '--stroke': '#6B6B6B', '--fill': '#EAEAEB', - '--hover-and-sel': '#FFE99B', //yellow - '--wire-draw': '#6B6B6B', //black - '--wire-cnt': '#42B983', // + '--hover-and-sel': '#FFE99B', + '--wire-draw': '#6B6B6B', + '--wire-cnt': '#42B983', '--wire-pow': '#52E539', '--wire-sel': '#0FB2F2', '--wire-lose': '#F10530', @@ -220,42 +220,42 @@ export default { '--text-navbar--alt': '#000', '--br-secondary': '#F38518', '--cus-radio_label': 'black', - '--primary': 'black', //header bg - '--text-dark': 'black', //normal state text - '--text-lite': 'white', //text state on hover, on drop down menu , context menu + '--primary': 'black', + '--text-dark': 'black', + '--text-lite': 'white', '--text-panel': 'white', '--bg-navbar': 'black', - '--qp-br-tl': '#F38518', //more ligthen than qp box shadow 1 + '--qp-br-tl': '#F38518', '--qp-br-rd': '#F38518', - '--qp-box-shadow-1': '#0D0D0D', //lil lighten base .. top left shadow - '--qp-box-shadow-2': '#0D0D0D', //lil darken base //down right shadow - '--bg-tabs': '#616161', //tabs bar primary bg, + '--qp-box-shadow-1': '#0D0D0D', + '--qp-box-shadow-2': '#0D0D0D', + '--bg-tabs': '#616161', '--text-circuit': 'black', '--br-circuit-cur': '#F38518', '--bg-circuit': '#B6B6B6', '--br-circuit': '#F38518', - '--br-primary': '#F38518', //panel border, tabbar circuit border + '--br-primary': '#F38518', '--context-text-hov': 'black', '--context-text': 'white', - '--bg-primary-moz': 'rgba(0, 0, 0, 0.904)', //dialog bg, navbar dropwdown //.9 opacity of nav - '--bg-primary-chr': 'rgba(0, 0, 0, 0.704)', //dialog bg navbar dropwdown // .7 opacity of nav - '--bg-icons': '#262626', //ce icon bg - '--bg-text': '#ddd', //drop down, content menu, text bg on hover - '--bg-secondary': '#6B6B6B', //border color input button, + '--bg-primary-moz': 'rgba(0, 0, 0, 0.904)', + '--bg-primary-chr': 'rgba(0, 0, 0, 0.704)', + '--bg-icons': '#262626', + '--bg-text': '#ddd', + '--bg-secondary': '#6B6B6B', '--bg-toggle-btn-primary': '#009599', '--primary-btn-hov': '#00b1b6', '--btn-danger': '#E45605', '--btn-danger-darken': '#fa792f', '--cus-btn-hov--bg': '#009599', '--cus-btn-hov-text': '#fff', - '--canvas-fill': 'black', //canvas bg - '--canvas-stroke': '#9ad5e9', //canvas stroke + '--canvas-fill': 'black', + '--canvas-stroke': '#9ad5e9', '--node': '#26a841', '--stroke': '#626262', '--fill': '#d4d4d4', - '--hover-and-sel': '#ffdf6c', //yellow - '--wire-draw': '#909090', //black - '--wire-cnt': '#3bb15b', // + '--hover-and-sel': '#ffdf6c', + '--wire-draw': '#909090', + '--wire-cnt': '#3bb15b', '--wire-pow': '#3ac53c', '--wire-sel': '#049ffb', '--wire-lose': '#f42f0b', @@ -275,42 +275,42 @@ export default { '--text-navbar--alt': '#000', '--br-secondary': '#e2dad1', '--cus-radio_label': '#2e2b21', - '--primary': '#2e2b21', //header bg - '--text-dark': 'black', //normal state text - '--text-lite': 'white', //text state on hover, on drop down menu , context menu + '--primary': '#2e2b21', + '--text-dark': 'black', + '--text-lite': 'white', '--text-panel': 'white', '--bg-navbar': '#2e2b21', - '--qp-br-tl': '#716950', //more ligthen than qp box shadow 1 + '--qp-br-tl': '#716950', '--qp-br-rd': '#6c654d', - '--qp-box-shadow-1': '#4f4a38', //lil lighten base .. top left shadow - '--qp-box-shadow-2': '#302d23', //lil darken base //down right shadow - '--bg-tabs': '#9a9a9a', //tabs bar primary bg, + '--qp-box-shadow-1': '#4f4a38', + '--qp-box-shadow-2': '#302d23', + '--bg-tabs': '#9a9a9a', '--text-circuit': 'black', '--br-circuit-cur': '#e2dad1', '--bg-circuit': '#d6d6d6', '--br-circuit': '#e2dad1', - '--br-primary': '#e2dad1', //panel border, tabbar circuit border + '--br-primary': '#e2dad1', '--context-text-hov': 'black', '--context-text': 'white', - '--bg-primary-moz': 'rgba(46, 43, 33, 1)', //dialog bg, navbar dropwdown //.9 opacity of nav - '--bg-primary-chr': 'rgba(46, 43, 33, 1)', //dialog bg navbar dropwdown // .7 opacity of nav - '--bg-icons': '#9c7762', //ce icon bg - '--bg-text': '#ddd', //drop down, content menu, text bg on hover - '--bg-secondary': '#6B6B6B', //border color input button, + '--bg-primary-moz': 'rgba(46, 43, 33, 1)', + '--bg-primary-chr': 'rgba(46, 43, 33, 1)', + '--bg-icons': '#9c7762', + '--bg-text': '#ddd', + '--bg-secondary': '#6B6B6B', '--bg-toggle-btn-primary': '#bfaac1', '--primary-btn-hov': '#ccbbcd', '--btn-danger': '#b66e43', '--btn-danger-darken': '#ba7144', '--cus-btn-hov--bg': '#b66e43', '--cus-btn-hov-text': '#fff', - '--canvas-fill': '#fff', //canvas bg - '--canvas-stroke': '#8d88ad', //canvas stroke + '--canvas-fill': '#fff', + '--canvas-stroke': '#8d88ad', '--node': '#c59434', '--stroke': '#342a1f', '--fill': '#e0dcd3', - '--hover-and-sel': '#f4d4d4', //yellow - '--wire-draw': '#4c4c4c', //black - '--wire-cnt': '#908eb9', // + '--hover-and-sel': '#f4d4d4', + '--wire-draw': '#4c4c4c', + '--wire-cnt': '#908eb9', '--wire-pow': '#b3b1cf', '--wire-sel': '#a7b8f8', '--wire-lose': '#f42f0b', @@ -326,7 +326,7 @@ export default { '--disable': '#956c6a', '--table-head-dark': '#2e2b21', }, - 'Custom Theme': JSON.parse(localStorage.getItem('Custom Theme')) || { + 'Custom Theme': JSON.parse(localStorage.getItem('Custom Theme') || '{}') || { '--text-navbar--alt': '#000', '--br-secondary': '#7d7d7d', '--br-circuit-cur': '#ffffff', @@ -380,3 +380,5 @@ export default { '--output-rect': '#0000ff', }, } + +export default themes; From 4a2a2c51298952bcd91e3c7c238661da5d13a095 Mon Sep 17 00:00:00 2001 From: Harsh Rao Date: Sat, 8 Feb 2025 15:54:27 +0530 Subject: [PATCH 2/2] resolve --- src/simulator/src/themer/themes.ts | 178 +++++++++++++++-------------- 1 file changed, 90 insertions(+), 88 deletions(-) diff --git a/src/simulator/src/themer/themes.ts b/src/simulator/src/themer/themes.ts index 290bbd29..b0dbe421 100644 --- a/src/simulator/src/themer/themes.ts +++ b/src/simulator/src/themer/themes.ts @@ -59,32 +59,32 @@ const themes: Themes = { '--text-navbar--alt': '#fff', '--br-secondary': '#665627', '--cus-radio_label': '#0F111A', - '--primary': '#0F111A', - '--text-lite': '#FFF', - '--text-dark': 'white', + '--primary': '#0F111A', //header bg, panels bg + '--text-lite': '#FFF', //normal state text + '--text-dark': 'white', //text state on hover, on drop down menu , context menu '--text-panel': 'white', '--bg-navbar': '#0F111A', - '--br-circuit': '#0F111A', - '--br-primary': '#665627', + '--br-circuit': '#0F111A', //panel border, tabbar circuit border + '--br-primary': '#665627', //panel border, tabbar circuit border '--br-circuit-cur': '#cccccc', '--bg-circuit': '#bdc2ca', - '--bg-primary-moz': '#0f111ae6', - '--bg-primary-chr': '#0f111ab3', - '--bg-tabs': '#727d8d', - '--bg-icons': '#4d647a', - '--bg-text': '#727d8d', - '--bg-secondary': '#536c84', - '--canvas-fill': '#1B2C33', - '--canvas-stroke': '#6A7980', + '--bg-primary-moz': '#0f111ae6', //dialog bg + '--bg-primary-chr': '#0f111ab3', //dialog bg + '--bg-tabs': '#727d8d', //tabs bar primary bg, + '--bg-icons': '#4d647a', //ce icon bg + '--bg-text': '#727d8d', //drop down, content menu, text bg on hover + '--bg-secondary': '#536c84', //border color input button, + '--canvas-fill': '#1B2C33', //canvas bg + '--canvas-stroke': '#6A7980', //canvas stroke '--context-text': 'white', '--bg-toggle-btn-primary': '#48a69d', '--primary-btn-hov': '#3f9189', '--btn-danger': '#c33c6c', '--btn-danger-darken': '#b03662', - '--qp-br-tl': '#282d46', + '--qp-br-tl': '#282d46', //more ligthen than qp box shadow 1 '--qp-br-rd': '#1d2132', - '--qp-box-shadow-1': '#1d2132', - '--qp-box-shadow-2': '#0a0b11', + '--qp-box-shadow-1': '#1d2132', //lil lighten base + '--qp-box-shadow-2': '#0a0b11', //lil darken base '--cus-btn-hov--bg': '#48a69d', '--cus-btn-hov-text': '#fff', '--node': '#285963', @@ -112,41 +112,42 @@ const themes: Themes = { '--text-navbar--alt': '#000', '--br-secondary': '#6B6B6B', '--cus-radio_label': '#6B6B6B', - '--primary': '#EAEAEB', - '--text-dark': '#6B6B6B', - '--text-lite': 'white', + '--primary': '#EAEAEB', //header bg + '--text-dark': '#6B6B6B', //normal state text + '--text-lite': 'white', //text state on hover, on drop down menu , context menu '--text-panel': '#6B6B6B', '--bg-navbar': '#6b6b6b', - '--qp-br-tl': '#969696', + '--qp-br-tl': '#969696', //more ligthen than qp box shadow 1 '--qp-br-rd': '#545454', - '--qp-box-shadow-1': '#747474', - '--qp-box-shadow-2': '#5f5f5f', - '--bg-tabs': '#A4A4A4', + '--qp-box-shadow-1': '#747474', //lil lighten base .. top left shadow + '--qp-box-shadow-2': '#5f5f5f', //lil darken base //down right shadow + // "--bg-tabs": "#EAEAEB", //tabs bar primary bg, + '--bg-tabs': '#A4A4A4', //tabs bar primary bg, '--br-circuit-cur': '#42B983', '--bg-circuit': '#D7D7D7', '--br-circuit': '#42B983', - '--br-primary': '#42B983', + '--br-primary': '#42B983', //panel border, tabbar circuit border '--context-text-hov': '#6B6B6B', '--context-text': 'white', - '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', - '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', - '--bg-icons': '#DDDDDD', - '--bg-text': '#ddd', - '--bg-secondary': '#6B6B6B', + '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', //dialog bg, navbar dropwdown //.9 opacity of nav + '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', //dialog bg navbar dropwdown // .7 opacity of nav + '--bg-icons': '#DDDDDD', //ce icon bg + '--bg-text': '#ddd', //drop down, content menu, text bg on hover + '--bg-secondary': '#6B6B6B', //border color input button, '--bg-toggle-btn-primary': '#42B983', '--primary-btn-hov': '#66C89C', '--btn-danger': '#BF2424', '--btn-danger-darken': '#BF414C', '--cus-btn-hov--bg': '#42B983', '--cus-btn-hov-text': '#fff', - '--canvas-fill': 'white', - '--canvas-stroke': '#BABABA', + '--canvas-fill': 'white', //canvas bg + '--canvas-stroke': '#BABABA', //canvas stroke '--node': '#42B983', '--stroke': '#6B6B6B', '--fill': '#EAEAEB', - '--hover-and-sel': '#FFE99B', - '--wire-draw': '#6B6B6B', - '--wire-cnt': '#42B983', + '--hover-and-sel': '#FFE99B', //yellow + '--wire-draw': '#6B6B6B', //black + '--wire-cnt': '#42B983', // '--wire-pow': '#52E539', '--wire-sel': '#0FB2F2', '--wire-lose': '#F10530', @@ -166,41 +167,42 @@ const themes: Themes = { '--text-navbar--alt': '#000', '--br-secondary': '#6B6B6B', '--cus-radio_label': '#6B6B6B', - '--primary': '#EAEAEB', - '--text-dark': '#6B6B6B', - '--text-lite': 'white', + '--primary': '#EAEAEB', //header bg + '--text-dark': '#6B6B6B', //normal state text + '--text-lite': 'white', //text state on hover, on drop down menu , context menu '--text-panel': '#656565', '--bg-navbar': '#6b6b6b', - '--qp-br-tl': '#969696', + '--qp-br-tl': '#969696', //more ligthen than qp box shadow 1 '--qp-br-rd': '#545454', - '--qp-box-shadow-1': '#747474', - '--qp-box-shadow-2': '#5f5f5f', - '--bg-tabs': '#A4A4A4', + '--qp-box-shadow-1': '#747474', //lil lighten base .. top left shadow + '--qp-box-shadow-2': '#5f5f5f', //lil darken base //down right shadow + // "--bg-tabs": "#EAEAEB", //tabs bar primary bg, + '--bg-tabs': '#A4A4A4', //tabs bar primary bg, '--br-circuit-cur': '#6b6b6b', '--bg-circuit': '#D7D7D7', '--br-circuit': '#6b6b6b', - '--br-primary': '#6B6B6B', + '--br-primary': '#6B6B6B', //panel border, tabbar circuit border '--context-text-hov': '#6B6B6B', '--context-text': 'white', - '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', - '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', - '--bg-icons': '#DDDDDD', - '--bg-text': '#ddd', - '--bg-secondary': '#6B6B6B', + '--bg-primary-moz': 'rgba(107, 107, 107, 0.904)', //dialog bg, navbar dropwdown //.9 opacity of nav + '--bg-primary-chr': 'rgba(107, 107, 107, 0.704)', //dialog bg navbar dropwdown // .7 opacity of nav + '--bg-icons': '#DDDDDD', //ce icon bg + '--bg-text': '#ddd', //drop down, content menu, text bg on hover + '--bg-secondary': '#6B6B6B', //border color input button, '--bg-toggle-btn-primary': '#3ac8a4', '--primary-btn-hov': '#71D7BD', '--btn-danger': '#fc8771', '--btn-danger-darken': '#FDB2A4', '--cus-btn-hov--bg': '#3ac8a4', '--cus-btn-hov-text': '#fff', - '--canvas-fill': 'white', - '--canvas-stroke': '#BABABA', + '--canvas-fill': 'white', //canvas bg + '--canvas-stroke': '#BABABA', //canvas stroke '--node': '#42B983', '--stroke': '#6B6B6B', '--fill': '#EAEAEB', - '--hover-and-sel': '#FFE99B', - '--wire-draw': '#6B6B6B', - '--wire-cnt': '#42B983', + '--hover-and-sel': '#FFE99B', //yellow + '--wire-draw': '#6B6B6B', //black + '--wire-cnt': '#42B983', // '--wire-pow': '#52E539', '--wire-sel': '#0FB2F2', '--wire-lose': '#F10530', @@ -220,42 +222,42 @@ const themes: Themes = { '--text-navbar--alt': '#000', '--br-secondary': '#F38518', '--cus-radio_label': 'black', - '--primary': 'black', - '--text-dark': 'black', - '--text-lite': 'white', + '--primary': 'black', //header bg + '--text-dark': 'black', //normal state text + '--text-lite': 'white', //text state on hover, on drop down menu , context menu '--text-panel': 'white', '--bg-navbar': 'black', - '--qp-br-tl': '#F38518', + '--qp-br-tl': '#F38518', //more ligthen than qp box shadow 1 '--qp-br-rd': '#F38518', - '--qp-box-shadow-1': '#0D0D0D', - '--qp-box-shadow-2': '#0D0D0D', - '--bg-tabs': '#616161', + '--qp-box-shadow-1': '#0D0D0D', //lil lighten base .. top left shadow + '--qp-box-shadow-2': '#0D0D0D', //lil darken base //down right shadow + '--bg-tabs': '#616161', //tabs bar primary bg, '--text-circuit': 'black', '--br-circuit-cur': '#F38518', '--bg-circuit': '#B6B6B6', '--br-circuit': '#F38518', - '--br-primary': '#F38518', + '--br-primary': '#F38518', //panel border, tabbar circuit border '--context-text-hov': 'black', '--context-text': 'white', - '--bg-primary-moz': 'rgba(0, 0, 0, 0.904)', - '--bg-primary-chr': 'rgba(0, 0, 0, 0.704)', - '--bg-icons': '#262626', - '--bg-text': '#ddd', - '--bg-secondary': '#6B6B6B', + '--bg-primary-moz': 'rgba(0, 0, 0, 0.904)', //dialog bg, navbar dropwdown //.9 opacity of nav + '--bg-primary-chr': 'rgba(0, 0, 0, 0.704)', //dialog bg navbar dropwdown // .7 opacity of nav + '--bg-icons': '#262626', //ce icon bg + '--bg-text': '#ddd', //drop down, content menu, text bg on hover + '--bg-secondary': '#6B6B6B', //border color input button, '--bg-toggle-btn-primary': '#009599', '--primary-btn-hov': '#00b1b6', '--btn-danger': '#E45605', '--btn-danger-darken': '#fa792f', '--cus-btn-hov--bg': '#009599', '--cus-btn-hov-text': '#fff', - '--canvas-fill': 'black', - '--canvas-stroke': '#9ad5e9', + '--canvas-fill': 'black', //canvas bg + '--canvas-stroke': '#9ad5e9', //canvas stroke '--node': '#26a841', '--stroke': '#626262', '--fill': '#d4d4d4', - '--hover-and-sel': '#ffdf6c', - '--wire-draw': '#909090', - '--wire-cnt': '#3bb15b', + '--hover-and-sel': '#ffdf6c', //yellow + '--wire-draw': '#909090', //black + '--wire-cnt': '#3bb15b', // '--wire-pow': '#3ac53c', '--wire-sel': '#049ffb', '--wire-lose': '#f42f0b', @@ -275,42 +277,42 @@ const themes: Themes = { '--text-navbar--alt': '#000', '--br-secondary': '#e2dad1', '--cus-radio_label': '#2e2b21', - '--primary': '#2e2b21', - '--text-dark': 'black', - '--text-lite': 'white', + '--primary': '#2e2b21', //header bg + '--text-dark': 'black', //normal state text + '--text-lite': 'white', //text state on hover, on drop down menu , context menu '--text-panel': 'white', '--bg-navbar': '#2e2b21', - '--qp-br-tl': '#716950', + '--qp-br-tl': '#716950', //more ligthen than qp box shadow 1 '--qp-br-rd': '#6c654d', - '--qp-box-shadow-1': '#4f4a38', - '--qp-box-shadow-2': '#302d23', - '--bg-tabs': '#9a9a9a', + '--qp-box-shadow-1': '#4f4a38', //lil lighten base .. top left shadow + '--qp-box-shadow-2': '#302d23', //lil darken base //down right shadow + '--bg-tabs': '#9a9a9a', //tabs bar primary bg, '--text-circuit': 'black', '--br-circuit-cur': '#e2dad1', '--bg-circuit': '#d6d6d6', '--br-circuit': '#e2dad1', - '--br-primary': '#e2dad1', + '--br-primary': '#e2dad1', //panel border, tabbar circuit border '--context-text-hov': 'black', '--context-text': 'white', - '--bg-primary-moz': 'rgba(46, 43, 33, 1)', - '--bg-primary-chr': 'rgba(46, 43, 33, 1)', - '--bg-icons': '#9c7762', - '--bg-text': '#ddd', - '--bg-secondary': '#6B6B6B', + '--bg-primary-moz': 'rgba(46, 43, 33, 1)', //dialog bg, navbar dropwdown //.9 opacity of nav + '--bg-primary-chr': 'rgba(46, 43, 33, 1)', //dialog bg navbar dropwdown // .7 opacity of nav + '--bg-icons': '#9c7762', //ce icon bg + '--bg-text': '#ddd', //drop down, content menu, text bg on hover + '--bg-secondary': '#6B6B6B', //border color input button, '--bg-toggle-btn-primary': '#bfaac1', '--primary-btn-hov': '#ccbbcd', '--btn-danger': '#b66e43', '--btn-danger-darken': '#ba7144', '--cus-btn-hov--bg': '#b66e43', '--cus-btn-hov-text': '#fff', - '--canvas-fill': '#fff', - '--canvas-stroke': '#8d88ad', + '--canvas-fill': '#fff', //canvas bg + '--canvas-stroke': '#8d88ad', //canvas stroke '--node': '#c59434', '--stroke': '#342a1f', '--fill': '#e0dcd3', - '--hover-and-sel': '#f4d4d4', - '--wire-draw': '#4c4c4c', - '--wire-cnt': '#908eb9', + '--hover-and-sel': '#f4d4d4', //yellow + '--wire-draw': '#4c4c4c', //black + '--wire-cnt': '#908eb9', // '--wire-pow': '#b3b1cf', '--wire-sel': '#a7b8f8', '--wire-lose': '#f42f0b',