Merge branch 'main' of github.com:AlexGarrixen/color-contrast-inspector

src/components/color-inputs/background.tsx

@@ -11,7 +11,7 @@ export function BackgroundInput() {
   const [bg, setBg] = useAtom(background);
 
   return (
-    <Panel label="BACKGROUND">
+    <Panel color={bg} label="Background Color">
       <ColorControl
         popover={<PopoverColorChannels sourceColor={bg} onChange={setBg} />}
         sourceColor={bg}

src/components/color-inputs/color-control/color-input.styled.ts

@@ -1,16 +1,6 @@
 import { css } from "@root/styled-system/css";
 
 export default {
-  colorPreview: css({
-    w: "6",
-    h: "6",
-    display: "inline-block",
-    border: "1px solid",
-    borderColor: "border-secondary",
-    rounded: "999px",
-    shadow: "xs",
-  }),
-
   settings: css({
     color: "fg-primary",
     borderLeft: "1px solid",

src/components/color-inputs/color-control/color-input.tsx

@@ -43,7 +43,6 @@ export function ColorInput({ value: valueProp, onChange }: Iprops) {
           </button>
         </Popover.Trigger>
       }
-      startContent={<span className={classes.colorPreview} style={{ backgroundColor: value }} />}
     >
       <Input
         placeholder={fallback}

src/components/color-inputs/color-inputs.tsx

@@ -10,12 +10,17 @@ export function ColorInputs() {
   return (
     <section
       className={css({
+        backgroundColor: "bg-primary",
+        shadow: "xs",
+        rounded: "xl",
         display: "flex",
         flexDirection: "column",
         mt: "8",
-        gap: "5",
+        p: "5",
         alignItems: "center",
-        md: { flexDirection: "row", gap: "8" },
+        gap: "8",
+        md: { flexDirection: "row" },
+        lg: { gap: "16" },
       })}
     >
       <BackgroundInput />

src/components/color-inputs/foreground.tsx

@@ -11,7 +11,7 @@ export function ForegroundInput() {
   const [fg, setFg] = useAtom(foreground);
 
   return (
-    <Panel label="TEXT COLOR">
+    <Panel color={fg} label="Text Color">
       <ColorControl
         popover={<PopoverColorChannels sourceColor={fg} onChange={setFg} />}
         sourceColor={fg}

src/components/color-inputs/panel.styled.ts

@@ -1,18 +1,23 @@
 import { css } from "@root/styled-system/css";
 
 export default {
-  root: css({ backgroundColor: "bg-primary", rounded: "xl", shadow: "xs", flex: 1, width: "100%" }),
+  root: css({ display: "flex", alignItems: "center", flex: 1, width: "100%", gap: "4" }),
 
-  header: css({
+  label: css({
     color: "text-primary",
-    py: "4",
-    px: "5",
-    borderBottomWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "border-secondary",
-    textAlign: "center",
     fontWeight: "bold",
+    display: "block",
+    mb: "3",
   }),
 
-  body: css({ px: "5", py: "8" }),
+  rightContent: css({ flex: 1 }),
+
+  preview: css({
+    w: "20",
+    h: "20",
+    shadow: "sm",
+    rounded: "xl",
+    border: "1px solid",
+    borderColor: "border-secondary",
+  }),
 };

src/components/color-inputs/panel.tsx

@@ -4,14 +4,18 @@ import classes from "./panel.styled";
 
 interface Iprops {
   label: string;
+  color?: string;
   children?: ReactNode;
 }
 
-export function Panel({ label, children }: Iprops) {
+export function Panel({ label, children, color }: Iprops) {
   return (
     <div className={classes.root}>
-      <header className={classes.header}>{label}</header>
-      <div className={classes.body}>{children}</div>
+      <div className={classes.preview} style={{ backgroundColor: color }} />
+      <div className={classes.rightContent}>
+        <label className={classes.label}>{label}</label>
+        <div>{children}</div>
+      </div>
     </div>
   );
 }

src/components/color-inputs/suggestions-button.tsx

@@ -2,7 +2,6 @@
 
 import { useAtom, useAtomValue } from "jotai";
 import * as Dialog from "@radix-ui/react-dialog";
-import { css } from "@root/styled-system/css";
 
 import { Button } from "@/components/primitives/button";
 import { MagicFill, CloseFill } from "@/components/icons";
@@ -15,12 +14,7 @@ export function SuggestionsButton() {
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <Button
-          isIconOnly
-          aria-label="swap button"
-          className={css({ shadow: "sm" })}
-          variant="solid"
-        >
+        <Button isIconOnly aria-label="swap button">
           <MagicFill />
         </Button>
       </Dialog.Trigger>

src/components/color-inputs/swap-button.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import { css } from "@root/styled-system/css";
 
 import { swapColors } from "@/store";
 import { Button } from "@/components/primitives/button";
@@ -11,13 +10,7 @@ export function SwapButton() {
   const swap = useSetAtom(swapColors);
 
   return (
-    <Button
-      isIconOnly
-      aria-label="swap button"
-      className={css({ shadow: "sm" })}
-      variant="solid-white"
-      onClick={swap}
-    >
+    <Button isIconOnly aria-label="swap button" onClick={swap}>
       <ChangeFill />
     </Button>
   );