Skip to content

Commit 87f923f

Browse files
taraokellyshockey
taraokelly
authored and
shockey
committed
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
1 parent c38bf85 commit 87f923f

File tree

3 files changed

+87
-82
lines changed

3 files changed

+87
-82
lines changed

‎src/style/_colors.scss

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/style/_variables.scss

Lines changed: 87 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,55 @@
1-
$gray-base: #000 !default;
2-
$white: #fff !default;
3-
$gray-50: #ebebeb !default;
4-
$gray-100: #d8dde7 !default;
5-
$gray-200: lighten($gray-base, 62.75%) !default; // #aaa
6-
$gray-300: lighten($gray-base, 56.5%) !default; // #999
7-
$gray-400: lighten($gray-base, 50%) !default; // #888
8-
$gray-500: lighten($gray-base, 43.75%) !default; // #777
9-
$gray-600: lighten($gray-base, 37.5%) !default; // #666
10-
$gray-650: lighten($gray-base, 33.3%) !default; // ##555555
11-
$gray-700: lighten($gray-base, 31.25%) !default; // #555
12-
$gray-800: lighten($gray-base, 25%) !default; // #444
13-
$gray-900: lighten($gray-base, 18.75%) !default; // #333
14-
15-
$gray-custom-1: #41444e !default;
16-
$gray-custom-2: #3b4151 !default;
1+
// Base Colours
2+
$black: #000;
3+
$white: #fff;
4+
$gray-50: lighten($black, 92%); //ebebeb
5+
$gray-200: lighten($black, 62.75%); // #a0a0a0
6+
$gray-300: lighten($black, 56.5%); // #909090
7+
$gray-400: lighten($black, 50%); // #808080
8+
$gray-500: lighten($black, 43.75%); // #707070
9+
$gray-600: lighten($black, 37.5%); // #606060
10+
$gray-650: lighten($black, 33.3%); // #555555
11+
$gray-700: lighten($black, 31.25%); // #505050
12+
$gray-800: lighten($black, 25%); // #404040
13+
$gray-900: lighten($black, 18.75%); // #303030
14+
15+
$cod-gray: #1b1b1b;
16+
$bright-gray: #3b4151;
17+
$mako-gray: #41444e;
18+
$waterloo-gray: #7d8492;
19+
$alto-gray: #d9d9d9;
20+
$mercury-gray: #e4e4e4;
21+
$concrete-gray: #e8e8e8;
22+
$alabaster: #f7f7f7;
23+
$apple-green: #62a03f;
24+
$green-haze: #009d77;
25+
$japanese-laurel: #008000;
26+
$persian-green: #00a0a7;
27+
$geyser-blue: #d8dde7;
28+
$dodger-blue: #1391ff;
29+
$endeavour-blue: #005dae;
30+
$scampi-purple: #55a;
31+
$electric-violet: #7300e5;
32+
$persian-red: #cf3030;
33+
$mango-tango: #e97500;
34+
35+
// Theme
1736

1837
$color-primary: #89bf04 !default;
1938
$color-secondary: #9012fe !default;
2039
$color-info: #4990e2 !default;
2140
$color-warning: #ff6060 !default;
2241
$color-danger: #f00 !default;
2342

24-
$_color-post: #49cc90 !default;
25-
$_color-get: #61affe !default;
26-
$_color-put: #fca130 !default;
27-
$_color-delete: #f93e3e !default;
28-
$_color-head: #9012fe !default;
29-
$_color-patch: #50e3c2 !default;
30-
$_color-disabled: #ebebeb !default;
31-
$_color-options: #0d5aa7 !default;
43+
$color-primary-hover: lighten($color-primary, .5%) !default;
3244

33-
$color-green: #008000 !default;
34-
35-
$color-primary-hover: #81b10c !default;
45+
$_color-post: $green-haze !default;
46+
$_color-get: $dodger-blue !default;
47+
$_color-put: $mango-tango !default;
48+
$_color-delete: $persian-red !default;
49+
$_color-head: $electric-violet !default;
50+
$_color-patch: $persian-green !default;
51+
$_color-disabled: $mercury-gray !default;
52+
$_color-options: $endeavour-blue !default;
3653

3754
// Authorize
3855

@@ -43,7 +60,7 @@ $auth-container-border-color: $gray-50 !default;
4360
$btn-background-color: transparent !default;
4461
$btn-border-color: $gray-400 !default;
4562
$btn-font-color: inherit !default;
46-
$btn-box-shadow-color: $gray-base !default;
63+
$btn-box-shadow-color: $black !default;
4764

4865
$btn-authorize-background-color: transparent !default;
4966
$btn-authorize-border-color: $_color-post !default;
@@ -71,95 +88,95 @@ $errors-wrapper-errors-small-font-color: $gray-600 !default;
7188

7289
// Form
7390

74-
$form-select-background-color: #f7f7f7 !default;
75-
$form-select-border-color: $gray-custom-1 !default;
76-
$form-select-box-shadow-color: $gray-base !default;
91+
$form-select-background-color: $alabaster !default;
92+
$form-select-border-color: $mako-gray !default;
93+
$form-select-box-shadow-color: $black !default;
7794

78-
$form-input-border-color: #d9d9d9 !default;
95+
$form-input-border-color: $alto-gray !default;
7996
$form-input-background-color: $white !default;
8097

8198
$form-textarea-background-color: $white !default;
8299
$form-textarea-focus-border-color: $_color-get !default;
83100

84-
$form-textarea-curl-background-color: $gray-custom-1 !default;
101+
$form-textarea-curl-background-color: $mako-gray !default;
85102
$form-textarea-curl-font-color: $white !default;
86103

87104
$form-checkbox-label-font-color: $gray-900 !default;
88-
$form-checkbox-background-color: #e8e8e8 !default;
89-
$form-checkbox-box-shadow-color: #e8e8e8 !default;
105+
$form-checkbox-background-color: $concrete-gray !default;
106+
$form-checkbox-box-shadow-color: $concrete-gray !default;
90107

91108
// Information
92109

93-
$info-code-background-color: $gray-base !default;
110+
$info-code-background-color: $black !default;
94111
$info-code-font-color: $_color-head !default;
95112

96113
$info-link-font-color: $color-info !default;
97114
$info-link-font-color-hover: $info-link-font-color !default;
98115

99-
$info-title-small-background-color: #7d8492 !default;
116+
$info-title-small-background-color: $waterloo-gray !default;
100117

101118
$info-title-small-pre-font-color: $white !default;
102119

103120
// Layout
104121

105-
$opblock-border-color: $gray-base !default;
106-
$opblock-box-shadow-color: $gray-base !default;
122+
$opblock-border-color: $black !default;
123+
$opblock-box-shadow-color: $black !default;
107124

108-
$opblock-tag-border-bottom-color: $gray-custom-2 !default;
109-
$opblock-tag-background-color-hover: $gray-base !default;
125+
$opblock-tag-border-bottom-color: $bright-gray !default;
126+
$opblock-tag-background-color-hover: $black !default;
110127

111128
$opblock-tab-header-tab-item-active-h4-span-after-background-color: $gray-400 !default;
112129

113-
$opblock-isopen-summary-border-bottom-color: $gray-base !default;
130+
$opblock-isopen-summary-border-bottom-color: $black !default;
114131

115132
$opblock-isopen-section-header-background-color: $white !default;
116-
$opblock-isopen-section-header-box-shadow-color: $gray-base !default;
133+
$opblock-isopen-section-header-box-shadow-color: $black !default;
117134

118-
$opblock-summary-method-background-color: $gray-base !default;
135+
$opblock-summary-method-background-color: $black !default;
119136
$opblock-summary-method-font-color: $white !default;
120-
$opblock-summary-method-text-shadow-color: $gray-base !default;
137+
$opblock-summary-method-text-shadow-color: $black !default;
121138

122-
$operational-filter-input-border-color: #d8dde7 !default;
139+
$operational-filter-input-border-color: $geyser-blue !default;
123140

124-
$tab-list-item-first-background-color: $gray-base !default;
141+
$tab-list-item-first-background-color: $black !default;
125142

126143
$response-col-status-undocumented-font-color: $gray-300 !default;
127144

128145
$response-col-links-font-color: $gray-300 !default;
129146

130147
$response-col-description-inner-markdown-font-color: $white !default;
131-
$response-col-description-inner-markdown-background-color: $gray-custom-1 !default;
148+
$response-col-description-inner-markdown-background-color: $mako-gray !default;
132149

133150
$response-col-description-inner-markdown-link-font-color: $color-primary !default;
134151
$response-col-description-inner-markdown-link-font-color-hover: $color-primary-hover !default;
135152

136-
$opblock-body-background-color: $gray-custom-1 !default;
153+
$opblock-body-background-color: $mako-gray !default;
137154
$opblock-body-font-color: $white !default;
138155

139156
$scheme-container-background-color: $white !default;
140-
$scheme-container-box-shadow-color: $gray-base !default;
157+
$scheme-container-box-shadow-color: $black !default;
141158

142159
$server-container-background-color: $white !default;
143-
$server-container-box-shadow-color: $gray-base !default;
160+
$server-container-box-shadow-color: $black !default;
144161

145162
$server-container-computed-url-code-font-color: $gray-400 !default;
146163

147164
$loading-container-before-border-color: $gray-650 !default;
148-
$loading-container-before-border-top-color: $gray-base !default;
165+
$loading-container-before-border-top-color: $black !default;
149166

150-
$response-content-type-controls-accept-header-select-border-color: $color-green !default;
151-
$response-content-type-controls-accept-header-small-font-color: $color-green !default;
167+
$response-content-type-controls-accept-header-select-border-color: $japanese-laurel !default;
168+
$response-content-type-controls-accept-header-small-font-color: $japanese-laurel !default;
152169

153170
// Modal
154171

155-
$dialog-ux-backdrop-background-color: $gray-base !default;
172+
$dialog-ux-backdrop-background-color: $black !default;
156173

157174

158175
$dialog-ux-modal-background-color: $white !default;
159176
$dialog-ux-modal-border-color: $gray-50 !default;
160-
$dialog-ux-modal-box-shadow-color: $gray-base !default;
177+
$dialog-ux-modal-box-shadow-color: $black !default;
161178

162-
$dialog-ux-modal-content-font-color: $gray-custom-1 !default;
179+
$dialog-ux-modal-content-font-color: $mako-gray !default;
163180

164181
$dialog-ux-modal-header-border-bottom-color: $gray-50 !default;
165182

@@ -168,30 +185,30 @@ $dialog-ux-modal-header-border-bottom-color: $gray-50 !default;
168185
$model-deprecated-font-color: $gray-200 !default;
169186

170187
$model-hint-font-color: $gray-50 !default;
171-
$model-hint-background-color: $gray-base !default;
188+
$model-hint-background-color: $black !default;
172189

173-
$section-models-border-color: $gray-custom-2 !default;
190+
$section-models-border-color: $bright-gray !default;
174191

175192
$section-models-isopen-h4-border-bottom-color: $section-models-border-color !default;
176193

177194
$section-models-h4-font-color: $gray-600 !default;
178-
$section-models-h4-background-color-hover: $gray-base !default;
195+
$section-models-h4-background-color-hover: $black !default;
179196

180197
$section-models-h5-font-color: $gray-500 !default;
181198

182-
$section-models-model-container-background-color: $gray-base !default;
199+
$section-models-model-container-background-color: $black !default;
183200

184-
$section-models-model-box-background-color: $gray-base !default;
201+
$section-models-model-box-background-color: $black !default;
185202

186203
$section-models-model-title-font-color: $gray-700 !default;
187204

188-
$prop-type-font-color: #55a !default;
205+
$prop-type-font-color: $scampi-purple !default;
189206

190207
$prop-format-font-color: $gray-600 !default;
191208

192209
// Tables
193210

194-
$table-thead-td-border-bottom-color: $gray-custom-2 !default;
211+
$table-thead-td-border-bottom-color: $bright-gray !default;
195212

196213
$table-parameter-name-required-font-color: $color-danger !default;
197214

@@ -201,17 +218,17 @@ $table-parameter-deprecated-font-color: $color-danger !default;
201218

202219
// Topbar
203220

204-
$topbar-background-color: #1b1b1b !default;
221+
$topbar-background-color: $cod-gray !default;
205222

206223
$topbar-link-font-color: $white !default;
207224

208-
$topbar-download-url-wrapper-element-border-color: #62A03F !default;
225+
$topbar-download-url-wrapper-element-border-color: $apple-green !default;
209226

210-
$topbar-download-url-button-background-color: #62A03F !default;
227+
$topbar-download-url-button-background-color: $apple-green !default;
211228
$topbar-download-url-button-font-color: $white !default;
212229

213230
// Type
214231

215-
$text-body-default-font-color: $gray-custom-2 !default;
216-
$text-code-default-font-color: $gray-custom-2 !default;
217-
$text-headline-default-font-color: $gray-custom-2 !default;
232+
$text-body-default-font-color: $bright-gray !default;
233+
$text-code-default-font-color: $bright-gray !default;
234+
$text-headline-default-font-color: $bright-gray !default;

‎src/style/main.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@import '~tachyons-sass/tachyons.scss';
44
@import 'mixins';
55
@import 'variables';
6-
@import 'colors';
76
@import 'type';
87
@import 'layout';
98
@import 'buttons';

0 commit comments

Comments
 (0)