cf-component-button - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

es/ButtonTheme.js

@@ -1,2 +0,2 @@
-import { color } from 'cf-style-container';
+import { darken, lighten } from 'polished';
 import { checkBaseTheme } from 'cf-style-const';
@@ -6,13 +6,13 @@
   checkBaseTheme(baseTheme, 'ButtonTheme');
-  var defaultBorder = color(baseTheme.colorGrayLight + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var primaryBorder = color(baseTheme.colorBlue + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var successBorder = color(baseTheme.colorGreen + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var warningBorder = color(baseTheme.colorOrange + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var dangerBorder = color(baseTheme.colorRed + '  lightness(' + baseTheme.colorOffsetDark + ')');
-  var defaultHoverBackground = color(baseTheme.colorGrayLight + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var defaultActiveBackground = color(defaultHoverBackground + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var primaryActiveBackground = color(baseTheme.colorBlueDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var successActiveBackground = color(baseTheme.colorGreenDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var warningActiveBackground = color(baseTheme.colorOrangeDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var dangerActiveBackground = color(baseTheme.colorRedDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var defaultBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorGrayLight);
+  var primaryBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorBlue);
+  var successBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorGreen);
+  var warningBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorOrange);
+  var dangerBorder = darken(baseTheme.colorOffsetDark, baseTheme.colorRed);
+  var defaultHoverBackground = darken(baseTheme.colorOffsetDark, baseTheme.colorGrayLight);
+  var defaultActiveBackground = darken(baseTheme.colorOffsetDark, defaultHoverBackground);
+  var primaryActiveBackground = darken(baseTheme.colorOffsetDark, baseTheme.colorBlueDark);
+  var successActiveBackground = darken(baseTheme.colorOffsetDark, baseTheme.colorGreenDark);
+  var warningActiveBackground = darken(baseTheme.colorOffsetDark, baseTheme.colorOrangeDark);
+  var dangerActiveBackground = darken(baseTheme.colorOffsetDark, baseTheme.colorRedDark);
 
@@ -49,4 +49,4 @@ return {
     // Disabled
-    disabledBorder: color(baseTheme.disabledBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    disabledColor: color(baseTheme.disabledBackground + ' lightness(30%)'),
+    disabledBorder: darken(baseTheme.colorOffsetDark, baseTheme.disabledBackground),
+    disabledColor: lighten(0.3, baseTheme.disabledBackground),
 
@@ -79,7 +79,7 @@ // Normal
 
-    defaultHoverBorder: color(defaultBorder + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    primaryHoverBorder: color(primaryBorder + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    successHoverBorder: color(baseTheme.colorGreenDark + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    warningHoverBorder: color(baseTheme.colorOrangeDark + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    dangerHoverBorder: color(baseTheme.colorRedDark + '  lightness(' + baseTheme.colorOffsetDark + ')'),
+    defaultHoverBorder: darken(baseTheme.colorOffsetDark, defaultBorder),
+    primaryHoverBorder: darken(baseTheme.colorOffsetDark, primaryBorder),
+    successHoverBorder: darken(baseTheme.colorOffsetDark, baseTheme.colorGreenDark),
+    warningHoverBorder: darken(baseTheme.colorOffsetDark, baseTheme.colorOrangeDark),
+    dangerHoverBorder: darken(baseTheme.colorOffsetDark, baseTheme.colorRedDark),
 
@@ -99,7 +99,7 @@ defaultHoverColor: baseTheme.colorGrayDark,
 
-    defaultActiveBorder: color(defaultActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    primaryActiveBorder: color(primaryActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    successActiveBorder: color(successActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    warningActiveBorder: color(warningActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    dangerActiveBorder: color(dangerActiveBackground + '  lightness(' + baseTheme.colorOffsetDark + ')'),
+    defaultActiveBorder: darken(baseTheme.colorOffsetDark, defaultActiveBackground),
+    primaryActiveBorder: darken(baseTheme.colorOffsetDark, primaryActiveBackground),
+    successActiveBorder: darken(baseTheme.colorOffsetDark, successActiveBackground),
+    warningActiveBorder: darken(baseTheme.colorOffsetDark, warningActiveBackground),
+    dangerActiveBorder: darken(baseTheme.colorOffsetDark, dangerActiveBackground),
 
@@ -119,8 +119,8 @@ defaultActiveColor: baseTheme.colorGrayDark,
 
-    defaultFocusOutlineColor: color(defaultActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    primaryFocusOutlineColor: color(primaryActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    successFocusOutlineColor: color(successActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    warningFocusOutlineColor: color(warningActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    dangerFocusOutlineColor: color(dangerActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')')
+    defaultFocusOutlineColor: darken(baseTheme.colorOffsetDark, defaultActiveBackground),
+    primaryFocusOutlineColor: darken(baseTheme.colorOffsetDark, primaryActiveBackground),
+    successFocusOutlineColor: darken(baseTheme.colorOffsetDark, successActiveBackground),
+    warningFocusOutlineColor: darken(baseTheme.colorOffsetDark, warningActiveBackground),
+    dangerFocusOutlineColor: darken(baseTheme.colorOffsetDark, dangerActiveBackground)
   };
 });

lib/ButtonTheme.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _cfStyleContainer = require('cf-style-container');
+var _polished = require('polished');
 
@@ -14,13 +14,13 @@ var _cfStyleConst = require('cf-style-const');
   (0, _cfStyleConst.checkBaseTheme)(baseTheme, 'ButtonTheme');
-  var defaultBorder = (0, _cfStyleContainer.color)(baseTheme.colorGrayLight + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var primaryBorder = (0, _cfStyleContainer.color)(baseTheme.colorBlue + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var successBorder = (0, _cfStyleContainer.color)(baseTheme.colorGreen + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var warningBorder = (0, _cfStyleContainer.color)(baseTheme.colorOrange + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var dangerBorder = (0, _cfStyleContainer.color)(baseTheme.colorRed + '  lightness(' + baseTheme.colorOffsetDark + ')');
-  var defaultHoverBackground = (0, _cfStyleContainer.color)(baseTheme.colorGrayLight + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var defaultActiveBackground = (0, _cfStyleContainer.color)(defaultHoverBackground + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var primaryActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorBlueDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var successActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorGreenDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var warningActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorOrangeDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
-  var dangerActiveBackground = (0, _cfStyleContainer.color)(baseTheme.colorRedDark + ' lightness(' + baseTheme.colorOffsetDark + ')');
+  var defaultBorder = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorGrayLight);
+  var primaryBorder = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorBlue);
+  var successBorder = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorGreen);
+  var warningBorder = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorOrange);
+  var dangerBorder = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorRed);
+  var defaultHoverBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorGrayLight);
+  var defaultActiveBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, defaultHoverBackground);
+  var primaryActiveBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorBlueDark);
+  var successActiveBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorGreenDark);
+  var warningActiveBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorOrangeDark);
+  var dangerActiveBackground = (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorRedDark);
 
@@ -57,4 +57,4 @@ return {
     // Disabled
-    disabledBorder: (0, _cfStyleContainer.color)(baseTheme.disabledBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    disabledColor: (0, _cfStyleContainer.color)(baseTheme.disabledBackground + ' lightness(30%)'),
+    disabledBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.disabledBackground),
+    disabledColor: (0, _polished.lighten)(0.3, baseTheme.disabledBackground),
 
@@ -87,7 +87,7 @@ // Normal
 
-    defaultHoverBorder: (0, _cfStyleContainer.color)(defaultBorder + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    primaryHoverBorder: (0, _cfStyleContainer.color)(primaryBorder + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    successHoverBorder: (0, _cfStyleContainer.color)(baseTheme.colorGreenDark + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    warningHoverBorder: (0, _cfStyleContainer.color)(baseTheme.colorOrangeDark + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    dangerHoverBorder: (0, _cfStyleContainer.color)(baseTheme.colorRedDark + '  lightness(' + baseTheme.colorOffsetDark + ')'),
+    defaultHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, defaultBorder),
+    primaryHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, primaryBorder),
+    successHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorGreenDark),
+    warningHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorOrangeDark),
+    dangerHoverBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, baseTheme.colorRedDark),
 
@@ -107,7 +107,7 @@ defaultHoverColor: baseTheme.colorGrayDark,
 
-    defaultActiveBorder: (0, _cfStyleContainer.color)(defaultActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    primaryActiveBorder: (0, _cfStyleContainer.color)(primaryActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    successActiveBorder: (0, _cfStyleContainer.color)(successActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    warningActiveBorder: (0, _cfStyleContainer.color)(warningActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    dangerActiveBorder: (0, _cfStyleContainer.color)(dangerActiveBackground + '  lightness(' + baseTheme.colorOffsetDark + ')'),
+    defaultActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, defaultActiveBackground),
+    primaryActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, primaryActiveBackground),
+    successActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, successActiveBackground),
+    warningActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, warningActiveBackground),
+    dangerActiveBorder: (0, _polished.darken)(baseTheme.colorOffsetDark, dangerActiveBackground),
 
@@ -127,8 +127,8 @@ defaultActiveColor: baseTheme.colorGrayDark,
 
-    defaultFocusOutlineColor: (0, _cfStyleContainer.color)(defaultActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    primaryFocusOutlineColor: (0, _cfStyleContainer.color)(primaryActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    successFocusOutlineColor: (0, _cfStyleContainer.color)(successActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    warningFocusOutlineColor: (0, _cfStyleContainer.color)(warningActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')'),
-    dangerFocusOutlineColor: (0, _cfStyleContainer.color)(dangerActiveBackground + ' lightness(' + baseTheme.colorOffsetDark + ')')
+    defaultFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, defaultActiveBackground),
+    primaryFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, primaryActiveBackground),
+    successFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, successActiveBackground),
+    warningFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, warningActiveBackground),
+    dangerFocusOutlineColor: (0, _polished.darken)(baseTheme.colorOffsetDark, dangerActiveBackground)
   };
 };

package.json

 {
   "name": "cf-component-button",
   "description": "Cloudflare Button Component",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "main": "lib/index.js",
@@ -14,4 +14,5 @@ "module": "es/index.js",
   "dependencies": {
-    "cf-style-const": "^0.3.2",
-    "cf-style-container": "^0.2.2"
+    "cf-style-const": "^0.3.3",
+    "cf-style-container": "^0.2.3",
+    "polished": "^1.0.2"
   },
@@ -18,0 +19,0 @@ "peerDependencies": {

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

Worsened metrics

Total package byte prevSize

50282

decreased by-2.78%

Dependency count

4

increased by33.33%

Dependency changes

• + Addedpolished@^1.0.2

• Updatedcf-style-const@^0.3.3

• Updatedcf-style-container@^0.2.3