refactor(system-banner): use relative units for system-banner

Author: spliffone

projects/element-ng/system-banner/system-banner.component.scss

@@ -7,7 +7,7 @@
   inline-size: 100%;
 
   .banner {
-    padding-block: map.get(variables.$spacers, 1);
+    padding-block: variables.$si-system-banner-padding-y;
     padding-inline: map.get(variables.$spacers, 5);
   }
 

projects/element-theme/src/styles/variables/_si-vars.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './spacers';
 @use './animations';
 
 // Custom variables
@@ -12,7 +14,8 @@ $btn-width-normal: 80px;
 $si-application-header-height: 48px;
 
 $si-titlebar-height: 36px;
-$si-system-banner-height: 20px;
+$si-system-banner-padding-y: map.get(spacers.$spacers, 1);
+$si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y);
 
 // allows adding a custom titlebar on top
 // stylelint-disable-next-line length-zero-no-unit