update for breaking blueprintjs style changes

it is no longer feasible to build the blueprintjs css ourselves, so we
just use all of the default variable values and override things using
selectors instead.

src/app/app.scss

@@ -3,44 +3,44 @@
 
 // Custom styling for the App control.
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
+@use '../variables' as pb;
 
 .pb-app {
-    background-color: $pt-app-background-color;
-}
+    background-color: bp.$pt-app-background-color;
 
-.#{$ns}-dark .pb-app {
-    background-color: $pt-dark-app-background-color;
+    .#{bp.$ns}-dark & {
+        background-color: bp.$pt-dark-app-background-color;
+    }
 }
 
 .pb-app-body {
     // height makes everything fit without scrolling
     height: calc(
-        var(--pb-vh, 100vh) - #{$pb-toolbar-height} - #{$pb-status-bar-height}
+        var(--pb-vh, 100vh) - #{pb.$toolbar-height} - #{pb.$status-bar-height}
     ) !important;
 }
 
-.#{$ns}-dark .splitter-layout > .layout-splitter {
-    // make layout splitter match app color scheme
-    background-color: $pt-dark-app-background-color;
-}
-
+// make layout splitter match app color scheme
 .splitter-layout > .layout-splitter {
-    // make layout splitter match app color scheme
-    background-color: $pt-app-background-color;
+    background-color: bp.$pt-divider-black;
+
+    .#{bp.$ns}-dark & {
+        background-color: bp.$pt-dark-divider-white;
+    }
 }
 
 .splitter-layout .layout-pane {
     overflow: hidden;
 }
 
-.#{$ns}-dark .pb-app-terminal-padding {
-    background-color: black;
-}
-
 .pb-app-terminal-padding {
     padding-left: 10px;
     background-color: white;
+
+    .#{bp.$ns}-dark & {
+        background-color: black;
+    }
 }
 
 // hide the docs and resize separator

src/editor/editor.scss

@@ -3,7 +3,7 @@
 
 // Custom styling for the Editor control.
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
 // add "BETA" watermark
 
@@ -19,8 +19,8 @@
     pointer-events: none;
 }
 
-.#{$ns}-dark .pb-editor-placeholder {
-    color: $pt-dark-text-color-muted;
+.#{bp.$ns}-dark .pb-editor-placeholder {
+    color: bp.$pt-dark-text-color-muted;
 }
 
 .pb-editor-tab {
@@ -34,7 +34,7 @@
 .pb-editor-placeholder {
     pointer-events: none;
     width: max-content;
-    color: $pt-text-color-muted;
+    color: bp.$pt-text-color-muted;
     font-style: italic;
     padding-left: 4px;
 }

src/explorer/explorer.scss

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
 .pb-explorer-file-tree {
     // to allow for focus outline
@@ -9,6 +9,6 @@
 }
 
 // reveal file action buttons on hover
-.#{$ns}-tree-node-content:not(:hover) .pb-explorer-file-action-button-group {
+.#{bp.$ns}-tree-node-content:not(:hover) .pb-explorer-file-action-button-group {
     display: none;
 }

src/index.scss

@@ -1,11 +1,16 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2022 The Pybricks Authors
 
+// css files
+@use 'normalize.css/normalize';
+@use '@blueprintjs/core/lib/css/blueprint';
+@use '@blueprintjs/popover2/lib/css/blueprint-popover2';
+
+// sass files
+@use 'sass:color';
 @use 'sass:math';
-@import './variables.scss';
-@import '~normalize.css';
-@import '~@blueprintjs/core/src/blueprint.scss';
-@import '~@blueprintjs/popover2/src/blueprint-popover2.scss';
+@use 'variables' as pb;
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
 :root {
     --pb-vh: 100vh;
@@ -37,78 +42,101 @@ body {
 
 // global style tweaks
 
-.#{$ns}-toast {
+.#{bp.$ns}-toast {
     user-select: text;
     max-width: 700px;
 }
 
-.#{$ns}-button {
+.#{bp.$ns}-button {
     user-select: none;
+
+    &.#{bp.$ns}-intent-primary {
+        background-color: pb.$pybricks-blue;
+
+        &:hover {
+            background-color: color.adjust(pb.$pybricks-blue, $lightness: -5%);
+        }
+
+        &:disabled,
+        &.#{bp.$ns}-disabled {
+            background-color: rgba(pb.$pybricks-blue, 0.5);
+        }
+    }
+
+    &-text > img {
+        display: block;
+    }
+
+    &-group:not(.#{bp.$ns}-minimal) {
+        & > .#{bp.$ns}-popover-wrapper:not(:last-child) .#{bp.$ns}-button,
+        & > .#{bp.$ns}-button:not(:last-child) {
+            margin-right: 0px;
+        }
+    }
 }
 
-a.#{$ns}-button {
+a.#{bp.$ns}-button {
     text-align: left;
 }
 
-.#{$ns}-button-text > img {
-    display: block;
-}
-
-.#{$ns}-button-group:not(.#{$ns}-minimal)
-    > .#{$ns}-popover-wrapper:not(:last-child)
-    .#{$ns}-button,
-.#{$ns}-button-group:not(.#{$ns}-minimal) > .#{$ns}-button:not(:last-child) {
-    margin-right: 0px;
-}
-
-.#{$ns}-dialog-footer-actions {
+.#{bp.$ns}-dialog-footer-actions {
     flex-wrap: wrap;
     row-gap: 10px;
 }
+.#{bp.$ns}-control {
+    & input:checked ~ .#{bp.$ns}-control-indicator,
+    &.#{bp.$ns}-switch input:checked ~ .#{bp.$ns}-control-indicator {
+        background-color: pb.$pybricks-blue;
 
-.#{$ns}-form-group > .#{$ns}-label {
+        .#{bp.$ns}-dark & {
+            background-color: pb.$pybricks-blue;
+        }
+    }
+}
+
+.#{bp.$ns}-form-group > .#{bp.$ns}-label {
     font-weight: bolder;
 }
 
-::-webkit-scrollbar {
-    width: 16px;
-}
-
-.#{$ns}-dark ::-webkit-scrollbar-track {
-    background: $pt-dark-app-background-color;
-}
-
-::-webkit-scrollbar-track {
-    background: $pt-app-background-color;
-}
-
-.#{$ns}-dark ::-webkit-scrollbar-thumb {
-    border-color: $pt-dark-app-background-color;
-    background: $pt-dark-icon-color;
-}
-
-::-webkit-scrollbar-thumb {
-    border-width: 3px;
-    border-style: solid;
-    border-radius: 8px;
-    border-color: $pt-app-background-color;
-    background: $pt-icon-color;
-}
-
-.#{$ns}-dark ::-webkit-scrollbar-thumb:hover {
-    background: $pt-dark-icon-color-hover;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: $pt-icon-color-hover;
-}
-
-.#{$ns}-input-group .#{$ns}-icon {
+.#{bp.$ns}-input-group .#{bp.$ns}-icon {
     margin: 7px;
 }
 
 // don't take up so much space when there is no caret
-.#{$ns}-tree-node-caret-none {
-    // $pt-grid-size / 2 matches padding on .#{$ns}-tree-node-conent
-    min-width: math.div($pt-grid-size, 2);
+.#{bp.$ns}-tree-node-caret-none {
+    // $pt-grid-size / 2 matches padding on .#{bp.$ns}-tree-node-conent
+    min-width: math.div(bp.$pt-grid-size, 2);
+}
+
+::-webkit-scrollbar {
+    width: 16px;
+
+    &-track {
+        background: bp.$pt-app-background-color;
+
+        .#{bp.$ns}-dark & {
+            background: bp.$pt-dark-app-background-color;
+        }
+    }
+
+    &-thumb {
+        border-width: 3px;
+        border-style: solid;
+        border-radius: 8px;
+        border-color: bp.$pt-app-background-color;
+        background: bp.$pt-icon-color;
+
+        &:hover {
+            background: bp.$pt-icon-color-hover;
+        }
+
+        .#{bp.$ns}-dark & {
+            border-color: bp.$pt-dark-app-background-color;
+            background: bp.$pt-dark-icon-color;
+
+            &:hover {
+                background: bp.$pt-dark-icon-color-hover;
+            }
+        }
+    }
 }

src/licenses/license.scss

@@ -3,7 +3,7 @@
 
 // Custom styling for the LicenseDialog control.
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
 .pb-license-dialog {
     width: 1200px;

src/notifications/UnexpectedErrorNotification.scss

@@ -1,10 +1,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
 pre.pb-notification-stack-trace {
-    max-width: $pt-grid-size * 50;
-    max-height: $pt-grid-size * 50;
+    max-width: bp.$pt-grid-size * 50;
+    max-height: bp.$pt-grid-size * 50;
     overflow: auto;
 }

src/settings/settings.scss

@@ -1,11 +1,11 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
+// Copyright (c) 2021-2022 The Pybricks Authors
 
 // Custom styling for the settings controls.
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
-.pb-hub-name-input .#{$ns}-input {
+.pb-hub-name-input .#{bp.$ns}-input {
     width: 200px;
     margin-left: 8px;
 }

src/status-bar/status-bar.scss

@@ -1,15 +1,16 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2021 The Pybricks Authors
+// Copyright (c) 2020-2022 The Pybricks Authors
 
 // Custom styling for the StatusBar control.
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
+@use '../variables' as pb;
 
 .pb-status-bar {
     position: fixed;
-    top: calc(var(--pb-vh, 100vh) - #{$pb-status-bar-height});
-    background-color: $pb-pybricks-blue;
-    height: $pb-status-bar-height;
+    top: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height});
+    background-color: pb.$pybricks-blue;
+    height: pb.$status-bar-height;
     width: 100vw;
     padding-inline: 5px;
     display: flex;
@@ -30,31 +31,31 @@
 
 .pb-battery-indicator-body {
     border-radius: 3px;
-    border: 2px solid $pt-text-color;
-    background-color: $pt-text-color;
+    border: 2px solid bp.$pt-text-color;
+    background-color: bp.$pt-text-color;
     width: 30px;
 }
 
-.pb-battery-indicator-body .#{$ns}-progress-bar {
+.pb-battery-indicator-body .#{bp.$ns}-progress-bar {
     height: 12px;
 }
 
-.pb-battery-indicator-body .#{$ns}-progress-bar,
-.pb-battery-indicator-body .#{$ns}-progress-meter {
+.pb-battery-indicator-body .#{bp.$ns}-progress-bar,
+.pb-battery-indicator-body .#{bp.$ns}-progress-meter {
     border-radius: 3px;
 }
 
 .pb-battery-indicator-tip {
     border-top-right-radius: 1px;
     border-bottom-right-radius: 1px;
-    border: 1px solid $pt-text-color;
-    background-color: $pt-text-color;
+    border: 1px solid bp.$pt-text-color;
+    background-color: bp.$pt-text-color;
     width: 3px;
     height: 8px;
 }
 
-.#{$ns}-dark .pb-battery-indicator-body,
-.#{$ns}-dark .pb-battery-indicator-tip {
-    border-color: $pt-dark-text-color;
-    background-color: $pt-dark-text-color;
+.#{bp.$ns}-dark .pb-battery-indicator-body,
+.#{bp.$ns}-dark .pb-battery-indicator-tip {
+    border-color: bp.$pt-dark-text-color;
+    background-color: bp.$pt-dark-text-color;
 }

src/toolbar/toolbar.scss

@@ -1,16 +1,17 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2021 The Pybricks Authors
+// Copyright (c) 2020-2022 The Pybricks Authors
 
 // Custom styling for the Toolbar control.
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
+@use '../variables' as pb;
 
 .pb-toolbar {
-    height: $pb-toolbar-height;
-    padding: 0 $pt-grid-size * 1.5;
+    height: pb.$toolbar-height;
+    padding: 0 bp.$pt-grid-size * 1.5;
     position: relative;
     width: 100%;
-    z-index: $pt-z-index-content;
+    z-index: bp.$pt-z-index-content;
 }
 
 .pb-toolbar * {
@@ -23,18 +24,18 @@
 
     &.pb-align-left {
         float: left;
-        margin-right: $pt-grid-size * 2;
+        margin-right: bp.$pt-grid-size * 2;
     }
 
     &.pb-align-right {
         float: right;
-        margin-left: $pt-grid-size * 2;
+        margin-left: bp.$pt-grid-size * 2;
     }
 }
 
 // make small buttons more square and slightly smaller
 @media screen and (max-width: 700px) {
-    .pb-toolbar .#{$ns}-button {
+    .pb-toolbar .#{bp.$ns}-button {
         padding: 5px;
     }
 }

src/utils/external-link.scss

@@ -1,13 +1,13 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
+// Copyright (c) 2021-2022 The Pybricks Authors
 
-@import '../variables.scss';
+@use '@blueprintjs/core/lib/scss/variables' as bp;
 
 span.pb-external-link {
     white-space: nowrap;
 }
 
 // override some button magic in case this is used in a button
-.#{$ns}-button .pb-external-link .#{$ns}-icon:first-child:last-child {
+.#{bp.$ns}-button .pb-external-link .#{bp.$ns}-icon:first-child:last-child {
     margin: 0;
 }

src/utils/tree-renderer.scss

@@ -1,11 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-@import '../variables.scss';
-
-// HACK: work around https://github.com/palantir/blueprint/issues/5229
-// TODO: this can be removed when https://github.com/palantir/blueprint/pull/5235 is merged and released
-
-.#{$ns}-focus-disabled .pb-focus-manager-ignore :focus {
-    outline: $pt-outline-color auto 2px !important;
-}

src/utils/tree-renderer.tsx

@@ -6,7 +6,6 @@
 // based on https://github.com/lukasbach/react-complex-tree/blob/239fb0c5f49f3c24e307142fb3d7e828440c3f55/packages/blueprintjs-renderers/src/renderers.tsx
 // Copyright (c) 2021 Lukas Bach
 
-import './tree-renderer.scss';
 import {
     Button,
     Classes,
@@ -44,7 +43,7 @@ export const renderers: Omit<
 > = {
     renderTreeContainer: (props) => (
         <div
-            className={cx(Classes.TREE, 'pb-focus-manager-ignore')}
+            className={cx(Classes.TREE, Classes.FOCUS_STYLE_MANAGER_IGNORE)}
             {...props.containerProps}
         >
             {props.children}

src/variables.scss

@@ -1,19 +1,7 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2021 The Pybricks Authors
+// Copyright (c) 2020-2022 The Pybricks Authors
 
-@import '~@blueprintjs/core/lib/scss/variables.scss';
+$toolbar-height: 72px;
+$status-bar-height: 30px;
 
-// override variables here
-// See https://blueprintjs.com/docs/#core/variables
-
-$pt-font-size: $pt-grid-size * 1.6;
-$pt-font-size-large: $pt-grid-size * 1.8;
-$pt-font-size-small: $pt-grid-size * 1.4;
-
-$pb-toolbar-height: 72px;
-$pb-status-bar-height: 30px;
-
-$pb-pybricks-blue: #0088ce;
-$pt-app-background-color: #e8e8e8;
-$pt-intent-primary: $pb-pybricks-blue;
-$pt-outline-color: rgba($pb-pybricks-blue, 0.6);
+$pybricks-blue: #0088ce;