diff --git a/.changeset/default-gray-neutral.md b/.changeset/default-gray-neutral.md new file mode 100644 index 000000000..1b7165aaf --- /dev/null +++ b/.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"`. diff --git a/core/js/src/theme-config.ts b/core/js/src/theme-config.ts index c04dd8ed4..9882b7394 100644 --- a/core/js/src/theme-config.ts +++ b/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', diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index e1460d555..65be49846 100644 --- a/core/scss/_variables.scss +++ b/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-100: oklch(96.7% 0.0029 264.54deg) !default; // #f3f4f6 -$gray-200: oklch(92.76% 0.0058 264.53deg) !default; // #e5e7eb -$gray-300: oklch(87.17% 0.0093 258.34deg) !default; // #d1d5db -$gray-400: oklch(71.37% 0.0192 261.32deg) !default; // #9ca3af -$gray-500: oklch(55.1% 0.0234 264.36deg) !default; // #6b7280 -$gray-600: oklch(44.61% 0.0263 256.8deg) !default; // #4b5563 -$gray-700: oklch(37.29% 0.0306 259.73deg) !default; // #374151 -$gray-800: oklch(27.81% 0.0296 256.85deg) !default; // #1f2937 -$gray-900: oklch(21.01% 0.0318 264.66deg) !default; // #111827 -$gray-950: oklch(12.96% 0.0274 261.69deg) !default; // #030712 +$gray-50: oklch(98.51% 0 0deg) !default; // #fafafa +$gray-100: oklch(97.02% 0 0deg) !default; // #f5f5f5 +$gray-200: oklch(92.19% 0 0deg) !default; // #e5e5e5 +$gray-300: oklch(86.99% 0 0deg) !default; // #d4d4d4 +$gray-400: oklch(71.55% 0 0deg) !default; // #a3a3a3 +$gray-500: oklch(55.55% 0 0deg) !default; // #737373 +$gray-600: oklch(43.86% 0 0deg) !default; // #525252 +$gray-700: oklch(37.15% 0 0deg) !default; // #404040 +$gray-800: oklch(26.86% 0 0deg) !default; // #262626 +$gray-900: oklch(20.46% 0 0deg) !default; // #171717 +$gray-950: oklch(14.48% 0 0deg) !default; // #0a0a0a // $black and $white moved to `_settings.scss` diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss index b367c2b05..1ac18d936 100644 --- a/core/scss/tabler-themes.scss +++ b/core/scss/tabler-themes.scss @@ -17,17 +17,17 @@ [data-bs-theme-base='gray'], [data-theme-base='gray'] { - --gray-50: #{$gray-50}; - --gray-100: #{$gray-100}; - --gray-200: #{$gray-200}; - --gray-300: #{$gray-300}; - --gray-400: #{$gray-400}; - --gray-500: #{$gray-500}; - --gray-600: #{$gray-600}; - --gray-700: #{$gray-700}; - --gray-800: #{$gray-800}; - --gray-900: #{$gray-900}; - --gray-950: #{$gray-950}; + --gray-50: oklch(98.46% 0.0017 247.84deg); // #f9fafb + --gray-100: oklch(96.7% 0.0029 264.54deg); // #f3f4f6 + --gray-200: oklch(92.76% 0.0058 264.53deg); // #e5e7eb + --gray-300: oklch(87.17% 0.0093 258.34deg); // #d1d5db + --gray-400: oklch(71.37% 0.0192 261.32deg); // #9ca3af + --gray-500: oklch(55.1% 0.0234 264.36deg); // #6b7280 + --gray-600: oklch(44.61% 0.0263 256.8deg); // #4b5563 + --gray-700: oklch(37.29% 0.0306 259.73deg); // #374151 + --gray-800: oklch(27.81% 0.0296 256.85deg); // #1f2937 + --gray-900: oklch(21.01% 0.0318 264.66deg); // #111827 + --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-100: oklch(97.02% 0 0deg); // #f5f5f5 - --gray-200: oklch(92.19% 0 0deg); // #e5e5e5 - --gray-300: oklch(86.99% 0 0deg); // #d4d4d4 - --gray-400: oklch(71.55% 0 0deg); // #a3a3a3 - --gray-500: oklch(55.55% 0 0deg); // #737373 - --gray-600: oklch(43.86% 0 0deg); // #525252 - --gray-700: oklch(37.15% 0 0deg); // #404040 - --gray-800: oklch(26.86% 0 0deg); // #262626 - --gray-900: oklch(20.46% 0 0deg); // #171717 - --gray-950: oklch(14.48% 0 0deg); // #0a0a0a + --gray-50: #{$gray-50}; + --gray-100: #{$gray-100}; + --gray-200: #{$gray-200}; + --gray-300: #{$gray-300}; + --gray-400: #{$gray-400}; + --gray-500: #{$gray-500}; + --gray-600: #{$gray-600}; + --gray-700: #{$gray-700}; + --gray-800: #{$gray-800}; + --gray-900: #{$gray-900}; + --gray-950: #{$gray-950}; } [data-bs-theme-base='stone'], diff --git a/docs/content/ui/plugins/theme-base-colors.mdx b/docs/content/ui/plugins/theme-base-colors.mdx index 8512f9f51..f80ce41d5 100644 --- a/docs/content/ui/plugins/theme-base-colors.mdx +++ b/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 `` 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 `` 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.