@invisionag/iris-colors - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

CHANGELOG.md

@@ -15,1 +15,15 @@ # Changelog
 - Usage of the colors has changed based on the new structure. You can call a color now like this: `${colors.system.ui100}`
+
+#### Migration
+
+In most cases, colors can be replaced according to this table:
+
+| Old Value          | New Value                     |
+| ------------------ | ----------------------------- |
+| `colors.black40`   | `colors.system.ui300`         |
+| `colors.black80`   | `colors.system.typography100` |
+| `colors.black100`  | `colors.system.typography200` |
+| `colors.red100`    | `colors.system.error100`      |
+| `colors.green100`  | `colors.system.success100`    |
+| `colors.yellow100` | `colors.system.warning100`    |
+| `colors.blue100`   | `colors.system.primary100`    |

dist/index.js

@@ -100,3 +100,6 @@ module.exports =
 __webpack_require__.r(__webpack_exports__);
-/* WEBPACK VAR INJECTION */(function(module) {(function () {
+/* WEBPACK VAR INJECTION */(function(module) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "system", function() { return system; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "brand", function() { return brand; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "visualization", function() { return visualization; });
+(function () {
   var enterModule = __webpack_require__(0).enterModule;
@@ -196,6 +199,6 @@
 
-  reactHotLoader.register(system, "system", "/Users/tobias.koenig/Documents/code/iris/packages/colors/src/index.js");
-  reactHotLoader.register(brand, "brand", "/Users/tobias.koenig/Documents/code/iris/packages/colors/src/index.js");
-  reactHotLoader.register(visualization, "visualization", "/Users/tobias.koenig/Documents/code/iris/packages/colors/src/index.js");
-  reactHotLoader.register(_default, "default", "/Users/tobias.koenig/Documents/code/iris/packages/colors/src/index.js");
+  reactHotLoader.register(system, "system", "/Users/fbecker/repos/iris/packages/colors/src/index.js");
+  reactHotLoader.register(brand, "brand", "/Users/fbecker/repos/iris/packages/colors/src/index.js");
+  reactHotLoader.register(visualization, "visualization", "/Users/fbecker/repos/iris/packages/colors/src/index.js");
+  reactHotLoader.register(_default, "default", "/Users/fbecker/repos/iris/packages/colors/src/index.js");
   leaveModule(module);
@@ -202,0 +205,0 @@ })();

explainers.js

@@ -0,5 +1,6 @@
+/* prettier-ignore */
+
 const system = {
   ui0: 'font-color, default card background',
-  ui100:
-    'default app background color, default hover background for default buttons, cards, table row bg',
+  ui100: 'default app background color, default hover background for default buttons, cards, table row bg',
   ui200: 'default disabled button background, secondary background',
@@ -11,14 +12,11 @@ ui300: 'default border, default button border, secondary background',
   typography100: 'secondary font color, disabled button text, icons',
-  typography200: 'default font color,  default headline color, icons',
+  typography200: 'default font color, default headline color, icons',
 
-  primary100:
-    'primary interaction color, default primary button color,  link color, radio & checkbox button hover',
+  primary100: 'primary interaction color, default primary button color, focus outline color , link color, radio & checkbox button hover',
   primary200: 'default hover color, active radio & checkbox button hover',
-  error100:
-    'default error color,  error inputfield border, error statuscard highlighting bar',
+  error100: 'default error color, error inputfield border, error statuscard highlighting bar',
   error200: 'default error hover color, default error button border',
   success100: 'success button bg, success color, success statuscard bar',
   success200: 'success button border, success hover color, font color',
-  warning100:
-    'default warning color, don’t use as font color, don’t use as bg color for white font',
+  warning100: 'default warning color, don’t use as font color, don’t use as bg color for white font',
 };
@@ -25,0 +23,0 @@

package.json

 {
   "name": "@invisionag/iris-colors",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "main": "dist/index.js",
   "repository": "[e-mail]:ivx/iris.git",
   "license": "MIT",
-  "gitHead": "7860d8546139f72c9dbda8c75c585ce857c2d6d5"
+  "gitHead": "83f2401b00a487fc5691f6fa1f29de9bcaabd8b0"
 }

README.md

@@ -11,2 +11,6 @@ ```js
 
+```js
+import { brand } from '@invisionag/iris-colors';
+```
+
 **System**
@@ -16,2 +20,6 @@
 
+```js
+import { system } from '@invisionag/iris-colors';
+```
+
 **Data Visualization**
@@ -21,5 +29,9 @@
 
+```js
+import { visualization } from '@invisionag/iris-colors';
+```
+
 ### Usage:
 
-```
+```js
 export const StyledItem = styled.div`
@@ -29,1 +41,25 @@ background-color: ${colors.system.ui100};
 ```
+
+**Brand**
+
+```js
+export const StyledItem = styled.div`
+  background-color: ${brand.injixo100};
+`;
+```
+
+**System**
+
+```js
+export const StyledItem = styled.div`
+  background-color: ${system.ui100};
+`;
+```
+
+**Data Visualization**
+
+```js
+export const StyledItem = styled.div`
+  background-color: ${visualization.ink50};
+`;
+```

src/index.js

 // @flow
 
-const system = {
+export const system = {
   ui0: '#ffffff',
@@ -23,3 +23,3 @@ ui100: '#f5f6f7',
 
-const brand = {
+export const brand = {
   injixo100: '#1cb396',
@@ -31,3 +31,3 @@ injixo200: '#059898',
 
-const visualization = {
+export const visualization = {
   adherenceInGrey: '#d4d3d4',
@@ -34,0 +34,0 @@ adherenceOutRed: '#7f0000',

No alert changes

Improved metrics

Total package byte prevSize

23151

increased by24.03%

Number of package files

10

increased by25%

Lines of code

525

increased by40%

Number of lines in readme file

62

increased by138.46%

No dependency changes