From eaf60dba0fe883f8bfd794e38049c90b964865a0 Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 9 Sep 2026 22:55:18 +0200 Subject: [PATCH] Revert "Fix unreadable counter digit on not-yet-reached steps (#3023)" This reverts commit 670d63eb1a45b6d32ef1daabfa28d306fc142f9a. --- .agents/agents/bootstrap-v6-reference.md | 97 ---- .agents/agents/design-reviewer.md | 105 ---- .agents/agents/v2-policy-reviewer.md | 148 ----- .agents/rules/docs.mdc | 2 - .agents/rules/main.mdc | 3 +- .agents/rules/v2.mdc | 56 -- .agents/skills/astro-dev/SKILL.md | 2 - .agents/skills/core-js/SKILL.md | 10 +- .agents/skills/core-scss/SKILL.md | 48 +- .agents/skills/design-system/SKILL.md | 378 ------------ .../skills/design-system/rules-of-thumb.md | 426 -------------- .agents/skills/mr-description/SKILL.md | 26 +- .changeset/additive-v6-utilities.md | 5 - .changeset/component-token-maps-rest.md | 5 - .changeset/component-token-maps.md | 5 - .changeset/design-audit-core-added.md | 5 - .changeset/design-audit-core-colors.md | 5 - .changeset/design-audit-core-recipes.md | 5 - .changeset/design-audit-core-removed.md | 5 - .changeset/design-audit-decisions.md | 5 - .changeset/design-audit-inbox.md | 5 - .changeset/design-audit-preview.md | 5 - .changeset/esm-only-distribution.md | 7 - .../fix-inactive-steps-counter-contrast.md | 5 - .changeset/floating-ui.md | 5 - .changeset/logical-block-axis-utilities.md | 5 - .claude/agents | 1 - .../agents/astro-components.md | 15 +- .cursor/agents | 1 - .cursor/rules | 1 - .cursor/skills | 1 - BOOTSTRAP-V6-MIGRATION.md | 544 ------------------ CLAUDE.md | 3 - README.md | 4 +- core/.build/vite.config.mts | 8 +- core/README.md | 7 +- core/js/src/bootstrap.ts | 6 +- core/js/src/bootstrap/dropdown.ts | 99 +++- core/js/src/bootstrap/tooltip.ts | 119 ++-- core/js/src/bootstrap/util/floating-ui.ts | 180 ------ core/js/tabler.ts | 4 +- core/js/tests/unit/dropdown.spec.ts | 125 ++-- core/js/tests/unit/popover.spec.ts | 8 + core/js/tests/unit/tooltip.spec.ts | 75 +-- core/js/tests/unit/util/floating-ui.spec.ts | 145 ----- core/package.json | 65 +-- core/scss/_extends.scss | 4 +- core/scss/_props.scss | 3 - core/scss/_utilities.scss | 90 +-- core/scss/_variables.scss | 43 +- core/scss/bootstrap/_card.scss | 24 +- core/scss/bootstrap/_spinners.scss | 2 +- core/scss/mixins/_functions.scss | 43 -- core/scss/mixins/_mixins.scss | 12 - core/scss/tests/_tokens.test.scss | 145 ----- core/scss/tests/_utilities-additive.test.scss | 185 ------ core/scss/tests/css-var-prefix.test.mjs | 4 +- core/scss/tests/tokens.test.mjs | 48 -- core/scss/ui/_accordion.scss | 51 +- core/scss/ui/_alerts.scss | 49 +- core/scss/ui/_avatars.scss | 42 +- core/scss/ui/_badges.scss | 36 +- core/scss/ui/_breadcrumbs.scss | 39 +- core/scss/ui/_buttons.scss | 47 +- core/scss/ui/_calendars.scss | 28 +- core/scss/ui/_cards.scss | 71 +-- core/scss/ui/_carousel.scss | 6 +- core/scss/ui/_chat.scss | 22 +- core/scss/ui/_close.scss | 30 +- core/scss/ui/_datagrid.scss | 21 +- core/scss/ui/_dropdowns.scss | 41 +- core/scss/ui/_empty.scss | 33 +- core/scss/ui/_forms.scss | 32 +- core/scss/ui/_icons.scss | 6 +- core/scss/ui/_legend.scss | 2 +- core/scss/ui/_lists.scss | 10 +- core/scss/ui/_loaders.scss | 4 +- core/scss/ui/_markdown.scss | 26 +- core/scss/ui/_modals.scss | 4 +- core/scss/ui/_nav.scss | 35 +- core/scss/ui/_pagination.scss | 25 +- core/scss/ui/_patterns.scss | 5 +- core/scss/ui/_payments.scss | 2 +- core/scss/ui/_ribbons.scss | 43 +- core/scss/ui/_segmented.scss | 47 +- core/scss/ui/_signature.scss | 20 +- core/scss/ui/_stars.scss | 2 +- core/scss/ui/_status.scss | 27 +- core/scss/ui/_steps.scss | 37 +- core/scss/ui/_switch-icon.scss | 8 +- core/scss/ui/_tables.scss | 2 +- core/scss/ui/_tags.scss | 38 +- core/scss/ui/_toasts.scss | 6 +- core/scss/ui/_tracking.scss | 22 +- core/scss/ui/_type.scss | 37 +- core/scss/ui/forms/_form-check.scss | 2 +- core/scss/ui/forms/_form-colorinput.scss | 4 +- core/scss/ui/forms/_form-custom.scss | 13 + core/scss/ui/forms/_form-imagecheck.scss | 2 +- core/scss/ui/forms/_form-selectgroup.scss | 5 +- docs/content/ui/components/list-group.mdx | 4 +- docs/content/ui/components/trending.mdx | 178 +++--- docs/layouts/DocsLayout.astro | 2 +- pnpm-lock.yaml | 31 +- preview/pages/2-step-verification-code.astro | 4 +- preview/pages/2-step-verification.astro | 6 +- preview/pages/all-elements.astro | 168 +++--- preview/pages/card-gradients.astro | 6 +- preview/pages/cards-masonry.astro | 2 +- preview/pages/cookie-banner.astro | 4 +- preview/pages/dashboard-crypto.astro | 28 +- preview/pages/datatables.astro | 79 +-- preview/pages/dropzone.astro | 6 +- preview/pages/email-inbox.astro | 123 ++-- preview/pages/faq.astro | 2 +- preview/pages/form-elements.astro | 108 ++-- preview/pages/form-layout.astro | 38 +- preview/pages/illustrations.astro | 4 +- preview/pages/inline-player.astro | 2 +- preview/pages/layout-navbar-overlap.astro | 2 +- preview/pages/logs.astro | 10 +- preview/pages/map-fullsize.astro | 4 +- preview/pages/maps-vector.astro | 2 +- preview/pages/marketing/about.astro | 14 +- preview/pages/marketing/real-estate.astro | 6 +- preview/pages/modals.astro | 2 +- preview/pages/navigation.astro | 2 +- preview/pages/onboarding.astro | 6 +- preview/pages/patterns.astro | 44 +- preview/pages/pay.astro | 4 +- preview/pages/payment-providers.astro | 2 +- preview/pages/pricing-table.astro | 16 +- preview/pages/profile.astro | 2 +- preview/pages/progress.astro | 10 +- preview/pages/screenshot.astro | 9 +- preview/pages/scroll-spy.astro | 2 +- preview/pages/settings.astro | 8 +- preview/pages/sortable.astro | 14 +- preview/pages/stars-rating.astro | 2 +- preview/pages/tasks-list.astro | 12 +- preview/pages/tour.astro | 14 +- preview/pages/trial-ended.astro | 2 +- preview/pages/users.astro | 4 +- preview/scss/_highlight.scss | 48 ++ preview/scss/demo.scss | 57 +- screenshots/layouts/ScreenshotAppLayout.astro | 6 +- screenshots/layouts/ScreenshotLayout.astro | 6 +- shared/components/cards/AuthLockCard.astro | 2 +- .../cards/AuthenticateAccount.astro | 2 +- shared/components/cards/BodyPlaceholder.astro | 2 +- shared/components/cards/CrmStats.astro | 4 +- shared/components/cards/EmptyTeam.astro | 4 +- shared/components/cards/GalleryPhoto.astro | 4 +- shared/components/cards/InvoiceCard.astro | 112 ++-- shared/components/cards/Invoices.astro | 2 +- .../components/cards/MostVisitedPages.astro | 2 +- shared/components/cards/PricingCard.astro | 11 +- shared/components/cards/PricingPlan.astro | 14 +- shared/components/cards/ProfileContact.astro | 2 +- shared/components/cards/RecentActivity.astro | 4 +- shared/components/cards/SmallStats.astro | 2 +- shared/components/cards/SocialTraffic.astro | 2 +- shared/components/cards/Sponsor.astro | 4 +- shared/components/cards/StorageUsage.astro | 16 +- shared/components/cards/TasksDue.astro | 5 +- shared/components/cards/TeamLeaderboard.astro | 2 +- shared/components/cards/TopDeals.astro | 4 +- shared/components/cards/Weather.astro | 2 +- shared/components/cards/Welcome.astro | 29 +- shared/components/cards/YouWin.astro | 2 +- .../cards/charts/ActiveUsers2.astro | 2 +- .../components/cards/charts/MrrOverview.astro | 11 +- .../cards/charts/PipelineFunnel.astro | 2 +- .../components/cards/charts/TotalUsers.astro | 2 +- shared/components/cards/form/Payment.astro | 8 +- .../components/cards/music/TracksList.astro | 4 +- .../components/cards/tables/Progressbg.astro | 7 +- shared/components/demo/DropdownMenuAll.astro | 2 +- shared/components/demo/MapVector.astro | 6 +- shared/components/demo/Table.astro | 4 +- shared/components/demo/ThemeSettings.astro | 2 +- shared/components/demo/Timeline.astro | 6 +- shared/components/demo/Toast.astro | 4 +- shared/components/forms/FormElements2.astro | 6 +- shared/components/forms/FormElements3.astro | 14 +- shared/components/forms/FormElements4.astro | 22 +- shared/components/forms/FormElements5.astro | 16 +- .../layout/HeaderActionsButtons.astro | 9 +- .../layout/HeaderActionsPrint.astro | 2 +- shared/components/layout/HeaderProfile.astro | 2 +- .../marketing/sections/Counters.astro | 8 +- .../components/marketing/sections/Faq.astro | 2 +- .../marketing/sections/Features2.astro | 2 +- .../marketing/sections/Features3.astro | 2 +- .../marketing/sections/Pricing.astro | 2 +- .../marketing/sections/PricingBanner.astro | 2 +- .../marketing/sections/Subscribe.astro | 2 +- .../modals/AddTaskModalContent.astro | 2 +- .../modals/ChangePasswordModalContent.astro | 10 +- .../modals/ConfirmDeleteModalContent.astro | 16 +- .../modals/EditProfileModalContent.astro | 20 +- .../modals/NewEmailModalContent.astro | 4 +- .../modals/NewEventModalContent.astro | 10 +- .../modals/NewTaskModalContent.astro | 14 +- .../modals/ReportModalContent.astro | 4 +- .../modals/SignatureModalContent.astro | 2 +- .../components/modals/TeamModalContent.astro | 2 +- shared/components/navbar/Navbar.astro | 4 + shared/components/navbar/NavbarMenuItem.astro | 6 +- shared/components/navbar/NavbarSideApps.astro | 4 +- .../navbar/NavbarSideNotifications.astro | 10 +- shared/components/navbar/NavbarSideUser.astro | 2 +- shared/components/navbar/SidebarUser.astro | 2 +- shared/components/parts/Datagrid.astro | 4 +- shared/components/parts/Tasks.astro | 4 +- shared/components/parts/form/InputColor.astro | 2 +- shared/layouts/BaseLayout.astro | 2 +- shared/layouts/SettingsLayout.astro | 12 +- shared/ui/ChartRadial.astro | 6 +- shared/ui/DocsLink.astro | 2 +- shared/ui/InputGroup.astro | 6 +- shared/ui/ProgressDescription.astro | 6 +- shared/ui/Rating.astro | 2 +- shared/ui/SwitchIcon.astro | 2 +- shared/ui/Trending.astro | 2 +- 225 files changed, 1547 insertions(+), 4473 deletions(-) delete mode 100644 .agents/agents/bootstrap-v6-reference.md delete mode 100644 .agents/agents/design-reviewer.md delete mode 100644 .agents/agents/v2-policy-reviewer.md delete mode 100644 .agents/rules/v2.mdc delete mode 100644 .agents/skills/design-system/SKILL.md delete mode 100644 .agents/skills/design-system/rules-of-thumb.md delete mode 100644 .changeset/additive-v6-utilities.md delete mode 100644 .changeset/component-token-maps-rest.md delete mode 100644 .changeset/component-token-maps.md delete mode 100644 .changeset/design-audit-core-added.md delete mode 100644 .changeset/design-audit-core-colors.md delete mode 100644 .changeset/design-audit-core-recipes.md delete mode 100644 .changeset/design-audit-core-removed.md delete mode 100644 .changeset/design-audit-decisions.md delete mode 100644 .changeset/design-audit-inbox.md delete mode 100644 .changeset/design-audit-preview.md delete mode 100644 .changeset/esm-only-distribution.md delete mode 100644 .changeset/fix-inactive-steps-counter-contrast.md delete mode 100644 .changeset/floating-ui.md delete mode 100644 .changeset/logical-block-axis-utilities.md delete mode 120000 .claude/agents rename {.agents => .claude}/agents/astro-components.md (85%) delete mode 120000 .cursor/agents delete mode 120000 .cursor/rules delete mode 120000 .cursor/skills delete mode 100644 BOOTSTRAP-V6-MIGRATION.md delete mode 100644 CLAUDE.md delete mode 100644 core/js/src/bootstrap/util/floating-ui.ts delete mode 100644 core/js/tests/unit/util/floating-ui.spec.ts delete mode 100644 core/scss/tests/_tokens.test.scss delete mode 100644 core/scss/tests/_utilities-additive.test.scss delete mode 100644 core/scss/tests/tokens.test.mjs create mode 100644 preview/scss/_highlight.scss diff --git a/.agents/agents/bootstrap-v6-reference.md b/.agents/agents/bootstrap-v6-reference.md deleted file mode 100644 index 6f60216af..000000000 --- a/.agents/agents/bootstrap-v6-reference.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -name: bootstrap-v6-reference -description: Read-only research agent for the Bootstrap v6 source. Use when a Tabler 2.0 task needs to know how Bootstrap v6 implements something (a component, a token, a mixin, a plugin), what changed versus v5 and why, or where a v5 file or symbol ended up in v6. Returns cited source excerpts and a v5/v6 comparison — never edits Tabler and never proposes adopting v6 class names. -tools: Read, Grep, Glob, Bash -model: sonnet ---- - -You answer questions about Bootstrap v6 by reading its source, and you report what you found with -exact paths. You never modify files. You do not recommend renaming anything in Tabler — Tabler 2.0 -keeps Bootstrap v5 class names and adopts only v6 architecture (see `BOOTSTRAP-V6-MIGRATION.md`, -section 2). Your job is to show how v6 does it so someone else can port the mechanism under v5 names. - -## Where the source is - -- Checkout: `/Users/chomik/htdocs/bootstrap`. Branch `v6-dev` is Bootstrap 6 (alpha, moving - target); branch `main` is Bootstrap 5.3.x. -- Never `cd` into it — the shell cwd resets between calls. Always use `git -C /Users/chomik/htdocs/bootstrap …` - and absolute paths. -- Never `git fetch`, `pull` or `checkout` there unless explicitly asked. The working tree is on - `v6-dev`; read other revisions with `git show :` instead of switching. -- Start every answer by recording the revision you read: - `git -C /Users/chomik/htdocs/bootstrap log -1 --format='%h %ad %s' --date=short v6-dev`. - -## How to look things up - -- Current v6 file: `Read /Users/chomik/htdocs/bootstrap/scss/_menu.scss` (working tree is `v6-dev`). -- v5 counterpart: `git -C … show main:scss/_dropdown.scss`. -- What changed: `git -C … diff main...v6-dev -- scss/_card.scss` (three dots — merge base). -- Why it changed: `git -C … log --format='%h %ad %s' --date=short main..v6-dev -- ` and - `git -C … log -S'' --format='%h %s' main..v6-dev`. Commit subjects carry PR numbers. -- Compiled output when the Sass is hard to read: `dist/css/bootstrap.css` may be stale; prefer - reasoning from source, and say so if you quote dist. -- Prose: `site/src/content/docs/**/*.mdx`. Key files: - - `guides/migration.mdx` — the official v5→v6 changelog (539 lines). Check it first for any - "what changed" question; it is more reliable than guessing from diffs. - - `customize/sass.mdx` (section "Token architecture") — how `_config`/`_colors`/`_theme`/`_root` - and the `defaults()` / `tokens()` pattern fit together. - - `components/*.mdx`, `forms/*.mdx`, `utilities/*.mdx` — per-component docs with markup examples. -- `skills/bootstrap-v5-v6-migration/SKILL.md` — upstream's agent checklist for migrating *to* v6. - Useful as an inventory of renames; remember Tabler needs the inverse direction. - -## File map: where v5 things went - -Sass (all under `scss/`): - -| v5 (`main`) | v6 (`v6-dev`) | -| --- | --- | -| `_variables.scss`, `_variables-dark.scss`, `_maps.scss` | `_config.scss`, `_colors.scss`, `_theme.scss`, `_root.scss` | -| `_mixins.scss`, `_helpers.scss`, `_forms.scss` | `mixins/index.scss`, `helpers/index.scss`, `forms/index.scss` | -| `_grid.scss`, `_containers.scss`, `mixins/_breakpoints.scss`, `mixins/_container.scss` | `layout/_grid.scss`, `layout/_containers.scss`, `layout/_breakpoints.scss` | -| `_reboot.scss`, `_type.scss`, `_images.scss`, `_tables.scss` | `content/_reboot.scss`, `content/_lists.scss` + `content/_blockquote.scss`, `content/_images.scss`, `content/_tables.scss`; new `content/_prose.scss` | -| `_buttons.scss`, `_button-group.scss`, `_close.scss`, `mixins/_buttons.scss` | `buttons/_button.scss`, `buttons/_button-group.scss`, `buttons/_close.scss` (no button mixin — `.theme-*` tokens) | -| `_modal.scss` | `_dialog.scss` + `mixins/_dialog-shared.scss` | -| `_offcanvas.scss` | `_drawer.scss` | -| `_dropdown.scss` | `_menu.scss` | -| `_placeholders.scss`, `_spinners.scss` | `_placeholder.scss`, `_spinner.scss` | -| `forms/_form-check.scss` | `forms/_check.scss`, `forms/_radio.scss`, `forms/_switch.scss` | -| `forms/_form-select.scss` | removed — merged into `forms/_form-control.scss` | -| `forms/_form-variables.scss`, `mixins/_forms.scss` | removed / `mixins/_form-validation.scss`; logic in `forms/_validation.scss` | -| `mixins/_alert.scss`, `_list-group.scss`, `_pagination.scss`, `_table-variants.scss` | removed — replaced by `.theme-*` tokens in `_theme.scss` | -| `helpers/_ratio.scss`, `helpers/_clearfix.scss`, `helpers/_color-bg.scss`, `helpers/_colored-links.scss` | utilities API (`_utilities.scss`) | -| `vendor/_rfs.scss` | removed — `clamp()` in `_config.scss` font sizes | -| — | new: `_avatar.scss`, `_chip.scss`, `_stepper.scss`, `_datepicker.scss`, `_nav-overflow.scss`, `_banner.scss`, `forms/_combobox.scss`, `forms/_chip-input.scss`, `forms/_otp-input.scss`, `forms/_strength.scss`, `forms/_form-field.scss`, `forms/_form-adorn.scss`, `mixins/_focus-ring.scss`, `mixins/_mask-icon.scss`, `mixins/_tokens.scss` | - -JavaScript (`js/src/`): - -| v5 | v6 | -| --- | --- | -| `modal.js` | `dialog.js` + `dialog-base.js` | -| `offcanvas.js` | `drawer.js` (also on `dialog-base.js`) | -| `dropdown.js` | `menu.js` (includes submenus) | -| `util/backdrop.js`, `util/focustrap.js`, `util/scrollbar.js` | removed — native `` provides them | -| Popper via `util/index.js` | `util/floating-ui.js` | -| `carousel.js` (float/translate) | `carousel.js` rewritten on scroll snap | -| `scrollspy.js` | rewritten on `IntersectionObserver` | -| — | new: `chips.js`, `combobox.js`, `datepicker.js`, `nav-overflow.js`, `otp-input.js`, `range.js`, `strength.js`, `toggler.js` | - -Tabler's vendored v5 copies live in `core/scss/bootstrap/` and `core/js/src/bootstrap/` (a -TypeScript port). When asked to compare, compare against those too, not only upstream `main`. - -## What a good answer contains - -1. Revision line (SHA + date) for `v6-dev`. -2. The v6 source, quoted with `path:line-range`, trimmed to the relevant part. -3. The v5 counterpart the same way (upstream `main` and/or Tabler's vendored copy). -4. What changed in mechanism — not in names. Names are noise for Tabler; mechanism is the point. - Say explicitly which parts are architecture (tokens, layers, native elements, selectors like - `:has()`, container queries) and which are just renames. -5. Browser requirements the mechanism introduces (`oklch()`, `color-mix()`, `:has()`, - ``, `:user-invalid`, container queries, `scrollbar-gutter`). -6. Where it touches Tabler: which `core/scss/ui/*`, `core/scss/bootstrap/*`, `core/js/src/*` files - implement the same thing today. Point, do not edit. -7. The migration-guide paragraph, if one covers it. - -Keep answers factual. If the migration guide and the source disagree, the source wins — say so and -quote both. If something is not in v6 at all, say "not present in v6-dev at " rather than -inferring. diff --git a/.agents/agents/design-reviewer.md b/.agents/agents/design-reviewer.md deleted file mode 100644 index 82c51cd1a..000000000 --- a/.agents/agents/design-reviewer.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -name: design-reviewer -description: Reviews a change to Tabler for visual consistency — off-scale values, hex literals, missing dark-mode pairs, bespoke hover/focus states, inconsistent sizes, Title Case headings, ad-hoc spacing, inline styles — against the `design-system` skill. Use after editing `core/scss/**`, `shared/ui/**`, `shared/components/**`, `preview/pages/**` or a docs example, before a PR, or when the user asks whether something "looks consistent". Read-only: it reports findings with rule numbers and a suggested fix, it does not edit. -tools: Read, Grep, Glob, Bash ---- - -You are the design reviewer for Tabler. You check that a change fits the visual system, not whether it is pretty. The system is written down in `.agents/skills/design-system/SKILL.md` and `.agents/skills/design-system/rules-of-thumb.md` — read both before you start, every time. They are the source of truth; your own taste is not. - -You never edit files. You never run a build while a dev server is running (it breaks the watcher). You report. - -## 1. Scope the change - -Work out what to review, in this order: - -1. Files or a diff named in the prompt. -2. Otherwise the branch, against the base it descends from: `origin/v2-dev` for 2.0 work, `origin/dev` for 1.x (`git merge-base --is-ancestor origin/v2-dev HEAD` tells you). `git diff --name-only ...HEAD` plus `git status --porcelain` for uncommitted work. -3. If nothing changed, say so and stop. - -Keep only visible surfaces: `core/scss/**` (not `tests/`), `shared/ui/**`, `shared/components/**`, `shared/layouts/**`, `preview/pages/**`, `preview/scss/**`, `docs/components/**`, and in `docs/content/**` only the `` blocks and code fences (ignore paragraphs). Ignore JS, build scripts, data JSON and changesets. Report the scope as "n visible files of m in the diff". - -Read each changed file whole, not just the hunk — a new literal is often a copy of one three lines above the diff. - -## 2. Static checks - -Run these over the changed files and read every hit in context. A hit is evidence, not a finding: decide against the skill whether it breaks a rule. - -```bash -# hex, rgb() and named colours outside the variable files -grep -nE '#[0-9a-fA-F]{3,8}\b|rgba?\(' | grep -v 'svg\|data:image' -# pixel and rem values off the 4px grid or off the scale -grep -nE '[0-9.]+(px|rem)' | grep -vE '\b(1|2|4|6|8|12|16|20|24|28|32|40|48|56|64)px|\b(0\.25|0\.5|0\.75|1|1\.25|1\.5|2|2\.5|3|4|5|100|0\.765625|1\.09375)rem' -# new colour tokens; a global one belongs in layout/_root.scss as a light-dark() pair, -# a component one reads a global token (var(--…)). A literal colour here is the finding. -grep -nE '^\s*--[a-z-]+:' | grep -v 'light-dark(' | grep -vE ':\s*var\(' -# inline styles, forbidden classes, Title Case in markup -grep -nE 'style="' -grep -nE 'fw-bold|text-muted|text-uppercase|shadow-(lg|xl)|btn-outline-secondary|badge-(outline|primary)' # the last two are main.mdc rules, cite that -grep -nE '<(CardTitle|Subheader|h[1-6]|a|button|Button)[^>]*>[^<]*\b[A-Z][a-z]+ [A-Z][a-z]+|(title|pageHeader|label)="[^"]*\b[A-Z][a-z]+ [A-Z][a-z]+' -# hand-rolled gaps where a list wrapper exists (class="…", class={`…`} and class:list alike) -grep -nE '(class="|class=\{`|class:list=)[^>]*\b(btn|badge|avatar)\b[^>]*\bme-[1-3]\b' -# transitions and shadows in new SCSS -grep -nE 'transition:|box-shadow:|outline:' -``` - -The greps are a first pass and miss classes assembled in frontmatter; when a component takes a `color` or `class` prop, read what it emits. In this shell `grep` is a zsh function over `ugrep`, so quote `--include='*.scss'`. - -Then check by reading, because grep cannot: - -- **Sizes.** A new control, avatar, tag or icon size lands on the ladder in SKILL.md section 4 (24 / 28 / 32 / 40 / 48 / 56). Compare against its neighbours: a `-sm` next to another `-sm` must be the same height. -- **Tokens.** A new component declares `--component-*` on its root rule and reads them below; modifiers set tokens, not properties (the `core-scss` pattern). Every colour token is a `light-dark()` pair, in `layout/_root.scss` if global. -- **States.** Hover, active, focus and disabled use the five recipes in section 6 (`$hover-bg`, `--active-bg`, `@include focus-ring()`). Any bespoke `:hover` colour or a second focus style is a finding. -- **Surfaces.** Flat surface: 1px translucent border + `xs` shadow. Floating surface: `overlay` (dropdown) or `lg` / `md`. Radius: control 6px, container 8px, small control 4px. -- **Type.** Content text 14px; weights only 400 / 500 / 600; sentence case; no `letter-spacing`. -- **Markup.** `btn-list` / `badge-list` / `avatar-list` wrappers, `text-secondary`, `.empty` for empty states, no card inside a card body, a list in a card is `card-list-group` and a table is `card-table`, `mb-3` rhythm inside a card. -- **Section 9.** If the change touches a known deviation, report it under its number with its recorded decision ("known deviation #3, decision: `btn-sm` → 32px in 2.0"), and say whether the change moves toward or away from that decision. Do not count it as a new finding. A change that implements a decision must also carry the section 5 entry the table asks for. - -## 3. Visual check (when a page changed) - -If a preview page, layout or shared component changed and a dev server answers on `http://localhost:3000` (`curl -sI` it; never start a build), look at the page in light and dark mode. The preview's theme script honours `?theme=light` / `?theme=dark` in the URL. Without a browser tool, render with the local Firefox, one screenshot per mode into the scratchpad (paths must be absolute and the profile directory must exist, otherwise Firefox writes nothing and prints no error): - -```bash -S=; mkdir -p "$S/ffprof" -FF=/Applications/Firefox.app/Contents/MacOS/firefox -"$FF" --headless --no-remote --profile "$S/ffprof" --window-size=1440,1200 --screenshot "$S/light.png" "http://localhost:3000/?theme=light" -"$FF" --headless --no-remote --profile "$S/ffprof" --window-size=1440,1200 --screenshot "$S/dark.png" "http://localhost:3000/?theme=dark" -``` - -Read both images and check: nothing disappears in dark mode, borders are still visible, no white block sits on a dark card, the new element lines up with its neighbours (same height in a row, same gap as the siblings). - -If no server is running, skip this step and say so in the report. Do not start one yourself unless the prompt asks. Always report what `curl` actually returned, even when the prompt told you to skip. - -## 4. Report - -Order findings by severity. Cite the rule so the author can look it up, and give a fix that uses a scale value or an existing class. - -``` -## Design review: - -Scope: visible files of in the diff (). Visual check: done in light+dark / skipped (curl: ). - -### Blocker — breaks the system -- `core/scss/ui/_foo.scss:42` — new hex `#e5e7eb`; use `var(--border-color)` (SKILL §2, rule 24) - -### Should fix — inconsistent with neighbours -- `preview/pages/foo.astro:118` — `btn-sm` (28px) beside `avatar-sm` (32px) in one row; use `avatar-xs` or move the button out of the row (SKILL §4, known deviation #3 — this instance makes it visible) - -### Nit — style -- `preview/pages/foo.astro:60` — `Payment Method`; sentence case (rule 2) - -### Known deviations touched -- #6 — `.card-note` colours: unchanged, still literal. - -### Skill drift -- SKILL.md §4 says `$card-spacer-y` is 20px; the change sets it to 24px. If intended, update the skill. - -Verdict: -``` - -Rules for the report: - -- Every finding has a file, a line, the offending value and the replacement. No "consider improving spacing". -- Zero findings is a valid result. Say what you checked so the author trusts it. -- If the diff changes a value the skill documents, report it under "Skill drift" instead of arguing with it; the maintainer decides. -- Do not report the backlog. The counts in `rules-of-thumb.md` (57 × `me-2`, 12 × `fw-bold` …) are the state before this change; only new or touched lines count. -- Do not comment on JS behaviour, accessibility semantics beyond contrast, copy, or performance. Other reviewers own those. diff --git a/.agents/agents/v2-policy-reviewer.md b/.agents/agents/v2-policy-reviewer.md deleted file mode 100644 index fb3e3965a..000000000 --- a/.agents/agents/v2-policy-reviewer.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: v2-policy-reviewer -description: Read-only reviewer for Tabler 2.0 changes on v2-dev. Use before opening or merging any PR into v2-dev, or when asked whether a change respects the 2.0 policy (Bootstrap v5 class names and public API kept, Bootstrap v6 architecture adopted). Finds leaked v6 names, silent value remaps, broken public contracts and missing proof for output-neutral phases. Reports findings; does not fix them. -tools: Read, Grep, Glob, Bash ---- - -You review a diff against the Tabler 2.0 policy and report what violates it. You do not edit files. - -## The policy in one paragraph - -Tabler 2.0 keeps the **Bootstrap v5 public contract** — class names, `data-bs-*` attributes, -event names, JavaScript plugin names and methods, and the *values* behind existing utility classes — -and adopts the **Bootstrap v6 architecture** underneath: token files, cascade layers, `oklch()` + -`color-mix()`, `.theme-*` tokens, logical properties, native `` / `
`, Floating UI, -scroll snap. The internal Sass API (variable names, maps, mixins, file layout) is *not* promised -and may change freely as long as compiled output stays as intended. Full text: -`BOOTSTRAP-V6-MIGRATION.md` sections 2 and 3, and the decisions in section 5. Confirmed decisions: -no `md:` prefix syntax in 2.0; everything targets `v2-dev`. - -## Getting the diff - -- Default: the branch against `v2-dev` — `git diff v2-dev...HEAD` (three dots) plus `git status --short` - for uncommitted work; include `git diff` of the working tree when it is not empty. -- If given a PR number: `gh pr diff `; also read the PR body — it should name the phase and carry - the proof described below. -- Never review `dev` — it is frozen for 1.x. If HEAD is not on top of `v2-dev`, say so first. - -Exempt from name checks: files that *describe* v6 (`BOOTSTRAP-V6-MIGRATION.md`, upgrade guides, -`docs/content/**` prose that explains a migration), test fixtures that deliberately contain v6 -markup, and `.claude/agents/*`. - -## Pass 1 — leaked v6 names (blockers) - -Grep the diff's added lines (`git diff … | grep '^+'`) for these. Each hit is a blocker unless it -sits in an exempt file. - -| What | Pattern (extended regex) | v5 form that must be used instead | -| --- | --- | --- | -| Responsive/state prefix | `PREFIX` regex in the block below (the leading `["' .]` keeps SCSS pseudo-classes like `&:focus:not(…)` out) | infix: `.col-md-6`, `.d-md-none`, `.opacity-50-hover` | -| Dialog classes | `\.dialog(-[a-z-]+)?\b` | `.modal`, `.modal-header`, `.modal-body`, `.modal-footer`, `.modal-title`, `.modal-sm/lg/xl/fullscreen` | -| Drawer classes | `\.drawer(-[a-z-]+)?\b` | `.offcanvas`, `.offcanvas-start/end/top/bottom`, `.offcanvas-header/body/title` | -| Menu classes | `\.menu(-item|-header|-divider)?\b`, `\.submenu\b` | `.dropdown-menu`, `.dropdown-item`, `.dropdown-header`, `.dropdown-divider` | -| Button composition | `\.btn-(solid|subtle|text|styled)\b` (`.btn-outline` alone is an existing Tabler class — not a hit) | `.btn-primary`, `.btn-outline-primary`, `.btn-ghost-*` (Tabler) | -| Badge composition | `\.badge-subtle\b` (`.badge-outline` is an existing Tabler class — not a hit) | `.badge.bg-*`, Tabler badge variants | -| Data attributes | `data-bs-toggle="(dialog|drawer|menu|toggler)"`, `data-bs-dismiss="(dialog|drawer)"`, `data-bs-(autoplay|ends|validate|bubble)\b`, `data-bs-modal=` | `modal`, `offcanvas`, `dropdown`; `data-bs-ride`, `data-bs-wrap`, `.needs-validation` | -| Events | `\.bs\.(dialog|drawer|menu|chips|otpInput|strength|range|datepicker)\b` | `.bs.modal`, `.bs.offcanvas`, `.bs.dropdown` | -| JS exports | `\b(Dialog|Drawer|Menu|DialogBase)\b` as a class or import in `core/js/` | `Modal`, `Offcanvas`, `Dropdown` | -| Colour utilities | `\.fg-[a-z]`, `\.bg-[1-4]\b`, `\.bg-(subtle|muted)-`, `\.fg-reset\b` | `.text-*`, `.bg-body-*`, `.text-reset` | -| Type utilities | `\.fs-(xs|sm|md|lg|[2-6]?xl)\b`, `\.lh-md\b`, `\.text-(xs|sm|md|lg)\b` | `.fs-1`…`.fs-6`, `.lh-base` | -| Sizing utilities | `\.max-[wh]-`, `\.underline-` | `.mw-*`, `.mh-*`, `.link-underline-*` | -| Form classes | `\.form-range-input\b`, `\.form-field\b`, `\.check\b` on an input, `\.accordion-icon\b` | `.form-range`, Tabler form layout, `.form-check-input`, accordion as today | -| Removed-in-v6 classes we keep | additions that *delete* `.form-select`, `.accordion-button`, `.dropdown-toggle`, `.modal-dialog`, `.modal-content`, `.alert-dismissible`, `.lead`, `.display-*` from `core/scss` | keep them, at least as aliases | - -Copy-ready form of the patterns (extended regex, run over added lines only): - -```bash -git diff v2-dev...HEAD | grep '^+' | grep -En \ - -e '(^|["'"'"' .])(sm|md|lg|xl|2xl|hover|focus|active|print)(-down)?\\?:[a-z][a-z0-9-]*' \ - -e '\.(dialog|drawer)(-[a-z-]+)?\b' -e '\.menu(-item|-header|-divider)?\b' -e '\.submenu\b' \ - -e '\.btn-(solid|subtle|text|styled)\b' -e '\.badge-subtle\b' \ - -e 'data-bs-toggle="(dialog|drawer|menu|toggler)"' -e 'data-bs-dismiss="(dialog|drawer)"' \ - -e 'data-bs-(autoplay|ends|validate|bubble|modal)\b' \ - -e '\.bs\.(dialog|drawer|menu|chips|otpInput|strength|range|datepicker)\b' \ - -e '\.fg-[a-z]' -e '\.bg-[1-4]\b' -e '\.bg-(subtle|muted)-' \ - -e '\.fs-(xs|sm|md|lg|[2-6]?xl)\b' -e '\.lh-md\b' -e '\.max-[wh]-' -e '\.underline-' \ - -e '\.form-range-input\b' -e '\.form-field\b' -e '\.accordion-icon\b' -``` - -Verified 2026-09-06: this set returns zero hits on the untouched `core/scss`, `shared/ui`, -`preview/pages` and `docs/content` trees, so any hit in a diff is real. - -`.theme-*` tokens are **allowed** (they are v6 architecture) — but flag markup where a `.theme-*` -class *replaces* a v5 colour class instead of being emitted by it. `floatingConfig` is allowed once -phase 5 lands (decided in the plan). Tabler-specific classes that happen to contain these words -(`.navbar-menu`, `.dropdown-menu-*`) are not hits; check the full token, not the substring. - -## Pass 2 — silent value remaps (blockers) - -Names surviving with different values is the failure mode users cannot grep for. For any change in -`core/scss/` diff the *values* of: - -- `$spacers` (v6 remapped 0–5 to 0–9), `$sizes` -- `$border-radius*` / `$radii` and what `.rounded-N` resolves to -- `$font-sizes` / `.fs-N`, `$display-font-sizes`, `$line-height-*` -- `$grid-breakpoints` / `$breakpoints` (v6: lg 1024, xl 1280, 2xl 1536) and `$container-max-widths` -- `$theme-colors` keys, `$zindex-*` - -Compare against `git show v2-dev:` (or `dev` for the very first phase). A key that keeps its -name but changes its value is a blocker unless the PR says explicitly that the reflow is intended -and section 5 of the plan records the decision. - -## Pass 3 — public contract (blockers) - -For any touched component, confirm these still hold, by reading the code, not the description: - -- Class names emitted for every variant that existed on `dev` (`check-markup-classes` baseline is - the reference; `pnpm run check-markup-classes` if it runs in this environment). -- `data-bs-toggle` / `data-bs-dismiss` / `data-bs-target` values unchanged. -- Event names `show/shown/hide/hidden.bs.` unchanged; `hidePrevented.bs.modal` kept. -- JS: `getInstance`, `getOrCreateInstance`, `show`, `hide`, `toggle`, `dispose` present; the - `window.bootstrap`-style access documented for 1.x still works unless the ESM-only decision - (section 5) has been taken. -- `--tblr-*` custom properties that 1.x documents as public are still defined (may be aliases). -- Both `data-bs-*` and `data-tblr-*` attribute spellings still work in JS. - -## Pass 4 — proof for the claimed phase (warnings) - -Identify the phase from the branch name, PR body or commit messages, then check the required proof -is present or reproducible: - -- Phases 1, 3, 4 (output-neutral): a zero byte-diff of `core/dist/css/tabler.css` and a zero - `html-diff` run. If the PR does not show them, run what is cheap (`pnpm --filter @tabler/core run css` - then `git diff --stat` — only if no dev server is running) and report the result; otherwise - request them. -- Phase 2 (colours): a contrast-gate run and a dark-mode screenshot review listed in the PR. -- Phase 6 (native components): the a11y checklist — focus trap, Escape, backdrop click, focus - return to the trigger, `aria-*` unchanged — and a note that `html-diff` differs by design. -- Any phase: a changeset in `.changeset/` and, when a class was added or moved, updated `classnames` - front matter in `docs/content/**`. - -Missing proof is a warning, not a blocker — but say clearly what is missing. - -## Pass 5 — open questions (notes) - -If the change silently answers one of section 5's open questions (browser baseline, ESM-only, -`.form-select`, `$spacers`, component ownership of `.avatar`/`.chip`/`.stepper`, navbar-as-drawer), -note it: the decision should be recorded in the plan, not implied by code. - -## Report format - -``` -Reviewed: vs v2-dev at , phase () - -BLOCKERS -- path:line — → - -WARNINGS -- ... - -NOTES -- ... - -Contract check: classes ✓/✗ · data-bs ✓/✗ · events ✓/✗ · JS API ✓/✗ · custom props ✓/✗ -Proof: byte-diff · html-diff · a11y · changeset -``` - -Every finding cites `path:line`. Quote the offending line. Do not pad the report with things that -are fine; an empty BLOCKERS section is the goal, and "nothing found" is a valid, complete result. diff --git a/.agents/rules/docs.mdc b/.agents/rules/docs.mdc index 1e9103b14..22ea3d57c 100644 --- a/.agents/rules/docs.mdc +++ b/.agents/rules/docs.mdc @@ -51,8 +51,6 @@ description: Practical description of when and why to use it. No `layout:` key — the route picks the layout. -Quote `summary:` and `description:` values that contain a colon followed by a space (`Cards: use them…`) — unquoted, js-yaml reads the text as a nested map and the page breaks: a 500 on the dev server and a failed docs build on Vercel. Open the page on `:3010` before pushing. - Optional keys: `seoTitle`, `seoDescription`, `icon`, `order`, `related`, `docs-libs`, `css-plugins`, `hide-pagination`, `added-in`. Anything else is rejected. ### Examples diff --git a/.agents/rules/main.mdc b/.agents/rules/main.mdc index ffd45b9ca..972df2148 100644 --- a/.agents/rules/main.mdc +++ b/.agents/rules/main.mdc @@ -7,7 +7,7 @@ alwaysApply: true # Tabler — project rules -Shared instructions for all AI agents (Claude Code, Cursor, etc.). Canonical agent configuration lives in `.agents/` (`rules/` + `skills/` + `agents/`); `.claude/{skills,agents}` and `.cursor/{rules,skills,agents}` are symlinks into it, and the root `CLAUDE.md` only `@`-imports `rules/*.mdc` for Claude Code — edit the files under `.agents/` only. Rules in `rules/*.mdc` (`main`, `docs`, `v2`) always apply. +Shared instructions for all AI agents (Claude Code, Cursor, etc.). Canonical agent configuration lives in `.agents/` (`rules/` + `skills/`); `.claude/skills` is a symlink into it. ## Project structure @@ -39,7 +39,6 @@ Task-specific instructions live in `.agents/skills//SKILL.md` — read the | `build-pipeline` | assets missing, stale or growing; editing `.build/` or the asset manifests | | `generate-changeset` | writing a changeset (always — never hand-write the file) | | `mr-description` | drafting an MR/PR title and description | -| `design-system` | adding or changing anything visible — a component, variant, token, demo page or docs example; the checklist behind the `design-reviewer` agent | ## Language diff --git a/.agents/rules/v2.mdc b/.agents/rules/v2.mdc deleted file mode 100644 index 9e64c9dd6..000000000 --- a/.agents/rules/v2.mdc +++ /dev/null @@ -1,56 +0,0 @@ ---- -description: Tabler 2.0 policy — target branch, what stays from Bootstrap v5, what is adopted from v6, proof required per phase -globs: -alwaysApply: true ---- - -# Tabler 2.0 — branch and compatibility policy - -Applies to every change on `v2-dev`. The plan, phases and open questions live in -`BOOTSTRAP-V6-MIGRATION.md` at the repo root — read sections 2 and 3 before starting 2.0 work. - -## Branches - -- All 2.0 work targets **`v2-dev`**. Cut feature branches from it and open PRs back into it. -- `dev` is frozen for 1.x maintenance. Never merge 2.0 work into `dev`. -- Every 2.0 PR names the phase it belongs to and carries that phase's proof (below). -- Every PR into `v2-dev` goes into the GitHub milestone **2.0**: `gh pr create --base v2-dev --milestone "2.0" …` (or `gh pr edit --milestone "2.0"` afterwards). - -## Kept from Bootstrap v5 — the public contract - -- Class names: `.modal`, `.offcanvas`, `.dropdown-menu`, `.btn-primary`, `.col-md-6`, `.d-md-none`, `.text-*`, `.fs-1`…`.fs-6`, `.rounded-*`, and every class documented for 1.x. -- `data-bs-*` attributes and their values (`data-bs-toggle="modal"`), with the `data-tblr-*` alias still working. -- Event names (`shown.bs.modal`), JavaScript plugin names and methods (`Modal.getInstance`, `show`, `hide`, `dispose`). -- The **values** behind existing utilities: `$spacers`, `.rounded-N`, `.fs-N`, breakpoints and container widths do not change silently. - -## Not adopted from v6 - -- The `md:` / `hover:` prefix syntax — infix names (`.col-md-6`) stay. Revisit no earlier than 3.0. -- Renames: `.dialog`, `.drawer`, `.menu`, `.fg-*`, `.bg-1`…`.bg-4`, `.fs-xs`…`.fs-6xl`, `.max-w-*`, `.underline-*`, `data-bs-toggle="dialog|drawer|menu"`, `*.bs.dialog|drawer|menu` events, `Dialog`/`Drawer`/`Menu` exports. -- The v6 remaps of `$spacers` (0–9) and `.rounded-*`. -- Removing `.form-select` — it stays untouched in 2.0. - -## Adopted from v6 — the architecture - -- Token files `_config` / `_colors` / `_theme` / `_root` with the `defaults()` + `tokens()` pattern; cascade `@layer`; custom properties prefixed by PostCSS, never by a Sass `$prefix`. -- `oklch()` colours, `color-mix()` scales, `.theme-*` tokens — **emitted by the v5 classes**, not replacing them in markup (`.btn-primary` sets the theme tokens; markup never needs `.btn-solid .theme-primary`). -- Logical properties in spacing and border utilities (class names unchanged). -- Native `` for modal/offcanvas, `
` for accordion, CSS scroll snap for carousel — under the v5 names, events and data attributes. -- Floating UI instead of Popper; one `focus-ring()` mixin; the numeric `$radii` scale mapped so `.rounded-N` keeps its v5 values. -- ESM-only JavaScript: no UMD bundle, no `window.tabler` global in 2.0. -- Component parity with v6 for `.avatar`, `.chip`, `.stepper`, `.progress`, `.status`: Tabler's versions are reworked to match the v6 class names, modifiers and tokens; a Tabler-only name such as `.steps` stays as an alias for one major. This is the one agreed exception to "every 1.x class stays" — see phase 9 of the plan. -- The internal Sass API (variable names, maps, mixins, file layout) is **not** promised and may change, as long as compiled output stays as intended. - -## Proof per phase - -- Output-neutral phases (1 Sass split, 3 token scales, 4 logical properties): byte-identical `core/dist/css/tabler.css` and a zero `html-diff` run — see the `html-diff` skill. -- Phase 2 (colours): contrast gate passed, dark mode reviewed by screenshot. -- Phase 6 (native components): the a11y checklist — focus trap, Escape, backdrop click, focus returns to the trigger, `aria-*` unchanged — and a note that `html-diff` differs by design. -- Every phase: a changeset (`generate-changeset` skill), updated `classnames` front matter when a class moved (`class-reference` skill). - -## Agents - -- Before opening a PR into `v2-dev`, run the `v2-policy-reviewer` agent on the diff and fix its blockers. -- When the diff touches something visible (`core/scss/ui/**`, `shared/ui/**`, `preview/pages/**`, a docs example), also run the `design-reviewer` agent; it checks the change against the `design-system` skill and reports known deviations by number. -- To learn how Bootstrap v6 implements something, ask the `bootstrap-v6-reference` agent; it reads the upstream source and reports mechanism, not names. -- The open questions in section 5 of the plan are decided by the maintainer and recorded in the plan — never implied by code. diff --git a/.agents/skills/astro-dev/SKILL.md b/.agents/skills/astro-dev/SKILL.md index f16bc7e3f..7edec33d1 100644 --- a/.agents/skills/astro-dev/SKILL.md +++ b/.agents/skills/astro-dev/SKILL.md @@ -23,8 +23,6 @@ Never ask the user to check a page manually. Start the server, look at the page, `preview_start` returns a `tabId` — pass it to every later `navigate` / `read_page` / `computer` call so they act on that tab and not on whatever is fronted. The same entries exist in `.claude/launch.json` (`preview`, `docs`, `screenshots`) — start them with `preview_start` so the browser pane opens on the right port, and use `preview-attach` when a server is already running. `pnpm dev` at the repo root starts everything through turbo; only do that when the change spans packages, because the persistent tasks make the output hard to read. -**Port 3000 belongs to the main checkout.** In a git worktree the ports above are taken, and the worktree has no built assets yet. Prepare once with `pnpm turbo run dev:prepare --filter @tabler/preview` (builds `core` and copies the assets into the worktree's `public/`), then start `pnpm --dir preview exec astro dev --port 3001` — the `preview-alt` entry in `.claude/launch.json`. An `html-diff` baseline must be captured from the same server as the comparison, because the toolbar embeds the server path in the HTML. - A `shared/` change shows up in both preview and docs. Verify in the package the user asked about, and open the other one too when the component is used there. ## 2. Full dev vs. astro-only diff --git a/.agents/skills/core-js/SKILL.md b/.agents/skills/core-js/SKILL.md index 61619f565..77517bf53 100644 --- a/.agents/skills/core-js/SKILL.md +++ b/.agents/skills/core-js/SKILL.md @@ -18,10 +18,8 @@ description: >- | Entry | Ships as | Holds | | --- | --- | --- | -| `js/tabler.ts` | `tabler.js` (+ `.min`) | plugin initialisers, the Bootstrap components, the `tabler` helper exports | -| `js/tabler-theme.ts` | `tabler-theme.js` (+ `.min`) | the colour-mode/theme switcher only | - -Both bundles are **ESM only** (Tabler 2.0, like Bootstrap v6): no UMD, no `window.tabler` global. `tabler.js` is loaded with ` + ``` @@ -106,7 +106,7 @@ The `@tabler/core` package contains compiled and minified CSS and JavaScript, th ├── dist/ │ ├── css/ tabler.css and the optional stylesheets (flags, marketing, payments, socials, │ │ themes, vendors), each with .min and .rtl versions -│ ├── js/ tabler.js (ESM, load with + ``` If you don't use a package manager, [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive. @@ -46,8 +46,7 @@ import '@tabler/core/dist/css/tabler.min.css' import '@tabler/core/dist/js/tabler.min.js' ``` -The bundle is ESM only — in a plain HTML page load it with ` + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d9a16898a..dbba8ce04 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -112,9 +112,9 @@ importers: core: dependencies: - '@floating-ui/dom': - specifier: ^1.8.0 - version: 1.8.0 + '@popperjs/core': + specifier: ^2.11.8 + version: 2.11.8 devDependencies: '@melloware/coloris': specifier: ^0.25.0 @@ -928,15 +928,6 @@ packages: cpu: [x64] os: [win32] - '@floating-ui/core@1.8.0': - resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==} - - '@floating-ui/dom@1.8.0': - resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==} - - '@floating-ui/utils@0.2.12': - resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==} - '@fullcalendar/core@6.1.21': resolution: {integrity: sha512-t3u/+sqh3Iq7TWtUnVLcGDUE6OWZh0UD3c04bI/l7lSLAgAKr3kngBmhHiQD1QXpwC8ZN5iNqG7a7gOVixhSKQ==} @@ -1337,6 +1328,9 @@ packages: '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} + '@popperjs/core@2.11.8': + resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} + '@prettier/sync@0.6.1': resolution: {integrity: sha512-yF9G8vK/LYUTF3Cijd7VC9La3b20F20/J/fgoR4H0B8JGOWnZVZX6+I6+vODPosjmMcpdlUV+gUqJQZp3kLOcw==} peerDependencies: @@ -5586,17 +5580,6 @@ snapshots: '@esbuild/win32-x64@0.28.1': optional: true - '@floating-ui/core@1.8.0': - dependencies: - '@floating-ui/utils': 0.2.12 - - '@floating-ui/dom@1.8.0': - dependencies: - '@floating-ui/core': 1.8.0 - '@floating-ui/utils': 0.2.12 - - '@floating-ui/utils@0.2.12': {} - '@fullcalendar/core@6.1.21': dependencies: preact: 10.12.1 @@ -5947,6 +5930,8 @@ snapshots: '@polka/url@1.0.0-next.29': {} + '@popperjs/core@2.11.8': {} + '@prettier/sync@0.6.1(prettier@3.9.5)': dependencies: make-synchronized: 0.8.0 diff --git a/preview/pages/2-step-verification-code.astro b/preview/pages/2-step-verification-code.astro index 0ff883270..b01e63639 100644 --- a/preview/pages/2-step-verification-code.astro +++ b/preview/pages/2-step-verification-code.astro @@ -7,10 +7,10 @@ import CaptureScript from '@shared/components/CaptureScript.astro' import CardTitle from '@ui/CardTitle.astro' --- - +
- Authenticate your account + Authenticate Your Account

Please confirm your account by entering the authorization code sent to +1 856-672-8552. diff --git a/preview/pages/2-step-verification.astro b/preview/pages/2-step-verification.astro index aeb842571..1c28f33c7 100644 --- a/preview/pages/2-step-verification.astro +++ b/preview/pages/2-step-verification.astro @@ -7,10 +7,10 @@ import flags from '@data/flags.json' import CardTitle from '@ui/CardTitle.astro' --- - +

- 2-step verification + 2-Step Verification - +
+1 diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index 6100dacfb..6eef14e1c 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -70,7 +70,7 @@ function greetUser(name) { }` --- - +
@@ -92,7 +92,7 @@ function greetUser(name) { This is a regular paragraph with bold text, italic text, and underlined text.

-

This is small muted text.

+

This is small muted text.

Primary text color

Success text color

Danger text color

@@ -109,7 +109,7 @@ function greetUser(name) {
-

Standard buttons

+

Standard Buttons

-

Button sizes

+

Button Sizes

- + + @@ -627,7 +627,7 @@ function greetUser(name) {
-
Modal title
+
Modal Title
@@ -657,7 +657,7 @@ function greetUser(name) {
- +
@@ -672,18 +672,18 @@ function greetUser(name) {
- + -

Basic button group

+

Basic Button Group

-

Button toolbar

-
{xmrBtc} - {xmr.price} + {xmr.price}
- Volume: {xmr['volume-24h'].replace('$', '')} + Volume: {xmr['volume-24h'].replace('$', '')}
@@ -261,7 +261,7 @@ const operationCurrencies = currencies.slice(0, 20)
-

The final amount could change depending on current market conditions.

+

The final amount could change depending on current market conditions.

@@ -269,7 +269,7 @@ const operationCurrencies = currencies.slice(0, 20)
- Sell orders + Sell Orders @@ -300,7 +300,7 @@ const operationCurrencies = currencies.slice(0, 20)
- Buy orders + Buy Orders diff --git a/preview/pages/datatables.astro b/preview/pages/datatables.astro index 8a448b021..6970142b5 100644 --- a/preview/pages/datatables.astro +++ b/preview/pages/datatables.astro @@ -4,6 +4,7 @@ import { toUnixSeconds, formatLongDate } from '@shared/lib/date-format' import { randomNumber, randomDate } from '@shared/lib/pseudo-random' import Card from '@ui/Card.astro' import CardHeader from '@ui/CardHeader.astro' +import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' import CardSubtitle from '@ui/CardSubtitle.astro' import Progress from '@ui/Progress.astro' @@ -43,45 +44,47 @@ const valueNames = ['sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: Click a column header to sort the rows by that value.
-
- - - - - - - - - - - - - - { - rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => ( - - - - - - - - + + )) + } + +
{rc.name}{rc.city}{rc.type}{rc.score} - {dateLabel} - {quantity} -
-
{progress}%
-
- + +
+ + + + + + + + + + + + + + { + rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => ( + + + + + + + + - - )) - } - -
{rc.name}{rc.city}{rc.type}{rc.score} + {dateLabel} + {quantity} +
+
{progress}%
+
+ +
- -
-
+
+
+ diff --git a/preview/pages/dropzone.astro b/preview/pages/dropzone.astro index c9a613ca0..5c7e7e6e0 100644 --- a/preview/pages/dropzone.astro +++ b/preview/pages/dropzone.astro @@ -14,7 +14,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Basic usage + Basic Usage Drag a file in or click to browse — a single drop target for one upload. @@ -23,7 +23,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Multiple file upload + Multiple File Upload Accept and preview several files at once from the same drop target. @@ -32,7 +32,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Custom dropzone + Custom Dropzone Swap in your own label and helper text for the drop target. diff --git a/preview/pages/email-inbox.astro b/preview/pages/email-inbox.astro index a056aa8dc..b834eb70b 100644 --- a/preview/pages/email-inbox.astro +++ b/preview/pages/email-inbox.astro @@ -1,5 +1,4 @@ --- -import Empty from '@ui/Empty.astro' import Subheader from '@ui/Subheader.astro' import ButtonGroup from '@ui/ButtonGroup.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro' @@ -17,7 +16,7 @@ import { formatShortDate } from '@shared/lib/date-format' import mails from '@data/mails.json' // Label colors shared by the folder sidebar and the dots in the message list. -const labelColors: Record = { Updates: 'azure', Friends: 'orange', Family: 'teal', Social: 'indigo', Important: 'pink', Promotions: 'purple' } +const labelColors: Record = { Updates: 'info', Friends: 'warning', Family: 'success', Social: 'primary', Important: 'danger', Promotions: 'purple' } --- @@ -38,7 +37,7 @@ const labelColors: Record = { Updates: 'azure', Friends: 'orange Starred Snoozed Draft32 - Sent mail + Sent Mail Trash Important Spam @@ -100,7 +99,7 @@ const labelColors: Record = { Updates: 'azure', Friends: 'orange
- Label as + Label as: Updates Social Promotions @@ -113,72 +112,72 @@ const labelColors: Record = { Updates: 'azure', Friends: 'orange More
- Mark as unread - Add to tasks - Add star + Mark as Unread + Add to Tasks + Add Star Mute
- - { - mails.length > 0 ? ( - mails.map((mail) => ( - -
-
- -
-
- - - -
-
- - {mail.sender} - -
-
- - {mail.subject} - - – {mail.preview} -
-
- {mail.labels.map((label) => ( - - ))} -
-
-
- - - - - - - - - - - +
+ + { + mails.length > 0 ? ( + mails.map((mail) => ( + +
+
+ +
+
+ +
+
+ + {mail.sender} + +
+
+ + {mail.subject} + + – {mail.preview} +
+
+ {mail.labels.map((label) => ( + + ))} +
+
+
+ + + + + + + + + + + + +
+
+
{formatShortDate(new Date(mail.date))}
-
{formatShortDate(new Date(mail.date))}
-
- - )) - ) : ( - - - - ) - } - -
+ + )) + ) : ( + No emails + ) + } + +
+
Showing 1 - {mails.length} of {mails.length} diff --git a/preview/pages/faq.astro b/preview/pages/faq.astro index 2f409319e..5627926bb 100644 --- a/preview/pages/faq.astro +++ b/preview/pages/faq.astro @@ -7,7 +7,7 @@ import HeaderActionsBreadcrumb from '@shared/components/layout/HeaderActionsBrea const categories = faq as { name: string; questions: { question: string }[] }[] --- - +
diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro index f717c6807..f74ea1b0d 100644 --- a/preview/pages/form-elements.astro +++ b/preview/pages/form-elements.astro @@ -109,14 +109,14 @@ const rows = [
- Node.js version + Node.js Version The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect. - Learn more about Node.js version + Learn more about Node.js Version
@@ -134,14 +134,14 @@ const rows = [ - - + +
- +
@@ -174,82 +174,82 @@ const rows = [
- Edit profile + Edit Profile
-
-
-
+
+
+
-
+
- +
- +
- +
- + - +
Assertions
+
+ + + + + + { + rows.map((row) => ( + + + + + + + )) + } + +
SourcePropertyComparisonTarget
+ + + + + + + +
+
-
- - - - - - { - rows.map((row) => ( - - - - - - - )) - } - -
SourcePropertyComparisonTarget
- - - - - - - -
-
diff --git a/preview/pages/form-layout.astro b/preview/pages/form-layout.astro index a7da2cadc..9a841d5cb 100644 --- a/preview/pages/form-layout.astro +++ b/preview/pages/form-layout.astro @@ -20,7 +20,7 @@ import DocsLink from '@ui/DocsLink.astro' const countries = flags as { name: string }[] --- - +
@@ -30,7 +30,7 @@ const countries = flags as { name: string }[]
- Basic form + Basic Form A minimal sign-up form with just the essentials.
@@ -47,8 +47,8 @@ const countries = flags as { name: string }[] - - + +
@@ -59,23 +59,23 @@ const countries = flags as { name: string }[]
- Example form + Example Form A contact form with a subject select and a message field.
- + - + - + @@ -83,7 +83,7 @@ const countries = flags as { name: string }[] -
+
@@ -98,7 +98,7 @@ const countries = flags as { name: string }[]
- Example form with icons + Example Form with Icons Prefix each field with an icon for a friendlier sign-up flow.
@@ -107,11 +107,11 @@ const countries = flags as { name: string }[]
-
+
-
+
@@ -154,19 +154,19 @@ const countries = flags as { name: string }[]
- Example form + Example Form A longer profile form grouped into personal info and address sections.
-

Personal info

+

Personal Info

- + - + @@ -202,13 +202,13 @@ const countries = flags as { name: string }[] - +
@@ -224,7 +224,7 @@ const countries = flags as { name: string }[]
diff --git a/preview/pages/illustrations.astro b/preview/pages/illustrations.astro index c6ed143fb..341f7118a 100644 --- a/preview/pages/illustrations.astro +++ b/preview/pages/illustrations.astro @@ -80,7 +80,7 @@ const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) => }
-
Skin color
+
Skin color
{ skinEntries.map((color, i) => ( @@ -94,7 +94,7 @@ const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) => }
-
Select SVG illustration
+
Select SVG illustration
{ autodarkEntries.map(([key, svg], i) => ( diff --git a/preview/pages/inline-player.astro b/preview/pages/inline-player.astro index cd3baa932..0a4393217 100644 --- a/preview/pages/inline-player.astro +++ b/preview/pages/inline-player.astro @@ -10,7 +10,7 @@ import DocsLink from '@ui/DocsLink.astro' type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number } --- - +
{ diff --git a/preview/pages/layout-navbar-overlap.astro b/preview/pages/layout-navbar-overlap.astro index 74e269b56..d60a78290 100644 --- a/preview/pages/layout-navbar-overlap.astro +++ b/preview/pages/layout-navbar-overlap.astro @@ -5,6 +5,6 @@ import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons --- - + diff --git a/preview/pages/logs.astro b/preview/pages/logs.astro index de61832f3..06084a25d 100644 --- a/preview/pages/logs.astro +++ b/preview/pages/logs.astro @@ -18,12 +18,12 @@ import { site } from '@shared/lib/site' 
GET {site.previewUrl}
-

Request timing

+

Request Timing

Effective URL            {site.previewUrl}
Redirect count           0
Name lookup time         3.4e-05
Connect time             0.000521
Pre-transfer time        0.0
Start-transfer time      0.0
App connect time         0.0
Redirect time            0.0
Total time               28.000601
Response code            0
Return keyword           operation_timedout
-

Response headers

+

Response Headers

HTTP/1.1 200 Connection established
@@ -37,7 +37,7 @@ import { site } from '@shared/lib/site'
-

Application log

+

Application Log

2024-01-15 14:23:45 [INFO] Application started successfully
 2024-01-15 14:23:46 [DEBUG] Database connection established
@@ -48,7 +48,7 @@ import { site } from '@shared/lib/site'
 2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms
-

Log levels

+

Log Levels

@@ -57,7 +57,7 @@ import { site } from '@shared/lib/site' -

Log source

+

Log Source

Application Server (prod-01)
 diff --git a/preview/pages/map-fullsize.astro b/preview/pages/map-fullsize.astro index f6cc2e24b..4fb67aeb0 100644 --- a/preview/pages/map-fullsize.astro +++ b/preview/pages/map-fullsize.astro @@ -3,8 +3,8 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import CaptureScript from '@shared/components/CaptureScript.astro' --- - -

Full-size map

+ +

Full Size Map

diff --git a/preview/pages/maps-vector.astro b/preview/pages/maps-vector.astro index e1814217d..667486da5 100644 --- a/preview/pages/maps-vector.astro +++ b/preview/pages/maps-vector.astro @@ -7,7 +7,7 @@ import CardTitle from '@ui/CardTitle.astro' import DocsLink from '@ui/DocsLink.astro' --- - +
diff --git a/preview/pages/marketing/about.astro b/preview/pages/marketing/about.astro index 66dfb2a28..e348204fb 100644 --- a/preview/pages/marketing/about.astro +++ b/preview/pages/marketing/about.astro @@ -5,7 +5,7 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro'
-

About us

+

About Us

Tabler is a digital firm specializing in website development. Our themes are employed by businesses of all scales, ranging from emerging startups to established public companies, to construct and oversee their online presence.

@@ -14,29 +14,29 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro'
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/preview/pages/marketing/real-estate.astro b/preview/pages/marketing/real-estate.astro index 2071a2f7b..c4bbc100b 100644 --- a/preview/pages/marketing/real-estate.astro +++ b/preview/pages/marketing/real-estate.astro @@ -31,7 +31,7 @@ const buildings = realEstate as Building[]
-
+
@@ -52,7 +52,7 @@ const buildings = realEstate as Building[] -
{building.price}
+
{building.price}
{building.address}, California USA
@@ -67,7 +67,7 @@ const buildings = realEstate as Building[]
- + See details
diff --git a/preview/pages/modals.astro b/preview/pages/modals.astro index a26cca45e..e1b74d90d 100644 --- a/preview/pages/modals.astro +++ b/preview/pages/modals.astro @@ -82,7 +82,7 @@ const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-

Scrollable modal

- +
diff --git a/preview/pages/navigation.astro b/preview/pages/navigation.astro index 0cecba64a..8f576badb 100644 --- a/preview/pages/navigation.astro +++ b/preview/pages/navigation.astro @@ -21,7 +21,7 @@ import DocsLink from '@ui/DocsLink.astro'
- +
diff --git a/preview/pages/onboarding.astro b/preview/pages/onboarding.astro index e099e04e6..a2ba1ec90 100644 --- a/preview/pages/onboarding.astro +++ b/preview/pages/onboarding.astro @@ -49,7 +49,7 @@ import PageTitle from '@ui/PageTitle.astro'
- Team size + Team size
- What are you planning to use this for? + What are you planning to use this for?
@@ -89,7 +89,7 @@ import PageTitle from '@ui/PageTitle.astro'
- How did you hear about us? + How did you hear about us?
diff --git a/preview/pages/patterns.astro b/preview/pages/patterns.astro index 175697655..bbecac14e 100644 --- a/preview/pages/patterns.astro +++ b/preview/pages/patterns.astro @@ -28,7 +28,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patterns.map((pattern) => (
- + .bg-pattern-{pattern}
)) @@ -46,7 +46,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patternColors.map((color) => (
- + .bg-pattern-{color}
)) @@ -64,7 +64,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patternSizes.map((size) => (
- + .bg-pattern-{size}
)) @@ -82,7 +82,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patternOpacities.map((opacity) => (
- + .bg-pattern-opacity-{opacity}
)) @@ -98,38 +98,38 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line Combine pattern type, color, size, and opacity on real layouts.
- + .bg-pattern-transparent
- + .bg-pattern-grid.bg-pattern-primary.bg-pattern-lg.bg-pattern-opacity-light
- + .bg-pattern-diagonal-stripes-2.bg-pattern-azure.bg-pattern-opacity-dark
- + .bg-pattern-dots.bg-pattern-red.bg-pattern-sm.bg-pattern-opacity-darker
+
+ + + Card with .bg-pattern-diagonal. + + +
+
+ + + Card with a primary grid and .bg-pattern-opacity-light. + + +
-
- - - Card with .bg-pattern-diagonal. - - -
-
- - - Card with a primary grid and .bg-pattern-opacity-light. - - -
diff --git a/preview/pages/pay.astro b/preview/pages/pay.astro index e272a79d5..4ec7fd61d 100644 --- a/preview/pages/pay.astro +++ b/preview/pages/pay.astro @@ -42,7 +42,7 @@ import Icon from '@ui/Icon.astro'
- +
@@ -52,7 +52,7 @@ import Icon from '@ui/Icon.astro'
- + diff --git a/preview/pages/payment-providers.astro b/preview/pages/payment-providers.astro index 1c16374a4..80314eb59 100644 --- a/preview/pages/payment-providers.astro +++ b/preview/pages/payment-providers.astro @@ -13,7 +13,7 @@ import DocsLink from '@ui/DocsLink.astro' const providers = payments as { name: string; logo: string }[] --- - +
diff --git a/preview/pages/pricing-table.astro b/preview/pages/pricing-table.astro index faeeb2b2d..e93c17109 100644 --- a/preview/pages/pricing-table.astro +++ b/preview/pages/pricing-table.astro @@ -16,18 +16,18 @@ import Subheader from '@ui/Subheader.astro'
Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.
- Starter -
$0
+
Starter
+
$0
Choose plan - Professional -
$9
- Choose plan +
Professional
+
$9
+ Choose plan - Business -
$16
+
Business
+
$16
Choose plan @@ -92,7 +92,7 @@ import Subheader from '@ui/Subheader.astro' Choose plan - Choose plan + Choose plan Choose plan diff --git a/preview/pages/profile.astro b/preview/pages/profile.astro index c0aa01d05..90fb17c93 100644 --- a/preview/pages/profile.astro +++ b/preview/pages/profile.astro @@ -20,7 +20,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
- About me + About Me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur doloremque, diff --git a/preview/pages/progress.astro b/preview/pages/progress.astro index 8839e13be..7a67a55d6 100644 --- a/preview/pages/progress.astro +++ b/preview/pages/progress.astro @@ -184,7 +184,7 @@ import DocsLink from '@ui/DocsLink.astro'

- Steps progress + Steps Progress Mark discrete steps instead of a continuous percentage.
@@ -198,7 +198,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress background + Progress Background Fill a row's background as the progress indicator itself.
@@ -212,7 +212,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress background colors + Progress Background Colors Pair a light background fill with a matching accent color.
@@ -226,7 +226,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress description + Progress Description Pair a label and percentage with the bar for more context.
@@ -240,7 +240,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress description sizes + Progress Description Sizes Scale the labeled progress bar from progress-sm to progress-xl.
diff --git a/preview/pages/screenshot.astro b/preview/pages/screenshot.astro index 60297b758..a7a3c6722 100644 --- a/preview/pages/screenshot.astro +++ b/preview/pages/screenshot.astro @@ -9,12 +9,17 @@ import { site } from '@shared/lib/site' .screenshot { width: 1024px; height: 768px; - background: var(--tblr-bg-surface-tertiary); + background: var(--tblr-bg-surface-tertiary) linear-gradient(to top left, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); position: relative; } .screenshot-card { padding: 64px; + border-radius: 16px; + box-shadow: + 0 1px 1px 0 rgba(0, 0, 0, 0.02), + 0 8px 24px -4px rgba(0, 0, 0, 0.04), + 0 24px 40px -8px rgba(0, 0, 0, 0.1); } .screenshot-logo { @@ -44,7 +49,7 @@ import { site } from '@shared/lib/site' -
+
{ site.themeColors.map((color) => ( diff --git a/preview/pages/scroll-spy.astro b/preview/pages/scroll-spy.astro index 637e9236c..bdb57d676 100644 --- a/preview/pages/scroll-spy.astro +++ b/preview/pages/scroll-spy.astro @@ -63,7 +63,7 @@ const articles: [string, string[]][] = [ ] --- - +
diff --git a/preview/pages/settings.astro b/preview/pages/settings.astro index 330ad1956..1124df001 100644 --- a/preview/pages/settings.astro +++ b/preview/pages/settings.astro @@ -15,9 +15,9 @@ const person = requireIndex(people, 0)
-

My account

+

My Account

- Profile details + Profile Details
@@ -25,10 +25,10 @@ const person = requireIndex(people, 0)
- Business profile + Business Profile
- + diff --git a/preview/pages/sortable.astro b/preview/pages/sortable.astro index 64e40e9ec..5612baca5 100644 --- a/preview/pages/sortable.astro +++ b/preview/pages/sortable.astro @@ -19,12 +19,14 @@ import ListGroupItem from '@ui/ListGroupItem.astro' Drag to reorder items within a single list.
- - Element A - Element B - Element C - Element D - + + + Element A + Element B + Element C + Element D + +
diff --git a/preview/pages/stars-rating.astro b/preview/pages/stars-rating.astro index 91efc223b..3d4f85be4 100644 --- a/preview/pages/stars-rating.astro +++ b/preview/pages/stars-rating.astro @@ -8,7 +8,7 @@ import CardSubtitle from '@ui/CardSubtitle.astro' import DocsLink from '@ui/DocsLink.astro' --- - +
diff --git a/preview/pages/tasks-list.astro b/preview/pages/tasks-list.astro index bbfee4229..00cb12423 100644 --- a/preview/pages/tasks-list.astro +++ b/preview/pages/tasks-list.astro @@ -34,7 +34,7 @@ const peopleList = people const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)) --- - +
{ @@ -43,7 +43,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
{section.name} -
@@ -54,8 +54,8 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) Name - Assigned to - Due date + Assigned To + Due Date Priority Actions @@ -91,7 +91,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) {task['due-date']} ) : ( - — + — )} {task.priority === 'High' ? : task.priority === 'Medium' ? : task.priority === 'Low' ? : } @@ -122,7 +122,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) - + No. - Invoice subject + Invoice Subject Client VAT No. Created diff --git a/shared/components/cards/MostVisitedPages.astro b/shared/components/cards/MostVisitedPages.astro index 7f9541954..04710c440 100644 --- a/shared/components/cards/MostVisitedPages.astro +++ b/shared/components/cards/MostVisitedPages.astro @@ -8,7 +8,7 @@ import { formatNumber } from '@shared/lib/string-format'
- Most visited pages + Most Visited Pages
diff --git a/shared/components/cards/PricingCard.astro b/shared/components/cards/PricingCard.astro index e352f48aa..dd75e9ccb 100644 --- a/shared/components/cards/PricingCard.astro +++ b/shared/components/cards/PricingCard.astro @@ -1,20 +1,19 @@ --- // Feature names are a fixed list; the `features` string is split per-character into a 1/0 availability mask. import Icon from '@ui/Icon.astro' -import Subheader from '@ui/Subheader.astro' interface Props { price?: string users?: string | number category?: string features?: string - /** ribbon color of the featured plan, e.g. "green"; the button is always primary */ + /** ribbon + button color, e.g. "green" */ featuredColor?: string } const { price = '79', users = 10, category = 'Enterprise', features = '1000', featuredColor } = Astro.props -const featureNames = ['Sharing tools', 'Design tools', 'Private messages', 'Twitter API'] +const featureNames = ['Sharing Tools', 'Design Tools', 'Private Messages', 'Twitter API'] const availableFeatures = features.split('') --- @@ -28,9 +27,9 @@ const availableFeatures = features.split('') }
- {category} +
{category}
-
${price}
+
${price}
  • {users} Users
    • @@ -45,7 +44,7 @@ const availableFeatures = features.split('')
- Choose plan + Choose plan
diff --git a/shared/components/cards/PricingPlan.astro b/shared/components/cards/PricingPlan.astro index 3b8e885ad..20bf4c2ed 100644 --- a/shared/components/cards/PricingPlan.astro +++ b/shared/components/cards/PricingPlan.astro @@ -9,29 +9,29 @@ import Button from '@ui/Button.astro'
Professional
$199
-
/ month
+
/ month
  • -
    Unlimited target audience
    +
    Unlimited Target Audience
  • -
    1 user account
    +
    1 User Account
  • -
    100+ video tutorials
    +
    100+ Video Tuts
  • -
    Public displays
    +
    Public Displays
-

This plan is perfect for small businesses and startups. It includes all the features you need to get started.

+

This plan is perfect for small businesses and startups. It includes all the features you need to get started.

-
diff --git a/shared/components/cards/ProfileContact.astro b/shared/components/cards/ProfileContact.astro index 90b1a8526..9679075bc 100644 --- a/shared/components/cards/ProfileContact.astro +++ b/shared/components/cards/ProfileContact.astro @@ -20,7 +20,7 @@ const color = 'yellow'
-
+
diff --git a/shared/components/cards/RecentActivity.astro b/shared/components/cards/RecentActivity.astro index a3e4f7442..523dcc274 100644 --- a/shared/components/cards/RecentActivity.astro +++ b/shared/components/cards/RecentActivity.astro @@ -7,14 +7,14 @@ import crmDashboard from '@data/crm-dashboard.json' const activity = crmDashboard.recent_activity --- -
+
{activity.title} {activity.view_all_text}
-
+
{ activity.items.map((item) => ( diff --git a/shared/components/cards/SmallStats.astro b/shared/components/cards/SmallStats.astro index 2eb635f1d..528273c84 100644 --- a/shared/components/cards/SmallStats.astro +++ b/shared/components/cards/SmallStats.astro @@ -25,7 +25,7 @@ interface Props { const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor } = Astro.props const chartColor = color ?? 'primary' -const avatarClass = [color ? (lt ? `bg-${color}-lt` : `bg-${color} text-${color}-fg`) : '', 'avatar', 'avatar-square'] +const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square'] ---
diff --git a/shared/components/cards/SocialTraffic.astro b/shared/components/cards/SocialTraffic.astro index 2db74e7b1..365d2c07d 100644 --- a/shared/components/cards/SocialTraffic.astro +++ b/shared/components/cards/SocialTraffic.astro @@ -10,7 +10,7 @@ const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest
- Social media traffic + Social Media Traffic
diff --git a/shared/components/cards/Sponsor.astro b/shared/components/cards/Sponsor.astro index fda492ede..31e68e85e 100644 --- a/shared/components/cards/Sponsor.astro +++ b/shared/components/cards/Sponsor.astro @@ -9,7 +9,7 @@ interface Props { const { rtl = false } = Astro.props --- - +
-
Help Tabler grow and thrive
+
Help Tabler Grow and Thrive

Sponsor Tabler and help us make a difference!

diff --git a/shared/components/cards/StorageUsage.astro b/shared/components/cards/StorageUsage.astro index a88c29ecb..ad1de4a23 100644 --- a/shared/components/cards/StorageUsage.astro +++ b/shared/components/cards/StorageUsage.astro @@ -11,23 +11,23 @@
-
- +
+ Regular 3520MB
-
- +
+ System 1520MB
-
- +
+ Shared 720MB
-
- +
+ Free 2240MB
diff --git a/shared/components/cards/TasksDue.astro b/shared/components/cards/TasksDue.astro index 591e4279c..6fff3b172 100644 --- a/shared/components/cards/TasksDue.astro +++ b/shared/components/cards/TasksDue.astro @@ -1,5 +1,4 @@ --- -import Badge from '@ui/Badge.astro' import CardActions from '@ui/CardActions.astro' import Icon from '@ui/Icon.astro' import ListGroup from '@ui/ListGroup.astro' @@ -14,11 +13,11 @@ const tasks = crmDashboard.tasks_due
{tasks.title} - + {tasks.badge}
diff --git a/shared/components/cards/TeamLeaderboard.astro b/shared/components/cards/TeamLeaderboard.astro index 68b25c423..a80579c2d 100644 --- a/shared/components/cards/TeamLeaderboard.astro +++ b/shared/components/cards/TeamLeaderboard.astro @@ -24,7 +24,7 @@ const leaderboard = crmDashboard.leaderboard leaderboard.items.map((item, index) => (
-
{index + 1}
+
{index + 1}
diff --git a/shared/components/cards/TopDeals.astro b/shared/components/cards/TopDeals.astro index 843304b85..d13f79636 100644 --- a/shared/components/cards/TopDeals.astro +++ b/shared/components/cards/TopDeals.astro @@ -14,11 +14,11 @@ const deals = crmDashboard.top_deals Top deals diff --git a/shared/components/cards/Weather.astro b/shared/components/cards/Weather.astro index c25e46b05..392c70693 100644 --- a/shared/components/cards/Weather.astro +++ b/shared/components/cards/Weather.astro @@ -30,7 +30,7 @@ const { city = 'Warsaw', temperature = 20, color = 'blue', icon = 'cloud-rain',
-
{temperature}°
+
{temperature}°
diff --git a/shared/components/cards/Welcome.astro b/shared/components/cards/Welcome.astro index 60b75d855..7d9dc4ff4 100644 --- a/shared/components/cards/Welcome.astro +++ b/shared/components/cards/Welcome.astro @@ -13,7 +13,7 @@ import Progress from '@ui/Progress.astro'
- Today's sales + Today's Sales
6,782
@@ -24,7 +24,7 @@ import Progress from '@ui/Progress.astro'
- Growth rate + Growth Rate
78,4%
@@ -39,20 +39,33 @@ import Progress from '@ui/Progress.astro' You are winner!

You've been selected as our lucky winner for completing 100 orders this month! Click below to claim your exclusive prize and enjoy the benefits!

-
diff --git a/shared/components/cards/charts/ActiveUsers2.astro b/shared/components/cards/charts/ActiveUsers2.astro index 2d458dcf9..1dcd1e411 100644 --- a/shared/components/cards/charts/ActiveUsers2.astro +++ b/shared/components/cards/charts/ActiveUsers2.astro @@ -6,7 +6,7 @@ import Trending from '@ui/Trending.astro'
- Active users + Active Users
25,782
diff --git a/shared/components/cards/charts/MrrOverview.astro b/shared/components/cards/charts/MrrOverview.astro index d11d49e38..d0d03622e 100644 --- a/shared/components/cards/charts/MrrOverview.astro +++ b/shared/components/cards/charts/MrrOverview.astro @@ -1,5 +1,4 @@ --- -import Legend from '@ui/Legend.astro' import Subheader from '@ui/Subheader.astro' import Chart from '@shared/components/demo/Chart.astro' --- @@ -16,8 +15,14 @@ import Chart from '@shared/components/demo/Chart.astro'
- This year - Last year +
+ + This year +
+
+ + Last year +
diff --git a/shared/components/cards/charts/PipelineFunnel.astro b/shared/components/cards/charts/PipelineFunnel.astro index 1c639730f..480b4420d 100644 --- a/shared/components/cards/charts/PipelineFunnel.astro +++ b/shared/components/cards/charts/PipelineFunnel.astro @@ -22,7 +22,7 @@ const funnel = crmDashboard.pipeline_funnel
-
{item.count}
+
{item.count}
{item.amount}
diff --git a/shared/components/cards/charts/TotalUsers.astro b/shared/components/cards/charts/TotalUsers.astro index 68857b48d..98b497e38 100644 --- a/shared/components/cards/charts/TotalUsers.astro +++ b/shared/components/cards/charts/TotalUsers.astro @@ -6,7 +6,7 @@ import Trending from '@ui/Trending.astro'
- Total users + Total Users
75,782
diff --git a/shared/components/cards/form/Payment.astro b/shared/components/cards/form/Payment.astro index 61f96da28..933fc6fe0 100644 --- a/shared/components/cards/form/Payment.astro +++ b/shared/components/cards/form/Payment.astro @@ -9,16 +9,16 @@ import FormGroup from '@ui/FormGroup.astro'
- Payment method + Payment Method All transactions are secure and encrypted - +
- + Enter your 16-digit number. @@ -67,7 +67,7 @@ import FormGroup from '@ui/FormGroup.astro'
- Billing address + Billing Address The billing address associated with your payment method
diff --git a/shared/components/cards/music/TracksList.astro b/shared/components/cards/music/TracksList.astro index 79b102c9b..bd03b11bb 100644 --- a/shared/components/cards/music/TracksList.astro +++ b/shared/components/cards/music/TracksList.astro @@ -17,7 +17,7 @@ const items = tracks.slice(0, 12) items.map((track, index) => (
-
{index + 1}
+
{index + 1}
{track.name}
@@ -28,7 +28,7 @@ const items = tracks.slice(0, 12)
{millisecondsToMinutes(track.duration_ms)}
+ Top Pages + +
diff --git a/shared/components/demo/DropdownMenuAll.astro b/shared/components/demo/DropdownMenuAll.astro index d5f1a6695..82504f37e 100644 --- a/shared/components/demo/DropdownMenuAll.astro +++ b/shared/components/demo/DropdownMenuAll.astro @@ -40,7 +40,7 @@ const peopleItems = people.slice(0, 3) { peopleItems.map((person) => ( )) } diff --git a/shared/components/demo/MapVector.astro b/shared/components/demo/MapVector.astro index cf522e3c5..aed8de681 100644 --- a/shared/components/demo/MapVector.astro +++ b/shared/components/demo/MapVector.astro @@ -53,7 +53,7 @@ const mapOptions = data regionStyle: { initial: { fill: 'var(--tblr-bg-surface-secondary)', - stroke: data.filled ? 'var(--tblr-bg-surface)' : 'var(--tblr-border-color)', + stroke: data.filled ? '#fff' : 'var(--tblr-border-color)', strokeWidth: data.filled ? 1 : 2, }, }, @@ -68,7 +68,7 @@ const mapOptions = data markerStyle: { initial: { r: 4, - stroke: 'var(--tblr-bg-surface)', + stroke: '#fff', opacity: 1, strokeWidth: 3, strokeOpacity: 0.5, @@ -85,7 +85,7 @@ const mapOptions = data lineStyle: { strokeDasharray: '4 4', animation: true, - stroke: 'color-mix(in srgb, var(--tblr-secondary) 75%, transparent)', + stroke: 'rgba(98, 105, 118, .75)', strokeWidth: 0.5, }, } diff --git a/shared/components/demo/Table.astro b/shared/components/demo/Table.astro index 9d6200bff..fb5d658a5 100644 --- a/shared/components/demo/Table.astro +++ b/shared/components/demo/Table.astro @@ -48,8 +48,8 @@ const tableClasses = ['table', 'table-vcenter', mobile && 'table-mobile-md', car {avatars ? (
Page
-
- +
+
{person.full_name}
diff --git a/shared/components/demo/ThemeSettings.astro b/shared/components/demo/ThemeSettings.astro index b1992a0df..e8e313ab0 100644 --- a/shared/components/demo/ThemeSettings.astro +++ b/shared/components/demo/ThemeSettings.astro @@ -44,7 +44,7 @@ const presetSvg = (values: Partial>) => { } /** Marks drawn inside an accent-colored navigation shape. */ -const onAccent = 'color-mix(in srgb, var(--tblr-primary-fg) 70%, transparent)' +const onAccent = 'rgba(255, 255, 255, 0.7)' /** A content card: the page's own surface with a border, lines inside. */ const card = (x: number, y: number, w: number, h: number) => `` + lines(x + 6, y + 7, [w * 0.6, w * 0.8, w * 0.4].map(Math.round), border, 9) /** A scrollbar thumb on the right edge, at the top or scrolled down. */ diff --git a/shared/components/demo/Timeline.astro b/shared/components/demo/Timeline.astro index 9de742f02..56bd6f85f 100644 --- a/shared/components/demo/Timeline.astro +++ b/shared/components/demo/Timeline.astro @@ -33,7 +33,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
2 hrs ago
-

+3 new products were added!

+

+3 New Products were added!

Congratulations!

@@ -53,7 +53,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
1 day ago
-

+290 page likes

+

+290 Page Likes

This is great, keep it up!

@@ -63,7 +63,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
2 days ago
-

+3 friend requests

+

+3 Friend Requests

{avatarPeople.map((person) => )}
diff --git a/shared/components/demo/Toast.astro b/shared/components/demo/Toast.astro index 2122ad07f..620406063 100644 --- a/shared/components/demo/Toast.astro +++ b/shared/components/demo/Toast.astro @@ -18,8 +18,8 @@ const person = requireIndex(people, 2) ---