working on cards and backgrounds

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

@@ -3,12 +3,25 @@ import { vars } from "../../styles/theme/index.css";
 
 export const card = recipe({
   base: {
-    background: vars.colors.background,
+    // background: vars.colors.background,
     color: vars.colors.text.normal,
     padding: vars.spacing.medium,
     borderRadius: vars.trim.smallBorderRadius,
   },
   variants: {
+
+    baking: {
+      normal: {
+        background: vars.backgroundMain,
+      },
+      light: {
+        background: vars.backgroundLight,
+      },
+      dark: {
+        background: vars.backgroundDark,
+      },
+    },
+
     level: {
       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)" },
@@ -16,6 +29,7 @@ export const card = recipe({
     },
   },
   defaultVariants: {
+    baking: "light",
     level: 1,
   },
 });

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

@@ -8,6 +8,10 @@ import {
   CreationTabsMain
 } from "./creationTabs.css";
 
+import {
+  card as cardStyle
+} from "../../_recipes/card.css";
+
 export default function CreationTabs() {
 
   return (
@@ -16,7 +20,9 @@ export default function CreationTabs() {
         <Tab>Create</Tab>
         <Tab>Queue</Tab>
       </Tab.List>
-      <Tab.Panels className={CreationTabsMain}>
+      <Tab.Panels className={cardStyle({
+        baking: 'normal',
+      })}>
         <Tab.Panel>
           <CreationPanel></CreationPanel>
         </Tab.Panel>

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx

@@ -102,4 +102,4 @@ export default function SeedImage(_props: any) {
       </div>
     </div>
   );
-}
+}

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

@@ -102,6 +102,10 @@ const app = createGlobalTheme(":root", {
   },
   colors,
 
+  backgroundMain: 'hsl(0, 0%, 30%)',
+  backgroundLight: 'hsl(0, 0%, 50%)',
+  backgroundDark: 'hsl(0, 0%, 20%)',
+
   brandHue: '265',
   secondaryHue: '54',
   tertiaryHue: '116',