Resolving a "compressed-looking" control panel menu in a custom 7.3 theme

Issue

• While attempting to upgrade our custom theme from 7.2 to 7.3, we have run into an issue where there is a "compressed" look for the new top-right control panel menu when comparing the custom theme with the classic theme (with less vertical white space than the Classic theme). 
• What classes are used to define this spacing, so that I can adjust my custom theme?

Environment

• DXP 7.3

Resolution

• In 7.3, the Classic theme contains some additional files when compared with the 7.2 version, including the following:
  • custom_properties.scss
  • custom_properties_set.scss
  • custom_properties_variables.scss
  • liferay_variables_custom.scss
• In those files, the spacers are defined, and can be modified to fit your team's use case with something such as:
  

  // Spacers 
  --spacer: #{$spacer};
  
  @each $key, $value in $spacers { 
  $multiplier: nth($value, 1) / $spacer; 
  @if ($value == 0) { 
  $multiplier: 0; 
  }
  
  --spacer-#{$key}: calc(var(--spacer) * #{$multiplier}); 
  }

Additional Information

• Related information can be found in the following articles:
  • How to use CSS Custom Properties (CCP)
  • UI Architecture: Themes
  • Configuring Portlets, Themes, and Layout Templates
  • Changing your Site's Theme