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'
 };

No alert changes

Improved metrics

Total package byte prevSize

15969

48.87%

Lines of code

354

32.58%

Dependency changes

• + Added

  cf-style-container@^0.2.0

• + Added

  cf-style-container@0.2.3
  (transitive)

• + Added

  css-in-js-utils@1.0.3
  (transitive)

• + Added

  fela@4.3.5
  (transitive)

• + Added

  hyphenate-style-name@1.1.0
  (transitive)

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  prop-types@15.8.1
  (transitive)

• + Added

  react@16.14.0
  (transitive)

• + Added

  react-fela@4.3.5
  (transitive)

• + Added

  react-is@16.13.1
  (transitive)

• - Removed

  css-color-function@^1.3.0

• - Removed

  balanced-match@0.1.0
  (transitive)

• - Removed

  clone@1.0.4
  (transitive)

• - Removed

  color@0.11.4
  (transitive)

• - Removed

  color-convert@1.9.3
  (transitive)

• - Removed

  color-name@1.1.3
  (transitive)

• - Removed

  color-string@0.3.0
  (transitive)

• - Removed

  css-color-function@1.3.3
  (transitive)

• - Removed

  debug@3.2.7
  (transitive)

• - Removed

  ms@2.1.3
  (transitive)

• - Removed

  rgb@0.1.0
  (transitive)