@nypl/design-system-react-components 1.5.0-rc → 1.5.0

package/CHANGELOG.md

@@ -8,8 +8,11 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.5.0 (March 16, 2023)
+
 ### Adds
 
+- Adds `brand` as a `breadcrumbsType` to the `Breadcrumbs` component.
 - Adds `dark` color mode support for `background-color` and `color` global styles.
 - Adds `dark` color mode support for the `HelperErrorText` and `StatusBadge` components.
 - Adds `dark` color mode support for the `Button`, `Checkbox`, `DatePicker`, `ProgressIndicator`, `Radio`, `SearchBar`, `Select`, `Slider` and `Toggle` components.
@@ -26,8 +29,14 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Updates
 
+- Updates background color values available in Storybook.
+- Updates the hex value for `dark.ui.error.primary`.
 - Updates the `Design Tokens Style Guide` to include more detailed information about the available tokens.
 
+### Deprecates
+
+- Deprecates the `darkMode` prop in the `ProgressIndicator` component.
+
 ## 1.4.2 (March 2, 2023)
 
 ### Updates
@@ -171,16 +180,6 @@ This release is exactly the same as the `1.3.0-rc` release candidate published o
 
 ### Adds
 
-- Adds `brand` as a `breadcrumbsType` to the `Breadcrumbs` component.
-
-### Updates
-
-- Updates the hex value for `dark.ui.error.primary`.
-
-## 1.2.1 (October 27, 2022)
-
-### Adds
-
 - Adds the `"buttonPrimary"`, `"buttonSecondary"`, `"buttonPill"`, `"buttonCallout"`, `"buttonNoBrand"`, `"buttonDisabled"` variants for the the `Link` component, set through the `type` prop.
 
 ### Deprecates
@@ -257,7 +256,6 @@ This release is exactly the same as the `1.3.0-rc` release candidate published o
 ### Deprecates
 
 - Deprecates the `link` variant in the `Button` component.
-- Deprecates the `darkMode` prop in the `ProgressIndicator` component.
 
 ## 1.1.0 (August 30, 2022)
 
@@ -301,7 +299,6 @@ This release is exactly the same as the `1.1.0-rc5` release candidate which was
 - Updates the `onClick` event type for the `Pagination` links `onClick` function.
 - Updates the `Link` component's `onClick` event type.
 - Makes small, clarifying update to `Color Mode` story in Storybook.
-- Updates background color values available in Storybook.
 
 ### Fixes
 

package/dist/design-system-react-components.cjs.development.js

@@ -4950,7 +4950,12 @@ var blogs = {
   },
   a: {
     _hover: {
-      color: "ui.gray.x-dark"
+      color: "ui.gray.xx-dark"
+    },
+    _dark: {
+      _hover: {
+        color: "dark.ui.typography.heading"
+      }
     }
   },
   svg: {
@@ -6374,7 +6379,7 @@ var headerDarkBlue = "#135772";
 var headerFocusColor = "#0F465C";
 var headerLightBlue = "#78CCED";
 var headerRed = "#ED1C24";
-var headerRedDarkMode = "#DC6F73";
+var headerRedDarkMode = "dark.ui.error.primary";
 var headerRedDonate = "#E32B31";
 var headerYellow = "#FEE34A";
 var headerFocus = {
@@ -6388,9 +6393,6 @@ var Header = {
   parts: ["container", "horizontalRule", "logo"],
   baseStyle: {
     fontFamily: "'system-ui', 'Segoe UI', Tahoma, 'Helvetica', 'arial'",
-    _dark: {
-      backgroundColor: "dark.ui.bg.default"
-    },
     container: {
       marginX: {
         md: "20px",
@@ -6598,12 +6600,29 @@ var HeaderLogin = {
           }
         }),
         _dark: {
-          color: "ui.gray.xx-dark",
+          bgColor: {
+            base: "brand.secondary",
+            md: "dark.ui.link.primary"
+          },
+          color: {
+            base: "ui.white",
+            md: "ui.gray.xx-dark"
+          },
           svg: {
-            fill: "ui.gray.xx-dark"
+            fill: {
+              base: "ui.white",
+              md: "ui.gray.xx-dark"
+            }
           },
           _hover: {
-            color: "ui.gray.xx-dark"
+            bgColor: {
+              base: "brand.primary",
+              md: "dark.ui.link.secondary"
+            },
+            color: {
+              base: "ui.white",
+              md: "ui.gray.xx-dark"
+            }
           }
         }
       },
@@ -6764,8 +6783,8 @@ var HeaderLoginButton = {
       _focus: headerFocus,
       _dark: {
         bg: {
-          base: isOpen ? headerBlack : "dark.ui.bg.default",
-          md: isOpen ? headerDarkBlue : "dark.ui.bg.default"
+          base: isOpen ? headerBlack : "transparent",
+          md: isOpen ? headerDarkBlue : "transparent"
         },
         color: "dark.ui.typography.heading",
         svg: {
@@ -6904,6 +6923,13 @@ var HeaderMobileNav = {
             backgroundColor: headerRedDonate,
             _hover: {
               backgroundColor: headerRedDonate
+            },
+            _dark: {
+              bgColor: "brand.secondary",
+              color: "ui.white",
+              _hover: {
+                bgColor: "brand.primary"
+              }
             }
           }
         }
@@ -7084,6 +7110,7 @@ var HeaderSearchForm = {
       _focus: headerFocus
     },
     _dark: {
+      bgColor: "section.research.secondary",
       color: "ui.white",
       label: {
         color: "ui.white"
@@ -7110,6 +7137,7 @@ var HeaderSearchButton = {
       },
       textDecoration: "none",
       _dark: {
+        bgColor: isOpen ? "section.research.secondary" : "transparent",
         color: isOpen ? "ui.white" : "dark.ui.link.primary"
       },
       span: {
@@ -7195,17 +7223,20 @@ var SitewideAlerts = {
         marginBottom: "0"
       },
       _dark: {
-        color: "ui.typography.heading",
+        color: "dark.ui.typography.heading",
         a: {
-          color: "ui.typography.heading",
+          color: "dark.ui.typography.heading",
           _hover: {
-            color: "ui.typography.heading"
+            color: "dark.ui.typography.heading"
           }
         }
       }
     },
     _dark: {
-      backgroundColor: "dark.ui.status.primary"
+      backgroundColor: "dark.ui.bg.active",
+      borderBottom: "1px solid",
+      borderColor: "dark.ui.status.primary",
+      color: "dark.ui.typography.heading"
     }
   }
 };
@@ -7267,7 +7298,10 @@ var HeaderUpperNav = {
         bg: headerRed
       },
       _dark: {
-        color: "var(--nypl-colors-ui-black) !important"
+        bgColor: "brand.secondary",
+        _hover: {
+          bgColor: "brand.primary"
+        }
       }
     }
   }
@@ -7608,7 +7642,7 @@ var primary$1 = {
       marginBottom: "0"
     },
     _dark: {
-      bg: "dark.ui.bg.default",
+      bgColor: "dark.ui.bg.default",
       color: "dark.ui.typography.body"
     }
   }
@@ -7756,9 +7790,9 @@ var fiftyFifty = {
 };
 var Hero = {
   baseStyle: {
-    bg: "ui.gray.x-light-cool",
+    bgColor: "ui.gray.x-light-cool",
     _dark: {
-      bg: "dark.ui.bg.default"
+      bgColor: "dark.ui.bg.default"
     }
   },
   // Available variants:
@@ -8210,6 +8244,9 @@ var MultiSelect = {
         },
         _focus: {
           outline: "0px !important"
+        },
+        _dark: {
+          colorScheme: "dark"
         }
       },
       menuChildren: {
@@ -8392,7 +8429,7 @@ var NotificationContent = {
         pt: !isCentered && notificationHeading ? "xxs" : "0",
         w: "100%",
         _dark: {
-          borderLeftColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "ui.success.primary" : "dark.ui.error.primary",
+          borderLeftColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "dark.ui.success.primary" : "dark.ui.error.primary",
           borderLeftStyle: !isCentered ? "solid" : "none",
           borderLeftWidth: "2px",
           marginTop: "0",
@@ -8436,7 +8473,7 @@ var NotificationHeading = {
       px: isCentered ? "s" : "0",
       w: "fit-content",
       _dark: {
-        borderBottomColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "ui.success.primary" : "dark.ui.error.primary",
+        borderBottomColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "dark.ui.success.primary" : "dark.ui.error.primary",
         borderBottomStyle: isCentered ? "solid" : "none",
         borderBottomWidth: "2px",
         color: "dark.ui.typography.heading",
@@ -8447,7 +8484,7 @@ var NotificationHeading = {
         ml: icon && !isCentered ? "xs" : "0",
         mt: icon ? "xxxs" : "0",
         _dark: {
-          borderLeftColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "ui.success.primary" : "dark.ui.error.primary",
+          borderLeftColor: notificationType === "standard" ? "ui.status.primary" : notificationType === "announcement" ? "dark.ui.success.primary" : "dark.ui.error.primary",
           borderLeftStyle: !isCentered ? "solid" : "none",
           borderLeftWidth: "2px",
           paddingLeft: !isCentered ? "xs" : "0"
@@ -8879,10 +8916,13 @@ var SkipNavigation = {
       _focus: {
         height: "auto",
         left: "1rem",
-        paddingX: "inset.extranarrow",
+        paddingX: "inset.narrow",
         paddingY: "inset.extranarrow",
         top: "1rem",
         width: "auto"
+      },
+      _dark: {
+        backgroundColor: "dark.ui.bg.page"
       }
     }
   }
@@ -10385,7 +10425,7 @@ var Notification$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
     }, baseIconProps));
     var iconProps = {
       announcement: {
-        color: colorMode === "dark" ? "ui.gray.medium" : "section.research.secondary",
+        color: colorMode === "dark" ? "dark.ui.success.primary" : "section.research.secondary",
         name: "speakerNotes",
         title: "Notification announcement icon"
       },