@ncino/styles 9.2.0-preview.3 → 9.2.0

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

@@ -1,74 +0,0 @@
-import { gatorTypography } from '../utils/themeConfig';
-
-export const MUIGatorButtonOverrides = {
-    MuiButton: {
-        defaultProps: {
-            disableRipple: true
-        },
-
-        styleOverrides: {
-            root: {
-                textTransform: 'none',
-                fontWeight: gatorTypography.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'
-            }
-        }
-    }
-};
-
-declare module '@mui/material/Button' {
-	interface ButtonPropsColorOverrides {
-		ai: true;
-    neutral: true;
-	}
-}

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

@@ -1,202 +0,0 @@
-/**
- * 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

@@ -1,73 +0,0 @@
-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

@@ -1,270 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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',
-					}
-				},
-			}),
-		},
-	}
-};