diff --git a/src/style/_colors.scss b/src/style/_colors.scss deleted file mode 100644 index 4643536b..00000000 --- a/src/style/_colors.scss +++ /dev/null @@ -1,11 +0,0 @@ -// 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) diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 8adf2dd8..19dc6a68 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -1,19 +1,38 @@ -$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 + // 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 -$gray-custom-1: #41444e !default; -$gray-custom-2: #3b4151 !default; +$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; diff --git a/src/style/main.scss b/src/style/main.scss index 804ef4e7..7fb2beba 100644 --- a/src/style/main.scss +++ b/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';