Generate historical temperaments, target-tempered generator-stacks an…

…d well temperaments

Make the look of accidentals attached to the "spine" of fifths customizable.
Move the other Rank-2 temperament modal further down the list.

ref #461, #477

src/assets/base.css

@@ -172,6 +172,10 @@ button:disabled:hover {
   color: var(--color-accent-mute);
   background-color: var(--color-accent-background);
 }
+input:disabled {
+  color: var(--color-accent-mute);
+  background-color: var(--color-background-mute);
+}
 ul.btn-group, .btn-dropdown-group ul {
   list-style: none;
   padding-left: unset;

src/components/ScaleBuilder.vue

@@ -23,6 +23,7 @@ import LatticeModal from "@/components/modals/generation/SpanLattice.vue";
 import EulerGenusModal from "@/components/modals/generation/EulerGenus.vue";
 import DwarfModal from "@/components/modals/generation/DwarfScale.vue";
 import RankTwoModal from "@/components/modals/generation/RankTwo.vue";
+import HistoricalModal from "@/components/modals/generation/HistoricalScale.vue";
 import RotateModal from "@/components/modals/modification/RotateScale.vue";
 import SubsetModal from "@/components/modals/modification/TakeSubset.vue";
 import StretchModal from "@/components/modals/modification/StretchScale.vue";
@@ -170,6 +171,7 @@ const showEulerGenusModal = ref(false);
 const showDwarfModal = ref(false);
 const showRankTwoModal = ref(false);
 const showCrossPolytopeModal = ref(false);
+const showHistoricalModal = ref(false);
 
 const showRotateModal = ref(false);
 const showSubsetModal = ref(false);
@@ -231,8 +233,8 @@ function copyToClipboard() {
             <a href="#" @click="showEqualTemperamentModal = true"
               ><li>Equal temperament</li></a
             >
-            <a href="#" @click="showRankTwoModal = true"
-              ><li>Rank-2 temperament</li></a
+            <a href="#" @click="showHistoricalModal = true"
+              ><li>Historical temperament</li></a
             >
             <a href="#" @click="showHarmonicSeriesModal = true"
               ><li>Harmonic series segment</li></a
@@ -252,6 +254,9 @@ function copyToClipboard() {
             <a href="#" @click="showEulerGenusModal = true"
               ><li>Euler-Fokker genus</li></a
             >
+            <a href="#" @click="showRankTwoModal = true"
+              ><li>Rank-2 temperament</li></a
+            >
             <a href="#" @click="showDwarfModal = true"><li>Dwarf scale</li></a>
             <a href="#" @click="showCrossPolytopeModal = true"
               ><li>Cross-polytope</li></a
@@ -576,6 +581,20 @@ function copyToClipboard() {
       @cancel="showRankTwoModal = false"
     />
 
+    <HistoricalModal
+      :show="showHistoricalModal"
+      :centsFractionDigits="centsFractionDigits"
+      @update:scaleName="emit('update:scaleName', $event)"
+      @update:scale="
+        showHistoricalModal = false;
+        emit('update:scale', $event);
+      "
+      @update:baseFrequency="emit('update:baseFrequency', $event)"
+      @update:baseMidiNote="emit('update:baseMidiNote', $event)"
+      @update:keyColors="emit('update:keyColors', $event)"
+      @cancel="showHistoricalModal = false"
+    />
+
     <ShareUrlModal
       ref="shareUrlModal"
       :show="showShareUrlModal"