Improved the basic themes

16 files changed, 76 insertions, 32 deletions

diff --git a/editor/links/theme.css b/editor/links/theme.css
index 7814447..ffcf93c 100644
--- a/editor/links/theme.css
+++ b/editor/links/theme.css
@@ -1,4 +1,4 @@
-body { background:var(--background) !important }
+body { background:var(--background) !important; color:var(--f_med); }
 .bg { background:var(--background) !important }
 .f_high { color:var(--f_high) !important; stroke:var(--f_high) !important }
 .f_med { color:var(--f_med) !important ; stroke:var(--f_med) !important }
@@ -8,3 +8,5 @@ body { background:var(--background) !important }
 .b_med { background:var(--b_med) !important ; fill:var(--b_med) !important }
 .b_low { background:var(--b_low) !important ; fill:var(--b_low) !important }
 .b_inv { background:var(--b_inv) !important ; fill:var(--b_inv) !important }
+
+#debug { color:var(--f_high); }
\ No newline at end of file
diff --git a/editor/scripts/benchmark.js b/editor/scripts/benchmark.js
index 28b906c..7b04fd1 100644
--- a/editor/scripts/benchmark.js
+++ b/editor/scripts/benchmark.js
@@ -26,10 +26,10 @@ function Benchmark () {
     for (const match of this.matches()) {
       const rating = new Color(match.fc).contrast(new Color(match.bc))
       const cell = document.getElementById(match.id)
-
       let rune = ''
       if (rating === 1) {
         rune = '[X]'
+        logs.push(`Error: Overlap for ${match.fc}/${match.bc}`)
         errors += 1
       } else if (rating < 1.25) {
         rune = '[!]'
@@ -43,6 +43,20 @@ function Benchmark () {
       cell.innerHTML = `${rating.toFixed(2)}<span style='color:var(--f_inv)'>${rune}<span>`
     }
 
+    // Order
+
+    const fhigh = new Color(theme.active.f_high).contrast(new Color(theme.active.background))
+    const fmed = new Color(theme.active.f_med).contrast(new Color(theme.active.background))
+    const flow = new Color(theme.active.f_low).contrast(new Color(theme.active.background))
+    const bhigh = new Color(theme.active.b_high).contrast(new Color(theme.active.background))
+    const bmed = new Color(theme.active.b_med).contrast(new Color(theme.active.background))
+    const blow = new Color(theme.active.b_low).contrast(new Color(theme.active.background))
+
+    if (fmed < flow) { logs.push('flip f_med with f_low') }
+    if (fhigh < fmed) { logs.push('flip f_high with f_med') }
+    if (bmed < blow) { logs.push('flip b_med with b_low') }
+    if (bhigh < bmed) { logs.push('flip b_high with b_med') }
+
     const perc = (score / (this.matches().length * 5)) * 100
     const cat = errors > 0 ? 'fix errors' : perc === 100 ? 'perfect' : perc > 80 ? 'good' : perc > 75 ? 'average' : 'bad'
 
diff --git a/editor/scripts/lib/theme.js b/editor/scripts/lib/theme.js
index 5104277..85fcc63 100644
--- a/editor/scripts/lib/theme.js
+++ b/editor/scripts/lib/theme.js
@@ -15,9 +15,9 @@ function Theme (client) {
     f_med: '#666666',
     f_low: '#888888',
     f_inv: '#000000',
-    b_high: '#ffffff',
-    b_med: '#cccccc',
-    b_low: '#dddddd',
+    b_high: '#cccccc',
+    b_med: '#dddddd',
+    b_low: '#ffffff',
     b_inv: '#ffb545'
   }
 
diff --git a/index.html b/index.html
index 91e42ab..14339e8 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,24 @@
       <h1 id='score' class='f_med'>Score</h1>
       <table>
         <tr>
+          <td>
+            <span class='f_low'></span>
+          </td>
+          <td>
+            <span class='f_low'>f_high</span>
+          </td>
+          <td>
+            <span class='f_low'>f_med</span>
+          </td>
+          <td>
+            <span class='f_low'>f_low</span>
+          </td>
+        </tr>
+        <tr>
           <!-- bg -->
+          <td>
+            <span class='f_low'>background</span>
+          </td>
           <td class='bg f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -49,8 +66,10 @@
           </td>
         </tr>
         <!-- low -->
-
         <tr>
+          <td>
+            <span class='f_low'>b_low</span>
+          </td>
           <td class='b_low f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -71,6 +90,9 @@
           </td>
         <!-- med -->
         <tr>
+          <td>
+            <span class='f_low'>b_med</span>
+          </td>
           <td class='b_med f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -92,6 +114,9 @@
         </tr>
         <!-- high -->
         <tr>
+          <td>
+            <span class='f_low'>b_high</span>
+          </td>
           <td class='b_high f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -113,9 +138,12 @@
         </tr>
         <!-- inv -->
         <tr>
+          <td>
+            <span class='f_low'>b_inv</span>
+          </td>
           <td class='b_inv f_inv'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
-              <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
+              <circle cx='8' cy='8' r='8' id='f_inv' style='fill:var(--f_inv)'></circle>
             </svg>
             <span id='b_inv_f_inv' class='f_inv'></span>
           </td>
diff --git a/themes/berry.svg b/themes/berry.svg
index 2f948e2..2bb1e83 100644
--- a/themes/berry.svg
+++ b/themes/berry.svg
@@ -1,9 +1,9 @@
 <svg width="96px" height="64px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
   <rect width='96' height='64' id='background' fill='#9EB7FF'></rect>
   <!-- Foreground -->
-  <circle cx='24' cy='24' r='8' id='f_high' fill='#FFFFFF'></circle>
-  <circle cx='40' cy='24' r='8' id='f_med' fill='#c5f0ec'></circle>
-  <circle cx='56' cy='24' r='8' id='f_low' fill='#3e8281'></circle>
+  <circle cx='24' cy='24' r='8' id='f_high' fill='#3e8281'></circle>
+  <circle cx='40' cy='24' r='8' id='f_med' fill='#FFFFFF'></circle>
+  <circle cx='56' cy='24' r='8' id='f_low' fill='#c5f0ec'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#FFFFFF'></circle>
   <!-- Background -->
   <circle cx='24' cy='40' r='8' id='b_high' fill='#1C0A16'></circle>
diff --git a/themes/coal.svg b/themes/coal.svg
index d3305cb..01653b9 100644
--- a/themes/coal.svg
+++ b/themes/coal.svg
@@ -1,9 +1,9 @@
 <svg width="96px" height="64px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
   <rect width='96' height='64' id='background' fill='#EDEAEA'></rect>
   <!-- Foreground -->
-  <circle cx='24' cy='24' r='8' id='f_high' fill='#A3A3A4'></circle>
-  <circle cx='40' cy='24' r='8' id='f_med' fill='#393B3F'></circle>
-  <circle cx='56' cy='24' r='8' id='f_low' fill='#808790'></circle>
+  <circle cx='24' cy='24' r='8' id='f_high' fill='#393B3F'></circle>
+  <circle cx='40' cy='24' r='8' id='f_med' fill='#808790'></circle>
+  <circle cx='56' cy='24' r='8' id='f_low' fill='#A3A3A4'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#000000'></circle>
   <!-- Background -->
   <circle cx='24' cy='40' r='8' id='b_high' fill='#333333'></circle>
diff --git a/themes/commodore.svg b/themes/commodore.svg
index 4a82832..7f46f97 100644
--- a/themes/commodore.svg
+++ b/themes/commodore.svg
@@ -6,8 +6,8 @@
   <circle cx='56' cy='24' r='8' id='f_low' fill='#b7b9ff'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#444ae3'></circle>
   <!-- Background -->
-  <circle cx='24' cy='40' r='8' id='b_high' fill='#FFFFFF'></circle>
-  <circle cx='40' cy='40' r='8' id='b_med' fill='#7479ee'></circle>
-  <circle cx='56' cy='40' r='8' id='b_low' fill='#444ae3'></circle>
+  <circle cx='24' cy='40' r='8' id='b_high' fill='#444ae3'></circle>
+  <circle cx='40' cy='40' r='8' id='b_med' fill='#FFFFFF'></circle>
+  <circle cx='56' cy='40' r='8' id='b_low' fill='#7479ee'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#ffffff'></circle>
 </svg>
\ No newline at end of file
diff --git a/themes/lotus.svg b/themes/lotus.svg
index 7ead2d5..16b1827 100644
--- a/themes/lotus.svg
+++ b/themes/lotus.svg
@@ -7,7 +7,7 @@
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#222222'></circle>
   <!-- Background -->
   <circle cx='24' cy='40' r='8' id='b_high' fill='#ffffff'></circle>
-  <circle cx='40' cy='40' r='8' id='b_med' fill='#222222'></circle>
-  <circle cx='56' cy='40' r='8' id='b_low' fill='#333333'></circle>
+  <circle cx='40' cy='40' r='8' id='b_med' fill='#333333'></circle>
+  <circle cx='56' cy='40' r='8' id='b_low' fill='#222222'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#f0c098'></circle>
 </svg>
\ No newline at end of file
diff --git a/themes/mahou.svg b/themes/mahou.svg
index 332cfff..a78c6af 100644
--- a/themes/mahou.svg
+++ b/themes/mahou.svg
@@ -6,8 +6,8 @@
   <circle cx='56' cy='24' r='8' id='f_low' fill='#917296'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#E0B1CB'></circle>
   <!-- Background -->
-  <circle cx='24' cy='40' r='8' id='b_high' fill='#FFFFFF'></circle>
-  <circle cx='40' cy='40' r='8' id='b_med' fill='#5E548E'></circle>
+  <circle cx='24' cy='40' r='8' id='b_high' fill='#5E548E'></circle>
+  <circle cx='40' cy='40' r='8' id='b_med' fill='#FFFFFF'></circle>
   <circle cx='56' cy='40' r='8' id='b_low' fill='#BE95C4'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#9F86C0'></circle>
 </svg>
\ No newline at end of file
diff --git a/themes/murata.svg b/themes/murata.svg
index e1dae94..35bebf4 100644
--- a/themes/murata.svg
+++ b/themes/murata.svg
@@ -6,8 +6,8 @@
   <circle cx='56' cy='24' r='8' id='f_low' fill='#5a6970'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#000000'></circle>
   <!-- Background -->
-  <circle cx='24' cy='40' r='8' id='b_high' fill='#8498a2'></circle>
-  <circle cx='40' cy='40' r='8' id='b_med' fill='#eeeeee'></circle>
+  <circle cx='24' cy='40' r='8' id='b_high' fill='#eeeeee'></circle>
+  <circle cx='40' cy='40' r='8' id='b_med' fill='#8498a2'></circle>
   <circle cx='56' cy='40' r='8' id='b_low' fill='#333333'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#b9615a'></circle>
 </svg>
\ No newline at end of file
diff --git a/themes/obsidian.svg b/themes/obsidian.svg
index cfea71a..e257362 100644
--- a/themes/obsidian.svg
+++ b/themes/obsidian.svg
@@ -2,8 +2,8 @@
   <rect width='96' height='64'  id='background' fill='#22282a'></rect>
   <!-- Foreground -->
   <circle cx='24' cy='24' r='8' id='f_high' fill='#f1f2f3'></circle>
-  <circle cx='40' cy='24' r='8' id='f_med' fill='#ec7600'></circle>
-  <circle cx='56' cy='24' r='8' id='f_low' fill='#93c763'></circle>
+  <circle cx='40' cy='24' r='8' id='f_med' fill='#93c763'></circle>
+  <circle cx='56' cy='24' r='8' id='f_low' fill='#ec7600'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#963a46'></circle>
   <!-- Background -->
   <circle cx='24' cy='40' r='8' id='b_high' fill='#678cb1'></circle>
diff --git a/themes/orca.svg b/themes/orca.svg
index 0cdd422..9ec2962 100644
--- a/themes/orca.svg
+++ b/themes/orca.svg
@@ -6,7 +6,7 @@
   <circle cx='56' cy='24' r='8' id='f_low' fill='#444444'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#000000'></circle>
   <!-- Background -->
-  <circle cx='24' cy='40' r='8' id='b_high' fill='#eeeeee'></circle>
+  <circle cx='24' cy='40' r='8' id='b_high' fill='#dddddd'></circle>
   <circle cx='40' cy='40' r='8' id='b_med' fill='#72dec2'></circle>
   <circle cx='56' cy='40' r='8' id='b_low' fill='#222222'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#ffb545'></circle>
diff --git a/themes/roguelight.svg b/themes/roguelight.svg
index 0061b06..6693eee 100644
--- a/themes/roguelight.svg
+++ b/themes/roguelight.svg
@@ -2,8 +2,8 @@
   <rect width='96' height='64' id='background' fill='#352b31'></rect>
   <!-- Foreground -->
   <circle cx='24' cy='24' r='8' id='f_high' fill='#f5f5d4'></circle>
-  <circle cx='40' cy='24' r='8' id='f_med' fill='#4a6b83'></circle>
-  <circle cx='56' cy='24' r='8' id='f_low' fill='#70838c'></circle>
+  <circle cx='40' cy='24' r='8' id='f_med' fill='#70838c'></circle>
+  <circle cx='56' cy='24' r='8' id='f_low' fill='#4a6b83'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#352b31'></circle>
   <!-- Background -->
   <circle cx='24' cy='40' r='8' id='b_high' fill='#96cf85'></circle>
diff --git a/themes/sonicpi.svg b/themes/sonicpi.svg
index 8279348..5c32902 100644
--- a/themes/sonicpi.svg
+++ b/themes/sonicpi.svg
@@ -7,7 +7,7 @@
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#ffffff'></circle>
   <!-- Background -->
   <circle cx='24' cy='40' r='8' id='b_high' fill='#444444'></circle>
-  <circle cx='40' cy='40' r='8' id='b_med' fill='#ced0ce'></circle>
-  <circle cx='56' cy='40' r='8' id='b_low' fill='#555555'></circle>
+  <circle cx='40' cy='40' r='8' id='b_med' fill='#555555'></circle>
+  <circle cx='56' cy='40' r='8' id='b_low' fill='#ced0ce'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#ed1e92'></circle>
 </svg>
\ No newline at end of file
diff --git a/themes/soyuz.svg b/themes/soyuz.svg
index e2c767c..4654861 100644
--- a/themes/soyuz.svg
+++ b/themes/soyuz.svg
@@ -2,7 +2,7 @@
   <rect width='96' height='64' id='background' fill='#111111'></rect>
   <!-- Foreground -->
   <circle cx='24' cy='24' r='8' id='f_high' fill='#ffffff'></circle>
-  <circle cx='40' cy='24' r='8' id='f_med' fill='#999999'></circle>
+  <circle cx='40' cy='24' r='8' id='f_med' fill='#aaaaaa'></circle>
   <circle cx='56' cy='24' r='8' id='f_low' fill='#555555'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#000000'></circle>
   <!-- Background -->
diff --git a/themes/swiss.svg b/themes/swiss.svg
index a105e98..dc86948 100644
--- a/themes/swiss.svg
+++ b/themes/swiss.svg
@@ -6,8 +6,8 @@
   <circle cx='56' cy='24' r='8' id='f_low' fill='#ffffff'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#ffffff'></circle>
   <!-- Background -->
-  <circle cx='24' cy='40' r='8' id='b_high' fill='#867f86'></circle>
-  <circle cx='40' cy='40' r='8' id='b_med' fill='#a63e14'></circle>
+  <circle cx='24' cy='40' r='8' id='b_high' fill='#a63e14'></circle>
+  <circle cx='40' cy='40' r='8' id='b_med' fill='#867f86'></circle>
   <circle cx='56' cy='40' r='8' id='b_low' fill='#dde0da'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#a63e14'></circle>
 </svg>
\ No newline at end of file