Skip to content

Commit ef763d5

Browse files
jgthmsjgthms
committed
Explain findColorInvert
1 parent 4570860 commit ef763d5

8 files changed

Lines changed: 230 additions & 6 deletions

File tree

‎docs/bulma-docs.sass‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,7 @@ html
2020
\::selection
2121
background: $primary
2222
color: $primary-invert
23+
24+
@debug "hsl(294, 71%, 79%)"
25+
@debug colorLuminance(hsl(294, 71%, 79%))
26+
@debug findColorInvert(hsl(294, 71%, 79%))

‎docs/css/bulma-docs.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2053,6 +2053,7 @@ input[type="submit"].button {
20532053
.select {
20542054
display: inline-block;
20552055
height: 2.25em;
2056+
max-width: 100%;
20562057
position: relative;
20572058
vertical-align: top;
20582059
}
@@ -2105,6 +2106,7 @@ input[type="submit"].button {
21052106
cursor: pointer;
21062107
display: block;
21072108
font-size: 1em;
2109+
max-width: 100%;
21082110
outline: none;
21092111
padding-right: 2.5em;
21102112
}
@@ -7128,7 +7130,7 @@ label.panel-block:hover {
71287130
}
71297131

71307132
.highlight {
7131-
background-color: #fdf6e3;
7133+
background-color: #f5f5f5;
71327134
color: #586e75;
71337135
}
71347136

@@ -7400,6 +7402,7 @@ svg {
74007402
}
74017403

74027404
#carbonads {
7405+
font-size: 14px;
74037406
text-align: left;
74047407
}
74057408

@@ -7897,7 +7900,7 @@ html.route-index #carbon {
78977900

78987901
.color {
78997902
border-radius: 2px;
7900-
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
7903+
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
79017904
display: inline-block;
79027905
float: left;
79037906
height: 24px;
@@ -7963,6 +7966,7 @@ html.route-index #carbon {
79637966

79647967
.highlight pre {
79657968
max-height: 600px;
7969+
margin-bottom: 0 !important;
79667970
}
79677971

79687972
.structure {

‎docs/documentation/overview/customize.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,16 @@ <h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of
5050
// 2. Set your own initial variables
5151
// Update blue
5252
$blue: #72d0eb
53-
// Add pink
53+
// Add pink and its invert
5454
$pink: #ffb3b3
55+
$pink-invert: #fff
5556
// Add a serif family
5657
$family-serif: "Merriweather", "Georgia", serif
5758

5859
// 3. Set the derived variables
5960
// Use the new pink as the primary color
6061
$primary: $pink
62+
$primary-invert: $pink-invert
6163
// Use the existing orange as the danger color
6264
$danger: $orange
6365
// Use the new serif family
@@ -79,7 +81,7 @@ <h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of
7981
See the <strong>result</strong>: before and after
8082
</p>
8183
<p class="subtitle is-6">
82-
Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
84+
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
8385
</p>
8486
<figure>
8587
<img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">

‎docs/documentation/overview/functions.html‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,217 @@ <h2 class="subtitle">Utility functions to calculate colors and other values</h2>
2121
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
2222
</ul>
2323
</div>
24+
25+
<hr>
26+
27+
<h2 id="findColorInvert" class="title">The <code>findColorInvert()</code> function</h2>
28+
29+
<div class="content">
30+
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
31+
<ul>
32+
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
33+
<li>otherwise, it outputs <code>#fff</code></li>
34+
</ul>
35+
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
36+
<table class="table is-bordered">
37+
<thead>
38+
<tr>
39+
<th>color</th>
40+
<th>color luminance</th>
41+
<th>findColorInvert()</th>
42+
<th>result</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
<tr>
47+
<td>
48+
<span class="color" style="background: #00d1b2;"></span>
49+
<code>#00d1b2</code>
50+
</td>
51+
<td>
52+
<code>0.52831</code>
53+
</td>
54+
<td>
55+
<span class="color" style="background: #fff;"></span>
56+
<code>#fff</code>
57+
</td>
58+
<td>
59+
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
60+
Button
61+
</a>
62+
</td>
63+
</tr>
64+
<tr>
65+
<td>
66+
<span class="color" style="background: #3273dc;"></span>
67+
<code>#3273dc</code>
68+
</td>
69+
<td>
70+
<code>0.23119</code>
71+
</td>
72+
<td>
73+
<span class="color" style="background: #fff;"></span>
74+
<code>#fff</code>
75+
</td>
76+
<td>
77+
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
78+
Button
79+
</a>
80+
</td>
81+
</tr>
82+
<tr>
83+
<td>
84+
<span class="color" style="background: #23d160;"></span>
85+
<code>#23d160</code>
86+
</td>
87+
<td>
88+
<code>0.51067</code>
89+
</td>
90+
<td>
91+
<span class="color" style="background: #fff;"></span>
92+
<code>#fff</code>
93+
</td>
94+
<td>
95+
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
96+
Button
97+
</a>
98+
</td>
99+
</tr>
100+
<tr>
101+
<td>
102+
<span class="color" style="background: #ffdd57;"></span>
103+
<code>#ffdd57</code>
104+
</td>
105+
<td>
106+
<code>0.76863</code>
107+
</td>
108+
<td>
109+
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
110+
<code>rgba(0, 0, 0, 0.7)</code>
111+
</td>
112+
<td>
113+
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
114+
Button
115+
</a>
116+
</td>
117+
</tr>
118+
<tr>
119+
<td>
120+
<span class="color" style="background: #ff3860;"></span>
121+
<code>#ff3860</code>
122+
</td>
123+
<td>
124+
<code>0.27313</code>
125+
</td>
126+
<td>
127+
<span class="color" style="background: #fff;"></span>
128+
<code>#fff</code>
129+
</td>
130+
<td>
131+
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
132+
Button
133+
</a>
134+
</td>
135+
</tr>
136+
<tr>
137+
<td>
138+
<span class="color" style="background: #ffb3b3;"></span>
139+
<code>#ffb3b3</code>
140+
</td>
141+
<td>
142+
<code>0.61796</code>
143+
</td>
144+
<td>
145+
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
146+
<code>rgba(0,0,0,0.7)</code>
147+
</td>
148+
<td>
149+
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
150+
Button
151+
</a>
152+
</td>
153+
</tr>
154+
<tr>
155+
<td>
156+
<span class="color" style="background: #ffbc6b;"></span>
157+
<code>#ffbc6b</code>
158+
</td>
159+
<td>
160+
<code>0.63053</code>
161+
</td>
162+
<td>
163+
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
164+
<code>rgba(0,0,0,0.7)</code>
165+
</td>
166+
<td>
167+
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
168+
Button
169+
</a>
170+
</td>
171+
</tr>
172+
<tr>
173+
<td>
174+
<span class="color" style="background: hsl(294, 71%, 79%);"></span>
175+
<code>hsl(294, 71%, 79%)</code>
176+
</td>
177+
<td>
178+
<code>0.5529</code>
179+
</td>
180+
<td>
181+
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
182+
<code>rgba(0,0,0,0.7)</code>
183+
</td>
184+
<td>
185+
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
186+
Button
187+
</a>
188+
</td>
189+
</tr>
190+
</tbody>
191+
</table>
192+
<p>
193+
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
194+
<br>
195+
For example, this shade of <span class="color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
196+
</p>
197+
<table class="table is-bordered">
198+
<tbody>
199+
<tr>
200+
<th>
201+
with <code>findColorInvert()</code>
202+
</th>
203+
<td>
204+
<code>$purple-invert: findColorInvert($purple)</code>
205+
</td>
206+
<td>
207+
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
208+
<code>rgba(0,0,0,0.7)</code>
209+
</td>
210+
<td>
211+
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
212+
Button
213+
</a>
214+
</td>
215+
</tr>
216+
<tr>
217+
<th>
218+
with manual setting
219+
</th>
220+
<td>
221+
<code>$purple-invert: #fff</code>
222+
</td>
223+
<td>
224+
<span class="color" style="background: #fff;"></span>
225+
<code>#fff</code>
226+
</td>
227+
<td>
228+
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
229+
Button
230+
</a>
231+
</td>
232+
</tr>
233+
</tbody>
234+
</table>
235+
</div>
24236
</div>
25237
</section>

‎docs/sass/example.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040

4141
.highlight pre
4242
max-height: 600px
43+
margin-bottom: 0 !important
4344

4445
$structure: $danger
4546
$structure-invert: $danger-invert

‎docs/sass/global.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ $carbon-space: 15px
1717
width: 340px
1818

1919
#carbonads
20+
font-size: 14px
2021
text-align: left
2122
a,
2223
span

‎docs/sass/highlight.sass‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.highlight
2-
background-color: #fdf6e3
2+
background-color: #f5f5f5
33
color: #586e75
44
.c
55
color: #93a1a1

‎docs/sass/specific.sass‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
.color
77
border-radius: 2px;
8-
box-shadow: inset 0 0 0 1px rgba(black, 0.5)
8+
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
99
display: inline-block
1010
float: left
1111
height: 24px

0 commit comments

Comments
 (0)