@jeremyckahn/farmhand/src/styles/sx.ts

A farming game

import { lighten, Theme } from '@mui/material/styles/index.js'

import { pixelBevel, pixelDropShadowFilter, pixelFrameSx, px } from './pixel.js'
import { breakpoints, colors, layout } from './tokens.js'

// NOTE: These are plain object literals (not typed as SxProps<Theme>) so
// they can be freely spread together into other sx objects — SxProps<Theme>
// is a union that also allows functions/arrays, which TS won't let you
// spread.

// Replaces the `.fill` utility class from the legacy Sass utils.
export const fillSx = {
  bottom: 0,
  left: 0,
  position: 'absolute',
  right: 0,
  top: 0,
} as const

// Replaces the `img.square` utility class from the legacy Sass utils.
export const squareImgSx = {
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover',
  display: 'block',
  width: '100%',
} as const

// Replaces the `card-style` mixin. Merge cardStyleSelectedSx on top of this
// when the card's `is-selected` state is active.
//
// Cards are drawn as pixel art panels with a 9-slice frame (see pixel.ts).
// Use `backgroundColor` rather than the `background` shorthand when
// overriding the color of anything built on this: the shorthand resets the
// `backgroundClip` that keeps the frame's corners and shadow transparent.
export const cardStyleSx = (theme: Theme) => ({
  ...pixelFrameSx({ outline: colors.cardOutline, shadow: true }),
  backgroundColor: colors.cardBackground,
  boxShadow: pixelBevel(),
  transition: theme.transitions.create('background-color', {
    duration: theme.transitions.duration.enteringScreen,
    easing: theme.transitions.easing.easeOut,
  }),
})

export const cardStyleSelectedSx = {
  backgroundColor: lighten(colors.cardBackground, 0.4),
} as const

// Replaces the `center-tabs` mixin.
export const centerTabsSx = {
  margin: '0 auto',
  maxWidth: 600,
  '& .MuiTabs-flexContainer': {
    justifyContent: 'center',
  },
  '& > .MuiTabs-root': {
    marginTop: '4em',
  },
  '& [role="tabpanel"]': {
    ...pixelFrameSx({ outline: colors.cardOutline }),
    // The tabs above this panel already draw the shared top edge.
    borderTopWidth: 0,
    borderImageWidth: `0 ${px(1)} ${px(1)}`,
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    padding: '0.5em 0.5em 0.5em',
    '& .card-list > li:last-child': {
      marginBottom: 0,
    },
  },
} as const

// Replaces the `sprite-shadow` mixin.
export const spriteShadowSx = {
  filter: pixelDropShadowFilter,
} as const

// Shared by QuickSelect and ForestQuickSelect: both render the same fixed
// toolbelt chrome (Toolbelt + one or more ItemLists), just backed by
// different inventories.
export const quickSelectSx = (theme: Theme, isMenuOpen: boolean) => ({
  ...cardStyleSx(theme),
  bottom: '7.5em',
  left: '50%',
  maxWidth: 'calc(100% - 2em)',
  position: 'fixed',
  transform: 'translateX(-50%)',
  '@media (orientation: landscape)': {
    bottom: 'auto',
    [`@media (max-height: ${breakpoints.largePhone}px)`]: {
      top: '5em',
      maxWidth: 'calc(100% - 12em)',
      left: `calc(50% - (${layout.fieldSpaceForRightSideControls} / 2))`,
    },
    [`@media (max-width: ${breakpoints.md}px)`]: {
      display: isMenuOpen ? 'none' : undefined,
    },
  },
  [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]:
    {
      left: 'auto',
      maxHeight: 'calc(100vh - 20em)',
      minWidth: '4em',
      overflow: 'auto',
      right: '0.75em',
      top: '9em',
      transform: 'none',
      bottom: '8em',
    },
  '@media (orientation: portrait)': {
    display: isMenuOpen ? 'none' : undefined,
  },
  '& .MuiGrid-root': {
    overflowX: 'scroll',
    overflowY: 'hidden',
    padding: '0.5em',
    position: 'relative',
    [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]:
      {
        overflowX: 'hidden',
        flexDirection: 'column',
      },
    '& > *': {
      [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]:
        {
          alignItems: 'center',
          width: '3em',
        },
    },
  },
  '& .Toolbelt': {
    display: 'flex',
    flexFlow: 'column',
    justifyContent: 'center',
  },
  '& .MuiDivider-root': {
    margin: '0 0.5em',
    [`@media (orientation: landscape) and (min-height: ${breakpoints.largePhone}px)`]:
      {
        margin: '0.5em 0',
        height: '1px',
        width: '100%',
        borderRightWidth: 0,
        borderBottomWidth: 'thin',
      },
  },
})