diff --git a/.agents/agents/v2-policy-reviewer.md b/.agents/agents/v2-policy-reviewer.md index fb3e3965a..038276013 100644 --- a/.agents/agents/v2-policy-reviewer.md +++ b/.agents/agents/v2-policy-reviewer.md @@ -41,7 +41,7 @@ sits in an exempt file. | 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 | +| Badge composition | `\.badge-subtle\b` | `.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` | diff --git a/.agents/skills/design-system/SKILL.md b/.agents/skills/design-system/SKILL.md index 0996d107a..8c151dd99 100644 --- a/.agents/skills/design-system/SKILL.md +++ b/.agents/skills/design-system/SKILL.md @@ -352,7 +352,6 @@ Places where the code contradicts its own rules, found on 2026-09-08 and decided | 9 | `icon-md` 40px and `icon-lg` 56px drop the stroke to 1; `icon-sm` keeps 1.5. | `ui/_icons.scss` | **Intended.** Rule: stroke 1.5 up to 24px, stroke 1 from 40px. Recorded in section 8. | closed, exception | | 10 | Table hover uses `--emphasis-color` at 7.5% while every other hover uses `$hover-bg` (`--secondary` at 8%). | `_variables.scss` table block | **Fix in 2.0.** `$table-hover-bg: $hover-bg`. Short section 5 entry. | planned 2.0 | | 13 | Demo pages nest example cards inside a section card (`SectionCard` > `SectionCardBody` > `Card`), and `cards.astro` documents "Cards inside card"; rule 12 forbids a card in a card body. | `preview/pages/cards.astro` and every `SectionCard` page | **Intended.** The demo section wrapper is exempt from rule 12: it frames the examples, it is not product markup. The "cards inside card" demo stays. | closed, exception | -| 14 | `badge-outline` is forbidden by `.agents/rules/main.mdc` but shipped by `core/scss/ui/_badges.scss` and shown as the "Outline" demo on `badges.astro`. | `_badges.scss`, `badges.astro`, `job-listing.astro` | **Fix in 2.0.** The class is removed: it duplicates the soft `-lt` variant. Deprecate, section 5 entry, upgrade-guide line. | tracked, #3011 | | 15 | Brand colour as UI chrome: the sponsor heart is `text-pink` inside `.btn` (`NavbarSide.astro`, `Sponsor.astro`), the marketing footer uses filled `btn-facebook` / `btn-x` / `btn-instagram` / `btn-linkedin`, and `SmallStats color="facebook"` fills a stat avatar. | `shared/components/**`, `shared/layouts/MarketingLayout.astro` | **Intended, for the brand only.** The sponsor heart and the social follow buttons keep their brand colour; everything else obeys rule 21. The one real violation was a decorative icon at rest, the favourite star in `ProfileContact`, which now inherits. A toggle's on-state (`.switch-icon-b`) is a separate, allowed pattern: it carries a state colour, not decoration. | closed, exception | | 16 | Scroll containers carry an inline height: `ActivityCard` `height: 28rem`, `UsersListHeaders` `max-height: 35rem`, `NavbarSideApps` `max-height: 50vh`. | `shared/components/cards/ActivityCard.astro`, `UsersListHeaders.astro`, `navbar/NavbarSideApps.astro` | **Intended.** A scroll container's height is a per-instance layout choice, not a scale value, so it stays inline. Rule 18 records the exception. | closed, exception | diff --git a/.changeset/remove-badge-outline.md b/.changeset/remove-badge-outline.md new file mode 100644 index 000000000..7611d9709 --- /dev/null +++ b/.changeset/remove-badge-outline.md @@ -0,0 +1,7 @@ +--- +"@tabler/core": major +"@tabler/preview": patch +"@tabler/docs": patch +--- + +Removed the `.badge-outline` class; use a soft `.badge` with `.bg-{color}-lt` instead. diff --git a/BOOTSTRAP-V6-MIGRATION.md b/BOOTSTRAP-V6-MIGRATION.md index 32534fe3e..ac2aef53c 100644 --- a/BOOTSTRAP-V6-MIGRATION.md +++ b/BOOTSTRAP-V6-MIGRATION.md @@ -480,6 +480,10 @@ Decided: 9. Cascade `@layer` lands as phase 3b, one PR after the token scales: flat Bootstrap v6 layer names (no `tabler.*` nesting), `:root` tokens inside the `root` layer, utilities without `!important` and `$enable-important-utilities` removed (decided 2026-09-08). +14. `.badge-outline` is removed in 2.0, not aliased (#3011, decided 2026-09-08). It duplicated the + soft `.badge.bg-{color}-lt` variant without a role of its own, and `.agents/rules/main.mdc` + already forbade it. This is a deliberate exception to "every 1.x class stays": upgrade-guide + line, no replacement class — markup moves to `.badge.bg-{color}-lt`. Open: diff --git a/UPGRADE.md b/UPGRADE.md index 91cddbdcb..9f0ba115a 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,5 +1,25 @@ -# Upgrading to Tabler 1.5 +# Upgrading Tabler -The upgrade guide lives in the documentation: [Upgrade to 1.5](https://docs.tabler.io/ui/getting-started/upgrade/). +## Upgrading to Tabler 2.0 + +Tabler 2.0 adopts Bootstrap v6's architecture while keeping the Bootstrap v5 class +names and public API. The full guide is written phase by phase on `v2-dev` and will +move into the documentation before the release. The plan and the per-phase breaking +changes live in [`BOOTSTRAP-V6-MIGRATION.md`](BOOTSTRAP-V6-MIGRATION.md). + +### Removed classes + +| Removed | Use instead | +| --- | --- | +| `.badge-outline` | A soft `.badge` with a `.bg-{color}-lt` fill, for example ``. It duplicated the soft variant without a role of its own. | + +```diff +- Label ++ Label +``` + +## Upgrading to Tabler 1.5 + +The 1.4 to 1.5 upgrade guide lives in the documentation: [Upgrade to 1.5](https://docs.tabler.io/ui/getting-started/upgrade/). It covers every breaking change between 1.4 and 1.5, with a before and after example for each one. diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss index 3c0ba3cba..5c141c626 100644 --- a/core/scss/ui/_badges.scss +++ b/core/scss/ui/_badges.scss @@ -66,13 +66,7 @@ $badge-tokens: defaults( @include border-radius(var(--border-radius-pill)); } -// -// Outline badge -// -.badge-outline { - background-color: transparent; - border: var(--border-width) var(--border-style) currentColor; -} +// `.badge-outline` was removed in 2.0 — use a soft `.badge.bg-{color}-lt` badge instead. // // Pill badge diff --git a/docs/content/ui/components/badge.mdx b/docs/content/ui/components/badge.mdx index 46b5d0df9..31702f825 100644 --- a/docs/content/ui/components/badge.mdx +++ b/docs/content/ui/components/badge.mdx @@ -1,7 +1,7 @@ --- title: Badge -summary: A badge is a small label for a count, a status or a tag. It comes in colors, light and outline styles, pills, dots and notification badges. -description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context. +summary: A badge is a small label for a count, a status or a tag. It comes in colors, light styles, pills, dots and notification badges. +description: Add badges to show counts, labels, or statuses. Use colors, pill styles, links, and notification dots to add context. related: [/ui/components/status, /ui/components/tag] source: core/scss/ui/_badges.scss css-vars: badge @@ -18,9 +18,6 @@ classnames: desc: Positions the badge over the corner of its parent - class: badge-list desc: Wrapper that spaces several badges in a row - style: - - class: badge-outline - desc: Transparent fill with a colored border modifier: - class: badge-pill desc: Fully rounded ends @@ -189,19 +186,6 @@ Use `.badge-sm` or `.badge-lg` to change the size. The examples above use the de - -## Outline badges - -Use `.badge-outline` for a badge with a border and no fill. Add a `text-*` class to set its color - the border follows the text. - - - - {colors.map(([name]) => ( - {name} - ))} - - - ## Dot badges Use `.badge-dot` for a small dot with no text. It marks a state next to a label, so always keep that label readable next to it. diff --git a/preview/pages/badges.astro b/preview/pages/badges.astro index 9628b345e..14e35cf1b 100644 --- a/preview/pages/badges.astro +++ b/preview/pages/badges.astro @@ -185,17 +185,6 @@ const sizes = ['sm', 'md', 'lg'] -
- - - Outline - A colored border with a transparent background. - - {colors.map((color) => {ucFirst(color)})} - - - -
diff --git a/preview/pages/job-listing.astro b/preview/pages/job-listing.astro index 3c3ededdd..3ce934345 100644 --- a/preview/pages/job-listing.astro +++ b/preview/pages/job-listing.astro @@ -132,7 +132,7 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
{job.tags.map((tag) => ( - + {tag} ))}