Socket
Socket
Sign inDemoInstall

chroma-sass

Package Overview
Dependencies
0
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

chroma-sass

Chroma is the Sass color manager, managing color names, variations, and color schemes.


Version published
Maintainers
1
Weekly downloads
212
decreased by-36.34%

Weekly downloads

Readme

Source

About Chroma

Chroma is a Sass library that manages a project's color names, color variations, and color schemes.

USAGE

Full documentation is available at http://johnalbin.github.io/chroma/. But here are some quick examples to give you an idea of what Chroma can do.

@import "chroma";

// Define the default color scheme.
$chroma: define-default-color-scheme('Branding color names for use by "functional" color names below.');

// Add colors to the default color scheme.
$chroma: add-colors((
  white:       #fff,
  black:       #000,
  blue:        #0e71b8,
  red:         #c00,

  // Define a primary highlight color that has the value of our "blue" color.
  // Note: if blue was specified without quotes, Chroma would interpret that as
  // the color keyword blue and not a reference to the "blue" color name.
  primary:     'blue',
));

// Create a "functional" color scheme that inherits from the default color scheme.
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');

// Add colors to the functional color scheme.
$chroma: add-colors('functional', (
  // Have the "text" color use the hex value given to the "black" color. Even
  // though the "functional" color scheme doesn't define "black", it inherits
  // from the "default" color scheme where "black" is defined.
  text:        'black',

  // You can use quoted or unquoted strings to reference other color names.
  // Note: color keywords are not considered strings unless they are quoted.
  heading:     text,

  // Have the link color use the primary color.
  link:        primary,
  link-focus:  (link lighten 20%), // Set the link-focus color to the "link"
                                   // color passed through the color
                                   // function: lighten([color], 20%)
));

// Create an "alternate" color scheme that inherits from the "functional" color scheme.
$chroma: define-color-scheme('alternate', 'Alternate colors for the site.', $parent: 'functional');

// Add colors to the alternate color scheme.
$chroma: add-colors('alternate', (
  primary:     'red',
));

// Set which color scheme should be used by default when calling the color()
// function.
$chroma-active-scheme: 'functional';

.example-ruleset {
  h1 {
    // Outputs #000.
    color: color(heading);
  }

  a {
    // Outputs #0e71b8.
    color: color(link);

    &:focus,
    &:hover {
      // Outputs #3ca5f0, which is lighten(#0e71b8, 20%).
      color: color(link-focus);
    }

    .alternate-color-section & {
      // Outputs #c00.
      color: color(alternate, link);

      &:focus,
      &:hover {
        // Outputs #ff3333, which is lighten(#c00, 20%).
        color: color(alternate, link-focus);
      }
    }
  }
}

Install

Install using one of the following methods:

  • Install with npm: npm install --save-dev chroma-sass
  • Install with Bower: bower install --save-dev chroma
  • Install with Ruby Gem: gem install chroma-sass
    and, if using Compass, add require "chroma-sass" to your config.rb file.
  • Install with Bundler and Ruby Gem: bundle inject chroma-sass '~> 1.0'

See Chroma’s online documentation for more information.

REQUIREMENTS

  • LibSass 3.2.5 or later
  • or Ruby Sass 3.4.0 or later

LICENSE

Available under the GPL v2 license. See LICENSE.txt.

Build Status

Keywords

FAQs

Last updated on 16 Oct 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc