bulma/docs/bulma-cssvar.scss

$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;
}

@mixin 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)};
  --#{$prefix}-scheme-main: #{$white};
  --#{$prefix}-scheme-main-bis: #{$white-bis};
  --#{$prefix}-scheme-main-ter: #{$white-ter};
  --#{$prefix}-scheme-invert: #{$black};
  --#{$prefix}-scheme-invert-bis: #{$black-bis};
  --#{$prefix}-scheme-invert-ter: #{$black-ter};
  --#{$prefix}-background: #{$white-ter};
  --#{$prefix}-border: #{$grey-lighter};
  --#{$prefix}-border-hover: #{$grey-light};
  --#{$prefix}-border-light: #{$grey-lightest};
  --#{$prefix}-border-light-hover: #{$grey-light};
  --#{$prefix}-text: #{$grey-dark};
  --#{$prefix}-text-invert: #{findCSSVarColorInvert($text)};
  --#{$prefix}-text-light: #{$grey};
  --#{$prefix}-text-strong: #{$grey-darker};
  --#{$prefix}-code: #{$red};
  --#{$prefix}-code-background: #{$background};
  --#{$prefix}-pre: #{$text};
  --#{$prefix}-pre-background: #{$background};
  --#{$prefix}-link: #{$blue};
  --#{$prefix}-link-invert: #{findCSSVarColorInvert($link)};
  --#{$prefix}-link-light: #{findCSSVarLightColor($link)};
  --#{$prefix}-link-dark: #{findCSSVarDarkColor($link)};
  --#{$prefix}-link-visited: #{$purple};
  --#{$prefix}-link-hover: #{$grey-darker};
  --#{$prefix}-link-hover-border: #{$grey-light};
  --#{$prefix}-link-focus: #{$grey-darker};
  --#{$prefix}-link-focus-border: #{$blue};
  --#{$prefix}-link-active: #{$grey-darker};
  --#{$prefix}-link-active-border: #{$grey-dark};

  @each $name, $color in $cssvar-colors {
    @include 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);

html {
  background-color: $scheme-main;
}

body {
  color: $text;
}

a {
  color: $link;
  &:hover {
    color: $link-hover;
  }
}

code {
  background-color: $code-background;
  color: $code;
}

hr {
  background-color: $hr-background-color;
}