adding recipe

ui/frontend/build_src/index.html

@@ -17,20 +17,7 @@
     <!-- THE STYLES ARE BEING USED IN THE REACT APP  -->
     <!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
     <style>
-      body {
+      /* label {
-        /* font-family: Arial, Helvetica, sans-serif; */
-        /* font-family: Arial, Helvetica, sans-serif; */
-        font-size: 11pt;
-        /* background-color: rgb(32, 33, 36); */
-        /* color: #eee; */
-      } */
-      a {
-        color: rgb(0, 102, 204);
-      }
-      a:visited {
-        color: rgb(0, 102, 204);
-      }
-      label {
         font-size: 10pt;
       }
       #prompt {
@@ -72,7 +59,7 @@
       }
       #guidance_scale {
         transform: translateY(30%);
-      }
+      } */
       #outputMsg {
         font-size: small;
       }

ui/frontend/build_src/package-lock.json

@@ -12,6 +12,7 @@
         "@tanstack/react-query": "^4.2.3",
         "@tanstack/react-query-devtools": "^4.2.3",
         "@vanilla-extract/css": "^1.9.0",
+        "@vanilla-extract/recipes": "^0.2.5",
         "@vanilla-extract/vite-plugin": "^3.5.0",
         "immer": "^9.0.15",
         "react": "^18.2.0",
@@ -776,6 +777,14 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
       "integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
     },
+    "node_modules/@vanilla-extract/recipes": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.2.5.tgz",
+      "integrity": "sha512-OWXUUiFJdswD3+Xg8f8avuw/vAHZRFS4oHqFeoV1TcO8cfbDQ0zmkreBHvyspoJU+qsyWK48yPHKSptqNRPy9Q==",
+      "peerDependencies": {
+        "@vanilla-extract/css": "^1.0.0"
+      }
+    },
     "node_modules/@vanilla-extract/vite-plugin": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",
@@ -2489,6 +2498,12 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
       "integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
     },
+    "@vanilla-extract/recipes": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.2.5.tgz",
+      "integrity": "sha512-OWXUUiFJdswD3+Xg8f8avuw/vAHZRFS4oHqFeoV1TcO8cfbDQ0zmkreBHvyspoJU+qsyWK48yPHKSptqNRPy9Q==",
+      "requires": {}
+    },
     "@vanilla-extract/vite-plugin": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",

ui/frontend/build_src/package.json

@@ -14,6 +14,7 @@
     "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-query-devtools": "^4.2.3",
     "@vanilla-extract/css": "^1.9.0",
+    "@vanilla-extract/recipes": "^0.2.5",
     "@vanilla-extract/vite-plugin": "^3.5.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",

ui/frontend/build_src/src/App.tsx

@@ -9,7 +9,6 @@ import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
 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;
@@ -20,7 +19,7 @@ function App() {
       location={location}
       routes={[
         { path: "/", element: <Home className={themeClass} /> },
-        { path: "settings", element: <Settings className={themeClass} /> },
+        { path: "/settings", element: <Settings className={themeClass} /> },
       ]}
     ></Router>
   );

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -1,19 +1,17 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-export const AdvancedSettingsList = style({
+// @ts-ignore
-  // font-size: 9pt;
+import { vars } from "../../../../styles/theme/index.css.ts";
-  // margin-bottom: 5px;
-  // padding-left: 10px;
-  // list-style-type: none;
 
-  fontSize: "9pt",
+export const AdvancedSettingsList = style({
-  marginBottom: "5px",
+  fontSize: vars.fonts.sizes.Body,
-  paddingLeft: "10px",
+  marginBottom: vars.spacing.small,
+  paddingLeft: vars.spacing.medium,
   listStyleType: "none",
 });
 
 export const AdvancedSettingItem = style({
-  paddingBottom: "5px",
+  paddingBottom: vars.spacing.small,
 });
 
 export const MenuButton = style({
@@ -21,11 +19,11 @@ export const MenuButton = style({
   width: "100%",
   textAlign: "left",
   backgroundColor: "transparent",
-  color: "#fff",
+  color: vars.colors.text.normal,
   border: "0 none",
   cursor: "pointer",
   padding: "0",
-  marginBottom: "10px",
+  marginBottom: vars.spacing.small,
 });
 
 globalStyle(`${MenuButton}> h4`, {

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx

@@ -39,17 +39,14 @@ export default function PropertySettings() {
     state.getValueForRequestKey("guidance_scale")
   );
 
-
   const init_image = useImageCreate((state) =>
     state.getValueForRequestKey("init_image")
   );
 
-
   const prompt_strength = useImageCreate((state) =>
     state.getValueForRequestKey("prompt_strength")
   );
 
-
   const width = useImageCreate((state) => state.getValueForRequestKey("width"));
   const height = useImageCreate((state) =>
     state.getValueForRequestKey("height")

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts

@@ -1,15 +1,31 @@
 import { style } from "@vanilla-extract/css";
 
+// @ts-ignore
+import { vars } from "../../../../../styles/theme/index.css.ts";
+
 export const MakeButtonStyle = style({
   width: "100%",
-  backgroundColor: "rgb(38, 77, 141)",
+  backgroundColor: vars.colors.brand,
-  fontSize: "1.5em",
+  fontSize: vars.fonts.sizes.Headline,
   fontWeight: "bold",
-  color: "white",
+  color: vars.colors.text.normal,
-  padding: "8px",
+  padding: vars.spacing.small,
-  borderRadius: "5px",
+  borderRadius: vars.trim.smallBorderRadius,
+
+  ":hover": {
+    backgroundColor: vars.colors.brandHover,
+  },
+
+  ":active": {
+    backgroundColor: vars.colors.brandActive,
+  },
 
   ":disabled": {
-    backgroundColor: "rgb(38, 77, 141, 0.5)",
+    backgroundColor: vars.colors.brandDimmed,
+    color: vars.colors.text.dimmed,
+  },
+
+  ":focus": {
+    outline: "none",
   },
 });

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts

@@ -1,12 +1,14 @@
 import { style } from "@vanilla-extract/css";
 
+// @ts-ignore
+import { vars } from "../../../../../styles/theme/index.css.ts";
+
 export const ImageInputDisplay = style({
   display: "flex",
-  // justifyContent:'space-around',
 });
 
 export const InputLabel = style({
-  marginBottom: "5px",
+  marginBottom: vars.spacing.small,
   display: "block",
 });
 
@@ -15,12 +17,25 @@ export const ImageInput = style({
 });
 
 export const ImageInputButton = style({
-  backgroundColor: "rgb(38, 77, 141)",
+  backgroundColor: vars.colors.brand,
-  fontSize: "1.2em",
+  fontSize: vars.fonts.sizes.Subheadline,
   fontWeight: "bold",
-  color: "white",
+  color: vars.colors.text.normal,
-  padding: "8px",
+  padding: vars.spacing.small,
-  borderRadius: "5px",
+  borderRadius: vars.trim.smallBorderRadius,
+
+  ":hover": {
+    backgroundColor: vars.colors.brandHover,
+  },
+
+  ":active": {
+    backgroundColor: vars.colors.brandActive,
+  },
+
+  ":disabled": {
+    backgroundColor: vars.colors.brandDimmed,
+    color: vars.colors.text.dimmed,
+  },
 });
 
 // this is needed to fix an issue with the image input text
@@ -29,6 +44,8 @@ export const ImageFixer = style({
   marginLeft: "20px",
 });
 
+// just a 1 off component for now
+// dont bother bringing in line with the rest of the app
 export const XButton = style({
   position: "absolute",
   transform: "translateX(-50%) translateY(-35%)",

ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts

@@ -1,9 +1,10 @@
 import { style } from "@vanilla-extract/css";
 
+// @ts-ignore
+import { vars } from "../../../styles/theme/index.css.ts";
+
 export const displayPanel = style({
-  padding: "10px",
+  padding: vars.spacing.medium,
-  // width: '512px',
-  // height: '512px',
 });
 
 export const displayContainer = style({
@@ -20,12 +21,12 @@ export const CurrentDisplay = style({
 });
 
 export const previousImages = style({
-  marginLeft: "30px",
+  marginLeft: vars.spacing.large,
   display: "flex",
   flex: "auto",
   flexWrap: "wrap",
 });
 
 export const previousImage = style({
-  margin: "0 10px",
+  margin: `0 ${vars.spacing.small}`,
 });

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

@@ -1,14 +1,16 @@
 import { style, globalStyle } from "@vanilla-extract/css";
+//@ts-ignore
+import { vars } from "../../../styles/theme/index.css.ts";
 
 export const HeaderDisplayMain = style({
-  color: "#ffffff",
+  color: vars.colors.text.normal,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
 });
 
 globalStyle(`${HeaderDisplayMain} > h1`, {
-  fontSize: "1.5em",
+  fontSize: vars.fonts.sizes.Title,
   fontWeight: "bold",
-  marginRight: "10px",
+  marginRight: vars.spacing.medium,
 });

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

@@ -1,14 +1,16 @@
 import { style } from "@vanilla-extract/css";
 
-// TODO  MOVE TO GLOBAL CSS
+// @ts-ignore
+import { vars } from "../../../../styles/theme/index.css.ts";
+
 export const StartingStatus = style({
-  color: "#f0ad4e",
+  color: vars.colors.warning,
 });
 
 export const ErrorStatus = style({
-  color: "#d9534f",
+  color: vars.colors.error,
 });
 
 export const SuccessStatus = style({
-  color: "#5cb85c",
+  color: vars.colors.success,
 });

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 // @ts-ignore
-import { vars } from "../../styles/theme.css.ts";
+import { vars } from "../../styles/theme/index.css.ts";
 
 export const AppLayout = style({
   position: "relative",

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

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

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -17,37 +17,37 @@ export type ImageRequest = {
   num_inference_steps: number;
   guidance_scale: number;
   width:
-  | 128
+    | 128
-  | 192
+    | 192
-  | 256
+    | 256
-  | 320
+    | 320
-  | 384
+    | 384
-  | 448
+    | 448
-  | 512
+    | 512
-  | 576
+    | 576
-  | 640
+    | 640
-  | 704
+    | 704
-  | 768
+    | 768
-  | 832
+    | 832
-  | 896
+    | 896
-  | 960
+    | 960
-  | 1024;
+    | 1024;
   height:
-  | 128
+    | 128
-  | 192
+    | 192
-  | 256
+    | 256
-  | 320
+    | 320
-  | 384
+    | 384
-  | 448
+    | 448
-  | 512
+    | 512
-  | 576
+    | 576
-  | 640
+    | 640
-  | 704
+    | 704
-  | 768
+    | 768
-  | 832
+    | 832
-  | 896
+    | 896
-  | 960
+    | 960
-  | 1024;
+    | 1024;
   // allow_nsfw: boolean;
   turbo: boolean;
   use_cpu: boolean;
@@ -215,7 +215,6 @@ export const useImageCreate = create<ImageCreateState>(
         request.prompt_strength = undefined;
       }
 
-
       return request;
     },
 
@@ -224,7 +223,7 @@ export const useImageCreate = create<ImageCreateState>(
         produce((state) => {
           const isSeting =
             typeof state.getValueForRequestKey("use_face_correction") ===
-              "string"
+            "string"
               ? null
               : "GFPGANv1.3";
           state.requestOptions.use_face_correction = isSeting;

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

@@ -25,7 +25,6 @@ globalStyle(`*`, {
   boxSizing: "border-box",
 });
 
-
 /** RESETS */
 globalStyle(`p, h3, h4`, {
   margin: 0,

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

@@ -12,45 +12,44 @@ import {
  * Lots of these arent used yet, but once they are defined and useable then they can be set.
  */
 
+// Link color 0, 102, 204
+
 const colors = createThemeContract({
+  brand: null,
+  brandDimmed: null,
+  brandHover: null,
+  brandActive: null,
+  brandAccent: null,
+  brandAccentDimmed: null,
+  brandAccentActive: null,
 
-  brand: '##5000b9', // purple
+  secondary: null,
-  brandDimmed: '#5000b9', // purple
+  secondaryDimmed: null,
-  brandHover: '5d00d6', // bringhter purple
+  secondaryHover: null,
-  brandHoverDimmed: '#5d00d6', // bringhter purple
+  secondaryActive: null,
-  brandActive: '#5d00d6', // bringhter purple
+  secondaryAccent: null,
-  brandActiveDimmed: '#5d00d6', // bringhter purple
+  secondaryAccentDimmed: null,
-  brandAccent: '#28004e', // darker purple
+  secondaryAccentActive: null,
-  brandAccentDimmed: '#28004e', // darker purple
-  brandAccentActive: '#28004e', // darker purple
 
-  secondary: '#0b8334', // green
+  background: null,
-  secondaryDimmed: '#0b8334', // green
+  backgroundAccent: null,
-  secondaryHover: '#0b8334', // green
+  backgroundAlt: null,
-  secondaryHoverDimmed: '#0b8334', // green
+  backgroundAltAccent: null,
-  secondaryActive: '#0b8334', // green
-  secondaryActiveDimmed: '#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
 
   text: {
-    normal: '#ffffff', // white
+    normal: null,
-    dimmed: '#d1d5db', // off white
+    dimmed: null,
 
-    secondary: '#e7ba71', // orange
+    secondary: null,
-    secondaryDimmed: '#7d6641', // muted orange
+    secondaryDimmed: null,
+
+    accent: null,
+    accentDimmed: null,
   },
 
-  warning: "yellow",
+  warning: null,
-  error: "red",
+  error: null,
-  success: "green",
+  success: null,
-
 });
 
 const app = createGlobalTheme(":root", {
@@ -59,95 +58,99 @@ const app = createGlobalTheme(":root", {
     medium: "10px",
     large: "25px",
   },
+
+  trim: {
+    smallBorderRadius: "5px",
+  },
+
   fonts: {
     body: "Arial, Helvetica, sans-serif;",
+    sizes: {
+      Title: "2em",
+      Headline: "1.5em",
+      Subheadline: "1.20em",
+      Body: "1em",
+      Caption: ".75em",
+      Overline: ".5em",
+    },
   },
   colors: colors,
 });
 
-
-export const lightTheme = createTheme(colors, {
-  brand: '##5000b9', // purple
-  brandDimmed: '#5000b9', // purple
-  brandHover: '5d00d6', // bringhter purple
-  brandHoverDimmed: '#5d00d6', // bringhter purple
-  brandActive: '#5d00d6', // bringhter purple
-  brandActiveDimmed: '#5d00d6', // bringhter purple
-  brandAccent: '#28004e', // darker purple
-  brandAccentDimmed: '#28004e', // darker purple
-  brandAccentActive: '#28004e', // darker purple
-
-  secondary: '#0b8334', // green
-  secondaryDimmed: '#0b8334', // green
-  secondaryHover: '#0b8334', // green
-  secondaryHoverDimmed: '#0b8334', // green
-  secondaryActive: '#0b8334', // green
-  secondaryActiveDimmed: '#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
-
-  text: {
-    normal: '#ffffff', // white
-    dimmed: '#d1d5db', // off white
-
-    secondary: '#e7ba71', // orange
-    secondaryDimmed: '#7d6641', // muted orange
-  },
-
-  warning: "yellow",
-  error: "red",
-  success: "green",
-
-});
-
-
 export const darkTheme = createTheme(colors, {
-  brand: '##5000b9', // purple
+  brand: "#5000b9", // purple
-  brandDimmed: '#5000b9', // purple
+  brandDimmed: "#433852", // muted purple
-  brandHover: '5d00d6', // bringhter purple
+  brandHover: "#5d00d6", // bringhter purple
-  brandHoverDimmed: '#5d00d6', // bringhter purple
+  brandActive: "#5d00d6", // bringhter purple
-  brandActive: '#5d00d6', // bringhter purple
+  brandAccent: "#28004e", // darker purple
-  brandActiveDimmed: '#5d00d6', // bringhter purple
+  brandAccentDimmed: "#28004e", // darker purple
-  brandAccent: '#28004e', // darker purple
+  brandAccentActive: "#28004e", // darker purple
-  brandAccentDimmed: '#28004e', // darker purple
-  brandAccentActive: '#28004e', // darker purple
 
-  secondary: '#0b8334', // green
+  secondary: "#0b8334", // green
-  secondaryDimmed: '#0b8334', // green
+  secondaryDimmed: "#0b8334", // green
-  secondaryHover: '#0b8334', // green
+  secondaryHover: "#0b8334", // green
-  secondaryHoverDimmed: '#0b8334', // green
+  secondaryActive: "#0b8334", // green
-  secondaryActive: '#0b8334', // green
+  secondaryAccent: "#0b8334", // green
-  secondaryActiveDimmed: '#0b8334', // green
+  secondaryAccentDimmed: "#0b8334", // green
-  secondaryAccent: '#0b8334', // green
+  secondaryAccentActive: "#0b8334", // green
-  secondaryAccentDimmed: '#0b8334', // green
-  secondaryAccentActive: '#0b8334', // green
 
-  background: '#202124', // dark grey
+  background: "#202124", // dark grey
-  backgroundAccent: ' #383838', // lighter grey
+  backgroundAccent: " #383838", // lighter grey
-  backgroundAlt: '#2c2d30', // med grey
+  backgroundAlt: "#2c2d30", // med grey
-  backgroundAltAccent: '#383838', // lighter grey
+  backgroundAltAccent: "#383838", // lighter grey
 
   text: {
-    normal: '#ffffff', // white
+    normal: "#ffffff", // white
-    dimmed: '#d1d5db', // off white
+    dimmed: "#d1d5db", // off white
 
-    secondary: '#e7ba71', // orange
+    secondary: "#ffffff", // white
-    secondaryDimmed: '#7d6641', // muted orange
+    secondaryDimmed: "#d1d5db", // off white
+
+    accent: "#e7ba71", // orange
+    accentDimmed: "#7d6641", // muted orange
+  },
+
+  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",
+  text: {
+    normal: "#1F2937",
+    dimmed: "#6B7280",
+
+    secondary: "#1F2937",
+    secondaryDimmed: "#6B7280",
+
+    accent: "#1F2937",
+    accentDimmed: "#6B7280",
   },
 
   warning: "yellow",
   error: "red",
   success: "green",
-
 });
 
-
-
-
 export const vars = { ...app, colors };