housekeeping: refactor color variable names and values (via #5420)

* housekeeping: update color variable names and values (via #5337)

* Update operation colors, abstracted colors from element specific variables

* Removed colors.scss

* Typo ⚾

* Undefined var fix

* revert operation color changes (for now)

* fix whitespace

src/style/_colors.scss

-// Methods
-$_color-post: #49cc90;
-$_color-get: #61affe;
-$_color-put: #fca130;
-$_color-delete: #f93e3e;
-$_color-head: #9012fe;
-$_color-patch: #50e3c2;
-$_color-disabled: #ebebeb;
-$_color-options: #0d5aa7;
-
-$methods: (post: $_color-post),(get: $_color-get), (put: $_color-put),(delete: $_color-delete),(head: $_color-head),(patch: $_color-patch),(deprecated: $_color-disabled),(options: $_color-options)

src/style/_variables.scss

-$gray-base: #000 !default;
-$white: #fff !default;
-$gray-50: #ebebeb !default;
-$gray-100: #d8dde7 !default;
-$gray-200: lighten($gray-base, 62.75%) !default; // #aaa
-$gray-300: lighten($gray-base, 56.5%) !default; // #999
-$gray-400: lighten($gray-base, 50%) !default; // #888
-$gray-500: lighten($gray-base, 43.75%) !default; // #777
-$gray-600: lighten($gray-base, 37.5%) !default; // #666
-$gray-650: lighten($gray-base, 33.3%) !default; // ##555555
-$gray-700: lighten($gray-base, 31.25%) !default; // #555
-$gray-800: lighten($gray-base, 25%) !default; // #444
-$gray-900: lighten($gray-base, 18.75%) !default; // #333
-
-$gray-custom-1: #41444e !default;
-$gray-custom-2: #3b4151 !default;
+  // Base Colours
+$black: #000;
+$white: #fff;
+$gray-50: lighten($black, 92%); //ebebeb
+$gray-200: lighten($black, 62.75%); // #a0a0a0
+$gray-300: lighten($black, 56.5%); // #909090
+$gray-400: lighten($black, 50%); // #808080
+$gray-500: lighten($black, 43.75%); // #707070
+$gray-600: lighten($black, 37.5%); // #606060
+$gray-650: lighten($black, 33.3%); // #555555
+$gray-700: lighten($black, 31.25%); // #505050
+$gray-800: lighten($black, 25%); // #404040
+$gray-900: lighten($black, 18.75%); // #303030
+
+$cod-gray: #1b1b1b;
+$bright-gray: #3b4151;
+$mako-gray: #41444e;
+$waterloo-gray: #7d8492;
+$alto-gray: #d9d9d9;
+$mercury-gray: #e4e4e4;
+$concrete-gray: #e8e8e8;
+$alabaster: #f7f7f7;
+$apple-green: #62a03f;
+$green-haze: #009d77;
+$japanese-laurel: #008000;
+$persian-green: #00a0a7;
+$geyser-blue: #d8dde7;
+$dodger-blue: #1391ff;
+$endeavour-blue: #005dae;
+$scampi-purple: #55a;
+$electric-violet: #7300e5;
+$persian-red: #cf3030;
+$mango-tango: #e97500;
+
+// Theme
 
 $color-primary: #89bf04 !default;
 $color-secondary: #9012fe !default;
@@ -21,6 +40,8 @@ $color-info: #4990e2 !default;
 $color-warning: #ff6060 !default;
 $color-danger: #f00 !default;
 
+$color-primary-hover: lighten($color-primary, .5%) !default;
+
 $_color-post: #49cc90 !default;
 $_color-get: #61affe !default;
 $_color-put: #fca130 !default;
@@ -30,10 +51,6 @@ $_color-patch: #50e3c2 !default;
 $_color-disabled: #ebebeb !default;
 $_color-options: #0d5aa7 !default;
 
-$color-green: #008000 !default;
-
-$color-primary-hover: #81b10c !default;
-
 // Authorize
 
 $auth-container-border-color: $gray-50 !default;
@@ -43,7 +60,7 @@ $auth-container-border-color: $gray-50 !default;
 $btn-background-color: transparent !default;
 $btn-border-color: $gray-400 !default;
 $btn-font-color: inherit !default;
-$btn-box-shadow-color: $gray-base !default;
+$btn-box-shadow-color: $black !default;
 
 $btn-authorize-background-color: transparent !default;
 $btn-authorize-border-color: $_color-post !default;
@@ -71,89 +88,89 @@ $errors-wrapper-errors-small-font-color: $gray-600 !default;
 
 // Form
 
-$form-select-background-color: #f7f7f7 !default;
-$form-select-border-color: $gray-custom-1 !default;
-$form-select-box-shadow-color: $gray-base !default;
+$form-select-background-color: $alabaster !default;
+$form-select-border-color: $mako-gray !default;
+$form-select-box-shadow-color: $black !default;
 
-$form-input-border-color: #d9d9d9 !default;
+$form-input-border-color: $alto-gray !default;
 $form-input-background-color: $white !default;
 
 $form-textarea-background-color: $white !default;
 $form-textarea-focus-border-color: $_color-get !default;
 
-$form-textarea-curl-background-color: $gray-custom-1 !default;
+$form-textarea-curl-background-color: $mako-gray !default;
 $form-textarea-curl-font-color: $white !default;
 
 $form-checkbox-label-font-color: $gray-900 !default;
-$form-checkbox-background-color: #e8e8e8 !default;
-$form-checkbox-box-shadow-color: #e8e8e8 !default;
+$form-checkbox-background-color: $concrete-gray !default;
+$form-checkbox-box-shadow-color: $concrete-gray !default;
 
 // Information
 
-$info-code-background-color: $gray-base !default;
+$info-code-background-color: $black !default;
 $info-code-font-color: $_color-head !default;
 
 $info-link-font-color: $color-info !default;
 $info-link-font-color-hover: $info-link-font-color !default;
 
-$info-title-small-background-color: #7d8492 !default;
+$info-title-small-background-color: $waterloo-gray !default;
 
 $info-title-small-pre-font-color: $white !default;
 
 // Layout
 
-$opblock-border-color: $gray-base !default;
-$opblock-box-shadow-color: $gray-base !default;
+$opblock-border-color: $black !default;
+$opblock-box-shadow-color: $black !default;
 
-$opblock-tag-border-bottom-color: $gray-custom-2 !default;
-$opblock-tag-background-color-hover: $gray-base !default;
+$opblock-tag-border-bottom-color: $bright-gray !default;
+$opblock-tag-background-color-hover: $black !default;
 
 $opblock-tab-header-tab-item-active-h4-span-after-background-color: $gray-400 !default;
 
-$opblock-isopen-summary-border-bottom-color: $gray-base !default;
+$opblock-isopen-summary-border-bottom-color: $black !default;
 
 $opblock-isopen-section-header-background-color: $white !default;
-$opblock-isopen-section-header-box-shadow-color: $gray-base !default;
+$opblock-isopen-section-header-box-shadow-color: $black !default;
 
-$opblock-summary-method-background-color: $gray-base !default;
+$opblock-summary-method-background-color: $black !default;
 $opblock-summary-method-font-color: $white !default;
-$opblock-summary-method-text-shadow-color: $gray-base !default;
+$opblock-summary-method-text-shadow-color: $black !default;
 
-$operational-filter-input-border-color: #d8dde7 !default;
+$operational-filter-input-border-color: $geyser-blue !default;
 
-$tab-list-item-first-background-color: $gray-base !default;
+$tab-list-item-first-background-color: $black !default;
 
 $response-col-status-undocumented-font-color: $gray-300 !default;
 
 $response-col-links-font-color: $gray-300 !default;
 
-$opblock-body-background-color: $gray-custom-1 !default;
+$opblock-body-background-color: $mako-gray !default;
 $opblock-body-font-color: $white !default;
 
 $scheme-container-background-color: $white !default;
-$scheme-container-box-shadow-color: $gray-base !default;
+$scheme-container-box-shadow-color: $black !default;
 
 $server-container-background-color: $white !default;
-$server-container-box-shadow-color: $gray-base !default;
+$server-container-box-shadow-color: $black !default;
 
 $server-container-computed-url-code-font-color: $gray-400 !default;
 
 $loading-container-before-border-color: $gray-650 !default;
-$loading-container-before-border-top-color: $gray-base !default;
+$loading-container-before-border-top-color: $black !default;
 
-$response-content-type-controls-accept-header-select-border-color: $color-green !default;
-$response-content-type-controls-accept-header-small-font-color: $color-green !default;
+$response-content-type-controls-accept-header-select-border-color: $japanese-laurel !default;
+$response-content-type-controls-accept-header-small-font-color: $japanese-laurel !default;
 
 // Modal
 
-$dialog-ux-backdrop-background-color: $gray-base !default;
+$dialog-ux-backdrop-background-color: $black !default;
 
 
 $dialog-ux-modal-background-color: $white !default;
 $dialog-ux-modal-border-color: $gray-50 !default;
-$dialog-ux-modal-box-shadow-color: $gray-base !default;
+$dialog-ux-modal-box-shadow-color: $black !default;
 
-$dialog-ux-modal-content-font-color: $gray-custom-1 !default;
+$dialog-ux-modal-content-font-color: $mako-gray !default;
 
 $dialog-ux-modal-header-border-bottom-color: $gray-50 !default;
 
@@ -162,30 +179,30 @@ $dialog-ux-modal-header-border-bottom-color: $gray-50 !default;
 $model-deprecated-font-color: $gray-200 !default;
 
 $model-hint-font-color: $gray-50 !default;
-$model-hint-background-color: $gray-base !default;
+$model-hint-background-color: $black !default;
 
-$section-models-border-color: $gray-custom-2 !default;
+$section-models-border-color: $bright-gray !default;
 
 $section-models-isopen-h4-border-bottom-color: $section-models-border-color !default;
 
 $section-models-h4-font-color: $gray-600 !default;
-$section-models-h4-background-color-hover: $gray-base !default;
+$section-models-h4-background-color-hover: $black !default;
 
 $section-models-h5-font-color: $gray-500 !default;
 
-$section-models-model-container-background-color: $gray-base !default;
+$section-models-model-container-background-color: $black !default;
 
-$section-models-model-box-background-color: $gray-base !default;
+$section-models-model-box-background-color: $black !default;
 
 $section-models-model-title-font-color: $gray-700 !default;
 
-$prop-type-font-color: #55a !default;
+$prop-type-font-color: $scampi-purple !default;
 
 $prop-format-font-color: $gray-600 !default;
 
 // Tables
 
-$table-thead-td-border-bottom-color: $gray-custom-2 !default;
+$table-thead-td-border-bottom-color: $bright-gray !default;
 
 $table-parameter-name-required-font-color: $color-danger !default;
 
@@ -195,17 +212,17 @@ $table-parameter-deprecated-font-color: $color-danger !default;
 
 // Topbar
 
-$topbar-background-color: #1b1b1b !default;
+$topbar-background-color: $cod-gray !default;
 
 $topbar-link-font-color: $white !default;
 
-$topbar-download-url-wrapper-element-border-color: #62A03F !default;
+$topbar-download-url-wrapper-element-border-color: $apple-green !default;
 
-$topbar-download-url-button-background-color: #62A03F !default;
+$topbar-download-url-button-background-color: $apple-green !default;
 $topbar-download-url-button-font-color: $white !default;
 
 // Type
 
-$text-body-default-font-color: $gray-custom-2 !default;
-$text-code-default-font-color: $gray-custom-2 !default;
-$text-headline-default-font-color: $gray-custom-2 !default;
+$text-body-default-font-color: $bright-gray !default;
+$text-code-default-font-color: $bright-gray !default;
+$text-headline-default-font-color: $bright-gray !default;

src/style/main.scss

@@ -3,7 +3,6 @@
     @import '~tachyons-sass/tachyons.scss';
     @import 'mixins';
     @import 'variables';
-    @import 'colors';
     @import 'type';
     @import 'layout';
     @import 'buttons';