v1.189.0

huridocs · Oct 21, 2024 · 9a47d06 · 9a47d06
2 parents 5fc84c8 + 0772851
commit 9a47d06
Show file tree

Hide file tree

Showing 39 changed files with 749 additions and 748 deletions.
diff --git a/app/react/App/scss/config/_colors.scss b/app/react/App/scss/config/_colors.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $theme: dark;
 $hero: dark;
 $c-theme: #60748b;
@@ -10,10 +12,10 @@ $c-theme: #60748b;
 }
 
 $c-grey: #aeaeb8;
-$c-white: lighten($c-grey, 100%);
-$c-grey-lighten: lighten($c-grey, 25%);
-$c-grey-light: lighten($c-grey, 15%);
-$c-grey-dark: darken($c-grey, 25%);
+$c-white: color.adjust($c-grey, $lightness: 100%, $space: hsl);
+$c-grey-lighten: color.adjust($c-grey, $lightness: 25%, $space: hsl);
+$c-grey-light: color.adjust($c-grey, $lightness: 15%, $space: hsl);
+$c-grey-dark: color.adjust($c-grey, $lightness: -25%, $space: hsl);
 $c-active-feature: orange;
 $c-black: #444444;
 $c-type-0: #c03b22;
@@ -40,25 +42,25 @@ $c-type-19: #449d44;
 $c-background: #fcfcfc;
 
 $c-primary: #2b56c1;
-$c-primary-lighten: lighten($c-primary, 50%);
-$c-primary-light: lighten($c-primary, 40%);
-$c-primary-dark: darken($c-primary, 10%);
+$c-primary-lighten: color.adjust($c-primary, $lightness: 50%, $space: hsl);
+$c-primary-light: color.adjust($c-primary, $lightness: 40%, $space: hsl);
+$c-primary-dark: color.adjust($c-primary, $lightness: -10%, $space: hsl);
 $c-info: $c-type-7;
-$c-info-light: lighten($c-info, 40%);
-$c-info-dark: darken($c-info, 10%);
+$c-info-light: color.adjust($c-info, $lightness: 40%, $space: hsl);
+$c-info-dark: color.adjust($c-info, $lightness: -10%, $space: hsl);
 $c-success: $c-type-9;
-$c-success-light: lighten($c-type-10, 30%);
-$c-success-dark: darken($c-type-10, 15%);
+$c-success-light: color.adjust($c-type-10, $lightness: 30%, $space: hsl);
+$c-success-dark: color.adjust($c-type-10, $lightness: -15%, $space: hsl);
 $c-danger: $c-type-1;
-$c-danger-light: lighten($c-type-1, 30%);
-$c-danger-dark: darken($c-type-1, 10%);
+$c-danger-light: color.adjust($c-type-1, $lightness: 30%, $space: hsl);
+$c-danger-dark: color.adjust($c-type-1, $lightness: -10%, $space: hsl);
 $c-warning: $c-type-13;
-$c-warning-light: lighten($c-type-14, 30%);
-$c-warning-dark: darken($c-type-14, 10%);
+$c-warning-light: color.adjust($c-type-14, $lightness: 30%, $space: hsl);
+$c-warning-dark: color.adjust($c-type-14, $lightness: -10%, $space: hsl);
 
-$c-shadow: transparentize($c-black, 0.9);
-$c-shadow-dark: transparentize($c-black, 0.8);
-$c-shadow-darker: transparentize($c-black, 0.5);
+$c-shadow: color.adjust($c-black, $alpha: -0.9);
+$c-shadow-dark: color.adjust($c-black, $alpha: -0.8);
+$c-shadow-darker: color.adjust($c-black, $alpha: -0.5);
 
 $c-card-highlight: #dee7ff4d;
 $c-language-highlight: #cff0cf;

diff --git a/app/react/App/scss/config/_materials.scss b/app/react/App/scss/config/_materials.scss
@@ -1,4 +1,6 @@
-$box-shadow: 0px 5px 10px -5px transparentize($c-grey-dark, .9);
+@use "sass:color";
+
+$box-shadow: 0px 5px 10px -5px color.adjust($c-grey-dark, $alpha: -.9);
 $box-shadow-danger: 0px 5px 10px -5px $c-danger;
 
 $header-height: 50px;

diff --git a/app/react/App/scss/elements/_item.scss b/app/react/App/scss/elements/_item.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .item-group {
   display: flex;
   flex-wrap: wrap;
@@ -35,7 +37,7 @@
   &.is-active,
   &.is-selected {
     border-color: $c-primary;
-    box-shadow: inset 0 1px 2px $c-grey-lighten, 0 0 0 3px transparentize($c-primary, 0.7);
+    box-shadow: inset 0 1px 2px $c-grey-lighten, 0 0 0 3px color.adjust($c-primary, $alpha: -0.7);
   }
 
   &-source-document {
@@ -135,7 +137,7 @@ $item-padding: 15px;
   height: 18px;
   line-height: 20px;
   text-align: center;
-  background-color: transparentize($c-grey-dark, 0.85);
+  background-color: color.adjust($c-grey-dark, $alpha: -0.85);
   color: $c-grey-dark;
   border-radius: 50%;
 }
@@ -342,8 +344,8 @@ $item-padding: 15px;
   b {
     font-weight: normal;
     color: #333300;
-    background-color: transparentize(yellow, 0.8);
-    box-shadow: -2px 0 0 0 transparentize(yellow, 0.4), 2px 0 0 0 transparentize(yellow, 0.4);
+    background-color: color.adjust(yellow, $alpha: -0.8);
+    box-shadow: -2px 0 0 0 color.adjust(yellow, $alpha: -0.4), 2px 0 0 0 color.adjust(yellow, $alpha: -0.4);
   }
 }
 
@@ -637,7 +639,7 @@ $item-padding: 15px;
 
 .item-danger {
   border-color: $c-danger-light;
-  background-color: lighten($c-danger-light, 10%);
+  background-color: color.adjust($c-danger-light, $lightness: 10%, $space: hsl);
   &:hover,
   &.is-active {
     border-color: $c-danger;

diff --git a/app/react/App/scss/elements/_tooltip.scss b/app/react/App/scss/elements/_tooltip.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @mixin tooltip ($direction) {
   display: none;
   position: absolute;
@@ -11,7 +13,7 @@
   font-weight: normal;
   font-style: normal;
   -webkit-font-smoothing: initial;
-  background-color: transparentize(#FFF7E2, .10);
+  background-color: color.adjust(#FFF7E2, $alpha: -.10);
   color: $c-black;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.2);

diff --git a/app/react/App/scss/layout/_header.scss b/app/react/App/scss/layout/_header.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @import '../config/colors';
 @import '../elements/tooltip';
 
@@ -83,7 +85,7 @@ header {
     height: calc(100% - 50px);
     background-color: var(--c-bg-menu-mobile);
     color: var(--c-text-menu-mobile);
-    border-top: 1px solid transparentize($c-black, 0.6);
+    border-top: 1px solid color.adjust($c-black, $alpha: -0.6);
     overflow: auto;
     transition: all 225ms;
     flex-direction: column;
@@ -171,8 +173,8 @@ header {
     @media (min-width: 1024px) {
       float: left;
       border-top: 0;
-      border-right: 1px solid transparentize($c-black, 0.6);
-      border-left: 1px solid transparentize($c-black, 0.6);
+      border-right: 1px solid color.adjust($c-black, $alpha: -0.6);
+      border-left: 1px solid color.adjust($c-black, $alpha: -0.6);
     }
 
     @media (max-width: 1023px) {

diff --git a/app/react/App/scss/layout/_hero.scss b/app/react/App/scss/layout/_hero.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .hero {
   text-align: center;
   margin: -15px -15px 30px;
@@ -50,10 +52,10 @@
     width: 100%;
     border-top: 3px solid $c-white;
     padding: 60px 0;
-    background: transparentize($c-black, .6);
+    background: color.adjust($c-black, $alpha: -.6);
 
     &:hover {
-      background: transparentize($c-black, .5);
+      background: color.adjust($c-black, $alpha: -.5);
       cursor: pointer;
       text-decoration: none;
 

diff --git a/app/react/App/scss/layout/_sidepanel.scss b/app/react/App/scss/layout/_sidepanel.scss
@@ -1,9 +1,11 @@
+@use "sass:color";
+
 @import '../../scss/config/_colors.scss';
 @import '../../scss/config/_materials.scss';
 @import '../../scss/config/_typography.scss';
 @import '../../scss/elements/_tooltip.scss';
 
-$c-sidebar: darken($c-background, 0%);
+$c-sidebar: color.adjust($c-background, $lightness: -0%, $space: hsl);
 $c-sidebar: $c-white;
 
 .side-panel {
@@ -192,7 +194,7 @@ $c-sidebar: $c-white;
     &.relationship-active {
       box-shadow:
         inset 0 0 0 1px $c-primary,
-        inset 0 0 0 4px transparentize($c-primary, 0.7);
+        inset 0 0 0 4px color.adjust($c-primary, $alpha: -0.7);
     }
   }
 

diff --git a/app/react/App/scss/modules/_ContextMenu.scss b/app/react/App/scss/modules/_ContextMenu.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .ContextMenu {
   position: fixed;
   z-index: 1;
@@ -63,7 +65,7 @@
     left: 50%;
     transform: translateX(-50%) translateY(-10px);
     padding: 5px;
-    background-color: transparentize($c-black, 0.25);
+    background-color: color.adjust($c-black, $alpha: -0.25);
     color: $c-white;
     border-radius: $border-radius;
     text-align: center;
@@ -73,7 +75,7 @@
       content: '';
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 5px solid transparentize($c-black, 0.25);
+      border-top: 5px solid color.adjust($c-black, $alpha: -0.25);
       position: absolute;
       top: 100%;
       left: 50%;

diff --git a/app/react/App/scss/modules/_document.scss b/app/react/App/scss/modules/_document.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .document-viewer {
   width: 100%;
   height: 100%;
@@ -115,7 +117,7 @@
 mark,
 .mark {
   color: transparent !important;
-  background-color: transparentize($c-primary, 0.8) !important;
+  background-color: color.adjust($c-primary, $alpha: -0.8) !important;
   padding: 0 !important;
 
   mark,
@@ -125,7 +127,7 @@ mark,
 }
 
 mark.searchTerm {
-  background-color: transparentize(yellow, 0.6) !important;
+  background-color: color.adjust(yellow, $alpha: -0.6) !important;
 
   mark.searchTerm {
     background-color: transparent !important;
@@ -273,13 +275,13 @@ mark.searchTerm {
     margin-bottom: 0;
 
     &:hover {
-      background-color: transparentize($c-primary-light, 0.7);
+      background-color: color.adjust($c-primary-light, $alpha: -0.7);
     }
 
     &:active,
     &.is-selected {
-      box-shadow: inset 0 0 0 1px transparentize($c-primary, 0.7);
-      background-color: transparentize($c-primary-light, 0.7);
+      box-shadow: inset 0 0 0 1px color.adjust($c-primary, $alpha: -0.7);
+      background-color: color.adjust($c-primary-light, $alpha: -0.7);
     }
 
     .item-name {

diff --git a/app/react/App/scss/modules/_relationships.scss b/app/react/App/scss/modules/_relationships.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $breakpoint: 768px;
 $c-background: #fcfcfc;
 
@@ -868,6 +870,6 @@ $relationship-type-height: 32px;
     color: $c-black;
     box-shadow:
       inset 0 1px 2px $c-grey-lighten,
-      0 0 0 3px transparentize($c-primary, 0.7);
+      0 0 0 3px color.adjust($c-primary, $alpha: -0.7);
   }
 }
diff --git a/app/react/App/scss/modules/_search.scss b/app/react/App/scss/modules/_search.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .library-filters {
   z-index: 6;
   top: $header-height;
@@ -202,10 +204,10 @@
   }
 
   b {
-    background-color: transparentize(yellow, 0.4);
+    background-color: color.adjust(yellow, $alpha: -0.4);
     box-shadow:
-      -2px 0 0 0 transparentize(yellow, 0.4),
-      2px 0 0 0 transparentize(yellow, 0.4);
+      -2px 0 0 0 color.adjust(yellow, $alpha: -0.4),
+      2px 0 0 0 color.adjust(yellow, $alpha: -0.4);
   }
 
   .fa {
@@ -489,7 +491,7 @@
   width: 20px;
   height: $switcher-height;
   margin: 0 3px;
-  background-color: lighten($c-primary, 10%);
+  background-color: color.adjust($c-primary, $lightness: 10%, $space: hsl);
   border-radius: calc($switcher-height / 2);
   border: 1px solid $c-primary;
   cursor: pointer;
@@ -1090,6 +1092,6 @@
   b {
     font-weight: normal;
     color: #333300;
-    background-color: transparentize(yellow, 0.8);
+    background-color: color.adjust(yellow, $alpha: -0.8);
   }
 }
diff --git a/app/react/App/scss/modules/_settings-languages.scss b/app/react/App/scss/modules/_settings-languages.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .installed-languages {
   margin-bottom: 3em;
 }
@@ -27,7 +29,7 @@
   }
 
   .translation-available {
-    background-color: transparentize($c-grey-dark, 0.85);
+    background-color: color.adjust($c-grey-dark, $alpha: -0.85);
     border-radius: 3px;
     padding: 0 4px;
     height: 17px;

diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css
@@ -1824,6 +1824,10 @@ input[type="range"]::-ms-fill-lower {
   margin-top: 1rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -1981,6 +1985,14 @@ input[type="range"]::-ms-fill-lower {
   max-height: 100svh;
 }
 
+.min-h-\[300px\] {
+  min-height: 300px;
+}
+
+.min-h-\[327px\] {
+  min-height: 327px;
+}
+
 .min-h-fit {
   min-height: -moz-fit-content;
   min-height: fit-content;

diff --git a/app/react/Entities/components/EntityViewer.js b/app/react/Entities/components/EntityViewer.js
@@ -440,6 +440,7 @@ const mapStateToProps = state => {
     formState: state.entityView.entityFormState,
     entityState: state.entityView.entityForm,
     // Is this used at all?
+    // ¯\_(ツ)_/¯
     library: state.library,
     // relationships v2
     newRelationshipsEnabled: state.settings?.collection?.get('features')?.get('newRelationships'),

diff --git a/app/react/Markdown/components/Slideshow.js b/app/react/Markdown/components/Slideshow.js
@@ -1,5 +1,5 @@
 import ImageGallery from 'react-image-gallery';
-import 'react-image-gallery/styles/scss/image-gallery.scss';
+import 'react-image-gallery/styles/css/image-gallery.css';
 import PropTypes from 'prop-types';
 import React from 'react';
 

diff --git a/app/react/Timeline/scss/_timeline.scss b/app/react/Timeline/scss/_timeline.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $timeline-item-size: 18px;
 .timeline {
   padding: 0 50px 10px;
@@ -24,7 +26,7 @@ $timeline-item-size: 18px;
     border-left: 1px solid $c-grey-light;
   }
   &-track:not(:last-of-type) &-year.nth5 {
-    background: lighten($c-grey, 16%);
+    background: color.adjust($c-grey, $lightness: 16%, $space: hsl);
   }
 
   &-year-active {