mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Init light dark colors
This commit is contained in:
Jeremy Thomas
parent
9d3c36e02c
commit
770bae827f
@ -148,5 +148,6 @@
|
||||
"invertValue": "#fff"
|
||||
}
|
||||
],
|
||||
"allColors": ["white", "black", "light", "dark", "primary", "link", "info", "success", "warning", "danger"],
|
||||
"justColors": ["primary", "link", "info", "success", "warning", "danger"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -6014,11 +6014,11 @@ a.list-item {
|
||||
|
||||
.message.is-white .message-body {
|
||||
border-color: white;
|
||||
color: #4d4d4d;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.message.is-black {
|
||||
background-color: #fafafa;
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.message.is-black .message-header {
|
||||
@ -6028,7 +6028,7 @@ a.list-item {
|
||||
|
||||
.message.is-black .message-body {
|
||||
border-color: #0a0a0a;
|
||||
color: #090909;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message.is-light {
|
||||
@ -6042,11 +6042,11 @@ a.list-item {
|
||||
|
||||
.message.is-light .message-body {
|
||||
border-color: whitesmoke;
|
||||
color: #505050;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.message.is-dark {
|
||||
background-color: #fafafa;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.message.is-dark .message-header {
|
||||
@ -6056,11 +6056,11 @@ a.list-item {
|
||||
|
||||
.message.is-dark .message-body {
|
||||
border-color: #363636;
|
||||
color: #2a2a2a;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.message.is-primary {
|
||||
background-color: #f5fffd;
|
||||
background-color: #ebfffc;
|
||||
}
|
||||
|
||||
.message.is-primary .message-header {
|
||||
@ -6070,11 +6070,11 @@ a.list-item {
|
||||
|
||||
.message.is-primary .message-body {
|
||||
border-color: #00d1b2;
|
||||
color: #021310;
|
||||
color: #00947e;
|
||||
}
|
||||
|
||||
.message.is-link {
|
||||
background-color: #f6f9fe;
|
||||
background-color: #eef3fc;
|
||||
}
|
||||
|
||||
.message.is-link .message-header {
|
||||
@ -6084,11 +6084,11 @@ a.list-item {
|
||||
|
||||
.message.is-link .message-body {
|
||||
border-color: #3273dc;
|
||||
color: #22509a;
|
||||
color: #153e7e;
|
||||
}
|
||||
|
||||
.message.is-info {
|
||||
background-color: #f6fbfe;
|
||||
background-color: #ecf7fe;
|
||||
}
|
||||
|
||||
.message.is-info .message-header {
|
||||
@ -6098,11 +6098,11 @@ a.list-item {
|
||||
|
||||
.message.is-info .message-body {
|
||||
border-color: #209cee;
|
||||
color: #12537e;
|
||||
color: #0a578a;
|
||||
}
|
||||
|
||||
.message.is-success {
|
||||
background-color: #f6fef9;
|
||||
background-color: #eefcf3;
|
||||
}
|
||||
|
||||
.message.is-success .message-header {
|
||||
@ -6112,11 +6112,11 @@ a.list-item {
|
||||
|
||||
.message.is-success .message-body {
|
||||
border-color: #23d160;
|
||||
color: #0e301a;
|
||||
color: #157e3a;
|
||||
}
|
||||
|
||||
.message.is-warning {
|
||||
background-color: #fffdf5;
|
||||
background-color: #fffbeb;
|
||||
}
|
||||
|
||||
.message.is-warning .message-header {
|
||||
@ -6126,11 +6126,11 @@ a.list-item {
|
||||
|
||||
.message.is-warning .message-body {
|
||||
border-color: #ffdd57;
|
||||
color: #3b3108;
|
||||
color: #947600;
|
||||
}
|
||||
|
||||
.message.is-danger {
|
||||
background-color: #fff5f7;
|
||||
background-color: #ffebef;
|
||||
}
|
||||
|
||||
.message.is-danger .message-header {
|
||||
@ -6140,7 +6140,7 @@ a.list-item {
|
||||
|
||||
.message.is-danger .message-body {
|
||||
border-color: #ff3860;
|
||||
color: #cd0930;
|
||||
color: #94001e;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
|
||||
@ -36,7 +36,7 @@ meta:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% for color in site.data.colors.allColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
|
||||
@ -37,21 +37,29 @@ $message-colors: $colors !default
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Colors
|
||||
@each $name, $pair in $message-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
@each $name, $list in $message-colors
|
||||
$color: nth($list, 1)
|
||||
$color-invert: nth($list, 2)
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
@if length($list) > 2
|
||||
$color-light: nth($list, 3)
|
||||
$color-dark: nth($list, 4)
|
||||
@else
|
||||
$color-light: findLightColor($color)
|
||||
$color-dark: findDarkColor($color)
|
||||
// $color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
// $color-luminance: colorLuminance($color)
|
||||
// $darken-percentage: $color-luminance * 70%
|
||||
// $desaturate-percentage: $color-luminance * 30%
|
||||
&.is-#{$name}
|
||||
background-color: lighten($color, $color-lightning)
|
||||
background-color: $color-light
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
color: $color-dark
|
||||
|
||||
.message-header
|
||||
align-items: center
|
||||
|
||||
@ -6,26 +6,60 @@ $warning: $yellow !default
|
||||
$danger: $red !default
|
||||
|
||||
$light: $white-ter !default
|
||||
$lighter: $white-bis !default
|
||||
$dark: $grey-darker !default
|
||||
$darker: $black-ter !default
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default
|
||||
$orange-light: findLightColor($orange) !default
|
||||
$orange-dark: findDarkColor($orange) !default
|
||||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$yellow-light: findLightColor($yellow) !default
|
||||
$yellow-dark: findDarkColor($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$green-light: findLightColor($green) !default
|
||||
$green-dark: findDarkColor($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$turquoise-light: findLightColor($turquoise) !default
|
||||
$turquoise-dark: findDarkColor($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$cyan-light: findLightColor($cyan) !default
|
||||
$cyan-dark: findDarkColor($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$blue-light: findLightColor($blue) !default
|
||||
$blue-dark: findDarkColor($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$purple-light: findLightColor($purple) !default
|
||||
$purple-dark: findDarkColor($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
$red-light: findLightColor($red) !default
|
||||
$red-dark: findDarkColor($red) !default
|
||||
|
||||
$primary-invert: $turquoise-invert !default
|
||||
$primary-light: $turquoise-light !default
|
||||
$primary-dark: $turquoise-dark !default
|
||||
$info-invert: $cyan-invert !default
|
||||
$info-light: $cyan-light !default
|
||||
$info-dark: $cyan-dark !default
|
||||
$success-invert: $green-invert !default
|
||||
$success-light: $green-light !default
|
||||
$success-dark: $green-dark !default
|
||||
$warning-invert: $yellow-invert !default
|
||||
$warning-light: $yellow-light !default
|
||||
$warning-dark: $yellow-dark !default
|
||||
$danger-invert: $red-invert !default
|
||||
$danger-light: $red-light !default
|
||||
$danger-dark: $red-dark !default
|
||||
|
||||
$light-invert: $dark !default
|
||||
$light-light: $lighter !default
|
||||
$light-dark: $dark !default
|
||||
|
||||
$dark-invert: $light !default
|
||||
$dark-light: $light !default
|
||||
$dark-dark: $darker !default
|
||||
|
||||
// General colors
|
||||
|
||||
@ -53,6 +87,8 @@ $pre-background: $background !default
|
||||
|
||||
$link: $blue !default
|
||||
$link-invert: $blue-invert !default
|
||||
$link-light: $blue-light !default
|
||||
$link-dark: $blue-dark !default
|
||||
$link-visited: $purple !default
|
||||
|
||||
$link-hover: $grey-darker !default
|
||||
@ -79,7 +115,7 @@ $size-large: $size-4 !default
|
||||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
|
||||
$colors: mergeColorMaps(("white": ($white, $black, $white, $black), "black": ($black, $white, $black, $white), "light": ($light, $light-invert, $light-light, $light-dark), "dark": ($dark, $dark-invert, $dark-light, $dark-dark), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
|
||||
@ -56,7 +56,17 @@
|
||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.55)
|
||||
@if (type-of($color) == 'color') and (colorLuminance($color) > 0.6)
|
||||
@return rgba(#000, 0.7)
|
||||
@else
|
||||
@return #fff
|
||||
|
||||
@function findLightColor($color)
|
||||
@if type-of($color) == 'color'
|
||||
@return change-color($color, $lightness: 96%)
|
||||
@return $background
|
||||
|
||||
@function findDarkColor($color)
|
||||
@if type-of($color) == 'color'
|
||||
@return change-color($color, $lightness: 29%)
|
||||
@return $text-strong
|
||||
|
||||
Loading…
Reference in New Issue
Block a user