fix css

src/components/GridCell.test.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import { GridBaseRow } from './Grid';
 import { generateFilterGetter, SAValueGetterParams } from './GridCell';
 

src/lui/ActionButton.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .ActionButton {
   display: flex;
@@ -44,7 +44,7 @@
 .ActionButton-inProgress.lui-button-lg.lui-button-icon-right {
   cursor: progress;
   color: #007198;
-  background-color: colors.$polar;
+  background-color: lui.$polar;
 }
 
 .ActionButton-fill {

src/lui/FormError.scss

@@ -1,12 +1,11 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .FormError {
   display: flex;
 
   &-helpText {
     font-size: 0.75rem;
-    color: colors.$fuscous;
+    color: lui.$fuscous;
     font-weight: 400;
   }
 
@@ -19,7 +18,7 @@
     padding-left: 0;
     font-size: 14px;
     font-weight: 600;
-    color: colors.$charcoal;
+    color: lui.$charcoal;
     align-items: center;
   }
 }

src/styles/Grid.scss

@@ -1,6 +1,6 @@
 @use "../react-menu3/styles/index";
 @use "./react-menu-customisations";
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
   margin-left: auto;
@@ -40,9 +40,9 @@
   align-items: center;
   flex-direction: row;
   padding: 12px;
-  background-color: colors.$hint;
-  border-bottom: 1px solid colors.$silver;
-  border-top: 2px solid colors.$lily;
+  background-color: lui.$hint;
+  border-bottom: 1px solid lui.$silver;
+  border-top: 2px solid lui.$lily;
 }
 
 .Grid-container-filters button {
@@ -68,21 +68,21 @@
   position: absolute;
   margin: 8px;
   pointer-events: none;
-  fill: colors.$fuscous;
+  fill: lui.$fuscous;
 }
 
 .GridFilterQuick-input {
   width: 100%;
   height: 40px;
   min-height: 40px;
-  border: 0.06rem solid colors.$silver;
+  border: 0.06rem solid lui.$silver;
   border-radius: 3px;
   padding-left: 36px;
   padding-right: 0.75rem;
   font-family: "Open Sans", system-ui, sans-serif;
 
   &::placeholder {
-    color: colors.$fuscous;
+    color: lui.$fuscous;
     font-style: italic;
   }
 }
@@ -109,11 +109,11 @@
 }
 
 .ag-floating-top-container .ag-row {
-  background-color: colors.$hint;
+  background-color: lui.$hint;
 }
 
 .ag-floating-bottom-container .ag-row {
-  background-color: colors.$hint;
+  background-color: lui.$hint;
 }
 
 .GridHeaderAlignCenter .ag-header-cell-text {

src/styles/GridIcon.scss

@@ -1,29 +1,29 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .AgGridGenericCellRenderer-icon {
   margin-right: 4px;
 }
 
 .AgGridGenericCellRenderer-ic_infoIcon {
   margin-right: 4px;
-  fill: colors.$info;
+  fill: lui.$info;
 }
 
 .AgGridGenericCellRenderer-ic_info_outlineIcon {
   margin-right: 4px;
-  fill: colors.$info;
+  fill: lui.$info;
 }
 
 .AgGridGenericCellRenderer-ic_warningIcon {
   margin-right: 4px;
-  fill: colors.$warning;
+  fill: lui.$warning;
 }
 
 .AgGridGenericCellRenderer-ic_warning_outlineIcon {
   margin-right: 4px;
-  fill: colors.$warning;
+  fill: lui.$warning;
 }
 
 .GridIcon-disabled {
-  fill: colors.$silver !important;
+  fill: lui.$silver !important;
 }

src/styles/GridPopoverMenu.scss

@@ -1,14 +1,14 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 .ag-cell .GridPopoutMenu-burger {
   cursor: pointer;
   display: block;
 
   svg {
-    fill: colors.$sea;
+    fill: lui.$sea;
   }
 }
 
 .ag-cell .GridPopoutMenu-burgerDisabled svg {
-  fill: colors.$disabled-color;
+  fill: lui.$disabled-color;
 }

src/styles/react-menu-customisations.scss

@@ -1,25 +1,22 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/FontVars" as fonts;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/SpacingVars" as spacing;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Utilities" as *;
+@use "@linzjs/lui/dist/scss/Core" as lui;
 
 /**
  * Here is where we can override the styles of react-menu
  */
 .step-ag-grid-react-menu.szh-menu {
   z-index: 900;
-  color: colors.$base-type-color;
-  @include fonts.font-regular();
+  color: lui.$base-type-color;
+  @include lui.font-regular();
 
   div,
   a[role="menuitem"] {
     text-decoration: none;
-    color: colors.$base-type-color;
-    @include fonts.font-regular();
+    color: lui.$base-type-color;
+    @include lui.font-regular();
   }
 
   li[role="menuitem"]:hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 
   .szh-menu__header {
@@ -48,68 +45,68 @@
     width: 240px;
   }
 
-  color: colors.$base-type-color;
-  @include fonts.font-light();
+  color: lui.$base-type-color;
+  @include lui.font-light();
 }
 
 .lui-select-menuItem {
-  padding: spacing.$unit-xs spacing.$unit-sm spacing.$unit-xs spacing.$unit-xs;
+  padding: lui.$unit-xs lui.$unit-sm lui.$unit-xs lui.$unit-xs;
   display: flex;
   line-height: 1;
   transition: all 0.2s ease-in-out;
-  fill: colors.$fuscous;
+  fill: lui.$fuscous;
 
   &:hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 }
 
 .lui-select-menuItem--error {
   p {
-    color: colors.$error;
+    color: lui.$error;
   }
 
   .LuiIcon {
-    fill: colors.$error;
+    fill: lui.$error;
   }
 }
 
 .lui-select-menuItemText {
-  @include fonts.font-regular();
-  color: colors.$charcoal;
+  @include lui.font-regular();
+  color: lui.$charcoal;
   margin: 0;
-  padding-left: spacing.$unit-lg;
+  padding-left: lui.$unit-lg;
 
   // if no icon, give it 4px to align with the group header
   &--noPadding {
-    padding-left: spacing.$unit-xxs;
+    padding-left: lui.$unit-xxs;
   }
 }
 
 .lui-select-icon + .lui-select-menuItemText {
-  padding-left: spacing.$unit-xs;
+  padding-left: lui.$unit-xs;
 }
 
 .lui-select-menu-group {
   height: 32px;
-  color: colors.$fuscous;
+  color: lui.$fuscous;
   padding-left: 0.75rem;
   text-transform: none;
-  @include fonts.font-semibold();
+  @include lui.font-semibold();
 }
 
 .lui-select-submenu {
   flex: 1;
 
   div[role="menuitem"] {
-    padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 2.5rem;
+    padding: lui.$unit-xs lui.$unit-xs lui.$unit-xs 2.5rem;
     text-decoration: none;
-    @include fonts.font-regular();
+    @include lui.font-regular();
     height: 40px;
   }
   // overwrite the hover color
   .szh-menu__item--hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 }
 
@@ -119,7 +116,7 @@
   div[role="menuitem"] {
     padding-left: 0;
     text-decoration: none;
-    @include fonts.font-regular();
+    @include lui.font-regular();
     height: 40px;
   }
 }
@@ -130,6 +127,6 @@
 
 
 .step-ag-grid-react-menu-sub-header-icon {
-  margin: spacing.$unit-xs;
-  fill: colors.$fuscous;
+  margin: lui.$unit-xs;
+  fill: lui.$fuscous;
 }

src/utils/testUtil.ts

@@ -1,6 +1,7 @@
 import { act, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEqual } from 'lodash-es';
+import { expect } from 'vitest';
 
 import { findQuick, getAllQuick, getMatcher, getQuick, IQueryQuick, queryQuick } from './testQuick';
 

vite.config.ts

@@ -13,6 +13,13 @@ export default defineConfig(async (): Promise<UserConfig> => {
       outDir: './build',
       target: 'esnext',
     },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern',
+        },
+      },
+    },
     base: '/',
   };
 });