compose: Add background and border colors for message limit.

Added colors to notify users when the message length is near
the limit or has exceeded it. Used distinct colors for each
case to provide clear feedback.

Fixes: zulip#32171.

web/src/compose_validate.ts

@@ -765,6 +765,8 @@ export function check_overflow_text($container: JQuery): number {
     const is_edit_container = $textarea.closest(".message_row").length > 0;
 
     if (text.length > max_length) {
+        $indicator.removeClass("textarea-approaching-limit");
+        $textarea.removeClass("textarea-approaching-limit");
         $indicator.addClass("textarea-over-limit");
         $textarea.addClass("textarea-over-limit");
         $indicator.html(
@@ -780,6 +782,8 @@ export function check_overflow_text($container: JQuery): number {
     } else if (remaining_characters <= 900) {
         $indicator.removeClass("textarea-over-limit");
         $textarea.removeClass("textarea-over-limit");
+        $indicator.addClass("textarea-approaching-limit");
+        $textarea.addClass("textarea-approaching-limit");
         $indicator.html(
             render_compose_limit_indicator({
                 remaining_characters,
@@ -793,6 +797,7 @@ export function check_overflow_text($container: JQuery): number {
     } else {
         $indicator.text("");
         $textarea.removeClass("textarea-over-limit");
+        $textarea.removeClass("textarea-approaching-limit");
 
         if (is_edit_container) {
             set_message_too_long_for_edit(false, $container);

web/styles/app_variables.css

@@ -721,6 +721,10 @@
     /* 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-over-limit: hsl(3deg 35% 90%);
+    --color-compose-message-content-background-approaching-limit: hsl(
+        50deg 75% 92%
+    );
     --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%);
@@ -788,6 +792,10 @@
     --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-over-limit: hsl(0deg 76% 65%);
+    --color-message-content-container-border-approaching-limit: hsl(
+        38deg 70% 50%
+    );
     --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
     --color-compose-formatting-button-divider: hsl(0deg 0% 75%);
     --color-compose-focus-ring: var(--color-outline-focus);
@@ -1634,6 +1642,10 @@
         var(--color-compose-box-background),
         hsl(0deg 0% 0%) 20%
     );
+    --color-compose-message-content-background-over-limit: hsl(3deg 50% 12%);
+    --color-compose-message-content-background-approaching-limit: hsl(
+        50deg 75% 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;
@@ -1690,7 +1702,6 @@
     --color-message-formatting-controls-container: hsl(0deg 0% 0% / 8%);
     --color-message-content-container-border: hsl(0deg 0% 0% / 80%);
     --color-message-content-container-border-focus: hsl(0deg 0% 100% / 27%);
-    --color-message-content-container-border-over-limit: hsl(0deg 76% 65%);
     --color-compose-control-button-background-hover: hsl(0deg 0% 100% / 5%);
     --color-compose-formatting-button-divider: hsl(236deg 33% 90% / 25%);
     --color-compose-focus-ring: hsl(0deg 0% 67%);

web/styles/compose.css

@@ -337,15 +337,27 @@
 }
 
 #message-content-container:has(.new_message_textarea.textarea-over-limit),
-#message-content-container:has(.new_message_textarea.textarea-over-limit:focus),
-.edit-content-container:has(.message_edit_content.textarea-over-limit),
-.edit-content-container:has(.message_edit_content.textarea-over-limit:focus) {
+.edit-content-container:has(.message_edit_content.textarea-over-limit) {
     box-shadow: 0 0 0 1pt
         var(--color-message-content-container-border-over-limit);
 }
 
+#message-content-container:has(
+        .new_message_textarea.textarea-approaching-limit
+    ),
+.edit-content-container:has(.message_edit_content.textarea-approaching-limit) {
+    box-shadow: 0 0 0 1pt
+        var(--color-message-content-container-border-approaching-limit);
+}
+
 #message-content-container:has(.new_message_textarea.textarea-over-limit.flash),
-.edit-content-container:has(.message_edit_content.textarea-over-limit.flash) {
+#message-content-container:has(
+        .new_message_textarea.textarea-approaching-limit.flash
+    ),
+.edit-content-container:has(.message_edit_content.textarea-over-limit.flash),
+.edit-content-container:has(
+        .message_edit_content.textarea-approaching-limit.flash
+    ) {
     animation: message-limit-flash 0.5s ease-in-out 3;
 }
 
@@ -406,6 +418,18 @@
     padding-right: var(--composebox-buttons-width);
     background-color: var(--color-compose-message-content-background);
     color: var(--color-text-default);
+
+    &.textarea-over-limit {
+        background-color: var(
+            --color-compose-message-content-background-over-limit
+        );
+    }
+
+    &.textarea-approaching-limit {
+        background-color: var(
+            --color-compose-message-content-background-approaching-limit
+        );
+    }
 }
 
 .surround-formatting-buttons-row {

web/styles/message_row.css

@@ -669,6 +669,18 @@
 
     .message-edit-textbox {
         position: relative;
+
+        .textarea-over-limit {
+            background-color: var(
+                --color-compose-message-content-background-over-limit
+            );
+        }
+
+        .textarea-approaching-limit {
+            background-color: var(
+                --color-compose-message-content-background-approaching-limit
+            );
+        }
     }
 }