Download the PHP package packagefactory/colorhelper without Composer
On this page you can find all versions of the php package packagefactory/colorhelper. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download packagefactory/colorhelper
More information about packagefactory/colorhelper
Files in packagefactory/colorhelper
Package colorhelper
Short Description EEL Color helper to transform hex colors
License GPL-3.0-or-later
Informations about the package colorhelper
PackageFactory.ColorHelper
The package provides the Fusion Prototype Vendor.Site:CustomCssProperties
for rendering css custom-properties together with an EEL Color
Helper that
provides an interface for fluent color transformations.
Rendering as Css Custom Properties
The fusion prototype PackageFactory.ColorHelper:CssVariables
allows to
render DataStructures as CssVariables. This can be used for customizing
css based on node properties as shown in the example below.
PackageFactory.ColorHelper:CssVariables
values
(array<string>
, default:Neos.Fusion:DataStructure
) the values to render as css variablesmediaQuery
(string
, defaultnull
) when given renders the css variables into a@media ... {}
sectionselector
(string
, default:root
) : css-selector the variables are rendered for
Handling colors with EEL
Creating
Colors can be created from hex, rgb and hsl values
color = ${ Color.hex('#80e619') }
expects a hex string of 3 or 6 charscolor = ${ Color.rgb(100, 0, 255) }
expects three numbers each between 0 and 255color = ${ Color.hsl(156, 25, 75) }
expects three numbers a degree 0-355 and two percent values 0-100color = ${ Color.rgba(100, 0, 255, 50) }
expects three numbers each between 0 and 255 plus a numbers between 0-100color = ${ Color.hsla(156, 25, 75, 50) }
expects three numbers a degree 0-355 and three percent values 0-100
The methods rgb and hsl allow to specify the alpha as fourth argument
expecting a float between 0 and 1 color = ${ Color.hsl(156, 25, 75, 0.5) }
If you have a color value specified as css color string you can use the
Color.css
method to instantiate the color. Plaese be aware that this
uses a very simple regex based parser for the css colors and for now only
suppprts hex,rgb and hsla colors.
color = ${ Color.css('#80e619') }
color = ${ Color.css('rbg( 10%, 50%, 0%, 50%)') }
color = ${ Color.css('hsl( 270, 10%, 50%, 0.5)') }
Manipulating
Once created those colors can then be manipulated via fluent interface like a flow query for colors.
Adjust saturation
color = ${ Color.hex('#80e619').saturate(20) }
>> #80ff00color = ${ Color.hex('#80e619').desaturate( 20) }
>> #80cd33
Adjust lightness
color = ${ Color.hex('#80e619').lighten('#80e619', 20) }
>> #b3f075color = ${ Color.hex('#80e619').darken('#80e619', 20) }
>> #4d8a0f
Modify the color value by rotating in the hue axis
color = ${ Color.hex('#f2330d').spin(30) }
>> #f2a20dcolor = ${ Color.hex('#f2330d').spin(-30) }
>> #f20d59
Invert color
color = ${ Color.hex('#f2330d').spin(180) }
>> #0dd0f2
Fade colors
color = ${ Color.hex('#f2330d').fadeout(10) }
>> #0dd0f2color = ${ Color.rgb(255,0,0,0).fadein(20) }
>> #0dd0f2
Mix colors
color = ${ Color.hex('#ff0000').mix(Color.hex('#0000ff'), 50) }
>> #800080
Offcourse this can be used in afx attributes as any other eel expression.
Value rendering
When casted to string the color objects will render as hex value. For special requirements the format can be specified. All formats will only render an alpha value if the color is transparent.
hex = ${ Color.rgb(255,0,0).hex() }
>> #ff0000rgb = ${ Color.rgba(255,0,0).fadeout(50).rgb() }
>> rgba( 255, 0, 0, 0.5)hsl = ${ Color.rgba(255,0,0).hsl() }
>> hsla( 0, 100%, 50%)
Installation
PackageFactory.ColorHelper is available via packagist. Run composer require packagefactory/colorhelper
.
We use semantic-versioning so every breaking change will increase the major-version number.
Contribution
We will gladly accept contributions. Please send us pull requests.
All versions of colorhelper with dependencies
neos/fusion Version ^4.3 || ^5.0 || ^7.0 || ^8.0 || dev-master