@ncino/styles 8.0.0 → 9.0.0-preview.10

package/src/gator/themes/components/form-control.ts

@@ -0,0 +1,103 @@
+import { gatorTypography } from '../utils/themeConfig';
+
+export const MUIGatorFormControlOverrides = {
+
+	MuiFormControl: {
+		styleOverrides: {
+			root: {
+				// Radio group label (legend)
+				'& .MuiFormLabel-root': {
+					fontFamily: gatorTypography.fontFamily.body,
+					fontSize: 'var(--font-size-body-1)',
+					lineHeight: 'var(--line-height-body-1)',
+					color: 'var(--color-text-primary)',
+					letterSpacing: 'var(--letter-spacing-default)',
+					fontWeight: gatorTypography.fontWeight.regular,
+					marginBottom: '8px',
+					position: 'relative',
+					transform: 'none',
+
+					'&.Mui-focused': {
+						color: 'var(--color-text-primary)',
+					},
+
+					'&.Mui-disabled': {
+						color: 'var(--color-text-disabled)',
+					},
+				},
+
+				// Help text (FormHelperText)
+				'& .MuiFormHelperText-root': {
+					fontFamily: gatorTypography.fontFamily.body,
+					fontSize: 'var(--font-size-body-2)',
+					lineHeight: 'var(--line-height-body-2)',
+					color: 'var(--color-text-secondary)',
+					letterSpacing: 'var(--letter-spacing-default)',
+					marginLeft: 0,
+					marginTop: '8px',
+
+					'&.Mui-error': {
+						color: 'var(--color-text-error)',
+					},
+				},
+			},
+		},
+	},
+	MuiFormLabel: {
+		styleOverrides: {
+			root: {
+				fontFamily: gatorTypography.fontFamily.body,
+				fontSize: 'var(--font-size-body-1)',
+				lineHeight: 'var(--line-height-body-1)',
+				color: 'var(--color-text-primary)',
+				letterSpacing: 'var(--letter-spacing-default)',
+				fontWeight: gatorTypography.fontWeight.regular,
+				'&.Mui-error': {
+					color: 'var(--color-text-primary)',
+				}
+			}
+		}
+	},
+	MuiFormControlLabel: {
+		styleOverrides: {
+		root: {
+			marginLeft: 0,
+			marginRight: 0,
+			gap: '4px',
+			alignItems: 'center',
+
+			// Label styling
+			'& .MuiFormControlLabel-label': {
+				fontFamily: gatorTypography.fontFamily.body,
+				fontSize: 'var(--font-size-body-1)',
+				lineHeight: 'var(--line-height-body-1)',
+				color: 'var(--color-text-primary)',
+				letterSpacing: 'var(--letter-spacing-default)',
+				paddingTop: '0px', // Aligns with center of radio
+			},
+
+			// Disabled label
+			'&.Mui-disabled .MuiFormControlLabel-label': {
+				color: 'var(--color-text-disabled)',
+			},
+
+			// Error label
+			'&.Mui-error .MuiFormLabel-root': {
+				color: 'var(--color-text-primary)',
+			},
+
+			// Checkbox adjustment
+			'& .MuiCheckbox-root': {
+				marginLeft: '-5px',
+			},
+		},
+		},
+	},
+	MuiFormGroup: {
+		styleOverrides: {
+			root: {
+				gap: '8px',
+			},
+		},
+  },
+};

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

@@ -0,0 +1,53 @@
+/**
+ * Gator Design System - MUI Radio & Radio Group Component Overrides
+ *
+ * Maps Gator Radio design specifications to MUI Radio and RadioGroup components.
+ * Supports all interactive states (default, hover, focus, disabled, error) aligned with Gator tokens.
+ */
+
+export const MUIGatorRadioOverrides = {
+  MuiRadio: {
+    defaultProps: {
+      disableFocusRipple: true,
+      disableTouchRipple: true,
+    },
+    styleOverrides: {
+      root: {
+        padding: '3px', // Centers the 18px radio in a 24px container
+        color: 'var(--color-border-primary)',
+
+        '&:hover svg': {
+          fill: 'var(--color-border-brand)',
+        },
+
+        '&.Mui-focusVisible': {
+          outline: '3px solid var(--color-border-focus)',
+          outlineOffset: '-2px'
+        },
+
+        '&.Mui-checked': {
+          color: 'var(--color-border-brand)',
+        },
+
+        '&.Mui-disabled': {
+          color: 'var(--color-border-disabled)',
+        },
+
+        '.Mui-error &': {
+          color: 'var(--color-feedback-error-secondary)',
+          '&:hover': {
+            backgroundColor: 'var(--color-surface-error)',
+          },
+        },
+
+        '.Mui-error &.Mui-checked': {
+          color: 'var(--color-feedback-error-secondary)',
+        },
+
+        '.Mui-error &:hover svg': {
+          fill: 'var(--color-feedback-error-secondary)',
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,74 @@
+import { gatorTypography } from '../utils/themeConfig';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+export const MUIGatorSelectOverrides = {
+    MuiSelect: {
+        defaultProps: {
+            MenuProps: {
+                PaperProps: {
+                    sx: {
+                        backgroundColor: 'var(--color-surface-primary)',
+                        maxHeight: '14rem',
+                        marginTop: 'var(--spacing-3)',
+                        borderRadius: 'var(--border-radius-medium)',
+                        boxShadow: 'var(--shadow-3-dropdown)',
+
+                        '& .MuiMenuItem-root': {
+                            padding: 'var(--spacing-5) var(--spacing-12)',
+                            minHeight: '40px',
+                            fontFamily: gatorTypography.fontFamily.body,
+                            fontSize: 'var(--font-size-body-1)',
+                            lineHeight: 'var(--line-height-body-1)',
+                            color: 'var(--color-text-primary)',
+
+                            '&:hover': {
+                                backgroundColor: 'var(--color-surface-hover)',
+                            },
+
+                            '&.Mui-focusVisible': {
+                                outline: '2px solid var(--color-border-focus)',
+                                outlineOffset: '-2px',
+                                backgroundColor: 'transparent',
+                            },
+
+                            '&.Mui-selected': {
+                                backgroundColor: 'var(--color-surface-brand)',
+                                color: 'var(--color-text-primary)',
+                                fontWeight: gatorTypography.fontWeight.bold,
+                                paddingLeft: 'var(--spacing-8)',
+                                '::before': {
+                                    content: '"\u2713"',
+                                    display: 'inline-block',
+                                    marginRight: 'var(--spacing-6)',
+                                    color: 'var(--color-icon-primary)',
+                                    fontWeight: gatorTypography.fontWeight.regular,
+                                },
+
+                                '&:hover': {
+                                    backgroundColor: 'var(--color-surface-brand-secondary)',
+                                },
+                            },
+
+                            '&.Mui-disabled': {
+                                opacity: 1,
+                                color: 'var(--color-text-disabled)',
+                            },
+                        },
+                    }
+                }
+            },
+            IconComponent: ExpandMoreIcon as any,
+        },
+        styleOverrides: {
+            root: {
+                '& .MuiSelect-select': {
+                padding: 'var(--spacing-7) var(--spacing-8)',
+                },
+            },
+
+            icon: {
+                right: 'var(--spacing-8)',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,200 @@
+import { gatorTypography } from '../utils/themeConfig';
+
+export const MUIGatorTableOverrides = {
+    MuiPaper: {
+        styleOverrides: {
+            root: {
+                borderRadius: 'var(--border-radius-medium)',
+                boxShadow: 'none',
+
+                // Bulk action toolbar styling when used with Table
+                '&:has(.MuiToolbar-root + .MuiTableContainer-root)': {
+
+                    '.MuiToolbar-root': {
+                        background: 'var(--color-surface-brand)',
+                        marginBottom: 'var(--spacing-8)',
+                        borderRadius: 'var(--border-radius-medium)',
+                        display: 'flex',
+                        gap: 'var(--spacing-8)',
+                    },
+                },
+            },
+        },
+  },
+  MuiTableContainer: {
+    styleOverrides: {
+      root: {
+        backgroundColor: 'var(--color-surface-primary)',
+        borderRadius: 'var(--border-radius-medium)',
+        overflow: 'auto',
+        boxShadow: 'var(--shadow-1-card)',
+      },
+    },
+  },
+
+  MuiTable: {
+    styleOverrides: {
+      root: {
+        borderCollapse: 'separate',
+        borderSpacing: 0,
+        width: '100%',
+      },
+    },
+  },
+
+  MuiTableHead: {
+    styleOverrides: {
+      root: {
+        '& .MuiTableCell-head': {
+          backgroundColor: 'var(--color-surface-brand)',
+          color: 'var(--color-text-primary)',
+          fontWeight: gatorTypography.fontWeight.bold,
+          borderBottom: '1px solid var(--color-border-tertiary)',
+          '&:hover': {
+            backgroundColor: 'var(--color-surface-brand-secondary)',
+          },
+        },
+      },
+    },
+  },
+
+  MuiTableBody: {
+    styleOverrides: {
+      root: {
+        '& .MuiTableRow-root': {
+          backgroundColor: 'var(--color-surface-primary)',
+          transition: 'background-color 0.2s ease',
+
+          '&:hover': {
+            backgroundColor: 'var(--color-surface-hover)',
+          },
+
+          '&.Mui-selected': {
+            backgroundColor: 'var(--color-surface-brand)',
+
+            '&:hover': {
+              backgroundColor: 'var(--color-surface-hover)',
+            },
+          },
+
+          // Remove border from last row
+          '&:last-child .MuiTableCell-root': {
+            borderBottom: 'none',
+          },
+        },
+      },
+    },
+  },
+
+  MuiTableRow: {
+    styleOverrides: {
+      root: {
+        '&:not(:has(.MuiCheckbox-root)) .MuiTableCell-root': {
+            padding: 'var(--spacing-7)',
+            '&:first-of-type': {
+                paddingLeft: 24,
+            },
+        },
+        '&.Mui-selected': {
+          backgroundColor: 'var(--color-surface-brand)',
+        },
+      },
+    },
+  },
+
+  MuiTableCell: {
+    styleOverrides: {
+      root: {
+        fontFamily: gatorTypography.fontFamily.body,
+        fontSize: 'var(--font-size-body-2)',
+        color: 'var(--color-text-primary)',
+        borderBottom: '1px solid var(--color-border-tertiary)',
+        letterSpacing: 'var(--letter-spacing-default)',
+        '&:first-of-type': {
+            paddingLeft: 24,
+        },
+      },
+
+      head: {
+        fontWeight: gatorTypography.fontWeight.semiBold,
+        fontSize: 'var(--font-size-body-2)',
+        color: 'var(--color-text-primary)',
+        backgroundColor: 'var(--color-surface-secondary)',
+        borderBottom: '1px solid var(--color-border-tertiary)',
+        letterSpacing: 'var(--letter-spacing-default)',
+        '&:first-of-type': {
+            paddingLeft: 24,
+        },
+      },
+
+      body: {
+        fontSize: 'var(--font-size-body-2)',
+        fontWeight: gatorTypography.fontWeight.regular,
+      },
+
+      // Checkbox column sizing
+      paddingCheckbox: {
+        width: '48px',
+        padding: '0 var(--spacing-8)',
+      },
+
+      // Dense/comfortable sizing variants
+      sizeSmall: {
+        padding: 'var(--spacing-5)',
+      },
+    },
+  },
+
+  MuiTablePagination: {
+    styleOverrides: {
+      root: {
+        color: 'var(--color-text-primary)',
+        fontSize: 'var(--font-size-body-2)',
+        padding: 'var(--spacing-8) var(--spacing-10)',
+        borderTop: '1px solid var(--color-border-tertiary)',
+      },
+
+      toolbar: {
+        minHeight: '56px',
+        paddingLeft: 0,
+        paddingRight: 0,
+      },
+
+      selectLabel: {
+        margin: 0,
+      },
+
+      displayedRows: {
+        margin: 0,
+      },
+
+      select: {
+        color: 'var(--color-text-brand)',
+        fontSize: 'var(--font-size-body-2)',
+        fontWeight: gatorTypography.fontWeight.semiBold,
+      },
+
+      input: {
+        border: 'none',
+        padding: 0,
+        textDecoration: 'underline',
+        textUnderlineOffset: '4px',
+        textDecorationColor: 'var(--color-border-secondary)',
+
+        '&:focus': {
+          borderRadius: 'var(--border-radius-x-small)',
+          backgroundColor: 'var(--color-surface-secondary)',
+          borderColor: 'var(--color-border-brand)',
+        },
+
+        '&:hover': {
+          textDecorationColor: 'var(--color-border-brand)',
+        },
+      },
+
+      selectIcon: {
+        color: 'var(--color-icon-brand)',
+      },
+    },
+  },
+};

package/src/gator/themes/components/text-field.ts

@@ -0,0 +1,100 @@
+export const MUIGatorTextFieldOverrides = {
+	MuiInputLabel: {
+		defaultProps: {
+			shrink: true,
+		},
+	},
+	MuiInputBase: {
+		styleOverrides: {
+			root: {
+				borderRadius: 'var(--border-radius-x-small)',
+				fontSize: 'var(--font-size-body-1)',
+				lineHeight: 'var(--line-height-body-1)',
+				background: 'var(--color-surface-primary)',
+				padding: 'var(--spacing-7) var(--spacing-8)',
+				border: '1px solid var(--color-border-primary)',
+				marginTop: '0 !important',
+				'&:before': {
+					display: 'none',
+				},
+				'&:after': {
+					display: 'none',
+				},
+				'&:hover': {
+					borderColor: 'var(--color-border-brand-secondary)',
+				},
+				'&.Mui-focused': {
+					outline: '2px solid var(--color-border-focus)',
+				},
+				'&.Mui-disabled': {
+					background: 'var(--color-surface-tertiary)',
+					color: 'var(--color-text-disabled)',
+					borderColor: 'transparent',
+				},
+				'&.Mui-error': {
+					borderColor: 'var(--color-border-error-secondary)',
+				},
+				'&.Mui-readOnly': {
+					background: 'var(--color-surface-tertiary)',
+					borderColor: 'var(--color-border-secondary)',
+				},
+			},
+			input: {
+				padding: 0,
+				color: 'var(--color-text-primary)',
+				fontSize: 'var(--font-size-body-1)',
+				lineHeight: 'var(--line-height-body-1)',
+				'&::placeholder': {
+					color: 'var(--color-text-placeholder)',
+					opacity: 1
+				},
+			}
+		}
+	},
+	MuiOutlinedInput: {
+		defaultProps: {
+			notched: false,
+		},
+		styleOverrides: {
+			root: {
+				padding: 0,
+				'fieldset': {
+					display: 'none'
+				},
+				input: {
+					padding: 'var(--spacing-7) var(--spacing-8)',
+				}
+ 			},
+		}
+	},
+	MuiFilledInput: {
+		defaultProps: {
+			disableUnderline: true,
+		},
+		styleOverrides: {
+			root: {
+				backgroundColor: 'var(--color-surface-primary)',
+				'&:hover': {
+					backgroundColor: 'var(--color-surface-primary)',
+				},
+				'&.Mui-focused': {
+					backgroundColor: 'var(--color-surface-primary)',
+				},
+				'&.Mui-disabled': {
+					backgroundColor: 'var(--color-surface-tertiary)',
+				},
+				'&.Mui-readOnly': {
+					backgroundColor: 'var(--color-surface-tertiary)',
+				}
+ 			},
+			input: {
+				padding: 0
+			}
+		}
+	},
+	MuiTextField: {
+		defaultProps: {
+			variant: 'standard',
+		},
+	},
+};

package/src/gator/themes/utils/themeConfig.ts

@@ -0,0 +1,111 @@
+export const gatorColorValues = {
+  brand: {
+    main: '#103656',      // --color-brand-30
+    light: '#F0F5FA',     // --color-brand-0
+    dark: '#0D2B45',      // --color-brand-40
+    contrastText: '#FFFFFF',
+  },
+  error: {
+    main: '#D44011',      // --color-red-30
+    light: '#FAEBE7',     // --color-red-10
+    dark: '#AA330E',      // --color-red-40
+    contrastText: '#FFFFFF',
+  },
+  success: {
+    main: '#22A969',      // --color-green-30
+    light: '#E9F7F0',     // --color-green-10
+    dark: '#1B8754',      // --color-green-40
+    contrastText: '#FFFFFF',
+  },
+  warning: {
+    main: '#EC7000',      // --color-orange-30
+    light: '#FEF1E6',     // --color-orange-10
+    dark: '#BD5A00',      // --color-orange-40
+    contrastText: '#040404', // Dark text for better contrast on orange
+  },
+  info: {
+    main: '#3355FF',      // --color-blue-30
+    light: '#E8ECFF',     // --color-blue-10
+    dark: '#2A46D4',      // --color-blue-40
+    contrastText: '#FFFFFF',
+  },
+  ai: {
+    main: '#8000FF',      // --color-purple-30
+    light: '#F6EEFF',     // --color-purple-10
+    dark: '#6600CC',      // --color-purple-40
+    contrastText: '#FFFFFF',
+  },
+  secondary: {
+    main: '#18A600',      // --color-gator-green-30
+    light: '#EFFAED',     // --color-gator-green-10
+    dark: '#107000',      // --color-gator-green-40
+    contrastText: '#FFFFFF',
+  },
+  neutral: {
+    0: '#FFFFFF',         // --color-neutral-0
+    10: '#F7F7F7',        // --color-neutral-10
+    20: '#F2F2F2',        // --color-neutral-20
+    30: '#E5E5E5',        // --color-neutral-30
+    35: '#DBDBDB',        // --color-neutral-35
+    40: '#BFBFBF',        // --color-neutral-40
+    45: '#808080',        // --color-neutral-45
+    50: '#6D6D6D',        // --color-neutral-50
+    60: '#404040',        // --color-neutral-60
+    70: '#1F1F1F',        // --color-neutral-70
+    80: '#040404',        // --color-neutral-80
+  },
+  text: {
+    primary: '#1F1F1F',   // --color-text-primary / --color-neutral-70
+    secondary: '#6D6D6D', // --color-text-secondary / --color-neutral-50
+    disabled: '#BFBFBF',  // --color-text-disabled / --color-neutral-40
+  },
+  background: {
+    default: '#FFFFFF',   // --color-background-primary / --color-neutral-0
+    paper: '#F7F7F7',     // --color-background-secondary / --color-neutral-10
+  },
+  divider: '#BFBFBF',     // --color-border-primary / --color-neutral-50
+};
+
+export const gatorTypography = {
+  fontFamily: {
+    body: '"Open Sans", system-ui, -apple-system, sans-serif',
+    headings: '"Lexend Deca", system-ui, -apple-system, sans-serif',
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700,
+  },
+};
+
+// Gator uses 8px base spacing which aligns with MUI's default
+// Gator spacing scale: 1=2px, 2=4px, 3=8px, 4=16px, 6=24px, 7=32px
+// MUI multiplies by 8, so spacing(1)=8px, spacing(2)=16px, etc.
+export const gatorSpacing = 8;
+
+export const gatorBorderRadius = {
+  none: 0,           // --border-radius-no-radius
+  xsmall: 2,         // --border-radius-x-small (0.125rem = 2px)
+  small: 4,          // --border-radius-small (0.25rem = 4px)
+  medium: 8,         // --border-radius-medium (0.5rem = 8px)
+  large: 12,         // --border-radius-large (0.75rem = 12px)
+  xlarge: 16,        // --border-radius-x-large (1rem = 16px)
+  xxlarge: 24,       // --border-radius-xx-large (1.5rem = 24px)
+  xxxlarge: 32,      // --border-radius-xxx-large (2rem = 32px)
+  circle: 9999,      // --border-radius-circle
+};
+
+export const gatorShadows = [
+  'none',
+  // shadow-1-card
+  '0 1px 1.5px 0px rgba(31, 31, 31, 0.04), 0 2px 5px 0px rgba(31, 31, 31, 0.05), 0 3px 9px 6px rgba(31, 31, 31, 0.08)',
+  // shadow-2-card-raised
+  '0 5px 10px 0px rgba(31, 31, 31, 0.05), 0 7px 14px 0px rgba(31, 31, 31, 0.08), 0 3px 6px 0px rgba(31, 31, 31, 0.04)',
+  // shadow-3-dropdown
+  '0 7px 12px 0px rgba(31, 31, 31, 0.05), 0 8px 16px 0px rgba(31, 31, 31, 0.08), 0 9px 18px 0px rgba(31, 31, 31, 0.10)',
+  // shadow-4-modal
+  '0 9px 15px 0px rgba(31, 31, 31, 0.05), 0 10px 20px 0px rgba(31, 31, 31, 0.08), 0 9px 20px 0px rgba(31, 31, 31, 0.10)',
+  // Repeat shadow-4-modal for indices 5-24 (MUI requires 25 shadow values)
+  ...Array(20).fill('0 9px 15px 0px rgba(31, 31, 31, 0.05), 0 10px 20px 0px rgba(31, 31, 31, 0.08), 0 9px 20px 0px rgba(31, 31, 31, 0.10)'),
+] as [string, ...string[]];

package/src/gator/tokens/_gator-global-tokens.css

@@ -0,0 +1,4 @@
+:host, :root {
+    --gator-gutter-x: 1.5rem;
+    --gator-gutter-y: 0;
+}