[#7648] fixed firefox autoexpandable input and updated dark theme colors

ui/src/css/base.css

@@ -113,7 +113,7 @@ video {
 }
 
 ::selection {
-    background: rgba(0, 0, 0, 0.2);
+    background: var(--selectionColor);
 }
 
 :root {

ui/src/css/form.css

@@ -487,17 +487,38 @@ button {
             border-radius: var(--borderRadius);
         }
     }
+    .autoexpand-wrapper > .input,
     textarea {
         padding-top: 8px;
         padding-bottom: 9px;
         line-height: 1.5;
         resize: vertical;
+        min-height: 38px;
+        max-height: 300px;
         &.autoexpand {
-            /* @todo check firefox support */
-            field-sizing: content;
+            @supports (field-sizing: content) {
+                field-sizing: content;
+                resize: none;
+            }
+        }
+    }
+
+    /* @todo remove after Firefox add support for "field-sizing:content" */
+    /* note: based on https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/ */
+    .autoexpand-wrapper {
+        display: grid;
+        > textarea {
             resize: none;
-            min-height: 38px;
-            max-height: 300px;
+        }
+        > .input {
+            white-space: pre-wrap;
+            visibility: hidden;
+            overflow: auto;
+        }
+        > .input,
+        > textarea {
+            /* Place on top of each other */
+            grid-area: 1 / 1 / 2 / 2;
         }
     }
 

ui/src/css/vars.css

@@ -68,7 +68,7 @@
     --surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%);
     --surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%);
     --surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%);
-    --selectionColor: var(--surfaceAlt3Color);
+    --selectionColor: rgba(34, 36, 42, 0.22);
     --inputColor: var(--surfaceAlt2Color);
     --inputFocusColor: var(--surfaceAlt3Color);
     --inputBorderColor: var(--surfaceAlt4Color);
@@ -138,28 +138,27 @@
 /* dark */
 [data-color-scheme="dark"],
 [data-color-scheme="dark"] .dropdown {
-    --surfaceColor: #282828;
-    --surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%);
-    --surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 4%);
-    --surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 6%);
-    --surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 9%);
-    --surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 12%);
+    --surfaceColor: #212121;
+    --surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 3%);
+    --surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%);
+    --surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%);
+    --surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 14%);
+    --surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 16%);
 
     --surfaceTxtColor: #dedede;
     --tooltipTxtColor: var(--surfaceTxtColor);
     --surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 45%);
     --surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 65%);
 
-    --secondaryColor: var(--surfaceAlt3Color);
+    --secondaryColor: var(--surfaceAlt2Color);
     --secondaryTxtColor: var(--surfaceTxtColor);
-    --secondaryTxtColor: var(--surfaceTxtColor);
-    --secondaryAlt1Color: var(--surfaceAlt4Color);
-    --secondaryAlt2Color: var(--surfaceAlt5Color);
+    --secondaryAlt1Color: var(--surfaceAlt3Color);
+    --secondaryAlt2Color: var(--surfaceAlt4Color);
 
-    --primaryColor: #1e1e1e;
+    --primaryColor: #161616;
     --primaryTxtColor: var(--surfaceTxtColor);
-    --primaryAlt1Color: color-mix(in srgb, var(--primaryColor), black 8%);
-    --primaryAlt2Color: color-mix(in srgb, var(--primaryColor), black 16%);
+    --primaryAlt1Color: color-mix(in srgb, var(--primaryColor), white 1.2%);
+    --primaryAlt2Color: color-mix(in srgb, var(--primaryColor), white 1.7%);
     --primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
     --primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
 
@@ -187,6 +186,7 @@
     --dangerAlt2Color: color-mix(in srgb, var(--dangerColor), black 15%);
     --surfaceDangerColor: color-mix(in srgb, var(--dangerColor), var(--surfaceColor) 45%);
 
+    --selectionColor: rgba(255, 255, 255, 0.22);
     --inputColor: var(--surfaceAlt2Color);
     --inputFocusColor: var(--surfaceAlt3Color);
     --inputBorderColor: var(--surfaceAlt4Color);

ui/src/fields/text/input.js

@@ -33,17 +33,32 @@ export function input(props) {
                     }),
                     t.span({ className: "txt" }, () => props.field.name),
                 ),
-                t.textarea({
-                    id: uniqueId,
-                    className: "autoexpand",
-                    rows: 1,
-                    name: () => props.field.name,
-                    required: () => data.isRequired,
-                    disabled: () => data.isDisabled,
-                    placeholder: () => (data.hasAutogenerate ? "Leave empty to autogenerate..." : ""),
-                    value: () => props.record[props.field.name] || "",
-                    oninput: (e) => (props.record[props.field.name] = e.target.value || ""),
-                }),
+                // @todo remove after Firefox add support for "field-sizing:content"
+                //
+                // note1: not using contenteditable because it requires keeping
+                // track of the cursor offset when replacing the content in oninput
+                //
+                // note2: based on https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
+                t.div(
+                    { className: "autoexpand-wrapper" },
+                    t.textarea({
+                        id: uniqueId,
+                        // className: "autoexpand",
+                        rows: 1,
+                        name: () => props.field.name,
+                        required: () => data.isRequired,
+                        disabled: () => data.isDisabled,
+                        placeholder: () => (data.hasAutogenerate ? "Leave empty to autogenerate..." : ""),
+                        value: () => props.record[props.field.name] || "",
+                        oninput: (e) => (props.record[props.field.name] = e.target.value || ""),
+                    }),
+                    t.div(
+                        { className: "input" },
+                        () => props.record[props.field.name],
+                        // the empty space is necessary to prevent jumpy behavior
+                        " ",
+                    ),
+                ),
             ),
             // list the autodate field values in a tooltip next to the primary key
             () => {

ui/src/records/recordUpsertModal.js

@@ -1242,6 +1242,7 @@ function authFieldPassword(collection, data) {
                         id: uniqueId + "_password",
                         spellcheck: false,
                         name: "password",
+                        className: "inline-error",
                         autocomplete: "new-password",
                         required: () => local.isNew || local.changePassword,
                         value: () => data.record.password || "",
@@ -1268,6 +1269,7 @@ function authFieldPassword(collection, data) {
                         id: uniqueId + "_password_confirm",
                         spellcheck: false,
                         name: "passwordConfirm",
+                        className: "inline-error",
                         autocomplete: "new-password",
                         required: () => local.isNew || local.changePassword,
                         value: () => data.record.passwordConfirm || "",