@cloudflare/component-notifications 3.6.61 → 3.6.65

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.6.65](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-notifications@3.6.64...@cloudflare/component-notifications@3.6.65) (2021-09-22)
+
+**Note:** Version bump only for package @cloudflare/component-notifications
+
+
+
+
+
+## [3.6.64](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-notifications@3.6.63...@cloudflare/component-notifications@3.6.64) (2021-09-21)
+
+
+### Bug Fixes
+
+* **component-notifications:** UI-4629 Dark mode colors ([e08fc18](http://stash.cfops.it:7999/fe/stratus/commits/e08fc18))
+* **component-notifications:** UI-4629 Fix switch ([0255ce3](http://stash.cfops.it:7999/fe/stratus/commits/0255ce3))
+
+
+
+
+
+## [3.6.63](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-notifications@3.6.62...@cloudflare/component-notifications@3.6.63) (2021-09-20)
+
+**Note:** Version bump only for package @cloudflare/component-notifications
+
+
+
+
+
+## [3.6.62](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-notifications@3.6.61...@cloudflare/component-notifications@3.6.62) (2021-09-17)
+
+**Note:** Version bump only for package @cloudflare/component-notifications
+
+
+
+
+
 ## [3.6.61](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-notifications@3.6.59...@cloudflare/component-notifications@3.6.61) (2021-09-15)
 
 **Note:** Version bump only for package @cloudflare/component-notifications

package/es/Notification.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isDarkMode } from '@cloudflare/style-const';
 import raf from 'raf';
 import { createComponent } from '@cloudflare/style-container';
 import { Icon } from '@cloudflare/component-icon';
@@ -24,17 +25,17 @@ const getBorderColor = (type, theme) => {
 const getBackgroundColor = (type, theme) => {
   switch (type) {
     case 'success':
-      return theme.colors.green[6];
+      return theme.colors.green[isDarkMode() ? 3 : 6];
 
     case 'warning':
-      return theme.colors.orange[6];
+      return theme.colors.orange[isDarkMode() ? 3 : 6];
 
     case 'error':
       return theme.colors.red[3];
 
     case 'info':
     default:
-      return theme.colors.blue[4];
+      return theme.colors.blue[isDarkMode() ? 3 : 6];
   }
 };
 

package/lib/Notification.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _styleConst = require("@cloudflare/style-const");
+
 var _raf = _interopRequireDefault(require("raf"));
 
 var _styleContainer = require("@cloudflare/style-container");
@@ -55,17 +57,17 @@ var getBorderColor = function getBorderColor(type, theme) {
 var getBackgroundColor = function getBackgroundColor(type, theme) {
   switch (type) {
     case 'success':
-      return theme.colors.green[6];
+      return theme.colors.green[(0, _styleConst.isDarkMode)() ? 3 : 6];
 
     case 'warning':
-      return theme.colors.orange[6];
+      return theme.colors.orange[(0, _styleConst.isDarkMode)() ? 3 : 6];
 
     case 'error':
       return theme.colors.red[3];
 
     case 'info':
     default:
-      return theme.colors.blue[4];
+      return theme.colors.blue[(0, _styleConst.isDarkMode)() ? 3 : 6];
   }
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-notifications",
   "description": "Cloudflare Notifications Component",
-  "version": "3.6.61",
+  "version": "3.6.65",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,8 +11,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^6.3.0",
-    "@cloudflare/style-container": "^7.3.56",
+    "@cloudflare/component-icon": "^6.4.2",
+    "@cloudflare/style-const": "^3.0.3",
+    "@cloudflare/style-container": "^7.4.2",
     "prop-types": "^15.6.0",
     "raf": "^3.3.2"
   },
@@ -30,5 +31,5 @@
     "test-coverage": "stratus test --coverage --muteErrorsFixWeNeedToSolveThis",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "bbfa3ad5116787409a6d0cc5432f17fcda963ad3"
+  "gitHead": "00ec7166ecfe3a7e207b8900d53d97f1eb58728f"
 }

package/src/Notification.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isDarkMode } from '@cloudflare/style-const';
 import raf from 'raf';
 import { createComponent } from '@cloudflare/style-container';
 
@@ -22,14 +23,14 @@ const getBorderColor = (type, theme) => {
 const getBackgroundColor = (type, theme) => {
   switch (type) {
     case 'success':
-      return theme.colors.green[6];
+      return theme.colors.green[isDarkMode() ? 3 : 6];
     case 'warning':
-      return theme.colors.orange[6];
+      return theme.colors.orange[isDarkMode() ? 3 : 6];
     case 'error':
       return theme.colors.red[3];
     case 'info':
     default:
-      return theme.colors.blue[4];
+      return theme.colors.blue[isDarkMode() ? 3 : 6];
   }
 };