Make neutral the default gray scale (#3091)

.changeset/default-gray-neutral.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/docs": patch
+---
+
+Updated the default gray scale (`$gray-50`…`$gray-950`) to `neutral`; the old one stays as `data-bs-theme-base="gray"`.

core/js/src/theme-config.ts

@@ -7,7 +7,7 @@
  */
 export const themeDefaults = {
   'theme': 'auto',
-  'theme-base': 'gray',
+  'theme-base': 'neutral',
   'theme-font': 'sans-serif',
   'theme-primary': 'blue',
   'theme-radius': '1',

core/scss/_variables.scss

@@ -34,17 +34,17 @@ $enable-important-utilities: true !default;
 $color-mode-type: data !default;
 
 // Colors
-$gray-50: oklch(98.46% 0.0017 247.84deg) !default; // #f9fafb
+$gray-50: oklch(98.51% 0 0deg) !default; // #fafafa
-$gray-100: oklch(96.7% 0.0029 264.54deg) !default; // #f3f4f6
+$gray-100: oklch(97.02% 0 0deg) !default; // #f5f5f5
-$gray-200: oklch(92.76% 0.0058 264.53deg) !default; // #e5e7eb
+$gray-200: oklch(92.19% 0 0deg) !default; // #e5e5e5
-$gray-300: oklch(87.17% 0.0093 258.34deg) !default; // #d1d5db
+$gray-300: oklch(86.99% 0 0deg) !default; // #d4d4d4
-$gray-400: oklch(71.37% 0.0192 261.32deg) !default; // #9ca3af
+$gray-400: oklch(71.55% 0 0deg) !default; // #a3a3a3
-$gray-500: oklch(55.1% 0.0234 264.36deg) !default; // #6b7280
+$gray-500: oklch(55.55% 0 0deg) !default; // #737373
-$gray-600: oklch(44.61% 0.0263 256.8deg) !default; // #4b5563
+$gray-600: oklch(43.86% 0 0deg) !default; // #525252
-$gray-700: oklch(37.29% 0.0306 259.73deg) !default; // #374151
+$gray-700: oklch(37.15% 0 0deg) !default; // #404040
-$gray-800: oklch(27.81% 0.0296 256.85deg) !default; // #1f2937
+$gray-800: oklch(26.86% 0 0deg) !default; // #262626
-$gray-900: oklch(21.01% 0.0318 264.66deg) !default; // #111827
+$gray-900: oklch(20.46% 0 0deg) !default; // #171717
-$gray-950: oklch(12.96% 0.0274 261.69deg) !default; // #030712
+$gray-950: oklch(14.48% 0 0deg) !default; // #0a0a0a
 
 // $black and $white moved to `_settings.scss`
 

core/scss/tabler-themes.scss

@@ -17,17 +17,17 @@
 
 [data-bs-theme-base='gray'],
 [data-theme-base='gray'] {
-  --gray-50: #{$gray-50};
+  --gray-50: oklch(98.46% 0.0017 247.84deg); // #f9fafb
-  --gray-100: #{$gray-100};
+  --gray-100: oklch(96.7% 0.0029 264.54deg); // #f3f4f6
-  --gray-200: #{$gray-200};
+  --gray-200: oklch(92.76% 0.0058 264.53deg); // #e5e7eb
-  --gray-300: #{$gray-300};
+  --gray-300: oklch(87.17% 0.0093 258.34deg); // #d1d5db
-  --gray-400: #{$gray-400};
+  --gray-400: oklch(71.37% 0.0192 261.32deg); // #9ca3af
-  --gray-500: #{$gray-500};
+  --gray-500: oklch(55.1% 0.0234 264.36deg); // #6b7280
-  --gray-600: #{$gray-600};
+  --gray-600: oklch(44.61% 0.0263 256.8deg); // #4b5563
-  --gray-700: #{$gray-700};
+  --gray-700: oklch(37.29% 0.0306 259.73deg); // #374151
-  --gray-800: #{$gray-800};
+  --gray-800: oklch(27.81% 0.0296 256.85deg); // #1f2937
-  --gray-900: #{$gray-900};
+  --gray-900: oklch(21.01% 0.0318 264.66deg); // #111827
-  --gray-950: #{$gray-950};
+  --gray-950: oklch(12.96% 0.0274 261.69deg); // #030712
 }
 
 [data-bs-theme-base='zinc'],
@@ -47,17 +47,17 @@
 
 [data-bs-theme-base='neutral'],
 [data-theme-base='neutral'] {
-  --gray-50: oklch(98.51% 0 0deg); // #fafafa
+  --gray-50: #{$gray-50};
-  --gray-100: oklch(97.02% 0 0deg); // #f5f5f5
+  --gray-100: #{$gray-100};
-  --gray-200: oklch(92.19% 0 0deg); // #e5e5e5
+  --gray-200: #{$gray-200};
-  --gray-300: oklch(86.99% 0 0deg); // #d4d4d4
+  --gray-300: #{$gray-300};
-  --gray-400: oklch(71.55% 0 0deg); // #a3a3a3
+  --gray-400: #{$gray-400};
-  --gray-500: oklch(55.55% 0 0deg); // #737373
+  --gray-500: #{$gray-500};
-  --gray-600: oklch(43.86% 0 0deg); // #525252
+  --gray-600: #{$gray-600};
-  --gray-700: oklch(37.15% 0 0deg); // #404040
+  --gray-700: #{$gray-700};
-  --gray-800: oklch(26.86% 0 0deg); // #262626
+  --gray-800: #{$gray-800};
-  --gray-900: oklch(20.46% 0 0deg); // #171717
+  --gray-900: #{$gray-900};
-  --gray-950: oklch(14.48% 0 0deg); // #0a0a0a
+  --gray-950: #{$gray-950};
 }
 
 [data-bs-theme-base='stone'],

docs/content/ui/plugins/theme-base-colors.mdx

@@ -8,7 +8,7 @@ related: [/ui/getting-started/customize, /ui/getting-started/color-modes]
 
 import CdnImportPlugin from '@components/CdnImportPlugin.astro';
 
-Every gray you see in Tabler - card backgrounds, borders, muted text, table stripes - is built from a `--tblr-gray-50` … `--tblr-gray-950` scale. By default that scale is Tabler's own `gray` palette. The `tabler-themes` stylesheet adds four more takes on the same scale - `slate`, `zinc`, `neutral`, and `stone` - so you can pick a cooler or warmer neutral without touching a single component's CSS.
+Every gray you see in Tabler - card backgrounds, borders, muted text, table stripes - is built from a `--tblr-gray-50` … `--tblr-gray-950` scale. By default that scale is the `neutral` palette. The `tabler-themes` stylesheet adds four more takes on the same scale - `slate`, `gray`, `zinc`, and `stone` - so you can pick a cooler or warmer neutral without touching a single component's CSS.
 
 ## Installation
 
@@ -24,14 +24,14 @@ If you compile Tabler from source with Sass, add its own entry point:
 
 ## Base color palettes
 
-Set `data-bs-theme-base` on `<html>` to one of five values. `gray` is the default - Tabler looks the same with or without the attribute set to `gray`.
+Set `data-bs-theme-base` on `<html>` to one of five values. `neutral` is the default - Tabler looks the same with or without the attribute set to `neutral`.
 
 | Value | Description |
 | --- | --- |
-| `gray` | Tabler's default neutral gray (no attribute needed) |
+| `neutral` | Tabler's default pure, desaturated gray (no attribute needed) |
 | `slate` | A cooler, slightly blue-tinted gray |
+| `gray` | A cool gray with a subtle blue tint |
 | `zinc` | A neutral, low-saturation gray |
-| `neutral` | A pure, desaturated gray |
 | `stone` | A warmer, slightly brown-tinted gray |
 
 ```html
@@ -88,4 +88,4 @@ Every selector matches two attributes: `data-bs-theme-base` (Bootstrap's namespa
 
 ## Accessibility
 
-Every built-in palette keeps roughly the same lightness steps as the default `gray` scale, so switching `theme-base` doesn't break the contrast that Tabler's components already rely on between text, borders, and surfaces. If you build a custom palette instead (see above), check that your `50` and `950` shades still give enough contrast against white and black text - large lightness jumps between adjacent steps can make borders disappear or muted text unreadable.
+Every built-in palette keeps roughly the same lightness steps as the default `neutral` scale, so switching `theme-base` doesn't break the contrast that Tabler's components already rely on between text, borders, and surfaces. If you build a custom palette instead (see above), check that your `50` and `950` shades still give enough contrast against white and black text - large lightness jumps between adjacent steps can make borders disappear or muted text unreadable.