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

7
sass/components/message.sass
View File

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

27
sass/elements/box.sass
View File

@ -1,6 +1,6 @@
$box-color: $text !default $box-color: var(--text, #{$text}) !default
$box-background-color: $scheme-main !default $box-background-color: var(--scheme-main, #{$scheme-main}) !default
$box-radius: $radius-large !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-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 $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-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box .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 @extend %block
background-color: $box-background-color background-color: var(--box-background-color)
border-radius: $box-radius border-radius: var(--box-radius)
box-shadow: $box-shadow box-shadow: var(--box-shadow)
color: $box-color color: var(--box-color)
display: block display: block
padding: $box-padding padding: var(--box-padding)
a.box a.box
&:hover, &:hover,
&:focus &:focus
box-shadow: $box-link-hover-shadow box-shadow: var(--box-link-hover-shadow)
&:active &: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 width: 1px
&:hover, &:hover,
&:focus &:focus
background-color: darken($tag-background-color, 5%) background-color: bulmaDarken($tag-background-color, 5%)
&:active &:active
background-color: darken($tag-background-color, 10%) background-color: bulmaDarken($tag-background-color, 10%)
&.is-rounded &.is-rounded
border-radius: $radius-rounded border-radius: $radius-rounded

125
sass/themes/default.sass
View File

@ -1,6 +1,7 @@
\:root \:root
// Initial variables // Initial variables
--black: #{$black} --black: #{$black}
--black-70: rgba(#000, 0.7)
--black-bis: #{$black-bis} --black-bis: #{$black-bis}
--black-ter: #{$black-ter} --black-ter: #{$black-ter}
--grey-darker: #{$grey-darker} --grey-darker: #{$grey-darker}
@ -43,65 +44,65 @@
--radius-rounded: #{$radius-rounded} --radius-rounded: #{$radius-rounded}
--speed: #{$speed} --speed: #{$speed}
// Derived variables // Derived variables
--primary: var(--turquoise) --primary: #{$primary}
--info: var(--cyan) --info: #{$info}
--success: var(--green) --success: #{$success}
--warning: var(--yellow) --warning: #{$warning}
--danger: var(--red) --danger: #{$danger}
--light: var(--white-ter) --light: #{$light}
--dark: var(--grey-darker) --dark: #{$dark}
--orange-invert: #{findColorInvert($orange)} --orange-invert: #{$orange-invert}
--yellow-invert: #{findColorInvert($yellow)} --yellow-invert: #{$yellow-invert}
--green-invert: #{findColorInvert($green)} --green-invert: #{$green-invert}
--turquoise-invert: #{findColorInvert($turquoise)} --turquoise-invert: #{$turquoise-invert}
--cyan-invert: #{findColorInvert($cyan)} --cyan-invert: #{$cyan-invert}
--blue-invert: #{findColorInvert($blue)} --blue-invert: #{$blue-invert}
--purple-invert: #{findColorInvert($purple)} --purple-invert: #{$purple-invert}
--red-invert: #{findColorInvert($red)} --red-invert: #{$red-invert}
--primary-invert: #{findColorInvert($primary)} --primary-invert: #{$primary-invert}
--primary-light: findLightColor($primary) --primary-light: #{$primary-light}
--primary-dark: findDarkColor($primary) --primary-dark: #{$primary-dark}
--info-invert: #{findColorInvert($info)} --info-invert: #{$info-invert}
--info-light: findLightColor($info) --info-light: #{$info-light}
--info-dark: findDarkColor($info) --info-dark: #{$info-dark}
--success-invert: #{findColorInvert($success)} --success-invert: #{$success-invert}
--success-light: findLightColor($success) --success-light: #{$success-light}
--success-dark: findDarkColor($success) --success-dark: #{$success-dark}
--warning-invert: #{findColorInvert($warning)} --warning-invert: #{$warning-invert}
--warning-light: findLightColor($warning) --warning-light: #{$warning-light}
--warning-dark: findDarkColor($warning) --warning-dark: #{$warning-dark}
--danger-invert: #{findColorInvert($danger)} --danger-invert: #{$danger-invert}
--danger-light: findLightColor($danger) --danger-light: #{$danger-light}
--danger-dark: findDarkColor($danger) --danger-dark: #{$danger-dark}
--light-invert: #{findColorInvert($light)} --light-invert: #{$light-invert}
--dark-invert: #{findColorInvert($dark)} --dark-invert: #{$dark-invert}
--scheme-main: var(--white) --scheme-main: #{$scheme-main}
--scheme-main-bis: var(--white-bis) --scheme-main-bis: #{$scheme-main-bis}
--scheme-main-ter: var(--white-ter) --scheme-main-ter: #{$scheme-main-ter}
--scheme-invert: var(--black) --scheme-invert: #{$scheme-invert}
--scheme-invert-bis: var(--black-bis) --scheme-invert-bis: #{$scheme-invert-bis}
--scheme-invert-ter: var(--black-ter) --scheme-invert-ter: #{$scheme-invert-ter}
--background: var(--white-ter) --background: #{$background}
--border: var(--grey-lighter) --border: #{$border}
--border-hover: var(--grey-light) --border-hover: #{$border-hover}
--border-light: var(--grey-lightest) --border-light: #{$border-light}
--border-light-hover: var(--grey-light) --border-light-hover: #{$border-light-hover}
--text: var(--grey-dark) --text: #{$text}
--text-invert: #{findColorInvert($text)} --text-invert: #{$text-invert}
--text-light: var(--grey) --text-light: #{$text-light}
--text-strong: var(--grey-darker) --text-strong: #{$text-strong}
--code: var(--red) --code: #{$code}
--code-background: var(--background) --code-background: #{$code-background}
--pre: var(--text) --pre: #{$pre}
--pre-background: var(--background) --pre-background: #{$pre-background}
--link: var(--blue) --link: #{$link}
--link-invert: #{findColorInvert($link)} --link-invert: #{$link-invert}
--link-light: findLightColor($link) --link-light: #{$link-light}
--link-dark: findDarkColor($link) --link-dark: #{$link-dark}
--link-visited: var(--purple) --link-visited: #{$link-visited}
--link-hover: var(--grey-darker) --link-hover: #{$link-hover}
--link-hover-border: var(--grey-light) --link-hover-border: #{$link-hover-border}
--link-focus: var(--grey-darker) --link-focus: #{$link-focus}
--link-focus-border: var(--blue) --link-focus-border: #{$link-focus-border}
--link-active: var(--grey-darker) --link-active: #{$link-active}
--link-active-border: var(--grey-dark) --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; $info : var(--cyan, #{$cyan}) !default;
$success: $green !default; $success: var(--green, #{$green}) !default;
$warning: $yellow !default; $warning: var(--yellow, #{$yellow}) !default;
$danger : $red !default; $danger : var(--red, #{$red}) !default;
$light : $white-ter !default; $light : var(--white-ter, #{$white-ter}) !default;
$dark : $grey-darker !default; $dark : var(--grey-darker, #{$grey-darker}) !default;
// Invert colors // Invert colors
@ -25,9 +25,9 @@ $primary-dark : findDarkColor($primary) !default;
$info-invert : findColorInvert($info) !default; $info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default; $info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default; $info-dark : findDarkColor($info) !default;
$success-invert : findColorInvert($success) !default; $success-invert : findColorInvert($success, $green) !default;
$success-light : findLightColor($success) !default; $success-light : findLightColor($success, $green) !default;
$success-dark : findDarkColor($success) !default; $success-dark : findDarkColor($success, $green) !default;
$warning-invert : findColorInvert($warning) !default; $warning-invert : findColorInvert($warning) !default;
$warning-light : findLightColor($warning) !default; $warning-light : findLightColor($warning) !default;
$warning-dark : findDarkColor($warning) !default; $warning-dark : findDarkColor($warning) !default;
@ -39,57 +39,57 @@ $dark-invert : findColorInvert($dark) !default;
// General colors // General colors
$scheme-main : $white !default; $scheme-main : var(--white, #{$white}) !default;
$scheme-main-bis : $white-bis !default; $scheme-main-bis : var(--white-bis, #{$white-bis}) !default;
$scheme-main-ter : $white-ter !default; $scheme-main-ter : var(--white-ter, #{$white-ter}) !default;
$scheme-invert : $black !default; $scheme-invert : var(--black, #{$black}) !default;
$scheme-invert-bis : $black-bis !default; $scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
$scheme-invert-ter : $black-ter !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 : var(--grey-lighter, #{$grey-lighter}) !default;
$border-hover : $grey-light !default; $border-hover : var(--grey-light, #{$grey-light}) !default;
$border-light : $grey-lightest !default; $border-light : var(--grey-lightest, #{$grey-lightest}) !default;
$border-light-hover: $grey-light !default; $border-light-hover: var(--grey-light, #{$grey-light}) !default;
// Text colors // Text colors
$text : $grey-dark !default; $text : var(--grey-dark, #{$grey-dark}) !default;
$text-invert: findColorInvert($text) !default; $text-invert: findColorInvert($text) !default;
$text-light : $grey !default; $text-light : var(--grey, #{$grey}) !default;
$text-strong: $grey-darker !default; $text-strong: var(--grey-darker, #{$grey-darker}) !default;
// Code colors // Code colors
$code : $red !default; $code : var(--red, #{$red}) !default;
$code-background: $background !default; $code-background: var(--background, #{$background}) !default;
$pre : $text !default; $pre : var(--text, #{$text}) !default;
$pre-background : $background !default; $pre-background : var(--background, #{$background}) !default;
// Link colors // Link colors
$link : $blue !default; $link : var(--blue, #{$blue}) !default;
$link-invert : findColorInvert($link) !default; $link-invert : findColorInvert($link) !default;
$link-light : findLightColor($link) !default; $link-light : findLightColor($link) !default;
$link-dark : findDarkColor($link) !default; $link-dark : findDarkColor($link) !default;
$link-visited : $purple !default; $link-visited : var(--purple, #{$purple}) !default;
$link-hover : $grey-darker !default; $link-hover : var(--grey-darker, #{$grey-darker}) !default;
$link-hover-border : $grey-light !default; $link-hover-border : var(--grey-light, #{$grey-light}) !default;
$link-focus : $grey-darker !default; $link-focus : var(--grey-darker, #{$grey-darker}) !default;
$link-focus-border : $blue !default; $link-focus-border : var(--blue, #{$blue}) !default;
$link-active : $grey-darker !default; $link-active : var(--grey-darker, #{$grey-darker}) !default;
$link-active-border: $grey-dark !default; $link-active-border: var(--grey-dark, #{$grey-dark}) !default;
// Typography // Typography
$family-primary : $family-sans-serif !default; $family-primary : var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-secondary: $family-sans-serif !default; $family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-code : $family-monospace !default; $family-code : var(--family-monospace, #{$family-monospace}) !default;
$size-small : $size-7 !default; $size-small : $size-7 !default;
$size-normal: $size-6 !default; $size-normal: $size-6 !default;

46
sass/utilities/functions.sass
View File

@ -76,31 +76,49 @@
$color-rgb: map-merge($color-rgb, ($name: $value)) $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) @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 (colorLuminance($color) > 0.55) @if type-of($color) == 'color'
@return rgba(#000, 0.7) @if (colorLuminance($color) > 0.55)
@else @return rgba(#000, 0.7)
@return #fff @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' @if type-of($color) == 'color'
$l: 96% $l: 96%
@if lightness($color) > 96% @if lightness($color) > 96%
$l: lightness($color) $l: lightness($color)
@return change-color($color, $lightness: $l) @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) @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))
@function findDarkColor($color, $fallback: null)
@if type-of($color) == 'color' @if type-of($color) == 'color'
$base-l: 29% @return calculateDarkColor($color)
$luminance: colorLuminance($color) @else if type-of($fallback) == 'color'
$luminance-delta: (0.53 - $luminance) @return calculateDarkColor($fallback)
$target-l: round($base-l + ($luminance-delta * 53)) @return $color
@return change-color($color, $lightness: max($base-l, $target-l))
@return $text-strong
@function bulmaRgba($color, $alpha) @function bulmaRgba($color, $alpha)
@if type-of($color) != 'color' @if type-of($color) != 'color'
@debug $color
@return $color @return $color
@return rgba($color, $alpha) @return rgba($color, $alpha)