tightened up themeing and cards more and more

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

@@ -77,7 +77,6 @@ export const buttonStyle = recipe({
           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})`,
@@ -94,7 +93,9 @@ export const buttonStyle = recipe({
           backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.dim} ,${vars.colorMod.lightness.dim})`,
         },
       },
-
+      clear: {
+        backgroundColor: "transparent",
+      },
     },
 
     size: {

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

@@ -4,7 +4,6 @@ import { style, globalStyle } from "@vanilla-extract/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/tabs_headless.css.ts

@@ -11,7 +11,7 @@ export const tabStyles = recipe({
     border: `1px solid ${vars.backgroundLight}`,
     borderBottom: 'none',
     marginLeft: vars.spacing.small,
-    boxShadow: `0px -1px 4px -2px ${vars.backgroundAccentMain}`,
+    boxShadow: `0px -1px 4px -2px ${vars.backgroundAccentMain} inset`,
   },
 
   variants: {
@@ -19,6 +19,7 @@ export const tabStyles = recipe({
       true: {
         background: vars.backgroundLight,
         color: vars.colors.text.normal,
+        boxShadow: `0px -1px 4px -2px ${vars.backgroundDark} inset`,
       }
     }
   }
@@ -30,6 +31,12 @@ export const tabPanelStyles = recipe({
     borderRadius: `0 0 ${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius}`,
     background: vars.backgroundLight,
     padding: vars.spacing.medium,
+    flexGrow: 1,
+    overflow: 'auto',
+    "::-webkit-scrollbar": {
+      width: "0",
+    },
+
   },
   variants: {
 

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

@@ -1,9 +0,0 @@
-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

@@ -3,20 +3,12 @@ import { Tab } from '@headlessui/react';
 import CreationPanel from "../../organisms/creationPanel";
 import QueueDisplay from "../../organisms/queueDisplay";
 
-import {
-  CreationTabsMain
-} from "./creationTabs.css";
 
 import {
   tabPanelStyles,
   tabStyles,
 } from "../../_recipes/tabs_headless.css";
 
-import {
-  card as cardStyle
-} from "../../_recipes/card.css";
-
-
 
 export default function CreationTabs() {
 

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

@@ -3,6 +3,14 @@ import { useCreateUI } from "../creationPanelUIStore";
 
 import { PanelBox } from "../../../../styles/shared.css";
 
+import {
+  card
+} from '../../../_recipes/card.css';
+
+import {
+  buttonStyle,
+} from "../../../_recipes/button.css";
+
 import {
   AdvancedSettingsList,
   AdvancedSettingGrouping,
@@ -38,15 +46,23 @@ export default function AdvancedSettings() {
   );
 
   return (
-    <div className={PanelBox}>
+    <div className={card(
+      {
+        level: 1,
+        baking: 'normal'
+      }
+    )}>
       <button
         type="button"
         onClick={toggleAdvancedSettingsIsOpen}
-        className="panel-box-toggle-btn"
+        className={buttonStyle({
+          type: 'clear',
+          size: 'large'
+        })}
       >
-        <h3>Advanced Settings</h3>
+        Advanced Settings
       </button>
       {advancedSettingsIsOpen && <SettingsList />}
-    </div>
+    </div >
   );
 }

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

@@ -1,9 +1,17 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-export const CreationBasicMain = style({
+import { card } from "../../../_recipes/card.css";
-  position: "relative",
+
-  width: "100%",
+
-});
+export const CreationBasicMain = style([
+  card({
+    baking: 'normal',
+    level: 1
+  }), {
+    position: "relative",
+    width: "100%",
+  }]
+);
 
 globalStyle(`${CreationBasicMain} > *`, {
   marginBottom: "10px",

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

@@ -1,14 +1,18 @@
-import { style } from "@vanilla-extract/css";
+import { style, globalStyle } from "@vanilla-extract/css";
 import { PanelBox } from "../../../styles/shared.css";
+import { vars } from "../../../styles/theme/index.css";
 export const CreationPaneMain = style({
   position: "relative",
   width: "100%",
   height: "100%",
-  padding: "0 10px",
   overflowY: "auto",
   overflowX: "hidden",
 });
 
+globalStyle(`${CreationPaneMain} > div`, {
+  marginBottom: vars.spacing.medium,
+});
+
 export const InpaintingSlider = style({
   position: "absolute",
   top: "10px",
@@ -16,12 +20,3 @@ export const InpaintingSlider = style({
   zIndex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.5)",
 });
-
-export const QueueSlider = style([PanelBox, {
-  position: "absolute",
-  top: "10px",
-  left: "400px",
-  zIndex: 1,
-  maxHeight: "90%",
-  overflowY: "auto",
-}]);

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

@@ -6,6 +6,14 @@ import {
   MenuButton,
 } from "../../../../styles/shared.css";
 
+import {
+  card
+} from '../../../_recipes/card.css';
+
+import {
+  buttonStyle,
+} from "../../../_recipes/button.css";
+
 import {
   ImagerModifierGroups,
   ImageModifierGrouping,
@@ -72,21 +80,26 @@ export default function ImageModifers() {
   };
 
   return (
-    <div className={PanelBox}>
+    <div className={card(
+      {
+        level: 1,
+        baking: 'normal'
+      }
+    )}>
       <button
         type="button"
         onClick={handleClick}
-        className="panel-box-toggle-btn"
+        className={buttonStyle({
+          type: 'clear',
+          size: 'large'
+        })}
       >
-        {/* TODO: swap this manual collapse stuff out for some UI component? */}
+        Image Modifiers
-        <h3>Image Modifiers (art styles, tags, ect)</h3>
       </button>
 
       {imageModifierIsOpen && (
         <ul className={ImagerModifierGroups}>
           {allModifiers.map((item, index) => {
-
-
             return (
               <li key={item.category}>
                 <ModifierGrouping title={item.category} category={item.category} tags={item.modifiers} />

ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts

@@ -1,160 +0,0 @@
-import {
-  createGlobalTheme,
-  createThemeContract,
-  createTheme,
-} from "@vanilla-extract/css";
-
-/**
- * Colors are all the same across the themes, this is just to set up a contract
- * Colors can be decided later. I am just the architect.
- * Tried to pull things from the original app.
- *
- * 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,
-
-  secondary: null,
-  secondaryDimmed: null,
-  secondaryHover: null,
-  secondaryActive: null,
-  secondaryAccent: null,
-  secondaryAccentDimmed: null,
-  secondaryAccentActive: null,
-
-  background: null,
-  backgroundAccent: null,
-  backgroundAlt: null,
-  backgroundAltAccent: null,
-
-  text: {
-    normal: null,
-    dimmed: null,
-
-    secondary: null,
-    secondaryDimmed: null,
-
-    accent: null,
-    accentDimmed: null,
-  },
-
-  link: null,
-  warning: null,
-  error: null,
-  success: null,
-});
-
-const app = createGlobalTheme(":root", {
-  spacing: {
-    small: "5px",
-    medium: "10px",
-    large: "25px",
-  },
-
-  trim: {
-    smallBorderRadius: "5px",
-  },
-
-  fonts: {
-    body: "Arial, Helvetica, sans-serif;",
-    sizes: {
-      Title: "2em",
-      Headline: "1.5em",
-      Subheadline: "1.20em",
-      SubSubheadline: "1em",
-      Body: "1em",
-      Caption: ".75em",
-      Overline: ".5em",
-    },
-  },
-  colors: colors,
-});
-
-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
-
-  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",
-  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 };

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

@@ -13,21 +13,16 @@ import QueueDisplay from "../queueDisplay";
 import { useImageCreate } from "../../../stores/imageCreateStore";
 import { useRequestQueue } from "../../../stores/requestQueueStore";
 
-import { useCreateUI } from "./creationPanelUIStore";
-
-// import "./creationPanel.css";
 
 import {
   CreationPaneMain,
   InpaintingSlider,
-  QueueSlider,
 } from "./creationPanel.css";
 
 
 export default function CreationPanel() {
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
 
-  const showQueue = useCreateUI((state) => state.showQueue);
   const hasQueue = useRequestQueue((state) => state.hasAnyQueue());
 
   return (
@@ -43,13 +38,6 @@ export default function CreationPanel() {
           <InpaintingPanel></InpaintingPanel>
         </div>
       )}
-
-      {(showQueue && hasQueue) && (
-        <div className={QueueSlider}>
-          <QueueDisplay></QueueDisplay>
-        </div>
-      )}
-
     </>
   );
 }

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

@@ -2,9 +2,6 @@
 
 import React from "react";
 
-import {
-  ImageRequest
-} from '../../../../api'
 
 import { QueueStatus, QueuedRequest, useRequestQueue } from '../../../../stores/requestQueueStore';
 
@@ -14,12 +11,6 @@ import {
   QueueItemMain,
   QueueItemInfo,
   QueueButtons,
-  // CompleteButtton,
-  // PauseButton,
-  // ResumeButton,
-  // CancelButton,
-  // RetryButton,
-  // SendToTopButton,
 } from "./queueItem.css";
 
 

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

@@ -6,15 +6,22 @@ import { vars } from "../../../../styles/theme/index.css";
 
 import { QueueStatus } from "../../../../stores/requestQueueStore";
 
-export const QueueItemMain = style({
+
+import {
+  card
+} from '../../../_recipes/card.css';
+
+export const QueueItemMain = style([card(
+  {
+    baking: "dark",
+    level: 1
+  }
+), {
   display: "flex",
   flexDirection: "column",
   width: "100%",
-  padding: vars.spacing.small,
-  borderRadius: vars.trim.smallBorderRadius,
   marginBottom: vars.spacing.medium,
-  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+}]);
-});
 
 export const QueueItemInfo = style({
 
@@ -24,25 +31,26 @@ globalStyle(`${QueueItemInfo} p`, {
   marginBottom: vars.spacing.small,
 });
 
-
 globalStyle(`${QueueItemMain}.${QueueStatus.processing}`, {
-  backgroundColor: vars.colors.warning,
+  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.pending}`, {
-  backgroundColor: vars.colors.backgroundDark,
+  backgroundColor: vars.backgroundDark,
+  // `hsl(${vars.warningHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.paused}`, {
-  backgroundColor: vars.colors.backgroundAlt,
+  backgroundColor: vars.backgroundDark,
+  //`hsl(${vars.tertiaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.complete}`, {
-  backgroundColor: vars.colors.success,
+  backgroundColor: `hsl(${vars.successHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.error}`, {
-  backgroundColor: vars.colors.error,
+  backgroundColor: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 export const QueueButtons = style({

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

@@ -40,8 +40,8 @@ export const CreateLayout = style({
   position: "relative",
   display: "flex",
   flexDirection: "column",
-  overflowY: "auto",
+  // overflowY: "auto",
-  overflowX: "hidden",
+  // overflowX: "hidden",
   padding: `0 ${vars.spacing.small}`,
 });
 

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

@@ -41,12 +41,14 @@ globalStyle(`h1, h2, h3, h4, h5, h6, p, label, ul, textarea`, {
 
 globalStyle(`h3`, {
   fontSize: vars.fonts.sizes.Subheadline,
-  marginBottom: vars.spacing.small,
 });
 
 globalStyle(`h4, h5`, {
   fontSize: vars.fonts.sizes.SubSubheadline,
-  marginBottom: vars.spacing.medium,
+});
+
+globalStyle(`h6`, {
+  fontSize: vars.fonts.sizes.Body,
 });
 
 globalStyle(`p, label`, {

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

@@ -76,14 +76,14 @@ const app = createGlobalTheme(":root", {
   },
   colors,
 
+  // 60degree color difference
+  brandHue: '265', // purple
+  secondaryHue: '205', // light blue
+  tertiaryHue: '145', // grass green
 
-  brandHue: '265',
+  errorHue: '325', // magenta
-  secondaryHue: '54',
+  warningHue: '25', // orange
-  tertiaryHue: '116',
+  successHue: '85', // green
-
-  errorHue: '0',
-  warningHue: '60',
-  successHue: '120',
 
   colorMod: {
     saturation: {