@ncino/styles 9.2.0-preview.3 → 9.2.0

package/dist/gator/themes/components/fab.js

@@ -0,0 +1,77 @@
+import "@mui/material/Fab";
+const o = {
+  MuiFab: {
+    defaultProps: {
+      disableRipple: !0,
+      color: "primary",
+      size: "small"
+    },
+    styleOverrides: {
+      root: {
+        boxShadow: "var(--shadow-1-card)",
+        textTransform: "none",
+        padding: "var(--spacing-8)",
+        height: "fit-content",
+        width: "fit-content",
+        "&:hover": {
+          boxShadow: "var(--shadow-2-card-raised)",
+          backgroundColor: "var(--color-feedback-brand-secondary, #0D2B45)"
+        },
+        "&:active": {
+          backgroundColor: "var(--color-feedback-brand-tertiary, #061622)"
+        },
+        "&.Mui-focusVisible": {
+          boxShadow: "none",
+          outline: "2px solid var(--ngc-fab-focus-outline-color, var(--color-border-focus))",
+          outlineOffset: "2px"
+        },
+        "&.Mui-disabled": {
+          backgroundColor: "var(--color-surface-disabled, #E5E5E5)",
+          color: "var(--color-icon-inverse, #FFFFFF)"
+        }
+      },
+      primary: {
+        backgroundColor: "var(--color-feedback-brand, #103656)",
+        color: "var(--color-icon-inverse, #FFFFFF)"
+      },
+      sizeSmall: {
+        "& .MuiSvgIcon-root": {
+          fontSize: "1.125rem"
+        }
+      },
+      sizeMedium: {
+        "& .MuiSvgIcon-root": {
+          fontSize: "1.5rem"
+        }
+      },
+      sizeLarge: {
+        "& .MuiSvgIcon-root": {
+          fontSize: "2.25rem"
+        }
+      },
+      circular: {
+        borderRadius: "var(--border-radius-circle, 50%)"
+      },
+      extended: {
+        borderRadius: "var(--border-radius-circle, 50%)",
+        padding: "0 var(--spacing-8)",
+        minWidth: "var(--spacing-12)",
+        height: "var(--spacing-12)",
+        gap: "var(--spacing-5)"
+      }
+    },
+    variants: [
+      {
+        props: { size: "xlarge" },
+        style: {
+          "& .MuiSvgIcon-root": {
+            fontSize: "2.5rem"
+          }
+        }
+      }
+    ]
+  }
+};
+export {
+  o as MUIGatorFabOverrides
+};

package/dist/gator/themes/components/form-control.js

@@ -0,0 +1,97 @@
+import { gatorTypography as o } from "../utils/themeConfig.js";
+const e = {
+  MuiFormControl: {
+    styleOverrides: {
+      root: {
+        // Radio group label (legend)
+        "& .MuiFormLabel-root": {
+          fontFamily: o.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: o.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: o.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: o.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: o.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: o.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"
+      }
+    }
+  }
+};
+export {
+  e as MUIGatorFormControlOverrides
+};

package/dist/gator/themes/components/radio.js

@@ -0,0 +1,43 @@
+const r = {
+  MuiRadio: {
+    defaultProps: {
+      disableFocusRipple: !0,
+      disableTouchRipple: !0
+    },
+    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)"
+        }
+      }
+    }
+  }
+};
+export {
+  r as MUIGatorRadioOverrides
+};

package/dist/gator/themes/components/select.js

@@ -0,0 +1,69 @@
+import { gatorTypography as o } from "../utils/themeConfig.js";
+import r from "@mui/icons-material/ExpandMore";
+const i = {
+  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: o.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: o.fontWeight.bold,
+                paddingLeft: "var(--spacing-8)",
+                "::before": {
+                  content: '"✓"',
+                  display: "inline-block",
+                  marginRight: "var(--spacing-6)",
+                  color: "var(--color-icon-primary)",
+                  fontWeight: o.fontWeight.regular
+                },
+                "&:hover": {
+                  backgroundColor: "var(--color-surface-brand-secondary)"
+                }
+              },
+              "&.Mui-disabled": {
+                opacity: 1,
+                color: "var(--color-text-disabled)"
+              }
+            }
+          }
+        }
+      },
+      IconComponent: r
+    },
+    styleOverrides: {
+      root: {
+        "& .MuiSelect-select": {
+          padding: "var(--spacing-7) var(--spacing-8)"
+        }
+      },
+      icon: {
+        right: "var(--spacing-8)"
+      }
+    }
+  }
+};
+export {
+  i as MUIGatorSelectOverrides
+};

package/dist/gator/themes/components/switch.js

@@ -0,0 +1,113 @@
+const r = {
+  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: !0
+    },
+    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)"
+      }
+    }
+  }
+};
+export {
+  r as MUIGatorSwitchOverrides
+};

package/dist/gator/themes/components/table.js

@@ -0,0 +1,178 @@
+import { gatorTypography as r } from "../utils/themeConfig.js";
+const e = {
+  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: r.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: r.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: r.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: r.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: r.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)"
+      }
+    }
+  }
+};
+export {
+  e as MUIGatorTableOverrides
+};