cssSweet 5.x Improvements

Sep 30, 2019

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 :)