ripple · achowdhry-ripple · Nov 12, 2024 · Nov 1, 2024 · Nov 1, 2024 · Nov 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "react-error-overlay": "6.0.11",
     "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.1",
-    "sass": "^1.76.0",
+    "sass": "^1.80.5",
     "source-map-explorer": "^2.5.3",
     "stylelint": "^15.11.0",
     "stylelint-config-idiomatic-order": "^10.0.0",

diff --git a/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss b/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss
@@ -1,4 +1,4 @@
-@import 'src/containers/shared/css/variables';
+@use 'src/containers/shared/css/variables' as *;
 
 .balance-selector {
   position: relative;

diff --git a/src/containers/Accounts/AccountHeader/styles.scss b/src/containers/Accounts/AccountHeader/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .account-header {
   margin-bottom: 16px;

diff --git a/src/containers/Accounts/styles.scss b/src/containers/Accounts/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables';
 
 .accounts-page {
   .loader {

diff --git a/src/containers/Amendment/amendment.scss b/src/containers/Amendment/amendment.scss
@@ -1,5 +1,5 @@
-@import '../shared/css/variables';
-@import '../shared/css/table';
+@use '../shared/css/variables' as *;
+@use '../shared/css/table';
 
 .amendment-summary {
   width: 80%;

diff --git a/src/containers/Amendments/amendmentsTable.scss b/src/containers/Amendments/amendmentsTable.scss
@@ -1,5 +1,5 @@
-@import '../shared/css/variables';
-@import '../shared/css/table';
+@use '../shared/css/variables' as *;
+@use '../shared/css/table';
 
 .amendments-page{
   .summary {

diff --git a/src/containers/App/app.scss b/src/containers/App/app.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .app {
   flex-grow: 1;

diff --git a/src/containers/CustomNetworkHome/index.scss b/src/containers/CustomNetworkHome/index.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .app {
   position: relative;

diff --git a/src/containers/Footer/footer.scss b/src/containers/Footer/footer.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .footer {
   position: relative;

diff --git a/src/containers/Header/LanguagePicker/LanguagePicker.scss b/src/containers/Header/LanguagePicker/LanguagePicker.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .language-picker {
   margin-left: auto;

diff --git a/src/containers/Header/NavigationMenu/NavigationMenu.scss b/src/containers/Header/NavigationMenu/NavigationMenu.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 $menu-toggle-size: 25px;
 $menu-toggle-line-spacing: math.div($menu-toggle-size, 4);

diff --git a/src/containers/Header/NetworkPicker/NetworkPicker.scss b/src/containers/Header/NetworkPicker/NetworkPicker.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 @mixin dropdown-network-item(
   $background,

diff --git a/src/containers/Header/header.scss b/src/containers/Header/header.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 /* Header */
 .header {

diff --git a/src/containers/Header/search.scss b/src/containers/Header/search.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .search-container {
   position: relative;

diff --git a/src/containers/Ledger/ledger.scss b/src/containers/Ledger/ledger.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .ledger-page {
   margin: 0 auto;

diff --git a/src/containers/Ledgers/css/ledgerMetrics.scss b/src/containers/Ledgers/css/ledgerMetrics.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .metrics {
   overflow: hidden;

diff --git a/src/containers/Ledgers/css/ledgers.scss b/src/containers/Ledgers/css/ledgers.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 $ledgers-margin-large: 32px;
 $ledgers-border: 1px solid $black-70;

diff --git a/src/containers/Ledgers/css/legend.scss b/src/containers/Ledgers/css/legend.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .legend {
   display: flex;

diff --git a/src/containers/MPT/MPTHeader/styles.scss b/src/containers/MPT/MPTHeader/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
 
 .mpt-header-container {
   .mpt-bottom-container {

diff --git a/src/containers/MPT/styles.scss b/src/containers/MPT/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables';
 
 .mpt-page {
   width: 100%;

diff --git a/src/containers/NFT/NFTHeader/styles.scss b/src/containers/NFT/NFTHeader/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
 
 .nft-header-container {
   .nft-bottom-container {

diff --git a/src/containers/NFT/NFTTabs/styles.scss b/src/containers/NFT/NFTTabs/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
 
 .nft-tabs {
   margin-top: 60px;

diff --git a/src/containers/NFT/styles.scss b/src/containers/NFT/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .nft-page {
   width: 100%;

diff --git a/src/containers/Network/css/barchart.scss b/src/containers/Network/css/barchart.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .y-label {
   fill: $black-40;

diff --git a/src/containers/Network/css/hexagons.scss b/src/containers/Network/css/hexagons.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .validators-container {
   .validators {

diff --git a/src/containers/Network/css/map.scss b/src/containers/Network/css/map.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .nodes-map {
   position: relative;

diff --git a/src/containers/Network/css/nodesTable.scss b/src/containers/Network/css/nodesTable.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
 
 .nodes-table {
   position: relative;

diff --git a/src/containers/Network/css/style.scss b/src/containers/Network/css/style.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .network-page {
   // Needs additional bottom margin to break up table from the horizontal

diff --git a/src/containers/Network/css/validatorsTable.scss b/src/containers/Network/css/validatorsTable.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .validators-table {
   position: relative;

diff --git a/src/containers/NoMatch/nomatch.scss b/src/containers/NoMatch/nomatch.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .no-match {
   margin: 10% auto;

diff --git a/src/containers/PayStrings/PayStringHeader/styles.scss b/src/containers/PayStrings/PayStringHeader/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .paystring-header {
   margin-bottom: 16px;

diff --git a/src/containers/PayStrings/PayStringMappingsTable/styles.scss b/src/containers/PayStrings/PayStringMappingsTable/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .paystring-table {
   .col-network,

diff --git a/src/containers/PayStrings/styles.scss b/src/containers/PayStrings/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .paystring-page {
   width: 100%;

diff --git a/src/containers/Token/DEXPairs/styles.scss b/src/containers/Token/DEXPairs/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .dex-pairs-container {
   padding: 64px 0 100px;

diff --git a/src/containers/Token/TokenHeader/styles.scss b/src/containers/Token/TokenHeader/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
 
 .header-container {
   .bottom-container {

diff --git a/src/containers/Token/styles.scss b/src/containers/Token/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables';
 
 .token-page {
   width: 100%;

diff --git a/src/containers/Transactions/DetailTab/detailTab.scss b/src/containers/Transactions/DetailTab/detailTab.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
 
 .detail-body {
   margin-top: 20px;

diff --git a/src/containers/Transactions/simpleTab.scss b/src/containers/Transactions/simpleTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 $subdued-color: $black-40;
 

diff --git a/src/containers/Transactions/transaction.scss b/src/containers/Transactions/transaction.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .transaction {
   position: relative;

diff --git a/src/containers/Validators/historyTab.scss b/src/containers/Validators/historyTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .history-table {
   // Col overall styling

diff --git a/src/containers/Validators/simpleTab.scss b/src/containers/Validators/simpleTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .simple-body-validator {
   .row {

diff --git a/src/containers/Validators/validator.scss b/src/containers/Validators/validator.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .validator {
   position: relative;

diff --git a/src/containers/Validators/votingTab.scss b/src/containers/Validators/votingTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
 
 .voting {
   margin-left: 24px;

diff --git a/src/containers/shared/components/Dropdown/dropdown.scss b/src/containers/shared/components/Dropdown/dropdown.scss
@@ -1,4 +1,4 @@
-@import '../../css/variables';
+@use '../../css/variables' as *;
 
 .dropdown {
   position: relative;

diff --git a/src/containers/shared/components/JsonView/json-view.scss b/src/containers/shared/components/JsonView/json-view.scss
@@ -1,4 +1,4 @@
-@import '../../css/variables';
+@use '../../css/variables' as *;
 @import 'react18-json-view/src/style.css';
 
 .json-view {

diff --git a/src/containers/shared/components/Notification/styles.scss b/src/containers/shared/components/Notification/styles.scss
@@ -1,4 +1,4 @@
-@import '../../css/variables';
+@use '../../css/variables' as *;
 
 .notification {
   border: 1px solid;

diff --git a/src/containers/shared/components/TransactionTable/styles.scss b/src/containers/shared/components/TransactionTable/styles.scss
@@ -1,5 +1,5 @@
 @use 'sass:color';
-@import '../../../shared/css/variables';
+@use '../../../shared/css/variables' as *;
 
 .transaction-table {
   width: 100%;

diff --git a/src/containers/shared/css/box.scss b/src/containers/shared/css/box.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 .box {
   border-radius: 4px;

diff --git a/src/containers/shared/css/form.scss b/src/containers/shared/css/form.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 label {
   color: $black-40;

diff --git a/src/containers/shared/css/global.scss b/src/containers/shared/css/global.scss
@@ -1,7 +1,7 @@
 // ONLY GLOBAL CSS, KEEP IT TO MINIMAL
 // CSS SHOULD BE SCOPPED TO COMPONENT
-@import './variables';
-@import './form';
+@use 'variables' as *;
+@use 'form';
 
 /**
  * `current_symbols` is used for currency codes missing from other fonts, currently `u+e900` (XRP) and `u+e901` (BTC).

diff --git a/src/containers/shared/css/simpleTab.scss b/src/containers/shared/css/simpleTab.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 $index-width: 324px;
 

diff --git a/src/containers/shared/css/table.scss b/src/containers/shared/css/table.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 table.basic {
   overflow: hidden;

diff --git a/src/containers/shared/css/tabs.scss b/src/containers/shared/css/tabs.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 .tabs {
   border-top: 1px solid $black-70;

diff --git a/src/containers/shared/css/tooltip.scss b/src/containers/shared/css/tooltip.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 .tooltip {
   position: absolute;

diff --git a/src/containers/shared/css/txlabel.scss b/src/containers/shared/css/txlabel.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 .tx-label {
   display: inline-flex;

diff --git a/src/containers/shared/css/txstatus.scss b/src/containers/shared/css/txstatus.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
 
 .tx-status {
   display: inline-flex;