library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update color functions

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-15 08:46:34 +01:00
parent 7984c70c05
commit 3f48d2d12d
8 changed files with 1332 additions and 1375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2418
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

3
sass/components/message.sass
View File

@ -53,8 +53,11 @@ $message-colors: $colors !default
$desaturate-percentage: $color-luminance * 30%
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
@else
@if type-of($color) == 'color'
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$color-light: lighten($color, $color-lightning)
@else
$color-light: $color
&.is-#{$name}
background-color: $color-light

27
sass/elements/box.sass
View File

@ -1,6 +1,6 @@
$box-color: $text !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-color: var(--text, #{$text}) !default
$box-background-color: var(--scheme-main, #{$scheme-main}) !default
$box-radius: var(--radius-large, #{$radius-large}) !default
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$box-padding: 1.25rem !default
@ -8,17 +8,24 @@ $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1p
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box
--box-background-color: #{$box-background-color}
--box-radius: #{$box-radius}
--box-shadow: #{$box-shadow}
--box-color: #{$box-color}
--box-padding: #{$box-padding}
--box-link-hover-shadow: #{$box-link-hover-shadow}
--box-link-active-shadow: #{$box-link-active-shadow}
@extend %block
background-color: $box-background-color
border-radius: $box-radius
box-shadow: $box-shadow
color: $box-color
background-color: var(--box-background-color)
border-radius: var(--box-radius)
box-shadow: var(--box-shadow)
color: var(--box-color)
display: block
padding: $box-padding
padding: var(--box-padding)
a.box
&:hover,
&:focus
box-shadow: $box-link-hover-shadow
box-shadow: var(--box-link-hover-shadow)
&:active
box-shadow: $box-link-active-shadow
box-shadow: var(--box-link-active-shadow)

4
sass/elements/tag.sass
View File

@ -125,9 +125,9 @@ $tag-delete-margin: 1px !default
width: 1px
&:hover,
&:focus
background-color: darken($tag-background-color, 5%)
background-color: bulmaDarken($tag-background-color, 5%)
&:active
background-color: darken($tag-background-color, 10%)
background-color: bulmaDarken($tag-background-color, 10%)
&.is-rounded
border-radius: $radius-rounded

125
sass/themes/default.sass
View File

@ -1,6 +1,7 @@
\:root
// Initial variables
--black: #{$black}
--black-70: rgba(#000, 0.7)
--black-bis: #{$black-bis}
--black-ter: #{$black-ter}
--grey-darker: #{$grey-darker}
@ -43,65 +44,65 @@
--radius-rounded: #{$radius-rounded}
--speed: #{$speed}
// Derived variables
--primary: var(--turquoise)
--info: var(--cyan)
--success: var(--green)
--warning: var(--yellow)
--danger: var(--red)
--light: var(--white-ter)
--dark: var(--grey-darker)
--orange-invert: #{findColorInvert($orange)}
--yellow-invert: #{findColorInvert($yellow)}
--green-invert: #{findColorInvert($green)}
--turquoise-invert: #{findColorInvert($turquoise)}
--cyan-invert: #{findColorInvert($cyan)}
--blue-invert: #{findColorInvert($blue)}
--purple-invert: #{findColorInvert($purple)}
--red-invert: #{findColorInvert($red)}
--primary-invert: #{findColorInvert($primary)}
--primary-light: findLightColor($primary)
--primary-dark: findDarkColor($primary)
--info-invert: #{findColorInvert($info)}
--info-light: findLightColor($info)
--info-dark: findDarkColor($info)
--success-invert: #{findColorInvert($success)}
--success-light: findLightColor($success)
--success-dark: findDarkColor($success)
--warning-invert: #{findColorInvert($warning)}
--warning-light: findLightColor($warning)
--warning-dark: findDarkColor($warning)
--danger-invert: #{findColorInvert($danger)}
--danger-light: findLightColor($danger)
--danger-dark: findDarkColor($danger)
--light-invert: #{findColorInvert($light)}
--dark-invert: #{findColorInvert($dark)}
--scheme-main: var(--white)
--scheme-main-bis: var(--white-bis)
--scheme-main-ter: var(--white-ter)
--scheme-invert: var(--black)
--scheme-invert-bis: var(--black-bis)
--scheme-invert-ter: var(--black-ter)
--background: var(--white-ter)
--border: var(--grey-lighter)
--border-hover: var(--grey-light)
--border-light: var(--grey-lightest)
--border-light-hover: var(--grey-light)
--text: var(--grey-dark)
--text-invert: #{findColorInvert($text)}
--text-light: var(--grey)
--text-strong: var(--grey-darker)
--code: var(--red)
--code-background: var(--background)
--pre: var(--text)
--pre-background: var(--background)
--link: var(--blue)
--link-invert: #{findColorInvert($link)}
--link-light: findLightColor($link)
--link-dark: findDarkColor($link)
--link-visited: var(--purple)
--link-hover: var(--grey-darker)
--link-hover-border: var(--grey-light)
--link-focus: var(--grey-darker)
--link-focus-border: var(--blue)
--link-active: var(--grey-darker)
--link-active-border: var(--grey-dark)
--primary: #{$primary}
--info: #{$info}
--success: #{$success}
--warning: #{$warning}
--danger: #{$danger}
--light: #{$light}
--dark: #{$dark}
--orange-invert: #{$orange-invert}
--yellow-invert: #{$yellow-invert}
--green-invert: #{$green-invert}
--turquoise-invert: #{$turquoise-invert}
--cyan-invert: #{$cyan-invert}
--blue-invert: #{$blue-invert}
--purple-invert: #{$purple-invert}
--red-invert: #{$red-invert}
--primary-invert: #{$primary-invert}
--primary-light: #{$primary-light}
--primary-dark: #{$primary-dark}
--info-invert: #{$info-invert}
--info-light: #{$info-light}
--info-dark: #{$info-dark}
--success-invert: #{$success-invert}
--success-light: #{$success-light}
--success-dark: #{$success-dark}
--warning-invert: #{$warning-invert}
--warning-light: #{$warning-light}
--warning-dark: #{$warning-dark}
--danger-invert: #{$danger-invert}
--danger-light: #{$danger-light}
--danger-dark: #{$danger-dark}
--light-invert: #{$light-invert}
--dark-invert: #{$dark-invert}
--scheme-main: #{$scheme-main}
--scheme-main-bis: #{$scheme-main-bis}
--scheme-main-ter: #{$scheme-main-ter}
--scheme-invert: #{$scheme-invert}
--scheme-invert-bis: #{$scheme-invert-bis}
--scheme-invert-ter: #{$scheme-invert-ter}
--background: #{$background}
--border: #{$border}
--border-hover: #{$border-hover}
--border-light: #{$border-light}
--border-light-hover: #{$border-light-hover}
--text: #{$text}
--text-invert: #{$text-invert}
--text-light: #{$text-light}
--text-strong: #{$text-strong}
--code: #{$code}
--code-background: #{$code-background}
--pre: #{$pre}
--pre-background: #{$pre-background}
--link: #{$link}
--link-invert: #{$link-invert}
--link-light: #{$link-light}
--link-dark: #{$link-dark}
--link-visited: #{$link-visited}
--link-hover: #{$link-hover}
--link-hover-border: #{$link-hover-border}
--link-focus: #{$link-focus}
--link-focus-border: #{$link-focus-border}
--link-active: #{$link-active}
--link-active-border: #{$link-active-border}

78
sass/utilities/derived-variables.scss
View File

@ -1,12 +1,12 @@
$primary: $turquoise !default;
$primary: var(--turquoise, #{$turquoise}) !default;
$info : $cyan !default;
$success: $green !default;
$warning: $yellow !default;
$danger : $red !default;
$info : var(--cyan, #{$cyan}) !default;
$success: var(--green, #{$green}) !default;
$warning: var(--yellow, #{$yellow}) !default;
$danger : var(--red, #{$red}) !default;
$light : $white-ter !default;
$dark : $grey-darker !default;
$light : var(--white-ter, #{$white-ter}) !default;
$dark : var(--grey-darker, #{$grey-darker}) !default;
// Invert colors
@ -25,9 +25,9 @@ $primary-dark : findDarkColor($primary) !default;
$info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default;
$success-invert : findColorInvert($success) !default;
$success-light : findLightColor($success) !default;
$success-dark : findDarkColor($success) !default;
$success-invert : findColorInvert($success, $green) !default;
$success-light : findLightColor($success, $green) !default;
$success-dark : findDarkColor($success, $green) !default;
$warning-invert : findColorInvert($warning) !default;
$warning-light : findLightColor($warning) !default;
$warning-dark : findDarkColor($warning) !default;
@ -39,57 +39,57 @@ $dark-invert : findColorInvert($dark) !default;
// General colors
$scheme-main : $white !default;
$scheme-main-bis : $white-bis !default;
$scheme-main-ter : $white-ter !default;
$scheme-invert : $black !default;
$scheme-invert-bis : $black-bis !default;
$scheme-invert-ter : $black-ter !default;
$scheme-main : var(--white, #{$white}) !default;
$scheme-main-bis : var(--white-bis, #{$white-bis}) !default;
$scheme-main-ter : var(--white-ter, #{$white-ter}) !default;
$scheme-invert : var(--black, #{$black}) !default;
$scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
$scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
$background : $white-ter !default;
$background : var(--white-ter, #{$white-ter}) !default;
$border : $grey-lighter !default;
$border-hover : $grey-light !default;
$border-light : $grey-lightest !default;
$border-light-hover: $grey-light !default;
$border : var(--grey-lighter, #{$grey-lighter}) !default;
$border-hover : var(--grey-light, #{$grey-light}) !default;
$border-light : var(--grey-lightest, #{$grey-lightest}) !default;
$border-light-hover: var(--grey-light, #{$grey-light}) !default;
// Text colors
$text : $grey-dark !default;
$text : var(--grey-dark, #{$grey-dark}) !default;
$text-invert: findColorInvert($text) !default;
$text-light : $grey !default;
$text-strong: $grey-darker !default;
$text-light : var(--grey, #{$grey}) !default;
$text-strong: var(--grey-darker, #{$grey-darker}) !default;
// Code colors
$code : $red !default;
$code-background: $background !default;
$code : var(--red, #{$red}) !default;
$code-background: var(--background, #{$background}) !default;
$pre : $text !default;
$pre-background : $background !default;
$pre : var(--text, #{$text}) !default;
$pre-background : var(--background, #{$background}) !default;
// Link colors
$link : $blue !default;
$link : var(--blue, #{$blue}) !default;
$link-invert : findColorInvert($link) !default;
$link-light : findLightColor($link) !default;
$link-dark : findDarkColor($link) !default;
$link-visited : $purple !default;
$link-visited : var(--purple, #{$purple}) !default;
$link-hover : $grey-darker !default;
$link-hover-border : $grey-light !default;
$link-hover : var(--grey-darker, #{$grey-darker}) !default;
$link-hover-border : var(--grey-light, #{$grey-light}) !default;
$link-focus : $grey-darker !default;
$link-focus-border : $blue !default;
$link-focus : var(--grey-darker, #{$grey-darker}) !default;
$link-focus-border : var(--blue, #{$blue}) !default;
$link-active : $grey-darker !default;
$link-active-border: $grey-dark !default;
$link-active : var(--grey-darker, #{$grey-darker}) !default;
$link-active-border: var(--grey-dark, #{$grey-dark}) !default;
// Typography
$family-primary : $family-sans-serif !default;
$family-secondary: $family-sans-serif !default;
$family-code : $family-monospace !default;
$family-primary : var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-code : var(--family-monospace, #{$family-monospace}) !default;
$size-small : $size-7 !default;
$size-normal: $size-6 !default;

30
sass/utilities/functions.sass
View File

@ -76,31 +76,49 @@
$color-rgb: map-merge($color-rgb, ($name: $value))
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@function findColorInvert($color)
@function findColorInvert($color, $fallback: null)
@if type-of($color) == 'color'
@if (colorLuminance($color) > 0.55)
@return rgba(#000, 0.7)
@else
@return #fff
@else if type-of($fallback) == 'color'
@if (colorLuminance($fallback) > 0.55)
@return var(--black-70, rgba(#000, 0.7))
@else
@return var(--white, #fff)
@return $color
@function findLightColor($color)
@function findLightColor($color, $fallback: null)
@if type-of($color) == 'color'
$l: 96%
@if lightness($color) > 96%
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background
@else if type-of($fallback) == 'color'
$l: 96%
@if lightness($fallback) > 96%
$l: lightness($fallback)
@return change-color($fallback, $lightness: $l)
@return $color
@function findDarkColor($color)
@if type-of($color) == 'color'
@function calculateDarkColor($color)
$base-l: 29%
$luminance: colorLuminance($color)
$luminance-delta: (0.53 - $luminance)
$target-l: round($base-l + ($luminance-delta * 53))
@return change-color($color, $lightness: max($base-l, $target-l))
@return $text-strong
@function findDarkColor($color, $fallback: null)
@if type-of($color) == 'color'
@return calculateDarkColor($color)
@else if type-of($fallback) == 'color'
@return calculateDarkColor($fallback)
@return $color
@function bulmaRgba($color, $alpha)
@if type-of($color) != 'color'
@debug $color
@return $color
@return rgba($color, $alpha)