Nocturnal Practitioners of Magic

    accoutrement-color

    2.3.1 • Public • Published

    Accoutrement-Color

    Sass color-palette management by OddBird

    • Organize all your colors into a single map, or set of maps
    • Document color relationships directly in the code
    • Automate WCAG-appropriate contrast checking
    • Generate color-palette documentation with Herman

    OddBird's Accoutrement toolkits are designed around the idea that code should be meaningful to both humans and machines – opening the door for automation, while improving or maintaining readability. These tools integrate with Herman, our automated living pattern-library generator built on SassDoc.

    Other Accoutrement include…

    • Init provides lightweight browser-normalization.
    • Scale helps manage scale patterns like font-sizes, margins, and gutters.
    • Type provides webfont management tools, and other typography helpers.
    • Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.

    Quick Start: Colors

    Install the package with npm or yarn:

    npm install accoutrement-color
    yarn add accoutrement-color

    Import the library:

    @import '<path-to>/accoutrement-color/sass/color';

    Establish your color palette:

    $colors: (
      // set explicit colors
      'brand-pink'hsl(330, 85%, 62%),
      'brand-light'#ddf,
      'brand-dark'#224,
     
      // reference existing colors
      'background''brand-light',
      'border''brand-dark',
     
      // make adjustments as needed, using color functions
      'link''brand-pink' ('shade': 25%'desaturate': 15%),
    );

    Access your colors from anywhere:

    .example {
      border-color: color('border');
    }

    You can also define your colors in smaller maps, and then add them to the global $colors variable using the merge-color() function, or add-colors() mixin.

    $brand: (
      'brand-pink'hsl(330, 85%, 62%),
      'brand-light'#ddf,
      'brand-dark'#224,
    );
     
    $patterns: (
      'background''brand-light',
      'border''brand-dark',
      'link''brand-pink' ('shade': 25%),
    );
     
    // merge everything into the main $colors map… 
    @include add-colors($brand, $patterns);

    We'll also help you calculate WCAG-appropriate color contrasts:

    a:hover {
      // set a background, and get well-contrasted text 
      @include contrasted('link');
     
      // or return a contrasting color for use anywhere… 
      border-color: contrast('background');
    }

    Install

    npm i accoutrement-color

    DownloadsWeekly Downloads

    371

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    685 kB

    Total Files

    40

    Last publish

    Collaborators

    • jgerigmeyer
    • mirisuzanne