From a508bb6c3eecb872407f8f90e4195fd8fac7b5fd Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Sat, 1 Aug 2026 19:06:39 +0200
Subject: [PATCH] Extract hardcoded rem values into SCSS variables (#2745)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 .changeset/clean-up-hardcoded-rem-values.md |   5 +
 core/scss/_variables.scss                   | 240 ++++++++++++++++++++
 core/scss/ui/_accordion.scss                |  10 +-
 core/scss/ui/_alerts.scss                   |  14 +-
 core/scss/ui/_avatars.scss                  |  18 +-
 core/scss/ui/_badges.scss                   |   9 +-
 core/scss/ui/_buttons.scss                  |   9 +-
 core/scss/ui/_calendars.scss                |  15 +-
 core/scss/ui/_cards.scss                    |  58 +++--
 core/scss/ui/_carousel.scss                 |   4 +-
 core/scss/ui/_charts.scss                   |  43 +++-
 core/scss/ui/_chat.scss                     |   9 +-
 core/scss/ui/_datagrid.scss                 |   3 +-
 core/scss/ui/_dropdowns.scss                |  24 +-
 core/scss/ui/_empty.scss                    |  30 ++-
 core/scss/ui/_forms.scss                    |  38 +++-
 core/scss/ui/_grid.scss                     |  13 +-
 core/scss/ui/_icons.scss                    |  11 +-
 core/scss/ui/_lists.scss                    |   4 +-
 core/scss/ui/_markdown.scss                 |  13 +-
 core/scss/ui/_modals.scss                   |   9 +-
 core/scss/ui/_nav.scss                      |  12 +-
 core/scss/ui/_offcanvas.scss                |   8 +-
 core/scss/ui/_pagination.scss               |  16 +-
 core/scss/ui/_patterns.scss                 |  38 ++--
 core/scss/ui/_progress.scss                 |  23 +-
 core/scss/ui/_ribbons.scss                  |  53 +++--
 core/scss/ui/_segmented.scss                |  39 ++--
 core/scss/ui/_stars.scss                    |   4 +-
 core/scss/ui/_status.scss                   |  13 +-
 core/scss/ui/_steps.scss                    |  20 +-
 core/scss/ui/_tables.scss                   |   9 +-
 core/scss/ui/_tags.scss                     |  51 +++--
 core/scss/ui/_toolbar.scss                  |   6 +-
 core/scss/ui/_tracking.scss                 |   3 +-
 core/scss/ui/_type.scss                     |  32 ++-
 core/scss/ui/forms/_form-check.scss         |  34 ++-
 core/scss/ui/forms/_form-colorinput.scss    |   5 +-
 core/scss/ui/forms/_form-icon.scss          |   9 +-
 core/scss/ui/forms/_form-imagecheck.scss    |   8 +-
 core/scss/ui/forms/_form-selectgroup.scss   |   6 +-
 core/scss/ui/typo/_hr.scss                  |  16 +-
 42 files changed, 714 insertions(+), 270 deletions(-)
 create mode 100644 .changeset/clean-up-hardcoded-rem-values.md

diff --git a/.changeset/clean-up-hardcoded-rem-values.md b/.changeset/clean-up-hardcoded-rem-values.md
new file mode 100644
index 000000000..546f5697c
--- /dev/null
+++ b/.changeset/clean-up-hardcoded-rem-values.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Replaced hardcoded `rem` and `px` spacing, sizing, and offset values with SCSS variables across icon, avatar, badge, button, card, alert, empty state, ribbon, status, dropdown, form, nav, pagination, progress, steps, and tag components for easier theme customization.
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index af8034f27..63545f603 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -394,6 +394,11 @@ $font-family-code: var(--#{$prefix}font-monospace) !default;
 // Icons
 $icon-stroke-width: 1.5 !default;
 $icon-size: 1.25rem !default;
+$icon-inline-size: 1rem !default;
+$icon-inline-vertical-align: -0.2rem !default;
+$icon-sm-size: 1rem !default;
+$icon-md-size: 2.5rem !default;
+$icon-lg-size: 3.5rem !default;
 
 $font-size-75: 0.75rem !default;
 $font-size-100: 0.875rem !default;
@@ -829,6 +834,10 @@ $avatar-status-size: 0.75rem !default;
 $avatar-font-size: 1rem !default;
 $avatar-icon-size: 1.5rem !default;
 $avatar-brand-size: 1.25rem !default;
+$avatar-upload-icon-size: 1.5rem !default;
+$avatar-upload-text-margin-top: 0.25rem !default;
+$avatar-cover-ring-width: 0.25rem !default;
+$avatar-brand-offset: -2px !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
   'xxs': (
@@ -1065,6 +1074,10 @@ $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
 $alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
 $alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
 $alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-heading-margin-bottom: 0.25rem !default;
+$alert-icon-size: 1.25rem !default;
+$alert-padding-inline-end: 3rem !default;
+$alert-gap: 1rem !default;
 
 // Breadcrumb
 $breadcrumb-font-size: null !default;
@@ -1100,6 +1113,10 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default;
 $badge-empty-size: 0.5rem !default;
 $badge-color: var(--#{$prefix}secondary) !default;
 $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
+$badge-gap: 0.25rem !default;
+$badge-padding-x-sm: 0.25rem !default;
+$badge-padding-y-lg: 0.25rem !default;
+$badge-padding-x-lg: 0.5rem !default;
 
 // Buttons + Forms
 $input-btn-border-width: var(--#{$prefix}border-width) !default;
@@ -1151,6 +1168,9 @@ $btn-link-focus-shadow-rgb: to-rgb(color.mix(color-contrast($link-color), $link-
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
 $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$btn-floating-offset: 1rem !default;
+$btn-pill-icon-padding-y: 0.375rem !default;
+$btn-pill-icon-padding-x: 15px !default;
 
 $btn-transition:
   color 0.15s ease-in-out,
@@ -1267,11 +1287,39 @@ $card-stamp-opacity: 0.2 !default;
 $card-ribbon-margin: 0.25rem !default;
 $card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
 $card-ribbon-font-size: $h6-font-size !default;
+$card-ribbon-icon-size: $icon-size !default;
 
 $card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 
 $cards-grid-gap: var(--#{$prefix}page-padding) !default;
 $cards-grid-breakpoint: lg !default;
+$card-stamp-size: 7rem !default;
+$card-stamp-size-lg: 13rem !default;
+$card-stacked-offset: 0.25rem !default;
+$card-actions-gutter: 0.5rem !default;
+$card-header-pills-margin: 0.5rem !default;
+$card-progress-height: 0.25rem !default;
+$card-title-margin-bottom: 1rem !default;
+$card-title-line-height: 1.5rem !default;
+$card-subtitle-margin-start: 0.25rem !default;
+$card-body-padding-sm: 1rem !default;
+$card-body-padding-md: 2.5rem !default;
+$card-body-padding-lg: 2rem !default;
+$card-body-padding-lg-up: 4rem !default;
+$card-options-top: 1.5rem !default;
+$card-options-inset: 0.75rem !default;
+$card-options-link-min-width: 1rem !default;
+$card-options-link-margin-start: 0.25rem !default;
+$card-avatar-height: 3.5rem !default;
+$card-avatar-ring-width: 0.25rem !default;
+$ribbon-offset: 0.75rem !default;
+$ribbon-padding-y: 0.25rem !default;
+$ribbon-padding-x: 0.75rem !default;
+$ribbon-min-size: 2rem !default;
+$ribbon-top-width: 2rem !default;
+$ribbon-top-padding-y: 0.5rem !default;
+$ribbon-bookmark-border-size: 1rem !default;
+$ribbon-bookmark-notch-width: 0.5rem !default;
 
 // Accordion
 $accordion-padding-y: 1rem !default;
@@ -1282,6 +1330,7 @@ $accordion-border-width: var(--#{$prefix}border-width) !default;
 $accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
 $accordion-border-radius: var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+$accordion-btn-toggle-width: $icon-size !default;
 
 $accordion-body-padding-y: $accordion-padding-y !default;
 $accordion-body-padding-x: $accordion-padding-x !default;
@@ -1306,6 +1355,9 @@ $accordion-icon-transform: rotate(-180deg) !default;
 
 $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
 $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$accordion-btn-gap: 0.75rem !default;
+$accordion-header-gap: 1rem !default;
+$accordion-tabs-gap: 0.75rem !default;
 
 // Carousel
 
@@ -1342,6 +1394,7 @@ $carousel-transition: transform $carousel-transition-duration ease-in-out !defau
 $carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
 $carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
 $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+$carousel-indicators-vertical-margin-inline-end: 1rem !default;
 
 // Close
 $btn-close-width: 1em !default;
@@ -1361,6 +1414,18 @@ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; //
 // Datagrid
 $datagrid-padding: 1.5rem !default;
 $datagrid-item-width: 15rem !default;
+$datagrid-title-margin-bottom: 0.25rem !default;
+
+// Empty
+$empty-padding: 1rem !default;
+$empty-padding-md: 3rem !default;
+$empty-icon-size: 3rem !default;
+$empty-icon-margin-bottom: 1rem !default;
+$empty-img-margin-bottom: 2rem !default;
+$empty-header-margin-bottom: 1rem !default;
+$empty-header-font-size: 4rem !default;
+$empty-title-margin-bottom: 0.5rem !default;
+$empty-action-margin-top: 1.5rem !default;
 
 // Dropdown
 $dropdown-min-width: 11rem !default;
@@ -1395,6 +1460,13 @@ $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x
 
 $dropdown-max-width: 25rem !default;
 $dropdown-scrollable-height: 13rem !default;
+$dropdown-item-gap: 0.5rem !default;
+$dropdown-header-padding-bottom: 0.25rem !default;
+$dropdown-menu-columns-gap: 0.25rem !default;
+$dropdown-arrow-offset: 0.25rem !default;
+$dropdown-arrow-inset: 0.75rem !default;
+$dropdown-dropend-offset: 0.25rem !default;
+$dropdown-menu-card-min-width: 20rem !default;
 
 // Dropdown dark
 $dropdown-dark-color: $gray-300 !default;
@@ -1475,6 +1547,8 @@ $modal-fade-transform: translate(0, -1rem) !default;
 $modal-show-transform: none !default;
 $modal-transition: transform 0.3s ease-out !default;
 $modal-scale-transform: scale(1.02) !default;
+$modal-body-title-margin-bottom: 1rem !default;
+$modal-footer-padding-y: 0.75rem !default;
 
 $modal-status-size: $border-width-wide !default;
 
@@ -1519,6 +1593,10 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $nav-underline-gap: 1rem !default;
 $nav-underline-border-width: 0.125rem !default;
 $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
+$nav-vertical-nested-margin-start: 1.25rem !default;
+$nav-vertical-nested-padding-start: 0.5rem !default;
+$nav-link-toggle-padding-x: 0.25rem !default;
+$nav-link-icon-margin-end: 0.5rem !default;
 
 // Navbar
 $navbar-height: 3.5rem !default;
@@ -1656,16 +1734,35 @@ $pagination-transition:
 
 $pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$pagination-gap: 0.25rem !default;
+$pagination-link-min-width: 2rem !default;
+$page-text-padding-x: 0.5rem !default;
+$page-item-subtitle-margin-bottom: 2px !default;
+$page-item-subtitle-font-size: 12px !default;
 
 // Statuses
 $status-dot-size: 0.5rem !default;
 $status-height: 1.5rem !default;
+$status-icon-size: $icon-size !default;
+$status-padding-y: 0.25rem !default;
+$status-padding-x: 0.75rem !default;
+$status-gap: 0.5rem !default;
+$status-indicator-size: 2.5rem !default;
+$status-circle-size: 0.75rem !default;
 
 // Steps
 $steps-border-width: 2px !default;
 $steps-color: var(--#{$prefix}primary) !default;
 $steps-inactive-color: var(--#{$prefix}border-color) !default;
 $steps-margin: 2rem 0 !default;
+$steps-dot-size: 0.5rem !default;
+$step-item-min-height: 1rem !default;
+$steps-counter-dot-size: 1.5rem !default;
+$steps-vertical-padding-start: 1rem !default;
+$steps-vertical-item-gap: 1rem !default;
+$steps-vertical-connector-gap: 1rem !default;
+$steps-dot-offset: 6px !default;
+$steps-dot-offset-counter: -2px !default;
 
 // Spinner
 $spinner-width: 1.5rem !default;
@@ -1735,6 +1832,8 @@ $table-variants: (
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
 $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
+$table-sort-icon-size: 1rem !default;
+$table-sort-icon-margin-start: 0.25rem !default;
 
 // Toasts
 $toast-max-width: 350px !default;
@@ -1757,6 +1856,7 @@ $toast-header-border-color: $toast-border-color !default;
 $tracking-height: 1.5rem !default;
 $tracking-gap-width: 0.125rem !default;
 $tracking-border-radius: var(--#{$prefix}border-radius) !default;
+$tracking-block-min-width: 0.25rem !default;
 
 // Progress
 $progress-height: 0.5rem !default;
@@ -1768,6 +1868,15 @@ $progress-bar-color: $white !default;
 $progress-bar-bg: var(--#{$prefix}primary) !default;
 $progress-bar-animation-timing: 1s linear infinite !default;
 $progress-bar-transition: width 0.6s ease !default;
+$progress-height-sm: 0.25rem !default;
+$progress-height-lg: 0.75rem !default;
+$progress-height-xl: 1rem !default;
+$progressbg-padding-y: 0.25rem !default;
+$progressbg-padding-x: 0.5rem !default;
+$progressbg-value-padding-start: 2rem !default;
+$progress-separated-ring-width: 2px !default;
+$progress-steps-gap: 0.25rem !default;
+$progress-steps-item-height: 0.25rem !default;
 
 // List Group
 $list-group-color: var(--#{$prefix}body-color) !default;
@@ -1793,6 +1902,7 @@ $list-group-action-color: inherit !default;
 $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
 $list-group-action-active-color: var(--#{$prefix}body-color) !default;
 $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
+$list-group-header-padding-y: 0.5rem !default;
 
 // Forms
 $input-disabled-bg: var(--#{$prefix}bg-forms-disabled) !default;
@@ -2034,6 +2144,136 @@ $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg: $backdrop-bg !default;
 $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
 $offcanvas-border-color: var(--#{$prefix}border-color) !default;
+$offcanvas-narrow-width: 20rem !default;
+
+// Chat
+$chat-bubbles-gap: 1rem !default;
+$chat-bubble-padding: 1rem !default;
+$chat-bubble-title-margin-bottom: 0.25rem !default;
+
+// Toolbar
+$toolbar-gutter: 0.5rem !default;
+
+// Stars
+$stars-gap: 0.25rem !default;
+
+// Tags
+$tag-height: 1.5rem !default;
+$tag-padding-x: 0.5rem !default;
+$tag-gap: 0.5rem !default;
+$tag-close-margin-end: -0.25rem !default;
+$tag-close-margin-start: -0.125rem !default;
+$tag-close-size: 1rem !default;
+$tag-close-font-size: 0.5rem !default;
+$tag-badge-padding-y: 0.125rem !default;
+$tag-badge-padding-x: 0.25rem !default;
+$tag-badge-margin-end: -0.25rem !default;
+$tag-addon-margin-start: -0.25rem !default;
+$tag-icon-margin-end: -0.125rem !default;
+$tag-icon-size: 1rem !default;
+$tag-check-size: 1rem !default;
+
+// Segmented nav
+$nav-segmented-height: 2.5rem !default;
+$nav-segmented-padding: 2px !default;
+$nav-segmented-radius: 6px !default;
+$nav-segmented-gap: 0.25rem !default;
+$nav-segmented-link-gap: 0.25rem !default;
+$nav-segmented-link-padding-x: 0.75rem !default;
+$nav-segmented-link-icon-size: 1.25rem !default;
+$nav-segmented-icon-margin: -0.25rem !default;
+$nav-segmented-height-sm: 2rem !default;
+$nav-segmented-radius-sm: 4px !default;
+$nav-segmented-link-padding-x-sm: 0.5rem !default;
+$nav-segmented-link-gap-sm: 0.25rem !default;
+$nav-segmented-link-icon-size-sm: 1rem !default;
+$nav-segmented-height-lg: 3rem !default;
+$nav-segmented-radius-lg: 8px !default;
+$nav-segmented-link-padding-x-lg: 1rem !default;
+$nav-segmented-link-gap-lg: 0.5rem !default;
+$nav-segmented-link-icon-size-lg: 1.5rem !default;
+
+// Charts
+$chart-min-height: 10rem !default;
+$chart-height-sm: 2.5rem !default;
+$chart-height-lg: 15rem !default;
+$chart-height-square: 5.75rem !default;
+$chart-sparkline-width: 4rem !default;
+$chart-sparkline-height: 2.5rem !default;
+$chart-sparkline-height-sm: 1.5rem !default;
+$chart-sparkline-width-square: 2.5rem !default;
+$chart-sparkline-width-wide: 6rem !default;
+$chart-sparkline-label-icon-size: 1rem !default;
+
+// Patterns
+$pattern-size: 0.5rem !default;
+$pattern-size-sm: 0.25rem !default;
+$pattern-size-md: 0.5rem !default;
+$pattern-size-lg: 0.75rem !default;
+$pattern-size-xl: 1rem !default;
+
+// Markdown
+$markdown-heading-margin-top: 2.5rem !default;
+$markdown-blockquote-margin-y: 1.5rem !default;
+$markdown-blockquote-padding-y: 0.5rem !default;
+$markdown-blockquote-padding-x: 1.5rem !default;
+$markdown-pre-max-height: 20rem !default;
+
+// Calendar
+$calendar-padding-y: 0.5rem !default;
+$calendar-date-padding: 0.2rem !default;
+$calendar-date-size: 1.4rem !default;
+
+// HR text
+$hr-text-gap: 0.5rem !default;
+$hr-text-spaceless-margin-y: -0.5rem !default;
+
+// Grid row gutters
+$grid-row-gutter-sm: 0.375rem !default;
+$grid-row-gutter-md: 1.5rem !default;
+$grid-row-gutter-lg: 3rem !default;
+
+// Type / callout
+$blockquote-padding: 1rem !default;
+$blockquote-paragraph-margin-bottom: 1rem !default;
+$list-padding-start: 1.5rem !default;
+$steps-padding: 2rem !default;
+$steps-item-size: 1.5rem !default;
+$steps-margin-start: 1rem !default;
+$steps-margin-bottom: 2rem !default;
+$steps-heading-margin-top: 2.5rem !default;
+$callout-margin-bottom: 1.5rem !default;
+$callout-padding-y: 0.5rem !default;
+$callout-padding-x: 1rem !default;
+
+// Form layout
+$form-label-required-gap: 0.25rem !default;
+$form-hint-margin-top: 0.25rem !default;
+$form-hint-label-offset: -0.25rem !default;
+$form-hint-control-margin-top: 0.5rem !default;
+$form-footer-margin-top: 2rem !default;
+$form-fieldset-padding: 1rem !default;
+$form-fieldset-margin-bottom: 1rem !default;
+$form-help-size: 1.125rem !default;
+$form-help-font-size: 0.75rem !default;
+$form-control-mobile-font-size: 1rem !default;
+$form-check-label-required-gap: 0.25rem !default;
+$form-check-description-margin-top: 0.25rem !default;
+$form-switch-lg-padding-start: 3.5rem !default;
+$form-switch-lg-min-height: 1.5rem !default;
+$form-switch-lg-height: 1.5rem !default;
+$form-switch-lg-width: 2.75rem !default;
+$form-switch-lg-bg-size: 1.5rem !default;
+$form-switch-lg-input-offset: -3.5rem !default;
+$form-switch-lg-label-padding-top: 0.125rem !default;
+$input-icon-padding-end: 2.5rem !default;
+$input-icon-padding-start: 2.5rem !default;
+$input-icon-addon-width: 2.5rem !default;
+$form-colorinput-size: 1.5rem !default;
+$form-imagecheck-check-offset: 0.25rem !default;
+$form-imagecheck-caption-padding: 0.25rem !default;
+$form-selectgroup-gap: 0.5rem !default;
+$form-selectgroup-icon-margin-x: -0.25rem !default;
 
 // Placeholders
 $placeholder-opacity-min: 0.1 !default;
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index 17da909ec..6a79191f1 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -10,12 +10,14 @@
   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
   --#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
   --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
-  --#{$prefix}accordion-btn-toggle-width: 1.25rem;
+  --#{$prefix}accordion-btn-toggle-width: #{$accordion-btn-toggle-width};
   --#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
   --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
   --#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
   --#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-btn-gap: #{$accordion-btn-gap};
+  --#{$prefix}accordion-header-gap: #{$accordion-header-gap};
 
   display: flex;
   flex-direction: column;
@@ -34,7 +36,7 @@
   border: 0;
   font-size: inherit;
   font-weight: var(--#{$prefix}accordion-btn-font-weight);
-  gap: 0.75rem;
+  gap: var(--#{$prefix}accordion-btn-gap);
 
   &:not(.collapsed) {
     border-bottom-color: transparent;
@@ -47,7 +49,7 @@
   margin: 0;
   position: relative;
   display: flex;
-  gap: 1rem;
+  gap: var(--#{$prefix}accordion-header-gap);
   align-items: center;
   width: 100%;
   color: var(--#{$prefix}accordion-btn-color);
@@ -163,7 +165,7 @@
 }
 
 .accordion-tabs {
-  --#{$prefix}accordion-gap: 0.75rem;
+  --#{$prefix}accordion-gap: #{$accordion-tabs-gap};
 
   > .accordion-item {
     border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 14a8b9c28..9538530ac 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -13,6 +13,10 @@
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
   --#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
+  --#{$prefix}alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
+  --#{$prefix}alert-icon-size: #{$alert-icon-size};
+  --#{$prefix}alert-padding-inline-end: #{$alert-padding-inline-end};
+  --#{$prefix}alert-gap: #{$alert-gap};
 
   position: relative;
   padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
@@ -24,12 +28,12 @@
   color: var(--#{$prefix}alert-color);
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  gap: var(--#{$prefix}alert-gap);
 }
 
 .alert-heading {
   color: inherit;
-  margin-bottom: 0.25rem; // todo: use variable
+  margin-bottom: var(--#{$prefix}alert-heading-margin-bottom);
   font-weight: var(--#{$prefix}alert-heading-font-weight);
 }
 
@@ -39,8 +43,8 @@
 
 .alert-icon {
   color: var(--#{$prefix}alert-color);
-  width: 1.25rem !important; // todo: use variable
-  height: 1.25rem !important;
+  width: var(--#{$prefix}alert-icon-size) !important;
+  height: var(--#{$prefix}alert-icon-size) !important;
 }
 
 .alert-action {
@@ -67,7 +71,7 @@
 }
 
 .alert-dismissible {
-  padding-inline-end: 3rem; //todo: use variable
+  padding-inline-end: var(--#{$prefix}alert-padding-inline-end);
 
   .btn-close {
     position: absolute;
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index d161fab28..de1d90047 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -123,6 +123,9 @@
 // Avatar upload
 //
 .avatar-upload {
+  --#{$prefix}avatar-upload-icon-size: #{$avatar-upload-icon-size};
+  --#{$prefix}avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
+
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
   background: $form-check-input-bg;
   box-shadow: none;
@@ -130,8 +133,8 @@
   @include transition(color $transition-time, background-color $transition-time);
 
   svg {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: var(--#{$prefix}avatar-upload-icon-size);
+    height: var(--#{$prefix}avatar-upload-icon-size);
     stroke-width: 1;
   }
 
@@ -145,20 +148,23 @@
 .avatar-upload-text {
   font-size: $h6-font-size;
   line-height: 1;
-  margin-top: 0.25rem;
+  margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
 }
 
 .avatar-cover {
+  --#{$prefix}avatar-cover-ring-width: #{$avatar-cover-ring-width};
+
   margin-top: calc(-0.5 * var(--#{$prefix}avatar-size));
-  box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
+  box-shadow: 0 0 0 var(--#{$prefix}avatar-cover-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
 }
 
 .avatar-brand {
+  --#{$prefix}avatar-brand-offset: #{$avatar-brand-offset};
   width: var(--#{$prefix}avatar-brand-size);
   height: var(--#{$prefix}avatar-brand-size);
   position: absolute;
-  inset-inline-end: -2px;
-  bottom: -2px;
+  inset-inline-end: var(--#{$prefix}avatar-brand-offset);
+  bottom: var(--#{$prefix}avatar-brand-offset);
   z-index: 1000;
   background: var(--#{$prefix}bg-surface);
   @include border-radius(var(--#{$prefix}border-radius));
diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss
index 8198f0d1f..59da0e506 100644
--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -9,6 +9,7 @@
   --#{$prefix}badge-border-radius: #{$badge-border-radius};
   --#{$prefix}badge-icon-size: 1em;
   --#{$prefix}badge-line-height: 1;
+  --#{$prefix}badge-gap: #{$badge-gap};
   display: inline-flex;
   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
   font-weight: var(--#{$prefix}badge-font-weight);
@@ -18,7 +19,7 @@
   white-space: nowrap;
   justify-content: center;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--#{$prefix}badge-gap);
   background: $badge-bg-color;
   overflow: hidden;
   user-select: none;
@@ -97,14 +98,14 @@
   --#{$prefix}badge-font-size: #{$badge-font-size-sm};
   --#{$prefix}badge-icon-size: 1em;
   --#{$prefix}badge-padding-y: 2px;
-  --#{$prefix}badge-padding-x: 0.25rem;
+  --#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
 }
 
 .badge-lg {
   --#{$prefix}badge-font-size: #{$badge-font-size-lg};
   --#{$prefix}badge-icon-size: 1em;
-  --#{$prefix}badge-padding-y: 0.25rem;
-  --#{$prefix}badge-padding-x: 0.5rem;
+  --#{$prefix}badge-padding-y: #{$badge-padding-y-lg};
+  --#{$prefix}badge-padding-x: #{$badge-padding-x-lg};
 }
 
 //
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index d72c4be91..ae0832ff8 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -180,7 +180,9 @@
   @include border-radius(var(--#{$prefix}border-radius-pill));
 
   &[class*='btn-icon'] {
-    padding: 0.375rem 15px;
+    --#{$prefix}btn-pill-icon-padding-y: #{$btn-pill-icon-padding-y};
+    --#{$prefix}btn-pill-icon-padding-x: #{$btn-pill-icon-padding-x};
+    padding: var(--#{$prefix}btn-pill-icon-padding-y) var(--#{$prefix}btn-pill-icon-padding-x);
   }
 }
 
@@ -220,10 +222,11 @@
 // Button floating
 //
 .btn-floating {
+  --#{$prefix}btn-floating-offset: #{$btn-floating-offset};
   position: fixed;
   z-index: $zindex-fixed;
-  bottom: 1rem;
-  inset-inline-start: 1rem;
+  bottom: var(--#{$prefix}btn-floating-offset);
+  inset-inline-start: var(--#{$prefix}btn-floating-offset);
   box-shadow: var(--#{$prefix}shadow-dropdown);
 
   @include media-print {
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index b54aa5a26..c9e37979b 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -1,6 +1,9 @@
 @use '../config' as *;
 
 .calendar {
+  --#{$prefix}calendar-padding-y: #{$calendar-padding-y};
+  --#{$prefix}calendar-date-padding: #{$calendar-date-padding};
+  --#{$prefix}calendar-date-size: #{$calendar-date-size};
   display: block;
   font-size: $font-size-sm;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
@@ -22,7 +25,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: start;
-  padding: 0.5rem 0;
+  padding: var(--#{$prefix}calendar-padding-y) 0;
 }
 
 .calendar-header {
@@ -32,7 +35,7 @@
 .calendar-date {
   flex: 0 0 calc(100% / 7);
   max-width: calc(100% / 7);
-  padding: 0.2rem;
+  padding: var(--#{$prefix}calendar-date-padding);
   text-align: center;
   border: 0;
 
@@ -44,9 +47,9 @@
   .date-item {
     position: relative;
     display: inline-block;
-    width: 1.4rem;
-    height: 1.4rem;
-    line-height: 1.4rem;
+    width: var(--#{$prefix}calendar-date-size);
+    height: var(--#{$prefix}calendar-date-size);
+    line-height: var(--#{$prefix}calendar-date-size);
     color: #66758c;
     text-align: center;
     text-decoration: none;
@@ -81,7 +84,7 @@
     top: 50%;
     inset-inline-end: 0;
     inset-inline-start: 0;
-    height: 1.4rem;
+    height: var(--#{$prefix}calendar-date-size);
     content: '';
     background: color-transparent(var(--#{$prefix}primary), 0.1);
     transform: translateY(-50%);
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index f622fcc9d..aa366970c 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -63,7 +63,7 @@
 
 // Card stamp
 .card-stamp {
-  --#{$prefix}stamp-size: 7rem;
+  --#{$prefix}stamp-size: #{$card-stamp-size};
   position: absolute;
   top: 0;
   inset-inline-end: 0;
@@ -77,7 +77,7 @@
 }
 
 .card-stamp-lg {
-  --#{$prefix}stamp-size: 13rem;
+  --#{$prefix}stamp-size: #{$card-stamp-size-lg};
 }
 
 .card-stamp-icon {
@@ -163,7 +163,7 @@
 Stacked card
  */
 .card-stacked {
-  --#{$prefix}card-stacked-offset: 0.25rem;
+  --#{$prefix}card-stacked-offset: #{$card-stacked-offset};
   position: relative;
 
   &:after {
@@ -207,8 +207,9 @@ Stacked card
 }
 
 .card-actions {
-  margin: -0.5rem -0.5rem -0.5rem auto;
-  padding-inline-start: 0.5rem;
+  --#{$prefix}card-actions-gutter: #{$card-actions-gutter};
+  margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
+  padding-inline-start: var(--#{$prefix}card-actions-gutter);
 
   a {
     text-decoration: none;
@@ -241,9 +242,10 @@ Stacked card
 }
 
 .card-header-pills {
+  --#{$prefix}card-header-pills-margin: #{$card-header-pills-margin};
   flex: 1;
-  margin-top: -0.5rem;
-  margin-bottom: -0.5rem;
+  margin-top: calc(-1 * var(--#{$prefix}card-header-pills-margin));
+  margin-bottom: calc(-1 * var(--#{$prefix}card-header-pills-margin));
 }
 
 // Card rotate
@@ -299,7 +301,8 @@ Stacked card
 
 // Card progress
 .card-progress {
-  height: 0.25rem;
+  --#{$prefix}card-progress-height: #{$card-progress-height};
+  height: var(--#{$prefix}card-progress-height);
 
   &:last-child {
     @include border-radius(0 0 2px 2px);
@@ -315,12 +318,14 @@ Stacked card
 }
 
 .card-title {
+  --#{$prefix}card-title-margin-bottom: #{$card-title-margin-bottom};
+  --#{$prefix}card-title-line-height: #{$card-title-line-height};
   display: block;
-  margin: 0 0 1rem;
+  margin: 0 0 var(--#{$prefix}card-title-margin-bottom);
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
   color: var(--#{$prefix}heading-color);
-  line-height: 1.5rem;
+  line-height: var(--#{$prefix}card-title-line-height);
 
   @at-root a#{&}:hover {
     color: inherit;
@@ -332,6 +337,7 @@ Stacked card
 }
 
 .card-subtitle {
+  --#{$prefix}card-subtitle-margin-start: #{$card-subtitle-margin-start};
   margin-bottom: $card-title-spacer-y;
   color: var(--#{$prefix}secondary);
   font-weight: normal;
@@ -341,12 +347,16 @@ Stacked card
   }
 
   .card-title & {
-    margin: 0 0 0 0.25rem;
+    margin: 0 0 0 var(--#{$prefix}card-subtitle-margin-start);
     font-size: $h4-font-size;
   }
 }
 
 .card-body {
+  --#{$prefix}card-body-padding-sm: #{$card-body-padding-sm};
+  --#{$prefix}card-body-padding-md: #{$card-body-padding-md};
+  --#{$prefix}card-body-padding-lg: #{$card-body-padding-lg};
+  --#{$prefix}card-body-padding-lg-up: #{$card-body-padding-lg-up};
   position: relative;
 
   > :last-child {
@@ -354,22 +364,22 @@ Stacked card
   }
 
   .card-sm > & {
-    padding: 1rem;
+    padding: var(--#{$prefix}card-body-padding-sm);
   }
 
   .card-md > & {
     @include media-breakpoint-up(md) {
-      padding: 2.5rem;
+      padding: var(--#{$prefix}card-body-padding-md);
     }
   }
 
   .card-lg > & {
     @include media-breakpoint-up(md) {
-      padding: 2rem;
+      padding: var(--#{$prefix}card-body-padding-lg);
     }
 
     @include media-breakpoint-up(lg) {
-      padding: 4rem;
+      padding: var(--#{$prefix}card-body-padding-lg-up);
     }
   }
 
@@ -390,16 +400,20 @@ Stacked card
 Card optinos
  */
 .card-options {
-  top: 1.5rem;
-  inset-inline-end: 0.75rem;
+  --#{$prefix}card-options-top: #{$card-options-top};
+  --#{$prefix}card-options-inset: #{$card-options-inset};
+  top: var(--#{$prefix}card-options-top);
+  inset-inline-end: var(--#{$prefix}card-options-inset);
   display: flex;
   margin-inline-start: auto;
 }
 
 .card-options-link {
+  --#{$prefix}card-options-link-min-width: #{$card-options-link-min-width};
+  --#{$prefix}card-options-link-margin-start: #{$card-options-link-margin-start};
   display: inline-block;
-  min-width: 1rem;
-  margin-inline-start: 0.25rem;
+  min-width: var(--#{$prefix}card-options-link-min-width);
+  margin-inline-start: var(--#{$prefix}card-options-link-margin-start);
   color: var(--#{$prefix}secondary);
 }
 
@@ -534,18 +548,20 @@ Card code
 Card chart
  */
 .card-chart {
+  --#{$prefix}card-avatar-height: #{$card-avatar-height};
   position: relative;
   z-index: 1;
-  height: 3.5rem;
+  height: var(--#{$prefix}card-avatar-height);
 }
 
 /**
 Card avatar
  */
 .card-avatar {
+  --#{$prefix}card-avatar-ring-width: #{$card-avatar-ring-width};
   margin-inline-start: auto;
   margin-inline-end: auto;
-  box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
 }
 
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index 7f85e4a8c..cc7b9afe8 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -4,9 +4,11 @@
 }
 
 .carousel-indicators-vertical {
+  --#{$prefix}carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end};
+
   inset-inline-start: auto;
   top: 0;
-  margin: 0 1rem 0 0;
+  margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
   flex-direction: column;
 
   [data-bs-target],
diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss
index 2644bcf8d..5ffeefcd3 100644
--- a/core/scss/ui/_charts.scss
+++ b/core/scss/ui/_charts.scss
@@ -1,8 +1,10 @@
 @use '../config' as *;
 
 .chart {
+  --#{$prefix}chart-min-height: #{$chart-min-height};
+
   display: block;
-  min-height: 10rem;
+  min-height: var(--#{$prefix}chart-min-height);
 
   text {
     font-family: inherit;
@@ -10,41 +12,58 @@
 }
 
 .chart-sm {
-  height: 2.5rem;
+  --#{$prefix}chart-height-sm: #{$chart-height-sm};
+
+  height: var(--#{$prefix}chart-height-sm);
 }
 
 .chart-lg {
-  height: 15rem;
+  --#{$prefix}chart-height-lg: #{$chart-height-lg};
+
+  height: var(--#{$prefix}chart-height-lg);
 }
 
 .chart-square {
-  height: 5.75rem;
+  --#{$prefix}chart-height-square: #{$chart-height-square};
+
+  height: var(--#{$prefix}chart-height-square);
 }
 
 /**
 Chart sparkline
  */
 .chart-sparkline {
+  --#{$prefix}chart-sparkline-width: #{$chart-sparkline-width};
+  --#{$prefix}chart-sparkline-height: #{$chart-sparkline-height};
+
   position: relative;
-  width: 4rem;
-  height: 2.5rem;
+  width: var(--#{$prefix}chart-sparkline-width);
+  height: var(--#{$prefix}chart-sparkline-height);
   line-height: 1;
   min-height: 0 !important;
 }
 
 .chart-sparkline-sm {
-  height: 1.5rem;
+  --#{$prefix}chart-sparkline-height-sm: #{$chart-sparkline-height-sm};
+
+  height: var(--#{$prefix}chart-sparkline-height-sm);
 }
 
 .chart-sparkline-square {
-  width: 2.5rem;
+  --#{$prefix}chart-sparkline-width-square: #{$chart-sparkline-width-square};
+
+  width: var(--#{$prefix}chart-sparkline-width-square);
 }
 
 .chart-sparkline-wide {
-  width: 6rem;
+  --#{$prefix}chart-sparkline-width-wide: #{$chart-sparkline-width-wide};
+
+  width: var(--#{$prefix}chart-sparkline-width-wide);
 }
 
 .chart-sparkline-label {
+  --#{$prefix}chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
+
   position: absolute;
   top: 0;
   inset-inline-end: 0;
@@ -56,8 +75,8 @@ Chart sparkline
   font-size: $h6-font-size;
 
   .icon {
-    width: 1rem;
-    height: 1rem;
-    font-size: 1rem;
+    width: var(--#{$prefix}chart-sparkline-label-icon-size);
+    height: var(--#{$prefix}chart-sparkline-label-icon-size);
+    font-size: var(--#{$prefix}chart-sparkline-label-icon-size);
   }
 }
diff --git a/core/scss/ui/_chat.scss b/core/scss/ui/_chat.scss
index 9eeda40c8..2b0518601 100644
--- a/core/scss/ui/_chat.scss
+++ b/core/scss/ui/_chat.scss
@@ -1,18 +1,21 @@
 @use '../config' as *;
 
 .chat {
+  --#{$prefix}chat-bubbles-gap: #{$chat-bubbles-gap};
+  --#{$prefix}chat-bubble-padding: #{$chat-bubble-padding};
+  --#{$prefix}chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
 }
 
 .chat-bubbles {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--#{$prefix}chat-bubbles-gap);
 }
 
 .chat-bubble {
   background: var(--#{$prefix}bg-surface-secondary);
   @include border-radius(var(--#{$prefix}border-radius-lg));
-  padding: 1rem;
+  padding: var(--#{$prefix}chat-bubble-padding);
   position: relative;
 }
 
@@ -22,7 +25,7 @@
 }
 
 .chat-bubble-title {
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--#{$prefix}chat-bubble-title-margin-bottom);
 }
 
 .chat-bubble-author {
diff --git a/core/scss/ui/_datagrid.scss b/core/scss/ui/_datagrid.scss
index 5f12089e5..c4af24ab1 100644
--- a/core/scss/ui/_datagrid.scss
+++ b/core/scss/ui/_datagrid.scss
@@ -7,6 +7,7 @@
 .datagrid {
   --#{$prefix}datagrid-padding: #{$datagrid-padding};
   --#{$prefix}datagrid-item-width: #{$datagrid-item-width};
+  --#{$prefix}datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
 
   display: grid;
   grid-gap: var(--#{$prefix}datagrid-padding);
@@ -15,5 +16,5 @@
 
 .datagrid-title {
   @include subheader;
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--#{$prefix}datagrid-title-margin-bottom);
 }
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 1dacff9ad..43e749cd8 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -1,9 +1,15 @@
 @use '../config' as *;
 
 .dropdown-menu {
-  --#{$prefix}dropdown-item-gap: 0.5rem;
+  --#{$prefix}dropdown-item-gap: #{$dropdown-item-gap};
   --#{$prefix}dropdown-item-icon-size: #{$icon-size};
   --#{$prefix}dropdown-item-icon-color: var(--#{$prefix}tertiary);
+  --#{$prefix}dropdown-header-padding-bottom: #{$dropdown-header-padding-bottom};
+  --#{$prefix}dropdown-menu-columns-gap: #{$dropdown-menu-columns-gap};
+  --#{$prefix}dropdown-arrow-offset: #{$dropdown-arrow-offset};
+  --#{$prefix}dropdown-arrow-inset: #{$dropdown-arrow-inset};
+  --#{$prefix}dropdown-dropend-offset: #{$dropdown-dropend-offset};
+  --#{$prefix}dropdown-menu-card-min-width: #{$dropdown-menu-card-min-width};
   user-select: none;
   background-clip: border-box;
 
@@ -39,7 +45,7 @@
 }
 
 .dropdown-item-indicator {
-  height: 1.25rem;
+  height: var(--#{$prefix}dropdown-item-icon-size);
   display: inline-flex;
   line-height: 1;
   vertical-align: bottom;
@@ -48,7 +54,7 @@
 
 .dropdown-header {
   @include subheader;
-  padding-bottom: 0.25rem;
+  padding-bottom: var(--#{$prefix}dropdown-header-padding-bottom);
   pointer-events: none;
 }
 
@@ -68,15 +74,15 @@
 
 .dropdown-menu-columns {
   display: flex;
-  flex: 0 0.25rem;
+  flex: 0 var(--#{$prefix}dropdown-menu-columns-gap);
 }
 
 .dropdown-menu-arrow {
   &:before {
     content: '';
     position: absolute;
-    top: -0.25rem;
-    inset-inline-start: 0.75rem;
+    top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
+    inset-inline-start: var(--#{$prefix}dropdown-arrow-inset);
     display: block;
     background: inherit;
     width: 14px;
@@ -92,7 +98,7 @@
 
   &.dropdown-menu-end {
     &:before {
-      inset-inline-end: 0.75rem;
+      inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
       inset-inline-start: auto;
     }
   }
@@ -101,7 +107,7 @@
 .dropend {
   > .dropdown-menu {
     margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
-    margin-inline-start: -0.25rem;
+    margin-inline-start: calc(-1 * var(--#{$prefix}dropdown-dropend-offset));
   }
 
   .dropdown-toggle {
@@ -113,7 +119,7 @@
 
 .dropdown-menu-card {
   padding: 0;
-  min-width: 20rem;
+  min-width: var(--#{$prefix}dropdown-menu-card-min-width);
 
   > .card {
     margin: 0;
diff --git a/core/scss/ui/_empty.scss b/core/scss/ui/_empty.scss
index 4657525af..1c8f36536 100644
--- a/core/scss/ui/_empty.scss
+++ b/core/scss/ui/_empty.scss
@@ -1,23 +1,33 @@
 @use '../config' as *;
 
 .empty {
+  --#{$prefix}empty-padding: #{$empty-padding};
+  --#{$prefix}empty-padding-md: #{$empty-padding-md};
+  --#{$prefix}empty-icon-size: #{$empty-icon-size};
+  --#{$prefix}empty-icon-margin-bottom: #{$empty-icon-margin-bottom};
+  --#{$prefix}empty-img-margin-bottom: #{$empty-img-margin-bottom};
+  --#{$prefix}empty-header-margin-bottom: #{$empty-header-margin-bottom};
+  --#{$prefix}empty-header-font-size: #{$empty-header-font-size};
+  --#{$prefix}empty-title-margin-bottom: #{$empty-title-margin-bottom};
+  --#{$prefix}empty-action-margin-top: #{$empty-action-margin-top};
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 1rem;
+  padding: var(--#{$prefix}empty-padding);
   text-align: center;
 
   @include media-breakpoint-up(md) {
-    padding: 3rem;
+    padding: var(--#{$prefix}empty-padding-md);
   }
 }
 
 .empty-icon {
-  margin: 0 0 1rem;
-  width: 3rem;
-  height: 3rem;
+  margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
+  width: var(--#{$prefix}empty-icon-size);
+  height: var(--#{$prefix}empty-icon-size);
   line-height: 1;
   color: var(--#{$prefix}secondary);
 
@@ -28,13 +38,13 @@
 }
 
 .empty-img {
-  margin: 0 0 2rem;
+  margin: 0 0 var(--#{$prefix}empty-img-margin-bottom);
   line-height: 1;
 }
 
 .empty-header {
-  margin: 0 0 1rem;
-  font-size: 4rem;
+  margin: 0 0 var(--#{$prefix}empty-header-margin-bottom);
+  font-size: var(--#{$prefix}empty-header-font-size);
   font-weight: var(--#{$prefix}font-weight-light);
   line-height: 1;
   color: var(--#{$prefix}secondary);
@@ -48,11 +58,11 @@
 
 .empty-title,
 .empty-subtitle {
-  margin: 0 0 0.5rem;
+  margin: 0 0 var(--#{$prefix}empty-title-margin-bottom);
 }
 
 .empty-action {
-  margin-top: 1.5rem;
+  margin-top: var(--#{$prefix}empty-action-margin-top);
 }
 
 .empty-bordered {
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index 6fd84fd91..9a1e0ebc0 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -11,13 +11,15 @@ Form label
  */
 .col-form-label,
 .form-label {
+  --#{$prefix}form-label-required-gap: #{$form-label-required-gap};
+
   display: block;
   font-weight: var(--#{$prefix}font-weight-medium);
 
   &.required {
     &:after {
       content: '*';
-      margin-inline-start: 0.25rem;
+      margin-inline-start: var(--#{$prefix}form-label-required-gap);
       color: $red;
     }
   }
@@ -33,6 +35,10 @@ Form label
 Form hint
  */
 .form-hint {
+  --#{$prefix}form-hint-margin-top: #{$form-hint-margin-top};
+  --#{$prefix}form-hint-label-offset: #{$form-hint-label-offset};
+  --#{$prefix}form-hint-control-margin-top: #{$form-hint-control-margin-top};
+
   display: block;
   color: $form-secondary-color;
 
@@ -41,17 +47,17 @@ Form hint
   }
 
   & + .form-control {
-    margin-top: 0.25rem;
+    margin-top: var(--#{$prefix}form-hint-margin-top);
   }
 
   .form-label + & {
-    margin-top: -0.25rem;
+    margin-top: var(--#{$prefix}form-hint-label-offset);
   }
 
   .input-group + &,
   .form-control + &,
   .form-select + & {
-    margin-top: 0.5rem;
+    margin-top: var(--#{$prefix}form-hint-control-margin-top);
     color: $form-secondary-color;
   }
 }
@@ -121,12 +127,17 @@ Form control
 }
 
 .form-footer {
-  margin-top: 2rem;
+  --#{$prefix}form-footer-margin-top: #{$form-footer-margin-top};
+
+  margin-top: var(--#{$prefix}form-footer-margin-top);
 }
 
 .form-fieldset {
-  padding: 1rem;
-  margin-bottom: 1rem;
+  --#{$prefix}form-fieldset-padding: #{$form-fieldset-padding};
+  --#{$prefix}form-fieldset-margin-bottom: #{$form-fieldset-margin-bottom};
+
+  padding: var(--#{$prefix}form-fieldset-padding);
+  margin-bottom: var(--#{$prefix}form-fieldset-margin-bottom);
   background: var(--#{$prefix}bg-surface-secondary);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   @include border-radius(var(--#{$prefix}border-radius));
@@ -140,13 +151,16 @@ fieldset:empty {
 Form help
  */
 .form-help {
+  --#{$prefix}form-help-size: #{$form-help-size};
+  --#{$prefix}form-help-font-size: #{$form-help-font-size};
+
   display: inline-flex;
   font-weight: var(--#{$prefix}font-weight-semibold);
   align-items: center;
   justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
-  font-size: 0.75rem;
+  width: var(--#{$prefix}form-help-size);
+  height: var(--#{$prefix}form-help-size);
+  font-size: var(--#{$prefix}form-help-font-size);
   color: $form-secondary-color;
   text-align: center;
   text-decoration: none;
@@ -248,7 +262,9 @@ Forms on mobile devices
   */
 .form-control,
 .form-select {
+  --#{$prefix}form-control-mobile-font-size: #{$form-control-mobile-font-size};
+
   @include media-breakpoint-down(sm) {
-    font-size: 1rem;
+    font-size: var(--#{$prefix}form-control-mobile-font-size);
   }
 }
diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss
index 0fde218c2..71bb3a5ba 100644
--- a/core/scss/ui/_grid.scss
+++ b/core/scss/ui/_grid.scss
@@ -19,19 +19,20 @@
   }
 }
 
-@each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
+@each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) {
   .row-#{$name} {
-    margin-inline-end: calc(-1 * $value);
-    margin-inline-start: calc(-1 * $value);
+    --#{$prefix}grid-row-gutter: #{$value};
+    margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
+    margin-inline-start: calc(-1 * var(--#{$prefix}grid-row-gutter));
 
     > .col,
     > [class*='col-'] {
-      padding-inline-end: $value;
-      padding-inline-start: $value;
+      padding-inline-end: var(--#{$prefix}grid-row-gutter);
+      padding-inline-start: var(--#{$prefix}grid-row-gutter);
     }
 
     .card {
-      margin-bottom: 2 * $value;
+      margin-bottom: calc(2 * var(--#{$prefix}grid-row-gutter));
     }
   }
 }
diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss
index c189593b6..1c2828a94 100644
--- a/core/scss/ui/_icons.scss
+++ b/core/scss/ui/_icons.scss
@@ -25,8 +25,9 @@
 // Inline icon
 //
 .icon-inline {
-  --#{$prefix}icon-size: 1rem;
-  vertical-align: -0.2rem;
+  --#{$prefix}icon-size: #{$icon-inline-size};
+  --#{$prefix}icon-inline-vertical-align: #{$icon-inline-vertical-align};
+  vertical-align: var(--#{$prefix}icon-inline-vertical-align);
 }
 
 //
@@ -40,17 +41,17 @@
 // Icon size
 //
 .icon-sm {
-  --#{$prefix}icon-size: 1rem;
+  --#{$prefix}icon-size: #{$icon-sm-size};
   stroke-width: 1.5;
 }
 
 .icon-md {
-  --#{$prefix}icon-size: 2.5rem;
+  --#{$prefix}icon-size: #{$icon-md-size};
   stroke-width: 1;
 }
 
 .icon-lg {
-  --#{$prefix}icon-size: 3.5rem;
+  --#{$prefix}icon-size: #{$icon-lg-size};
   stroke-width: 1;
 }
 
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index 8fe6c2e23..21d8f76b9 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -1,13 +1,15 @@
 @use '../config' as *;
 
 .list-group {
+  --#{$prefix}list-group-header-padding-y: #{$list-group-header-padding-y};
+
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
 
 .list-group-header {
   background: $list-group-header-bg;
-  padding: 0.5rem $list-group-item-padding-x;
+  padding: var(--#{$prefix}list-group-header-padding-y) $list-group-item-padding-x;
   font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss
index e217844d2..bfeabac55 100644
--- a/core/scss/ui/_markdown.scss
+++ b/core/scss/ui/_markdown.scss
@@ -8,6 +8,11 @@ Prose (formerly markdown)
  */
 .prose,
 .markdown {
+  --#{$prefix}markdown-heading-margin-top: #{$markdown-heading-margin-top};
+  --#{$prefix}markdown-blockquote-margin-y: #{$markdown-blockquote-margin-y};
+  --#{$prefix}markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
+  --#{$prefix}markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
+  --#{$prefix}markdown-pre-max-height: #{$markdown-pre-max-height};
   line-height: $markdown-line-height;
   font-size: $markdown-font-size;
 
@@ -42,7 +47,7 @@ Prose (formerly markdown)
     h4,
     h5,
     h6 {
-      margin-top: 2.5rem;
+      margin-top: var(--#{$prefix}markdown-heading-margin-top);
     }
   }
 
@@ -54,8 +59,8 @@ Prose (formerly markdown)
 
   > blockquote {
     font-size: $h3-font-size;
-    margin: 1.5rem 0;
-    padding: 0.5rem 1.5rem;
+    margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
+    padding: var(--#{$prefix}markdown-blockquote-padding-y) var(--#{$prefix}markdown-blockquote-padding-x);
   }
 
   > img,
@@ -65,6 +70,6 @@ Prose (formerly markdown)
   }
 
   pre {
-    max-height: 20rem;
+    max-height: var(--#{$prefix}markdown-pre-max-height);
   }
 }
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index c32fcd5b7..b54bc4029 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -18,7 +18,7 @@
   @include scrollbar;
 
   .modal-title {
-    margin-bottom: 1rem;
+    margin-bottom: var(--#{$prefix}modal-body-title-margin-bottom);
   }
 
   & + & {
@@ -54,10 +54,10 @@
   @if $modal-footer-border-width == 0 {
     padding-top: 0;
   } @else {
-    padding-top: 0.75rem;
+    padding-top: var(--#{$prefix}modal-footer-padding-y);
   }
 
-  padding-bottom: 0.75rem;
+  padding-bottom: var(--#{$prefix}modal-footer-padding-y);
 }
 
 .modal-blur {
@@ -70,6 +70,9 @@
 }
 
 .modal {
+  --#{$prefix}modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
+  --#{$prefix}modal-footer-padding-y: #{$modal-footer-padding-y};
+
   @include media-print {
     display: none !important;
   }
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index b8a2d8f88..4e33c95d1 100644
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -2,6 +2,10 @@
 
 .nav {
   --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
+  --#{$prefix}nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
+  --#{$prefix}nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
+  --#{$prefix}nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
+  --#{$prefix}nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
 }
 
 .nav-vertical {
@@ -12,9 +16,9 @@
   }
 
   .nav {
-    margin-inline-start: 1.25rem;
+    margin-inline-start: var(--#{$prefix}nav-vertical-nested-margin-start);
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    padding-inline-start: 0.5rem;
+    padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
   }
 
   .nav-link.active,
@@ -78,7 +82,7 @@
 
 .nav-link-toggle {
   margin-inline-start: auto;
-  padding: 0 0.25rem;
+  padding: 0 var(--#{$prefix}nav-link-toggle-padding-x);
   @include transition(transform $transition-time);
   @include caret();
 
@@ -94,7 +98,7 @@
 .nav-link-icon {
   width: $nav-link-icon-size;
   height: $nav-link-icon-size;
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--#{$prefix}nav-link-icon-margin-end);
   color: $nav-link-icon-color;
 
   svg {
diff --git a/core/scss/ui/_offcanvas.scss b/core/scss/ui/_offcanvas.scss
index 34c93af37..702b85218 100644
--- a/core/scss/ui/_offcanvas.scss
+++ b/core/scss/ui/_offcanvas.scss
@@ -15,11 +15,15 @@
 }
 
 .offcanvas-title {
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
+
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
-  line-height: 1.5rem;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-narrow {
-  width: 20rem;
+  --#{$prefix}offcanvas-narrow-width: #{$offcanvas-narrow-width};
+
+  width: var(--#{$prefix}offcanvas-narrow-width);
 }
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index a3c2158b1..39acc83c6 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -2,7 +2,9 @@
 
 .pagination {
   margin: 0;
-  --#{$prefix}pagination-gap: 0.25rem;
+  --#{$prefix}pagination-gap: #{$pagination-gap};
+  --#{$prefix}pagination-link-min-width: #{$pagination-link-min-width};
+  --#{$prefix}page-text-padding-x: #{$page-text-padding-x};
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
   line-height: var(--#{$prefix}body-line-height);
@@ -13,7 +15,7 @@
 }
 
 .page-link {
-  min-width: 2rem;
+  min-width: var(--#{$prefix}pagination-link-min-width);
   @include border-radius(var(--#{$prefix}pagination-border-radius));
 }
 
@@ -22,8 +24,8 @@
 }
 
 .page-text {
-  padding-inline-start: 0.5rem;
-  padding-inline-end: 0.5rem;
+  padding-inline-start: var(--#{$prefix}page-text-padding-x);
+  padding-inline-end: var(--#{$prefix}page-text-padding-x);
 }
 
 .page-item {
@@ -42,8 +44,10 @@
 }
 
 .page-item-subtitle {
-  margin-bottom: 2px;
-  font-size: 12px;
+  --#{$prefix}page-item-subtitle-margin-bottom: #{$page-item-subtitle-margin-bottom};
+  --#{$prefix}page-item-subtitle-font-size: #{$page-item-subtitle-font-size};
+  margin-bottom: var(--#{$prefix}page-item-subtitle-margin-bottom);
+  font-size: var(--#{$prefix}page-item-subtitle-font-size);
   color: var(--#{$prefix}secondary);
   text-transform: uppercase;
 
diff --git a/core/scss/ui/_patterns.scss b/core/scss/ui/_patterns.scss
index 6c5f6dca9..df27f36e2 100644
--- a/core/scss/ui/_patterns.scss
+++ b/core/scss/ui/_patterns.scss
@@ -2,7 +2,7 @@
 
 .bg-pattern-diagonal {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
@@ -13,7 +13,7 @@
 
 .bg-pattern-diagonal-2 {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
@@ -41,7 +41,7 @@
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   background-image:
     repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
     repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
@@ -57,7 +57,7 @@
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
@@ -69,7 +69,7 @@
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
   background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
@@ -81,7 +81,7 @@
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
   background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-position:
@@ -95,7 +95,7 @@
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
   background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
   background-position: center center;
@@ -105,7 +105,7 @@
 
 .bg-pattern-blueprint {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
@@ -125,7 +125,7 @@
 
 .bg-pattern-cross-dots {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px), radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
@@ -139,7 +139,7 @@
 
 .bg-pattern-circles {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image:
@@ -152,7 +152,7 @@
 
 .bg-pattern-diagonal-stripes {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: repeating-linear-gradient(45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -163,7 +163,7 @@
 
 .bg-pattern-diagonal-stripes-2 {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -174,7 +174,7 @@
 
 .bg-pattern-zigzag {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background:
@@ -189,7 +189,7 @@
 
 .bg-pattern-vertical-stripes {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: repeating-linear-gradient(90deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -199,7 +199,7 @@
 
 .bg-pattern-horizontal-stripes {
   --#{$prefix}pattern-color: var(--#{$prefix}body-color);
-  --#{$prefix}pattern-size: 0.5rem;
+  --#{$prefix}pattern-size: #{$pattern-size};
   --#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
   --#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
   background-image: repeating-linear-gradient(0deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -217,10 +217,10 @@
 
 // Sizes
 $sizes: (
-  'sm': 0.25rem,
-  'md': 0.5rem,
-  'lg': 0.75rem,
-  'xl': 1rem,
+  'sm': $pattern-size-sm,
+  'md': $pattern-size-md,
+  'lg': $pattern-size-lg,
+  'xl': $pattern-size-xl,
 );
 
 @each $size, $value in $sizes {
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index 10d356fa7..6101cf159 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -41,15 +41,15 @@ Progress
 }
 
 .progress-sm {
-  height: 0.25rem;
+  --#{$prefix}progress-height: #{$progress-height-sm};
 }
 
 .progress-lg {
-  height: 0.75rem;
+  --#{$prefix}progress-height: #{$progress-height-lg};
 }
 
 .progress-xl {
-  height: 1rem;
+  --#{$prefix}progress-height: #{$progress-height-xl};
 }
 
 /**
@@ -78,8 +78,10 @@ Progress bar
 }
 
 .progress-separated {
+  --#{$prefix}progress-separated-ring-width: #{$progress-separated-ring-width};
+
   .progress-bar {
-    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    box-shadow: 0 0 0 var(--#{$prefix}progress-separated-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   }
 }
 
@@ -87,8 +89,10 @@ Progress bar
 Progressbg
  */
 .progressbg {
+  --#{$prefix}progressbg-padding-y: #{$progressbg-padding-y};
+  --#{$prefix}progressbg-padding-x: #{$progressbg-padding-x};
   position: relative;
-  padding: 0.25rem 0.5rem;
+  padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
   display: flex;
 }
 
@@ -113,27 +117,30 @@ Progressbg
 }
 
 .progressbg-value {
+  --#{$prefix}progressbg-value-padding-start: #{$progressbg-value-padding-start};
   font-weight: var(--#{$prefix}font-weight-medium);
   margin-inline-start: auto;
-  padding-inline-start: 2rem;
+  padding-inline-start: var(--#{$prefix}progressbg-value-padding-start);
 }
 
 /**
 Progress steps
  */
 .progress-steps {
+  --#{$prefix}progress-steps-gap: #{$progress-steps-gap};
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
-  gap: 0.25rem;
+  gap: var(--#{$prefix}progress-steps-gap);
 }
 
 .progress-steps-item {
+  --#{$prefix}progress-steps-item-height: #{$progress-steps-item-height};
   flex: 1 1 0;
-  min-height: 0.25rem;
+  min-height: var(--#{$prefix}progress-steps-item-height);
   margin-top: 0;
   color: inherit;
   text-align: center;
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index 4a1959ada..0fa8e8ccf 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -5,12 +5,23 @@
 .ribbon {
   --#{$prefix}ribbon-margin: #{$card-ribbon-margin};
   --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
+  --#{$prefix}ribbon-font-size: #{$card-ribbon-font-size};
+  --#{$prefix}ribbon-icon-size: #{$card-ribbon-icon-size};
+  --#{$prefix}ribbon-offset: #{$ribbon-offset};
+  --#{$prefix}ribbon-padding-y: #{$ribbon-padding-y};
+  --#{$prefix}ribbon-padding-x: #{$ribbon-padding-x};
+  --#{$prefix}ribbon-min-size: #{$ribbon-min-size};
+  --#{$prefix}ribbon-top-width: #{$ribbon-top-width};
+  --#{$prefix}ribbon-top-padding-y: #{$ribbon-top-padding-y};
+  --#{$prefix}ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
+  --#{$prefix}ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
+
   position: absolute;
-  top: 0.75rem;
+  top: var(--#{$prefix}ribbon-offset);
   inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
   z-index: 1;
-  padding: 0.25rem 0.75rem;
-  font-size: $card-ribbon-font-size;
+  padding: var(--#{$prefix}ribbon-padding-y) var(--#{$prefix}ribbon-padding-x);
+  font-size: var(--#{$prefix}ribbon-font-size);
   font-weight: var(--#{$prefix}font-weight-semibold);
   line-height: 1;
   color: $white;
@@ -22,8 +33,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2rem;
-  min-width: 2rem;
+  min-height: var(--#{$prefix}ribbon-min-size);
+  min-width: var(--#{$prefix}ribbon-min-size);
 
   &:before {
     position: absolute;
@@ -52,17 +63,17 @@
   }
 
   .icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    font-size: 1.25rem;
+    width: var(--#{$prefix}ribbon-icon-size);
+    height: var(--#{$prefix}ribbon-icon-size);
+    font-size: var(--#{$prefix}ribbon-icon-size);
   }
 }
 
 .ribbon-top {
   top: calc(-1 * var(--#{$prefix}ribbon-margin));
-  inset-inline-end: 0.75rem;
-  width: 2rem;
-  padding: 0.5rem 0;
+  inset-inline-end: var(--#{$prefix}ribbon-offset);
+  width: var(--#{$prefix}ribbon-top-width);
+  padding: var(--#{$prefix}ribbon-top-padding-y) 0;
   @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
 
   &:before {
@@ -76,7 +87,7 @@
 
   &.ribbon-start {
     inset-inline-end: auto;
-    inset-inline-start: 0.75rem;
+    inset-inline-start: var(--#{$prefix}ribbon-offset);
 
     &:before {
       top: 0;
@@ -103,11 +114,11 @@
 
 .ribbon-bottom {
   top: auto;
-  bottom: 0.75rem;
+  bottom: var(--#{$prefix}ribbon-offset);
 }
 
 .ribbon-bookmark {
-  padding-inline-start: 0.25rem;
+  padding-inline-start: var(--#{$prefix}ribbon-padding-y);
   @include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
 
   &:after {
@@ -118,29 +129,29 @@
     width: 0;
     height: 0;
     content: '';
-    border: 1rem var(--#{$prefix}border-style);
+    border: var(--#{$prefix}ribbon-bookmark-border-size) var(--#{$prefix}border-style);
     border-color: inherit;
     border-inline-end-width: 0;
     border-inline-start-color: transparent;
-    border-inline-start-width: 0.5rem;
+    border-inline-start-width: var(--#{$prefix}ribbon-bookmark-notch-width);
   }
 
   &.ribbon-left {
-    padding-inline-end: 0.5rem;
+    padding-inline-end: var(--#{$prefix}ribbon-bookmark-notch-width);
 
     &:after {
       inset-inline-end: auto;
       inset-inline-start: 100%;
       border-inline-end-color: transparent;
 
-      border-inline-end-width: 0.5rem;
+      border-inline-end-width: var(--#{$prefix}ribbon-bookmark-notch-width);
       border-inline-start-width: 0;
     }
   }
 
   &.ribbon-top {
     padding-inline-end: 0;
-    padding-bottom: 0.25rem;
+    padding-bottom: var(--#{$prefix}ribbon-padding-y);
     padding-inline-start: 0;
     @include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
 
@@ -149,10 +160,10 @@
       inset-inline-end: 0;
       inset-inline-start: 0;
       border-color: inherit;
-      border-width: 1rem;
+      border-width: var(--#{$prefix}ribbon-bookmark-border-size);
       border-top-width: 0;
       border-bottom-color: transparent;
-      border-bottom-width: 0.5rem;
+      border-bottom-width: var(--#{$prefix}ribbon-bookmark-notch-width);
     }
   }
 }
diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss
index 114cd5fbe..7a29876b8 100644
--- a/core/scss/ui/_segmented.scss
+++ b/core/scss/ui/_segmented.scss
@@ -2,17 +2,18 @@
 
 .nav-segmented {
   --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
-  --#{$prefix}nav-padding: 2px;
-  --#{$prefix}nav-height: 2.5rem;
-  --#{$prefix}nav-gap: 0.25rem;
+  --#{$prefix}nav-padding: #{$nav-segmented-padding};
+  --#{$prefix}nav-height: #{$nav-segmented-height};
+  --#{$prefix}nav-gap: #{$nav-segmented-gap};
   --#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}nav-font-size: inherit;
-  --#{$prefix}nav-radius: 6px;
+  --#{$prefix}nav-radius: #{$nav-segmented-radius};
 
   --#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
-  --#{$prefix}nav-link-gap: 0.25rem;
-  --#{$prefix}nav-link-padding-x: 0.75rem;
-  --#{$prefix}nav-link-icon-size: 1.25rem;
+  --#{$prefix}nav-link-gap: #{$nav-segmented-link-gap};
+  --#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x};
+  --#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size};
+  --#{$prefix}nav-link-icon-margin: #{$nav-segmented-icon-margin};
   display: inline-flex;
   flex-wrap: wrap;
   gap: var(--#{$prefix}nav-gap);
@@ -24,7 +25,7 @@
 
   .nav-link {
     display: inline-flex;
-    gap: calc(0.25rem + var(--#{$prefix}nav-link-gap));
+    gap: calc(#{$nav-segmented-link-gap} + var(--#{$prefix}nav-link-gap));
     align-items: center;
     margin: 0;
     font-size: var(--#{$prefix}nav-font-size);
@@ -72,7 +73,7 @@
   .nav-link-icon {
     width: var(--#{$prefix}nav-link-icon-size);
     height: var(--#{$prefix}nav-link-icon-size);
-    margin: 0 -0.25rem;
+    margin: 0 var(--#{$prefix}nav-link-icon-margin);
     color: inherit;
   }
 }
@@ -86,19 +87,19 @@
 }
 
 .nav-sm {
-  --#{$prefix}nav-height: 2rem;
+  --#{$prefix}nav-height: #{$nav-segmented-height-sm};
   --#{$prefix}nav-font-size: var(--tblr-font-size-h5);
-  --#{$prefix}nav-radius: 4px;
-  --#{$prefix}nav-link-padding-x: 0.5rem;
-  --#{$prefix}nav-link-gap: 0.25rem;
-  --#{$prefix}nav-link-icon-size: 1rem;
+  --#{$prefix}nav-radius: #{$nav-segmented-radius-sm};
+  --#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x-sm};
+  --#{$prefix}nav-link-gap: #{$nav-segmented-link-gap-sm};
+  --#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size-sm};
 }
 
 .nav-lg {
-  --#{$prefix}nav-height: 3rem;
+  --#{$prefix}nav-height: #{$nav-segmented-height-lg};
   --#{$prefix}nav-font-size: var(--tblr-font-size-h3);
-  --#{$prefix}nav-radius: 8px;
-  --#{$prefix}nav-link-padding-x: 1rem;
-  --#{$prefix}nav-link-gap: 0.5rem;
-  --#{$prefix}nav-link-icon-size: 1.5rem;
+  --#{$prefix}nav-radius: #{$nav-segmented-radius-lg};
+  --#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x-lg};
+  --#{$prefix}nav-link-gap: #{$nav-segmented-link-gap-lg};
+  --#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size-lg};
 }
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index 70d4aff18..7740c61ac 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -1,11 +1,13 @@
 @use '../config' as *;
 
 .stars {
+  --#{$prefix}stars-gap: #{$stars-gap};
+
   display: inline-flex;
   color: $gray-400;
   font-size: $h5-font-size;
 
   .star:not(:first-child) {
-    margin-inline-start: 0.25rem;
+    margin-inline-start: var(--#{$prefix}stars-gap);
   }
 }
diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss
index d67859b5c..17696c92b 100644
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -47,12 +47,15 @@
   --#{$prefix}status-height: #{$status-height};
   --#{$prefix}status-color: #{$text-secondary};
   --#{$prefix}status-color-rgb: #{to-rgb($text-secondary)};
+  --#{$prefix}status-padding-y: #{$status-padding-y};
+  --#{$prefix}status-padding-x: #{$status-padding-x};
+  --#{$prefix}status-gap: #{$status-gap};
 
   display: inline-flex;
   align-items: center;
   height: var(--#{$prefix}status-height);
-  padding: 0.25rem 0.75rem;
-  gap: 0.5rem;
+  padding: var(--#{$prefix}status-padding-y) var(--#{$prefix}status-padding-x);
+  gap: var(--#{$prefix}status-gap);
   color: var(--#{$prefix}status-color);
   background: color-transparent(var(--#{$prefix}status-color), 0.1);
   font-size: $font-size-base;
@@ -68,7 +71,7 @@
   }
 
   .icon {
-    font-size: 1.25rem;
+    font-size: $status-icon-size;
   }
 }
 
@@ -116,7 +119,7 @@
 // Status indicator
 //
 .status-indicator {
-  --#{$prefix}status-indicator-size: 2.5rem;
+  --#{$prefix}status-indicator-size: #{$status-indicator-size};
   --#{$prefix}status-indicator-color: var(--#{$prefix}status-color, #{$text-secondary});
   display: block;
   position: relative;
@@ -125,7 +128,7 @@
 }
 
 .status-indicator-circle {
-  --#{$prefix}status-circle-size: 0.75rem;
+  --#{$prefix}status-circle-size: #{$status-circle-size};
   position: absolute;
   inset-inline-start: 50%;
   top: 50%;
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index dbabd78aa..a3f48aae9 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -6,7 +6,7 @@
 .steps {
   --#{$prefix}steps-color: #{$steps-color};
   --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
-  --#{$prefix}steps-dot-size: 0.5rem;
+  --#{$prefix}steps-dot-size: #{$steps-dot-size};
   --#{$prefix}steps-border-width: #{$steps-border-width};
   display: flex;
   flex-wrap: nowrap;
@@ -36,9 +36,10 @@
 // Step item
 //
 .step-item {
+  --#{$prefix}step-item-min-height: #{$step-item-min-height};
   position: relative;
   flex: 1 1 0;
-  min-height: 1rem;
+  min-height: var(--#{$prefix}step-item-min-height);
   margin-top: 0;
   color: inherit;
   text-align: center;
@@ -110,7 +111,7 @@
 // Steps counter
 //
 .steps-counter {
-  --#{$prefix}steps-dot-size: 1.5rem;
+  --#{$prefix}steps-dot-size: #{$steps-counter-dot-size};
   counter-reset: steps;
 
   .step-item {
@@ -126,21 +127,24 @@
 // Steps vertical
 //
 .steps-vertical {
-  --#{$prefix}steps-dot-offset: 6px;
+  --#{$prefix}steps-dot-offset: #{$steps-dot-offset};
+  --#{$prefix}steps-vertical-padding-start: #{$steps-vertical-padding-start};
+  --#{$prefix}steps-vertical-item-gap: #{$steps-vertical-item-gap};
+  --#{$prefix}steps-vertical-connector-gap: #{$steps-vertical-connector-gap};
   flex-direction: column;
 
   &.steps-counter {
-    --#{$prefix}steps-dot-offset: -2px;
+    --#{$prefix}steps-dot-offset: #{$steps-dot-offset-counter};
   }
 
   .step-item {
     text-align: start;
     padding-top: 0;
-    padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + 1rem);
+    padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + var(--#{$prefix}steps-vertical-padding-start));
     min-height: auto;
 
     &:not(:first-child) {
-      margin-top: 1rem;
+      margin-top: var(--#{$prefix}steps-vertical-item-gap);
     }
 
     &:before {
@@ -157,7 +161,7 @@
         top: var(--#{$prefix}steps-dot-offset);
         inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
         width: var(--#{$prefix}steps-border-width);
-        height: calc(100% + 1rem);
+        height: calc(100% + var(--#{$prefix}steps-vertical-connector-gap));
       }
     }
   }
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index c6705a384..1bbda1321 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -102,6 +102,9 @@
 Table sort
  */
 .table-sort {
+  --#{$prefix}table-sort-icon-size: #{$table-sort-icon-size};
+  --#{$prefix}table-sort-icon-margin-start: #{$table-sort-icon-margin-start};
+
   font: inherit;
   color: inherit;
   text-transform: inherit;
@@ -124,12 +127,12 @@ Table sort
   &:after {
     content: '';
     display: inline-flex;
-    width: 1rem;
-    height: 1rem;
+    width: var(--#{$prefix}table-sort-icon-size);
+    height: var(--#{$prefix}table-sort-icon-size);
     vertical-align: bottom;
     mask-image: $table-sort-bg-image;
     background: currentColor;
-    margin-inline-start: 0.25rem;
+    margin-inline-start: var(--#{$prefix}table-sort-icon-margin-start);
   }
 
   &.asc:after {
diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss
index 90191c6c1..990c9cda2 100644
--- a/core/scss/ui/_tags.scss
+++ b/core/scss/ui/_tags.scss
@@ -1,32 +1,47 @@
 @use '../config' as *;
 
 .tag {
-  --#{$prefix}tag-height: 1.5rem;
+  --#{$prefix}tag-height: #{$tag-height};
+  --#{$prefix}tag-padding-x: #{$tag-padding-x};
+  --#{$prefix}tag-gap: #{$tag-gap};
+  --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end};
+  --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start};
+  --#{$prefix}tag-close-size: #{$tag-close-size};
+  --#{$prefix}tag-close-font-size: #{$tag-close-font-size};
+  --#{$prefix}tag-addon-margin-start: #{$tag-addon-margin-start};
+  --#{$prefix}tag-icon-margin-end: #{$tag-icon-margin-end};
+  --#{$prefix}tag-icon-size: #{$tag-icon-size};
+  --#{$prefix}tag-check-size: #{$tag-check-size};
+
   border: $border-width solid var(--#{$prefix}border-color);
   display: inline-flex;
   align-items: center;
   height: var(--#{$prefix}tag-height);
   @include border-radius(var(--#{$prefix}border-radius));
-  padding: 0 0.5rem;
+  padding: 0 var(--#{$prefix}tag-padding-x);
   background: var(--#{$prefix}bg-surface);
   box-shadow: var(--#{$prefix}shadow-input);
-  gap: 0.5rem;
+  gap: var(--#{$prefix}tag-gap);
 
   .btn-close {
-    margin-inline-end: -0.25rem;
-    margin-inline-start: -0.125rem;
+    margin-inline-end: var(--#{$prefix}tag-close-margin-end);
+    margin-inline-start: var(--#{$prefix}tag-close-margin-start);
     padding: 0;
-    width: 1rem;
-    height: 1rem;
-    font-size: 0.5rem;
+    width: var(--#{$prefix}tag-close-size);
+    height: var(--#{$prefix}tag-close-size);
+    font-size: var(--#{$prefix}tag-close-font-size);
   }
 }
 
 .tag-badge {
+  --#{$prefix}tag-badge-padding-y: #{$tag-badge-padding-y};
+  --#{$prefix}tag-badge-padding-x: #{$tag-badge-padding-x};
+  --#{$prefix}tag-badge-margin-end: #{$tag-badge-margin-end};
+
   --#{$prefix}badge-font-size: #{$h6-font-size};
-  --#{$prefix}badge-padding-x: 0.25rem;
-  --#{$prefix}badge-padding-y: 0.125rem;
-  margin-inline-end: -0.25rem;
+  --#{$prefix}badge-padding-x: var(--#{$prefix}tag-badge-padding-x);
+  --#{$prefix}badge-padding-y: var(--#{$prefix}tag-badge-padding-y);
+  margin-inline-end: var(--#{$prefix}tag-badge-margin-end);
 }
 
 .tag-avatar,
@@ -34,20 +49,20 @@
 .tag-payment,
 .tag-icon,
 .tag-check {
-  margin-inline-start: -0.25rem;
+  margin-inline-start: var(--#{$prefix}tag-addon-margin-start);
 }
 
 .tag-icon {
   color: var(--#{$prefix}secondary);
-  margin-inline-end: -0.125rem;
-  width: 1rem;
-  height: 1rem;
+  margin-inline-end: var(--#{$prefix}tag-icon-margin-end);
+  width: var(--#{$prefix}tag-icon-size);
+  height: var(--#{$prefix}tag-icon-size);
 }
 
 .tag-check {
-  width: 1rem;
-  height: 1rem;
-  background-size: 1rem;
+  width: var(--#{$prefix}tag-check-size);
+  height: var(--#{$prefix}tag-check-size);
+  background-size: var(--#{$prefix}tag-check-size);
 }
 
 //
diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss
index d48c7f8eb..a0b8da792 100644
--- a/core/scss/ui/_toolbar.scss
+++ b/core/scss/ui/_toolbar.scss
@@ -1,13 +1,15 @@
 @use '../config' as *;
 
 .toolbar {
+  --#{$prefix}toolbar-gutter: #{$toolbar-gutter};
+
   display: flex;
   flex-wrap: nowrap;
   flex-shrink: 0;
-  margin: 0 -0.5rem;
+  margin: 0 calc(-1 * var(--#{$prefix}toolbar-gutter));
 
   > * {
-    margin: 0 0.5rem;
+    margin: 0 var(--#{$prefix}toolbar-gutter);
   }
 
   @include media-print {
diff --git a/core/scss/ui/_tracking.scss b/core/scss/ui/_tracking.scss
index ed05a0c39..d34fe36f5 100644
--- a/core/scss/ui/_tracking.scss
+++ b/core/scss/ui/_tracking.scss
@@ -4,6 +4,7 @@
   --#{$prefix}tracking-height: #{$tracking-height};
   --#{$prefix}tracking-gap-width: #{$tracking-gap-width};
   --#{$prefix}tracking-block-border-radius: #{$tracking-border-radius};
+  --#{$prefix}tracking-block-min-width: #{$tracking-block-min-width};
   display: flex;
   gap: var(--#{$prefix}tracking-gap-width);
 }
@@ -26,6 +27,6 @@
   flex: 1;
   @include border-radius(var(--#{$prefix}tracking-block-border-radius));
   height: var(--#{$prefix}tracking-height);
-  min-width: 0.25rem;
+  min-width: var(--#{$prefix}tracking-block-min-width);
   background: var(--#{$prefix}border-color);
 }
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index efc0a7a59..34de72e43 100644
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -84,11 +84,13 @@ b {
 }
 
 blockquote {
-  padding: 1rem 1rem 1rem;
+  --#{$prefix}blockquote-padding: #{$blockquote-padding};
+  --#{$prefix}blockquote-paragraph-margin-bottom: #{$blockquote-paragraph-margin-bottom};
+  padding: var(--#{$prefix}blockquote-padding) var(--#{$prefix}blockquote-padding) var(--#{$prefix}blockquote-padding);
   border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   p {
-    margin-bottom: 1rem;
+    margin-bottom: var(--#{$prefix}blockquote-paragraph-margin-bottom);
   }
 
   cite {
@@ -103,11 +105,13 @@ blockquote {
 
 ul,
 ol {
-  padding-inline-start: 1.5rem;
+  --#{$prefix}list-padding-start: #{$list-padding-start};
+  padding-inline-start: var(--#{$prefix}list-padding-start);
 }
 
 hr {
-  margin: 2rem 0;
+  --#{$prefix}hr-margin-y: #{$hr-margin-y};
+  margin: var(--#{$prefix}hr-margin-y) 0;
 }
 
 dl {
@@ -279,19 +283,22 @@ $text-variants: (
 }
 
 .steps {
-  --#{$prefix}steps-padding: 2rem;
-  --#{$prefix}steps-item-size: 1.5rem;
-  margin-inline-start: 1rem;
+  --#{$prefix}steps-padding: #{$steps-padding};
+  --#{$prefix}steps-item-size: #{$steps-item-size};
+  --#{$prefix}steps-margin-start: #{$steps-margin-start};
+  --#{$prefix}steps-margin-bottom: #{$steps-margin-bottom};
+  --#{$prefix}steps-heading-margin-top: #{$steps-heading-margin-top};
+  margin-inline-start: var(--#{$prefix}steps-margin-start);
   padding-inline-start: var(--#{$prefix}steps-padding);
   counter-reset: step;
   border-inline-start: 1px solid var(--#{$prefix}border-color);
-  margin-bottom: 2rem;
+  margin-bottom: var(--#{$prefix}steps-margin-bottom);
 
   h3 {
     counter-increment: step;
 
     &:not(:first-child) {
-      margin-top: 2.5rem !important;
+      margin-top: var(--#{$prefix}steps-heading-margin-top) !important;
     }
 
     &:before {
@@ -319,10 +326,13 @@ $text-variants: (
 }
 
 .callout {
-  margin-bottom: 1.5rem;
+  --#{$prefix}callout-margin-bottom: #{$callout-margin-bottom};
+  --#{$prefix}callout-padding-y: #{$callout-padding-y};
+  --#{$prefix}callout-padding-x: #{$callout-padding-x};
+  margin-bottom: var(--#{$prefix}callout-margin-bottom);
   border: 1px solid var(--#{$prefix}primary-200);
   @include border-radius(var(--#{$prefix}border-radius));
-  padding: 0.5rem 1rem;
+  padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
   background: var(--#{$prefix}primary-lt);
 
   & > :last-child {
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index fead9c8d8..b39019ac1 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -24,7 +24,9 @@ Form check
 }
 
 .form-check-input {
-  background-size: $form-check-input-width;
+  --#{$prefix}form-check-input-width: #{$form-check-input-width};
+
+  background-size: var(--#{$prefix}form-check-input-width);
   margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
   box-shadow: $form-check-input-box-shadow;
 
@@ -34,22 +36,26 @@ Form check
 }
 
 .form-check-label {
+  --#{$prefix}form-check-label-required-gap: #{$form-check-label-required-gap};
+
   display: block;
 
   &.required {
     &:after {
       content: '*';
-      margin-inline-start: 0.25rem;
+      margin-inline-start: var(--#{$prefix}form-check-label-required-gap);
       color: $red;
     }
   }
 }
 
 .form-check-description {
+  --#{$prefix}form-check-description-margin-top: #{$form-check-description-margin-top};
+
   display: block;
   color: var(--#{$prefix}secondary);
   font-size: $h5-font-size;
-  margin-top: 0.25rem;
+  margin-top: var(--#{$prefix}form-check-description-margin-top);
 }
 
 .form-check-single {
@@ -71,17 +77,25 @@ Form switch
 }
 
 .form-switch-lg {
-  padding-inline-start: 3.5rem;
-  min-height: 1.5rem;
+  --#{$prefix}form-switch-lg-padding-start: #{$form-switch-lg-padding-start};
+  --#{$prefix}form-switch-lg-min-height: #{$form-switch-lg-min-height};
+  --#{$prefix}form-switch-lg-height: #{$form-switch-lg-height};
+  --#{$prefix}form-switch-lg-width: #{$form-switch-lg-width};
+  --#{$prefix}form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
+  --#{$prefix}form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
+  --#{$prefix}form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
+
+  padding-inline-start: var(--#{$prefix}form-switch-lg-padding-start);
+  min-height: var(--#{$prefix}form-switch-lg-min-height);
 
   .form-check-input {
-    height: 1.5rem;
-    width: 2.75rem;
-    background-size: 1.5rem;
-    margin-inline-start: -3.5rem;
+    height: var(--#{$prefix}form-switch-lg-height);
+    width: var(--#{$prefix}form-switch-lg-width);
+    background-size: var(--#{$prefix}form-switch-lg-bg-size);
+    margin-inline-start: var(--#{$prefix}form-switch-lg-input-offset);
   }
 
   .form-check-label {
-    padding-top: 0.125rem;
+    padding-top: var(--#{$prefix}form-switch-lg-label-padding-top);
   }
 }
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index b43b2a402..277fddb0f 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -4,6 +4,7 @@ Color Input
 @use '../../config' as *;
 
 .form-colorinput {
+  --#{$prefix}form-colorinput-size: #{$form-colorinput-size};
   position: relative;
   display: inline-block;
   margin: 0;
@@ -19,8 +20,8 @@ Color Input
 
 .form-colorinput-color {
   display: block;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--#{$prefix}form-colorinput-size);
+  height: var(--#{$prefix}form-colorinput-size);
   color: $white;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
   @include border-radius(var(--#{$prefix}border-radius));
diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss
index f76dcecd1..481455666 100644
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/core/scss/ui/forms/_form-icon.scss
@@ -4,20 +4,23 @@ Icon input
 @use '../../config' as *;
 
 .input-icon {
+  --#{$prefix}input-icon-padding-end: #{$input-icon-padding-end};
+  --#{$prefix}input-icon-padding-start: #{$input-icon-padding-start};
   position: relative;
 
   .form-control:not(:last-child),
   .form-select:not(:last-child) {
-    padding-inline-end: 2.5rem;
+    padding-inline-end: var(--#{$prefix}input-icon-padding-end);
   }
 
   .form-control:not(:first-child),
   .form-select:not(:first-child) {
-    padding-inline-start: 2.5rem;
+    padding-inline-start: var(--#{$prefix}input-icon-padding-start);
   }
 }
 
 .input-icon-addon {
+  --#{$prefix}input-icon-addon-width: #{$input-icon-addon-width};
   position: absolute;
   top: 0;
   bottom: 0;
@@ -26,7 +29,7 @@ Icon input
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 2.5rem;
+  min-width: var(--#{$prefix}input-icon-addon-width);
   height: $input-height;
   color: var(--#{$prefix}icon-color);
   pointer-events: none;
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index 176aa2fb9..a2a48eb36 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -5,6 +5,8 @@ Image check
 
 .form-imagecheck {
   --#{$prefix}form-imagecheck-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}form-imagecheck-check-offset: #{$form-imagecheck-check-offset};
+  --#{$prefix}form-imagecheck-caption-padding: #{$form-imagecheck-caption-padding};
   position: relative;
   margin: 0;
   cursor: pointer;
@@ -35,8 +37,8 @@ Image check
 
   &:before {
     position: absolute;
-    top: 0.25rem;
-    inset-inline-start: 0.25rem;
+    top: var(--#{$prefix}form-imagecheck-check-offset);
+    inset-inline-start: var(--#{$prefix}form-imagecheck-check-offset);
     z-index: 1;
     display: block;
     width: $form-check-input-width;
@@ -93,7 +95,7 @@ Image check
 }
 
 .form-imagecheck-caption {
-  padding: 0.25rem;
+  padding: var(--#{$prefix}form-imagecheck-caption-padding);
   font-size: $font-size-sm;
   color: var(--#{$prefix}secondary);
   text-align: center;
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 7fc25b820..22db723a1 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -4,10 +4,12 @@ Select group
 @use '../../config' as *;
 
 .form-selectgroup {
+  --#{$prefix}form-selectgroup-gap: #{$form-selectgroup-gap};
+  --#{$prefix}form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x};
   display: inline-flex;
   margin: 0;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--#{$prefix}form-selectgroup-gap);
 
   .form-selectgroup-item {
     margin: 0;
@@ -50,7 +52,7 @@ Select group
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
-    margin: 0 -0.25rem;
+    margin: 0 var(--#{$prefix}form-selectgroup-icon-margin-x);
   }
 
   &:hover {
diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss
index 80a037202..3fcfa5ba0 100644
--- a/core/scss/ui/typo/_hr.scss
+++ b/core/scss/ui/typo/_hr.scss
@@ -11,6 +11,7 @@ Horizontal rules
 Hr text
  */
 .hr-text {
+  --#{$prefix}hr-text-gap: #{$hr-text-gap};
   display: flex;
   align-items: center;
   margin: $hr-margin-y 0;
@@ -26,16 +27,16 @@ Hr text
 
   &:before {
     content: '';
-    margin-inline-end: 0.5rem;
+    margin-inline-end: var(--#{$prefix}hr-text-gap);
   }
 
   &:after {
     content: '';
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--#{$prefix}hr-text-gap);
   }
 
   > *:first-child {
-    padding-inline-end: 0.5rem;
+    padding-inline-end: var(--#{$prefix}hr-text-gap);
     padding-inline-start: 0;
     color: var(--#{$prefix}secondary);
   }
@@ -47,8 +48,8 @@ Hr text
     }
 
     & > *:first-child {
-      padding-inline-end: 0.5rem;
-      padding-inline-start: 0.5rem;
+      padding-inline-end: var(--#{$prefix}hr-text-gap);
+      padding-inline-start: var(--#{$prefix}hr-text-gap);
     }
   }
 
@@ -64,7 +65,7 @@ Hr text
 
     & > *:first-child {
       padding-inline-end: 0;
-      padding-inline-start: 0.5rem;
+      padding-inline-start: var(--#{$prefix}hr-text-gap);
     }
   }
 
@@ -74,5 +75,6 @@ Hr text
 }
 
 .hr-text-spaceless {
-  margin: -0.5rem 0;
+  --#{$prefix}hr-text-spaceless-margin-y: #{$hr-text-spaceless-margin-y};
+  margin: var(--#{$prefix}hr-text-spaceless-margin-y) 0;
 }