frontend/sass: update sass+sass-loader and refactor all imports to be @use and extract @Mixins

Author: haraldschilly

src/packages/frontend/_account-button.sass

@@ -3,14 +3,14 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-@import colors
+@use 'colors'
 
 .cocalc-account-button
   &:hover
     text-decoration: none
-    background-color: $COL_GRAY_LL
+    background-color: colors.$COL_GRAY_LL
     outline: none
   &:focus
     text-decoration: none
-    background-color: $COL_GRAY_LL
+    background-color: colors.$COL_GRAY_LL
     outline: none

src/packages/frontend/_antd_fix.sass

@@ -8,20 +8,20 @@
 // This is mainly meant to be temporary, so that we keep the
 // overall global bootstrap style.
 
-@import colors
+@use 'colors'
 
 // make the color consistent with antd again, since bootstrap sets
 // it to something else.  We want this to be consistent with our nextjs
 // landing pages.
 a
-  color: $COL_ANTD_LINK_BLUE
+  color: colors.$COL_ANTD_LINK_BLUE
 
 html
   overflow: hidden
 
 .ant-popover-content
   .ant-popover-arrow
-    border-color: $COL_GRAY_L !important
+    border-color: colors.$COL_GRAY_L !important
     z-index: -1 !important
 
 .ant-popover-inner-content>.cocalc-account-button-dropdown-links

src/packages/frontend/_bootstrap.sass

@@ -3,6 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use 'colors'
 
 // There is a bootstrap css that is setting font-weight for label to 700. This
 // sets the font-weight back to the normal default:
@@ -46,7 +47,7 @@ pre
   div
     color            : white
     position         : absolute
-    background-color : $COL_BLUE_D
+    background-color : colors.$COL_BLUE_D
     min-height       : 100px
     width            : 350px
     border-radius    : 5px

src/packages/frontend/_examples.sass

@@ -3,11 +3,14 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use 'colors'
+@use 'mixins'
+
 $selector-height: 180px
 $code-height: 230px
 
 .webapp-examples
-  +disable-user-select
+  +mixins.disable-user-select
 
   .modal-header
     white-space : nowrap
@@ -44,11 +47,11 @@ $code-height: 230px
             margin: 0
 
       > div > ul.list-group
-        border          : 1px solid $COL_GRAY_DDD
+        border          : 1px solid colors.$COL_GRAY_DDD
         border-radius   : 5px
         > li
           border        : none
-          border-bottom : 1px solid $COL_GRAY_LL
+          border-bottom : 1px solid colors.$COL_GRAY_LL
           margin        : 0
           border-radius : 0
 
@@ -57,8 +60,8 @@ $code-height: 230px
       padding           : 0px
       height            : $code-height
       overflow          : auto
-      border-color      : $COL_GRAY_DDD
-      +enable-user-select
+      border-color      : colors.$COL_GRAY_DDD
+      +mixins.enable-user-select
       .attr,
       .attr a
         font-size  : 9px
@@ -70,7 +73,7 @@ $code-height: 230px
     padding    : 10px
     text-align : left
     > .contrib-link
-      color: $COL_GRAY
+      color: colors.$COL_GRAY
 
   span.badge
     background-color : #eee

src/packages/frontend/_idle.sass

@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use 'colors'
+
 #cocalc-idle-notification
   z-index    : 9999
   position   : fixed
@@ -17,7 +19,7 @@
   div
     color            : white
     position         : absolute
-    background-color : $COL_BLUE_D
+    background-color : colors.$COL_BLUE_D
     min-height       : 100px
     width            : 350px
     border-radius    : 5px

src/packages/frontend/_jupyter.sass

@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use 'colors'
+
 // I just noticed there is another version of this file in jupyter/_jupyter.sass
 // They need to be carefully merged into one!  But not today.
 
@@ -78,7 +80,7 @@
 
 .cc-jupyter-snippet
   > div.ant-collapse-header
-    color: $COL_GRAY !important
+    color: colors.$COL_GRAY !important
 
 .cc-jupyter-snippet-collapse
   .cc-jupyter-snippet
@@ -90,7 +92,7 @@
   background: white
   margin: 0 10px 10px 10px
   padding: 10px
-  border: 1px solid $COL_GRAY_L
+  border: 1px solid colors.$COL_GRAY_L
   border-radius: 3px
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.22)
   > pre
@@ -102,20 +104,20 @@
     display: inline
 
 // katex 0.13.5 somehow causes formulas to be displayed wider than the width of the output
-// adding ugly horizontal scrollbars. this eliminates that.
+// adding ugly horizontal scrollbar. this eliminates that.
 .cocalc-jupyter-rendered
   .katex-display>.katex>.katex-html
-    // display: contents // this did work, but it's some experimenal new display option
+    // display: contents // this did work, but it's some experimental new display option
     margin: 1em .5em // margin works as well, but we also have to set it for mathjax to make it look consistent
   .katex
     padding: 0 2.5px
 
 // this seems to be missing from jupyter widgets, but is used to implement the according
 //   https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#accordion
-// I.e., without this css rule, accordian is just broken.
+// I.e., without this css rule, accordion is just broken.
 .lm-Widget.lm-mod-hidden
   display: none !important
 
 .cc-jupyter-buttonbar-dropdown
   .ant-dropdown-menu-item
-    color: $COL_GRAY_D !important
+    color: colors.$COL_GRAY_D !important

src/packages/frontend/_mixins.sass

@@ -0,0 +1,16 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+=user-select($val:"none")
+  -webkit-user-select : #{$val}
+  -moz-user-select    : #{$val}
+  -ms-user-select     : #{$val}
+  user-select         : #{$val}
+
+=disable-user-select
+  +user-select(none)
+
+=enable-user-select
+  +user-select(text)

src/packages/frontend/_projects.sass

@@ -3,6 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use 'colors'
+
 // #smc-file-tabs-* used in project_page.cjsx
 
 // ProjectPage
@@ -23,18 +25,18 @@
 
 .list-group-header
   list-style: none
-  color: $COL_GRAY
+  color: colors.$COL_GRAY
   padding-left: 5px
   margin-top: 5px
-  border-top: 1px solid $COL_GRAY_LL
+  border-top: 1px solid colors.$COL_GRAY_LL
   padding-top: 10px
   &:first-child
     margin-top: 5px
     padding-top: 0px
     border-top: none
 
 .smc-file-tab-floating
-  background-color: $COL_BS_BLUE_BGRND
+  background-color: colors.$COL_BS_BLUE_BGRND
   border-radius: 5px 5px 0px 0px
   box-sizing: border-box
   color: rgb(51, 51, 51)
@@ -76,7 +78,7 @@
   flex: 1 0 auto
   > div,
   > nav
-    background-color: $COL_GRAY_LLL
+    background-color: colors.$COL_GRAY_LLL
     border-radius: 3px
 
 // The !important below are because we are directly overriding
@@ -91,7 +93,7 @@
 
 .cc-path-navigator,
 .cc-project-flyout-path-navigator
-  color: $COL_BS_BLUE_TEXT
+  color: colors.$COL_BS_BLUE_TEXT
   span
     cursor: pointer
 
@@ -111,7 +113,7 @@
     margin-left: 2px
 
 .cc-path-navigator-history
-  color: $COL_GRAY
+  color: colors.$COL_GRAY
 .cc-path-navigator-active
   font-weight: bold
   color: black
@@ -131,14 +133,14 @@
 li.cc-project-home-recent-files
   cursor: pointer
   &:hover
-    background-color: $COL_GRAY_LLL
+    background-color: colors.$COL_GRAY_LLL
 
 div.cc-project-flyout-dragbar:hover
-  background-color: $COL_GRAY_L
+  background-color: colors.$COL_GRAY_L
 
 .cc-project-log-history-entry:hover
-  cusor: pointer
-  background-color: $COL_GRAY_LLL
+  cursor: pointer
+  background-color: colors.$COL_GRAY_LLL
 
 .cc-project-flyout-files-panel,
 .cc-project-flyout-settings-panel

src/packages/frontend/_projects_nav.sass

@@ -3,17 +3,20 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+@use 'colors'
+@use 'mixins'
+
 .navbar-default
-  background-color: $COL_TOP_BAR_BG
-  border-color:     $COL_TOP_BAR_BG
+  background-color: colors.$COL_TOP_BAR_BG
+  border-color:     colors.$COL_TOP_BAR_BG
   border-width:     0 0 0 0
 
 =nav-tab-button-styles
   padding : 0px
-  +disable-user-select
-  color: $COL_TOP_BAR_TEXT
+  +mixins.disable-user-select
+  color: colors.$COL_TOP_BAR_TEXT
   &:hover
-    color: $COL_TOP_BAR_TEXT
+    color: colors.$COL_TOP_BAR_TEXT
 
 
 .smc-top-bar
@@ -27,7 +30,7 @@
   z-index         : 100
   border-radius   : 0
   width           : 100%
-  background-color: $COL_GRAY_L0
+  background-color: colors.$COL_GRAY_L0
   > ul > li > a
     +nav-tab-button-styles
 
@@ -38,12 +41,12 @@
 .smc-top-bar.navbar-default .navbar-nav>.active>a:focus,
 .smc-top-bar.navbar-default .navbar-nav>li>a:focus,
 .smc-top-bar.navbar-default .navbar-nav>.active>a:hover
-  background-color : $COL_TOP_BAR_ACTIVE
-  color            : $COL_TOP_BAR_TEXT_ACTIVE
+  background-color : colors.$COL_TOP_BAR_ACTIVE
+  color            : colors.$COL_TOP_BAR_TEXT_ACTIVE
 
 .smc-top-bar.navbar-default .navbar-nav>li>a:hover
-  background-color : $COL_TOP_BAR_HOVER
-  color            : $COL_TOP_BAR_TEXT
+  background-color : colors.$COL_TOP_BAR_HOVER
+  color            : colors.$COL_TOP_BAR_TEXT
 
 .smc-project-tab-floating
   background-color    : rgb(255, 255, 255)
@@ -79,4 +82,4 @@
     padding: 2px 10px !important
 
 .cocalc-top-bar-element:hover
-  background-color: $COL_TOP_BAR_HOVER
+  background-color: colors.$COL_TOP_BAR_HOVER

src/packages/frontend/admin/_style.sass

@@ -1,7 +1,9 @@
+@use '../colors'
+
 .cocalc-highlight-saved-token
-  background-color: $COL_BS_GREEN_LL
+  background-color: colors.$COL_BS_GREEN_LL
   > td.ant-table-column-sort
-    background-color: $COL_BS_GREEN_LL
+    background-color: colors.$COL_BS_GREEN_LL
 
 .admin-site-setting-popover-help
   table