checkboxes: Decouple label.checkbox from .new-style tangle.

templates/corporate/billing/remote_billing_finalize_login_confirmation.html

@@ -48,12 +48,12 @@
                 <div class="input-group remote-billing-confirm-email-subscription-form-field">
                     <label for="enable-major-release-emails" class="checkbox">
                         <input id="enable-major-release-emails" name="enable_major_release_emails" type="checkbox" value="true" checked="checked" />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         Sign me up for emails about <strong>major Zulip releases</strong> and other big announcements (a few times a year)
                     </label>
                     <label for="enable-maintenance-release-emails" class="checkbox">
                         <input id="enable-maintenance-release-emails" name="enable_maintenance_release_emails" type="checkbox" value="true" checked="checked" />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         Sign me up for emails about <strong>all Zulip releases</strong>, including security and maintenance releases (recommended for server administrators)
                     </label>
                 </div>
@@ -62,7 +62,7 @@
                 <div class="input-group terms-of-service remote-billing-confirm-login-form-field" id="remote-billing-confirm-login-tos-wrapper">
                     <label for="remote-billing-confirm-login-tos" class="checkbox">
                         <input id="remote-billing-confirm-login-tos" name="tos_consent" class="required" type="checkbox" value="true" />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.
                         <div id="remote-billing-confirm-login-form-tos_consent-error" class="alert alert-danger remote-billing-confirm-login-form-field-error tos_consent-error"></div>
                     </label>

templates/zerver/accounts_accept_terms.html

@@ -50,7 +50,7 @@ the registration flow has its own (nearly identical) copy of the fields below in
                     <label for="id_terms" class="inline-block checkbox">
                         <input id="id_terms" class="required" type="checkbox" name="terms"
                           {% if form.terms.value() %}checked="checked"{% endif %} />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         {% trans %}I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.{% endtrans %}
                     </label>
                     {% if form.terms.errors %}

templates/zerver/realm_creation_form.html

@@ -59,7 +59,7 @@
         <label class="checkbox static" for="realm_in_root_domain">
             <input type="checkbox" name="realm_in_root_domain" id="realm_in_root_domain"
               {% if not form.realm_subdomain.value() and not form.realm_subdomain.errors %}checked="checked"{% endif %}/>
-            <span></span>
+            <span class="rendered-checkbox"></span>
             {% trans %}Use {{ external_host }}{% endtrans %}
         </label>
         {% endif %}

templates/zerver/register.html

@@ -178,7 +178,7 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                           name="default_stream_group"
                           id="id_default_stream_group__{{ default_stream_group.id }}" value="{{ default_stream_group.name }}"
                           {% if "default_stream_group" in form.data and default_stream_group.id in form.data.getlist('default_stream_group') %} checked {% endif %} />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         {% set comma = joiner(", ") %}
                         <div class="default_stream_group_name inline-block"
                           title="{{ default_stream_group.description }}">
@@ -230,7 +230,7 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                     <label for="id_terms" class="inline-block checkbox">
                         <input id="id_terms" class="required" type="checkbox" name="terms"
                           {% if form.terms.value() %}checked="checked"{% endif %} />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         {% trans %}I agree to the <a href="{{ root_domain_url }}/policies/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a>.{% endtrans %}
                     </label>
                     {% if form.terms.errors %}
@@ -245,7 +245,7 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                     <label for="id_enable_marketing_emails" class="inline-block checkbox marketing_emails_checkbox">
                         <input id="id_enable_marketing_emails" type="checkbox" name="enable_marketing_emails"
                           checked="checked" />
-                        <span></span>
+                        <span class="rendered-checkbox"></span>
                         {% trans %}Subscribe me to Zulip's low-traffic newsletter (a few emails a year).{% endtrans %}
                     </label>
                 </div>

web/src/info_overlay.ts

@@ -209,7 +209,7 @@ Last task`,
                     <label class="checkbox">
                         <div>
                             <input type="checkbox" class="task" checked="checked">
-                            <span></span>
+                            <span class="rendered-checkbox"></span>
                         </div>
                         <div>
                             <strike><strong>Task 1:</strong> This is the first task.</strike>
@@ -220,7 +220,7 @@ Last task`,
                     <label class="checkbox">
                         <div>
                             <input type="checkbox" class="task">
-                            <span></span>
+                            <span class="rendered-checkbox"></span>
                         </div>
                         <div>
                             <strong>Task 2:</strong> This is the second task.
@@ -231,7 +231,7 @@ Last task`,
                     <label class="checkbox">
                         <div>
                             <input type="checkbox" class="task">
-                            <span></span>
+                            <span class="rendered-checkbox"></span>
                         </div>
                         <div>
                             <strong>Last task</strong>

web/styles/app_variables.css

@@ -929,6 +929,9 @@
     --color-border-zulip-button: hsl(0deg 0% 80%);
     --color-border-zulip-button-interactive: hsl(0deg 0% 60%);
 
+    /* Zulip-style checkbox colors. */
+    --color-border-rendered-checkbox: hsl(0deg 0% 0% / 60%);
+
     /* Emoji-picker colors */
     --color-background-emoji-picker-popover: hsl(0deg 0% 93%);
     --color-background-emoji-picker-popover-tab-item-active: hsl(
@@ -1354,6 +1357,9 @@
     --color-border-zulip-button: hsl(0deg 0% 0% / 60%);
     --color-border-zulip-button-interactive: var(--color-border-zulip-button);
 
+    /* Zulip-style checkbox colors. */
+    --color-border-rendered-checkbox: hsl(0deg 0% 100% / 40%);
+
     /* Emoji-picker colors */
     --color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
     --color-background-emoji-picker-popover-tab-item-active: hsl(

web/styles/components.css

@@ -1,62 +1,63 @@
 /* Reusable, object-oriented CSS base components for all Zulip pages
    (both web app and portico). */
 
-.new-style {
-    & label.checkbox {
-        padding: 0;
-        display: inline-block;
-        position: relative;
-        vertical-align: top;
-        min-height: 20px;
+& label.checkbox {
+    padding: 0;
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    min-height: 20px;
 
-        & input[type="checkbox"] {
-            position: absolute;
-            clip: rect(0, 0, 0, 0);
+    & input[type="checkbox"] {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
 
-            ~ span {
-                display: inline-block;
-                vertical-align: middle;
-                position: relative;
-                top: -2px;
+        ~ .rendered-checkbox {
+            display: inline-block;
+            vertical-align: middle;
+            position: relative;
+            top: -2px;
 
-                padding: 2px;
-                margin: 0 5px 0 0;
-                height: 10px;
-                width: 10px;
+            padding: 2px;
+            margin: 0 5px 0 0;
+            height: 10px;
+            width: 10px;
 
-                font-weight: 300;
-                line-height: 0.8;
-                font-size: 1.3rem;
-                text-align: center;
-                border: 1px solid hsl(0deg 0% 0% / 60%);
+            font-weight: 300;
+            line-height: 0.8;
+            font-size: 1.3rem;
+            text-align: center;
+            /* Color variables are not imported to the portico, so we duplicate
+               the light-mode color value here as a fallback. */
+            border: 1px solid
+                var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
 
-                border-radius: 4px;
-                filter: brightness(0.8);
+            border-radius: 4px;
+            filter: brightness(0.8);
 
-                cursor: pointer;
-            }
+            cursor: pointer;
+        }
 
-            &:checked ~ span {
-                background-image: url("../images/checkbox.svg");
-                background-size: 85%;
-                background-position: 50% 50%;
-                background-repeat: no-repeat;
-            }
+        &:checked ~ .rendered-checkbox {
+            background-image: url("../images/checkbox.svg");
+            background-size: 85%;
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+        }
 
-            &:disabled ~ span {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
+        &:disabled ~ .rendered-checkbox {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
     }
 
-    & label.checkbox:has(.enter_sends) {
+    &:has(.enter_sends) {
         vertical-align: middle;
     }
+}
 
-    & a.no-style {
-        color: inherit;
-    }
+a.no-style {
+    color: inherit;
 }
 
 a.no-underline,

web/styles/dark_theme.css

@@ -319,10 +319,6 @@
         border-color: hsl(0deg 0% 0% / 20%);
     }
 
-    .new-style label.checkbox input[type="checkbox"] ~ span {
-        border-color: hsl(0deg 0% 100% / 40%);
-    }
-
     #stream-actions-menu-popover .sp-container {
         background-color: transparent;
 
@@ -901,7 +897,6 @@
 
     & a:not(:active):focus,
     button:focus,
-    .new-style label.checkbox input[type="checkbox"]:focus ~ span,
     i.fa:focus,
     i.zulip-icon:focus,
     [role="button"]:focus {

web/styles/zulip.css

@@ -573,7 +573,7 @@ label {
 /* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
 a:not(:active):focus,
 button:focus,
-.new-style label.checkbox input[type="checkbox"]:focus ~ span,
+label.checkbox input[type="checkbox"]:focus ~ .rendered-checkbox,
 i.fa:focus,
 i.zulip-icon:focus-visible,
 [role="button"]:focus {

web/templates/confirm_dialog/confirm_deactivate_user.hbs

@@ -21,7 +21,7 @@
 <div class="new-style">
     <label class="checkbox">
         <input type="checkbox" class="send_email" />
-        <span></span>
+        <span class="rendered-checkbox"></span>
         {{t "Notify this user by email?" }}
     </label>
 </div>

web/templates/invite_user_modal.hbs

@@ -29,7 +29,7 @@
     <div class="input-group new-style" id="receive-invite-acceptance-notification-container">
         <label class="checkbox display-block">
             <input type="checkbox" id="receive-invite-acceptance-notification" checked/>
-            <span></span>
+            <span class="rendered-checkbox"></span>
             {{t "Send me a direct message when my invitation is accepted" }}
         </label>
     </div>
@@ -76,7 +76,7 @@
             <div class="select_default_streams new-style">
                 <label class="checkbox display-block modal-field-label">
                     <input type="checkbox" id="invite_select_default_streams" checked="checked" />
-                    <span></span>
+                    <span class="rendered-checkbox"></span>
                     {{t 'Default channels for this organization'}}
                 </label>
             </div>

web/templates/move_topic_to_stream.hbs

@@ -25,12 +25,12 @@
         <div class="topic_move_breadcrumb_messages">
             <label class="checkbox">
                 <input class="send_notification_to_new_thread" name="send_notification_to_new_thread" type="checkbox" {{#if notify_new_thread}}checked="checked"{{/if}} />
-                <span></span>
+                <span class="rendered-checkbox"></span>
                 {{t "Send automated notice to new topic" }}
             </label>
             <label class="checkbox">
                 <input class="send_notification_to_old_thread" name="send_notification_to_old_thread" type="checkbox" {{#if notify_old_thread}}checked="checked"{{/if}} />
-                <span></span>
+                <span class="rendered-checkbox"></span>
                 {{t "Send automated notice to old topic" }}
             </label>
         </div>

web/templates/settings/add_new_custom_profile_field_form.hbs

@@ -39,14 +39,14 @@
         <div class="input-group">
             <label class="checkbox profile_field_display_label" for="profile_field_display_in_profile_summary">
                 <input type="checkbox" id="profile_field_display_in_profile_summary" name="display_in_profile_summary"/>
-                <span></span>
+                <span class="rendered-checkbox"></span>
                 {{t 'Display on user card' }}
             </label>
         </div>
         <div class="input-group">
             <label class="checkbox" for="profile-field-required">
                 <input type="checkbox" id="profile-field-required" name="required"/>
-                <span></span>
+                <span class="rendered-checkbox"></span>
                 {{t 'Required field' }}
             </label>
         </div>

web/templates/settings/admin_profile_field_list.hbs

@@ -20,7 +20,7 @@
         <span class="profile_field_display_in_profile_summary">
             <label class="checkbox display_in_profile_summary_{{display_in_profile_summary}}" for="profile_field_display_in_profile_summary_{{id}}">
                 <input class="display_in_profile_summary display_in_profile_summary_checkbox_{{display_in_profile_summary}}" type="checkbox" id="profile_field_display_in_profile_summary_{{id}}" {{#if display_in_profile_summary}} checked="checked" {{/if}} data-profile-field-id="{{id}}"/>
-                <span></span>
+                <span class="rendered-checkbox"></span>
             </label>
         </span>
         {{/if}}
@@ -29,7 +29,7 @@
         <span class="profile-field-required">
             <label class="checkbox" for="profile-field-required-{{id}}">
                 <input class="required-field-toggle required-checkbox-{{required}}" type="checkbox" id="profile-field-required-{{id}}" {{#if required}} checked="checked" {{/if}} data-profile-field-id="{{id}}"/>
-                <span></span>
+                <span class="rendered-checkbox"></span>
             </label>
         </span>
     </td>

web/templates/settings/admin_realm_domains_list.hbs

@@ -5,7 +5,7 @@
         <label class="checkbox">
             <input type="checkbox" class="allow-subdomains"
               {{#if allow_subdomains}} checked="checked" {{/if}} />
-            <span></span>
+            <span class="rendered-checkbox"></span>
         </label>
     </td>
     <td><button class="button btn-danger small rounded delete_realm_domain">{{t "Remove" }}</button></td>

web/templates/settings/edit_custom_profile_field_form.hbs

@@ -40,7 +40,7 @@
         <div class="input-group">
             <label class="checkbox edit_profile_field_display_label" for="id-custom-profile-field-display-in-profile-summary">
                 <input class="edit_display_in_profile_summary prop-element" data-setting-widget-type="boolean" type="checkbox" id="id-custom-profile-field-display-in-profile-summary" name="display_in_profile_summary" data-setting-widget-type="boolean" {{#if display_in_profile_summary}} checked="checked" {{/if}}/>
-                <span></span>
+                <span class="rendered-checkbox"></span>
                 {{t 'Display on user card' }}
             </label>
         </div>
@@ -48,7 +48,7 @@
     <div class="input-group">
         <label class="checkbox" for="id-custom-profile-field-required">
             <input class="edit-required prop-element" type="checkbox" id="id-custom-profile-field-required" name="required" data-setting-widget-type="boolean" {{#if required}} checked="checked" {{/if}}/>
-            <span></span>
+            <span class="rendered-checkbox"></span>
             {{t 'Required field' }}
         </label>
     </div>

web/templates/settings/generate_integration_url_modal.hbs

@@ -16,7 +16,7 @@
     <div class="input-group control-label-disabled">
         <label class="checkbox">
             <input type="checkbox" id="integration-url-override-topic" class="integration-url-parameter" disabled/>
-            <span></span>
+            <span class="rendered-checkbox"></span>
         </label>
         <label class="inline" for="integration-url-override-topic">
             {{t "Send all notifications to a single topic"}}
@@ -29,7 +29,7 @@
     <div id="integration-events-parameter" class="input-group hide">
         <label class="checkbox">
             <input type="checkbox" id="show-integration-events"/>
-            <span></span>
+            <span class="rendered-checkbox"></span>
         </label>
         <label class="inline" for="show-integration-events">
             {{t "Filter events that will trigger notifications?"}}

web/templates/settings/notification_settings_checkboxes.hbs

@@ -5,7 +5,7 @@
               {{#if is_disabled}} disabled {{/if}}
               {{#if is_checked}}checked="checked"{{/if}} data-setting-widget-type="boolean"
               class="{{setting_name}}{{#unless is_disabled}} prop-element{{/unless}}"/>
-            <span></span>
+            <span class="rendered-checkbox"></span>
         </label>
     </span>
 </td>

web/templates/settings/realm_domains_modal.hbs

@@ -12,7 +12,7 @@
             <td>
                 <label class="checkbox">
                     <input type="checkbox" class="new-realm-domain-allow-subdomains" />
-                    <span></span>
+                    <span class="rendered-checkbox"></span>
                 </label>
             </td>
             <td><button type="button" class="button sea-green small rounded" id="submit-add-realm-domain">{{t "Add" }}</button></td>

web/templates/settings/settings_checkbox.hbs

@@ -3,7 +3,7 @@
     <label class="checkbox">
         <input type="checkbox" class="{{setting_name}} inline-block setting-widget {{#unless skip_prop_element}}prop-element{{/unless}}" name="{{setting_name}}" data-setting-widget-type="boolean"
           id="{{#if prefix}}{{prefix}}{{/if}}{{setting_name}}" {{#if is_checked}}checked="checked"{{/if}} {{#if is_disabled}}disabled{{/if}} />
-        <span></span>
+        <span class="rendered-checkbox"></span>
     </label>
     <label for="{{#if prefix}}{{prefix}}{{/if}}{{setting_name}}" class="inline {{setting_name}}_label" id="{{#if prefix}}{{prefix}}{{/if}}{{setting_name}}_label">
         {{label}}

web/templates/stream_settings/announce_stream_checkbox.hbs

@@ -1,6 +1,6 @@
 <label class="checkbox">
     <input type="checkbox" name="announce" value="announce" checked />
-    <span></span>
+    <span class="rendered-checkbox"></span>
     {{t "Announce new channel in"}}
     {{#if new_stream_announcements_stream_sub}}
         <strong>

web/templates/stream_settings/copy_email_address_modal.hbs

@@ -10,7 +10,7 @@
             <div class="input-group" id="{{this.name}}-input-group">
                 <label class="checkbox">
                     <input class="tag-checkbox" id="{{ this.name }}" type="checkbox"/>
-                    <span></span>
+                    <span class="rendered-checkbox"></span>
                 </label>
                 <label class="inline" for="{{this.name}}">{{{this.description}}}</label>
             </div>

web/templates/stream_settings/stream_settings_checkbox.hbs

@@ -8,7 +8,7 @@
                   class="sub_setting_control" type="checkbox"
                   {{#if is_checked}}checked{{/if}}
                   {{#if is_disabled}}disabled="disabled"{{/if}} />
-                <span></span>
+                <span class="rendered-checkbox"></span>
             </label>
             <label class="inline" for="{{setting_name}}_{{stream_id}}">
                 {{label}}