pax_global_header00006660000000000000000000000064123070672100014510gustar00rootroot0000000000000052 comment=f6cbb3d10b552ebde549601d87d08585eab81160 compass-color-schemer/000077500000000000000000000000001230706721000152615ustar00rootroot00000000000000compass-color-schemer/.gitignore000066400000000000000000000000711230706721000172470ustar00rootroot00000000000000.DS_Store *.sassc *.scssc *.gem example/css/ Gemfile.lockcompass-color-schemer/.rvmrc000066400000000000000000000000451230706721000164120ustar00rootroot00000000000000rvm ruby-1.9.2@color-schemer --createcompass-color-schemer/bower.json000066400000000000000000000004071230706721000172730ustar00rootroot00000000000000{ "name": "color-schemer", "version": "0.2.8", "main": "stylesheets/_color-schemer.scss", "ignore": [ "**/.*", "node_modules", "components" ], "dependencies": { "scss-blend-modes": "git://github.com/heygrady/scss-blend-modes.git" } }compass-color-schemer/color-schemer.gemspec000066400000000000000000000014121230706721000213660ustar00rootroot00000000000000# -*- encoding: utf-8 -*- Gem::Specification.new do |s| s.name = %q{color-schemer} s.version = "0.2.8" s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5") s.authors = ["Scott Kellum", "Mason Wendell"] s.date = %q{2011-10-06} s.description = %q{Create color schemes with ease.} s.email = %w{scott@scottkellum.com} s.has_rdoc = false s.files = Dir.glob("lib/*.*") s.files += Dir.glob("stylesheets/**/*.*") s.files += Dir.glob("templates/**/*.*") s.homepage = %q{https://github.com/scottkellum/color-schemer} s.require_paths = ["lib"] s.rubyforge_project = %q{color-schemer} s.rubygems_version = %q{1.5.2} s.summary = %q{Create color schemes with ease.} s.add_dependency(%q, ["~> 0.0.2"]) s.license = "MIT" end compass-color-schemer/example/000077500000000000000000000000001230706721000167145ustar00rootroot00000000000000compass-color-schemer/example/Gemfile000066400000000000000000000001251230706721000202050ustar00rootroot00000000000000gem "sass", ">=3.2.0" gem "compass", ">=0.12.1" gem "compass-blend-modes", ">=0.0.2" compass-color-schemer/example/config.rb000066400000000000000000000003721230706721000205100ustar00rootroot00000000000000# testing local development require 'compass-blend-modes' add_import_path '../stylesheets' # testing installed gem # require 'color-schemer' # Set this to the root of your project when deployed: http_path = 'html' css_dir = 'css' sass_dir = 'sass' compass-color-schemer/example/html/000077500000000000000000000000001230706721000176605ustar00rootroot00000000000000compass-color-schemer/example/html/test.html000066400000000000000000000006101230706721000215220ustar00rootroot00000000000000 Color Schemer
compass-color-schemer/example/sass/000077500000000000000000000000001230706721000176655ustar00rootroot00000000000000compass-color-schemer/example/sass/test.scss000066400000000000000000000075761230706721000215600ustar00rootroot00000000000000@import "compass"; @import "color-schemer"; //////////////////////////////////////////// // SCHEME // Pick the base color for your scheme: $cs-primary: #198f91; // Select your scheme from the list and place it here: $cs-scheme: analogic; // mono, complement, triad, tetrad, analogic, accented-analogic // How distant do you want the hue offset to be: $cs-hue-offset: 40; // How distant do you want tints and shades to be from their base: $cs-brightness-offset: 10; $cs-color-model: ryb; // rgb, ryb $cs-colorblind: deuteranopia; // protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, monochromacy, amonochromacy // Do you want to “harmonize” your color scheme with photoshop-like blendmodes? // See Erica Schoonmaker's technique: http://methodandcraft.com/videos/creating-harmonious-color-schemes // Modes: // null (no effect), normal, multiply, lighten, darken, darkercolor, lightercolor, lineardodge, linearburn, // difference, screen, exclusion, overlay, softlight, hardlight, colordodge, colorburn, linearlight, // vividlight, pinlight, hardmix, colorblend, dissolve, divide, hue, luminosity, saturation, subtract $cs-harmonize-mode : null; // What is your common harmonizing color? $cs-harmonize-color : $cs-primary; // How strong do you want the effect to be? $cs-harmonize-amount : 10%; $primary : cs-primary(); $secondary : cs-secondary(); $tertiary : cs-tertiary(); $quadrary : cs-quadrary(); //////////////////////////////////////////// // Scheme @include cs-test( ($primary, $secondary, $tertiary, $quadrary) , $element: ".scheme" ); div { height: 40px; } //////////////////////////////////////////// // Harmonized $cs-harmonize-mode : multiply; $cs-harmonize-color : $cs-primary; $cs-harmonize-amount : 30%; $primary : cs-primary(); $secondary : cs-secondary(); $tertiary : cs-tertiary(); $quadrary : cs-quadrary(); @include cs-test( ($primary, $secondary, $tertiary, $quadrary) , $element: ".harmonized" ); //////////////////////////////////////////// // RYB @function cs-loop-ryb() { $list: (); @for $i from 0deg through 360deg / 8 { $color: ryb-adjust-hue(red, $i * 8); $list: append($list, $color); } @return $list; } @include cs-test( cs-loop-ryb() , $element: ".ryb" ); //////////////////////////////////////////// // RGB @function cs-loop-rgb() { $list: (); @for $i from 0deg through 360deg / 8 { $color: adjust-hue(red, $i * 8); $list: append($list, $color); } @return $list; } @include cs-test( cs-loop-rgb() , $element: ".rgb" ); //////////////////////////////////////////// // CMYK @function cs-loop() { $list: (); @for $i from 0deg through 360deg / 8 { $color: cs-cb(adjust-hue(red, $i * 8)); $list: append($list, $color); } @return $list; } @include cs-test( green , $element: ".cmyk" ); //////////////////////////////////////////// // CS-MIX @function cs-loop() { $list: (); @for $i from 0deg through 360deg / 8 { $color: cs-cb(adjust-hue(red, $i * 8)); $list: append($list, $color); } @return $list; } @include cs-test( blue , $element: ".cs-mix" ); //////////////////////////////////////////// // MIX @function cs-loop() { $list: (); @for $i from 0deg through 360deg / 8 { $color: cs-cb(adjust-hue(red, $i * 8)); $list: append($list, $color); } @return $list; } @include cs-test( blue , $element: ".mix" ); //////////////////////////////////////////// // Color Blind @function cs-loop-color-blind() { $list: (); @for $i from 0deg through 360deg / 8 { $color: cs-cb(adjust-hue(red, $i * 8)); $list: append($list, $color); } @return $list; } @include cs-test( cs-loop-color-blind() , $element: ".cb" ); //////////////////////////////////////////// html { height: 100%; } body { display: table; width: 100%; height: 100%; margin: 0; } div { // display: table-row !important; // height: auto !important; } compass-color-schemer/example/sass/unit-test.scss000066400000000000000000000004611230706721000225170ustar00rootroot00000000000000@import "color-schemer"; @if ryb-adjust-hue(green, 0) != green { @debug "ryb-adjust-hue fail"; @debug "ryb-adjust-hue(green, 0) was #{ryb-adjust-hue(green, 0)}"; } @if ryb-complement(green) != maroon { @debug "ryb-complement fail"; @debug "ryb-complement(green) was #{ryb-complement(green)}"; }compass-color-schemer/lib/000077500000000000000000000000001230706721000160275ustar00rootroot00000000000000compass-color-schemer/lib/color-schemer.rb000066400000000000000000000003151230706721000211150ustar00rootroot00000000000000require 'compass' require 'compass-blend-modes' Compass::Frameworks.register("color-schemer", :path => "#{File.dirname(__FILE__)}/..") module ColorSchemer VERSION = "0.2.8" DATE = "2011-09-15" endcompass-color-schemer/readme.md000066400000000000000000000122651230706721000170460ustar00rootroot00000000000000# Color Schemer [![Gem Version](https://badge.fury.io/rb/color-schemer.png)](http://badge.fury.io/rb/color-schemer) #### Color schemes made easy with Sass Color schemer is a robust color toolset for Sass. It expands on the existing [Sass color functions](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html) and adds things like RYB manipulation, * set-hue, * set-lightness, tint, shade and more. It also leverages these tools adding a full-featured color scheming tool that allows you to set one primary color and create whole color schemes around it. ## Install `gem install color-schemer` in your terminal. `require 'color-schemer'` to your Compass config file. `@import 'color-schemer'` to your stylesheet. ### Using Color Schemer ## New color functions * `tint($color, $amount)` — Mixes the color with white. Most designers are much more comfortable with this than `lighten()`. * `shade($color, $amount)` — Same as above but adds black. Designers might prefer it over `darken()`. * `equalize($color)` — Returns a fully saturated color. * `set-red($color, $red)` — Sets the amount of red in a color. * `set-green($color, $green)` — Sets the amount of green in a color. * `set-blue($color, $blue)` — Sets the amount of blue in a color. * `set-hue($color, $hue)` — Sets the hue of a color. * `set-saturation($color, $saturation)` — Sets the saturation of a color. * `set-lightness($color, $lightness)` — Sets the lightness of a color. * `set-alpha($color, $alpha)` — Sets the alpha of a color. #### RYB color functions Color schemer adds a number of functions to manipulate the red yellow and blue color wheel. Computer color is calculated in red green and blue which is more technically correct but artists and designers have been using RYB for ages to come up with better color relationships. * `ryb-hue($color)` — Will find the hue of a color on the RYB color wheel. * `set-ryb-hue($color, $hue)` — Sets the hue of a color based on the RYB color wheel. * `ryb-adjust-hue($color, $degrees)` — Will adjust the hue of a color around the RYB color wheel. * `ryb-complement($color)` — Finds the RYB complement of a color. * `ryb-invert($color)` — Inverts a color around the RYB color wheel. #### CMYK color function * `cmyk($cyan, $magenta, $yellow, $black)` — Define colors using CMYK values. ## Color scheming #### functions Drop these functions in wherever you want to use a color from the scheme. You can manipulate them further to make them work with your design. These should be considered a good starting point as you might want to tweak a little further. * `cs-primary()` — primary color. * `cs-secondary()` — secondary color. * `cs-tertiary()` — tertiary color. * `cs-quadrary()` — quadrary color. #### Variables You can change the result of the functions above by setting these global variables: * `$cs-primary` — set the primary color in a color scheme. * `$cs-scheme` — mono, complement, triad, tetrad, analogic, accented-analogic * `$cs-hue-offset` — Amount of hue adjustment in schemes. * `$cs-brightness-offset` — Amount of brightness adjustment in schemes. * `$cs-color-model` — rgb, ryb #### Blend modes Color schemer includes [SCSS Blend Modes](https://github.com/heygrady/scss-blend-modes) which allows you to do photoshop style blending of colors. #### Out of the box While you *can* use these functions out of the box you might want to fine-tune them a bit more. I suggest you create variables with them just in case you want to make adjustments/move things around instead of relying on these as-is. ```scss $primary: cs-primary(); $secondary: darken(cs-secondary(), 10%); // too light, darkening this up a bit. $tertiary: cs-tertiary(); $quadrary: cs-quadrary(); ``` ## Testing your color scheme Also included is a handy mixin to test out color schemes. Just include it with a list of your colors and it will add a bar of color above your page. ```scss @include cs-test(red green blue); ``` ## Inspiration * http://colorschemedesigner.com/ ## License Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)) and [Mason Wendell](http://thecodingdesigner.com/) ([@canarymason](http://twitter.com/canarymason)) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. compass-color-schemer/research.md000066400000000000000000000012021230706721000173720ustar00rootroot00000000000000# Research Links and inspiraiton ## General - [Never use black](http://ianstormtaylor.com/design-tip-never-use-black/) ## Color Mixing - [The Magical Tech Behind Paper For iPad's Color-Mixing Perfection](http://www.fastcompany.com/3002676/magical-tech-behind-paper-ipads-color-mixing-perfection) - [Color scheme designer](http://colorschemedesigner.com/) ## Color Blindness - [Why games need color blind modes – see SimCity with simulated color blindness](http://www.pcgamer.com/2013/02/01/why-games-need-color-blind-modes-see-simcity-with-simulated-color-blindness/) - [Sim Daltonism app](http://michelf.ca/projects/sim-daltonism/)compass-color-schemer/sache.json000066400000000000000000000006571230706721000172470ustar00rootroot00000000000000{ "name": "color-schemer", "description": "Color schemer is a robust color toolset for Sass. It expands on the existing Sass color functions and adds things like RYB manipulation, * set-hue, * set-lightness, tint, shade and more. It also leverages these tools adding a full-featured color scheming tool that allows you to set one primary color and create whole color schemes around it.", "tags": ["ui", "design", "colors"] } compass-color-schemer/stylesheets/000077500000000000000000000000001230706721000176355ustar00rootroot00000000000000compass-color-schemer/stylesheets/_color-schemer.scss000066400000000000000000000017231230706721000234360ustar00rootroot00000000000000@import "blend-modes"; // Defaults $cs-primary : #f00 !default; $cs-scheme : mono !default; // mono, complement, triad, tetrad, analogic, accented-analogic $cs-hue-offset : 30 !default; $cs-brightness-offset : false !default; $cs-color-model : rgb !default; // rgb, ryb $cs-colorblind : normal !default; $cs-harmonize-mode : null !default; $cs-harmonize-color : $cs-primary !default; $cs-harmonize-amount : 10% !default; // Partials @import "color-schemer/interpolation"; @import "color-schemer/cmyk"; @import "color-schemer/ryb"; @import "color-schemer/colorblind"; @import "color-schemer/equalize"; @import "color-schemer/mix"; @import "color-schemer/tint-shade"; @import "color-schemer/color-adjustments"; @import "color-schemer/harmonize"; @import "color-schemer/color-schemer"; @import "color-schemer/comparison"; @import "color-schemer/mixins"; // Tell other files that this is loaded. $color-schemer-loaded : true; compass-color-schemer/stylesheets/color-schemer.zip000066400000000000000000000153471230706721000231350ustar00rootroot00000000000000PK:x&C_color-schemer.scssUX I2R&*RN0 }08lHw58Iq\-]IQ46UE}fc^I.\.[`d3vk,+,fLM껷K%壬0Z 9r2 Tdrb<6!ݙR%J<4`tk2PKx>PKxyB!color-schemer/_color-schemer.scssUX I2R!_QVr0}W SxML>"-L)LYK'q˛]ힳ:>boF@m L aC42!jbJE A8Tbȫ,vT\d=TMODp} 54߶eY L< K^+,ZQsH[.~2|e*pKF _%3Рlzr5b/# ͖׫8[\BU@l<. ]w" p$N[%G`%pTciŬ3G8yuT#1.-/aTpBZHy7Z|NX0"`ԦlE_gj2u =;yjbD\rVZP/B"t{f>l&5 -Yִ_K}Irz$ӯC|ʃySm>Q@=tSYkveCYB鞆0_T2'$>W¬غށP<1y\ǝZ+$fKlϸ%ah<8R"5H(8$0/BN-J MAWTSO*$ABy*VjѠG=W _^4K%[OCZ PK PKMr&Ccolor-schemer/_comparison.scssUX I2Rr*R}P]K0}ϯ8Zܤ/> $7"{HU];'èl 3FG$\#1LV7Ѻ^(1&( ߵoɲn&B'-1wD`"kgh=;k4ڌ}qiI`Ze )8pHTuz~"Ju[*.9;q3{7YķuV۝GeQOڱ-C(l`4p\SS= GČZitRCo T *5\q}lV"C82I2}5Cq5q ZyK2 3Is86U[ :o _x(Z \G45j':ۤPp3d5J0]Uĸ31mLt#-h Pa}j=;Ee)}ߓܕ?|PKG)PKxyBcolor-schemer/_mix.scssUX I2R!_QN0E$t cDp @a0\ -roqy xQ,)r(Β/C(mڇ$e@r:aV$ua F<?Cع5|79uG|m9N[Pt곪oW8+UI|c9tqCqJ2RQ?(fa;{HJLA&m| AjLbj9)9JJ-KNK=_PKQPKxyBcolor-schemer/_mixins.scssUX I2R!_QRMo0 Wp:C<5UÀvȴTIin{ju"_vf?H_<>Av|mFlkZ>8O#Re_sÁ*,֦f§pȇ H3X![|tN4:p2HM9l }Dʮ5Jv\y woiXA/MIQ i|Un _EPv=:-3 j7dZy|N: GAFJ Y1O9n}@W(pD潡쑺>N}CPᐖXMs{*y /:JCf yĉ^ySw:6{!x+T/6 7m}y҆C%=`դ|pePK؏4PKxyBcolor-schemer/_ryb.scssUX I2R!_QVMo8W N3Aiij"^8a]E{ EGNӢS(!P绯/MWmsEgßI< m)B;_mڅ,2mY~kv܄vmKg:c-vף%}wNwItCso\7|:6a~lthݞ`^Z_o͆?]=u]CU3B}O~wA zY`ԭjHY7]ҧC^[Xm/j}ݍ51 yJ) *Ğ8!N3✸ .H $ސ$7Rᝁ  ! yDQ*#4"("IDE92oH(K e9er1xCByj@vrCAy(L< )ba(tT2B22yđc'x_;!uM&]9GfYFF٫:0b䇑 NT. q (a`Ag**#nFȌ2dD#0FXP axD?aTUBZDsk H =z1p.\Jzh0w=8۳wk=x؋V؂[n=kŠVh5B5@׃_huzp>⢥~>sZشuqVVTv]nnZ;V[5||M]rn[6K9sfXD>'7y7nV]].R:껺妷z{r &|U}:ɵ=,OWav;hATȅ%jX#uz=\y^D_ȣuߌq>')+B;a5~ }Br kٴP6U>qN9rEzrPͭ:Z>ސEVߵ[gF=>Rݔr6p7<Ҧ֛}ij{{уO~˱w$GO65NB_Lx_~< \*zJGeTlkr>n7'K7=拫W⏖S/'= PKiu3 PKxyBcolor-schemer/_tint-shade.scssUX I2R!_QA 0EspaAGIڙGĻ9[xs, 0:h$XR%*kw`%lSR}{D(PKqPK:x&Cmp<5 @_color-schemer.scssUXI2R&*RPK Mr&C @Acolor-schemer/UXI2Rr*RPKxyB 1 @color-schemer/_cmyk.scssUXI2R!_QPKxyBx>% @color-schemer/_color-adjustments.scssUXI2R!_QPKxyBCT1! @color-schemer/_color-schemer.scssUXI2R!_QPKxyB  @color-schemer/_colorblind.scssUXI2R!_QPKMr&CMi  @color-schemer/_comparison.scssUXI2Rr*RPKxyBVw @/ color-schemer/_equalize.scssUXI2R!_QPKxyBG)! @F color-schemer/_interpolation.scssUXI2R!_QPKxyBQ @] color-schemer/_mix.scssUXI2R!_QPKxyB؏4 @color-schemer/_mixins.scssUXI2R!_QPKxyBiu3  @color-schemer/_ryb.scssUXI2R!_QPKxyBq @color-schemer/_tint-shade.scssUXI2R!_QPK Pcompass-color-schemer/stylesheets/color-schemer/000077500000000000000000000000001230706721000223775ustar00rootroot00000000000000compass-color-schemer/stylesheets/color-schemer/_cmyk.scss000066400000000000000000000006341230706721000244010ustar00rootroot00000000000000@function cmyk($cyan, $magenta, $yellow, $black) { // Get the color values out of white $cyan : mix(cyan , white, $cyan ); $magenta : mix(magenta, white, $magenta); $yellow : mix(yellow , white, $yellow ); $black : mix(black , white, $black ); // Subtract the colors from white $color: white - invert($cyan) - invert($magenta) - invert($yellow) - invert($black); @return $color; }compass-color-schemer/stylesheets/color-schemer/_color-adjustments.scss000066400000000000000000000014761230706721000271200ustar00rootroot00000000000000// RGB functions @function set-red($color, $red) { @return rgba($red, green($color), blue($color), alpha($color)); } @function set-green($color, $green) { @return rgba(red($color), $green, blue($color), alpha($color)); } @function set-blue($color, $blue) { @return rgba(red($color), green($color), $blue, alpha($color)); } // HSL Functions @function set-hue($color, $hue) { @return hsla($hue, saturation($color), lightness($color), alpha($color)); } @function set-saturation($color, $saturation) { @return hsla(hue($color), $saturation, lightness($color), alpha($color)); } @function set-lightness($color, $lightness) { @return hsla(hue($color), saturation($color), $lightness, alpha($color)); } @function set-alpha($color, $alpha) { @return hsla(hue($color), saturation($color), lightness($color), $alpha); }compass-color-schemer/stylesheets/color-schemer/_color-schemer.scss000066400000000000000000000177161230706721000262110ustar00rootroot00000000000000// brightness and hue offsets are based on the lightness and saturation of the color // unless defined otherwise. @function cs-brightness-offset($cs-brightness-offset) { @if $cs-brightness-offset == false { // find the difference between lightness @return lightness($cs-primary) - lightness(invert($cs-primary)); } @else { @return $cs-brightness-offset; } } // Harmonized or Unaltered Color @function clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount) { @if $cs-harmonize-mode != null { @return cs-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { @return $color; } } // Primary color @function cs-primary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset, $cs-harmonize-mode:$cs-harmonize-mode, $cs-harmonize-color:$cs-harmonize-color, $cs-harmonize-amount:$cs-harmonize-amount) { @return clean-or-harmonize($cs-primary, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // Secondary color scheme @function cs-secondary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset, $cs-harmonize-mode:$cs-harmonize-mode, $cs-harmonize-color:$cs-harmonize-color, $cs-harmonize-amount:$cs-harmonize-amount) { $cs-brightness-offset: cs-brightness-offset($cs-brightness-offset); // mono @if $cs-scheme == mono { @if $cs-brightness-offset < 0 { $color: lighten($cs-primary, abs($cs-brightness-offset)); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: darken($cs-primary, abs($cs-brightness-offset)); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // complement @if $cs-scheme == complement { @if $cs-color-model == ryb { $color: ryb-complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // triad @if $cs-scheme == triad { @if $cs-color-model == ryb { $color: ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: adjust-hue(complement($cs-primary), $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // tetrad @if $cs-scheme == tetrad { @if $cs-color-model == ryb { $color: ryb-adjust-hue($cs-primary, $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: adjust-hue($cs-primary, $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // analogic @if $cs-scheme == analogic or $cs-scheme == accented-analogic { @if $cs-color-model == ryb { $color: ryb-adjust-hue($cs-primary, $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: adjust-hue($cs-primary, $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } } // Tertiary color scheme @function cs-tertiary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset, $cs-harmonize-mode:$cs-harmonize-mode, $cs-harmonize-color:$cs-harmonize-color, $cs-harmonize-amount:$cs-harmonize-amount) { $cs-brightness-offset: cs-brightness-offset($cs-brightness-offset); // mono @if $cs-scheme == mono { $color: mix(cs-primary(), cs-secondary()); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // complement @if $cs-scheme == complement { $color: equalize($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // triad @if $cs-scheme == triad { @if $cs-color-model == ryb { $color: ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset * -1); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: adjust-hue(complement($cs-primary), $cs-hue-offset * -1); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // tetrad @if $cs-scheme == tetrad { @if $cs-color-model == ryb { $color: ryb-complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // analogic @if $cs-scheme == analogic or $cs-scheme == accented-analogic { @if $cs-color-model == ryb { $color: ryb-adjust-hue($cs-primary, $cs-hue-offset * -1); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: adjust-hue($cs-primary, $cs-hue-offset * -1); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // accented-analogic @if $cs-scheme == accented-analogic { @if $cs-color-model == ryb { $color: ryb-complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } } // Quadrary color scheme @function cs-quadrary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset, $cs-harmonize-mode:$cs-harmonize-mode, $cs-harmonize-color:$cs-harmonize-color, $cs-harmonize-amount:$cs-harmonize-amount) { $cs-brightness-offset: cs-brightness-offset($cs-brightness-offset); // mono @if $cs-scheme == mono { $color: equalize($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // complement @if $cs-scheme == complement { $color: equalize(ryb-complement($cs-primary)); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // triad @if $cs-scheme == triad { $color: equalize($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // tetrad @if $cs-scheme == tetrad { @if $cs-color-model == ryb { $color: ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: adjust-hue(complement($cs-primary), $cs-hue-offset); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } // analogic @if $cs-scheme == analogic { $color: equalize($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } // accented-analogic @if $cs-scheme == accented-analogic { @if $cs-color-model == ryb { $color: ryb-complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } @else { $color: complement($cs-primary); @return clean-or-harmonize($color, $cs-harmonize-color, $cs-harmonize-mode, $cs-harmonize-amount); } } } compass-color-schemer/stylesheets/color-schemer/_colorblind.scss000066400000000000000000000007601230706721000255650ustar00rootroot00000000000000@function cs-colorblind($color, $mode: $cs-colorblind) { // Refrence: http://www.w3.org/TR/AERT#color-contrast // Deuteranopia @if $mode == deuteranopia { @return $color; } // Protanopia @if $mode == protanopia { @return $color; } // Tritanopia @if $mode == tritanopia { @return $color; } // Return color if no color blind mode. @else { @return $color; } } @function cs-cb($color, $mode: $cs-colorblind) { @return cs-colorblind($color, $mode); }compass-color-schemer/stylesheets/color-schemer/_comparison.scss000066400000000000000000000007741230706721000256150ustar00rootroot00000000000000////////////////////////////// // Color Is Dark // // Checks to see if the input color is a dark color taking into account both lightness and hue. // Suitable for determining, for instance, if a background should have a dark or light text color. // @return true/false (boolean) ////////////////////////////// @function cs-is-dark($color) { @if (lightness($color) < 60% and (hue($color) >= 210 or hue($color) <= 27)) or (lightness($color) <= 32%) { @return true; } @else { @return false; } }compass-color-schemer/stylesheets/color-schemer/_equalize.scss000066400000000000000000000003601230706721000252510ustar00rootroot00000000000000// Color equalize credit to Mason Wendell: // https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass @function equalize($color) { @return hsl(hue($color), 100%, 50%); }compass-color-schemer/stylesheets/color-schemer/_harmonize.scss000066400000000000000000000051171230706721000254330ustar00rootroot00000000000000@function cs-harmonize($background, $foreground: $cs-harmonize-color, $mode: $cs-harmonize-mode, $amount: $cs-harmonize-amount) { $blend: null; @if ($mode == normal) { $blend: blend-normal($foreground, $background); } @else if ($mode == multiply) { $blend: blend-multiply($foreground, $background); } @else if ($mode == lighten) { $blend: blend-lighten($foreground, $background); } @else if ($mode == darken) { $blend: blend-darken($foreground, $background); } @else if ($mode == darkercolor) { $blend: blend-darkercolor($foreground, $background); } @else if ($mode == lightercolor) { $blend: blend-lightercolor($foreground, $background); } @else if ($mode == lineardodge) { $blend: blend-lineardodge($foreground, $background); } @else if ($mode == linearburn) { $blend: blend-linearburn($foreground, $background); } @else if ($mode == difference) { $blend: blend-difference($foreground, $background); } @else if ($mode == screen) { $blend: blend-screen($foreground, $background); } @else if ($mode == exclusion) { $blend: blend-exclusion($foreground, $background); } @else if ($mode == overlay) { $blend: blend-overlay($foreground, $background); } @else if ($mode == softlight) { $blend: blend-softlight($foreground, $background); } @else if ($mode == hardlight) { $blend: blend-hardlight($foreground, $background); } @else if ($mode == colordodge) { $blend: blend-colordodge($foreground, $background); } @else if ($mode == colorburn) { $blend: blend-colorburn($foreground, $background); } @else if ($mode == linearlight) { $blend: blend-linearlight($foreground, $background); } @else if ($mode == vividlight) { $blend: blend-vividlight($foreground, $background); } @else if ($mode == pinlight) { $blend: blend-pinlight($foreground, $background); } @else if ($mode == hardmix) { $blend: blend-hardmix($foreground, $background); } @else if ($mode == colorblend) { $blend: blend-colorblend($foreground, $background); } @else if ($mode == dissolve) { $blend: blend-dissolve($foreground, $background); } @else if ($mode == divide) { $blend: blend-divide($foreground, $background); } @else if ($mode == hue) { $blend: blend-hue($foreground, $background); } @else if ($mode == luminosity) { $blend: blend-luminosity($foreground, $background); } @else if ($mode == saturation) { $blend: blend-saturation($foreground, $background); } @else if ($mode == subtract) { $blend: blend-subtract($foreground, $background); } $mixed: mix($blend, $background, $amount); @return $mixed; } compass-color-schemer/stylesheets/color-schemer/_interpolation.scss000066400000000000000000000017321230706721000263250ustar00rootroot00000000000000@function cs-interpolate($value, $units: 360, $stops: $ryb-interpolation) { // Loop numbers out of scale back into the scale. @while $value >= 360 { $value: $value - 360; } @while $value < 0 { $value: $value + 360; } // Find out how many units in each stop $cs-color-deg: $units / length($stops); // Count through stops $cs-deg-count: $cs-color-deg; $cs-stop-count: 1; // Add the first stop to the end so it will be // interpolated with the last stop. $stops: append($stops, nth($stops, 1)); // Start interpolating @for $i from 0 through length($stops) { @if $value < $cs-deg-count { @return cs-mix(nth($stops, $cs-stop-count + 1), nth($stops, $cs-stop-count), abs(percentage(($cs-deg-count - $value) / $cs-color-deg) - 100 ), $model: rgb); } // If the value is not in this stop, loop up to another stop. @else { $cs-deg-count: $cs-deg-count + $cs-color-deg; $cs-stop-count: $cs-stop-count + 1 } } } compass-color-schemer/stylesheets/color-schemer/_mix.scss000066400000000000000000000026001230706721000242260ustar00rootroot00000000000000@function cs-mix($color1, $color2, $percent: 50%, $model: $cs-color-model) { $decimal : abs($percent - 100%) / 100%; $hue-offset : (); @if $model == rgb { $hue-offset : (hue($color1) - hue($color2)) * $decimal; @if (hue($color1) - hue($color2)) * .5 < -90deg { $hue-offset : (hue($color1) + 360deg - hue($color2)) * $decimal; } @if (hue($color1) - hue($color2)) * .5 > 90deg { $hue-offset : (hue($color1) - 360deg - hue($color2)) * $decimal; } } @if $model == ryb { $hue-offset : (ryb-hue($color1) - ryb-hue($color2)) * $decimal; @if (ryb-hue($color1) - ryb-hue($color2)) * .5 < -90deg { $hue-offset : (ryb-hue($color1) + 360deg - ryb-hue($color2)) * $decimal; } @if (ryb-hue($color1) - ryb-hue($color2)) * .5 > 90deg { $hue-offset : (ryb-hue($color1) - 360deg - ryb-hue($color2)) * $decimal; } } $saturation-offset : (saturation($color1) - saturation($color2)) * $decimal; $lightness-offset : (lightness($color1) - lightness($color2)) * $decimal; @if $model == ryb { $color1: ryb-adjust-hue($color1, $hue-offset * -1); } @else { $color1: adjust-hue($color1, $hue-offset * -1); } $color1: set-saturation($color1, saturation($color1) - $saturation-offset); $color1: set-lightness($color1, lightness($color1) - $lightness-offset); @return $color1; }compass-color-schemer/stylesheets/color-schemer/_mixins.scss000066400000000000000000000014641230706721000247470ustar00rootroot00000000000000//////////////////////////////////////////// // From Jina Bolton and Eric Meyer -- http://codepen.io/jina/pen/iosjp @function cs-stripes($position, $colors) { $colors: if(type-of($colors) != 'list', compact($colors), $colors); $gradient: (); $width: 100% / length($colors); @for $i from 1 through length($colors) { $pop: nth($colors,$i); $new: $pop ($width * ($i - 1)), $pop ($width * $i); $gradient: join($gradient, $new, comma); } @return linear-gradient($position, $gradient); } //////////////////////////////////////////// // Color tester @mixin cs-test($colors, $height: 2em, $element: "body:before") { #{$element} { content: ""; display: block; height: $height; @include background(cs-stripes(left, ($colors))); position: relative; z-index: 999999999999; } }compass-color-schemer/stylesheets/color-schemer/_ryb.scss000066400000000000000000000064631230706721000242400ustar00rootroot00000000000000$ryb-interpolation: #FF0000 #FF4900 #FF7400 #FF9200 #FFAA00 #FFBF00 #FFD300 #FFE800 #FFFF00 #CCF600 #9FEE00 #67E300 #00CC00 #00AF64 #009999 #0B61A4 #1240AB #1B1BB3 #3914AF #530FAD #7109AA #A600A6 #CD0074 #E40045; // RYB color interpolation @function find-ryb($hue) { // remove units on $hue @if unit($hue) == deg { $hue: $hue / 1deg; } // return an interpolated hue @return hue(cs-interpolate($hue)); } // Find the RYB hue instead of RGB hue of a color. // map of the RYB offset $ryb-offset: 0 1 2 3 5 6 7 8 9 10 11 13 14 15 16 17 18 19 19 20 21 21 22 23 23 24 25 25 26 27 27 28 28 29 29 30 30 31 31 32 32 32 33 33 34 34 35 35 35 36 36 37 37 37 38 38 38 39 39 40 40 40 41 41 41 42 42 42 43 43 43 44 44 44 45 45 45 46 46 46 47 47 47 47 48 48 48 49 49 49 50 50 50 51 51 51 52 52 52 53 53 53 54 54 54 55 55 55 56 56 56 57 57 57 58 58 59 59 59 60 60 61 61 62 63 63 64 65 65 66 67 68 68 69 70 70 71 72 72 73 73 74 75 75 76 77 77 78 79 79 80 81 82 82 83 84 85 86 87 88 88 89 90 91 92 93 95 96 98 100 102 104 105 107 109 111 113 115 116 118 120 122 125 127 129 131 134 136 138 141 143 145 147 150 152 154 156 158 159 161 163 165 166 168 170 171 173 175 177 178 180 182 184 185 187 189 191 192 194 196 198 199 201 203 205 206 207 208 209 210 212 213 214 215 216 217 218 219 220 221 222 223 224 226 227 228 229 230 232 233 234 235 236 238 239 240 241 242 243 244 245 246 247 248 249 250 251 251 252 253 254 255 256 257 257 258 259 260 260 261 262 263 264 264 265 266 267 268 268 269 270 271 272 273 274 274 275 276 277 278 279 280 282 283 284 286 287 289 290 292 293 294 296 297 299 300 302 303 305 307 309 310 312 314 316 317 319 321 323 324 326 327 328 329 330 331 332 333 334 336 337 338 339 340 341 342 343 344 345 347 348 349 350 352 353 354 355 356 358 359 360; // loop through the map to find the matching hue. @function ryb-hue($color) { @for $i from 1 through length($ryb-offset) { @if nth($ryb-offset, $i) > hue($color) { @return $i - 2deg; } } } // Changes the hue of a color. @function ryb-adjust-hue($color, $degrees) { // Convert precentag to degrees. @if unit($degrees) == "%" { $degrees: 360 * ($degrees / 100%); } // Start at the current hue and loop in the adjustment. $hue-adjust: (ryb-hue($color) + $degrees) / 1deg; @return hsl(hue(cs-interpolate($hue-adjust)), saturation($color), lightness($color)); } @function ryba($red, $yellow, $blue, $alpha) { $hue: 0; $saturation: 0; $lightness: percentage(($red + $yellow + $blue) / (255 * 3)); @if $red == $yellow and $yellow == $blue { @return hsla(0, 0, $lightness, $alpha); } @if $red >= $yellow and $red >= $blue { $hue: 0; } @elseif $yellow >= $red and $yellow >= $blue { $hue: 360 / 3; } @elseif $blue >= $red and $blue >= $yellow { $hue: 360 / 3 * 2; } @return hsla(hue(cs-interpolate($hue)), 100%, 50%, 1); } @function ryb($red, $yellow, $blue) { @return ryba($red, $yellow, $blue, 1); } @function set-ryb-hue($color, $hue) { @return hsla(hue(cs-interpolate($hue)), saturation($color), lightness($color), alpha($color)); } // Returns the complement of a color. @function ryb-complement($color) { @return ryb-adjust-hue($color, 180deg); } // Returns the inverse of a color. @function ryb-invert($color) { @return ryb-adjust-hue(hsl(hue($color), saturation(invert($color)), lightness(invert($color))), 180deg); }compass-color-schemer/stylesheets/color-schemer/_tint-shade.scss000066400000000000000000000003501230706721000254710ustar00rootroot00000000000000// Add percentage of white to a color @function tint($color, $percent) { @return mix(white, $color, $percent); } // Add percentage of black to a color @function shade($color, $percent) { @return mix(black, $color, $percent); }