type fixes and build

ui/frontend/build_src/src/App.tsx

@@ -1,24 +1,19 @@
-import React, { useState } from "react";
+import React from "react";
 import { ReactLocation, Router } from "@tanstack/react-location";
 import Home from "./pages/Home";
 import Settings from "./pages/Settings";
-import { darkTheme, lightTheme } from "./styles/theme/index.css";
 import "./Translation/config";
 const location = new ReactLocation();
 
 function App() {
-  // just check for the theme one 1 time
 
-  // var { matches } = window.matchMedia('(prefers-color-scheme: dark)')
-  const matches = true;
-  const themeClass = matches ? darkTheme : lightTheme;
 
   return (
     <Router
       location={location}
       routes={[
-        { path: "/", element: <Home className={themeClass} /> },
-        { path: "/settings", element: <Settings className={themeClass} /> },
+        { path: "/", element: <Home /> },
+        { path: "/settings", element: <Settings /> },
       ]}
     ></Router>
   );

ui/frontend/build_src/src/components/_recipes/index.css.ts

@@ -4,7 +4,7 @@ import { vars } from "../../styles/theme/index.css";
 
 export const card = recipe({
   base: {
-    background: vars.colors.background,
+    background: vars.backgroundMain,
     color: vars.colors.text.normal,
     padding: vars.spacing.medium,
     borderRadius: vars.trim.smallBorderRadius,

ui/frontend/build_src/src/components/_recipes/popover_headless.css.ts

@@ -25,7 +25,7 @@ export const PopoverPanelMain = style({
   top: '100%',
   right: '0',
   zIndex: '1',
-  background: vars.colors.backgroundDark,
+  background: vars.backgroundMain,
   color: vars.colors.text.normal,
   padding: vars.spacing.medium,
   borderRadius: vars.trim.smallBorderRadius,

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 
-
 import {
-  PanelBox,
   MenuButton,
 } from "../../../../styles/shared.css";
 

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts

@@ -3,13 +3,13 @@ import { style } from "@vanilla-extract/css";
 import { vars } from "../../../../styles/theme/index.css";
 
 export const StartingStatus = style({
-  color: vars.colors.warning,
+  color: `hsl(${vars.warningHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 export const ErrorStatus = style({
-  color: vars.colors.error,
+  color: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 export const SuccessStatus = style({
-  color: vars.colors.success,
+  color: `hsl(${vars.successHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts

@@ -31,23 +31,22 @@ globalStyle(`${QueueItemInfo} p`, {
   marginBottom: vars.spacing.small,
 });
 
+globalStyle(`${QueueItemMain}.${QueueStatus.complete}`, {
+  backgroundColor: `hsl(${vars.tertiaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+});
+
 globalStyle(`${QueueItemMain}.${QueueStatus.processing}`, {
-  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.bright}, ${vars.colorMod.lightness.bright})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.pending}`, {
-  backgroundColor: vars.backgroundDark,
-  // `hsl(${vars.warningHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.paused}`, {
-  backgroundColor: vars.backgroundDark,
-  //`hsl(${vars.tertiaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.dim})`,
 });
 
-globalStyle(`${QueueItemMain}.${QueueStatus.complete}`, {
-  backgroundColor: `hsl(${vars.successHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
-});
 
 globalStyle(`${QueueItemMain}.${QueueStatus.error}`, {
   backgroundColor: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -16,12 +16,11 @@ import { useImageCreate } from "../../stores/imageCreateStore";
 
 // Todo - import components here
 import HeaderDisplay from "../../components/organisms/headerDisplay";
-import CreationPanel from "../../components/organisms/creationPanel";
 import DisplayPanel from "../../components/organisms/displayPanel";
 import FooterDisplay from "../../components/organisms/footerDisplay";
 import CreationTabs from "../../components/layouts/CreationTabs";
 
-function Home({ className }: { className: any }) {
+function Home() {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
@@ -52,13 +51,12 @@ function Home({ className }: { className: any }) {
   }, [setRequestOption, statusMods, dataMoads]);
 
   return (
-    <div className={[AppLayout, className].join(" ")}>
+    <div className={[AppLayout].join(" ")}>
       <header className={HeaderLayout}>
         <HeaderDisplay></HeaderDisplay>
       </header>
       <nav className={CreateLayout}>
         <CreationTabs></CreationTabs>
-        {/* <CreationPanel></CreationPanel> */}
       </nav>
       <main className={DisplayLayout}>
         <DisplayPanel></DisplayPanel>

ui/frontend/build_src/src/pages/Settings/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Settings({ className }: { className: any }) {
+export default function Settings() {
   return (
     <div>
       <h1>Settings</h1>

ui/frontend/build_src/src/styles/shared.css.ts

@@ -2,7 +2,7 @@ import { style, globalStyle } from "@vanilla-extract/css";
 import { vars } from "./theme/index.css";
 
 export const PanelBox = style({
-  background: vars.colors.backgroundAlt,
+  background: vars.backgroundLight,
   color: vars.colors.text.normal,
   padding: vars.spacing.medium,
   borderRadius: vars.trim.smallBorderRadius,

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -5,47 +5,47 @@ import {
 } from "@vanilla-extract/css";
 
 
-const colors = createThemeContract({
-  brand: null,
-  brandDimmed: null,
-  brandHover: null,
-  brandActive: null,
-  brandAccent: null,
-  brandAccentDimmed: null,
-  brandAccentActive: null,
+// const colors = createThemeContract({
+//   brand: null,
+//   brandDimmed: null,
+//   brandHover: null,
+//   brandActive: null,
+//   brandAccent: null,
+//   brandAccentDimmed: null,
+//   brandAccentActive: null,
 
-  secondary: null,
-  secondaryDimmed: null,
-  secondaryHover: null,
-  secondaryActive: null,
-  secondaryAccent: null,
-  secondaryAccentDimmed: null,
-  secondaryAccentActive: null,
+//   secondary: null,
+//   secondaryDimmed: null,
+//   secondaryHover: null,
+//   secondaryActive: null,
+//   secondaryAccent: null,
+//   secondaryAccentDimmed: null,
+//   secondaryAccentActive: null,
 
-  background: null,
-  backgroundAccent: null,
-  backgroundAlt: null,
-  backgroundAltAccent: null,
-  backgroundDark: null,
-  backgroundDarkAccent: null,
+//   background: null,
+//   backgroundAccent: null,
+//   backgroundAlt: null,
+//   backgroundAltAccent: null,
+//   backgroundDark: null,
+//   backgroundDarkAccent: null,
 
-  text: {
-    normal: null,
-    dimmed: null,
+//   text: {
+//     normal: null,
+//     dimmed: null,
 
-    secondary: null,
-    secondaryDimmed: null,
+//     secondary: null,
+//     secondaryDimmed: null,
 
-    accent: null,
-    accentDimmed: null,
-  },
+//     accent: null,
+//     accentDimmed: null,
+//   },
 
-  link: null,
+//   link: null,
 
-  warning: null,
-  error: null,
-  success: null,
-});
+//   warning: null,
+//   error: null,
+//   success: null,
+// });
 
 const app = createGlobalTheme(":root", {
   spacing: {
@@ -74,14 +74,16 @@ const app = createGlobalTheme(":root", {
       Overline: ".5em",
     },
   },
-  colors,
+  // colors,
 
-  // 60degree color difference
+  // 6 0degree color difference
+  // step downs
   brandHue: '265', // purple
   secondaryHue: '205', // light blue
   tertiaryHue: '145', // grass green
 
-  errorHue: '325', // magenta
+  // step ups
+  errorHue: '0', // magenta
   warningHue: '25', // orange
   successHue: '85', // green
 
@@ -101,95 +103,22 @@ const app = createGlobalTheme(":root", {
   backgroundMain: 'hsl(225, 6%, 13%)',
   backgroundLight: 'hsl(225, 4%, 18%)',
   backgroundDark: 'hsl(225, 3%, 7%)',
-
   backgroundAccentMain: 'hsl(225, 6%, 30%)',
 
+  // this is depricated
+  colors: {
+    text: {
+      normal: "#ffffff", // white
+      dimmed: "#d1d5db", // off white
 
+      secondary: "#ffffff", // white
+      secondaryDimmed: "#d1d5db", // off white
+
+      accent: "#e7ba71", // orange
+      accentDimmed: "#7d6641", // muted orange
+    },
+    link: "#0066cc", // blue
+  }
 });
 
-export const darkTheme = createTheme(colors, {
-  brand: "#5000b9", // purple
-  brandDimmed: "#433852", // muted purple
-  brandHover: "#5d00d6", // bringhter purple
-  brandActive: "#5d00d6", // bringhter purple
-  brandAccent: "#28004e", // darker purple
-  brandAccentDimmed: "#28004e", // darker purple
-  brandAccentActive: "#28004e", // darker purple
-
-  secondary: "#0b8334", // green
-  secondaryDimmed: "#0b8334", // green
-  secondaryHover: "#0b8334", // green
-  secondaryActive: "#0b8334", // green
-  secondaryAccent: "#0b8334", // green
-  secondaryAccentDimmed: "#0b8334", // green
-  secondaryAccentActive: "#0b8334", // green
-
-  background: "#202124", // dark grey
-  backgroundAccent: " #383838", // lighter grey
-
-  backgroundAlt: "#2c2d30", // med grey
-  backgroundAltAccent: "#383838", // lighter grey
-
-  backgroundDark: "#121213", // darker grey
-  backgroundDarkAccent: "#383838", // lighter grey
-
-  text: {
-    normal: "#ffffff", // white
-    dimmed: "#d1d5db", // off white
-
-    secondary: "#ffffff", // white
-    secondaryDimmed: "#d1d5db", // off white
-
-    accent: "#e7ba71", // orange
-    accentDimmed: "#7d6641", // muted orange
-  },
-
-  link: "#0066cc", // blue
-  warning: "#f0ad4e",
-  error: "#d9534f",
-  success: "#5cb85c",
-});
-
-// Generated by co-pilot
-export const lightTheme = createTheme(colors, {
-  brand: "#1E40AF",
-  brandDimmed: "#1E40AF",
-  brandHover: "#1E40AF",
-  brandActive: "#1E40AF",
-  brandAccent: "#1E40AF",
-  brandAccentDimmed: "#1E40AF",
-  brandAccentActive: "#1E40AF",
-
-  secondary: "#DB2777",
-  secondaryDimmed: "#DB2777",
-  secondaryHover: "#DB2777",
-  secondaryActive: "#DB2777",
-  secondaryAccent: "#DB2777",
-  secondaryAccentDimmed: "#DB2777",
-  secondaryAccentActive: "#DB2777",
-
-  background: "#EFF6FF",
-  backgroundAccent: "#EFF6FF",
-  backgroundAlt: "#EFF6FF",
-  backgroundAltAccent: "#EFF6FF",
-  backgroundDark: "#EFF6FF",
-  backgroundDarkAccent: "#EFF6FF",
-
-  text: {
-    normal: "#1F2937",
-    dimmed: "#6B7280",
-
-    secondary: "#1F2937",
-    secondaryDimmed: "#6B7280",
-
-    accent: "#1F2937",
-    accentDimmed: "#6B7280",
-  },
-
-  link: "#0066cc", // blue
-  warning: "yellow",
-  error: "red",
-  success: "green",
-});
-
-export const vars = { ...app, colors };
+export const vars = { ...app };