cf-style-const - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

es/variables.js

@@ -1,5 +0,5 @@
-import { color } from 'cf-style-container';
+import { lighten, darken } from 'polished';
 
-var colorOffsetLight = '+15%';
-var colorOffsetDark = '-7%';
+var colorOffsetLight = 0.15;
+var colorOffsetDark = 0.07;
 
@@ -24,7 +24,7 @@ export default {
   bodyBackground: '#ebebeb',
-  bodyAccentColor: color('white lightness(-80%)'),
-  bodyOffsetColor: color('white lightness(-53%)'),
-  fontColor: color('white lightness(-80%)'),
-  colorWhite: 'white',
-  colorBlack: 'black',
+  bodyAccentColor: '#333',
+  bodyOffsetColor: '#787878',
+  fontColor: '#333',
+  colorWhite: '#fff',
+  colorBlack: '#000',
   colorOffsetLight: colorOffsetLight,
@@ -36,31 +36,31 @@ colorOffsetDark: colorOffsetDark,
   colorError: '#ff3100',
-  colorMuted: color('white lightness(-51.25%)'),
+  colorMuted: '#7c7c7c',
   colorSmoke: '#f2f2f2',
   colorBlue: '#2f7bbf',
-  colorBlueLight: color('#2f7bbf lightness(' + colorOffsetLight + ')'),
-  colorBlueDark: color('#2f7bbf lightness(' + colorOffsetDark + ')'),
+  colorBlueLight: lighten(colorOffsetLight, '#2f7bbf'),
+  colorBlueDark: darken(colorOffsetDark, '#2f7bbf'),
   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%)'),
+  colorOrangeLight: lighten(colorOffsetLight, '#ff7900'),
+  colorOrangeDark: darken(colorOffsetDark, '#ff7900'),
+  colorGray: '#7c7c7c',
+  colorGrayLight: '#dedede',
+  colorGrayDark: '#333',
   colorGrayBorder: '#666',
   colorGreen: '#9bca3e',
-  colorGreenLight: color('#9bca3e lightness(' + colorOffsetLight + ')'),
-  colorGreenDark: color('#9bca3e lightness(' + colorOffsetDark + ')'),
+  colorGreenLight: lighten(colorOffsetLight, '#9bca3e'),
+  colorGreenDark: darken(colorOffsetDark, '#9bca3e'),
   colorRed: '#bd2527',
-  colorRedLight: color('#bd2527 lightness(' + colorOffsetLight + ')'),
-  colorRedDark: color('#bd2527 lightness(' + colorOffsetDark + ')'),
+  colorRedLight: lighten(colorOffsetLight, '#bd2527'),
+  colorRedDark: darken(colorOffsetDark, '#bd2527'),
   colorYellow: '#ffd24d',
-  colorYellowLight: color('#ffd24d lightness(' + colorOffsetLight + ')'),
-  colorYellowDark: color('#ffd24d lightness(' + colorOffsetDark + ')'),
+  colorYellowLight: lighten(colorOffsetLight, '#ffd24d'),
+  colorYellowDark: darken(colorOffsetDark, '#ffd24d'),
   colorPink: '#d91698',
-  colorPinkLight: color('#d91698 lightness(' + colorOffsetLight + ')'),
-  colorPinkDark: color('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorPinkLight: lighten(colorOffsetLight, '#d91698'),
+  colorPinkDark: darken(colorOffsetDark, '#d91698'),
   colorPurple: '#9545e5',
-  colorPurpleLight: color('#d91698 lightness(' + colorOffsetLight + ')'),
-  colorPurpleDark: color('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorPurpleLight: lighten(colorOffsetLight, '#d91698'),
+  colorPurpleDark: darken(colorOffsetDark, '#d91698'),
   colorTwitterBlue: '#00aced',
   colorFacebookBlue: '#3b5998'
 };

lib/variables.js

@@ -7,6 +7,6 @@ 'use strict';
 
-var _cfStyleContainer = require('cf-style-container');
+var _polished = require('polished');
 
-var colorOffsetLight = '+15%';
-var colorOffsetDark = '-7%';
+var colorOffsetLight = 0.15;
+var colorOffsetDark = 0.07;
 
@@ -31,7 +31,7 @@ exports.default = {
   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',
-  colorBlack: 'black',
+  bodyAccentColor: '#333',
+  bodyOffsetColor: '#787878',
+  fontColor: '#333',
+  colorWhite: '#fff',
+  colorBlack: '#000',
   colorOffsetLight: colorOffsetLight,
@@ -43,31 +43,31 @@ colorOffsetDark: colorOffsetDark,
   colorError: '#ff3100',
-  colorMuted: (0, _cfStyleContainer.color)('white lightness(-51.25%)'),
+  colorMuted: '#7c7c7c',
   colorSmoke: '#f2f2f2',
   colorBlue: '#2f7bbf',
-  colorBlueLight: (0, _cfStyleContainer.color)('#2f7bbf lightness(' + colorOffsetLight + ')'),
-  colorBlueDark: (0, _cfStyleContainer.color)('#2f7bbf lightness(' + colorOffsetDark + ')'),
+  colorBlueLight: (0, _polished.lighten)(colorOffsetLight, '#2f7bbf'),
+  colorBlueDark: (0, _polished.darken)(colorOffsetDark, '#2f7bbf'),
   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%)'),
+  colorOrangeLight: (0, _polished.lighten)(colorOffsetLight, '#ff7900'),
+  colorOrangeDark: (0, _polished.darken)(colorOffsetDark, '#ff7900'),
+  colorGray: '#7c7c7c',
+  colorGrayLight: '#dedede',
+  colorGrayDark: '#333',
   colorGrayBorder: '#666',
   colorGreen: '#9bca3e',
-  colorGreenLight: (0, _cfStyleContainer.color)('#9bca3e lightness(' + colorOffsetLight + ')'),
-  colorGreenDark: (0, _cfStyleContainer.color)('#9bca3e lightness(' + colorOffsetDark + ')'),
+  colorGreenLight: (0, _polished.lighten)(colorOffsetLight, '#9bca3e'),
+  colorGreenDark: (0, _polished.darken)(colorOffsetDark, '#9bca3e'),
   colorRed: '#bd2527',
-  colorRedLight: (0, _cfStyleContainer.color)('#bd2527 lightness(' + colorOffsetLight + ')'),
-  colorRedDark: (0, _cfStyleContainer.color)('#bd2527 lightness(' + colorOffsetDark + ')'),
+  colorRedLight: (0, _polished.lighten)(colorOffsetLight, '#bd2527'),
+  colorRedDark: (0, _polished.darken)(colorOffsetDark, '#bd2527'),
   colorYellow: '#ffd24d',
-  colorYellowLight: (0, _cfStyleContainer.color)('#ffd24d lightness(' + colorOffsetLight + ')'),
-  colorYellowDark: (0, _cfStyleContainer.color)('#ffd24d lightness(' + colorOffsetDark + ')'),
+  colorYellowLight: (0, _polished.lighten)(colorOffsetLight, '#ffd24d'),
+  colorYellowDark: (0, _polished.darken)(colorOffsetDark, '#ffd24d'),
   colorPink: '#d91698',
-  colorPinkLight: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetLight + ')'),
-  colorPinkDark: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorPinkLight: (0, _polished.lighten)(colorOffsetLight, '#d91698'),
+  colorPinkDark: (0, _polished.darken)(colorOffsetDark, '#d91698'),
   colorPurple: '#9545e5',
-  colorPurpleLight: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetLight + ')'),
-  colorPurpleDark: (0, _cfStyleContainer.color)('#d91698 lightness(' + colorOffsetDark + ')'),
+  colorPurpleLight: (0, _polished.lighten)(colorOffsetLight, '#d91698'),
+  colorPurpleDark: (0, _polished.darken)(colorOffsetDark, '#d91698'),
   colorTwitterBlue: '#00aced',
   colorFacebookBlue: '#3b5998'
 };

package.json

 {
   "name": "cf-style-const",
   "description": "Cloudflare Style Constants",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "main": "lib/index.js",
@@ -14,4 +14,4 @@ "module": "es/index.js",
   "dependencies": {
-    "cf-style-container": "^0.2.2"
+    "polished": "^1.0.2"
   }
 }

src/variables.js

@@ -1,5 +0,5 @@
-import { color } from 'cf-style-container';
+import { lighten, darken } from 'polished';
 
-const colorOffsetLight = '+15%';
-const colorOffsetDark = '-7%';
+const colorOffsetLight = 0.15;
+const colorOffsetDark = 0.07;
 
@@ -24,7 +24,7 @@ export default {
   bodyBackground: '#ebebeb',
-  bodyAccentColor: color('white lightness(-80%)'),
-  bodyOffsetColor: color('white lightness(-53%)'),
-  fontColor: color('white lightness(-80%)'),
-  colorWhite: 'white',
-  colorBlack: 'black',
+  bodyAccentColor: darken(0.8, '#fff'),
+  bodyOffsetColor: darken(0.53, '#fff'),
+  fontColor: darken(0.8, '#fff'),
+  colorWhite: '#fff',
+  colorBlack: '#000',
   colorOffsetLight,
@@ -36,31 +36,31 @@ colorOffsetDark,
   colorError: '#ff3100',
-  colorMuted: color('white lightness(-51.25%)'),
+  colorMuted: darken(0.5125, '#fff'),
   colorSmoke: '#f2f2f2',
   colorBlue: '#2f7bbf',
-  colorBlueLight: color(`#2f7bbf lightness(${colorOffsetLight})`),
-  colorBlueDark: color(`#2f7bbf lightness(${colorOffsetDark})`),
+  colorBlueLight: lighten(colorOffsetLight, '#2f7bbf'),
+  colorBlueDark: darken(colorOffsetDark, '#2f7bbf'),
   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%)'),
+  colorOrangeLight: lighten(colorOffsetLight, '#ff7900'),
+  colorOrangeDark: darken(colorOffsetDark, '#ff7900'),
+  colorGray: darken(0.5125, '#fff'),
+  colorGrayLight: darken(0.13, '#fff'),
+  colorGrayDark: darken(0.8, '#fff'),
   colorGrayBorder: '#666',
   colorGreen: '#9bca3e',
-  colorGreenLight: color(`#9bca3e lightness(${colorOffsetLight})`),
-  colorGreenDark: color(`#9bca3e lightness(${colorOffsetDark})`),
+  colorGreenLight: lighten(colorOffsetLight, '#9bca3e'),
+  colorGreenDark: darken(colorOffsetDark, '#9bca3e'),
   colorRed: '#bd2527',
-  colorRedLight: color(`#bd2527 lightness(${colorOffsetLight})`),
-  colorRedDark: color(`#bd2527 lightness(${colorOffsetDark})`),
+  colorRedLight: lighten(colorOffsetLight, '#bd2527'),
+  colorRedDark: darken(colorOffsetDark, '#bd2527'),
   colorYellow: '#ffd24d',
-  colorYellowLight: color(`#ffd24d lightness(${colorOffsetLight})`),
-  colorYellowDark: color(`#ffd24d lightness(${colorOffsetDark})`),
+  colorYellowLight: lighten(colorOffsetLight, '#ffd24d'),
+  colorYellowDark: darken(colorOffsetDark, '#ffd24d'),
   colorPink: '#d91698',
-  colorPinkLight: color(`#d91698 lightness(${colorOffsetLight})`),
-  colorPinkDark: color(`#d91698 lightness(${colorOffsetDark})`),
+  colorPinkLight: lighten(colorOffsetLight, '#d91698'),
+  colorPinkDark: darken(colorOffsetDark, '#d91698'),
   colorPurple: '#9545e5',
-  colorPurpleLight: color(`#d91698 lightness(${colorOffsetLight})`),
-  colorPurpleDark: color(`#d91698 lightness(${colorOffsetDark})`),
+  colorPurpleLight: lighten(colorOffsetLight, '#d91698'),
+  colorPurpleDark: darken(colorOffsetDark, '#d91698'),
   colorTwitterBlue: '#00aced',
   colorFacebookBlue: '#3b5998'
 };

No alert changes

Worsened metrics

Total package byte prevSize

14712

decreased by-8.34%

Dependency changes

• + Addedpolished@^1.0.2

• + Addedpolished@1.9.3(transitive)

• - Removedcf-style-container@^0.2.2

• - Removedcf-style-container@0.2.3(transitive)

• - Removedcss-in-js-utils@1.0.3(transitive)

• - Removedfela@4.3.5(transitive)

• - Removedhyphenate-style-name@1.1.0(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-fela@4.3.5(transitive)

• - Removedreact-is@16.13.1(transitive)