From 1a02364c2f0c0558e91f6393b54738fefe21ef7e Mon Sep 17 00:00:00 2001 From: Stuart Nichols Date: Mon, 16 Oct 2017 15:06:51 +0100 Subject: [PATCH] Replace color values with variables for easier theming Replaced all color values with variables in scss files and added associated variables to _variables.scss file --- src/style/_authorize.scss | 2 +- src/style/_buttons.scss | 46 ++++---- src/style/_errors.scss | 2 +- src/style/_form.scss | 28 ++--- src/style/_information.scss | 12 +- src/style/_layout.scss | 62 +++++----- src/style/_modal.scss | 12 +- src/style/_models.scss | 28 ++--- src/style/_table.scss | 8 +- src/style/_topbar.scss | 12 +- src/style/_type.scss | 6 +- src/style/_variables.scss | 218 ++++++++++++++++++++++++++++++++++++ 12 files changed, 326 insertions(+), 110 deletions(-) diff --git a/src/style/_authorize.scss b/src/style/_authorize.scss index d09fb8fd..55ecd01e 100644 --- a/src/style/_authorize.scss +++ b/src/style/_authorize.scss @@ -25,7 +25,7 @@ margin: 0 0 10px 0; padding: 10px 20px; - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid $auth-container-border-color; &:last-of-type { diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss index 5450c814..71e90a52 100644 --- a/src/style/_buttons.scss +++ b/src/style/_buttons.scss @@ -7,10 +7,10 @@ transition: all .3s; - border: 2px solid #888; + border: 2px solid $btn-border-color; border-radius: 4px; background: transparent; - box-shadow: 0 1px 2px rgba(#000,.1); + box-shadow: 0 1px 2px rgba($btn-box-shadow-color,.1); @include text_headline(); @@ -29,14 +29,14 @@ &:hover { - box-shadow: 0 0 5px rgba(#000,.3); + box-shadow: 0 0 5px rgba($btn-box-shadow-color,.3); } &.cancel { - border-color: #ff6060; - - @include text_headline(#ff6060); + border-color: $btn-cancel-border-color; + background-color: $btn-cancel-background-color; + @include text_headline($btn-cancel-font-color); } &.authorize @@ -45,9 +45,9 @@ display: inline; - color: $_color-post; - border-color: $_color-post; - + color: $btn-authorize-font-color; + border-color: $btn-authorize-border-color; + background-color: $btn-authorize-background-color; span { @@ -58,16 +58,16 @@ svg { - fill: $_color-post; + fill: $btn-authorize-svg-fill-color; } } &.execute { animation: swagger-ui-pulse 2s infinite; - - color: #fff; - border-color: #4990e2; + background-color: $btn-execute-background-color; + color: $btn-execute-font-color; + border-color: $btn-execute-border-color; } } @@ -76,21 +76,19 @@ { 0% { - color: #fff; - background: #4990e2; - box-shadow: 0 0 0 0 rgba(#4990e2, .8); + color: $btn-execute-font-color; + background: $btn-execute-background-color-alt; + box-shadow: 0 0 0 0 rgba($btn-execute-background-color-alt, .8); } 70% { - //color: #4990e2; - //background: transparent; - box-shadow: 0 0 0 5px rgba(#4990e2, 0); + box-shadow: 0 0 0 5px rgba($btn-execute-background-color-alt, 0); } 100% { - color: #fff; - background: #4990e2; - box-shadow: 0 0 0 0 rgba(#4990e2, 0); + color: $btn-execute-font-color; + background: $btn-execute-background-color-alt; + box-shadow: 0 0 0 0 rgba($btn-execute-background-color-alt, 0); } } @@ -155,7 +153,7 @@ { svg { - fill: #444; + fill: $expand-methods-svg-fill-color-hover; } } @@ -163,7 +161,7 @@ { transition: all .3s; - fill: #777; + fill: $expand-methods-svg-fill-color; } } diff --git a/src/style/_errors.scss b/src/style/_errors.scss index 1bba8652..05fe47db 100644 --- a/src/style/_errors.scss +++ b/src/style/_errors.scss @@ -27,7 +27,7 @@ small { - color: #666; + color: $errors-wrapper-errors-small-font-color; } } diff --git a/src/style/_form.scss b/src/style/_form.scss index 961ec7d7..c2c4ea24 100644 --- a/src/style/_form.scss +++ b/src/style/_form.scss @@ -5,11 +5,11 @@ select padding: 5px 40px 5px 10px; - border: 2px solid #41444e; + border: 2px solid $form-select-border-color; border-radius: 4px; - background: #f7f7f7 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+) right 10px center no-repeat; + background: $form-select-background-color url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+) right 10px center no-repeat; background-size: 20px; - box-shadow: 0 1px 2px 0 rgba(0,0,0,.25); + box-shadow: 0 1px 2px 0 rgba($form-select-box-shadow-color, .25); @include text_headline(); appearance: none; @@ -19,7 +19,7 @@ select margin: 5px 0; padding: 5px; - background: #f7f7f7; + background: $form-select-background-color; } &.invalid { @@ -57,9 +57,9 @@ input[type=file] margin: 5px 0; padding: 8px 10px; - border: 1px solid #d9d9d9; + border: 1px solid $form-input-border-color; border-radius: 4px; - background: #fff; + background: $form-input-background-color; @media (max-width: 768px) { max-width: 175px; } @@ -110,13 +110,13 @@ textarea border: none; border-radius: 4px; outline: none; - background: rgba(#fff,.8); + background: rgba($form-textarea-background-color,.8); @include text_code(); &:focus { - border: 2px solid $_color-get; + border: 2px solid $form-textarea-focus-border-color; } &.curl @@ -130,9 +130,9 @@ textarea resize: none; border-radius: 4px; - background: #41444e; + background: $form-textarea-curl-background-color; - @include text_code(#fff); + @include text_code($form-textarea-curl-font-color); } } @@ -143,7 +143,7 @@ textarea transition: opacity .5s; - color: #333; + color: $form-checkbox-label-font-color; label { @@ -179,8 +179,8 @@ textarea cursor: pointer; border-radius: 1px; - background: #e8e8e8; - box-shadow: 0 0 0 2px #e8e8e8; + background: $form-checkbox-background-color; + box-shadow: 0 0 0 2px $form-checkbox-box-shadow-color; flex: none; @@ -192,7 +192,7 @@ textarea &:checked + label > .item { - background: #e8e8e8 url(data:image/svg+xml,%0A%3Csvg%20width%3D%2210px%22%20height%3D%228px%22%20viewBox%3D%223%207%2010%208%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-34%22%20stroke%3D%22none%22%20fill%3D%22%2341474E%22%20fill-rule%3D%22evenodd%22%20points%3D%226.33333333%2015%203%2011.6666667%204.33333333%2010.3333333%206.33333333%2012.3333333%2011.6666667%207%2013%208.33333333%22%3E%3C/polygon%3E%0A%3C/svg%3E) center center no-repeat; + background: $form-checkbox-background-color url(data:image/svg+xml,%0A%3Csvg%20width%3D%2210px%22%20height%3D%228px%22%20viewBox%3D%223%207%2010%208%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-34%22%20stroke%3D%22none%22%20fill%3D%22%2341474E%22%20fill-rule%3D%22evenodd%22%20points%3D%226.33333333%2015%203%2011.6666667%204.33333333%2010.3333333%206.33333333%2012.3333333%2011.6666667%207%2013%208.33333333%22%3E%3C/polygon%3E%0A%3C/svg%3E) center center no-repeat; } } } diff --git a/src/style/_information.scss b/src/style/_information.scss index 459e1c04..5909d171 100644 --- a/src/style/_information.scss +++ b/src/style/_information.scss @@ -30,9 +30,9 @@ padding: 3px 5px; border-radius: 4px; - background: rgba(#000,.05); + background: rgba($info-code-background-color,.05); - @include text_code(#9012fe); + @include text_code($info-code-font-color); } a @@ -41,11 +41,11 @@ transition: all .4s; - @include text_body(#4990e2); + @include text_body($info-link-font-color); &:hover { - color: darken(#4990e2, 15%); + color: darken($info-link-font-color-hover, 15%); } } > div @@ -86,13 +86,13 @@ vertical-align: super; border-radius: 57px; - background: #7d8492; + background: $info-title-small-background-color; pre { margin: 0; - @include text_headline(#fff); + @include text_headline($info-title-small-pre-font-color); } } } diff --git a/src/style/_layout.scss b/src/style/_layout.scss index 5c0c9a1f..327c7633 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -34,11 +34,11 @@ cursor: pointer; transition: all .2s; - border-bottom: 1px solid rgba(#3b4151, .3); + border-bottom: 1px solid rgba($opblock-tag-border-bottom-color, .3); &:hover { - background: rgba(#000,.02); + background: rgba($opblock-tag-background-color-hover,.02); } } @@ -127,9 +127,9 @@ { margin: 0 0 15px 0; - border: 1px solid #000; + border: 1px solid $opblock-border-color; border-radius: 4px; - box-shadow: 0 0 3px rgba(#000,.19); + box-shadow: 0 0 3px rgba($opblock-box-shadow-color,.19); .tab-header { @@ -168,7 +168,7 @@ content: ''; transform: translateX(-50%); - background: #888; + background: $opblock-tab-header-tab-item-active-h4-span-after-background-color; } } } @@ -181,7 +181,7 @@ { .opblock-summary { - border-bottom: 1px solid #000; + border-bottom: 1px solid $opblock-isopen-summary-border-bottom-color; } } @@ -194,8 +194,8 @@ min-height: 50px; - background: rgba(#fff,.8); - box-shadow: 0 1px 2px rgba(#000,.1); + background: rgba($opblock-isopen-section-header-background-color,.8); + box-shadow: 0 1px 2px rgba($opblock-isopen-section-header-box-shadow-color,.1); label { @@ -239,10 +239,10 @@ text-align: center; border-radius: 3px; - background: #000; - text-shadow: 0 1px 0 rgba(#000,.1); + background: $opblock-summary-method-background-color; + text-shadow: 0 1px 0 rgba($opblock-summary-method-text-shadow-color,.1); - @include text_headline(#fff); + @include text_headline($opblock-summary-method-font-color); } .opblock-summary-path, @@ -377,7 +377,7 @@ margin: 20px 0; padding: 10px 10px; - border: 2px solid #d8dde7; + border: 2px solid $operational-filter-input-border-color; } } @@ -420,7 +420,7 @@ content: ''; - background: rgba(#000,.2); + background: rgba($tab-list-item-first-background-color,.2); } } @@ -525,7 +525,7 @@ { font-size: 11px; - @include text_code(#999); + @include text_code($response-col-status-undocumented-font-color); } } @@ -541,7 +541,7 @@ { font-size: 11px; - @include text_code(#999); + @include text_code($response-col-links-font-color); } } @@ -558,9 +558,9 @@ padding: 10px; border-radius: 4px; - background: #41444e; + background: $response-col-description-inner-markdown-background-color; - @include text_code(#fff); + @include text_code($response-col-description-inner-markdown-font-color); p { @@ -569,10 +569,10 @@ a { - @include text_code(#89bf04); + @include text_code($response-col-description-inner-markdown-link-font-color); text-decoration: underline; &:hover { - color: #81b10c; + color: $response-col-description-inner-markdown-link-font-color-hover; } } } @@ -593,13 +593,13 @@ hyphens: auto; border-radius: 4px; - background: #41444e; + background: $opblock-body-background-color; overflow-wrap: break-word; - @include text_code(#fff); + @include text_code($opblock-body-font-color); span { - color: #fff !important; + color: $opblock-body-font-color !important; } .headerline @@ -613,8 +613,8 @@ margin: 0 0 20px 0; padding: 30px 0; - background: #fff; - box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); + background: $scheme-container-background-color; + box-shadow: 0 1px 2px 0 rgba($scheme-container-box-shadow-color,.15); .schemes { @@ -648,14 +648,14 @@ margin: 0 0 20px 0; padding: 30px 0; - background: #fff; - box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); + background: $server-container-background-color; + box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15); .computed-url { margin: 2em 0; code { - color: grey; + color: $server-container-computed-url-code-font-color; display: inline-block; padding: 4px; font-size: 16px; @@ -755,8 +755,8 @@ animation: rotation 1s infinite linear, opacity .5s; opacity: 1; - border: 2px solid rgba(#555, .1); - border-top-color: rgba(#000, .6); + border: 2px solid rgba($loading-container-before-border-color, .1); + border-top-color: rgba($loading-container-before-border-top-color, .6); border-radius: 100%; backface-visibility: hidden; @@ -777,11 +777,11 @@ &.controls-accept-header { select { - border-color: green; + border-color: $response-content-type-controls-accept-header-select-border-color; } small { - color: green; + color: $response-content-type-controls-accept-header-small-font-color; font-size: .7em; } } diff --git a/src/style/_modal.scss b/src/style/_modal.scss index 4e13a21e..374365f6 100644 --- a/src/style/_modal.scss +++ b/src/style/_modal.scss @@ -15,7 +15,7 @@ bottom: 0; left: 0; - background: rgba(#000,.8); + background: rgba($dialog-ux-backdrop-background-color,.8); } .modal-ux @@ -31,10 +31,10 @@ transform: translate(-50%,-50%); - border: 1px solid #ebebeb; + border: 1px solid $dialog-ux-modal-border-color; border-radius: 4px; - background: #fff; - box-shadow: 0 10px 30px 0 rgba(0,0,0,.20); + background: $dialog-ux-modal-background-color; + box-shadow: 0 10px 30px 0 rgba($dialog-ux-modal-box-shadow-color,.20); } .modal-ux-content @@ -50,7 +50,7 @@ margin: 0 0 5px 0; - color: #41444e; + color: $dialog-ux-modal-content-font-color; @include text_body(); } @@ -72,7 +72,7 @@ padding: 12px 0; - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid $dialog-ux-modal-header-border-bottom-color; align-items: center; diff --git a/src/style/_models.scss b/src/style/_models.scss index c3a901d9..23b349d6 100644 --- a/src/style/_models.scss +++ b/src/style/_models.scss @@ -6,7 +6,7 @@ .deprecated { span, td { - color: #aaa !important; + color: $model-deprecated-font-color !important; } } @@ -82,9 +82,9 @@ white-space: nowrap; - color: #ebebeb; + color: $model-hint-font-color; border-radius: 4px; - background: rgba(#000,.7); + background: rgba($model-hint-background-color,.7); } p { @@ -97,7 +97,7 @@ section.models { margin: 30px 0; - border: 1px solid rgba(#3b4151, .3); + border: 1px solid rgba($section-models-border-color, .3); border-radius: 4px; &.is-open @@ -106,7 +106,7 @@ section.models h4 { margin: 0 0 5px 0; - border-bottom: 1px solid rgba(#3b4151, .3); + border-bottom: 1px solid rgba($section-models-isopen-h4-border-bottom-color, .3); } } h4 @@ -121,7 +121,7 @@ section.models cursor: pointer; transition: all .2s; - @include text_headline(#777); + @include text_headline($section-models-h4-font-color); align-items: center; svg @@ -136,7 +136,7 @@ section.models &:hover { - background: rgba(#000,.02); + background: rgba($section-models-h4-background-color-hover,.02); } } @@ -146,7 +146,7 @@ section.models margin: 0 0 10px 0; - @include text_headline(#777); + @include text_headline($section-models-h5-font-color); } .model-jump-to-path @@ -162,11 +162,11 @@ section.models transition: all .5s; border-radius: 4px; - background: rgba(#000,.05); + background: rgba($section-models-model-container-background-color,.05); &:hover { - background: rgba(#000,.07); + background: rgba($section-models-model-container-background-color,.07); } &:first-of-type @@ -192,7 +192,7 @@ section.models padding: 10px; border-radius: 4px; - background: rgba(#000,.1); + background: rgba($section-models-model-box-background-color,.1); .model-jump-to-path { @@ -211,7 +211,7 @@ section.models { font-size: 16px; - @include text_headline(#555); + @include text_headline($section-models-model-title-font-color); } .model-deprecated-warning @@ -243,7 +243,7 @@ span .prop-type { - color: #55a; + color: $prop-type-font-color; } .prop-enum @@ -252,5 +252,5 @@ span } .prop-format { - color: #999; + color: $prop-format-font-color; } diff --git a/src/style/_table.scss b/src/style/_table.scss index 7f065529..02dd92ba 100644 --- a/src/style/_table.scss +++ b/src/style/_table.scss @@ -74,7 +74,7 @@ table text-align: left; - border-bottom: 1px solid rgba(#3b4151, .2); + border-bottom: 1px solid rgba($table-thead-td-border-bottom-color, .2); @include text_body(); } @@ -126,7 +126,7 @@ table content: 'required'; - color: rgba(#f00, .6); + color: rgba($table-parameter-name-required-font-color, .6); } } } @@ -136,7 +136,7 @@ table font-size: 12px; font-style: italic; - @include text_code(#888); + @include text_code($table-parameter-in-font-color); } .parameter__deprecated @@ -144,7 +144,7 @@ table font-size: 12px; font-style: italic; - @include text_code(#f00); + @include text_code($table-parameter-deprecated-font-color); } diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss index 653598b6..f9f5bfbf 100644 --- a/src/style/_topbar.scss +++ b/src/style/_topbar.scss @@ -2,7 +2,7 @@ { padding: 8px 0; - background-color: #89bf04; + background-color: $topbar-background-color; .topbar-wrapper { display: flex; @@ -21,7 +21,7 @@ text-decoration: none; - @include text_headline(#fff); + @include text_headline($topbar-link-font-color); span { @@ -41,7 +41,7 @@ width: 100%; margin: 0; - border: 2px solid #547f00; + border: 2px solid $topbar-download-url-wrapper-element-border-color; border-radius: 4px 0 0 4px; outline: none; } @@ -71,7 +71,7 @@ width: 100%; - border: 2px solid #547f00; + border: 2px solid $topbar-download-url-wrapper-element-border-color; outline: none; box-shadow: none; } @@ -87,9 +87,9 @@ border: none; border-radius: 0 4px 4px 0; - background: #547f00; + background: $topbar-download-url-button-background-color; - @include text_headline(#fff); + @include text_headline($topbar-download-url-button-font-color); } } } diff --git a/src/style/_type.scss b/src/style/_type.scss index 16c08df6..cf66896f 100644 --- a/src/style/_type.scss +++ b/src/style/_type.scss @@ -1,11 +1,11 @@ -@mixin text_body($color: #3b4151) +@mixin text_body($color: $text-body-default-font-color) { font-family: 'Open Sans', sans-serif; color: $color; } -@mixin text_code($color: #3b4151) +@mixin text_code($color: $text-code-default-font-color) { font-family: 'Source Code Pro', monospace; font-weight: 600; @@ -13,7 +13,7 @@ color: $color; } -@mixin text_headline($color: #3b4151) +@mixin text_headline($color: $text-headline-default-font-color) { font-family: 'Titillium Web', sans-serif; diff --git a/src/style/_variables.scss b/src/style/_variables.scss index e69de29b..f5e6a697 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -0,0 +1,218 @@ + +$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; + +$color-primary: #89bf04 !default; +$color-secondary: #9012fe !default; +$color-info: #4990e2 !default; +$color-warning: #ff6060 !default; +$color-danger: #f00 !default; + +$_color-post: #49cc90 !default; +$_color-get: #61affe !default; +$_color-put: #fca130 !default; +$_color-delete: #f93e3e !default; +$_color-head: #9012fe !default; +$_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; + +// Buttons + +$btn-background-color: transparent !default; +$btn-border-color: $gray-400 !default; +$btn-font-color: inherit !default; +$btn-box-shadow-color: $gray-base !default; + +$btn-authorize-background-color: transparent !default; +$btn-authorize-border-color: $_color-post !default; +$btn-authorize-font-color: $_color-post !default; +$btn-authorize-svg-fill-color: $_color-post !default; + +$btn-cancel-background-color: transparent !default; +$btn-cancel-border-color: $color-warning !default; +$btn-cancel-font-color: $color-warning !default; + +$btn-execute-background-color: transparent !default; +$btn-execute-border-color: $color-info !default; +$btn-execute-font-color: $white !default; +$btn-execute-background-color-alt: $color-info !default; + +$expand-methods-svg-fill-color: $gray-500 !default; +$expand-methods-svg-fill-color-hover: $gray-800 !default; + +// Errors + +$errors-wrapper-background-color: $_color-delete !default; +$errors-wrapper-border-color: $_color-delete !default; + +$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-input-border-color: #d9d9d9 !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-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; + +// Information + +$info-code-background-color: $gray-base !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-pre-font-color: $white !default; + +// Layout + +$opblock-border-color: $gray-base !default; +$opblock-box-shadow-color: $gray-base !default; + +$opblock-tag-border-bottom-color: $gray-custom-2 !default; +$opblock-tag-background-color-hover: $gray-base !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-section-header-background-color: $white !default; +$opblock-isopen-section-header-box-shadow-color: $gray-base !default; + +$opblock-summary-method-background-color: $gray-base !default; +$opblock-summary-method-font-color: $white !default; +$opblock-summary-method-text-shadow-color: $gray-base !default; + +$operational-filter-input-border-color: #d8dde7 !default; + +$tab-list-item-first-background-color: $gray-base !default; + +$response-col-status-undocumented-font-color: $gray-300 !default; + +$response-col-links-font-color: $gray-300 !default; + +$response-col-description-inner-markdown-font-color: $white !default; +$response-col-description-inner-markdown-background-color: $gray-custom-1 !default; + +$response-col-description-inner-markdown-link-font-color: $color-primary !default; +$response-col-description-inner-markdown-link-font-color-hover: $color-primary-hover !default; + +$opblock-body-background-color: $gray-custom-1 !default; +$opblock-body-font-color: $white !default; + +$scheme-container-background-color: $white !default; +$scheme-container-box-shadow-color: $gray-base !default; + +$server-container-background-color: $white !default; +$server-container-box-shadow-color: $gray-base !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; + +$response-content-type-controls-accept-header-select-border-color: $color-green !default; +$response-content-type-controls-accept-header-small-font-color: $color-green !default; + +// Modal + +$dialog-ux-backdrop-background-color: $gray-base !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-content-font-color: $gray-custom-1 !default; + +$dialog-ux-modal-header-border-bottom-color: $gray-50 !default; + +// Models + +$model-deprecated-font-color: $gray-200 !default; + +$model-hint-font-color: $gray-50 !default; +$model-hint-background-color: $gray-base !default; + +$section-models-border-color: $gray-custom-2 !default; + +$section-models-isopen-h4-border-bottom-color: $section-models-border-color !default; + +$section-models-h4-font-color: $gray-500 !default; +$section-models-h4-background-color-hover: $gray-base !default; + +$section-models-h5-font-color: $gray-500 !default; + +$section-models-model-container-background-color: $gray-base !default; + +$section-models-model-box-background-color: $gray-base !default; + +$section-models-model-title-font-color: $gray-700 !default; + +$prop-type-font-color: #55a !default; + +$prop-format-font-color: $gray-300 !default; + +// Tables + +$table-thead-td-border-bottom-color: $gray-custom-2 !default; + +$table-parameter-name-required-font-color: $color-danger !default; + +$table-parameter-in-font-color: $gray-400 !default; + +$table-parameter-deprecated-font-color: $color-danger !default; + +// Topbar + +$topbar-background-color: $color-primary !default; + +$topbar-link-font-color: $white !default; + +$topbar-download-url-wrapper-element-border-color: #547f00 !default; + +$topbar-download-url-button-background-color: #547f00 !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; -- GitLab