import React from "react"; import { THEME } from "../../types"; import { colors } from "../../tokens"; import { Svg, SvgProps } from "../Svg"; const WIDTH = 165; const HEIGHT = 32; const RATIO: number = WIDTH / HEIGHT; const widthFromHeight = (height: number) => Math.ceil(height * RATIO); export interface ConveyorLogoProps extends SvgProps { height?: number; monochrome?: boolean; theme?: THEME; variant?: "icon" | "wordmark"; } export const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = THEME.PRODUCT, variant = "wordmark", className, ...rest }: ConveyorLogoProps) => { const wordmarkColor = { brand: colors.white, product: colors.conveyor.black, }; const iconColorFunction = () => { if (monochrome && theme === THEME.PRODUCT) { return colors.conveyor.black; } if (monochrome && theme === THEME.BRAND) { return colors.white; } return colors.brandGreen[400]; }; const iconColor = iconColorFunction(); return ( ); };