diff --git a/ui/frontend/build_src/src/components/_recipes/button.css.ts b/ui/frontend/build_src/src/components/_recipes/button.css.ts
index ad58f24a..cdadc9f8 100644
--- a/ui/frontend/build_src/src/components/_recipes/button.css.ts
+++ b/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: {
diff --git a/ui/frontend/build_src/src/components/_recipes/popover_headless.css.ts b/ui/frontend/build_src/src/components/_recipes/popover_headless.css.ts
index 6f7d2626..b91c6b69 100644
--- a/ui/frontend/build_src/src/components/_recipes/popover_headless.css.ts
+++ b/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'
});
diff --git a/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts b/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts
index f4ebd6bf..01909834 100644
--- a/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts
+++ b/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: {
diff --git a/ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts b/ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts
deleted file mode 100644
index add572d4..00000000
--- a/ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { style, globalStyle } from '@vanilla-extract/css';
-
-
-import { PanelBox } from '../../../styles/shared.css';
-
-
-export const CreationTabsMain = style([PanelBox, {
- flexGrow: 1,
-}]);
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx b/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx
index 3b68d593..58479397 100644
--- a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx
+++ b/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() {
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
index 59583689..916ba101 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
+++ b/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 (
-
+
{advancedSettingsIsOpen && }
-
+
);
}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
index 8d7573b4..635338ab 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
+++ b/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({
- position: "relative",
- width: "100%",
-});
+import { card } from "../../../_recipes/card.css";
+
+
+export const CreationBasicMain = style([
+ card({
+ baking: 'normal',
+ level: 1
+ }), {
+ position: "relative",
+ width: "100%",
+ }]
+);
globalStyle(`${CreationBasicMain} > *`, {
marginBottom: "10px",
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts
index b8495f5e..d7772c4b 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts
+++ b/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",
-}]);
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
index 98bc4097..fd2d690d 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
+++ b/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 (
-
+
{imageModifierIsOpen && (
{allModifiers.map((item, index) => {
-
-
return (
-
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts
deleted file mode 100644
index d61c5a40..00000000
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts
+++ /dev/null
@@ -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 };
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
index e7e28d46..9730ba11 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
+++ b/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() {
)}
-
- {(showQueue && hasQueue) && (
-
-
-
- )}
-
>
);
}
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx
index bc5c2609..f13fca6a 100644
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx
+++ b/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";
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
index 2f3f3913..efcd339a 100644
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
+++ b/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({
diff --git a/ui/frontend/build_src/src/pages/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts
index 36ae7181..c5b3f7fa 100644
--- a/ui/frontend/build_src/src/pages/Home/home.css.ts
+++ b/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",
- overflowX: "hidden",
+ // overflowY: "auto",
+ // overflowX: "hidden",
padding: `0 ${vars.spacing.small}`,
});
diff --git a/ui/frontend/build_src/src/styles/index.css.ts b/ui/frontend/build_src/src/styles/index.css.ts
index ba54cd13..6874bb56 100644
--- a/ui/frontend/build_src/src/styles/index.css.ts
+++ b/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`, {
diff --git a/ui/frontend/build_src/src/styles/theme/index.css.ts b/ui/frontend/build_src/src/styles/theme/index.css.ts
index 064cafaa..f884b801 100644
--- a/ui/frontend/build_src/src/styles/theme/index.css.ts
+++ b/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',
- secondaryHue: '54',
- tertiaryHue: '116',
-
- errorHue: '0',
- warningHue: '60',
- successHue: '120',
+ errorHue: '325', // magenta
+ warningHue: '25', // orange
+ successHue: '85', // green
colorMod: {
saturation: {