mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Make neutral the default gray scale (#3091)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
4cfa9f340a
commit
090591873a
5 files changed
+45
-39
No files matched your search
@@ -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"`.
|
||||
@@ -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',
|
||||
|
||||
+11
-11
@@ -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`
|
||||
|
||||
|
||||
@@ -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'],
|
||||
|
||||
@@ -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.
|
||||
Reference in new issue
Block a user