update sass version and make sure it works (#2580)

other changes, - Introduced a new extraWebpackProps to the getWebPackConfig so deriva-webapps can properly define the external Plotly object. - Added diff-search to npm-publish.yml so it can detect version changes by just looking at the pacakge.json.
informatics-isi-edu · Nov 8, 2024 · aaf173c · aaf173c
1 parent f54b5d6
commit aaf173c
Show file tree

Hide file tree

Showing 32 changed files with 291 additions and 270 deletions.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -19,6 +19,8 @@ jobs:
       - name: Check if version has been updated
         id: version-check
         uses: EndBug/version-check@v2
+        with:
+          diff-search: true
       - name: Publish new version
         if: steps.version-check.outputs.changed == 'true'
         run: |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "react-imask": "^6.5.0-alpha.0",
     "react-plotly.js": "^2.5.1",
     "sass": "^1.80.6",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "^16.0.3",
     "spark-md5": "^3.0.2",
     "typescript": "~5.5.4",
     "uglify-js": "3.9.2",

diff --git a/src/assets/scss/_alerts.scss b/src/assets/scss/_alerts.scss
@@ -12,8 +12,8 @@
 
   // by default we're using red color for code blocks which can be misleading in a success alert
   .alert-success code {
-    color: map-get(variables.$color-map, 'code-block-success');
-    background-color: map-get(variables.$color-map, 'code-block-background-alt');
+    color: map.get(variables.$color-map, 'code-block-success');
+    background-color: map.get(variables.$color-map, 'code-block-background-alt');
   }
 }
 
diff --git a/src/assets/scss/_button-group.scss b/src/assets/scss/_button-group.scss
@@ -19,7 +19,7 @@
     &:active,
     &:focus,
     &:hover {
-      z-index: map-get(variables.$z-index-map, 'button-active');
+      z-index: map.get(variables.$z-index-map, 'button-active');
     }
   }
 }

diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use 'sass:map';
 @use 'variables';
 @use 'helpers';
@@ -53,37 +54,37 @@
   &.chaise-btn.chaise-btn-secondary[disabled],
   &.chaise-btn.chaise-btn-primary.disabled,
   &.chaise-btn.chaise-btn-secondary.disabled {
-    color: map-get(variables.$color-map, 'disabled');
-    background-color: map-get(variables.$color-map, 'disabled-background');
-    border-color: map-get(variables.$color-map, 'disabled-background');
+    color: map.get(variables.$color-map, 'disabled');
+    background-color: map.get(variables.$color-map, 'disabled-background');
+    border-color: map.get(variables.$color-map, 'disabled-background');
   }
 
   &.chaise-btn-tertiary {
-    color: map-get(variables.$color-map, 'primary');
+    color: map.get(variables.$color-map, 'primary');
     border: none;
     background: transparent;
 
     &[disabled],
     &.disabled {
-      color: map-get(variables.$color-map, 'disabled');
+      color: map.get(variables.$color-map, 'disabled');
     }
 
     // the link color is more prominent than our button/control color,
     // we should use this class if we want to make the button to be as prominent as links
     &.chaise-btn-link:not([disabled]):not(.disabled) {
-      color: map-get(variables.$color-map, 'link');
+      color: map.get(variables.$color-map, 'link');
     }
   }
 
   &.chaise-btn-default {
-    color: map-get(variables.$color-map, 'black');
-    border-color: map-get(variables.$color-map, 'border');
+    color: map.get(variables.$color-map, 'black');
+    border-color: map.get(variables.$color-map, 'border');
   }
 
   &.chaise-btn-danger {
-    color: map-get(variables.$color-map, 'white');
-    background-color: map-get(variables.$color-map, 'danger');
-    border-color: darken(map-get(variables.$color-map, 'danger'), 10%);
+    color: map.get(variables.$color-map, 'white');
+    background-color: map.get(variables.$color-map, 'danger');
+    border-color: color.adjust(map.get(variables.$color-map, 'danger'), $lightness: -10%);
   }
 
   &.chaise-download-btn {
@@ -99,7 +100,7 @@
   // this is currently designed mostly for 
   &.chaise-btn-with-indicator:before {
     content: '';
-    background-color: map-get(variables.$color-map, 'primary');
+    background-color: map.get(variables.$color-map, 'primary');
     position: absolute;
     top: -1px;
     right: -1px;

diff --git a/src/assets/scss/_dropdown.scss b/src/assets/scss/_dropdown.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use 'sass:map';
 @use 'variables';
 @use 'helpers';
@@ -17,7 +18,7 @@
     padding: 3px 15px 3px 15px;
     cursor: default;
     font-size: variables.$font-size;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     font-weight: 600;
   }
 
@@ -44,7 +45,7 @@
     border-style: solid;
     border-width: 6px 0 6px 6px;
     /* was 5px 0 5px 5px */
-    border-left-color: map-get(variables.$color-map, 'navbar-dropdown-submenu-icon');
+    border-left-color: map.get(variables.$color-map, 'navbar-dropdown-submenu-icon');
     // to center
     margin: auto;
     margin-right: -15px;
@@ -55,7 +56,7 @@
 
   .dropdown-submenu:hover > a:after,
   .dropdown-submenu:hover > div > div > a:after {
-    border-left-color: map-get(variables.$color-map, 'navbar-dropdown-submenu');
+    border-left-color: map.get(variables.$color-map, 'navbar-dropdown-submenu');
   }
 
   .dropdown-submenu.pull-left {
@@ -133,7 +134,7 @@
     cursor: pointer;
     display: flex;
     justify-content: space-between;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     margin-bottom: 2px;
     padding: 3px 15px 3px 15px;
     line-height: 1.4;
@@ -147,8 +148,8 @@
 
     &:focus,
     &:hover {
-      color: lighten(map-get(variables.$color-map, 'black'), 10%);
-      background-color: darken(map-get(variables.$color-map, 'white'), 10%);
+      color: color.adjust(map.get(variables.$color-map, 'black'), $lightness: 10%);
+      background-color: color.adjust(map.get(variables.$color-map, 'white'), $lightness: -10%);
     }
   }
 
@@ -182,11 +183,11 @@
   .disable-link, .disabled {
     pointer-events: none !important;
     cursor: default !important;
-    color: map-get(variables.$color-map, 'disabled') !important;
+    color: map.get(variables.$color-map, 'disabled') !important;
 
     // the arrow icon
     &:after {
-      border-left-color: map-get(variables.$color-map, 'disabled') !important;
+      border-left-color: map.get(variables.$color-map, 'disabled') !important;
     }
   }
 }

diff --git a/src/assets/scss/_faceting.scss b/src/assets/scss/_faceting.scss
@@ -42,7 +42,7 @@
     // each facet panel
     .facet-panel {
       border-radius: 0;
-      border: 1px solid map-get(variables.$color-map, 'border');
+      border: 1px solid map.get(variables.$color-map, 'border');
 
       // active style
       &.active,
@@ -80,8 +80,8 @@
         flex-direction: row-reverse;
         justify-content: flex-end;
 
-        background-color: map-get(variables.$color-map, 'table-header-background');
-        color: map-get(variables.$color-map, 'black');
+        background-color: map.get(variables.$color-map, 'table-header-background');
+        color: map.get(variables.$color-map, 'black');
 
         // Overriding accordian-button css to align right angle bracket icon to left
         &::after {

diff --git a/src/assets/scss/_input-switch.scss b/src/assets/scss/_input-switch.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use 'variables';
 
 
@@ -48,7 +49,7 @@
 
 .input-switch-longtext {
   .md-editor {
-    border: 1px solid map-get(variables.$color-map, 'border');
+    border: 1px solid map.get(variables.$color-map, 'border');
     border-radius: 4px;
 
     .md-header {
@@ -109,7 +110,7 @@
   }
 
   .hex-sign {
-    color: map-get(variables.$color-map, 'placeholder');
+    color: map.get(variables.$color-map, 'placeholder');
   }
 
   .chaise-color-picker-preview {
@@ -187,15 +188,15 @@
       left: 0;
       height: 100%;
       width: 100%;
-      z-index: map-get(variables.$z-index-map, 'recordedit-foreignkey-input-spinner-backdrop');
-      background: map-get(variables.$color-map, 'disabled-background');
+      z-index: map.get(variables.$z-index-map, 'recordedit-foreignkey-input-spinner-backdrop');
+      background: map.get(variables.$color-map, 'disabled-background');
       opacity: 0.55;
     }
 
     .spinner-border-sm {
       top: 8px;
       position: absolute;
-      z-index: map-get(variables.$z-index-map, 'recordedit-column-cell-spinner');
+      z-index: map.get(variables.$z-index-map, 'recordedit-column-cell-spinner');
     }
   }
 
@@ -223,7 +224,7 @@
     */
     >.chaise-input-group:not([aria-disabled="true"]),
     .dropdown-menu {
-      border: 2px solid map-get(variables.$color-map, 'primary');
+      border: 2px solid map.get(variables.$color-map, 'primary');
       border-radius: 6px;
     }
   }
@@ -275,7 +276,7 @@
           // bootstrap stylesheets have :hover defined before :disabled so disabled always takes precedence
           // redefine with the same hover color to override bootstrap order
           &:hover {
-            background-color: map-get(variables.$color-map, 'recordedit-dropdown-hover');
+            background-color: map.get(variables.$color-map, 'recordedit-dropdown-hover');
           }
         }
 
@@ -341,11 +342,11 @@
 
 .input-switch-error {
   &.input-switch-error-danger {
-    color: map-get(variables.$color-map, 'input-error-message-danger');
+    color: map.get(variables.$color-map, 'input-error-message-danger');
   }
 
   &.input-switch-error-warning {
-    color: map-get(variables.$color-map, 'input-error-message-warning');
+    color: map.get(variables.$color-map, 'input-error-message-warning');
   }
 }