From f9b012cac9f6da7b988feda72a953113d5529946 Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Fri, 28 Apr 2023 03:21:14 -0700
Subject: [PATCH] feat: add breakpoints (#2191)

---
 packages/component/src/styles/mui-theme.ts | 66 +++++++++++++++++++++-
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/packages/component/src/styles/mui-theme.ts b/packages/component/src/styles/mui-theme.ts
index ef667283a..4fc3adc26 100644
--- a/packages/component/src/styles/mui-theme.ts
+++ b/packages/component/src/styles/mui-theme.ts
@@ -1,8 +1,12 @@
 import '@emotion/react';
 
-import type { ThemeOptions } from '@mui/material';
+import type {
+  Breakpoint,
+  BreakpointsOptions,
+  ThemeOptions,
+} from '@mui/material';
 
-export const muiThemes: ThemeOptions = {
+export const muiThemes = {
   breakpoints: {
     values: {
       xs: 0,
@@ -12,4 +16,60 @@ export const muiThemes: ThemeOptions = {
       xl: 1920,
     },
   },
-};
+} satisfies ThemeOptions;
+
+// Ported from mui
+// See https://github.com/mui/material-ui/blob/eba90da5359ff9c58b02800dfe468dc6c0b95bd2/packages/mui-system/src/createTheme/createBreakpoints.js
+// License under MIT
+function createBreakpoints(breakpoints: BreakpointsOptions) {
+  const {
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0, // phone
+      sm: 600, // tablet
+      md: 900, // small laptop
+      lg: 1200, // desktop
+      xl: 1536, // large screen
+    },
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
+
+  const keys = Object.keys(values) as ['xs', 'sm', 'md', 'lg', 'xl'];
+
+  function up(key: Breakpoint | number) {
+    const value = typeof key === 'number' ? key : values[key];
+    return `@media (min-width:${value}${unit})`;
+  }
+
+  function down(key: Breakpoint | number) {
+    const value = typeof key === 'number' ? key : values[key];
+    return `@media (max-width:${value - step / 100}${unit})`;
+  }
+
+  return {
+    keys,
+    values,
+    up,
+    down,
+    unit,
+    // between,
+    // only,
+    // not,
+    ...other,
+  };
+}
+
+/**
+ * @example
+ * ```ts
+ * export const iconButtonStyle = style({
+ *   [breakpoints.up('sm')]: {
+ *     padding: '6px'
+ *   },
+ * });
+ * ```
+ */
+export const breakpoints = createBreakpoints(muiThemes.breakpoints);