@emotion/react#Theme TypeScript Examples

getEdge = (
  source: string,
  target: string,
  animated: boolean,
  label: string,
  palette: Theme["palette"]
) => {
  return {
    id: `edge-${source}-${target}`,
    source,
    target,
    animated,
    label,
    labelBgPadding: [8, 4] as [number, number],
    labelBgBorderRadius: 4,
    labelBgStyle: {
      fill: palette.info.light,
      color: palette.text.primary,
      fillOpacity: 0.7,
    },
    style: { stroke: palette.primary.main },
  }
}

getMatchNodes = (
  matches: Match[],
  parentId: string,
  palette: Theme["palette"],
  startingIndex: number,
  onScoreClick: (score: Score) => void,
  name = "Match"
) => {
  return matches.reduce((acc, match, index) => {
    return [
      ...acc,
      {
        id: match.id,
        type: "match",
        data: {
          name,
          item: match,
          onScoreClick,
          hasOutput: false,
        },
        position: {
          x: (ITEM_WIDTH + HORIZONTAL_SPACE) * Math.floor(index % 6) ,
          y: Math.floor(index / 6) * ITEM_HEIGHT,
        },
      },
      getEdge(match.id, parentId, false, "match", palette),
    ]
  }, [] as any)
}

getChunkNodes = (
  chunks: Chunk[],
  palette: Theme["palette"],
  startingIndex: number,
  onScoreClick: (score: Score) => void,
  name = "Chunk"
) => {
  const tallestChunk = calculateMaxItemHeight(chunks)

  return chunks.reduce((acc, chunk, index) => {
    return [
      ...acc,
      {
        id: chunk.id,
        type: "chunk",
        data: {
          name,
          item: chunk,
          onScoreClick,
        },
        position: {
          x: (ITEM_WIDTH + HORIZONTAL_SPACE) * startingIndex,
          y: index * tallestChunk,
        },
      },
      getEdge(chunk.id, "1", false, "chunk", palette),
      ...(chunk.matches
        ? getMatchNodes(
            chunk.matches,
            chunk.id,
            palette,
            startingIndex + index + 1,
            onScoreClick,
            "Chunk Match"
          )
        : []),
    ]
  }, [] as any)
}

function getParsedDatasets(data: LogLevelSummaryChartData, theme: Theme) {
  const levelPalette = getLevelPalette(theme)
  const datasets = LEVELS.map(
    (level): ChartDataSets => {
      const levelData = data.map((tick) => tick.levels[level])
      return {
        barPercentage: 0.75,
        categoryPercentage: 1,
        label: level,
        fill: "start",
        backgroundColor: levelPalette[level].backgroundColor,
        data: levelData,
      }
    }
  )
  return datasets
}

getLevelPalette = (theme: Theme): LevelColors => {
  const colorPalette = theme.palette
  return {
    INFO: {
      borderColor: colorPalette.info.main,
      backgroundColor: "rgba(0, 153, 153, 0.9)",
    },
    SUCCESS: {
      borderColor: colorPalette.success.main,
      backgroundColor: "rgba(50, 200, 205, 0.9)",
    },
    WARNING: {
      borderColor: colorPalette.warning.main,
      backgroundColor: "rgba(255, 204, 102, 0.9)",
    },
    ERROR: {
      borderColor: colorPalette.error.main,
      backgroundColor: "rgba(255, 102, 102, 0.9)",
    },
    CRITICAL: {
      borderColor: colorPalette.warning.dark,
      backgroundColor: "rgba(255, 70, 64, 0.9)",
    },
    DEBUG: {
      borderColor: colorPalette.grey[700],
      backgroundColor: "rgba(110, 114, 120, 0.9)",
    },
  }
}

statusToColor = (theme: Theme, status: LeaseView['status']) => {
  switch (status) {
    case ChannelStatus.OPEN:
      return theme.colors.green;
    case ChannelStatus.OPENING:
    case ChannelStatus.CLOSING:
    case ChannelStatus.FORCE_CLOSING:
    case ChannelStatus.WAITING_TO_CLOSE:
      return theme.colors.gold;
    case ChannelStatus.UNKNOWN:
    case 'Closed':
      return theme.colors.pink;
    default:
      return '';
  }
}

statusToColor = (theme: Theme, status: Order['stateLabel']) => {
  switch (status) {
    case 'Partially Filled':
      return theme.colors.gold;
    case 'Filled':
      return theme.colors.green;
    case 'Failed':
    case 'Cancelled':
    case 'Expired':
      return theme.colors.pink;
    default:
      return '';
  }
}

css = (kind: Kind, extraCss: Interpolation<Theme> = {}): Interpolation<Theme> => {
    const notDisabledStyle = match(kind, {
        "normal": () => ({
            border: "1px solid var(--grey65)",
            color: "black",
            "&:hover": {
                border: "1px solid var(--grey40)",
                backgroundColor: "var(--grey92)",
            },
        }),

        "danger": () => ({
            border: "1px solid var(--danger-color)",
            color: "var(--danger-color)",
            "&:hover": {
                border: "1px solid var(--danger-color-darker)",
                backgroundColor: "var(--danger-color)",
                color: "var(--danger-color-bw-contrast)",
            },
        }),

        "happy": () => ({
            border: "1px solid var(--happy-color-dark)",
            color: "var(--happy-color-bw-contrast)",
            backgroundColor: "var(--happy-color)",
            "&:hover": {
                border: "1px solid var(--happy-color-dark)",
                backgroundColor: "var(--happy-color-darker)",
                color: "var(--happy-color-bw-contrast)",
            },
        }),
    });

    return {
        borderRadius: 4,
        display: "inline-flex",
        alignItems: "center",
        padding: "4px 10px",
        gap: 12,
        backgroundColor: "var(--grey97)",
        transition: "background-color 0.15s, border-color 0.15s",
        "& > svg": {
            fontSize: 20,
        },
        "&:disabled": {
            border: "1px solid var(--grey80)",
            color: "var(--grey65)",
        },
        "&:focus-visible": {
            boxShadow: "0 0 0 3px var(--grey65)",
            outline: "none",
        },
        "&:not([disabled])": {
            cursor: "pointer",
            ...notDisabledStyle,
        },
        ...extraCss as Record<string, unknown>,
    };
}

getChartElements = (
  doc: MatchesProps["doc"],
  palette: Theme["palette"],
  onScoreClick: MatchesProps["onScoreClick"]
) => {
  let docMatchesIndex = 1

  if (doc.chunks?.length) docMatchesIndex++
  doc?.chunks?.forEach((chunk) => {
    if (chunk?.matches) docMatchesIndex++
  })

  let yOffset = 0

  if (doc?.chunks?.length) {
    const tallestChunk = calculateMaxItemHeight(doc.chunks)
    const docHeight = calculateItemHeight(doc)
    yOffset = (tallestChunk * doc.chunks.length) / 2 - docHeight / 2
  }

  const elements = [
    {
      id: "1",
      type: "doc",
      data: {
        name: "Document",
        item: doc,
        onScoreClick,
        hasInput: false,
      },
      position: { x: 0, y: yOffset },
    },
    ...(doc.chunks ? getChunkNodes(doc.chunks, palette, 1, onScoreClick) : []),
    ...(doc.matches
      ? getMatchNodes(
          doc.matches,
          "1",
          palette,
          docMatchesIndex,
          onScoreClick,
          "Document Match"
        )
      : []),
  ]
  return elements
}

GlobalStyles = (theme: Theme) => `
  .rc-select-dropdown {
    padding-top: 10px;
    background-color: transparent;

    & > div {
      color: ${theme.colors.offWhite};
      background-color: ${theme.colors.lightBlue};
      border-width: 0;
      border-radius: 8px;
      box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }
  }

  .rc-select-item {
    color: ${theme.colors.white};
    font-family: ${theme.fonts.open.regular};
    font-weight: 600;
    font-size: ${theme.sizes.s};
    line-height: 24px;
    padding: 16px;
    border-bottom: 1px solid ${theme.colors.paleBlue};

    &:last-of-type {
      border-bottom: none;
    }

    &:hover {
      color: ${theme.colors.white};
      background-color: ${theme.colors.blue};
      cursor: pointer;
    }

    & > .rc-select-item-option-state {
        top: 16px;
        right: 12px;
      }
  }
`

theme: Theme = {
  fonts: {
    open: {
      light: `'OpenSans Light', ${fallbackFont}`,
      regular: `'OpenSans Regular', ${fallbackFont}`,
      semiBold: `'OpenSans SemiBold', ${fallbackFont}`,
      bold: `'OpenSans Bold', ${fallbackFont}`,
      extraBold: `'OpenSans ExtraBold', ${fallbackFont}`,
    },
    work: {
      light: `'WorkSans Light', ${fallbackFont}`,
      medium: `'WorkSans Medium', ${fallbackFont}`,
      semiBold: `'WorkSans SemiBold', ${fallbackFont}`,
    },
  },
  sizes: {
    xxs: '11px',
    xs: '14px',
    s: '16px',
    m: '18px',
    l: '22px',
    xl: '27px',
    xxl: '45px',
  },
  colors: {
    blue: '#252f4a',
    darkBlue: '#212133',
    gray: '#848a99',
    darkGray: '#6b6969ef',
    white: '#ffffff',
    offWhite: '#f5f5f5',
    pink: '#f5406e',
    green: '#46E80E',
    gold: '#efa00b',
    purple: '#57038d',
    overlay: 'rgba(245,245,245,0.04)',
    gradient: 'linear-gradient(325.53deg, #252F4A 0%, #46547B 100%);',
    lightBlue: '#384770',
    paleBlue: '#2E3A5C',
  },
}

statusToColor = (level: BalanceStatus, active: boolean, theme: Theme) => {
  if (!active) return theme.colors.gray;

  if (level === BalanceStatus.danger) return theme.colors.pink;
  if (level === BalanceStatus.warn) return theme.colors.gold;
  return theme.colors.green;
}

ComponentOrInstanceIndicator = React.memo(() => {
  const { isComponent, focusedElementPath, selectedViews } = useEditorState((store) => {
    const target = store.editor.selectedViews[0]

    const isFocusableComponent =
      target == null ? false : MetadataUtils.isFocusableComponent(target, store.editor.jsxMetadata)

    return {
      isComponent: isFocusableComponent,
      focusedElementPath: store.editor.focusedElementPath,
      selectedViews: store.editor.selectedViews,
    }
  }, 'Component-button')

  const dispatch = useEditorState((state) => state.dispatch, 'ComponentOrInstanceIndicator')
  const colorTheme = useColorTheme()
  const popupEnabled = selectedViews.length > 0

  const [isOpen, setIsOpen] = React.useState(false)
  const toggleOpen = React.useCallback(() => {
    setIsOpen((currentValue) => !currentValue)
  }, [])

  const closeAndEatEvent = React.useCallback(
    (e: MouseEvent) => {
      setIsOpen(false)
      e.stopPropagation()
      e.preventDefault()
    },
    [setIsOpen],
  )

  const target = selectedViews[0]

  const isFocused = target == null ? false : EP.isFocused(focusedElementPath, target)

  const toggleFocusMode = React.useCallback(() => {
    dispatch([setFocusedElement(isFocused ? null : target)])
  }, [dispatch, isFocused, target])

  const editContextStyle: React.CSSProperties = React.useMemo(() => {
    if (target != null) {
      if (isComponent && !isFocused) {
        return {
          color: colorTheme.component.value,
          backgroundColor: colorTheme.component.shade(10).value,
        }
      } else if (isFocused && isComponent) {
        return {
          color: colorTheme.componentChild.value,
          backgroundColor: colorTheme.componentChild.shade(10).value,
        }
      } else {
        return {
          background: colorTheme.secondaryBackground.value,
          color: colorTheme.neutralForeground.value,
          opacity: 0.5,
          pointerEvents: 'none',
        }
      }
    } else {
      return {
        background: colorTheme.secondaryBackground.value,
        color: colorTheme.neutralForeground.value,
        stroke: 'black',
        opacity: 0.5,
        pointerEvents: 'none',
      }
    }
  }, [target, isComponent, isFocused, colorTheme])

  const flexRowTheme: Interpolation<Theme> = React.useMemo(() => {
    return {
      flexGrow: 1,
      flexShrink: 1,
      overflow: 'hidden',
      borderTopLeftRadius: UtopiaTheme.inputBorderRadius,
      borderBottomLeftRadius: UtopiaTheme.inputBorderRadius,
      gap: 8,
      paddingLeft: 4,
      cursor: 'pointer',
      transition: 'background-color .1s ease-in-out',
      ...(editContextStyle as any), // TODO Emotion and React 18 types don't like each other
      '&:hover': {
        filter: 'brightness(1.02  )',
      },
      '&:active': {
        filter: 'brightness(1.03)',
      },
    }
  }, [editContextStyle])

  return (
    <div
      role='compositeButton'
      style={{
        position: 'relative',
        display: 'flex',
        alignItems: 'stretch',
        height: UtopiaTheme.layout.inputHeight.default,
        flexBasis: 38,
      }}
    >
      <FlexRow role='button' onClick={toggleFocusMode} css={flexRowTheme}>
        {isComponent ? (
          <Icons.Component color={editContextStyle.stroke as IcnColor} />
        ) : (
          <Icn
            category='element'
            type='ghost'
            width={18}
            height={18}
            color={editContextStyle.stroke as IcnColor}
          />
        )}
      </FlexRow>

      <div
        className='ignore-react-onclickoutside'
        role='expansionButton'
        css={{
          pointerEvents: popupEnabled ? 'initial' : 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexGrow: 0,
          flexShrink: 0,
          flexBasis: 14,
          transition: 'background-color .1s ease-in-out',
          ...(editContextStyle as any), // TODO Emotion and React 18 types don't like each other
          // slightly darker than the button next to it
          filter: 'brightness(.99)',
          borderLeft: `1px dashed ${colorTheme.secondaryBorder.value}`,
          cursor: 'pointer',
          borderTopRightRadius: UtopiaTheme.inputBorderRadius,
          borderBottomRightRadius: UtopiaTheme.inputBorderRadius,
          '&:hover': {
            filter: 'brightness(1.01)',
          },
          '&:active > *': {
            transform: 'translateY(1px)',
          },
          '&:active': {
            filter: 'brightness(1.03)',
          },
        }}
        onClick={toggleOpen}
      >
        <SmallerIcons.ExpansionArrowDown
          isDisabled={!popupEnabled}
          color={editContextStyle.stroke as IcnColor}
          style={{
            flexGrow: 0,
            flexShrink: 0,
            transform: isOpen ? 'rotate(180deg)' : undefined,
          }}
        />
      </div>

      {isOpen ? (
        <OnClickOutsideHOC onClickOutside={closeAndEatEvent}>
          <div
            tabIndex={0}
            style={{
              position: 'absolute',
              left: 0,
              top: 30,
              zIndex: 1,
              width: UtopiaTheme.layout.inspectorSmallWidth, // TODO should this be resize-aware
              height: 100,
              ...UtopiaStyles.popup,
              display: 'flex',
              flexDirection: 'column',
              alignContent: 'flex-start',
            }}
            onClick={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
            onMouseUp={(e) => e.stopPropagation()}
          >
            <BreadcrumbTrail />
            <RenderAsRow />
          </div>
        </OnClickOutsideHOC>
      ) : null}
    </div>
  )
})