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

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

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

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

@@ -1,58 +0,0 @@
-/* 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;
-  }
-}

package/lib/src/styles/global.css

@@ -1,179 +0,0 @@
-/* this is global CSS for the components package and all other opentrons projects */
-:root {
-  /* colors */
-
-  /* currently we follow the order of colors.ts file */
-
-  /* green */
-  --green-60: #03683e;
-  --green-35: #afedd3;
-  --green-20: #e8f7ed;
-  --green-50-non-touchscreen: #04aa65;
-  --green-50-touchscreen: #1ca850;
-  --green-50: var(--green-50-non-touchscreen);
-  --green-40-non-touchscreen: #91e2c0;
-  --green-40-touchscreen: #8ef3a8;
-  --green-40: var(--green-40-non-touchscreen);
-  --green-30-non-touchscreen: #c4f6e0;
-  --green-30-touchscreen: #8afbab;
-  --green-30: var(--green-30-non-touchscreen);
-
-  /* red */
-  --red-60: #941313;
-  --red-55: #c71a1b;
-  --red-50: #de1b1b;
-  --red-40: #f5b2b3;
-  --red-35: #f8c8c9;
-  --red-30: #fad6d6;
-  --red-20: #fce9e9;
-
-  /* yellow */
-  --yellow-60: #825512;
-  --yellow-50: #f09d20;
-  --yellow-40: #fcd48b;
-  --yellow-35: #ffe1a4;
-  --yellow-30: #ffe9be;
-  --yellow-20: #fdf3e2;
-
-  /* purple */
-  --purple-60-non-touchscreen: #562566;
-  --purple-60-touchscreen: #612367;
-  --purple-60: var(--purple-60-non-touchscreen);
-  --purple-55-non-touchscreen: #713187;
-  --purple-55-touchscreen: #822e89;
-  --purple-55: var(--purple-55-non-touchscreen);
-  --purple-50-non-touchscreen: #893ba4;
-  --purple-50-touchscreen: #9e39a8;
-  --purple-50: var(--purple-50-non-touchscreen);
-  --purple-40-non-touchscreen: #cea4df;
-  --purple-40-touchscreen: #e2a9ea;
-  --purple-40: var(--purple-40-non-touchscreen);
-  --purple-35-non-touchscreen: #dbbce7;
-  --purple-35-touchscreen: #ecc2f2;
-  --purple-35: var(--purple-35-non-touchscreen);
-  --purple-30-non-touchscreen: #e6d5ec;
-  --purple-30-touchscreen: #f4def7;
-  --purple-30: var(--purple-30-non-touchscreen);
-  --purple-20-non-touchscreen: #f1e8f5;
-  --purple-20-touchscreen: #fff3fe;
-  --purple-20: var(--purple-20-non-touchscreen);
-
-  /* blue */
-  --blue-60: #004196;
-  --blue-55: #0056c8;
-  --blue-40: #a9cefd;
-  --blue-35: #bfdcfd;
-  --blue-30: #d0e6fe;
-  --blue-20: #e1efff;
-  --blue-10: #f1f8ff;
-
-  /* gray */
-  --grey-60: #4a4c4e;
-  --grey-55: #626467;
-  --grey-50: #737578;
-  --grey-40: #b7b8b9;
-  --grey-35: #cbcccc;
-  --grey-30: #dedede;
-  --grey-20: #e9e9e9;
-  --grey-10: #f3f3f3;
-
-  /* core */
-  --black-90: #16212d;
-  --black-80: #24313f;
-  --black-70: #39495b;
-  --white: #fff;
-  --blue-50: #006cfa;
-
-  /* semi-opaques */
-  --transparent-white-80: #fffc;
-  --transparent-white-50: #ffffff80;
-  --transparent-black-80: #16212d80;
-
-  /* flex */
-  --flex-55: #0297cc;
-  --flex-50: #00bdff;
-  --flex-40: #aae3fc;
-
-  /* extras */
-  --transparent: #0000;
-
-  /* spacing */
-  --spacing-2: 0.125rem; /* 2px */
-  --spacing-4: 0.25rem; /* 4px */
-  --spacing-6: 0.375rem; /* 6px */
-  --spacing-8: 0.5rem; /* 8px */
-  --spacing-10: 0.625rem; /* 10px */
-  --spacing-12: 0.75rem; /* 12px */
-  --spacing-16: 1rem; /* 16px */
-  --spacing-20: 1.25rem; /* 20px */
-  --spacing-24: 1.5rem; /* 24px */
-  --spacing-32: 2rem; /* 32px */
-  --spacing-40: 2.5rem; /* 40px */
-  --spacing-44: 2.75rem; /* 44px */
-  --spacing-48: 3rem; /* 48px */
-  --spacing-60: 3.75rem; /* 60px */
-  --spacing-68: 4.25rem; /* 68px */
-  --spacing-80: 5rem; /* 80px */
-  --spacing-120: 7.5rem; /* 120px */
-
-  /* border-radius */
-  --border-radius-2: 0.125rem; /* 2px */
-  --border-radius-4: 0.25rem; /* 4px */
-  --border-radius-8: 0.5rem; /* 8px */
-  --border-radius-12: 0.75rem; /* 12px */
-  --border-radius-16: 1rem; /* 16px */
-  --border-radius-40: 2.5rem; /* 40px */
-  --border-radius-200: 50rem; /* 200px */
-
-  /* font-size */
-  --font-size-80: 5rem; /* 80px */
-  --font-size-38: 2.375rem; /* 38px */
-  --font-size-32: 2rem; /* 32px */
-  --font-size-28: 1.75rem; /* 28px */
-  --font-size-22: 1.375rem; /* 22px */
-  --font-size-20: 1.25rem; /* 20px */
-  --font-size-h1: 1.1875rem; /* H1 19px */
-  --font-size-h2: 0.9375rem; /* H2 15px */
-  --font-size-h3: 0.875rem; /* H3 14px */
-  --font-size-h4: 0.8125rem; /* H4 13px */
-  --font-size-h6: 0.5625rem; /* H6 9px */
-  --font-size-p: 0.8125rem; /* P 13px */
-  --font-size-label: 0.6875rem; /* Label 11px */
-  --font-size-caption: 0.625rem; /* Caption 10px */
-
-  /* line-height */
-  --line-height-96: 6rem; /* 96px */
-  --line-height-48: 3rem; /* 48px */
-  --line-height-42: 2.625rem; /* 42px */
-  --line-height-36: 2.25rem; /* 36px */
-  --line-height-28: 1.75rem; /* 28px */
-  --line-height-24: 1.5rem; /* 24px */
-  --line-height-20: 1.25rem; /* 20px */
-  --line-height-18: 1.125rem; /* 18px */
-  --line-height-16: 1rem; /* 16px */
-  --line-height-12: 0.75rem; /* 12px */
-
-  /* font-weight */
-
-  /* this might be removed. that depends on what StyledText looks like */
-  --font-weight-bold: 700;
-  --font-weight-semi-bold: 600;
-  --font-weight-regular: 400;
-  --font-weight-light: 300;
-}
-
-.enable_touchscreen_colors {
-  /* green */
-  --green-50: var(--green-50-touchscreen);
-  --green-40: var(--green-40-touchscreen);
-  --green-30: var(--green-30-touchscreen);
-
-  /* purple */
-  --purple-60: var(--purple-60-touchscreen);
-  --purple-55: var(--purple-55-touchscreen);
-  --purple-50: var(--purple-50-touchscreen);
-  --purple-40: var(--purple-40-touchscreen);
-  --purple-35: var(--purple-35-touchscreen);
-  --purple-30: var(--purple-30-touchscreen);
-  --purple-20: var(--purple-20-touchscreen);
-}

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

@@ -1,8 +0,0 @@
-.clickable {
-  cursor: pointer;
-}
-
-.rotated {
-  transform: rotate(180deg);
-  transform-origin: center;
-}

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

@@ -1,23 +0,0 @@
-/* ToDo this file will be removed once the labware library, designer, and creator are updated */
-: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;
-}

package/lib/src/tooltips/tooltips.module.css

@@ -1,72 +0,0 @@
-/* common styling for tooltips */
-@import '../index.module.css';
-
-.tooltip_box {
-  z-index: 9001;
-  padding: 8px;
-  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);
-  color: var(--c-font-light); /* from legacy --font-body-1-light */
-  cursor: pointer;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
-}
-
-.arrow {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 1em;
-  height: 0.5em;
-  margin-bottom: -0.5em;
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    border-width: 0.5em 0.5em 0 0.5em;
-    border-style: solid;
-    border-color: var(--c-bg-dark) transparent transparent transparent;
-    margin: auto;
-    content: '';
-  }
-}
-
-.arrow.bottom {
-  top: 0;
-  left: 0;
-  width: 1em;
-  height: 0.5em;
-  margin-top: -0.5em;
-
-  &::before {
-    border-width: 0 0.5em 0.5em 0.5em;
-    border-color: transparent transparent var(--c-bg-dark) transparent;
-  }
-}
-
-.arrow.right {
-  top: 0;
-  left: 0;
-  width: 0.5em;
-  height: 1em;
-  margin-left: -0.5em;
-
-  &::before {
-    border-width: 0.5em 0.5em 0.5em 0;
-    border-color: transparent var(--c-bg-dark) transparent transparent;
-  }
-}
-
-.arrow.left {
-  top: 0;
-  right: 0;
-  width: 0.5em;
-  height: 1em;
-  margin-right: -0.5em;
-
-  &::before {
-    border-width: 0.5em 0 0.5em 0.5em;
-    border-color: transparent transparent transparent var(--c-bg-dark);
-  }
-}