first commit where PD builds

components/src/buttons/buttons.module.css

@@ -1,7 +1,7 @@
 /* button styling */
 @import '..';
 
-:root {
+#root {
   --button-pad: 0.5rem;
 
   --button-disabled : {

components/src/controls/styles.module.css

@@ -1,6 +1,6 @@
 @import '../index.css';
 
-:root {
+#root {
   --mw-labeled-toggle: 25rem;
 }
 

components/src/hardware-sim/Deck/Deck.module.css

@@ -1,6 +1,6 @@
 @import '../..';
 
-:root {
+#root {
   --deck-element: {
     fill: #fff;
     stroke: var(--c-plate-bg);

components/src/hardware-sim/Deck/FlexTrash.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import {
   FLEX_ROBOT_TYPE,
   getDeckDefFromRobotType,
-  opentrons1Trash3200mlFixedV1 as trashDef,
+  opentrons1Trash3200MlFixedV1 as trashLabwareDef,
 } from '@opentrons/shared-data'
 import { Icon } from '../../icons'
 import { Flex, Text } from '../../primitives'
@@ -35,6 +35,7 @@ interface FlexTrashProps {
  * Component to render Opentrons Flex trash
  * For use as a RobotWorkspace child component
  */
+
 export const FlexTrash = ({
   robotType,
   trashIconColor,
@@ -60,8 +61,11 @@ export const FlexTrash = ({
   } = deckDefinition.locations.addressableAreas[0].boundingBox
 
   // adjust for dimensions from trash definition
-  const { x: xAdjustment, y: yAdjustment } = trashDef.cornerOffsetFromSlot
-  const { xDimension, yDimension } = trashDef.dimensions
+  const {
+    x: xAdjustment,
+    y: yAdjustment,
+  } = trashLabwareDef.cornerOffsetFromSlot
+  const { xDimension, yDimension } = trashLabwareDef.dimensions
 
   // rotate trash 180 degrees in column 1
   const rotateDegrees =

components/src/hardware-sim/Deck/index.tsx

@@ -1,6 +1,5 @@
 export * from './DeckFromLayers'
 export * from './FlexTrash'
-export * from './getDeckDefinitions'
 export * from './MoveLabwareOnDeck'
 export * from './RobotCoordsForeignDiv'
 export * from './RobotCoordsForeignObject'

components/src/icons/Icon.tsx

@@ -68,7 +68,6 @@ export function Icon(props: IconProps): JSX.Element | null {
       fill="currentColor"
       viewBox={viewBox}
       className={cx(className, { spin })}
-      css={spinStyle}
       {...svgProps}
       id={id}
     >

components/src/images/labware/measurement-guide/index.ts

@@ -13,132 +13,135 @@ type Diagrams = Record<string, string[]>
 
 const FOOTPRINT_DIAGRAMS: Diagrams = {
   wellPlate: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    new URL('./images/dimensions/[email protected]', import.meta.url).href,
+    new URL(
+      './images/dimensions/[email protected]',
+      import.meta.url
+    ).href,
   ],
   tipRack: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
   tubeRack: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
   reservoir: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
   irregular: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
   adapter: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
 }
 
 const ALUM_BLOCK_FOOTPRINTS: Diagrams = {
   tubeRack: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
   wellPlate: [
-    require('./images/dimensions/[email protected]'),
-    require('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
+    import('./images/dimensions/[email protected]'),
   ],
 }
 
 const RESERVOIR_SPACING_DIAGRAMS: Diagrams = {
   singleRow: [
-    require('./images/offset/[email protected]'),
-    require('./images/spacing/[email protected]'),
+    import('./images/offset/[email protected]'),
+    import('./images/spacing/[email protected]'),
   ],
   multiRow: [
-    require('./images/offset/[email protected]'),
-    require('./images/spacing/[email protected]'),
+    import('./images/offset/[email protected]'),
+    import('./images/spacing/[email protected]'),
   ],
 }
 
 const SPACING_DIAGRAMS: Diagrams = {
   circular: [
-    require('./images/offset/[email protected]'),
-    require('./images/spacing/[email protected]'),
+    import('./images/offset/[email protected]'),
+    import('./images/spacing/[email protected]'),
   ],
   rectangular: [
-    require('./images/offset/[email protected]'),
-    require('./images/spacing/[email protected]'),
+    import('./images/offset/[email protected]'),
+    import('./images/spacing/[email protected]'),
   ],
 }
 
 const TIPRACK_MEASUREMENT_DIAGRAMS: string[] = [
-  require('./images/depth/[email protected]'),
-  require('./images/shape/[email protected]'),
+  import('./images/depth/[email protected]'),
+  import('./images/shape/[email protected]'),
 ]
 
 type NestedDiagrams = Record<string, Record<string, string[]>>
 
 const PLATE_MEASUREMENT_DIAGRAMS: NestedDiagrams = {
   flat: {
     circular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
     rectangular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
   },
   u: {
     circular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
     rectangular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
   },
   v: {
     circular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
     rectangular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
   },
 }
 const MEASUREMENT_DIAGRAMS: NestedDiagrams = {
   flat: {
     circular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
     rectangular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
   },
   u: {
     circular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
     rectangular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
   },
   v: {
     circular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
     rectangular: [
-      require('./images/depth/[email protected]'),
-      require('./images/shape/[email protected]'),
+      import('./images/depth/[email protected]'),
+      import('./images/shape/[email protected]'),
     ],
   },
 }

components/src/lists/lists.module.css

@@ -1,6 +1,6 @@
 @import '..';
 
-:root {
+#root {
   --list-padding-large: 1rem;
   --list-padding-small: 0.75rem;
 

components/src/modals/modals.module.css

@@ -1,7 +1,7 @@
 /* common styling for modals */
 @import '..';
 
-:root {
+#root {
   --modal-contents: {
     z-index: 1;
     width: 100%;

components/src/nav/SidePanel.module.css

@@ -1,6 +1,6 @@
 @import '..';
 
-:root {
+#root {
   --sidebar-width: 18.25rem;
 }
 

components/src/structure/structure.module.css

@@ -1,7 +1,7 @@
 /* TitleBar styles */
 @import '..';
 
-:root {
+#root {
   --card-disabled: {
     color: var(--c-font-disabled);
     fill: var(--c-font-disabled);

components/src/styles/borders.module.css

@@ -1,6 +1,6 @@
 @import './colors.module.css';
 
-:root {
+#root {
   /* borders */
   --bd-radius-default: 2px;
   --bd-radius-form-field: 3px;

components/src/styles/colors.module.css

@@ -1,4 +1,4 @@
-:root {
+* {
   /* ot brand */
   --c-mustard: #ffd252;
   --c-blue: #006cfa;

components/src/styles/cursors.module.css

@@ -1,6 +1,6 @@
 /* cursor styling */
 
-:root {
+#root {
   --clickable: {
     cursor: pointer;
   };

components/src/styles/positioning.module.css

@@ -1,4 +1,4 @@
-:root {
+#root {
   --absolute-fill: {
     position: absolute;
     top: 0;

components/tsconfig.json

@@ -8,7 +8,12 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
+    "paths": {
+      "@opentrons/shared-data": ["../shared-data"]
+    },
+    "module": "ESNext",
+    "types": ["vite/client"]
   },
   "include": ["typings", "src"],
   "exclude": ["**/*.stories.tsx"]

labware-library/src/components/LabwareList/styles.css

@@ -4,7 +4,7 @@
 @import '../../styles/shadows.css';
 @import '../../styles/spacing.css';
 
-:root {
+#root {
   --link-btn: {
     display: block;
     width: 100%;

labware-library/src/components/website-navigation/styles.css

@@ -4,7 +4,7 @@
 @import '../../styles/shadows.css';
 @import '../../styles/spacing.css';
 
-:root {
+#root {
   --c-nav-gray: #707070;
   --spacing-subdomain: 2.5rem;
   --spacing-nav: 1.75rem;

labware-library/src/labware-creator/styles.css

@@ -2,7 +2,7 @@
 @import '../styles/breakpoints.css';
 @import '../styles/spacing.css';
 
-:root {
+#root {
   --link-btn-blue: {
     display: inline-block;
     width: auto;

labware-library/src/styles/breakpoints.css

@@ -1,6 +1,6 @@
 /* mobile-first custom media queries */
 
-:root {
+#root {
   --screen-width-small: 480px;
   --screen-width-medium: 768px;
   --screen-width-desktop: 1024px;

labware-library/src/styles/shadows.css

@@ -1,5 +1,5 @@
 /* box-shadow settings */
 
-:root {
+#root {
   --shadow-1: 0 2px 2px rgba(0, 0, 0, 0.2);
 }