@ncino/styles 9.2.0-preview.3 → 9.2.0

package/dist/types/gator/themes/components/autocomplete.d.ts

@@ -0,0 +1,127 @@
+import { default as React } from 'react';
+export declare const MUIGatorAutocompleteOverrides: {
+    MuiAutocomplete: {
+        defaultProps: {
+            componentsProps: {
+                paper: {
+                    elevation: number;
+                };
+            };
+            popupIcon: React.FunctionComponentElement<import('@mui/material/OverridableComponent').DefaultComponentProps<import('@mui/material/SvgIcon').SvgIconTypeMap<{}, "svg">>>;
+        };
+        styleOverrides: {
+            root: {
+                '& .MuiInputBase-root': {
+                    padding: string;
+                    minHeight: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '& .MuiAutocomplete-input': {
+                    padding: string;
+                };
+                '& .MuiAutocomplete-endAdornment': {
+                    right: string;
+                };
+                '& .MuiAutocomplete-clearIndicator': {
+                    visibility: string;
+                    marginRight: string;
+                    color: string;
+                    '&:hover': {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
+                '& .MuiAutocomplete-popupIndicator': {
+                    color: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                };
+                '.MuiCircularProgress-root': {
+                    marginRight: string;
+                };
+            };
+            paper: {
+                marginTop: string;
+                borderRadius: string;
+                boxShadow: string;
+                backgroundColor: string;
+            };
+            listbox: {
+                padding: string;
+                maxHeight: string;
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+                '& .MuiAutocomplete-option': {
+                    padding: string;
+                    minHeight: string;
+                    color: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                    '&.Mui-focused': {
+                        backgroundColor: string;
+                    };
+                    '&[aria-selected="true"]': {
+                        backgroundColor: string;
+                        color: string;
+                        fontWeight: number;
+                        paddingLeft: string;
+                        '::before': {
+                            content: string;
+                            display: string;
+                            marginRight: string;
+                            color: string;
+                            fontWeight: number;
+                        };
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
+                        '&.Mui-focused': {
+                            backgroundColor: string;
+                        };
+                    };
+                    '&[aria-disabled="true"]': {
+                        opacity: number;
+                        color: string;
+                        pointerEvents: string;
+                    };
+                };
+            };
+            noOptions: {
+                padding: string;
+                color: string;
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            loading: {
+                padding: string;
+                color: string;
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            groupLabel: {
+                padding: string;
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+                color: string;
+                top: number;
+                zIndex: number;
+            };
+            groupUl: {
+                padding: number;
+            };
+            tag: {
+                margin: string;
+                fontSize: string;
+            };
+        };
+    };
+};

package/dist/types/gator/themes/components/avatar.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Gator Avatar Component - MUI Theme Overrides
+ *
+ * Sizes from Figma:
+ * - xxx-small: 16px
+ * - xx-small: 24px
+ * - x-small: 32px
+ * - small (default): 40px
+ * - medium: 48px
+ * - large: 64px
+ * - x-large: 80px
+ *
+ * Colors:
+ * - Background: --color-surface-brand-tertiary (#BDCDDC)
+ * - Text: --color-text-brand (#103656)
+ */
+export declare const MUIGatorAvatarOverrides: {
+    MuiAvatar: {
+        styleOverrides: {
+            root: {
+                fontFamily: string;
+                fontWeight: number;
+                fontSize: string;
+            };
+            colorDefault: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        variants: ({
+            props: {
+                variant: "circular";
+            };
+            style: {
+                borderRadius: string;
+            };
+        } | {
+            props: {
+                variant: "rounded";
+            };
+            style: {
+                borderRadius: string;
+            };
+        } | {
+            props: {
+                variant: "square";
+            };
+            style: {
+                borderRadius: string;
+            };
+        })[];
+    };
+    MuiAvatarGroup: {
+        styleOverrides: {
+            avatar: {
+                border: string;
+                fontSize: string;
+                width: number;
+                height: number;
+            };
+        };
+    };
+};

package/dist/types/gator/themes/components/badge.d.ts

@@ -0,0 +1,42 @@
+export declare const MUIGatorBadgeOverrides: {
+    MuiBadge: {
+        defaultProps: {
+            color: "error";
+        };
+        styleOverrides: {
+            badge: {
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: number;
+                height: string;
+                minWidth: string;
+                padding: string;
+                borderRadius: string;
+                '& .MuiSvgIcon-root': {
+                    margin: string;
+                };
+            };
+            dot: {
+                height: string;
+                minWidth: string;
+                borderRadius: string;
+                padding: number;
+            };
+            tile: {
+                borderRadius: string;
+            };
+            colorError: {
+                backgroundColor: string;
+                color: string;
+            };
+            colorWarning: {
+                backgroundColor: string;
+                color: string;
+            };
+            colorSuccess: {
+                backgroundColor: string;
+            };
+        };
+    };
+};

package/dist/types/gator/themes/components/button.d.ts

@@ -0,0 +1,61 @@
+export declare const MUIGatorButtonOverrides: {
+    MuiButton: {
+        defaultProps: {
+            disableRipple: boolean;
+        };
+        styleOverrides: {
+            root: {
+                textTransform: string;
+                fontWeight: number;
+                height: string;
+                '&.Mui-focusVisible': {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                };
+                '&:hover': {
+                    boxShadow: string;
+                };
+            };
+            sizeLarge: {
+                padding: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            sizeMedium: {
+                padding: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            sizeSmall: {
+                padding: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            contained: {
+                boxShadow: string;
+            };
+            outlinedPrimary: {
+                borderColor: string;
+            };
+            colorNeutral: {
+                backgroundColor: string;
+            };
+            text: {
+                color: string;
+                textDecoration: string;
+                textDecorationColor: string;
+                textUnderlineOffset: string;
+                '&:hover': {
+                    boxShadow: string;
+                    textDecoration: string;
+                    textDecorationColor: string;
+                    backgroundColor: string;
+                };
+            };
+            loading: {
+                textDecoration: string;
+            };
+        };
+    };
+};

package/dist/types/gator/themes/components/card.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Gator Design System - MUI Card Component Overrides
+ *
+ * Maps Gator Card design specifications to MUI Card and Paper components.
+ * Supports elevation, outlined variants, and proper spacing/styling.
+ */
+export declare const MUIGatorCardOverrides: {
+    MuiCard: {
+        defaultProps: {
+            elevation: number;
+        };
+        styleOverrides: {
+            root: {
+                borderRadius: string;
+                backgroundColor: string;
+                overflow: string;
+                position: "relative";
+            };
+        };
+    };
+    MuiCardHeader: {
+        styleOverrides: {
+            root: {
+                padding: string;
+                display: string;
+                gap: string;
+            };
+            title: {
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+                color: string;
+            };
+            subheader: {
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+                color: string;
+                marginTop: string;
+            };
+        };
+    };
+    MuiCardContent: {
+        styleOverrides: {
+            root: {
+                padding: string;
+                fontSize: string;
+                color: string;
+                '&:last-child': {
+                    paddingBottom: string;
+                };
+            };
+        };
+    };
+    MuiCardActions: {
+        styleOverrides: {
+            root: {
+                padding: string;
+                backgroundColor: string;
+                borderRadius: string;
+            };
+        };
+    };
+    MuiCardActionArea: {
+        defaultProps: {
+            disableRipple: boolean;
+            disableTouchRipple: boolean;
+        };
+        styleOverrides: {
+            root: {
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    background: string;
+                };
+                '&[data-active]': {
+                    border: string;
+                };
+                '&:hover': {
+                    background: string;
+                    boxShadow: string;
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+            };
+            focusHighlight: {
+                display: string;
+            };
+        };
+    };
+    MuiCardMedia: {
+        styleOverrides: {
+            root: {
+                borderRadius: string;
+                padding: string;
+            };
+        };
+    };
+    MuiPaper: {
+        defaultProps: {
+            elevation: number;
+        };
+        styleOverrides: {
+            root: {
+                backgroundImage: string;
+            };
+            rounded: {
+                borderRadius: string;
+            };
+            elevation0: {
+                boxShadow: string;
+            };
+            elevation1: {
+                boxShadow: string;
+            };
+            elevation2: {
+                boxShadow: string;
+            };
+            elevation3: {
+                boxShadow: string;
+            };
+            elevation4: {
+                boxShadow: string;
+            };
+            outlined: {
+                border: string;
+                borderRadius: string;
+            };
+            'small-left': {
+                display: string;
+                alignItems: string;
+                height: string;
+                width: string;
+                img: {
+                    width: string;
+                    height: string;
+                    objectFit: string;
+                    objectPosition: string;
+                    display: string;
+                    margin: string;
+                    padding: number;
+                    borderRadius: string;
+                };
+            };
+            'small-right': {
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                height: string;
+                width: string;
+                img: {
+                    width: string;
+                    height: string;
+                    objectFit: string;
+                    objectPosition: string;
+                    display: string;
+                    margin: string;
+                    padding: number;
+                    borderRadius: string;
+                };
+            };
+            'full-image': {
+                width: string;
+                position: string;
+                img: {
+                    padding: number;
+                    width: string;
+                    height: string;
+                    objectFit: string;
+                    objectPosition: string;
+                    display: string;
+                    borderRadius: string;
+                };
+                '& .MuiCardHeader-root': {
+                    position: string;
+                    bottom: number;
+                    left: number;
+                    right: number;
+                    padding: string;
+                    background: string;
+                    backdropFilter: string;
+                    zIndex: number;
+                    borderRadius: string;
+                    '& .MuiCardHeader-title, & .MuiCardHeader-subheader': {
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+};

package/dist/types/gator/themes/components/checkbox.d.ts

@@ -0,0 +1,61 @@
+export declare const MUIGatorCheckboxOverrides: {
+    MuiCheckbox: {
+        defaultProps: {
+            disableRipple: boolean;
+        };
+        styleOverrides: {
+            root: {
+                padding: string;
+                '&:not(.Mui-checked):not(.MuiCheckbox-indeterminate)': {
+                    color: string;
+                    svg: {
+                        display: string;
+                    };
+                    '::before': {
+                        content: string;
+                        display: string;
+                        width: string;
+                        height: string;
+                        transform: string;
+                        outline: string;
+                        outlineOffset: string;
+                        borderRadius: string;
+                        margin: string;
+                        backgroundColor: string;
+                    };
+                    '&:hover::before': {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
+                '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                    color: string;
+                    '&:hover': {
+                        color: string;
+                    };
+                };
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: string;
+                    borderRadius: string;
+                };
+                '&.Mui-disabled': {
+                    color: string;
+                    '::before': {
+                        backgroundColor: string;
+                    };
+                };
+                '.Mui-error &': {
+                    color: string;
+                    '&:hover svg': {
+                        color: string;
+                    };
+                    '&:hover::before': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+};