New: It is now possible to set the contrast threshold

Configuration/Settings.Colors.yaml

@@ -21,6 +21,9 @@ Neos:
           collapsed: false
           # The name of the custom property. Only used when mode is set to 'all'
           customPropertyName: 'color'
+          # Set the color contrast threshold for the color name output. Value between 0 and 1
+          # Depend on the luminance, the text will be black or white
+          contrastThreshold: 0.6
           # The presets are based on https://tailwindcss.com/docs/customizing-colors with the key 500
           # false and null values get filtered out
           presets:

README.md

@@ -134,6 +134,9 @@ Neos:
           customPropertyName: "color"
           # The precision of the OKLCH color picker. Set to 0 to disable rounding and use the raw values.
           precision: 5
+          # Set the color contrast threshold for the color name output. Value between 0 and 1
+          # Depend on the luminance, the text will be black or white
+          contrastThreshold: 0.6
           # The presets are based on https://tailwindcss.com/docs/customizing-colors with the key 600
           # false and null values get filtered out. You can also disable all presets with presets: false
           presets:
@@ -180,6 +183,7 @@ Foo.Bar:Your.Prototype:
             allowEmpty: false
             collapsed: true
             customPropertyName: "color-main"
+            contrastThreshold: "ClientEval: node.properties.contrastThresholdProperty / 100"
             presets:
               red: "#dc2626"
               orange: "#ea580c"

Resources/Private/Editor/ColorPicker/index.tsx

@@ -24,6 +24,7 @@ const defaultOptions = {
     showHexInput: true,
     showLightness: false,
     showLuminance: false,
+    contrastThreshold: 0.6,
     precision: 5,
     presets: {},
 };
@@ -62,7 +63,7 @@ const styles = stylex.create({
         background: "none",
         backgroundColor: colors.contrastNeutral,
     },
-    popoverButtonPreview: (color, luminance) => ({
+    popoverButtonPreview: (color, luminance, contrastThreshold) => ({
         flex: "1",
         display: "flex",
         alignItems: "center",
@@ -71,7 +72,7 @@ const styles = stylex.create({
         minHeight: sizes.goldenUnit,
         borderTopLeftRadius: sizes.borderRadius,
         borderBottomLeftRadius: sizes.borderRadius,
-        color: luminance > 0.6 ? "black" : "white",
+        color: luminance > contrastThreshold ? "black" : "white",
         backgroundColor: color || null,
         backgroundSize: color ? null : "16px 16px",
         backgroundImage: color ? null : colors.checkerboard,
@@ -104,7 +105,7 @@ const styles = stylex.create({
 function Editor(props) {
     const options = { ...defaultOptions, ...props.config, ...props.options };
     const { value, commit, highlight, i18nRegistry, id } = props;
-    const { disabled, mode, collapsed, allowEmpty, precision } = options;
+    const { disabled, mode, collapsed, allowEmpty, precision, contrastThreshold } = options;
     if (mode !== "coords" && mode !== "hex" && mode !== "all" && mode !== "oklch") {
         return (
             <div {...stylex.props(styles.error)}>
@@ -174,7 +175,11 @@ function Editor(props) {
                         aria-expanded={open}
                         aria-controls={`${id}-panel`}
                     >
-                        <output {...stylex.props(styles.popoverButtonPreview(state?.oklch, state?.coords?.l || 0))}>
+                        <output
+                            {...stylex.props(
+                                styles.popoverButtonPreview(state?.oklch, state?.coords?.l || 0, contrastThreshold),
+                            )}
+                        >
                             <Suspense fallback={<HexOutput hex={state?.hex} />}>
                                 <ColorName hex={state?.hex} />
                             </Suspense>

Resources/Public/Plugin.css

@@ -59,6 +59,7 @@
 .x1bexyg0:not(#\#):not(#\#):not(#\#){line-height:calc(var(--x1fv9uxr) - 10px)}
 .x190dgpg:not(#\#):not(#\#):not(#\#){opacity:.65}
 .x1u4uod0:not(#\#):not(#\#):not(#\#){opacity:var(--opacity,revert)}
+.xdpxx8g:not(#\#):not(#\#):not(#\#){text-align:left}
 .x1hr2gdg:not(#\#):not(#\#):not(#\#){text-align:right}
 .xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
 .x1v0jg1i:not(#\#):not(#\#):not(#\#){transform:var(--transform,revert)}