ibm-design / colors Goto Github PK

some pairs of neighboring colors of the same general hue seem to be much closer than others and are somewhat difficult to distinguish from each other. Knowing they would most likely never be used together, it may be worth taking a look

The ASE files are the "single source of truth" for what the colors should be. We should keep them in a more visible place, Like here!

http://www.ibm.com/design/language/resources

http://www.ibm.com/design/language/experience/visual/color/

color wheel and examples use old colors. Might be worth updating to show the new colors in use.

vs

Should the labels for Peach and Orange be swapped? Myself and a few others noticed that our Orange looks more Peach and our Peach looks more Orange.

@ind1go says this is the current gulp flow:

       .--> scss
json --+--> ase --+--> clr
                  '--> sketchpalette

When the .ase file is created, anything coming from it is using Adobe/Generic RGB. The .clr file should stick to sRGB instead. This means we should not generate the .clr file from the .ase. The .sketchpalette is still correct.

Is the above correct, @shagadorn?

This is a sequel to #29.

Currently its #ECF2F2 but it should be #ECF0F2

(despite my non-ibm login, I am an IBM designer at Hursley Studio - Greg Lubel)

Please will you include a naming convention in the filenames, so it's easier to pick up the right one from my Downloads folder

The instructions call for this to be installed with npm install ibm-design-colors --save

I'm wondering if --save-dev isn't the more appropriate option?

This package currently offers an SCSS file and a JSON file. There are a few more useful formats that clients might use, which could be easily added, potentially including:

• SASS -- the indented syntax versus the CSS extension syntax
• LESS -- Less-CSS, an alternative to SASS which is quite widespread
• JS -- a simple Javascript module yielding the same data as the JSON file contents
• STYL -- Stylus, another alternative to SASS/LESS

On release, before publishing to bower and npm, generate a dist folder.

To be able to see that it's even there

I execute the following command and I get the error shown. Please assist.

iPhone:git aetomala$ sudo bower install ibm-colors --save-dev --allow-root
bower ECONNREFUSED Request to http://x1showcase.emmlabs.ibm.com:5678/packages/ibm-colors failed: connect ECONNREFUSED 9.38.9.10:5678

It would be nice to have a way to compare colors of different hues within the guide. Not necessarily like this but an example of dragging colors on top of each other to compare: http://www.colorplanpapers.com/50colours

should these names be switched?

Sketch Palette versions prior to 1.4 used hexadecimal values (#2a51b8), but as of release 1.4 use RGBA ({"red":0.05084943026304245,"green":0.41341209411621094,"blue":0.6547456979751587,"alpha":1}).

andrewfiorillo/sketch-palettes@237a27f

Hello,
I am looking for the license text for this open source package at "https://github.com/IBM-Design/colors/blob/master/LICENSE.md" which has links to following URLs. But both the links are broken.
http://www.ibm.com/design/language/resources.shtml
http://www.ibm.com/design/language/legal/download-agreement.shtml

I am seeing the following errors when I access those urls :
"Oops — that's not right!
Sorry, unless you really were hoping to find our 404 message, the page you were looking for has been moved or deleted"

Can someone please help fix these links?
Thank you!
Priya

https://docs.travis-ci.com/user/deployment/npm/

Looking through the code base, the next release is going to be a major breaking change. The reorganization of the repo introduces the following breaking changes:

• Eyeglass will no longer be able to find the Sass file, meaning that anyone using the Node Sass module system will break
• Sass file is no longer a partial, and will generate a CSS file. All module Sass files should be partials, not full files
• JavaScript files no longer in the previous spot, meaning anyone who relies on that will break

Hi James! You can delete this.

I think this may be an error in the documentation here https://www.ibm.com/design/language/resources/color-library/, so please close this issue and point me in the right direction if this is the wrong medium to report this error.

On the website, the "Color blind safe" version of Orange 40 is #fe6100. However, regular Orange 40 is #db7c00. The sass function color("orange", 40) returns #db7c00, which is valid for one of the Orange 40's but not the other.

Hi there! The URL in the description of this repository links to a "not found"-page (https://www.ibm.com/design/language/resources/swatchbook/). I believe this needs to be replaced with https://www.ibm.com/design/language/resources/color-library.

Currently the README.md say the following:

Neutral white, cool white, and warm white have four variations from 10 to 40.

It should say:

Neutral white, cool white, and warm white have four variations in ones from 1 to 4.

Related to #40. May actually remove .sketchpalette support instead since we have .clr support and it is a 3rd party plugin.

When viewed as a whole set there is a section of the palette where certain colors seem darker and/or more saturated than the neighboring colors of the same grade. Was unsure if this was needed for accessibility reasons that relate to warm colors so partially was just looking for some clarification

@seejamescode, can you bump and publish to NPM now that Sam's fix is merged?

Cool Gray 80 and 90 have a hue value of 300 but Cool Gray 1-70 have a hue value of 180.
Are they supposed to have the same hue? What is the logic around how color steps are determined? Just curious really.

The white color values (ie cool-white 40) check in here in the scss mixin and the json file seem to be incorrect given the color contrast guide as I can put purple-50 text on a cool-white-40 background and its perfectly accessible. I believe these values should actually be cool-white 4. As in drop the 0 on the end of all of the numbers.

Not sure what the standard is, but when consuming the colors from a design perspective the lightest colors have typically been referred to as the 0 version of that color, versus 1 which is the current naming scheme in v2.0. Would love to know if 1 is the official name for that variation of the colors, and to see if there was any chance we could move to 0 if so. Thanks!

As of now, we call a different tone for each color the core tone. These core tones are actually different for each color. A designer should not decide they are using the cores and assume they are obeying the 50-point accessibility rule. This collection of core tones simply look most appealing when together on a color wheel.

My question here: Is core the correct word for this? Are there any suggestions for alternatives?

The new .ase doesn't have each color group in its own folder which makes it difficult to read through/use the palette as effectively as before.

README only has Bower and @import, should add the NPM as well

https://www.npmjs.com/package/ibm-design-colors

https://github.com/IBM-Design/colors/blob/master/_ibm-colors.scss#L159 vs
https://github.com/IBM-Design/colors/blob/master/ibm-colors.json

http://stackoverflow.com/a/26702092/398574

Great example here: https://github.com/zaim/webcolors/

I get this error when I use the latest version of Eyeglass:

The following modules are incompatible with eyeglass 1.2.1:
  ibm-colors needed eyeglass ^0.8.3

I think this has to do with the needs property in the package.json in this module, but I'm not familiar with Eyeglass to know if that's true.

For the v2.0 branch, we have to run gulp twice to get a ibm-colors.sketchpalette or rely on an old version of ./ibm-colors.json. Even though the gulp task sketchpalette is dependent on gulp task partials, the task does not wait for ./ibm-colors.json to be built.

If anyone can work on this, please let me know!

currently green40 is #6eb400 but on https://www.ibm.com/design/language/resources/swatch-book.shtml its 5AA700

Currently reads "pluginVersion":"2.0.0-beta.1", referring to the version of the color palette, when it should read "compatibleVersion":"1.4","pluginVersion":"1.5", referring to the version of the Sketch app plugin.

I seem to be finding inconsistencies across the board in the hex codes across the CLR vs the Sketchpalette (have not tried the ASE) from the v2.0.

eg. Sketchpalette on left, CLR on right.

Aqua 10
Sketchpalette #6AEBF4
CLR #5DE8F1

Yellow Core/10
Sketchpalette #FED500
CLR #FDCE0A

Wondering if these came from the export process for the CLR?

As per the title. The Design Language pages have been removed from the IBM website.

Hi, I tried to use this with a PostCSS setup and found a conflict. PostCSS's color function plugin uses the same function name as your color palette function. Have you considered changing the function's name to something more specific (maybe palette)? Thanks for the great colors!

After resolving #60 with my pull request #61, this error is thrown by every compiled scss file that imports _ibm-colors.scss, regardless of whether or not the scss file actually uses any of the mixins from this library. I think it has something to do with css-loader and css modules.

Here's two errors indicative of all the rest.

ERROR in ./components/home/style.scss
Module build failed: ModuleBuildError: Module build failed: 
      @error $error-message;
     ^
      Color palette "#ff0" not found
      in /home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/src/style/mixins/_ibm-colors.scss (line 52, column 7)
    at runLoaders (/home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/webpack/lib/NormalModule.js:192:19)
    at /home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/sass-loader/node_modules/async/dist/async.js:2243:31)
    at Object.callback (/home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/sass-loader/node_modules/async/dist/async.js:906:16)
    at options.error (/home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/node_modules/node-sass/lib/index.js:294:32)
 @ ./components/home/index.js 12:13-36
 @ ./components/app.js
 @ ./index.js

ERROR in ../~/css-loader?{"modules":true,"localIdentName":"[local]--[hash:base64:5]","sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/sass-loader/lib/loader.js?{"sourceMap":false}!./components/newAnim/style.scss
    Module build failed: 
          @error $error-message;
         ^
          Color palette "#ff0" not found
          in /home/pipeline/7c29663d-e681-44c7-952e-8edee6d2bef9/src/style/mixins/_ibm-colors.scss (line 52, column 7)
Child extract-text-webpack-plugin:
        + 1 hidden modules

Any help would be much appreciated, at this point I'm stumped.

i.e. What exactly is blue-10, and how is blue-core different than blue-100?

https://github.com/IBM-Design/colors/blob/master/_ibm-colors.scss#L51

@function color($palette, $grade: 0, $alpha: 1) {
  // Because it's spelled gr(a|e)y and we've got spaces
  @if $palette == 'grey' {
    $palette: 'gray';
  }
  @else if $palette == 'warm-grey' or $palette == 'warm grey' or $palette == 'warm gray' {
    $palette: 'warm-gray';
  }
  @else if $palette == 'cool-grey' or $palette == 'cool grey' or $palette == 'cool gray' {
    $palette: 'cool-gray';
  }
  @else if $palette == 'neutral white' {
    $palette: 'neutral-white';
  }
  @else if $palette == 'cool white' {
    $palette: 'cool-white';
  }
  @else if $palette == 'warm white' {
    $palette: 'warm-white';
  }

  $plt: map-get($__ibm-color-palettes, $palette);

  @if $plt {
    $grd: map-get($plt, $grade);
    @return rgba($grd, $alpha);
  }

  $error-message: 'Color palette "#{$palette}" not found';
  @if not $found-index { // broken line
    @if feature-exists(at-error) {
      @error $error-message; //expected line
    }
    @else {
      @warn $error-message;  //expected line
    }
  }

  @return false;
}

It looks like $found-index is undefined in this function, I guess it is accidently copied from _ibm-find-color()

The documentation states that we can retrieve a core color by not supplying a grade like this:

.foo {
  color: color('blue');
}

However, I get this error on all colors except for white:

Message:
    node_modules/ibm-design-colors/_ibm-colors.scss
Error: argument `$color` of `rgba($color, $alpha)` must be a color

       Backtrace:
       	node_modules/ibm-design-colors/_ibm-colors.scss:52, in function `rgba`
       	node_modules/ibm-design-colors/_ibm-colors.scss:52, in function `color`
       	dashboard/src/styles/scss/_modal.scss:8
        on line 52 of node_modules/ibm-design-colors/_ibm-colors.scss
>>     @return rgba($grd, $alpha);
   ------------^