From adbee9647e16cfb6762d54d684d04eb08adffc13 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sat, 4 Oct 2025 02:46:29 +0800 Subject: [PATCH] update: the palette & components --- bun.lock | 13 ++ package.json | 2 +- packages/{plaette => palette}/.gitignore | 0 packages/{plaette => palette}/bun.lock | 0 packages/{plaette => palette}/index.html | 0 packages/{plaette => palette}/package.json | 3 + .../public/MartianMono.woff2 | Bin packages/palette/src/App.tsx | 126 ++++++++++++++++++ packages/{plaette => palette}/src/Switch.tsx | 0 packages/palette/src/ThemeContext.tsx | 66 +++++++++ packages/palette/src/colorTokens.ts | 35 +++++ packages/palette/src/components/Check.tsx | 30 +++++ .../palette/src/components/ColorBlock.tsx | 85 ++++++++++++ .../palette/src/components/Components.tsx | 75 +++++++++++ packages/palette/src/components/Palette.tsx | 17 +++ .../src/components}/Picker/Handle.tsx | 0 .../src/components}/Picker/Picker.tsx | 5 +- .../src/components}/Picker/Slider.tsx | 1 - .../src/components}/Picker/useOklchCanvas.tsx | 0 .../src/components}/Picker/utils.ts | 0 packages/{plaette => palette}/src/index.css | 0 packages/{plaette => palette}/src/main.tsx | 4 +- packages/palette/src/utils.ts | 26 ++++ .../{plaette => palette}/tsconfig.app.json | 0 packages/{plaette => palette}/tsconfig.json | 0 .../{plaette => palette}/tsconfig.node.json | 0 packages/{plaette => palette}/uno.config.ts | 0 packages/{plaette => palette}/vite.config.ts | 0 packages/plaette/src/App.tsx | 88 ------------ 29 files changed, 482 insertions(+), 94 deletions(-) rename packages/{plaette => palette}/.gitignore (100%) rename packages/{plaette => palette}/bun.lock (100%) rename packages/{plaette => palette}/index.html (100%) rename packages/{plaette => palette}/package.json (92%) rename packages/{plaette => palette}/public/MartianMono.woff2 (100%) create mode 100644 packages/palette/src/App.tsx rename packages/{plaette => palette}/src/Switch.tsx (100%) create mode 100644 packages/palette/src/ThemeContext.tsx create mode 100644 packages/palette/src/colorTokens.ts create mode 100644 packages/palette/src/components/Check.tsx create mode 100644 packages/palette/src/components/ColorBlock.tsx create mode 100644 packages/palette/src/components/Components.tsx create mode 100644 packages/palette/src/components/Palette.tsx rename packages/{plaette/src => palette/src/components}/Picker/Handle.tsx (100%) rename packages/{plaette/src => palette/src/components}/Picker/Picker.tsx (98%) rename packages/{plaette/src => palette/src/components}/Picker/Slider.tsx (99%) rename packages/{plaette/src => palette/src/components}/Picker/useOklchCanvas.tsx (100%) rename packages/{plaette/src => palette/src/components}/Picker/utils.ts (100%) rename packages/{plaette => palette}/src/index.css (100%) rename packages/{plaette => palette}/src/main.tsx (72%) create mode 100644 packages/palette/src/utils.ts rename packages/{plaette => palette}/tsconfig.app.json (100%) rename packages/{plaette => palette}/tsconfig.json (100%) rename packages/{plaette => palette}/tsconfig.node.json (100%) rename packages/{plaette => palette}/uno.config.ts (100%) rename packages/{plaette => palette}/vite.config.ts (100%) delete mode 100644 packages/plaette/src/App.tsx diff --git a/bun.lock b/bun.lock index 4ff783b..356bef2 100644 --- a/bun.lock +++ b/bun.lock @@ -117,6 +117,9 @@ "@primereact/types": "^11.0.0-alpha.1", "@primeuix/themes": "^1.2.5", "culori": "^4.0.2", + "jotai": "^2.15.0", + "lucide-react": "^0.544.0", + "motion": "^12.23.22", "primereact": "11.0.0-alpha.1", "react": "^19.1.1", "react-dom": "^19.1.1", @@ -1447,6 +1450,8 @@ "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="], + "framer-motion": ["framer-motion@12.23.22", "", { "dependencies": { "motion-dom": "^12.23.21", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA=="], + "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="], "frontend": ["frontend@workspace:packages/frontend"], @@ -1645,6 +1650,8 @@ "jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="], + "jotai": ["jotai@2.15.0", "", { "peerDependencies": { "@babel/core": ">=7.0.0", "@babel/template": ">=7.0.0", "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@babel/core", "@babel/template", "@types/react", "react"] }, "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw=="], + "js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="], "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="], @@ -1869,6 +1876,12 @@ "morgan": ["morgan@1.10.1", "", { "dependencies": { "basic-auth": "~2.0.1", "debug": "2.6.9", "depd": "~2.0.0", "on-finished": "~2.3.0", "on-headers": "~1.1.0" } }, "sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A=="], + "motion": ["motion@12.23.22", "", { "dependencies": { "framer-motion": "^12.23.22", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-iSq6X9vLHbeYwmHvhK//+U74ROaPnZmBuy60XZzqNl0QtZkWfoZyMDHYnpKuWFv0sNMqHgED8aCXk94LCoQPGg=="], + + "motion-dom": ["motion-dom@12.23.21", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ=="], + + "motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="], + "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="], "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], diff --git a/package.json b/package.json index 39bcbc0..c191dfb 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "packages/elysia", "packages/temp_frontend", "packages/solid", - "packages/plaette" + "packages/palette" ], "dependencies": { "arg": "^5.0.2", diff --git a/packages/plaette/.gitignore b/packages/palette/.gitignore similarity index 100% rename from packages/plaette/.gitignore rename to packages/palette/.gitignore diff --git a/packages/plaette/bun.lock b/packages/palette/bun.lock similarity index 100% rename from packages/plaette/bun.lock rename to packages/palette/bun.lock diff --git a/packages/plaette/index.html b/packages/palette/index.html similarity index 100% rename from packages/plaette/index.html rename to packages/palette/index.html diff --git a/packages/plaette/package.json b/packages/palette/package.json similarity index 92% rename from packages/plaette/package.json rename to packages/palette/package.json index f92f4f2..7fbabc0 100644 --- a/packages/plaette/package.json +++ b/packages/palette/package.json @@ -13,6 +13,9 @@ "@primereact/types": "^11.0.0-alpha.1", "@primeuix/themes": "^1.2.5", "culori": "^4.0.2", + "jotai": "^2.15.0", + "lucide-react": "^0.544.0", + "motion": "^12.23.22", "primereact": "11.0.0-alpha.1", "react": "^19.1.1", "react-dom": "^19.1.1" diff --git a/packages/plaette/public/MartianMono.woff2 b/packages/palette/public/MartianMono.woff2 similarity index 100% rename from packages/plaette/public/MartianMono.woff2 rename to packages/palette/public/MartianMono.woff2 diff --git a/packages/palette/src/App.tsx b/packages/palette/src/App.tsx new file mode 100644 index 0000000..6f2e265 --- /dev/null +++ b/packages/palette/src/App.tsx @@ -0,0 +1,126 @@ +import "virtual:uno.css"; +import { type Oklch } from "culori"; +import { Picker } from "./components/Picker/Picker"; +import { Switch } from "./Switch"; +import { i18nProvider } from "./utils"; +import { useTheme } from "./ThemeContext"; +import { ColorPalette } from "./components/Plaette"; +import { Buttons, Paragraph, SearchBar } from "./components/Components"; +import { AnimatePresence, motion } from "motion/react"; +import { Moon, Sun } from "lucide-react"; +import { useAtom } from "jotai"; +import { atomWithStorage } from "jotai/utils"; + +const defaultColor: Oklch = { mode: "oklch", h: 29.2339, c: 0.244572, l: 0.596005 }; + +const colorAtom = atomWithStorage("selectedColor", defaultColor); +const p3Atom = atomWithStorage("showP3", false); + +function App() { + const [useP3, setUseP3] = useAtom(p3Atom); + const [selectedColor, setSelectedColor] = useAtom(colorAtom); + const { theme, toggleTheme } = useTheme(); + + const Icon = () => { + if (theme === "dark") { + return ( + + + + + + ); + } else { + return ( + + + + + + ); + } + }; + + return ( +
+
+

CVSA Color Palette Generator

+ +
+ {/* Left Column - Color Picker */} +
+

Color Selection

+ +
+
+ +
+ +
+ Show P3 + +
+
+
+ +
+ +
+

+ Image color extraction feature coming soon... +

+
+
+
+
+ + {/* Right Column */} +
+
+
+

Color Palette

+ +
+ + +
+
+

Components

+
+ + + +
+
+
+
+
+
+ ); +} + +export default App; diff --git a/packages/plaette/src/Switch.tsx b/packages/palette/src/Switch.tsx similarity index 100% rename from packages/plaette/src/Switch.tsx rename to packages/palette/src/Switch.tsx diff --git a/packages/palette/src/ThemeContext.tsx b/packages/palette/src/ThemeContext.tsx new file mode 100644 index 0000000..64e73a6 --- /dev/null +++ b/packages/palette/src/ThemeContext.tsx @@ -0,0 +1,66 @@ +// ThemeContext.tsx +import { createContext, useCallback, useContext, useEffect, useState } from "react"; +import { type ThemeMode } from "./colorTokens"; + +type ThemeContextType = { + theme: ThemeMode; + toggleTheme: () => void; +}; + +const ThemeContext = createContext(undefined); + +const useMediaQuery = (query: string): boolean => { + const isClient = typeof window !== "undefined"; + + const [matches, setMatches] = useState(() => { + if (!isClient) return false; + return window.matchMedia(query).matches; + }); + + useEffect(() => { + if (!isClient) return; + + const mediaQueryList = window.matchMedia(query); + + if (mediaQueryList.matches !== matches) { + setMatches(mediaQueryList.matches); + } + + const listener = (event: MediaQueryListEvent) => setMatches(event.matches); + + mediaQueryList.addEventListener("change", listener); + + return () => mediaQueryList.removeEventListener("change", listener); + }, [query, matches, isClient]); + + return matches; +}; + +export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { + const prefersDark = useMediaQuery("(prefers-color-scheme: dark)"); + const initialTheme: ThemeMode = prefersDark ? "dark" : "light"; + const [theme, setTheme] = useState(initialTheme); + + const [userToggled, setUserToggled] = useState(false); + + useEffect(() => { + if (!userToggled) { + setTheme(prefersDark ? "dark" : "light"); + } + }, [prefersDark, userToggled]); + + const toggleTheme = useCallback(() => { + setTheme((currentTheme) => (currentTheme === "light" ? "dark" : "light")); + setUserToggled(true); + }, []); + + const contextValue = { theme, toggleTheme }; + + return {children}; +}; + +export const useTheme = () => { + const ctx = useContext(ThemeContext); + if (!ctx) throw new Error("useTheme must be used inside ThemeProvider"); + return ctx; +}; diff --git a/packages/palette/src/colorTokens.ts b/packages/palette/src/colorTokens.ts new file mode 100644 index 0000000..3cd9182 --- /dev/null +++ b/packages/palette/src/colorTokens.ts @@ -0,0 +1,35 @@ +import { type Oklch } from "culori"; +import { getAdjustedColor } from "./utils"; + +export type ThemeMode = "light" | "dark"; + +export const buildColorTokens = (base: Oklch) => { + return { + light: { + background: getAdjustedColor(base, 0.98, 0.01), + "bg-elevated-1": getAdjustedColor(base, 1, 0.008), + "body-text": getAdjustedColor(base, 0.1, 0.01), + "border-var-1": getAdjustedColor(base, 0.845, 0.004), + "border-var-2": getAdjustedColor(base, 0.8, 0.007), + "border-var-3": getAdjustedColor(base, 0.755, 0.01), + primary: getAdjustedColor(base, 0.48, 0.08), + "on-primary": getAdjustedColor(base, 0.999, 0.001), + "on-bg-var-2": getAdjustedColor(base, 0.398, 0.0234), + error: { mode: "oklch", l: 0.506, c: 0.192, h: 27.7 } as Oklch, + "on-error": getAdjustedColor(base, 0.99, 0.01) + }, + dark: { + background: getAdjustedColor(base, 0.15, 0.002), + "bg-elevated-1": getAdjustedColor(base, 0.2, 0.004), + "body-text": getAdjustedColor(base, 0.9, 0.01), + "border-var-1": getAdjustedColor(base, 0.3, 0.004), + "border-var-2": getAdjustedColor(base, 0.4, 0.007), + "border-var-3": getAdjustedColor(base, 0.5, 0.01), + primary: getAdjustedColor(base, 0.84, 0.1), + "on-primary": getAdjustedColor(base, 0.3, 0.08), + "on-bg-var-2": getAdjustedColor(base, 0.83, 0.028), + error: { mode: "oklch", l: 0.65, c: 0.223, h: 27.8 } as Oklch, + "on-error": getAdjustedColor(base, 0.9, 0.01) + } + }; +}; diff --git a/packages/palette/src/components/Check.tsx b/packages/palette/src/components/Check.tsx new file mode 100644 index 0000000..d0aef00 --- /dev/null +++ b/packages/palette/src/components/Check.tsx @@ -0,0 +1,30 @@ +import { SVGProps } from "react"; + +export const Checkmark: React.FC> = (props) => { + return ( + + + + + ); +}; \ No newline at end of file diff --git a/packages/palette/src/components/ColorBlock.tsx b/packages/palette/src/components/ColorBlock.tsx new file mode 100644 index 0000000..1775fbe --- /dev/null +++ b/packages/palette/src/components/ColorBlock.tsx @@ -0,0 +1,85 @@ +import { useState } from "react"; +import { type Oklch, formatHex } from "culori"; +import { Copy } from "lucide-react"; +import { AnimatePresence, motion } from "motion/react"; +import { Checkmark } from "./Check"; +import { getAdjustedColor } from "../utils"; + +interface ColorBlockProps { + baseColor: Oklch; + text: string; + l?: number; + c?: number; + h?: number; +} + +const copy = async (text: string) => { + await navigator.clipboard.writeText(text); +}; + + +export const ColorBlock = ({ baseColor, text, l, c, h }: ColorBlockProps) => { + const [hover, setHover] = useState(false); + const [check, setCheck] = useState(false); + const color = getAdjustedColor(baseColor, l, c, h); + + const Icon = () => { + if (!check) { + return ( + + + + + + ); + } else { + return ( + + + + + + ); + } + }; + + return ( +
+
+ {text} +
{ + copy(formatHex(color)); + setCheck(true); + setTimeout(() => { + setCheck(false); + }, 2500); + }} + onMouseEnter={() => setHover(true)} + onMouseLeave={() => { + setHover(false); + setCheck(false); + }} + > + + {hover && ( + + + + )} + + {formatHex(color)} +
+
+ ); +}; \ No newline at end of file diff --git a/packages/palette/src/components/Components.tsx b/packages/palette/src/components/Components.tsx new file mode 100644 index 0000000..49e2cfd --- /dev/null +++ b/packages/palette/src/components/Components.tsx @@ -0,0 +1,75 @@ +import { buildColorTokens } from "../colorTokens"; +import { useTheme } from "../ThemeContext"; +import { formatHex, Oklch } from "culori"; + +const SearchBar = ({ baseColor }: { baseColor: Oklch }) => { + const { theme } = useTheme(); + const tokens = buildColorTokens(baseColor)[theme]; + + return ( +
+ +
+ ); +}; + +const Paragraph = ({ baseColor }: { baseColor: Oklch }) => { + const { theme } = useTheme(); + const tokens = buildColorTokens(baseColor)[theme]; + + return ( +
+

+ 《尘海绘仙缘》是洛凛于 2024 年 12 月 15 日投稿至哔哩哔哩的 Synthesizer V 中文原创歌曲, 由赤羽演唱。 +

+
+ ); +}; + +const Buttons = ({ baseColor }: { baseColor: Oklch }) => { + const { theme } = useTheme(); + const tokens = buildColorTokens(baseColor)[theme]; + + return ( +
+ + + +
+ ); +}; + +export { SearchBar, Paragraph, Buttons }; diff --git a/packages/palette/src/components/Palette.tsx b/packages/palette/src/components/Palette.tsx new file mode 100644 index 0000000..d20c572 --- /dev/null +++ b/packages/palette/src/components/Palette.tsx @@ -0,0 +1,17 @@ +import { Oklch } from "culori"; +import { buildColorTokens } from "../colorTokens"; +import { useTheme } from "../ThemeContext"; +import { ColorBlock } from "./ColorBlock"; + +export function ColorPalette({ baseColor }: { baseColor: Oklch }) { + const { theme } = useTheme(); + const tokens = buildColorTokens(baseColor)[theme]; + + return ( +
+ {Object.entries(tokens).map(([name, color]) => ( + + ))} +
+ ); +} diff --git a/packages/plaette/src/Picker/Handle.tsx b/packages/palette/src/components/Picker/Handle.tsx similarity index 100% rename from packages/plaette/src/Picker/Handle.tsx rename to packages/palette/src/components/Picker/Handle.tsx diff --git a/packages/plaette/src/Picker/Picker.tsx b/packages/palette/src/components/Picker/Picker.tsx similarity index 98% rename from packages/plaette/src/Picker/Picker.tsx rename to packages/palette/src/components/Picker/Picker.tsx index 340f789..5d583cd 100644 --- a/packages/plaette/src/Picker/Picker.tsx +++ b/packages/palette/src/components/Picker/Picker.tsx @@ -5,7 +5,7 @@ import { displaySupportsP3, roundOklch } from "./utils"; export type LchChannel = "l" | "c" | "h"; -const toOklchString = (color: Oklch) => { +export const toOklchString = (color: Oklch) => { return `oklch(${color.l} ${color.c} ${color.h})`; }; @@ -76,12 +76,12 @@ export const Picker = ({ useP3, i18n, selectedColor, onColorChange, ...rest }: P const [displayColor, setDisplayColor] = useState(selectedColor); const [hexText, setHexText] = useState(formatHex(selectedColor)); const [oklchText, setOklchText] = useState(toOklchString(selectedColor)); - const colorGamut = useP3 ? "p3" : "rgb"; useEffect(() => { try { setHexText(formatHex(selectedColor)); setOklchText(toOklchString(selectedColor)); + setDisplayColor(selectedColor); } catch (error) { console.warn("Invalid color combination"); } @@ -112,7 +112,6 @@ export const Picker = ({ useP3, i18n, selectedColor, onColorChange, ...rest }: P const hex = e.target.value; const color = parse(hex); const oklchColor = oklch(rgb(color)); - console.log("hey"); if (oklchColor) { onColorChange(roundOklch(oklchColor)); setHexText(hex); diff --git a/packages/plaette/src/Picker/Slider.tsx b/packages/palette/src/components/Picker/Slider.tsx similarity index 99% rename from packages/plaette/src/Picker/Slider.tsx rename to packages/palette/src/components/Picker/Slider.tsx index 6f4bf97..99b1e73 100644 --- a/packages/plaette/src/Picker/Slider.tsx +++ b/packages/palette/src/components/Picker/Slider.tsx @@ -36,7 +36,6 @@ export const Slider = ({ useP3, channel, color, onChange, i18nProvider }: Slider onChange(round(value, precision[channel])); }; - console.log(useP3) return (
diff --git a/packages/plaette/src/Picker/useOklchCanvas.tsx b/packages/palette/src/components/Picker/useOklchCanvas.tsx similarity index 100% rename from packages/plaette/src/Picker/useOklchCanvas.tsx rename to packages/palette/src/components/Picker/useOklchCanvas.tsx diff --git a/packages/plaette/src/Picker/utils.ts b/packages/palette/src/components/Picker/utils.ts similarity index 100% rename from packages/plaette/src/Picker/utils.ts rename to packages/palette/src/components/Picker/utils.ts diff --git a/packages/plaette/src/index.css b/packages/palette/src/index.css similarity index 100% rename from packages/plaette/src/index.css rename to packages/palette/src/index.css diff --git a/packages/plaette/src/main.tsx b/packages/palette/src/main.tsx similarity index 72% rename from packages/plaette/src/main.tsx rename to packages/palette/src/main.tsx index db920c7..6303fad 100644 --- a/packages/plaette/src/main.tsx +++ b/packages/palette/src/main.tsx @@ -1,11 +1,13 @@ import { StrictMode } from "react"; -import Aura from "@primeuix/themes/aura"; import { createRoot } from "react-dom/client"; import "./index.css"; import App from "./App.tsx"; +import { ThemeProvider } from "./ThemeContext.tsx"; createRoot(document.getElementById("root")!).render( + + ); diff --git a/packages/palette/src/utils.ts b/packages/palette/src/utils.ts new file mode 100644 index 0000000..a59060f --- /dev/null +++ b/packages/palette/src/utils.ts @@ -0,0 +1,26 @@ +import { Oklch } from "culori"; +import { i18nKeys } from "./components/Picker/Picker"; + +export const i18nProvider = (key: i18nKeys) => { + switch (key) { + case "l": + return "Lightness"; + case "c": + return "Chroma"; + case "h": + return "Hue"; + case "fallback": + return "Fallback"; + case "unsupported": + return "Unavailable on this monitor"; + } +}; + + +export const getAdjustedColor = (color: Oklch, l?: number, c?: number, h?: number) => { + const newColor = { ...color }; + if (l) newColor.l = l; + if (c) newColor.c = c; + if (h) newColor.h = h; + return newColor; +}; \ No newline at end of file diff --git a/packages/plaette/tsconfig.app.json b/packages/palette/tsconfig.app.json similarity index 100% rename from packages/plaette/tsconfig.app.json rename to packages/palette/tsconfig.app.json diff --git a/packages/plaette/tsconfig.json b/packages/palette/tsconfig.json similarity index 100% rename from packages/plaette/tsconfig.json rename to packages/palette/tsconfig.json diff --git a/packages/plaette/tsconfig.node.json b/packages/palette/tsconfig.node.json similarity index 100% rename from packages/plaette/tsconfig.node.json rename to packages/palette/tsconfig.node.json diff --git a/packages/plaette/uno.config.ts b/packages/palette/uno.config.ts similarity index 100% rename from packages/plaette/uno.config.ts rename to packages/palette/uno.config.ts diff --git a/packages/plaette/vite.config.ts b/packages/palette/vite.config.ts similarity index 100% rename from packages/plaette/vite.config.ts rename to packages/palette/vite.config.ts diff --git a/packages/plaette/src/App.tsx b/packages/plaette/src/App.tsx deleted file mode 100644 index 37b35de..0000000 --- a/packages/plaette/src/App.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import "virtual:uno.css"; -import { useEffect, useState } from "react"; -import { argbFromHex, themeFromSourceColor, applyTheme } from "@material/material-color-utilities"; -import { type Oklch, formatHex } from "culori"; -import { i18nKeys, Picker } from "./Picker/Picker"; -import { Switch } from "./Switch"; - -const defaultColor: Oklch = { mode: "oklch", h: 29.2339, c: 0.244572, l: 0.596005 }; - -const i18nProvider = (key: i18nKeys) => { - switch (key) { - case "l": - return "Lightness"; - case "c": - return "Chroma"; - case "h": - return "Hue"; - case "fallback": - return "Fallback"; - case "unsupported": - return "Unavailable on this monitor"; - } -}; - -function App() { - const [useP3, setUseP3] = useState(false); - const [selectedColor, setSelectedColor] = useState(defaultColor); - const colorHex = formatHex(selectedColor); - - useEffect(() => { - const theme = themeFromSourceColor(argbFromHex(colorHex)); - const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - applyTheme(theme, { target: document.body, dark: systemDark }); - }, [colorHex]); - - return ( -
-
-

CVSA Color Palette Generator

- -
- {/* Left Column - Color Picker */} -
-

Color Selection

- -
-
- -
- -
- Show P3 - -
-
-
- -
- -
-

- Image color extraction feature coming soon... -

-
-
-
-
- -
-
-

Color Palette

-
-
-
-
-
- ); -} - -export default App;