diff --git a/apps/web/components/palette/analogous-mono-palettes.tsx b/apps/web/components/palette/analogous-mono-palettes.tsx
index 39ff50f..88719cb 100644
--- a/apps/web/components/palette/analogous-mono-palettes.tsx
+++ b/apps/web/components/palette/analogous-mono-palettes.tsx
@@ -1,105 +1,77 @@
-"use client";
+'use client'
-import {
- Performance,
- useColorStore,
- useSiteSettingsStore,
-} from "@/store/store";
-import { ColorMode, RawColor } from "@/types/app";
-import { cn } from "@ui/lib/utils";
-import tinycolor from "tinycolor2";
-import { memo } from "react";
-import { colorHelper } from "@/lib/colorHelper";
-import { Copy } from "lucide-react";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { textAnimation } from "@/lib/animation";
+import { useColorStore } from '@/context/color-store-provider'
+import { useToolStore } from '@/store/toolStore'
+import { cn } from '@ui/lib/utils'
+import { motion } from 'framer-motion'
+import { Copy } from 'lucide-react'
+import tinycolor from 'tinycolor2'
function AnalogousMonochromaticPalettes({ className }: { className?: string }) {
- const { baseColors, colorMode } = useColorStore();
+ const primary = useColorStore((s) => s.primary)
+
return (
-
-
-
+
- );
+ )
}
-const PillPalette = memo(
- ({
- color,
- type,
- mode,
- }: {
- color: RawColor;
- type: "mono" | "analog";
- mode: ColorMode;
- }) => {
- const shouldReduceMotion = useReducedMotion();
-
- const { performance } = useSiteSettingsStore();
- const colors =
- type === "mono"
- ? tinycolor(color).monochromatic(6)
- : tinycolor(color).analogous(6);
- colors.sort((a, b) => {
- return tinycolor(b).getBrightness() - tinycolor(a).getBrightness();
- });
- const animationDelay = (i) => {
- let springDelay = 0;
- switch (performance) {
- case Performance.low:
- springDelay = i;
- default:
- springDelay = Math.pow(1.3, i) - 0.8;
- }
- switch (type) {
- case "mono":
- return 0.06 * 6 + springDelay * 0.06;
- case "analog":
- return 0.06 * 8 + springDelay * 0.06;
- }
- };
- return (
-
- {colors.map((color, i) => {
- const c = color.toHexString();
- const isDark = tinycolor(color).isDark();
- const foregroundColor = isDark
- ? "text-white/30 hover:text-white/70 focus:text-white/70 contrast-more:text-white/80 contrast-more:hover:text-white contrast-more:font-medium"
- : "text-black/30 hover:text-black/70 focus:text-black/70 contrast-more:text-black/80 contrast-more:hover:text-black contrast-more:font-medium";
- return (
-
- );
- })}
-
- );
- },
-);
-
-PillPalette.displayName = "AnalogousMonochromaticPalettes";
+const PillPalette = ({ color, type }: { color: string; type: 'analogous' | 'monochromatic' }) => {
+ const { colorMode: mode } = useToolStore()
+ const colors = type === 'monochromatic' ? tinycolor(color).monochromatic(6) : tinycolor(color).analogous(6)
+ colors.sort((a, b) => {
+ return tinycolor(b).getBrightness() - tinycolor(a).getBrightness()
+ })
+ const colorString = (c: tinycolor.Instance) => {
+ switch (mode) {
+ case 'hex':
+ return c.toHexString()
+ case 'rgb':
+ return c.toRgbString()
+ case 'hsl':
+ return c.toHslString()
+ }
+ }
+ return (
+
+ {colors.map((c, i) => {
+ const isDark = tinycolor(color).isDark()
+ const foregroundColor = isDark
+ ? 'text-white/30 hover:text-white/70 focus:text-white/70 contrast-more:text-white/80 contrast-more:hover:text-white contrast-more:font-medium'
+ : 'text-black/30 hover:text-black/70 focus:text-black/70 contrast-more:text-black/80 contrast-more:hover:text-black contrast-more:font-medium'
+ return (
+
+ )
+ })}
+
+ )
+}
-export default AnalogousMonochromaticPalettes;
+export default AnalogousMonochromaticPalettes