From da79879a7d96d28593a8702c374bc1c8ffae353f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 17 Sep 2026 00:01:33 +0200 Subject: [PATCH] Improve accordion docs examples and button line height (#3076) --- .changeset/accordion-button-line-height.md | 5 ++ .changeset/docs-accordion-bg-surface.md | 5 ++ core/scss/_variables.scss | 1 + core/scss/ui/_accordion.scss | 2 + docs/content/ui/components/accordion.mdx | 60 +++++++++++----------- 5 files changed, 43 insertions(+), 30 deletions(-) create mode 100644 .changeset/accordion-button-line-height.md create mode 100644 .changeset/docs-accordion-bg-surface.md diff --git a/.changeset/accordion-button-line-height.md b/.changeset/accordion-button-line-height.md new file mode 100644 index 000000000..953369093 --- /dev/null +++ b/.changeset/accordion-button-line-height.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated `.accordion-button` line height to `1.25rem` via the `--tblr-accordion-btn-line-height` variable. diff --git a/.changeset/docs-accordion-bg-surface.md b/.changeset/docs-accordion-bg-surface.md new file mode 100644 index 000000000..1d306acd9 --- /dev/null +++ b/.changeset/docs-accordion-bg-surface.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +Updated accordion docs examples to use `.bg-surface` on each `.accordion-item`. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index f24b85594..c6b44fad2 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1331,6 +1331,7 @@ $accordion-body-padding-y: $accordion-padding-y !default; $accordion-body-padding-x: $accordion-padding-x !default; $accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-line-height: 1.25rem !default; $accordion-button-bg: transparent !default; $accordion-button-active-color: inherit !default; $accordion-btn-gap: 0.75rem !default; diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss index 148d44e98..63a3a73a5 100644 --- a/core/scss/ui/_accordion.scss +++ b/core/scss/ui/_accordion.scss @@ -14,6 +14,7 @@ --accordion-btn-padding-x: var(--accordion-padding-x); --accordion-btn-padding-y: #{$accordion-button-padding-y}; --accordion-btn-font-weight: var(--font-weight-medium); + --accordion-btn-line-height: #{$accordion-button-line-height}; --accordion-body-padding-x: var(--accordion-padding-x); --accordion-body-padding-y: #{$accordion-body-padding-y}; --accordion-btn-gap: #{$accordion-btn-gap}; @@ -34,6 +35,7 @@ padding: var(--accordion-btn-padding-y) var(--accordion-padding-x); font-size: inherit; font-weight: var(--accordion-btn-font-weight); + line-height: var(--accordion-btn-line-height); color: inherit; text-align: inherit; background-color: transparent; diff --git a/docs/content/ui/components/accordion.mdx b/docs/content/ui/components/accordion.mdx index 976ed18e2..6bef0f4d0 100644 --- a/docs/content/ui/components/accordion.mdx +++ b/docs/content/ui/components/accordion.mdx @@ -44,26 +44,26 @@ This preview shows the base structure with one expanded section.
-
-

+
+

-

+

Update profile fields, contact details, and team role settings in this section.
-
-

+
+

-

+

Configure password policy, two-factor requirements, and active device sessions.
-
-

+
+

-

+

Choose which updates to receive by email, browser push, and weekly digest. You can set separate rules for account alerts and product announcements.
@@ -79,10 +79,10 @@ Use `.accordion-button-toggle-plus` to hide the first SVG path when expanded. Th
-
-

+
+

-

+

View invoices, payment method status, and tax details.
@@ -96,13 +96,13 @@ Use `.accordion-button-icon` when a row needs a small icon before the label. The
-
-

+
+

-

+

Manage member names, avatars, and workspace profile details.
@@ -116,18 +116,18 @@ Use `.accordion-flush` to remove side borders and border radius. The first and l
-
-

+
+

-

+

Generate tokens and control access scopes.
-
-

+
+

-

+

Manage delivery URLs, retry policy, and event subscriptions.
@@ -143,18 +143,18 @@ Use `.accordion-tabs` to add a gap between items and keep full borders around ea
-
-

+
+

-

+

Configure workspace name, slug, and timezone.
-
-

+
+

-

+

Control email, push, and digest notification preferences.
@@ -168,10 +168,10 @@ Use `.accordion-inverted` to move the toggle to the start of the button row. Thi
-
-

+
+

-

+

Set default policy, invite flow, and sign-in restrictions.