ui: drop blueprintjs 6 (#1073)

packages/ui-default/theme/bp6-compat.css

@@ -0,0 +1,48 @@
+.bp6-progress-bar {
+    background: rgba(95, 107, 124, 0.2);
+    border-radius: 40px;
+    display: block;
+    height: 8px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.bp6-progress-bar .bp6-progress-meter {
+    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%);
+    background-color: rgba(95, 107, 124, 0.8);
+    background-size: 30px 30px;
+    border-radius: 40px;
+    height: 100%;
+    position: absolute;
+    transition: width 200ms cubic-bezier(0.4, 1, 0.75, 0.9);
+    width: 100%;
+}
+
+.bp6-progress-bar.bp6-no-stripes .bp6-progress-meter {
+    background-image: none;
+}
+
+.bp6-dark .bp6-progress-bar {
+    background: rgba(17, 20, 24, 0.5);
+}
+
+.bp6-dark .bp6-progress-bar .bp6-progress-meter {
+    background-color: #8f99a8;
+}
+
+.bp6-progress-bar.bp6-intent-primary .bp6-progress-meter {
+    background-color: #2d72d2;
+}
+
+.bp6-progress-bar.bp6-intent-success .bp6-progress-meter {
+    background-color: #238551;
+}
+
+.bp6-progress-bar.bp6-intent-warning .bp6-progress-meter {
+    background-color: #c87619;
+}
+
+.bp6-progress-bar.bp6-intent-danger .bp6-progress-meter {
+    background-color: #cd4246;
+}

packages/ui-default/theme/dark.styl

@@ -212,10 +212,6 @@ $hover-background-color = #424242
   .menu__link.highlight
     background: rgb(40, 11, 20)
 
-  .bp6-tag.bp6-minimal:not([class*="bp6-intent-"])
-    background-color: rgba(87, 100, 117, .2)
-    color: #d9dfe7
-
   .typo table thead th
     background: #1e1e1e
     background-color: rgb(30, 30, 30)
@@ -391,18 +387,6 @@ $hover-background-color = #424242
       background-color: $main-background-color !important
       border-color: #3d3d3d !important
 
-  .bp6-tab
-    color: #aaa
-
-    &[aria-disabled=true]
-      color: #555
-  
-  .bp6-card,.bp6-dialog,.bp6-dialog-header,.bp6-dialog-footer
-    background-color: #1f1f1f !important
-  
-  .bp6-input-group input
-    border-color: #3d3d3d!important
-
   &.hasjs .collapsed #status:not([data-status="7"]) .compiler-text-mask
     background-image: linear-gradient(to bottom, transparent, #000000 25px)
 

packages/ui-default/theme/default.js

@@ -4,7 +4,9 @@ import 'pickadate/lib/themes/classic.css';
 import 'pickadate/lib/themes/classic.date.css';
 import 'pickadate/lib/themes/classic.time.css';
 import 'katex/dist/katex.min.css';
-import '@blueprintjs/core/lib/css/blueprint.css';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+import 'mantine-contextmenu/styles.css';
 import '@fontsource/fira-code';
 import '@fontsource/source-code-pro';
 import '@fontsource/roboto-mono';
@@ -26,6 +28,7 @@ import 'vj/misc/nothing.styl';
 import 'vj/components/editor/cmeditor.styl';
 import 'vj/components/datepicker/datepicker.styl';
 import './dark.styl';
+import './bp6-compat.css';
 
 // load all page stylesheets
 const pageStyleReq = require.context('../', true, /\.page\.styl$/i);