From bcb0806d4f7fa7365f3643f77a674667f2f832e6 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Mon, 15 Apr 2024 01:29:56 +0200
Subject: [PATCH] reformat global state

---
 src/frontend/src/globalStyle.tsx | 184 -------------------------------
 src/frontend/src/main.css.ts     | 179 ++++++++++++++++++++++++++++++
 2 files changed, 179 insertions(+), 184 deletions(-)
 delete mode 100644 src/frontend/src/globalStyle.tsx
 create mode 100644 src/frontend/src/main.css.ts

diff --git a/src/frontend/src/globalStyle.tsx b/src/frontend/src/globalStyle.tsx
deleted file mode 100644
index 3d1034d662..0000000000
--- a/src/frontend/src/globalStyle.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { createStyles, rem } from '@mantine/core';
-
-export const InvenTreeStyle = createStyles((theme) => ({
-  layoutHeader: {
-    paddingTop: theme.spacing.sm,
-    backgroundColor:
-      theme.colorScheme === 'dark'
-        ? theme.colors.dark[6]
-        : theme.colors.gray[0],
-    borderBottom: `1px solid ${
-      theme.colorScheme === 'dark' ? 'transparent' : theme.colors.gray[2]
-    }`,
-    marginBottom: 10
-  },
-
-  layoutFooter: {
-    marginTop: 10,
-    borderTop: `1px solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
-    }`
-  },
-
-  layoutHeaderSection: {
-    paddingBottom: theme.spacing.sm
-  },
-
-  layoutHeaderUser: {
-    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-    padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-    borderRadius: theme.defaultRadius,
-    transition: 'background-color 100ms ease',
-
-    [theme.fn.smallerThan('xs')]: {
-      display: 'none'
-    }
-  },
-
-  headerDropdownFooter: {
-    backgroundColor:
-      theme.colorScheme === 'dark'
-        ? theme.colors.dark[7]
-        : theme.colors.gray[0],
-    margin: `calc(${theme.spacing.md} * -1)`,
-    marginTop: theme.spacing.sm,
-    padding: `${theme.spacing.md} calc(${theme.spacing.md} * 2)`,
-    paddingBottom: theme.spacing.xl,
-    borderTop: `${rem(1)} solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]
-    }`
-  },
-
-  link: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-    paddingLeft: theme.spacing.md,
-    paddingRight: theme.spacing.md,
-    textDecoration: 'none',
-    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-    fontWeight: 500,
-    fontSize: theme.fontSizes.sm,
-
-    [theme.fn.smallerThan('sm')]: {
-      height: rem(42),
-      display: 'flex',
-      alignItems: 'center',
-      width: '100%'
-    },
-
-    ...theme.fn.hover({
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[6]
-          : theme.colors.gray[0]
-    })
-  },
-
-  subLink: {
-    width: '100%',
-    padding: `${theme.spacing.xs} ${theme.spacing.md}`,
-    borderRadius: theme.defaultRadius,
-
-    ...theme.fn.hover({
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[7]
-          : theme.colors.gray[0]
-    }),
-
-    '&:active': theme.activeStyles
-  },
-
-  docHover: {
-    border: `1px dashed `
-  },
-
-  layoutContent: {
-    flex: 1,
-    width: '100%'
-  },
-
-  layoutFooterLinks: {
-    [theme.fn.smallerThan('xs')]: {
-      marginTop: theme.spacing.md
-    }
-  },
-
-  layoutFooterInner: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: theme.spacing.xl,
-    paddingBottom: theme.spacing.xl,
-
-    [theme.fn.smallerThan('xs')]: {
-      flexDirection: 'column'
-    }
-  },
-
-  tabs: {
-    [theme.fn.smallerThan('sm')]: {
-      display: 'none'
-    }
-  },
-
-  tabsList: {
-    borderBottom: '0 !important',
-    '& > button:first-of-type': {
-      paddingLeft: '0 !important'
-    },
-
-    '& > button:last-of-type': {
-      paddingRight: '0 !important'
-    }
-  },
-
-  tab: {
-    fontWeight: 500,
-    height: 38,
-    backgroundColor: 'transparent',
-
-    '&:hover': {
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[5]
-          : theme.colors.gray[1]
-    }
-  },
-
-  signText: {
-    fontSize: 'xl',
-    fontWeight: 700
-  },
-
-  error: {
-    backgroundColor: theme.colors.gray[0],
-    color: theme.colors.red[6]
-  },
-
-  dashboardItemValue: {
-    fontSize: 24,
-    fontWeight: 700,
-    lineHeight: 1
-  },
-
-  dashboardItemTitle: {
-    fontWeight: 700
-  },
-
-  card: {
-    backgroundColor:
-      theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white
-  },
-
-  itemTopBorder: {
-    borderTop: `1px solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
-    }`
-  },
-
-  navigationDrawer: {
-    padding: 0
-  }
-}));
diff --git a/src/frontend/src/main.css.ts b/src/frontend/src/main.css.ts
new file mode 100644
index 0000000000..85f8474439
--- /dev/null
+++ b/src/frontend/src/main.css.ts
@@ -0,0 +1,179 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from './theme';
+
+export const layoutHeader = style({
+  paddingTop: vars.spacing.sm,
+  backgroundColor:
+    theme.colorScheme === 'dark' ? vars.colors.dark[6] : vars.colors.gray[0],
+  borderBottom: `1px solid ${
+    theme.colorScheme === 'dark' ? 'transparent' : vars.colors.gray[2]
+  }`,
+  marginBottom: 10
+});
+
+export const layoutFooter = style({
+  marginTop: 10,
+  borderTop: `1px solid ${
+    theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[2]
+  }`
+});
+
+export const layoutHeaderSection = style({
+  paddingBottom: vars.spacing.sm
+});
+
+export const layoutHeaderUser = style({
+  color: theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black,
+  padding: `${vars.spacing.xs}px ${vars.spacing.sm}px`,
+  borderRadius: vars.defaultRadius,
+  transition: 'background-color 100ms ease',
+
+  [vars.smallerThan('xs')]: {
+    display: 'none'
+  }
+});
+
+export const headerDropdownFooter = style({
+  backgroundColor:
+    theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.colors.gray[0],
+  margin: `calc(${vars.spacing.md} * -1)`,
+  marginTop: vars.spacing.sm,
+  padding: `${vars.spacing.md} calc(${vars.spacing.md} * 2)`,
+  paddingBottom: vars.spacing.xl,
+  borderTop: `${rem(1)} solid ${
+    theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+  }`
+});
+
+export const link = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  paddingLeft: vars.spacing.md,
+  paddingRight: vars.spacing.md,
+  textDecoration: 'none',
+  color: light - dark(vars.white, vars.black),
+  fontWeight: 500,
+  fontSize: vars.fontSizes.sm,
+
+  [vars.smallerThan('sm')]: {
+    height: rem(42),
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
+  }
+
+  // ...theme.fn.hover({
+  //   backgroundColor:
+  //     theme.colorScheme === 'dark'
+  //       ? vars.colors.dark[6]
+  //       : vars.colors.gray[0]
+  // })
+});
+
+export const subLink = style({
+  width: '100%',
+  padding: `${vars.spacing.xs} ${vars.spacing.md}`,
+  borderRadius: vars.defaultRadius,
+
+  // ...theme.fn.hover({
+  //   backgroundColor:
+  //     theme.colorScheme === 'dark'
+  //       ? vars.colors.dark[7]
+  //       : vars.colors.gray[0]
+  // })
+
+  '&:active': vars.activeStyles
+});
+
+export const docHover = style({
+  border: `1px dashed `
+});
+
+export const layoutContent = style({
+  flex: 1,
+  width: '100%'
+});
+
+export const layoutFooterLinks = style({
+  [vars.smallerThan('xs')]: {
+    marginTop: vars.spacing.md
+  }
+});
+
+export const layoutFooterInner = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingTop: vars.spacing.xl,
+  paddingBottom: vars.spacing.xl,
+
+  [vars.smallerThan('xs')]: {
+    flexDirection: 'column'
+  }
+});
+
+export const tabs = style({
+  [vars.smallerThan('sm')]: {
+    display: 'none'
+  }
+});
+
+export const tabsList = style({
+  borderBottom: '0 !important',
+  '& > button:first-of-type': {
+    paddingLeft: '0 !important'
+  },
+
+  '& > button:last-of-type': {
+    paddingRight: '0 !important'
+  }
+});
+
+export const tab = style({
+  fontWeight: 500,
+  height: 38,
+  backgroundColor: 'transparent',
+
+  '&:hover': {
+    backgroundColor:
+      theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+  }
+});
+
+export const signText = style({
+  fontSize: 'xl',
+  fontWeight: 700
+});
+
+export const error = style({
+  backgroundColor: vars.colors.gray[0],
+  color: vars.colors.red[6]
+});
+
+export const dashboardItemValue = style({
+  fontSize: 24,
+  fontWeight: 700,
+  lineHeight: 1
+});
+
+export const dashboardItemTitle = style({
+  fontWeight: 700
+});
+
+export const card = style({
+  backgroundColor:
+    theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.white
+});
+
+export const itemTopBorder = style({
+  borderTop: `1px solid ${
+    theme.colorScheme === 'dark' ? vars.colors.dark[4] : vars.colors.gray[2]
+  }`
+});
+
+export const navigationDrawer = style({
+  padding: 0
+});