@nypl/design-system-react-components 1.4.2 → 1.5.0-rc2

package/dist/theme/components/header/headerMobileNavButton.d.ts

@@ -23,6 +23,12 @@ declare const HeaderMobileNavButton: {
             outlineStyle: string;
             outlineWidth: string;
         };
+        _dark: {
+            backgroundColor: string;
+            svg: {
+                fill: string;
+            };
+        };
     };
 };
 export default HeaderMobileNavButton;

package/dist/theme/components/header/headerSearchButton.d.ts

@@ -15,6 +15,10 @@ declare const HeaderSearchButton: {
             md: string;
         };
         textDecoration: string;
+        _dark: {
+            bgColor: string;
+            color: string;
+        };
         span: {
             alignItems: string;
             borderBottom: {
@@ -22,6 +26,14 @@ declare const HeaderSearchButton: {
             };
             display: string;
             lineHeight: string;
+            _dark: {
+                borderBottom: string | {
+                    md: string;
+                };
+                borderColor: {
+                    md: string;
+                };
+            };
         };
         svg: {
             marginLeft: {
@@ -32,6 +44,12 @@ declare const HeaderSearchButton: {
                 base: string;
                 md: string;
             };
+            _dark: {
+                fill: {
+                    base: string;
+                    md: string;
+                };
+            };
         };
         _hover: {
             backgroundColor: string;
@@ -43,6 +61,15 @@ declare const HeaderSearchButton: {
                     md: string;
                 };
             };
+            _dark: {
+                color: string;
+                svg: {
+                    fill: {
+                        base: string;
+                        md: string;
+                    };
+                };
+            };
         };
         _focus: {
             borderRadius: string;

package/dist/theme/components/header/headerSearchForm.d.ts

@@ -82,6 +82,9 @@ declare const HeaderSearchForm: {
                     outlineStyle: string;
                     outlineWidth: string;
                 };
+                _dark: {
+                    color: string;
+                };
             };
         };
         searchBtn: {
@@ -168,6 +171,13 @@ declare const HeaderSearchForm: {
                 outlineWidth: string;
             };
         };
+        _dark: {
+            bgColor: string;
+            color: string;
+            label: {
+                color: string;
+            };
+        };
     };
 };
 export default HeaderSearchForm;

package/dist/theme/components/header/headerSitewideAlerts.d.ts

@@ -21,6 +21,21 @@ declare const SitewideAlerts: {
             p: {
                 marginBottom: string;
             };
+            _dark: {
+                color: string;
+                a: {
+                    color: string;
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
+        };
+        _dark: {
+            backgroundColor: string;
+            borderBottom: string;
+            borderColor: string;
+            color: string;
         };
     };
 };

package/dist/theme/components/header/headerUpperNav.d.ts

@@ -31,9 +31,18 @@ declare const HeaderUpperNav: {
                 outlineStyle: string;
                 outlineWidth: string;
             };
+            _dark: {
+                color: string;
+                _hover: {
+                    color: string;
+                };
+            };
         };
         svg: {
             marginTop: string;
+            _dark: {
+                fill: string;
+            };
         };
         emailUpdatesLink: {
             display: string;
@@ -51,6 +60,12 @@ declare const HeaderUpperNav: {
             _hover: {
                 bg: string;
             };
+            _dark: {
+                bgColor: string;
+                _hover: {
+                    bgColor: string;
+                };
+            };
         };
     };
 };

package/dist/theme/components/heading.d.ts

@@ -56,12 +56,21 @@ declare const Heading: {
         a: {
             color: string;
             textDecoration: string;
+            _dark: {
+                color: string;
+            };
             _hover: {
                 color: string;
+                _dark: {
+                    color: string;
+                };
             };
         };
         marginBottom: string;
         textTransform: string;
+        _dark: {
+            color: string;
+        };
     };
     variants: {
         h1: {

package/dist/theme/components/helperErrorText.d.ts

@@ -7,6 +7,9 @@ declare const helperErrorText: {
         marginBottom: string;
         fontSize: string;
         color: string;
+        _dark: {
+            color: string;
+        };
     };
 };
 export default helperErrorText;

package/dist/theme/components/hero.d.ts

@@ -1,6 +1,9 @@
 declare const Hero: {
     baseStyle: {
-        bg: string;
+        bgColor: string;
+        _dark: {
+            bgColor: string;
+        };
     };
     variants: {
         primary: {
@@ -38,11 +41,14 @@ declare const Hero: {
                 bodyText: {
                     marginBottom: string;
                 };
+                _dark: {
+                    bgColor: string;
+                    color: string;
+                };
             };
         };
         secondary: {
             heading: {
-                bg: string;
                 _before: {
                     bg: string;
                     content: string;
@@ -52,6 +58,11 @@ declare const Hero: {
                     width: string;
                     zIndex: string;
                 };
+                _dark: {
+                    _before: {
+                        bg: string;
+                    };
+                };
                 marginBottom: string;
                 color: string;
                 flex: string;
@@ -117,7 +128,6 @@ declare const Hero: {
         };
         secondaryBooksAndMore: {
             heading: {
-                bg: string;
                 _before: {
                     bg: string;
                     content: string;
@@ -127,6 +137,11 @@ declare const Hero: {
                     width: string;
                     zIndex: string;
                 };
+                _dark: {
+                    _before: {
+                        bg: string;
+                    };
+                };
                 marginBottom: string;
                 color: string;
                 flex: string;
@@ -192,7 +207,6 @@ declare const Hero: {
         };
         secondaryLocations: {
             heading: {
-                bg: string;
                 _before: {
                     bg: string;
                     content: string;
@@ -202,6 +216,11 @@ declare const Hero: {
                     width: string;
                     zIndex: string;
                 };
+                _dark: {
+                    _before: {
+                        bg: string;
+                    };
+                };
                 marginBottom: string;
                 color: string;
                 flex: string;
@@ -267,7 +286,6 @@ declare const Hero: {
         };
         secondaryResearch: {
             heading: {
-                bg: string;
                 _before: {
                     bg: string;
                     content: string;
@@ -277,6 +295,11 @@ declare const Hero: {
                     width: string;
                     zIndex: string;
                 };
+                _dark: {
+                    _before: {
+                        bg: string;
+                    };
+                };
                 marginBottom: string;
                 color: string;
                 flex: string;
@@ -342,7 +365,6 @@ declare const Hero: {
         };
         secondaryWhatsOn: {
             heading: {
-                bg: string;
                 _before: {
                     bg: string;
                     content: string;
@@ -352,6 +374,11 @@ declare const Hero: {
                     width: string;
                     zIndex: string;
                 };
+                _dark: {
+                    _before: {
+                        bg: string;
+                    };
+                };
                 marginBottom: string;
                 color: string;
                 flex: string;
@@ -433,6 +460,9 @@ declare const Hero: {
                         xl: string;
                     };
                 };
+                _dark: {
+                    color: string;
+                };
                 marginY: string;
                 marginX: string;
                 maxWidth: string;
@@ -448,6 +478,9 @@ declare const Hero: {
             p: {
                 marginBottom: string;
             };
+            _dark: {
+                bg: string;
+            };
         };
         campaign: {
             alignItems: string;
@@ -485,6 +518,10 @@ declare const Hero: {
                 top: {
                     md: string;
                 };
+                _dark: {
+                    bg: string;
+                    color: string;
+                };
             };
             a: {
                 color: string;

package/dist/theme/components/horizontalRule.d.ts

@@ -10,6 +10,9 @@ declare const HorizontalRule: {
         marginTop: string;
         marginStart: string | number;
         marginEnd: string | number;
+        _dark: {
+            bg: string;
+        };
     };
 };
 export default HorizontalRule;

package/dist/theme/components/image.d.ts

@@ -106,6 +106,9 @@ declare const CustomImage: {
             img: {
                 backgroundColor: string;
                 marginBottom: string;
+                _dark: {
+                    backgroundColor: string;
+                };
             };
             maxWidth: string;
             margin: string;
@@ -114,6 +117,9 @@ declare const CustomImage: {
             img: {
                 backgroundColor: string;
                 marginBottom: string;
+                _dark: {
+                    backgroundColor: string;
+                };
             };
             maxWidth: string;
             marginStart: string;
@@ -124,6 +130,9 @@ declare const CustomImage: {
             img: {
                 backgroundColor: string;
                 marginBottom: string;
+                _dark: {
+                    backgroundColor: string;
+                };
             };
             maxWidth: string;
             marginStart: string;
@@ -134,6 +143,9 @@ declare const CustomImage: {
             img: {
                 backgroundColor: string;
                 marginBottom: string;
+                _dark: {
+                    backgroundColor: string;
+                };
             };
             maxWidth: string;
             marginStart: string;
@@ -144,6 +156,9 @@ declare const CustomImage: {
             img: {
                 backgroundColor: string;
                 marginBottom: string;
+                _dark: {
+                    backgroundColor: string;
+                };
             };
             maxWidth: string;
             marginStart: string;
@@ -154,6 +169,9 @@ declare const CustomImage: {
             img: {
                 backgroundColor: string;
                 marginBottom: string;
+                _dark: {
+                    backgroundColor: string;
+                };
             };
             maxWidth: string;
             marginStart: string;
@@ -166,6 +184,9 @@ declare const CustomImage: {
             fontSize: string;
         };
         img: {
+            _dark: {
+                backgroundColor: string;
+            };
             maxWidth: string;
             display: string;
             backgroundColor: string;
@@ -174,6 +195,9 @@ declare const CustomImage: {
             position: string;
             width: string;
         } | {
+            _dark: {
+                backgroundColor: string;
+            };
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
@@ -184,6 +208,9 @@ declare const CustomImage: {
             position: string;
             width: string;
         } | {
+            _dark: {
+                backgroundColor: string;
+            };
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
@@ -194,6 +221,9 @@ declare const CustomImage: {
             position: string;
             width: string;
         } | {
+            _dark: {
+                backgroundColor: string;
+            };
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
@@ -204,6 +234,9 @@ declare const CustomImage: {
             position: string;
             width: string;
         } | {
+            _dark: {
+                backgroundColor: string;
+            };
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
@@ -214,6 +247,9 @@ declare const CustomImage: {
             position: string;
             width: string;
         } | {
+            _dark: {
+                backgroundColor: string;
+            };
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
@@ -288,6 +324,9 @@ declare const CustomImageWrapper: {
             position: string;
             top: string;
             width: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         maxWidth: string;
         marginStart: string;
@@ -350,6 +389,9 @@ declare const CustomImageWrapper: {
             position: string;
             top: string;
             width: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         maxWidth: string;
         marginStart: string;
@@ -412,6 +454,9 @@ declare const CustomImageWrapper: {
             position: string;
             top: string;
             width: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         maxWidth: string;
         marginStart: string;
@@ -474,6 +519,9 @@ declare const CustomImageWrapper: {
             position: string;
             top: string;
             width: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         maxWidth: string;
         marginStart: string;
@@ -536,6 +584,9 @@ declare const CustomImageWrapper: {
             position: string;
             top: string;
             width: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         maxWidth: string;
         marginStart: string;
@@ -598,6 +649,9 @@ declare const CustomImageWrapper: {
             position: string;
             top: string;
             width: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         maxWidth: string;
         marginStart: string;

package/dist/theme/components/label.d.ts

@@ -13,6 +13,9 @@ declare const Label: {
         span: {
             fontWeight: string;
         };
+        _dark: {
+            color: string;
+        };
     };
 };
 export default Label;

package/dist/theme/components/link.d.ts

@@ -1,8 +1,14 @@
 export declare const baseLinkStyles: {
     color: string;
     textDecoration: string;
+    _dark: {
+        color: string;
+    };
     _hover: {
         color: string;
+        _dark: {
+            color: string;
+        };
     };
 };
 declare const Link: {
@@ -36,8 +42,14 @@ declare const Link: {
         };
         color: string;
         textDecoration: string;
+        _dark: {
+            color: string;
+        };
         _hover: {
             color: string;
+            _dark: {
+                color: string;
+            };
         };
     };
     variants: {
@@ -55,10 +67,6 @@ declare const Link: {
                 textDecoration: string;
                 fill: string;
             };
-            _hover: {
-                color: string;
-                textDecoration: string;
-            };
         };
         button: {
             width: string;
@@ -73,10 +81,18 @@ declare const Link: {
             textDecoration: string;
             fontWeight: string;
             bg: string;
+            _dark: {
+                color: string;
+                bg: string;
+            };
             _hover: {
                 color: string;
                 bg: string;
                 textDecoration: string;
+                _dark: {
+                    color: string;
+                    bg: string;
+                };
             };
         };
         buttonPrimary: any;

package/dist/theme/components/list.d.ts

@@ -30,6 +30,11 @@ export declare const baseUnorderedStyles: (noStyling?: boolean) => {
             marginStart: string;
             width: string;
         };
+        _dark: {
+            _before: {
+                color: string;
+            };
+        };
     };
     margin: string;
     marginBottom: string;
@@ -43,6 +48,12 @@ export declare const baseSectionDescriptionStyles: {
         borderColor: string;
         margin: string;
         padding: string;
+        _dark: {
+            borderColor: string;
+        };
+    };
+    _dark: {
+        borderColor: string;
     };
 };
 export declare const baseDescriptionStyles: {
@@ -67,6 +78,10 @@ export declare const baseDescriptionStyles: {
         paddingEnd: {
             md: string;
         };
+        _dark: {
+            borderColor: string;
+            color: string;
+        };
     };
     dd: {
         margin: string;
@@ -81,6 +96,11 @@ export declare const baseDescriptionStyles: {
         paddingTop: {
             md: string;
         };
+        _dark: {
+            borderColor: {
+                md: string;
+            };
+        };
     };
     borderBottom: string;
     borderColor: string;
@@ -90,6 +110,12 @@ export declare const baseDescriptionStyles: {
         borderColor: string;
         margin: string;
         padding: string;
+        _dark: {
+            borderColor: string;
+        };
+    };
+    _dark: {
+        borderColor: string;
     };
 };
 declare const List: {
@@ -122,6 +148,11 @@ declare const List: {
                     marginStart: string;
                     width: string;
                 };
+                _dark: {
+                    _before: {
+                        color: string;
+                    };
+                };
             };
             margin: string;
             marginBottom: string;
@@ -152,6 +183,10 @@ declare const List: {
                 paddingEnd: {
                     md: string;
                 };
+                _dark: {
+                    borderColor: string;
+                    color: string;
+                };
             };
             dd: {
                 margin: string;
@@ -166,6 +201,11 @@ declare const List: {
                 paddingTop: {
                     md: string;
                 };
+                _dark: {
+                    borderColor: {
+                        md: string;
+                    };
+                };
             };
             borderBottom: string;
             borderColor: string;
@@ -175,6 +215,12 @@ declare const List: {
                 borderColor: string;
                 margin: string;
                 padding: string;
+                _dark: {
+                    borderColor: string;
+                };
+            };
+            _dark: {
+                borderColor: string;
             };
         };
     };

package/dist/theme/components/modal.d.ts

@@ -0,0 +1,21 @@
+declare const Modal: {
+    parts: string[];
+    baseStyle: {
+        dialog: {
+            _dark: {
+                bg: string;
+            };
+        };
+        header: {
+            _dark: {
+                color: string;
+            };
+        };
+        body: {
+            _dark: {
+                color: string;
+            };
+        };
+    };
+};
+export default Modal;