@ncino/styles 9.2.0-preview.3 → 9.2.0

package/src/gator/themes/MUIGatorTheme.ts

@@ -1,237 +0,0 @@
-/**
- * Gator Design System - Complete MUI Theme Configuration
- *
- * Maps all Gator primitive and semantic tokens to MUI theme structure.
- * Uses hard-coded hex values in palette (MUI requirement) and CSS variables
- * in styleOverrides for runtime token synchronization.
- */
-import { createTheme, Palette, PaletteColor, Shadows, ThemeOptions } from '@mui/material/styles';
-import '../tokens/primitive.tokens.css';
-import '../tokens/semantic.tokens.css';
-import { gatorColorValues, gatorTypography, gatorSpacing, gatorBorderRadius, gatorShadows } from './utils/themeConfig';
-
-// TypeScript declaration for Webpack's require.context
-declare const require: {
-  context: (
-    directory: string,
-    useSubdirectories: boolean,
-    regExp: RegExp
-  ) => {
-    keys(): string[];
-    (id: string): any;
-  };
-};
-
-/**
- * Automatically import all component override files from the components directory
- * This uses Webpack's require.context to dynamically discover and load all .ts files
- */
-function importAllComponentOverrides() {
-  // Check if require.context is available (Webpack environment)
-  if (typeof require !== 'undefined' && require.context) {
-    const req = require.context('./components', false, /\.ts$/);
-    const overrides = {};
-
-    req.keys().forEach((fileName) => {
-      // Skip any index files or utility files
-      if (fileName.includes('index') || fileName.includes('utils')) return;
-
-      try {
-        const componentModule = req(fileName);
-
-        // Merge all exported overrides from each module
-        Object.keys(componentModule).forEach((exportName) => {
-          if (exportName.includes('Override')) {
-            Object.assign(overrides, componentModule[exportName]);
-          }
-        });
-      } catch (error) {
-        console.warn(`Failed to load component override from ${fileName}:`, error);
-      }
-    });
-
-    return overrides;
-  }
-
-  // Fallback for non-Webpack environments (like Node.js testing)
-  console.warn('require.context not available - component overrides not automatically loaded');
-  return {};
-}
-
-interface ExtendedPalette extends Palette {
-  ai: PaletteColor;
-  neutral: PaletteColor;
-}
-
-interface ExtendedThemeOptions extends ThemeOptions {
-  palette: ExtendedPalette;
-}
-
-const themeOptions: ExtendedThemeOptions = {
-  palette: {
-    mode: 'light',
-    primary: gatorColorValues.brand,
-    secondary: gatorColorValues.secondary,
-    neutral: {
-      main: gatorColorValues.neutral[70],
-      light: gatorColorValues.neutral[40],
-      dark: gatorColorValues.neutral[80],
-      contrastText: '#FFFFFF',
-    },
-    error: gatorColorValues.error,
-    success: gatorColorValues.success,
-    warning: gatorColorValues.warning,
-    info: gatorColorValues.info,
-    ai: gatorColorValues.ai,
-    text: gatorColorValues.text,
-    background: gatorColorValues.background,
-    divider: gatorColorValues.divider,
-    action: {
-      active: gatorColorValues.neutral[70],
-      hover: gatorColorValues.neutral[10],
-      selected: gatorColorValues.neutral[20],
-      disabled: gatorColorValues.neutral[40],
-      disabledBackground: gatorColorValues.neutral[30],
-      focus: gatorColorValues.neutral[20],
-    },
-  },
-
-  typography: {
-    fontFamily: gatorTypography.fontFamily.body,
-    fontWeightLight: gatorTypography.fontWeight.regular,
-    fontWeightRegular: gatorTypography.fontWeight.regular,
-    fontWeightMedium: gatorTypography.fontWeight.medium,
-    fontWeightBold: gatorTypography.fontWeight.semiBold,
-
-    // Display styles (using CSS variables for dynamic sizing)
-    h1: {
-      fontFamily: gatorTypography.fontFamily.headings,
-      fontSize: 'var(--font-size-display-1)',
-      lineHeight: 'var(--line-height-display-1)',
-      fontWeight: gatorTypography.fontWeight.bold,
-      letterSpacing: 'var(--letter-spacing-narrow)',
-    },
-    h2: {
-      fontFamily: gatorTypography.fontFamily.headings,
-      fontSize: 'var(--font-size-display-2)',
-      lineHeight: 'var(--line-height-display-2)',
-      fontWeight: gatorTypography.fontWeight.bold,
-      letterSpacing: 'var(--letter-spacing-narrow)',
-    },
-
-    // Heading styles
-    h3: {
-      fontFamily: gatorTypography.fontFamily.headings,
-      fontSize: 'var(--font-size-heading-1)',
-      lineHeight: 'var(--line-height-heading-1)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-    h4: {
-      fontFamily: gatorTypography.fontFamily.headings,
-      fontSize: 'var(--font-size-heading-2)',
-      lineHeight: 'var(--line-height-heading-2)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-    h5: {
-      fontFamily: gatorTypography.fontFamily.headings,
-      fontSize: 'var(--font-size-heading-3)',
-      lineHeight: 'var(--line-height-heading-3)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-    h6: {
-      fontFamily: gatorTypography.fontFamily.headings,
-      fontSize: 'var(--font-size-heading-4)',
-      lineHeight: 'var(--line-height-heading-4)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-
-    // Subtitle styles
-    subtitle1: {
-      fontFamily: gatorTypography.fontFamily.body,
-      fontSize: 'var(--font-size-subtitle-1)',
-      lineHeight: 'var(--line-height-subtitle-1)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-    subtitle2: {
-      fontFamily: gatorTypography.fontFamily.body,
-      fontSize: 'var(--font-size-subtitle-2)',
-      lineHeight: 'var(--line-height-subtitle-2)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-
-    // Body styles
-    body1: {
-      fontFamily: gatorTypography.fontFamily.body,
-      fontSize: 'var(--font-size-body-1)',
-      lineHeight: 'var(--line-height-body-1)',
-      fontWeight: gatorTypography.fontWeight.regular,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-    body2: {
-      fontFamily: gatorTypography.fontFamily.body,
-      fontSize: 'var(--font-size-body-2)',
-      lineHeight: 'var(--line-height-body-2)',
-      fontWeight: gatorTypography.fontWeight.regular,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-
-    // Button text
-    button: {
-      fontFamily: gatorTypography.fontFamily.body,
-      fontSize: 'var(--font-size-body-2)',
-      lineHeight: 'var(--line-height-body-2)',
-      fontWeight: gatorTypography.fontWeight.semiBold,
-      textTransform: 'none',
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-
-    // Caption and overline
-    caption: {
-      fontFamily: gatorTypography.fontFamily.body,
-      fontSize: 'var(--font-size-body-3)',
-      lineHeight: 'var(--line-height-body-3)',
-      fontWeight: gatorTypography.fontWeight.regular,
-      letterSpacing: 'var(--letter-spacing-default)',
-    },
-  },
-
-  spacing: gatorSpacing,
-
-  shape: {
-    borderRadius: gatorBorderRadius.xsmall,
-  },
-
-  shadows: gatorShadows as Shadows,
-
-  // Component-specific default props
-  components: {
-    // Automatically discover and merge all component overrides
-    ...importAllComponentOverrides(),
-
-    // Additional component overrides not in separate files
-    MuiLink: {
-      styleOverrides: {
-        root: {
-          color: 'var(--color-text-brand)',
-          textDecorationColor: 'var(--color-underline-brand)',
-          '&:hover': {
-            color: 'var(--color-text-brand)',
-            textDecorationColor: 'var(--color-underline-brand-secondary)',
-          },
-        },
-      },
-    },
-  },
-};
-
-// ============================================================================
-// CREATE AND EXPORT THEME
-// ============================================================================
-export const gatorMUITheme = createTheme(themeOptions);
-export default gatorMUITheme;

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

@@ -1,67 +0,0 @@
-import { getCSSVar } from '../utils/cssUtils';
-
-export const MUIGatorAccordionOverrides = {
-  MuiAccordion: {
-    defaultProps: {
-      disableGutters: true,
-      elevation: 0,
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: 'var(--border-radius-small)',
-        '&:not(:last-child)': {
-            borderBottom: '1px solid var(--color-border-tertiary)',
-        },
-        '&:before': {
-          display: 'none',
-        },
-        '&.Mui-expanded': {
-          '&:before': {
-            opacity: 1,
-          }
-        },
-      },
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: {
-        padding: '16px',
-        minHeight: '56px',
-        transition: 'background-color 0.2s ease',
-        '&:hover': {
-          backgroundColor: 'var(--color-surface-hover)',
-        },
-        '&.Mui-focusVisible': {
-            'outline': '2px solid var(--color-border-focus)',
-            'outlineOffset': '-1px',
-        },
-        '&.Mui-expanded': {
-          minHeight: '56px',
-        },
-      },
-      content: {
-        margin: '0',
-        '&.Mui-expanded': {
-          margin: '0',
-        },
-      },
-      expandIconWrapper: {
-        color: 'var(--color-icon-primary)',
-        '&.Mui-expanded': {
-          transform: 'rotate(180deg)',
-        },
-      },
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: {
-        padding: '16px 16px 24px 16px',
-        fontSize: 'var(--font-size-body-2)',
-        lineHeight: 'var(--line-height-body-2)',
-        color: 'var(--color-text-primary)',
-      },
-    },
-  },
-};

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

@@ -1,53 +0,0 @@
-import { gatorTypography } from '../utils/themeConfig';
-
-export const MUIGatorAlertOverrides = {
-    MuiAlert: {
-      styleOverrides: {
-        root: {
-            borderRadius: 'var(--border-radius-x-large)',
-            padding: '1.5rem',
-            fontSize: 'var(--font-size-body-1)',
-            border: '1px solid var(--color-border-primary)',
-        },
-        standardSuccess: {
-            backgroundColor: 'var(--color-surface-success)',
-            color: 'var(--color-text-primary)',
-                borderColor: 'var(--color-border-success)',
-            '& .MuiAlert-icon': {
-                color: 'var(--color-icon-success)',
-            },
-        },
-        standardError: {
-            backgroundColor: 'var(--color-surface-error)',
-            color: 'var(--color-text-primary)',
-            borderColor: 'var(--color-border-error)',
-            '& .MuiAlert-icon': {
-                color: 'var(--color-icon-error)',
-            },
-        },
-        standardWarning: {
-            backgroundColor: 'var(--color-surface-warning)',
-            color: 'var(--color-text-primary)',
-            borderColor: 'var(--color-border-warning)',
-            '& .MuiAlert-icon': {
-                color: 'var(--color-icon-warning)',
-            },
-        },
-        standardInfo: {
-            backgroundColor: 'var(--color-surface-secondary)',
-            color: 'var(--color-text-primary)',
-            borderColor: 'var(--color-border-secondary)',
-            '& .MuiAlert-icon': {
-                color: 'var(--color-icon-primary)',
-            },
-        },
-      },
-    },
-    MuiAlertTitle: {
-        styleOverrides: {
-            root: {
-                fontWeight: gatorTypography.fontWeight.bold,
-            },
-        },
-    },
-};

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

@@ -1,156 +0,0 @@
-import { gatorTypography } from '../utils/themeConfig';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import React from 'react';
-
-export const MUIGatorAutocompleteOverrides = {
-    MuiAutocomplete: {
-        defaultProps: {
-            componentsProps: {
-                paper: {
-                    elevation: 3,
-                },
-            },
-            popupIcon: React.createElement(ExpandMoreIcon),
-        },
-        styleOverrides: {
-            root: {
-                // Override the input field styling
-                '& .MuiInputBase-root': {
-                    padding: 'var(--spacing-7) var(--spacing-8)',
-                    minHeight: '48px',
-                    fontFamily: gatorTypography.fontFamily.body,
-                    fontSize: 'var(--font-size-body-1)',
-                    lineHeight: 'var(--line-height-body-1)',
-                },
-
-                '& .MuiAutocomplete-input': {
-                    padding: '0 !important',
-                },
-
-                '& .MuiAutocomplete-endAdornment': {
-                    right: 'var(--spacing-8)',
-                },
-
-                '& .MuiAutocomplete-clearIndicator': {
-                    visibility: 'visible',
-                    marginRight: 'var(--spacing-3)',
-                    color: 'var(--color-icon-primary)',
-                    '&:hover': {
-                        color: 'var(--color-icon-secondary)',
-                        backgroundColor: 'transparent',
-                    },
-                },
-
-                '& .MuiAutocomplete-popupIndicator': {
-                    color: 'var(--color-icon-primary)',
-                    '&:hover': {
-                        backgroundColor: 'transparent',
-                    },
-                },
-
-                '.MuiCircularProgress-root': {
-                    marginRight: 'var(--spacing-8)',
-                },
-            },
-
-            // Dropdown popup/menu styling
-            paper: {
-                marginTop: 'var(--spacing-3)',
-                borderRadius: 'var(--border-radius-medium)',
-                boxShadow: 'var(--shadow-3-dropdown)',
-                backgroundColor: 'var(--color-surface-primary)',
-            },
-
-            // List container
-            listbox: {
-                padding: 'var(--spacing-5) 0',
-                maxHeight: '300px',
-                fontFamily: gatorTypography.fontFamily.body,
-                fontSize: 'var(--font-size-body-1)',
-                lineHeight: 'var(--line-height-body-1)',
-
-                '& .MuiAutocomplete-option': {
-                    padding: ' var(--spacing-5) var(--spacing-8) var(--spacing-5) var(--spacing-12)',
-                    minHeight: '40px',
-                    color: 'var(--color-text-primary)',
-
-                    '&:hover': {
-                        backgroundColor: 'var(--color-surface-hover)',
-                    },
-
-                    '&.Mui-focused': {
-                        backgroundColor: 'var(--color-surface-hover)',
-                    },
-
-                    '&[aria-selected="true"]': {
-                        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-on-brand)',
-                            fontWeight: gatorTypography.fontWeight.regular,
-                        },
-
-                        '&:hover': {
-                            backgroundColor: 'var(--color-surface-brand-secondary)',
-                        },
-
-                        '&.Mui-focused': {
-                            backgroundColor: 'var(--color-surface-brand-secondary)',
-                        },
-                    },
-
-                    '&[aria-disabled="true"]': {
-                        opacity: 1,
-                        color: 'var(--color-text-disabled)',
-                        pointerEvents: 'none',
-                    },
-                },
-            },
-
-            // No options message
-            noOptions: {
-                padding: 'var(--spacing-5) var(--spacing-8)',
-                color: 'var(--color-text-secondary)',
-                fontFamily: gatorTypography.fontFamily.body,
-                fontSize: 'var(--font-size-body-1)',
-                lineHeight: 'var(--line-height-body-1)',
-            },
-
-            // Loading text
-            loading: {
-                padding: 'var(--spacing-5) var(--spacing-8)',
-                color: 'var(--color-text-secondary)',
-                fontFamily: gatorTypography.fontFamily.body,
-                fontSize: 'var(--font-size-body-1)',
-                lineHeight: 'var(--line-height-body-1)',
-            },
-
-            // Grouping
-            groupLabel: {
-                padding: 'var(--spacing-5) var(--spacing-8)',
-                fontFamily: gatorTypography.fontFamily.body,
-                fontSize: 'var(--font-size-body-2)',
-                lineHeight: 'var(--line-height-body-2)',
-                fontWeight: gatorTypography.fontWeight.semiBold,
-                color: 'var(--color-text-secondary)',
-                top: 0,
-                zIndex: 1,
-            },
-
-            groupUl: {
-                padding: 0,
-            },
-
-            // Chips for multiselect
-            tag: {
-                margin: '-5px 4px',
-                fontSize: 'var(--font-size-body-3)',
-            },
-        },
-    },
-};

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

@@ -1,65 +0,0 @@
-import { getCSSVar } from '../utils/cssUtils';
-import { gatorTypography } from '../utils/themeConfig';
-
-/**
- * Gator Avatar Component - MUI Theme Overrides
- *
- * Sizes from Figma:
- * - xxx-small: 16px
- * - xx-small: 24px
- * - x-small: 32px
- * - small (default): 40px
- * - medium: 48px
- * - large: 64px
- * - x-large: 80px
- *
- * Colors:
- * - Background: --color-surface-brand-tertiary (#BDCDDC)
- * - Text: --color-text-brand (#103656)
- */
-
-export const MUIGatorAvatarOverrides = {
-  MuiAvatar: {
-    styleOverrides: {
-      root: {
-        fontFamily: gatorTypography.fontFamily.body,
-        fontWeight: gatorTypography.fontWeight.bold,
-		fontSize: 'var(--font-size-body-1)',
-      },
-      colorDefault: {
-        backgroundColor: 'var(--color-surface-brand-tertiary)',
-        color: 'var(--color-text-brand)',
-      },
-    },
-    variants: [
-      {
-        props: { variant: 'circular' },
-        style: {
-          borderRadius: 'var(--border-radius-circle)',
-        },
-      },
-      {
-        props: { variant: 'rounded' },
-        style: {
-          borderRadius: 'var(--border-radius-medium)',
-        },
-      },
-      {
-        props: { variant: 'square' },
-        style: {
-          borderRadius: 'var(--border-radius-no-radius)',
-        },
-      },
-    ],
-  },
-  MuiAvatarGroup: {
-    styleOverrides: {
-      avatar: {
-        border: '2px solid var(--color-background-primary)',
-        fontSize: 'var(--font-size-body-1)',
-        width: 40,
-        height: 40,
-      },
-    },
-  },
-};

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

@@ -1,55 +0,0 @@
-import { gatorTypography } from '../utils/themeConfig';
-export const MUIGatorBadgeOverrides = {
-  MuiBadge: {
-	defaultProps: {
-		color: 'error', // Default to error color to match NGC
-	},
-    styleOverrides: {
-      badge: {
-        fontFamily: gatorTypography.fontFamily.body,
-        fontSize: 'var(--font-size-body-3)', // 13px
-        lineHeight: 'var(--line-height-body-3)', // 18px
-        fontWeight: gatorTypography.fontWeight.regular, // 400 - matches NGC
-        height: 'auto',
-        minWidth: 'auto',
-        padding: 'var(--spacing-1) var(--spacing-5)', // 1px 8px - matches NGC text padding
-        borderRadius: 'var(--border-radius-circle)',
-
-		'& .MuiSvgIcon-root': {
-			margin: '3px -4px', // Adjust icon margin to better center within badge
-		},
-      },
-
-      dot: {
-        height: '9px', // 0.5625rem from NGC
-        minWidth: '9px',
-        borderRadius: 'var(--border-radius-circle)',
-        padding: 0,
-      },
-
-	  tile: {
-		borderRadius: 'var(--border-radius-x-small)',
-	  },
-
-      colorError: {
-        backgroundColor: 'var(--color-feedback-error-secondary)',
-        color: 'var(--color-text-inverse)',
-      },
-
-      colorWarning: {
-		backgroundColor: 'var(--color-feedback-warning-secondary)',
-        color: 'var(--color-text-inverse)',
-      },
-
-	  colorSuccess: {
-		backgroundColor: 'var(--color-feedback-success-secondary)',
-	  },
-    },
-  },
-};
-
-declare module '@mui/material/Badge' {
-  interface BadgePropsVariantOverrides {
-    tile: true;
-  }
-}