fix(docs): Light Theme Code Preview Colors

Also made tablet sized layouts behave like desktop

Author: mlaursen

packages/documentation/src/components/DemoSandbox/SandboxFileTree.module.scss

@@ -1,6 +1,11 @@
 @import '~@react-md/app-bar/dist/mixins';
+@import '~@react-md/sheet/dist/variables';
 @import '~@react-md/tree/dist/mixins';
 
+.sheet {
+  background-color: $rmd-sheet-dark-elevation-background-color;
+}
+
 .tree {
   @include rmd-tree-depths(
     $selector-prefix: ':global ',

packages/documentation/src/components/DemoSandbox/SandboxFileTree.tsx

@@ -14,7 +14,7 @@ import {
   TreeData,
   useTreeItemExpansion,
 } from "@react-md/tree";
-import { MobileOnly, useIsUserInteractionMode } from "@react-md/utils";
+import { PhoneOnly, useIsUserInteractionMode } from "@react-md/utils";
 
 import CssIcon from "icons/CssIcon";
 import FileSVGIcon from "icons/FileSVGIcon";
@@ -122,7 +122,7 @@ export default function SandboxFileTree({
       position="left"
       overlay={!inline}
       portal={false}
-      className={cn({
+      className={cn(styles.sheet, {
         [styles.inline]: inline,
       })}
       mountOnEnter={!inline}
@@ -131,11 +131,11 @@ export default function SandboxFileTree({
       disableTransition={disableTransition}
       disableTabFocusWrap={isKeyboard}
     >
-      <MobileOnly>
+      <PhoneOnly>
         <AppBar theme="default">
           <NavigationActions from={from} onRequestClose={onRequestClose} />
         </AppBar>
-      </MobileOnly>
+      </PhoneOnly>
       <Tree
         id="code-previewer-files"
         className={styles.tree}

packages/documentation/src/components/DemoSandbox/SandboxNavigation.tsx

@@ -24,8 +24,7 @@ export default function SandboxNavigation({
   onRequestFiles,
   onRequestClose,
 }: SandboxNavigationProps): ReactElement {
-  const { isPhone, isTablet } = useAppSize();
-  const mobile = isPhone || isTablet;
+  const { isPhone } = useAppSize();
 
   return (
     <AppBar height="prominent-dense" theme="default" className={styles.header}>
@@ -43,7 +42,7 @@ export default function SandboxNavigation({
         <AppBarTitle id="sandbox-dialog-title" noWrap>
           {name}
         </AppBarTitle>
-        {!mobile && (
+        {!isPhone && (
           <NavigationActions from={from} onRequestClose={onRequestClose} />
         )}
       </AppBar>