@opentrons/components 0.3.7-alpha.0 → 0.3.9-alpha.0

package/lib/src/forms/Select.module.css

@@ -1,118 +0,0 @@
-/* stylelint-disable selector-class-pattern */
-@import '../index.module.css';
-
-/* NOTE(mc, 2021-04-27): this class only used by storybook */
-.example_select_override {
-  & :global(.ot_select__control) {
-    background-color: blue;
-  }
-}
-
-.select {
-  position: relative;
-
-  & :global(.ot_select__control) {
-    position: relative;
-    display: flex;
-    height: 1.75rem;
-    padding: 0.25rem 0;
-    border: none;
-    border-radius: var(--bd-radius-form-field);
-    background-color: var(--c-light-gray);
-    box-shadow: none;
-    color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-    font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-    font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-    outline: none;
-  }
-
-  & :global(.ot_select__control--menu-is-open) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  & :global(.ot_select__control--menu-is-open),
-  & :global(.ot_select__control--is-focused) {
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  }
-
-  & :global(.ot_select__option) {
-    display: flex;
-    padding: 0.25rem 0.75rem;
-    cursor: default;
-  }
-
-  & :global(.ot_select__option--is-focused) {
-    background-color: var(--c-light-gray);
-  }
-
-  & :global(.ot_select__option--is-disabled) {
-    color: var(--c-font-disabled);
-  }
-
-  & :global(.ot_select__group-heading) {
-    margin-left: 0.5rem;
-    color: var(--c-med-gray); /* from legacy --font-form-caption */
-    font-size: var(--fs-caption); /* from legacy --font-form-caption */
-    font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-    text-transform: uppercase;
-  }
-
-  & :global(.ot_select__single-value) {
-    display: flex;
-  }
-
-  & :global(.ot_select__group):not(:first-child) {
-    padding-top: 0.25rem;
-    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
-    margin-top: 0.25rem;
-  }
-}
-
-.dropdown_indicator {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  width: 1.25rem;
-  pointer-events: none;
-
-  & > svg {
-    color: var(--c-dark-gray);
-  }
-
-  &.flipped > svg {
-    transform: rotate(180deg);
-  }
-}
-
-.dropdown_indicator_icon {
-  width: 100%;
-}
-
-.menu {
-  position: absolute;
-  z-index: 99;
-  top: 100%;
-  right: 0;
-  left: 0;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  background-color: var(--c-white);
-  border-bottom-left-radius: var(--bd-radius-form-field);
-  border-bottom-right-radius: var(--bd-radius-form-field);
-  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-}
-
-.menu_control_bridge {
-  position: absolute;
-  z-index: 99;
-  top: calc(100% - 2px);
-  right: 0;
-  left: 0;
-  height: 4px;
-  background-color: var(--c-white);
-}

package/lib/src/forms/SelectField.module.css

@@ -1,16 +0,0 @@
-@import '../index.module.css';
-
-.select_field.error {
-  & :global(.ot_select__control) {
-    background-color: var(--c-warning-light);
-  }
-}
-
-.select_caption {
-  font-size: var(--fs-caption);
-
-  &.error {
-    color: var(--c-warning-dark);
-    font-weight: var(--fw-semibold);
-  }
-}

package/lib/src/forms/forms.module.css

@@ -1,240 +0,0 @@
-@import '../index.module.css';
-
-.accessibly_hidden {
-  position: absolute;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  margin: -1px;
-  clip: rect(0 0 0 0);
-}
-
-.form_field {
-  display: flex;
-  align-items: center;
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  font-weight: var(--fw-regular); /* from legacy --font-form-default */
-  line-height: 1;
-}
-
-.label_text {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-
-  &:empty {
-    padding: 0;
-  }
-}
-
-.form_group_label {
-  margin-bottom: 0.15rem;
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  font-weight: var(--fw-semibold);
-  text-transform: capitalize;
-
-  &::after {
-    content: ':';
-  }
-}
-
-.form_group_label_pipette_settings_slideout {
-  margin-bottom: 0.5rem;
-  color: #16212d;
-  font-size: 13px;
-  font-weight: var(--fw-semibold);
-  text-transform: capitalize;
-}
-
-.checkbox_icon {
-  display: flex;
-
-  /* Icon for radiobutton and for checkbox */
-  width: 1.25rem;
-  min-width: 1.25rem;
-  align-items: center;
-  justify-content: center;
-  color: var(--c-font-dark);
-
-  &:not(.checkbox_disabled):hover {
-    cursor: pointer;
-  }
-
-  &.error {
-    color: var(--c-warning-dark);
-  }
-}
-
-.checkbox_icon.checked {
-  color: var(--c-blue);
-}
-
-.toggle_icon {
-  /* Icon for radiobutton and for checkbox */
-  display: block;
-  width: 2rem;
-  min-width: 2rem;
-  color: var(--c-font-dark);
-
-  &:not(.toggle_disabled):hover {
-    cursor: pointer;
-  }
-}
-
-.dropdown_disabled,
-.checkbox_disabled,
-.toggle_disabled {
-  opacity: 0.5;
-}
-
-.input_field_container {
-  width: 100%;
-}
-
-.input_field {
-  display: flex;
-  flex: 1 1;
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-  border-radius: var(--bd-radius-form-field);
-  background-color: var(--c-light-gray);
-
-  & input {
-    width: 100%;
-    height: 1rem;
-    flex: 1 1 auto;
-    border: none;
-    border-radius: inherit;
-    background-color: inherit;
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-
-    /* 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:focus {
-    outline: none;
-  }
-
-  & input::placeholder {
-    color: var(--c-med-gray);
-  }
-
-  &:focus-within {
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-  }
-
-  & .suffix {
-    display: inline-block;
-    flex: 1 0;
-    align-self: center;
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-semibold);
-    text-align: right;
-  }
-}
-
-.input_caption {
-  color: var(--c-med-gray); /* from legacy --font-form-caption */
-  font-size: var(--fs-caption); /* from legacy --font-form-caption */
-  font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-  line-height: 1.2;
-
-  & .right {
-    float: right;
-  }
-}
-
-.inline {
-  display: flex;
-
-  & .label_text {
-    padding-right: 1.5rem;
-  }
-}
-
-.inline_item {
-  flex: 1;
-}
-
-.error div,
-.error span {
-  color: var(--c-warning-dark);
-}
-
-.error select,
-.error .input_field {
-  background-color: var(--c-warning-light);
-}
-
-.dropdown {
-  background-color: var(--c-light-gray);
-}
-
-.dropdown_field {
-  position: relative;
-
-  & select {
-    overflow: hidden;
-    width: 100%;
-    height: 1.5rem;
-    padding: 0.25rem 0.5rem;
-    border: 0;
-    border-radius: var(--bd-radius-form-field);
-    appearance: none;
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    font-family: inherit;
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    outline: none;
-
-    &:focus {
-      background-color: var(--c-white);
-      box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
-    }
-  }
-
-  & .dropdown_icon {
-    position: absolute;
-    top: 0.2rem;
-    right: 0.25rem;
-    width: 1.25rem;
-    pointer-events: none;
-
-    & svg {
-      color: var(--c-dark-gray);
-    }
-  }
-}
-
-.error_icon {
-  display: inline-block;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  padding-right: 0.5rem;
-}
-
-.disabled {
-  /* Disable mouse interaction. NOTE: User can still tab to focus a field */
-  pointer-events: none;
-
-  & .form_group_label {
-    color: var(--c-light-gray);
-  }
-
-  /* stylelint-disable no-descending-specificity */
-  & input,
-  & .suffix {
-    color: var(--c-med-gray);
-  }
-}

package/lib/src/hardware-sim/BaseDeck/basedeck.module.css

@@ -1,20 +0,0 @@
-.waste_chute_copy_container {
-  display: flex;
-  text-align: center;
-}
-
-.waste_chute_fixture_container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  gap: var(--spacing-4);
-  padding-inline: var(--spacing-8);
-}
-
-.waste_chute_fixture_container_highlight {
-  border: 3px solid var(--blue-50);
-}

package/lib/src/hardware-sim/Deck/deck.module.css

@@ -1,54 +0,0 @@
-.deck_labels_column {
-  display: flex;
-  width: 2.5rem;
-  height: 100%;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-}
-
-.deck_label_column_container {
-  display: flex;
-  flex: 1;
-  align-items: center;
-}
-
-.deck_labels_row {
-  display: flex;
-  width: var(--dynamic-width, 5rem); /* fallback if variable not set */
-  height: 2.5rem;
-  flex: 1;
-  align-items: center;
-}
-
-.deck_label_row_container {
-  display: flex;
-  width: var(--dynamic-width);
-  align-items: center;
-  justify-content: center;
-}
-
-.robot_coords_foreign_object_container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  transform: scale(1, -1);
-}
-
-.trash_container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-4);
-  gap: var(--spacing-8);
-}
-
-.trash_container_highlight {
-  border: 3px solid var(--blue-50);
-}
-
-.trash_container_rotate_copy {
-  transform-origin: center;
-}

package/lib/src/hardware-sim/Labware/labware.module.css

@@ -1,8 +0,0 @@
-.adapter_render {
-  transition: transform 0.3s ease;
-}
-
-.rotated {
-  transform: rotate(180deg); /* fallback in case CSS vars not set */
-  transform-origin: var(--cx) var(--cy);
-}

package/lib/src/hardware-sim/RobotCoordinateSpace/robotcoordinatespace.module.css

@@ -1,3 +0,0 @@
-.svg {
-  transform: scale(1, -1);
-}

package/lib/src/icons/icon.module.css

@@ -1,10 +0,0 @@
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.spin {
-  animation: spin 0.8s steps(8) infinite;
-  transform-origin: center;
-}

package/lib/src/index.module.css

@@ -1,9 +0,0 @@
-/* opentrons style library */
-
-@import './styles/colors.module.css';
-@import './styles/typography.module.css';
-@import './styles/borders.module.css';
-
-:global(*) {
-  box-sizing: border-box;
-}

package/lib/src/instrument/PipetteSelect.module.css

@@ -1,14 +0,0 @@
-.pipette_volume_class {
-  min-width: 3.5rem;
-  cursor: default;
-}
-
-.pipette_channels {
-  min-width: 7rem;
-  cursor: default;
-}
-
-.pipette_category {
-  min-width: 2.5rem;
-  cursor: default;
-}

package/lib/src/legacy-hardware-sim/LabwareNameOverlay.module.css

@@ -1,20 +0,0 @@
-@import '../index.module.css';
-
-.name_overlay {
-  width: 100%;
-  padding: 0.25rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-  background-color: color-mod(var(--c-black) alpha(0.75));
-  color: var(--c-font-light);
-  font-size: 0.5rem;
-}
-
-.display_name {
-  color: var(--c-font-light);
-  font-weight: var(--fw-semibold);
-  overflow-wrap: break-word;
-}
-
-.deck_slot:active {
-  cursor: grabbing;
-}

package/lib/src/legacy-hardware-sim/ModuleItem.module.css

@@ -1,98 +0,0 @@
-@import '../index.module.css';
-
-.module {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  border-radius: 6px;
-  background-color: var(--c-black);
-  color: var(--c-black);
-  opacity: 0.9;
-}
-
-.module_review_icon {
-  width: 12px;
-  height: 12px;
-  margin: 0 0.25rem 0 0;
-  color: var(--c-white);
-}
-
-.module_review_icon_missing {
-  color: var(--c-red);
-}
-
-.module_review_icon_present {
-  color: var(--c-green);
-}
-
-.module_review_text {
-  margin-bottom: 0.75rem;
-  color: var(--c-white);
-  fill: currentColor;
-  font-size: 0.55rem;
-  font-weight: var(--fw-semibold);
-  text-transform: capitalize;
-  white-space: pre;
-}
-
-.module_name_overlay {
-  color: var(--c-black);
-  opacity: 0.7;
-}
-
-.module_connect_info_wrapper {
-  display: flex;
-  flex-direction: row;
-  color: var(--c-white);
-  font-size: 0.5rem;
-}
-
-.module_port_text {
-  color: var(--c-white);
-  fill: currentColor;
-  font-size: 0.65rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.module_port_text_na {
-  color: var(--c-med-gray);
-  fill: currentColor;
-  font-size: 0.65rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.module_wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 1.15rem;
-}
-
-.flipped_module_wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 1.15rem;
-}
-
-.module_name_text {
-  color: var(--c-white);
-  fill: currentColor;
-  font-size: 0.5rem;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-.flipped {
-  transform: rotate(180deg);
-}
-
-.right_icon {
-  margin: 0 0 0 1rem;
-}