From dfc1411a94bbde2e23333faba4a669b8edde434a Mon Sep 17 00:00:00 2001 From: noroadsleft <18669334+noroadsleft@users.noreply.github.com> Date: Wed, 23 Jan 2019 00:00:37 -0800 Subject: [PATCH] Colorway additions and management (additions of GMK Nautilus and SA Jukebox) (#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 | 1 + configurator/src/components/Main.vue | 2 + configurator/src/components/colorways.js | 64 ++++++++++------- configurator/src/scss/colorways.scss | 88 +++++++++++++++++++----- configurator/src/scss/pantone.scss | 2 + 5 files changed, 116 insertions(+), 41 deletions(-) create mode 100644 configurator/src/scss/pantone.scss diff --git a/configurator/src/components/BaseKey.vue b/configurator/src/components/BaseKey.vue index f702969c63b4..281f166a8fc0 100644 --- a/configurator/src/components/BaseKey.vue +++ b/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 { diff --git a/configurator/src/components/Main.vue b/configurator/src/components/Main.vue index c1bbb321b828..9c089bb8a4bd 100644 --- a/configurator/src/components/Main.vue +++ b/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'); }); diff --git a/configurator/src/components/colorways.js b/configurator/src/components/colorways.js index 5005252968cb..222676e536d5 100644 --- a/configurator/src/components/colorways.js +++ b/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 diff --git a/configurator/src/scss/colorways.scss b/configurator/src/scss/colorways.scss index 3265c20df707..1ae6dc045b1d 100644 --- a/configurator/src/scss/colorways.scss +++ b/configurator/src/scss/colorways.scss @@ -1,30 +1,30 @@ // 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 { @@ -32,57 +32,84 @@ } } -.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 { } diff --git a/configurator/src/scss/pantone.scss b/configurator/src/scss/pantone.scss new file mode 100644 index 000000000000..161330375676 --- /dev/null +++ b/configurator/src/scss/pantone.scss @@ -0,0 +1,2 @@ +$color-pantone-534C: rgb(27,54,93); +$color-pantone-533C: rgb(31,42,68);