feat(ui-shell): support theming

Closes #2457

Author: metonym

css/_ui-shell.scss

@@ -71,9 +71,9 @@
 
   $: hasIconOnly = iconDescription && !(text || $$slots.textChildren);
   $: buttonClass = [
-    hasIconOnly && "bx--btn bx--btn--primary",
+    hasIconOnly && "bx--btn",
     hasIconOnly && "bx--tooltip__trigger bx--tooltip--a11y",
-    hasIconOnly && "bx--btn--icon-only bx--btn--icon-only--bottom",
+    hasIconOnly && "bx--btn--icon-only--bottom",
     hasIconOnly && `bx--tooltip--align-${tooltipAlignment}`,
     $$restProps.class,
   ]
@@ -140,26 +140,3 @@
     <slot />
   </div>
 {/if}
-
-<style>
-  :global(.bx--header__action--text) {
-    display: inline-flex;
-    align-items: center;
-    width: auto;
-
-    /** 2px bottom padding aligns icon with `HeaderAction` */
-    padding: 0 1rem 2px 1rem;
-
-    /** `body-short-01` styles */
-    font-size: 0.875rem;
-    line-height: 1.28572;
-    letter-spacing: 0.16px;
-
-    /** Same color as `Header` platformName */
-    color: #f4f4f4;
-  }
-
-  :global(.bx--header__action-text) {
-    margin-left: 0.75rem;
-  }
-</style>

css/all.css

@@ -33,57 +33,3 @@
 >
   <slot name="icon"><svelte:component this={icon} size={20} /></slot>
 </a>
-
-<style>
-  :global(.bx--header__global .bx--header__action) {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-width: 3rem;
-    min-height: 3rem;
-    /** Hot fix to align icon with `HeaderAction` */
-    padding-bottom: 2px;
-  }
-
-  :global(.bx--header__global a.bx--header__action),
-  :global(
-      .bx--header__global
-      button.bx--header__action:not(.bx--header-search-button)
-    ) {
-    position: relative;
-    text-decoration: none;
-    color: inherit;
-    transition:
-      background-color 110ms,
-      border-color 110ms;
-    border: 0.0625rem solid rgba(0, 0, 0, 0);
-    background-color: transparent;
-  }
-
-  :global(.bx--header__global a.bx--header__action:hover),
-  :global(
-      .bx--header__global
-      button.bx--header__action:not(.bx--header-search-button):hover
-    ) {
-    background-color: #353535;
-  }
-
-  :global(.bx--header__global a.bx--header__action:focus),
-  :global(
-      .bx--header__global
-      button.bx--header__action:not(.bx--header-search-button):focus
-    ) {
-    border-color: #fff;
-    outline: none;
-  }
-
-  :global(.bx--header__global a.bx--header__action:active),
-  :global(
-      .bx--header__global
-      button.bx--header__action:not(.bx--header-search-button):active
-    ) {
-    background-color: #393939;
-  }
-</style>

css/g10.css

@@ -2,19 +2,3 @@
   <li class:bx--header-panel-divider={true}><slot /></li>
 {/if}
 <hr class:bx--switcher__item--divider={true}>
-
-<style>
-  /**
-   * Carbon does not support a divider with a subject.
-   * We apply custom styles using the switcher subject divider
-   * from https://carbondesignsystem.com/ as a reference.
-   */
-
-  :global(.bx--header-panel-divider) {
-    margin: 2rem 1rem 0;
-    font-size: 0.75rem;
-    line-height: 1.3;
-    letter-spacing: 0.02rem;
-    color: #c6c6c6;
-  }
-</style>