@ncino/styles 9.0.0-preview.6 → 9.0.0-preview.7

package/src/gator/themes/components/button.ts

@@ -0,0 +1,71 @@
+import { gatorTypography } from '../utils/themeConfig';
+
+export const MUIGatorButtonOverrides = {
+  MuiButton: {
+    defaultProps: {
+      disableRipple: true,
+    },
+
+    styleOverrides: {
+      root: {
+        textTransform: 'none',
+        fontWeight: gatorTypography.fontWeight.semiBold,
+        '&.Mui-focusVisible': {
+          boxShadow: 'none',
+          outline: '2px solid var(--color-border-focus)',
+          outlineOffset: '2px'
+        },
+        '&:hover': {
+          boxShadow: 'var(--shadow-2-card-raised)',
+        },
+      },
+      sizeLarge: {
+        padding: '12px 24px',
+        fontSize: 'var(--font-size-body-1)',
+        lineHeight: 'var(--line-height-body-1)',
+      },
+      sizeMedium: {
+        padding: '8px 16px',
+        fontSize: 'var(--font-size-body-2)',
+        lineHeight: 'var(--line-height-body-2)',
+      },
+      sizeSmall: {
+        padding: '4px 12px',
+        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',
+      }
+    },
+  },
+};
+
+declare module '@mui/material/Button' {
+	interface ButtonPropsColorOverrides {
+		ai: true;
+    neutral: true;
+	}
+}

package/src/gator/themes/components/card.ts

@@ -0,0 +1,202 @@
+/**
+ * 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 const MUIGatorCardOverrides = {
+	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: true,
+		disableTouchRipple: true,
+	},
+	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)',
+					},
+				},
+			},
+		},
+	},
+};
+
+declare module '@mui/material/Paper' {
+	interface PaperPropsVariantOverrides {
+		elevated: true;
+	'small-left': true;
+	'small-right': true;
+	'full-image': true;
+	}
+}

package/src/gator/themes/components/checkbox.ts

@@ -0,0 +1,73 @@
+export const MUIGatorCheckboxOverrides = {
+  MuiCheckbox: {
+	defaultProps: {
+	  disableRipple: true,
+	},
+	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',
+		  },
+		},
+	  },
+	},
+  },
+};

package/src/gator/themes/components/chip.ts

@@ -0,0 +1,270 @@
+import { gatorTypography } from '../utils/themeConfig';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import React from 'react';
+
+export const MUIGatorChipOverrides = {
+	MuiChip: {
+		defaultProps: {
+			variant: 'outlined',
+			deleteIcon: React.createElement(HighlightOffIcon),
+		},
+		styleOverrides: {
+			root: {
+				fontFamily: gatorTypography.fontFamily.body,
+				fontWeight: gatorTypography.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',
+			},
+		},
+	},
+};
+
+declare module '@mui/material/Chip' {
+	interface ChipPropsColorOverrides {
+		ai: true;
+	}
+}

package/src/gator/themes/components/dialog.ts

@@ -0,0 +1,62 @@
+export const MUIGatorDialogOverrides = {
+	 MuiDialog: {
+		defaultProps: {
+			fullWidth: true,
+		},
+		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 }) => ({
+				padding: 'var(--spacing-10)',
+				// Vertical on mobile
+				[theme.breakpoints.down('sm')]: {
+					flexDirection: 'column',
+					gap: '8px',
+
+					'& > *': {
+						width: '100%',
+						margin: '0 !important',
+					}
+				},
+			}),
+		},
+	}
+};