clean up font ambiguity

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,
-  marginBottom: vars.spacing.small,
+  paddingLeft: 0,
-  paddingLeft: vars.spacing.medium,
   listStyleType: "none",
 });
 
-export const AdvancedSettingItem = style({
+export const AdvancedSettingGrouping = style({
-  paddingBottom: vars.spacing.small,
+  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",
 });

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}

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}

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>

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

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}

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",

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 };

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,
 });

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,
+});

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",