mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-01-26 08:08:58 +01:00
tightened up themeing and cards more and more
This commit is contained in:
caranicas
parent
9facc9379f
commit
d0a2c36f6c
@ -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: {
|
||||
|
||||
@ -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'
|
||||
});
|
||||
|
||||
@ -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: {
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import { style, globalStyle } from '@vanilla-extract/css';
|
||||
|
||||
|
||||
import { PanelBox } from '../../../styles/shared.css';
|
||||
|
||||
|
||||
export const CreationTabsMain = style([PanelBox, {
|
||||
flexGrow: 1,
|
||||
}]);
|
||||
@ -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() {
|
||||
|
||||
|
||||
@ -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 >
|
||||
);
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
}]);
|
||||
@ -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? */}
|
||||
<h3>Image Modifiers (art styles, tags, ect)</h3>
|
||||
Image Modifiers
|
||||
</button>
|
||||
|
||||
{imageModifierIsOpen && (
|
||||
<ul className={ImagerModifierGroups}>
|
||||
{allModifiers.map((item, index) => {
|
||||
|
||||
|
||||
return (
|
||||
<li key={item.category}>
|
||||
<ModifierGrouping title={item.category} category={item.category} tags={item.modifiers} />
|
||||
|
||||
@ -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 };
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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}`,
|
||||
});
|
||||
|
||||
|
||||
@ -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`, {
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user