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

package/dist/design-system-react-components.esm.js

@@ -4944,7 +4944,12 @@ var blogs = {
   },
   a: {
     _hover: {
-      color: "ui.gray.x-dark"
+      color: "ui.gray.xx-dark"
+    },
+    _dark: {
+      _hover: {
+        color: "dark.ui.typography.heading"
+      }
     }
   },
   svg: {
@@ -6368,7 +6373,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 = {
@@ -6382,9 +6387,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",
@@ -6592,12 +6594,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"
+            }
           }
         }
       },
@@ -6758,8 +6777,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: {
@@ -6898,6 +6917,13 @@ var HeaderMobileNav = {
             backgroundColor: headerRedDonate,
             _hover: {
               backgroundColor: headerRedDonate
+            },
+            _dark: {
+              bgColor: "brand.secondary",
+              color: "ui.white",
+              _hover: {
+                bgColor: "brand.primary"
+              }
             }
           }
         }
@@ -7078,6 +7104,7 @@ var HeaderSearchForm = {
       _focus: headerFocus
     },
     _dark: {
+      bgColor: "section.research.secondary",
       color: "ui.white",
       label: {
         color: "ui.white"
@@ -7104,6 +7131,7 @@ var HeaderSearchButton = {
       },
       textDecoration: "none",
       _dark: {
+        bgColor: isOpen ? "section.research.secondary" : "transparent",
         color: isOpen ? "ui.white" : "dark.ui.link.primary"
       },
       span: {
@@ -7189,17 +7217,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"
     }
   }
 };
@@ -7261,7 +7292,10 @@ var HeaderUpperNav = {
         bg: headerRed
       },
       _dark: {
-        color: "var(--nypl-colors-ui-black) !important"
+        bgColor: "brand.secondary",
+        _hover: {
+          bgColor: "brand.primary"
+        }
       }
     }
   }
@@ -7602,7 +7636,7 @@ var primary$1 = {
       marginBottom: "0"
     },
     _dark: {
-      bg: "dark.ui.bg.default",
+      bgColor: "dark.ui.bg.default",
       color: "dark.ui.typography.body"
     }
   }
@@ -7750,9 +7784,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:
@@ -8204,6 +8238,9 @@ var MultiSelect = {
         },
         _focus: {
           outline: "0px !important"
+        },
+        _dark: {
+          colorScheme: "dark"
         }
       },
       menuChildren: {
@@ -8386,7 +8423,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",
@@ -8430,7 +8467,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",
@@ -8441,7 +8478,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"
@@ -8873,10 +8910,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"
       }
     }
   }
@@ -10379,7 +10419,7 @@ var Notification$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
     }, 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"
       },