README

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.

prototype(Vendor.Site:CustomCssProperties) < prototype(Neos.Fusion:Component) {

    //
    // based on the size-properties `font` and `bgColor` some
    // values shall be set globally
    // 
    base = Neos.Fusion:DataStructure {        
        font = ${q(site).property('font')}
        bg = ${q(site).property('bgColor')}
        bg-lighter = ${Color.css(this.bg).lighten(20)}
        bg-transparent = ${Color.css(this.bg).fadeout(20)}  
    }

    //
    // based on the properties `bgColorMobile` additional css
    // properties are defined that will be rendered in mobile 
    // breakpoints and override the other values 
    //  
    mobileQuery = 'screen and (max-width: 600px)'
    mobile = Neos.Fusion:DataStructure {
        bg = ${q(site).property('bgColorMobile')}
        bg-lighter = ${Color.css(this.bg).lighten(20)}
        bg-transparent = ${Color.css(this.bg).fadeout(20)}  
    }

    renderer = afx`
        <style>
            <PackageFactory.ColorHelper:CssVariables value={props.base} />
            <PackageFactory.ColorHelper:CssVariables value={props.mobile} mediaQuery={props.mobileQuery} />
        </style>
    `
}

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 variables
mediaQuery (string, default null) when given renders the css variables into a @media ... {} section
selector (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 chars
color = ${ Color.rgb(100, 0, 255) } expects three numbers each between 0 and 255
color = ${ Color.hsl(156, 25, 75) } expects three numbers a degree 0-355 and two percent values 0-100
color = ${ Color.rgba(100, 0, 255, 50) } expects three numbers each between 0 and 255 plus a numbers between 0-100
color = ${ 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) } >> #80ff00
color = ${ Color.hex('#80e619').desaturate( 20) } >> #80cd33

Adjust lightness

color = ${ Color.hex('#80e619').lighten('#80e619', 20) } >> #b3f075
color = ${ Color.hex('#80e619').darken('#80e619', 20) } >> #4d8a0f

Modify the color value by rotating in the hue axis

color = ${ Color.hex('#f2330d').spin(30) } >> #f2a20d
color = ${ Color.hex('#f2330d').spin(-30) } >> #f20d59

Invert color

color = ${ Color.hex('#f2330d').spin(180) } >> #0dd0f2

Fade colors

color = ${ Color.hex('#f2330d').fadeout(10) } >> #0dd0f2
color = ${ 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() } >> #ff0000
rgb = ${ 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.

packagefactory / colorhelper

Maintainers

Details