Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 12:44:30 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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;

46
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)
@if (colorLuminance($color) > 0.55)
@return rgba(#000, 0.7)
@else
@return #fff
@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)
@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'
$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
@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)