clean up font ambiguity

2024-11-23 00:33:28 +01:00 · 2022-09-19 12:47:55 -04:00 · 2022-09-19 12:47:55 -04:00 · 737ed7ba5d
commit 737ed7ba5d
parent 27fd1f39f0
11 changed files with 235 additions and 36 deletions
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
@ -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",
 });
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
@ -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}
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
@ -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}
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@ -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>
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
@ -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
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
@ -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}
--- 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
@ -18,9 +18,6 @@ globalStyle(`${PromptDisplay} > p`, {
 });

 globalStyle(`${PromptDisplay} > textarea`, {
-  fontSize: "1.2em",
-  fontWeight: "bold",
-  fontFamily: "Arial",
  width: "100%",
  resize: "vertical",
  height: "100px",
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts
@ -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 };
--- a/ui/frontend/build_src/src/styles/index.css.ts
+++ b/ui/frontend/build_src/src/styles/index.css.ts
@ -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,
 });
--- a/ui/frontend/build_src/src/styles/shared.css.ts
+++ b/ui/frontend/build_src/src/styles/shared.css.ts
@ -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,
+});
--- a/ui/frontend/build_src/src/styles/theme/index.css.ts
+++ b/ui/frontend/build_src/src/styles/theme/index.css.ts
@ -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",