move to hsl color system

ui/frontend/build_src/package-lock.json

@@ -13,6 +13,7 @@
         "@tanstack/react-query": "^4.2.3",
         "@tanstack/react-query-devtools": "^4.2.3",
         "@vanilla-extract/css": "^1.9.0",
+        "@vanilla-extract/css-utils": "^0.1.2",
         "@vanilla-extract/recipes": "^0.2.5",
         "@vanilla-extract/vite-plugin": "^3.5.0",
         "i18next": "^21.9.2",
@@ -1166,6 +1167,11 @@
         "outdent": "^0.8.0"
       }
     },
+    "node_modules/@vanilla-extract/css-utils": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/css-utils/-/css-utils-0.1.2.tgz",
+      "integrity": "sha512-qoxIu5E/UhJtoKsPL1JaU9nhTN0Xl5zYV0pScOgsvc3JN46TvTTt0L3GV8x3PQpZP7x3elw8BsC9czYbhJy9Gg=="
+    },
     "node_modules/@vanilla-extract/css/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5733,6 +5739,11 @@
         }
       }
     },
+    "@vanilla-extract/css-utils": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/css-utils/-/css-utils-0.1.2.tgz",
+      "integrity": "sha512-qoxIu5E/UhJtoKsPL1JaU9nhTN0Xl5zYV0pScOgsvc3JN46TvTTt0L3GV8x3PQpZP7x3elw8BsC9czYbhJy9Gg=="
+    },
     "@vanilla-extract/integration": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-5.0.1.tgz",

ui/frontend/build_src/package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-query-devtools": "^4.2.3",
     "@vanilla-extract/css": "^1.9.0",
+    "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/recipes": "^0.2.5",
     "@vanilla-extract/vite-plugin": "^3.5.0",
     "i18next": "^21.9.2",

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

@@ -0,0 +1,111 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
+
+export const buttonStyle = recipe({
+
+  // would prefer to use a var here, but it doesn't work
+  // vars: {
+  //   '--button-base-saturation': vars.colorMod.saturation.normal,
+  //   '--button-base-lightness': vars.colorMod.lightness.normal,
+  // },
+
+  base: {
+    fontSize: vars.fonts.sizes.Subheadline,
+    fontWeight: "bold",
+    color: vars.colors.text.normal,
+    padding: vars.spacing.small,
+    border: "0",
+    borderRadius: vars.trim.smallBorderRadius,
+  },
+
+  variants: {
+    type: {
+      primary: {
+        '--primary-button-hue': vars.brandHue,
+        backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+
+        ":active": {
+          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":focus": {
+          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":disabled": {
+          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+        },
+      },
+      secondary: {
+        '--secondary-button-hue': vars.secondaryHue,
+        backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+
+        ":active": {
+          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":focus": {
+          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":disabled": {
+          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+        },
+      },
+      tertiary: {
+        '--tertiary-button-hue': vars.tertiaryHue,
+        backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+
+        ":active": {
+          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":focus": {
+          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":disabled": {
+          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+        },
+      },
+
+      cancel: {
+        '--cancel-button-hue': vars.errorHue,
+        backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+        ":active": {
+          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright} ,${vars.colorMod.lightness.dim})`,
+        },
+        ":focus": {
+          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright} ,${vars.colorMod.lightness.dim})`,
+        },
+        ":disabled": {
+          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.dim} ,${vars.colorMod.lightness.dim})`,
+        },
+      },
+
+    },
+
+    size: {
+      large: {
+        width: "100%",
+        fontSize: vars.fonts.sizes.Headline,
+      }
+    }
+  },
+  defaultVariants: {
+    type: "primary",
+  },
+
+});

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

@@ -0,0 +1,23 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
+
+export const card = recipe({
+  base: {
+    background: vars.colors.background,
+    color: vars.colors.text.normal,
+    padding: vars.spacing.medium,
+    borderRadius: vars.trim.smallBorderRadius,
+  },
+  variants: {
+    level: {
+      1: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
+      2: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
+      3: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
+    },
+  },
+  defaultVariants: {
+    level: 1,
+  },
+});
+
+

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

@@ -0,0 +1,24 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
+
+
+export const card = recipe({
+  base: {
+    background: vars.colors.background,
+    color: vars.colors.text.normal,
+    padding: vars.spacing.medium,
+    borderRadius: vars.trim.smallBorderRadius,
+  },
+  variants: {
+    level: {
+      1: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
+      2: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
+      3: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
+    },
+  },
+  defaultVariants: {
+    level: 1,
+  },
+});
+
+

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

@@ -1,7 +1,9 @@
 
 import { style, globalStyle } from "@vanilla-extract/css";
 
-import { vars } from "../../../styles/theme/index.css";
+// import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
+
 
 export const PopoverMain = style({
   position: 'relative'

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

@@ -1,6 +1,7 @@
 import { style, } from "@vanilla-extract/css";
 
-//import { vars } from "../../../styles/theme/index.css";
+// import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
 
 export const SwitchGroupMain = style({
 });

ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts

@@ -0,0 +1,9 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+
+
+import { PanelBox } from '../../../styles/shared.css';
+
+
+export const CreationTabsMain = style([PanelBox, {
+  flexGrow: 1,
+}]);

ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Tab } from '@headlessui/react';
+
+import CreationPanel from "../../organisms/creationPanel";
+import QueueDisplay from "../../organisms/queueDisplay";
+
+import {
+  CreationTabsMain
+} from "./creationTabs.css";
+
+export default function CreationTabs() {
+
+  return (
+    <Tab.Group>
+      <Tab.List>
+        <Tab>Create</Tab>
+        <Tab>Queue</Tab>
+      </Tab.List>
+      <Tab.Panels className={CreationTabsMain}>
+        <Tab.Panel>
+          <CreationPanel></CreationPanel>
+        </Tab.Panel>
+        <Tab.Panel>
+          <QueueDisplay></QueueDisplay>
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+}

ui/frontend/build_src/src/components/molecules/clearQueue/index.tsx

@@ -8,7 +8,7 @@ import {
 
 export default function ClearQueue() {
 
-  const hasQueue = useRequestQueue((state) => state.hasPendingQueue());
+  const hasQueue = useRequestQueue((state) => state.hasAnyQueue());
   const clearQueue = useRequestQueue((state) => state.clearQueue);
 
   const stopAll = async () => {

ui/frontend/build_src/src/components/molecules/makeButton/index.tsx

@@ -24,9 +24,10 @@ import {
   ImageOutput,
   doMakeImage,
 } from "../../../api";
+
 import {
-  MakeButtonStyle,
+  buttonStyle
-} from "./makeButton.css";
+} from "../../_recipes/button.css";
 
 import { useTranslation } from "react-i18next";
 
@@ -260,7 +261,9 @@ export default function MakeButton() {
   return (
     <>
       <button
-        className={MakeButtonStyle}
+        className={buttonStyle({
+          size: "large",
+        })}
         onClick={() => {
           void makeImageQueue();
         }}

ui/frontend/build_src/src/components/molecules/makeButton/makeButton.css.ts

@@ -1,10 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { vars } from "../../../styles/theme/index.css";
-
-import { BrandedButton } from "../../../styles/shared.css";
-
-export const MakeButtonStyle = style([BrandedButton, {
-  width: "100%",
-  fontSize: vars.fonts.sizes.Headline,
-}]);

ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx

@@ -6,7 +6,7 @@ import {
   PopoverMain,
   PopoverButtonStyle,
   PopoverPanelMain,
-} from "../../../_headless/popover/index.css";
+} from "../../../_recipes/popover_headless.css";
 
 import {
   IconFont,

ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx

@@ -17,7 +17,7 @@ import {
   PopoverMain,
   PopoverButtonStyle,
   PopoverPanelMain,
-} from "../../../_headless/popover/index.css";
+} from "../../../_recipes/popover_headless.css";
 
 import {
   SettingContent

ui/frontend/build_src/src/components/organisms/queueDisplay/index.tsx

@@ -10,11 +10,13 @@ import {
   ErrorButton
 } from "./queueDisplay.css";
 
+import {
+  buttonStyle
+} from "../../_recipes/button.css";
 
 import ClearQueue from "../../molecules/clearQueue";
 import QueueItem from "./queueItem";
 
-
 export default function QueueDisplay() {
 
   const requests: QueuedRequest[] = useRequestQueue((state) => state.requests);
@@ -33,8 +35,16 @@ export default function QueueDisplay() {
     <div className={QueueDisplayMain}>
       <ClearQueue />
       <div className={QueueListButtons}>
-        <button className={CompleteButtton} onClick={clearCompleted}>Clear Completed</button>
+        <button
-        <button className={ErrorButton} onClick={clearErrored}>Clear Errored</button>
+          className={buttonStyle({
+            type: "secondary",
+          })}
+          onClick={clearCompleted}>Clear Completed</button>
+        <button
+          className={buttonStyle({
+            type: "secondary",
+          })}
+          onClick={clearErrored}>Clear Errored</button>
       </div>
       {requests.map((request) => {
         return <QueueItem key={request.id} request={request}></QueueItem>;

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

@@ -7,7 +7,7 @@ import { vars } from "../../../styles/theme/index.css";
 export const QueueDisplayMain = style({
   display: "flex",
   flexDirection: "column",
-  width: '400px',
+  width: '100%',
   height: '100%',
 });
 

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

@@ -1,4 +1,4 @@
-import { style } from "@vanilla-extract/css";
+import { style, globalStyle } from "@vanilla-extract/css";
 import { vars } from "../../styles/theme/index.css";
 
 export const AppLayout = style({
@@ -38,8 +38,18 @@ export const HeaderLayout = style({
 export const CreateLayout = style({
   gridArea: "create",
   position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  overflowY: "auto",
+  overflowX: "hidden",
 });
 
+// globalStyle(`${CreateLayout}`, {
+
+
+
+// }
+
 export const DisplayLayout = style({
   gridArea: "display",
   overflow: "auto",

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

@@ -19,6 +19,7 @@ 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 }) {
   // Get the original save directory
@@ -56,7 +57,8 @@ function Home({ className }: { className: any }) {
         <HeaderDisplay></HeaderDisplay>
       </header>
       <nav className={CreateLayout}>
-        <CreationPanel></CreationPanel>
+        <CreationTabs></CreationTabs>
+        {/* <CreationPanel></CreationPanel> */}
       </nav>
       <main className={DisplayLayout}>
         <DisplayPanel></DisplayPanel>

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

@@ -1,22 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-
-export const button = recipe({
-  variants: {
-    color: {
-      neutral: { background: "whitesmoke" },
-      brand: { background: "blueviolet" },
-      accent: { background: "slateblue" },
-    },
-    size: {
-      small: { padding: 12 },
-      medium: { padding: 16 },
-      large: { padding: 24 },
-    },
-  },
-});
-
-// export const card = recipe({
-//   variants: {
-//     color: {
-
-//       alt: { background: 'whitesmoke' },

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

@@ -26,13 +26,11 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
 //TODO this should probably just be for all li elements
 export const SettingItem = style({
   marginBottom: vars.spacing.medium,
-
   selectors: {
     "&:last-of-type": {
       marginBottom: vars.spacing.none,
     },
   },
-
 });
 
 

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

@@ -11,6 +11,21 @@ import {
  *
  * Lots of these arent used yet, but once they are defined and useable then they can be set.
  */
+
+// const SharedColors = {
+
+//   pending: null,
+//   processing: null,
+//   paused: null,
+
+//   link: null,
+
+//   warning: null,
+//   error: null,
+//   success: null,
+
+// }
+
 const colors = createThemeContract({
   brand: null,
   brandDimmed: null,
@@ -46,7 +61,13 @@ const colors = createThemeContract({
     accentDimmed: null,
   },
 
+  // pending: null,
+  // processing: null,
+  // paused: null,
+
+
   link: null,
+
   warning: null,
   error: null,
   success: null,
@@ -80,6 +101,28 @@ const app = createGlobalTheme(":root", {
     },
   },
   colors,
+
+  brandHue: '265',
+  secondaryHue: '54',
+  tertiaryHue: '116',
+
+  errorHue: '0',
+  warningHue: '60',
+  successHue: '120',
+
+  colorMod: {
+    saturation: {
+      normal: "70%",
+      bright: "100%",
+      dim: "30%",
+    },
+    lightness: {
+      normal: "50%",
+      bright: "60%",
+      dim: "40%",
+    },
+  },
+
 });
 
 export const darkTheme = createTheme(colors, {