@function buildVarName($name, $prefix: "", $suffix: "") { @return "--#{$cssvars-prefix}#{$prefix}#{$name}#{$suffix}"; } @function getVar($name, $prefix: "", $suffix: "") { $varName: buildVarName($name, $prefix, $suffix); @return var(#{$varName}); } @function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") { $varName: buildVarName($name, $prefix, $suffix); @return unquote("rgba(var(#{$varName}), #{$alpha})"); } @mixin register-var($name, $value, $prefix: "", $suffix: "") { $varName: buildVarName($name, $prefix, $suffix); #{$varName}: #{$value}; } @mixin register-vars($vars, $prefix: "", $suffix: "") { @each $name, $value in $vars { @include register-var($name, $value, $prefix, $suffix); } } @mixin register-rgb($name, $value) { @include register-var( $name, (red($value), green($value), blue($value)), "", "-rgb" ); } @mixin register-hsl($name, $value) { @include register-var($name, round(hue($value)), "", "-h"); @include register-var($name, round(saturation($value)), "", "-s"); @include register-var($name, round(lightness($value)), "", "-l"); } @mixin generate-color-palette($name, $base, $invert) { $h: round(hue($base)); $s: round(saturation($base)); $l-base: round( lightness($base) % 10 ); // get lightness second digit: 53% -> 3% $l-0: 0%; // 5% or less $l-5: 5%; // more than 5% @if ($l-base < 5%) { $l-0: $l-base; $l-5: $l-base + 5%; } @else { $l-0: $l-base - 5%; $l-5: $l-base; } @include register-var($name, $base); @include register-var($name, $base, "", "-base"); @for $i from 0 through 9 { $color-l-0: $l-0 + $i * 10; // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc. $color-l-5: $l-5 + $i * 10; // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc. $v-0: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$color-l-0})"; $v-5: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$color-l-5})"; @include register-var($name, $v-0, "", "-#{$i}0"); @include register-var($name, $v-5, "", "-#{$i}5"); } @if ($l-base < 5%) { $v: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$l-base + 95%})"; @include register-var($name, $v, "", "-95"); } @include register-var($name, $invert, "", "-invert"); } @mixin bulma-theme($name, $scope: "") { @if ($scope == "parent") { [data-#{$class-prefix}theme="#{$name}"] &, .#{$class-prefix}theme-#{$name} & { @content; } } @else if ($scope == "self") { &[data-#{$class-prefix}theme="#{$name}"], &.#{$class-prefix}theme-#{$name} { @content; } } @else { [data-#{$class-prefix}theme="#{$name}"], .#{$class-prefix}theme-#{$name} { @content; } } }