@os-design/core - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib/Button/index.js

@@ -7,3 +7,2 @@ "use strict";
 const core_1 = require("@emotion/core");
-const polished_1 = require("polished");
 const react_1 = __importDefault(require("react"));
@@ -13,4 +12,2 @@ const styled_1 = __importDefault(require("@os-design/styled"));
 const icons_1 = require("@os-design/icons");
-const BUTTON_PRIMARY_COLOR_TEXT = '#fff';
-const BUTTON_PRIMARY_COLOR_TEXT_HOVER = polished_1.darken(0.2, BUTTON_PRIMARY_COLOR_TEXT);
 /**
@@ -30,3 +27,3 @@ * Resets default button styles.
 const color = p => core_1.css `
-  color: ${p.darkMode ? p.theme.colorPrimary : BUTTON_PRIMARY_COLOR_TEXT};
+  color: rgb(${p.darkMode ? p.theme.colorPrimary : '255,255,255'});
 `;
@@ -37,6 +34,7 @@ /**
 const backgroundColor = p => !p.ghost && core_1.css `
-  background-color: ${p.darkMode ? '#fff' : p.theme.colorPrimary};
+  background-color: rgb(${p.darkMode ? '255,255,255' : p.theme.colorPrimary});
   
   &:focus, &:hover {
-    background-color: ${p.darkMode ? polished_1.darken(0.1, BUTTON_PRIMARY_COLOR_TEXT) : polished_1.lighten(0.1, p.theme.colorPrimary)};
+    ${p.darkMode && core_1.css `opacity: 0.8;`};
+    ${!p.darkMode && core_1.css `background-color: rgba(${p.theme.colorPrimary},0.8);`};
   }
@@ -51,3 +49,3 @@ `;
   &:focus, &:hover {
-    color: ${p.darkMode ? polished_1.lighten(0.2, p.theme.colorPrimary) : BUTTON_PRIMARY_COLOR_TEXT_HOVER};
+    opacity: 0.8;
   }
@@ -62,7 +60,2 @@ `;
   border-radius: 50%;
-  
-  // Increase the icon size on the circle button
-  svg { 
-    transform: scale(1.2); 
-  }
 `;
@@ -85,2 +78,7 @@ /**
   
+  // Increase the icon size in the button
+  svg { 
+    transform: scale(1.2); 
+  }
+  
   ${reset};
@@ -99,3 +97,3 @@
   
-  ${utils_1.transition('background-color', 'box-shadow', 'color')};
+  ${utils_1.transition('background-color', 'box-shadow', 'color', 'opacity')};
 `;
@@ -102,0 +100,0 @@ /**

lib/Drawer/DrawerContainer.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -12,0 +13,0 @@ sizing: {

lib/Drawer/DrawerContent.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -12,0 +13,0 @@ sizing: {

lib/Drawer/DrawerMask.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -12,0 +13,0 @@ sizing: {

lib/Global/typography.d.ts

 declare const typography: (theme: {
     colorPrimary: string;
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -5,0 +6,0 @@ sizing: {

lib/Input/InputAddon.d.ts

 /// <reference types="react" />
 /// <reference types="@emotion/core" />
-export declare const INPUT_ADDON_ICON_FONT_SIZE_EM = 1.2;
 export declare const INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM = 0.5;
@@ -14,2 +13,3 @@ interface InputAddonProps {
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -16,0 +16,0 @@ sizing: {

lib/Input/InputAddon.js

@@ -9,4 +9,2 @@ "use strict";
 const core_1 = require("@emotion/core");
-const polished_1 = require("polished");
-exports.INPUT_ADDON_ICON_FONT_SIZE_EM = 1.2;
 exports.INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM = 0.5;
@@ -18,5 +16,5 @@ /**
   & > svg {
-    font-size: ${exports.INPUT_ADDON_ICON_FONT_SIZE_EM}em;
+    font-size: 1.2em;
     padding: 0 ${exports.INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM}em;
-    color: ${polished_1.darken(0.2, p.theme.colorBorder)};
+    color: rgb(${p.theme.colorPlaceholder});
   }
@@ -30,6 +28,2 @@ `;
     padding: 0 ${exports.INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM}em;
-    
-    & > svg {
-      font-size: ${exports.INPUT_ADDON_ICON_FONT_SIZE_EM}em;
-    }
   }
@@ -36,0 +30,0 @@ `;

lib/Input/InputContainer.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -13,0 +14,0 @@ sizing: {

lib/Input/InputField.d.ts

@@ -8,2 +8,3 @@ /// <reference types="react" />
     colorBorder: string;
+    colorPlaceholder: string;
     fontSize: number[];
@@ -10,0 +11,0 @@ sizing: {

lib/Input/InputField.js

@@ -8,3 +8,2 @@ "use strict";
 const utils_1 = require("@os-design/utils");
-const polished_1 = require("polished");
 const core_1 = require("@emotion/core");
@@ -25,15 +24,11 @@ const InputAddon_1 = require("./InputAddon");
 const color = (p) => !p.darkMode && core_1.css `
-  border: 1px solid ${p.theme.colorBorder};
+  border: 1px solid rgb(${p.theme.colorBorder});
   
-  &:hover {
-    border-color: ${polished_1.darken(0.2, p.theme.colorBorder)};
-  }
-  
   &:focus {
-    border-color: ${p.theme.colorPrimary};
-    box-shadow: 0 0 0 .15em ${polished_1.transparentize(0.8, p.theme.colorPrimary)};
+    border-color: rgb(${p.theme.colorPrimary});
+    box-shadow: 0 0 0 .15em rgba(${p.theme.colorPrimary}, 0.2);
   }
   
   &::placeholder {
-    color: ${polished_1.darken(0.2, p.theme.colorBorder)};
+    color: rgb(${p.theme.colorPlaceholder});
   }
@@ -50,3 +45,3 @@ `;
   &:focus {
-    box-shadow: 0 0 0 .15em rgba(255,255,255,0.15);
+    box-shadow: 0 0 0 .15em rgba(255,255,255,0.2);
   }
@@ -53,0 +48,0 @@

lib/Link/index.js

@@ -6,3 +6,2 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const polished_1 = require("polished");
 const styled_1 = __importDefault(require("@os-design/styled"));
@@ -17,8 +16,4 @@ const utils_1 = require("@os-design/utils");
   &, &:active, &:focus {
-    color: ${p.theme.colorPrimary};
+    color: rgb(${p.theme.colorPrimary});
   }
-  
-  &:hover {
-    color: ${polished_1.lighten(0.2, p.theme.colorPrimary)};
-  }
 `;
@@ -36,6 +31,2 @@ /**
   }
-  
-  &:hover {
-    opacity: 0.8;
-  }
 `;
@@ -46,2 +37,6 @@ const StyledLink = styled_1.default('a', utils_1.omitProps(['darkMode', 'sizing'])) `
   
+  &:hover {
+    opacity: 0.8;
+  }
+  
   ${color};
@@ -48,0 +43,0 @@ ${darkMode};

package.json

 {
   "name": "@os-design/core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
@@ -19,7 +19,6 @@ "main": "lib/index.js",
     "@emotion/core": "^10.0.22",
-    "@os-design/icons": "^0.0.2",
-    "@os-design/styled": "^0.0.2",
+    "@os-design/icons": "^0.0.3",
+    "@os-design/styled": "^0.0.3",
     "@os-design/utils": "^0.0.2",
-    "facepaint": "^1.2.1",
-    "polished": "^3.4.1"
+    "facepaint": "^1.2.1"
   },
@@ -31,5 +30,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@os-design/theming": "^0.0.2"
+    "@os-design/theming": "^0.0.3"
   },
-  "gitHead": "988da56eb63871d767f49d584e4cf45e689cc6b0"
+  "gitHead": "bb1423851a43ce777fd4b326bb8a19881424e82e"
 }

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

Dependency count

7

decreased by-12.5%

Worsened metrics

Total package byte prevSize

54364

decreased by-2.09%

Lines of code

945

decreased by-0.94%

Dependency changes

• + Added@os-design/icons@0.0.3(transitive)

• + Added@os-design/styled@0.0.3(transitive)

• - Removedpolished@^3.4.1

• - Removed@os-design/icons@0.0.2(transitive)

• - Removed@os-design/styled@0.0.2(transitive)

• - Removedpolished@3.7.2(transitive)

• Updated@os-design/icons@^0.0.3

• Updated@os-design/styled@^0.0.3