chore(color inputs): update icons

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

@@ -4,7 +4,7 @@ import type { ChangeEvent } from "react";
 
 import * as Popover from "@radix-ui/react-popover";
 
-import { SettingsFill } from "@/components/icons";
+import { ColorPickerFill } from "@/components/icons";
 import { Input } from "@/components/primitives/input";
 import { InputGroup } from "@/components/primitives/input-group";
 import { useControllable } from "@/hooks/use-controllable";
@@ -39,7 +39,7 @@ export function ColorInput({ value: valueProp, onChange }: Iprops) {
       endContent={
         <Popover.Trigger asChild>
           <button aria-label="settings button" className={classes.settings} type="button">
-            <SettingsFill className={classes.icon} />
+            <ColorPickerFill className={classes.icon} />
           </button>
         </Popover.Trigger>
       }

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

@@ -2,9 +2,10 @@
 
 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";
+import { LightFill, CloseFill } from "@/components/icons";
 import { background, foreground, contrastRelation } from "@/store";
 import { createContrastSuggestions } from "@/lib/contrast-suggestions";
 
@@ -14,8 +15,8 @@ export function SuggestionsButton() {
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <Button isIconOnly aria-label="swap button">
-          <MagicFill />
+        <Button isIconOnly aria-label="swap button" className={css({ fontSize: "icon-20" })}>
+          <LightFill />
         </Button>
       </Dialog.Trigger>
       <SuggestionsDialog />

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

@@ -1,17 +1,23 @@
 "use client";
 
 import { useSetAtom } from "jotai";
+import { css } from "@root/styled-system/css";
 
 import { swapColors } from "@/store";
 import { Button } from "@/components/primitives/button";
-import { ChangeFill } from "@/components/icons";
+import { InvertFill } from "@/components/icons";
 
 export function SwapButton() {
   const swap = useSetAtom(swapColors);
 
   return (
-    <Button isIconOnly aria-label="swap button" onClick={swap}>
-      <ChangeFill />
+    <Button
+      isIconOnly
+      aria-label="swap button"
+      className={css({ fontSize: "icon-20" })}
+      onClick={swap}
+    >
+      <InvertFill />
     </Button>
   );
 }

src/components/icons/MagicFill.tsx → src/components/icons/ColorPickerFill.tsx

@@ -1,16 +1,16 @@
 import type { SVGProps } from "react";
-function SvgMagicFill(props: SVGProps<SVGSVGElement>) {
+function SvgColorPickerFill(props: SVGProps<SVGSVGElement>) {
   return (
     <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
       <g fill="none" fillRule="evenodd">
         <path d="M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" />
         <path
-          d="M6.748 8.876A1.5 1.5 0 0 0 8.87 6.755L7.105 4.99a1.5 1.5 0 1 0-2.122 2.12zM7.99 11a1.5 1.5 0 0 1-1.5 1.5H3.994a1.5 1.5 0 0 1 0-3H6.49a1.5 1.5 0 0 1 1.5 1.5m4.772-.354a1.5 1.5 0 1 0-2.122 2.122l8.485 8.485a1.5 1.5 0 0 0 2.122-2.121zm5.232 1.854a1.5 1.5 0 0 0 0-3H15.49a1.5 1.5 0 0 0 0 3zm-8.5 5.5a1.5 1.5 0 0 0 3 0v-2.5a1.5 1.5 0 1 0-3 0zm1.5-10a1.5 1.5 0 0 1-1.5-1.5V4a1.5 1.5 0 0 1 3 0v2.5a1.5 1.5 0 0 1-1.5 1.5m-6.01 9.01a1.5 1.5 0 0 1 0-2.121L6.75 13.12a1.5 1.5 0 1 1 2.122 2.121L7.105 17.01a1.5 1.5 0 0 1-2.121 0m8.131-10.253a1.5 1.5 0 1 0 2.121 2.122l1.768-1.768a1.5 1.5 0 1 0-2.121-2.121z"
+          d="M20.477 3.511a3 3 0 0 0-4.243 0l-1.533 1.533a2.991 2.991 0 0 0-3.41.581l-.713.714a2 2 0 0 0 0 2.829l-6.486 6.485a3 3 0 0 0-.878 2.122v1.8a1.2 1.2 0 0 0 1.2 1.2h1.8a3 3 0 0 0 2.12-.88l6.486-6.484a2 2 0 0 0 2.829 0l.714-.715a2.991 2.991 0 0 0 .581-3.41l1.533-1.532a3 3 0 0 0 0-4.243M5.507 17.068l6.485-6.486 1.414 1.414-6.485 6.486a1 1 0 0 1-.707.293h-1v-1a1 1 0 0 1 .293-.707"
           fill="currentColor"
         />
       </g>
     </svg>
   );
 }
 
-export default SvgMagicFill;
+export default SvgColorPickerFill;

src/components/icons/InvertFill.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+function SvgInvertFill(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="none">
+        <path d="M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" />
+        <path
+          d="M8.56 11.9a1.5 1.5 0 0 1 0 2.12l-.974.976H16a1.5 1.5 0 0 1 0 3H7.586l.975.974a1.5 1.5 0 1 1-2.122 2.122l-3.535-3.536a1.5 1.5 0 0 1 0-2.121l3.535-3.536a1.5 1.5 0 0 1 2.122 0Zm6.88-9a1.5 1.5 0 0 1 2.007-.104l.114.103 3.535 3.536a1.5 1.5 0 0 1 .103 2.007l-.103.114-3.535 3.536a1.5 1.5 0 0 1-2.225-2.008l.103-.114.975-.974H8a1.5 1.5 0 0 1-.144-2.994L8 5.996h8.414l-.975-.975a1.5 1.5 0 0 1 0-2.122Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgInvertFill;

src/components/icons/LightFill.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+function SvgLightFill(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path d="M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" />
+        <path
+          d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1m-4.95-2.05a1 1 0 0 1 0 1.414l-.707.707a1 1 0 1 1-1.414-1.414l.707-.707a1 1 0 0 1 1.414 0m11.314 0 .707.707a1 1 0 0 1-1.414 1.414l-.707-.707a1 1 0 0 1 1.414-1.414M12.617 2a2 2 0 0 1 1.985 1.752l.38 3.04a6 6 0 1 1-5.964 0l.38-3.04A2 2 0 0 1 11.383 2zM4 11a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2zm17 0a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2zm-1.929-6.07a1 1 0 0 1 0 1.414l-.707.707a1 1 0 1 1-1.414-1.414l.707-.707a1 1 0 0 1 1.414 0m-12.728 0 .707.707A1 1 0 0 1 5.636 7.05l-.707-.707A1 1 0 0 1 6.343 4.93M12.617 4h-1.234l-.25 2h1.734z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgLightFill;

src/components/icons/MagicLine.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+function SvgMagicLine(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path d="M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" />
+        <path
+          d="M5.497 3.997A1.225 1.225 0 0 0 4 5.494l1.264 4.79L2.58 14.45c-.508.79.024 1.834.962 1.887l4.946.278 3.132 3.838a1.225 1.225 0 0 0 2.091-.331l1.397-3.6 4.608 4.608a1 1 0 0 0 1.415-1.414l-4.608-4.608 3.599-1.397a1.225 1.225 0 0 0 .331-2.091l-3.838-3.133-.278-4.946a1.225 1.225 0 0 0-1.886-.96L10.287 5.26l-4.79-1.264Zm1.788 6.107L6.273 6.271l3.834 1.011c.332.088.686.032.976-.154l3.333-2.147.223 3.959c.019.343.182.662.448.88l3.072 2.507-3.696 1.435c-.32.124-.574.378-.699.698l-1.435 3.697-2.507-3.072a1.225 1.225 0 0 0-.88-.449l-3.959-.222L7.13 11.08a1.23 1.23 0 0 0 .155-.976"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgMagicLine;

src/components/icons/index.ts

@@ -1,7 +1,5 @@
 export { default as Brand } from "./Brand";
 
-export { default as ChangeFill } from "./ChangeFill";
-
 export { default as ChartBarFill } from "./ChartBarFill";
 
 export { default as CheckFill } from "./CheckFill";
@@ -10,6 +8,8 @@ export { default as CloseFill } from "./CloseFill";
 
 export { default as Coffee } from "./Coffee";
 
+export { default as ColorPickerFill } from "./ColorPickerFill";
+
 export { default as EmojiVeryHappyFill } from "./EmojiVeryHappyFill";
 
 export { default as FingerprintLine } from "./FingerprintLine";
@@ -18,16 +18,16 @@ export { default as GithubFill } from "./GithubFill";
 
 export { default as HappyFill } from "./HappyFill";
 
-export { default as LinkFill } from "./LinkFill";
+export { default as InvertFill } from "./InvertFill";
 
-export { default as MagicFill } from "./MagicFill";
+export { default as LightFill } from "./LightFill";
+
+export { default as LinkFill } from "./LinkFill";
 
 export { default as MoreFill } from "./MoreFill";
 
 export { default as PencilFill } from "./PencilFill";
 
-export { default as SettingsFill } from "./SettingsFill";
-
 export { default as SocialXFill } from "./SocialXFill";
 
 export { default as SuitcaseFill } from "./SuitcaseFill";