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

package/lib/organisms/ProtocolTimelineScrubber/utils.d.ts

@@ -1,23 +0,0 @@
-import type { CompletedProtocolAnalysis, LabwareDefinition, ProtocolAnalysisOutput, RunTimeCommand } from '@opentrons/shared-data';
-import type { LabwareEntities, LocationLiquidState, SingleLabwareLiquidState, TimelineFrame } from '@opentrons/step-generation';
-import type { WellFill } from '../../hardware-sim';
-import type { CommandTextData } from './types';
-export interface WellContents {
-    groupIds: string[];
-    ingreds: LocationLiquidState;
-    highlighted?: boolean;
-    selected?: boolean;
-    maxVolume?: number;
-    wellName?: string;
-}
-interface WellContentsByLabware {
-    [labwareId: string]: ContentsByWell;
-}
-export type ContentsByWell = {
-    [wellName: string]: WellContents;
-} | null;
-export declare function _wellContentsForLabware(labwareLiquids: SingleLabwareLiquidState, labwareDef: LabwareDefinition): ContentsByWell;
-export declare const wellFillFromWellContents: (wellContents: ContentsByWell, displayColors: string[]) => WellFill;
-export declare function getAllWellContentsForActiveItem(labwareEntities: LabwareEntities, robotState: TimelineFrame): WellContentsByLabware | null;
-export declare function getCommandTextData(protocolData: CompletedProtocolAnalysis | ProtocolAnalysisOutput, protocolCommands?: RunTimeCommand[]): CommandTextData;
-export {};

package/lib/primitives/Buttons/NewSecondaryBtn.d.ts

@@ -1,8 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-import type { StyleProps } from '../types';
-/**
- * New secondary button variant used in app
- *
- * @component
- */
-export declare const NewSecondaryBtn: FC<ComponentProps<'button'> & StyleProps>;

package/lib/src/alerts/alerts.module.css

@@ -1,103 +0,0 @@
-@import '../index.module.css';
-
-.alert {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-regular);
-}
-
-.alert:not(:first-of-type) {
-  border-top: none;
-}
-
-.title_bar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  font-weight: var(--fw-semibold);
-}
-
-.title {
-  width: 100%;
-}
-
-.success {
-  border: 1px solid var(--c-success);
-
-  & > .title_bar {
-    background-color: var(--c-bg-success);
-    color: var(--c-success);
-
-    & svg {
-      color: var(--c-success);
-    }
-  }
-}
-
-.info {
-  border: 1px solid var(--c-highlight);
-
-  & > .title_bar {
-    background-color: var(--c-bg-selected);
-    color: var(--c-selected-dark);
-
-    & svg {
-      color: var(--c-highlight);
-    }
-  }
-}
-
-.warning {
-  border: 1px solid var(--c-warning);
-
-  & > .title_bar {
-    background-color: var(--c-warning-light);
-    color: var(--c-warning-dark);
-
-    & svg {
-      fill: var(--c-warning);
-    }
-  }
-}
-
-.error {
-  border: 1px solid var(--c-error);
-
-  & > .title_bar {
-    background-color: var(--c-error-light);
-    color: var(--c-error-dark);
-
-    & svg {
-      fill: var(--c-error);
-    }
-  }
-}
-
-.message {
-  padding: 1rem 3rem;
-  background-color: white;
-
-  & a {
-    color: inherit;
-    text-decoration: underline;
-  }
-
-  &:empty {
-    padding: 0;
-  }
-}
-
-.icon {
-  width: 1.5rem;
-  margin-right: 0.5rem;
-}
-
-.close {
-  width: 2rem;
-  padding: 0.125rem;
-
-  &:hover {
-    background-color: rgba(100, 100, 100, 0.1);
-  }
-}

package/lib/src/atoms/StyledText/placeholderstyledtext.module.css

@@ -1,26 +0,0 @@
-@media not all and (width: 1024px) and (height: 600px) {
-  .heading_small_bold {
-    font-size: 1.125rem;
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-24);
-  }
-
-  .caption_bold {
-    font-size: 0.75rem;
-    font-weight: var(--font-weight-bold);
-  }
-
-  .body_default_semi_bold {
-    font-size: var(--font-size-16);
-    font-weight: var(--font-weight-semi-bold);
-    line-height: var(--line-height-24);
-  }
-}
-
-@media (width: 1024px) and (height: 600px) {
-  .small_body_text_bold {
-    font-size: var(--font-size-20);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--font-height-24);
-  }
-}

package/lib/src/buttons/buttons.module.css

@@ -1,428 +0,0 @@
-/* button styling */
-@import '../index.module.css';
-
-:root {
-  --button-pad: 0.5rem;
-
-  --button-inverted: {
-    border-color: var(--c-font-light);
-
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-
-    &:active {
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-      font-weight: var(--fw-regular);
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-/* TODO(ka, 2017-2-14): standardize primary button vars */
-
-.button_primary {
-  position: relative;
-
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 100%;
-  padding: var(--button-pad);
-  border: none;
-  border-radius: var(--bd-radius-default);
-  background: transparent;
-  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);
-  color: var(--c-font-light);
-  cursor: pointer;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  line-height: 1.4;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &:focus {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-bg-dark) shade(30%));
-  }
-
-  &:active {
-    background-color: color-mod(var(--c-bg-dark) tint(30%));
-
-    /* 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);
-    font-weight: var(--fw-regular);
-  }
-
-  &.inverted {
-    background-color: var(--c-bg-light);
-    color: var(--c-font-dark);
-
-    &:focus,
-    &:hover,
-    &.hover {
-      background-color: color-mod(var(--c-bg-light) shade(5%));
-    }
-
-    &:active {
-      background-color: color-mod(var(--c-bg-light) shade(10%));
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-
-    background-color: color-mod(var(--c-bg-dark) tint(70%));
-    box-shadow: none;
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-  }
-}
-
-.button_flat {
-  position: relative;
-
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  padding: var(--button-pad);
-  border: none;
-  border-radius: var(--bd-radius-default);
-  background: transparent;
-  color: var(--c-font-dark);
-  cursor: pointer;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  line-height: 1.4;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &:active {
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-    font-weight: var(--fw-regular);
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-
-  &:focus {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.inverted {
-    border-color: var(--c-font-light);
-
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-
-    &:active {
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-      font-weight: var(--fw-regular);
-    }
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-.button_outline {
-  position: relative;
-
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  padding: var(--button-pad);
-  border: 1px solid var(--c-font-dark);
-  border-radius: var(--bd-radius-default);
-  background: transparent;
-  color: var(--c-font-dark);
-  cursor: pointer;
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  line-height: 1.4;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &:active {
-    background-color: color-mod(var(--c-bg-light) shade(10%));
-    font-weight: var(--fw-regular);
-  }
-
-  &:disabled,
-  &.disabled {
-    /* from legacy --button-disabled */
-    border-color: var(--c-font-disabled);
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-
-  &:focus {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &:hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.hover {
-    background-color: color-mod(var(--c-med-gray) alpha(25%));
-  }
-
-  &.inverted {
-    border-color: var(--c-font-light);
-
-    /* VVV from legacy --button-inverted VVV */
-    color: var(--c-font-light);
-
-    &:active {
-      background-color: color-mod(var(--c-bg-dark) tint(10%));
-      font-weight: var(--fw-regular);
-    }
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-
-    &:focus {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &:hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    &.hover {
-      background-color: color-mod(var(--c-bg-dark) tint(5%));
-    }
-
-    /* ^^^ from legacy --button-default ^^^ */
-  }
-}
-
-/* style for IconButton */
-
-.button_icon {
-  width: auto;
-
-  & > * {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  &.inverted {
-    color: white;
-    fill: white;
-
-    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
-    stroke: white;
-
-    &:disabled,
-    &.disabled {
-      /* from legacy --button-disabled */
-      border-color: var(--c-font-disabled);
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-  }
-}
-
-/* style for the supplementary icon displayed by Button */
-.icon {
-  position: absolute;
-  top: var(--button-pad);
-  left: var(--button-pad);
-  height: calc(100% - 2 * var(--button-pad));
-}

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

@@ -1,103 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --mw-labeled-toggle: 25rem;
-}
-
-/* Toggle Button */
-.toggled_on {
-  color: #0ec9eb;
-  fill: #0ec9eb;
-}
-
-.toggled_off {
-  fill: var(--c-dark-gray);
-}
-
-.labeled_control_wrapper {
-  display: block;
-  width: 100%;
-  padding: 1rem;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--c-light-gray);
-  }
-}
-
-.labeled_control {
-  display: block;
-}
-
-.stacked_labeled_control {
-  display: block;
-  margin-top: 0.5rem;
-  margin-left: 1rem;
-}
-
-.stacked_labeled_control_label {
-  display: inline-block;
-  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-semibold);
-}
-
-.labeled_control_label {
-  display: inline-block;
-  max-width: var(--mw-labeled-toggle);
-  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-semibold);
-}
-
-.labeled_toggle_button {
-  width: 2rem;
-  padding: 0;
-  margin-right: 1rem;
-  float: right;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.labeled_button,
-.labeled_select {
-  width: 9rem;
-  margin-top: 0.5rem;
-  float: right;
-}
-
-.labeled_select {
-  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 */
-}
-
-.labeled_checkbox {
-  float: right;
-}
-
-.stacked_control_info {
-  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 */
-
-  & > p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-}
-
-.control_info {
-  max-width: var(--mw-labeled-toggle);
-  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 */
-
-  & > p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-}