From 11425d9a17a5a3684170cbc6c33d33c071fca43f Mon Sep 17 00:00:00 2001 From: Justin Hopper Date: Thu, 28 Nov 2024 22:00:16 -0600 Subject: [PATCH] Switch from @import to @use --- .stylelintrc | 2 +- packages/core/src/_dark-theme.scss | 1 + packages/core/src/_reset.scss | 5 +- packages/core/src/_typography.scss | 13 +- .../core/src/accessibility/_focus-states.scss | 2 + packages/core/src/blueprint.scss | 15 +- packages/core/src/common/_color-aliases.scss | 1 + packages/core/src/common/_flex.scss | 1 + packages/core/src/common/_mixins.scss | 6 +- .../core/src/common/_react-transition.scss | 2 + .../core/src/common/_typography-colors.scss | 8 +- .../core/src/common/_variables-extended.scss | 2 +- packages/core/src/common/_variables.scss | 4 +- packages/core/src/components/_index.scss | 92 ++++----- .../core/src/components/alert/_alert.scss | 2 +- .../components/breadcrumbs/_breadcrumbs.scss | 6 +- .../src/components/button/_button-group.scss | 6 +- .../core/src/components/button/_button.scss | 10 +- .../core/src/components/button/_common.scss | 11 +- .../core/src/components/callout/_callout.scss | 7 +- .../src/components/card-list/card-list.scss | 5 +- .../src/components/card/_card-variables.scss | 5 +- packages/core/src/components/card/_card.scss | 5 +- .../src/components/collapse/_collapse.scss | 2 +- .../context-menu/_context-menu.scss | 2 +- .../control-card/_control-card.scss | 3 +- .../src/components/dialog/_dialog-body.scss | 3 + .../src/components/dialog/_dialog-footer.scss | 5 + .../core/src/components/dialog/_dialog.scss | 10 +- .../components/dialog/_multistep-dialog.scss | 12 +- .../core/src/components/divider/_divider.scss | 3 +- .../core/src/components/drawer/_drawer.scss | 10 +- .../editable-text/_editable-text.scss | 6 +- .../entity-title/_entity-title.scss | 5 +- .../core/src/components/forms/_common.scss | 8 +- .../src/components/forms/_control-group.scss | 10 +- .../core/src/components/forms/_controls.scss | 8 +- .../src/components/forms/_file-input.scss | 8 +- .../src/components/forms/_form-group.scss | 7 +- .../core/src/components/forms/_index.scss | 21 +- .../src/components/forms/_input-group.scss | 10 +- .../core/src/components/forms/_input.scss | 4 +- .../core/src/components/forms/_label.scss | 4 +- .../src/components/forms/_numeric-input.scss | 4 +- .../core/src/components/hotkeys/_hotkeys.scss | 5 +- .../src/components/html-select/_common.scss | 5 +- .../components/html-select/_html-select.scss | 9 +- .../components/html-table/_html-table.scss | 4 +- .../src/components/icon/_icon-mixins.scss | 4 +- packages/core/src/components/icon/_icon.scss | 10 +- .../core/src/components/menu/_common.scss | 9 +- packages/core/src/components/menu/_menu.scss | 14 +- .../core/src/components/menu/_submenu.scss | 7 +- .../core/src/components/navbar/_navbar.scss | 5 +- .../non-ideal-state/_non-ideal-state.scss | 7 +- .../overflow-list/_overflow-list.scss | 2 + .../core/src/components/overlay/_overlay.scss | 5 +- .../components/panel-stack/_panel-stack.scss | 8 +- .../panel-stack2/_panel-stack2.scss | 8 +- .../core/src/components/popover/_common.scss | 5 +- .../popover/_popover-in-button-group.scss | 5 +- .../popover/_popover-in-control-group.scss | 2 +- .../components/popover/_popover-in-label.scss | 2 +- .../popover/_popover-in-submenu.scss | 5 +- .../components/popover/_popover-in-tree.scss | 2 +- .../core/src/components/popover/_popover.scss | 15 +- .../core/src/components/portal/_portal.scss | 2 + .../src/components/progress-bar/_common.scss | 2 +- .../progress-bar/_progress-bar.scss | 6 +- .../core/src/components/section/_section.scss | 4 +- .../segmented-control/_segmented-control.scss | 4 +- .../core/src/components/skeleton/_common.scss | 3 +- .../src/components/skeleton/_skeleton.scss | 3 +- .../core/src/components/slider/_common.scss | 8 +- .../core/src/components/slider/_slider.scss | 9 +- .../core/src/components/spinner/_spinner.scss | 5 +- packages/core/src/components/tabs/_tabs.scss | 6 +- .../tag-input/_resizable-input.scss | 4 +- .../src/components/tag-input/_tag-input.scss | 10 +- packages/core/src/components/tag/_common.scss | 10 +- .../src/components/tag/_compound-tag.scss | 9 +- packages/core/src/components/tag/_tag.scss | 6 +- .../core/src/components/toast/_toast.scss | 6 +- .../core/src/components/tooltip/_common.scss | 3 + .../core/src/components/tooltip/_tooltip.scss | 11 +- packages/core/src/components/tree/_tree.scss | 11 +- packages/core/src/docs/variables.md | 2 +- .../overlay2/overlay2-test-debugging.scss | 4 +- packages/datetime/src/_common.scss | 6 +- packages/datetime/src/blueprint-datetime.scss | 8 +- .../src/components/date-input/_dateinput.scss | 2 +- .../components/date-picker/_datepicker.scss | 9 +- .../date-range-picker/_daterangepicker.scss | 4 +- .../components/time-picker/_timepicker.scss | 9 +- .../datetime/test/test-debugging-styles.scss | 4 +- .../datetime2/src/blueprint-datetime2.scss | 8 +- .../common/_react-day-picker-overrides.scss | 6 +- .../date-picker3/_date-picker3-caption.scss | 6 +- .../date-picker3/_date-picker3.scss | 8 +- .../_date-range-picker3.scss | 11 +- packages/demo-app/src/index.scss | 4 +- packages/demo-app/src/styles/_examples.scss | 2 +- packages/docs-app/src/_main.scss | 48 +++++ packages/docs-app/src/index.scss | 41 +--- packages/docs-app/src/styles/_colors.scss | 7 +- packages/docs-app/src/styles/_examples.scss | 13 +- packages/docs-app/src/styles/_icons.scss | 5 +- packages/docs-app/src/styles/_nav.scss | 5 + packages/docs-app/src/styles/_resources.scss | 5 + packages/docs-app/src/styles/_welcome.scss | 5 + packages/docs-theme/src/docs-theme.scss | 22 +-- packages/docs-theme/src/styles/_api.scss | 5 +- packages/docs-theme/src/styles/_banner.scss | 9 +- .../docs-theme/src/styles/_code-block.scss | 2 +- .../docs-theme/src/styles/_code-example.scss | 3 + packages/docs-theme/src/styles/_content.scss | 8 +- packages/docs-theme/src/styles/_examples.scss | 6 + packages/docs-theme/src/styles/_layout.scss | 9 +- packages/docs-theme/src/styles/_navbar.scss | 7 +- .../docs-theme/src/styles/_navigator.scss | 2 + .../docs-theme/src/styles/_overrides.scss | 2 + packages/docs-theme/src/styles/_props.scss | 7 + .../docs-theme/src/styles/_variables.scss | 5 +- packages/icons/src/blueprint-icons.scss | 4 +- .../icons/src/templates/_lib_variables.scss | 4 +- packages/landing-app/src/_main.scss | 179 ++++++++++++++++++ packages/landing-app/src/index.scss | 172 +---------------- packages/select/src/blueprint-select.scss | 2 +- packages/select/src/common/_variables.scss | 6 +- packages/select/src/components/_index.scss | 8 +- .../multi-select/_multi-select.scss | 5 +- .../src/components/omnibar/_omnibar.scss | 7 +- .../select/src/components/select/_select.scss | 5 +- .../src/components/suggest/_suggest.scss | 3 +- packages/table-dev-app/src/_main.scss | 173 +++++++++++++++++ packages/table-dev-app/src/index.scss | 170 +---------------- packages/table/src/cell/_borders.scss | 5 +- packages/table/src/cell/_cell.scss | 9 +- packages/table/src/cell/_common.scss | 5 +- packages/table/src/cell/formats/_formats.scss | 6 +- packages/table/src/common/_loading.scss | 6 +- packages/table/src/common/_variables.scss | 5 +- packages/table/src/headers/_common.scss | 5 + packages/table/src/headers/_headers.scss | 11 +- .../table/src/interactions/_interactions.scss | 4 +- packages/table/src/layers/_layers.scss | 7 +- packages/table/src/quadrants/_quadrants.scss | 6 +- packages/table/src/table.scss | 26 +-- 148 files changed, 1015 insertions(+), 743 deletions(-) create mode 100644 packages/docs-app/src/_main.scss create mode 100644 packages/landing-app/src/_main.scss create mode 100644 packages/table-dev-app/src/_main.scss diff --git a/.stylelintrc b/.stylelintrc index f4ed3412233..294c5664c1f 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -12,7 +12,7 @@ "color-function-notation": "legacy", "declaration-empty-line-before": null, "no-invalid-position-at-import-rule": [true, { - "ignoreAtRules": ["use"] + "ignoreAtRules": ["use", "forward"] }], "scss/media-feature-value-dollar-variable": null, "selector-max-universal": 1 diff --git a/packages/core/src/_dark-theme.scss b/packages/core/src/_dark-theme.scss index 11d15b31492..a68c7cb9735 100644 --- a/packages/core/src/_dark-theme.scss +++ b/packages/core/src/_dark-theme.scss @@ -1,5 +1,6 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "common/variables" as *; .#{$ns}-dark { // this tells the browser to use a dark theme UI, which is most useful for enabling diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss index b5cb3c51b6f..196e84dfe11 100644 --- a/packages/core/src/_reset.scss +++ b/packages/core/src/_reset.scss @@ -1,8 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "common/variables"; -@import "common/mixins"; +@use "common/variables" as *; +@use "common/color-aliases" as *; +@use "common/mixins" as *; // Apply a natural box layout model to all elements, but allow components to change as necessary html { diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss index 4557b1d2c2a..70305536682 100644 --- a/packages/core/src/_typography.scss +++ b/packages/core/src/_typography.scss @@ -1,11 +1,14 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "common/variables"; -@import "common/variables-extended"; -@import "common/mixins"; -@import "common/typography-colors"; -@import "components/icon/icon"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "common/variables" as *; +@use "common/variables-extended" as *; +@use "common/color-aliases" as *; +@use "common/mixins" as *; +@use "common/typography-colors" as *; +@use "components/icon/icon" as *; +@use "components/html-table/html-table" as *; @include pt-typography-colors(); /* diff --git a/packages/core/src/accessibility/_focus-states.scss b/packages/core/src/accessibility/_focus-states.scss index e9383ab3a63..9092f0f26d2 100644 --- a/packages/core/src/accessibility/_focus-states.scss +++ b/packages/core/src/accessibility/_focus-states.scss @@ -1,5 +1,7 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "../common/variables" as *; +@use "../common/mixins" as *; :focus { @include focus-outline(); diff --git a/packages/core/src/blueprint.scss b/packages/core/src/blueprint.scss index 497440e8ffb..8affcd00060 100644 --- a/packages/core/src/blueprint.scss +++ b/packages/core/src/blueprint.scss @@ -6,13 +6,8 @@ Licensed under the Apache License, Version 2.0. */ // Import files in the same order that they are documented in the docs -@import "@blueprintjs/colors/lib/scss/colors"; -@import "common/variables"; -@import "common/variables-extended"; -@import "common/mixins"; - -@import "reset"; -@import "typography"; -@import "accessibility/focus-states"; -@import "dark-theme"; -@import "components/index"; +@forward "reset"; +@forward "typography"; +@forward "accessibility/focus-states"; +@forward "dark-theme"; +@forward "components/index"; diff --git a/packages/core/src/common/_color-aliases.scss b/packages/core/src/common/_color-aliases.scss index 427cadcc337..05ba6de1779 100644 --- a/packages/core/src/common/_color-aliases.scss +++ b/packages/core/src/common/_color-aliases.scss @@ -9,6 +9,7 @@ // - A limited subset of Sass syntax is supported. All syntax inluded here must be able to get parsed by the // `generate-css-variables` script in @blueprintjs/node-build-scripts. For example, "sass:math" is unsupported. // ---------------------------------------------------------------------------- +@use "@blueprintjs/colors/lib/scss/colors" as *; $pt-intent-primary: $blue3 !default; $pt-intent-success: $green3 !default; diff --git a/packages/core/src/common/_flex.scss b/packages/core/src/common/_flex.scss index 46bf5ace1f8..5ca8fa57fc8 100644 --- a/packages/core/src/common/_flex.scss +++ b/packages/core/src/common/_flex.scss @@ -1,5 +1,6 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "variables" as *; // this element becomes a flex container in the given direction. // supply `$margin` to put space between each child. diff --git a/packages/core/src/common/_mixins.scss b/packages/core/src/common/_mixins.scss index e12f5415a5f..d7323eff499 100644 --- a/packages/core/src/common/_mixins.scss +++ b/packages/core/src/common/_mixins.scss @@ -2,8 +2,10 @@ // Licensed under the Apache License, Version 2.0. @use "sass:math"; -@import "@blueprintjs/colors/lib/scss/colors"; -@import "flex"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "color-aliases" as *; +@use "variables" as *; +@use "flex" as *; $pt-intent-colors: ( "primary": $pt-intent-primary, diff --git a/packages/core/src/common/_react-transition.scss b/packages/core/src/common/_react-transition.scss index 67bd5b7dfec..0b0415db302 100644 --- a/packages/core/src/common/_react-transition.scss +++ b/packages/core/src/common/_react-transition.scss @@ -1,6 +1,8 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "variables" as *; + /* A mixin to generate the classes for a React CSSTransition which animates any number of CSS properties at once. diff --git a/packages/core/src/common/_typography-colors.scss b/packages/core/src/common/_typography-colors.scss index ab584742f3e..455476c1d90 100644 --- a/packages/core/src/common/_typography-colors.scss +++ b/packages/core/src/common/_typography-colors.scss @@ -1,9 +1,11 @@ // Copyright 2022 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "variables"; -@import "variables-extended"; -@import "mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "variables" as *; +@use "variables-extended" as *; +@use "color-aliases" as *; +@use "mixins" as *; @mixin pt-typography-colors() { // N.B. we can't declare any global colors here because this mixin is @included at diff --git a/packages/core/src/common/_variables-extended.scss b/packages/core/src/common/_variables-extended.scss index 6a49cd2a19e..6e0d962a2c2 100644 --- a/packages/core/src/common/_variables-extended.scss +++ b/packages/core/src/common/_variables-extended.scss @@ -1,7 +1,7 @@ // Copyright 2022 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "variables"; +@use "variables" as *; // ---------------------------------------------------------------------------- // This file contains additional common variables which we do not want to export in public API via variables.scss, diff --git a/packages/core/src/common/_variables.scss b/packages/core/src/common/_variables.scss index b7472c94a16..51998a0ff35 100644 --- a/packages/core/src/common/_variables.scss +++ b/packages/core/src/common/_variables.scss @@ -1,8 +1,8 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "color-aliases"; -@import "mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "color-aliases" as *; // ---------------------------------------------------------------------------- // This file is part of the public Sass API of @blueprintjs/core. diff --git a/packages/core/src/components/_index.scss b/packages/core/src/components/_index.scss index 368d842ef9f..406860ca7d7 100644 --- a/packages/core/src/components/_index.scss +++ b/packages/core/src/components/_index.scss @@ -1,49 +1,49 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "alert/alert"; -@import "breadcrumbs/breadcrumbs"; -@import "button/button"; -@import "button/button-group"; -@import "callout/callout"; -@import "card/card"; -@import "card-list/card-list"; -@import "collapse/collapse"; -@import "context-menu/context-menu"; -@import "control-card/control-card"; -@import "divider/divider"; -@import "dialog/dialog"; -@import "dialog/dialog-body"; -@import "dialog/dialog-footer"; -@import "dialog/multistep-dialog"; -@import "drawer/drawer"; -@import "editable-text/editable-text"; -@import "entity-title/entity-title"; -@import "forms/index"; -@import "html-select/html-select"; -@import "html-table/html-table"; -@import "hotkeys/hotkeys"; -@import "icon/icon"; -@import "menu/menu"; -@import "navbar/navbar"; -@import "non-ideal-state/non-ideal-state"; -@import "overflow-list/overflow-list"; -@import "overlay/overlay"; -@import "panel-stack/panel-stack"; -@import "panel-stack2/panel-stack2"; -@import "popover/popover"; -@import "portal/portal"; -@import "progress-bar/progress-bar"; -@import "section/section"; -@import "segmented-control/segmented-control"; -@import "skeleton/skeleton"; -@import "slider/slider"; -@import "spinner/spinner"; -@import "tabs/tabs"; -@import "tag/tag"; -@import "tag/compound-tag"; -@import "tag-input/tag-input"; -@import "tag-input/resizable-input"; -@import "toast/toast"; -@import "tooltip/tooltip"; -@import "tree/tree"; +@forward "alert/alert"; +@forward "breadcrumbs/breadcrumbs"; +@forward "button/button"; +@forward "button/button-group"; +@forward "callout/callout"; +@forward "card/card"; +@forward "card-list/card-list"; +@forward "collapse/collapse"; +@forward "context-menu/context-menu"; +@forward "control-card/control-card"; +@forward "divider/divider"; +@forward "dialog/dialog"; +@forward "dialog/dialog-body"; +@forward "dialog/dialog-footer"; +@forward "dialog/multistep-dialog"; +@forward "drawer/drawer"; +@forward "editable-text/editable-text"; +@forward "entity-title/entity-title"; +@forward "forms/index"; +@forward "html-select/html-select"; +@forward "html-table/html-table"; +@forward "hotkeys/hotkeys"; +@forward "icon/icon"; +@forward "menu/menu"; +@forward "navbar/navbar"; +@forward "non-ideal-state/non-ideal-state"; +@forward "overflow-list/overflow-list"; +@forward "overlay/overlay"; +@forward "panel-stack/panel-stack"; +@forward "panel-stack2/panel-stack2"; +@forward "popover/popover"; +@forward "portal/portal"; +@forward "progress-bar/progress-bar"; +@forward "section/section"; +@forward "segmented-control/segmented-control"; +@forward "skeleton/skeleton"; +@forward "slider/slider"; +@forward "spinner/spinner"; +@forward "tabs/tabs"; +@forward "tag/tag"; +@forward "tag/compound-tag"; +@forward "tag-input/tag-input"; +@forward "tag-input/resizable-input"; +@forward "toast/toast"; +@forward "tooltip/tooltip"; +@forward "tree/tree"; diff --git a/packages/core/src/components/alert/_alert.scss b/packages/core/src/components/alert/_alert.scss index 18a294d7da8..f29152365b9 100644 --- a/packages/core/src/components/alert/_alert.scss +++ b/packages/core/src/components/alert/_alert.scss @@ -1,7 +1,7 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "../../common/variables" as *; .#{$ns}-alert { max-width: $pt-grid-size * 40; diff --git a/packages/core/src/components/breadcrumbs/_breadcrumbs.scss b/packages/core/src/components/breadcrumbs/_breadcrumbs.scss index 30c0fa1403c..0ece8e2ac94 100644 --- a/packages/core/src/components/breadcrumbs/_breadcrumbs.scss +++ b/packages/core/src/components/breadcrumbs/_breadcrumbs.scss @@ -1,8 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/variables" as *; +@use "../../common/color-aliases" as *; /* Breadcrumbs diff --git a/packages/core/src/components/button/_button-group.scss b/packages/core/src/components/button/_button-group.scss index dd8b44b803d..555767f7bb7 100644 --- a/packages/core/src/components/button/_button-group.scss +++ b/packages/core/src/components/button/_button-group.scss @@ -1,9 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../forms/common"; -@import "./common"; +@use "../../common/variables" as *; +@use "../forms/common" as *; +@use "./common" as *; /* Button groups diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss index 7633946f440..00feee80b86 100644 --- a/packages/core/src/components/button/_button.scss +++ b/packages/core/src/components/button/_button.scss @@ -1,9 +1,13 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "./common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "./common" as *; +@use "../icon/icon-mixins" as *; +@use "../progress-bar/common" as *; /* Button diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss index 669625fe3e7..aaf69ec35cb 100644 --- a/packages/core/src/components/button/_common.scss +++ b/packages/core/src/components/button/_common.scss @@ -1,10 +1,13 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/mixins"; -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "../progress-bar/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../progress-bar/common" as *; $button-border-width: 1px !default; $button-padding: ($pt-grid-size * 0.5) $pt-grid-size !default; diff --git a/packages/core/src/components/callout/_callout.scss b/packages/core/src/components/callout/_callout.scss index d1c21bc50e0..d6b955f95cf 100644 --- a/packages/core/src/components/callout/_callout.scss +++ b/packages/core/src/components/callout/_callout.scss @@ -1,7 +1,12 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables-extended"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../../common/mixins" as *; +@use "../icon/icon-mixins" as *; /* Callout diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss index eb6cf5dad87..5bb232b5026 100644 --- a/packages/core/src/components/card-list/card-list.scss +++ b/packages/core/src/components/card-list/card-list.scss @@ -1,7 +1,10 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../card/card-variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../card/card-variables" as *; .#{$ns}-card-list { overflow: auto; diff --git a/packages/core/src/components/card/_card-variables.scss b/packages/core/src/components/card/_card-variables.scss index a4653e32d35..5693188763f 100644 --- a/packages/core/src/components/card/_card-variables.scss +++ b/packages/core/src/components/card/_card-variables.scss @@ -1,7 +1,10 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables-extended"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; $card-padding: $pt-grid-size * 2 !default; $card-padding-compact: $pt-grid-size * 1.5 !default; diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss index 2653b8962bb..efd43de8dab 100644 --- a/packages/core/src/components/card/_card.scss +++ b/packages/core/src/components/card/_card.scss @@ -1,7 +1,10 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./card-variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "./card-variables" as *; /* Cards diff --git a/packages/core/src/components/collapse/_collapse.scss b/packages/core/src/components/collapse/_collapse.scss index 39726d7a3f8..9e7c1eda572 100644 --- a/packages/core/src/components/collapse/_collapse.scss +++ b/packages/core/src/components/collapse/_collapse.scss @@ -1,7 +1,7 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "../../common/variables" as *; $collapse-transition: ($pt-transition-duration * 2) $pt-transition-ease !default; diff --git a/packages/core/src/components/context-menu/_context-menu.scss b/packages/core/src/components/context-menu/_context-menu.scss index 265c4fca3a6..7721e83040e 100644 --- a/packages/core/src/components/context-menu/_context-menu.scss +++ b/packages/core/src/components/context-menu/_context-menu.scss @@ -1,7 +1,7 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "../../common/variables" as *; .#{$ns}-context-menu-virtual-target { position: fixed; diff --git a/packages/core/src/components/control-card/_control-card.scss b/packages/core/src/components/control-card/_control-card.scss index 2b74c42bdd3..fad2094b5e3 100644 --- a/packages/core/src/components/control-card/_control-card.scss +++ b/packages/core/src/components/control-card/_control-card.scss @@ -1,7 +1,8 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../card/card-variables"; +@use "../../common/variables" as *; +@use "../card/card-variables" as *; // use an extra selector to increase specificity .#{$ns}-card.#{$ns}-control-card { diff --git a/packages/core/src/components/dialog/_dialog-body.scss b/packages/core/src/components/dialog/_dialog-body.scss index 8fff971000f..1cce21a45d6 100644 --- a/packages/core/src/components/dialog/_dialog-body.scss +++ b/packages/core/src/components/dialog/_dialog-body.scss @@ -1,6 +1,9 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "../../common/variables" as *; +@use "dialog" as *; + .#{$ns}-dialog-body { flex: 1 1 auto; // We'd like to use padding instead of margin here to be consistent with the -dialog-body-scroll-container class, diff --git a/packages/core/src/components/dialog/_dialog-footer.scss b/packages/core/src/components/dialog/_dialog-footer.scss index add233f15d3..e0787cbcbcb 100644 --- a/packages/core/src/components/dialog/_dialog-footer.scss +++ b/packages/core/src/components/dialog/_dialog-footer.scss @@ -1,6 +1,11 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "dialog" as *; + .#{$ns}-dialog-footer { flex: 0 0 auto; // We'd like to use padding instead of margin here to be consistent with the -dialog-footer-fixed class, diff --git a/packages/core/src/components/dialog/_dialog.scss b/packages/core/src/components/dialog/_dialog.scss index 88431ef8c74..e97247d4a58 100644 --- a/packages/core/src/components/dialog/_dialog.scss +++ b/packages/core/src/components/dialog/_dialog.scss @@ -2,10 +2,12 @@ // Licensed under the Apache License, Version 2.0. @use "sass:math"; -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/mixins"; -@import "../../common/react-transition"; -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; /* Dialog diff --git a/packages/core/src/components/dialog/_multistep-dialog.scss b/packages/core/src/components/dialog/_multistep-dialog.scss index bf092a71353..3af08c086bc 100644 --- a/packages/core/src/components/dialog/_multistep-dialog.scss +++ b/packages/core/src/components/dialog/_multistep-dialog.scss @@ -1,12 +1,14 @@ // Copyright 2020 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/mixins"; -@import "../../common/react-transition"; -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; +@use "dialog" as *; -$dialog-border-radius: $pt-border-radius * 2 !default; $step-radius: $pt-border-radius * 2 !default; .#{$ns}-multistep-dialog-panels { diff --git a/packages/core/src/components/divider/_divider.scss b/packages/core/src/components/divider/_divider.scss index 618fec9ba4e..84e5f4f542d 100644 --- a/packages/core/src/components/divider/_divider.scss +++ b/packages/core/src/components/divider/_divider.scss @@ -1,7 +1,8 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; $divider-margin: $pt-grid-size * 0.5 !default; diff --git a/packages/core/src/components/drawer/_drawer.scss b/packages/core/src/components/drawer/_drawer.scss index acc9a1cfd57..5f4ad48539a 100644 --- a/packages/core/src/components/drawer/_drawer.scss +++ b/packages/core/src/components/drawer/_drawer.scss @@ -1,10 +1,12 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/mixins"; -@import "../../common/react-transition"; -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; $drawer-margin: ($pt-grid-size * 3) 0 !default; $drawer-padding: $pt-grid-size * 2 !default; diff --git a/packages/core/src/components/editable-text/_editable-text.scss b/packages/core/src/components/editable-text/_editable-text.scss index 37d2e1dcf1b..bf7de2b6f53 100644 --- a/packages/core/src/components/editable-text/_editable-text.scss +++ b/packages/core/src/components/editable-text/_editable-text.scss @@ -1,8 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../forms/common"; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../forms/common" as *; .#{$ns}-editable-text { cursor: text; diff --git a/packages/core/src/components/entity-title/_entity-title.scss b/packages/core/src/components/entity-title/_entity-title.scss index 5c5bd22bb59..21a2e050ebe 100644 --- a/packages/core/src/components/entity-title/_entity-title.scss +++ b/packages/core/src/components/entity-title/_entity-title.scss @@ -1,8 +1,9 @@ // Copyright 2024 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/variables-extended"; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../../typography" as *; .#{$ns}-entity-title { align-items: center; diff --git a/packages/core/src/components/forms/_common.scss b/packages/core/src/components/forms/_common.scss index 48017419106..962afd9f632 100644 --- a/packages/core/src/components/forms/_common.scss +++ b/packages/core/src/components/forms/_common.scss @@ -1,9 +1,11 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/variables"; -@import "../button/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; $input-padding-horizontal: $pt-grid-size !default; $input-small-padding: $pt-input-height-small - $pt-icon-size-standard !default; diff --git a/packages/core/src/components/forms/_control-group.scss b/packages/core/src/components/forms/_control-group.scss index 55b54ea1fb9..6dbd8750b55 100644 --- a/packages/core/src/components/forms/_control-group.scss +++ b/packages/core/src/components/forms/_control-group.scss @@ -1,10 +1,12 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../button/common"; -@import "./common"; -@import "../divider/divider"; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; +@use "../divider/divider" as *; +@use "./common" as *; /* Control groups diff --git a/packages/core/src/components/forms/_controls.scss b/packages/core/src/components/forms/_controls.scss index 0d412efe6bb..313bee8f385 100644 --- a/packages/core/src/components/forms/_controls.scss +++ b/packages/core/src/components/forms/_controls.scss @@ -2,9 +2,11 @@ // Licensed under the Apache License, Version 2.0. @use "sass:math"; -@import "../../common/mixins"; -@import "../../common/variables"; -@import "../button/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; $control-background-color: transparent !default; $control-background-color-hover: $minimal-button-background-color-hover !default; diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index 7bb78d3e809..bcd98848c26 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -1,9 +1,11 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../button/common"; -@import "../../common/mixins"; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; +@use "./common" as *; /* File input diff --git a/packages/core/src/components/forms/_form-group.scss b/packages/core/src/components/forms/_form-group.scss index ed2c4de089b..0892831da3a 100644 --- a/packages/core/src/components/forms/_form-group.scss +++ b/packages/core/src/components/forms/_form-group.scss @@ -1,9 +1,10 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/mixins"; -@import "common"; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "./common" as *; /* Form groups diff --git a/packages/core/src/components/forms/_index.scss b/packages/core/src/components/forms/_index.scss index b265ebf6fe7..d275b294d65 100644 --- a/packages/core/src/components/forms/_index.scss +++ b/packages/core/src/components/forms/_index.scss @@ -1,19 +1,14 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -// NOTE: this partial file is imported once here so form components can just use it. -// multiple @imports of shared/forms from different files causes placeholder @extends to -// output CSS multiple times which breaks textbox padding. -@import "./common"; - -@import "./control-group"; -@import "./controls"; -@import "./file-input"; -@import "./form-group"; -@import "./input-group"; -@import "./input"; -@import "./label"; -@import "./numeric-input"; +@forward "./control-group"; +@forward "./controls"; +@forward "./file-input"; +@forward "./form-group"; +@forward "./input-group"; +@forward "./input"; +@forward "./label"; +@forward "./numeric-input"; form { display: block; diff --git a/packages/core/src/components/forms/_input-group.scss b/packages/core/src/components/forms/_input-group.scss index a4598d46f49..32d4f648d8a 100644 --- a/packages/core/src/components/forms/_input-group.scss +++ b/packages/core/src/components/forms/_input-group.scss @@ -1,9 +1,13 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "../button/common"; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../button/common" as *; +@use "../icon/icon-mixins" as *; +@use "./common" as *; /* Input groups diff --git a/packages/core/src/components/forms/_input.scss b/packages/core/src/components/forms/_input.scss index a310f241e1e..82df208d59d 100644 --- a/packages/core/src/components/forms/_input.scss +++ b/packages/core/src/components/forms/_input.scss @@ -1,7 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "./common" as *; /* Text inputs diff --git a/packages/core/src/components/forms/_label.scss b/packages/core/src/components/forms/_label.scss index 902b0243344..5d13fc08bfb 100644 --- a/packages/core/src/components/forms/_label.scss +++ b/packages/core/src/components/forms/_label.scss @@ -1,7 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables-extended"; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; /* Labels diff --git a/packages/core/src/components/forms/_numeric-input.scss b/packages/core/src/components/forms/_numeric-input.scss index fff57243559..9203ceff009 100644 --- a/packages/core/src/components/forms/_numeric-input.scss +++ b/packages/core/src/components/forms/_numeric-input.scss @@ -1,5 +1,5 @@ -@import "../../common/variables"; -@import "./common"; +@use "../../common/variables" as *; +@use "./common" as *; .#{$ns}-numeric-input { // we need a very-specific selector here to override specificicty of selectors defined elsewhere. diff --git a/packages/core/src/components/hotkeys/_hotkeys.scss b/packages/core/src/components/hotkeys/_hotkeys.scss index d42937d7da5..dd40007b48c 100644 --- a/packages/core/src/components/hotkeys/_hotkeys.scss +++ b/packages/core/src/components/hotkeys/_hotkeys.scss @@ -1,7 +1,8 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../../common/variables"; -@import "../../common/mixins"; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; .#{$ns}-key-combo { align-items: center; diff --git a/packages/core/src/components/html-select/_common.scss b/packages/core/src/components/html-select/_common.scss index 840f3a721bb..6bf95b83b26 100644 --- a/packages/core/src/components/html-select/_common.scss +++ b/packages/core/src/components/html-select/_common.scss @@ -1,7 +1,10 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../forms/common"; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; +@use "../forms/common" as *; %pt-select { @include pt-button-layout(); diff --git a/packages/core/src/components/html-select/_html-select.scss b/packages/core/src/components/html-select/_html-select.scss index 6ff48ae2f79..cc34b758c24 100644 --- a/packages/core/src/components/html-select/_html-select.scss +++ b/packages/core/src/components/html-select/_html-select.scss @@ -1,9 +1,12 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../popover/common"; -@import "./common"; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../icon/icon-mixins" as *; +@use "../popover/common" as *; +@use "./common" as *; /* HTML select diff --git a/packages/core/src/components/html-table/_html-table.scss b/packages/core/src/components/html-table/_html-table.scss index 51888989924..23ef4376dce 100644 --- a/packages/core/src/components/html-table/_html-table.scss +++ b/packages/core/src/components/html-table/_html-table.scss @@ -1,7 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; /* Tables diff --git a/packages/core/src/components/icon/_icon-mixins.scss b/packages/core/src/components/icon/_icon-mixins.scss index 587559198a9..4e52ef4d383 100644 --- a/packages/core/src/components/icon/_icon-mixins.scss +++ b/packages/core/src/components/icon/_icon-mixins.scss @@ -1,7 +1,9 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; @mixin pt-icon-font-smoothing() { -moz-osx-font-smoothing: grayscale; diff --git a/packages/core/src/components/icon/_icon.scss b/packages/core/src/components/icon/_icon.scss index 7439a722fa8..c7ca33e6f6a 100644 --- a/packages/core/src/components/icon/_icon.scss +++ b/packages/core/src/components/icon/_icon.scss @@ -1,10 +1,12 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "icon-mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "@blueprintjs/icons/lib/scss/blueprint-icons-20" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "icon-mixins" as *; // the icon class which will contain an SVG icon .#{$ns}-icon { diff --git a/packages/core/src/components/menu/_common.scss b/packages/core/src/components/menu/_common.scss index dbc85796df7..4e00d5980e7 100644 --- a/packages/core/src/components/menu/_common.scss +++ b/packages/core/src/components/menu/_common.scss @@ -1,9 +1,12 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/mixins"; -@import "../../common/variables"; -@import "../../common/variables-extended"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; $menu-item-border-radius: $pt-border-radius !default; diff --git a/packages/core/src/components/menu/_menu.scss b/packages/core/src/components/menu/_menu.scss index 043a14a28e3..2df054aef47 100644 --- a/packages/core/src/components/menu/_menu.scss +++ b/packages/core/src/components/menu/_menu.scss @@ -1,12 +1,14 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/mixins"; - -@import "./common"; -@import "./submenu"; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../icon/icon-mixins" as *; +@use "./common" as *; +@forward "./submenu"; /* Menus diff --git a/packages/core/src/components/menu/_submenu.scss b/packages/core/src/components/menu/_submenu.scss index fce8c6f6b6b..ac3174a674d 100644 --- a/packages/core/src/components/menu/_submenu.scss +++ b/packages/core/src/components/menu/_submenu.scss @@ -1,9 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "@blueprintjs/icons/lib/scss/variables"; -@import "./common"; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "./common" as *; .#{$ns}-submenu { > .#{$ns}-popover-wrapper { diff --git a/packages/core/src/components/navbar/_navbar.scss b/packages/core/src/components/navbar/_navbar.scss index dfc91a2e94f..5dbe1dca744 100644 --- a/packages/core/src/components/navbar/_navbar.scss +++ b/packages/core/src/components/navbar/_navbar.scss @@ -1,8 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../card/card-variables"; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; +@use "../card/card-variables" as *; /* Navbars diff --git a/packages/core/src/components/non-ideal-state/_non-ideal-state.scss b/packages/core/src/components/non-ideal-state/_non-ideal-state.scss index f2c2d6da310..919b2847b47 100644 --- a/packages/core/src/components/non-ideal-state/_non-ideal-state.scss +++ b/packages/core/src/components/non-ideal-state/_non-ideal-state.scss @@ -1,8 +1,11 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; /* Non-ideal state diff --git a/packages/core/src/components/overflow-list/_overflow-list.scss b/packages/core/src/components/overflow-list/_overflow-list.scss index 6c85f00f0a0..0fd4186b9a5 100644 --- a/packages/core/src/components/overflow-list/_overflow-list.scss +++ b/packages/core/src/components/overflow-list/_overflow-list.scss @@ -1,6 +1,8 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "../../common/variables" as *; + .#{$ns}-overflow-list { display: flex; flex-wrap: nowrap; diff --git a/packages/core/src/components/overlay/_overlay.scss b/packages/core/src/components/overlay/_overlay.scss index 61fb8496675..cf2bd8f8f16 100644 --- a/packages/core/src/components/overlay/_overlay.scss +++ b/packages/core/src/components/overlay/_overlay.scss @@ -1,7 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; $overlay-background-color: rgba($black, 0.7) !default; diff --git a/packages/core/src/components/panel-stack/_panel-stack.scss b/packages/core/src/components/panel-stack/_panel-stack.scss index 0a56b1562fe..db89d9edc86 100644 --- a/packages/core/src/components/panel-stack/_panel-stack.scss +++ b/packages/core/src/components/panel-stack/_panel-stack.scss @@ -1,9 +1,11 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "@blueprintjs/core/src/common/react-transition"; -@import "../card/card-variables"; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; +@use "../card/card-variables" as *; .#{$ns}-panel-stack { overflow: hidden; diff --git a/packages/core/src/components/panel-stack2/_panel-stack2.scss b/packages/core/src/components/panel-stack2/_panel-stack2.scss index 0a19b0121cd..35e1a91fe60 100644 --- a/packages/core/src/components/panel-stack2/_panel-stack2.scss +++ b/packages/core/src/components/panel-stack2/_panel-stack2.scss @@ -1,9 +1,11 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "@blueprintjs/core/src/common/react-transition"; -@import "../card/card-variables"; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; +@use "../card/card-variables" as *; .#{$ns}-panel-stack2 { overflow: hidden; diff --git a/packages/core/src/components/popover/_common.scss b/packages/core/src/components/popover/_common.scss index b6029d40502..bafadfb743a 100644 --- a/packages/core/src/components/popover/_common.scss +++ b/packages/core/src/components/popover/_common.scss @@ -2,8 +2,9 @@ // Licensed under the Apache License, Version 2.0. @use "sass:math"; -@import "../../common/variables"; -@import "../../common/react-transition"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/variables" as *; +@use "../../common/react-transition" as *; $pt-popover-background-color: $white !default; $pt-dark-popover-background-color: $dark-gray3 !default; diff --git a/packages/core/src/components/popover/_popover-in-button-group.scss b/packages/core/src/components/popover/_popover-in-button-group.scss index 26513ce3846..e2d310e318a 100644 --- a/packages/core/src/components/popover/_popover-in-button-group.scss +++ b/packages/core/src/components/popover/_popover-in-button-group.scss @@ -1,8 +1,9 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./common"; -@import "@blueprintjs/core/src/components/button/common"; +@use "../../common/variables" as *; +@use "../button/common" as *; +@use "./common" as *; .#{$ns}-button-group { // support wrapping buttons in a tooltip, which adds a wrapper element diff --git a/packages/core/src/components/popover/_popover-in-control-group.scss b/packages/core/src/components/popover/_popover-in-control-group.scss index a07e35c8383..5bb60ce1830 100644 --- a/packages/core/src/components/popover/_popover-in-control-group.scss +++ b/packages/core/src/components/popover/_popover-in-control-group.scss @@ -1,7 +1,7 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./common"; +@use "../../common/variables" as *; .#{$ns}-control-group { // Add border radius inheritance to support components wrapped in a popover diff --git a/packages/core/src/components/popover/_popover-in-label.scss b/packages/core/src/components/popover/_popover-in-label.scss index 8c3d54a3d47..2b81466bb2d 100644 --- a/packages/core/src/components/popover/_popover-in-label.scss +++ b/packages/core/src/components/popover/_popover-in-label.scss @@ -1,7 +1,7 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./common"; +@use "../../common/variables" as *; label.#{$ns}-label { .#{$ns}-popover-target { diff --git a/packages/core/src/components/popover/_popover-in-submenu.scss b/packages/core/src/components/popover/_popover-in-submenu.scss index cc19df5fa1f..82d26542510 100644 --- a/packages/core/src/components/popover/_popover-in-submenu.scss +++ b/packages/core/src/components/popover/_popover-in-submenu.scss @@ -1,8 +1,9 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./common"; -@import "@blueprintjs/core/src/components/menu/common"; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../menu/common" as *; .#{$ns}-submenu { .#{$ns}-popover-target { diff --git a/packages/core/src/components/popover/_popover-in-tree.scss b/packages/core/src/components/popover/_popover-in-tree.scss index 9b0f335af55..272a9c23902 100644 --- a/packages/core/src/components/popover/_popover-in-tree.scss +++ b/packages/core/src/components/popover/_popover-in-tree.scss @@ -1,7 +1,7 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./common"; +@use "../../common/variables" as *; .#{$ns}-tree-node-secondary-label { .#{$ns}-popover-target { diff --git a/packages/core/src/components/popover/_popover.scss b/packages/core/src/components/popover/_popover.scss index cbdbb63a06a..9e6f2abfa79 100644 --- a/packages/core/src/components/popover/_popover.scss +++ b/packages/core/src/components/popover/_popover.scss @@ -2,12 +2,15 @@ // Licensed under the Apache License, Version 2.0. @use "sass:color"; -@import "./common"; -@import "./popover-in-button-group"; -@import "./popover-in-control-group"; -@import "./popover-in-label"; -@import "./popover-in-submenu"; -@import "./popover-in-tree"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; +@use "./common" as *; +@forward "./popover-in-button-group"; +@forward "./popover-in-control-group"; +@forward "./popover-in-label"; +@forward "./popover-in-submenu"; +@forward "./popover-in-tree"; $popover-width: $pt-grid-size * 35 !default; $popover-arrow-box-shadow: 1px 1px 6px rgba($black, $pt-drop-shadow-opacity) !default; diff --git a/packages/core/src/components/portal/_portal.scss b/packages/core/src/components/portal/_portal.scss index 21755b7be30..ea55cb4676e 100644 --- a/packages/core/src/components/portal/_portal.scss +++ b/packages/core/src/components/portal/_portal.scss @@ -1,6 +1,8 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "../../common/variables" as *; + .#{$ns}-portal { left: 0; // take the portal out of the document flow to prevent browsers from autoscrolling to the bottom diff --git a/packages/core/src/components/progress-bar/_common.scss b/packages/core/src/components/progress-bar/_common.scss index c9438b4dd5a..c002a77d33a 100644 --- a/packages/core/src/components/progress-bar/_common.scss +++ b/packages/core/src/components/progress-bar/_common.scss @@ -1,7 +1,7 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; $progress-track-color: rgba($gray1, 0.2) !default; $progress-head-color: rgba($gray1, 0.8) !default; diff --git a/packages/core/src/components/progress-bar/_progress-bar.scss b/packages/core/src/components/progress-bar/_progress-bar.scss index 8ce8b953c63..5fb05a67f16 100644 --- a/packages/core/src/components/progress-bar/_progress-bar.scss +++ b/packages/core/src/components/progress-bar/_progress-bar.scss @@ -1,8 +1,10 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "./common" as *; /* Progress bars diff --git a/packages/core/src/components/section/_section.scss b/packages/core/src/components/section/_section.scss index 77ddc4da03e..bfceecc2233 100644 --- a/packages/core/src/components/section/_section.scss +++ b/packages/core/src/components/section/_section.scss @@ -1,5 +1,7 @@ @use "sass:math"; -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; $section-min-height: $pt-grid-size * 5 !default; $section-padding-vertical: $pt-grid-size !default; diff --git a/packages/core/src/components/segmented-control/_segmented-control.scss b/packages/core/src/components/segmented-control/_segmented-control.scss index 42887e342b5..83db3599a3a 100644 --- a/packages/core/src/components/segmented-control/_segmented-control.scss +++ b/packages/core/src/components/segmented-control/_segmented-control.scss @@ -1,5 +1,7 @@ @use "sass:math"; -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/variables" as *; .#{$ns}-segmented-control { background-color: $light-gray5; diff --git a/packages/core/src/components/skeleton/_common.scss b/packages/core/src/components/skeleton/_common.scss index 1cb4bc38031..21f5b1e7211 100644 --- a/packages/core/src/components/skeleton/_common.scss +++ b/packages/core/src/components/skeleton/_common.scss @@ -1,6 +1,7 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. -@import "../../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/variables" as *; $skeleton-animation: ($pt-transition-duration * 10) linear infinite alternate skeleton-glow !default; $skeleton-color-start: rgba($light-gray1, 0.2) !default; diff --git a/packages/core/src/components/skeleton/_skeleton.scss b/packages/core/src/components/skeleton/_skeleton.scss index ede2cc3827b..25164318474 100644 --- a/packages/core/src/components/skeleton/_skeleton.scss +++ b/packages/core/src/components/skeleton/_skeleton.scss @@ -1,7 +1,8 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "./common"; +@use "../../common/variables" as *; +@use "./common" as *; /* Skeletons diff --git a/packages/core/src/components/slider/_common.scss b/packages/core/src/components/slider/_common.scss index 0e3b8b10295..65a88ed48c6 100644 --- a/packages/core/src/components/slider/_common.scss +++ b/packages/core/src/components/slider/_common.scss @@ -1,10 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/mixins"; -@import "../button/common"; +@use "../../common/variables" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/mixins" as *; +@use "../button/common" as *; @mixin slider-orientation($size, $vertical: false) { $slider-min-size: $pt-grid-size * 15; diff --git a/packages/core/src/components/slider/_slider.scss b/packages/core/src/components/slider/_slider.scss index be50f6a05f6..d9688b06277 100644 --- a/packages/core/src/components/slider/_slider.scss +++ b/packages/core/src/components/slider/_slider.scss @@ -1,8 +1,13 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../tooltip/tooltip"; -@import "./common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; +@use "../tooltip/common" as *; +@use "../tooltip/tooltip" as *; +@use "./common" as *; $handle-size: $pt-icon-size-standard !default; $track-size: $handle-size - $pt-grid-size !default; diff --git a/packages/core/src/components/spinner/_spinner.scss b/packages/core/src/components/spinner/_spinner.scss index 864fdcb07c1..1fee4ffae78 100644 --- a/packages/core/src/components/spinner/_spinner.scss +++ b/packages/core/src/components/spinner/_spinner.scss @@ -1,8 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../progress-bar/common"; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../progress-bar/common" as *; @keyframes pt-spinner-animation { from { diff --git a/packages/core/src/components/tabs/_tabs.scss b/packages/core/src/components/tabs/_tabs.scss index 1fbf3edc853..807916a35fc 100644 --- a/packages/core/src/components/tabs/_tabs.scss +++ b/packages/core/src/components/tabs/_tabs.scss @@ -1,8 +1,10 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; /* Tabs diff --git a/packages/core/src/components/tag-input/_resizable-input.scss b/packages/core/src/components/tag-input/_resizable-input.scss index 98b02cc363e..56958d360d9 100644 --- a/packages/core/src/components/tag-input/_resizable-input.scss +++ b/packages/core/src/components/tag-input/_resizable-input.scss @@ -1,5 +1,5 @@ -@import "../../common/variables"; -@import "../tag/common"; +@use "../../common/variables" as *; +@use "../tag/common" as *; .#{$ns}-resizable-input-span { max-height: 0; diff --git a/packages/core/src/components/tag-input/_tag-input.scss b/packages/core/src/components/tag-input/_tag-input.scss index 061cf519579..bd004ccd31b 100644 --- a/packages/core/src/components/tag-input/_tag-input.scss +++ b/packages/core/src/components/tag-input/_tag-input.scss @@ -1,9 +1,13 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../forms/common"; -@import "../tag/common"; +@use "../../common/color-aliases" as *; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../button/common" as *; +@use "../forms/common" as *; +@use "../tag/common" as *; $tag-input-padding: ($pt-input-height - $tag-height) * 0.5 !default; diff --git a/packages/core/src/components/tag/_common.scss b/packages/core/src/components/tag/_common.scss index 737aba9a4cd..b8183ef14b5 100644 --- a/packages/core/src/components/tag/_common.scss +++ b/packages/core/src/components/tag/_common.scss @@ -1,8 +1,14 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/variables-extended"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/flex" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../icon/icon-mixins" as *; // Variables // --------------------------------------------------------------------------------------------------------------------- diff --git a/packages/core/src/components/tag/_compound-tag.scss b/packages/core/src/components/tag/_compound-tag.scss index fb56a707a76..182e0f2af1e 100644 --- a/packages/core/src/components/tag/_compound-tag.scss +++ b/packages/core/src/components/tag/_compound-tag.scss @@ -1,10 +1,11 @@ // Copyright 2024 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "../../common/mixins"; -@import "./common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "./common" as *; /* Compound Tags diff --git a/packages/core/src/components/tag/_tag.scss b/packages/core/src/components/tag/_tag.scss index 8ec8ea2cfa1..a959912a17b 100644 --- a/packages/core/src/components/tag/_tag.scss +++ b/packages/core/src/components/tag/_tag.scss @@ -1,9 +1,9 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "./common"; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "./common" as *; /* Tags diff --git a/packages/core/src/components/toast/_toast.scss b/packages/core/src/components/toast/_toast.scss index a1cd06138c2..0f32cc56392 100644 --- a/packages/core/src/components/toast/_toast.scss +++ b/packages/core/src/components/toast/_toast.scss @@ -1,8 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/react-transition"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/color-aliases" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; $toast-height: $pt-button-height-large !default; $toast-min-width: $pt-grid-size * 30 !default; diff --git a/packages/core/src/components/tooltip/_common.scss b/packages/core/src/components/tooltip/_common.scss index d663af85156..12b9a25852d 100644 --- a/packages/core/src/components/tooltip/_common.scss +++ b/packages/core/src/components/tooltip/_common.scss @@ -1,6 +1,9 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/variables" as *; + $tooltip-background-color: $dark-gray5 !default; $tooltip-text-color: $light-gray5 !default; diff --git a/packages/core/src/components/tooltip/_tooltip.scss b/packages/core/src/components/tooltip/_tooltip.scss index 89902e4bd0a..d6ec53df959 100644 --- a/packages/core/src/components/tooltip/_tooltip.scss +++ b/packages/core/src/components/tooltip/_tooltip.scss @@ -1,10 +1,13 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; -@import "../../common/typography-colors"; -@import "../popover/common"; -@import "./common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "../../common/mixins" as *; +@use "../../common/react-transition" as *; +@use "../../common/variables" as *; +@use "../../common/typography-colors" as *; +@use "../popover/common" as *; +@use "./common" as *; $tooltip-arrow-box-shadow: 1px 1px 6px rgba($black, $pt-drop-shadow-opacity) !default; $dark-tooltip-arrow-box-shadow: 1px 1px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default; diff --git a/packages/core/src/components/tree/_tree.scss b/packages/core/src/components/tree/_tree.scss index 017e067d27c..4596e1061fe 100644 --- a/packages/core/src/components/tree/_tree.scss +++ b/packages/core/src/components/tree/_tree.scss @@ -1,10 +1,13 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/icons/lib/scss/variables"; -@import "../../common/variables"; -@import "../../common/variables-extended"; -@import "../../common/mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "../../common/color-aliases" as *; +@use "../../common/mixins" as *; +@use "../../common/variables" as *; +@use "../../common/variables-extended" as *; +@use "../icon/icon-mixins" as *; /* Trees diff --git a/packages/core/src/docs/variables.md b/packages/core/src/docs/variables.md index 0b1228623d7..8ec38075e4e 100644 --- a/packages/core/src/docs/variables.md +++ b/packages/core/src/docs/variables.md @@ -42,7 +42,7 @@ variables in Sass as a map and in TypeScript as an object (see the [Icons sectio full list of identifiers): ```scss -@import "@blueprintjs/icons/lib/scss/variables"; +@use "@blueprintjs/icons/lib/scss/variables" as *; .my-custom-icon { content: map-get($blueprint-icon-codepoints, "tick"); diff --git a/packages/core/test/overlay2/overlay2-test-debugging.scss b/packages/core/test/overlay2/overlay2-test-debugging.scss index ec47250b9c9..d9a19b6d160 100644 --- a/packages/core/test/overlay2/overlay2-test-debugging.scss +++ b/packages/core/test/overlay2/overlay2-test-debugging.scss @@ -1,8 +1,8 @@ // Copyright 2024 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; body { min-width: 500px; diff --git a/packages/datetime/src/_common.scss b/packages/datetime/src/_common.scss index 5919f48c6a2..bb6084b8764 100644 --- a/packages/datetime/src/_common.scss +++ b/packages/datetime/src/_common.scss @@ -1,9 +1,9 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/icons/lib/scss/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; $datepicker-padding: $pt-grid-size * 0.5 !default; diff --git a/packages/datetime/src/blueprint-datetime.scss b/packages/datetime/src/blueprint-datetime.scss index 5adaa610c14..5e33fbeed06 100644 --- a/packages/datetime/src/blueprint-datetime.scss +++ b/packages/datetime/src/blueprint-datetime.scss @@ -1,7 +1,7 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "components/date-input/dateinput"; -@import "components/date-picker/datepicker"; -@import "components/date-range-picker/daterangepicker"; -@import "components/time-picker/timepicker"; +@forward "components/date-input/dateinput"; +@forward "components/date-picker/datepicker"; +@forward "components/date-range-picker/daterangepicker"; +@forward "components/time-picker/timepicker"; diff --git a/packages/datetime/src/components/date-input/_dateinput.scss b/packages/datetime/src/components/date-input/_dateinput.scss index 484040af151..e4511a112ea 100644 --- a/packages/datetime/src/components/date-input/_dateinput.scss +++ b/packages/datetime/src/components/date-input/_dateinput.scss @@ -1,7 +1,7 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common"; +@use "@blueprintjs/core/src/common/variables" as *; .#{$ns}-date-input { .#{$ns}-input-action { diff --git a/packages/datetime/src/components/date-picker/_datepicker.scss b/packages/datetime/src/components/date-picker/_datepicker.scss index c66aa1c62c6..e07126b222b 100644 --- a/packages/datetime/src/components/date-picker/_datepicker.scss +++ b/packages/datetime/src/components/date-picker/_datepicker.scss @@ -1,9 +1,12 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/components/popover/common"; -@import "../../common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/popover/common" as *; +@use "../../common" as *; $cell-size: $pt-grid-size * 3 !default; $header-height: $pt-grid-size * 4 !default; diff --git a/packages/datetime/src/components/date-range-picker/_daterangepicker.scss b/packages/datetime/src/components/date-range-picker/_daterangepicker.scss index 5627d8d17dc..63406813dd9 100644 --- a/packages/datetime/src/components/date-range-picker/_daterangepicker.scss +++ b/packages/datetime/src/components/date-range-picker/_daterangepicker.scss @@ -1,7 +1,9 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../../common" as *; // react-day-picker does not conform to our naming scheme /* stylelint-disable selector-class-pattern */ diff --git a/packages/datetime/src/components/time-picker/_timepicker.scss b/packages/datetime/src/components/time-picker/_timepicker.scss index efa97722b5c..193f96f26a6 100644 --- a/packages/datetime/src/components/time-picker/_timepicker.scss +++ b/packages/datetime/src/components/time-picker/_timepicker.scss @@ -1,9 +1,12 @@ // Copyright 2015 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/core/src/components/forms/common"; -@import "@blueprintjs/core/src/components/icon/icon-mixins"; -@import "../../common"; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/forms/common" as *; +@use "@blueprintjs/core/src/components/icon/icon-mixins" as *; +@use "../../common" as *; $timepicker-input-row-height: $pt-grid-size * 3 !default; // subtract two because of inset shadow diff --git a/packages/datetime/test/test-debugging-styles.scss b/packages/datetime/test/test-debugging-styles.scss index 229a45b2442..2874759908e 100644 --- a/packages/datetime/test/test-debugging-styles.scss +++ b/packages/datetime/test/test-debugging-styles.scss @@ -1,8 +1,8 @@ // Copyright 2022 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; .#{$ns}-date-range-input-popover { // popover does not position itself corectly in tests sometimes... we add this margin so that we can see diff --git a/packages/datetime2/src/blueprint-datetime2.scss b/packages/datetime2/src/blueprint-datetime2.scss index 712c2908c14..7004ad4f4c6 100644 --- a/packages/datetime2/src/blueprint-datetime2.scss +++ b/packages/datetime2/src/blueprint-datetime2.scss @@ -1,7 +1,7 @@ // Copyright 2022 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "common/react-day-picker-overrides"; -@import "components/date-picker3/date-picker3"; -@import "components/date-picker3/date-picker3-caption"; -@import "components/date-range-picker3/date-range-picker3"; +@forward "common/react-day-picker-overrides"; +@forward "components/date-picker3/date-picker3"; +@forward "components/date-picker3/date-picker3-caption"; +@forward "components/date-range-picker3/date-range-picker3"; diff --git a/packages/datetime2/src/common/_react-day-picker-overrides.scss b/packages/datetime2/src/common/_react-day-picker-overrides.scss index 2404c935395..463c3339c65 100644 --- a/packages/datetime2/src/common/_react-day-picker-overrides.scss +++ b/packages/datetime2/src/common/_react-day-picker-overrides.scss @@ -1,11 +1,11 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; // omit file extension, otherwise this will emit a `@import url()` rule -@import "react-day-picker/dist/style"; +@forward "react-day-picker/dist/style"; .#{$ns}-datepicker-content .rdp { --rdp-cell-size: #{$pt-grid-size * 3}; diff --git a/packages/datetime2/src/components/date-picker3/_date-picker3-caption.scss b/packages/datetime2/src/components/date-picker3/_date-picker3-caption.scss index e2bc15b194e..f1cad6f8b5b 100644 --- a/packages/datetime2/src/components/date-picker3/_date-picker3-caption.scss +++ b/packages/datetime2/src/components/date-picker3/_date-picker3-caption.scss @@ -1,8 +1,10 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/datetime/src/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/datetime/src/common" as *; // react-day-picker does not conform to our naming scheme /* stylelint-disable selector-class-pattern */ diff --git a/packages/datetime2/src/components/date-picker3/_date-picker3.scss b/packages/datetime2/src/components/date-picker3/_date-picker3.scss index 69465a97b13..566e0aed986 100644 --- a/packages/datetime2/src/components/date-picker3/_date-picker3.scss +++ b/packages/datetime2/src/components/date-picker3/_date-picker3.scss @@ -1,9 +1,11 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/components/popover/common"; -@import "@blueprintjs/datetime/src/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/popover/common" as *; +@use "@blueprintjs/datetime/src/common" as *; // react-day-picker does not conform to our naming scheme /* stylelint-disable selector-class-pattern */ diff --git a/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss b/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss index 59663bdb007..b947878d8d1 100644 --- a/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss +++ b/packages/datetime2/src/components/date-range-picker3/_date-range-picker3.scss @@ -1,11 +1,12 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/core/src/common/flex"; -@import "@blueprintjs/core/src/components/button/common"; -@import "@blueprintjs/datetime/src/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/button/common" as *; +@use "@blueprintjs/datetime/src/common" as *; // react-day-picker does not conform to our naming scheme /* stylelint-disable selector-class-pattern */ diff --git a/packages/demo-app/src/index.scss b/packages/demo-app/src/index.scss index 81436c006b5..d68ae7185e8 100644 --- a/packages/demo-app/src/index.scss +++ b/packages/demo-app/src/index.scss @@ -1,10 +1,10 @@ +@forward "./styles/examples"; + @import "@blueprintjs/core/lib/css/blueprint.css"; @import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; @import "@blueprintjs/datetime2/lib/css/blueprint-datetime2.css"; @import "@blueprintjs/table/lib/css/table.css"; -@import "./styles/examples"; - body { margin: 0; overflow-y: scroll; diff --git a/packages/demo-app/src/styles/_examples.scss b/packages/demo-app/src/styles/_examples.scss index d02ebf0aaac..d213c913ad4 100644 --- a/packages/demo-app/src/styles/_examples.scss +++ b/packages/demo-app/src/styles/_examples.scss @@ -1,4 +1,4 @@ -@import "@blueprintjs/core/lib/scss/variables"; +@use "@blueprintjs/core/lib/scss/variables" as *; $intent-primary-text: $blue1; $intent-success-text: $green1; diff --git a/packages/docs-app/src/_main.scss b/packages/docs-app/src/_main.scss new file mode 100644 index 00000000000..570b1ebc204 --- /dev/null +++ b/packages/docs-app/src/_main.scss @@ -0,0 +1,48 @@ +/* + +Copyright 2015-present Palantir Technologies, Inc. All rights reserved. +Licensed under the Apache License, Version 2.0. + +*/ + +@forward "styles/colors"; +@forward "styles/examples"; +@forward "styles/icons"; +@forward "styles/nav"; +@forward "styles/resources"; +@forward "styles/welcome"; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/docs-theme/src/styles/variables" as *; + +.docs-releases-menu .#{$ns}-menu { + min-width: 270px; +} + +// remove padding on left side of tables in documentation +.docs-section .#{$ns}-running-text table { + margin: $content-padding 0; + + th { + padding-top: 0; + } + + th:first-child, + td:first-child { + padding-left: 0; + padding-right: 0; + } +} + +.docs-root, +.docs-nav, +.docs-content-wrapper, +.docs-example, +.docs-example-options, +.editor, +code { + transition: background-color $pt-transition-duration $pt-transition-ease; +} + +.docs-root { + isolation: isolate; +} diff --git a/packages/docs-app/src/index.scss b/packages/docs-app/src/index.scss index bf715152b54..9bc1f8d2691 100644 --- a/packages/docs-app/src/index.scss +++ b/packages/docs-app/src/index.scss @@ -17,45 +17,6 @@ Licensed under the Apache License, Version 2.0. // then the docs theme styles @import "@blueprintjs/docs-theme/lib/css/docs-theme.css"; -@import "@blueprintjs/docs-theme/src/styles/variables"; // then our own styles -@import "styles/colors"; -@import "styles/examples"; -@import "styles/icons"; -@import "styles/nav"; -@import "styles/resources"; -@import "styles/welcome"; - -.docs-releases-menu .#{$ns}-menu { - min-width: 270px; -} - -// remove padding on left side of tables in documentation -.docs-section .#{$ns}-running-text table { - margin: $content-padding 0; - - th { - padding-top: 0; - } - - th:first-child, - td:first-child { - padding-left: 0; - padding-right: 0; - } -} - -.docs-root, -.docs-nav, -.docs-content-wrapper, -.docs-example, -.docs-example-options, -.editor, -code { - transition: background-color $pt-transition-duration $pt-transition-ease; -} - -.docs-root { - isolation: isolate; -} +@import "./main"; diff --git a/packages/docs-app/src/styles/_colors.scss b/packages/docs-app/src/styles/_colors.scss index 9cf1762f7a3..1291e4edc40 100644 --- a/packages/docs-app/src/styles/_colors.scss +++ b/packages/docs-app/src/styles/_colors.scss @@ -2,7 +2,12 @@ // Licensed under the Apache License, Version 2.0. @use "sass:math"; -@import "@blueprintjs/icons/lib/scss/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "@blueprintjs/icons/lib/scss/blueprint-icons-16" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; $palette-spacing: $pt-grid-size * 2; $palette-border-radius: 4px; diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss index 2b1bfb9677e..5c06e81a220 100644 --- a/packages/docs-app/src/styles/_examples.scss +++ b/packages/docs-app/src/styles/_examples.scss @@ -1,10 +1,15 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/core/src/common/react-transition"; -@import "@blueprintjs/core/src/common/variables-extended"; -@import "@blueprintjs/core/src/components/icon/icon-mixins"; -@import "@blueprintjs/icons/lib/scss/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/react-transition" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/common/variables-extended" as *; +@use "@blueprintjs/core/src/components/icon/icon-mixins" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; // Generate a selector for a page ID by reference @function page($ref, $comparator: "$=") { diff --git a/packages/docs-app/src/styles/_icons.scss b/packages/docs-app/src/styles/_icons.scss index 1437863d224..a9ffff25ed3 100644 --- a/packages/docs-app/src/styles/_icons.scss +++ b/packages/docs-app/src/styles/_icons.scss @@ -2,7 +2,10 @@ // Licensed under the Apache License, Version 2.0. @use "sass:math"; -@import "@blueprintjs/core/src/common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; $svg-icon-size: 36px; diff --git a/packages/docs-app/src/styles/_nav.scss b/packages/docs-app/src/styles/_nav.scss index 15f67d6eeb9..dc56a2c954c 100644 --- a/packages/docs-app/src/styles/_nav.scss +++ b/packages/docs-app/src/styles/_nav.scss @@ -1,6 +1,11 @@ // Copyright 2018 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/docs-theme/src/styles/variables" as *; + $pkg-icon-width: 24px; $package-colors: ( diff --git a/packages/docs-app/src/styles/_resources.scss b/packages/docs-app/src/styles/_resources.scss index d5c6a04d97d..803d9e520a8 100644 --- a/packages/docs-app/src/styles/_resources.scss +++ b/packages/docs-app/src/styles/_resources.scss @@ -1,5 +1,10 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; + $resources-path: "./assets"; $asset-padding: $pt-grid-size; diff --git a/packages/docs-app/src/styles/_welcome.scss b/packages/docs-app/src/styles/_welcome.scss index cbc76b847f8..e03f7bcd756 100644 --- a/packages/docs-app/src/styles/_welcome.scss +++ b/packages/docs-app/src/styles/_welcome.scss @@ -1,5 +1,10 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/docs-theme/src/styles/variables" as *; + .blueprint-welcome { @include pt-flex-container(row, $content-padding); justify-content: space-between; diff --git a/packages/docs-theme/src/docs-theme.scss b/packages/docs-theme/src/docs-theme.scss index 80fb772cd15..be638f3a6db 100644 --- a/packages/docs-theme/src/docs-theme.scss +++ b/packages/docs-theme/src/docs-theme.scss @@ -5,14 +5,14 @@ Licensed under the Apache License, Version 2.0. */ -@import "styles/api"; -@import "styles/banner"; -@import "styles/code-block"; -@import "styles/code-example"; -@import "styles/content"; -@import "styles/examples"; -@import "styles/layout"; -@import "styles/navbar"; -@import "styles/navigator"; -@import "styles/overrides"; -@import "styles/props"; +@forward "styles/api"; +@forward "styles/banner"; +@forward "styles/code-block"; +@forward "styles/code-example"; +@forward "styles/content"; +@forward "styles/examples"; +@forward "styles/layout"; +@forward "styles/navbar"; +@forward "styles/navigator"; +@forward "styles/overrides"; +@forward "styles/props"; diff --git a/packages/docs-theme/src/styles/_api.scss b/packages/docs-theme/src/styles/_api.scss index 46f98101309..636786debc9 100644 --- a/packages/docs-theme/src/styles/_api.scss +++ b/packages/docs-theme/src/styles/_api.scss @@ -1,8 +1,9 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/core/src/common/react-transition"; -@import "variables"; +@use "@blueprintjs/core/src/common/react-transition" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "./variables" as *; .docs-api-drawer { .docs-modifiers { diff --git a/packages/docs-theme/src/styles/_banner.scss b/packages/docs-theme/src/styles/_banner.scss index 13e7bef3b50..dc2f56ba25a 100644 --- a/packages/docs-theme/src/styles/_banner.scss +++ b/packages/docs-theme/src/styles/_banner.scss @@ -1,8 +1,13 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/core/src/components/button/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/button/common" as *; +@use "./variables" as *; $banner-height: $pt-grid-size * 4; diff --git a/packages/docs-theme/src/styles/_code-block.scss b/packages/docs-theme/src/styles/_code-block.scss index 38cb96d38d1..053c4a3c33b 100644 --- a/packages/docs-theme/src/styles/_code-block.scss +++ b/packages/docs-theme/src/styles/_code-block.scss @@ -1,7 +1,7 @@ // Copyright 2023 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "variables"; +@use "@blueprintjs/core/src/common/variables" as *; .#{$ns}-docs-code-block { overflow: auto; diff --git a/packages/docs-theme/src/styles/_code-example.scss b/packages/docs-theme/src/styles/_code-example.scss index a09df1d4251..6f3cdac5bb3 100644 --- a/packages/docs-theme/src/styles/_code-example.scss +++ b/packages/docs-theme/src/styles/_code-example.scss @@ -1,3 +1,6 @@ +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; + .docs-code-example-frame { display: flex; flex-direction: column; diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss index 06c0202fd70..5541ef622bc 100644 --- a/packages/docs-theme/src/styles/_content.scss +++ b/packages/docs-theme/src/styles/_content.scss @@ -1,9 +1,11 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/core/src/components/icon/icon-mixins"; -@import "@blueprintjs/icons/lib/scss/variables"; -@import "variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/icon/icon-mixins" as *; +@use "./variables" as *; $heading-margin: $pt-grid-size * 4; $link-icon-padding: $pt-grid-size; diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss index a85deec9d4a..221e2718e74 100644 --- a/packages/docs-theme/src/styles/_examples.scss +++ b/packages/docs-theme/src/styles/_examples.scss @@ -1,6 +1,12 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "./content" as *; +@use "./variables" as *; + // Base styles for all examples $example-frame-spacing: $pt-grid-size; diff --git a/packages/docs-theme/src/styles/_layout.scss b/packages/docs-theme/src/styles/_layout.scss index da03681aafd..43f196d6566 100644 --- a/packages/docs-theme/src/styles/_layout.scss +++ b/packages/docs-theme/src/styles/_layout.scss @@ -1,9 +1,12 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/core/src/common/flex"; -@import "@blueprintjs/core/src/components/forms/common"; -@import "variables"; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/button/common" as *; +@use "@blueprintjs/core/src/components/forms/common" as *; +@use "./variables" as *; $nav-item-indent: $pt-grid-size * 2; diff --git a/packages/docs-theme/src/styles/_navbar.scss b/packages/docs-theme/src/styles/_navbar.scss index 9957c51c078..7cb430215ed 100644 --- a/packages/docs-theme/src/styles/_navbar.scss +++ b/packages/docs-theme/src/styles/_navbar.scss @@ -1,8 +1,11 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "variables"; -@import "../../../core/src/components/button/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "./variables" as *; $nav-divider-offset: $pt-grid-size * 5; diff --git a/packages/docs-theme/src/styles/_navigator.scss b/packages/docs-theme/src/styles/_navigator.scss index 4277929f96c..975e7e174b8 100644 --- a/packages/docs-theme/src/styles/_navigator.scss +++ b/packages/docs-theme/src/styles/_navigator.scss @@ -1,6 +1,8 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/core/src/common/variables" as *; + $navigator-width: $pt-grid-size * 40; .docs-navigator-menu { diff --git a/packages/docs-theme/src/styles/_overrides.scss b/packages/docs-theme/src/styles/_overrides.scss index 10e9c8b5ea3..3528cb760f5 100644 --- a/packages/docs-theme/src/styles/_overrides.scss +++ b/packages/docs-theme/src/styles/_overrides.scss @@ -1,6 +1,8 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/core/src/common/variables" as *; + table { width: 100%; } diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss index d0f2bfc7607..a4f1408a13d 100644 --- a/packages/docs-theme/src/styles/_props.scss +++ b/packages/docs-theme/src/styles/_props.scss @@ -1,6 +1,13 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/icons/lib/scss/variables" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/icon/icon-mixins" as *; +@use "./content" as *; + .docs-prop-details code { /* stylelint-disable declaration-no-important */ background: none !important; diff --git a/packages/docs-theme/src/styles/_variables.scss b/packages/docs-theme/src/styles/_variables.scss index 37974a0cd8c..3cc9dab707e 100644 --- a/packages/docs-theme/src/styles/_variables.scss +++ b/packages/docs-theme/src/styles/_variables.scss @@ -1,9 +1,8 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/core/src/common/mixins"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; $container-width: $pt-grid-size * 110; $container-padding: $pt-grid-size * 0.5; diff --git a/packages/icons/src/blueprint-icons.scss b/packages/icons/src/blueprint-icons.scss index cffa457e1a3..9abb25183a1 100644 --- a/packages/icons/src/blueprint-icons.scss +++ b/packages/icons/src/blueprint-icons.scss @@ -3,5 +3,5 @@ Copyright 2017-present Palantir Technologies, Inc. All rights reserved. Licensed under the Apache License, Version 2.0. */ -@import "generated/16px/blueprint-icons-16"; -@import "generated/20px/blueprint-icons-20"; +@forward "generated/16px/blueprint-icons-16"; +@forward "generated/20px/blueprint-icons-20"; diff --git a/packages/icons/src/templates/_lib_variables.scss b/packages/icons/src/templates/_lib_variables.scss index becd75131f5..eaf0cb38c9f 100644 --- a/packages/icons/src/templates/_lib_variables.scss +++ b/packages/icons/src/templates/_lib_variables.scss @@ -1,7 +1,7 @@ // Copyright 2021 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "blueprint-icons-16"; -@import "blueprint-icons-20"; +@use "blueprint-icons-16" as *; +@use "blueprint-icons-20" as *; $blueprint-icon-codepoints: $blueprint-icons-16-codepoints; diff --git a/packages/landing-app/src/_main.scss b/packages/landing-app/src/_main.scss new file mode 100644 index 00000000000..7ee2ed8ef56 --- /dev/null +++ b/packages/landing-app/src/_main.scss @@ -0,0 +1,179 @@ +/* + +Copyright 2015-present Palantir Technologies, Inc. All rights reserved. +Licensed under the Apache License, Version 2.0. + +*/ +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/flex" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@forward "./svgs"; + +$body-background-color: $black; + +$canvas-height: 630px; +$container-width: 760px; + +$mobile-breakpoint: 425px; +$tablet-breakpoint: 768px; + +html { + background-color: $body-background-color; + text-size-adjust: 100%; +} + +body { + background-color: $body-background-color; + margin: 0; + padding: 0; +} + +.landing-container { + margin: 0 auto; + max-width: $container-width; + padding: 0 $pt-grid-size * 2; +} + +header { + background-color: transparent; + height: $canvas-height; + margin: 0; + overflow: hidden; + position: relative; + text-align: center; + user-select: none; + + .landing-container { + @include position-all(absolute, 0); + pointer-events: none; + z-index: $pt-z-index-base; + } + + h1 { + clear: both; + color: $white; + font-weight: 400; + line-height: 1.2; + margin: 0 auto; + margin-top: $pt-grid-size * 33; + } + + h3 { + color: $white; + font-weight: 400; + margin-bottom: $pt-grid-size * 3; + margin-top: $pt-grid-size * 3; + opacity: 0.8; + } + + .#{$ns}-button.landing-button { + color: rgba($white, 0.7); + pointer-events: all; + position: relative; + + &:hover { + background-color: rgba($white, 0.2); + color: rgba($white, 0.7); + } + + &:active { + background-color: rgba($white, 0.4); + color: $white; + } + } + + .#{$ns}-icon-dot { + color: rgba($white, 0.5); + margin: $pt-grid-size * 0.5; + } + + canvas { + @include position-all(absolute, 0); + } +} + +footer { + background-color: transparent; +} + +.landing-about { + .landing-container { + @include pt-flex-container(column, $pt-grid-size * 3); + align-items: center; + padding-bottom: $pt-grid-size * 6; + padding-top: $pt-grid-size * 6; + text-align: center; + } + + img { + width: $pt-grid-size * 6; + } + + p:first-of-type { + font-size: $pt-font-size-large; + } + + p:last-of-type { + font-weight: 300; + } + + .landing-separator { + background-color: $dark-gray5; + height: 2px; + width: $pt-grid-size * 4; + } +} + +.landing-copyright { + &::before { + background-image: linear-gradient( + 90deg, + rgba($white, 0) 0%, + rgba($white, 0.3) 50%, + rgba($white, 0) 100% + ); + content: ""; + display: block; + height: 1px; + } + + .landing-container { + align-items: center; + display: flex; + justify-content: space-between; + min-height: $pt-navbar-height; + padding: $pt-grid-size * 0.5; + } +} + +@media (max-width: $mobile-breakpoint) { + header { + height: $pt-grid-size * 80; + + h1 { + font-size: $pt-grid-size * 3.6; + } + + h3 { + font-size: $pt-grid-size * 1.8; + margin-bottom: $pt-grid-size * 2.5; + } + + .#{$ns}-icon-dot { + display: block; + } + } +} + +@media (max-width: $tablet-breakpoint) { + .landing-copyright { + .landing-container { + flex-direction: column; + } + + .landing-button { + margin: $pt-grid-size * 0.5; + } + } +} diff --git a/packages/landing-app/src/index.scss b/packages/landing-app/src/index.scss index d992ded66f8..fc43d49464a 100644 --- a/packages/landing-app/src/index.scss +++ b/packages/landing-app/src/index.scss @@ -7,174 +7,4 @@ Licensed under the Apache License, Version 2.0. @import "@blueprintjs/core/lib/css/blueprint.css"; @import "@blueprintjs/icons/lib/css/blueprint-icons.css"; -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; -@import "svgs"; - -$body-background-color: $black; - -$canvas-height: 630px; -$container-width: 760px; - -$mobile-breakpoint: 425px; -$tablet-breakpoint: 768px; - -html { - background-color: $body-background-color; - text-size-adjust: 100%; -} - -body { - background-color: $body-background-color; - margin: 0; - padding: 0; -} - -.landing-container { - margin: 0 auto; - max-width: $container-width; - padding: 0 $pt-grid-size * 2; -} - -header { - background-color: transparent; - height: $canvas-height; - margin: 0; - overflow: hidden; - position: relative; - text-align: center; - user-select: none; - - .landing-container { - @include position-all(absolute, 0); - pointer-events: none; - z-index: $pt-z-index-base; - } - - h1 { - clear: both; - color: $white; - font-weight: 400; - line-height: 1.2; - margin: 0 auto; - margin-top: $pt-grid-size * 33; - } - - h3 { - color: $white; - font-weight: 400; - margin-bottom: $pt-grid-size * 3; - margin-top: $pt-grid-size * 3; - opacity: 0.8; - } - - .#{$ns}-button.landing-button { - color: rgba($white, 0.7); - pointer-events: all; - position: relative; - - &:hover { - background-color: rgba($white, 0.2); - color: rgba($white, 0.7); - } - - &:active { - background-color: rgba($white, 0.4); - color: $white; - } - } - - .#{$ns}-icon-dot { - color: rgba($white, 0.5); - margin: $pt-grid-size * 0.5; - } - - canvas { - @include position-all(absolute, 0); - } -} - -footer { - background-color: transparent; -} - -.landing-about { - .landing-container { - @include pt-flex-container(column, $pt-grid-size * 3); - align-items: center; - padding-bottom: $pt-grid-size * 6; - padding-top: $pt-grid-size * 6; - text-align: center; - } - - img { - width: $pt-grid-size * 6; - } - - p:first-of-type { - font-size: $pt-font-size-large; - } - - p:last-of-type { - font-weight: 300; - } - - .landing-separator { - background-color: $dark-gray5; - height: 2px; - width: $pt-grid-size * 4; - } -} - -.landing-copyright { - &::before { - background-image: linear-gradient( - 90deg, - rgba($white, 0) 0%, - rgba($white, 0.3) 50%, - rgba($white, 0) 100% - ); - content: ""; - display: block; - height: 1px; - } - - .landing-container { - align-items: center; - display: flex; - justify-content: space-between; - min-height: $pt-navbar-height; - padding: $pt-grid-size * 0.5; - } -} - -@media (max-width: $mobile-breakpoint) { - header { - height: $pt-grid-size * 80; - - h1 { - font-size: $pt-grid-size * 3.6; - } - - h3 { - font-size: $pt-grid-size * 1.8; - margin-bottom: $pt-grid-size * 2.5; - } - - .#{$ns}-icon-dot { - display: block; - } - } -} - -@media (max-width: $tablet-breakpoint) { - .landing-copyright { - .landing-container { - flex-direction: column; - } - - .landing-button { - margin: $pt-grid-size * 0.5; - } - } -} +@import "./main"; diff --git a/packages/select/src/blueprint-select.scss b/packages/select/src/blueprint-select.scss index 2a95f483a26..d421e910e17 100644 --- a/packages/select/src/blueprint-select.scss +++ b/packages/select/src/blueprint-select.scss @@ -5,4 +5,4 @@ Licensed under the Apache License, Version 2.0. */ -@import "./components/index"; +@forward "./components/index"; diff --git a/packages/select/src/common/_variables.scss b/packages/select/src/common/_variables.scss index 2b9f8e2834d..834ff40f6f8 100644 --- a/packages/select/src/common/_variables.scss +++ b/packages/select/src/common/_variables.scss @@ -4,8 +4,10 @@ // HACKHACK(https://github.com/palantir/blueprint/issues/5331): weird imports here because // core/lib/scss/variables is not available until after the 'dist' task, but at this point // we are only guaranteed 'compile' -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/variables" as *; $select-popover-max-height: $pt-grid-size * 30 !default; $select-popover-max-width: $pt-grid-size * 40 !default; + +$select-padding: $pt-grid-size * 0.5; diff --git a/packages/select/src/components/_index.scss b/packages/select/src/components/_index.scss index 8f7cc1a563c..4e86681f33f 100644 --- a/packages/select/src/components/_index.scss +++ b/packages/select/src/components/_index.scss @@ -1,7 +1,7 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "multi-select/multi-select"; -@import "omnibar/omnibar"; -@import "select/select"; -@import "suggest/suggest"; +@forward "multi-select/multi-select"; +@forward "omnibar/omnibar"; +@forward "select/select"; +@forward "suggest/suggest"; diff --git a/packages/select/src/components/multi-select/_multi-select.scss b/packages/select/src/components/multi-select/_multi-select.scss index e7f3d3ff2e7..4681661523b 100644 --- a/packages/select/src/components/multi-select/_multi-select.scss +++ b/packages/select/src/components/multi-select/_multi-select.scss @@ -1,9 +1,8 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; - -$select-padding: $pt-grid-size * 0.5; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../../common/variables" as *; .#{$ns}-multi-select { min-width: $pt-grid-size * 15; diff --git a/packages/select/src/components/omnibar/_omnibar.scss b/packages/select/src/components/omnibar/_omnibar.scss index c16c7d4bdd9..9c522d04a71 100644 --- a/packages/select/src/components/omnibar/_omnibar.scss +++ b/packages/select/src/components/omnibar/_omnibar.scss @@ -4,9 +4,10 @@ // HACKHACK(https://github.com/palantir/blueprint/issues/5331): weird imports here because // core/lib/scss/variables is not available until after the 'dist' task, but at this point // we are only guaranteed 'compile' -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/core/src/common/react-transition"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/common/react-transition" as *; $omnibar-height: 60vh !default; $omnibar-width: $pt-grid-size * 50 !default; diff --git a/packages/select/src/components/select/_select.scss b/packages/select/src/components/select/_select.scss index a4aa659ba29..fa98eb75cd3 100644 --- a/packages/select/src/components/select/_select.scss +++ b/packages/select/src/components/select/_select.scss @@ -1,9 +1,8 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; - -$select-padding: $pt-grid-size * 0.5; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../../common/variables" as *; .#{$ns}-select-popover { .#{$ns}-popover-content { diff --git a/packages/select/src/components/suggest/_suggest.scss b/packages/select/src/components/suggest/_suggest.scss index ac51c675d90..62eb7d1e62f 100644 --- a/packages/select/src/components/suggest/_suggest.scss +++ b/packages/select/src/components/suggest/_suggest.scss @@ -1,7 +1,8 @@ // Copyright 2022 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../../common/variables"; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../../common/variables" as *; .#{$ns}-suggest-popover { .#{$ns}-menu { diff --git a/packages/table-dev-app/src/_main.scss b/packages/table-dev-app/src/_main.scss new file mode 100644 index 00000000000..5d6bc6181a7 --- /dev/null +++ b/packages/table-dev-app/src/_main.scss @@ -0,0 +1,173 @@ +// Copyright 2017 Palantir Technologies, Inc. All rights reserved. +// Licensed under the Apache License, Version 2.0. + +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; + +body { + background-color: $pt-app-background-color; + inset: 0; + + margin: 0; + padding: 0; + position: absolute; + + .#{$ns}-dark { + background-color: $pt-dark-app-background-color; + } +} + +/* stylelint-disable-next-line selector-max-id */ +#page-content { + inset: $pt-navbar-height 0 0; + position: absolute; +} + +/** + * A simple filling layout that DOES NOT create a layout boundary (due to `display: inline-block`) + */ +.layout-passthrough-fill { + display: inline-block; + height: 100%; + position: relative; + width: 100%; +} + +/** + * A simple filling layout that DOES create a layout boundary. + * See: http://wilsonpage.co.uk/introducing-layout-boundaries/ + */ +.layout-boundary { + display: block; + inset: 0; + overflow: hidden; + position: absolute; +} + +.container { + display: flex; + height: 100%; + overflow: hidden; +} + +.table { + flex: 1 1 auto; + order: 2; + overflow: hidden; + position: relative; + z-index: 2; + + &.is-inline { + margin-left: -12.5%; + max-height: 50%; + max-width: 50%; + transform: translateX(50%) translateY(50%); + } +} + +.sidebar { + background-color: $light-gray4; + flex: 0 0 300px; + height: 100%; + order: 1; + overflow-y: auto; + padding: 15px; + z-index: 3; + + h4.#{$ns}-heading { + margin-top: $pt-grid-size * 2; + + &:first-child { + margin-top: 0; + } + } + + h6.#{$ns}-heading { + color: $pt-text-color-muted; + padding: 10px 0 3px; + } + + .#{$ns}-divider { + margin: 15px 5px; + } + + .#{$ns}-label, + .#{$ns}-control { + padding-left: $pt-grid-size; + } + + .tbl-select-label { + margin-bottom: 7px; + margin-top: -3px; + + .#{$ns}-html-select { + float: right; + } + + &.#{$ns}-disabled { + cursor: not-allowed; + } + } + + > .#{$ns}-button + .#{$ns}-button { + margin-top: 3px; + } + + .#{$ns}-dark & { + background-color: $dark-gray2; + color: $dark-gray2; + z-index: 1; + + h6.#{$ns}-heading { + color: $pt-dark-text-color-muted; + } + } +} + +.sidebar-indented-group { + margin-left: $pt-grid-size; +} + +.tbl-zebra-stripe { + background-color: $light-gray5; + + .#{$ns}-dark & { + background-color: $dark-gray5; + } +} + +.tbl-styled-region-success { + background-color: rgba($pt-intent-success, 0.1); + border: 1px solid $pt-intent-success; +} + +.tbl-styled-region-warning { + background-color: rgba($pt-intent-warning, 0.1); + border: 1px solid $pt-intent-warning; +} + +.tbl-styled-region-danger { + background-color: rgba($pt-intent-danger, 0.1); + border: 1px solid $pt-intent-danger; +} + +.tbl-custom-column-header { + line-height: 1; + padding: 7px 0; +} + +.tbl-custom-column-header-name { + font-weight: 600; +} + +.tbl-custom-column-header-type { + color: $gray1; + font-family: "Courier", monospace; + font-size: 12px; + margin-top: 3px; + + .#{$ns}-dark & { + color: $gray5; + } +} diff --git a/packages/table-dev-app/src/index.scss b/packages/table-dev-app/src/index.scss index 86fff923982..b725f8734c2 100644 --- a/packages/table-dev-app/src/index.scss +++ b/packages/table-dev-app/src/index.scss @@ -2,173 +2,9 @@ // Licensed under the Apache License, Version 2.0. @import "normalize.css/normalize.css"; + @import "@blueprintjs/core/lib/css/blueprint.css"; @import "@blueprintjs/icons/lib/css/blueprint-icons.css"; -@import "@blueprintjs/table/src/table"; - -body { - background-color: $pt-app-background-color; - inset: 0; - - margin: 0; - padding: 0; - position: absolute; - - .#{$ns}-dark { - background-color: $pt-dark-app-background-color; - } -} - -/* stylelint-disable-next-line selector-max-id */ -#page-content { - inset: $pt-navbar-height 0 0; - position: absolute; -} - -/** - * A simple filling layout that DOES NOT create a layout boundary (due to `display: inline-block`) - */ -.layout-passthrough-fill { - display: inline-block; - height: 100%; - position: relative; - width: 100%; -} - -/** - * A simple filling layout that DOES create a layout boundary. - * See: http://wilsonpage.co.uk/introducing-layout-boundaries/ - */ -.layout-boundary { - display: block; - inset: 0; - overflow: hidden; - position: absolute; -} - -.container { - display: flex; - height: 100%; - overflow: hidden; -} - -.table { - flex: 1 1 auto; - order: 2; - overflow: hidden; - position: relative; - z-index: 2; - - &.is-inline { - margin-left: -12.5%; - max-height: 50%; - max-width: 50%; - transform: translateX(50%) translateY(50%); - } -} - -.sidebar { - background-color: $light-gray4; - flex: 0 0 300px; - height: 100%; - order: 1; - overflow-y: auto; - padding: 15px; - z-index: 3; - - h4.#{$ns}-heading { - margin-top: $pt-grid-size * 2; - - &:first-child { - margin-top: 0; - } - } - - h6.#{$ns}-heading { - color: $pt-text-color-muted; - padding: 10px 0 3px; - } - - .#{$ns}-divider { - margin: 15px 5px; - } - - .#{$ns}-label, - .#{$ns}-control { - padding-left: $pt-grid-size; - } - - .tbl-select-label { - margin-bottom: 7px; - margin-top: -3px; - - .#{$ns}-html-select { - float: right; - } - - &.#{$ns}-disabled { - cursor: not-allowed; - } - } - - > .#{$ns}-button + .#{$ns}-button { - margin-top: 3px; - } - - .#{$ns}-dark & { - background-color: $dark-gray2; - color: $dark-gray2; - z-index: 1; - - h6.#{$ns}-heading { - color: $pt-dark-text-color-muted; - } - } -} - -.sidebar-indented-group { - margin-left: $pt-grid-size; -} - -.tbl-zebra-stripe { - background-color: $light-gray5; - - .#{$ns}-dark & { - background-color: $dark-gray5; - } -} - -.tbl-styled-region-success { - background-color: rgba($pt-intent-success, 0.1); - border: 1px solid $pt-intent-success; -} - -.tbl-styled-region-warning { - background-color: rgba($pt-intent-warning, 0.1); - border: 1px solid $pt-intent-warning; -} - -.tbl-styled-region-danger { - background-color: rgba($pt-intent-danger, 0.1); - border: 1px solid $pt-intent-danger; -} - -.tbl-custom-column-header { - line-height: 1; - padding: 7px 0; -} - -.tbl-custom-column-header-name { - font-weight: 600; -} - -.tbl-custom-column-header-type { - color: $gray1; - font-family: "Courier", monospace; - font-size: 12px; - margin-top: 3px; +@import "@blueprintjs/table/lib/css/table.css"; - .#{$ns}-dark & { - color: $gray5; - } -} +@import "./main"; diff --git a/packages/table/src/cell/_borders.scss b/packages/table/src/cell/_borders.scss index 62a94fb334e..171acfcfce2 100644 --- a/packages/table/src/cell/_borders.scss +++ b/packages/table/src/cell/_borders.scss @@ -1,8 +1,9 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. // Licensed under the Apache License, Version 2.0. -@import "../common/variables"; -@import "./common"; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/variables" as *; +@use "./common" as *; /* We use box shadows instead of borders since it makes the size and position diff --git a/packages/table/src/cell/_cell.scss b/packages/table/src/cell/_cell.scss index 2fd137b8f6c..90b43f91574 100644 --- a/packages/table/src/cell/_cell.scss +++ b/packages/table/src/cell/_cell.scss @@ -1,8 +1,11 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../common/loading"; -@import "../common/variables"; -@import "./common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/loading" as *; +@use "../common/variables" as *; +@use "./common" as *; .#{$ns}-table-cell { @include cell(); diff --git a/packages/table/src/cell/_common.scss b/packages/table/src/cell/_common.scss index 22725d81d15..00afaddcbbd 100644 --- a/packages/table/src/cell/_common.scss +++ b/packages/table/src/cell/_common.scss @@ -1,6 +1,9 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/variables" as *; $cell-border-width: 1px !default; $frozen-cell-border-width: 3px !default; diff --git a/packages/table/src/cell/formats/_formats.scss b/packages/table/src/cell/formats/_formats.scss index 7698e393d81..ee3d270ba69 100644 --- a/packages/table/src/cell/formats/_formats.scss +++ b/packages/table/src/cell/formats/_formats.scss @@ -1,7 +1,9 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../../common/variables"; -@import "../common"; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../../common/variables" as *; +@use "../common" as *; .#{$ns}-table-null { color: $pt-text-color-disabled; diff --git a/packages/table/src/common/_loading.scss b/packages/table/src/common/_loading.scss index e6c2c882290..96609e8e805 100644 --- a/packages/table/src/common/_loading.scss +++ b/packages/table/src/common/_loading.scss @@ -1,8 +1,8 @@ // Copyright 2017 Palantir Technologies, Inc. All rights reserved. -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/core/src/components/skeleton/common"; -@import "../cell/common"; +@use "@blueprintjs/core/src/common/variables" as *; +@use "@blueprintjs/core/src/components/skeleton/common" as *; +@use "../cell/common" as *; @keyframes skeleton-fade-in { 0% { diff --git a/packages/table/src/common/_variables.scss b/packages/table/src/common/_variables.scss index 2cfc8d37627..52e4ac6ce28 100644 --- a/packages/table/src/common/_variables.scss +++ b/packages/table/src/common/_variables.scss @@ -1,7 +1,8 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; // TODO: use Blueprint intents instead of duplicating... $pt-intent-colors: ( diff --git a/packages/table/src/headers/_common.scss b/packages/table/src/headers/_common.scss index aa7c92267e6..22b0dd32ff7 100644 --- a/packages/table/src/headers/_common.scss +++ b/packages/table/src/headers/_common.scss @@ -1,5 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/variables" as *; + $column-header-min-height: $pt-grid-size * 3 !default; $row-header-min-width: $column-header-min-height !default; $row-header-padding: 0 $pt-grid-size * 0.5 !default; diff --git a/packages/table/src/headers/_headers.scss b/packages/table/src/headers/_headers.scss index 5934ccf6d9c..bfa4fabea82 100644 --- a/packages/table/src/headers/_headers.scss +++ b/packages/table/src/headers/_headers.scss @@ -1,9 +1,12 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../common/loading"; -@import "../common/variables"; -@import "../cell/common"; -@import "./common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/loading" as *; +@use "../common/variables" as *; +@use "../cell/common" as *; +@use "./common" as *; @function menu-background($color) { @return linear-gradient(90deg, rgba($color, 0) 0%, $color 50%); diff --git a/packages/table/src/interactions/_interactions.scss b/packages/table/src/interactions/_interactions.scss index dfa02935135..d2b0ddc5a6a 100644 --- a/packages/table/src/interactions/_interactions.scss +++ b/packages/table/src/interactions/_interactions.scss @@ -1,6 +1,8 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../common/variables"; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/variables" as *; $resize-handle-target-width: 5px !default; $resize-handle-width: 3px !default; diff --git a/packages/table/src/layers/_layers.scss b/packages/table/src/layers/_layers.scss index dfefd4c87b8..925066db45e 100644 --- a/packages/table/src/layers/_layers.scss +++ b/packages/table/src/layers/_layers.scss @@ -1,7 +1,10 @@ // Copyright 2016 Palantir Technologies, Inc. All rights reserved. -@import "../common/variables"; -@import "../cell/common"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/color-aliases" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/variables" as *; +@use "../cell/common" as *; $region-default-color: $gray3 !default; $region-selected-color: $pt-intent-primary !default; diff --git a/packages/table/src/quadrants/_quadrants.scss b/packages/table/src/quadrants/_quadrants.scss index 5b793715d47..6f0e4a5b414 100644 --- a/packages/table/src/quadrants/_quadrants.scss +++ b/packages/table/src/quadrants/_quadrants.scss @@ -1,5 +1,7 @@ -@import "@blueprintjs/core/src/common/mixins"; -@import "../common/variables"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "../common/variables" as *; $table-quadrant-z-index-main: 0; $table-quadrant-z-index-top: $table-quadrant-z-index-main + 1; diff --git a/packages/table/src/table.scss b/packages/table/src/table.scss index b6511308579..0b2c5933201 100644 --- a/packages/table/src/table.scss +++ b/packages/table/src/table.scss @@ -5,18 +5,20 @@ Licensed under the Apache License, Version 2.0. */ -@import "@blueprintjs/colors/lib/scss/colors"; -@import "@blueprintjs/core/src/common/variables"; -@import "@blueprintjs/core/src/common/mixins"; -@import "./common/loading"; -@import "./common/variables"; -@import "./cell/cell"; -@import "./cell/formats/formats"; -@import "./cell/borders"; -@import "./headers/headers"; -@import "./interactions/interactions"; -@import "./layers/layers"; -@import "./quadrants/quadrants"; +@use "@blueprintjs/colors/lib/scss/colors" as *; +@use "@blueprintjs/core/src/common/mixins" as *; +@use "@blueprintjs/core/src/common/variables" as *; +@use "./common/loading" as *; +@use "./common/variables" as *; +@use "./cell/common" as *; +@use "./headers/common" as *; +@forward "./cell/cell"; +@forward "./cell/formats/formats"; +@forward "./cell/borders"; +@forward "./headers/headers"; +@forward "./interactions/interactions"; +@forward "./layers/layers"; +@forward "./quadrants/quadrants"; $body-z-index: $pt-z-index-content !default; $column-z-index: $body-z-index + 1 !default;