getting the cards and tabs sorted out

ui/frontend/build_src/src/components/_recipes/card.css.ts

@@ -3,10 +3,9 @@ import { vars } from "../../styles/theme/index.css";
 
 export const card = recipe({
   base: {
-    // background: vars.colors.background,
     color: vars.colors.text.normal,
     padding: vars.spacing.medium,
-    borderRadius: vars.trim.smallBorderRadius,
+
   },
   variants: {
 
@@ -22,7 +21,14 @@ export const card = recipe({
       },
     },
 
+    rounded: {
+      true: {
+        borderRadius: vars.trim.smallBorderRadius,
+      },
+    },
+
     level: {
+      flat: {},
       1: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
       2: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
       3: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },
@@ -30,7 +36,8 @@ export const card = recipe({
   },
   defaultVariants: {
     baking: "light",
-    level: 1,
+    level: 'flat',
+    rounded: true,
   },
 });
 

ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts

@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
+
+export const tabStyles = recipe({
+  base: {
+    background: vars.backgroundMain,
+    color: vars.colors.text.normal,
+    padding: vars.spacing.small,
+    borderRadius: `${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius} 0 0`,
+    border: `1px solid ${vars.backgroundLight}`,
+    borderBottom: 'none',
+    marginLeft: vars.spacing.small,
+    boxShadow: `0px -1px 4px -2px ${vars.backgroundAccentMain}`,
+  },
+
+  variants: {
+    selected: {
+      true: {
+        background: vars.backgroundLight,
+        color: vars.colors.text.normal,
+      }
+    }
+  }
+});
+
+export const tabPanelStyles = recipe({
+  base: {
+    color: vars.colors.text.normal,
+    borderRadius: `0 0 ${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius}`,
+    background: vars.backgroundLight,
+    padding: vars.spacing.medium,
+  },
+  variants: {
+
+    baking: {
+      normal: {
+        background: vars.backgroundMain,
+      },
+      light: {
+        background: vars.backgroundLight,
+      },
+      dark: {
+        background: vars.backgroundDark,
+      },
+    },
+  },
+});
+

ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { Tab } from '@headlessui/react';
-
 import CreationPanel from "../../organisms/creationPanel";
 import QueueDisplay from "../../organisms/queueDisplay";
 
@@ -8,21 +7,50 @@ 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() {
 
   return (
     <Tab.Group>
       <Tab.List>
-        <Tab>Create</Tab>
-        <Tab>Queue</Tab>
+        <Tab as={Fragment}>
+          {({ selected }) => (
+            <button
+              className={tabStyles({
+                selected,
+              })}
+            >
+              Create
+            </button>
+          )}
+        </Tab>
+
+        <Tab as={Fragment}>
+          {({ selected }) => (
+
+            <button
+              className={tabStyles({
+                selected,
+              })}
+            >
+              Queue
+            </button>
+          )}
+        </Tab>
+
+
       </Tab.List>
-      <Tab.Panels className={cardStyle({
-        baking: 'normal',
-      })}>
+      <Tab.Panels className={tabPanelStyles()}>
         <Tab.Panel>
           <CreationPanel></CreationPanel>
         </Tab.Panel>

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -3,12 +3,12 @@ import { vars } from "../../styles/theme/index.css";
 
 export const AppLayout = style({
   position: "relative",
-  backgroundColor: vars.colors.background,
+
   width: "100%",
   height: "100%",
   pointerEvents: "auto",
   display: "grid",
-  // backgroundColor: "rgb(32, 33, 36)",
+  backgroundColor: vars.backgroundMain,
   gridTemplateColumns: "400px 1fr",
   gridTemplateRows: "100px 1fr 115px",
   gridTemplateAreas: `
@@ -42,13 +42,9 @@ export const CreateLayout = style({
   flexDirection: "column",
   overflowY: "auto",
   overflowX: "hidden",
+  padding: `0 ${vars.spacing.small}`,
 });
 
-// globalStyle(`${CreateLayout}`, {
-
-
-
-// }
 
 export const DisplayLayout = style({
   gridArea: "display",

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -4,27 +4,6 @@ import {
   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.
- */
-
-// const SharedColors = {
-
-//   pending: null,
-//   processing: null,
-//   paused: null,
-
-//   link: null,
-
-//   warning: null,
-//   error: null,
-//   success: null,
-
-// }
 
 const colors = createThemeContract({
   brand: null,
@@ -61,11 +40,6 @@ const colors = createThemeContract({
     accentDimmed: null,
   },
 
-  // pending: null,
-  // processing: null,
-  // paused: null,
-
-
   link: null,
 
   warning: null,
@@ -102,9 +76,6 @@ const app = createGlobalTheme(":root", {
   },
   colors,
 
-  backgroundMain: 'hsl(0, 0%, 30%)',
-  backgroundLight: 'hsl(0, 0%, 50%)',
-  backgroundDark: 'hsl(0, 0%, 20%)',
 
   brandHue: '265',
   secondaryHue: '54',
@@ -127,6 +98,13 @@ const app = createGlobalTheme(":root", {
     },
   },
 
+  backgroundMain: 'hsl(225, 6%, 13%)',
+  backgroundLight: 'hsl(225, 4%, 18%)',
+  backgroundDark: 'hsl(225, 3%, 7%)',
+
+  backgroundAccentMain: 'hsl(225, 6%, 30%)',
+
+
 });
 
 export const darkTheme = createTheme(colors, {