4200 - Vite: Update CSS imports and use color.adjust

openforis · Jan 8, 2025 · 9565ed6 · 9565ed6
1 parent 093df7a
commit 9565ed6
Show file tree

Hide file tree

Showing 187 changed files with 373 additions and 327 deletions.
diff --git a/src/client/components/AreaSelector/AreaSelector.scss b/src/client/components/AreaSelector/AreaSelector.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .btn-country-select {
   position: relative;
@@ -18,7 +19,7 @@
   outline: unset;
 
   &:hover {
-    background-color: darken($ui-bg, 4%);
+    background-color: color.adjust($ui-bg, $lightness: 4%);
   }
 
   .icon {

diff --git a/src/client/components/AreaSelector/CountryList/countryList.scss b/src/client/components/AreaSelector/CountryList/countryList.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .country-selection-list {
   display: block;
@@ -78,7 +79,7 @@
 
 .country-selection-list__row {
   &:hover {
-    background-color: darken($ui-bg, 4%);
+    background-color: color.adjust($ui-bg, $lightness: 4%);
     color: inherit;
   }
 

diff --git a/src/client/components/Autocomplete/Autocomplete.scss b/src/client/components/Autocomplete/Autocomplete.scss
@@ -1,5 +1,6 @@
-@import 'src/client/styles/config';
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/styles/config';
+@import 'client/style/partials';
 
 .autocomplete {
   transition: all 0.1s ease-out;
@@ -55,14 +56,14 @@
   text-decoration: none;
 
   &.selected {
-    border-left: 2px solid darken($ui-accent-light, 25%);
+    border-left: 2px solid color.adjust($ui-accent-light, $lightness: 25%);
     padding: $spacing-xxs;
   }
 
   &.highlighted {
     padding: $spacing-xxs 9px;
     background-color: $ui-accent-light;
-    border-left: 1px solid darken($ui-accent-light, 25%);
-    border-right: 1px solid darken($ui-accent-light, 25%);
+    border-left: 1px solid color.adjust($ui-accent-light, $lightness: 25%);
+    border-right: 1px solid color.adjust($ui-accent-light, $lightness: 25%);
   }
 }
diff --git a/src/client/components/Avatar/Avatar.scss b/src/client/components/Avatar/Avatar.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .user-avatar {
   width: 28px;

diff --git a/src/client/components/Buttons/Button/Button.scss b/src/client/components/Buttons/Button/Button.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .button {
   align-items: center;
@@ -104,11 +105,11 @@
   }
 
   &:hover {
-    background-color: lighten($colorPrimary, $hoverPercent);
-    color: darken(white, $hoverPercent);
+    background-color: color.adjust($colorPrimary, $lightness: $hoverPercent);
+    color: color.adjust(white, $lightness: $hoverPercent);
 
     svg {
-      color: darken(white, $hoverPercent);
+      color: color.adjust(white, $lightness: $hoverPercent);
     }
   }
 
@@ -125,11 +126,11 @@
     }
 
     &:hover {
-      background-color: lighten($colorPrimary, $hoverInverseLighten);
-      color: darken($colorPrimary, $hoverPercent);
+      background-color: color.adjust($colorPrimary, $lightness: $hoverInverseLighten);
+      color: color.adjust($colorPrimary, $lightness: $hoverPercent);
 
       svg {
-        color: darken($colorPrimary, $hoverPercent);
+        color: color.adjust($colorPrimary, $lightness: $hoverPercent);
       }
     }
   }
@@ -146,7 +147,7 @@
 
     &:hover {
       svg {
-        color: darken($text-link, 5%);
+        color: color.adjust($text-link, $lightness: 5%);
       }
     }
   }
@@ -157,7 +158,7 @@
 }
 
 .button__type-danger {
-  @include withTheme(darken($ui-destructive, 5%), 58%);
+  @include withTheme(color.adjust($ui-destructive, $lightness: -5%), 58%);
 }
 
 .button__type-primary {

diff --git a/src/client/components/Buttons/ButtonCheckbox/ButtonCheckbox.scss b/src/client/components/Buttons/ButtonCheckbox/ButtonCheckbox.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .button-checkbox {
   $colorPrimary: $ui-accent;

diff --git a/src/client/components/Buttons/ButtonClose/ButtonClose.scss b/src/client/components/Buttons/ButtonClose/ButtonClose.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 button.btn-close {
   align-items: center;
@@ -19,7 +20,7 @@ button.btn-close {
 
   &:hover {
     svg {
-      color: darken($ui-destructive, 7%);
+      color: color.adjust($ui-destructive, $lightness: 7%);
       transform: scale(1.1);
     }
   }

diff --git a/src/client/components/Buttons/ButtonDelete/ButtonDelete.scss b/src/client/components/Buttons/ButtonDelete/ButtonDelete.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .btn-delete {
   align-items: center;

diff --git a/src/client/components/Buttons/ButtonEdit/ButtonEdit.scss b/src/client/components/Buttons/ButtonEdit/ButtonEdit.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .btn-edit {
   svg {

diff --git a/src/client/components/Chart/Bar/Bar.scss b/src/client/components/Chart/Bar/Bar.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .recharts-label,
 .recharts-cartesian-axis-tick-value {

diff --git a/src/client/components/Chart/TooltipContent/TooltipContent.scss b/src/client/components/Chart/TooltipContent/TooltipContent.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .chart-tooltip__container {
   align-items: center;

diff --git a/src/client/components/CountryLink/CountryLink.scss b/src/client/components/CountryLink/CountryLink.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .admin-countries__country-link {
   color: $text-body;

diff --git a/src/client/components/CountrySelectModal/CountrySelectModalBody/countrySelectModalBody.scss b/src/client/components/CountrySelectModal/CountrySelectModalBody/countrySelectModalBody.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .modal-country-select-body {
   display: grid;
@@ -51,6 +51,4 @@
       }
     }
   }
-
-
 }
diff --git a/src/client/components/CountrySelectModal/countrySelectModal.scss b/src/client/components/CountrySelectModal/countrySelectModal.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .modal-country-select {
   width: 100vw;

diff --git a/src/client/components/CountryStatusIndicator/CountryStatusIndicator.scss b/src/client/components/CountryStatusIndicator/CountryStatusIndicator.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .country-status-indicator {
   text-decoration: none;
@@ -35,7 +36,7 @@
   }
 
   .status-approval-label {
-    color: darken($ui-status-review, 13%);
+    color: color.adjust($ui-status-review, $lightness: 13%);
     font-weight: 600;
   }
 }
diff --git a/src/client/components/Dashboard/Dashboard.scss b/src/client/components/Dashboard/Dashboard.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 $border: 1px dotted $ui-border;
 

diff --git a/src/client/components/DataGrid/DataCell/DataCell.scss b/src/client/components/DataGrid/DataCell/DataCell.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 $border-editable: 1px dashed $ui-edit-border-color;
 $border: 1px solid $ui-border;

diff --git a/src/client/components/DataGrid/DataGrid/DataGrid.scss b/src/client/components/DataGrid/DataGrid/DataGrid.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .data-grid {
   display: grid;

diff --git a/src/client/components/DataGridDeprecated/DataGrid.scss b/src/client/components/DataGridDeprecated/DataGrid.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .data-grid-deprecated {
   display: grid;

diff --git a/src/client/components/DefinitionLink/DefinitionLink.scss b/src/client/components/DefinitionLink/DefinitionLink.scss
@@ -1,12 +1,13 @@
-@import 'src/client/styles/config';
-@import 'src/client/styles/buttons';
+@use 'sass:color';
+@import 'client/styles/config';
+@import 'client/styles/buttons';
 
 .definition-link {
   @extend .link;
-  color: darken($ui-accent, 2%);
+  color: color.adjust($ui-accent, $lightness: 2%);
   white-space: nowrap;
 
   &:hover {
-    color: darken($ui-accent, 4%);
+    color: color.adjust($ui-accent, $lightness: 4%);
   }
 }
diff --git a/src/client/components/EditUserForm/ContactMethodField/ContactMethodField.scss b/src/client/components/EditUserForm/ContactMethodField/ContactMethodField.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .edit-user__form-field {
   &.edit-user__form-contact_method-field {

diff --git a/src/client/components/EditUserForm/CountryRoles/CountryRole/CountryRole.scss b/src/client/components/EditUserForm/CountryRoles/CountryRole/CountryRole.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .edit-user__form-field-role-countries {
   flex-wrap: wrap;
@@ -9,7 +10,7 @@
   border: $ui-thin-border;
   padding: 4px 8px;
   border-radius: 3px;
-  background-color: lighten($ui-bg, 1%);
-  color: darken($text-disabled, 15%);
+  background-color: color.adjust($ui-bg, $lightness: 1%);
+  color: color.adjust($text-disabled, $lightness: 15%);
   margin: 5px 2.5px 0;
 }
diff --git a/src/client/components/EditUserForm/CountryRoles/CountryRoles.scss b/src/client/components/EditUserForm/CountryRoles/CountryRoles.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .edit-user__form-item-roles {
   height: auto;
@@ -51,4 +51,4 @@
       border: 1px solid $ui-border-light;
     }
   }
-}
+}
diff --git a/src/client/components/EditUserForm/CountrySelectField/CountrySelectField.scss b/src/client/components/EditUserForm/CountrySelectField/CountrySelectField.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .edit-user__form-field {
   .btn-country-select {

diff --git a/src/client/components/EditUserForm/EditUserForm.scss b/src/client/components/EditUserForm/EditUserForm.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .edit-user__form-item {
   display: flex;
@@ -35,7 +36,7 @@
   font-weight: bold;
   text-transform: uppercase;
   font-size: $font-xxs;
-  color: lighten($text-mute, 10%);
+  color: color.adjust($text-mute, $lightness: 10%);
 }
 
 .edit-user__form-field {
@@ -83,7 +84,7 @@
 .edit-user__picture-img-invalid {
   position: absolute;
   bottom: -5px;
-  color: lighten($ui-destructive, 1%);
+  color: color.adjust($ui-destructive, $lightness: 1%);
   font-weight: bold;
   font-size: $font-xs;
 }

diff --git a/src/client/components/EditUserForm/PhoneField/PhoneField.scss b/src/client/components/EditUserForm/PhoneField/PhoneField.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .edit-user__form-field {
   &.edit-user__form-phone-field {

diff --git a/src/client/components/EditUserForm/SelectField/SelectField.scss b/src/client/components/EditUserForm/SelectField/SelectField.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .edit-user__form-field {
   &.edit-user__form-select-field {

diff --git a/src/client/components/EditUserForm/TextInputField/TextInputField.scss b/src/client/components/EditUserForm/TextInputField/TextInputField.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .edit-user__form-field {
   &.edit-user__form-input-text-field {

diff --git a/src/client/components/EditorWYSIWYG/AddFromRepository/AddFromRepository.scss b/src/client/components/EditorWYSIWYG/AddFromRepository/AddFromRepository.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .references-file-list {
   .file-drop {

diff --git a/src/client/components/EditorWYSIWYG/EditorWYSIWYG.scss b/src/client/components/EditorWYSIWYG/EditorWYSIWYG.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 div.editorWYSIWYG {
   height: 100%;

diff --git a/src/client/components/FileUpload/FileUpload.scss b/src/client/components/FileUpload/FileUpload.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .file-upload {
   align-items: center;

diff --git a/src/client/components/FileUpload/Files/Files.scss b/src/client/components/FileUpload/Files/Files.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .file-upload__files {
   align-items: center;

diff --git a/src/client/components/Hr/Hr.scss b/src/client/components/Hr/Hr.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .hr {
   background: radial-gradient(#c1c1c1, white);

diff --git a/src/client/components/Inputs/InputPercent/InputPercent.scss b/src/client/components/Inputs/InputPercent/InputPercent.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .input-percent {
   align-items: center;

diff --git a/src/client/components/Inputs/InputRange/InputRange.scss b/src/client/components/Inputs/InputRange/InputRange.scss
@@ -1,4 +1,5 @@
-@import 'src/client/style/partials';
+@use 'sass:color';
+@import 'client/style/partials';
 
 .input-range {
   align-items: center;
@@ -68,14 +69,14 @@
 
     /***** Chrome, Safari, Opera, and Edge Chromium *****/
     input[type='range']:focus::-webkit-slider-thumb {
-      border: $thumb-border-width solid lighten($ui-accent, 8%);
+      border: $thumb-border-width solid color.adjust($ui-accent, $lightness: 8%);
       outline-offset: 2px;
       outline: 1px dashed $ui-accent;
     }
 
     /******** Firefox ********/
     input[type='range']:focus::-moz-range-thumb {
-      border: $thumb-border-width solid lighten($ui-accent, 8%);
+      border: $thumb-border-width solid color.adjust($ui-accent, $lightness: 8%);
       outline-offset: 2px;
       outline: 1px dashed $ui-accent;
     }

diff --git a/src/client/components/Inputs/InputText/InputText.scss b/src/client/components/Inputs/InputText/InputText.scss
@@ -1,4 +1,4 @@
-@import 'src/client/style/partials';
+@import 'client/style/partials';
 
 .input-text {
   background-color: transparent;