Colorway additions and management (additions of GMK Nautilus and SA J…

…ukebox) (qmk#4)

* Add GMK Nautilus colorway (includes SCSS file for Pantone color codes)

GMK Nautilus used Pantone codes for some of its colors. I know other sets have as well, so those color codes will need to go in pantone.scss.

* Add SA Jukebox colorway

* Add capitalization rules for SA and DSA keysets

Some forward planning...

* Add colorway profile prefixes

* Sort colorways by profile and name

Grouped the sets by profile - SA, GMK, then DSA. Each profile's colorways are sorted by name alphabetically.

* Disable DSA Drifter per mechmerlin

Can re-enable if/when we get permission.

configurator/src/components/BaseKey.vue

@@ -203,6 +203,7 @@ export default {
 @import '../scss/gmk-abs';
 @import '../scss/sp-abs';
 @import '../scss/sp-pbt';
+@import '../scss/pantone';
 @import '../scss/colorways';
 
 .key.overme {

configurator/src/components/Main.vue

@@ -72,6 +72,8 @@ export default {
           .map(word => capitalize(word))
           .join(' ')
           .replace(/Gmk/, 'GMK')
+          .replace(/^Sa/, 'SA')
+          .replace(/^Dsa/, 'DSA')
           .replace(/Wob/, 'WOB')
           .replace(/Ta/, 'TA');
       });

configurator/src/components/colorways.js

@@ -1,10 +1,44 @@
 export default {
   list: [
-    { name: 'carbon' },
-    { name: 'danger-zone' },
-    { name: 'drifter' },
+    { name: 'sa-carbon' },
+    { name: 'sa-danger-zone' },
+    {
+      name: 'sa-jukebox',
+      override: {
+        KC_ESC: 'accent',
+        KC_ENT: 'accent'
+      }
+    },
+    { name: 'sa-modern-selectric' },
+    { name: 'sa-nantucket-selectric' },
+    { name: 'sa-oblivion-hagoromo' },
+
     { name: 'gmk-dolch' },
     { name: 'gmk-merlin' },
+    {
+      name: 'gmk-metaverse',
+      override: {
+        KC_ESC: 'accent',
+        KC_ENT: 'accent',
+        KC_F5: 'accent',
+        KC_F6: 'accent',
+        KC_F7: 'accent',
+        KC_F8: 'accent',
+        KC_LGUI: 'accent',
+        KC_RGUI: 'accent',
+        KC_LEFT: 'accent',
+        KC_RGHT: 'accent',
+        KC_DOWN: 'accent',
+        KC_UP: 'accent'
+      }
+    },
+    {
+      name: 'gmk-nautilus',
+      override: {
+        KC_ENT: 'accent',
+        KC_ESC: 'accent'
+      }
+    },
     { name: 'gmk-olivetti' },
     {
       name: 'gmk-olivia',
@@ -27,27 +61,9 @@ export default {
       }
     },
     { name: 'gmk-ta-royal-alpha' },
-    { name: 'gmk-wob' },
-    {
-      name: 'gmk-metaverse',
-      override: {
-        KC_ESC: 'accent',
-        KC_ENT: 'accent',
-        KC_F5: 'accent',
-        KC_F6: 'accent',
-        KC_F7: 'accent',
-        KC_F8: 'accent',
-        KC_LGUI: 'accent',
-        KC_RGUI: 'accent',
-        KC_LEFT: 'accent',
-        KC_RGHT: 'accent',
-        KC_DOWN: 'accent',
-        KC_UP: 'accent'
-      }
-    },
-    { name: 'modern-selectric' },
-    { name: 'nantucket-selectric' },
-    { name: 'oblivion-hagoromo' }
+    { name: 'gmk-wob' }
+    //,
+    //{ name: 'dsa-drifter' }
   ],
   /*
    * List of codes we should use icons for instead of text

configurator/src/scss/colorways.scss

@@ -1,88 +1,115 @@
 // Signature Plastics keysets
 
-.danger-zone-key {
+.sa-danger-zone-key {
   background: $color-sp-abs-BFU;
   color: $color-sp-abs-YY;
   input {
     background: lighten($color-sp-abs-BFU, 40%);
   }
 }
-.danger-zone-mod {
+.sa-danger-zone-mod {
   background: $color-sp-abs-GSM;
   color: $color-sp-abs-YY;
   input {
     background: lighten($color-sp-abs-GSM, 40%);
   }
 }
-.danger-zone-kb {
+.sa-danger-zone-kb {
 }
 
-.carbon-key {
+.sa-carbon-key {
   background: $color-sp-abs-WBO;
   color: $color-sp-abs-GQM;
   input {
     background: lighten($color-sp-abs-WBO, 40%);
   }
 }
-.carbon-mod {
+.sa-carbon-mod {
   background: $color-sp-abs-GQM;
   color: $color-sp-abs-OBC;
   input {
     background: lighten($color-sp-abs-GQM, 40%);
   }
 }
 
-.modern-selectric-key {
+.sa-modern-selectric-key {
   background: $color-sp-abs-NN;
   color: $color-sp-abs-WFK;
   input {
     background: lighten($color-sp-abs-NN, 40%);
   }
 }
-.modern-selectric-mod {
+.sa-modern-selectric-mod {
   background: $color-sp-abs-BDH;
   color: $color-sp-abs-WFK;
   input {
     background: lighten($color-sp-abs-BDH, 40%);
   }
 }
-.modern-selectric-kb {
+.sa-modern-selectric-kb {
 }
 
-.nantucket-selectric-key {
+.sa-nantucket-selectric-key {
   background: $color-sp-abs-WV;
   color: $color-sp-abs-BBI;
   input {
     background: lighten($color-sp-abs-WV, 40%);
   }
 }
-.nantucket-selectric-mod {
+.sa-nantucket-selectric-mod {
   background: $color-sp-abs-BBI;
   color: $color-sp-abs-YCF;
   input {
     background: lighten($color-sp-abs-BBI, 40%);
   }
 }
-.nantucket-selectric-kb {
+.sa-nantucket-selectric-kb {
 }
 
-.oblivion-hagoromo-key {
+.sa-oblivion-hagoromo-key {
   background: $color-sp-abs-WFK;
   color: $color-sp-abs-GD;
   input {
     background: lighten($color-sp-abs-WFK, 40%);
   }
 }
-.oblivion-hagoromo-mod {
+.sa-oblivion-hagoromo-mod {
   background: $color-sp-abs-GD;
   color: $color-sp-abs-GAL;
   input {
     background: lighten($color-sp-abs-GD, 40%);
   }
 }
-.oblivion-hagoromo-kb {
+.sa-oblivion-hagoromo-kb {
 }
 
+
+.sa-jukebox-key {
+  background: $color-sp-abs-TM;
+  color: $color-sp-abs-RN;
+  input {
+    background: lighten($color-sp-abs-TM, 40%);
+    color: $color-sp-abs-RN;
+  }
+}
+.sa-jukebox-mod {
+  background: $color-sp-abs-VCO;
+  color: $color-sp-abs-RN;
+  input {
+    background: lighten($color-sp-abs-VCO, 40%);
+  }
+}
+.sa-jukebox-accent {
+  background: $color-sp-abs-RN;
+  color: $color-sp-abs-TM;
+  input {
+    background: lighten($color-sp-abs-RN, 40%);
+  }
+}
+.sa-jukebox-kb {
+}
+
+
 // GMK Keysets
 
 .gmk-merlin-key {
@@ -210,21 +237,48 @@
   // placeholder
 }
 
+
+.gmk-nautilus-key {
+  background: $color-pantone-534C;
+  color: $color-gmk-abs-TU2;
+  input {
+    background: lighten($color-pantone-534C, 40%);
+  }
+}
+.gmk-nautilus-mod {
+  background: $color-pantone-533C;
+  color: $color-gmk-abs-N6;
+  input {
+    background: lighten($color-pantone-533C, 40%);
+  }
+}
+.gmk-nautilus-accent {
+  background: $color-gmk-abs-N6;
+  color: $color-pantone-533C;
+  input {
+    background: lighten($color-gmk-abs-N6, 40%);
+  }
+}
+.gmk-nautilus-kb {
+  // placeholder
+  background: $color-pantone-533C;
+}
+
 // Keyreative
 
-.drifter-key {
+.dsa-drifter-key {
   background: #e5e1e6;
   color: #222222;
   input {
     background: lighten(#e5e1e6, 40%);
   }
 }
-.drifter-mod {
+.dsa-drifter-mod {
   background: #9b2242;
   color: #71dbd4;
   input {
     background: lighten(#9b2242, 40%);
   }
 }
-.drifter-kb {
+.dsa-drifter-kb {
 }

configurator/src/scss/pantone.scss

@@ -0,0 +1,2 @@
+$color-pantone-534C: rgb(27,54,93);
+$color-pantone-533C: rgb(31,42,68);