Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork0
Color picker for Neos CMS who saves the color in the OKLCH color space
License
CarbonPackages/Carbon.ColorPicker.OKLCH
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Color picker for Neos CMS who saves the color in theOKLCH color space. It also provide an eel helper to convertHEX colors toOKLCH.
There are many options on how the picker should look like:
Here you can see some of the combinations:
Carbon.ColorPicker.OKLCH is available via packagist.Run the following command in your site package
composer require --no-update carbon/colorpicker-oklch
Then runcomposer update in your project root.
If themode ist set toall (which is the default), the color picker don't store only the given value, it stores an array with following values:
hex: The color in hex formatoklch: The color in theOKLCHcolor spacecoords: The values in theOKLCHcolor space. This is great for any color transformation. Very handy if you use something like theTailwind OKLCH PlugincustomProperty: Ready to use custom properties for your CSS. You can set the name via the optioncustomPropertyName, defaults tocolor
{"hex":"#65a30d","oklch":"oklch(64.817% 0.17545 131.68)","coords": {"l":0.64817,"c":0.17545,"h":131.68 },"customProperty": {"coords":"--color-l:0.64817;--color-c:0.17545;--color-h:131.68;","oklch":"--color:oklch(64.817% 0.17545 131.68);","hex":"--color:#65a30d;" }}If themode ist set tocoords, the color picker stores the coordinates of theOKLCH color as array:
{"l":0.64817,"c":0.17545,"h":131.68393}If themode ist set tohex, the color picker stores the hex color value:#65a30d
If themode ist set tooklch, the color picker stores theOKLCH color as string:oklch(64.817% 0.17545 131.68)
Add a property of type array and configure the editor as seen in this example:
Foo.Bar:Your.Prototype:properties:colorOKLCH:type:arrayui:label:OKLCH Colorinspector:editor:"Carbon.ColorPicker/OKLCH"group:yourGroupName
If you set mode tohex oroklch the type has to bestring:
Foo.Bar:Your.Prototype:properties:colorOKLCH:type:stringui:label:OKLCH Colorinspector:editor:"Carbon.ColorPicker/OKLCH"group:yourGroupNameeditorOptions:mode:oklch
The editor allows some global default options via yourSettings.yaml file:
Neos:Neos:Ui:frontendConfiguration:Carbon.ColorPicker.OKLCH:# This option makes it possible hide the whole editor (incl. label) based on data sourcehidden:false# Set the mode of the color picker. Possible values are: 'oklch', 'hex', 'coords', 'all'mode:"all"# Disable the color pickerdisable:false# Allow empty valuesallowEmpty:true# Show preset selectorshowPresets:true# Show input field for hex inputshowHexInput:true# Show color pickershowPicker:true# Show slider to set the lightnessshowLightness:false# Show slider to set the luminanceshowLuminance:false# Collapse the color picker (enables only when showPicker is true)collapsed:false# The name of the custom property. Only used when mode is set to 'all'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 whitecontrastThreshold: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: falsepresets:slate:"#475569"gray:"#4b5563"zinc:"#52525b"neutral:"#525252"stone:"#57534e"red:"#dc2626"orange:"#ea580c"amber:"#d97706"yellow:"#ca8a04"lime:"#65a30d"green:"#16a34a"emerald:"#059669"teal:"#0d9488"cyan:"#0891b2"sky:"#0284c7"blue:"#2563eb"indigo:"#4f46e5"violet:"#7c3aed"purple:"#9333ea"fuchsia:"#c026d3"pink:"#db2777"rose:"#e11d48"# Optionally use a data source:# mode and precision cannot be set via datasourcedataSourceIdentifier:"some-datasource"dataSourceUri:"some/custom-route"dataSourceAdditionalData:foo:"bar"dataSourceDisableCaching:false
The settings can also be set in your property configuration:
Foo.Bar:Your.Prototype:properties:colorOKLCH:type:arrayui:label:OKLCH Colorinspector:editor:"Carbon.ColorPicker/OKLCH"group:yourGroupNameeditorOptions:showLightness:trueshowLuminance:truedisable:trueallowEmpty:falsecollapsed:truecustomPropertyName:"color-main"contrastThreshold:"ClientEval: node.properties.contrastThresholdProperty / 100"presets:red:"#dc2626"orange:"#ea580c"
Converts aHEX color to the object who is used when you set the mode toall.
color(string|array, required) The colorprecision(int) The precision for the color, defaults to5customPropertyName(string) The name for the ready to use custom property, defaults to'color'
Example:
${ColorConvert.toOkLch('#65a30d',4, 'color-main')}
returns
{"hex":"#65a30d","oklch":"oklch(64.82% 0.1755 131.7)","coords": {"l":0.6482,"c":0.1755,"h":131.7 },"customProperty": {"coords":"--color-main-l:0.6482;--color-main-c:0.1755;--color-main-h:131.7;","oklch":"--color-main:oklch(64.82% 0.1755 131.7);","hex":"--color-main:#65a30d;" }}About
Color picker for Neos CMS who saves the color in the OKLCH color space
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.