Rename media manager CSS Vars and move to dedicated file (joomla#41903)

build/media_source/com_media/scss/_variables.scss

@@ -4,6 +4,7 @@ $highlight-color:                   #2a69b8;
 $border-color:                      var(--template-bg-dark-7);
 $border-radius:                     .25rem;
 $box-shadow-color:                  var(--template-bg-dark-50);
+$container-bg:                      var(--com-media-manager-content-bg, #fff);
 
 // Layout
 $col-main-panel-width:              83.3333%;
@@ -12,18 +13,18 @@ $col-gutter-width:                  $gutter-width;
 $col-box-shadow:                    0 2px 10px -8px $box-shadow-color;
 
 // Sidebar
-$sidebar-drive-bg:                  var(--media-manager-content-bg, #fff);
+$sidebar-drive-bg:                  var(--com-media-manager-content-bg, #fff);
 $sidebar-tree-line-color:           $border-color;
 $sidebar-tree-icon-color:           var(--template-bg-dark-60);
 $sidebar-tree-line-height:          26px;
 $sidebar-tree-folder-icon:          "\f07b";
 $sidebar-tree-item-hover-bg:        #e1e1e1;
 $sidebar-active-icon-color:         $highlight-color;
-$sidebar-disk-name-color:           var(--media-manager-disk-name-color, var(--template-bg-dark));
+$sidebar-disk-name-color:           var(--com-media-manager-disk-name-color, var(--template-bg-dark));
 
 // Toolbar
 $toolbar-height:                     46px;
-$toolbar-bg:                         var(--media-manager-content-bg, #fff);
+$toolbar-bg:                         var(--com-media-manager-content-bg, #fff);
 $toolbar-icon-width:                 50px;
 $toolbar-icon-color:                 var(--template-bg-dark-60);
 $toolbar-icon-bg-hover:              #f0f0f0;
@@ -33,11 +34,11 @@ $toolbar-icon-active-bg-color:       var(--template-bg-dark-60);
 $toolbar-icon-active-bg-color-hover: var(--template-bg-dark-80);
 
 // Breadcrumbs
-$breadcrumbs-bg:                    var(--media-manager-overlay-bg, var(--template-bg-dark-3));
-$breadcrumbs-current-bg:            var(--media-manager-content-bg, #fff);
+$breadcrumbs-bg:                    var(--com-media-manager-overlay-bg, var(--template-bg-dark-3));
+$breadcrumbs-current-bg:            var(--com-media-manager-content-bg, #fff);
 
 // Media Browser
-$browser-background-color:          var(--media-manager-overlay-bg, var(--template-bg-dark-3));
+$browser-background-color:          var(--com-media-manager-overlay-bg, var(--template-bg-dark-3));
 
 // Media Browser Grid
 $grid-gutter-width:                 $col-gutter-width;
@@ -66,10 +67,10 @@ $table-item-icon-bg-selected:       #006898;
 $table-item-bg-hover:               rgba(0, 0, 0, .03);
 
 // Media Info bar
-$info-bg:                           var(--media-manager-overlay-bg, var(--template-bg-dark-3));
-$info-title-bg:                     var(--media-manager-overlay-header-bg, var(--template-bg-dark-5));
+$info-bg:                           var(--com-media-manager-overlay-bg, var(--template-bg-dark-3));
+$info-title-bg:                     var(--com-media-manager-overlay-header-bg, var(--template-bg-dark-5));
 $info-dt-width:                     33.33333%;
-$info-dt-color:                     var(--media-manager-infobar-dt-color, rgba(0, 0, 0, .54));
+$info-dt-color:                     var(--com-media-manager-infobar-dt-color, rgba(0, 0, 0, .54));
 $info-dd-width:                     66.66667%;
 $info-close-color:                  var(--template-bg-dark-60);
 $info-close-color-hover:            var(--template-bg-dark-40);

build/media_source/com_media/scss/components/_layout.scss

@@ -3,7 +3,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: 1rem;
-  background-color: var(--media-manager-content-bg, #fff);
+  background-color: $container-bg;
   border-radius: $border-radius;
   box-shadow: $col-box-shadow;
 

build/media_source/templates/administrator/atum/scss/_variables-dark.scss

@@ -1,10 +1,6 @@
 $atum-colors-dark: (
   template-quickicon-color:        var(--template-bg-dark-5),
   focus-shadow:                    var(--gray-800),
-  media-manager-overlay-bg:        var(--template-bg-dark-90),
-  media-manager-infobar-dt-color:  rgba(255, 255, 255, .54),
-  media-manager-overlay-header-bg: var(--template-bg-dark-80),
-  media-manager-disk-name-color:   var(--template-text-light),
 ) !default;
 
 $link-hover-color-dark: lighten($light-blue, 20%);

build/media_source/templates/administrator/atum/scss/_variables.scss

@@ -84,11 +84,6 @@ $atum-colors: (
   template-bg-dark-75:             hsl(var(--hue), 40%, 25%),
   template-bg-dark-80:             hsl(var(--hue), 40%, 20%),
   template-bg-dark-90:             hsl(var(--hue), 40%, 10%),
-  media-manager-overlay-header-bg: var(--template-bg-dark-5),
-  media-manager-infobar-dt-color:  rgba(0, 0, 0, .54),
-  media-manager-content-bg:        var(--body-bg),
-  media-manager-overlay-bg:        var(--template-bg-dark-3),
-  media-manager-disk-name-color:   var(--template-text-dark),
 );
 
 $colors: (

build/media_source/templates/administrator/atum/scss/pages/_com_media.scss

@@ -0,0 +1,16 @@
+:root {
+  --com-media-manager-overlay-header-bg: var(--template-bg-dark-5);
+  --com-media-manager-infobar-dt-color: rgba(0, 0, 0, .54);
+  --com-media-manager-content-bg: var(--body-bg);
+  --com-media-manager-overlay-bg: var(--template-bg-dark-3);
+  --com-media-manager-disk-name-color: var(--template-text-dark);
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --com-media-manager-overlay-bg: var(--template-bg-dark-90);
+    --com-media-manager-infobar-dt-color: rgba(255, 255, 255, .54);
+    --com-media-manager-overlay-header-bg: var(--template-bg-dark-80);
+    --com-media-manager-disk-name-color: var(--template-text-light);
+  }
+}

build/media_source/templates/administrator/atum/scss/template.scss

@@ -69,6 +69,7 @@
 @import "pages/com_content";
 @import "pages/com_cpanel";
 @import "pages/com_joomlaupdate";
+@import "pages/com_media";
 @import "pages/com_modules";
 @import "pages/com_tags";
 @import "pages/com_privacy";