cf-style-const - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

es/variables.js

@@ -0,1 +1,6 @@
+import { color } from 'cf-style-container';
+
+var colorOffsetLight = '+15%';
+var colorOffsetDark = '-7%';
+
 export default {
@@ -8,3 +13,3 @@ fontSize: '15px',
   rem: '1rem',
-  fontFamily: 'inherit',
+  fontFamily: '"Open Sans", Helvetica, Arial, sans-serif',
   weightLight: 300,
@@ -18,5 +23,11 @@ weightNormal: 400,
   arrowSize: '5px',
+  disabledBackground: '#ededed',
+  bodyBackground: '#ebebeb',
+  bodyAccentColor: color('white lightness(-80%)'),
+  bodyOffsetColor: color('white lightness(-53%)'),
+  fontColor: color('white lightness(-80%)'),
   colorWhite: 'white',
-  colorOffsetLight: '+15%',
-  colorOffsetDark: '-7%',
+  colorBlack: 'black',
+  colorOffsetLight: colorOffsetLight,
+  colorOffsetDark: colorOffsetDark,
   colorInfo: '#00a9eb',
@@ -26,10 +37,30 @@ colorSuccess: '#68970f',
   colorError: '#ff3100',
-  colorMuted: '#gray',
-  colorDarkGray: '#434148',
-  defaultBackground: 'gray',
-  primaryBackground: '#00a9eb',
-  successBackground: '#68970f',
-  warningBackground: '#fca520',
-  dangerBackground: '#ff3100',
-  disabledBackground: '#ededed'
+  colorMuted: color('white lightness(-51.25%)'),
+  colorSmoke: '#f2f2f2',
+  colorBlue: '#2f7bbf',
+  colorBlueLight: color('#2f7bbf lightness(' + colorOffsetLight + ')'),
+  colorBlueDark: color('#2f7bbf lightness(' + colorOffsetDark + ')'),
+  colorOrange: '#ff7900',
+  colorOrangeLight: color('#ff7900 lightness(' + colorOffsetLight + ')'),
+  colorOrangeDark: color('#ff7900 lightness(' + colorOffsetDark + ')'),
+  colorGray: color('white lightness(-51.25%)'),
+  colorGrayLight: color('white lightness(-13%)'),
+  colorGrayDark: color('white lightness(-80%)'),
+  colorGreen: '#9bca3e',
+  colorGreenLight: color('#9bca3e lightness(' + colorOffsetLight + ')'),
+  colorGreenDark: color('#9bca3e lightness(' + colorOffsetDark + ')'),
+  colorRed: '#bd2527',
+  colorRedLight: color('#bd2527 lightness(' + colorOffsetLight + ')'),
+  colorRedDark: color('#bd2527 lightness(' + colorOffsetDark + ')'),
+  colorYellow: '#ffd24d',
+  colorYellowLight: color('#ffd24d lightness(' + colorOffsetLight + ')'),
+  colorYellowDark: color('#ffd24d lightness(' + colorOffsetDark + ')'),
+  colorPink: '#d91698',
+  colorPinkLight: color('#d91698 lightness(' + colorOffsetLight + ')'),
+  colorPinkDark: color('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorPurple: '#9545e5',
+  colorPurpleLight: color('#d91698 lightness(' + colorOffsetLight + ')'),
+  colorPurpleDark: color('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorTwitterBlue: '#00aced',
+  colorFacebookBlue: '#3b5998'
 };

lib/variables.js

@@ -6,2 +6,8 @@ 'use strict';
 });
+
+var _cfStyleContainer = require('cf-style-container');
+
+var colorOffsetLight = '+15%';
+var colorOffsetDark = '-7%';
+
 exports.default = {
@@ -14,3 +20,3 @@ fontSize: '15px',
   rem: '1rem',
-  fontFamily: 'inherit',
+  fontFamily: '"Open Sans", Helvetica, Arial, sans-serif',
   weightLight: 300,
@@ -24,5 +30,11 @@ weightNormal: 400,
   arrowSize: '5px',
+  disabledBackground: '#ededed',
+  bodyBackground: '#ebebeb',
+  bodyAccentColor: (0, _cfStyleContainer.color)('white lightness(-80%)'),
+  bodyOffsetColor: (0, _cfStyleContainer.color)('white lightness(-53%)'),
+  fontColor: (0, _cfStyleContainer.color)('white lightness(-80%)'),
   colorWhite: 'white',
-  colorOffsetLight: '+15%',
-  colorOffsetDark: '-7%',
+  colorBlack: 'black',
+  colorOffsetLight: colorOffsetLight,
+  colorOffsetDark: colorOffsetDark,
   colorInfo: '#00a9eb',
@@ -32,10 +44,30 @@ colorSuccess: '#68970f',
   colorError: '#ff3100',
-  colorMuted: '#gray',
-  colorDarkGray: '#434148',
-  defaultBackground: 'gray',
-  primaryBackground: '#00a9eb',
-  successBackground: '#68970f',
-  warningBackground: '#fca520',
-  dangerBackground: '#ff3100',
-  disabledBackground: '#ededed'
+  colorMuted: (0, _cfStyleContainer.color)('white lightness(-51.25%)'),
+  colorSmoke: '#f2f2f2',
+  colorBlue: '#2f7bbf',
+  colorBlueLight: (0, _cfStyleContainer.color)('#2f7bbf lightness(' + colorOffsetLight + ')'),
+  colorBlueDark: (0, _cfStyleContainer.color)('#2f7bbf lightness(' + colorOffsetDark + ')'),
+  colorOrange: '#ff7900',
+  colorOrangeLight: (0, _cfStyleContainer.color)('#ff7900 lightness(' + colorOffsetLight + ')'),
+  colorOrangeDark: (0, _cfStyleContainer.color)('#ff7900 lightness(' + colorOffsetDark + ')'),
+  colorGray: (0, _cfStyleContainer.color)('white lightness(-51.25%)'),
+  colorGrayLight: (0, _cfStyleContainer.color)('white lightness(-13%)'),
+  colorGrayDark: (0, _cfStyleContainer.color)('white lightness(-80%)'),
+  colorGreen: '#9bca3e',
+  colorGreenLight: (0, _cfStyleContainer.color)('#9bca3e lightness(' + colorOffsetLight + ')'),
+  colorGreenDark: (0, _cfStyleContainer.color)('#9bca3e lightness(' + colorOffsetDark + ')'),
+  colorRed: '#bd2527',
+  colorRedLight: (0, _cfStyleContainer.color)('#bd2527 lightness(' + colorOffsetLight + ')'),
+  colorRedDark: (0, _cfStyleContainer.color)('#bd2527 lightness(' + colorOffsetDark + ')'),
+  colorYellow: '#ffd24d',
+  colorYellowLight: (0, _cfStyleContainer.color)('#ffd24d lightness(' + colorOffsetLight + ')'),
+  colorYellowDark: (0, _cfStyleContainer.color)('#ffd24d lightness(' + colorOffsetDark + ')'),
+  colorPink: '#d91698',
+  colorPinkLight: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetLight + ')'),
+  colorPinkDark: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorPurple: '#9545e5',
+  colorPurpleLight: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetLight + ')'),
+  colorPurpleDark: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorTwitterBlue: '#00aced',
+  colorFacebookBlue: '#3b5998'
 };

package.json

 {
   "name": "cf-style-const",
   "description": "Cloudflare Style Constants",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "lib/index.js",
@@ -14,4 +14,4 @@ "module": "es/index.js",
   "dependencies": {
-    "css-color-function": "^1.3.0"
+    "cf-style-container": "^0.2.0"
   }
 }

src/variables.js

@@ -0,1 +1,6 @@
+import { color } from 'cf-style-container';
+
+const colorOffsetLight = '+15%';
+const colorOffsetDark = '-7%';
+
 export default {
@@ -8,3 +13,3 @@ fontSize: '15px',
   rem: '1rem',
-  fontFamily: 'inherit',
+  fontFamily: '"Open Sans", Helvetica, Arial, sans-serif',
   weightLight: 300,
@@ -18,5 +23,11 @@ weightNormal: 400,
   arrowSize: '5px',
+  disabledBackground: '#ededed',
+  bodyBackground: '#ebebeb',
+  bodyAccentColor: color('white lightness(-80%)'),
+  bodyOffsetColor: color('white lightness(-53%)'),
+  fontColor: color('white lightness(-80%)'),
   colorWhite: 'white',
-  colorOffsetLight: '+15%',
-  colorOffsetDark: '-7%',
+  colorBlack: 'black',
+  colorOffsetLight,
+  colorOffsetDark,
   colorInfo: '#00a9eb',
@@ -26,10 +37,30 @@ colorSuccess: '#68970f',
   colorError: '#ff3100',
-  colorMuted: '#gray',
-  colorDarkGray: '#434148',
-  defaultBackground: 'gray',
-  primaryBackground: '#00a9eb',
-  successBackground: '#68970f',
-  warningBackground: '#fca520',
-  dangerBackground: '#ff3100',
-  disabledBackground: '#ededed'
+  colorMuted: color('white lightness(-51.25%)'),
+  colorSmoke: '#f2f2f2',
+  colorBlue: '#2f7bbf',
+  colorBlueLight: color(`#2f7bbf lightness(${colorOffsetLight})`),
+  colorBlueDark: color(`#2f7bbf lightness(${colorOffsetDark})`),
+  colorOrange: '#ff7900',
+  colorOrangeLight: color(`#ff7900 lightness(${colorOffsetLight})`),
+  colorOrangeDark: color(`#ff7900 lightness(${colorOffsetDark})`),
+  colorGray: color('white lightness(-51.25%)'),
+  colorGrayLight: color('white lightness(-13%)'),
+  colorGrayDark: color('white lightness(-80%)'),
+  colorGreen: '#9bca3e',
+  colorGreenLight: color(`#9bca3e lightness(${colorOffsetLight})`),
+  colorGreenDark: color(`#9bca3e lightness(${colorOffsetDark})`),
+  colorRed: '#bd2527',
+  colorRedLight: color(`#bd2527 lightness(${colorOffsetLight})`),
+  colorRedDark: color(`#bd2527 lightness(${colorOffsetDark})`),
+  colorYellow: '#ffd24d',
+  colorYellowLight: color(`#ffd24d lightness(${colorOffsetLight})`),
+  colorYellowDark: color(`#ffd24d lightness(${colorOffsetDark})`),
+  colorPink: '#d91698',
+  colorPinkLight: color(`#d91698 lightness(${colorOffsetLight})`),
+  colorPinkDark: color(`#d91698 lightness(${colorOffsetDark})`),
+  colorPurple: '#9545e5',
+  colorPurpleLight: color(`#d91698 lightness(${colorOffsetLight})`),
+  colorPurpleDark: color(`#d91698 lightness(${colorOffsetDark})`),
+  colorTwitterBlue: '#00aced',
+  colorFacebookBlue: '#3b5998'
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15969

increased by48.87%

Lines of code

354

increased by32.58%

Worsened metrics

Number of downloads

48

decreased by-81.82%

Dependency changes

• + Addedcf-style-container@^0.2.0

• + Addedcf-style-container@0.2.3(transitive)

• + Addedcss-in-js-utils@1.0.3(transitive)

• + Addedfela@4.3.5(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-fela@4.3.5(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removedcss-color-function@^1.3.0

• - Removedbalanced-match@0.1.0(transitive)

• - Removedclone@1.0.4(transitive)

• - Removedcolor@0.11.4(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedcolor-string@0.3.0(transitive)

• - Removedcss-color-function@1.3.3(transitive)

• - Removeddebug@3.2.7(transitive)

• - Removedms@2.1.3(transitive)

• - Removedrgb@0.1.0(transitive)