mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 02:44:29 -07:00
97 lines
3.8 KiB
Sass
97 lines
3.8 KiB
Sass
$prefix: "bulma-"
|
|
|
|
@function findCSSVarColorInvert($color)
|
|
@if colorLuminance($color) > 0.55
|
|
@return var(--#{$prefix}-black-transparent)
|
|
@else
|
|
@return var(--#{$prefix}-white)
|
|
|
|
@function findCSSVarLightColor($color)
|
|
@if type-of($color) == "color"
|
|
$l: 96%
|
|
@if lightness($color) > 96%
|
|
$l: lightness($color)
|
|
@return change-color($color, $lightness: $l)
|
|
@return var(--#{$prefix}-background)
|
|
|
|
@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))
|
|
@return var(--#{$prefix}-text-strong)
|
|
|
|
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
|
|
|
|
@function getCssVariable($color, $name)
|
|
$hue: hue($color)
|
|
$saturation: saturation($color)
|
|
$lightness: lightness($color)
|
|
$alpha: alpha($color)
|
|
@return $hue, $saturation, $lightness
|
|
|
|
=cssvar($name, $color)
|
|
$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)))
|
|
--#{$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)
|
|
--#{$base}-light: #{$color-light}
|
|
--#{$base}-light-hover: #{darken($color-light, 5%)}
|
|
--#{$base}-light-active: #{darken($color-light, 10%)}
|
|
$color-dark: findCSSVarDarkColor($color)
|
|
--#{$base}-dark: #{$color-dark}
|
|
--#{$base}-dark-hover: #{darken($color-dark, 5%)}
|
|
--#{$base}-dark-active: #{darken($color-dark, 10%)}
|
|
|
|
\:root
|
|
--#{$prefix}-white: #{$white}
|
|
--#{$prefix}-black: #{$black}
|
|
--#{$prefix}-black-transparent: #{rgba(#000, 0.7)}
|
|
@each $name, $color in $cssvar-colors
|
|
+cssvar($name, $color)
|
|
|
|
// $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)
|