[Proposal] CSS Variables

I know CSS variables has already been discussed (#26596) and I saw this reply https://github.com/twbs/bootstrap/issues/26596#issuecomment-403342215

So I come with a proposal which not requires heavy refactoring

Proposal

Instead of using directly native functions like darken or lighten we should use wrappers Ex : try-darken

@function try-darken($color, $percent) {

  @if (not $enable-variables){
    @return darken($color, $percent);
  }

  @if str_slice("#{$color}", 0, 3) == "var" {
    $percent-str: "#{$percent * 100}";
    $percent-value: str_slice($percent-str, 0, str_length($percent-str) - 1);
    $original: str_slice($color, 7, str_length($color) - 1);
    $variable: --#{$original}-darken-#{$percent-value};
    @return var($variable);
  }

  @return darken($color, $percent);
}

This wrapper handles the variable construction and create shades of colors.

Then we need to generate all shades of variables

:root {
  @if ($enable-variables){
    @each $color, $value in $theme-colors-values {
      --#{$color}: #{$value};
      --#{$color}-yiq: #{color-yiq($value)};

      @each $shade in $theme-colors-shades {
        --#{$color}-darken-#{$shade * 100}: #{darken($value, $shade)};
        --#{$color}-darken-#{$shade * 100}-yiq: #{color-yiq(darken($value, $shade))};
        --#{$color}-lighten-#{$shade * 100}: #{lighten($value, $shade)};
        --#{$color}-lighten-#{$shade * 100}-yiq: #{color-yiq(lighten($value, $shade))};
      }
    }
  }
  @else{
    @each $color, $value in $theme-colors {
      --#{$color}: #{$value};
    }
  }
}

This creates all necessary variables. As you see, this requires to list all necessary shades, and concret theme color values

$primary:    var(--primary) !default;
$secondary:  var(--secondary) !default;
$success:    var(--success) !default;
$info:       var(--info) !default;
$warning:    var(--warning) !default;
$danger:     var(--danger) !default;
$light:      var(--light) !default;
$dark:       var(--dark) !default;

$theme-colors-values: map-merge(
  (
    "primary":     $blue,
    "secondary":   $gray-600,
    "success":     $green,
    "info":        $cyan,
    "warning":     $yellow,
    "danger":      $red,
    "light":       $gray-100,
    "dark":        $gray-800,
  ),
  $theme-colors-values
);

$theme-colors-shades: (7.5, 10, 12.5, 25, 35, 40) !default;

With theses few tricks I managed to create all variables I needed for theme colors, and I can change it on the fly with few javascript

Demo

Here is a demo site with an implementation https://felx-b.github.io/docs/4.3/getting-started/introduction/ You can change the primary color on fly in the nav bar

Source

Here are the sources https://github.com/Felx-B/bootstrap-css-variable

Alternative

If the proposal is rejected, it would worth nothing to wrap native function calls (like darken/lighten/mix …) into upper functions (try-darken, try-lighten …) so we could override these behaviors to implement CSS variable ourselves.

[guledali]

@piernik and it’s easy too, not that the current scss is difficult but this is “easier”

[piernik]

@Felx-B I love Your idea. I think css variables is must-have in bootstrap. With that every user could change interface colors - It’s great!