Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

start to add color functions

  • Loading branch information...
commit ee77c602cedd16ed1204d1488c23aa714d0f92e2 1 parent 67b54b4
@ndp authored
View
3  README.markdown
@@ -85,11 +85,14 @@ To "mix these in", use the "macro" key:
## Todo
+* Support "has"
* Support more than one Macro
* Some color math
+* Fix license
* Better name
+
## Motivation
This project comes from my frustration of trying to build standalone Javascript widgets. Web
View
14 names
@@ -0,0 +1,14 @@
+names:
+css
+stylesheet
+sheet
+js
+javascript
+script
+styling
+sass
+dynamic
+csscript
+css
+sscijs
+jssstylescript
View
5 spec/csster_spec.js
@@ -45,10 +45,11 @@ describe("Csster", function() {
it('should render raw number as "px" value', function() {
expect(Csster.formatProperty('height', 12)).toEqual("height: 12px;\r");
});
-
-
});
+ // :hover selectors (no space between pieces)
+ // > blah direct decendent
+
describe('#formatRules', function() {
it("should output style rule from element name", function() {
View
244 spec/functions_spec.js
@@ -0,0 +1,244 @@
+describe('color functions', function() {
+
+ describe('toHex string', function() {
+ beforeEach(function() { });
+
+ it('should noop if hex passed in', function() {
+ expect("#123456".toHexColor()).toEqual('#123456');
+ });
+ it('should convert websafe color to hex', function() {
+ expect("#369".toHexColor()).toEqual('#336699');
+ });
+ it('should convert black to hex', function() {
+ expect("black".toHexColor()).toEqual('#000000');
+ });
+ it('should convert white to hex', function() {
+ expect("white".toHexColor()).toEqual('#ffffff');
+ });
+ it('should convert olive to hex', function() {
+ expect("olive".toHexColor()).toEqual('#808000');
+ });
+ });
+
+ describe('parsing hex string', function() {
+
+ var sample = "#123456";
+
+ it('should set red', function() {
+ expect(sample.toRGB()[0]).toEqual(18);
+ });
+ it('should set green', function() {
+ expect(sample.toRGB()[1]).toEqual(52);
+ });
+ it('should set blue', function() {
+ expect(sample.toRGB()[2]).toEqual(86);
+ });
+ it('should return red', function() {
+ expect(sample.red()).toEqual(18);
+ });
+ it('should return red', function() {
+ expect(sample.green()).toEqual(52);
+ });
+ it('should return red', function() {
+ expect(sample.blue()).toEqual(86);
+ });
+ });
+
+ describe('toHSL', function() {
+ it('should convert white to hsl', function() {
+ expect('#ffffff'.toHSL()).toEqual([0,0,100]);
+ });
+ it('should convert black to hsl', function() {
+ expect('#000000'.toHSL()).toEqual([0,0,0]);
+ });
+ it('should convert red to hsl', function() {
+ expect('#ff0000'.toHSL()).toEqual([0,100,50]);
+ });
+ it('should convert green to hsl', function() {
+ expect('#00ff00'.toHSL()).toEqual([120,100,50]);
+ });
+ it('should convert blue to hsl', function() {
+ expect('#0000ff'.toHSL()).toEqual([240,100,50]);
+ });
+ });
+
+ describe('hslToHtmlColor', function() {
+ it('should convert white to hsl and back', function() {
+ var hsl = '#ffffff'.toHSL();
+ expect(hslToHtmlColor.apply(null,hsl)).toEqual('#ffffff');
+ });
+ it('should convert black to hsl and back', function() {
+ var hsl = '#000'.toHSL();
+ expect(hslToHtmlColor.apply(null,hsl).toHexColor()).toEqual('#000000');
+ });
+ it('should convert blue to hsl and back', function() {
+ var hsl = '#0000ff'.toHSL();
+ expect(hslToHtmlColor.apply(null,hsl).toHexColor()).toEqual('#0000ff');
+ });
+ });
+
+ describe('lighten', function() {
+ it('should do nothing with zero', function() {
+ expect('#800'.lighten(0)).toEqual('#880000');
+ });
+ it('should set to white with 100', function() {
+ expect('#800'.lighten(100)).toEqual('#000000');
+ });
+ it('should do nothing if already white', function() {
+ expect('#fff'.lighten(20)).toEqual('#fff');
+ });
+ it('should lighten 20%', function() {
+ expect('#880000'.lighten(20)).toEqual('#ee0000');
+ });
+ });
+
+});
+
+
+//
+//it('should lighten_tests_bounds', function() {
+// assert_error_message("Amount -0.001 must be between 0% and 100% for `lighten'",
+// "lighten(#123, -0.001)")
+// assert_error_message("Amount 100.001 must be between 0% and 100% for `lighten'",
+// "lighten(#123, 100.001)")
+//});
+//
+//it('should lighten_tests_types', function() {
+// assert_error_message("\"foo\" is not a color for `lighten'", "lighten(\"foo\", 10%)")
+// assert_error_message("\"foo\" is not a number for `lighten'", "lighten(#fff, \"foo\")")
+//});
+//
+//it('should darken', function() {
+// expect(evaluate("darken(hsl(25, 100, 80), 30%)")).toEqual('#ff6a00');
+// expect(evaluate("darken(#800, 20%)")).toEqual('#220000');
+// assert_equal("black", evaluate("darken(#000, 20%)"))
+// assert_equal("black", evaluate("darken(#800, 100%)"))
+// expect(evaluate("darken(#800, 0%)")).toEqual('#880000');
+// assert_equal("rgba(34, 0, 0, 0.5)", evaluate("darken(rgba(136, 0, 0, 0.5), 20%)"))
+//});
+//
+//it('should darken_tests_bounds', function() {
+// assert_error_message("Amount -0.001 must be between 0% and 100% for `darken'",
+// "darken(#123, -0.001)")
+// assert_error_message("Amount 100.001 must be between 0% and 100% for `darken'",
+// "darken(#123, 100.001)")
+//});
+//
+//it('should darken_tests_types', function() {
+// assert_error_message("\"foo\" is not a color for `darken'", "darken(\"foo\", 10%)")
+// assert_error_message("\"foo\" is not a number for `darken'", "darken(#fff, \"foo\")")
+//});
+//
+//it('should saturate', function() {
+// expect(evaluate("saturate(hsl(120, 30, 90), 20%)")).toEqual('#d9f2d9');
+// expect(evaluate("saturate(#855, 20%)")).toEqual('#9e3f3f');
+// assert_equal("black", evaluate("saturate(#000, 20%)"))
+// assert_equal("white", evaluate("saturate(#fff, 20%)"))
+// expect(evaluate("saturate(#8a8, 100%)")).toEqual('#33ff33');
+// expect(evaluate("saturate(#8a8, 0%)")).toEqual('#88aa88');
+// assert_equal("rgba(158, 63, 63, 0.5)", evaluate("saturate(rgba(136, 85, 85, 0.5), 20%)"))
+//});
+//
+//it('should saturate_tests_bounds', function() {
+// assert_error_message("Amount -0.001 must be between 0% and 100% for `saturate'",
+// "saturate(#123, -0.001)")
+// assert_error_message("Amount 100.001 must be between 0% and 100% for `saturate'",
+// "saturate(#123, 100.001)")
+//});
+//
+//it('should saturate_tests_types', function() {
+// assert_error_message("\"foo\" is not a color for `saturate'", "saturate(\"foo\", 10%)")
+// assert_error_message("\"foo\" is not a number for `saturate'", "saturate(#fff, \"foo\")")
+//});
+//
+//it('should desaturate', function() {
+// expect(evaluate("desaturate(hsl(120, 30, 90), 20%)")).toEqual('#e3e8e3');
+// expect(evaluate("desaturate(#855, 20%)")).toEqual('#726b6b');
+// assert_equal("black", evaluate("desaturate(#000, 20%)"))
+// assert_equal("white", evaluate("desaturate(#fff, 20%)"))
+// expect(evaluate("desaturate(#8a8, 100%)")).toEqual('#999999');
+// expect(evaluate("desaturate(#8a8, 0%)")).toEqual('#88aa88');
+// assert_equal("rgba(114, 107, 107, 0.5)", evaluate("desaturate(rgba(136, 85, 85, 0.5), 20%)"))
+//});
+//
+//it('should desaturate_tests_bounds', function() {
+// assert_error_message("Amount -0.001 must be between 0% and 100% for `desaturate'",
+// "desaturate(#123, -0.001)")
+// assert_error_message("Amount 100.001 must be between 0% and 100% for `desaturate'",
+// "desaturate(#123, 100.001)")
+//});
+//
+//it('should desaturate_tests_types', function() {
+// assert_error_message("\"foo\" is not a color for `desaturate'", "desaturate(\"foo\", 10%)")
+// assert_error_message("\"foo\" is not a number for `desaturate'", "desaturate(#fff, \"foo\")")
+//});
+//
+//it('should adjust_hue', function() {
+// expect(evaluate("adjust-hue(hsl(120, 30, 90), 60deg)")).toEqual('#deeded');
+// expect(evaluate("adjust-hue(hsl(120, 30, 90), -60deg)")).toEqual('#ededde');
+// expect(evaluate("adjust-hue(#811, 45deg)")).toEqual('#886a11');
+// assert_equal("black", evaluate("adjust-hue(#000, 45deg)"))
+// assert_equal("white", evaluate("adjust-hue(#fff, 45deg)"))
+// expect(evaluate("adjust-hue(#8a8, 360deg)")).toEqual('#88aa88');
+// expect(evaluate("adjust-hue(#8a8, 0deg)")).toEqual('#88aa88');
+// assert_equal("rgba(136, 106, 17, 0.5)", evaluate("adjust-hue(rgba(136, 17, 17, 0.5), 45deg)"))
+//});
+//
+//it('should adjust_hue_tests_types', function() {
+// assert_error_message("\"foo\" is not a color for `adjust-hue'", "adjust-hue(\"foo\", 10%)")
+// assert_error_message("\"foo\" is not a number for `adjust-hue'", "adjust-hue(#fff, \"foo\")")
+//});
+//
+//it('should mix', function() {
+// expect(evaluate("mix(#f00, #00f)")).toEqual('#7f007f');
+// expect(evaluate("mix(#f00, #0ff)")).toEqual('#7f7f7f');
+// expect(evaluate("mix(#f70, #0aa)")).toEqual('#7f9055');
+// expect(evaluate("mix(#f00, #00f, 25%)")).toEqual('#3f00bf');
+// assert_equal("rgba(63, 0, 191, 0.75)", evaluate("mix(rgba(255, 0, 0, 0.5), #00f)"))
+// assert_equal("red", evaluate("mix(#f00, #00f, 100%)"))
+// assert_equal("blue", evaluate("mix(#f00, #00f, 0%)"))
+// assert_equal("rgba(255, 0, 0, 0.5)", evaluate("mix(#f00, transparentize(#00f, 1))"))
+// assert_equal("rgba(0, 0, 255, 0.5)", evaluate("mix(transparentize(#f00, 1), #00f)"))
+// assert_equal("red", evaluate("mix(#f00, transparentize(#00f, 1), 100%)"))
+// assert_equal("blue", evaluate("mix(transparentize(#f00, 1), #00f, 0%)"))
+// assert_equal("rgba(0, 0, 255, 0)", evaluate("mix(#f00, transparentize(#00f, 1), 0%)"))
+// assert_equal("rgba(255, 0, 0, 0)", evaluate("mix(transparentize(#f00, 1), #00f, 100%)"))
+//});
+//
+//it('should mix_tests_types', function() {
+// assert_error_message("\"foo\" is not a color for `mix'", "mix(\"foo\", #f00, 10%)")
+// assert_error_message("\"foo\" is not a color for `mix'", "mix(#f00, \"foo\", 10%)")
+// assert_error_message("\"foo\" is not a number for `mix'", "mix(#f00, #baf, \"foo\")")
+//});
+//
+//it('should mix_tests_bounds', function() {
+// assert_error_message("Weight -0.001 must be between 0% and 100% for `mix'",
+// "mix(#123, #456, -0.001)")
+// assert_error_message("Weight 100.001 must be between 0% and 100% for `mix'",
+// "mix(#123, #456, 100.001)")
+//});
+//
+//it('should grayscale', function() {
+// expect(evaluate("grayscale(#abc)")).toEqual('#bbbbbb');
+// assert_equal("gray", evaluate("grayscale(#f00)"))
+// assert_equal("gray", evaluate("grayscale(#00f)"))
+// assert_equal("white", evaluate("grayscale(white)"))
+// assert_equal("black", evaluate("grayscale(black)"))
+//});
+//
+//def tets_grayscale_tests_types
+// assert_error_message("\"foo\" is not a color for `grayscale'", "grayscale(\"foo\")")
+//});
+//
+//it('should complement', function() {
+// expect(evaluate("complement(#abc)")).toEqual('#ccbbaa');
+// assert_equal("aqua", evaluate("complement(red)"))
+// assert_equal("red", evaluate("complement(aqua)"))
+// assert_equal("white", evaluate("complement(white)"))
+// assert_equal("black", evaluate("complement(black)"))
+//});
+//
+//def tets_complement_tests_types
+// assert_error_message("\"foo\" is not a color for `complement'", "complement(\"foo\")")
+//});
+//
View
2  spec_runner.html
@@ -9,10 +9,12 @@
<style type="text/css"></style>
<!-- include source files here... -->
<script type="text/javascript" src="src/csster.js"></script>
+ <script type="text/javascript" src="src/function/color.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/spec_helper.js"></script>
<script type="text/javascript" src="spec/csster_spec.js"></script>
+ <script type="text/javascript" src="spec/functions_spec.js"></script>
</head>
<body>
View
1  src/csster.js
@@ -57,6 +57,7 @@ var Csster = {
'border-left-color',
'border-left-style',
'border-left-width',
+ 'border-radius',
'border-right',
'border-right-color',
'border-right-style',
View
152 src/function/color.js
@@ -0,0 +1,152 @@
+/*
+ Use a singleton cache of all color strings we see.
+ Each key points to a structure, which can have hex, rgb, etc. values in it.
+ */
+var ColorCache = {}; // used for storing values associated with a string
+
+var HTML4_COLORS = {
+ 'black' : '#000000',
+ 'silver' : '#c0c0c0',
+ 'gray' : '#808080',
+ 'white' : '#ffffff',
+ 'maroon' : '#800000',
+ 'red' : '#ff0000',
+ 'purple' : '#800080',
+ 'fuchsia': '#ff00ff',
+ 'green' : '#008000',
+ 'lime' : '#00ff00',
+ 'olive' : '#808000',
+ 'yellow' : '#ffff00',
+ 'navy' : '#000080',
+ 'blue' : '#0000ff',
+ 'teal' : '#008080',
+ 'aqua' : '#00ffff'
+};
+
+
+String.prototype.colorCache = function() {
+ if (!ColorCache[this]) ColorCache[this] = {};
+ return ColorCache[this];
+};
+String.prototype.toHexColor = function() {
+ if (this[0] == '#' && this.length == 7) {
+ this.colorCache()['hex'] = '' + this;
+ } else if (this[0] == '#' && this.length == 4) {
+ this.colorCache()['hex'] = '#' + this[1] + this[1] + this[2] + this[2] + this[3] + this[3];
+ } else {
+ this.colorCache()['hex'] = HTML4_COLORS[this];
+ }
+ return this.colorCache()['hex'];
+};
+
+String.prototype.toRGB = function() {
+ var cache = this.colorCache();
+ if (cache.rgb) return cache.rgb;
+ var h = this.toHexColor();
+ cache.rgb = [parseInt(h.substr(1, 2), 16),parseInt(h.substr(3, 2), 16),parseInt(h.substr(5, 2), 16)];
+ return cache.rgb;
+};
+
+String.prototype.red = function() {
+ return this.toRGB()[0];
+};
+String.prototype.green = function() {
+ return this.toRGB()[1];
+};
+String.prototype.blue = function() {
+ return this.toRGB()[2];
+};
+String.prototype.lighten = function(percent) {
+ var hsl = this.toHSL();
+ var newHSL = [hsl[0],hsl[1],Math.min(100, hsl[2] + percent)];
+ return hslToHtmlColor(newHSL);
+};
+
+
+// [0..360, 0..100, 0.100]
+String.prototype.toHSL = function() {
+ var rgb = this.toRGB();
+ var r = this.red() / 255,g = this.green() / 255,b = this.blue() / 255;
+ var max = Math.max(r, g, b), min = Math.min(r, g, b);
+ var h, s, l = (max + min) / 2;
+
+ if (max == min) {
+ h = s = 0; // achromatic
+ } else {
+ var d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+
+ var cache = this.colorCache();
+ cache.hsl = [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
+ return cache.hsl;
+};
+
+
+function hslToHtmlColor(h, s, l) {
+
+ var hsl2rgb = function(h, s, l) {
+ if (isArray(h)) {
+ l = h[2] || 0;
+ s = h[1] || 0;
+ h = h[0] || 0;
+ }
+ s = s / 100;
+ l = l / 100;
+ h = h % 360;
+
+ var r,g,b;
+ if (h < 120) {
+ r = (120 - h) / 60;
+ g = h / 60;
+ b = 0;
+ } else {
+ if (h < 240) {
+ r = 0;
+ g = (240 - h) / 60;
+ b = (h - 120) / 60;
+ } else {
+ r = (h - 240) / 60;
+ g = 0;
+ b = (360 - h) / 60;
+ }
+ }
+ r = Math.min(r, 1);
+ g = Math.min(g, 1);
+ b = Math.min(b, 1);
+ r = 2 * s * r + (1 - s);
+ g = 2 * s * g + (1 - s);
+ b = 2 * s * b + (1 - s);
+ if (l < 0.5) {
+ r = l * r;
+ g = l * g;
+ b = l * b;
+ } else {
+ r = (1 - l) * r + 2 * l - 1;
+ g = (1 - l) * g + 2 * l - 1;
+ b = (1 - l) * b + 2 * l - 1;
+ }
+ r = Math.ceil(r * 255);
+ g = Math.ceil(g * 255);
+ b = Math.ceil(b * 255);
+ return [r,g,b];
+ };
+
+
+ var rgb = hsl2rgb(h, s, l);
+
+ function hex2(n) {
+ var h = n.toString(16);
+ if (h.length == 1) h = '0' + h;
+ return h;
+ }
+
+ return "#" + hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
+}
+
View
333 src/function/functions.js
@@ -0,0 +1,333 @@
+/**
+ Functions applied to property values.
+ #lighten
+ Makes a color lighter.
+ #darken
+ Makes a color darker.
+ #saturate
+ Makes a color more saturated.
+ #desaturate
+ Makes a color less saturated.
+ #grayscale
+ Converts a color to grayscale.
+ #complement
+ Returns the complement of a color.
+
+
+ def grayscale(color)
+ desaturate color, Number.new(100)
+ end
+
+
+ def desaturate(color, amount)
+ adjust(color, amount, :saturation, 0..100, :-, "%")
+ end
+ */
+
+function rgbToHsl(r, g, b) {
+ r /= 255,g /= 255,b /= 255;
+ var max = Math.max(r, g, b), min = Math.min(r, g, b);
+ var h, s, l = (max + min) / 2;
+
+ if (max == min) {
+ h = s = 0; // achromatic
+ } else {
+ var d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+
+ return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
+}
+
+
+function rgbToHsv(r, g, b) {
+ var
+ min = Math.min(r, g, b),
+ max = Math.max(r, g, b),
+ delta = max - min,
+ h, s, v = max;
+
+ v = Math.floor(max / 255 * 100);
+ if (max != 0)
+ s = Math.floor(delta / max * 100);
+ else {
+ // black
+ return [0, 0, 0];
+ }
+
+ if (r == max)
+ h = ( g - b ) / delta; // between yellow & magenta
+ else if (g == max)
+ h = 2 + ( b - r ) / delta; // between cyan & yellow
+ else
+ h = 4 + ( r - g ) / delta; // between magenta & cyan
+
+ h = Math.floor(h * 60); // degrees
+ if (h < 0) h += 360;
+
+ return [h, s, v];
+}
+
+
+/*
+
+ *
+ */
+
+
+function hsl2rgb(h, s, l) {
+ var m1, m2, hue;
+ var r, g, b
+ s /= 100;
+ l /= 100;
+ if (s == 0)
+ r = g = b = (l * 255);
+ else {
+ if (l <= 0.5)
+ m2 = l * (s + 1);
+ else
+ m2 = l + s - l * s;
+ m1 = l * 2 - m2;
+ hue = h / 360;
+ r = HueToRgb(m1, m2, hue + 1 / 3);
+ g = HueToRgb(m1, m2, hue);
+ b = HueToRgb(m1, m2, hue - 1 / 3);
+ }
+ return {r: r, g: g, b: b};
+}
+
+function HueToRgb(m1, m2, hue) {
+ var v;
+ if (hue < 0)
+ hue += 1;
+ else if (hue > 1)
+ hue -= 1;
+
+ if (6 * hue < 1)
+ v = m1 + (m2 - m1) * hue * 6;
+ else if (2 * hue < 1)
+ v = m2;
+ else if (3 * hue < 2)
+ v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
+ else
+ v = m1;
+
+ return 255 * v;
+}
+
+
+//calculate rgb component
+function hToC(x, y, h) {
+ var c;
+ if (h < 0) {
+ h += 1;
+ }
+ if (h > 1) {
+ h -= 1;
+ }
+ if (h < 1 / 6) {
+ c = x + (y - x) * h * 6;
+ } else {
+ if (h < 1 / 2) {
+ c = y;
+ } else {
+ if (h < 2 / 3) {
+ c = x + (y - x) * (2 / 3 - h) * 6;
+ } else {
+ c = x;
+ }
+ }
+ }
+ return c;
+}
+
+//convert hsl to rgb (all values 0..1)
+function hslToRgb(h, s, l) {
+ var
+ y = (l > .5) ?
+ l + s - l * s :
+ l * (s + 1),
+ x = l * 2 - y,
+ r = hToC(x, y, h + 1 / 3),
+ g = hToC(x, y, h),
+ b = hToC(x, y, h - 1 / 3);
+ return [r, g, b];
+}
+
+//convert hsl to an html color string
+function hslToHtmlColor(h, s, l) {
+ var rgb = hslToRgb(h, s, l);
+ return "#" + toHex(rgb[0] * 255) + toHex(rgb[1] * 255) + toHex(rgb[2] * 255);
+}
+
+//convert decimal to hex
+function toHex(decimal, places) {
+ if (places == undefined || isNaN(places)) places = 2;
+ var hex = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
+ var next = 0;
+ var hexidecimal = "";
+ decimal = Math.floor(decimal);
+ while (decimal > 0) {
+ next = decimal % 16;
+ decimal = Math.floor((decimal - next) / 16);
+ hexidecimal = hex[next] + hexidecimal;
+ }
+ while (hexidecimal.length < places) {
+ hexidecimal = "0" + hexidecimal;
+ }
+ return hexidecimal;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Makes a color lighter.
+// Takes a color and an amount between 0% and 100%,
+// and returns a color with the lightness increased by that value.
+//
+// For example:
+//
+// lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30)
+// lighten(#800, 20%) => #e00
+//
+// @param color [Color]
+// @param amount [Number]
+// @return [Color]
+// @see #darken
+// @raise [ArgumentError] If `color` isn't a color,
+// or `number` isn't a number between 0% and 100%
+ function lighten(color, amount) {
+ adjust(color, amount, :lightness, 0..100, :+, "%")
+ }
+// Makes a color darker.
+// Takes a color and an amount between 0% and 100%,
+// and returns a color with the lightness decreased by that value.
+//
+// For example:
+//
+// darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
+// darken(#800, 20%) => #200
+//
+// @param color [Color]
+// @param amount [Number]
+// @return [Color]
+// @see #lighten
+// @raise [ArgumentError] If `color` isn't a color,
+// or `number` isn't a number between 0% and 100%
+ function darken(color, amount) {
+ adjust(color, amount, :lightness, 0..100, :-, "%")
+ }
+// Makes a color more saturated.
+// Takes a color and an amount between 0% and 100%,
+// and returns a color with the saturation increased by that value.
+//
+// For example:
+//
+// saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)
+// saturate(#855, 20%) => #9e3f3f
+//
+// @param color [Color]
+// @param amount [Number]
+// @return [Color]
+// @see #desaturate
+// @raise [ArgumentError] If `color` isn't a color,
+// or `number` isn't a number between 0% and 100%
+ function saturate(color, amount) {
+ adjust(color, amount, :saturation, 0..100, :+, "%")
+ }
+// Makes a color less saturated.
+// Takes a color and an amount between 0% and 100%,
+// and returns a color with the saturation decreased by that value.
+//
+// For example:
+//
+// desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%)
+// desaturate(#855, 20%) => #726b6b
+//
+// @param color [Color]
+// @param amount [Number]
+// @return [Color]
+// @see #saturate
+// @raise [ArgumentError] If `color` isn't a color,
+// or `number` isn't a number between 0% and 100%
+ function desaturate(color, amount) {
+ adjust(color, amount, :saturation, 0..100, :-, "%")
+ }
+// Changes the hue of a color while retaining the lightness and saturation.
+// Takes a color and a number of degrees (usually between -360deg and 360deg),
+// and returns a color with the hue rotated by that value.
+//
+// For example:
+//
+// adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)
+// adjust-hue(hsl(120, 30%, 90%), 060deg) => hsl(60, 30%, 90%)
+// adjust-hue(#811, 45deg) => #886a11
+//
+// @param color [Color]
+// @param amount [Number]
+// @return [Color]
+// @raise [ArgumentError] If `color` isn't a color, or `number` isn't a number
+ function adjust_hue(color, degrees) {
+ color.with(:hue => color.hue + degrees.value)
+ }
+
+// Converts a color to grayscale.
+// This is identical to `desaturate(color, 100%)`.
+//
+// @param color [Color]
+// @return [Color]
+// @raise [ArgumentError] if `color` isn't a color
+// @see #desaturate
+ function grayscale(color) {
+ desaturate color, Number.new(100)
+ }
+// Returns the complement of a color.
+// This is identical to `adjust-hue(color, 180deg)`.
+//
+// @param color [Color]
+// @return [Color]
+// @raise [ArgumentError] if `color` isn't a color
+// @see #adjust_hue #adjust-hue
+ function complement(color) {
+ adjust_hue color, Number.new(180)
+ }
+
View
15 src/macro/macros.js
@@ -0,0 +1,15 @@
+/*
+ * Functions that return a set of properties and their values.
+ */
+
+/**
+ * CSS3 rounded corners
+ * @param radius
+ */
+function roundedCorners(radius) {
+ return {
+ '-webkit-border-radius': radius,
+ '-moz-border-radius': radius,
+ 'border-radius': radius
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.