@tabuckner/random-contrast-compliant

    1.0.0 • Public • Published

    Random-Contrast-Compliant

    A SCSS helper to generate a Random Color that is Compliant with your specified WCAG contrast guidelines. Import into your SASS/SCSS files and use!

    Click Here To See It In Action

    Getting Started

    These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

    Prerequisites

    • An existing functional SASS/SCSS project.
    • A functional import process.
      • You’ll need to add Random-Contrast-Compliant to your node-sass includePaths option. This project should be imported from _random-contrast-compliant.scss. How you do this depends on how node-sass is integrated into your project.

    Installing

    Install with NPM or Yarn

    npm i -D @tabuckner/random-contrast-compliant
    
    yarn add -D @tabuckner/random-contrast-compliant
    

    Then Use In Your SASS/SCSS Files

    @import "~@tabuckner/random-contrast-compliant/_random-contrast-compliant";
    
    $bg-color: whitesmoke;
    
    .box {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      margin: 8px;
      background: getRandomContrastCompliant($bg-color);
    }

    API

    The main method exposed by this package is getRandomContrastCompliant.

    getRandomContrastCompliant($backgroundColor, $contrastRatioMinimum: $default-contrast-minimum, $contrastRatioMaximum: $default-contrast-maximum)

    Given a backgroundColor, and optional WCAG contrastRationMinimum/contrastRatioMaxiumum, will return a random color that meets the supplied WCAG contrast guidelines.

    $backgroundColor

    Any valid SASS/SCSS color.

    $contrastRatioMinimum

    Any number representing the contrast ratio minimum (default: 4.5).

    $contrastRatioMaximum

    Any number representing the contrast ratio maximum (default: 10).

    Running the tests

    Tests are handled by True and Jest.

    yarn test
    

    or...

    yarn test --watch
    

    And coding style tests

    Style Linting can be handled with:

    yarn lint
    

    Deployment

    Add additional notes about how to deploy this on a live system

    Contributing

    Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

    Versioning

    We use SemVer for versioning. For the versions available, see the tags on this repository.

    Authors

    License

    This project is licensed under the MIT License - see the LICENSE.md file for details

    Acknowledgments

    Keywords

    none

    Install

    npm i @tabuckner/random-contrast-compliant

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • tabuckner