From 2b0578880aa1993e25dfcbc503f6a8c9589427ec Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 5 Feb 2026 12:50:49 -0500
Subject: [PATCH] Remove var mixin

---
 postcss.config.js            |   4 +-
 src/styles/_mixins.scss      |   8 --
 src/themes/_base/_theme.scss | 169 +++++++++++++++++------------------
 src/themes/dark/theme.scss   |   3 +-
 src/themes/light/theme.scss  |   5 +-
 5 files changed, 90 insertions(+), 99 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index aee1640a54..7fc8c4b2ab 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,13 +3,15 @@ const postcssPresetEnv = require('postcss-preset-env');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 
+const DEV_MODE = process.env.NODE_ENV !== 'production';
+
 const config = () => ({
     plugins: [
         // Explicitly specify browserslist to override ones from node_modules
         // For example, Swiper has it in its package.json
         postcssPresetEnv({ browsers: packageConfig.browserslist }),
         autoprefixer({ overrideBrowserslist: packageConfig.browserslist }),
-        cssnano()
+        DEV_MODE ? null : cssnano()
     ]
 });
 
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 578bc0b6eb..aaacf7e225 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -10,11 +10,3 @@
         #{$property}: max($max-value, $default);
     }
 }
-
-/**
- * Helper mixin to add properties using css variables with fallback values.
- */
-@mixin var($property, $variable, $default, $important: false) {
-    #{$property}: $default if($important, !important, null);
-    #{$property}: var($variable) if($important, !important, null);
-}
diff --git a/src/themes/_base/_theme.scss b/src/themes/_base/_theme.scss
index 2e84323c26..a1f9fc7b83 100644
--- a/src/themes/_base/_theme.scss
+++ b/src/themes/_base/_theme.scss
@@ -1,4 +1,3 @@
-@use '../../styles/mixins' as *;
 @use './palette' as palette;
 
 // Theme options
@@ -47,25 +46,25 @@ $snackbarContent-color: rgba(255, 255, 255, 0.87) !default;
 
 .skinHeader,
 html {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 }
 
 .wizardStartForm,
 .ui-corner-all,
 .ui-shadow {
-    @include var(background-color, --jf-palette-background-default, $background-default);
+    background-color: var(--jf-palette-background-default, $background-default);
 }
 
 .emby-collapsible-button {
-    @include var(border-color, --jf-palette-divider, $divider);
+    border-color: var(--jf-palette-divider, $divider);
 }
 
 .skinHeader-withBackground {
-    @include var(background-color, --jf-palette-AppBar-defaultBg, $appBar-defaultBg);
+    background-color: var(--jf-palette-AppBar-defaultBg, $appBar-defaultBg);
 }
 
 .skinHeader.semiTransparent {
-    @include var(background-color, --jf-palette-AppBar-transparentBg, $appBar-transparentBg);
+    background-color: var(--jf-palette-AppBar-transparentBg, $appBar-transparentBg);
     backdrop-filter: none !important;
 
     .layout-tv & {
@@ -86,7 +85,7 @@ html {
 .nowPlayingPlaylist,
 .nowPlayingContextMenu,
 html {
-    @include var(background-color, --jf-palette-background-default, $background-default);
+    background-color: var(--jf-palette-background-default, $background-default);
 }
 
 .backgroundContainer.withBackdrop {
@@ -95,47 +94,47 @@ html {
 
 @media (hover: hover) and (pointer: fine) {
     .paper-icon-button-light:hover:not(:disabled) {
-        @include var(color, --jf-palette-primary-main, $primary-main);
+        color: var(--jf-palette-primary-main, $primary-main);
         background-color: $primary-hover;
         background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
     }
 }
 
 .paper-icon-button-light:active:not(:disabled) {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
     background-color: $primary-hover;
     background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
 }
 
 .paper-icon-button-light.show-focus:focus {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 a[data-role=button],
 .fab,
 .raised {
-    @include var(background, --jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    background: var(--jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 
     &:focus,
     &:hover {
-        @include var(background, --jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
+        background: var(--jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
     }
 }
 
 .button-submit {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    background: var(--jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText);
 
     &:focus,
     &:hover {
-        @include var(background, --jf-palette-primary-dark, $primary-dark);
+        background: var(--jf-palette-primary-dark, $primary-dark);
     }
 }
 
 .button-delete {
-    @include var(background, --jf-palette-error-main, $error-main);
-    @include var(color, --jf-palette-error-contrastText, $error-contrastText);
+    background: var(--jf-palette-error-main, $error-main);
+    color: var(--jf-palette-error-contrastText, $error-contrastText);
 }
 
 .checkboxLabel {
@@ -147,13 +146,13 @@ a[data-role=button],
 .inputLabelUnfocused,
 .paperListLabel,
 .textareaLabelUnfocused {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 }
 
 .inputLabelFocused,
 .selectLabelFocused,
 .textareaLabelFocused {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .checkboxOutline {
@@ -165,7 +164,7 @@ a[data-role=button],
 .formDialogHeader:not(.formDialogHeader-clear),
 .paperList,
 .visualCardBox {
-    @include var(background-color, --jf-palette-background-paper, $background-paper);
+    background-color: var(--jf-palette-background-paper, $background-paper);
 }
 
 .layout-tv .formDialogFooter:not(.formDialogFooter-clear) {
@@ -179,11 +178,11 @@ a[data-role=button],
 .nowPlayingBarSecondaryText,
 .programSecondaryTitle,
 .secondaryText {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 }
 
 .actionsheetDivider {
-    @include var(background, --jf-palette-divider, $divider);
+    background: var(--jf-palette-divider, $divider);
 }
 
 .cardFooter-vibrant .cardText-secondary {
@@ -192,72 +191,72 @@ a[data-role=button],
 }
 
 .toast {
-    @include var(background, --jf-palette-SnackbarContent-bg, $snackbarContent-bg);
-    @include var(color, --jf-palette-SnackbarContent-color, $snackbarContent-color);
+    background: var(--jf-palette-SnackbarContent-bg, $snackbarContent-bg);
+    color: var(--jf-palette-SnackbarContent-color, $snackbarContent-color);
 }
 
 .appfooter,
 .playlistSectionButton {
-    @include var(background, --jf-palette-background-paper, $background-paper);
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    background: var(--jf-palette-background-paper, $background-paper);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 }
 
 .itemSelectionPanel {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
+    border-color: var(--jf-palette-primary-main, $primary-main);
     border-width: 1px;
     border-style: solid;
 }
 
 .selectionCommandsPanel {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    background: var(--jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText);
 }
 
 .upNextDialog-countdownText {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .alphaPickerButton {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    color: var(--jf-palette-text-secondary, $text-secondary);
     background-color: transparent;
 
     &-selected {
-        @include var(color, --jf-palette-text-primary, $text-primary);
+        color: var(--jf-palette-text-primary, $text-primary);
     }
 
     &-tv:focus {
-        @include var(background-color, --jf-palette-primary-main, $primary-main);
-        @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+        background-color: var(--jf-palette-primary-main, $primary-main);
+        color: var(--jf-palette-primary-contrastText, $primary-contrastText);
     }
 }
 
 .noBackdropTransparency .detailPagePrimaryContainer,
 .noBackdropTransparency .detailPageSecondaryContainer {
-    @include var(background-color, --jf-palette-background-default, $background-default);
+    background-color: var(--jf-palette-background-default, $background-default);
 }
 
 .listItem-border {
-    @include var(border-color, --jf-palette-divider, $divider);
+    border-color: var(--jf-palette-divider, $divider);
 }
 
 .listItem:focus {
-    @include var(background-color, --jf-palette-action-focus, $action-focus);
+    background-color: var(--jf-palette-action-focus, $action-focus);
 }
 
 .listItem:hover {
-    @include var(background-color, --jf-palette-action-hover, $action-hover);
+    background-color: var(--jf-palette-action-hover, $action-hover);
 }
 
 .progressring-spiner {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
+    border-color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .button-flat:hover {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .button-link {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .mediaInfoText {
@@ -268,23 +267,23 @@ a[data-role=button],
 
 .emby-input,
 .emby-textarea {
-    @include var(background, --jf-palette-FilledInput-bg, $filledInput-bg);
-    @include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
+    background: var(--jf-palette-FilledInput-bg, $filledInput-bg);
+    border-color: var(--jf-palette-FilledInput-bg, $filledInput-bg);
     color: inherit;
     border-width: 0.16em;
     border-style: solid;
     border-radius: 0.2em;
 
     &:focus {
-        @include var(border-color, --jf-palette-primary-main, $primary-main);
+        border-color: var(--jf-palette-primary-main, $primary-main);
     }
 }
 
 .emby-select-withcolor {
     // NOTE: This should use `FilledInput-bg` to match other form elements,
     // but that will break the native dropdown styling
-    @include var(background, --jf-palette-background-paper, $background-paper);
-    @include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
+    background: var(--jf-palette-background-paper, $background-paper);
+    border-color: var(--jf-palette-FilledInput-bg, $filledInput-bg);
     color: inherit;
     border-width: 0.16em;
     border-style: solid;
@@ -292,78 +291,78 @@ a[data-role=button],
 }
 
 .emby-select-withcolor > option {
-    @include var(background, --jf-palette-background-paper, $background-paper);
+    background: var(--jf-palette-background-paper, $background-paper);
     color: inherit;
 }
 
 .emby-select-withcolor:focus {
-    @include var(border-color, --jf-palette-primary-main, $primary-main, true);
+    border-color: var(--jf-palette-primary-main, $primary-main) !important;
 }
 
 .emby-select-tv-withcolor:focus {
-    @include var(background-color, --jf-palette-primary-main, $primary-main, true);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
+    background-color: var(--jf-palette-primary-main, $primary-main) !important;
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText) !important;
 }
 
 .emby-checkbox:checked + span + .checkboxOutline {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
+    border-color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .emby-checkbox:focus + span + .checkboxOutline {
-    @include var(border-color, --jf-palette-common-white, $common-white);
+    border-color: var(--jf-palette-common-white, $common-white);
 }
 
 .emby-checkbox:checked + span + .checkboxOutline,
 .itemProgressBarForeground {
-    @include var(background-color, --jf-palette-primary-main, $primary-main);
+    background-color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
+    border-color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .itemProgressBarForeground-recording {
-    @include var(background-color, --jf-palette-error-light, $error-light);
+    background-color: var(--jf-palette-error-light, $error-light);
 }
 
 .countIndicator,
 .fullSyncIndicator,
 .mediaSourceIndicator,
 .playedIndicator {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    background: var(--jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText);
 }
 
 .mainDrawer,
 .drawer-open {
-    @include var(background-color, --jf-palette-background-default, $background-default);
+    background-color: var(--jf-palette-background-default, $background-default);
 }
 
 .navMenuOption:hover {
-    @include var(background, --jf-palette-action-hover, $action-hover);
+    background: var(--jf-palette-action-hover, $action-hover);
 }
 
 .navMenuOption-selected {
-    @include var(background, --jf-palette-primary-main, $primary-main, true);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    background: var(--jf-palette-primary-main, $primary-main) !important;
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText);
 }
 
 .emby-button.show-focus:focus {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    background: var(--jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText);
 }
 
 .emby-tab-button {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 }
 
 .emby-tab-button-active {
-    @include var(color, --jf-palette-text-primary, $text-primary);
+    color: var(--jf-palette-text-primary, $text-primary);
 }
 
 .emby-tab-button.show-focus:focus,
 .emby-tab-button:hover {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .channelPrograms,
@@ -394,8 +393,8 @@ a[data-role=button],
 
 .guide-channelHeaderCell:focus,
 .programCell:focus {
-    @include var(background-color, --jf-palette-primary-main, $primary-main, true);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
+    background-color: var(--jf-palette-primary-main, $primary-main) !important;
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText) !important;
 }
 
 .guide-programTextIcon {
@@ -409,33 +408,33 @@ a[data-role=button],
 
 .guide-date-tab-button.emby-tab-button-active,
 .guide-date-tab-button:focus {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 .guide-date-tab-button.show-focus:focus {
-    @include var(background-color, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    background-color: var(--jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-contrastText, $primary-contrastText);
 }
 
 .infoBanner {
-    @include var(background, --jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
-    @include var(color, --jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
+    background: var(--jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
+    color: var(--jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
     padding: 1em;
     border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating,
 .playstatebutton-icon-played {
-    @include var(color, --jf-palette-error-light, $error-light);
+    color: var(--jf-palette-error-light, $error-light);
 }
 
 .buttonActive {
-    @include var(color, --jf-palette-primary-main, $primary-main, true);
+    color: var(--jf-palette-primary-main, $primary-main) !important;
 }
 
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
-    @include var(border-color, --jf-palette-primary-main, $primary-main, true);
+    border-color: var(--jf-palette-primary-main, $primary-main) !important;
 }
 
 ::-webkit-scrollbar-track {
@@ -463,36 +462,36 @@ a[data-role=button],
 }
 
 .metadataSidebarIcon {
-    @include var(color, --jf-palette-primary-main, $primary-main);
+    color: var(--jf-palette-primary-main, $primary-main);
 }
 
 #comicsPlayer,
 #bookPlayer,
 #pdfPlayer {
-    @include var(background-color, --jf-palette-background-default, $background-default);
+    background-color: var(--jf-palette-background-default, $background-default);
 }
 
 #comicsPlayer .swiper-pagination {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-    @include var(color, --jf-palette-text-primary, $text-primary);
+    background-color: var(--jf-palette-background-default, $background-default);
+    color: var(--jf-palette-text-primary, $text-primary);
 }
 
 #bookPlayer .topButtons,
 #comicsPlayer .actionButtonIcon,
 #pdfPlayer .actionButtonIcon {
-    @include var(color, --jf-palette-text-primary, $text-primary);
+    color: var(--jf-palette-text-primary, $text-primary);
 }
 
 #dialogToc {
-    @include var(background-color, --jf-palette-background-default, $background-default);
+    background-color: var(--jf-palette-background-default, $background-default);
 }
 
 #dialogToc .toc li a,
 #dialogToc .bookplayerButtonIcon {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    color: var(--jf-palette-text-secondary, $text-secondary);
 
     &:active,
     &:hover {
-        @include var(color, --jf-palette-primary-main, $primary-main);
+        color: var(--jf-palette-primary-main, $primary-main);
     }
 }
diff --git a/src/themes/dark/theme.scss b/src/themes/dark/theme.scss
index 02a593c3e2..26c19ffec4 100644
--- a/src/themes/dark/theme.scss
+++ b/src/themes/dark/theme.scss
@@ -24,8 +24,7 @@
 
 /* Detail ribbon on item details pages */
 .detailRibbon {
-    background: rgba(32, 32, 32, 0.8);
-    background: rgba(var(--jf-palette-background-paperChannel) / 0.8);
+    background: rgba(var(--jf-palette-background-paperChannel, 32 32 32) / 0.8);
 
     .layout-tv & {
         background: none;
diff --git a/src/themes/light/theme.scss b/src/themes/light/theme.scss
index e882e88b4d..47a98b19a1 100644
--- a/src/themes/light/theme.scss
+++ b/src/themes/light/theme.scss
@@ -1,4 +1,3 @@
-@use '../../styles/mixins' as *;
 @use '../_base/palette' as palette;
 
 /* Import the base theme with overrides */
@@ -26,8 +25,8 @@
 
 // Override the alpha picker selected colors
 .alphaPickerButton-selected {
-    @include var(background-color, --jf-palette-primary-main, palette.$primary-main);
-    @include var(color, --jf-palette-primary-contrastText, palette.$primary-contrastText);
+    background-color: var(--jf-palette-primary-main, palette.$primary-main);
+    color: var(--jf-palette-primary-contrastText, palette.$primary-contrastText);
 }
 
 /* Card background color variants */