2019-10-18 13:03:02 -04:00
|
|
|
$prefix: "bulma-"
|
|
|
|
|
|
2019-10-18 14:05:37 -04:00
|
|
|
@function findCSSVarColorInvert($color)
|
|
|
|
|
@if colorLuminance($color) > 0.55
|
2019-10-18 20:29:40 -04:00
|
|
|
@return var(--#{$prefix}black-transparent)
|
2019-10-18 14:05:37 -04:00
|
|
|
@else
|
2019-10-18 20:29:40 -04:00
|
|
|
@return var(--#{$prefix}white)
|
2019-10-18 14:05:37 -04:00
|
|
|
|
|
|
|
|
@function findCSSVarLightColor($color)
|
|
|
|
|
@if type-of($color) == "color"
|
|
|
|
|
$l: 96%
|
|
|
|
|
@if lightness($color) > 96%
|
|
|
|
|
$l: lightness($color)
|
|
|
|
|
@return change-color($color, $lightness: $l)
|
2019-10-18 20:29:40 -04:00
|
|
|
@return var(--#{$prefix}background)
|
2019-10-18 14:05:37 -04:00
|
|
|
|
|
|
|
|
@function findCSSVarDarkColor($color)
|
|
|
|
|
@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))
|
2019-10-18 20:29:40 -04:00
|
|
|
@return var(--#{$prefix}text-strong)
|
2019-10-18 14:05:37 -04:00
|
|
|
|
2019-10-19 11:26:04 -04:00
|
|
|
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger)
|
2019-10-18 13:03:02 -04:00
|
|
|
|
|
|
|
|
@function getCssVariable($color, $name)
|
|
|
|
|
$hue: hue($color)
|
|
|
|
|
$saturation: saturation($color)
|
|
|
|
|
$lightness: lightness($color)
|
|
|
|
|
$alpha: alpha($color)
|
|
|
|
|
@return $hue, $saturation, $lightness
|
|
|
|
|
|
2019-10-18 14:05:37 -04:00
|
|
|
=cssvar($name, $color)
|
2019-10-18 13:03:02 -04:00
|
|
|
$hue: hue($color)
|
|
|
|
|
$saturation: saturation($color)
|
|
|
|
|
$lightness: lightness($color)
|
|
|
|
|
$base: "#{$prefix}#{$name}"
|
|
|
|
|
--#{$base}-h: #{$hue}
|
|
|
|
|
--#{$base}-s: #{$saturation}
|
|
|
|
|
--#{$base}-l: #{$lightness}
|
|
|
|
|
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
|
2019-10-18 14:05:37 -04:00
|
|
|
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
|
|
|
|
|
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
|
|
|
|
|
$color-invert: findCSSVarColorInvert($color)
|
|
|
|
|
--#{$base}-invert: #{$color-invert}
|
|
|
|
|
$color-light: findCSSVarLightColor($color)
|
2019-10-18 13:03:02 -04:00
|
|
|
--#{$base}-light: #{$color-light}
|
|
|
|
|
--#{$base}-light-hover: #{darken($color-light, 5%)}
|
|
|
|
|
--#{$base}-light-active: #{darken($color-light, 10%)}
|
2019-10-18 14:05:37 -04:00
|
|
|
$color-dark: findCSSVarDarkColor($color)
|
2019-10-18 13:03:02 -04:00
|
|
|
--#{$base}-dark: #{$color-dark}
|
|
|
|
|
--#{$base}-dark-hover: #{darken($color-dark, 5%)}
|
|
|
|
|
--#{$base}-dark-active: #{darken($color-dark, 10%)}
|
|
|
|
|
|
|
|
|
|
\:root
|
2019-10-18 20:29:40 -04:00
|
|
|
--#{$prefix}white: #{$white}
|
|
|
|
|
--#{$prefix}black: #{$black}
|
|
|
|
|
--#{$prefix}black-transparent: #{rgba(#000, 0.7)}
|
2019-10-18 14:05:37 -04:00
|
|
|
@each $name, $color in $cssvar-colors
|
|
|
|
|
+cssvar($name, $color)
|
|
|
|
|
|
2019-10-18 20:29:40 -04:00
|
|
|
// $white: var(--#{$prefix}white)
|
|
|
|
|
// $black: var(--#{$prefix}black)
|
|
|
|
|
// $black-transparent: var(--#{$prefix}black-transparent)
|
|
|
|
|
// $scheme-main: var(--#{$prefix}scheme-main)
|
|
|
|
|
// $scheme-main-bis: var(--#{$prefix}scheme-main-bis)
|
|
|
|
|
// $scheme-main-ter: var(--#{$prefix}scheme-main-ter)
|
|
|
|
|
// $scheme-invert: var(--#{$prefix}scheme-invert)
|
|
|
|
|
// $scheme-invert-bis: var(--#{$prefix}scheme-invert-bis)
|
|
|
|
|
// $scheme-invert-ter: var(--#{$prefix}scheme-invert-ter)
|
|
|
|
|
// $background: var(--#{$prefix}background)
|
|
|
|
|
// $border: var(--#{$prefix}border)
|
|
|
|
|
// $border-hover: var(--#{$prefix}border-hover)
|
|
|
|
|
// $border-light: var(--#{$prefix}border-light)
|
|
|
|
|
// $border-light-hover: var(--#{$prefix}border-light-hover)
|
|
|
|
|
// $text: var(--#{$prefix}text)
|
|
|
|
|
// $text-invert: var(--#{$prefix}text-invert)
|
|
|
|
|
// $text-light: var(--#{$prefix}text-light)
|
|
|
|
|
// $text-strong: var(--#{$prefix}text-strong)
|
|
|
|
|
// $code: var(--#{$prefix}code)
|
|
|
|
|
// $code-background: var(--#{$prefix}code-background)
|
|
|
|
|
// $pre: var(--#{$prefix}pre)
|
|
|
|
|
// $pre-background: var(--#{$prefix}pre-background)
|
|
|
|
|
// $link: var(--#{$prefix}link)
|
|
|
|
|
// $link-invert: var(--#{$prefix}link-invert)
|
|
|
|
|
// $link-light: var(--#{$prefix}link-light)
|
|
|
|
|
// $link-dark: var(--#{$prefix}link-dark)
|
|
|
|
|
// $link-visited: var(--#{$prefix}link-visited)
|
|
|
|
|
// $link-hover: var(--#{$prefix}link-hover)
|
|
|
|
|
// $link-hover-border: var(--#{$prefix}link-hover-border)
|
|
|
|
|
// $link-focus: var(--#{$prefix}link-focus)
|
|
|
|
|
// $link-focus-border: var(--#{$prefix}link-focus-border)
|
|
|
|
|
// $link-active: var(--#{$prefix}link-active)
|
|
|
|
|
// $link-active-border: var(--#{$prefix}link-active-border)
|
