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

package/src/styles/borders.ts

@@ -0,0 +1,16 @@
+// border style constants
+import { C_LIGHT_GRAY, C_MED_GRAY } from './colors'
+
+export const BORDER_WIDTH_DEFAULT = '1px'
+
+export const BORDER_RADIUS_DEFAULT = '2px'
+export const BORDER_RADIUS_1 = '5px'
+
+export const BORDER_STYLE_NONE = 'none'
+export const BORDER_STYLE_SOLID = 'solid'
+
+export const BORDER_SOLID_LIGHT = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_LIGHT_GRAY}`
+export const BORDER_SOLID_MEDIUM = `${BORDER_WIDTH_DEFAULT} ${BORDER_STYLE_SOLID} ${C_MED_GRAY}`
+
+export const SHADOW_LIGHT =
+  '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2)'

package/src/styles/colors.module.css

@@ -0,0 +1,52 @@
+/* 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: color 0.15s ease-in-out;
+  --transition-background-color: background-color 0.15s ease-in-out;
+}

package/src/styles/colors.ts

@@ -0,0 +1,58 @@
+// gray scale
+export const C_BLACK = '#000000'
+export const C_DARK_GRAY = '#4a4a4a'
+export const C_MED_DARK_GRAY = '#6c6c6c'
+export const C_MED_GRAY = '#9b9b9b'
+export const C_SILVER_GRAY = '#e3e3e3'
+export const C_MED_LIGHT_GRAY = '#d2d2d2'
+export const C_LIGHT_GRAY = '#e6e6e6'
+export const C_BRIGHT_GRAY = '#f8f8f8'
+export const C_HARBOR_GRAY = '#8a8c8e'
+export const C_NEAR_WHITE = '#fafafa'
+export const C_WHITE = '#ffffff'
+export const C_TRANSPARENT = 'transparent'
+export const C_DARK_BLACK = '#16212d'
+
+// brand colors
+export const C_BLUE = '#006cfa'
+export const C_MINT = '#00bfa8'
+export const C_AQUAMARINE = '#eefff8'
+export const C_POWDER_BLUE = '#f1f8ff'
+export const C_SKY_BLUE = '#accfff80'
+export const C_BLUE_PRESSED = '#0050b8'
+
+// colors by usage
+// TODO(mc, 2020-10-08): s/COLOR_/C_
+export const COLOR_WARNING = '#e28200'
+export const COLOR_WARNING_LIGHT = '#ffd58f'
+export const COLOR_WARNING_DARK = '#9e5e00'
+export const COLOR_ERROR = '#d12929'
+export const COLOR_SUCCESS = '#60b120'
+export const C_DISABLED = '#9c9c9c'
+export const C_SELECTED_DARK = '#00c3e6'
+export const C_BG_SELECTED = '#f0f3ff'
+export const C_ERROR_DARK = '#ac0505'
+export const C_ERROR_LIGHT = '#ffc0c0'
+
+// overlays
+export const OVERLAY_WHITE_10 = 'rgba(255, 255, 255, 0.1)'
+export const OVERLAY_WHITE_20 = 'rgba(255, 255, 255, 0.2)'
+
+// used to set aside further subsections of cards beyond
+// what can be distinguished with a border
+export const OVERLAY_LIGHT_GRAY_50 = 'rgba(230, 230, 230, 0.4)'
+
+// used as default BaseModal overlay color
+export const OVERLAY_GRAY_90 = 'rgba(127, 127, 127, 0.9)'
+
+// darkest modal overlay used
+export const OVERLAY_BLACK_90 = 'rgba(0, 0, 0, 0.9)'
+
+// 80 percent opacity overlay
+export const OVERLAY_BLACK_80 = 'rgba(0, 0, 0, 0.8)'
+
+// opacities
+export const OPACITY_DISABLED = 0.3
+
+// TODO(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
+export const C_FONT_DISABLED = '#9c9c9c'

package/src/styles/cursor.ts

@@ -0,0 +1,12 @@
+// cursor
+// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword
+export const CURSOR_AUTO = 'auto'
+export const CURSOR_CROSSHAIR = 'crosshair'
+export const CURSOR_DEFAULT = 'default'
+export const CURSOR_GRAB = 'grab'
+export const CURSOR_GRABBING = 'grabbing'
+export const CURSOR_HELP = 'help'
+export const CURSOR_NOT_ALLOWED = 'not-allowed'
+export const CURSOR_POINTER = 'pointer'
+export const CURSOR_ZOOM_IN = 'zoom-in'
+export const CURSOR_WAIT = 'wait'

package/src/styles/flexbox.ts

@@ -0,0 +1,39 @@
+export const FLEX_NONE = 'none'
+export const FLEX_AUTO = 'auto'
+export const FLEX_MIN_CONTENT = 'min-content'
+export const FLEX_MAX_CONTENT = 'max-content'
+
+export const ALIGN_NORMAL = 'normal'
+export const ALIGN_START = 'start'
+export const ALIGN_END = 'end'
+export const ALIGN_FLEX_START = 'flex-start'
+export const ALIGN_FLEX_END = 'flex-end'
+export const ALIGN_CENTER = 'center'
+export const ALIGN_BASELINE = 'baseline'
+export const ALIGN_STRETCH = 'stretch'
+
+export const JUSTIFY_NORMAL = 'normal'
+export const JUSTIFY_START = 'start'
+export const JUSTIFY_END = 'end'
+export const JUSTIFY_FLEX_START = 'flex-start'
+export const JUSTIFY_FLEX_END = 'flex-end'
+export const JUSTIFY_CENTER = 'center'
+export const JUSTIFY_SPACE_BETWEEN = 'space-between'
+export const JUSTIFY_SPACE_AROUND = 'space-around'
+export const JUSTIFY_SPACE_EVENLY = 'space-evenly'
+export const JUSTIFY_STRETCH = 'stretch'
+
+export const DIRECTION_ROW = 'row'
+export const DIRECTION_ROW_REVERSE = 'row-reverse'
+export const DIRECTION_COLUMN = 'column'
+export const DIRECTION_COLUMN_REVERSE = 'column-reverse'
+
+export const WRAP = 'wrap'
+export const NO_WRAP = 'nowrap'
+export const WRAP_REVERSE = 'wrap-reverse'
+
+export const WHITE_SPACE_NORMAL = 'normal'
+export const WHITE_SPACE_PRE = 'pre'
+export const WHITE_SPACE_PRE_WRAP = 'pre-wrap'
+export const WHITE_SPACE_PRE_LINE = 'pre-line'
+export const WHITE_SPACE_BREAK_SPACES = 'break-spaces'

package/src/styles/global.css

@@ -0,0 +1,180 @@
+/* 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: #f3e9f6;
+  --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-60: #16212d60;
+  --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/src/styles/index.module.css

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

package/src/styles/index.ts

@@ -0,0 +1,8 @@
+export * from './borders'
+export * from './colors'
+export * from './cursor'
+export * from './flexbox'
+export * from './layout'
+export * from './position'
+export * from './spacing'
+export * from './typography'

package/src/styles/layout.ts

@@ -0,0 +1,31 @@
+// display
+export const DISPLAY_NONE = 'none'
+export const DISPLAY_INLINE = 'inline'
+export const DISPLAY_BLOCK = 'block'
+export const DISPLAY_INLINE_BLOCK = 'inline-block'
+export const DISPLAY_FLEX = 'flex'
+export const DISPLAY_TABLE = 'table'
+export const DISPLAY_TABLE_ROW = 'table-row'
+export const DISPLAY_TABLE_CELL = 'table-cell'
+export const DISPLAY_GRID = 'grid'
+
+// powers-of-two size scale
+export const SIZE_AUTO = 'auto'
+export const SIZE_1 = '1rem'
+export const SIZE_2 = '2rem'
+export const SIZE_3 = '4rem'
+export const SIZE_4 = '8rem'
+export const SIZE_5 = '16rem'
+export const SIZE_6 = '32rem'
+
+// overflow
+export const OVERFLOW_VISIBLE = 'visible'
+export const OVERFLOW_HIDDEN = 'hidden'
+export const OVERFLOW_CLIP = 'clip'
+export const OVERFLOW_SCROLL = 'scroll'
+export const OVERFLOW_AUTO = 'auto'
+
+// overflow wrap
+export const OVERFLOW_WRAP_ANYWHERE = 'anywhere'
+export const OVERFLOW_WRAP_BREAK_WORD = 'break-word'
+export const OVERFLOW_WRAP_NORMAL = 'normal'

package/src/styles/position.ts

@@ -0,0 +1,5 @@
+export const POSITION_STATIC: 'static' = 'static'
+export const POSITION_RELATIVE: 'relative' = 'relative'
+export const POSITION_ABSOLUTE: 'absolute' = 'absolute'
+export const POSITION_FIXED: 'fixed' = 'fixed'
+export const POSITION_STICKY: 'sticky' = 'sticky'

package/src/styles/spacing.ts

@@ -0,0 +1,11 @@
+export const SPACING_AUTO = 'auto'
+
+// powers-of-two spacing scale
+export const SPACING_1 = '0.25rem'
+export const SPACING_2 = '0.5rem'
+export const SPACING_3 = '1rem'
+export const SPACING_4 = '2rem'
+export const SPACING_5 = '4rem'
+export const SPACING_6 = '8rem'
+export const SPACING_7 = '16rem'
+export const SPACING_8 = '32rem'

package/src/styles/typography.module.css

@@ -0,0 +1,23 @@
+/* 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/src/styles/typography.ts

@@ -0,0 +1,90 @@
+import { css } from 'styled-components'
+
+import { C_DARK_GRAY, C_WHITE } from './colors'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+// font size values
+export const FONT_SIZE_HUGE = '3rem'
+export const FONT_SIZE_BIG = '1.5rem'
+export const FONT_SIZE_HEADER = '1.125rem'
+export const FONT_SIZE_DEFAULT = '1rem'
+export const FONT_SIZE_BODY_2 = '0.875rem'
+export const FONT_SIZE_BODY_1 = '0.75rem'
+export const FONT_SIZE_CAPTION = '0.625rem'
+export const FONT_SIZE_TINY = '0.325rem'
+export const FONT_SIZE_MICRO = '0.2rem'
+export const FONT_SIZE_INHERIT = 'inherit'
+
+// line height values
+export const LINE_HEIGHT_SOLID = 1
+export const LINE_HEIGHT_TITLE = 1.25
+export const LINE_HEIGHT_COPY = 1.5
+
+// font weight values
+export const FONT_WEIGHT_LIGHT = 300
+export const FONT_WEIGHT_REGULAR = 400
+export const FONT_WEIGHT_SEMIBOLD = 600
+export const FONT_WEIGHT_BOLD = 800
+
+// font style values
+export const FONT_STYLE_NORMAL = 'normal'
+export const FONT_STYLE_ITALIC = 'italic'
+
+// text align
+export const TEXT_ALIGN_LEFT = 'left'
+export const TEXT_ALIGN_CENTER = 'center'
+export const TEXT_ALIGN_RIGHT = 'right'
+export const TEXT_ALIGN_JUSTIFY = 'justify'
+
+// text transform
+export const TEXT_TRANSFORM_NONE = 'none'
+export const TEXT_TRANSFORM_CAPITALIZE = 'capitalize'
+export const TEXT_TRANSFORM_UPPERCASE = 'uppercase'
+export const TEXT_TRANSFORM_LOWERCASE = 'lowercase'
+
+// text decoration
+export const TEXT_DECORATION_UNDERLINE = 'underline'
+
+// font property sets
+export const FONT_HEADER_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_HEADER_THIN: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HEADER};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_LIGHT: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_WHITE};
+`
+
+export const FONT_BODY_2_DARK: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_2};
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_BODY_1_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_BODY_1};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`
+
+export const FONT_HUGE_DARK_SEMIBOLD: FlattenSimpleInterpolation = css`
+  font-size: ${FONT_SIZE_HUGE};
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  color: ${C_DARK_GRAY};
+`

package/lib/legacy-hardware-sim/ModuleItem.d.ts

@@ -1,17 +0,0 @@
-import type { DeckSlot, ModuleModel } from '@opentrons/shared-data';
-export interface ModuleProps {
-    /** module model */
-    model: ModuleModel;
-    /** display mode: 'default', 'present', 'missing', or 'info' */
-    mode: 'default' | 'present' | 'missing' | 'info';
-    /** slot details of the location of this module */
-    slot: DeckSlot;
-    /** USB port detail of the connected module */
-    usbInfoString?: string;
-}
-/**
- * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
- *
- * @deprecated Use {@link Module}
- */
-export declare function ModuleItem(props: ModuleProps): JSX.Element;