diff --git a/.travis.yml b/.travis.yml index 266a30d..0cb6b2b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,4 +8,4 @@ deploy: secure: XfxcXQvUIlDRiPvKNxsoL3sOEALcDd9uY6FR6TQls3C8nR8+Ocq/WfLYhG53J5Tl0E8EsG/2a9HVTT0+k1RG9bDSthM8ztRm9Y/Fi4ZqN4Wn5BfepOUl24SPqwmG/48w/Wu/cn3wOFEu5h7Y3iiTkcyk5hwJr54THKMH7J313KU= on: tags: true - branch: master + branch: master \ No newline at end of file diff --git a/README.md b/README.md index 0727ce1..510aaa2 100644 --- a/README.md +++ b/README.md @@ -79,12 +79,11 @@ Returns the specified color from the specified color palette // ------------------------------------------ // ////////////////////////////////////////////////// -background: color('blue', 80); // #1d3649 -background: color('blue'); // #4178be +background: color('blue', 80); // #1d3458 +background: color('blue'); // #2d74da -- with an alpha -background: color('blue', 80, $alpha: 0.5); // rgba(29, 54, 73, 0.5) -background: color('blue', $alpha: 0.5); // rgba(65, 120, 190, 0.5) - +background: color('blue', 80, $alpha: 0.5); // rgba(29, 52, 88, 0.5) +background: color('blue', $alpha: 0.5); // rgba(45, 116, 218, 0.5) ``` ##### Color Tint @@ -103,10 +102,10 @@ Returns a color the specified amount of steps lighter than the given color in th // ------------------------------------------ // ////////////////////////////////////////////////// -background: color-tint(color('blue', 80), 20); // #325c80 -background: color-tint(color('blue', 80), 23); // #325c80 -background: color-tint(color('blue', 80), 25); // #4178be -background: color-tint(color('blue', 80), 100); // #c0e6ff +background: color-tint(color('blue', 80), 20); // #1f57a4 +background: color-tint(color('blue', 80), 23); // #1f57a4 +background: color-tint(color('blue', 80), 25); // #2d74da +background: color-tint(color('blue', 80), 100); // #e1ebf7 ``` ##### Color Shade @@ -125,10 +124,10 @@ Returns a color the specified amount of steps darker than the given color in the // ------------------------------------------ // ////////////////////////////////////////////////// -background: color-shade(color('blue', 30), 20); // #4178be -background: color-shade(color('blue', 30), 23); // #4178be -background: color-shade(color('blue', 30), 25); // #325c80 -background: color-shade(color('blue', 30), 100); // #010205 +background: color-shade(color('blue', 30), 20); // #2d74da +background: color-shade(color('blue', 30), 23); // #2d74da +background: color-shade(color('blue', 30), 25); // #1f57a4 +background: color-shade(color('blue', 30), 100); // #19273c ``` ##### Get Colors @@ -190,6 +189,14 @@ cd colors npm install ``` +### Tests + +After installing all of the node packages, you can run tests by using this command in your terminal: + +```bash +npm test +``` + ### Suggest color change You can either [submit an issue](https://github.com/IBM-Design/colors/issues/new) or submit the pull request of changed code yourself: diff --git a/_ibm-colors.scss b/_ibm-colors.scss index 07ae273..ca6c19a 100644 --- a/_ibm-colors.scss +++ b/_ibm-colors.scss @@ -12,14 +12,15 @@ // // Usage: // -// background: color('blue', 80); // #1d3649 -// background: color('blue'); // #4178be +// background: color('blue', 80); // #1d3458 +// background: color('blue'); // #2d74da // -// background: color('blue', 80, $alpha: 0.5); // rgba(29, 54, 73, 0.5) -// background: color('blue', $alpha: 0.5); // rgba(65, 120, 190, 0.5) +// background: color('blue', 80, $alpha: 0.5); // rgba(29, 52, 88, 0.5) +// background: color('blue', $alpha: 0.5); // rgba(45, 116, 218, 0.5) // ////////////////////////////// -@function color($palette, $grade: 0, $alpha: 1) { + +@function color($palette, $grade: 'core', $alpha: 1) { // Because it's spelled gr(a|e)y and we've got spaces @if $palette == 'grey' { $palette: 'gray'; @@ -40,24 +41,39 @@ $palette: 'warm-white'; } - $plt: map-get($__ibm-color-palettes, $palette); + // Look for palette + $found-palette: map-get($__ibm-color-palettes, $palette); - @if $plt { - $grd: map-get($plt, $grade); - @return rgba($grd, $alpha); + $error-message-palette: 'Color palette "#{$palette}" not found'; + @if not $found-palette { + @if feature-exists(at-error) { + @error $error-message-palette; + } + @else { + @warn $error-message-palette; + } } - $error-message: 'Color palette "#{$palette}" not found'; - @if not $found-index { + // Look for palette grade + $found-grade: map-get($found-palette, $grade); + + $error-message-grade: 'Color grade "#{$grade}" for palette "#{$palette}" not found'; + @if not $found-grade { @if feature-exists(at-error) { - @error $error-message; + @error $error-message-grade; } @else { - @warn $error-message; + @warn $error-message-grade; } } - @return false; + // Warn user if the alpha value is outside of the acceptable alpha channel value range + $warning-alpha: '$alpha value should be between 0 and 1'; + @if $alpha < 0 or $alpha > 1 { + @warn $warning-alpha; + } + + @return rgba($found-grade, $alpha); } ////////////////////////////// @@ -201,6 +217,7 @@ $singles: 'neutral-white', 'cool-white', 'warm-white'; ////////////////////////////// $__ibm-color-palettes: ( 'ultramarine': ( + core: #3151b7, 1: #e7e9f7, 10: #d1d7f4, 20: #b0bef3, @@ -213,6 +230,7 @@ $__ibm-color-palettes: ( 90: #20214f ), 'blue': ( + core: #2d74da, 1: #e1ebf7, 10: #c8daf4, 20: #a8c0f3, @@ -225,6 +243,7 @@ $__ibm-color-palettes: ( 90: #19273c ), 'cerulean': ( + core: #009bef, 1: #deedf7, 10: #c2dbf4, 20: #95c4f3, @@ -237,6 +256,7 @@ $__ibm-color-palettes: ( 90: #1b2834 ), 'aqua': ( + core: #00b6cb, 1: #d1f0f7, 10: #a0e3f0, 20: #71cddd, @@ -249,6 +269,7 @@ $__ibm-color-palettes: ( 90: #122a2e ), 'teal': ( + core: #00a78f, 1: #c0f5e8, 10: #8ee9d4, 20: #40d5bb, @@ -261,6 +282,7 @@ $__ibm-color-palettes: ( 90: #122b26 ), 'green': ( + core: #34bc6e, 1: #cef3d1, 10: #89eda0, 20: #57d785, @@ -273,6 +295,7 @@ $__ibm-color-palettes: ( 90: #112c1b ), 'lime': ( + core: #95d13c, 1: #d7f4bd, 10: #b4e876, 20: #95d13c, @@ -285,6 +308,7 @@ $__ibm-color-palettes: ( 90: #1f2a10 ), 'yellow': ( + core: #fed500, 1: #fbeaae, 10: #fed500, 20: #e3bc13, @@ -297,6 +321,7 @@ $__ibm-color-palettes: ( 90: #372118 ), 'gold': ( + core: #ffb000, 1: #f5e8db, 10: #ffd191, 20: #ffb000, @@ -309,6 +334,7 @@ $__ibm-color-palettes: ( 90: #2f261c ), 'orange': ( + core: #fe8500, 1: #f5e8de, 10: #fdcfad, 20: #fcaf6d, @@ -321,6 +347,7 @@ $__ibm-color-palettes: ( 90: #33241c ), 'peach': ( + core: #fe6100, 1: #f7e7e2, 10: #f8d0c3, 20: #faad96, @@ -333,6 +360,7 @@ $__ibm-color-palettes: ( 90: #3a201b ), 'red': ( + core: #e62325, 1: #f7e6e6, 10: #fccec7, 20: #ffaa9d, @@ -345,6 +373,7 @@ $__ibm-color-palettes: ( 90: #3e1d1b ), 'magenta': ( + core: #ff509e, 1: #f5e7eb, 10: #f5cedb, 20: #f7aac3, @@ -357,6 +386,7 @@ $__ibm-color-palettes: ( 90: #401a29 ), 'purple': ( + core: #c22dd5, 1: #f7e4fb, 10: #efcef3, 20: #e4adea, @@ -369,6 +399,7 @@ $__ibm-color-palettes: ( 90: #3b1a40 ), 'violet': ( + core: #7732bb, 1: #ece8f5, 10: #e2d2f4, 20: #d2b5f0, @@ -381,6 +412,7 @@ $__ibm-color-palettes: ( 90: #321c4c ), 'indigo': ( + core: #473793, 1: #e9e8ff, 10: #dcd4f7, 20: #c7b6f7, @@ -393,6 +425,7 @@ $__ibm-color-palettes: ( 90: #272149 ), 'gray': ( + core: #777677, 1: #eaeaea, 10: #d8d8d8, 20: #c0bfc0, @@ -405,6 +438,7 @@ $__ibm-color-palettes: ( 90: #272727 ), 'cool-gray': ( + core: #6f7878, 1: #e3ecec, 10: #d0dada, 20: #b8c1c1, @@ -417,6 +451,7 @@ $__ibm-color-palettes: ( 90: #272727 ), 'warm-gray': ( + core: #7d7373, 1: #efe9e9, 10: #e2d5d5, 20: #ccbcbc, @@ -429,27 +464,32 @@ $__ibm-color-palettes: ( 90: #2a2626 ), 'neutral-white': ( + core: #fcfcfc, 1: #fcfcfc, 2: #f9f9f9, 3: #f6f6f6, 4: #f3f3f3 ), 'cool-white': ( + core: #fbfcfc, 1: #fbfcfc, 2: #f8fafa, 3: #f4f7f7, 4: #f0f4f4 ), 'warm-white': ( + core: #fdfcfc, 1: #fdfcfc, 2: #fbf8f8, 3: #f9f6f6, 4: #f6f3f3 ), 'black': ( + core: #000, 100: #000 ), 'white': ( + core: #fff, 0: #fff ) ); diff --git a/gulpfile.js b/gulpfile.js index 76409ec..a5dc289 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,6 +5,7 @@ var ase = require('ase-utils'), clean = require('gulp-clean'), colors = require('./source/colors.js'), fs = require('fs'), + path = require('path'), gulp = require('gulp'), handlebars = require('handlebars'), jeditor = require("gulp-json-editor"), @@ -17,6 +18,7 @@ var ase = require('ase-utils'), var config = { ase: './ibm-colors.ase', partials: './source/templates/partials/*', + helpers: './source/templates/helpers', templates: './source/templates/*.hbs', output: './' }; @@ -34,6 +36,11 @@ gulp.task('ase', function() { const aseGroup = { name: color }; + + // Initialize core grade variable that will be used to create + // the core grade color object. + let coreGrade; + const formArray = obj.values.map(function(colors){ const hex = function(hex) { const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; @@ -50,14 +57,28 @@ gulp.task('ase', function() { } const formColor = { - "name": color + ' ' + colors.grade, + "name": `${color} ${colors.grade}`, "model": 'RGB', "color": hex(colors.value), "type": "global" }; + + // If this current color grade matchest this palette's core grade + // the update the color grade variable to this color. + if (obj.core === colors.grade) { + // Clone formColor object + coreGrade = Object.assign({}, formColor); + + // Update color name to have the word core instead of the grade + // number + coreGrade.name = `${color} core`; + } + return formColor; }); - aseGroup.colors = formArray; + + // Add the core grade color value to the beginning of this palette's array + aseGroup.colors = [coreGrade, ...formArray]; return aseGroup; }); aseObj["colors"] = [].concat.apply([], aseObj.colors); @@ -90,6 +111,18 @@ gulp.task('partials', () => )) ); +gulp.task('helpers', () => { + gulp.src(`${config.helpers}/*.js`) + .pipe(spy.obj((chunk) => { + // remove .js extension name + const helperName = chunk.relative.replace(/\.js$/, ''); + + // register each file in the helpers folder as a handlebars helper, + // using its own file name, to create the helper name. + handlebars.registerHelper(helperName, require(`${config.helpers}/${chunk.relative}`)) + })) +}); + function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; @@ -126,7 +159,7 @@ gulp.task('sketchpalette', [ 'templates' ], function () { .pipe(gulp.dest(config.output)) }) -gulp.task('templates', ['partials'], () => +gulp.task('templates', ['helpers', 'partials'], () => gulp.src(config.templates) .pipe(map.obj(chunk => { // compile each handlebars file in the templates folder, then evaluate diff --git a/ibm-colors.ase b/ibm-colors.ase index f687b9f..6c60b4d 100644 Binary files a/ibm-colors.ase and b/ibm-colors.ase differ diff --git a/ibm-colors.clr b/ibm-colors.clr index f3a743f..8098755 100644 Binary files a/ibm-colors.clr and b/ibm-colors.clr differ diff --git a/ibm-colors.json b/ibm-colors.json index 710d0e4..7c4bbe4 100644 --- a/ibm-colors.json +++ b/ibm-colors.json @@ -1,5 +1,6 @@ { "ultramarine": { + "core": "#3151b7", "1": "#e7e9f7", "10": "#d1d7f4", "20": "#b0bef3", @@ -12,6 +13,7 @@ "90": "#20214f" }, "blue": { + "core": "#2d74da", "1": "#e1ebf7", "10": "#c8daf4", "20": "#a8c0f3", @@ -24,6 +26,7 @@ "90": "#19273c" }, "cerulean": { + "core": "#009bef", "1": "#deedf7", "10": "#c2dbf4", "20": "#95c4f3", @@ -36,6 +39,7 @@ "90": "#1b2834" }, "aqua": { + "core": "#00b6cb", "1": "#d1f0f7", "10": "#a0e3f0", "20": "#71cddd", @@ -48,6 +52,7 @@ "90": "#122a2e" }, "teal": { + "core": "#00a78f", "1": "#c0f5e8", "10": "#8ee9d4", "20": "#40d5bb", @@ -60,6 +65,7 @@ "90": "#122b26" }, "green": { + "core": "#34bc6e", "1": "#cef3d1", "10": "#89eda0", "20": "#57d785", @@ -72,6 +78,7 @@ "90": "#112c1b" }, "lime": { + "core": "#95d13c", "1": "#d7f4bd", "10": "#b4e876", "20": "#95d13c", @@ -84,6 +91,7 @@ "90": "#1f2a10" }, "yellow": { + "core": "#fed500", "1": "#fbeaae", "10": "#fed500", "20": "#e3bc13", @@ -96,6 +104,7 @@ "90": "#372118" }, "gold": { + "core": "#ffb000", "1": "#f5e8db", "10": "#ffd191", "20": "#ffb000", @@ -108,6 +117,7 @@ "90": "#2f261c" }, "orange": { + "core": "#fe8500", "1": "#f5e8de", "10": "#fdcfad", "20": "#fcaf6d", @@ -120,6 +130,7 @@ "90": "#33241c" }, "peach": { + "core": "#fe6100", "1": "#f7e7e2", "10": "#f8d0c3", "20": "#faad96", @@ -132,6 +143,7 @@ "90": "#3a201b" }, "red": { + "core": "#e62325", "1": "#f7e6e6", "10": "#fccec7", "20": "#ffaa9d", @@ -144,6 +156,7 @@ "90": "#3e1d1b" }, "magenta": { + "core": "#ff509e", "1": "#f5e7eb", "10": "#f5cedb", "20": "#f7aac3", @@ -156,6 +169,7 @@ "90": "#401a29" }, "purple": { + "core": "#c22dd5", "1": "#f7e4fb", "10": "#efcef3", "20": "#e4adea", @@ -168,6 +182,7 @@ "90": "#3b1a40" }, "violet": { + "core": "#7732bb", "1": "#ece8f5", "10": "#e2d2f4", "20": "#d2b5f0", @@ -180,6 +195,7 @@ "90": "#321c4c" }, "indigo": { + "core": "#473793", "1": "#e9e8ff", "10": "#dcd4f7", "20": "#c7b6f7", @@ -192,6 +208,7 @@ "90": "#272149" }, "gray": { + "core": "#777677", "1": "#eaeaea", "10": "#d8d8d8", "20": "#c0bfc0", @@ -204,6 +221,7 @@ "90": "#272727" }, "cool-gray": { + "core": "#6f7878", "1": "#e3ecec", "10": "#d0dada", "20": "#b8c1c1", @@ -216,6 +234,7 @@ "90": "#272727" }, "warm-gray": { + "core": "#7d7373", "1": "#efe9e9", "10": "#e2d5d5", "20": "#ccbcbc", @@ -228,27 +247,32 @@ "90": "#2a2626" }, "neutral-white": { + "core": "#fcfcfc", "1": "#fcfcfc", "2": "#f9f9f9", "3": "#f6f6f6", "4": "#f3f3f3" }, "cool-white": { + "core": "#fbfcfc", "1": "#fbfcfc", "2": "#f8fafa", "3": "#f4f7f7", "4": "#f0f4f4" }, "warm-white": { + "core": "#fdfcfc", "1": "#fdfcfc", "2": "#fbf8f8", "3": "#f9f6f6", "4": "#f6f3f3" }, "black": { + "core": "#000", "100": "#000" }, "white": { + "core": "#fff", "0": "#fff" } } diff --git a/ibm-colors.sketchpalette b/ibm-colors.sketchpalette index 4c6beb7..e75d236 100644 --- a/ibm-colors.sketchpalette +++ b/ibm-colors.sketchpalette @@ -51,6 +51,11 @@ "green": 0.12941176470588237, "blue": 0.30980392156862746, "alpha": 1 + }, { + "red": 0.19215686274509805, + "green": 0.3176470588235294, + "blue": 0.7176470588235294, + "alpha": 1 }, { "red": 0.8823529411764706, "green": 0.9215686274509803, @@ -101,6 +106,11 @@ "green": 0.15294117647058825, "blue": 0.23529411764705882, "alpha": 1 + }, { + "red": 0.17647058823529413, + "green": 0.4549019607843137, + "blue": 0.8549019607843137, + "alpha": 1 }, { "red": 0.8705882352941177, "green": 0.9294117647058824, @@ -151,6 +161,11 @@ "green": 0.1568627450980392, "blue": 0.20392156862745098, "alpha": 1 + }, { + "red": 0, + "green": 0.6078431372549019, + "blue": 0.9372549019607843, + "alpha": 1 }, { "red": 0.8196078431372549, "green": 0.9411764705882353, @@ -201,6 +216,11 @@ "green": 0.16470588235294117, "blue": 0.1803921568627451, "alpha": 1 + }, { + "red": 0, + "green": 0.7137254901960784, + "blue": 0.796078431372549, + "alpha": 1 }, { "red": 0.7529411764705882, "green": 0.9607843137254902, @@ -251,6 +271,11 @@ "green": 0.16862745098039217, "blue": 0.14901960784313725, "alpha": 1 + }, { + "red": 0, + "green": 0.6549019607843137, + "blue": 0.5607843137254902, + "alpha": 1 }, { "red": 0.807843137254902, "green": 0.9529411764705882, @@ -301,6 +326,11 @@ "green": 0.17254901960784313, "blue": 0.10588235294117647, "alpha": 1 + }, { + "red": 0.20392156862745098, + "green": 0.7372549019607844, + "blue": 0.43137254901960786, + "alpha": 1 }, { "red": 0.8431372549019608, "green": 0.9568627450980393, @@ -351,6 +381,11 @@ "green": 0.16470588235294117, "blue": 0.06274509803921569, "alpha": 1 + }, { + "red": 0.5843137254901961, + "green": 0.8196078431372549, + "blue": 0.23529411764705882, + "alpha": 1 }, { "red": 0.984313725490196, "green": 0.9176470588235294, @@ -401,6 +436,11 @@ "green": 0.12941176470588237, "blue": 0.09411764705882353, "alpha": 1 + }, { + "red": 0.996078431372549, + "green": 0.8352941176470589, + "blue": 0, + "alpha": 1 }, { "red": 0.9607843137254902, "green": 0.9098039215686274, @@ -451,6 +491,11 @@ "green": 0.14901960784313725, "blue": 0.10980392156862745, "alpha": 1 + }, { + "red": 1, + "green": 0.6901960784313725, + "blue": 0, + "alpha": 1 }, { "red": 0.9607843137254902, "green": 0.9098039215686274, @@ -501,6 +546,11 @@ "green": 0.1411764705882353, "blue": 0.10980392156862745, "alpha": 1 + }, { + "red": 0.996078431372549, + "green": 0.5215686274509804, + "blue": 0, + "alpha": 1 }, { "red": 0.9686274509803922, "green": 0.9058823529411765, @@ -551,6 +601,11 @@ "green": 0.12549019607843137, "blue": 0.10588235294117647, "alpha": 1 + }, { + "red": 0.996078431372549, + "green": 0.3803921568627451, + "blue": 0, + "alpha": 1 }, { "red": 0.9686274509803922, "green": 0.9019607843137255, @@ -601,6 +656,11 @@ "green": 0.11372549019607843, "blue": 0.10588235294117647, "alpha": 1 + }, { + "red": 0.9019607843137255, + "green": 0.13725490196078433, + "blue": 0.1450980392156863, + "alpha": 1 }, { "red": 0.9607843137254902, "green": 0.9058823529411765, @@ -651,6 +711,11 @@ "green": 0.10196078431372549, "blue": 0.1607843137254902, "alpha": 1 + }, { + "red": 1, + "green": 0.3137254901960784, + "blue": 0.6196078431372549, + "alpha": 1 }, { "red": 0.9686274509803922, "green": 0.8941176470588236, @@ -701,6 +766,11 @@ "green": 0.10196078431372549, "blue": 0.25098039215686274, "alpha": 1 + }, { + "red": 0.7607843137254902, + "green": 0.17647058823529413, + "blue": 0.8352941176470589, + "alpha": 1 }, { "red": 0.9254901960784314, "green": 0.9098039215686274, @@ -751,6 +821,11 @@ "green": 0.10980392156862745, "blue": 0.2980392156862745, "alpha": 1 + }, { + "red": 0.4666666666666667, + "green": 0.19607843137254902, + "blue": 0.7333333333333333, + "alpha": 1 }, { "red": 0.9137254901960784, "green": 0.9098039215686274, @@ -801,6 +876,11 @@ "green": 0.12941176470588237, "blue": 0.28627450980392155, "alpha": 1 + }, { + "red": 0.2784313725490196, + "green": 0.21568627450980393, + "blue": 0.5764705882352941, + "alpha": 1 }, { "red": 0.9176470588235294, "green": 0.9176470588235294, @@ -851,6 +931,11 @@ "green": 0.15294117647058825, "blue": 0.15294117647058825, "alpha": 1 + }, { + "red": 0.4666666666666667, + "green": 0.4627450980392157, + "blue": 0.4666666666666667, + "alpha": 1 }, { "red": 0.8901960784313725, "green": 0.9254901960784314, @@ -901,6 +986,11 @@ "green": 0.15294117647058825, "blue": 0.15294117647058825, "alpha": 1 + }, { + "red": 0.43529411764705883, + "green": 0.47058823529411764, + "blue": 0.47058823529411764, + "alpha": 1 }, { "red": 0.9372549019607843, "green": 0.9137254901960784, @@ -951,6 +1041,11 @@ "green": 0.14901960784313725, "blue": 0.14901960784313725, "alpha": 1 + }, { + "red": 0.49019607843137253, + "green": 0.45098039215686275, + "blue": 0.45098039215686275, + "alpha": 1 }, { "red": 0.9882352941176471, "green": 0.9882352941176471, @@ -971,6 +1066,11 @@ "green": 0.9529411764705882, "blue": 0.9529411764705882, "alpha": 1 + }, { + "red": 0.9882352941176471, + "green": 0.9882352941176471, + "blue": 0.9882352941176471, + "alpha": 1 }, { "red": 0.984313725490196, "green": 0.9882352941176471, @@ -991,6 +1091,11 @@ "green": 0.9568627450980393, "blue": 0.9568627450980393, "alpha": 1 + }, { + "red": 0.984313725490196, + "green": 0.9882352941176471, + "blue": 0.9882352941176471, + "alpha": 1 }, { "red": 0.9921568627450981, "green": 0.9882352941176471, @@ -1011,11 +1116,26 @@ "green": 0.9529411764705882, "blue": 0.9529411764705882, "alpha": 1 + }, { + "red": 0.9921568627450981, + "green": 0.9882352941176471, + "blue": 0.9882352941176471, + "alpha": 1 }, { "red": 0, "green": 0, "blue": 0, "alpha": 1 + }, { + "red": 0, + "green": 0, + "blue": 0, + "alpha": 1 + }, { + "red": 1, + "green": 1, + "blue": 1, + "alpha": 1 }, { "red": 1, "green": 1, diff --git a/package.json b/package.json index fe82e47..2c331cf 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "needs": "^1.0.0" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 0" + "test": "mocha" }, "repository": { "type": "git", @@ -35,8 +35,10 @@ "gulp-rename": "^1.2.2", "gulp-shell": "^0.5.2", "handlebars": "^4.0.5", + "mocha": "^3.2.0", + "sass-true": "^2.2.1", "through2-map": "^2.0.0", "through2-spy": "^2.0.0" }, - "version": "2.0.3" -} + "version": "2.0.2" +} \ No newline at end of file diff --git a/source/templates/_ibm-colors.scss.hbs b/source/templates/_ibm-colors.scss.hbs index 08718d7..5207dff 100644 --- a/source/templates/_ibm-colors.scss.hbs +++ b/source/templates/_ibm-colors.scss.hbs @@ -11,9 +11,12 @@ // IBM Color Palettes ////////////////////////////// $__ibm-color-palettes: ( -{{#each colors.palettes}} - '{{name}}': ( -{{#each values}} +{{#each colors.palettes as |palette|}} + '{{palette.name}}': ( +{{#if palette.core}} + core: #{{core_color palette}}, +{{/if}} +{{#each palette.values}} {{grade}}: #{{value}}{{#unless @last}},{{/unless}} {{/each}} ){{#unless @last}},{{/unless}} diff --git a/source/templates/helpers/core_color.js b/source/templates/helpers/core_color.js new file mode 100644 index 0000000..828498a --- /dev/null +++ b/source/templates/helpers/core_color.js @@ -0,0 +1,13 @@ +function coreColor(palette) { + let coreColor; + + palette.values.forEach(colorValue => { + if (parseInt(colorValue.grade) === parseInt(palette.core)) { + coreColor = colorValue.value; + } + }); + + return coreColor; +} + +module.exports = coreColor; diff --git a/source/templates/ibm-colors.json.hbs b/source/templates/ibm-colors.json.hbs index 6f3bc5d..e0e293a 100644 --- a/source/templates/ibm-colors.json.hbs +++ b/source/templates/ibm-colors.json.hbs @@ -1,7 +1,10 @@ { -{{#each colors.palettes}} - "{{name}}": { -{{#each values}} +{{#each colors.palettes as |palette|}} + "{{palette.name}}": { +{{#if palette.core}} + "core": "#{{core_color palette}}", +{{/if}} +{{#each palette.values}} "{{grade}}": "#{{value}}"{{#unless @last}},{{/unless}} {{/each}} }{{#unless @last}},{{/unless}} diff --git a/source/templates/ibm-colors.scl.hbs b/source/templates/ibm-colors.scl.hbs index 5d37365..74362da 100644 --- a/source/templates/ibm-colors.scl.hbs +++ b/source/templates/ibm-colors.scl.hbs @@ -1,8 +1,10 @@ -{{#each colors.palettes}} -# {{name}} -{{#each values}} +{{#each colors.palettes as |palette|}} +# {{palette.name}} +{{#if palette.core}} +{{core_color palette}}: {{palette.name}} core +{{/if}} +{{#each palette.values}} {{value}}: {{../name}} {{grade}} {{/each}} - {{/each}} diff --git a/source/templates/partials/color-functions.scss b/source/templates/partials/color-functions.scss index 5bb8384..e7e4bcc 100644 --- a/source/templates/partials/color-functions.scss +++ b/source/templates/partials/color-functions.scss @@ -5,14 +5,15 @@ // // Usage: // -// background: color('blue', 80); // #1d3649 -// background: color('blue'); // #4178be +// background: color('blue', 80); // #1d3458 +// background: color('blue'); // #2d74da // -// background: color('blue', 80, $alpha: 0.5); // rgba(29, 54, 73, 0.5) -// background: color('blue', $alpha: 0.5); // rgba(65, 120, 190, 0.5) +// background: color('blue', 80, $alpha: 0.5); // rgba(29, 52, 88, 0.5) +// background: color('blue', $alpha: 0.5); // rgba(45, 116, 218, 0.5) // ////////////////////////////// -@function color($palette, $grade: 0, $alpha: 1) { + +@function color($palette, $grade: 'core', $alpha: 1) { // Because it's spelled gr(a|e)y and we've got spaces @if $palette == 'grey' { $palette: 'gray'; @@ -33,24 +34,39 @@ $palette: 'warm-white'; } - $plt: map-get($__ibm-color-palettes, $palette); + // Look for palette + $found-palette: map-get($__ibm-color-palettes, $palette); - @if $plt { - $grd: map-get($plt, $grade); - @return rgba($grd, $alpha); + $error-message-palette: 'Color palette "#{$palette}" not found'; + @if not $found-palette { + @if feature-exists(at-error) { + @error $error-message-palette; + } + @else { + @warn $error-message-palette; + } } - $error-message: 'Color palette "#{$palette}" not found'; - @if not $found-index { + // Look for palette grade + $found-grade: map-get($found-palette, $grade); + + $error-message-grade: 'Color grade "#{$grade}" for palette "#{$palette}" not found'; + @if not $found-grade { @if feature-exists(at-error) { - @error $error-message; + @error $error-message-grade; } @else { - @warn $error-message; + @warn $error-message-grade; } } - @return false; + // Warn user if the alpha value is outside of the acceptable alpha channel value range + $warning-alpha: '$alpha value should be between 0 and 1'; + @if $alpha < 0 or $alpha > 1 { + @warn $warning-alpha; + } + + @return rgba($found-grade, $alpha); } ////////////////////////////// diff --git a/test/resources/_colors.scss b/test/resources/_colors.scss new file mode 100644 index 0000000..bae772b --- /dev/null +++ b/test/resources/_colors.scss @@ -0,0 +1,109 @@ +$__ibm-color-palettes: ( + 'ultramarine': ( + core: #3151b7, + 1: #e7e9f7, + 10: #d1d7f4, + 20: #b0bef3, + 30: #89a2f6, + 40: #648fff, + 50: #3c6df0, + 60: #3151b7, + 70: #2e3f8f, + 80: #252e6a, + 90: #20214f + ), + 'blue': ( + core: #2d74da, + 1: #e1ebf7, + 10: #c8daf4, + 20: #a8c0f3, + 30: #79a6f6, + 40: #5392ff, + 50: #2d74da, + 60: #1f57a4, + 70: #25467a, + 80: #1d3458, + 90: #19273c + ), + 'purple': ( + core: #c22dd5, + 1: #f7e4fb, + 10: #efcef3, + 20: #e4adea, + 30: #d68adf, + 40: #cb71d7, + 50: #c22dd5, + 60: #e4adea, + 70: #71237c, + 80: #501e58, + 90: #3b1a40 + ), + 'gray': ( + core: #777677, + 1: #eaeaea, + 10: #d8d8d8, + 20: #c0bfc0, + 30: #a6a5a6, + 40: #949394, + 50: #777677, + 60: #595859, + 70: #464646, + 80: #343334, + 90: #272727 + ), + 'cool-gray': ( + core: #6f7878, + 1: #e3ecec, + 10: #d0dada, + 20: #b8c1c1, + 30: #9fa7a7, + 40: #8c9696, + 50: #6f7878, + 60: #535a5a, + 70: #424747, + 80: #343334, + 90: #272727 + ), + 'warm-gray': ( + core: #7d7373, + 1: #efe9e9, + 10: #e2d5d5, + 20: #ccbcbc, + 30: #b4a1a1, + 40: #9e9191, + 50: #7d7373, + 60: #5f5757, + 70: #4b4545, + 80: #373232, + 90: #2a2626 + ), + 'neutral-white': ( + core: #fcfcfc, + 1: #fcfcfc, + 2: #f9f9f9, + 3: #f6f6f6, + 4: #f3f3f3 + ), + 'cool-white': ( + core: #fbfcfc, + 1: #fbfcfc, + 2: #f8fafa, + 3: #f4f7f7, + 4: #f0f4f4 + ), + 'warm-white': ( + core: #fdfcfc, + 1: #fdfcfc, + 2: #fbf8f8, + 3: #f9f6f6, + 4: #f6f3f3 + ), + 'black': ( + core: #000, + 100: #000 + ), + 'white': ( + core: #fff, + 0: #fff + ) +); \ No newline at end of file diff --git a/test/sass-test.scss b/test/sass-test.scss new file mode 100644 index 0000000..219f942 --- /dev/null +++ b/test/sass-test.scss @@ -0,0 +1,54 @@ +@import 'true'; +@import '../source/templates/partials/color-functions'; +@import 'resources/_colors'; + +@include test-module('Color Functions') { + // Test basic usage of the color function + @include test('Color Basic [Function]') { + // Core color + @include assert-equal(color('ultramarine'), #3151b7); + @include assert-equal(color('purple'), #c22dd5); + @include assert-equal(color('gray'), #777677); + @include assert-equal(color('black'), #000); + @include assert-equal(color('white'), #fff); + @include assert-equal(color('ultramarine', 'core'), #3151b7); + @include assert-equal(color('purple', 'core'), #c22dd5); + @include assert-equal(color('gray', 'core'), #777677); + @include assert-equal(color('black', 'core'), #000); + @include assert-equal(color('white', 'core'), #fff); + + // Graded color + @include assert-equal(color('ultramarine', 1), #e7e9f7); + @include assert-equal(color('ultramarine', 20), #b0bef3); + @include assert-equal(color('purple', 40), #cb71d7); + @include assert-equal(color('purple', 60), #e4adea); + + // With alpha + @include assert-equal(color('ultramarine', 80, $alpha: 0.5), rgba(#252e6a, 0.5)); + @include assert-equal(color('purple', 90, 0.91), rgba(#3b1a40, 0.91)); + @include assert-equal(color('ultramarine', $alpha: 0.1), rgba(#3151b7, 0.1)); + } + + // Test text transformation functionality of color function + @include test('Color Text Transformation [Function]') { + @include assert-equal(color('grey'), #777677); + @include assert-equal(color('warm-grey', 40), #9e9191); + @include assert-equal(color('cool gray', 10), #d0dada); + @include assert-equal(color('cool grey', 20), #b8c1c1); + @include assert-equal(color('neutral white', 1), #fcfcfc); + } + + @include test('Color Tint [Function]') { + @include assert-equal(color-tint(color('blue', 80), 20), #1f57a4); + @include assert-equal(color-tint(color('blue', 80), 23), #1f57a4); + @include assert-equal(color-tint(color('blue', 80), 25), #2d74da); + @include assert-equal(color-tint(color('blue', 80), 100), #e1ebf7); + } + + @include test('Color Shade [Function]') { + @include assert-equal(color-shade(color('blue', 30), 20), #2d74da); + @include assert-equal(color-shade(color('blue', 30), 23), #2d74da); + @include assert-equal(color-shade(color('blue', 30), 25), #1f57a4); + @include assert-equal(color-shade(color('blue', 30), 100), #19273c) + } +} \ No newline at end of file diff --git a/test/test_sass.js b/test/test_sass.js new file mode 100644 index 0000000..eb27c06 --- /dev/null +++ b/test/test_sass.js @@ -0,0 +1,5 @@ +var path = require('path'); +var sassTrue = require('sass-true'); + +var sassFile = path.join(__dirname, 'sass-test.scss'); +sassTrue.runSass({file: sassFile}, describe, it); \ No newline at end of file