mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
64 lines
2.6 KiB
Sass
64 lines
2.6 KiB
Sass
$prefix: "bulma-"
|
|
|
|
$cssvar-colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark), "scheme-main": ($scheme-main, $scheme-invert))
|
|
|
|
@function getCssVariable($color, $name)
|
|
$hue: hue($color)
|
|
$saturation: saturation($color)
|
|
$lightness: lightness($color)
|
|
$alpha: alpha($color)
|
|
@return $hue, $saturation, $lightness
|
|
|
|
=cssvar($color, $name, $color-light, $color-dark)
|
|
$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%))
|
|
|
|
--#{$base}-light: #{$color-light}
|
|
--#{$base}-light-hover: #{darken($color-light, 5%)}
|
|
--#{$base}-light-active: #{darken($color-light, 10%)}
|
|
|
|
--#{$base}-dark: #{$color-dark}
|
|
--#{$base}-dark-hover: #{darken($color-dark, 5%)}
|
|
--#{$base}-dark-active: #{darken($color-dark, 10%)}
|
|
|
|
// @if $cssvar-invert
|
|
// --#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
|
|
// @else
|
|
// --#{$base}-invert: #{findColorInvert($color)}
|
|
|
|
\:root
|
|
@each $name, $components in $cssvar-colors
|
|
$color: nth($components, 1)
|
|
$color-invert: nth($components, 2)
|
|
$color-light: null
|
|
$color-dark: null
|
|
// $cssvar-invert-name: ""
|
|
|
|
// @if length($components) >= 5
|
|
// $color-light: nth($components, 3)
|
|
// $color-dark: nth($components, 4)
|
|
// $cssvar-invert-name: nth($components, 5)
|
|
@if length($components) >= 4
|
|
$color-light: nth($components, 3)
|
|
$color-dark: nth($components, 4)
|
|
// $cssvar-invert-name: findColorInvert($color)
|
|
@else if length($components) >= 3
|
|
$color-light: nth($components, 3)
|
|
$color-dark: findDarkColor($color)
|
|
// $cssvar-invert-name: findColorInvert($color)
|
|
@else
|
|
$color-light: findLightColor($color)
|
|
$color-dark: findDarkColor($color)
|
|
// $cssvar-invert-name: findColorInvert($color)
|
|
|
|
+cssvar($color, $name, $color-light, $color-dark)
|