Skip to content

Commit c0cacc3

Browse files
mdoXhmikosR
mdo
authored and
XhmikosR
committed
Add shades and tints for each color
1 parent ff29c12 commit c0cacc3

File tree

3 files changed

+236
-22
lines changed

3 files changed

+236
-22
lines changed

‎scss/_functions.scss‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,24 +63,27 @@
6363
}
6464
}
6565

66-
// Retrieve color Sass maps
67-
@function color($key: "blue") {
68-
@return map-get($colors, $key);
69-
}
70-
71-
@function theme-color($key: "primary") {
72-
@return map-get($theme-colors, $key);
73-
}
74-
75-
@function gray($key: "100") {
76-
@return map-get($grays, $key);
77-
}
78-
7966
// Request a theme color level
8067
@function theme-color-level($color-name: "primary", $level: 0) {
81-
$color: theme-color($color-name);
68+
$color: map-get($theme-colors, $color-name);
8269
$color-base: if($level > 0, $black, $white);
8370
$level: abs($level);
8471

8572
@return mix($color-base, $color, $level * $theme-color-interval);
8673
}
74+
75+
// @function color-level($color-name: "blue", $level: 0) {
76+
// $color: map-get($colors, $color-name);
77+
// $color-base: if($level > 0, $black, $white);
78+
// $level: abs($level);
79+
//
80+
// @return mix($color-base, $color, $level * $theme-color-interval);
81+
// }
82+
83+
@function tint-color($color, $level) {
84+
@return mix(black, $color, $level * $theme-color-interval);
85+
}
86+
87+
@function shade-color($color, $level) {
88+
@return mix(white, $color, $level * $theme-color-interval);
89+
}

‎scss/_variables.scss‎

Lines changed: 205 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,205 @@ $yiq-contrasted-threshold: 150 !default;
101101
$yiq-text-dark: $gray-900 !default;
102102
$yiq-text-light: $white !default;
103103

104+
$blue-100: shade-color($blue, 8) !default;
105+
$blue-200: shade-color($blue, 6) !default;
106+
$blue-300: shade-color($blue, 4) !default;
107+
$blue-400: shade-color($blue, 2) !default;
108+
$blue-500: $blue !default;
109+
$blue-600: tint-color($blue, 2) !default;
110+
$blue-700: tint-color($blue, 4) !default;
111+
$blue-800: tint-color($blue, 6) !default;
112+
$blue-900: tint-color($blue, 8) !default;
113+
114+
$indigo-100: shade-color($indigo, 8) !default;
115+
$indigo-200: shade-color($indigo, 6) !default;
116+
$indigo-300: shade-color($indigo, 4) !default;
117+
$indigo-400: shade-color($indigo, 2) !default;
118+
$indigo-500: $indigo !default;
119+
$indigo-600: tint-color($indigo, 2) !default;
120+
$indigo-700: tint-color($indigo, 4) !default;
121+
$indigo-800: tint-color($indigo, 6) !default;
122+
$indigo-900: tint-color($indigo, 8) !default;
123+
124+
$purple-100: shade-color($purple, 8) !default;
125+
$purple-200: shade-color($purple, 6) !default;
126+
$purple-300: shade-color($purple, 4) !default;
127+
$purple-400: shade-color($purple, 2) !default;
128+
$purple-500: $purple !default;
129+
$purple-600: tint-color($purple, 2) !default;
130+
$purple-700: tint-color($purple, 4) !default;
131+
$purple-800: tint-color($purple, 6) !default;
132+
$purple-900: tint-color($purple, 8) !default;
133+
134+
$pink-100: shade-color($pink, 8) !default;
135+
$pink-200: shade-color($pink, 6) !default;
136+
$pink-300: shade-color($pink, 4) !default;
137+
$pink-400: shade-color($pink, 2) !default;
138+
$pink-500: $pink !default;
139+
$pink-600: tint-color($pink, 2) !default;
140+
$pink-700: tint-color($pink, 4) !default;
141+
$pink-800: tint-color($pink, 6) !default;
142+
$pink-900: tint-color($pink, 8) !default;
143+
144+
$red-100: shade-color($red, 8) !default;
145+
$red-200: shade-color($red, 6) !default;
146+
$red-300: shade-color($red, 4) !default;
147+
$red-400: shade-color($red, 2) !default;
148+
$red-500: $red !default;
149+
$red-600: tint-color($red, 2) !default;
150+
$red-700: tint-color($red, 4) !default;
151+
$red-800: tint-color($red, 6) !default;
152+
$red-900: tint-color($red, 8) !default;
153+
154+
$orange-100: shade-color($orange, 8) !default;
155+
$orange-200: shade-color($orange, 6) !default;
156+
$orange-300: shade-color($orange, 4) !default;
157+
$orange-400: shade-color($orange, 2) !default;
158+
$orange-500: $orange !default;
159+
$orange-600: tint-color($orange, 2) !default;
160+
$orange-700: tint-color($orange, 4) !default;
161+
$orange-800: tint-color($orange, 6) !default;
162+
$orange-900: tint-color($orange, 8) !default;
163+
164+
$yellow-100: shade-color($yellow, 8) !default;
165+
$yellow-200: shade-color($yellow, 6) !default;
166+
$yellow-300: shade-color($yellow, 4) !default;
167+
$yellow-400: shade-color($yellow, 2) !default;
168+
$yellow-500: $yellow !default;
169+
$yellow-600: tint-color($yellow, 2) !default;
170+
$yellow-700: tint-color($yellow, 4) !default;
171+
$yellow-800: tint-color($yellow, 6) !default;
172+
$yellow-900: tint-color($yellow, 8) !default;
173+
174+
$green-100: shade-color($green, 8) !default;
175+
$green-200: shade-color($green, 6) !default;
176+
$green-300: shade-color($green, 4) !default;
177+
$green-400: shade-color($green, 2) !default;
178+
$green-500: $green !default;
179+
$green-600: tint-color($green, 2) !default;
180+
$green-700: tint-color($green, 4) !default;
181+
$green-800: tint-color($green, 6) !default;
182+
$green-900: tint-color($green, 8) !default;
183+
184+
$teal-100: shade-color($teal, 8) !default;
185+
$teal-200: shade-color($teal, 6) !default;
186+
$teal-300: shade-color($teal, 4) !default;
187+
$teal-400: shade-color($teal, 2) !default;
188+
$teal-500: $teal !default;
189+
$teal-600: tint-color($teal, 2) !default;
190+
$teal-700: tint-color($teal, 4) !default;
191+
$teal-800: tint-color($teal, 6) !default;
192+
$teal-900: tint-color($teal, 8) !default;
193+
194+
$cyan-100: shade-color($cyan, 8) !default;
195+
$cyan-200: shade-color($cyan, 6) !default;
196+
$cyan-300: shade-color($cyan, 4) !default;
197+
$cyan-400: shade-color($cyan, 2) !default;
198+
$cyan-500: $cyan !default;
199+
$cyan-600: tint-color($cyan, 2) !default;
200+
$cyan-700: tint-color($cyan, 4) !default;
201+
$cyan-800: tint-color($cyan, 6) !default;
202+
$cyan-900: tint-color($cyan, 8) !default;
203+
204+
.blue-100 { background-color: $blue-100; }
205+
.blue-200 { background-color: $blue-200; }
206+
.blue-300 { background-color: $blue-300; }
207+
.blue-400 { background-color: $blue-400; }
208+
.blue-500 { background-color: $blue-500; }
209+
.blue-600 { background-color: $blue-600; }
210+
.blue-700 { background-color: $blue-700; }
211+
.blue-800 { background-color: $blue-800; }
212+
.blue-900 { background-color: $blue-900; }
213+
214+
.indigo-100 { background-color: $indigo-100; }
215+
.indigo-200 { background-color: $indigo-200; }
216+
.indigo-300 { background-color: $indigo-300; }
217+
.indigo-400 { background-color: $indigo-400; }
218+
.indigo-500 { background-color: $indigo-500; }
219+
.indigo-600 { background-color: $indigo-600; }
220+
.indigo-700 { background-color: $indigo-700; }
221+
.indigo-800 { background-color: $indigo-800; }
222+
.indigo-900 { background-color: $indigo-900; }
223+
224+
.purple-100 { background-color: $purple-100; }
225+
.purple-200 { background-color: $purple-200; }
226+
.purple-300 { background-color: $purple-300; }
227+
.purple-400 { background-color: $purple-400; }
228+
.purple-500 { background-color: $purple-500; }
229+
.purple-600 { background-color: $purple-600; }
230+
.purple-700 { background-color: $purple-700; }
231+
.purple-800 { background-color: $purple-800; }
232+
.purple-900 { background-color: $purple-900; }
233+
234+
.pink-100 { background-color: $pink-100; }
235+
.pink-200 { background-color: $pink-200; }
236+
.pink-300 { background-color: $pink-300; }
237+
.pink-400 { background-color: $pink-400; }
238+
.pink-500 { background-color: $pink-500; }
239+
.pink-600 { background-color: $pink-600; }
240+
.pink-700 { background-color: $pink-700; }
241+
.pink-800 { background-color: $pink-800; }
242+
.pink-900 { background-color: $pink-900; }
243+
244+
.red-100 { background-color: $red-100; }
245+
.red-200 { background-color: $red-200; }
246+
.red-300 { background-color: $red-300; }
247+
.red-400 { background-color: $red-400; }
248+
.red-500 { background-color: $red-500; }
249+
.red-600 { background-color: $red-600; }
250+
.red-700 { background-color: $red-700; }
251+
.red-800 { background-color: $red-800; }
252+
.red-900 { background-color: $red-900; }
253+
254+
.orange-100 { background-color: $orange-100; }
255+
.orange-200 { background-color: $orange-200; }
256+
.orange-300 { background-color: $orange-300; }
257+
.orange-400 { background-color: $orange-400; }
258+
.orange-500 { background-color: $orange-500; }
259+
.orange-600 { background-color: $orange-600; }
260+
.orange-700 { background-color: $orange-700; }
261+
.orange-800 { background-color: $orange-800; }
262+
.orange-900 { background-color: $orange-900; }
263+
264+
.yellow-100 { background-color: $yellow-100; }
265+
.yellow-200 { background-color: $yellow-200; }
266+
.yellow-300 { background-color: $yellow-300; }
267+
.yellow-400 { background-color: $yellow-400; }
268+
.yellow-500 { background-color: $yellow-500; }
269+
.yellow-600 { background-color: $yellow-600; }
270+
.yellow-700 { background-color: $yellow-700; }
271+
.yellow-800 { background-color: $yellow-800; }
272+
.yellow-900 { background-color: $yellow-900; }
273+
274+
.green-100 { background-color: $green-100; }
275+
.green-200 { background-color: $green-200; }
276+
.green-300 { background-color: $green-300; }
277+
.green-400 { background-color: $green-400; }
278+
.green-500 { background-color: $green-500; }
279+
.green-600 { background-color: $green-600; }
280+
.green-700 { background-color: $green-700; }
281+
.green-800 { background-color: $green-800; }
282+
.green-900 { background-color: $green-900; }
283+
284+
.teal-100 { background-color: $teal-100; }
285+
.teal-200 { background-color: $teal-200; }
286+
.teal-300 { background-color: $teal-300; }
287+
.teal-400 { background-color: $teal-400; }
288+
.teal-500 { background-color: $teal-500; }
289+
.teal-600 { background-color: $teal-600; }
290+
.teal-700 { background-color: $teal-700; }
291+
.teal-800 { background-color: $teal-800; }
292+
.teal-900 { background-color: $teal-900; }
293+
294+
.cyan-100 { background-color: $cyan-100; }
295+
.cyan-200 { background-color: $cyan-200; }
296+
.cyan-300 { background-color: $cyan-300; }
297+
.cyan-400 { background-color: $cyan-400; }
298+
.cyan-500 { background-color: $cyan-500; }
299+
.cyan-600 { background-color: $cyan-600; }
300+
.cyan-700 { background-color: $cyan-700; }
301+
.cyan-800 { background-color: $cyan-800; }
302+
.cyan-900 { background-color: $cyan-900; }
104303

105304
// Options
106305
//
@@ -169,7 +368,7 @@ $body-color: $gray-900 !default;
169368
//
170369
// Style anchor elements.
171370

172-
$link-color: theme-color("primary") !default;
371+
$link-color: $primary !default;
173372
$link-decoration: none !default;
174373
$link-hover-color: darken($link-color, 15%) !default;
175374
$link-hover-decoration: underline !default;
@@ -243,7 +442,7 @@ $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
243442
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
244443

245444
$component-active-color: $white !default;
246-
$component-active-bg: theme-color("primary") !default;
445+
$component-active-bg: $primary !default;
247446

248447
$caret-width: .3em !default;
249448
$caret-vertical-align: $caret-width * .85 !default;
@@ -532,7 +731,7 @@ $custom-control-label-disabled-color: $gray-600 !default;
532731

533732
$custom-control-indicator-checked-color: $component-active-color !default;
534733
$custom-control-indicator-checked-bg: $component-active-bg !default;
535-
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
734+
$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default;
536735
$custom-control-indicator-checked-box-shadow: none !default;
537736
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
538737

@@ -646,8 +845,8 @@ $custom-file-text: (
646845

647846
$form-feedback-margin-top: $form-text-margin-top !default;
648847
$form-feedback-font-size: $small-font-size !default;
649-
$form-feedback-valid-color: theme-color("success") !default;
650-
$form-feedback-invalid-color: theme-color("danger") !default;
848+
$form-feedback-valid-color: $success !default;
849+
$form-feedback-invalid-color: $danger !default;
651850

652851
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
653852
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
@@ -986,7 +1185,7 @@ $progress-bg: $gray-200 !default;
9861185
$progress-border-radius: $border-radius !default;
9871186
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
9881187
$progress-bar-color: $white !default;
989-
$progress-bar-bg: theme-color("primary") !default;
1188+
$progress-bar-bg: $primary !default;
9901189
$progress-bar-animation-timing: 1s linear infinite !default;
9911190
$progress-bar-transition: width .6s ease !default;
9921191

‎site/docs/4.3/getting-started/theming.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,20 @@ All colors available in Bootstrap 4, are available as Sass variables and a Sass
257257
<div class="row">
258258
{% for color in site.data.colors %}
259259
{% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
260-
<div class="col-md-4">
261-
<div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
260+
<div class="col-md-4 mb-3">
261+
<div class="p-3 mb-2 swatch-{{ color.name }}">
262+
<strong class="d-block">{{ color.name | capitalize }}</strong>
263+
{{ color.hex }}
264+
</div>
265+
<div class="p-3 {{ color.name }}-100">{{ color.name }}-100</div>
266+
<div class="p-3 {{ color.name }}-200">{{ color.name }}-200</div>
267+
<div class="p-3 {{ color.name }}-300">{{ color.name }}-300</div>
268+
<div class="p-3 {{ color.name }}-400">{{ color.name }}-400</div>
269+
<div class="p-3 text-white {{ color.name }}-500">{{ color.name }}-500</div>
270+
<div class="p-3 text-white {{ color.name }}-600">{{ color.name }}-600</div>
271+
<div class="p-3 text-white {{ color.name }}-700">{{ color.name }}-700</div>
272+
<div class="p-3 text-white {{ color.name }}-800">{{ color.name }}-800</div>
273+
<div class="p-3 text-white {{ color.name }}-900">{{ color.name }}-900</div>
262274
</div>
263275
{% endunless %}
264276
{% endfor %}

0 commit comments

Comments
 (0)