chore(styles): use new SCSS api (#1722)

ydb-platform · Nov 28, 2024 · 14b96e7 · 14b96e7
1 parent e050bd7
commit 14b96e7
Show file tree

Hide file tree

Showing 70 changed files with 176 additions and 185 deletions.
diff --git a/src/components/BasicNodeViewer/BasicNodeViewer.scss b/src/components/BasicNodeViewer/BasicNodeViewer.scss
@@ -1,12 +1,12 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .basic-node-viewer {
     display: flex;
     align-items: center;
 
     margin: 15px 0;
 
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__title {
         margin: 0 20px 0 0;

diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss
@@ -1,5 +1,5 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .developer-ui-link-button {
-    @include table-hover-appearing-button();
+    @include mixins.table-hover-appearing-button();
 }
diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@use '../../styles/mixins';
 
 .storage-disk-progress-bar {
     $block: &;
@@ -22,7 +22,7 @@
     border: $border-width solid var(--entity-state-border-color);
     border-radius: $outer-border-radius;
     background-color: var(--entity-state-background-color);
-    @include entity-state-colors();
+    @include mixins.entity-state-colors();
 
     &_compact {
         min-width: 0;

diff --git a/src/components/EmptyState/EmptyState.scss b/src/components/EmptyState/EmptyState.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .empty-state {
     padding: 20px;
@@ -50,18 +50,18 @@
         font-weight: 500;
 
         &_size_s {
-            @include lead-typography();
+            @include mixins.lead-typography();
         }
 
         &_size_m {
-            @include header-2-typography();
+            @include mixins.header-2-typography();
         }
     }
 
     &__description {
         grid-area: description;
 
-        @include body-2-typography();
+        @include mixins.body-2-typography();
     }
 
     &__actions {

diff --git a/src/components/EntityPageTitle/EntityPageTitle.scss b/src/components/EntityPageTitle/EntityPageTitle.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-entity-page-title {
     display: flex;
@@ -7,7 +7,7 @@
 
     text-wrap: nowrap;
 
-    @include header-2-typography();
+    @include mixins.header-2-typography();
 
     &__prefix {
         margin-right: 6px;

diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .entity-status {
     --button-width: 28px;
@@ -10,7 +10,7 @@
     max-width: 100%;
     height: 100%;
 
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__icon {
         margin-right: var(--g-spacing-2);
@@ -19,7 +19,7 @@
     &__clipboard-button {
         color: var(--g-color-text-secondary);
 
-        @include table-hover-appearing-button();
+        @include mixins.table-hover-appearing-button();
 
         &_visible {
             opacity: 1;
@@ -68,7 +68,7 @@
 
         color: var(--g-color-text-complementary);
 
-        @include body-2-typography();
+        @include mixins.body-2-typography();
 
         &_size_l {
             font-size: var(--g-text-header-2-font-size);

diff --git a/src/components/ErrorBoundary/ErrorBoundary.scss b/src/components/ErrorBoundary/ErrorBoundary.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-error-boundary {
     display: flex;
@@ -7,7 +7,7 @@
 
     padding: 20px;
 
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__illustration {
         width: 230px;
@@ -16,7 +16,7 @@
     }
     &__error-title {
         margin-top: 44px;
-        @include lead-typography();
+        @include mixins.lead-typography();
     }
     &__error-description {
         margin-top: 12px;

diff --git a/src/components/FullNodeViewer/FullNodeViewer.scss b/src/components/FullNodeViewer/FullNodeViewer.scss
@@ -1,7 +1,7 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .full-node-viewer {
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__common-info {
         display: flex;

diff --git a/src/components/MemoryViewer/MemoryViewer.scss b/src/components/MemoryViewer/MemoryViewer.scss
@@ -1,5 +1,3 @@
-@import '../../styles/mixins.scss';
-
 $memory-type-colors: (
     'AllocatorCachesMemory': var(--g-color-base-utility-medium-hover),
     'SharedCacheConsumption': var(--g-color-base-info-medium-hover),

diff --git a/src/components/PageMeta/PageMeta.scss b/src/components/PageMeta/PageMeta.scss
@@ -1,4 +1,4 @@
-@import '../../styles//mixins.scss';
+@use '../../styles//mixins.scss';
 
 .ydb-page-meta {
     &__info {
@@ -12,7 +12,7 @@
 
         color: var(--g-color-text-primary);
 
-        @include body-2-typography();
+        @include mixins.body-2-typography();
     }
 
     &__skeleton {

diff --git a/src/components/PaginatedTable/PaginatedTable.scss b/src/components/PaginatedTable/PaginatedTable.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-paginated-table {
     $block: &;
@@ -10,7 +10,7 @@
     --paginated-table-hover-color: var(--g-color-base-float);
 
     width: 100%;
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__table {
         width: max-content;
@@ -46,7 +46,7 @@
 
     &__head {
         z-index: 2;
-        @include sticky-top();
+        @include mixins.sticky-top();
     }
 
     &__sort-icon-container {

diff --git a/src/components/PoolUsage/PoolUsage.scss b/src/components/PoolUsage/PoolUsage.scss
@@ -1,7 +1,7 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-pool-usage {
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__info {
         display: flex;

diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .progress-viewer {
     $block: &;
@@ -68,7 +68,7 @@
     &_size_xs {
         height: 20px;
 
-        @include body-2-typography();
+        @include mixins.body-2-typography();
     }
 
     &_size_s {

diff --git a/src/components/QueryResultTable/QueryResultTable.scss b/src/components/QueryResultTable/QueryResultTable.scss
@@ -1,9 +1,9 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-query-result-table {
     &__cell {
         width: 100%;
-        @include cell-container;
+        @include mixins.cell-container;
     }
 
     &__message {

diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.scss b/src/components/TableWithControlsLayout/TableWithControlsLayout.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-table-with-controls-layout {
     --data-table-sticky-top-offset: 62px;
@@ -14,7 +14,7 @@
         box-sizing: border-box;
         width: 100%;
 
-        @include sticky-top();
+        @include mixins.sticky-top();
     }
 
     &__controls {
@@ -23,8 +23,8 @@
         width: max-content;
         height: 62px;
 
-        @include controls();
-        @include sticky-top();
+        @include mixins.controls();
+        @include mixins.sticky-top();
     }
 
     &__table {

diff --git a/src/components/User/User.scss b/src/components/User/User.scss
@@ -1,10 +1,10 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .kv-user {
     display: inline-block;
 
     color: var(--g-color-text-primary);
-    @include body-2-typography();
+    @include mixins.body-2-typography();
 
     &__name {
         display: inline-block;

diff --git a/src/components/YDBDefinitionList/YDBDefinitionList.scss b/src/components/YDBDefinitionList/YDBDefinitionList.scss
@@ -1,10 +1,10 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-definition-list {
-    @include flex-container();
+    @include mixins.flex-container();
 
     &__title {
-        @include info-viewer-title();
+        @include mixins.info-viewer-title();
     }
 
     &__properties-list {

diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss
@@ -1,5 +1,6 @@
+@use '../../styles/mixins.scss';
+
 @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
-@import '../../styles/mixins.scss';
 
 * {
     // FIXME: this is an overkill, potentially could break external components, needs refactoring
@@ -73,17 +74,17 @@ body,
 }
 
 .loader {
-    @include loader();
+    @include mixins.loader();
 }
 
 .app {
     height: 100%;
-    @include flex-container();
-    @include data-table-styles();
+    @include mixins.flex-container();
+    @include mixins.data-table-styles();
 
     &__main {
         overflow: auto;
-        @include flex-container();
+        @include mixins.flex-container();
     }
 }
 

diff --git a/src/containers/Authentication/Authentication.scss b/src/containers/Authentication/Authentication.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .authentication {
     display: flex;
@@ -45,7 +45,7 @@
         margin: 34px 0 16px;
 
         font-weight: 600;
-        @include header-2-typography;
+        @include mixins.header-2-typography;
     }
 
     &__form-wrapper {

diff --git a/src/containers/Cluster/Cluster.scss b/src/containers/Cluster/Cluster.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-cluster {
     position: relative;
@@ -18,7 +18,7 @@
 
     &__title {
         font-weight: var(--g-text-header-font-weight);
-        @include header-1-typography();
+        @include mixins.header-1-typography();
     }
 
     &__title-skeleton {
@@ -36,11 +36,11 @@
         padding-left: 20px;
 
         transform: translateX(-20px);
-        @include sticky-top();
+        @include mixins.sticky-top();
     }
     &__tabs {
         display: flex;
-        @include tabs-wrapper-styles();
+        @include mixins.tabs-wrapper-styles();
     }
 
     &__sticky-wrapper {

diff --git a/src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss b/src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@use '../../../styles/mixins.scss';
 
 .ydb-cluster-dashboard {
     position: sticky;
@@ -7,7 +7,7 @@
     padding-top: 16px;
 
     &__error {
-        @include body-2-typography();
+        @include mixins.body-2-typography();
     }
     &__card {
         display: flex;

diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
@@ -1,4 +1,4 @@
-@import '../../../styles/mixins';
+@use '../../../styles/mixins';
 
 .cluster-info {
     padding: 20px 0;
@@ -8,7 +8,7 @@
     }
 
     &__error {
-        @include body-2-typography();
+        @include mixins.body-2-typography();
     }
 
     &__metrics {

diff --git a/src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss b/src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss
@@ -1,4 +1,4 @@
-@import '../../../../../styles/mixins.scss';
+@use '../../../../../styles/mixins.scss';
 
 .ydb-nodes-state {
     display: flex;
@@ -13,5 +13,5 @@
     color: var(--entity-state-font-color);
     border-radius: var(--g-spacing-1);
     background-color: var(--entity-state-background-color);
-    @include entity-state-colors();
+    @include mixins.entity-state-colors();
 }