diff --git a/config/webpack.config.js b/config/webpack.config.js index 3fbff156..06c9670e 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -182,15 +182,6 @@ module.exports = function (webpackEnv) { loader: require.resolve(preProcessor), options: { sourceMap: true, - sassOptions: { - functions: { - // https://github.com/palantir/blueprint/issues/4759#issuecomment-1112218581 - "svg-icon($path, $selectors: null)": require("@vgrid/sass-inline-svg")("blueprints-icons", { - optimize: true, - encodingFormat: "uri", - }), - } - } }, } ); diff --git a/package.json b/package.json index 2fc66cf1..6a355d6d 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "@types/web-locks-api": "^0.0.2", "@types/wicg-file-system-access": "^2020.9.5", "@types/zen-push": "^0.1.1", - "@vgrid/sass-inline-svg": "^1.0.1", "babel-jest": "^27.4.2", "babel-loader": "^8.2.3", "babel-plugin-macros": "^3.0.1", diff --git a/src/app/app.scss b/src/app/app.scss index 28a07435..77b38e7b 100644 --- a/src/app/app.scss +++ b/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 diff --git a/src/editor/editor.scss b/src/editor/editor.scss index 9a1d8f9b..e90bc34f 100644 --- a/src/editor/editor.scss +++ b/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; } diff --git a/src/explorer/explorer.scss b/src/explorer/explorer.scss index 87a3a224..924fa26c 100644 --- a/src/explorer/explorer.scss +++ b/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; } diff --git a/src/index.scss b/src/index.scss index 4fac98b4..1e1c0789 100644 --- a/src/index.scss +++ b/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; + } + } + } } diff --git a/src/licenses/license.scss b/src/licenses/license.scss index b53f7020..3b6cfb7e 100644 --- a/src/licenses/license.scss +++ b/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; diff --git a/src/notifications/UnexpectedErrorNotification.scss b/src/notifications/UnexpectedErrorNotification.scss index c0ac8343..286a790d 100644 --- a/src/notifications/UnexpectedErrorNotification.scss +++ b/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; } diff --git a/src/settings/settings.scss b/src/settings/settings.scss index fa4d7dba..df21a780 100644 --- a/src/settings/settings.scss +++ b/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; } diff --git a/src/status-bar/status-bar.scss b/src/status-bar/status-bar.scss index e823749a..e6203e15 100644 --- a/src/status-bar/status-bar.scss +++ b/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; } diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss index b0e6783f..45f40a85 100644 --- a/src/toolbar/toolbar.scss +++ b/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; } } diff --git a/src/utils/external-link.scss b/src/utils/external-link.scss index 8da43998..b0719ef1 100644 --- a/src/utils/external-link.scss +++ b/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; } diff --git a/src/utils/tree-renderer.scss b/src/utils/tree-renderer.scss deleted file mode 100644 index a2b8c2c5..00000000 --- a/src/utils/tree-renderer.scss +++ /dev/null @@ -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; -} diff --git a/src/utils/tree-renderer.tsx b/src/utils/tree-renderer.tsx index 22699e74..a8b400ff 100644 --- a/src/utils/tree-renderer.tsx +++ b/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) => (