Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 13:17:00 +04:00
Code Issues Projects Releases Wiki Activity

Add mist theme base and remove hidden pink base (#3303)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-10-10 11:26:59 +02:00
1 parent c2a7cbf026
commit 5cbc443730
5 files changed
+29 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/theme-base-mist.md
+7
View File
@@ -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`.
core/scss/tabler-themes.scss
+13 -14
View File
@@ -76,20 +76,19 @@
--gray-950: oklch(14.69% 0.0041 49.25deg); // #0c0a09 --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='mist'],
[data-bs-theme-base='pink'], [data-theme-base='mist'] {
[data-theme-base='pink'] { --gray-50: oklch(98.7% 0.002 197.4deg); // #f9fbfb
--gray-50: oklch(97.14% 0.0141 343.2deg); // #fdf2f8 --gray-100: oklch(96.3% 0.002 197.4deg); // #f1f3f3
--gray-100: oklch(94.82% 0.0276 342.26deg); // #fce7f3 --gray-200: oklch(92.5% 0.005 214.3deg); // #e3e7e8
--gray-200: oklch(89.94% 0.0589 343.23deg); // #fbcfe8 --gray-300: oklch(87.2% 0.007 219.5deg); // #d0d6d8
--gray-300: oklch(82.28% 0.1095 346.02deg); // #f9a8d4 --gray-400: oklch(72.3% 0.014 214.4deg); // #9ca8ab
--gray-400: oklch(72.53% 0.1752 349.76deg); // #f472b6 --gray-500: oklch(56% 0.021 213.5deg); // #67787c
--gray-500: oklch(65.59% 0.2118 354.31deg); // #ec4899 --gray-600: oklch(45% 0.017 213.2deg); // #4b585b
--gray-600: oklch(59.16% 0.218 0.58deg); // #db2777 --gray-700: oklch(37.8% 0.015 216deg); // #394447
--gray-700: oklch(52.46% 0.199 3.96deg); // #be185d --gray-800: oklch(27.5% 0.011 216.9deg); // #22292b
--gray-800: oklch(45.87% 0.1697 3.82deg); // #9d174d --gray-900: oklch(21.8% 0.008 223.9deg); // #161b1d
--gray-900: oklch(40.78% 0.1442 2.43deg); // #831843 --gray-950: oklch(14.8% 0.004 228.8deg); // #090b0c
--gray-950: oklch(28.45% 0.1048 3.91deg); // #500724
} }
@each $name, $value in $extra-colors { @each $name, $value in $extra-colors {
docs/content/ui/getting-started/color-modes.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ Tabler includes a small script, [`tabler-theme.js`](https://github.com/tabler/ta
| Setting | Attribute | Default | Allowed values | | Setting | Attribute | Default | Allowed values |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| Color mode | `data-bs-theme` | `auto` | `light`, `dark`, `auto` | | 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` | | 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` | | 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` | | Corner radius | `data-bs-theme-radius` | `1` | `0`, `0.5`, `1`, `1.5`, `2` |
docs/content/ui/plugins/theme-base-colors.mdx
+7 -5
View File
@@ -1,14 +1,14 @@
--- ---
title: Theme base colors 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. 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 five gray base palettes (slate, gray, zinc, neutral, stone) with data-bs-theme-base. 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] css-plugins: [themes]
related: [/ui/getting-started/customize, /ui/getting-started/color-modes] related: [/ui/getting-started/customize, /ui/getting-started/color-modes]
--- ---
import CdnImportPlugin from '@components/CdnImportPlugin.astro'; 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 ## Installation
@@ -24,7 +24,7 @@ If you compile Tabler from source with Sass, add its own entry point:
## Base color palettes ## Base color palettes
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`. Set `data-bs-theme-base` on `<html>` to one of six values. `neutral` is the default - Tabler looks the same with or without the attribute set to `neutral`.
| Value | Description | | Value | Description |
| --- | --- | | --- | --- |
@@ -33,6 +33,7 @@ Set `data-bs-theme-base` on `<html>` to one of five values. `neutral` is the def
| `gray` | A cool gray with a subtle blue tint | | `gray` | A cool gray with a subtle blue tint |
| `zinc` | A neutral, low-saturation gray | | `zinc` | A neutral, low-saturation gray |
| `stone` | A warmer, slightly brown-tinted gray | | `stone` | A warmer, slightly brown-tinted gray |
| `mist` | A cool gray with a subtle blue-green tint |
```html ```html
<html data-bs-theme-base="slate"> <html data-bs-theme-base="slate">
@@ -46,6 +47,7 @@ export const bases = {
zinc: ['#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa', '#71717a', '#52525b', '#3f3f46', '#27272a', '#18181b', '#09090b'], zinc: ['#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa', '#71717a', '#52525b', '#3f3f46', '#27272a', '#18181b', '#09090b'],
neutral: ['#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a3a3a3', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a'], neutral: ['#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a3a3a3', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a'],
stone: ['#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#44403c', '#292524', '#1c1917', '#0c0a09'], stone: ['#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#44403c', '#292524', '#1c1917', '#0c0a09'],
mist: ['#f9fbfb', '#f1f3f3', '#e3e7e8', '#d0d6d8', '#9ca8ab', '#67787c', '#4b585b', '#394447', '#22292b', '#161b1d', '#090b0c'],
}; };
<div class="table-responsive"> <div class="table-responsive">
@@ -84,7 +86,7 @@ Every selector matches two attributes: `data-bs-theme-base` (Bootstrap's namespa
## Customizing further ## 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 ## Accessibility
shared/lib/site.ts
+1 -1
View File
@@ -27,6 +27,6 @@ export const site = {
cssPlugins: ['flags', 'socials', 'payments', 'vendors', 'marketing', 'themes'], cssPlugins: ['flags', 'socials', 'payments', 'vendors', 'marketing', 'themes'],
themeColors: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan'], themeColors: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan'],
themeFonts: ['sans-serif', 'serif', 'monospace', 'comic'], 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'], themeRadiuses: ['0', '0.5', '1', '1.5', '2'],
} }