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 && (
)} - - {(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: {