Integrate with harmonic-mixer's new color palette

anjunatl · Mar 23, 2024 · 0df6cc0 · 0df6cc0
1 parent 0d3e91d
commit 0df6cc0
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 10 deletions.
diff --git a/dist/assets/index-DBq4P_g5.css → dist/assets/index-CzEWiWvj.css b/dist/assets/index-DBq4P_g5.css → dist/assets/index-CzEWiWvj.css
diff --git a/dist/assets/index-Be4T2QmA.js → dist/assets/index-DbKIMe2Q.js b/dist/assets/index-Be4T2QmA.js → dist/assets/index-DbKIMe2Q.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <!-- <link rel="icon" type="image/png" href="vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Harmonic Mixer</title>
-    <script type="module" crossorigin src="./assets/index-Be4T2QmA.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DBq4P_g5.css">
+    <script type="module" crossorigin src="./assets/index-DbKIMe2Q.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CzEWiWvj.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/app/CamelotOutput.jsx b/src/app/CamelotOutput.jsx
@@ -21,18 +21,18 @@ const CamelotOutput = (props) => {
         <table className="table table-striped table-bordered">
           <thead>
             <tr>
-              <th>Transition from {currentKey} / {props.camelotKey}</th>
+              <th>Transition from <span className={'segment-'+props.camelotKey}>{currentKey} / {props.camelotKey}</span></th>
               <th>Key</th>
               <th></th>
             </tr>
           </thead>
           <tbody>
             {newMixes.map((item, index) => {
               return (
-                <tr className={"result mix-type--" + item.type} key={index}>
+                <tr className={"result mix-type--" + item.type + " segment-" + item.newMix} key={index}>
                   <td>{item.name}</td>
-                  <td className="mix-notation" data-testid={'output-mix-notation-' + item.type}>{item.newKey}</td>
-                  <td className="mix-type" data-testid={'output-mix-' + item.type}>{item.newMix}</td>
+                  <td className="mix-notation" data-testid={'output-mix-notation-' + item.type}><strong>{item.newKey}</strong></td>
+                  <td className="mix-type" data-testid={'output-mix-' + item.type}><strong>{item.newMix}</strong></td>
                 </tr>
               )
             })}

diff --git a/src/app/CamelotPicker.jsx b/src/app/CamelotPicker.jsx
@@ -43,13 +43,13 @@ const CamelotPicker = (props) => {
     const keyNotation = letter !== null ? NoteMapping.getChromaticNotationFromCamelotSignature('' + counter + letter) : null
     numericButtons.push(
       <button
-        className={number === counter ? 'btn btn-info' : 'btn btn-secondary'}
+        className={(number === counter ? 'btn btn-info' : 'btn btn-secondary') + ' segment-' + counter + letter}
         key={counter}
         onClick={partial(numberHandler, counter)}
         camelotnumber={counter}>
 
         {keyNotation === null && (<>{counter}{letter}</>)}
-        {keyNotation !== null && (<>{keyNotation}<br/>{counter}{letter}</>)}
+        {keyNotation !== null && (<>{keyNotation}<br/><strong>{counter}{letter}</strong></>)}
       </button>
     )
   }

diff --git a/src/scss/custom.scss b/src/scss/custom.scss
@@ -32,3 +32,222 @@ footer {
 div#root {
   justify-content: center;
 }
+
+/*  2024 harmonic mixing palette <3  */
+
+.segment-1A {
+  color: #91f2df;
+
+  .bg {
+    color: #222222;
+    background-color: #91f2df;
+  }
+}
+
+.segment-1B {
+  color: #6beacb;
+
+  .bg {
+    color: #222222;
+    background-color: #6beacb;
+  }
+}
+
+.segment-2A {
+  color: #a4f1b7;
+
+  .bg {
+    color: #222222;
+    background-color: #a4f1b7;
+  }
+}
+
+.segment-2B {
+  color: #7aea8b;
+
+  .bg {
+    color: #222222;
+    background-color: #7aea8b;
+  }
+}
+
+.segment-3A {
+  color: #c4f49f;
+
+  .bg {
+    color: #222222;
+    background-color: #c4f49f;
+  }
+}
+
+.segment-3B {
+  color: #a2ee68;
+
+  .bg {
+    color: #222222;
+    background-color: #a2ee68;
+  }
+}
+
+.segment-4A {
+  color: #fadf9a;
+
+  .bg {
+    color: #222222;
+    background-color: #fadf9a;
+  }
+}
+
+.segment-4B {
+  color: #f7cc60;
+
+  .bg {
+    color: #222222;
+    background-color: #f7cc60;
+  }
+}
+
+.segment-5A {
+  color: #f7c8b4;
+
+  .bg {
+    color: #222222;
+    background-color: #f7c8b4;
+  }
+}
+
+.segment-5B {
+  color: #f3a4b2;
+
+  .bg {
+    color: #222222;
+    background-color: #f3a4b2;
+  }
+}
+
+.segment-6A {
+  color: #f4babf;
+
+  .bg {
+    color: #222222;
+    background-color: #f4babf;
+  }
+}
+
+.segment-6B {
+  color: #f08e96;
+
+  .bg {
+    color: #222222;
+    background-color: #f08e96;
+  }
+}
+
+.segment-7A {
+  color: #f4b7d1;
+
+  .bg {
+    color: #222222;
+    background-color: #f4b7d1;
+  }
+}
+
+.segment-7B {
+  color: #ee89b3;
+
+  .bg {
+    color: #222222;
+    background-color: #ee89b3;
+  }
+}
+
+.segment-8A {
+  color: #ebb8e5;
+
+  .bg {
+    color: #222222;
+    background-color: #ebb8e5;
+  }
+}
+
+.segment-8B {
+  color: #e08ad6;
+
+  .bg {
+    color: #222222;
+    background-color: #e08ad6;
+  }
+}
+
+.segment-9A {
+  color: #dbbefa;
+
+  .bg {
+    color: #222222;
+    background-color: #dbbefa;
+  }
+}
+
+.segment-9B {
+  color: #c395f8;
+
+  .bg {
+    color: #222222;
+    background-color: #c395f8;
+  }
+}
+
+.segment-10A {
+  color: #c8d4fb;
+
+  .bg {
+    color: #222222;
+    background-color: #c8d4fb;
+  }
+}
+
+.segment-10B {
+  color: #a3b8fa;
+
+  .bg {
+    color: #222222;
+    background-color: #a3b8fa;
+  }
+}
+
+.segment-11A {
+  color: #aae6f9;
+
+  .bg {
+    color: #222222;
+    background-color: #aae6f9;
+  }
+}
+
+.segment-11B {
+  color: #7ad8f5;
+
+  .bg {
+    color: #222222;
+    background-color: #7ad8f5;
+  }
+}
+
+
+.segment-12A {
+  color: #8ff1f2;
+
+  .bg {
+    color: #222222;
+    background-color: #8ff1f2;
+  }
+}
+
+.segment-12B {
+  color: #6be9e9;
+
+  .bg {
+    color: #222222;
+    background-color: #6be9e9;
+  }
+}