@opentrons/components 0.2.1-alpha.0 → 0.3.0-alpha.1

package/lib/src/modals/modals.module.css

@@ -0,0 +1,275 @@
+/* common styling for modals */
+@import '../index.module.css';
+
+.modal {
+  position: fixed;
+  z-index: 1;
+
+  /* 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 */
+  align-items: center;
+
+  /* from legacy --center-children */
+
+  align-items: flex-start;
+
+  /* from legacy --center-children */
+  justify-content: center;
+  padding: 4rem;
+}
+
+.modal_page {
+  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 */
+
+  flex-direction: column;
+
+  /* from legacy --flex-start */
+  align-items: center;
+
+  /* from legacy --flex-start */
+  justify-content: flex-start;
+  padding: 4.5rem 3rem 1rem 3rem;
+}
+
+.overlay {
+  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 {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+}
+
+.modal_contents {
+  z-index: 1;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  max-width: 38rem;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+
+  background-color: white;
+}
+
+.modal_page_contents {
+  z-index: 1;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  max-width: 38rem;
+  max-height: 100%;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+  padding-top: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+
+  background-color: white;
+  overflow-y: auto;
+}
+
+.modal_heading {
+  /* from legacy --font-header-dark */
+
+  margin-top: 0;
+  margin-bottom: 1rem;
+
+  /* from legacy --font-header-dark */
+  color: var(--c-font-dark);
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+  font-weight: var(--fw-semibold);
+  text-transform: capitalize;
+}
+
+.alert_modal_wrapper {
+  position: relative;
+  max-height: 100%;
+  padding-top: 4rem;
+  border-radius: 0;
+}
+
+.alert_modal_heading.no_icon_heading {
+  padding-left: 2rem;
+}
+
+.no_alert_header {
+  padding-top: 1.5rem;
+}
+
+.spinner_modal_contents {
+  z-index: 4;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --font-body-2-light */
+
+  max-width: 30rem;
+  flex-direction: column;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+  padding-top: 3rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+  background-color: transparent;
+
+  /* from legacy --font-body-2-light */
+  color: var(--c-font-light);
+
+  /* from legacy --modal-contents */
+  font-size: var(--fs-body-2);
+  font-style: italic;
+
+  /* from legacy --font-body-2-light */
+  font-weight: var(--fw-regular);
+  text-align: center;
+}
+
+.spinner_modal_icon {
+  width: 7.5rem;
+  margin-bottom: 3rem;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.alert_modal {
+  z-index: 10;
+}
+
+.alert_modal_overlay {
+  background-color: rgba(115, 115, 115, 0.9);
+}
+
+.alert_modal_contents {
+  /* from legacy --font-body-2-dark */
+
+  width: 100%;
+  max-height: 100%;
+  padding: 1rem;
+
+  /* from legacy --font-body-2-dark */
+  color: var(--c-font-dark);
+  font-size: var(--fs-body-2);
+
+  /* from legacy --font-body-2-dark */
+  font-weight: var(--fw-regular);
+
+  & > p {
+    padding-bottom: 1rem;
+  }
+}
+
+.alert_modal_heading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  background-color: #e0e0e0;
+
+  /* from legacy --font-header-dark */
+  color: var(--c-font-dark);
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+
+  font-weight: normal;
+}
+
+.alert_modal_icon {
+  height: 1.125rem;
+  margin-right: 0.75rem;
+}
+
+.alert_modal_buttons {
+  margin-top: 1rem;
+  float: right;
+}
+
+.alert_button {
+  margin-left: 1rem;
+}

package/lib/src/molecules/DeckInfoLabel/deckinfolabel.module.css

@@ -0,0 +1,42 @@
+.label {
+  display: inline-flex;
+  width: max-content;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--border-radius-8);
+  background-color: inherit;
+}
+
+.deck_info_label_highlight {
+  border-color: transparent;
+  background-color: var(--blue-50);
+}
+
+.deck_info_label_no_highlight {
+  border-color: var(--black-90);
+}
+
+.large {
+  height: 1.75rem;
+  border-width: 2px;
+}
+
+.default {
+  height: 1.25rem;
+}
+
+@media (height: 600px) and (width: 1024px) {
+  .label {
+    height: var(--spacing-32);
+    padding: var(--spacing-4) var(--spacing-6);
+    border-width: 2px;
+    border-radius: var(--border-radius-12);
+  }
+
+  .has_deck_label {
+    padding-right: var(--spacing-8);
+  }
+}

package/lib/src/molecules/ReleaseNotes/styles.module.css

@@ -0,0 +1,66 @@
+@import '../../index.module.css';
+
+.release_notes {
+  width: 100%;
+  max-height: 100%;
+  padding: 0 0.5rem;
+
+  & > h1 {
+    margin-bottom: 1rem;
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
+  }
+
+  & > h2 {
+    margin-top: 1rem;
+    margin-bottom: 0.75rem;
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    font-weight: var(--fw-regular);
+  }
+
+  & > h3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.5rem;
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-semibold);
+  }
+
+  & ul,
+  & ol {
+    margin-bottom: 0.25rem;
+    margin-left: 1.25rem;
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2);
+  }
+
+  & li {
+    margin: 0.25rem 0;
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2);
+  }
+
+  & code {
+    color: var(--c-font-dark);
+    font-family: monospace;
+  }
+
+  & pre {
+    padding: 0.5rem 0.75rem;
+    margin: 0.5rem 0;
+    background-color: var(--c-font-dark);
+
+    & code {
+      color: var(--c-font-light);
+    }
+  }
+
+  & p {
+    margin-bottom: 1rem;
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+  }
+}

package/lib/src/nav/SidePanel.module.css

@@ -0,0 +1,34 @@
+@import '../index.module.css';
+
+:root {
+  --sidebar-width: 18.25rem;
+}
+
+.panel {
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+  padding: 0 4px;
+  border-right: var(--bd-light);
+  background-color: var(--c-bg-light);
+}
+
+.title_bar {
+  display: flex;
+  width: var(--sidebar-width);
+  align-items: center;
+}
+
+.title {
+  margin: 1rem auto;
+  color: var(--c-font-dark); /* from legacy --font-header-dark */
+  font-size: var(--fs-header); /* from legacy --font-header-dark */
+  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
+}
+
+.panel_contents {
+  width: var(--sidebar-width);
+  height: calc(100vh - 3.5rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+}

package/lib/src/slotmap/styles.module.css

@@ -0,0 +1,18 @@
+@import '../index.module.css';
+
+.slot_rect {
+  fill: none;
+  stroke: var(--c-med-gray);
+}
+
+.slot_occupied {
+  fill: var(--c-light-gray);
+}
+
+.slot_occupied.slot_error {
+  fill: var(--c-warning-light);
+}
+
+.collision_icon {
+  color: var(--c-med-gray);
+}

package/lib/src/structure/Pill.module.css

@@ -0,0 +1,16 @@
+@import '../index.module.css';
+
+.pill {
+  padding: 0.5em;
+  border-radius: var(--bd-radius-pill);
+  color: var(--c-white);
+}
+
+.pill:empty::before {
+  /* zero width space to give empty pill the same line height */
+  content: "\200b";
+}
+
+.invert_text {
+  color: var(--c-black);
+}

package/lib/src/structure/Splash.module.css

@@ -0,0 +1,16 @@
+@import '../index.module.css';
+
+.splash {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: var(--c-light-gray);
+
+  & > * {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    max-height: 100%;
+    transform: translate(-50%, -50%);
+  }
+}

package/lib/src/structure/structure.module.css

@@ -0,0 +1,114 @@
+/* TitleBar styles */
+@import '../index.module.css';
+
+.title_bar {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  background-color: var(--c-dark-gray);
+  text-transform: uppercase;
+}
+
+.title_bar,
+.title_bar a {
+  color: white;
+}
+
+.title,
+.subtitle,
+.separator {
+  margin: 0;
+  font-size: var(--fs-header);
+}
+
+.title,
+.separator {
+  font-weight: var(--fw-semibold);
+}
+
+.title {
+  overflow: hidden; /* from legacy --truncate */
+  min-width: 0; /* from legacy --truncate */
+  padding: 0 1.5rem;
+  text-overflow: ellipsis; /* from legacy --truncate */
+  white-space: nowrap; /* from legacy --truncate */
+}
+
+.subtitle {
+  padding: 0 1.5rem;
+  font-weight: normal;
+}
+
+.title.right {
+  margin-left: auto;
+}
+
+.title_button {
+  flex: none;
+}
+
+.page_tabs {
+  width: 100%;
+  text-align: center;
+}
+
+.tab_link {
+  display: inline-block;
+  width: 50%;
+  padding: 0.25rem 0;
+  background-color: var(--c-med-gray);
+  color: white;
+  font-size: var(--fs-huge);
+  opacity: 0.2;
+  text-transform: uppercase;
+}
+
+.active_tab_link {
+  opacity: 1;
+}
+
+.tab_title {
+  font-weight: normal;
+}
+
+.active_tab_link .tab_title {
+  font-weight: var(--fw-bold);
+}
+
+.disabled {
+  background-color: transparent;
+  pointer-events: none;
+
+  & * {
+    background-color: transparent;
+    color: var(--c-font-disabled);
+    fill: var(--c-font-disabled);
+  }
+}
+
+.labeled_value {
+  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 */
+  line-height: 1.5;
+
+  & svg {
+    height: var(--fs-body-2);
+  }
+}
+
+.labeled_value_label {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+  font-weight: var(--fw-semibold);
+}
+
+.labeled_value_value {
+  margin: 0;
+}
+
+.right_node {
+  display: flex;
+  justify-content: flex-end;
+  margin-left: auto;
+}

package/lib/src/styles/borders.module.css

@@ -0,0 +1,20 @@
+@import './colors.module.css';
+
+: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);
+}

package/lib/src/styles/colors.module.css

@@ -0,0 +1,58 @@
+/* ToDo this file will be removed once the labware library, designer, and creator are updated */
+:root {
+  /* ot brand */
+  --c-mustard: #ffd252;
+  --c-blue: #006cfa;
+  --c-light-blue: color-mod(var(--c-blue) lightness(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: color-mod(var(--c-highlight) alpha(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;
+  }
+}