@opentrons/components 0.1.6-alpha.7 → 0.1.6-alpha.8

package/lib/style.css

@@ -0,0 +1,3786 @@
+/* common styling for tooltips */
+/* opentrons style library */
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+* {
+  box-sizing: border-box;
+}
+._tooltip_box_1izoa_4 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
+  color: white;
+  color: var(--c-font-light); /* from legacy --font-body-1-light */
+  background-color: #4a4a4a;
+  background-color: var(--c-bg-dark);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
+  padding: 8px;
+  cursor: pointer;
+  z-index: 9001;
+}
+._arrow_1izoa_15 {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-bottom: -0.5em;
+  width: 1em;
+  height: 0.5em;
+}
+._arrow_1izoa_15::before {
+    border-width: 0.5em 0.5em 0 0.5em;
+    content: '';
+    margin: auto;
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: #4a4a4a transparent transparent transparent;
+    border-color: var(--c-bg-dark) transparent transparent transparent;
+  }
+._arrow_1izoa_15._bottom_1izoa_35 {
+  top: 0;
+  left: 0;
+  margin-top: -0.5em;
+  width: 1em;
+  height: 0.5em;
+}
+._arrow_1izoa_15._bottom_1izoa_35::before {
+    border-width: 0 0.5em 0.5em 0.5em;
+    border-color: transparent transparent #4a4a4a transparent;
+    border-color: transparent transparent var(--c-bg-dark) transparent;
+  }
+._arrow_1izoa_15._right_1izoa_48 {
+  top: 0;
+  left: 0;
+  margin-left: -0.5em;
+  height: 1em;
+  width: 0.5em;
+}
+._arrow_1izoa_15._right_1izoa_48::before {
+    border-width: 0.5em 0.5em 0.5em 0;
+    border-color: transparent #4a4a4a transparent transparent;
+    border-color: transparent var(--c-bg-dark) transparent transparent;
+  }
+._arrow_1izoa_15._left_1izoa_61 {
+  top: 0;
+  right: 0;
+  margin-right: -0.5em;
+  height: 1em;
+  width: 0.5em;
+}
+._arrow_1izoa_15._left_1izoa_61::before {
+    border-width: 0.5em 0 0.5em 0.5em;
+    border-color: transparent transparent transparent #4a4a4a;
+    border-color: transparent transparent transparent var(--c-bg-dark);
+  }
+/* button styling */
+/* opentrons style library */
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+* {
+  box-sizing: border-box;
+}
+:root {
+  --button-pad: 0.5rem;
+
+  --button-inverted: {
+    
+    color: var(--c-font-light);
+    border-color: var(--c-font-light);
+
+    &:active {
+      font-weight: var(--fw-regular);
+      background-color: rgb(92, 92, 92);
+    }
+
+    &:focus {
+      background-color: rgb(83, 83, 83);
+    }
+
+    &:hover {
+      background-color: rgb(83, 83, 83);
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
+
+      
+      font-weight: normal;
+
+      
+      border-color: var(--c-font-disabled);
+
+      
+      color: var(--c-font-disabled);
+
+      
+      fill: var(--c-font-disabled);
+
+      
+      cursor: default;
+
+      
+      pointer-events: none;
+
+      
+    }
+
+    &.hover {
+      background-color: rgb(83, 83, 83);
+    }
+
+    
+  }
+}
+/* TODO(ka, 2017-2-14): standardize primary button vars */
+._button_primary_17eni_60 {
+  /* VVV from legacy --button-default VVV */
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  position: relative;
+  line-height: 1.4;
+  border: none;
+  padding: 0.5rem;
+  padding: var(--button-pad);
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  text-align: center;
+  text-transform: uppercase;
+  cursor: pointer;
+  background: transparent;
+  border-radius: 2px;
+  border-radius: var(--bd-radius-default);
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 100%;
+  color: white;
+  color: var(--c-font-light);
+  background-color: #4a4a4a;
+  background-color: var(--c-bg-dark);
+
+  /* TODO(mc, 2017-12-07): pull shadows out to central file */
+  box-shadow:
+    0 0 2px rgba(0, 0, 0, 0.12),
+    0 2px 2px rgba(0, 0, 0, 0.24);
+}
+._button_primary_17eni_60:focus {
+    background-color: rgb(52, 52, 52);
+  }
+._button_primary_17eni_60:hover {
+    background-color: rgb(52, 52, 52);
+  }
+._button_primary_17eni_60._hover_17eni_50 {
+    background-color: rgb(52, 52, 52);
+  }
+._button_primary_17eni_60:active {
+    font-weight: 400;
+    font-weight: var(--fw-regular);
+    background-color: rgb(128, 128, 128);
+
+    /* TODO(mc, 2017-12-07): pull shadows out to central file */
+    box-shadow:
+      0 0 8px rgba(0, 0, 0, 0.12),
+      0 8px 8px rgba(0, 0, 0, 0.24);
+  }
+._button_primary_17eni_60._inverted_17eni_109 {
+    background-color: #fafafa;
+    background-color: var(--c-bg-light);
+    color: #4a4a4a;
+    color: var(--c-font-dark);
+  }
+._button_primary_17eni_60._inverted_17eni_109:focus,
+    ._button_primary_17eni_60._inverted_17eni_109:hover,
+    ._button_primary_17eni_60._inverted_17eni_109._hover_17eni_50 {
+      background-color: rgb(238, 238, 238);
+    }
+._button_primary_17eni_60._inverted_17eni_109:active {
+      background-color: rgb(225, 225, 225);
+    }
+._button_primary_17eni_60:disabled,
+  ._button_primary_17eni_60._disabled_17eni_26 {
+    /* from legacy --button-disabled */
+    font-weight: normal;
+
+    /* from legacy --button-disabled */
+    border-color: #9c9c9c;
+    border-color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    fill: #9c9c9c;
+    fill: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    cursor: default;
+
+    /* from legacy --button-disabled */
+    pointer-events: none;
+
+    /* from legacy --button-disabled */
+
+    background-color: rgb(201, 201, 201);
+    box-shadow: none;
+    color: #9c9c9c;
+    color: var(--c-font-disabled);
+  }
+._button_flat_17eni_149 {
+  /* VVV from legacy --button-default VVV */
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  position: relative;
+  line-height: 1.4;
+  border: none;
+  padding: 0.5rem;
+  padding: var(--button-pad);
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  text-align: center;
+  text-transform: uppercase;
+  cursor: pointer;
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+  background: transparent;
+  border-radius: 2px;
+  border-radius: var(--bd-radius-default);
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 9rem;
+}
+._button_flat_17eni_149:active {
+    font-weight: 400;
+    font-weight: var(--fw-regular);
+    background-color: rgb(225, 225, 225);
+  }
+._button_flat_17eni_149:disabled,
+  ._button_flat_17eni_149._disabled_17eni_26 {
+    background-color: transparent;
+
+    /* from legacy --button-disabled */
+    font-weight: normal;
+
+    /* from legacy --button-disabled */
+    border-color: #9c9c9c;
+    border-color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    color: #9c9c9c;
+    color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    fill: #9c9c9c;
+    fill: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    cursor: default;
+
+    /* from legacy --button-disabled */
+    pointer-events: none;
+
+    /* from legacy --button-disabled */
+  }
+._button_flat_17eni_149:focus {
+    background-color: rgba(155, 155, 155, 0.25);
+  }
+._button_flat_17eni_149:hover {
+    background-color: rgba(155, 155, 155, 0.25);
+  }
+._button_flat_17eni_149._hover_17eni_50 {
+    background-color: rgba(155, 155, 155, 0.25);
+  }
+._button_flat_17eni_149._inverted_17eni_109 {
+    /* VVV from legacy --button-inverted VVV */
+    color: white;
+    color: var(--c-font-light);
+    border-color: white;
+    border-color: var(--c-font-light);
+  }
+._button_flat_17eni_149._inverted_17eni_109:active {
+      font-weight: 400;
+      font-weight: var(--fw-regular);
+      background-color: rgb(92, 92, 92);
+    }
+._button_flat_17eni_149._inverted_17eni_109:disabled,
+    ._button_flat_17eni_149._inverted_17eni_109._disabled_17eni_26 {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: #9c9c9c;
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: #9c9c9c;
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: #9c9c9c;
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+._button_flat_17eni_149._inverted_17eni_109:focus {
+      background-color: rgb(83, 83, 83);
+    }
+._button_flat_17eni_149._inverted_17eni_109:hover {
+      background-color: rgb(83, 83, 83);
+    }
+._button_flat_17eni_149._inverted_17eni_109._hover_17eni_50 {
+      background-color: rgb(83, 83, 83);
+    }
+/* ^^^ from legacy --button-default ^^^ */
+._button_outline_17eni_263 {
+  /* VVV from legacy --button-default VVV */
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  position: relative;
+  line-height: 1.4;
+  padding: 0.5rem;
+  padding: var(--button-pad);
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  text-align: center;
+  text-transform: uppercase;
+  cursor: pointer;
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+  background: transparent;
+  border-radius: 2px;
+  border-radius: var(--bd-radius-default);
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 9rem;
+  border: 1px solid #4a4a4a;
+  border: 1px solid var(--c-font-dark);
+}
+._button_outline_17eni_263:active {
+    font-weight: 400;
+    font-weight: var(--fw-regular);
+    background-color: rgb(225, 225, 225);
+  }
+._button_outline_17eni_263:disabled,
+  ._button_outline_17eni_263._disabled_17eni_26 {
+    background-color: transparent;
+
+    /* from legacy --button-disabled */
+    font-weight: normal;
+
+    /* from legacy --button-disabled */
+    border-color: #9c9c9c;
+    border-color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    color: #9c9c9c;
+    color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    fill: #9c9c9c;
+    fill: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    cursor: default;
+
+    /* from legacy --button-disabled */
+    pointer-events: none;
+
+    /* from legacy --button-disabled */
+  }
+._button_outline_17eni_263:focus {
+    background-color: rgba(155, 155, 155, 0.25);
+  }
+._button_outline_17eni_263:hover {
+    background-color: rgba(155, 155, 155, 0.25);
+  }
+._button_outline_17eni_263._hover_17eni_50 {
+    background-color: rgba(155, 155, 155, 0.25);
+  }
+._button_outline_17eni_263._inverted_17eni_109 {
+    /* VVV from legacy --button-inverted VVV */
+    color: white;
+    color: var(--c-font-light);
+    border-color: white;
+    border-color: var(--c-font-light);
+  }
+._button_outline_17eni_263._inverted_17eni_109:active {
+      font-weight: 400;
+      font-weight: var(--fw-regular);
+      background-color: rgb(92, 92, 92);
+    }
+._button_outline_17eni_263._inverted_17eni_109:disabled,
+    ._button_outline_17eni_263._inverted_17eni_109._disabled_17eni_26 {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: #9c9c9c;
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: #9c9c9c;
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: #9c9c9c;
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+._button_outline_17eni_263._inverted_17eni_109:focus {
+      background-color: rgb(83, 83, 83);
+    }
+._button_outline_17eni_263._inverted_17eni_109:hover {
+      background-color: rgb(83, 83, 83);
+    }
+._button_outline_17eni_263._inverted_17eni_109._hover_17eni_50 {
+      background-color: rgb(83, 83, 83);
+    }
+/* ^^^ from legacy --button-default ^^^ */
+/* style for IconButton */
+._button_icon_17eni_379 {
+  width: auto;
+}
+._button_icon_17eni_379 > * {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+._button_icon_17eni_379._inverted_17eni_109 {
+    color: white;
+    fill: white;
+
+    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
+    stroke: white;
+  }
+._button_icon_17eni_379._inverted_17eni_109:disabled,
+    ._button_icon_17eni_379._inverted_17eni_109._disabled_17eni_26 {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: #9c9c9c;
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: #9c9c9c;
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: #9c9c9c;
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+/* style for the supplementary icon displayed by Button */
+._icon_17eni_423 {
+  position: absolute;
+  top: 0.5rem;
+  top: var(--button-pad);
+  left: 0.5rem;
+  left: var(--button-pad);
+  height: calc(100% - 2 * 0.5rem);
+  height: calc(100% - 2 * var(--button-pad));
+}/* common styling for modals */
+/* opentrons style library */
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+* {
+  box-sizing: border-box;
+}
+._modal_h7kfv_4 {
+  /* from legacy --absolute-fill */
+  top: 0;
+
+  /* from legacy --absolute-fill */
+  right: 0;
+
+  /* from legacy --absolute-fill */
+  bottom: 0;
+
+  /* from legacy --absolute-fill */
+  left: 0;
+
+  /* from legacy --absolute-fill */
+  display: flex;
+
+  /* from legacy --center-children */
+  justify-content: center;
+
+  /* from legacy --center-children */
+  align-items: center;
+
+  /* from legacy --center-children */
+
+  align-items: flex-start;
+  position: fixed;
+  z-index: 1;
+  padding: 4rem;
+}
+._modal_page_h7kfv_34 {
+  position: absolute;
+
+  /* from legacy --absolute-fill */
+  top: 0;
+
+  /* from legacy --absolute-fill */
+  right: 0;
+
+  /* from legacy --absolute-fill */
+  bottom: 0;
+
+  /* from legacy --absolute-fill */
+  left: 0;
+
+  /* from legacy --absolute-fill */
+
+  display: flex;
+
+  /* from legacy --flex-start */
+  justify-content: flex-start;
+
+  /* from legacy --flex-start */
+  align-items: center;
+
+  /* from legacy --flex-start */
+
+  flex-direction: column;
+  padding: 4.5rem 3rem 1rem 3rem;
+}
+._overlay_h7kfv_65 {
+  position: absolute;
+
+  /* from legacy --absolute-fill */
+  top: 0;
+
+  /* from legacy --absolute-fill */
+  right: 0;
+
+  /* from legacy --absolute-fill */
+  bottom: 0;
+
+  /* from legacy --absolute-fill */
+  left: 0;
+
+  /* from legacy --absolute-fill */
+
+  background-color: rgba(0, 0, 0, 0.9);
+}
+._title_bar_h7kfv_85 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 3;
+}
+._modal_contents_h7kfv_94 {
+  z-index: 1;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  max-width: 38rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+
+  background-color: white;
+}
+._modal_page_contents_h7kfv_117 {
+  z-index: 1;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  max-width: 38rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+
+  background-color: white;
+  max-height: 100%;
+  overflow-y: auto;
+  padding-top: 1rem;
+}
+._modal_heading_h7kfv_143 {
+  font-size: 1.125rem;
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+
+  /* from legacy --font-header-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+
+  /* from legacy --font-header-dark */
+
+  margin-top: 0;
+  margin-bottom: 1rem;
+  text-transform: capitalize;
+}
+._alert_modal_wrapper_h7kfv_159 {
+  position: relative;
+  max-height: 100%;
+  padding-top: 4rem;
+  border-radius: 0;
+}
+._alert_modal_heading_h7kfv_166._no_icon_heading_h7kfv_166 {
+  padding-left: 2rem;
+}
+._no_alert_header_h7kfv_170 {
+  padding-top: 1.5rem;
+}
+._spinner_modal_contents_h7kfv_174 {
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+
+  /* from legacy --font-body-2-light */
+  font-weight: 400;
+  font-weight: var(--fw-regular);
+
+  /* from legacy --font-body-2-light */
+  color: white;
+  color: var(--c-font-light);
+
+  /* from legacy --font-body-2-light */
+
+  max-width: 30rem;
+  padding-top: 3rem;
+  background-color: transparent;
+  flex-direction: column;
+  font-style: italic;
+  text-align: center;
+  z-index: 4;
+}
+._spinner_modal_icon_h7kfv_207 {
+  width: 7.5rem;
+  margin-bottom: 3rem;
+}
+._clickable_h7kfv_212 {
+  cursor: pointer;
+}
+._alert_modal_h7kfv_159 {
+  z-index: 10;
+}
+._alert_modal_overlay_h7kfv_220 {
+  background-color: rgba(115, 115, 115, 0.9);
+}
+._alert_modal_contents_h7kfv_224 {
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+
+  /* from legacy --font-body-2-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular);
+
+  /* from legacy --font-body-2-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+
+  /* from legacy --font-body-2-dark */
+
+  width: 100%;
+  max-height: 100%;
+  padding: 1rem;
+}
+._alert_modal_contents_h7kfv_224 > p {
+    padding-bottom: 1rem;
+  }
+._alert_modal_heading_h7kfv_166 {
+  font-size: 1.125rem;
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+
+  /* from legacy --font-header-dark */
+
+  font-weight: normal;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  background-color: #e0e0e0;
+}
+._alert_modal_icon_h7kfv_263 {
+  height: 1.125rem;
+  margin-right: 0.75rem;
+}
+._alert_modal_buttons_h7kfv_268 {
+  float: right;
+  margin-top: 1rem;
+}
+._alert_button_h7kfv_273 {
+  margin-left: 1rem;
+}/* TitleBar styles */
+/* opentrons style library */
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+* {
+  box-sizing: border-box;
+}
+._title_bar_1lfcn_4 {
+  display: flex;
+  align-items: center;
+  height: 3rem;
+  text-transform: uppercase;
+  background-color: #4a4a4a;
+  background-color: var(--c-dark-gray);
+}
+._title_bar_1lfcn_4,
+._title_bar_1lfcn_4 a {
+  color: white;
+}
+._title_1lfcn_4,
+._subtitle_1lfcn_18,
+._separator_1lfcn_19 {
+  font-size: 1.125rem;
+  font-size: var(--fs-header);
+  margin: 0;
+}
+._title_1lfcn_4,
+._separator_1lfcn_19 {
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+}
+._title_1lfcn_4 {
+  white-space: nowrap; /* from legacy --truncate */
+  overflow: hidden; /* from legacy --truncate */
+  text-overflow: ellipsis; /* from legacy --truncate */
+  min-width: 0; /* from legacy --truncate */
+  padding: 0 1.5rem;
+}
+._subtitle_1lfcn_18 {
+  padding: 0 1.5rem;
+  font-weight: normal;
+}
+._title_1lfcn_4._right_1lfcn_42 {
+  margin-left: auto;
+}
+._title_button_1lfcn_46 {
+  flex: none;
+}
+._page_tabs_1lfcn_50 {
+  width: 100%;
+  text-align: center;
+}
+._tab_link_1lfcn_55 {
+  display: inline-block;
+  width: 50%;
+  padding: 0.25rem 0;
+  font-size: 3rem;
+  font-size: var(--fs-huge);
+  opacity: 0.2;
+  background-color: #9b9b9b;
+  background-color: var(--c-med-gray);
+  color: white;
+  text-transform: uppercase;
+}
+._active_tab_link_1lfcn_66 {
+  opacity: 1;
+}
+._tab_title_1lfcn_70 {
+  font-weight: normal;
+}
+._active_tab_link_1lfcn_66 ._tab_title_1lfcn_70 {
+  font-weight: 800;
+  font-weight: var(--fw-bold);
+}
+._disabled_1lfcn_78 {
+  pointer-events: none;
+  background-color: transparent;
+}
+._disabled_1lfcn_78 * {
+    color: #9c9c9c;
+    color: var(--c-font-disabled);
+    fill: #9c9c9c;
+    fill: var(--c-font-disabled);
+    background-color: transparent;
+  }
+._labeled_value_1lfcn_89 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  line-height: 1.5;
+}
+._labeled_value_1lfcn_89 svg {
+    height: 0.875rem;
+    height: var(--fs-body-2);
+  }
+._labeled_value_label_1lfcn_100 {
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+._labeled_value_value_1lfcn_106 {
+  margin: 0;
+}
+._right_node_1lfcn_110 {
+  display: flex;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._splash_yl85l_3 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: #e5e2e2;
+  color: var(--c-light-gray);
+}
+
+._splash_yl85l_3 > * {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: 100%;
+  }
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._pill_11mvp_3 {
+  border-radius: 12px;
+  border-radius: var(--bd-radius-pill);
+  color: #fff;
+  color: var(--c-white);
+  padding: 0.5em;
+}
+
+._pill_11mvp_3:empty::before {
+  /* zero width space to give empty pill the same line height */
+  content: "\200b";
+}
+
+._invert_text_11mvp_14 {
+  color: #000;
+  color: var(--c-black);
+}
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._alert_15d5j_3 {
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+  font-weight: 400;
+  font-weight: var(--fw-regular);
+}
+
+._alert_15d5j_3:not(:first-of-type) {
+  border-top: none;
+}
+
+._title_bar_15d5j_12 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+}
+
+._title_15d5j_12 {
+  width: 100%;
+}
+
+._success_15d5j_25 {
+  border: 1px solid #60b120;
+  border: 1px solid var(--c-success);
+}
+
+._success_15d5j_25 > ._title_bar_15d5j_12 {
+    background-color: #b6febc;
+    background-color: var(--c-bg-success);
+    color: #60b120;
+    color: var(--c-success);
+  }
+
+._success_15d5j_25 > ._title_bar_15d5j_12 svg {
+      color: #60b120;
+      color: var(--c-success);
+    }
+
+._info_15d5j_38 {
+  border: 1px solid #5fd8ee;
+  border: 1px solid var(--c-highlight);
+}
+
+._info_15d5j_38 > ._title_bar_15d5j_12 {
+    background-color: #f0f3ff;
+    background-color: var(--c-bg-selected);
+    color: #00c3e6;
+    color: var(--c-selected-dark);
+  }
+
+._info_15d5j_38 > ._title_bar_15d5j_12 svg {
+      color: #5fd8ee;
+      color: var(--c-highlight);
+    }
+
+._warning_15d5j_51 {
+  border: 1px solid #e28200;
+  border: 1px solid var(--c-warning);
+}
+
+._warning_15d5j_51 > ._title_bar_15d5j_12 {
+    background-color: #ffd58f;
+    background-color: var(--c-warning-light);
+    color: #9e5e00;
+    color: var(--c-warning-dark);
+  }
+
+._warning_15d5j_51 > ._title_bar_15d5j_12 svg {
+      fill: #e28200;
+      fill: var(--c-warning);
+    }
+
+._error_15d5j_64 {
+  border: 1px solid #d12929;
+  border: 1px solid var(--c-error);
+}
+
+._error_15d5j_64 > ._title_bar_15d5j_12 {
+    background-color: #ffc0c0;
+    background-color: var(--c-error-light);
+    color: #ac0505;
+    color: var(--c-error-dark);
+  }
+
+._error_15d5j_64 > ._title_bar_15d5j_12 svg {
+      fill: #d12929;
+      fill: var(--c-error);
+    }
+
+._message_15d5j_77 {
+  padding: 1rem 3rem;
+  background-color: white;
+}
+
+._message_15d5j_77 a {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    color: inherit;
+  }
+
+._message_15d5j_77:empty {
+    padding: 0;
+  }
+
+._icon_15d5j_91 {
+  width: 1.5rem;
+  margin-right: 0.5rem;
+}
+
+._close_15d5j_96 {
+  width: 2rem;
+  padding: 0.125rem;
+}
+
+._close_15d5j_96:hover {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --mw-labeled-toggle: 25rem;
+}
+
+/* Toggle Button */
+
+._toggled_on_yhddc_8 {
+  fill: #0ec9eb;
+  color: #0ec9eb;
+}
+
+._toggled_off_yhddc_13 {
+  fill: #4a4a4a;
+  fill: var(--c-dark-gray);
+}
+
+._labeled_control_wrapper_yhddc_17 {
+  width: 100%;
+  padding: 1rem;
+  display: block;
+}
+
+._labeled_control_wrapper_yhddc_17:not(:last-child) {
+    border-bottom: 1px solid #e5e2e2;
+    border-bottom: 1px solid var(--c-light-gray);
+  }
+
+._labeled_control_yhddc_17 {
+  display: block;
+}
+
+._stacked_labeled_control_yhddc_31 {
+  display: block;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+
+._stacked_labeled_control_label_yhddc_37 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  display: inline-block;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+}
+
+._labeled_control_label_yhddc_44 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  max-width: 25rem;
+  max-width: var(--mw-labeled-toggle);
+  display: inline-block;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+}
+
+._labeled_toggle_button_yhddc_52 {
+  float: right;
+  width: 2rem;
+  margin-right: 1rem;
+  padding: 0;
+}
+
+._labeled_toggle_button_yhddc_52:hover {
+    background-color: transparent;
+  }
+
+._labeled_button_yhddc_63,
+._labeled_select_yhddc_64 {
+  float: right;
+  width: 9rem;
+  margin-top: 0.5rem;
+}
+
+._labeled_select_yhddc_64 {
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+}
+
+._labeled_checkbox_yhddc_76 {
+  float: right;
+}
+
+._stacked_control_info_yhddc_80 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+}
+
+._stacked_control_info_yhddc_80 > p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    line-height: 1.5;
+  }
+
+._control_info_yhddc_92 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  max-width: 25rem;
+  max-width: var(--mw-labeled-toggle);
+}
+
+._control_info_yhddc_92 > p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    line-height: 1.5;
+  }
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._accessibly_hidden_18cab_3 {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+._form_field_18cab_14 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-form-default */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-form-default */
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+._label_text_18cab_23 {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+}
+
+._label_text_18cab_23:empty {
+    padding: 0;
+  }
+
+._form_group_label_18cab_32 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-form-default */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-form-default */
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  margin-bottom: 0.15rem;
+  text-transform: capitalize;
+}
+
+._form_group_label_18cab_32::after {
+    content: ':';
+  }
+
+._form_group_label_pipette_settings_slideout_18cab_44 {
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  margin-bottom: 0.5rem;
+  text-transform: capitalize;
+  font-size: 13px;
+  color: #16212d;
+}
+
+._checkbox_icon_18cab_52 {
+  /* Icon for radiobutton and for checkbox */
+  width: 1.25rem;
+  min-width: 1.25rem;
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+._checkbox_icon_18cab_52:not(._checkbox_disabled_18cab_61):hover {
+    cursor: pointer;
+  }
+
+._checkbox_icon_18cab_52._error_18cab_65 {
+    color: #9e5e00;
+    color: var(--c-warning-dark);
+  }
+
+._checkbox_icon_18cab_52._checked_18cab_70 {
+  color: #006cfa;
+  color: var(--c-blue);
+}
+
+._toggle_icon_18cab_74 {
+  /* Icon for radiobutton and for checkbox */
+  display: block;
+  width: 2rem;
+  min-width: 2rem;
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+}
+
+._toggle_icon_18cab_74:not(._toggle_disabled_18cab_81):hover {
+    cursor: pointer;
+  }
+
+._dropdown_disabled_18cab_86,
+._checkbox_disabled_18cab_61,
+._toggle_disabled_18cab_81 {
+  opacity: 0.5;
+}
+
+._input_field_container_18cab_92 {
+  width: 100%;
+}
+
+._input_field_18cab_92 {
+  display: flex;
+  flex: 1 1;
+  background-color: #e5e2e2;
+  background-color: var(--c-light-gray);
+  border-radius: 3px;
+  border-radius: var(--bd-radius-form-field);
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+}
+
+._input_field_18cab_92 input {
+    font-size: 0.75rem;
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: 400;
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
+    color: #4a4a4a;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    background-color: inherit;
+    border-radius: inherit;
+    border: none;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 1rem;
+
+    /* TODO: Ian 2018-09-14 Firefox has 1px padding on input element,
+    * but I can't figure out how to fix it in Firefox without breaking it in Chrome.
+    * Better CSS reset for inputs needed?
+    */
+
+    /* padding: 1px; */
+  }
+
+._input_field_18cab_92 input:focus {
+    outline: none;
+  }
+
+._input_field_18cab_92 input::placeholder {
+    color: #9b9b9b;
+    color: var(--c-med-gray);
+  }
+
+._input_field_18cab_92:focus-within {
+    background-color: #fff;
+    background-color: var(--c-white);
+    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
+  }
+
+._input_field_18cab_92 ._suffix_18cab_135 {
+    font-size: 0.75rem;
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    color: #4a4a4a;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    font-weight: 600;
+    font-weight: var(--fw-semibold);
+    display: inline-block;
+    flex: 1 0;
+    text-align: right;
+    align-self: center;
+  }
+
+._input_caption_18cab_146 {
+  font-size: 0.625rem;
+  font-size: var(--fs-caption); /* from legacy --font-form-caption */
+  font-weight: 600;
+  font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
+  color: #9b9b9b;
+  color: var(--c-med-gray); /* from legacy --font-form-caption */
+  line-height: 1.2;
+}
+
+._input_caption_18cab_146 ._right_18cab_152 {
+    float: right;
+  }
+
+._inline_18cab_157 {
+  display: flex;
+}
+
+._inline_18cab_157 ._label_text_18cab_23 {
+    padding-right: 1.5rem;
+  }
+
+._inline_item_18cab_165 {
+  flex: 1;
+}
+
+._error_18cab_65 div,
+._error_18cab_65 span {
+  color: #9e5e00;
+  color: var(--c-warning-dark);
+}
+
+._error_18cab_65 select,
+._error_18cab_65 ._input_field_18cab_92 {
+  background-color: #ffd58f;
+  background-color: var(--c-warning-light);
+}
+
+._dropdown_18cab_86 {
+  background-color: #e5e2e2;
+  background-color: var(--c-light-gray);
+}
+
+._dropdown_field_18cab_183 {
+  position: relative;
+}
+
+._dropdown_field_18cab_183 select {
+    font-size: 0.75rem;
+    font-size: var(--fs-body-1); /* from legacy --font-form-default */
+    font-weight: 400;
+    font-weight: var(--fw-regular); /* from legacy --font-form-default */
+    color: #4a4a4a;
+    color: var(--c-font-dark); /* from legacy --font-form-default */
+    border: 0;
+    padding: 0.25rem 0.5rem;
+    outline: none;
+    height: 1.5rem;
+    border-radius: 3px;
+    border-radius: var(--bd-radius-form-field);
+    font-family: inherit;
+    width: 100%;
+    -webkit-appearance: none;
+            appearance: none;
+    overflow: hidden;
+  }
+
+._dropdown_field_18cab_183 select:focus {
+      background-color: #fff;
+      background-color: var(--c-white);
+      box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
+    }
+
+._dropdown_field_18cab_183 ._dropdown_icon_18cab_206 {
+    position: absolute;
+    top: 0.2rem;
+    right: 0.25rem;
+    width: 1.25rem;
+    pointer-events: none;
+  }
+
+._dropdown_field_18cab_183 ._dropdown_icon_18cab_206 svg {
+      color: #4a4a4a;
+      color: var(--c-dark-gray);
+    }
+
+._error_icon_18cab_219 {
+  display: inline-block;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  padding-right: 0.5rem;
+}
+
+._disabled_18cab_226 {
+  /* Disable mouse interaction. NOTE: User can still tab to focus a field */
+  pointer-events: none;
+}
+
+._disabled_18cab_226 ._form_group_label_18cab_32 {
+    color: #e5e2e2;
+    color: var(--c-light-gray);
+  }
+
+/* stylelint-disable no-descending-specificity */
+
+._disabled_18cab_226 input,
+  ._disabled_18cab_226 ._suffix_18cab_135 {
+    color: #9b9b9b;
+    color: var(--c-med-gray);
+  }
+/* stylelint-disable selector-class-pattern */
+/* opentrons style library */
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+* {
+  box-sizing: border-box;
+}
+/* NOTE(mc, 2021-04-27): this class only used by storybook */
+._example_select_override_154j2_5 .ot_select__control {
+    background-color: blue;
+  }
+._select_154j2_11 {
+  position: relative;
+}
+._select_154j2_11 .ot_select__control {
+    font-size: 0.75rem;
+    font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+    font-weight: 400;
+    font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+    color: #4a4a4a;
+    color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+    display: flex;
+    position: relative;
+    background-color: #e5e2e2;
+    background-color: var(--c-light-gray);
+    border: none;
+    padding: 0.25rem 0;
+    outline: none;
+    border-radius: 3px;
+    border-radius: var(--bd-radius-form-field);
+    height: 1.75rem;
+    box-shadow: none;
+  }
+._select_154j2_11 .ot_select__control--menu-is-open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+._select_154j2_11 .ot_select__control--menu-is-open,
+  ._select_154j2_11 .ot_select__control--is-focused {
+    background-color: #fff;
+    background-color: var(--c-white);
+    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
+  }
+._select_154j2_11 .ot_select__option {
+    display: flex;
+    padding: 0.25rem 0.75rem;
+    cursor: default;
+  }
+._select_154j2_11 .ot_select__option--is-focused {
+    background-color: #e5e2e2;
+    background-color: var(--c-light-gray);
+  }
+._select_154j2_11 .ot_select__option--is-disabled {
+    color: #9c9c9c;
+    color: var(--c-font-disabled);
+  }
+._select_154j2_11 .ot_select__group-heading {
+    font-size: 0.625rem;
+    font-size: var(--fs-caption); /* from legacy --font-form-caption */
+    font-weight: 600;
+    font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
+    color: #9b9b9b;
+    color: var(--c-med-gray); /* from legacy --font-form-caption */
+    text-transform: uppercase;
+    margin-left: 0.5rem;
+  }
+._select_154j2_11 .ot_select__single-value {
+    display: flex;
+  }
+._select_154j2_11 .ot_select__group:not(:first-child) {
+    margin-top: 0.25rem;
+    border-top: 1px solid rgba(155, 155, 155, 0.4);
+    padding-top: 0.25rem;
+  }
+._dropdown_indicator_154j2_73 {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 1.25rem;
+  pointer-events: none;
+}
+._dropdown_indicator_154j2_73 > svg {
+    color: #4a4a4a;
+    color: var(--c-dark-gray);
+  }
+._dropdown_indicator_154j2_73._flipped_154j2_84 > svg {
+    transform: rotate(180deg);
+  }
+._dropdown_indicator_icon_154j2_89 {
+  width: 100%;
+}
+._menu_154j2_93 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  background-color: #fff;
+  background-color: var(--c-white);
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
+  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: var(--bd-radius-form-field);
+  border-bottom-right-radius: 3px;
+  border-bottom-right-radius: var(--bd-radius-form-field);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+._menu_control_bridge_154j2_110 {
+  position: absolute;
+  background-color: #fff;
+  background-color: var(--c-white);
+  top: calc(100% - 2px);
+  left: 0;
+  right: 0;
+  z-index: 99;
+  height: 4px;
+}
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._select_field_10v6n_3._error_10v6n_3 .ot_select__control {
+    background-color: #ffd58f;
+    background-color: var(--c-warning-light);
+  }
+
+._select_caption_10v6n_9 {
+  font-size: 0.625rem;
+  font-size: var(--fs-caption);
+}
+
+._select_caption_10v6n_9._error_10v6n_3 {
+    color: #9e5e00;
+    color: var(--c-warning-dark);
+    font-weight: 600;
+    font-weight: var(--fw-semibold);
+  }
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._name_overlay_lyt13_3 {
+  width: 100%;
+  font-size: 0.5rem;
+  color: white;
+  color: var(--c-font-light);
+  background-color: rgba(0, 0, 0, 0.75);
+  padding: 0.25rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+._display_name_lyt13_12 {
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  color: white;
+  color: var(--c-font-light);
+  word-wrap: break-word;
+}
+
+._deck_slot_lyt13_18:active {
+  cursor: grabbing;
+}/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._module_18o7c_3 {
+  color: #000;
+  color: var(--c-black);
+  background-color: #000;
+  background-color: var(--c-black);
+  opacity: 0.9;
+  border-radius: 6px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+._module_review_icon_18o7c_13 {
+  color: #fff;
+  color: var(--c-white);
+  margin: 0 0.25rem 0 0;
+  height: 12px;
+  width: 12px;
+}
+
+._module_review_icon_missing_18o7c_20 {
+  color: #f00000;
+  color: var(--c-red);
+}
+
+._module_review_icon_present_18o7c_24 {
+  color: #7ed321;
+  color: var(--c-green);
+}
+
+._module_review_text_18o7c_28 {
+  fill: currentColor;
+  font-size: 0.55rem;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  color: #fff;
+  color: var(--c-white);
+  text-transform: capitalize;
+  white-space: pre;
+  margin-bottom: 0.75rem;
+}
+
+._module_name_overlay_18o7c_38 {
+  color: #000;
+  color: var(--c-black);
+  opacity: 0.7;
+}
+
+._module_connect_info_wrapper_18o7c_43 {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.5rem;
+  color: #fff;
+  color: var(--c-white);
+}
+
+._module_port_text_18o7c_50 {
+  fill: currentColor;
+  color: #fff;
+  color: var(--c-white);
+  font-size: 0.65rem;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}
+
+._module_port_text_na_18o7c_58 {
+  fill: currentColor;
+  color: #9b9b9b;
+  color: var(--c-med-gray);
+  font-size: 0.65rem;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}
+
+._module_wrapper_18o7c_66 {
+  display: flex;
+  width: 100%;
+  padding: 1.15rem;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+._flipped_module_wrapper_18o7c_75 {
+  display: flex;
+  width: 100%;
+  padding: 1.15rem;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+._module_name_text_18o7c_84 {
+  fill: currentColor;
+  color: #fff;
+  color: var(--c-white);
+  font-size: 0.5rem;
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}
+
+._flipped_18o7c_75 {
+  transform: rotate(180deg);
+}
+
+._right_icon_18o7c_96 {
+  margin: 0 0 0 1rem;
+}/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._pipette_group_df8d3_3 {
+  margin: 0 auto;
+  max-width: 46rem;
+  padding-bottom: 2rem;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-areas: 'left right';
+}
+
+._right_df8d3_12 {
+  grid-area: right;
+  grid-template-columns: 40% 80%;
+  grid-template-areas: 'img info';
+}
+
+._pipette_info_df8d3_18 {
+  grid-area: info;
+  min-height: 8rem;
+}
+
+._flipped_image_df8d3_23 {
+  transform: scaleX(-1);
+  filter: FlipH;
+}
+
+._pipette_icon_df8d3_28 {
+  grid-area: img;
+  text-align: center;
+}
+
+._title_df8d3_33 {
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+  text-transform: capitalize;
+  margin: 2rem 0 0.25rem;
+}
+
+._value_df8d3_41 {
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+}
+._pipette_volume_class_1eicr_1 {
+  cursor: default;
+  min-width: 3.5rem;
+}
+
+._pipette_channels_1eicr_6 {
+  cursor: default;
+  min-width: 7rem;
+}
+
+._pipette_category_1eicr_11 {
+  cursor: default;
+  min-width: 2.5rem;
+}
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --list-padding-large: 1rem;
+  --list-padding-small: 0.75rem;
+}
+
+._clickable_1842h_8 {
+  cursor: pointer;
+}
+
+._disabled_1842h_12 {
+  background-color: transparent;
+}
+
+._disabled_1842h_12 * {
+    color: #9c9c9c;
+    color: var(--c-font-disabled);
+    outline-color: #eee;
+    fill: #9c9c9c;
+    fill: var(--c-font-disabled);
+    background-color: transparent;
+  }
+
+._panel_group_1842h_23,
+._titled_list_1842h_24,
+._list_item_1842h_25 {
+  background-color: white;
+}
+
+._panel_group_1842h_23 {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
+}
+
+._hover_border_1842h_33 {
+  outline: 1px solid #5fd8ee;
+  outline: var(--bd-width-default) solid var(--c-highlight);
+}
+
+._header_text_1842h_37 {
+  text-transform: uppercase;
+  font-size: 0.625rem;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  font-weight: var(--fw-semibold);
+  color: #9c9c9c;
+  color: var(--c-font-disabled);
+}
+
+/*
+  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
+  the meaning of .title_bar is vague, it is widely used by several unrelated components.
+  Also, it's almost the same as .titled_list_title_bar -- they are the same
+  except for flex-related rules.
+*/
+
+._title_bar_1842h_46 {
+  position: relative;
+  display: flex;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 1rem 0.75rem;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  flex-direction: column;
+}
+
+/* Specifically for TitledList */
+
+._titled_list_title_bar_1842h_47 {
+  position: relative;
+  display: flex;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 1rem 0.75rem;
+  padding: var(--list-padding-large) var(--list-padding-small);
+  flex-direction: row;
+  align-items: center;
+}
+
+._titled_list_selected_1842h_68 ._title_bar_1842h_46 {
+    background-color: #f0f3ff;
+    background-color: var(--c-bg-selected);
+  }
+
+._titled_list_selected_1842h_68 ._title_bar_1842h_46 * {
+      color: #00c3e6;
+      color: var(--c-selected-dark);
+      font-weight: 600;
+      font-weight: var(--fw-semibold);
+    }
+
+._title_1842h_24 {
+  font-size: 0.875rem;
+  font-size: var(--fs-body-2);
+  font-weight: 400;
+  font-weight: var(--fw-regular);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+._title_enabled_1842h_86 {
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+}
+
+._title_disabled_1842h_90 {
+  color: #9c9c9c;
+  color: var(--c-font-disabled);
+}
+
+._title_bar_icon_1842h_94 {
+  color: #4a4a4a;
+  color: var(--c-font-dark);
+  height: 1.5rem;
+}
+
+._title_bar_error_1842h_99 {
+  background-color: #ffc0c0;
+  background-color: var(--c-error-light);
+}
+
+._icon_left_of_title_1842h_103 {
+  margin-right: 0.5rem;
+  height: 1.2rem;
+}
+
+._icon_left_of_title_container_1842h_108 {
+  display: flex;
+  justify-content: flex-start;
+}
+
+._title_bar_carat_1842h_113 {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding: calc(0.75rem - 1px);
+  padding: calc(var(--list-padding-small) - var(--bd-width-default));
+  padding-top: 1rem;
+}
+
+._title_bar_carat_1842h_113:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+._list_1842h_25 {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+._list_item_1842h_25 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  line-height: 1.25;
+  margin: 0;
+  padding: 0.75rem;
+  padding: var(--list-padding-small);
+}
+
+._list_item_1842h_25:hover {
+    background-color: #f1f1f1;
+    background-color: var(--c-bg-hover);
+  }
+
+._list_item_1842h_25._active_1842h_148 {
+    background-color: #f0f3ff;
+    background-color: var(--c-bg-selected);
+  }
+
+a._list_item_1842h_25 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+._list_alert_1842h_157 {
+  font-size: 0.75rem;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: 400;
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  width: 100%;
+  padding: 0.75rem;
+  padding: var(--list-padding-small);
+  background-color: #fafafa;
+  background-color: var(--c-bg-light);
+  font-style: italic;
+}
+
+._item_icon_1842h_167 {
+  flex: none;
+  height: calc(1.25 * 0.75rem);
+  height: calc(1.25 * var(--fs-body-1));
+  margin-right: 0.5rem;
+}
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --sidebar-width: 18.25rem;
+}
+
+._panel_6dvfp_7 {
+  flex-shrink: 0;
+  overflow: visible;
+  border-right: 1px solid #e5e2e2;
+  border-right: var(--bd-light);
+  background-color: #fafafa;
+  background-color: var(--c-bg-light);
+  position: relative;
+  padding: 0 4px;
+}
+
+._title_bar_6dvfp_16 {
+  display: flex;
+  align-items: center;
+  width: 18.25rem;
+  width: var(--sidebar-width);
+}
+
+._title_6dvfp_16 {
+  font-size: 1.125rem;
+  font-size: var(--fs-header); /* from legacy --font-header-dark */
+  font-weight: 600;
+  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
+  color: #4a4a4a;
+  color: var(--c-font-dark); /* from legacy --font-header-dark */
+  margin: 1rem auto;
+}
+
+._panel_contents_6dvfp_29 {
+  width: 18.25rem;
+  width: var(--sidebar-width);
+  height: calc(100vh - 3.5rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+/* opentrons style library */
+
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: hsl(214.08, 100%, 85%);
+
+  /*
+   * grays
+   * TODO(mc, 2019-03-22): align with style guide
+   */
+  --c-near-black: #a4a4a4; /* style guide: n/a */
+  --c-dark-gray: #4a4a4a; /* style guide: near-black */
+  --c-charcoal: #979797;
+  --c-med-gray: #9b9b9b; /* style guide: n/a */
+  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
+  --c-lightest-gray: #ededed; /* style guide: n/a */
+
+  /*
+   * background colors
+   * TODO(mc, 2019-03-22): combine with colors
+   */
+  --c-bg-dark: #4a4a4a;
+  --c-bg-light: #fafafa;
+  --c-bg-selected: #f0f3ff;
+  --c-bg-hover: #f1f1f1;
+  --c-bg-success: #b6febc;
+
+  /* general UI */
+  --c-highlight: #5fd8ee;
+  --c-selected-dark: #00c3e6;
+  --c-warning-dark: #9e5e00;
+  --c-warning: #e28200;
+  --c-warning-light: #ffd58f;
+  --c-error-dark: #ac0505;
+  --c-error: #d12929;
+  --c-error-light: #ffc0c0;
+  --c-success: #60b120;
+  --c-blue-enabled: #006cfa;
+  --c-light-grey-hover: #c6c6c6;
+
+  /* Misc */
+  --c-selection-overlay: rgba(95, 216, 238, 0.3);
+  --c-plate-bg: #ccc;
+  --c-white: #fff;
+  --c-black: #000;
+  --c-green: #7ed321;
+  --c-red: #f00000;
+  --c-orange: #f5a623;
+
+  --transition-color: {
+    transition: color 0.15s ease-in-out;
+  }
+
+  --transition-background-color: {
+    transition: background-color 0.15s ease-in-out;
+  }
+}
+
+:root {
+  --c-font-dark: #4a4a4a;
+  --c-font-icon: #6f6f6f;
+  --c-font-light: white;
+  --c-font-disabled: #9c9c9c;
+  --fs-huge: 3rem;
+  --fs-header: 1.125rem;
+  --fs-default: 1rem;
+  --fs-body-2: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.2rem;
+  --fw-bold: 800;
+  --fw-semibold: 600;
+  --fw-regular: 400;
+  --fw-light: 300;
+  --ff-code: Consolas, monaco, monospace;
+  --lh-solid: 1;
+  --lh-title: 1.25;
+  --lh-copy: 1.5;
+}
+
+:root {
+  /* borders */
+  --bd-radius-default: 2px;
+  --bd-radius-form-field: 3px;
+  --bd-radius-pill: 12px;
+  --bd-width-default: 1px;
+  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgba(0, 0, 0, 0.13),
+    0 3px 6px 0 rgba(0, 0, 0, 0.23);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+._slot_rect_v9we7_3 {
+  stroke: #9b9b9b;
+  stroke: var(--c-med-gray);
+  fill: none;
+}
+
+._slot_occupied_v9we7_8 {
+  fill: #e5e2e2;
+  fill: var(--c-light-gray);
+}
+
+._slot_occupied_v9we7_8._slot_error_v9we7_12 {
+  fill: #ffd58f;
+  fill: var(--c-warning-light);
+}
+
+._collision_icon_v9we7_16 {
+  color: #9b9b9b;
+  color: var(--c-med-gray);
+}