compose_box: Add background color and border for length limits.

This commit introduces background and border color changes to the
compose box, distinguishing between cases where the message length is
approaching the limit and when it exceeds the limit.

Fixes #32171.

web/src/compose_validate.ts

@@ -725,10 +725,13 @@ export function check_overflow_text(): number {
     const max_length = realm.max_message_length;
     const remaining_characters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
+    const $textarea = $("textarea#compose-textarea");
 
     if (text.length > max_length) {
+        $indicator.removeClass("approaching-limit");
+        $textarea.removeClass("approaching-limit");
         $indicator.addClass("over-limit");
-        $("textarea#compose-textarea").addClass("over-limit");
+        $textarea.addClass("over-limit");
         $indicator.html(
             render_compose_limit_indicator({
                 remaining_characters,
@@ -737,7 +740,10 @@ export function check_overflow_text(): number {
         set_message_too_long(true);
     } else if (remaining_characters <= 900) {
         $indicator.removeClass("over-limit");
-        $("textarea#compose-textarea").removeClass("over-limit");
+        $textarea.removeClass("over-limit");
+        $indicator.addClass("approaching-limit");
+        $textarea.addClass("approaching-limit");
+
         $indicator.html(
             render_compose_limit_indicator({
                 remaining_characters,
@@ -746,7 +752,8 @@ export function check_overflow_text(): number {
         set_message_too_long(false);
     } else {
         $indicator.text("");
-        $("textarea#compose-textarea").removeClass("over-limit");
+        $textarea.removeClass("over-limit");
+        $textarea.removeClass("approaching-limit");
 
         set_message_too_long(false);
     }

web/styles/app_variables.css

@@ -675,6 +675,8 @@
     /* Compose box colors */
     --color-compose-box-background: hsl(232deg 30% 92%);
     --color-compose-message-content-background: hsl(0deg 0% 100%);
+    --color-compose-message-content-background-warning: hsl(50deg 75% 92%);
+    --color-compose-message-content-background-error: hsl(3deg 35% 90%);
     --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
     --color-compose-send-button-background: hsl(240deg 96% 68%);
     --color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
@@ -742,6 +744,13 @@
     --color-message-formatting-controls-container: hsl(232deg 30% 96%);
     --color-message-content-container-border: hsl(0deg 0% 0% / 10%);
     --color-message-content-container-border-focus: hsl(0deg 0% 57%);
+    --color-message-content-container-border-warning: hsl(038deg 70% 50%);
+    --color-message-content-container-border-error: hsl(0deg 76% 65%);
+    --color-message-content-container-border-invalid: hsl(3deg 57% 33%);
+    --color-message-content-container-shadow-warning: 0 0 0 1pt
+        hsl(038deg 70% 50%);
+    --color-message-content-container-shadow-error: 0 0 0 1pt hsl(0deg 76% 65%);
+    --color-message-content-container-shadow-invalid: 0 0 2px hsl(3deg 57% 33%);
     --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
     --color-compose-focus-ring: var(--color-outline-focus);
 
@@ -1230,6 +1239,8 @@
         var(--color-compose-box-background),
         hsl(0deg 0% 0%) 20%
     );
+    --color-compose-message-content-background-warning: hsl(50deg 75% 12%);
+    --color-compose-message-content-background-error: hsl(3deg 50% 12%);
     --color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%);
     --color-compose-send-control-button: hsl(240deg 30% 70%);
     --color-compose-send-control-button-background: transparent;

web/styles/compose.css

@@ -329,7 +329,14 @@
 
     &:has(.new_message_textarea.over-limit),
     &:has(.new_message_textarea.over-limit:focus) {
-        box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
+        border-color: var(--color-message-content-container-border-error);
+        box-shadow: var(--color-message-content-container-shadow-error);
+    }
+
+    &:has(.new_message_textarea.approaching-limit),
+    &:has(.new_message_textarea.approaching-limit:focus) {
+        border-color: var(--color-message-content-container-border-warning);
+        box-shadow: var(--color-message-content-container-shadow-warning);
     }
 
     &:has(.new_message_textarea.over-limit.flash) {
@@ -338,8 +345,8 @@
 
     &:has(.new_message_textarea.invalid),
     &:has(.new_message_textarea.invalid:focus) {
-        border-color: hsl(3deg 57% 33%);
+        border-color: var(--color-message-content-container-border-invalid);
-        box-shadow: 0 0 2px hsl(3deg 57% 33%);
+        box-shadow: var(--color-message-content-container-shadow-invalid);
     }
 }
 
@@ -400,6 +407,16 @@
     padding-right: var(--composebox-buttons-width);
     background-color: var(--color-compose-message-content-background);
     color: var(--color-text-default);
+
+    &.over-limit {
+        background-color: var(--color-compose-message-content-background-error);
+    }
+
+    &.approaching-limit {
+        background-color: var(
+            --color-compose-message-content-background-warning
+        );
+    }
 }
 
 .surround-formatting-buttons-row {