Update body color variable and fix SCSS variable interpolation in themes (#2611)

.changeset/fix-gray-theme-variables.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed gray theme custom properties output using SCSS interpolation and updated default `$body-color` to `$gray-500`.

core/scss/_variables.scss

@@ -367,7 +367,7 @@ $negative-spacers: null !default;
 // Body
 
 $body-text-align: null !default;
-$body-color: $gray-900 !default;
+$body-color: $gray-500 !default;
 $body-bg: $white !default;
 
 $body-secondary-color: rgba($body-color, 0.75) !default;

core/scss/tabler-themes.scss

@@ -15,17 +15,17 @@
 }
 
 [data-bs-theme-base='gray'] {
-  --#{$prefix}gray-50: $gray-50;
+  --#{$prefix}gray-50: #{$gray-50};
-  --#{$prefix}gray-100: $gray-100;
+  --#{$prefix}gray-100: #{$gray-100};
-  --#{$prefix}gray-200: $gray-200;
+  --#{$prefix}gray-200: #{$gray-200};
-  --#{$prefix}gray-300: $gray-300;
+  --#{$prefix}gray-300: #{$gray-300};
-  --#{$prefix}gray-400: $gray-400;
+  --#{$prefix}gray-400: #{$gray-400};
-  --#{$prefix}gray-500: $gray-500;
+  --#{$prefix}gray-500: #{$gray-500};
-  --#{$prefix}gray-600: $gray-600;
+  --#{$prefix}gray-600: #{$gray-600};
-  --#{$prefix}gray-700: $gray-700;
+  --#{$prefix}gray-700: #{$gray-700};
-  --#{$prefix}gray-800: $gray-800;
+  --#{$prefix}gray-800: #{$gray-800};
-  --#{$prefix}gray-900: $gray-900;
+  --#{$prefix}gray-900: #{$gray-900};
-  --#{$prefix}gray-950: $gray-950;
+  --#{$prefix}gray-950: #{$gray-950};
 }
 
 [data-bs-theme-base='zinc'] {