@carbon/colors 10.1.1 → 10.2.0

package/LICENSE

@@ -178,7 +178,7 @@
    APPENDIX: How to apply the Apache License to your work.
 
       To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
+      boilerplate notice, with the fields enclosed by brackets "{}"
       replaced with your own identifying information. (Don't include
       the brackets!)  The text should be enclosed in the appropriate
       comment syntax for the file format. We also recommend that a
@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2018 IBM Corp.
+   Copyright 2015 IBM Corp.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,19 +1,18 @@
 # @carbon/colors
 
-> Colors for digital and software products using the Carbon Design
-> System
+> Colors for digital and software products using the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/colors` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/colors` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/colors
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/colors
@@ -21,8 +20,8 @@ yarn add @carbon/colors
 
 ## Usage
 
-You can use the `@carbon/colors` module in your JavaScript, in
-addition to your Sass.
+You can use the `@carbon/colors` module in your JavaScript, in addition to your
+Sass.
 
 ### Sass
 
@@ -32,10 +31,11 @@ In Sass, you can import the files individual by doing:
 @import '@carbon/colors/scss/colors';
 ```
 
-This file automatically includes the `carbon--colors` mixin which
-initializes all the color variables for the IBM Design Language.
+This file automatically includes the `carbon--colors` mixin which initializes
+all the color variables for the IBM Design Language.
 
-These color variables follow the naming convention: `$carbon--<swatch>-<grade>`. For example:
+These color variables follow the naming convention: `$carbon--<swatch>-<grade>`.
+For example:
 
 ```scss
 $carbon--blue-50;
@@ -44,7 +44,8 @@ $carbon--black-100;
 $carbon--white-0;
 ```
 
-You can also use the shorthand form of these colors by dropping the `carbon--` namespace:
+You can also use the shorthand form of these colors by dropping the `carbon--`
+namespace:
 
 ```scss
 $blue-50;
@@ -54,13 +55,11 @@ $white-0;
 ```
 
 _Note: the shorthand variables require that you do not have any other
-conflicting variables in your setup. Namespaced variables are always
-preferred for this reason, unless you are confident that no collisions
-will occur._
+conflicting variables in your setup. Namespaced variables are always preferred
+for this reason, unless you are confident that no collisions will occur._
 
-If you would like you choose when these variables are defined, then
-you can call the `carbon--colors` mixin directly by importing the
-following file:
+If you would like you choose when these variables are defined, then you can call
+the `carbon--colors` mixin directly by importing the following file:
 
 ```scss
 @import '@carbon/colors/scss/mixins';
@@ -69,11 +68,11 @@ following file:
 @include carbon--colors();
 ```
 
-Alongside the color variables detailed above, we also provide a map of
-colors so that you can programmatically use these values. This map is
-called `$carbon--colors` and each key is the name of a swatch. The
-value of these swatches is also a map, but each key is now the grade.
-In code, this looks like the following:
+Alongside the color variables detailed above, we also provide a map of colors so
+that you can programmatically use these values. This map is called
+`$carbon--colors` and each key is the name of a swatch. The value of these
+swatches is also a map, but each key is now the grade. In code, this looks like
+the following:
 
 <!-- prettier-ignore-start -->
 
@@ -88,27 +87,27 @@ $carbon--colors: (
 
 <!-- prettier-ignore-end -->
 
-You can include this variable by including `@carbon/colors/scss/colors`
-or calling the `carbon--colors()` mixin directly.
+You can include this variable by including `@carbon/colors/scss/colors` or
+calling the `carbon--colors()` mixin directly.
 
 #### Migrating from previous versions
 
-If you were originally using a project that had color variables
-defined as `$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also use the entrypoint described above to
-access these colors. They are meant as an easier way to help adopt
-these packages. However, these variables will be removed in the next
-release of Carbon.
+If you were originally using a project that had color variables defined as
+`$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also
+use the entrypoint described above to access these colors. They are meant as an
+easier way to help adopt these packages. However, these variables will be
+removed in the next release of Carbon.
 
-Similar to previous efforts, we also provide colors in the formats
-mentioned above. For example:
+Similar to previous efforts, we also provide colors in the formats mentioned
+above. For example:
 
 ```scss
 $ibm-color__blue-50;
 $ibm-color__warm-gray-100;
 ```
 
-If you would like a mixin to conditionally include these variables,
-you can include the mixin by using:
+If you would like a mixin to conditionally include these variables, you can
+include the mixin by using:
 
 ```scss
 @import '@carbon/colors/scss/mixins';
@@ -118,8 +117,8 @@ you can include the mixin by using:
 
 ### JavaScript
 
-For JavaScript, you can import and use this module by doing the
-following in your code:
+For JavaScript, you can import and use this module by doing the following in
+your code:
 
 ```js
 // ESM
@@ -129,9 +128,8 @@ import { black, blue, warmGray } from '@carbon/colors';
 const { black, blue, warmGray } = require('@carbon/colors');
 ```
 
-Each color swatch is exported as a variable, and each color name is
-also exported as an object that can be called by specifying grade, for
-example:
+Each color swatch is exported as a variable, and each color name is also
+exported as an object that can be called by specifying grade, for example:
 
 ```js
 black;
@@ -147,10 +145,9 @@ If you're looking for `@carbon/colors` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/colors",
   "description": "Colors for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,17 +25,18 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && bundler bundle src/index.js --name CarbonColors && node tasks/build.js && bundler check 'scss/*.scss' && bundler sassdoc 'scss'",
+    "build": "yarn clean && bundler bundle src/index.js --name CarbonColors && node tasks/build.js && bundler check 'scss/*.scss' && bundler sassdoc 'scss/*.scss'",
     "clean": "rimraf css es lib umd scss"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
-    "@carbon/cli-reporter": "10.0.0",
-    "@carbon/test-utils": "10.0.0",
+    "@carbon/bundler": "10.2.0",
+    "@carbon/cli-reporter": "10.2.0",
+    "@carbon/scss-generator": "10.2.0",
+    "@carbon/test-utils": "10.2.0",
     "change-case": "^3.0.2",
+    "core-js": "^3.0.1",
     "fs-extra": "^7.0.0",
     "node-sass": "^4.11.0",
-    "prettier": "^1.14.3",
     "rimraf": "^2.6.2"
   },
   "eyeglass": {
@@ -44,5 +45,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "0931cfcf4a7636d6e3f5aff3ab8d7d7f2d4ecb99"
+  "gitHead": "e71825a0cf44f6f41fee7d2b0dd9c57d7bda126a"
 }

package/scss/colors.scss

@@ -5,9 +5,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 @import './mixins';
-
 // Deprecated ☠️
 @include ibm--colors();
 // Preferred

package/scss/index.scss

@@ -0,0 +1,12 @@
+// Code generated by @carbon/colors. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+@import './mixins';
+// Deprecated ☠️
+@include ibm--colors();
+// Preferred
+@include carbon--colors();

package/scss/mixins.scss

@@ -5,12 +5,11 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 /// Define color variables
 /// @access public
 /// @group @carbon/colors
 /// @deprecated Use `$carbon--colors` going forward
-@mixin ibm--colors {
+@mixin ibm--colors() {
   $ibm-color__black-100: #000000 !default !global;
   $ibm-color__blue-10: #edf4ff !default !global;
   $ibm-color__blue-20: #c9deff !default !global;
@@ -115,10 +114,9 @@
   $ibm-color__warm-gray-100: #1a1717 !default !global;
   $ibm-color__white-0: #ffffff !default !global;
   $ibm-color__yellow-20: #fdd13a !default !global;
-
   $ibm-color-map: (
     'black': (
-      100: #000000
+      100: #000000,
     ),
     'blue': (
       10: #edf4ff,
@@ -130,7 +128,19 @@
       70: #054ada,
       80: #0530ad,
       90: #061f80,
-      100: #051243
+      100: #051243,
+    ),
+    'cool-gray': (
+      10: #f2f4f8,
+      20: #d5d9e0,
+      30: #b9bfc7,
+      40: #9fa5ad,
+      50: #868d95,
+      60: #697077,
+      70: #50565b,
+      80: #373d42,
+      90: #242a2e,
+      100: #13171a,
     ),
     'coolGray': (
       10: #f2f4f8,
@@ -142,7 +152,7 @@
       70: #50565b,
       80: #373d42,
       90: #242a2e,
-      100: #13171a
+      100: #13171a,
     ),
     'cyan': (
       10: #e3f6ff,
@@ -154,7 +164,7 @@
       70: #0058a1,
       80: #003d73,
       90: #002b50,
-      100: #07192b
+      100: #07192b,
     ),
     'gray': (
       10: #f3f3f3,
@@ -166,7 +176,7 @@
       70: #565656,
       80: #3d3d3d,
       90: #282828,
-      100: #171717
+      100: #171717,
     ),
     'green': (
       10: #dafbe4,
@@ -178,7 +188,7 @@
       70: #10642a,
       80: #054719,
       90: #01330f,
-      100: #081b09
+      100: #081b09,
     ),
     'magenta': (
       10: #fff0f6,
@@ -190,10 +200,10 @@
       70: #a11950,
       80: #760a3a,
       90: #57002b,
-      100: #2a0a16
+      100: #2a0a16,
     ),
     'orange': (
-      40: #fc7b1e
+      40: #fc7b1e,
     ),
     'purple': (
       10: #f7f1ff,
@@ -205,7 +215,7 @@
       70: #6e32c9,
       80: #4f2196,
       90: #38146b,
-      100: #1e1033
+      100: #1e1033,
     ),
     'red': (
       10: #fff0f1,
@@ -217,7 +227,7 @@
       70: #a51920,
       80: #750e13,
       90: #570408,
-      100: #2c080a
+      100: #2c080a,
     ),
     'teal': (
       10: #dbfbfb,
@@ -229,7 +239,19 @@
       70: #006161,
       80: #004548,
       90: #003137,
-      100: #081a1c
+      100: #081a1c,
+    ),
+    'warm-gray': (
+      10: #f7f3f1,
+      20: #e0dbda,
+      30: #c1bcbb,
+      40: #a7a2a2,
+      50: #8f8b8b,
+      60: #726e6e,
+      70: #595555,
+      80: #403c3c,
+      90: #2b2828,
+      100: #1a1717,
     ),
     'warmGray': (
       10: #f7f3f1,
@@ -241,21 +263,20 @@
       70: #595555,
       80: #403c3c,
       90: #2b2828,
-      100: #1a1717
+      100: #1a1717,
     ),
     'white': (
-      0: #ffffff
+      0: #ffffff,
     ),
     'yellow': (
-      20: #fdd13a
-    )
+      20: #fdd13a,
+    ),
   ) !default !global;
 }
-
 /// Define color variables
 /// @access public
 /// @group @carbon/colors
-@mixin carbon--colors {
+@mixin carbon--colors() {
   $carbon--black-100: #000000 !default !global;
   $carbon--blue-10: #edf4ff !default !global;
   $carbon--blue-20: #c9deff !default !global;
@@ -466,7 +487,7 @@
   $yellow-20: #fdd13a !default !global;
   $carbon--colors: (
     'black': (
-      100: #000000
+      100: #000000,
     ),
     'blue': (
       10: #edf4ff,
@@ -478,7 +499,19 @@
       70: #054ada,
       80: #0530ad,
       90: #061f80,
-      100: #051243
+      100: #051243,
+    ),
+    'cool-gray': (
+      10: #f2f4f8,
+      20: #d5d9e0,
+      30: #b9bfc7,
+      40: #9fa5ad,
+      50: #868d95,
+      60: #697077,
+      70: #50565b,
+      80: #373d42,
+      90: #242a2e,
+      100: #13171a,
     ),
     'coolGray': (
       10: #f2f4f8,
@@ -490,7 +523,7 @@
       70: #50565b,
       80: #373d42,
       90: #242a2e,
-      100: #13171a
+      100: #13171a,
     ),
     'cyan': (
       10: #e3f6ff,
@@ -502,7 +535,7 @@
       70: #0058a1,
       80: #003d73,
       90: #002b50,
-      100: #07192b
+      100: #07192b,
     ),
     'gray': (
       10: #f3f3f3,
@@ -514,7 +547,7 @@
       70: #565656,
       80: #3d3d3d,
       90: #282828,
-      100: #171717
+      100: #171717,
     ),
     'green': (
       10: #dafbe4,
@@ -526,7 +559,7 @@
       70: #10642a,
       80: #054719,
       90: #01330f,
-      100: #081b09
+      100: #081b09,
     ),
     'magenta': (
       10: #fff0f6,
@@ -538,10 +571,10 @@
       70: #a11950,
       80: #760a3a,
       90: #57002b,
-      100: #2a0a16
+      100: #2a0a16,
     ),
     'orange': (
-      40: #fc7b1e
+      40: #fc7b1e,
     ),
     'purple': (
       10: #f7f1ff,
@@ -553,7 +586,7 @@
       70: #6e32c9,
       80: #4f2196,
       90: #38146b,
-      100: #1e1033
+      100: #1e1033,
     ),
     'red': (
       10: #fff0f1,
@@ -565,7 +598,7 @@
       70: #a51920,
       80: #750e13,
       90: #570408,
-      100: #2c080a
+      100: #2c080a,
     ),
     'teal': (
       10: #dbfbfb,
@@ -577,7 +610,19 @@
       70: #006161,
       80: #004548,
       90: #003137,
-      100: #081a1c
+      100: #081a1c,
+    ),
+    'warm-gray': (
+      10: #f7f3f1,
+      20: #e0dbda,
+      30: #c1bcbb,
+      40: #a7a2a2,
+      50: #8f8b8b,
+      60: #726e6e,
+      70: #595555,
+      80: #403c3c,
+      90: #2b2828,
+      100: #1a1717,
     ),
     'warmGray': (
       10: #f7f3f1,
@@ -589,13 +634,13 @@
       70: #595555,
       80: #403c3c,
       90: #2b2828,
-      100: #1a1717
+      100: #1a1717,
     ),
     'white': (
-      0: #ffffff
+      0: #ffffff,
     ),
     'yellow': (
-      20: #fdd13a
-    )
+      20: #fdd13a,
+    ),
   ) !default !global;
 }