[1.0] Refactor common styles to be more modular

[micjamking]

Currently, most of the styles are contained in a single common Sass partial; this was initially done for efficiency when only elements and console panels were being skinned. With the addition of the elements panel, and (minor) potential for further growth, it makes the current structure unscalable and difficult to maintain.

app/styles/modules/_common-styles.scss#L2

@mixin styles(
$background,            // Background
$background-highlight,  // Background - Highlight
$comments,              // Comments / Secondary Content
$body-text,             // Body text / default code / primary content
$body-text-highlight,   // Optional emphasized content
$property,              // CSS Properties
$pseudo,                // CSS3 pseudo-selectors / elements
$keyword,               // CSS Keywords (!important, etc.)
$selectors,             // HTML Tags / CSS ID/Class Selectors / JS Keywords
$strings,               // HTML/CSS/JS Strings
$operators,             // CSS Tag Selectors / JS Operators (in Canary)
$accent                 // Accent / Highlight
){

  // Panels
  .elements,
  .elements ::shadow,
  .sources,
  .console,
  .console-view-wrapper {
    ...
  }
}

Ideally, the @mixin styles() itself would not change, avoiding any negative impact on the theme Sass files. The proposed solution would be to use individual @include's within the @mixin styles() itself, and edit the styles as a mixin within unique partials.

@mixin styles(
$background,            // Background
$background-highlight,  // Background - Highlight
$comments,              // Comments / Secondary Content
$body-text,             // Body text / default code / primary content
$body-text-highlight,   // Optional emphasized content
$property,              // CSS Properties
$pseudo,                // CSS3 pseudo-selectors / elements
$keyword,               // CSS Keywords (!important, etc.)
$selectors,             // HTML Tags / CSS ID/Class Selectors / JS Keywords
$strings,               // HTML/CSS/JS Strings
$operators,             // CSS Tag Selectors / JS Operators (in Canary)
$accent                 // Accent / Highlight
){

  // General
  @include common();
  @include devtools_window();

  // Panels
  @include panel_elements();
  @include panel_sources();
  @include panel_console();
}

The theme-config.scss will need to be updated to include the additional partials containing the mixins for building the theme.

app/styles/base/_theme-config.scss#L12

/**
 * Modules
 */
@import "modules/common";
@import "modules/devtools-window";
@import "modules/panel-console";
@import "modules/panel-elements";
@import "modules/panel-sources";
@import "modules/styles";