From 0c7996321bd37eec406538fc87ed2dfa84c87209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Sat, 15 Nov 2025 13:37:23 +0100
Subject: [PATCH] feat: Add print styles using `media-print` mixin (#2531)

---
 .changeset/media-print-mixin.md |  5 +++++
 core/scss/layout/_core.scss     |  2 +-
 core/scss/layout/_footer.scss   |  4 ++++
 core/scss/layout/_page.scss     |  2 +-
 core/scss/mixins/_mixins.scss   |  9 +++++++++
 core/scss/ui/_buttons.scss      | 12 ++++++++++++
 core/scss/ui/_cards.scss        |  4 ++--
 core/scss/ui/_close.scss        |  4 ++++
 core/scss/ui/_dropdowns.scss    |  4 ++++
 core/scss/ui/_modals.scss       |  6 ++++++
 core/scss/ui/_offcanvas.scss    |  8 +++++++-
 core/scss/ui/_pagination.scss   |  4 ++++
 core/scss/ui/_popovers.scss     |  3 +++
 core/scss/ui/_tables.scss       |  2 +-
 core/scss/ui/_toasts.scss       |  4 ++++
 core/scss/ui/_toolbar.scss      |  4 ++++
 16 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/media-print-mixin.md

diff --git a/.changeset/media-print-mixin.md b/.changeset/media-print-mixin.md
new file mode 100644
index 000000000..646b3f1d7
--- /dev/null
+++ b/.changeset/media-print-mixin.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Added `media-print` mixin and print styles to hide interactive components during printing.
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index a337be154..cb496bc82 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -14,7 +14,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  @media print {
+  @include media-print {
     background: transparent;
   }
 }
diff --git a/core/scss/layout/_footer.scss b/core/scss/layout/_footer.scss
index 41f502f2f..cdcfa2430 100644
--- a/core/scss/layout/_footer.scss
+++ b/core/scss/layout/_footer.scss
@@ -4,6 +4,10 @@
   padding: $footer-padding-y 0;
   color: $footer-color;
   margin-top: auto;
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .footer-transparent {
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index 729a65667..377e101d7 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
 
-  @media print {
+  @include media-print {
     margin: 0 !important;
   }
 }
diff --git a/core/scss/mixins/_mixins.scss b/core/scss/mixins/_mixins.scss
index 9f145bdf3..dc5bb5df4 100644
--- a/core/scss/mixins/_mixins.scss
+++ b/core/scss/mixins/_mixins.scss
@@ -66,3 +66,12 @@
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
   }
 }
+
+//
+// Print styles
+//
+@mixin media-print {
+  @media print {
+    @content;
+  }
+}
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 078433166..d591f8f79 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -216,6 +216,10 @@
   bottom: 1rem;
   left: 1rem;
   box-shadow: var(--#{$prefix}shadow-dropdown);
+
+  @include media-print {
+    display: none;
+  }
 }
 
 //
@@ -277,10 +281,18 @@
   &.show {
     color: var(--#{$prefix}primary);
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .btn-actions {
   display: flex;
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .btn-animate-icon {
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index 3dbb4a237..70c1758f5 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -1,7 +1,7 @@
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
-  @media print {
+  @include media-print {
     border: none;
     box-shadow: none;
   }
@@ -341,7 +341,7 @@ Stacked card
     }
   }
 
-  @media print {
+  @include media-print {
     padding: 0;
   }
 
diff --git a/core/scss/ui/_close.scss b/core/scss/ui/_close.scss
index aab6ed9bd..da8ad3e3a 100644
--- a/core/scss/ui/_close.scss
+++ b/core/scss/ui/_close.scss
@@ -39,6 +39,10 @@
     user-select: none;
     opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 // @mixin btn-close-white() {
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 54004a9ea..f421a70ae 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -14,6 +14,10 @@
       display: flex;
     }
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .dropdown-item {
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index a1aba5a78..1c9ce2672 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -65,3 +65,9 @@
   max-width: none;
   margin: 0 $modal-dialog-margin;
 }
+
+.modal {
+  @include media-print {
+    display: none !important;
+  }
+}
diff --git a/core/scss/ui/_offcanvas.scss b/core/scss/ui/_offcanvas.scss
index 956cd3fd0..d40862050 100644
--- a/core/scss/ui/_offcanvas.scss
+++ b/core/scss/ui/_offcanvas.scss
@@ -1,3 +1,9 @@
+.offcanvas {
+  @include media-print {
+    display: none;
+  }
+}
+
 .offcanvas-header {
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
@@ -14,4 +20,4 @@
 
 .offcanvas-narrow {
   width: 20rem;
-}
\ No newline at end of file
+}
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index 00c3b28e6..7ea249d45 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -4,6 +4,10 @@
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
   line-height: var(--#{$prefix}body-line-height);
+
+  @include media-print {
+    display: none;
+  }
 }
 
 .page-link {
diff --git a/core/scss/ui/_popovers.scss b/core/scss/ui/_popovers.scss
index b0912ae5c..85fccb2c5 100644
--- a/core/scss/ui/_popovers.scss
+++ b/core/scss/ui/_popovers.scss
@@ -1,2 +1,5 @@
 .popover {
+  @include media-print {
+    display: none;
+  }
 }
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index 00e475686..8cb22a198 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -7,7 +7,7 @@
       padding-bottom: $table-th-padding-y;
       white-space: nowrap;
 
-      @media print {
+      @include media-print {
         background: transparent;
       }
     }
diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss
index d404b1744..76fb0a4ce 100644
--- a/core/scss/ui/_toasts.scss
+++ b/core/scss/ui/_toasts.scss
@@ -9,6 +9,10 @@
   button[data-bs-dismiss="toast"] {
     outline: none;
   }
+
+  @include media-print {
+    display: none;
+  }
 }
 
 @each $state, $value in $theme-colors {
diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss
index 0f0bc0487..629ff1fb0 100644
--- a/core/scss/ui/_toolbar.scss
+++ b/core/scss/ui/_toolbar.scss
@@ -7,4 +7,8 @@
   > * {
     margin: 0 .5rem;
   }
+
+  @include media-print {
+    display: none;
+  }
 }