@ncino/styles 9.2.0-preview.3 → 9.2.0

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

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

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

@@ -1,74 +0,0 @@
-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/switch.ts

@@ -1,145 +0,0 @@
-/**
- * Gator Design System - MUI Switch Component Overrides
- *
- * Maps Gator Switch design specifications to MUI Switch component.
- * Based on ngcSwitch component styling (packages/web-components/src/components/switch/gator/).
- *
- * Supports interactive states:
- * - Default (unchecked) with gray track
- * - Checked with brand color track
- * - Disabled with gray track (no shadow)
- * - Focus with brand color outline
- * - Hover with ripple effect on thumb
- *
- * Reference: packages/web-components/src/components/switch/gator/switch.gator.scss
- */
-
-export const MUIGatorSwitchOverrides = {
-    MuiFormControlLabel: {
-        styleOverrides: {
-            root: {
-                // Spacing between switch and label
-                marginLeft: 0,
-                marginRight: 0,
-
-                // Label positioning
-                '& .MuiFormControlLabel-label': {
-                    marginLeft: '0.5rem',
-                    fontFamily: 'var(--font-family-body)',
-                    fontSize: 'var(--font-size-body-2)',
-                    color: 'var(--color-text-primary)',
-                },
-
-                // Disabled label color
-                '&.Mui-disabled .MuiFormControlLabel-label': {
-                    color: 'var(--color-text-secondary)',
-                }
-            }
-        }
-    },
-
-    MuiSwitch: {
-        defaultProps: {
-            disableRipple: true
-        },
-        styleOverrides: {
-            root: {
-                // Size root container to match ngcSwitch dimensions (2.375rem × 1.25rem)
-                width: '2.375rem',
-                height: '1.25rem',
-                padding: 0,
-                overflow: 'visible',
-
-                // Hover ripple effect - unchecked (only when not disabled)
-                '&:hover .MuiSwitch-switchBase:not(.Mui-disabled):not(.Mui-checked) .MuiSwitch-thumb': {
-                    outline: '0.5rem solid var(--color-surface-alpha-neutral-medium)'
-                },
-
-                // Hover ripple effect - checked (only when not disabled)
-                '&:hover .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb': {
-                    outline: '0.5rem solid var(--color-surface-alpha-brand-subtle)'
-                },
-
-                // Active (mouse down) ripple effect - unchecked (only when not disabled)
-                '&:active .MuiSwitch-switchBase:not(.Mui-disabled):not(.Mui-checked) .MuiSwitch-thumb': {
-                    outline: '0.5rem solid var(--color-surface-alpha-neutral-strong)'
-                },
-
-                // Active (mouse down) ripple effect - checked (only when not disabled)
-                '&:active .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb': {
-                    outline: '0.5rem solid var(--color-surface-alpha-brand-strong)'
-                }
-            },
-
-            switchBase: {
-                // Position the thumb with 2px offset (0.125rem from ngcSwitch)
-                padding: '0.125rem',
-                top: 0,
-                left: 0,
-
-                // Transform for checked state - move thumb to right (1.25rem from left edge = 1.125rem transform)
-                '&.Mui-checked': {
-                    transform: 'translateX(1.125rem)',
-
-                    // Checked state track color
-                    '& + .MuiSwitch-track': {
-                        backgroundColor: 'var(--color-feedback-brand)',
-                        opacity: 1
-                    },
-                },
-
-                // Disabled state
-                '&.Mui-disabled': {
-                    // Disabled track color (overrides checked)
-                    '& + .MuiSwitch-track': {
-                        backgroundColor: 'var(--color-surface-disabled)',
-                        opacity: 1
-                    },
-
-                    // Remove thumb shadow when disabled
-                    '& .MuiSwitch-thumb': {
-                        boxShadow: 'none',
-                        outline: 'none'
-                    },
-
-                    '& .MuiSwitch-thumb:hover': {
-                        outline: 'none'
-                    }
-                },
-
-                // Focus state - apply outline to the track when switchBase is focused
-                '&.Mui-focusVisible + .MuiSwitch-track': {
-                    outline: '0.125rem solid var(--color-border-focus)',
-                    outlineOffset: '0.125rem',
-                }
-            },
-
-            track: {
-                // Track dimensions to match root (2.375rem × 1.25rem)
-                width: '2.375rem',
-                height: '1.25rem',
-                borderRadius: '0.625rem',
-
-                // Base unchecked state - gray background
-                backgroundColor: 'var(--color-surface-neutral-secondary)',
-                opacity: 1,
-                border: 'none',
-
-                // Smooth color transition when toggling
-                transition: 'background-color 0.3s ease'
-            },
-
-            thumb: {
-                // Base dimensions and styling (1rem = 16px from ngcSwitch)
-                width: '1rem',
-                height: '1rem',
-                borderRadius: '50%',
-                backgroundColor: 'var(--color-surface-primary)',
-                boxShadow: 'var(--shadow-1-card)',
-
-                // Set color context for ripple currentColor inheritance (inherits track color)
-                color: 'var(--color-surface-neutral-secondary)',
-            }
-        }
-    }
-};

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

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