@ncino/styles 9.0.0-preview.5 → 9.0.0-preview.7

package/src/gator/themes/MUIGatorTheme.ts

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

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

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

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

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

@@ -0,0 +1,55 @@
+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;
+  }
+}