Add support for [drupal off canvas editor] and the [layout builder] settings try to [Varbase Bootstrap Paragraphs] module with vbp_color and vbp_colors mixins

Varbase Bootstrap Paragraphs Colors to work with #drupal-off-canvas

scss/theme/vbp-colors.theme.scss

// Varbase Bootstrap Paragraphs colors theme.
// -----------------------------------------------------------------------------
@import "../../node_modules/bootstrap/scss/functions"; // Bootstrap functions.
@import "../../node_modules/bootstrap/scss/mixins";    // Bootstrap mixins.
@import "../../node_modules/bootstrap/scss/variables"; // Bootstrap variables.
// -----------------------------------------------------------------------------

// Add display so color shows.
.paragraph.paragraph--color {
  display: table;
}

// Adds padding to fill in color.
.paragraph.paragraph--color > .paragraph__column {
  padding-top: $jumbotron-padding;
  padding-bottom: $jumbotron-padding;
}

// Fills color on colorless .paragraph__column after color .paragraph__column.
.paragraph.paragraph--color + .paragraph > .paragraph__column {
  padding-top: $jumbotron-padding;
}

// Background colours;
// -----------------------------------------------------------------------------
// vbp_color_01: Blue
// vbp_color_02: Madison
// vbp_color_03: Dark Gray
// vbp_color_04: Light Gray
// vbp_color_05: Red

// List of palette background colors by name.
$vbp-palette-color-boston-blue:      #338ec7;
$vbp-palette-color-pickled-bluewood: #2c3e50;
$vbp-palette-color-silver-chalice:   #a4a4a4;
$vbp-palette-color-alto:             #d3d3d3;
$vbp-palette-color-persian-red:      #cc3c2d;
$vbp-palette-color-anzac:            #E4B649;

// Associate background colors nemas to a function name.
$vbp_color_01: $vbp-palette-color-boston-blue;       // Blue
$vbp_color_02: $vbp-palette-color-pickled-bluewood;  // Madison
$vbp_color_03: $vbp-palette-color-silver-chalice;    // Dark Gray
$vbp_color_04: $vbp-palette-color-alto;              // Light Gray
$vbp_color_05: $vbp-palette-color-persian-red;       // Red

// Map of background colors by function.
$vbp-colors: () !default;
$vbp-colors: map-merge(
  (
    "vbp_color_01": $vbp_color_01,
    "vbp_color_02": $vbp_color_02,
    "vbp_color_03": $vbp_color_03,
    "vbp_color_04": $vbp_color_04,
    "vbp_color_05": $vbp_color_05
  ),
  $vbp-colors
);

// Foreground colours:
// -----------------------------------------------------------------------------
// vbp_foreground_color_01: White for background vbp_color_01 color.
// vbp_foreground_color_02: White for background vbp_color_02 color.
// vbp_foreground_color_03: White for background vbp_color_03 color.
// vbp_foreground_color_04: Black for background vbp_color_04 color.
// vbp_foreground_color_05: White for background vbp_color_05 color.

// List of palette foreground colors by name.
$vbp-palette-color-black:            #000000;
$vbp-palette-color-white:            #ffffff;

// Associate foreground colors nemas to a function name.
$vbp_foreground_color_01: $vbp-palette-color-white; // White
$vbp_foreground_color_02: $vbp-palette-color-white; // White
$vbp_foreground_color_03: $vbp-palette-color-white; // White
$vbp_foreground_color_04: $vbp-palette-color-black; // Black
$vbp_foreground_color_05: $vbp-palette-color-white; // White

// Map of foreground colors by function.
$vbp-foreground-colors: () !default;
$vbp-foreground-colors: map-merge(
  (
    "vbp_color_01": $vbp_foreground_color_01,
    "vbp_color_02": $vbp_foreground_color_02,
    "vbp_color_03": $vbp_foreground_color_03,
    "vbp_color_04": $vbp_foreground_color_04,
    "vbp_color_05": $vbp_foreground_color_05
  ),
  $vbp-foreground-colors
);

// Varbase Bootstrap Paragraphs color default template for the vbp_color_{NUM}
// we could copy this mixin and change it for other type of styling options.
// This could be changed in your sub-theme, in the way you custom sites.
@mixin vbp_color($vbp_color_name, $vbp_background_color, $vbp_foreground_color) {
  .#{$vbp_color_name} {
    background-color: $vbp_background_color;
    color: $vbp_foreground_color;

    a {
      color: $vbp_foreground_color;

      &:hover,
      &:focus,
      &:active,
      &.is-active,
      &.active {
        color: $vbp_foreground_color;
      }
    }
  }
}

// Varbase Bootstrap Paragraphs colors default template.
// This could be changed in your sub-theme, in the way you custom sites.
@mixin vbp_colors {

  // Only listing 5 colors, this could work in a loop.
  // or by writing the list of css color classes manually.
  @each $vbp-color-name, $vbp-color-value in $vbp-colors {
    @include vbp_color(#{$vbp-color-name}, $vbp-color-value, map-get($vbp-foreground-colors, #{$vbp-color-name}));
  }

}

// Call the vbp_colors mixin for the front-end use.
@include vbp_colors;

// Add support for drupal off canvas editor and the layout builder settings try.
#drupal-off-canvas {
  @include vbp_colors;
}