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

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

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

@@ -0,0 +1,103 @@
+@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;
+  }
+}

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

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

@@ -0,0 +1,16 @@
+@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);
+  }
+}