New: Ouput color names on collapsed

Configuration/Settings.Neos.yaml

@@ -5,6 +5,8 @@ Neos:
         javascript:
           Carbon.ColorPicker.OKLCH:
             resource: resource://Carbon.ColorPicker.OKLCH/Public/Plugin.js
+            attributes:
+              type: 'module'
         stylesheets:
           Carbon.ColorPicker.OKLCH:
             resource: resource://Carbon.ColorPicker.OKLCH/Public/Plugin.css

Makefile

@@ -13,16 +13,21 @@ prettier-watch:
 ## Install dependencies and build editor
 production: install prettier build
 
+clean:
+	@rm -rf Resources/Public
+
 ## Install dependencies
 install:
 	@pnpm install
 
 ## Watch for changes and re-build on change
 watch:
+	make clean
 	@pnpm watch
 
 ## Build editor
 build:
+	make clean
 	@pnpm build
 
 # Define colors

README.md

@@ -175,7 +175,7 @@ Foo.Bar:Your.Prototype:
               orange: "#ea580c"
 ```
 
-[screenshot]: https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH/assets/4510166/320c14e8-f961-49ac-8959-38d2c43b3a81
+[screenshot]: https://github.com/CarbonPackages/Carbon.ColorPicker.OKLCH/assets/4510166/b604eb5a-cce6-4fb2-829d-d0c091be9758
 [tailwind oklch plugin]: https://github.com/MartijnCuppens/tailwindcss-oklch
 [`oklch`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
 [packagist]: https://packagist.org/packages/carbon/colorpicker-oklch

Resources/Private/Editor/ColorPicker/ColorName.tsx

@@ -0,0 +1,23 @@
+//@ts-ignore
+import React from "react";
+import nearestColor from "nearest-color";
+import colorNameList from "color-name-list/dist/colornames.esm.mjs";
+
+// nearestColor need objects {name => hex} as input
+const colors = colorNameList.reduce(
+    (o: object, { name, hex }: { name: string; hex: string }) => Object.assign(o, { [name]: hex }),
+    {},
+);
+
+const nearest = nearestColor.from(colors);
+
+export default function ColorName({ hex }: { hex: string | null | undefined }) {
+    if (!hex) {
+        return "";
+    }
+
+    const value = nearest(hex);
+
+    // @ts-ignore
+    return value?.name || "";
+}

Resources/Private/Editor/ColorPicker/Components/HexOutput.tsx

@@ -0,0 +1,17 @@
+// @ts-ignore
+import React, { useEffect, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { fonts } from "../Tokens.stylex";
+
+const styles = stylex.create({
+    fontMono: {
+        fontFamily: fonts.mono,
+    },
+});
+
+export default function HexOutput({ hex }: { hex: string | null | undefined }) {
+    if (!hex) {
+        return "";
+    }
+    return <span {...stylex.props(styles.fontMono)}>{hex}</span>;
+}

Resources/Private/Editor/ColorPicker/index.tsx

@@ -1,16 +1,19 @@
 // @ts-ignore
-import React, { useState, useEffect, MouseEvent } from "react";
+import React, { useState, useEffect, MouseEvent, lazy, Suspense } from "react";
 import { neos } from "@neos-project/neos-ui-decorators";
 import Panel, { setStateFromValue } from "./Components";
 import { Icon, IconButton } from "@neos-project/react-ui-components";
 import * as stylex from "@stylexjs/stylex";
 import { colors, sizes, transitions } from "./Tokens.stylex";
+import HexOutput from "./Components/HexOutput";
 
 const neosifier = neos((globalRegistry) => ({
     i18nRegistry: globalRegistry.get("i18n"),
     config: globalRegistry.get("frontendConfiguration").get("Carbon.ColorPicker.OKLCH"),
 }));
 
+const ColorName = lazy(() => import("./ColorName.js"));
+
 const defaultProps = {
     options: {
         mode: "all",
@@ -60,14 +63,21 @@ const styles = stylex.create({
         background: "none",
         backgroundColor: colors.contrastNeutral,
     },
-    popoverButtonPreview: (color) => ({
+    popoverButtonPreview: (color, luminance) => ({
         flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
         minHeight: sizes.goldenUnit,
         borderTopLeftRadius: sizes.borderRadius,
         borderBottomLeftRadius: sizes.borderRadius,
+        color: luminance > 0.6 ? "black" : "white",
         backgroundColor: color || null,
         backgroundSize: color ? null : "16px 16px",
         backgroundImage: color ? null : colors.checkerboard,
+        paddingInline: sizes.spacingFull,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
     }),
     popoverButtonIcon: (open) => ({
         transform: open ? "rotate(180deg)" : "rotate(0deg)",
@@ -157,7 +167,11 @@ function Editor(props) {
                         aria-expanded={open}
                         aria-controls={`${id}-panel`}
                     >
-                        <span {...stylex.props(styles.popoverButtonPreview(state?.oklch))} />
+                        <output {...stylex.props(styles.popoverButtonPreview(state?.oklch, state?.coords?.l || 0))}>
+                            <Suspense fallback={<HexOutput hex={state?.hex} />}>
+                                <ColorName hex={state?.hex} />
+                            </Suspense>
+                        </output>
                         {Boolean(allowEmpty) && Boolean(state?.oklch) && (
                             <IconButton
                                 style="light"

Resources/Public/Plugin.css

@@ -41,6 +41,7 @@
 .x1g0zcm7:not(#\#):not(#\#):not(#\#){background-image:var(--backgroundImage,revert)}
 .xx8ilsi:not(#\#):not(#\#):not(#\#){background-size:var(--backgroundSize,revert)}
 .x11mstge:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--xo9o7wn)}
+.x19dipnz:not(#\#):not(#\#):not(#\#){color:var(--color,revert)}
 .x1awj2ng:not(#\#):not(#\#):not(#\#){color:white}
 .x1h6gzvc:not(#\#):not(#\#):not(#\#){cursor:not-allowed}
 .x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
@@ -52,6 +53,7 @@
 .x1sirlc8:not(#\#):not(#\#):not(#\#){font-family:var(--xhezqga)}
 .xiq9r4:not(#\#):not(#\#):not(#\#){font-size:var(--x11o33fd)}
 .xi7raoi:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--gridTemplateRows,revert)}
+.x1nhvcw1:not(#\#):not(#\#):not(#\#){justify-content:flex-start}
 .x1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
 .x1szn6h9:not(#\#):not(#\#):not(#\#){justify-content:stretch}
 .x1bexyg0:not(#\#):not(#\#):not(#\#){line-height:calc(var(--x1fv9uxr) - 10px)}

build.mjs

@@ -13,9 +13,13 @@ const options = {
     minify: true,
     sourcemap: true,
     target: "es2020",
-    format: "iife",
+    format: "esm",
+    splitting: true,
     legalComments: "none",
-    entryPoints: { Plugin: "Resources/Private/Editor/manifest.ts" },
+    entryPoints: {
+        Plugin: "Resources/Private/Editor/manifest.ts",
+        ColorName: "Resources/Private/Editor/ColorPicker/ColorName.tsx",
+    },
     loader: {
         ".js": "tsx",
     },

package.json

@@ -12,9 +12,12 @@
     "@stylexjs/esbuild-plugin": "^0.5.1",
     "@stylexjs/eslint-plugin": "^0.5.1",
     "@stylexjs/stylex": "^0.5.1",
+    "@types/nearest-color": "^0.4.1",
+    "color-name-list": "^10.20.2",
     "colorjs.io": "^0.5.0",
     "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
+    "nearest-color": "^0.4.4",
     "onchange": "^7.1.0",
     "prettier": "^3.2.5",
     "react-colorful": "^5.6.1"

types.d.ts

@@ -1,3 +1,5 @@
+declare module "color-name-list/dist/colornames.esm.mjs";
+
 declare module "@neos-project/neos-ui-backend-connector" {
     type MakeFetchRequest = (csrf: string) => RequestInit & { url?: string };