Extends Bootstrap (padding, margin, gap, etc.) utilities with css variables

_hnldesign-extend-bs-utils.scss

//
// Extends Bootstrap utilities defined in map '$add_css_variables_to' with css variables
// containing their respective units. Also adds additional values,
// if specified as 'name: variable' pairs in '$add_values'
//
// example:
//  $add_css_variables_to: (
//    padding-x
//  )
//  $add_values: (
//    grid : var(--gap)
//  )
//
// before:
//
//  .px-1 {
//    padding-right: 0.25rem !important;
//    padding-left: 0.25rem !important;
//  }
//
//  after:
//
//  .px-1 {
//    padding-right: 0.25rem !important;
//    padding-left: 0.25rem !important;
//    --padding-right: 0.25rem !important;
//    --padding-left: 0.25rem !important;
//  }
//
//  including an additional:
//
//  .px-grid {
//    padding-right: var(--gap) !important;
//    padding-left: var(--gap) !important;
//    --padding-right: var(--gap) !important;
//    --padding-left: var(--gap) !important;
//  }
//  (and all responsive definitions, of course)
//
//
$utilities: () !default;
$add_css_variables_to: (
    padding,
    padding-x,
    padding-y,
    padding-top,
    padding-end,
    padding-bottom,
    padding-start,
    margin,
    margin-x,
    margin-y,
    margin-top,
    margin-end,
    margin-bottom,
    margin-start,
    gap,
    row-gap,
    column-gap
);
@if $enable-negative-margins {
  $add_css_variables_to: join($add_css_variables_to, (
      negative-margin,
      negative-margin-x,
      negative-margin-y,
      negative-margin-top,
      negative-margin-end,
      negative-margin-bottom,
      negative-margin-start,
  ));
}
$add_values: (
    grid : var(--gap, #{$spacer}),
    row : var(--row-gap, #{$spacer}),
    column : var(--column-gap, #{$spacer}),
);
@each $utility_name in $add_css_variables_to {
  $additional_values: ();
  $css_variables: ();
  $orig_properties: map-get(map-get($utilities, "#{$utility_name}"), "property");
  @each $property in map-get(map-get($utilities, "#{$utility_name}"), "property") {
    $css_variables: join($css_variables, --#{quote($property)}, space);
  }
  @each $value, $variable in $add_values {
    $additional_values: if($utility_name != "#{$value}", map-merge($additional_values, (#{$value}: #{$variable})), ());
  }
  $utilities: map-merge(
          $utilities, (
          "#{$utility_name}": map-merge(
                  map-get($utilities, "#{$utility_name}"),
                  (
                      property: join(map-get(map-get($utilities, "#{$utility_name}"), "property"), $css_variables, space),
                      values: map-merge(map-get(map-get($utilities, "#{$utility_name}"), "values"), $additional_values),
                  ),
          )
      )
  );
  // print out <class>-current classes that set padding to the current variable
  // useful to set equal padding in nested elements,
  // for example setting .px-current on an element inside a .px-1 element
  // will apply the same (responsive) left and right padding to it
  .#{map-get(map-get($utilities, "#{$utility_name}"), "class")}-current {
    @each $property in $orig_properties {
      #{$property}: var(--#{$property}, 0);
    }
  }
}