@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/hardware-sim/Pipette/EmanatingNozzle.tsx

@@ -0,0 +1,54 @@
+import { Fragment } from 'react'
+
+import { COLORS } from '../../helix-design-system'
+import { C_TRANSPARENT } from '../../styles'
+import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from './constants'
+
+export const EmanatingNozzle = (props: {
+  cx: number
+  cy: number
+}): JSX.Element => {
+  const { cx, cy } = props
+  return (
+    <Fragment>
+      <circle
+        data-testid="origin_circle"
+        cx={cx}
+        cy={cy}
+        r={0.5}
+        stroke={COLORS.blue50}
+        fill={COLORS.blue50}
+      ></circle>
+      <circle
+        data-testid="emanating_circle"
+        cx={cx}
+        cy={cy}
+        r={0.5}
+        stroke={COLORS.blue50}
+        strokeWidth={'2px'}
+        fill={C_TRANSPARENT}
+      >
+        <animate
+          data-testid="radius_animation"
+          attributeName="r"
+          from={5}
+          to={SINGLE_CHANNEL_PIPETTE_HEIGHT / 2}
+          begin={0}
+          dur={1.1}
+          calcMode="ease-out"
+          repeatCount="indefinite"
+        />
+        <animate
+          data-testid="opacity_animation"
+          attributeName="opacity"
+          from={0.7}
+          to={0}
+          begin={0}
+          dur={1.1}
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </Fragment>
+  )
+}

package/src/hardware-sim/Pipette/PipetteRender.stories.tsx

@@ -0,0 +1,73 @@
+import { Fragment } from 'react'
+
+import { getAllLabwareDefs, getAllPipetteNames } from '@opentrons/shared-data'
+
+import { RobotWorkSpace } from '../Deck'
+import { LabwareRender } from '../Labware'
+import { PipetteRender } from './'
+
+import type { Meta, Story } from '@storybook/react'
+import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+
+const DECK_MAP_VIEWBOX = '0 -140 230 230'
+
+const opentrons300UlTiprack = getAllLabwareDefs().opentrons96Tiprack300UlV1
+const opentrons10UlTiprack = getAllLabwareDefs().opentrons96Tiprack10UlV1
+const nest12Reservoir15ml = getAllLabwareDefs().nest12Reservoir15MlV1
+const axygenReservoir90ml = getAllLabwareDefs().axygen1Reservoir90MlV1
+const opentrons6TuberackNest50mlConical = getAllLabwareDefs()
+  .opentrons6TuberackNest50MlConicalV1
+
+const labwareDefMap: Record<string, LabwareDefinition2> = {
+  [opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
+  [opentrons10UlTiprack.metadata.displayName]: opentrons10UlTiprack,
+  [nest12Reservoir15ml.metadata.displayName]: nest12Reservoir15ml,
+  [axygenReservoir90ml.metadata.displayName]: axygenReservoir90ml,
+  [opentrons6TuberackNest50mlConical.metadata
+    .displayName]: opentrons6TuberackNest50mlConical,
+}
+const pipetteNames = Object.keys(getAllPipetteNames()) as PipetteName[]
+
+export default {
+  title: 'Library/Molecules/Simulation/Pipette/PipetteRender',
+} as Meta
+
+const Template: Story<{
+  labwareName: string
+  pipetteName: PipetteName
+}> = args => {
+  const labwareDef = labwareDefMap[args.labwareName]
+  return (
+    <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
+      {() => (
+        <Fragment>
+          <LabwareRender definition={labwareDef} />
+          <PipetteRender
+            labwareDef={labwareDef}
+            pipetteName={args.pipetteName}
+          />
+        </Fragment>
+      )}
+    </RobotWorkSpace>
+  )
+}
+export const Pipette = Template.bind({})
+
+Pipette.argTypes = {
+  labwareName: {
+    control: {
+      type: 'select',
+      options: Object.keys(labwareDefMap).map(
+        d => labwareDefMap[d].metadata.displayName
+      ),
+    },
+    defaultValue: opentrons300UlTiprack.metadata.displayName,
+  },
+  pipetteName: {
+    control: {
+      type: 'select',
+      options: pipetteNames,
+    },
+    defaultValue: pipetteNames[0],
+  },
+}

package/src/hardware-sim/Pipette/PipetteRender.tsx

@@ -0,0 +1,88 @@
+import { getPipetteNameSpecs } from '@opentrons/shared-data'
+
+import { RobotCoordsForeignDiv } from '../Deck/RobotCoordsForeignDiv'
+import {
+  MULTI_CHANNEL_CENTER_Y_NOZZLE,
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  MULTI_CHANNEL_Y_OFFSET,
+  NINETY_SIX_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
+} from './constants'
+import { EightEmanatingNozzles } from './EightEmanatingNozzles'
+import { EmanatingNozzle } from './EmanatingNozzle'
+
+import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+
+interface PipetteRenderProps {
+  labwareDef: LabwareDefinition2
+  pipetteName: PipetteName
+  usingMetalProbe?: boolean
+}
+
+export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
+  const { labwareDef, pipetteName, usingMetalProbe = false } = props
+  const channels = getPipetteNameSpecs(pipetteName)?.channels
+  const cx =
+    channels === 1
+      ? SINGLE_CHANNEL_PIPETTE_WIDTH / 2
+      : MULTI_CHANNEL_PIPETTE_WIDTH / 2
+  const cy =
+    channels === 1
+      ? SINGLE_CHANNEL_PIPETTE_HEIGHT / 2
+      : MULTI_CHANNEL_CENTER_Y_NOZZLE
+  const x = labwareDef.wells.A1.x - cx
+  const y = channels === 1 ? labwareDef.wells.A1.y - cy : MULTI_CHANNEL_Y_OFFSET
+
+  let boxWidth: number
+  let probeOffsetX: number = 0
+  let probeOffsetY: number = 0
+  if (channels === 1) {
+    boxWidth = SINGLE_CHANNEL_PIPETTE_WIDTH
+  } else if (channels === 8) {
+    boxWidth = MULTI_CHANNEL_PIPETTE_WIDTH
+    probeOffsetY = 63
+  } else {
+    boxWidth = NINETY_SIX_CHANNEL_PIPETTE_WIDTH
+    probeOffsetY = 63
+    if (Object.keys(labwareDef.wells).length === 1) {
+      probeOffsetX = 99 / 2
+    }
+  }
+
+  return (
+    <RobotCoordsForeignDiv
+      width={boxWidth}
+      height={
+        channels === 1
+          ? SINGLE_CHANNEL_PIPETTE_HEIGHT
+          : MULTI_CHANNEL_PIPETTE_HEIGHT
+      }
+      x={x - probeOffsetX}
+      y={y}
+      outerProps={{ style: { overflow: 'visible' } }}
+      innerDivProps={{
+        style: {
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
+        },
+      }}
+    >
+      <svg overflow="visible">
+        {channels === 1 || usingMetalProbe ? (
+          <EmanatingNozzle
+            cx={cx}
+            cy={usingMetalProbe ? cy + probeOffsetY : cy}
+          />
+        ) : (
+          <EightEmanatingNozzles
+            cx={usingMetalProbe ? cx - probeOffsetX : cx}
+            initialCy={usingMetalProbe ? cy + probeOffsetY : cy}
+          />
+        )}
+      </svg>
+    </RobotCoordsForeignDiv>
+  )
+}

package/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+
+vi.mock('../EmanatingNozzle')
+
+describe('EightEmanatingNozzles', () => {
+  beforeEach(() => {
+    vi.mocked(EmanatingNozzle).mockReturnValue(<div>mock emanating nozzle</div>)
+  })
+  it('should render eight emanating nozzles', () => {
+    render(<EightEmanatingNozzles cx={5} initialCy={10} />)
+    expect(EmanatingNozzle).toHaveBeenCalledTimes(8)
+  })
+})

package/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { COLORS } from '../../../helix-design-system'
+import { C_TRANSPARENT } from '../../../styles'
+import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+
+describe('EmanatingNozzle', () => {
+  it('should render an small origin circle', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const originCircle = screen.getByTestId('origin_circle')
+    expect(originCircle).toHaveAttribute('cx', '5')
+    expect(originCircle).toHaveAttribute('cy', '10')
+    expect(originCircle).toHaveAttribute('r', '0.5')
+    expect(originCircle).toHaveAttribute('stroke', COLORS.blue50)
+    expect(originCircle).toHaveAttribute('fill', COLORS.blue50)
+  })
+  it('should render a medium sized animating circle', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const emanatingCircle = screen.getByTestId('emanating_circle')
+    expect(emanatingCircle).toHaveAttribute('cx', '5')
+    expect(emanatingCircle).toHaveAttribute('cy', '10')
+    expect(emanatingCircle).toHaveAttribute('r', '0.5')
+    expect(emanatingCircle).toHaveAttribute('stroke', COLORS.blue50)
+    expect(emanatingCircle).toHaveAttribute('fill', C_TRANSPARENT)
+  })
+  it('should render a medium sized animating circle that grows', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const radiusAnimation = screen.getByTestId('radius_animation')
+    expect(radiusAnimation).toHaveAttribute('attributeName', 'r')
+    expect(radiusAnimation).toHaveAttribute('from', '5')
+    expect(radiusAnimation).toHaveAttribute(
+      'to',
+      (SINGLE_CHANNEL_PIPETTE_HEIGHT / 2).toString()
+    )
+    expect(radiusAnimation).toHaveAttribute('begin', '0')
+    expect(radiusAnimation).toHaveAttribute('dur', '1.1')
+    expect(radiusAnimation).toHaveAttribute('calcMode', 'ease-out')
+    expect(radiusAnimation).toHaveAttribute('repeatCount', 'indefinite')
+  })
+  it('should render a medium sized animating circle that fades out', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const opacityAnimation = screen.getByTestId('opacity_animation')
+    expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity')
+    expect(opacityAnimation).toHaveAttribute('from', '0.7')
+    expect(opacityAnimation).toHaveAttribute('to', '0')
+    expect(opacityAnimation).toHaveAttribute('begin', '0')
+    expect(opacityAnimation).toHaveAttribute('dur', '1.1')
+    expect(opacityAnimation).toHaveAttribute('calcMode', 'linear')
+    expect(opacityAnimation).toHaveAttribute('repeatCount', 'indefinite')
+  })
+})

package/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

@@ -0,0 +1,101 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
+import {
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
+} from '../constants'
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+import { PipetteRender } from '../PipetteRender'
+
+import type { ComponentProps } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+vi.mock('../../Deck/RobotCoordsForeignDiv')
+vi.mock('../EmanatingNozzle')
+vi.mock('../EightEmanatingNozzles')
+
+const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2
+
+const render = (props: ComponentProps<typeof PipetteRender>) => {
+  return renderWithProviders(<PipetteRender {...props} />)[0]
+}
+
+describe('PipetteRender', () => {
+  let props: ComponentProps<typeof PipetteRender>
+  beforeEach(() => {
+    props = {
+      labwareDef: fixtureTiprack300Ul,
+      pipetteName: 'p1000_single',
+    }
+    vi.mocked(RobotCoordsForeignDiv).mockReturnValue(<div></div>)
+  })
+
+  describe('when the pipette is single channel', () => {
+    beforeEach(() => {
+      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
+        <div>
+          {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '}
+          {children}
+        </div>
+      ))
+
+      vi.mocked(EmanatingNozzle).mockReturnValue(
+        <div>mock emanating nozzle</div>
+      )
+    })
+
+    it('should render a rectangle with the correct dimensions', () => {
+      render(props)
+      screen.getByText(
+        `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      vi.mocked(EmanatingNozzle).mockRestore()
+    })
+    it('should render a single emanating nozzle', () => {
+      render(props)
+      screen.getByText('mock emanating nozzle')
+      expect(EightEmanatingNozzles).not.toHaveBeenCalled()
+    })
+  })
+  describe('when the pipette is 8 channel', () => {
+    beforeEach(() => {
+      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
+        <div>
+          {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '}
+          {children}
+        </div>
+      ))
+
+      vi.mocked(EightEmanatingNozzles).mockReturnValue(
+        <div>mock eight emanating nozzles</div>
+      )
+    })
+    it('should render a rectangle with the correct dimensions', () => {
+      props = {
+        ...props,
+        pipetteName: 'p10_multi',
+      }
+      render(props)
+      screen.getByText(
+        `rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      vi.mocked(EightEmanatingNozzles).mockRestore()
+    })
+    it('should render eight emanating nozzles', () => {
+      props = {
+        ...props,
+        pipetteName: 'p10_multi',
+      }
+      render(props)
+      screen.getByText('mock eight emanating nozzles')
+    })
+  })
+})

package/src/hardware-sim/Pipette/constants.ts

@@ -0,0 +1,10 @@
+// These constants are used only in pipette render in LPC. The values do not necessarily reflect physical pipette dimensions.
+export const SINGLE_CHANNEL_PIPETTE_WIDTH = 18.7
+export const SINGLE_CHANNEL_PIPETTE_HEIGHT = 30.5
+
+export const MULTI_CHANNEL_PIPETTE_WIDTH = 18.7
+export const MULTI_CHANNEL_PIPETTE_HEIGHT = 90.3
+export const NINETY_SIX_CHANNEL_PIPETTE_WIDTH = 117.7
+
+export const MULTI_CHANNEL_CENTER_Y_NOZZLE = 13.3
+export const MULTI_CHANNEL_Y_OFFSET = -2.5

package/src/hardware-sim/Pipette/index.ts

@@ -0,0 +1 @@
+export * from './PipetteRender'

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx

@@ -0,0 +1,30 @@
+import { animated } from '@react-spring/web'
+import styled from 'styled-components'
+
+import { Svg } from '../../primitives'
+
+import type { ComponentProps } from 'react'
+
+interface RobotCoordinateSpaceProps extends ComponentProps<typeof Svg> {
+  animated?: boolean
+}
+export function RobotCoordinateSpace(
+  props: RobotCoordinateSpaceProps
+): JSX.Element {
+  const { animated = false, children, ...restProps } = props
+  const allPassThroughProps = {
+    transform: 'scale(1, -1)',
+    ...restProps,
+  }
+  return animated ? (
+    <AnimatedSvg {...allPassThroughProps}>{children}</AnimatedSvg>
+  ) : (
+    <Svg {...allPassThroughProps}>{children}</Svg>
+  )
+}
+
+/**
+ * These animated components needs to be split out because react-spring and styled-components don't play nice
+ * @see https://github.com/pmndrs/react-spring/issues/1515 */
+// @ts-expect-error Type instantiation is excessively deep and possibly infinite
+const AnimatedSvg = styled(animated.svg)<typeof animated.svg>``

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

@@ -0,0 +1,52 @@
+import { useRef } from 'react'
+
+import { Svg } from '../../primitives'
+
+import type { ComponentProps, ReactNode } from 'react'
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+
+export interface RobotCoordinateSpaceWithRefRenderProps {
+  deckSlotsById: { [slotId: string]: DeckSlot }
+}
+
+interface RobotCoordinateSpaceWithRefProps extends ComponentProps<typeof Svg> {
+  viewBox?: string | null
+  deckDef?: DeckDefinition
+  zoomed?: boolean
+  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => ReactNode
+}
+
+export function RobotCoordinateSpaceWithRef(
+  props: RobotCoordinateSpaceWithRefProps
+): JSX.Element | null {
+  const { children, deckDef, viewBox, zoomed = false, ...restProps } = props
+  const wrapperRef = useRef<SVGSVGElement>(null)
+
+  if (deckDef == null && viewBox == null) return null
+
+  let wholeDeckViewBox
+  let deckSlotsById = {}
+  if (deckDef != null) {
+    const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
+    const [deckXDimension, deckYDimension] = deckDef.dimensions
+
+    deckSlotsById = deckDef.locations.addressableAreas.reduce(
+      (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
+      {}
+    )
+    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+  }
+
+  return (
+    <Svg
+      viewBox={zoomed ? viewBox : wholeDeckViewBox}
+      ref={wrapperRef}
+      transform="scale(1, -1)"
+      width="100%"
+      height="100%"
+      {...restProps}
+    >
+      {children?.({ deckSlotsById })}
+    </Svg>
+  )
+}

package/src/hardware-sim/RobotCoordinateSpace/index.ts

@@ -0,0 +1,2 @@
+export * from './RobotCoordinateSpaceWithRef'
+export * from './RobotCoordinateSpace'

package/src/hardware-sim/index.ts

@@ -0,0 +1,9 @@
+export * from './BaseDeck'
+export * from './BaseDeck/__fixtures__'
+export * from './Deck'
+export * from './DeckConfigurator'
+export * from './DeckSlotLocation'
+export * from './Labware'
+export * from './Module'
+export * from './Pipette'
+export * from './RobotCoordinateSpace'

package/src/hardware-sim/utils.ts

@@ -0,0 +1,18 @@
+import type { AffineTransformMatrix } from '@opentrons/shared-data'
+
+export const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix = [
+  [1, 0, 0, 0],
+  [0, 1, 0, 0],
+  [0, 0, 1, 0],
+  [0, 0, 0, 1],
+]
+
+// multiply two matrices together (dot product)
+export function multiplyMatrices(a: number[][], b: number[][]): number[][] {
+  const transposedB = b[0].map((_val, index) => b.map(row => row[index]))
+  return a.map(rowA =>
+    transposedB.map(rowB =>
+      rowA.reduce((acc, valA, colIndexA) => acc + valA * rowB[colIndexA], 0)
+    )
+  )
+}

package/src/helix-design-system/borders.ts

@@ -0,0 +1,32 @@
+import { COLORS } from '.'
+
+/**
+ * Constants
+ */
+export const borderRadius2 = '2px' // WEB ONLY!
+export const borderRadius4 = '4px'
+export const borderRadius8 = '8px'
+export const borderRadius12 = '12px'
+export const borderRadius16 = '16px'
+export const borderRadius40 = '40px'
+export const borderRadiusFull = '200px'
+
+/**
+ * Styles
+ */
+export const styleSolid = 'solid'
+
+/**
+ * Special-case borders
+ */
+export const activeLineBorder = `1px ${styleSolid} ${COLORS.blue50}`
+export const lineBorder = `1px ${styleSolid} ${COLORS.grey30}`
+
+/**
+ * Shadows
+ */
+export const smallDropShadow = '0px 3px 6px rgba(0, 0, 0, 0.23)'
+export const tinyDropShadow = '0px 1px 3px 0px rgba(0, 0, 0, .33)'
+// touch screen
+export const shadowBig = '0px 3px 6px rgba(0,0,0,0.23)'
+export const shadowSmall = '0px 0px 40px rgba(0,0,0,0.4)'

package/src/helix-design-system/colors.ts

@@ -0,0 +1,101 @@
+// some colors are slightly adjusted for on-device display screen differences
+// isTouchscreen hex values are dev concerns only - designs will reflect the standard hex values
+import { isTouchscreen } from '../ui-style-constants/responsiveness'
+
+/**
+ * green
+ */
+export const green60 = '#03683E'
+export const green50 = isTouchscreen ? '#1CA850' : '#04AA65'
+export const green40 = isTouchscreen ? '#8EF3A8' : '#91E2C0'
+export const green35 = isTouchscreen ? '#8AFBAB' : '#AFEDD3'
+export const green30 = '#C4F6E0'
+export const green20 = '#E8F7ED'
+
+/**
+ * red
+ */
+export const red60 = '#941313'
+export const red55 = '#C71A1B'
+export const red50 = '#DE1B1B'
+export const red40 = '#F5B2B3'
+export const red35 = '#F8C8C9'
+export const red30 = '#FAD6D6'
+export const red20 = '#FCE9E9'
+
+/**
+ * yellow
+ */
+export const yellow60 = '#825512'
+export const yellow50 = '#F09D20'
+export const yellow40 = '#FCD48B'
+export const yellow35 = '#FFE1A4'
+export const yellow30 = '#FFE9BE'
+export const yellow20 = '#FDF3E2'
+
+/**
+ * purple
+ */
+export const purple60 = isTouchscreen ? '#612367' : '#562566'
+export const purple55 = isTouchscreen ? '#822E89' : '#713187'
+export const purple50 = isTouchscreen ? '#9E39A8' : '#893BA4'
+export const purple40 = isTouchscreen ? '#E2A9EA' : '#CEA4DF'
+export const purple35 = isTouchscreen ? '#ECC2F2' : '#DBBCE7'
+export const purple30 = isTouchscreen ? '#F4DEF7' : '#E6D5EC'
+export const purple20 = isTouchscreen ? '#FFF3FE' : '#F1E8F5'
+
+/**
+ * blue
+ */
+export const blue60 = '#004196'
+export const blue55 = '#0056C8'
+export const blue40 = '#A9CEFD'
+export const blue35 = '#BFDCFD'
+export const blue30 = '#D0E6FE'
+export const blue20 = '#E1EFFF'
+export const blue10 = '#F1F8FF'
+
+/**
+ * grey
+ */
+export const grey60 = '#4A4C4E'
+export const grey55 = '#626467'
+export const grey50 = '#737578'
+export const grey40 = '#B7B8B9'
+export const grey35 = '#CBCCCC'
+export const grey30 = '#DEDEDE'
+export const grey20 = '#E9E9E9'
+export const grey10 = '#F3F3F3'
+
+/**
+ * core
+ */
+export const black90 = '#16212D'
+export const black80 = '#24313F'
+export const black70 = '#39495B'
+export const white = '#FFFFFF'
+export const blue50 = '#006CFA'
+
+/**
+ * Semi-opaques
+ * */
+export const transparentWhite80 = `${white}CC`
+export const transparentWhite50 = `${white}80`
+export const transparentBlack80 = `${black90}80`
+
+/**
+ * flex
+ */
+export const flex40 = '#aae3fc'
+export const flex55 = '#0297CC'
+export const flex50 = '#00BDFF'
+
+/**
+ * extras
+ */
+export const transparent = '#00000000'
+// opacity hex codes to append to 6-digit color hex codes
+export const opacity20HexCode = '33' // 20% opacity
+export const opacity40HexCode = '66' // 40% opacity
+export const opacity60HexCode = '99' // 60% opacity
+export const opacity90HexCode = 'E6' // 90% opacity

package/src/helix-design-system/index.ts

@@ -0,0 +1,4 @@
+export * as COLORS from './colors'
+export * as BORDERS from './borders'
+export * as PRODUCT from './product'
+export * as STYLE from './style'

package/src/helix-design-system/product/index.ts

@@ -0,0 +1 @@
+export * as TYPOGRAPHY from './typography'