@ncino/styles 9.2.0-preview.3 → 9.2.0

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

@@ -1,167 +0,0 @@
-/**
- * Gator Design System - MUI Tabs Component Overrides
- *
- * Maps Gator Tabs design specifications to MUI Tabs and Tab components.
- * Supports small, medium, and large size variants with proper styling.
- */
-export const MUIGatorTabsOverrides = {
-    MuiTabs: {
-        defaultProps: {
-            size: 'medium',
-            TabIndicatorProps: {
-                style: {
-                    height: '2px'
-                }
-            }
-        },
-        variants: [
-            {
-                props: { size: 'small' },
-                style: {
-                    // Style child Tab components for small size
-                    '& .MuiTab-root': {
-                        padding: 'var(--spacing-6) var(--spacing-8)',
-                        fontSize: 'var(--font-size-subtitle-2)',
-
-                        '&:hover:not(.Mui-selected)': {
-                            paddingBottom: 'calc(var(--spacing-6) - 1px)'
-                        }
-                    }
-                }
-            },
-            {
-                props: { size: 'large' },
-                style: {
-                    borderBottom: 'none',
-                    position: 'relative',
-
-                    '&::after': {
-                        content: '""',
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        height: '1px',
-                        width: '100%',
-                        backgroundColor: 'var(--color-border-secondary)'
-                    },
-
-                    '& span[class*="MuiTabs-indicator"]': {
-                        display: 'none !important'
-                    },
-
-                    '& .MuiTabs-flexContainer': {
-                        gap: 'var(--spacing-5)'
-                    },
-
-                    // Style child Tab components for large size (card style)
-                    '& .MuiTab-root': {
-                        borderRadius: 'var(--border-radius-medium) var(--border-radius-medium) 0 0',
-                        border: '1px solid var(--color-border-tertiary)',
-                        borderBottom: '1px solid var(--color-border-secondary)',
-                        padding: 'var(--spacing-8) var(--spacing-9)',
-                        fontSize: 'var(--font-size-body-1)',
-                        background: 'var(--color-surface-primary)',
-
-                        '&:hover': {
-                            backgroundColor: 'var(--color-surface-secondary)',
-                            borderTop: '1px solid var(--color-border-secondary)',
-                            borderLeft: '1px solid var(--color-border-secondary)',
-                            borderRight: '1px solid var(--color-border-secondary)',
-                            borderBottom: '1px solid var(--color-border-secondary)',
-                            padding: 'var(--spacing-8) var(--spacing-9)'
-                        },
-
-                        '&.Mui-selected': {
-                            border: '1px solid var(--color-border-secondary)',
-                            background: 'var(--color-surface-primary)',
-                            position: 'relative',
-
-                            '&::after': {
-                                content: '""',
-                                position: 'absolute',
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                height: '2px',
-                                backgroundColor: 'var(--color-surface-primary)',
-                                zIndex: '10'
-                            },
-
-                            '&:hover': {
-                                borderTop: '1px solid var(--color-border-secondary)',
-                                borderLeft: '1px solid var(--color-border-secondary)',
-                                borderRight: '1px solid var(--color-border-secondary)',
-                                borderBottom: '1px solid var(--color-border-inverse)',
-                                backgroundColor: 'var(--color-surface-secondary)',
-                            }
-                        }
-                    }
-                }
-            }
-        ],
-        styleOverrides: {
-            root: {
-                minHeight: 'unset',
-                borderBottom: '1px solid var(--color-border-secondary)'
-            },
-            indicator: {
-                backgroundColor: 'var(--color-border-brand)',
-                height: '2px'
-            },
-            flexContainer: {
-                display: 'flex',
-                marginBottom: '-1px'
-            }
-        }
-    },
-    MuiTab: {
-        defaultProps: {
-            disableRipple: true
-        },
-        styleOverrides: {
-            root: {
-                fontFamily: 'var(--font-family-body, \'Open Sans\'), sans-serif',
-                fontWeight: 'var(--font-weight-regular)',
-                textTransform: 'none',
-                color: 'var(--color-text-primary)',
-                display: 'inline-flex',
-                minHeight: 'unset',
-                minWidth: 'unset',
-                border: 'none',
-                borderBottom: '1px solid var(--color-border-secondary)',
-                background: 'var(--color-surface-primary)',
-                backgroundColor: 'unset',
-                cursor: 'pointer',
-
-                // Default (medium) size
-                padding: 'var(--spacing-5) var(--spacing-8)',
-                fontSize: 'var(--font-size-subtitle-1)',
-
-                '&:hover': {
-                    backgroundColor: 'var(--color-surface-secondary)',
-                    borderBottom: '2px solid var(--color-border-brand)',
-
-                    '&:not(.Mui-selected)': {
-                        paddingBottom: 'calc(var(--spacing-5) - 1px)'
-                    }
-                },
-
-                '&.Mui-selected': {
-                    color: 'var(--color-text-primary)',
-                    fontWeight: 'bold',
-                    borderBottom: '2px solid var(--color-border-brand)',
-                    '&:hover': {
-                        borderBottom: '2px solid var(--color-border-brand)'
-                    }
-                },
-
-                '&.Mui-focusVisible': {
-                    outline: '2px solid var(--color-border-focus)',
-                    outlineOffset: '-6px',
-                    borderRadius: 'var(--border-radius-medium)'
-                }
-            }
-        }
-    }
-};

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

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

@@ -1,111 +0,0 @@
-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/types/mui-augmentations.d.ts

@@ -1,27 +0,0 @@
-/**
- * MUI Component Type Augmentations for Gator Design System
- *
- * This file extends MUI component prop types to support custom Gator Design System props.
- * These augmentations work in conjunction with the theme variants defined in the Gator theme.
- *
- * Setup Instructions:
- * Add this file to your TypeScript configuration to enable type support for custom props.
- *
- * In your tsconfig.json, add to the "include" array:
- * {
- *   "include": [
- *     "node_modules/@ncino/styles/src/gator/types/mui-augmentations.d.ts"
- *   ]
- * }
- */
-
-// Augment Tabs to support custom 'size' prop
-declare module '@mui/material/Tabs' {
-  interface TabsOwnProps {
-    /**
-     * The size of the tabs.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-  }
-}