fix imports

src/frontend/src/components/buttons/SplitButton.css.ts

@@ -0,0 +1,19 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const button = style({
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+  '&::before': {
+    borderRadius: '0 !important'
+  }
+});
+
+export const icon = style({
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  border: 0,
+  borderLeft: `1px solid ${vars.colors.primaryShade}`
+});

src/frontend/src/components/buttons/SplitButton.tsx

@@ -5,13 +5,13 @@ import {
   Menu,
   Text,
   Tooltip,
-  createStyles,
   useMantineTheme
 } from '@mantine/core';
 import { IconChevronDown } from '@tabler/icons-react';
 import { useEffect, useMemo, useState } from 'react';
 
 import { TablerIconType } from '../../functions/icons';
+import * as classes from './SplitButton.css';
 
 interface SplitButtonOption {
   key: string;
@@ -30,22 +30,6 @@ interface SplitButtonProps {
   loading?: boolean;
 }
 
-const useStyles = createStyles((theme) => ({
-  button: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    '&::before': {
-      borderRadius: '0 !important'
-    }
-  },
-  icon: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    border: 0,
-    borderLeft: `1px solid ${theme.primaryShade}`
-  }
-}));
-
 export function SplitButton({
   options,
   defaultSelected,
@@ -54,7 +38,6 @@ export function SplitButton({
   loading
 }: SplitButtonProps) {
   const [current, setCurrent] = useState<string>(defaultSelected);
-  const { classes } = useStyles();
 
   useEffect(() => {
     setSelected?.(current);

src/frontend/src/components/items/DashboardItem.tsx

@@ -1,6 +1,6 @@
 import { Group, LoadingOverlay, Paper, Text } from '@mantine/core';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 
 export interface StatisticItemProps {
   title: string;
@@ -16,8 +16,6 @@ export function StatisticItem({
   data: StatisticItemProps;
   isLoading: boolean;
 }) {
-  const { classes } = InvenTreeStyle();
-
   return (
     <Paper withBorder p="xs" key={id} pos="relative">
       <LoadingOverlay visible={isLoading} overlayBlur={2} />

src/frontend/src/components/items/DocTooltip.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro';
 import { Anchor, Container, HoverCard, ScrollArea, Text } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 
 export interface BaseDocProps {
   text: string | JSX.Element;
@@ -22,8 +22,6 @@ export function DocTooltip({
   link,
   docchildren
 }: DocTooltipProps) {
-  const { classes } = InvenTreeStyle();
-
   return (
     <HoverCard
       shadow="md"

src/frontend/src/components/items/GettingStartedCarousel.css.ts

@@ -0,0 +1,32 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const card = style({
+  height: rem(170),
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center'
+});
+
+export const title = style({
+  fontWeight: 900,
+  color:
+    //vars.colorScheme === 'dark' ? vars.colors.white[0] : vars.colors.dark[0],
+    vars.colors.dark[0],
+  lineHeight: 1.2,
+  fontSize: rem(32),
+  marginTop: 0
+});
+
+export const category = style({
+  color:
+    //vars.colorScheme === 'dark' ? vars.colors.white : vars.colors.dark,
+    vars.colors.dark[0],
+  opacity: 0.7,
+  fontWeight: 700
+});

src/frontend/src/components/items/GettingStartedCarousel.tsx

@@ -1,54 +1,17 @@
 import { Trans } from '@lingui/macro';
 import { Carousel } from '@mantine/carousel';
-import {
+import { Anchor, Button, Paper, Text, Title, rem } from '@mantine/core';
-  Anchor,
-  Button,
-  Paper,
-  Text,
-  Title,
-  createStyles,
-  rem
-} from '@mantine/core';
 
 import { DocumentationLinkItem } from './DocumentationLinks';
+import * as classes from './GettingStartedCarousel.css';
 import { PlaceholderPill } from './Placeholder';
 
-const useStyles = createStyles((theme) => ({
-  card: {
-    height: rem(170),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    backgroundSize: 'cover',
-    backgroundPosition: 'center'
-  },
-
-  title: {
-    fontWeight: 900,
-    color:
-      theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.dark,
-    lineHeight: 1.2,
-    fontSize: rem(32),
-    marginTop: 0
-  },
-
-  category: {
-    color:
-      theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.dark,
-    opacity: 0.7,
-    fontWeight: 700
-  }
-}));
-
 function StartedCard({
   title,
   description,
   link,
   placeholder
 }: DocumentationLinkItem) {
-  const { classes } = useStyles();
-
   return (
     <Paper shadow="md" p="xl" radius="md" className={classes.card}>
       <div>

src/frontend/src/components/items/MenuLinks.tsx

@@ -2,7 +2,7 @@ import { SimpleGrid, Text, UnstyledButton } from '@mantine/core';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { DocTooltip } from './DocTooltip';
 
 export interface MenuLinkItem {
@@ -50,7 +50,6 @@ export function MenuLinks({
   links: MenuLinkItem[];
   highlighted?: boolean;
 }) {
-  const { classes } = InvenTreeStyle();
   highlighted = highlighted || false;
 
   const filteredLinks = links.filter(

src/frontend/src/components/items/StylishText.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@mantine/core';
 
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 
 export function StylishText({
   children,
@@ -9,7 +9,6 @@ export function StylishText({
   children: JSX.Element | string;
   size?: string;
 }) {
-  const { classes } = InvenTreeStyle();
   return (
     <Text size={size} className={classes.signText} variant="gradient">
       {children}

src/frontend/src/components/nav/DetailDrawer.css.ts

@@ -0,0 +1,9 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const flex = style({
+  display: 'flex',
+  flex: 1
+});

src/frontend/src/components/nav/DetailDrawer.tsx

@@ -5,8 +5,7 @@ import {
   Group,
   MantineNumberSize,
   Stack,
-  Text,
+  Text
-  createStyles
 } from '@mantine/core';
 import { IconChevronLeft } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
@@ -14,6 +13,7 @@ import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import type { To } from 'react-router-dom';
 
 import { useLocalState } from '../../states/LocalState';
+import * as classes from './DetailDrawer.css';
 
 /**
  * @param title - drawer title
@@ -30,13 +30,6 @@ export interface DrawerProps {
   closeOnEscape?: boolean;
 }
 
-const useStyles = createStyles(() => ({
-  flex: {
-    display: 'flex',
-    flex: 1
-  }
-}));
-
 function DetailDrawerComponent({
   title,
   position = 'right',
@@ -46,7 +39,6 @@ function DetailDrawerComponent({
 }: DrawerProps) {
   const navigate = useNavigate();
   const { id } = useParams();
-  const { classes } = useStyles();
 
   const content = renderContent(id);
   const opened = useMemo(() => !!id && !!content, [id, content]);

src/frontend/src/components/nav/Footer.tsx

@@ -1,11 +1,10 @@
 import { Anchor, Container, Group } from '@mantine/core';
 
 import { footerLinks } from '../../defaults/links';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { InvenTreeLogoHomeButton } from '../items/InvenTreeLogo';
 
 export function Footer() {
-  const { classes } = InvenTreeStyle();
   const items = footerLinks.map((link) => (
     <Anchor<'a'>
       color="dimmed"

src/frontend/src/components/nav/Header.tsx

@@ -8,7 +8,7 @@ import { useMatch, useNavigate, useParams } from 'react-router-dom';
 import { api } from '../../App';
 import { navTabs as mainNavTabs } from '../../defaults/links';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { apiUrl } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { ScanButton } from '../buttons/ScanButton';
@@ -20,7 +20,6 @@ import { NotificationDrawer } from './NotificationDrawer';
 import { SearchDrawer } from './SearchDrawer';
 
 export function Header() {
-  const { classes } = InvenTreeStyle();
   const [setNavigationOpen, navigationOpen] = useLocalState((state) => [
     state.setNavigationOpen,
     state.navigationOpen
@@ -120,7 +119,6 @@ export function Header() {
 }
 
 function NavTabs() {
-  const { classes } = InvenTreeStyle();
   const navigate = useNavigate();
   const match = useMatch(':tabName/*');
   const tabValue = match?.params.tabName;

src/frontend/src/components/nav/Layout.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { getActions } from '../../defaults/actions';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { useSessionState } from '../../states/SessionState';
 import { Footer } from './Footer';
 import { Header } from './Header';
@@ -26,7 +26,6 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 };
 
 export default function LayoutComponent() {
-  const { classes } = InvenTreeStyle();
   const navigate = useNavigate();
   const location = useLocation();
 

src/frontend/src/components/nav/MainMenu.tsx

@@ -10,12 +10,12 @@ import {
 import { Link, useNavigate } from 'react-router-dom';
 
 import { doLogout } from '../../functions/auth';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { useUserState } from '../../states/UserState';
+import { theme } from '../../theme';
 
 export function MainMenu() {
   const navigate = useNavigate();
-  const { classes, theme } = InvenTreeStyle();
   const userState = useUserState();
 
   return (

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -14,9 +14,10 @@ import { IconLayoutSidebar } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
 import { menuItems } from '../../defaults/menuItems';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
+import { theme } from '../../theme';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { MenuLinks } from '../items/MenuLinks';
 
@@ -27,7 +28,6 @@ export function NavHoverMenu({
 }: {
   openDrawer: () => void;
 }) {
-  const { classes, theme } = InvenTreeStyle();
   const [hostKey, hostList] = useLocalState((state) => [
     state.hostKey,
     state.hostList

src/frontend/src/components/nav/NavigationDrawer.tsx

@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { aboutLinks, navDocLinks } from '../../defaults/links';
 import { menuItems } from '../../defaults/menuItems';
-import { InvenTreeStyle } from '../../globalStyle';
+import * as classes from '../../main.css';
 import { DocumentationLinks } from '../items/DocumentationLinks';
 import { MenuLinkItem, MenuLinks } from '../items/MenuLinks';
 
@@ -27,8 +27,6 @@ export function NavigationDrawer({
   opened: boolean;
   close: () => void;
 }) {
-  const { classes } = InvenTreeStyle();
-
   return (
     <Drawer
       opened={opened}
@@ -44,7 +42,6 @@ export function NavigationDrawer({
   );
 }
 function DrawerContent() {
-  const { classes } = InvenTreeStyle();
   const [scrollHeight, setScrollHeight] = useState(0);
   const ref = useRef(null);
   const { height } = useViewportSize();

src/frontend/src/components/widgets/WidgetLayout.css.ts

@@ -0,0 +1,18 @@
+import { rem } from '@mantine/core';
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '../../theme';
+
+export const backgroundItem = style({
+  backgroundColor:
+    //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.white,
+    vars.colors.white,
+  maxWidth: '100%',
+  padding: '8px',
+  boxShadow: vars.shadows.md
+});
+
+export const baseItem = style({
+  maxWidth: '100%',
+  padding: '8px'
+});

src/frontend/src/components/widgets/WidgetLayout.tsx

@@ -1,11 +1,5 @@
 import { Trans } from '@lingui/macro';
-import {
+import { ActionIcon, Container, Group, Indicator } from '@mantine/core';
-  ActionIcon,
-  Container,
-  Group,
-  Indicator,
-  createStyles
-} from '@mantine/core';
 import { Menu, Text } from '@mantine/core';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import {
@@ -18,6 +12,8 @@ import {
 import { useEffect, useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 
+import * as classes from './WidgetLayout.css';
+
 const ReactGridLayout = WidthProvider(Responsive);
 
 interface LayoutStorage {
@@ -26,21 +22,6 @@ interface LayoutStorage {
 
 const compactType = 'vertical';
 
-const useItemStyle = createStyles((theme) => ({
-  backgroundItem: {
-    backgroundColor:
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
-    maxWidth: '100%',
-    padding: '8px',
-    boxShadow: theme.shadows.md
-  },
-
-  baseItem: {
-    maxWidth: '100%',
-    padding: '8px'
-  }
-}));
-
 export interface LayoutItemType {
   i: number;
   val: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
@@ -65,7 +46,6 @@ export function WidgetLayout({
   const [layouts, setLayouts] = useState({});
   const [editable, setEditable] = useDisclosure(false);
   const [boxShown, setBoxShown] = useDisclosure(true);
-  const { classes } = useItemStyle();
 
   useEffect(() => {
     let layout = getFromLS('layouts') || [];

src/frontend/src/main.css.ts

@@ -5,10 +5,11 @@ import { vars } from './theme';
 
 export const layoutHeader = style({
   paddingTop: vars.spacing.sm,
-  backgroundColor:
+  backgroundColor: vars.colors.gray[0],
-    theme.colorScheme === 'dark' ? vars.colors.dark[6] : vars.colors.gray[0],
+  //theme.colorScheme === 'dark' ? vars.colors.dark[6] : vars.colors.gray[0],
   borderBottom: `1px solid ${
-    theme.colorScheme === 'dark' ? 'transparent' : vars.colors.gray[2]
+    //theme.colorScheme === 'dark' ? 'transparent' : vars.colors.gray[2]
+    vars.colors.gray[2]
   }`,
   marginBottom: 10
 });
@@ -16,7 +17,8 @@ export const layoutHeader = style({
 export const layoutFooter = style({
   marginTop: 10,
   borderTop: `1px solid ${
-    theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[2]
+    //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[2]
+    vars.colors.gray[2]
   }`
 });
 
@@ -25,7 +27,9 @@ export const layoutHeaderSection = style({
 });
 
 export const layoutHeaderUser = style({
-  color: theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black,
+  color:
+    //theme.colorScheme === 'dark' ? vars.colors.dark[0] : vars.black,
+    vars.colors.black,
   padding: `${vars.spacing.xs}px ${vars.spacing.sm}px`,
   borderRadius: vars.defaultRadius,
   transition: 'background-color 100ms ease',
@@ -37,13 +41,15 @@ export const layoutHeaderUser = style({
 
 export const headerDropdownFooter = style({
   backgroundColor:
-    theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.colors.gray[0],
+    //theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.colors.gray[0],
+    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]
+    //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+    vars.colors.gray[1]
   }`
 });
 
@@ -54,7 +60,9 @@ export const link = style({
   paddingLeft: vars.spacing.md,
   paddingRight: vars.spacing.md,
   textDecoration: 'none',
-  color: light - dark(vars.white, vars.black),
+  color:
+    //theme.colorScheme === 'dark' ? vars.white: vars.black,
+    vars.colors.black,
   fontWeight: 500,
   fontSize: vars.fontSizes.sm,
 
@@ -139,7 +147,8 @@ export const tab = style({
 
   '&:hover': {
     backgroundColor:
-      theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+      //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
+      vars.colors.gray[1]
   }
 });
 
@@ -165,12 +174,14 @@ export const dashboardItemTitle = style({
 
 export const card = style({
   backgroundColor:
-    theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.white
+    //theme.colorScheme === 'dark' ? vars.colors.dark[7] : vars.white
+    vars.colors.white
 });
 
 export const itemTopBorder = style({
   borderTop: `1px solid ${
-    theme.colorScheme === 'dark' ? vars.colors.dark[4] : vars.colors.gray[2]
+    //theme.colorScheme === 'dark' ? vars.colors.dark[4] : vars.colors.gray[2]
+    vars.colors.gray[2]
   }`
 });
 

src/frontend/src/main.tsx

@@ -1,3 +1,4 @@
+import '@mantine/core/styles.css';
 import * as Sentry from '@sentry/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';

src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -15,8 +15,8 @@ import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme';
 import { useState } from 'react';
 
 import { SizeMarks } from '../../../../defaults/defaults';
-import { InvenTreeStyle } from '../../../../globalStyle';
 import { useLocalState } from '../../../../states/LocalState';
+import { theme } from '../../../../theme';
 
 function getLkp(color: string) {
   return { [DEFAULT_THEME.colors[color][6]]: color };
@@ -27,8 +27,6 @@ const LOOKUP = Object.assign(
 );
 
 export function UserTheme({ height }: { height: number }) {
-  const { theme } = InvenTreeStyle();
-
   // primary color
   function changePrimary(color: string) {
     useLocalState.setState({ primaryColor: LOOKUP[color] });