What's New?
- New utility Snippets to convert color formats, extract channel values, and modify saturation, using the ozdemirburak/iris color manipulation library.
- cssSweet's processor libraries have been updated to the latest, and dependencies are now managed via Composer.
- phpunit tests have been written to ensure smoother updates going forward.
- The overall upgrade experience and code organization have been significantly improved.
Snippet Usage Examples
csssweet.convert
Converts color formats.
* [[convert? &input=`#333` &options=`rgba`]]
* 'rgba(51,51,51,1)'
*
* [[+color:convert]]
* Where the value of the placeholder is 'rgba(51,51,51,1)'
* '#333333'
csssweet.extract
Extracts channel values.
* [[extract? &input=`#80e61a` &options=`red`]]
* '80'
*
* [[+color:extract=`a`]]
* Where the value of the placeholder is 'rgba(51,51,51,0.5)'
* '0.5'
csssweet.lighten
Lighten (or darken) a color. Includes flags for tint (mix with white) or shade (mix with black).
* [[+color:lighten=`20`]]
* Lightens the $input color by 20%
*
* [[+color:lighten=`-30`]]
* Darkens the $input color by 30%
*
* [[+color:lighten=`max`]]
* If the $input value is dark, 'ffffff' will be
* returned, else '000000' will be returned.
*
* [[+color:lighten=`rev60`]]
* This would tint or shade the $input color by 60%
csssweet.modval
Basic math operations on numeric values.
* [[modval?input=`4px`&options=`*3`]]
* '12px'
csssweet.prefix
Naive prefixer.
* [[+my_radius_css:prefix]]
* Where the value of the placeholder is 'border-radius: 3px;'
* -webkit-border-radius: 3px;
* -moz-border-radius: 3px;
* border-radius: 3px;
csssweet.saturate
(De)saturate a color.
* [[saturate? &input=`#80e61a` &options=`20`]]
* '#80ff00'
*
* [[+color:saturate=`-20`]]
* Where the value of the placeholder is 'rgb(128,230,26)'
* 'rgb(128,204,51)'
Plugin Usage
See the README in the GitHub repo. You can also submit issues and PRs there. Happy MODX-ing :)
