From 5cbc443730820cda2145e90e61391d62d33a4f5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Sat, 10 Oct 2026 11:26:59 +0200 Subject: [PATCH] Add `mist` theme base and remove hidden `pink` base (#3303) --- .changeset/theme-base-mist.md | 7 +++++ core/scss/tabler-themes.scss | 27 +++++++++---------- .../ui/getting-started/color-modes.mdx | 2 +- docs/content/ui/plugins/theme-base-colors.mdx | 12 +++++---- shared/lib/site.ts | 2 +- 5 files changed, 29 insertions(+), 21 deletions(-) create mode 100644 .changeset/theme-base-mist.md diff --git a/.changeset/theme-base-mist.md b/.changeset/theme-base-mist.md new file mode 100644 index 000000000..8b336d22a --- /dev/null +++ b/.changeset/theme-base-mist.md @@ -0,0 +1,7 @@ +--- +"@tabler/core": minor +"@tabler/preview": patch +"@tabler/docs": patch +--- + +Added a `mist` gray palette for `data-bs-theme-base` and removed the hidden `pink` base from `tabler-themes.css`. diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss index 628c43c95..3944efd01 100644 --- a/core/scss/tabler-themes.scss +++ b/core/scss/tabler-themes.scss @@ -76,20 +76,19 @@ --gray-950: oklch(14.69% 0.0041 49.25deg); // #0c0a09 } -// Easter egg: not listed in the theme settings panel, enable with `data-bs-theme-base="pink"` or `?theme-base=pink` -[data-bs-theme-base='pink'], -[data-theme-base='pink'] { - --gray-50: oklch(97.14% 0.0141 343.2deg); // #fdf2f8 - --gray-100: oklch(94.82% 0.0276 342.26deg); // #fce7f3 - --gray-200: oklch(89.94% 0.0589 343.23deg); // #fbcfe8 - --gray-300: oklch(82.28% 0.1095 346.02deg); // #f9a8d4 - --gray-400: oklch(72.53% 0.1752 349.76deg); // #f472b6 - --gray-500: oklch(65.59% 0.2118 354.31deg); // #ec4899 - --gray-600: oklch(59.16% 0.218 0.58deg); // #db2777 - --gray-700: oklch(52.46% 0.199 3.96deg); // #be185d - --gray-800: oklch(45.87% 0.1697 3.82deg); // #9d174d - --gray-900: oklch(40.78% 0.1442 2.43deg); // #831843 - --gray-950: oklch(28.45% 0.1048 3.91deg); // #500724 +[data-bs-theme-base='mist'], +[data-theme-base='mist'] { + --gray-50: oklch(98.7% 0.002 197.4deg); // #f9fbfb + --gray-100: oklch(96.3% 0.002 197.4deg); // #f1f3f3 + --gray-200: oklch(92.5% 0.005 214.3deg); // #e3e7e8 + --gray-300: oklch(87.2% 0.007 219.5deg); // #d0d6d8 + --gray-400: oklch(72.3% 0.014 214.4deg); // #9ca8ab + --gray-500: oklch(56% 0.021 213.5deg); // #67787c + --gray-600: oklch(45% 0.017 213.2deg); // #4b585b + --gray-700: oklch(37.8% 0.015 216deg); // #394447 + --gray-800: oklch(27.5% 0.011 216.9deg); // #22292b + --gray-900: oklch(21.8% 0.008 223.9deg); // #161b1d + --gray-950: oklch(14.8% 0.004 228.8deg); // #090b0c } @each $name, $value in $extra-colors { diff --git a/docs/content/ui/getting-started/color-modes.mdx b/docs/content/ui/getting-started/color-modes.mdx index 026c119fe..62dfe1eee 100644 --- a/docs/content/ui/getting-started/color-modes.mdx +++ b/docs/content/ui/getting-started/color-modes.mdx @@ -15,7 +15,7 @@ Tabler includes a small script, [`tabler-theme.js`](https://github.com/tabler/ta | Setting | Attribute | Default | Allowed values | | --- | --- | --- | --- | | Color mode | `data-bs-theme` | `auto` | `light`, `dark`, `auto` | -| Base gray shade | `data-bs-theme-base` | `neutral` | `slate`, `gray`, `zinc`, `neutral`, `stone` | +| Base gray shade | `data-bs-theme-base` | `neutral` | `slate`, `gray`, `zinc`, `neutral`, `stone`, `mist` | | Font family | `data-bs-theme-font` | `sans-serif` | `sans-serif`, `serif`, `monospace`, `comic` | | Primary color | `data-bs-theme-primary` | `blue` | `blue`, `azure`, `indigo`, `purple`, `pink`, `red`, `orange`, `yellow`, `lime`, `green`, `teal`, `cyan`, `inverted` | | Corner radius | `data-bs-theme-radius` | `1` | `0`, `0.5`, `1`, `1.5`, `2` | diff --git a/docs/content/ui/plugins/theme-base-colors.mdx b/docs/content/ui/plugins/theme-base-colors.mdx index f80ce41d5..88278397c 100644 --- a/docs/content/ui/plugins/theme-base-colors.mdx +++ b/docs/content/ui/plugins/theme-base-colors.mdx @@ -1,14 +1,14 @@ --- title: Theme base colors -summary: The tabler-themes stylesheet ships five gray palettes - slate, gray, zinc, neutral, and stone - that you switch between with the data-bs-theme-base attribute. -description: Load the tabler-themes plugin and switch between five gray base palettes (slate, gray, zinc, neutral, stone) with data-bs-theme-base. +summary: The tabler-themes stylesheet ships six gray palettes - slate, gray, zinc, neutral, stone, and mist - that you switch between with the data-bs-theme-base attribute. +description: Load the tabler-themes plugin and switch between six gray base palettes (slate, gray, zinc, neutral, stone, mist) with data-bs-theme-base. css-plugins: [themes] 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 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. +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 five more takes on the same scale - `slate`, `gray`, `zinc`, `stone`, and `mist` - so you can pick a cooler or warmer neutral without touching a single component's CSS. ## Installation @@ -24,7 +24,7 @@ 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. `neutral` is the default - Tabler looks the same with or without the attribute set to `neutral`. +Set `data-bs-theme-base` on `` to one of six values. `neutral` is the default - Tabler looks the same with or without the attribute set to `neutral`. | Value | Description | | --- | --- | @@ -33,6 +33,7 @@ Set `data-bs-theme-base` on `` to one of five values. `neutral` is the def | `gray` | A cool gray with a subtle blue tint | | `zinc` | A neutral, low-saturation gray | | `stone` | A warmer, slightly brown-tinted gray | +| `mist` | A cool gray with a subtle blue-green tint | ```html @@ -46,6 +47,7 @@ export const bases = { zinc: ['#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa', '#71717a', '#52525b', '#3f3f46', '#27272a', '#18181b', '#09090b'], neutral: ['#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a3a3a3', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a'], stone: ['#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#44403c', '#292524', '#1c1917', '#0c0a09'], + mist: ['#f9fbfb', '#f1f3f3', '#e3e7e8', '#d0d6d8', '#9ca8ab', '#67787c', '#4b585b', '#394447', '#22292b', '#161b1d', '#090b0c'], };
@@ -84,7 +86,7 @@ Every selector matches two attributes: `data-bs-theme-base` (Bootstrap's namespa ## Customizing further -`tabler-themes.css` only covers the five built-in palettes. To use your own gray scale instead, override the same eleven variables directly, as shown in [Customize Tabler: gray scale](/ui/getting-started/customize#gray-scale) - you don't need this plugin at all if you only ever use one custom scale. +`tabler-themes.css` only covers the six built-in palettes. To use your own gray scale instead, override the same eleven variables directly, as shown in [Customize Tabler: gray scale](/ui/getting-started/customize#gray-scale) - you don't need this plugin at all if you only ever use one custom scale. ## Accessibility diff --git a/shared/lib/site.ts b/shared/lib/site.ts index aabedc617..62e0b5e36 100644 --- a/shared/lib/site.ts +++ b/shared/lib/site.ts @@ -27,6 +27,6 @@ export const site = { cssPlugins: ['flags', 'socials', 'payments', 'vendors', 'marketing', 'themes'], themeColors: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan'], themeFonts: ['sans-serif', 'serif', 'monospace', 'comic'], - themeBases: ['slate', 'gray', 'zinc', 'neutral', 'stone'], + themeBases: ['slate', 'gray', 'zinc', 'neutral', 'stone', 'mist'], themeRadiuses: ['0', '0.5', '1', '1.5', '2'], }