README

该包提供了融合原型 Vendor.Site:CustomCssProperties，用于渲染 CSS 自定义属性，以及一个 EEL Color 助手，该助手提供了一个流畅的颜色转换接口。

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>
    `
}

以 CSS 自定义属性的形式渲染

融合原型 PackageFactory.ColorHelper:CssVariables 允许将数据结构渲染为 CSS 变量。这可以用于根据节点属性自定义 CSS，如下例所示。

PackageFactory.ColorHelper:CssVariables

• values (array<string>, 默认: Neos.Fusion:DataStructure) 要渲染为 CSS 变量的值
• mediaQuery (string, 默认 null) 当提供时，将 CSS 变量渲染到 @media ... {} 部分中
• selector (string, 默认 :root) : CSS 选择器，变量是为其渲染的

使用 EEL 处理颜色

创建

颜色可以由十六进制、RGB 和 HSL 值创建

• color = ${ Color.hex('#80e619') } 期望一个 3 或 6 个字符的十六进制字符串
• color = ${ Color.rgb(100, 0, 255) } 期望三个介于 0 和 255 之间的数字
• color = ${ Color.hsl(156, 25, 75) } 期望三个数字，一个度数 0-355 和两个百分比值 0-100
• color = ${ Color.rgba(100, 0, 255, 50) } 期望三个介于 0 和 255 之间的数字以及一个介于 0-100 之间的数字
• color = ${ Color.hsla(156, 25, 75, 50) } 期望三个数字，一个度数 0-355 和三个百分比值 0-100

方法 rgb 和 hsl 允许指定第四个参数为 alpha，期望一个介于 0 和 1 之间的浮点数 color = ${ Color.hsl(156, 25, 75, 0.5) }

如果您指定了作为 CSS 颜色字符串的颜色值，可以使用 Color.css 方法实例化颜色。请注意，这使用一个非常简单的基于正则表达式的解析器来解析 CSS 颜色，并且目前仅支持十六进制、RGB 和 HSLA 颜色。

• color = ${ Color.css('#80e619') }
• color = ${ Color.css('rbg( 10%, 50%, 0%, 50%)') }
• color = ${ Color.css('hsl( 270, 10%, 50%, 0.5)') }

操作

一旦创建，可以通过流畅的界面进行操作，就像颜色流查询一样。

调整饱和度

• color = ${ Color.hex('#80e619').saturate(20) } >> #80ff00
• color = ${ Color.hex('#80e619').desaturate( 20) } >> #80cd33

调整亮度

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

通过在色调轴上旋转修改颜色值

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

反转颜色

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

淡化颜色

• color = ${ Color.hex('#f2330d').fadeout(10) } >> #0dd0f2
• color = ${ Color.rgb(255,0,0,0).fadein(20) } >> #0dd0f2

混合颜色

• color = ${ Color.hex('#ff0000').mix(Color.hex('#0000ff'), 50) } >> #800080

当然，这可以像任何其他 eel 表达式一样用于 afx 属性。

值渲染

当转换为字符串时，颜色对象将渲染为十六进制值。对于特殊要求，可以指定格式。所有格式仅在颜色为透明时才渲染 alpha 值。

• 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%)

安装

PackageFactory.ColorHelper 通过 packagist 提供。运行 composer require packagefactory/colorhelper。我们使用语义化版本控制，每次重大变更都会增加主版本号。

贡献

我们非常欢迎贡献。请向我们发送 pull request。