@nypl/design-system-react-components 2.0.0 → 2.0.1

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

@@ -0,0 +1,22 @@
+interface LabelBaseStyle {
+    isInlined: boolean;
+}
+declare const Label: {
+    baseStyle: ({ isInlined }: LabelBaseStyle) => {
+        flex: string;
+        whiteSpace: string;
+        color: string;
+        display: string;
+        fontSize: string;
+        fontWeight: string;
+        marginBottom: string;
+        width: string;
+        span: {
+            fontWeight: string;
+        };
+        _dark: {
+            color: string;
+        };
+    };
+};
+export default Label;

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

@@ -0,0 +1,152 @@
+export declare const baseLinkStyles: {
+    color: string;
+    textDecoration: string;
+    textDecorationStyle: string;
+    textDecorationThickness: string;
+    textUnderlineOffset: string;
+    _dark: {
+        color: string;
+    };
+    _hover: {
+        color: string;
+        textDecorationStyle: string;
+        textDecorationThickness: string;
+        _dark: {
+            color: string;
+        };
+    };
+    _visited: {
+        color: string;
+        _dark: {
+            color: string;
+        };
+    };
+};
+declare const Link: {
+    parts: string[];
+    baseStyle: ({ finalIsUnderlined }: {
+        finalIsUnderlined?: boolean;
+    }) => {
+        textDecoration: string;
+        /** This is needed for custom anchor elements or link components
+         * that are passed as children to the `Link` component. */
+        a: {
+            _hover: {
+                color: string;
+            };
+        };
+        /** The element will handle descriptive text added to aid
+         * screen readers. */
+        screenreaderOnly: {
+            clip: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            overflow: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+            wordWrap: string;
+        };
+        color: string;
+        textDecorationStyle: string;
+        textDecorationThickness: string;
+        textUnderlineOffset: string;
+        _dark: {
+            color: string;
+        };
+        _hover: {
+            color: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            _dark: {
+                color: string;
+            };
+        };
+        _visited: {
+            color: string;
+            _dark: {
+                color: string;
+            };
+        };
+    };
+    variants: {
+        link: {};
+        disabled: {
+            color: string;
+            pointerEvents: string;
+        };
+        moreLink: {
+            alignItems: string;
+            display: string;
+            svg: {
+                height: string;
+                width: string;
+                textDecoration: string;
+                fill: string;
+            };
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+            _visited: {
+                svg: {
+                    fill: string;
+                };
+                _dark: {
+                    svg: {
+                        fill: string;
+                    };
+                };
+            };
+        };
+        button: {
+            width: string;
+            borderRadius: string;
+            lineHeight: string;
+            display: string;
+            cursor: string;
+            color: string;
+            justifyContent: string;
+            py: string;
+            px: string;
+            textDecoration: string;
+            fontWeight: string;
+            bg: string;
+            _dark: {
+                color: string;
+                bg: string;
+            };
+            _hover: {
+                color: string;
+                bg: string;
+                textDecoration: string;
+                _dark: {
+                    color: string;
+                    bg: string;
+                };
+            };
+            _visited: {
+                color: string;
+                _dark: {
+                    _visited: {
+                        color: string;
+                    };
+                };
+            };
+        };
+        buttonPrimary: any;
+        buttonSecondary: any;
+        buttonPill: any;
+        buttonCallout: any;
+        buttonNoBrand: any;
+        buttonDisabled: any;
+    };
+};
+export default Link;

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

@@ -0,0 +1,230 @@
+interface ListBaseStyle {
+    inline?: boolean;
+    noStyling: boolean;
+}
+export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) => {
+    margin: string;
+    listStyle: string;
+    marginInlineStart: string;
+    paddingStart: string;
+    padding: string;
+    display: string;
+    li: {
+        marginEnd: string;
+        listStyleType: string;
+        _notFirst: {
+            marginTop: string;
+        };
+    };
+};
+export declare const baseUnorderedStyles: (noStyling?: boolean) => {
+    listStyle: string;
+    li: {
+        _before: {
+            color: string;
+            content: string;
+            display: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            marginStart: string;
+            width: string;
+        };
+        _dark: {
+            _before: {
+                color: string;
+            };
+        };
+    };
+    margin: string;
+    marginBottom: string;
+};
+export declare const baseSectionDescriptionStyles: {
+    borderBottom: string;
+    borderColor: string;
+    paddingStart: string;
+    h2: {
+        borderTop: string;
+        borderColor: string;
+        margin: string;
+        padding: string;
+        _dark: {
+            borderColor: string;
+        };
+    };
+    _dark: {
+        borderColor: string;
+    };
+};
+export declare const baseDescriptionStyles: {
+    dl: {
+        display: string;
+        gridTemplateColumns: {
+            base: string;
+            md: string;
+        };
+        gridTemplateRows: string;
+        margin: string;
+    };
+    dt: {
+        borderTop: string;
+        borderColor: string;
+        color: string;
+        fontWeight: string;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
+        paddingTop: string;
+        paddingEnd: {
+            md: string;
+        };
+        _dark: {
+            borderColor: string;
+            color: string;
+        };
+    };
+    dd: {
+        margin: string;
+        paddingBottom: string;
+        borderTop: {
+            base: string;
+            md: string;
+        };
+        borderColor: {
+            md: string;
+        };
+        paddingTop: {
+            md: string;
+        };
+        _dark: {
+            borderColor: {
+                md: string;
+            };
+        };
+    };
+    borderBottom: string;
+    borderColor: string;
+    paddingStart: string;
+    h2: {
+        borderTop: string;
+        borderColor: string;
+        margin: string;
+        padding: string;
+        _dark: {
+            borderColor: string;
+        };
+    };
+    _dark: {
+        borderColor: string;
+    };
+};
+declare const List: {
+    baseStyle: ({ inline, noStyling }: ListBaseStyle) => {
+        margin: string;
+        listStyle: string;
+        marginInlineStart: string;
+        paddingStart: string;
+        padding: string;
+        display: string;
+        li: {
+            marginEnd: string;
+            listStyleType: string;
+            _notFirst: {
+                marginTop: string;
+            };
+        };
+    };
+    variants: {
+        ul: ({ noStyling }: ListBaseStyle) => {
+            listStyle: string;
+            li: {
+                _before: {
+                    color: string;
+                    content: string;
+                    display: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    marginStart: string;
+                    width: string;
+                };
+                _dark: {
+                    _before: {
+                        color: string;
+                    };
+                };
+            };
+            margin: string;
+            marginBottom: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
+        };
+        dl: {
+            dl: {
+                display: string;
+                gridTemplateColumns: {
+                    base: string;
+                    md: string;
+                };
+                gridTemplateRows: string;
+                margin: string;
+            };
+            dt: {
+                borderTop: string;
+                borderColor: string;
+                color: string;
+                fontWeight: string;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
+                paddingTop: string;
+                paddingEnd: {
+                    md: string;
+                };
+                _dark: {
+                    borderColor: string;
+                    color: string;
+                };
+            };
+            dd: {
+                margin: string;
+                paddingBottom: string;
+                borderTop: {
+                    base: string;
+                    md: string;
+                };
+                borderColor: {
+                    md: string;
+                };
+                paddingTop: {
+                    md: string;
+                };
+                _dark: {
+                    borderColor: {
+                        md: string;
+                    };
+                };
+            };
+            borderBottom: string;
+            borderColor: string;
+            paddingStart: string;
+            h2: {
+                borderTop: string;
+                borderColor: string;
+                margin: string;
+                padding: string;
+                _dark: {
+                    borderColor: string;
+                };
+            };
+            _dark: {
+                borderColor: string;
+            };
+        };
+    };
+};
+export default List;