synapse-react-client 2.0.53 → 2.0.57

package/dist/style/abstracts/_variables.scss

@@ -1,7 +1,29 @@
+@use 'sass:color';
+@use 'sass:map';
+
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
 
+// Colors defined by design: https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Synapse-Style-%26-Component-Library?node-id=77%3A1232
+$colors: (
+  'gray-1000': #22252a,
+  'gray-900': #353a3f,
+  'gray-800': #4a5056,
+  'gray-700': #878e95,
+  'gray-600': #aeb5bc,
+  'gray-500': #d0d4d9,
+  'gray-400': #dfe2e6,
+  'gray-300': #eaecee,
+  'gray-200': #f1f3f5,
+  'gray-100': #fbfbfc,
+  'white': #ffffff,
+  'success': #32a330,
+  'info': #017fa5,
+  'warning': #cc9f00,
+  'error': #c13415,
+) !default;
+
 $gray-dark: #dcdcdc !default;
 $gray-light: #f9f9f9 !default;
 $background-color-gray: $gray-light !default;
@@ -51,37 +73,28 @@ $primary-action-color-active: adjust-color(
   $lightness: 0%
 ) !default;
 
-$primary-action-color-900: adjust-color(
-  $primary-action-color,
-  $saturation: 24%,
-  $lightness: -18%
-) !default;
-
-$primary-action-color-700: adjust-color(
-  $primary-action-color,
-  $saturation: 11%,
-  $lightness: -8%
-) !default;
-
-$primary-action-color-500: adjust-color(
-  $primary-action-color,
-  $saturation: 29%,
-  $lightness: -4%
-) !default;
-
-$primary-action-color-300: adjust-color(
-  $primary-action-color,
-  $saturation: -3%,
-  $lightness: 10%
+$primary-color-palette: (
+  100: adjust-color($primary-action-color, $saturation: -25%, $lightness: 50%),
+  200: adjust-color($primary-action-color, $saturation: -13%, $lightness: 20%),
+  300: adjust-color($primary-action-color, $saturation: -3%, $lightness: 10%),
+  400: adjust-color($primary-action-color, $saturation: -1%, $lightness: 5%),
+  500: $primary-action-color,
+  600: adjust-color($primary-action-color, $saturation: 5%, $lightness: -4%),
+  700: adjust-color($primary-action-color, $saturation: 11%, $lightness: -8%),
+  800: adjust-color($primary-action-color, $saturation: 18%, $lightness: -10%),
+  900: adjust-color($primary-action-color, $saturation: 24%, $lightness: -18%),
 ) !default;
 
-$primary-color-palette: (
-  base: $primary-action-color,
-  active: $primary-action-color-active,
-  300: $primary-action-color-300,
-  500: $primary-action-color-500,
-  700: $primary-action-color-700,
-  900: $primary-action-color-900,
+$secondary-color-palette: (
+  100: adjust-color($secondary-action-color, $saturation: -25%, $lightness: 50%),
+  200: adjust-color($secondary-action-color, $saturation: -13%, $lightness: 20%),
+  300: adjust-color($secondary-action-color, $saturation: -3%, $lightness: 10%),
+  400: adjust-color($secondary-action-color, $saturation: -1%, $lightness: 5%),
+  500: $secondary-action-color,
+  600: adjust-color($secondary-action-color, $saturation: 5%, $lightness: -4%),
+  700: adjust-color($secondary-action-color, $saturation: 11%, $lightness: -8%),
+  800: adjust-color($secondary-action-color, $saturation: 18%, $lightness: -10%),
+  900: adjust-color($secondary-action-color, $saturation: 24%, $lightness: -18%),
 ) !default;
 
 /// Breakpoints map

package/dist/style/base/_icons.scss

@@ -1,4 +1,5 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 .SRC-arrow-icon,
 .Icon-Plus,
@@ -12,12 +13,12 @@
 .SRC-r-icon,
 .SRC-python-icon {
   path {
-    fill: SRC.$primary-action-color-500;
+    fill: map.get(SRC.$primary-color-palette, 500);
   }
 }
 
 .SRC-terminal-icon > rect.outer {
-  fill: SRC.$primary-action-color-500;
+  fill: map.get(SRC.$primary-color-palette, 500);
 }
 
 .styled-svg-wrapper {
@@ -52,12 +53,12 @@
   &.themed {
     path,
     circle {
-      fill: SRC.$primary-action-color-500;
+      fill: map.get(SRC.$primary-color-palette, 500);
     }
     .icon-kinomics,
     .icon-proteomics {
       path {
-        stroke: SRC.$primary-action-color-500;
+        stroke: map.get(SRC.$primary-color-palette, 500);
         fill: none;
       }
     }
@@ -65,7 +66,7 @@
       .styled-svg-wrapper {
         display: inline-flex;
         padding: 2px;
-        background-color: rgba(SRC.$primary-action-color-500, 0.1);
+        background-color: rgba(map.get(SRC.$primary-color-palette, 500), 0.1);
         border-radius: 50%;
         margin: 0 2px;
       }
@@ -75,7 +76,7 @@
 
 .SRC-Sort-Icon-Active {
   padding: 2px;
-  background-color: SRC.$primary-action-color-500;
+  background-color: map.get(SRC.$primary-color-palette, 500);
   path {
     fill: white;
   }
@@ -85,7 +86,7 @@
   padding: 2px;
 
   path {
-    fill: SRC.$primary-action-color-500;
+    fill: map.get(SRC.$primary-color-palette, 500);
   }
 }
 

package/dist/style/bootstrap4_backports/_base-import.scss

@@ -1,5 +1,6 @@
 @use '../abstracts/variables' as SRC;
 @use 'sass:color';
+@use 'sass:map';
 
 .bootstrap-4-backport {
   //initial bootstrap config based on Synapse design
@@ -158,4 +159,49 @@
       $active-background: SRC.$gray-light
     );
   }
+
+  // Primary button based on Synapse Design System
+  // See https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Synapse-Style-%26-Component-Library?node-id=53%3A1189
+  .btn-sds-primary {
+    @include button-variant(
+      $background: map.get(SRC.$primary-color-palette, 500),
+      $border: map.get(SRC.$primary-color-palette, 500),
+      $hover-background: map.get(SRC.$primary-color-palette, 600),
+      $hover-border: map.get(SRC.$primary-color-palette, 600),
+      $active-background: map.get(SRC.$primary-color-palette, 700),
+      $active-border: map.get(SRC.$primary-color-palette, 700)
+    );
+    border-radius: 0px;
+    font-weight: 900;
+    &:hover {
+      box-shadow: none; // ?
+    }
+
+    &:disabled {
+      color: map.get(SRC.$colors, 'gray-600');
+      background-color: map.get(SRC.$colors, 'gray-400');
+      border-color: map.get(SRC.$colors, 'gray-400');
+    }
+  }
+
+  // Secondary button based on Synapse Design System
+  // See https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Synapse-Style-%26-Component-Library?node-id=53%3A1216
+  .btn-outline {
+    @include button-outline-variant(
+      $color: map.get(SRC.$primary-color-palette, 500),
+      $color-hover: map.get(SRC.$primary-color-palette, 600),
+      $active-background: rgba(255, 255, 255, 0),
+      $active-border: map.get(SRC.$primary-color-palette, 700)
+    );
+    border-radius: 0px;
+    font-weight: 900;
+    &:hover {
+      box-shadow: none; // ?
+    }
+
+    &:disabled {
+      color: map.get(SRC.$colors, 'gray-600');
+      border-color: map.get(SRC.$colors, 'gray-400');
+    }
+  }
 }

package/dist/style/components/_carousel.scss

@@ -1,4 +1,5 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 .SRC-Carousel {
   padding-top: 10px;
@@ -31,14 +32,14 @@
       width: 16px;
       height: 16px;
       background: none;
-      border: 1px solid SRC.$primary-action-color-500;
+      border: 1px solid map.get(SRC.$primary-color-palette, 500);
     }
 
     .BrainhubCarousel__dot--selected::before {
       width: 16px;
       height: 16px;
-      background-color: SRC.$primary-action-color-500;
-      border: 1px solid SRC.$primary-action-color-500;
+      background-color: map.get(SRC.$primary-color-palette, 500);
+      border: 1px solid map.get(SRC.$primary-color-palette, 500);
     }
   }
 }

package/dist/style/components/_global-alert.scss

@@ -26,6 +26,9 @@
     .messageArea {
       max-width: 700px;
       grid-row: 1 / span 1;
+      p {
+        margin-bottom: 0px;
+      }
     }
     .iconForeground {
       color: white;

package/dist/style/components/_project-view-card.scss

@@ -1,4 +1,5 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 .ProjectViewCard {
   word-wrap: break-word;
@@ -24,7 +25,7 @@
   &__ImagePlaceholder {
     width: 100%;
     height: 25%;
-    background: SRC.$primary-action-color-300;
+    background: map.get(SRC.$primary-color-palette, 300);
   }
 
   &__ProjectName {

package/dist/style/components/_query-filter.scss

@@ -1,11 +1,12 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 .QueryFilter {
   &__title {
     font-weight: bold;
   }
   padding: 2rem;
-  background-color: rgba(SRC.$primary-action-color-500, 0.05);
+  background-color: rgba(map.get(SRC.$primary-color-palette, 500), 0.05);
   &__facet {
     margin: 2rem 0;
     &:first-child {

package/dist/style/components/_query-wrapper-plot-nav.scss

@@ -122,46 +122,6 @@
     margin-bottom: 10px;
   }
 
-  .TopLevelControls {
-    h3 {
-      display: flex;
-      justify-content: space-between;
-      font-weight: bold;
-      margin-top: 0px;
-    }
-    padding-top: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    margin-bottom: 15px;
-    &__showhidefacetfilters {
-      display: none;
-    }
-    .QueryWrapperPlotNav__querycount {
-      display: inline-flex;
-      align-items: center;
-    }
-    .QueryWrapperPlotNav__actions {
-      display: inline-flex;
-      align-items: center;
-      .ElementWithTooltip {
-        padding: 5px;
-        margin: 0 1px;
-        border: 0;
-        border-radius: 0;
-
-        &:active:focus,
-        &:focus {
-          outline: none;
-        }
-
-        // icons on the top level control bar should have total area 36x36 (26px dim + 10px padding)
-        svg {
-          width: 26px;
-          height: 26px;
-        }
-      }
-    }
-  }
   .SRC-portalCard:first-child {
     margin-top: 0px;
   }
@@ -175,3 +135,44 @@
     }
   }
 }
+
+.TopLevelControls {
+  h3 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    margin-top: 0px;
+  }
+  padding-top: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 15px;
+  &__showhidefacetfilters {
+    display: none;
+  }
+  &__querycount {
+    display: inline-flex;
+    align-items: center;
+  }
+  &__actions {
+    display: inline-flex;
+    align-items: center;
+    .ElementWithTooltip {
+      padding: 5px;
+      margin: 0 1px;
+      border: 0;
+      border-radius: 0;
+
+      &:active:focus,
+      &:focus {
+        outline: none;
+      }
+
+      // icons on the top level control bar should have total area 36x36 (26px dim + 10px padding)
+      svg {
+        width: 26px;
+        height: 26px;
+      }
+    }
+  }
+}

package/dist/style/components/entity_finder/_entity-finder.scss

@@ -1,5 +1,6 @@
 @use '../../abstracts/variables' as SRC;
 @use 'sass:color';
+@use 'sass:map';
 
 $-border-size: 1px;
 $-header-height: 45px;
@@ -51,7 +52,7 @@ $-splitter-width: 12px;
       top: 1px;
     }
     .ClearSearchIcon {
-      color: SRC.$primary-action-color-500;
+      color: map.get(SRC.$primary-color-palette, 500);
       cursor: pointer;
       position: relative;
       left: -20px;

package/dist/style/components/entity_finder/_selection-pane.scss

@@ -1,5 +1,6 @@
 @use '../../abstracts/variables' as SRC;
 @use 'sass:color';
+@use 'sass:map';
 
 .EntityFinderSelectionPane {
   width: 100%;
@@ -28,7 +29,7 @@
     }
 
     &__DeselectButton {
-      color: SRC.$primary-action-color-500;
+      color: map.get(SRC.$primary-color-palette, 500);
       cursor: pointer;
     }
   }