@ncino/styles 9.2.0-preview.3 → 9.2.0

package/dist/gator/themes/components/badge.js

@@ -0,0 +1,53 @@
+import { gatorTypography as r } from "../utils/themeConfig.js";
+const e = {
+  MuiBadge: {
+    defaultProps: {
+      color: "error"
+      // Default to error color to match NGC
+    },
+    styleOverrides: {
+      badge: {
+        fontFamily: r.fontFamily.body,
+        fontSize: "var(--font-size-body-3)",
+        // 13px
+        lineHeight: "var(--line-height-body-3)",
+        // 18px
+        fontWeight: r.fontWeight.regular,
+        // 400 - matches NGC
+        height: "auto",
+        minWidth: "auto",
+        padding: "var(--spacing-1) var(--spacing-5)",
+        // 1px 8px - matches NGC text padding
+        borderRadius: "var(--border-radius-circle)",
+        "& .MuiSvgIcon-root": {
+          margin: "3px -4px"
+          // Adjust icon margin to better center within badge
+        }
+      },
+      dot: {
+        height: "9px",
+        // 0.5625rem from NGC
+        minWidth: "9px",
+        borderRadius: "var(--border-radius-circle)",
+        padding: 0
+      },
+      tile: {
+        borderRadius: "var(--border-radius-x-small)"
+      },
+      colorError: {
+        backgroundColor: "var(--color-feedback-error-secondary)",
+        color: "var(--color-text-inverse)"
+      },
+      colorWarning: {
+        backgroundColor: "var(--color-feedback-warning-secondary)",
+        color: "var(--color-text-inverse)"
+      },
+      colorSuccess: {
+        backgroundColor: "var(--color-feedback-success-secondary)"
+      }
+    }
+  }
+};
+export {
+  e as MUIGatorBadgeOverrides
+};

package/dist/gator/themes/components/button.js

@@ -0,0 +1,65 @@
+import { gatorTypography as o } from "../utils/themeConfig.js";
+const r = {
+  MuiButton: {
+    defaultProps: {
+      disableRipple: !0
+    },
+    styleOverrides: {
+      root: {
+        textTransform: "none",
+        fontWeight: o.fontWeight.semiBold,
+        height: "fit-content",
+        "&.Mui-focusVisible": {
+          boxShadow: "none",
+          outline: "2px solid var(--color-border-focus)",
+          outlineOffset: "2px"
+        },
+        "&:hover": {
+          boxShadow: "var(--shadow-2-card-raised)"
+        }
+      },
+      sizeLarge: {
+        padding: "var(--spacing-7) var(--spacing-8)",
+        fontSize: "var(--font-size-body-1)",
+        lineHeight: "var(--line-height-body-1)"
+      },
+      sizeMedium: {
+        padding: "var(--spacing-6) var(--spacing-8)",
+        fontSize: "var(--font-size-body-2)",
+        lineHeight: "var(--line-height-body-2)"
+      },
+      sizeSmall: {
+        padding: "var(--spacing-4) var(--spacing-7)",
+        fontSize: "var(--font-size-body-3)",
+        lineHeight: "var(--line-height-body-3)"
+      },
+      contained: {
+        boxShadow: "none"
+      },
+      outlinedPrimary: {
+        borderColor: "var(--color-border-brand)"
+      },
+      colorNeutral: {
+        backgroundColor: "var(--color-surface-neutral)"
+      },
+      text: {
+        color: "var(--color-text-brand)",
+        textDecoration: "underline",
+        textDecorationColor: "var(--color-underline-primary)",
+        textUnderlineOffset: "4px",
+        "&:hover": {
+          boxShadow: "none",
+          textDecoration: "underline",
+          textDecorationColor: "var(--color-underline-brand)",
+          backgroundColor: "transparent"
+        }
+      },
+      loading: {
+        textDecoration: "none"
+      }
+    }
+  }
+};
+export {
+  r as MUIGatorButtonOverrides
+};

package/dist/gator/themes/components/card.js

@@ -0,0 +1,190 @@
+const r = {
+  MuiCard: {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: "var(--border-radius-x-large)",
+        backgroundColor: "var(--color-surface-primary)",
+        overflow: "visible",
+        position: "relative"
+      }
+    }
+  },
+  MuiCardHeader: {
+    styleOverrides: {
+      root: {
+        padding: "var(--spacing-8)",
+        display: "flex",
+        gap: "var(--spacing-10)"
+      },
+      title: {
+        fontFamily: "var(--font-family-headings)",
+        fontSize: "var(--font-size-heading-3)",
+        lineHeight: "var(--line-height-heading-3)",
+        fontWeight: "var(--font-weight-semi-bold)",
+        color: "var(--color-text-primary)"
+      },
+      subheader: {
+        fontFamily: "var(--font-family-body)",
+        fontSize: "var(--font-size-body-2)",
+        lineHeight: "var(--line-height-body-2)",
+        fontWeight: "var(--font-weight-regular)",
+        color: "var(--color-text-secondary)",
+        marginTop: "0"
+      }
+    }
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: "var(--spacing-8) var(--spacing-8) var(--spacing-10) var(--spacing-8)",
+        fontSize: "var(--font-size-body-2)",
+        color: "var(--color-text-primary)",
+        "&:last-child": {
+          paddingBottom: "var(--spacing-10)"
+        }
+      }
+    }
+  },
+  MuiCardActions: {
+    styleOverrides: {
+      root: {
+        padding: "var(--spacing-8)",
+        backgroundColor: "var(--color-surface-secondary)",
+        borderRadius: "0 0 var(--border-radius-x-large) var(--border-radius-x-large)"
+      }
+    }
+  },
+  MuiCardActionArea: {
+    defaultProps: {
+      disableRipple: !0,
+      disableTouchRipple: !0
+    },
+    styleOverrides: {
+      root: {
+        "&.Mui-focusVisible": {
+          outline: "2px solid var(--color-border-focus)",
+          background: "var(--color-surface-primary)"
+        },
+        "&[data-active]": {
+          border: "1px solid var(--color-border-brand)"
+        },
+        "&:hover": {
+          background: "var(--color-surface-primary)",
+          boxShadow: "var(--shadow-4-modal)"
+        },
+        "&:active": {
+          backgroundColor: "var(--color-surface-brand)"
+        }
+      },
+      focusHighlight: {
+        display: "none"
+      }
+    }
+  },
+  MuiCardMedia: {
+    styleOverrides: {
+      root: {
+        borderRadius: "var(--border-radius-x-large)",
+        padding: "var(--spacing-3)"
+      }
+    }
+  },
+  MuiPaper: {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      root: {
+        backgroundImage: "none"
+      },
+      rounded: {
+        borderRadius: "var(--border-radius-x-large)"
+      },
+      elevation0: {
+        boxShadow: "none"
+      },
+      elevation1: {
+        boxShadow: "var(--shadow-1-card)"
+      },
+      elevation2: {
+        boxShadow: "var(--shadow-2-card-raised)"
+      },
+      elevation3: {
+        boxShadow: "var(--shadow-3-dropdown)"
+      },
+      elevation4: {
+        boxShadow: "var(--shadow-4-modal)"
+      },
+      outlined: {
+        border: "1px solid var(--color-border-tertiary)",
+        borderRadius: "var(--border-radius-x-large)"
+      },
+      "small-left": {
+        display: "flex",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        img: {
+          width: "96px",
+          height: "96px",
+          objectFit: "cover",
+          objectPosition: "center",
+          display: "block",
+          margin: "var(--spacing-3)",
+          padding: 0,
+          borderRadius: "var(--border-radius-large)"
+        }
+      },
+      "small-right": {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        img: {
+          width: "96px",
+          height: "96px",
+          objectFit: "cover",
+          objectPosition: "center",
+          display: "block",
+          margin: "var(--spacing-3)",
+          padding: 0,
+          borderRadius: "var(--border-radius-large)"
+        }
+      },
+      "full-image": {
+        width: "100%",
+        position: "relative",
+        img: {
+          padding: 0,
+          width: "100%",
+          height: "auto",
+          objectFit: "cover",
+          objectPosition: "center",
+          display: "block",
+          borderRadius: "var(--border-radius-large)"
+        },
+        "& .MuiCardHeader-root": {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          padding: "var(--spacing-8) var(--spacing-10)",
+          background: "linear-gradient(180deg, var(--color-surface-alpha-neutral-subtle, rgba(4, 4, 4, 0.00)) 0%, var(--color-surface-inverse, rgba(31, 31, 31, 0.60)) 100%);",
+          backdropFilter: "blur(8px)",
+          zIndex: 2,
+          borderRadius: "0 0 var(--border-radius-large) var(--border-radius-large)",
+          "& .MuiCardHeader-title, & .MuiCardHeader-subheader": {
+            color: "var(--color-text-inverse)"
+          }
+        }
+      }
+    }
+  }
+};
+export {
+  r as MUIGatorCardOverrides
+};

package/dist/gator/themes/components/checkbox.js

@@ -0,0 +1,69 @@
+const r = {
+  MuiCheckbox: {
+    defaultProps: {
+      disableRipple: !0
+    },
+    styleOverrides: {
+      root: {
+        padding: "3px",
+        // Default unchecked state
+        "&:not(.Mui-checked):not(.MuiCheckbox-indeterminate)": {
+          color: "var(--color-border-primary)",
+          svg: {
+            display: "none"
+          },
+          "::before": {
+            content: '""',
+            display: "block",
+            width: "10px",
+            height: "10px",
+            transform: "scale(1.8)",
+            outline: "1px solid currentColor",
+            outlineOffset: "-1px",
+            borderRadius: "2px",
+            margin: "7px",
+            backgroundColor: "var(--color-surface-primary)"
+          },
+          "&:hover::before": {
+            color: "var(--color-feedback-brand-secondary)",
+            backgroundColor: "var(--color-surface-brand)"
+          }
+        },
+        // Checked & Indeterminate states
+        "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+          color: "var(--color-feedback-brand)",
+          "&:hover": {
+            color: "var(--color-feedback-brand-secondary)"
+          }
+        },
+        // Focus state
+        "&.Mui-focusVisible": {
+          outline: "3px solid var(--color-border-focus)",
+          outlineOffset: "-3px",
+          borderRadius: "8px"
+        },
+        // Disabled state
+        "&.Mui-disabled": {
+          color: "var(--color-border-disabled) !important",
+          "::before": {
+            backgroundColor: "var(--color-surface-secondary) !important"
+          }
+        },
+        // Error state
+        ".Mui-error &": {
+          color: "var(--color-feedback-error) !important",
+          "&:hover svg": {
+            color: "var(--color-feedback-error-secondary) !important"
+          },
+          "&:hover::before": {
+            backgroundColor: "var(--color-surface-error) !important",
+            color: "var(--color-feedback-error) !important"
+          }
+        }
+      }
+    }
+  }
+};
+export {
+  r as MUIGatorCheckboxOverrides
+};

package/dist/gator/themes/components/chip.js

@@ -0,0 +1,220 @@
+import { gatorTypography as r } from "../utils/themeConfig.js";
+import o from "@mui/icons-material/HighlightOff";
+import a from "react";
+const d = {
+  MuiChip: {
+    defaultProps: {
+      variant: "outlined",
+      deleteIcon: a.createElement(o)
+    },
+    styleOverrides: {
+      root: {
+        fontFamily: r.fontFamily.body,
+        fontWeight: r.fontWeight.regular,
+        borderRadius: "var(--border-radius-circle)",
+        padding: 0,
+        gap: "4px",
+        "&.Mui-disabled": {
+          opacity: 1,
+          backgroundColor: "var(--color-surface-disabled)",
+          color: "var(--color-text-disabled)",
+          borderColor: "var(--color-border-disabled)"
+        }
+      },
+      // Size variants
+      sizeSmall: {
+        height: "26px",
+        fontSize: "var(--font-size-body-3)",
+        lineHeight: "var(--line-height-body-3)",
+        padding: "var(--spacing-2)",
+        "& .MuiChip-icon": {
+          fontSize: "16px"
+        }
+      },
+      sizeMedium: {
+        height: "30px",
+        fontSize: "var(--font-size-body-2)",
+        lineHeight: "var(--line-height-body-2)",
+        padding: "var(--spacing-2)",
+        "& .MuiChip-icon": {
+          fontSize: "18px"
+        }
+      },
+      // Outlined variant (NGC hideBorder=false) - WITH border
+      outlined: {
+        backgroundColor: "var(--color-surface-secondary)",
+        border: "1px solid var(--color-border-tertiary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-neutral)"
+        },
+        "&:focus": {
+          backgroundColor: "var(--color-surface-tertiary)"
+        }
+      },
+      // Clickable state
+      clickable: {
+        cursor: "pointer",
+        userSelect: "none",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-neutral-secondary)"
+        },
+        "&:active": {
+          backgroundColor: "var(--color-surface-neutral-tertiary)",
+          boxShadow: "none"
+        }
+      },
+      clickableColorPrimary: {
+        "&:hover": {
+          backgroundColor: "var(--color-surface-brand-secondary)"
+        }
+      },
+      // Deletable state
+      deletable: {
+        "&:focus": {
+          backgroundColor: "var(--color-surface-neutral-secondary)"
+        }
+      },
+      // Color variants - Primary/Brand
+      colorPrimary: {
+        backgroundColor: "var(--color-surface-secondary)",
+        color: "var(--color-text-primary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-tertiary)"
+        }
+      },
+      outlinedPrimary: {
+        backgroundColor: "var(--color-surface-brand)",
+        color: "var(--color-text-primary)",
+        borderColor: "var(--color-border-brand-tertiary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-brand-secondary)",
+          borderColor: "var(--color-border-brand-tertiary)"
+        }
+      },
+      // Color variants - Success
+      colorSuccess: {
+        backgroundColor: "var(--color-surface-success)",
+        color: "var(--color-text-primary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-success-secondary)"
+        }
+      },
+      outlinedSuccess: {
+        backgroundColor: "var(--color-surface-success)",
+        color: "var(--color-text-primary)",
+        borderColor: "var(--color-border-success)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-success-secondary)",
+          borderColor: "var(--color-border-success-secondary)"
+        }
+      },
+      // Color variants - Error
+      colorError: {
+        backgroundColor: "var(--color-surface-error)",
+        color: "var(--color-text-primary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-error-secondary)"
+        }
+      },
+      outlinedError: {
+        backgroundColor: "var(--color-surface-error)",
+        color: "var(--color-text-primary)",
+        borderColor: "var(--color-border-error)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-error-secondary)",
+          borderColor: "var(--color-border-error-secondary)"
+        }
+      },
+      // Color variants - Warning
+      colorWarning: {
+        backgroundColor: "var(--color-surface-warning)",
+        color: "var(--color-text-primary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-warning-secondary)"
+        }
+      },
+      outlinedWarning: {
+        backgroundColor: "var(--color-surface-warning)",
+        color: "var(--color-text-primary)",
+        borderColor: "var(--color-border-warning)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-warning-secondary)",
+          borderColor: "var(--color-border-warning-secondary)"
+        }
+      },
+      // Color variants - Info (using secondary/neutral colors)
+      colorInfo: {
+        backgroundColor: "var(--color-surface-brand)",
+        color: "var(--color-text-primary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-brand-secondary)"
+        }
+      },
+      outlinedInfo: {
+        backgroundColor: "var(--color-surface-brand)",
+        color: "var(--color-text-primary)",
+        borderColor: "var(--color-border-brand-tertiary)",
+        "&:hover": {
+          backgroundColor: "var(--color-surface-brand-secondary)",
+          borderColor: "var(--color-border-brand-tertiary)"
+        }
+      },
+      // Color variants - AI
+      colorAi: {
+        background: "radial-gradient(135.16% 99.24% at 113.24% 116.21%, var(--color-surface-warning-secondary, #F5B77F) 0%, rgba(245, 183, 127, 0.00) 100%), radial-gradient(76.31% 76.31% at 50% 50%, var(--color-surface-purple-secondary, #E5CCFF) 0%, rgba(229, 204, 255, 0.00) 100%), radial-gradient(122.16% 126.39% at 8.91% 12.38%, var(--color-surface-aqua-secondary, #A2DBF0) 0%, rgba(162, 219, 240, 0.00) 100%), var(--color-surface-purple, #F6EEFF)",
+        color: "var(--color-text-primary)",
+        "&:hover": {
+          background: "var(--color-surface-purple-secondary)"
+        }
+      },
+      outlinedAi: {
+        background: "radial-gradient(135.16% 99.24% at 113.24% 116.21%, var(--color-surface-warning-secondary, #F5B77F) 0%, rgba(245, 183, 127, 0.00) 100%), radial-gradient(76.31% 76.31% at 50% 50%, var(--color-surface-purple-secondary, #E5CCFF) 0%, rgba(229, 204, 255, 0.00) 100%), radial-gradient(122.16% 126.39% at 8.91% 12.38%, var(--color-surface-aqua-secondary, #A2DBF0) 0%, rgba(162, 219, 240, 0.00) 100%), var(--color-surface-purple, #F6EEFF)",
+        color: "var(--color-text-primary)",
+        borderColor: "var(--color-border-purple)",
+        "&:hover": {
+          background: "var(--color-surface-purple-secondary)"
+        }
+      },
+      // Icon styling
+      icon: {
+        color: "inherit",
+        margin: 0
+      },
+      // Delete icon styling
+      deleteIcon: {
+        color: "var(--color-icon-primary)",
+        "&:hover": {
+          color: "var(--color-icon-secondary)"
+        }
+      },
+      deleteIconSmall: {
+        fontSize: "16px"
+      },
+      deleteIconMedium: {
+        fontSize: "17px"
+      },
+      // Avatar styling
+      avatar: {
+        margin: 0,
+        color: "var(--color-text-brand)"
+      },
+      avatarSmall: {
+        width: "18px",
+        height: "18px",
+        fontSize: "var(--font-size-body-3)"
+      },
+      avatarMedium: {
+        width: "22px",
+        height: "22px",
+        fontSize: "var(--font-size-body-3)"
+      },
+      // Label styling
+      label: {
+        padding: "0 4px"
+      }
+    }
+  }
+};
+export {
+  d as MUIGatorChipOverrides
+};

package/dist/gator/themes/components/dialog.js

@@ -0,0 +1,61 @@
+const r = {
+  MuiDialog: {
+    defaultProps: {
+      fullWidth: !0
+    },
+    styleOverrides: {
+      paper: {
+        background: "var(--color-surface-primary)"
+      },
+      paperFullScreen: {
+        ".MuiDialogTitle-root": {
+          textAlign: "center"
+        },
+        ".MuiDialogActions-root": {
+          background: "var(--color-surface-secondary)",
+          padding: "var(--spacing-10)",
+          justifyContent: "center"
+        }
+      }
+    }
+  },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: {
+        background: "var(--color-surface-secondary)",
+        fontSize: "var(--font-size-heading-3)",
+        lineHeight: "var(--line-height-heading-3)",
+        padding: "var(--spacing-8)"
+      }
+    }
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: {
+        // important necessary to override title adding a padding-top
+        padding: "var(--spacing-8) var(--spacing-8) var(--spacing-10) var(--spacing-8) !important",
+        fontSize: "var(--font-size-body-2)",
+        lineHeight: "var(--line-height-body-2)"
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: ({ theme: i }) => ({
+        padding: "var(--spacing-10)",
+        // Vertical on mobile
+        [i.breakpoints.down("sm")]: {
+          flexDirection: "column",
+          gap: "8px",
+          "& > *": {
+            width: "100%",
+            margin: "0 !important"
+          }
+        }
+      })
+    }
+  }
+};
+export {
+  r as MUIGatorDialogOverrides
+};