Skip to content
This repository has been archived by the owner on Nov 4, 2022. It is now read-only.

No grade bug fix #58

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

No grade bug fix #58

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
4143128
Initial commit from ibm-design/colors
seejamescode Feb 1, 2017
6852a25
Travis api key needed
seejamescode Feb 1, 2017
9fccc6e
Create tests directory
Feb 22, 2017
62b5259
Revert "Create tests directory"
Feb 22, 2017
2a584a8
Create basic sass testing framework
Feb 22, 2017
84a656c
Fix no-grade sass bug
Feb 22, 2017
06a2469
Add more core grade tests
Feb 22, 2017
ca18169
Move helpers code and improve helpers gulp task to register all helpers
Feb 22, 2017
504937e
Add core color value to all file formats
Feb 22, 2017
3eb153b
Update color sass function example colors to match new color palette
Feb 22, 2017
1ec9f66
Improve error handling of color function
Feb 22, 2017
f0d345e
Add one test for color function with just a palette and alpha
Feb 22, 2017
4f22337
Add 🐝 to terminal logs
Feb 22, 2017
8c7d5aa
Finish rebase to colors repository from color-bee
Feb 22, 2017
0252288
Put Travis api key back in
Feb 28, 2017
7874ed6
Update README.md documentation and add more tests for other public fu…
Feb 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ deploy:
provider: npm
email: barlockm@gmail.com
api_key:
secure: XfxcXQvUIlDRiPvKNxsoL3sOEALcDd9uY6FR6TQls3C8nR8+Ocq/WfLYhG53J5Tl0E8EsG/2a9HVTT0+k1RG9bDSthM8ztRm9Y/Fi4ZqN4Wn5BfepOUl24SPqwmG/48w/Wu/cn3wOFEu5h7Y3iiTkcyk5hwJr54THKMH7J313KU=
secure: <needthis>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original secure key is correct! I need to get a new one for color-bee.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, my bad. Changed it back.

on:
tags: true
branch: master
68 changes: 54 additions & 14 deletions _ibm-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
}

//////////////////////////////
Expand Down Expand Up @@ -201,6 +217,7 @@ $singles: 'neutral-white', 'cool-white', 'warm-white';
//////////////////////////////
$__ibm-color-palettes: (
'ultramarine': (
core: #3151b7,
1: #e7e9f7,
10: #d1d7f4,
20: #b0bef3,
Expand All @@ -213,6 +230,7 @@ $__ibm-color-palettes: (
90: #20214f
),
'blue': (
core: #2d74da,
1: #e1ebf7,
10: #c8daf4,
20: #a8c0f3,
Expand All @@ -225,6 +243,7 @@ $__ibm-color-palettes: (
90: #19273c
),
'cerulean': (
core: #009bef,
1: #deedf7,
10: #c2dbf4,
20: #95c4f3,
Expand All @@ -237,6 +256,7 @@ $__ibm-color-palettes: (
90: #1b2834
),
'aqua': (
core: #00b6cb,
1: #d1f0f7,
10: #a0e3f0,
20: #71cddd,
Expand All @@ -249,6 +269,7 @@ $__ibm-color-palettes: (
90: #122a2e
),
'teal': (
core: #00a78f,
1: #c0f5e8,
10: #8ee9d4,
20: #40d5bb,
Expand All @@ -261,6 +282,7 @@ $__ibm-color-palettes: (
90: #122b26
),
'green': (
core: #34bc6e,
1: #cef3d1,
10: #89eda0,
20: #57d785,
Expand All @@ -273,6 +295,7 @@ $__ibm-color-palettes: (
90: #112c1b
),
'lime': (
core: #95d13c,
1: #d7f4bd,
10: #b4e876,
20: #95d13c,
Expand All @@ -285,6 +308,7 @@ $__ibm-color-palettes: (
90: #1f2a10
),
'yellow': (
core: #fed500,
1: #fbeaae,
10: #fed500,
20: #e3bc13,
Expand All @@ -297,6 +321,7 @@ $__ibm-color-palettes: (
90: #372118
),
'gold': (
core: #ffb000,
1: #f5e8db,
10: #ffd191,
20: #ffb000,
Expand All @@ -309,6 +334,7 @@ $__ibm-color-palettes: (
90: #2f261c
),
'orange': (
core: #fe8500,
1: #f5e8de,
10: #fdcfad,
20: #fcaf6d,
Expand All @@ -321,6 +347,7 @@ $__ibm-color-palettes: (
90: #33241c
),
'peach': (
core: #fe6100,
1: #f7e7e2,
10: #f8d0c3,
20: #faad96,
Expand All @@ -333,6 +360,7 @@ $__ibm-color-palettes: (
90: #3a201b
),
'red': (
core: #e62325,
1: #f7e6e6,
10: #fccec7,
20: #ffaa9d,
Expand All @@ -345,6 +373,7 @@ $__ibm-color-palettes: (
90: #3e1d1b
),
'magenta': (
core: #ff509e,
1: #f5e7eb,
10: #f5cedb,
20: #f7aac3,
Expand All @@ -357,6 +386,7 @@ $__ibm-color-palettes: (
90: #401a29
),
'purple': (
core: #c22dd5,
1: #f7e4fb,
10: #efcef3,
20: #e4adea,
Expand All @@ -369,6 +399,7 @@ $__ibm-color-palettes: (
90: #3b1a40
),
'violet': (
core: #7732bb,
1: #ece8f5,
10: #e2d2f4,
20: #d2b5f0,
Expand All @@ -381,6 +412,7 @@ $__ibm-color-palettes: (
90: #321c4c
),
'indigo': (
core: #473793,
1: #e9e8ff,
10: #dcd4f7,
20: #c7b6f7,
Expand All @@ -393,6 +425,7 @@ $__ibm-color-palettes: (
90: #272149
),
'gray': (
core: #777677,
1: #eaeaea,
10: #d8d8d8,
20: #c0bfc0,
Expand All @@ -405,6 +438,7 @@ $__ibm-color-palettes: (
90: #272727
),
'cool-gray': (
core: #6f7878,
1: #e3ecec,
10: #d0dada,
20: #b8c1c1,
Expand All @@ -417,6 +451,7 @@ $__ibm-color-palettes: (
90: #272727
),
'warm-gray': (
core: #7d7373,
1: #efe9e9,
10: #e2d5d5,
20: #ccbcbc,
Expand All @@ -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
)
);
40 changes: 37 additions & 3 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -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: './'
};
Expand All @@ -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;
Expand All @@ -50,18 +57,33 @@ 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);
fs.writeFileSync(config.output + 'ibm-colors.ase', ase.encode(aseObj));

});

gulp.task('clr', [ 'templates' ], function () {
Expand Down Expand Up @@ -90,6 +112,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;
Expand Down Expand Up @@ -126,7 +160,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
Expand Down
Binary file modified ibm-colors.ase
View file
Open in desktop
Binary file not shown.
Binary file modified ibm-colors.clr
View file
Open in desktop
Binary file not shown.
Loading