holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clean up font ambiguity

Browse Source
This commit is contained in:
caranicas 2022-09-19 12:47:55 -04:00
parent 27fd1f39f0
commit 737ed7ba5d
11 changed files with 235 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
View File

@ -6,14 +6,14 @@ import { vars } from "../../../../styles/theme/index.css.ts";
// import { PanelBox } from "../../../../styles/shared.css.ts";
export const AdvancedSettingsList = style({
fontSize: vars.fonts.sizes.Body,
marginBottom: vars.spacing.small,
paddingLeft: vars.spacing.medium,
// marginBottom: vars.spacing.small,
paddingLeft: 0,
listStyleType: "none",
});
export const AdvancedSettingItem = style({
paddingBottom: vars.spacing.small,
export const AdvancedSettingGrouping = style({
marginTop: vars.spacing.medium,
marginBottom: vars.spacing.medium,
});
export const MenuButton = style({
@ -25,10 +25,9 @@ export const MenuButton = style({
border: "0 none",
cursor: "pointer",
padding: "0",
marginBottom: vars.spacing.small,
marginBottom: vars.spacing.medium,
});
globalStyle(`${MenuButton}> h4`, {
color: "#e7ba71",
marginTop: "5px !important",
});

11
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
View File

@ -3,6 +3,11 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore";
import {
SettingItem // @ts-expect-error
} from "../../../../../styles/shared.css.ts";
import {
MenuButton, // @ts-expect-error
} from "../advancedsettings.css.ts";
@ -28,7 +33,7 @@ export default function GpuSettings() {
</button>
{gpuOpen && (
<>
<div>
<div className={SettingItem}>
<label>
<input
checked={turbo}
@ -39,7 +44,7 @@ export default function GpuSettings() {
of GPU memory)
</label>
</div>
<div>
<div className={SettingItem}>
<label>
<input
type="checkbox"
@ -49,7 +54,7 @@ export default function GpuSettings() {
Use CPU instead of GPU (warning: this will be *very* slow)
</label>
</div>
<div>
<div className={SettingItem}>
<label>
<input
checked={use_full_precision}

9
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
View File

@ -3,6 +3,9 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore";
import {
SettingItem // @ts-expect-error
} from "../../../../../styles/shared.css.ts";
import {
MenuButton, // @ts-expect-error
} from "../advancedsettings.css.ts";
@ -62,7 +65,7 @@ export default function ImprovementSettings() {
</button>
{improvementOpen && (
<>
<div>
<div className={SettingItem}>
<label>
<input
type="checkbox"
@ -72,7 +75,7 @@ export default function ImprovementSettings() {
Fix incorrect faces and eyes (uses GFPGAN)
</label>
</div>
<div>
<div className={SettingItem}>
<label>
Upscale the image to 4x resolution using
<select
@ -91,7 +94,7 @@ export default function ImprovementSettings() {
</select>
</label>
</div>
<div>
<div className={SettingItem}>
<label>
<input
disabled={isFilteringDisabled}

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

@ -6,7 +6,7 @@ import { PanelBox } from "../../../../styles/shared.css.ts";
import {
AdvancedSettingsList,
AdvancedSettingItem, // @ts-expect-error
AdvancedSettingGrouping, // @ts-expect-error
} from "./advancedsettings.css.ts";
import ImprovementSettings from "./improvementSettings";
@ -19,20 +19,20 @@ import BetaMode from "../../../molecules/betaMode";
function SettingsList() {
return (
<ul className={AdvancedSettingsList}>
<li className={AdvancedSettingItem}>
<li className={AdvancedSettingGrouping}>
<ImprovementSettings />
</li>
<li className={AdvancedSettingItem}>
<li className={AdvancedSettingGrouping}>
<PropertySettings />
</li>
<li className={AdvancedSettingItem}>
<li className={AdvancedSettingGrouping}>
<WorkflowSettings />
</li>
<li className={AdvancedSettingItem}>
<li className={AdvancedSettingGrouping}>
<GpuSettings />
</li>
<li className={AdvancedSettingItem}>
<li className={AdvancedSettingGrouping}>
<BetaMode />
</li>
</ul>

16
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
View File

@ -2,6 +2,10 @@ import React, { useState } from "react";
import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore";
import {
SettingItem // @ts-expect-error
} from "../../../../../styles/shared.css.ts";
import {
MenuButton, // @ts-expect-error
} from "../advancedsettings.css.ts";
@ -64,7 +68,7 @@ export default function PropertySettings() {
</button>
{propertyOpen && (
<>
<div>
<div className={SettingItem}>
<label>
Seed:
<input
@ -85,7 +89,7 @@ export default function PropertySettings() {
</label>
</div>
<div>
<div className={SettingItem}>
<label>
Number of inference steps:{" "}
<input
@ -98,7 +102,7 @@ export default function PropertySettings() {
</label>
</div>
<div>
<div className={SettingItem}>
<label>
Guidance Scale:
<input
@ -116,7 +120,7 @@ export default function PropertySettings() {
</div>
{init_image && (
<div>
<div className={SettingItem}>
<label>
Prompt Strength:{" "}
<input
@ -134,7 +138,7 @@ export default function PropertySettings() {
</div>
)}
<div>
<div className={SettingItem}>
<label>
Width:
<select
@ -151,9 +155,7 @@ export default function PropertySettings() {
))}
</select>
</label>
</div>
<div>
<label>
Height:
<select

12
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
View File

@ -3,6 +3,10 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore";
import {
SettingItem // @ts-expect-error
} from "../../../../../styles/shared.css.ts";
import {
MenuButton, // @ts-expect-error
} from "../advancedsettings.css.ts";
@ -37,7 +41,7 @@ export default function WorkflowSettings() {
</button>
{workflowOpen && (
<>
<div>
<div className={SettingItem}>
<label>
Number of images to make:{" "}
<input
@ -50,7 +54,7 @@ export default function WorkflowSettings() {
/>
</label>
</div>
<div>
<div className={SettingItem}>
<label>
Generate in parallel:
<input
@ -61,7 +65,7 @@ export default function WorkflowSettings() {
/>
</label>
</div>
<div>
<div className={SettingItem}>
<label>
<input
checked={isUseAutoSave}
@ -84,7 +88,7 @@ export default function WorkflowSettings() {
</span>
</label>
</div>
<div>
<div className={SettingItem}>
<label>
<input
checked={isSoundEnabled}

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

@ -18,9 +18,6 @@ globalStyle(`${PromptDisplay} > p`, {
});
globalStyle(`${PromptDisplay} > textarea`, {
fontSize: "1.2em",
fontWeight: "bold",
fontFamily: "Arial",
width: "100%",
resize: "vertical",
height: "100px",

161
ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts Normal file
View File

@ -0,0 +1,161 @@
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 };

26
ui/frontend/build_src/src/styles/index.css.ts
View File

@ -7,7 +7,6 @@ globalStyle("body", {
margin: 0,
minWidth: "320px",
minHeight: "100vh",
fontFamily: vars.fonts.body,
});
// single page style
@ -25,13 +24,36 @@ globalStyle(`*`, {
boxSizing: "border-box",
});
globalStyle(`button`, {
fontSize: vars.fonts.sizes.Body,
})
/** RESETS */
globalStyle(`p, h3, h4`, {
globalStyle(`p, h1, h2, h3, h4, h5, h6, ul`, {
margin: 0,
});
globalStyle(`h3`, {
fontSize: vars.fonts.sizes.Subheadline,
fontFamily: vars.fonts.body,
});
globalStyle(`h4, h5`, {
fontSize: vars.fonts.sizes.SubSubheadline,
fontFamily: vars.fonts.body,
});
globalStyle(`p, label`, {
fontSize: vars.fonts.sizes.Body,
fontFamily: vars.fonts.body,
});
globalStyle(`textarea`, {
margin: 0,
padding: 0,
border: "none",
fontSize: vars.fonts.sizes.Body,
fontWeight: 'bold',
fontFamily: vars.fonts.body,
});

6
ui/frontend/build_src/src/styles/shared.css.ts
View File

@ -5,7 +5,7 @@ import { vars } from "./theme/index.css.ts";
export const PanelBox = style({
background: vars.colors.backgroundAlt,
color: vars.colors.text.normal,
padding: vars.spacing.small,
padding: vars.spacing.medium,
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)",
@ -24,3 +24,7 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
padding: "0",
marginBottom: vars.spacing.small,
});
export const SettingItem = style({
marginBottom: vars.spacing.medium,
});

2
ui/frontend/build_src/src/styles/theme/index.css.ts
View File

@ -70,7 +70,9 @@ const app = createGlobalTheme(":root", {
Title: "2em",
Headline: "1.5em",
Subheadline: "1.20em",
SubSubheadline: "1.1em",
Body: "1em",
Plain: "0.8em",
Caption: ".75em",
Overline: ".5em",