diff --git a/.changeset/a11y-wcag-fixes.md b/.changeset/a11y-wcag-fixes.md deleted file mode 100644 index 6da3054c6..000000000 --- a/.changeset/a11y-wcag-fixes.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@tabler/core": patch -"@tabler/preview": patch -"@tabler/docs": patch ---- - -Fixed accessibility issues in skip links, keyboard focus, `prefers-reduced-motion`, form labels and action controls. diff --git a/.changeset/dev-rtl-css.md b/.changeset/dev-rtl-css.md deleted file mode 100644 index 4954d2141..000000000 --- a/.changeset/dev-rtl-css.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tabler/core": patch ---- - -Updated the dev CSS build to also emit the `.rtl.css` files, so the RTL preview page is styled in dev. diff --git a/.changeset/dev-server-ports.md b/.changeset/dev-server-ports.md deleted file mode 100644 index 49746cb91..000000000 --- a/.changeset/dev-server-ports.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@tabler/preview": patch -"@tabler/docs": patch ---- - -Updated dev servers to run on fixed ports: `3000` for preview and `3010` for docs. diff --git a/.changeset/fix-dark-mode-link-contrast.md b/.changeset/fix-dark-mode-link-contrast.md new file mode 100644 index 000000000..d187142a6 --- /dev/null +++ b/.changeset/fix-dark-mode-link-contrast.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed dark mode link contrast: `--tblr-link-color` is now a lighter tint of `--tblr-primary` on dark surfaces. diff --git a/.changeset/format-lint-tooling-sync.md b/.changeset/format-lint-tooling-sync.md deleted file mode 100644 index b0ba7454b..000000000 --- a/.changeset/format-lint-tooling-sync.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@tabler/core": patch -"@tabler/docs": patch -"@tabler/preview": patch ---- - -Added root-level `lint-prettier` and `format-prettier` scripts and wired `check` to run lint and type-check. diff --git a/.changeset/redundant-nullish-operator.md b/.changeset/redundant-nullish-operator.md deleted file mode 100644 index cd199b265..000000000 --- a/.changeset/redundant-nullish-operator.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tabler/core": patch ---- - -Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization. diff --git a/.changeset/remove-inter-font-import.md b/.changeset/remove-inter-font-import.md new file mode 100644 index 000000000..c079ff46b --- /dev/null +++ b/.changeset/remove-inter-font-import.md @@ -0,0 +1,6 @@ +--- +"@tabler/preview": patch +"@tabler/docs": patch +--- + +Removed the unused Inter web font `@import` from `BaseLayout`, since Geist ships with the CSS. diff --git a/.changeset/scss-unit-tests.md b/.changeset/scss-unit-tests.md deleted file mode 100644 index 8a1ca4271..000000000 --- a/.changeset/scss-unit-tests.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tabler/core": patch ---- - -Added an SCSS unit test suite with `sass-true` and a `test:scss` Vitest config. diff --git a/.changeset/stylelint-scss-cleanup.md b/.changeset/stylelint-scss-cleanup.md deleted file mode 100644 index d7fedb9cf..000000000 --- a/.changeset/stylelint-scss-cleanup.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tabler/core": patch ---- - -Added Stylelint for SCSS and fixed the dead rules, named colors and redundant nesting it found. diff --git a/.changeset/vitest-playwright-tests.md b/.changeset/vitest-playwright-tests.md deleted file mode 100644 index 1c8d01a72..000000000 --- a/.changeset/vitest-playwright-tests.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tabler/core": patch ---- - -Added Vitest for unit tests and Playwright for visual tests of Bootstrap DOM and components. diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss index b8ab9eede..e0da521b0 100644 --- a/core/scss/layout/_root.scss +++ b/core/scss/layout/_root.scss @@ -27,9 +27,10 @@ --body-color: light-dark(var(--gray-700), var(--gray-200)); --body-bg: light-dark(var(--bg-surface-secondary), var(--gray-900)); - // Same color-mix() expression in both modes — no light-dark() needed. - --link-color: var(--primary); - --link-hover-color: color-mix(in srgb, var(--primary), #000 20%); + // Dark mode tints the primary towards white, so links keep a 4.5:1 contrast + // on the dark surfaces. Hover shades the link in light mode and tints it in dark. + --link-color: light-dark(var(--primary), color-mix(in srgb, var(--primary), #fff 40%)); + --link-hover-color: light-dark(color-mix(in srgb, var(--link-color), #000 20%), color-mix(in srgb, var(--link-color), #fff 20%)); --secondary: light-dark(var(--gray-500), var(--gray-400)); --tertiary: var(--gray-400); diff --git a/docs/content/ui/getting-started/upgrade.mdx b/docs/content/ui/getting-started/upgrade.mdx index 1647a0ce4..2f70231cf 100644 --- a/docs/content/ui/getting-started/upgrade.mdx +++ b/docs/content/ui/getting-started/upgrade.mdx @@ -6,7 +6,7 @@ added-in: '1.5.0' 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 @@ -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 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 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) +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 ## Update the package @@ -73,6 +76,8 @@ Bootstrap components are exported 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 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 `` 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 +- +``` + +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 -`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 @@ -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`. +### 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 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`. - **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-*`. +- **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. - **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. @@ -228,19 +290,20 @@ The `*.rtl.css` files are still published, so nothing breaks if you keep them. S ## 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. -- **Tabler Icons** moved to 3.45, and **Tabler Illustrations** to 1.16. +- **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.46, and **Tabler Illustrations** to 1.16. ## 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 ---|--- Chrome|123 Edge|123 -Firefox|120 +Firefox|128 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. @@ -249,7 +312,9 @@ Older browsers still render the layout, but colors fall back to unstyled values. 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. +- 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. +- 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. - 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. diff --git a/shared/layouts/BaseLayout.astro b/shared/layouts/BaseLayout.astro index ca05c4ef4..c172cdadc 100644 --- a/shared/layouts/BaseLayout.astro +++ b/shared/layouts/BaseLayout.astro @@ -87,13 +87,6 @@ const libJsFiles = (head: boolean) => pageLibEntries.filter(([, lib]) => Boolean ) } - - - {/* is:inline: keep the tag verbatim — Astro's scoped-style pipeline would add data-astro-cid-* attributes across the page */} - -