diff --git a/.github/release-notes/1.5.0-background-patterns.png b/.github/release-notes/1.5.0-background-patterns.png new file mode 100644 index 000000000..f097fc0f1 Binary files /dev/null and b/.github/release-notes/1.5.0-background-patterns.png differ diff --git a/.github/release-notes/1.5.0-chart-radar.png b/.github/release-notes/1.5.0-chart-radar.png new file mode 100644 index 000000000..0bab8a071 Binary files /dev/null and b/.github/release-notes/1.5.0-chart-radar.png differ diff --git a/.github/release-notes/1.5.0-folded-sidebar.png b/.github/release-notes/1.5.0-folded-sidebar.png new file mode 100644 index 000000000..410641834 Binary files /dev/null and b/.github/release-notes/1.5.0-folded-sidebar.png differ diff --git a/.github/release-notes/1.5.0-gradient-cards.png b/.github/release-notes/1.5.0-gradient-cards.png new file mode 100644 index 000000000..1223c5e13 Binary files /dev/null and b/.github/release-notes/1.5.0-gradient-cards.png differ diff --git a/.github/release-notes/1.5.0-layout-settings.png b/.github/release-notes/1.5.0-layout-settings.png new file mode 100644 index 000000000..b22c3a020 Binary files /dev/null and b/.github/release-notes/1.5.0-layout-settings.png differ diff --git a/.github/release-notes/1.5.0.md b/.github/release-notes/1.5.0.md index 0658ba911..4f3f8bdd3 100644 --- a/.github/release-notes/1.5.0.md +++ b/.github/release-notes/1.5.0.md @@ -7,6 +7,8 @@ Tabler 1.5 is out. It's the biggest release we've done, with more than 250 chang ## Folded sidebar +![Folded sidebar](https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-folded-sidebar.png) + The vertical sidebar can fold down to a narrow strip of icons with `navbar-folded`. With `navbar-folded-hover` it stays folded and opens when you hover over it. Submenus open as flyouts next to the icon, and there's a pin toggle if you want to keep the sidebar open. Two smaller things came with it. Section titles in the sidebar (`nav-section-title`) turn into short separators while it's folded, so you don't lose the grouping. And there's a new `navbar-footer` zone for the user block at the bottom. The navigation scrolls between the pinned brand and the pinned footer. @@ -15,12 +17,16 @@ The sidebar is also light and `16rem` wide by default now. ## Layout settings +![Layout settings](https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-layout-settings.png) + The theme panel does more than light and dark now. It also switches the layout, through four attributes you can set on `` yourself: `data-bs-layout` for the container width (`default`, `fluid`, `boxed`), `data-bs-navbar-position` for whether the page shows the vertical or the horizontal navigation, `data-bs-navbar` for a sticky top bar, and `data-bs-navbar-theme` for coloring the navigation `dark` or `primary`. The folded sidebar has its own `data-bs-sidebar`. The panel itself was redesigned around them, with an illustrated intro, color scheme presets and thumbnail tiles for most settings. A Customize entry in the sidebar footer and in the navbar opens it. ## Gradient cards +![Gradient cards](https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-gradient-cards.png) + `.card-gradient` gives a card a gradient background. There are variants for each theme color, modifiers for the direction, and an animated version. The gradient stops are plain utilities, so you can use them anywhere else too. `.bg-gradient-from-*`, `-via-*` and `-to-*` now also take `transparent` and `-inverted`. @@ -29,12 +35,16 @@ There's a new Card gradients page in the demo with all the combinations. ## Background patterns +![Background patterns](https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-background-patterns.png) + Backgrounds can have a pattern now. Dots, grids, stripes and a few more, through a set of `.bg-pattern-*` utilities. You can also control how strong the pattern is. `--tblr-pattern-opacity-factor` scales the opacity globally, and `.bg-pattern-opacity-*` sets it per element. ## New chart types +![Radar chart](https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-chart-radar.png) + Seven chart types joined the demo and the docs: radar, polar area, treemap, timeline, box plot, bubble and funnel. There's also a new Advanced charts page for the harder cases, with two y-axes, annotations, a zoom brush and synced chart groups. Chart colors aren't hardcoded per chart any more. There's a `--tblr-chart-1` through `--tblr-chart-5` palette wired into the ApexCharts theme tokens, so charts generally follow the current color mode on their own. ApexCharts itself went from 3.54.1 to 7.0.0. diff --git a/.github/release-notes/1.6.0-clipboard-dark.png b/.github/release-notes/1.6.0-clipboard-dark.png new file mode 100644 index 000000000..e8a622d98 Binary files /dev/null and b/.github/release-notes/1.6.0-clipboard-dark.png differ diff --git a/.github/release-notes/1.6.0-clipboard.png b/.github/release-notes/1.6.0-clipboard.png new file mode 100644 index 000000000..b4474ed0e Binary files /dev/null and b/.github/release-notes/1.6.0-clipboard.png differ diff --git a/.github/release-notes/1.6.0-confetti-dark.png b/.github/release-notes/1.6.0-confetti-dark.png new file mode 100644 index 000000000..2346c4170 Binary files /dev/null and b/.github/release-notes/1.6.0-confetti-dark.png differ diff --git a/.github/release-notes/1.6.0-confetti.png b/.github/release-notes/1.6.0-confetti.png new file mode 100644 index 000000000..bb4620f62 Binary files /dev/null and b/.github/release-notes/1.6.0-confetti.png differ diff --git a/.github/release-notes/1.6.0-cover-dark.png b/.github/release-notes/1.6.0-cover-dark.png new file mode 100644 index 000000000..260694f36 Binary files /dev/null and b/.github/release-notes/1.6.0-cover-dark.png differ diff --git a/.github/release-notes/1.6.0-cover.png b/.github/release-notes/1.6.0-cover.png new file mode 100644 index 000000000..53ad6b69f Binary files /dev/null and b/.github/release-notes/1.6.0-cover.png differ diff --git a/.github/release-notes/1.6.0-datepicker-dark.png b/.github/release-notes/1.6.0-datepicker-dark.png new file mode 100644 index 000000000..cfa8551b7 Binary files /dev/null and b/.github/release-notes/1.6.0-datepicker-dark.png differ diff --git a/.github/release-notes/1.6.0-datepicker.png b/.github/release-notes/1.6.0-datepicker.png new file mode 100644 index 000000000..65bc55e03 Binary files /dev/null and b/.github/release-notes/1.6.0-datepicker.png differ diff --git a/.github/release-notes/1.6.0-legend-dark.png b/.github/release-notes/1.6.0-legend-dark.png new file mode 100644 index 000000000..0426bfd08 Binary files /dev/null and b/.github/release-notes/1.6.0-legend-dark.png differ diff --git a/.github/release-notes/1.6.0-legend.png b/.github/release-notes/1.6.0-legend.png new file mode 100644 index 000000000..e49e9f88b Binary files /dev/null and b/.github/release-notes/1.6.0-legend.png differ diff --git a/.github/release-notes/1.6.0-otp-input-dark.png b/.github/release-notes/1.6.0-otp-input-dark.png new file mode 100644 index 000000000..73cc12a7a Binary files /dev/null and b/.github/release-notes/1.6.0-otp-input-dark.png differ diff --git a/.github/release-notes/1.6.0-otp-input.png b/.github/release-notes/1.6.0-otp-input.png new file mode 100644 index 000000000..77e570f0a Binary files /dev/null and b/.github/release-notes/1.6.0-otp-input.png differ diff --git a/.github/release-notes/1.6.0-password-strength-dark.png b/.github/release-notes/1.6.0-password-strength-dark.png new file mode 100644 index 000000000..2d3f53dce Binary files /dev/null and b/.github/release-notes/1.6.0-password-strength-dark.png differ diff --git a/.github/release-notes/1.6.0-password-strength.png b/.github/release-notes/1.6.0-password-strength.png new file mode 100644 index 000000000..cea359193 Binary files /dev/null and b/.github/release-notes/1.6.0-password-strength.png differ diff --git a/.github/release-notes/1.6.0-signal-dark.png b/.github/release-notes/1.6.0-signal-dark.png new file mode 100644 index 000000000..7bc466ee0 Binary files /dev/null and b/.github/release-notes/1.6.0-signal-dark.png differ diff --git a/.github/release-notes/1.6.0-signal.png b/.github/release-notes/1.6.0-signal.png new file mode 100644 index 000000000..beba909f6 Binary files /dev/null and b/.github/release-notes/1.6.0-signal.png differ diff --git a/.github/release-notes/1.6.0-sparkline-dark.png b/.github/release-notes/1.6.0-sparkline-dark.png new file mode 100644 index 000000000..f50e97226 Binary files /dev/null and b/.github/release-notes/1.6.0-sparkline-dark.png differ diff --git a/.github/release-notes/1.6.0-sparkline.png b/.github/release-notes/1.6.0-sparkline.png new file mode 100644 index 000000000..5e26edb13 Binary files /dev/null and b/.github/release-notes/1.6.0-sparkline.png differ diff --git a/.github/release-notes/1.6.0.md b/.github/release-notes/1.6.0.md new file mode 100644 index 000000000..a9edaa0e1 --- /dev/null +++ b/.github/release-notes/1.6.0.md @@ -0,0 +1,113 @@ + + + Tabler 1.6 + + +Tabler 1.6 is out. It brings eight new components, a datepicker that doesn't depend on Litepicker any more, a neutral gray scale, colors defined in `oklch()` and a focus ring that's finally an outline. The CSS also got smaller: about 110 kB came off `tabler.min.css`. On top of that there are more than a hundred smaller changes across the framework, the demo pages and the docs. + +## New components + +Eight components joined `tabler.js` and the CSS. Each one has a demo page and a docs page. + +**Datepicker**, a calendar popup or an inline calendar with single, multiple and range selection. It's built on Vanilla Calendar Pro, so Litepicker is deprecated. + + + + Datepicker + + +**Sparkline**, inline SVG line, bar and circle charts rendered from `data-bs-values`. No chart library needed. + + + + Sparkline + + +**Legend**, a colored marker plus a label for chart series, with an interactive mode that toggles the series on click. There's a large variant with a big value and a unit. + + + + Legend + + +**Signal**, a row of stepped bars that shows a level, such as priority or signal strength. + + + + Signal + + +**Password strength**, a segmented meter that scores the password as the user types and fires `change.bs.strength`. + + + + Password strength + + +**OTP input**, grouped single-character slots for one-time codes, with masking and validation states. + + + + OTP input + + +**Clipboard**, a copy button with a copied state, built on the browser API. `dist/libs/clipboard` is deprecated. + + + + Clipboard + + +**Confetti**, a shower of pieces from any button with `data-bs-toggle="confetti"`. + + + + Confetti + + +## Plugins are components now + +`Autosize`, `CountUp`, `InputMask`, `Sortable` and `SwitchIcon` are real components with instances, methods and events. Autosize and CountUp are written from scratch and don't need the `dist/libs` scripts any more, so those are deprecated. CountUp respects `prefers-reduced-motion`. + +Switch icon got a `switch-icon-loading` state. Pass a promise to `event.wait()` in the `toggle.bs.switch-icon` event and the button shows a spinner until it settles. + +Sortable got drag styles for the ghost, the chosen and the dragged item, and the demo shows a drag handle, table rows, a kanban board, clone, multi-drag and swap. + +`tabler.js` also no longer stops on page load when one element has an invalid `data-*` config. The error is logged and every other component is still created. + +## Neutral gray and oklch colors + +The default gray scale is `neutral` now. In 1.5 it had a slight blue tint, so backgrounds, borders and muted text look a little different. To keep the 1.5 look, load `tabler-themes.css` and set `data-bs-theme-base="gray"` on ``. + +The palette is defined in `oklch()`, and tints, shades and hover states are mixed with `color-mix(in oklab)` instead of `rgba()`. Mixed colors are a touch cleaner, mostly noticeable in the lighter backgrounds. The `--tblr-*-rgb` variables are deprecated and stay until 2.0. + +The focus indicator is a solid 2px `outline` instead of a `box-shadow` halo, stronger in dark mode. You can tune it per component with `--tblr-focus-ring-width` and `--tblr-focus-ring-color`. + +## Floating navbar and offcanvas + +`.navbar-floating` detaches the navbar and the sidebar from the edge of the screen with a `0.5rem` gap, and `.offcanvas-floating` does the same for an offcanvas. The theme settings `data-bs-navbar-style="floating"` and `data-bs-offcanvas-style="floating"` on `` switch the whole page. + +A native `` opened with `showModal()` gets the same backdrop as a modal, and `.modal-blur` on it blurs the page behind. Scrolling to the end of a modal, an offcanvas or a scrollable dropdown no longer scrolls the page behind it. + +## Smaller CSS + +`tabler.min.css` lost about 110 kB. The button, list group, `bg-pattern-*` and color utility styles are generated once instead of per variant, and the vertical navbar is generated once instead of per breakpoint. The flag, payment and social SVGs in `dist/img` are minified, and only the images the CSS uses are copied. + +If you ship your own build, `$enable-deprecated: false` leaves the deprecated aliases and the `--tblr-*-rgb` variables out of the CSS entirely. + +## Demo and docs + +The demo has a new billing page, a system status panel with 60-day uptime bars, gauge cards on the widgets page and a reworked charts page with sections and legends. The hardcoded Google Maps and Mapbox keys are gone; the map demos read them from the environment. + +Component docs pages got a CSS variables section generated from the source, so it can't go stale. Markdown tables and the class reference table sit in a bordered, scrollable box. The CDN snippets carry `integrity` and `crossorigin` attributes. There's a Sortable page, an agent skill under `/.well-known/agent-skills/`, and the upgrade guides moved to `/ui/getting-started/upgrade/` with one page per release. + +## Upgrading + +Nothing in 1.6 requires a change to your markup. A few things are deprecated and keep working: + +- `.form-hint` is `.form-text` now, matching Bootstrap. The old class is an alias. +- An empty `.legend` still renders as a dot, but `.legend-dot` is the class for it. +- The `$*-focus-box-shadow` variables, `theme-color-lighter()`, `url-svg()`, `varify()` and a few other Sass helpers warn when used. +- The `tabler.tabler` JS namespace with `getColor()` and `hexToRgba()` is deprecated. Read the variable yourself. + +Every change, with a before and after example for each one, is in the [Upgrade to 1.6](https://docs.tabler.io/ui/getting-started/upgrade/1-6) guide.