[Bug] Style Issues

[Eonasdan]

Version

1.0.4

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/badge/soft-ui-dashboard

Operating System

Win 11

Device

PC

Browser & Version

Chrome 94

Steps to reproduce

1. Build SCSS

What is expected?

SCSS compiling free from errors.

What is actually happening?

There are numerous errors compiling the scss with the latest (dart) sass.

SassError: Top-level selectors may not contain the parent selector "&".
   ╷
15 │   &.bg-gradient-faded-#{$prop}-vertical{
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles\theme\soft_ui\_gradients.scss 15:3         @import
  src\styles\theme\soft_ui\theme.scss 42:9              @import
  src\styles\theme\soft_ui\theme-pro.scss 20:9          @import
  src\styles\theme\soft_ui\soft-ui-dashboard.scss 27:9  @import
  src\styles\styles.scss 46:9                           root stylesheet


/ Generating browser application bundles (phase: building)...WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
272 │   1: $spacer / 4,
    │      ^^^^^^^^^^^
    ╵
    src\styles\theme\soft_ui\_variables.scss 272:6        @import
    src\styles\theme\soft_ui\soft-ui-dashboard.scss 21:9  @import
    src\styles\styles.scss 46:9                           root stylesheet

---

Solution

Additional comments

In additional to the compiling errors, there are lots of accessibility issues. Almost all of the buttons and badges do not meet a proper contrast ratio.