Namespace Pollution Mechanism
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    rework-shadepublic

    rework-shade

    Lighten and darken function for the Rework CSS preprocessing library.

    This plugin is meant to share both the syntax and results of the stylus version. You can use shade({color}, +/-{amount}) or the stylus syntax of lighten|darken({color}, {amount}%).

    Usage

    Install the package via NPM.

    npm install rework-shade
    body {
      padding: 10px;
      background: shade(rgba(0, 0, 0, 0.5)5);
    }
     
    /* using points */
    .stuff {
      color: shade(rgb(0, 200, 50)1.3);
    }
     
    .bright {
      background: shade(#00408030);
    }
     
    .dark {
      background: shade(#fff-50);
    }

    yields:

    body {
      padding: 10px;
      background: rgba(13, 13, 13, 0.5);
    }
     
    .stuff {
      color: rgb(3, 203, 53);
    }
     
    .bright {
      background: rgb(77, 141, 205);
    }
     
    .dark {
      background: rgb(128, 128, 128);
    }

    Amount explained

    The amount you put, is the percentage of lightness that you want to increase or decrease the color by. We use HSL and adjust the lightness. The math used is identical to how Stylus handles it.

    /* stylus in */
    body {
      color: lighten(rgb(0,0,0)10%);
    }
    /* stylus out */
    body {
      color: #1a1a1a; // or rgb(26,26,26)
    }
    /* rework-shades in */
    body {
      color: shade(rgb(0,0,0)10);
    }

    yields:

    /* rework-shades out */
    body {
      color: rgb(26, 26, 26);
    }

    rework-vars support

    Just make sure you run/use rework-vars before shades:

    :root {
      var-linkColor: #cccccc;
    }
     
    body {
      color: shade(var(linkColor)-10);
      background: shade(rgba(0, 0, 0, 0.5)10);
    }
    :root {
      var-linkColor: #cccccc;
    }
     
    body {
      color: rgb(179, 179, 179);
      background: rgba(26, 26, 26, 0.5);
    }

    Keywords

    none

    install

    npm i rework-shade

    Downloadsweekly downloads

    2

    version

    1.4.3

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar