|
|
@@ -6,7 +6,7 @@ added-in: '1.5.0'
|
|
|
|
related: [/ui/getting-started/rtl]
|
|
|
|
related: [/ui/getting-started/rtl]
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
Most projects only use the compiled CSS and JavaScript from `dist/`. If that is you, the upgrade is short: update the package, remove Bootstrap, and check the [visual changes](#visual-changes). Projects that compile Tabler from the Sass sources have more work to do — see [Sass changes](#sass-changes).
|
|
|
|
Most projects only use the compiled CSS and JavaScript from `dist/`. If that is you, the upgrade is short: update the package, remove Bootstrap, and check the [color mode default](#color-mode-defaults-to-auto) and the [visual changes](#visual-changes). Projects that compile Tabler from the Sass sources have more work to do — see [Sass changes](#sass-changes).
|
|
|
|
|
|
|
|
|
|
|
|
## Overview
|
|
|
|
## Overview
|
|
|
|
|
|
|
|
|
|
|
@@ -20,8 +20,11 @@ Use `window.bootstrap.Modal`|Use `window.tabler.Modal`
|
|
|
|
Compile `scss/tabler.scss` yourself|Switch to `@use … with ()` and add the PostCSS prefix step
|
|
|
|
Compile `scss/tabler.scss` yourself|Switch to `@use … with ()` and add the PostCSS prefix step
|
|
|
|
Override Sass variables|Check the [list of removed variables](#removed-sass-variables)
|
|
|
|
Override Sass variables|Check the [list of removed variables](#removed-sass-variables)
|
|
|
|
Use `.badges-list` or `.tags-list`|Rename to `.badge-list` and `.tag-list` (old names still work)
|
|
|
|
Use `.badges-list` or `.tags-list`|Rename to `.badge-list` and `.tag-list` (old names still work)
|
|
|
|
Use ApexCharts|Update to ApexCharts 6
|
|
|
|
Use ApexCharts|Update to ApexCharts 7
|
|
|
|
Use Turbo with Tabler|The built-in integration is gone — see [Turbo](#turbo-integration-removed)
|
|
|
|
Use Turbo with Tabler|The built-in integration is gone — see [Turbo](#turbo-integration-removed)
|
|
|
|
|
|
|
|
Load `tabler-theme.js`|Pages follow the OS color scheme now — see [Color mode](#color-mode-defaults-to-auto)
|
|
|
|
|
|
|
|
Use payment provider icons|Check the [removed providers](#removed-payment-providers)
|
|
|
|
|
|
|
|
Link files inside `dist/libs`|Check the [moved paths](#smaller-distlibs-folder)
|
|
|
|
Load `tabler.rtl.css`|You can drop it — plain `tabler.css` now handles RTL
|
|
|
|
Load `tabler.rtl.css`|You can drop it — plain `tabler.css` now handles RTL
|
|
|
|
|
|
|
|
|
|
|
|
## Update the package
|
|
|
|
## Update the package
|
|
|
@@ -73,6 +76,8 @@ Bootstrap components are exported from `@tabler/core`:
|
|
|
|
+ import { Modal, Tooltip } from '@tabler/core'
|
|
|
|
+ import { Modal, Tooltip } from '@tabler/core'
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The sources under `js/` are TypeScript now: `js/tabler.js` became `js/tabler.ts` and `js/src/*.js` became `js/src/*.ts`. Import from the package root or from `dist/js/`, not from the source files.
|
|
|
|
|
|
|
|
|
|
|
|
### Global variable
|
|
|
|
### Global variable
|
|
|
|
|
|
|
|
|
|
|
|
The UMD build puts everything under `tabler`:
|
|
|
|
The UMD build puts everything under `tabler`:
|
|
|
@@ -106,9 +111,43 @@ The built-in `@hotwired/turbo` integration is gone, together with the `.turbo-pr
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Color mode defaults to auto
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`tabler-theme.js` used `light` as its default color mode. It now defaults to `auto`: with no stored choice, the script reads `prefers-color-scheme` and sets `data-bs-theme` on `<html>` to `light` or `dark`. Visitors whose operating system is set to dark will see your pages in dark mode after the upgrade.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The script applies the resolved mode on every load, so a `data-bs-theme` you render on the server is replaced. If your pages should stay light no matter what the OS says, do not load the script: the CSS renders in light mode whenever `data-bs-theme` is absent.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
|
|
|
- <script src="/dist/js/tabler-theme.min.js"></script>
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you keep the script, a visitor can pick a mode with `?theme=light` or `?theme=dark` in the URL, and the choice is stored in `localStorage`. See [Color modes](/ui/getting-started/color-modes) for all theme settings.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Removed payment providers
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The payment icons now come from the [Tabler Payments](/payments) set, which adds 74 providers and drops 12 that no longer operate. Their `.payment-provider-*` classes and `dist/img/payments/*.svg` files are gone:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`clickandbuy`, `dotpay`, `laser`, `ogone`, `okpay`, `paymill`, `payza`, `sage`, `solo`, `switch`, `ukash`, `verisign`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you still show one of them, copy its SVG from the 1.4 package into your project.
|
|
|
|
|
|
|
|
|
|
|
|
## Smaller dist/libs folder
|
|
|
|
## Smaller dist/libs folder
|
|
|
|
|
|
|
|
|
|
|
|
`dist/libs` now holds only the runtime files each library needs, instead of a full copy of every package. If you link straight to a file inside `dist/libs`, check that the path still exists after the upgrade. Files that are no longer shipped can be loaded from your own `node_modules` or from a CDN.
|
|
|
|
`dist/libs` now holds only the runtime files each library needs, instead of a full copy of every package. If you link straight to a file inside `dist/libs`, check that the path still exists after the upgrade. These are the paths most likely to break:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Removed|Use instead
|
|
|
|
|
|
|
|
---|---
|
|
|
|
|
|
|
|
`tom-select/dist/js/tom-select.complete.min.js`|`tom-select/dist/js/tom-select.base.min.js`
|
|
|
|
|
|
|
|
`tom-select/dist/css/tom-select.min.css`|`tom-select/dist/css/tom-select.bootstrap5.min.css`
|
|
|
|
|
|
|
|
`countup.js/dist/countUp.min.js`|`countup.js/dist/countUp.umd.js`
|
|
|
|
|
|
|
|
`signature_pad/dist/signature_pad.min.js`|`signature_pad/dist/signature_pad.umd.min.js`
|
|
|
|
|
|
|
|
`star-rating.js/dist/star-rating.esm.min.js`|`star-rating.js/dist/star-rating.min.js`
|
|
|
|
|
|
|
|
`plyr/dist/plyr.polyfilled.min.js`|`plyr/dist/plyr.min.js`
|
|
|
|
|
|
|
|
`litepicker/dist/bundle.js`|`litepicker/dist/litepicker.js`
|
|
|
|
|
|
|
|
`jsvectormap/dist/jsvectormap.min.css`|`jsvectormap/dist/jsvectormap.css`
|
|
|
|
|
|
|
|
`@hotwired/turbo/`|Install `@hotwired/turbo` yourself, see [Turbo](#turbo-integration-removed)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The base build of Tom Select ships without plugins, so load any plugin you use from npm. The unminified builds are gone as well, such as `apexcharts/dist/apexcharts.js` or `clipboard/dist/clipboard.js`: link the `.min.js` file next to them. Anything else that is no longer shipped can be loaded from your own `node_modules` or from a CDN. The list of shipped files is in [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json).
|
|
|
|
|
|
|
|
|
|
|
|
## Sass changes
|
|
|
|
## Sass changes
|
|
|
|
|
|
|
|
|
|
|
@@ -187,6 +226,28 @@ These variables are gone:
|
|
|
|
|
|
|
|
|
|
|
|
Most of them have a CSS variable you can use instead. For example, `$font-size-300` is now `--tblr-font-size-h3`, and `$text-muted` is `--tblr-secondary-color`.
|
|
|
|
Most of them have a CSS variable you can use instead. For example, `$font-size-300` is now `--tblr-font-size-h3`, and `$text-muted` is `--tblr-secondary-color`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Removed Sass files
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Bootstrap compiles from `scss/bootstrap/` now, so the partials that used to bridge it are gone: `_bootstrap-config.scss`, `_bootstrap-components.scss` and `_bootstrap-override.scss`. `_debug.scss`, `_variables-marketing.scss` and `vendor/_turbo.scss` were removed too; the marketing variables now live next to their components in `marketing/`. Import the entry points rather than the partials:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```scss
|
|
|
|
|
|
|
|
@use '@tabler/core/scss/tabler';
|
|
|
|
|
|
|
|
@use '@tabler/core/scss/tabler-marketing';
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Google Fonts variables
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`$font-google` and `$font-google-monospaced` still add the Google Fonts `@import`, but they no longer put the font at the front of `$font-family-sans-serif` and `$font-family-monospace`. `$font-local` is gone. Set the font stack yourself:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```diff
|
|
|
|
|
|
|
|
@use "@tabler/core/scss/tabler" with (
|
|
|
|
|
|
|
|
$font-google: "Inter",
|
|
|
|
|
|
|
|
+ $font-family-sans-serif: ("Inter", -apple-system, BlinkMacSystemFont, sans-serif)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Geist is embedded through `@font-face` rules in `tabler.css`, and the font files ship in `dist/fonts/`. If you serve the CSS from another folder, set `$assets-base` so the `../fonts/` paths still resolve, or override `--tblr-font-sans-serif` to use your own font.
|
|
|
|
|
|
|
|
|
|
|
|
## Renamed classes
|
|
|
|
## Renamed classes
|
|
|
|
|
|
|
|
|
|
|
|
The old names still work, so you can rename at your own pace.
|
|
|
|
The old names still work, so you can rename at your own pace.
|
|
|
@@ -209,6 +270,7 @@ These changes are not breaking, but they change how a page looks. Check your scr
|
|
|
|
- **Fonts** — Geist and Geist Mono are the new defaults. To keep your old stack, set `--tblr-font-sans-serif`.
|
|
|
|
- **Fonts** — Geist and Geist Mono are the new defaults. To keep your old stack, set `--tblr-font-sans-serif`.
|
|
|
|
- **Shadows** — the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
|
|
|
|
- **Shadows** — the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
|
|
|
|
- **Colors** — body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
|
|
|
|
- **Colors** — body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
|
|
|
|
|
|
|
|
- **Links** — in dark mode, links use a lighter tint of the primary color, so they meet the 4.5:1 contrast ratio on dark surfaces. Override `--tblr-link-color` to change it.
|
|
|
|
- **Sizes** — `.form-control`, `.btn` and `.input-group` now agree on `sm` and `lg` sizes, `.btn-icon` is square, and `.icon-sm` uses a `1.5` stroke width.
|
|
|
|
- **Sizes** — `.form-control`, `.btn` and `.input-group` now agree on `sm` and `lg` sizes, `.btn-icon` is square, and `.icon-sm` uses a `1.5` stroke width.
|
|
|
|
- **Cards** — `--tblr-card-header-bg` and `--tblr-card-footer-bg` can be set on their own, and the card status bar is `3px`.
|
|
|
|
- **Cards** — `--tblr-card-header-bg` and `--tblr-card-footer-bg` can be set on their own, and the card status bar is `3px`.
|
|
|
|
- **Layout** — `scrollbar-gutter: stable` on `html` removes the white gap next to the scrollbar.
|
|
|
|
- **Layout** — `scrollbar-gutter: stable` on `html` removes the white gap next to the scrollbar.
|
|
|
@@ -228,19 +290,20 @@ The `*.rtl.css` files are still published, so nothing breaks if you keep them. S
|
|
|
|
|
|
|
|
|
|
|
|
## Third party libraries
|
|
|
|
## Third party libraries
|
|
|
|
|
|
|
|
|
|
|
|
- **ApexCharts** moved from 3.54 to 6.x. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) — the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
|
|
|
|
- **ApexCharts** moved from 3.54 to 7.0. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) — the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
|
|
|
|
- **Tabler Icons** moved to 3.45, and **Tabler Illustrations** to 1.16.
|
|
|
|
- **Tabler Icons** moved to 3.46, and **Tabler Illustrations** to 1.16.
|
|
|
|
|
|
|
|
|
|
|
|
## Browser support
|
|
|
|
## Browser support
|
|
|
|
|
|
|
|
|
|
|
|
Tabler 1.5 uses the CSS `light-dark()` and `color-mix()` functions for its color tokens. This raises the minimum browser versions:
|
|
|
|
Tabler 1.5 relies on `light-dark()`, `color-mix()`, `@property` and `:has()` with no fallback. This raises the minimum browser versions:
|
|
|
|
|
|
|
|
|
|
|
|
Browser|Minimum version
|
|
|
|
Browser|Minimum version
|
|
|
|
---|---
|
|
|
|
---|---
|
|
|
|
Chrome|123
|
|
|
|
Chrome|123
|
|
|
|
Edge|123
|
|
|
|
Edge|123
|
|
|
|
Firefox|120
|
|
|
|
Firefox|128
|
|
|
|
Safari|17.5
|
|
|
|
Safari|17.5
|
|
|
|
|
|
|
|
iOS Safari|17.5
|
|
|
|
|
|
|
|
|
|
|
|
Older browsers still render the layout, but colors fall back to unstyled values. See [Browser support](/ui/getting-started/browser-support) for the full list.
|
|
|
|
Older browsers still render the layout, but colors fall back to unstyled values. See [Browser support](/ui/getting-started/browser-support) for the full list.
|
|
|
|
|
|
|
|
|
|
|
@@ -249,7 +312,9 @@ Older browsers still render the layout, but colors fall back to unstyled values.
|
|
|
|
Besides the changes above, 1.5 adds:
|
|
|
|
Besides the changes above, 1.5 adds:
|
|
|
|
|
|
|
|
|
|
|
|
- New components: `.btn-ghost`, `.card-gradient`, progress steps, progress background, `.progress-lg` and `.progress-xl`, background pattern utilities, `.text-gray-*` utilities, and a `.bg-blur` utility.
|
|
|
|
- New components: `.btn-ghost`, `.card-gradient`, progress steps, progress background, `.progress-lg` and `.progress-xl`, background pattern utilities, `.text-gray-*` utilities, and a `.bg-blur` utility.
|
|
|
|
|
|
|
|
- A folded sidebar (`navbar-folded`, `navbar-folded-hover`) with `nav-section-title` labels and a `navbar-footer` zone.
|
|
|
|
- An `auto` color mode that follows the system `prefers-color-scheme` setting.
|
|
|
|
- An `auto` color mode that follows the system `prefers-color-scheme` setting.
|
|
|
|
|
|
|
|
- Print styles: `d-print-*` utilities and a `media-print` mixin, see [Printing](/ui/utilities/printing).
|
|
|
|
- A language selector in the navbar and a new structure for the `navbar-side` component.
|
|
|
|
- A language selector in the navbar and a new structure for the `navbar-side` component.
|
|
|
|
- New preview pages: CRM dashboard, crypto dashboard, task list, onboarding, pay, card gradients, all elements, and several new modals.
|
|
|
|
- New preview pages: CRM dashboard, crypto dashboard, task list, onboarding, pay, card gradients, all elements, and several new modals.
|
|
|
|
- [Framework integration guides](/ui/getting-started/frameworks) for Laravel, React, Next.js, Vue, Angular, Nuxt, Symfony, Django, Rails, SvelteKit and Astro.
|
|
|
|
- [Framework integration guides](/ui/getting-started/frameworks) for Laravel, React, Next.js, Vue, Angular, Nuxt, Symfony, Django, Rails, SvelteKit and Astro.
|
|
|
|
Paweł Kuna authored and 
GitHub committed