refactor: migrate from import to Sass modules system

Author: mrholek

docs/assets/scss/_colors.scss

@@ -307,48 +307,6 @@ Here's an example of building a custom `.btn-*` modifier class like we do for th
 
 {{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
 
-### SASS variants
-
-CoreUI allows defining variant colors in two ways.
-
-#### Manual
-
-You can define each color manually and keep full control of the component appearance.
-
-{{< highlight scss >}}
-$button-variants: (
-  "primary": (
-    "background": $your-bg-color,
-    "border": $your-border-color,
-    "color": $your-color,
-    "hover-background": $your-bg-hover-color,
-    "hover-border": $your-hover-border-color,
-    "hover-color": $your-hover-color,
-    "active-background": $your-bg-active-color,
-    "active-border": $your-active-border-color,
-    "active-color": $your-active-color,
-    "disabled-background": $your-bg-disabled-color,,
-    "disabled-border": $your-disabled-border-color,
-    "disabled-color": $your-disabled-color,
-    "shadow": $your-shadow
-  )
-  ...
-);
-{{< /highlight >}}
-
-#### Color function
-
-The color set can be generated automatically thanks to our `button-color-map` function.
-
-{{< scss-docs name="button-color-functions" file="scss/_functions.scss" >}}
-
-{{< highlight scss >}}
-$button-variants: (
-  "primary": btn-color-map($primary),
-  ...
-);
-{{< /highlight >}} -->
-
 ### SASS mixins
 
 CoreUI's button component is built with a base-modifier class approach. This means the bulk of the styling is contained to a base class `.btn` while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$button-variants` map to make customizing the number and name of our modifier classes.
@@ -367,6 +325,4 @@ There are three mixins for buttons: button and button outline variant mixins, pl
 
 Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
 
-{{< scss-docs name="button-variants" file="scss/_variables.scss" >}}
-
 {{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}

docs/content/components/buttons.md

@@ -226,7 +226,7 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h
 
 You can lighten or darken colors with CoreUI for Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
 
-{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
+{{< scss-docs name="color-functions" file="scss/functions/_color.scss" >}}
 
 In practice, you'd call the function and pass in the color and weight parameters.
 

docs/content/customize/sass.md

@@ -9,7 +9,7 @@
 <link href="/dist/css/coreui{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
 {{- end }}
 
-{{- $sassOptions := dict "outputStyle" "expanded" "precision" 6 -}}
+{{- $sassOptions := dict "transpiler" "dartsass" "outputStyle" "expanded" "precision" 6 -}}
 {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}
 
 {{- $targetDocsCssPath := "/assets/css/docs.css" -}}