Skip to content

Commit

Permalink
fix: performance updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@fluid-design-io
fluid-design-io committed Oct 26, 2023
1 parent 11292f6 commit 0a9c0c8
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 115 deletions.
60 changes: 27 additions & 33 deletions apps/web/components/palette/analogous-mono-palettes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,39 +68,33 @@ const PillPalette = memo(
"@md/section-secondary:col-span-1",
)}
>
<AnimatePresence
mode={performance === "high" ? "popLayout" : "wait"}
initial={false}
>
{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 (
<motion.button
key={`${type}-${c}-${i}`}
className={cn(
"group/pill-btn flex h-10 w-full items-center justify-between rounded-full border border-border px-2.5 text-xs transition-colors focus:outline-none focus:ring focus:ring-accent focus:ring-opacity-50",
foregroundColor,
)}
style={{ backgroundColor: c }}
type="button"
aria-label={`Copy ${c} to clipboard`}
{...textAnimation(shouldReduceMotion, animationDelay(i), {
performance,
})}
suppressHydrationWarning
>
<motion.code key={`${type}-${c}-text-${i}`}>
{colorHelper.toColorMode(color, mode)}
</motion.code>
<Copy className="h-4 w-4 opacity-0 transition-opacity group-hover/pill-btn:opacity-100 group-focus/pill-btn:opacity-100" />
</motion.button>
);
})}
</AnimatePresence>
{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 (
<button
key={`${type}-${i}`}
className={cn(
"group/pill-btn flex h-10 w-full items-center justify-between rounded-full border border-border px-2.5 text-xs transition-colors duration-500 focus:outline-none focus:ring focus:ring-accent focus:ring-opacity-50",
foregroundColor,
)}
style={{
backgroundColor: c,
transitionDelay: `${0.44 + i * 0.06}s`,
}}
type="button"
aria-label={`Copy ${c} to clipboard`}
>
<motion.code key={`${type}-text-${i}`} className="animate-text">
{colorHelper.toColorMode(color, mode)}
</motion.code>
<Copy className="h-4 w-4 opacity-0 transition-opacity group-hover/pill-btn:opacity-100 group-focus/pill-btn:opacity-100" />
</button>
);
})}
</div>
);
},
Expand Down
23 changes: 13 additions & 10 deletions apps/web/components/palette/base-palette-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
useColorStore,
useSiteSettingsStore,
} from "@/store/store";
import { useToast } from "ui/components/ui/use-toast";
import ToastCopied from "../ui/toast-copied";

const PaletteButton = ({
type,
Expand All @@ -26,13 +28,14 @@ const PaletteButton = ({
const [isChanging, setIsChanging] = useState(false);
const [isMounted, setIsMounted] = useState(false);
const { colorMode, colorPalettes } = useColorStore();
const { toast } = useToast();
const { performance } = useSiteSettingsStore();
const color = colorPalettes[type][step].raw;
const { h, s } = color;
const shadowSmall = `${h} ${s * 100}% ${theme === "dark" ? 17 : 73}% `;
const shadowLarge = `${h} ${s * 100}% ${theme === "dark" ? 10 : 80}% `;
const activeShaodw = `0 4px 14px -2px hsl(${shadowSmall}/var(--shadow-opacity)), 0 12px 24px -2px hsl(${shadowLarge}/var(--shadow-opacity))`;

const colorString = colorHelper.toColorMode(color, colorMode);
useEffect(() => {
if (!isMounted) {
setIsMounted(true);
Expand All @@ -53,19 +56,21 @@ const PaletteButton = ({
}, [color]);
return (
<motion.button
onClick={() =>
navigator.clipboard.writeText(colorHelper.toColorMode(color, colorMode))
}
onClick={() => {
navigator.clipboard.writeText(colorString);
toast({
//@ts-ignore
title: <ToastCopied color={colorString} />,
});
}}
className={cn(
"rounded-lg border border-border",
"group",
"transition-shadow duration-300 [--shadow-opacity:0] hover:[--shadow-opacity:0.8] dark:hover:[--shadow-opacity:0.3]",
)}
type="button"
aria-label={`Click to copy ${colorHelper.toColorMode(
color,
colorMode,
)} to clipboard`}
aria-label={`Click to copy ${colorString} to clipboard`}
title={colorString}
initial={{ scale: 1 }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
Expand All @@ -82,7 +87,6 @@ const PaletteButton = ({
style={{
boxShadow: activeShaodw,
}}
suppressHydrationWarning
>
<motion.div
className={cn(
Expand All @@ -101,7 +105,6 @@ const PaletteButton = ({
}
: {}
}
suppressHydrationWarning
>
<Copy
color={colorHelper.toForeground(color)}
Expand Down
24 changes: 4 additions & 20 deletions apps/web/components/palette/color-string.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,16 @@

import { colorHelper } from "@/lib/colorHelper";
import { useColorStore } from "@/store/store";
import { BaseColorTypes, RawColor } from "@/types/app";
import React, { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@ui/lib/utils";
import { BaseColorTypes } from "@/types/app";

function ColorString({
type,
step,
animation,
}: {
type: BaseColorTypes;
step: number;
animation: number;
}) {
function ColorString({ type, step }: { type: BaseColorTypes; step: number }) {
const { colorMode, colorPalettes } = useColorStore();
const color = colorPalettes[type][step].raw;
const colorString = colorHelper.toColorMode(color, colorMode);
return (
<motion.code
className={cn(
"transition-opacity duration-500 [.coloring_&]:opacity-0 [.coloring_&]:duration-200",
)}
title={colorString}
>
<code className="animate-text" title={colorString}>
{colorString}
</motion.code>
</code>
);
}

Expand Down
81 changes: 29 additions & 52 deletions apps/web/components/palette/six-thirty-ten-palette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@ import {
useColorStore,
useSiteSettingsStore,
} from "@/store/store";
import { BaseColorTypes, ColorValue } from "@/types/app";
import { AnimatePresence, useReducedMotion } from "framer-motion";
import { BaseColorTypes } from "@/types/app";
import React, { memo, useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { cn } from "@ui/lib/utils";
import { motion } from "framer-motion";
import { textAnimation } from "@/lib/animation";

const getColorNames = async (colors: string[]) => {
const data = await fetch("/api/color-names", {
Expand All @@ -27,9 +23,7 @@ const getColorNames = async (colors: string[]) => {
};
function SixtyThirtyTenPalettes({ className }: { className?: string }) {
const [colorNames, setColorNames] = useState(["", "", ""]);
const { colorPalettes, baseColors } = useColorStore();
const { performance } = useSiteSettingsStore();
const shouldReduceMotion = useReducedMotion();
const { colorPalettes } = useColorStore();

useEffect(() => {
if (Object.values(colorPalettes).every((palette) => palette.length === 0)) {
Expand All @@ -46,23 +40,7 @@ function SixtyThirtyTenPalettes({ className }: { className?: string }) {
});
}, [colorPalettes]);

const mainPalettes = Object.values(colorPalettes);
const boxStyle = [
"border-primary/10 text-primary/30 selection:bg-foreground/10 selection:text-primary contrast-more:text-foreground",
"border-secondary/10 text-secondary-foreground/30 selection:bg-foreground/10 selection:text-secondary-foreground contrast-more:text-secondary-foreground",
"border-accent/10 text-accent-foreground/30 selection:bg-foreground/10 selection:text-accent-foreground contrast-more:text-accent-foreground",
"border-border/10 text-foreground/30 selection:bg-foreground/10 selection:text-foreground contrast-more:text-foreground",
];
const animationDelay = (i: number) => {
let springDelay = 0;
switch (performance) {
case Performance.low:
springDelay = i;
default:
springDelay = Math.pow(1.8, i) - 0.6;
}
return 0.06 * 6 + springDelay * 0.06;
};
const boxStyle = ["box-primary", "box-secondary", "box-accent", "box-border"];
return (
<div
className={cn(
Expand All @@ -72,29 +50,18 @@ function SixtyThirtyTenPalettes({ className }: { className?: string }) {
className,
)}
>
<AnimatePresence
mode={performance === "high" ? "popLayout" : "wait"}
initial={false}
>
{
// map over base colors
["primary", "secondary", "accent", "gray"].map((key, i) => (
<motion.div
key={`sixty-thirty-ten-palette-${i}-${key}`}
{...textAnimation(shouldReduceMotion, animationDelay(i), {
performance,
})}
suppressHydrationWarning
>
<SixtyThirtyTenPalette
type={key as BaseColorTypes}
className={boxStyle[i]}
colorName={colorNames[i]}
/>
</motion.div>
))
}
</AnimatePresence>
{
// map over base colors
["primary", "secondary", "accent", "gray"].map((key, i) => (
<div key={`sixty-thirty-ten-palette-${i}-${key}`}>
<SixtyThirtyTenPalette
type={key as BaseColorTypes}
className={boxStyle[i]}
colorName={colorNames[i]}
/>
</div>
))
}
</div>
);
}
Expand Down Expand Up @@ -149,21 +116,31 @@ const SixtyThirtyTenPalette = memo(
>
<div
className={cn(
"absolute start-0 top-0 p-4 font-sans text-lg font-extralight text-background/70 transition-colors delay-300 duration-700",
"absolute start-0 top-0 p-4 font-sans text-lg font-extralight text-background/70 delay-300 duration-700",
"contrast-more:font-medium contrast-more:text-foreground/80 contrast-more:hover:text-foreground",
"animate-text !transition-all",
)}
>
{colorName}
</div>
<div
className={cn("flex-[0.6] transition-colors", colorSixty[type])}
className={cn(
"flex-[0.6] transition-colors delay-300 duration-1000",
colorSixty[type],
)}
></div>
<div className="flex flex-[0.4] @md/section-secondary:flex-col">
<div
className={cn("flex-[0.75] transition-colors", colorThirty[type])}
className={cn(
"flex-[0.75] transition-colors delay-500 duration-1000",
colorThirty[type],
)}
></div>
<div
className={cn("flex-[0.25] transition-colors", colorTen[type])}
className={cn(
"flex-[0.25] transition-colors delay-700 duration-1000",
colorTen[type],
)}
></div>
</div>
</div>
Expand Down
17 changes: 17 additions & 0 deletions packages/ui/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,4 +102,21 @@
.skip-main-wrap .skip-btn {
@apply outline-none text-muted-foreground rounded px-2 py-1 hover:bg-primary focus:bg-primary hover:text-primary-foreground focus:text-primary-foreground;
}
.animate-text {
@apply transition-opacity duration-500 [.coloring_&]:opacity-0 [.coloring_&]:duration-200;
}

/* six-thirty-ten */
.box-primary {
@apply border-primary/10 text-primary/30 selection:bg-foreground/10 selection:text-primary contrast-more:text-foreground;
}
.box-secondary {
@apply border-secondary/10 text-secondary-foreground/30 selection:bg-foreground/10 selection:text-secondary-foreground contrast-more:text-secondary-foreground;
}
.box-accent {
@apply border-accent/10 text-accent-foreground/30 selection:bg-foreground/10 selection:text-accent-foreground contrast-more:text-accent-foreground;
}
.box-border {
@apply border-border/10 text-foreground/30 selection:bg-foreground/10 selection:text-foreground contrast-more:text-foreground;
}
}

0 comments on commit 0a9c0c8

Please sign in to comment.