@os-design/core - npm Package Compare versions

Comparing version 0.0.36 to 0.0.37

lib/Alert/AlertContainer.js

@@ -8,6 +8,6 @@ "use strict";
 const utils_1 = require("@os-design/utils");
-const bgColors = {
-    info: 'rgb(218,236,243)',
-    success: 'rgb(232,246,232)',
-    error: 'rgb(246,219,209)',
+const ALERT_CONTAINER_COLORS = {
+    info: '#daecf3',
+    success: '#e8f6e8',
+    error: '#f6dbd1',
 };
@@ -20,3 +20,3 @@ const AlertContainer = styled_1.default('div', utils_1.omitProps(['type', 'sizing'])) `
   padding: 0.5em 1em;
-  background-color: ${p => bgColors[p.type]};
+  background-color: ${p => ALERT_CONTAINER_COLORS[p.type]};
   border-radius: ${p => p.theme.borderRadius}em;
@@ -23,0 +23,0 @@

lib/Alert/AlertIcon.js

@@ -10,6 +10,6 @@ "use strict";
 const utils_1 = require("@os-design/utils");
-const colors = {
-    info: 'rgb(51,118,151)',
-    success: 'rgb(95,178,85)',
-    error: 'rgb(213,63,34)',
+const ALERT_ICON_COLORS = {
+    info: '#337697',
+    success: '#5fb255',
+    error: '#d53f22',
 };
@@ -22,9 +22,9 @@ const AlertIconContainer = styled_1.default('i', utils_1.omitProps(['type'])) `
   margin-right: 0.3em;
-  color: ${p => colors[p.type]};
+  color: ${p => ALERT_ICON_COLORS[p.type]};
   font-size: ${p => p.theme.sizing.large}em;
 `;
 const AlertIcon = props => {
-    const icon = (props.type === 'info' && react_1.default.createElement(icons_1.InfoCircle, null))
-        || (props.type === 'success' && react_1.default.createElement(icons_1.CheckCircle, null))
-        || (props.type === 'error' && react_1.default.createElement(icons_1.CloseCircle, null));
+    const icon = (props.type === 'info' && react_1.default.createElement(icons_1.InfoCircle, null)) ||
+        (props.type === 'success' && react_1.default.createElement(icons_1.CheckCircle, null)) ||
+        (props.type === 'error' && react_1.default.createElement(icons_1.CloseCircle, null));
     return icon ? react_1.default.createElement(AlertIconContainer, { type: props.type }, icon) : null;
@@ -31,0 +31,0 @@ };

lib/Button/index.js

@@ -12,10 +12,12 @@ "use strict";
 const color = p => core_1.css `
-  color: rgb(${p.darkMode ? p.theme.colorPrimary : '255,255,255'});
+  color: ${p.darkMode ? p.theme.colorPrimary : '#fff'};
 `;
 const backgroundColor = p => !p.ghost && core_1.css `
-  background-color: rgb(${p.darkMode ? '255,255,255' : p.theme.colorPrimary});
+  background-color: ${p.darkMode ? '#fff' : p.theme.colorPrimary};
   
-  &:focus, &:hover {
-    ${p.darkMode && core_1.css `opacity: 0.8;`};
-    ${!p.darkMode && core_1.css `background-color: rgba(${p.theme.colorPrimary},0.8);`};
+  @media (hover: hover) {
+    &:focus, &:hover {
+      ${p.darkMode && core_1.css `opacity: 0.8;`};
+      ${!p.darkMode && core_1.css `background-color: ${utils_1.darken(p.theme.colorPrimary, 20)};`};
+    }
   }
@@ -26,4 +28,6 @@ `;
   
-  &:focus, &:hover {
-    opacity: 0.8;
+  @media (hover: hover) {
+    &:focus, &:hover {
+      opacity: 0.8;
+    }
   }
@@ -30,0 +34,0 @@ `;

lib/Empty/index.js

@@ -18,3 +18,3 @@ "use strict";
   font-size: 6em;
-  color: rgb(${p => p.theme.colorBorder});
+  color: ${p => p.theme.colorBorder};
 `;
@@ -32,3 +32,3 @@ const BaseEmptyText = styled_1.default.div `
   font-size: ${p => p.theme.sizing.small}em;
-  color: rgb(${p => p.theme.colorPlaceholder});
+  color: ${p => p.theme.colorPlaceholder};
   margin-top: 0.6em;
@@ -35,0 +35,0 @@ `;

lib/Input/InputAddon.js

@@ -14,3 +14,3 @@ "use strict";
     padding: 0 ${exports.INPUT_ADDON_ICON_PADDING_HORIZONTAL_EM}em;
-    color: rgb(${p.theme.colorPlaceholder});
+    color: ${p.theme.colorPlaceholder};
   }
@@ -17,0 +17,0 @@ `;

lib/Input/InputField.js

@@ -16,3 +16,3 @@ "use strict";
 exports.color = (p) => !p.darkMode && core_1.css `
-  border: 1px solid rgb(${p.theme.colorBorder});
+  border: 1px solid ${p.theme.colorBorder};
 `;
@@ -26,4 +26,4 @@ exports.darkMode = (p) => p.darkMode && core_1.css `
 exports.focusDefault = (p) => core_1.css `
-  border-color: rgb(${p.theme.colorPrimary});
-  box-shadow: 0 0 0 ${exports.INPUT_FIELD_BOX_SHADOW_EM}em rgba(${p.theme.colorPrimary}, 0.2);
+  border-color: ${p.theme.colorPrimary};
+  box-shadow: 0 0 0 ${exports.INPUT_FIELD_BOX_SHADOW_EM}em ${utils_1.transparent(p.theme.colorPrimary, 0.2)};
 `;
@@ -39,3 +39,3 @@ exports.focusDarkMode = core_1.css `
 exports.placeholderDefault = (p) => core_1.css `
-  color: rgb(${p.theme.colorPlaceholder});
+  color: ${p.theme.colorPlaceholder};
 `;
@@ -42,0 +42,0 @@ exports.placeholderDarkMode = core_1.css `

lib/InputSearch/index.js

@@ -20,3 +20,3 @@ "use strict";
 const GrayCloseCircle = styled_1.default(icons_1.CloseCircle) `
-  color: rgba(${p => p.theme.colorPlaceholder}, 0.6);
+  color: ${p => utils_1.transparent(p.theme.colorPlaceholder, 0.6)};
 `;
@@ -23,0 +23,0 @@ const InputSearch = props => {

lib/Link/index.js

@@ -12,3 +12,3 @@ "use strict";
   &, &:active, &:focus {
-    color: rgb(${p.theme.colorPrimary});
+    color: ${p.theme.colorPrimary};
   }
@@ -33,3 +33,3 @@ `;
     height: ${UNDERLINE_HEIGHT_EM}em;
-    background-color: rgb(${p.theme.colorPrimary});
+    background-color: ${p.theme.colorPrimary};
   }
@@ -36,0 +36,0 @@

lib/Modal/ModalBody.js

@@ -18,6 +18,6 @@ "use strict";
   
-  border-top: 1px solid rgb(${p => p.theme.colorBorder});
-  border-bottom: 1px solid rgb(${p => p.theme.colorBorder});
+  border-top: 1px solid ${p => p.theme.colorBorder};
+  border-bottom: 1px solid ${p => p.theme.colorBorder};
 `;
 exports.default = ModalBody;
 //# sourceMappingURL=ModalBody.js.map

lib/Select/SelectDropdownList.js

@@ -28,3 +28,3 @@ "use strict";
     &:hover {
-      background-color: rgba(${p => p.theme.colorPrimary}, 0.1);
+      background-color: ${p => utils_1.transparent(p.theme.colorPrimary, 0.1)};
     }
@@ -31,0 +31,0 @@ ${utils_1.transition('background-color')};

lib/Select/SelectToggleIcon.js

@@ -20,3 +20,3 @@ "use strict";
   
-  color: rgb(${p => p.theme.colorPlaceholder});
+  color: ${p => p.theme.colorPlaceholder};
 `;
@@ -23,0 +23,0 @@ const SelectToggleIcon = props => (react_1.default.createElement(SelectToggleIconContainer, null, props.open ? react_1.default.createElement(icons_1.Up, null) : react_1.default.createElement(icons_1.Down, null)));

lib/Select/SelectToggleLabel.js

@@ -17,3 +17,3 @@ "use strict";
 const SelectToggleLabelPlaceholder = styled_1.default(SelectToggleLabelContainer, utils_1.omitProps(['darkMode'])) `
-  color: rgb(${p => p.theme.colorPlaceholder});
+  color: ${p => p.theme.colorPlaceholder};
   ${p => p.darkMode && InputField_1.placeholderDarkMode}
@@ -20,0 +20,0 @@ `;

package.json

 {
   "name": "@os-design/core",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "license": "MIT",
@@ -20,5 +20,5 @@ "main": "lib/index.js",
     "@emotion/core": "^10.0.22",
-    "@os-design/icons": "^0.0.13",
-    "@os-design/styled": "^0.0.4",
-    "@os-design/utils": "^0.0.7",
+    "@os-design/icons": "^0.0.14",
+    "@os-design/styled": "^0.0.5",
+    "@os-design/utils": "^0.0.8",
     "facepaint": "^1.2.1"
@@ -31,5 +31,5 @@ },
   "devDependencies": {
-    "@os-design/theming": "^0.0.4"
+    "@os-design/theming": "^0.0.5"
   },
-  "gitHead": "bc690e720491eb2a3a548b8f477b6328aba5df5c"
+  "gitHead": "356b74b8ce38b05cf217b7dcfcaf2b7989da10d7"
 }

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

154844

increased by0.09%

Lines of code

1915

increased by0.21%

Dependency changes

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

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

• + Added@os-design/utils@0.0.8(transitive)

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

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

• - Removed@os-design/utils@0.0.7(transitive)

• Updated@os-design/icons@^0.0.14

• Updated@os-design/styled@^0.0.5

• Updated@os-design/utils@^0.0.8