From ef763d520d71197326eb08e6177b81e8b06d387e Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 5 May 2017 13:04:16 +0100 Subject: [PATCH] Explain findColorInvert --- docs/bulma-docs.sass | 4 + docs/css/bulma-docs.css | 8 +- docs/documentation/overview/customize.html | 6 +- docs/documentation/overview/functions.html | 212 +++++++++++++++++++++ docs/sass/example.sass | 1 + docs/sass/global.sass | 1 + docs/sass/highlight.sass | 2 +- docs/sass/specific.sass | 2 +- 8 files changed, 230 insertions(+), 6 deletions(-) diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 019042b3..0d90e9f4 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -20,3 +20,7 @@ html \::selection background: $primary color: $primary-invert + +@debug "hsl(294, 71%, 79%)" +@debug colorLuminance(hsl(294, 71%, 79%)) +@debug findColorInvert(hsl(294, 71%, 79%)) diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index fc70cabe..b431b144 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -2053,6 +2053,7 @@ input[type="submit"].button { .select { display: inline-block; height: 2.25em; + max-width: 100%; position: relative; vertical-align: top; } @@ -2105,6 +2106,7 @@ input[type="submit"].button { cursor: pointer; display: block; font-size: 1em; + max-width: 100%; outline: none; padding-right: 2.5em; } @@ -7128,7 +7130,7 @@ label.panel-block:hover { } .highlight { - background-color: #fdf6e3; + background-color: #f5f5f5; color: #586e75; } @@ -7400,6 +7402,7 @@ svg { } #carbonads { + font-size: 14px; text-align: left; } @@ -7897,7 +7900,7 @@ html.route-index #carbon { .color { border-radius: 2px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); display: inline-block; float: left; height: 24px; @@ -7963,6 +7966,7 @@ html.route-index #carbon { .highlight pre { max-height: 600px; + margin-bottom: 0 !important; } .structure { diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html index 6ca9ccb5..71994728 100644 --- a/docs/documentation/overview/customize.html +++ b/docs/documentation/overview/customize.html @@ -50,14 +50,16 @@ npm install bulma // 2. Set your own initial variables // Update blue $blue: #72d0eb -// Add pink +// Add pink and its invert $pink: #ffb3b3 +$pink-invert: #fff // Add a serif family $family-serif: "Merriweather", "Georgia", serif // 3. Set the derived variables // Use the new pink as the primary color $primary: $pink +$primary-invert: $pink-invert // Use the existing orange as the danger color $danger: $orange // Use the new serif family @@ -79,7 +81,7 @@ $family-primary: $family-serif See the result: before and after

- Notice how the $blue-invert is now black instead of white, based on findColorInvert(#72d0eb)

+ As $blue has been updated, and since $blue-invert is automatically calculated with the function $blue-invert: findColorInvert($blue), the $blue-invert is now black instead of white

Customizing Bulma with Sass diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html index 43a3eef9..473583bc 100644 --- a/docs/documentation/overview/functions.html +++ b/docs/documentation/overview/functions.html @@ -21,5 +21,217 @@ doc-subtab: functions
  • findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.
    • + +
    + +

    The findColorInvert() function

    + +
    +

    The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

    +
      +
    • if colorLuminance($color) > 0.55, it outputs rgba(#000, 0.7)
      • +
    • otherwise, it outputs #fff
      • +
    +

    Its purpose is to guarantee a readable shade for the text when the input color is used as the background.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    colorcolor luminancefindColorInvert()result
    + + #00d1b2 + + 0.52831 + + + #fff + + + Button + +
    + + #3273dc + + 0.23119 + + + #fff + + + Button + +
    + + #23d160 + + 0.51067 + + + #fff + + + Button + +
    + + #ffdd57 + + 0.76863 + + + rgba(0, 0, 0, 0.7) + + + Button + +
    + + #ff3860 + + 0.27313 + + + #fff + + + Button + +
    + + #ffb3b3 + + 0.61796 + + + rgba(0,0,0,0.7) + + + Button + +
    + + #ffbc6b + + 0.63053 + + + rgba(0,0,0,0.7) + + + Button + +
    + + hsl(294, 71%, 79%) + + 0.5529 + + + rgba(0,0,0,0.7) + + + Button + +
    +

    + For colors that have a luminance close to the 0.55 threshold, it can be useful to override the findColorInvert() function, and rather set the invert color manually. +
    + For example, this shade of purple has a color luminance of 0.5529. It can be preferable to set a color invert of white instead of transparent black: +

    + + + + + + + + + + + + + + + +
    + with findColorInvert() + + $purple-invert: findColorInvert($purple) + + + rgba(0,0,0,0.7) + + + Button + +
    + with manual setting + + $purple-invert: #fff + + + #fff + + + Button + +
    +
    diff --git a/docs/sass/example.sass b/docs/sass/example.sass index 20038ff2..c8b97676 100644 --- a/docs/sass/example.sass +++ b/docs/sass/example.sass @@ -40,6 +40,7 @@ .highlight pre max-height: 600px + margin-bottom: 0 !important $structure: $danger $structure-invert: $danger-invert diff --git a/docs/sass/global.sass b/docs/sass/global.sass index 382d05f3..20056a27 100644 --- a/docs/sass/global.sass +++ b/docs/sass/global.sass @@ -17,6 +17,7 @@ $carbon-space: 15px width: 340px #carbonads + font-size: 14px text-align: left a, span diff --git a/docs/sass/highlight.sass b/docs/sass/highlight.sass index 710c6ba4..168c7cd7 100644 --- a/docs/sass/highlight.sass +++ b/docs/sass/highlight.sass @@ -1,5 +1,5 @@ .highlight - background-color: #fdf6e3 + background-color: #f5f5f5 color: #586e75 .c color: #93a1a1 diff --git a/docs/sass/specific.sass b/docs/sass/specific.sass index b2e0842e..9d355d42 100644 --- a/docs/sass/specific.sass +++ b/docs/sass/specific.sass @@ -5,7 +5,7 @@ .color border-radius: 2px; - box-shadow: inset 0 0 0 1px rgba(black, 0.5) + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1) display: inline-block float: left height: 24px