@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

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

@@ -1,54 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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

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

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

@@ -1,30 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

package/src/hardware-sim/index.ts

@@ -1,9 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,101 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-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

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