ui: create a primary @material-ui/core theme #1458
Description
There are a lot of options we can customize at the top level, without needing to specify hex colors header variants, etc throughout the application. For instance, we can set our own breakpoint parameters since we largely only care about mobile vs. desktop sizes in changing page layout.
Creating a theme is simple enough (we have the base of one already setup here), though applying it and covering all our bases leftover from custom styles is what will likely take the most time.
Theme options for customization through @material-ui/core, with the ability to override any default component props (i.e. Dialog or CardActions) as well:
interface ThemeOptions {
shape?: ShapeOptions
breakpoints?: BreakpointsOptions
direction?: Direction
mixins?: MixinsOptions
overrides?: Overrides
palette?: PaletteOptions
props?: ComponentsProps
shadows?: Shadows
spacing?: SpacingOptions
transitions?: TransitionsOptions
typography?: TypographyOptions | ((palette: Palette) => TypographyOptions)
zIndex?: ZIndexOptions
unstable_strictMode?: boolean
}With the following palette options:
export interface PaletteOptions {
primary?: PaletteColorOptions
secondary?: PaletteColorOptions
error?: PaletteColorOptions
warning?: PaletteColorOptions
info?: PaletteColorOptions
success?: PaletteColorOptions
type?: PaletteType
tonalOffset?: PaletteTonalOffset
contrastThreshold?: number
common?: Partial<CommonColors>
grey?: ColorPartial
text?: Partial<TypeText>
divider?: string
action?: Partial<TypeAction>
background?: Partial<TypeBackground>
getContrastText?: (background: string) => string
}
export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial
export interface SimplePaletteColorOptions {
light?: string
main: string
dark?: string
contrastText?: string
}We should think about:
- What default size do we want for our h1 title and breadcrumbs in the toolbar?
- What default size do we want for our h2 elements (e.g. details page card title, quick links title, subroute page titles, etc)
- What width should we set the mobile breakpoint to?
- What palette color options to use (and their values)?
- What default card elevation to use?
Out of scope:
- Configurable theme
- Multiple themes