@carbon/colors - npm Package Compare versions

Comparing version 0.0.1-alpha.7 to 0.0.1-alpha.8

__tests__/colors-test.js

@@ -7,3 +7,3 @@ /**
 
-const { colors, tokens } = require('../src');
+import { colors, tokens } from '../src';
 
@@ -10,0 +10,0 @@ test('colors', () => {

package.json

 {
   "name": "@carbon/colors",
-  "version": "0.0.1-alpha.7",
-  "main": "src/index.js",
+  "version": "0.0.1-alpha.8",
+  "main": "lib/index.js",
+  "module": "es/index.js",
   "license": "Apache-2.0",
@@ -15,9 +16,12 @@ "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/colors",
   "scripts": {
-    "build": "node tasks/build.js"
+    "build": "yarn clean && bundler bundle src/index.js --name CarbonColors && node tasks/build.js",
+    "clean": "rimraf es lib umd scss"
   },
   "devDependencies": {
-    "@carbon/cli-reporter": "0.0.1-alpha.7",
+    "@carbon/bundler": "0.0.1-alpha.8",
+    "@carbon/cli-reporter": "0.0.1-alpha.8",
     "fs-extra": "^7.0.0",
     "node-sass": "^4.9.4",
-    "prettier": "^1.14.3"
+    "prettier": "^1.14.3",
+    "rimraf": "^2.6.2"
   },
@@ -24,0 +28,0 @@ "eyeglass": {

README.md

@@ -20,4 +20,58 @@ # `@carbon/colors`
 
+## Usage
+
+You can use the `@carbon/colors` module in your JavaScript, in addition to
+your Sass.
+
+### JavaScript
+
+For JavaScript, you can import and use this module by doing the
+following in your code:
+
+```js
+// ESM
+import { colors, tokens } from '@carbon/colors';
+
+// CommonJS
+const { colors, tokens } = require('@carbon/colors');
+```
+
+Each color swatch is exported on the `colors` object and can be called by
+specifying the name and grade, for example:
+
+```js
+colors.black;
+colors.blue50;
+colors.warmGray100;
+```
+
+Similary, you can access tokens on the `tokens` object, for example:
+
+```js
+tokens.brand01;
+tokens.activePrimary;
+```
+
+### Sass
+
+In Sass, you can import the files individual by doing:
+
+```scss
+@import '@carbon/colors/scss/colors';
+@import '@carbon/colors/scss/tokens';
+```
+
+This will make all the colors and token variables available to you in your file.
+They are named with the following structure: `$ibm-color__swatch--grade`, for
+example:
+
+```scss
+$ibm-color__blue--50;
+$ibm-color__warm-gray--100;
+```
+
+Similarly, you can access the `tokens` variables after including them.
+
 ## 🤲 Contributing
 
 To learn more about how to contribute, look [here](/.github/CONTRIBUTING.md)!

src/build.js

@@ -7,3 +7,3 @@ 'use strict';
 const prettier = require('prettier');
-const { colors, tokens } = require('./');
+const { colors, tokens } = require('../lib');
 
@@ -10,0 +10,0 @@ const SCSS_DIR = path.resolve(__dirname, '../scss');

src/index.js

@@ -1,4 +0,2 @@
-'use strict';
-
-const colors = {
+export const colors = {
   black: '#000000',
@@ -119,3 +117,3 @@ white: '#ffffff',
 
-const tokens = {
+export const tokens = {
   brand01: colors.blue60,
@@ -172,6 +170,1 @@ brand02: colors.blue60,
 };
-
-module.exports = {
-  colors,
-  tokens,
-};

No alert changes

Improved metrics

Total package byte prevSize

26708

increased by55.54%

Number of package files

10

increased by11.11%

Lines of code

733

increased by170.48%

Number of lines in readme file

77

increased by234.78%

Worsened metrics

Dev dependency count

6

increased by50%

No dependency changes