refactor: Move depths and breakpoints out of theme

shared/styles/breakpoints.ts

@@ -0,0 +1,11 @@
+const breakpoints = {
+  mobile: 0,
+  // targeting all devices
+  tablet: 737,
+  // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
+  desktop: 1025,
+  // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
+  desktopLarge: 1600,
+};
+
+export default breakpoints;

shared/styles/depths.ts

@@ -0,0 +1,17 @@
+const depths = {
+  header: 800,
+  sidebar: 900,
+  // Note: editor toolbars are 900
+  hoverPreview: 998,
+  // Note: editor lightbox is z-index 999
+  modalOverlay: 2000,
+  modal: 3000,
+  menu: 4000,
+  toasts: 5000,
+  popover: 9000,
+  titleBarDivider: 10000,
+  loadingIndicatorBar: 20000,
+  commandBar: 30000,
+};
+
+export default depths;

shared/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as depths } from "./depths";
+
+export { default as breakpoints } from "./breakpoints";

shared/styles/theme.ts

@@ -97,30 +97,6 @@ export const base = {
   noticeTipText: colors.almostBlack,
   noticeWarningBackground: "#ffadbf",
   noticeWarningText: colors.almostBlack,
-  breakpoints: {
-    mobile: 0,
-    // targeting all devices
-    tablet: 737,
-    // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
-    desktop: 1025,
-    // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
-    desktopLarge: 1600,
-  },
-  depths: {
-    header: 800,
-    sidebar: 900,
-    // Note: editor toolbars are 900
-    hoverPreview: 998,
-    // Note: editor lightbox is z-index 999
-    modalOverlay: 2000,
-    modal: 3000,
-    menu: 4000,
-    toasts: 5000,
-    popover: 9000,
-    titleBarDivider: 10000,
-    loadingIndicatorBar: 20000,
-    commandBar: 30000,
-  },
 };
 
 export const light = {

shared/utils/color.ts

@@ -1,6 +1,6 @@
 import md5 from "crypto-js/md5";
 import { darken } from "polished";
-import theme from "../theme";
+import theme from "../styles/theme";
 
 export const palette = [
   theme.brand.red,