@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.0

package/src/atoms/buttons/index.ts

@@ -1,4 +1,5 @@
 export * from './AlertPrimaryButton'
+export * from './BasicButton'
 export * from './EmptySelectorButton'
 export * from './LargeButton'
 export * from './PrimaryButton'

package/src/atoms/index.ts

@@ -1,3 +1,4 @@
+export * from './AnimationVideo'
 export * from './buttons'
 export * from './Checkbox'
 export * from './CheckboxField'

package/src/buttons/buttons.module.css

@@ -5,13 +5,14 @@
   --button-pad: 0.5rem;
 
   --button-inverted: {
+    border-color: var(--c-font-light);
+
     /* VVV from legacy --button-inverted VVV */
     color: var(--c-font-light);
-    border-color: var(--c-font-light);
 
     &:active {
-      font-weight: var(--fw-regular);
       background-color: color-mod(var(--c-bg-dark) tint(10%));
+      font-weight: var(--fw-regular);
     }
 
     &:focus {
@@ -24,22 +25,21 @@
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* 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 */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -58,31 +58,32 @@
 /* TODO(ka, 2017-2-14): standardize primary button vars */
 
 .button_primary {
+  position: relative;
+
   /* VVV from legacy --button-default VVV */
   display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  background: transparent;
-  border-radius: var(--bd-radius-default);
 
   /* ^^^ from legacy --button-default ^^^ */
 
   width: 100%;
-  color: var(--c-font-light);
+  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%));
@@ -97,13 +98,13 @@
   }
 
   &:active {
-    font-weight: var(--fw-regular);
     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 {
@@ -123,69 +124,73 @@
 
   &:disabled,
   &.disabled {
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
     /* from legacy --button-disabled */
     border-color: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
-    fill: var(--c-font-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 */
-    pointer-events: none;
+    fill: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
+    font-weight: normal;
 
-    background-color: color-mod(var(--c-bg-dark) tint(70%));
-    box-shadow: none;
-    color: var(--c-font-disabled);
+    /* from legacy --button-disabled */
+    pointer-events: none;
   }
 }
 
 .button_flat {
+  position: relative;
+
   /* VVV from legacy --button-default VVV */
   display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
+
+  /* ^^^ 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;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
 
   &:active {
-    font-weight: var(--fw-regular);
     background-color: color-mod(var(--c-bg-light) shade(10%));
+    font-weight: var(--fw-regular);
   }
 
   &:disabled,
   &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
     /* 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 */
-    cursor: default;
+    font-weight: normal;
 
     /* from legacy --button-disabled */
     pointer-events: none;
@@ -205,38 +210,34 @@
     background-color: color-mod(var(--c-med-gray) alpha(25%));
   }
 
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-
   &.inverted {
+    border-color: var(--c-font-light);
+
     /* VVV from legacy --button-inverted VVV */
     color: var(--c-font-light);
-    border-color: var(--c-font-light);
 
     &:active {
-      font-weight: var(--fw-regular);
       background-color: color-mod(var(--c-bg-dark) tint(10%));
+      font-weight: var(--fw-regular);
     }
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* 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 */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -261,44 +262,49 @@
 }
 
 .button_outline {
+  position: relative;
+
   /* VVV from legacy --button-default VVV */
   display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
+
+  /* ^^^ 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;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
 
   &:active {
-    font-weight: var(--fw-regular);
     background-color: color-mod(var(--c-bg-light) shade(10%));
+    font-weight: var(--fw-regular);
   }
 
   &:disabled,
   &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
     /* 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 */
-    cursor: default;
+    font-weight: normal;
 
     /* from legacy --button-disabled */
     pointer-events: none;
@@ -318,39 +324,34 @@
     background-color: color-mod(var(--c-med-gray) alpha(25%));
   }
 
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  border: 1px solid var(--c-font-dark);
-
   &.inverted {
+    border-color: var(--c-font-light);
+
     /* VVV from legacy --button-inverted VVV */
     color: var(--c-font-light);
-    border-color: var(--c-font-light);
 
     &:active {
-      font-weight: var(--fw-regular);
       background-color: color-mod(var(--c-bg-dark) tint(10%));
+      font-weight: var(--fw-regular);
     }
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* 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 */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -381,8 +382,8 @@
 
   & > * {
     display: block;
-    height: 100%;
     width: 100%;
+    height: 100%;
   }
 
   &.inverted {
@@ -394,22 +395,21 @@
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* 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 */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -425,4 +425,4 @@
   top: var(--button-pad);
   left: var(--button-pad);
   height: calc(100% - 2 * var(--button-pad));
-}
+}

package/src/controls/styles.module.css

@@ -6,8 +6,8 @@
 
 /* Toggle Button */
 .toggled_on {
-  fill: #0ec9eb;
   color: #0ec9eb;
+  fill: #0ec9eb;
 }
 
 .toggled_off {
@@ -15,9 +15,9 @@
 }
 
 .labeled_control_wrapper {
+  display: block;
   width: 100%;
   padding: 1rem;
-  display: block;
 
   &:not(:last-child) {
     border-bottom: 1px solid var(--c-light-gray);
@@ -30,30 +30,30 @@
 
 .stacked_labeled_control {
   display: block;
-  margin-left: 1rem;
   margin-top: 0.5rem;
+  margin-left: 1rem;
 }
 
 .stacked_labeled_control_label {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   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 {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  max-width: var(--mw-labeled-toggle);
   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 {
-  float: right;
   width: 2rem;
-  margin-right: 1rem;
   padding: 0;
+  margin-right: 1rem;
+  float: right;
 
   &:hover {
     background-color: transparent;
@@ -62,15 +62,15 @@
 
 .labeled_button,
 .labeled_select {
-  float: right;
   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 */
-  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
 }
 
 .labeled_checkbox {
@@ -78,9 +78,9 @@
 }
 
 .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 */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
 
   & > p {
     margin-top: 0.5rem;
@@ -90,10 +90,10 @@
 }
 
 .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 */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  max-width: var(--mw-labeled-toggle);
 
   & > p {
     margin-top: 0.5rem;

package/src/forms/Select.module.css

@@ -12,18 +12,18 @@
   position: relative;
 
   & :global(.ot_select__control) {
-    font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-    font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-    color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-    display: flex;
     position: relative;
-    background-color: var(--c-light-gray);
-    border: none;
+    display: flex;
+    height: 1.75rem;
     padding: 0.25rem 0;
-    outline: none;
+    border: none;
     border-radius: var(--bd-radius-form-field);
-    height: 1.75rem;
+    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) {
@@ -52,11 +52,11 @@
   }
 
   & :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 */
-    color: var(--c-med-gray); /* from legacy --font-form-caption */
     text-transform: uppercase;
-    margin-left: 0.5rem;
   }
 
   & :global(.ot_select__single-value) {
@@ -64,9 +64,9 @@
   }
 
   & :global(.ot_select__group):not(:first-child) {
-    margin-top: 0.25rem;
-    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
     padding-top: 0.25rem;
+    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
+    margin-top: 0.25rem;
   }
 }
 
@@ -91,28 +91,28 @@
 }
 
 .menu {
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
   position: absolute;
+  z-index: 99;
   top: 100%;
-  left: 0;
   right: 0;
-  z-index: 99;
+  left: 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
   background-color: var(--c-white);
-  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
   border-bottom-left-radius: var(--bd-radius-form-field);
   border-bottom-right-radius: var(--bd-radius-form-field);
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  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;
-  background-color: var(--c-white);
+  z-index: 99;
   top: calc(100% - 2px);
-  left: 0;
   right: 0;
-  z-index: 99;
+  left: 0;
   height: 4px;
+  background-color: var(--c-white);
 }