fix lint errors

packages/core-styles/scss/bootstrap/_variables-dark.scss

@@ -1,14 +1,12 @@
-$success-text-emphasis-dark:        mix(#fff, $success, 20%) !default;
-$info-text-emphasis-dark:           mix(#fff, $info, 20%) !default;
-$warning-text-emphasis-dark:        mix(#fff, $warning, 20%) !default;
-$danger-text-emphasis-dark:         mix(#fff, $danger, 20%) !default;
-
-$success-bg-subtle-dark:            mix($gray-900, $success, 85%) !default;
-$info-bg-subtle-dark:               mix($gray-900, $info, 85%) !default;
-$warning-bg-subtle-dark:            mix($gray-900, $warning, 85%) !default;
-$danger-bg-subtle-dark:             mix($gray-900, $danger, 85%) !default;
-
-$success-border-subtle-dark:        mix($gray-900, $success, 50%) !default;
-$info-border-subtle-dark:           mix($gray-900, $info, 50%) !default;
-$warning-border-subtle-dark:        mix($gray-900, $warning, 50%) !default;
-$danger-border-subtle-dark:         mix($gray-900, $danger, 50%) !default;
+$success-text-emphasis-dark: color.mix(#fff, $success, 20%) !default;
+$info-text-emphasis-dark: color.mix(#fff, $info, 20%) !default;
+$warning-text-emphasis-dark: color.mix(#fff, $warning, 20%) !default;
+$danger-text-emphasis-dark: color.mix(#fff, $danger, 20%) !default;
+$success-bg-subtle-dark: color.mix($gray-900, $success, 85%) !default;
+$info-bg-subtle-dark: color.mix($gray-900, $info, 85%) !default;
+$warning-bg-subtle-dark: color.mix($gray-900, $warning, 85%) !default;
+$danger-bg-subtle-dark: color.mix($gray-900, $danger, 85%) !default;
+$success-border-subtle-dark: color.mix($gray-900, $success, 50%) !default;
+$info-border-subtle-dark: color.mix($gray-900, $info, 50%) !default;
+$warning-border-subtle-dark: color.mix($gray-900, $warning, 50%) !default;
+$danger-border-subtle-dark: color.mix($gray-900, $danger, 50%) !default;

packages/core-styles/scss/bootstrap/_variables.scss

@@ -4,25 +4,22 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // Color system
-$success:       #4a9017 !default;
-$info:          #4689aa !default;
-$warning:       #c99818 !default;
-$danger:        #de4d4d !default;
-
-$success-text-emphasis:       mix($gray-900, $success, 30%) !default;
-$info-text-emphasis:          mix($gray-900, $info, 30%) !default;
-$warning-text-emphasis:       mix($gray-900, $warning, 30%) !default;
-$danger-text-emphasis:        mix($gray-900, $danger, 30%) !default;
-
-$success-bg-subtle:           mix(#fff, $success, 90%) !default;
-$info-bg-subtle:              mix(#fff, $info, 90%) !default;
-$warning-bg-subtle:           mix(#fff, $warning, 90%) !default;
-$danger-bg-subtle:            mix(#fff, $danger, 90%) !default;
-
-$success-border-subtle:       mix(#fff, $success, 70%) !default;
-$info-border-subtle:          mix(#fff, $info, 70%) !default;
-$warning-border-subtle:       mix(#fff, $warning, 70%) !default;
-$danger-border-subtle:        mix(#fff, $danger, 70%) !default;
+$success: #4a9017 !default;
+$info: #4689aa !default;
+$warning: #c99818 !default;
+$danger: #de4d4d !default;
+$success-text-emphasis: color.mix($gray-900, $success, 30%) !default;
+$info-text-emphasis: color.mix($gray-900, $info, 30%) !default;
+$warning-text-emphasis: color.mix($gray-900, $warning, 30%) !default;
+$danger-text-emphasis: color.mix($gray-900, $danger, 30%) !default;
+$success-bg-subtle: color.mix(#fff, $success, 90%) !default;
+$info-bg-subtle: color.mix(#fff, $info, 90%) !default;
+$warning-bg-subtle: color.mix(#fff, $warning, 90%) !default;
+$danger-bg-subtle: color.mix(#fff, $danger, 90%) !default;
+$success-border-subtle: color.mix(#fff, $success, 70%) !default;
+$info-border-subtle: color.mix(#fff, $info, 70%) !default;
+$warning-border-subtle: color.mix(#fff, $warning, 70%) !default;
+$danger-border-subtle: color.mix(#fff, $danger, 70%) !default;
 
 
 // Options
@@ -30,7 +27,7 @@ $danger-border-subtle:        mix(#fff, $danger, 70%) !default;
 // Quickly modify global styling by enabling or disabling optional features.
 
 $enable-shadows: true;
-$box-shadow-inset: inset 0 0 rgba(black, 0); // set invisible value for inset
+$box-shadow-inset: inset 0 0 rgb(black 0); // set invisible value for inset
 
 
 // Buttons
@@ -58,7 +55,7 @@ $font-family-base: $font-family-sans-serif;
 
 
 //== Dropdowns
-$dropdown-header-padding-y:         0 !default;
+$dropdown-header-padding-y: 0 !default;
 
 //== Modals
 $modal-footer-border-width: 0;

packages/core-styles/scss/bootstrap/mixins/_button-outline-neutral-variant.scss

@@ -1,18 +1,17 @@
 @mixin button-outline-neutral-variant-light(
   $color,
-  $background: mix(#fff, $color, 100%),
-  $border: mix(#fff, $color, 70%),
-  $hover-background: mix(#fff, $color, 95%),
+  $background: color.mix(#fff, $color, 100%),
+  $border: color.mix(#fff, $color, 70%),
+  $hover-background: color.mix(#fff, $color, 95%),
   $hover-border: $border,
   $hover-color: $color,
-  $active-background: mix(#fff, $color, 85%),
+  $active-background: color.mix(#fff, $color, 85%),
   $active-border: $border,
   $active-color: $color,
   $disabled-background: $background,
   $disabled-border: $border,
   $disabled-color: $color
 ) {
-
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
   --#{$prefix}btn-border-color: #{$border};
@@ -30,19 +29,18 @@
 
 @mixin button-outline-neutral-variant-dark(
   $color,
-  $background: mix($gray-900, $color, 100%),
-  $border: mix($gray-900, $color, 70%),
-  $hover-background: mix($gray-900, $color, 95%),
+  $background: color.mix($gray-900, $color, 100%),
+  $border: color.mix($gray-900, $color, 70%),
+  $hover-background: color.mix($gray-900, $color, 95%),
   $hover-border: $border,
   $hover-color: $color,
-  $active-background: mix($gray-900, $color, 85%),
+  $active-background: color.mix($gray-900, $color, 85%),
   $active-border: $border,
   $active-color: $color,
   $disabled-background: $background,
   $disabled-border: $border,
   $disabled-color: $color
 ) {
-
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
   --#{$prefix}btn-border-color: #{$border};

packages/core-styles/scss/bootstrap/mixins/_button-outline-variant.scss

@@ -1,18 +1,17 @@
 @mixin button-outline-variant-light(
   $color,
-  $background: mix(#fff, $color, 90%),
+  $background: color.mix(#fff, $color, 90%),
   $border: $color,
-  $hover-background: mix(#fff, $color, 85%),
+  $hover-background: color.mix(#fff, $color, 85%),
   $hover-border: $border,
   $hover-color: $color,
-  $active-background: mix(#fff, $color, 70%),
+  $active-background: color.mix(#fff, $color, 70%),
   $active-border: $border,
   $active-color: $color,
   $disabled-background: $background,
   $disabled-border: $border,
   $disabled-color: $color
 ) {
-
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
   --#{$prefix}btn-border-color: #{$border};
@@ -30,19 +29,18 @@
 
 @mixin button-outline-variant-dark(
   $color,
-  $background: mix($gray-900, $color, 85%),
-  $border: mix($gray-900, $color, 50%),
-  $hover-background: mix($gray-900, $color, 80%),
+  $background: color.mix($gray-900, $color, 85%),
+  $border: color.mix($gray-900, $color, 50%),
+  $hover-background: color.mix($gray-900, $color, 80%),
   $hover-border: $border,
   $hover-color: $color,
-  $active-background: mix($gray-900, $color, 65%),
+  $active-background: color.mix($gray-900, $color, 65%),
   $active-border: $border,
   $active-color: $color,
   $disabled-background: $background,
   $disabled-border: $border,
   $disabled-color: $color
 ) {
-
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
   --#{$prefix}btn-border-color: #{$border};

packages/core-styles/scss/bootstrap/theming/utils/_color-palette.scss

@@ -1,13 +1,15 @@
+@use 'sass:color';
+
 @mixin generate-color-palette($color-id, $color-value, $shade-color: black, $tint-color: white, $shade-color-ratio: 20%, $tint-color-ratio: 20%, $prefix: 'grw-') {
-  $color-900: mix($shade-color, $color-value, $shade-color-ratio * 4);
-  $color-800: mix($shade-color, $color-value, $shade-color-ratio * 3);
-  $color-700: mix($shade-color, $color-value, $shade-color-ratio * 2);
-  $color-600: mix($shade-color, $color-value, $shade-color-ratio);
+  $color-900: color.mix($shade-color, $color-value, $shade-color-ratio * 4);
+  $color-800: color.mix($shade-color, $color-value, $shade-color-ratio * 3);
+  $color-700: color.mix($shade-color, $color-value, $shade-color-ratio * 2);
+  $color-600: color.mix($shade-color, $color-value, $shade-color-ratio);
   $color-500: $color-value;
-  $color-400: mix($tint-color, $color-value, $tint-color-ratio);
-  $color-300: mix($tint-color, $color-value, $tint-color-ratio * 2);
-  $color-200: mix($tint-color, $color-value, $tint-color-ratio * 3);
-  $color-100: mix($tint-color, $color-value, $tint-color-ratio * 4);
+  $color-400: color.mix($tint-color, $color-value, $tint-color-ratio);
+  $color-300: color.mix($tint-color, $color-value, $tint-color-ratio * 2);
+  $color-200: color.mix($tint-color, $color-value, $tint-color-ratio * 3);
+  $color-100: color.mix($tint-color, $color-value, $tint-color-ratio * 4);
 
   --#{$prefix}#{$color-id}-900: #{$color-900};
   --#{$prefix}#{$color-id}-800: #{$color-800};
@@ -18,7 +20,6 @@
   --#{$prefix}#{$color-id}-300: #{$color-300};
   --#{$prefix}#{$color-id}-200: #{$color-200};
   --#{$prefix}#{$color-id}-100: #{$color-100};
-
   --#{$prefix}#{$color-id}-900-rgb: #{to-rgb($color-900)};
   --#{$prefix}#{$color-id}-800-rgb: #{to-rgb($color-800)};
   --#{$prefix}#{$color-id}-700-rgb: #{to-rgb($color-700)};