From d0a2c36f6ce0b296aed1f598fb804f71a32a7d50 Mon Sep 17 00:00:00 2001 From: caranicas Date: Fri, 30 Sep 2022 16:48:20 -0400 Subject: [PATCH] tightened up themeing and cards more and more --- .../src/components/_recipes/button.css.ts | 5 +- .../_recipes/popover_headless.css.ts | 1 - .../components/_recipes/tabs_headless.css.ts | 9 +- .../layouts/CreationTabs/creationTabs.css.ts | 9 - .../components/layouts/CreationTabs/index.tsx | 8 - .../creationPanel/advancedSettings/index.tsx | 24 ++- .../basicCreation/basicCreation.css.ts | 16 +- .../creationPanel/creationPanel.css.ts | 17 +- .../creationPanel/imageModifiers/index.tsx | 25 ++- .../organisms/creationPanel/index.css.ts | 160 ------------------ .../organisms/creationPanel/index.tsx | 12 -- .../queueDisplay/queueItem/index.tsx | 9 - .../queueDisplay/queueItem/queueItem.css.ts | 30 ++-- .../build_src/src/pages/Home/home.css.ts | 4 +- ui/frontend/build_src/src/styles/index.css.ts | 6 +- .../build_src/src/styles/theme/index.css.ts | 14 +- 16 files changed, 100 insertions(+), 249 deletions(-) delete mode 100644 ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts delete mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts 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: {