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

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

@@ -29,6 +29,9 @@ export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, showR
         };
         borderColor: string;
     };
+    _dark: {
+        borderColor: string;
+    };
 };
 export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
     border: string;
@@ -36,6 +39,9 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
     borderColor: {
         base: string;
         md: string;
+    } | {
+        base: string;
+        md: string;
     };
     display: {
         base: string;
@@ -80,6 +86,9 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
         borderColor: {
             base: string;
             md: string;
+        } | {
+            base: string;
+            md: string;
         };
     };
     "> span": {
@@ -98,6 +107,9 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
             color: string;
             fontWeight: string;
             paddingStart: string;
+            _dark: {
+                color: string;
+            };
         };
     };
 };
@@ -111,11 +123,17 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
             md: string;
         };
     };
+    _dark: {
+        color: string;
+    };
     border: string;
     borderBottom: string;
     borderColor: {
         base: string;
         md: string;
+    } | {
+        base: string;
+        md: string;
     };
     display: {
         base: string;
@@ -150,6 +168,9 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
         borderColor: {
             base: string;
             md: string;
+        } | {
+            base: string;
+            md: string;
         };
     };
     "> span": {
@@ -168,6 +189,9 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
             color: string;
             fontWeight: string;
             paddingStart: string;
+            _dark: {
+                color: string;
+            };
         };
     };
 };
@@ -186,6 +210,9 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
         borderColor: {
             base: string;
             md: string;
+        } | {
+            base: string;
+            md: string;
         };
     };
     border: string;
@@ -193,6 +220,9 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
     borderColor: {
         base: string;
         md: string;
+    } | {
+        base: string;
+        md: string;
     };
     display: {
         base: string;
@@ -234,18 +264,28 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
             color: string;
             fontWeight: string;
             paddingStart: string;
+            _dark: {
+                color: string;
+            };
         };
     };
 };
 export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
     tbody: {
         th: {
-            color: string;
             backgroundColor: {
                 base: string;
                 md: string;
             };
+            color: string;
             verticalAlign: string;
+            _dark: {
+                backgroundColor: {
+                    base: string;
+                    md: string;
+                };
+                color: string;
+            };
         };
         td: {
             verticalAlign: string;
@@ -282,6 +322,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
             };
             borderColor: string;
         };
+        _dark: {
+            borderColor: string;
+        };
     };
     th: {
         color: string;
@@ -293,11 +336,17 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 md: string;
             };
         };
+        _dark: {
+            color: string;
+        };
         border: string;
         borderBottom: string;
         borderColor: {
             base: string;
             md: string;
+        } | {
+            base: string;
+            md: string;
         };
         display: {
             base: string;
@@ -332,6 +381,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
             borderColor: {
                 base: string;
                 md: string;
+            } | {
+                base: string;
+                md: string;
             };
         };
         "> span": {
@@ -350,6 +402,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 color: string;
                 fontWeight: string;
                 paddingStart: string;
+                _dark: {
+                    color: string;
+                };
             };
         };
     };
@@ -368,6 +423,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
             borderColor: {
                 base: string;
                 md: string;
+            } | {
+                base: string;
+                md: string;
             };
         };
         border: string;
@@ -375,6 +433,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
         borderColor: {
             base: string;
             md: string;
+        } | {
+            base: string;
+            md: string;
         };
         display: {
             base: string;
@@ -416,6 +477,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 color: string;
                 fontWeight: string;
                 paddingStart: string;
+                _dark: {
+                    color: string;
+                };
             };
         };
     };
@@ -430,18 +494,28 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
         marginTop: string;
         padding: string;
         textAlign: string;
+        _dark: {
+            color: string;
+        };
     };
 };
 declare const CustomTable: {
     baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
         tbody: {
             th: {
-                color: string;
                 backgroundColor: {
                     base: string;
                     md: string;
                 };
+                color: string;
                 verticalAlign: string;
+                _dark: {
+                    backgroundColor: {
+                        base: string;
+                        md: string;
+                    };
+                    color: string;
+                };
             };
             td: {
                 verticalAlign: string;
@@ -478,6 +552,9 @@ declare const CustomTable: {
                 };
                 borderColor: string;
             };
+            _dark: {
+                borderColor: string;
+            };
         };
         th: {
             color: string;
@@ -489,11 +566,17 @@ declare const CustomTable: {
                     md: string;
                 };
             };
+            _dark: {
+                color: string;
+            };
             border: string;
             borderBottom: string;
             borderColor: {
                 base: string;
                 md: string;
+            } | {
+                base: string;
+                md: string;
             };
             display: {
                 base: string;
@@ -528,6 +611,9 @@ declare const CustomTable: {
                 borderColor: {
                     base: string;
                     md: string;
+                } | {
+                    base: string;
+                    md: string;
                 };
             };
             "> span": {
@@ -546,6 +632,9 @@ declare const CustomTable: {
                     color: string;
                     fontWeight: string;
                     paddingStart: string;
+                    _dark: {
+                        color: string;
+                    };
                 };
             };
         };
@@ -564,6 +653,9 @@ declare const CustomTable: {
                 borderColor: {
                     base: string;
                     md: string;
+                } | {
+                    base: string;
+                    md: string;
                 };
             };
             border: string;
@@ -571,6 +663,9 @@ declare const CustomTable: {
             borderColor: {
                 base: string;
                 md: string;
+            } | {
+                base: string;
+                md: string;
             };
             display: {
                 base: string;
@@ -612,6 +707,9 @@ declare const CustomTable: {
                     color: string;
                     fontWeight: string;
                     paddingStart: string;
+                    _dark: {
+                        color: string;
+                    };
                 };
             };
         };
@@ -626,6 +724,9 @@ declare const CustomTable: {
             marginTop: string;
             padding: string;
             textAlign: string;
+            _dark: {
+                color: string;
+            };
         };
     };
 };

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

@@ -26,10 +26,24 @@ declare const FeedbackBox: {
                 wordWrap: string;
             };
             top: string;
+            _dark: {
+                svg: {
+                    fill: string;
+                };
+            };
         };
         drawerBody: {
+            borderLeft: {
+                base: any;
+                md: string;
+            };
+            borderColor: string;
             paddingTop: string;
             paddingBottom: string;
+            _dark: {
+                background: string;
+                borderColor: string;
+            };
         };
         drawerContent: {
             marginStart: string;
@@ -42,6 +56,11 @@ declare const FeedbackBox: {
             alignItems: string;
             background: string;
             borderBottomWidth: string;
+            borderLeftWidth: {
+                base: any;
+                md: string;
+            };
+            borderTopWidth: string;
             display: string;
             fontSize: string;
             px: string;
@@ -50,6 +69,9 @@ declare const FeedbackBox: {
             p: {
                 marginBottom: string;
             };
+            _dark: {
+                background: string;
+            };
         };
         openButton: {
             position: string;

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

@@ -14,6 +14,9 @@ declare const Fieldset: {
             span: {
                 fontWeight: string;
             };
+            _dark: {
+                color: string;
+            };
         };
     };
 };

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

@@ -15,11 +15,27 @@ declare const FilterBar: {
         width: any;
     }) => {
         width: string;
+        modalBody: {
+            _dark: {
+                background: string;
+            };
+        };
         modalHeader: {
             bg: string;
+            _dark: {
+                background: string;
+                borderBottom: string;
+                borderColor: string;
+            };
         };
         modalFooter: {
             bg: string;
+            _dark: {
+                background: string;
+                borderTop: string;
+                borderColor: string;
+                color: string;
+            };
         };
         modalCloseButton: {
             mt: string;

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

@@ -12,6 +12,9 @@ declare const Footer: {
             lg: string;
         };
         position: string;
+        _dark: {
+            backgroundColor: string;
+        };
         listsContainer: {
             display: string;
             flexDirection: {
@@ -141,6 +144,9 @@ declare const Footer: {
                     svg: {
                         width: string;
                         height: string;
+                        _dark: {
+                            fill: string;
+                        };
                     };
                 };
             };
@@ -159,9 +165,15 @@ declare const Footer: {
                 outline: string;
                 outlineColor: string;
             };
+            _dark: {
+                color: string;
+            };
         };
         svg: {
             fill: string;
+            _dark: {
+                color: string;
+            };
         };
         logoContainer: {
             position: string;
@@ -199,10 +211,16 @@ declare const Footer: {
             width: {
                 md: string;
             };
+            _dark: {
+                color: string;
+            };
             img: {
                 bg: string;
                 height: string;
                 width: string;
+                _dark: {
+                    opacity: string;
+                };
             };
         };
         copyright: {

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

@@ -7,6 +7,9 @@ declare const activeFocus: (darkMode?: boolean) => {
     outlineOffset: string;
     outlineColor: string;
     zIndex: string;
+    _dark: {
+        outlineColor: string;
+    };
 };
 declare const checkboxRadioLabelStyles: {
     userSelect: string;
@@ -22,6 +25,14 @@ declare const checkboxRadioLabelStyles: {
     _invalid: {
         color: string;
     };
+    _dark: {
+        _disabled: {
+            color: string;
+        };
+        _invalid: {
+            color: string;
+        };
+    };
 };
 declare const checkboxRadioControlSize: {
     h: string;
@@ -50,6 +61,22 @@ declare const checkboxRadioHoverStyles: {
                 borderColor: string;
             };
         };
+        _dark: {
+            span: {
+                _first: {
+                    borderColor: string;
+                };
+                _checked: {
+                    borderColor: string;
+                };
+                _disabled: {
+                    borderColor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                };
+            };
+        };
     };
 };
 declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
@@ -72,15 +99,34 @@ declare const labelLegendText: {
     span: {
         fontWeight: string;
     };
+    _dark: {
+        color: string;
+    };
 };
 declare const selectTextInputDisabledStyles: {
     bg: string;
     borderColor: string;
     color: string;
     opacity: string;
+    _dark: {
+        bg: string;
+        borderColor: string;
+        color: string;
+    };
 };
 declare const selectTextInputFocusStyles: {
     borderColor: string;
+    _dark: {
+        borderColor: string;
+        boxShadow: string;
+        outline: string;
+        outlineOffset: string;
+        outlineColor: string;
+        zIndex: string;
+        _dark: {
+            outlineColor: string;
+        };
+    };
     boxShadow: string;
     outline: string;
     outlineOffset: string;

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

@@ -5,6 +5,7 @@ export declare const headerFocusColor = "#0F465C";
 export declare const headerLightBlue = "#78CCED";
 export declare const headerLightBlueIcon = "#1DA1D4";
 export declare const headerRed = "#ED1C24";
+export declare const headerRedDarkMode = "#DC6F73";
 export declare const headerRedDonate = "#E32B31";
 export declare const headerYellow = "#FEE34A";
 export declare const headerFocus: {
@@ -18,6 +19,9 @@ declare const Header: {
     parts: string[];
     baseStyle: {
         fontFamily: string;
+        _dark: {
+            backgroundColor: string;
+        };
         container: {
             marginX: {
                 md: string;
@@ -34,6 +38,9 @@ declare const Header: {
             bg: string;
             marginTop: string;
             marginBottom: string;
+            _dark: {
+                backgroundColor: string;
+            };
         };
         logo: {
             padding: {

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

@@ -156,6 +156,15 @@ declare const HeaderLogin: {
                     md: any;
                 };
             };
+            _dark: {
+                color: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    color: string;
+                };
+            };
         };
         patronGreeting: {
             alignSelf: string;
@@ -286,6 +295,15 @@ declare const HeaderLogin: {
                     md: any;
                 };
             };
+            _dark: {
+                color: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    color: string;
+                };
+            };
         };
     };
 };

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

@@ -49,6 +49,21 @@ declare const HeaderLoginButton: {
             outlineStyle: string;
             outlineWidth: string;
         };
+        _dark: {
+            bg: {
+                base: string;
+                md: string;
+            };
+            color: string;
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                svg: {
+                    fill: string;
+                };
+            };
+        };
     };
 };
 export default HeaderLoginButton;

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

@@ -20,18 +20,50 @@ declare const HeaderLowerNav: {
                 color: string;
                 paddingBottom: string;
                 textDecoration: string;
+                _dark: {
+                    color: string;
+                };
             };
             _focus: {
                 borderBottom: string;
                 color: string;
                 paddingBottom: string;
                 textDecoration: string;
+                _dark: {
+                    color: string;
+                };
                 borderRadius: string;
                 outlineColor: string;
                 outlineOffset: string;
                 outlineStyle: string;
                 outlineWidth: string;
             };
+            _dark: {
+                color: string;
+                _hover: {
+                    borderBottom: string;
+                    color: string;
+                    paddingBottom: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                    };
+                };
+                _focus: {
+                    borderBottom: string;
+                    color: string;
+                    paddingBottom: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                    };
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+            };
         };
     };
 };

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

@@ -18,6 +18,11 @@ declare const HeaderMobileIconNav: {
                 outlineWidth: string;
             };
         };
+        _dark: {
+            svg: {
+                fill: string;
+            };
+        };
     };
 };
 export default HeaderMobileIconNav;

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;