From d274583d8faae6aaf92943ebc063de5a1098dc7b Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulip.com>
Date: Mon, 20 Mar 2023 14:08:47 -0700
Subject: [PATCH] styles: Use modern color notation.

postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
---
 stylelint.config.js                           |   8 +-
 web/styles/alerts.css                         |  44 +-
 web/styles/app_components.css                 | 184 +++---
 web/styles/components.css                     |  10 +-
 web/styles/compose.css                        | 114 ++--
 web/styles/dark_theme.css                     | 598 +++++++++---------
 web/styles/drafts.css                         |  18 +-
 web/styles/hotspots.css                       |  46 +-
 web/styles/image_upload_widget.css            |  26 +-
 web/styles/informational_overlays.css         |   6 +-
 web/styles/input_pill.css                     |  22 +-
 web/styles/left_sidebar.css                   |  32 +-
 web/styles/lightbox.css                       |  24 +-
 web/styles/message_edit_history.css           |   8 +-
 web/styles/modal.css                          |  40 +-
 web/styles/popovers.css                       |  54 +-
 web/styles/portico/activity.css               |  28 +-
 web/styles/portico/billing.css                |  76 +--
 web/styles/portico/email_log.css              |   4 +-
 web/styles/portico/footer.css                 |  12 +-
 web/styles/portico/integrations.css           |  32 +-
 web/styles/portico/integrations_dev_panel.css |  28 +-
 web/styles/portico/landing_page.css           | 522 +++++++--------
 web/styles/portico/markdown.css               |  64 +-
 web/styles/portico/portico.css                | 118 ++--
 web/styles/portico/portico_signin.css         | 140 ++--
 web/styles/portico/stats.css                  |  22 +-
 web/styles/pygments.css                       | 124 ++--
 web/styles/reactions.css                      |  56 +-
 web/styles/recent_topics.css                  |  42 +-
 web/styles/rendered_markdown.css              |  88 +--
 web/styles/right_sidebar.css                  |  10 +-
 web/styles/search.css                         |   2 +-
 web/styles/settings.css                       | 144 ++---
 web/styles/subscriptions.css                  |  86 +--
 web/styles/tooltips.css                       |  16 +-
 web/styles/typing_notifications.css           |   2 +-
 web/styles/user_circles.css                   |  12 +-
 web/styles/user_status.css                    |   4 +-
 web/styles/widgets.css                        |  52 +-
 web/styles/zulip.css                          | 306 ++++-----
 41 files changed, 1623 insertions(+), 1601 deletions(-)

diff --git a/stylelint.config.js b/stylelint.config.js
index ecf4860fba..e8c5cf7bde 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -20,11 +20,6 @@ module.exports = {
         "selector-class-pattern": null,
         "selector-id-pattern": null,
 
-        // Compatibility with older browsers
-        "alpha-value-notation": "number",
-        "color-function-notation": "legacy",
-        "hue-degree-notation": "number",
-
         // Limit language features
         "color-no-hex": true,
         "color-named": "never",
@@ -35,9 +30,8 @@ module.exports = {
             ],
         },
         "function-disallowed-list": [
-            // We use hsl(a) instead of rgb(a)
+            // We use hsl instead of rgb
             "rgb",
-            "rgba",
         ],
 
         // Zulip CSS should have no dependencies on external resources
diff --git a/web/styles/alerts.css b/web/styles/alerts.css
index 6246833acc..729550a3bf 100644
--- a/web/styles/alerts.css
+++ b/web/styles/alerts.css
@@ -1,5 +1,5 @@
-$alert-red: hsl(16, 60%, 45%);
-$alert-error-red: hsl(0, 80%, 40%);
+$alert-red: hsl(16deg 60% 45%);
+$alert-error-red: hsl(0deg 80% 40%);
 
 .alert-display {
     display: none;
@@ -43,15 +43,15 @@ $alert-error-red: hsl(0, 80%, 40%);
         @extend .alert-display, .alert-animations;
 
         font-size: 1rem;
-        color: hsl(0, 80%, 40%);
+        color: hsl(0deg 80% 40%);
 
         margin-top: 5px;
         padding: 1rem 0;
 
-        background-color: hsl(0, 100%, 98%);
+        background-color: hsl(0deg 100% 98%);
         border-radius: 4px;
-        border: 1px solid hsl(0, 80%, 40%);
-        box-shadow: 0 0 2px hsl(0, 80%, 40%);
+        border: 1px solid hsl(0deg 80% 40%);
+        box-shadow: 0 0 2px hsl(0deg 80% 40%);
 
         .stacktrace-header {
             display: flex;
@@ -89,22 +89,22 @@ $alert-error-red: hsl(0, 80%, 40%);
 
         .expand {
             cursor: pointer;
-            color: hsl(0, 32%, 83%);
+            color: hsl(0deg 32% 83%);
 
             &:hover {
-                color: hsl(0, 0%, 20%);
+                color: hsl(0deg 0% 20%);
             }
         }
 
         .subtle {
-            color: hsl(0, 7%, 45%);
+            color: hsl(0deg 7% 45%);
         }
 
         .code-context {
-            color: hsl(0, 7%, 15%);
-            background-color: hsl(0, 7%, 98%);
-            box-shadow: inset 0 11px 10px -10px hsl(0, 7%, 70%),
-                inset 0 -11px 10px -10px hsl(0, 7%, 70%);
+            color: hsl(0deg 7% 15%);
+            background-color: hsl(0deg 7% 98%);
+            box-shadow: inset 0 11px 10px -10px hsl(0deg 7% 70%),
+                inset 0 -11px 10px -10px hsl(0deg 7% 70%);
 
             margin-top: 1em;
             margin-bottom: 1em;
@@ -119,11 +119,11 @@ $alert-error-red: hsl(0, 80%, 40%);
                 width: 3rem;
                 display: inline-block;
                 text-align: right;
-                color: hsl(0, 7%, 35%);
+                color: hsl(0deg 7% 35%);
             }
 
             .focus-line {
-                background-color: hsl(0, 7%, 90%);
+                background-color: hsl(0deg 7% 90%);
                 width: 100%;
             }
         }
@@ -134,7 +134,7 @@ $alert-error-red: hsl(0, 80%, 40%);
 
         font-size: 1rem;
         border-radius: 4px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
 
         position: relative;
 
@@ -157,7 +157,7 @@ $alert-error-red: hsl(0, 80%, 40%);
             overflow: hidden;
             content: "\f071";
 
-            color: hsl(16, 60%, 55%);
+            color: hsl(16deg 60% 55%);
         }
 
         &::after {
@@ -261,11 +261,11 @@ $alert-error-red: hsl(0, 80%, 40%);
 
     &.alert-loading,
     &.alert-success {
-        border-color: hsl(156, 28%, 70%);
-        box-shadow: 0 0 2px hsl(156, 28%, 70%);
+        border-color: hsl(156deg 28% 70%);
+        box-shadow: 0 0 2px hsl(156deg 28% 70%);
 
         .exit {
-            color: hsl(156, 30%, 50%);
+            color: hsl(156deg 30% 50%);
         }
     }
 
@@ -296,13 +296,13 @@ $alert-error-red: hsl(0, 80%, 40%);
         padding: 7px;
         font-size: 1.5em;
         line-height: 0;
-        color: hsl(156, 30%, 50%);
+        color: hsl(156deg 30% 50%);
     }
 
     .alert-content {
         grid-column: 2 / 3;
         grid-row-start: 1;
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
     }
 
     .exit {
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 0b6a371b1b..e89ec300d1 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -15,15 +15,15 @@
 
 kbd {
     display: inline-block;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     border-radius: 4px;
     font-weight: 600;
     white-space: nowrap;
-    background-color: hsl(0, 0%, 98%);
-    color: hsl(0, 0%, 20%);
+    background-color: hsl(0deg 0% 98%);
+    color: hsl(0deg 0% 20%);
     margin: 0.25em 0.1em;
     padding: 0.1em 0.4em;
-    text-shadow: 0 1px 0 hsl(0, 0%, 100%);
+    text-shadow: 0 1px 0 hsl(0deg 0% 100%);
     /* Prevent selection */
     user-select: none;
 }
@@ -76,7 +76,7 @@ kbd {
 }
 
 .box-shadow {
-    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
 }
 
 .clear-float {
@@ -110,7 +110,7 @@ evidence Edge may have bugs in its handling of placeholder opacity
 CSS: https://github.com/necolas/normalize.css/issues/741
 */
 .placeholder {
-    color: hsl(0, 0%, 45%);
+    color: hsl(0deg 0% 45%);
     opacity: 1;
 }
 
@@ -130,10 +130,10 @@ input::placeholder {
         line-height: normal;
         text-align: center;
 
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         color: inherit;
         outline: none;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         border-radius: 2px;
 
         box-shadow: none;
@@ -157,11 +157,11 @@ input::placeholder {
         }
 
         &.green {
-            background-color: hsl(150, 31%, 53%);
+            background-color: hsl(150deg 31% 53%);
         }
 
         &.grey {
-            background-color: hsl(0, 0%, 67%);
+            background-color: hsl(0deg 0% 67%);
         }
 
         &.small {
@@ -172,83 +172,83 @@ input::placeholder {
 
         &:hover,
         &:focus {
-            border-color: hsl(0, 0%, 60%);
+            border-color: hsl(0deg 0% 60%);
         }
 
         &:active {
-            border-color: hsl(0, 0%, 60%);
+            border-color: hsl(0deg 0% 60%);
             color: inherit;
-            background-color: hsl(0, 0%, 95%);
+            background-color: hsl(0deg 0% 95%);
         }
 
         &.sea-green {
-            color: hsl(156, 41%, 40%);
-            border-color: hsl(156, 28%, 70%);
+            color: hsl(156deg 41% 40%);
+            border-color: hsl(156deg 28% 70%);
 
             &:hover,
             &:focus {
-                border-color: hsl(156, 30%, 50%);
+                border-color: hsl(156deg 30% 50%);
             }
 
             &:active {
-                border-color: hsl(156, 30%, 40%);
-                color: hsl(156, 44%, 43%);
-                background-color: hsl(154, 33%, 96%);
+                border-color: hsl(156deg 30% 40%);
+                color: hsl(156deg 44% 43%);
+                background-color: hsl(154deg 33% 96%);
             }
         }
 
         &.btn-warning {
-            color: hsl(35, 70%, 56%);
-            border-color: hsl(35, 98%, 84%);
+            color: hsl(35deg 70% 56%);
+            border-color: hsl(35deg 98% 84%);
 
             &:hover,
             &:focus {
-                border-color: hsl(35, 55%, 70%);
+                border-color: hsl(35deg 55% 70%);
             }
 
             &:active {
-                color: hsl(35, 82%, 40%);
-                border-color: hsl(35, 55%, 70%);
-                background-color: hsl(33, 48%, 96%);
+                color: hsl(35deg 82% 40%);
+                border-color: hsl(35deg 55% 70%);
+                background-color: hsl(33deg 48% 96%);
             }
         }
 
         &.btn-danger {
-            color: hsl(357, 64%, 72%);
-            border-color: hsl(4, 56%, 82%);
+            color: hsl(357deg 64% 72%);
+            border-color: hsl(4deg 56% 82%);
 
             &:hover,
             &:focus {
-                border-color: hsl(2, 46%, 68%);
+                border-color: hsl(2deg 46% 68%);
             }
 
             &:active {
-                color: hsl(357, 55%, 63%);
-                border-color: hsl(2, 46%, 68%);
-                background-color: hsl(7, 82%, 98%);
+                color: hsl(357deg 55% 63%);
+                border-color: hsl(2deg 46% 68%);
+                background-color: hsl(7deg 82% 98%);
             }
         }
 
         &.btn-link {
-            color: hsl(208, 56%, 53%);
+            color: hsl(208deg 56% 53%);
             text-decoration: none;
 
             &:hover,
             &:focus {
-                color: hsl(208, 56%, 38%);
+                color: hsl(208deg 56% 38%);
             }
         }
 
         &:disabled {
             cursor: not-allowed;
             filter: saturate(0);
-            background-color: hsl(0, 0%, 93%);
-            color: hsl(0, 3%, 52%);
+            background-color: hsl(0deg 0% 93%);
+            color: hsl(0deg 3% 52%);
 
             &:hover {
-                background-color: hsl(0, 0%, 93%);
-                color: hsl(156, 39%, 54%);
-                border-color: hsl(156, 39%, 77%);
+                background-color: hsl(0deg 0% 93%);
+                color: hsl(156deg 39% 54%);
+                border-color: hsl(156deg 39% 77%);
             }
         }
     }
@@ -270,7 +270,7 @@ input::placeholder {
             overflow: hidden;
             vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
             padding: 3px 10px;
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             cursor: pointer;
             justify-content: center;
             align-items: center;
@@ -280,7 +280,7 @@ input::placeholder {
             }
 
             &:not(.selected) {
-                border: 1px solid hsl(0, 0%, 80%);
+                border: 1px solid hsl(0deg 0% 80%);
             }
 
             &.first {
@@ -298,16 +298,16 @@ input::placeholder {
 
             &.selected {
                 position: relative;
-                background-color: hsl(0, 0%, 53%);
-                color: hsl(0, 0%, 100%);
-                border: 1px solid hsl(0, 0%, 47%);
+                background-color: hsl(0deg 0% 53%);
+                color: hsl(0deg 0% 100%);
+                border: 1px solid hsl(0deg 0% 47%);
                 z-index: 2;
             }
 
             &.disabled {
                 pointer-events: none;
-                color: hsl(0, 0%, 80%);
-                border-color: hsl(0, 0%, 87%);
+                color: hsl(0deg 0% 80%);
+                border-color: hsl(0deg 0% 87%);
             }
         }
 
@@ -341,7 +341,7 @@ div.overlay {
     height: 100%;
     -webkit-overflow-scrolling: touch;
 
-    background-color: hsla(0, 0%, 13%, 0.8);
+    background-color: hsl(0deg 0% 13% / 80%);
     z-index: 105;
 
     pointer-events: none;
@@ -385,7 +385,7 @@ div.overlay {
 
 .clear_search_button {
     &:hover {
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
     }
 
     &:disabled {
@@ -403,7 +403,7 @@ div.overlay {
         text-align: center;
         padding-top: 8px;
         padding-left: 4px;
-        color: hsl(0, 0%, 80%);
+        color: hsl(0deg 0% 80%);
         text-shadow: none;
         outline: none !important;
         box-shadow: none;
@@ -420,16 +420,16 @@ div.overlay {
 .grey-box {
     margin: 0;
     padding: 5px 10px;
-    background-color: hsl(0, 0%, 98%);
-    border: 1px solid hsl(0, 0%, 87%);
+    background-color: hsl(0deg 0% 98%);
+    border: 1px solid hsl(0deg 0% 87%);
     border-radius: 4px;
 
     list-style-type: none;
 }
 
 .white-box {
-    background-color: hsl(0, 0%, 100%);
-    border: 1px solid hsl(0, 0%, 87%);
+    background-color: hsl(0deg 0% 100%);
+    border: 1px solid hsl(0deg 0% 87%);
 }
 
 .guest-avatar {
@@ -438,7 +438,7 @@ div.overlay {
 
     &::after {
         content: " ";
-        background-color: hsl(0, 0%, 47%);
+        background-color: hsl(0deg 0% 47%);
         position: absolute;
         bottom: -30%;
         right: -30%;
@@ -480,9 +480,9 @@ div.overlay {
 
 .stream-selection-header-colorblock {
     /* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */
-    box-shadow: inset 0 2px 1px -2px hsl(0, 0%, 20%),
-        inset 2px 0 1px -2px hsl(0, 0%, 20%),
-        inset 0 -2px 1px -2px hsl(0, 0%, 20%);
+    box-shadow: inset 0 2px 1px -2px hsl(0deg 0% 20%),
+        inset 2px 0 1px -2px hsl(0deg 0% 20%),
+        inset 0 -2px 1px -2px hsl(0deg 0% 20%);
     width: 10px;
     border-radius: 3px 0 0 3px;
     border-bottom: 0;
@@ -532,9 +532,9 @@ div.overlay {
 }
 
 .upgrade-tip:hover {
-    color: hsl(0, 0%, 20%);
-    border: 1px solid hsl(49, 20%, 60%);
-    box-shadow: 0 0 4px hsla(199, 79%, 56%, 0.2);
+    color: hsl(0deg 0% 20%);
+    border: 1px solid hsl(49deg 20% 60%);
+    box-shadow: 0 0 4px hsl(199deg 79% 56% / 20%);
 
     text-decoration: none;
 }
@@ -544,14 +544,14 @@ div.overlay {
 .tip {
     position: relative;
     display: block;
-    background-color: hsl(46, 63%, 95%);
-    border: 1px solid hsl(49, 20%, 84%);
+    background-color: hsl(46deg 63% 95%);
+    border: 1px solid hsl(49deg 20% 84%);
     border-radius: 4px;
     padding: 10px;
     margin: 10px 0;
     font-size: 1rem;
     line-height: 1.5;
-    color: hsl(0, 0%, 40%);
+    color: hsl(0deg 0% 40%);
 
     &::before {
         display: inline;
@@ -579,8 +579,8 @@ div.overlay {
     font-weight: normal;
     letter-spacing: 0.6px;
     border-radius: 4px;
-    background-color: hsl(105, 2%, 50%);
-    color: hsl(0, 0%, 100%);
+    background-color: hsl(105deg 2% 50%);
+    color: hsl(0deg 0% 100%);
 }
 
 .unread_mention_info:not(:empty) {
@@ -635,11 +635,11 @@ div.overlay {
 }
 
 .animated-purple-button {
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     transition: all 80ms linear;
     box-shadow: none;
     /* This color just passes WCAG AA */
-    background-color: hsl(240, 96%, 68%);
+    background-color: hsl(240deg 96% 68%);
     cursor: pointer;
     border: none;
     border-radius: 4px;
@@ -648,13 +648,13 @@ div.overlay {
 
     &:hover {
         /* This color passes WCAG AAA */
-        background-color: hsl(240, 41%, 50%);
-        box-shadow: 0 1px 4px hsl(0, 0%, 0%, 0.3);
+        background-color: hsl(240deg 41% 50%);
+        box-shadow: 0 1px 4px hsl(0deg 0% 0% / 30%);
     }
 
     &:focus {
-        background-color: hsl(240, 41%, 50%);
-        box-shadow: 0 1px 4px 0 hsl(235, 18%, 7%);
+        background-color: hsl(240deg 41% 50%);
+        box-shadow: 0 1px 4px 0 hsl(235deg 18% 7%);
         outline: none;
     }
 }
@@ -662,21 +662,21 @@ div.overlay {
 .color_animated_button {
     display: flex;
     justify-content: center;
-    background-color: hsl(0, 0%, 90%);
-    color: hsl(0, 0%, 0%);
+    background-color: hsl(0deg 0% 90%);
+    color: hsl(0deg 0% 0%);
     border-radius: 4px;
 
     & span {
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
     }
 
     &:hover {
         cursor: pointer;
-        background-color: hsl(240, 96%, 68%);
-        color: hsl(0, 0%, 100%);
+        background-color: hsl(240deg 96% 68%);
+        color: hsl(0deg 0% 100%);
 
         & span {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
             transition: all 0.2s ease;
         }
 
@@ -699,9 +699,9 @@ div.overlay {
 
     & thead th {
         color: inherit;
-        background-color: hsl(0, 0%, 100%);
-        border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
-        border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important;
+        background-color: hsl(0deg 0% 100%);
+        border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
+        border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
 
         &.active::after,
         &[data-sort]:hover::after {
@@ -725,7 +725,7 @@ div.overlay {
 
         &[data-sort]:hover {
             cursor: pointer;
-            background-color: hsla(0, 0%, 95%) !important;
+            background-color: hsl(0deg 0% 95%) !important;
             transition: background-color 100ms ease-in-out;
 
             &:not(.active)::after {
@@ -752,10 +752,10 @@ div.overlay {
 
     .save-discard-widget-button {
         border-radius: 5px;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         padding: 3px 14px 4px 11px;
         text-decoration: none;
-        color: hsl(0, 0%, 47%);
+        color: hsl(0deg 0% 47%);
         min-width: 80px;
         /* Limit the height of the button */
         line-height: 1.2;
@@ -763,32 +763,32 @@ div.overlay {
 
         &:hover,
         &:focus {
-            border: 1px solid hsl(0, 0%, 61%);
+            border: 1px solid hsl(0deg 0% 61%);
 
             .discard-button.save-discard-widget-button-text {
-                color: hsl(0, 0%, 18%);
+                color: hsl(0deg 0% 18%);
             }
         }
 
         &.primary {
-            background-color: hsl(156, 30%, 50%);
-            color: hsl(0, 0%, 100%);
-            border: 1px solid hsl(155, 30%, 50%);
+            background-color: hsl(156deg 30% 50%);
+            color: hsl(0deg 0% 100%);
+            border: 1px solid hsl(155deg 30% 50%);
 
             &:hover,
             &:focus {
-                background-color: hsl(166, 35%, 57%);
-                border: 1px solid hsl(166, 35%, 57%);
+                background-color: hsl(166deg 35% 57%);
+                border: 1px solid hsl(166deg 35% 57%);
             }
 
             .save-discard-widget-button-icon {
                 font-weight: lighter;
-                color: hsl(0, 0%, 100%);
+                color: hsl(0deg 0% 100%);
             }
 
             &.saving {
-                background-color: hsl(156, 14%, 40%);
-                border-color: hsl(156, 14%, 40%);
+                background-color: hsl(156deg 14% 40%);
+                border-color: hsl(156deg 14% 40%);
             }
         }
 
diff --git a/web/styles/components.css b/web/styles/components.css
index 00a6a82806..fb56819c5e 100644
--- a/web/styles/components.css
+++ b/web/styles/components.css
@@ -28,7 +28,7 @@
                 line-height: 0.8;
                 font-size: 1.3rem;
                 text-align: center;
-                border: 1px solid hsla(0, 0%, 0%, 0.6);
+                border: 1px solid hsl(0deg 0% 0% / 60%);
 
                 border-radius: 4px;
                 filter: brightness(0.8);
@@ -70,8 +70,8 @@ a.no-underline:hover {
 
 .simplebar-track {
     .simplebar-scrollbar::before {
-        background-color: hsl(0, 0%, 0%);
-        box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.33);
+        background-color: hsl(0deg 0% 0%);
+        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 33%);
     }
 
     &.simplebar-vertical {
@@ -94,7 +94,7 @@ a.no-underline:hover {
 }
 
 i.zulip-icon.zulip-icon-bot {
-    color: hsl(180, 5%, 74%);
+    color: hsl(180deg 5% 74%);
     vertical-align: top;
     padding: 0 2px;
 }
@@ -129,7 +129,7 @@ input::-ms-reveal {
 
 select.bootstrap-focus-style {
     &:focus {
-        outline: 1px dotted hsl(0, 0%, 20%);
+        outline: 1px dotted hsl(0deg 0% 20%);
         outline: 5px auto -webkit-focus-ring-color;
         outline-offset: -2px;
     }
diff --git a/web/styles/compose.css b/web/styles/compose.css
index aabac845ac..d7a39aac36 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -52,11 +52,11 @@
 
 /* Main geometry for this element is in zulip.css */
 #compose-content {
-    border-top: 1px solid hsla(0, 0%, 0%, 0.07);
+    border-top: 1px solid hsl(0deg 0% 0% / 7%);
     transition: background-color 200ms linear;
     padding: 4px 4px 8px;
-    border-left: 1px solid hsl(0, 0%, 93%);
-    border-right: 1px solid hsl(0, 0%, 93%);
+    border-left: 1px solid hsl(0deg 0% 93%);
+    border-right: 1px solid hsl(0deg 0% 93%);
     height: 100%;
     display: flex;
     flex-flow: column;
@@ -92,7 +92,7 @@
         &.message_header_private_message {
             border-radius: 3px 0 0 3px;
             border-bottom: 0;
-            background-color: hsl(0, 0%, 27%);
+            background-color: hsl(0deg 0% 27%);
         }
     }
 
@@ -157,7 +157,7 @@
 
     .message_header {
         background: none;
-        background-color: hsl(0, 0%, 92%);
+        background-color: hsl(0deg 0% 92%);
         border: none;
         border-radius: 0;
         box-shadow: none !important;
@@ -213,11 +213,11 @@
 #compose_limit_indicator {
     margin-right: 8px;
     font-size: 12px;
-    color: hsl(39, 100%, 50%);
+    color: hsl(39deg 100% 50%);
     align-self: center;
 
     &.over_limit {
-        color: hsl(0, 76%, 65%);
+        color: hsl(0deg 76% 65%);
         font-weight: bold;
     }
 }
@@ -229,7 +229,7 @@
     z-index: 4;
     width: 100%;
 
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 #compose-container {
@@ -321,100 +321,100 @@
     }
 
     &.success {
-        background-color: hsl(147, 43%, 92%);
-        border: 1px solid hsla(147, 57%, 25%, 0.4);
-        color: hsl(147, 57%, 25%);
+        background-color: hsl(147deg 43% 92%);
+        border: 1px solid hsl(147deg 57% 25% / 40%);
+        color: hsl(147deg 57% 25%);
 
         .compose_banner_close_button {
-            color: hsla(147, 57%, 25%, 0.5);
+            color: hsl(147deg 57% 25% / 50%);
 
             &:hover {
-                color: hsl(147, 57%, 25%);
+                color: hsl(147deg 57% 25%);
             }
 
             &:active {
-                color: hsla(147, 57%, 25%, 0.75);
+                color: hsl(147deg 57% 25% / 75%);
             }
         }
     }
 
     &.warning {
-        background-color: hsl(50, 75%, 92%);
-        border-color: hsla(38, 44%, 27%, 0.4);
-        color: hsl(38, 44%, 27%);
+        background-color: hsl(50deg 75% 92%);
+        border-color: hsl(38deg 44% 27% / 40%);
+        color: hsl(38deg 44% 27%);
 
         .compose_banner_close_button {
-            color: hsla(38, 44%, 27%, 0.5);
+            color: hsl(38deg 44% 27% / 50%);
 
             &:hover {
-                color: hsl(38, 44%, 27%);
+                color: hsl(38deg 44% 27%);
             }
 
             &:active {
-                color: hsla(38, 44%, 27%, 0.75);
+                color: hsl(38deg 44% 27% / 75%);
             }
         }
 
         .compose_banner_action_button {
-            background-color: hsla(38, 44%, 27%, 0.1);
+            background-color: hsl(38deg 44% 27% / 10%);
             color: inherit;
 
             &:hover {
-                background-color: hsla(38, 44%, 27%, 0.12);
+                background-color: hsl(38deg 44% 27% / 12%);
             }
 
             &:active {
-                background-color: hsla(38, 44%, 27%, 0.15);
+                background-color: hsl(38deg 44% 27% / 15%);
             }
         }
     }
 
     &.error {
-        background-color: hsl(4, 35%, 90%);
-        border-color: hsla(3, 57%, 33%, 0.4);
-        color: hsl(4, 58%, 33%);
+        background-color: hsl(4deg 35% 90%);
+        border-color: hsl(3deg 57% 33% / 40%);
+        color: hsl(4deg 58% 33%);
 
         .compose_banner_close_button {
-            color: hsla(4, 58%, 33%, 0.5);
+            color: hsl(4deg 58% 33% / 50%);
 
             &:hover {
-                color: hsl(4, 58%, 33%);
+                color: hsl(4deg 58% 33%);
             }
 
             &:active {
-                color: hsla(4, 58%, 33%, 0.75);
+                color: hsl(4deg 58% 33% / 75%);
             }
         }
 
         .compose_banner_action_button {
-            background-color: hsla(3, 57%, 33%, 0.1);
+            background-color: hsl(3deg 57% 33% / 10%);
             color: inherit;
 
             &:hover {
-                background-color: hsla(3, 57%, 33%, 0.12);
+                background-color: hsl(3deg 57% 33% / 12%);
             }
 
             &:active {
-                background-color: hsla(3, 57%, 33%, 0.15);
+                background-color: hsl(3deg 57% 33% / 15%);
             }
         }
     }
 
     &.info {
-        background-color: hsl(204, 58%, 92%);
-        border-color: hsla(204, 49%, 29%, 0.4);
+        background-color: hsl(204deg 58% 92%);
+        border-color: hsl(204deg 49% 29% / 40%);
         position: relative;
-        color: hsl(204, 49%, 29%);
+        color: hsl(204deg 49% 29%);
 
         .compose_banner_close_button {
-            color: hsla(204, 49%, 29%, 0.5);
+            color: hsl(204deg 49% 29% / 50%);
 
             &:hover {
-                color: hsl(204, 49%, 29%);
+                color: hsl(204deg 49% 29%);
             }
 
             &:active {
-                color: hsla(204, 49%, 29%, 0.75);
+                color: hsl(204deg 49% 29% / 75%);
             }
         }
     }
@@ -433,7 +433,7 @@
         /* The progress updates seem to come every second or so,
         so this is the smoothest it can probably get. */
         transition: width 1s ease-in-out;
-        background: hsl(204, 63%, 85%);
+        background: hsl(204deg 63% 85%);
         top: 0;
         bottom: 0;
     }
@@ -456,7 +456,7 @@
     }
 
     100% {
-        box-shadow: 0 0 0 1pt hsl(0, 76%, 65%);
+        box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
     }
 }
 
@@ -470,12 +470,12 @@ textarea.new_message_textarea {
     resize: vertical !important;
     margin-top: 5px;
     border-radius: 4px;
-    color: hsl(0, 0%, 33%);
-    background-color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 33%);
+    background-color: hsl(0deg 0% 100%);
 
     &.over_limit,
     &.over_limit:focus {
-        box-shadow: 0 0 0 1pt hsl(0, 76%, 65%);
+        box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
 
         &.flash {
             animation: message-limit-flash 0.5s ease-in-out infinite;
@@ -485,25 +485,25 @@ textarea.new_message_textarea {
     &:read-only,
     &:disabled {
         cursor: not-allowed;
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 
     &.invalid,
     &.invalid:focus {
-        border: 1px solid hsl(3, 57%, 33%);
-        box-shadow: 0 0 2px hsl(3, 57%, 33%);
+        border: 1px solid hsl(3deg 57% 33%);
+        box-shadow: 0 0 2px hsl(3deg 57% 33%);
     }
 }
 
 textarea.new_message_textarea,
 .compose_table .recipient_box {
-    border: 1px solid hsla(0, 0%, 0%, 0.2);
+    border: 1px solid hsl(0deg 0% 0% / 20%);
     box-shadow: none;
     transition: border 0.2s ease;
 
     &:focus {
         outline: 0;
-        border: 1px solid hsl(0, 0%, 67%);
+        border: 1px solid hsl(0deg 0% 67%);
         box-shadow: none;
     }
 }
@@ -572,7 +572,7 @@ input.recipient_box {
             margin: 4px 0 0;
 
             &:focus {
-                outline: 1px dotted hsl(0, 0%, 20%);
+                outline: 1px dotted hsl(0deg 0% 20%);
                 outline: 5px auto -webkit-focus-ring-color;
                 outline-offset: -2px;
             }
@@ -580,7 +580,7 @@ input.recipient_box {
 
         &:first-child {
             padding: 0 0 4px;
-            border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
+            border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
         }
     }
 
@@ -593,7 +593,7 @@ input.recipient_box {
     .enter_sends_minor kbd {
         opacity: 0.9;
         font-size: 11px;
-        color: hsl(0, 0%, 50%);
+        color: hsl(0deg 0% 50%);
     }
 }
 
@@ -694,7 +694,7 @@ input.recipient_box {
     }
 
     .divider {
-        color: hsl(0, 0%, 88%);
+        color: hsl(0deg 0% 88%);
         font-size: 20px;
         margin: 0 3px;
     }
@@ -764,9 +764,9 @@ a.compose_control_button.hide {
     min-height: 42px;
     overflow: auto;
 
-    border: 1px solid hsl(0, 0%, 67%);
+    border: 1px solid hsl(0deg 0% 67%);
     border-radius: 4px;
-    background-color: hsla(0, 0%, 0%, 0.02);
+    background-color: hsl(0deg 0% 0% / 2%);
     cursor: not-allowed;
 }
 
@@ -778,7 +778,7 @@ a.compose_control_button.hide {
     & ul {
         list-style: none;
         margin: 0;
-        background: hsl(0, 0%, 100%);
+        background: hsl(0deg 0% 100%);
     }
 
     .typeahead-header {
@@ -786,7 +786,7 @@ a.compose_control_button.hide {
         padding-left: 20px;
         padding-right: 20px;
         padding-top: 4px;
-        border-top: 1px solid hsla(0, 0%, 0%, 0.2);
+        border-top: 1px solid hsl(0deg 0% 0% / 20%);
         display: flex;
         align-items: center;
     }
@@ -796,7 +796,7 @@ a.compose_control_button.hide {
     }
 
     &.typeahead {
-        background: hsl(0, 0%, 100%);
+        background: hsl(0deg 0% 100%);
     }
 }
 
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 5daaa6691a..851db4e5e8 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -4,11 +4,11 @@
     color-scheme: dark;
 
     & body {
-        color: hsl(236, 33%, 90%);
+        color: hsl(236deg 33% 90%);
     }
 
     .placeholder {
-        color: hsl(0, 0%, 55%);
+        color: hsl(0deg 0% 55%);
         opacity: 1;
     }
 
@@ -18,10 +18,10 @@
     }
 
     & a:hover {
-        color: hsl(200, 79%, 66%);
+        color: hsl(200deg 79% 66%);
 
         & code {
-            color: hsl(200, 79%, 66%);
+            color: hsl(200deg 79% 66%);
         }
     }
 
@@ -31,61 +31,61 @@
 
     /************************* MODAL DARK THEME *******************/
     .dialog_cancel_button {
-        background-color: hsl(211, 29%, 14%);
-        color: hsl(0, 0%, 100%);
-        border: 1px solid hsla(0, 0%, 0%, 0.6);
+        background-color: hsl(211deg 29% 14%);
+        color: hsl(0deg 0% 100%);
+        border: 1px solid hsl(0deg 0% 0% / 60%);
     }
 
     .modal__btn:disabled {
         opacity: 1;
-        background-color: hsla(0, 0%, 83%, 0.5);
+        background-color: hsl(0deg 0% 83% / 50%);
     }
 
     .modal__content.simplebar-scrollable-y + .modal__footer {
-        border-top: 1px solid hsla(0, 0%, 100%, 0.2);
+        border-top: 1px solid hsl(0deg 0% 100% / 20%);
     }
 
     .modal-bg,
     .modal__container {
-        background-color: hsl(212, 28%, 18%);
+        background-color: hsl(212deg 28% 18%);
     }
 
     .modal__close {
         &::before {
-            color: hsl(236, 33%, 90%);
+            color: hsl(236deg 33% 90%);
         }
 
         &:hover {
-            background: hsla(0, 0%, 91%, 0.1);
+            background: hsl(0deg 0% 91% / 10%);
         }
     }
 
     .modal-footer {
-        box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
+        box-shadow: inset 0 1px 0 hsl(0deg 0% 0% / 20%);
     }
 
     .enter_sends,
     .enter_sends_choices {
-        color: hsl(236, 33%, 90%);
+        color: hsl(236deg 33% 90%);
 
         & kbd {
-            background-color: hsl(211, 29%, 14%);
-            border-color: hsl(211, 29%, 14%);
-            box-shadow: inset 0 -1px 0 hsl(210, 5%, 34%, 0.2);
+            background-color: hsl(211deg 29% 14%);
+            border-color: hsl(211deg 29% 14%);
+            box-shadow: inset 0 -1px 0 hsl(210deg 5% 34% / 20%);
             text-shadow: none;
-            color: hsl(236, 33%, 90%);
+            color: hsl(236deg 33% 90%);
         }
 
         .enter_sends_minor {
-            color: hsl(0, 0%, 80%);
+            color: hsl(0deg 0% 80%);
         }
     }
 
     & table.table-striped thead.table-sticky-headers th {
-        background-color: hsl(0, 0%, 0%);
+        background-color: hsl(0deg 0% 0%);
 
         &[data-sort]:hover {
-            background-color: hsl(211, 29%, 14%) !important;
+            background-color: hsl(211deg 29% 14%) !important;
         }
     }
 
@@ -95,17 +95,17 @@
      */
     .tippy-box[data-theme~="light-border"] {
         .tippy-content a {
-            color: hsl(236, 33%, 90%);
+            color: hsl(236deg 33% 90%);
 
             &.compose_control_button:hover {
-                color: hsl(200, 79%, 66%);
+                color: hsl(200deg 79% 66%);
             }
         }
 
         &[data-placement^="top"] {
             > .tippy-arrow {
                 &::before {
-                    border-top-color: hsl(235, 18%, 7%);
+                    border-top-color: hsl(235deg 18% 7%);
                 }
             }
         }
@@ -113,7 +113,7 @@
         &[data-placement^="bottom"] {
             > .tippy-arrow {
                 &::before {
-                    border-bottom-color: hsl(235, 18%, 7%);
+                    border-bottom-color: hsl(235deg 18% 7%);
                 }
             }
         }
@@ -121,7 +121,7 @@
         &[data-placement^="left"] {
             > .tippy-arrow {
                 &::before {
-                    border-left-color: hsl(235, 18%, 7%);
+                    border-left-color: hsl(235deg 18% 7%);
                 }
             }
         }
@@ -129,29 +129,29 @@
         &[data-placement^="right"] {
             > .tippy-arrow {
                 &::before {
-                    border-right-color: hsl(235, 18%, 7%);
+                    border-right-color: hsl(235deg 18% 7%);
                 }
             }
         }
     }
 
     .tippy-box:not([data-theme]) {
-        background: hsla(0, 0%, 0%, 1);
+        background: hsl(0deg 0% 0%);
 
         &[data-placement^="top"] > .tippy-arrow::before {
-            border-top-color: hsla(0, 0%, 0%, 1);
+            border-top-color: hsl(0deg 0% 0%);
         }
 
         &[data-placement^="bottom"] > .tippy-arrow::before {
-            border-bottom-color: hsla(0, 0%, 0%, 1);
+            border-bottom-color: hsl(0deg 0% 0%);
         }
 
         &[data-placement^="left"] > .tippy-arrow::before {
-            border-left-color: hsla(0, 0%, 0%, 1);
+            border-left-color: hsl(0deg 0% 0%);
         }
 
         &[data-placement^="right"] > .tippy-arrow::before {
-            border-right-color: hsla(0, 0%, 0%, 1);
+            border-right-color: hsl(0deg 0% 0%);
         }
     }
 
@@ -169,117 +169,117 @@
     .private_messages_container,
     .message_header,
     .header {
-        background-color: hsl(212, 28%, 18%);
+        background-color: hsl(212deg 28% 18%);
     }
 
     #scroll-to-bottom-button-container {
         background: transparent;
 
         & span {
-            color: hsl(0, 0%, 27%);
+            color: hsl(0deg 0% 27%);
         }
     }
 
     .compose_banner {
         .above_compose_banner_action_link {
-            color: hsl(200, 100%, 50%);
+            color: hsl(200deg 100% 50%);
         }
 
         &.success {
-            background-color: hsl(147, 100%, 8%);
-            border-color: hsla(149, 48%, 52%, 0.4);
-            color: hsl(147, 51%, 80%);
+            background-color: hsl(147deg 100% 8%);
+            border-color: hsl(149deg 48% 52% / 40%);
+            color: hsl(147deg 51% 80%);
 
             .compose_banner_close_button {
-                color: hsl(147, 51%, 55%, 0.5);
+                color: hsl(147deg 51% 55% / 50%);
 
                 &:hover {
-                    color: hsl(147, 51%, 55%);
+                    color: hsl(147deg 51% 55%);
                 }
 
                 &:active {
-                    color: hsl(147, 51%, 55%, 0.75);
+                    color: hsl(147deg 51% 55% / 75%);
                 }
             }
         }
 
         &.warning {
-            background-color: hsl(53, 100%, 11%);
-            border-color: hsla(38, 44%, 60%, 0.4);
-            color: hsl(50, 45%, 80%);
+            background-color: hsl(53deg 100% 11%);
+            border-color: hsl(38deg 44% 60% / 40%);
+            color: hsl(50deg 45% 80%);
 
             .compose_banner_close_button {
-                color: hsl(50, 45%, 61%, 0.5);
+                color: hsl(50deg 45% 61% / 50%);
 
                 &:hover {
-                    color: hsl(50, 45%, 61%);
+                    color: hsl(50deg 45% 61%);
                 }
 
                 &:active {
-                    color: hsl(50, 45%, 61%, 0.75);
+                    color: hsl(50deg 45% 61% / 75%);
                 }
             }
 
             .compose_banner_action_button {
-                background-color: hsla(50, 45%, 61%, 0.1);
-                color: hsl(50, 45%, 61%);
+                background-color: hsl(50deg 45% 61% / 10%);
+                color: hsl(50deg 45% 61%);
 
                 &:hover {
-                    background-color: hsla(50, 45%, 61%, 0.15);
+                    background-color: hsl(50deg 45% 61% / 15%);
                 }
 
                 &:active {
-                    background-color: hsla(50, 45%, 61%, 0.2);
+                    background-color: hsl(50deg 45% 61% / 20%);
                 }
             }
         }
 
         &.error {
-            background-color: hsl(0, 60%, 19%);
-            border-color: hsla(3, 73%, 74%, 0.4);
-            color: hsl(3, 73%, 80%);
+            background-color: hsl(0deg 60% 19%);
+            border-color: hsl(3deg 73% 74% / 40%);
+            color: hsl(3deg 73% 80%);
 
             .compose_banner_close_button {
-                color: hsla(3, 73%, 74%, 0.5);
+                color: hsl(3deg 73% 74% / 50%);
 
                 &:hover {
-                    color: hsl(3, 73%, 74%);
+                    color: hsl(3deg 73% 74%);
                 }
 
                 &:active {
-                    color: hsl(3, 73%, 74%, 0.75);
+                    color: hsl(3deg 73% 74% / 75%);
                 }
             }
 
             .compose_banner_action_button {
-                background-color: hsla(3, 73%, 74%, 0.1);
-                color: hsl(3, 73%, 74%);
+                background-color: hsl(3deg 73% 74% / 10%);
+                color: hsl(3deg 73% 74%);
 
                 &:hover {
-                    background: hsla(3, 73%, 74%, 0.15);
+                    background: hsl(3deg 73% 74% / 15%);
                 }
 
                 &:active {
-                    background: hsla(3, 73%, 74%, 0.2);
+                    background: hsl(3deg 73% 74% / 20%);
                 }
             }
         }
 
         &.info {
-            background-color: hsl(204, 100%, 12%);
-            border-color: hsla(205, 58%, 69%, 0.4);
+            background-color: hsl(204deg 100% 12%);
+            border-color: hsl(205deg 58% 69% / 40%);
             position: relative;
-            color: hsl(205, 58%, 80%);
+            color: hsl(205deg 58% 80%);
 
             .compose_banner_close_button {
-                color: hsla(205, 58%, 69%, 0.5);
+                color: hsl(205deg 58% 69% / 50%);
 
                 &:hover {
-                    color: hsl(205, 58%, 69%);
+                    color: hsl(205deg 58% 69%);
                 }
 
                 &:active {
-                    color: hsla(205, 58%, 69%, 0.75);
+                    color: hsl(205deg 58% 69% / 75%);
                 }
             }
         }
@@ -287,50 +287,54 @@
 
     .upload_banner {
         .moving_bar {
-            background: hsl(204, 63%, 18%);
+            background: hsl(204deg 63% 18%);
         }
     }
 
     & textarea.new_message_textarea {
         &.invalid,
         &.invalid:focus {
-            border-color: hsl(3, 73%, 74%);
-            box-shadow: 0 0 2px hsl(3, 73%, 74%);
+            border-color: hsl(3deg 73% 74%);
+            box-shadow: 0 0 2px hsl(3deg 73% 74%);
         }
     }
 
     .message_embed .data-container::after {
-        background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 100%);
+        background: linear-gradient(
+            0deg,
+            hsl(212deg 28% 18%),
+            transparent 100%
+        );
     }
 
     .column-left .left-sidebar,
     .stream_name_search_section,
     .group_name_search_section,
     .column-right .right-sidebar {
-        border-color: hsla(0, 0%, 0%, 0.2);
+        border-color: hsl(0deg 0% 0% / 20%);
     }
 
     .dark .message_label_clickable.stream_label,
     .dark .stream_label,
     .stream_label {
-        color: hsl(212, 28%, 18%);
+        color: hsl(212deg 28% 18%);
     }
 
     .new-style label.checkbox input[type="checkbox"] ~ span {
-        border-color: hsla(0, 0%, 100%, 0.4);
+        border-color: hsl(0deg 0% 100% / 40%);
     }
 
     .streams_popover .sp-container {
         background-color: transparent;
 
         & button {
-            background-color: hsl(208, 35%, 11%);
-            border: 1px solid hsl(210, 36%, 4%);
-            color: hsl(236, 31%, 90%);
+            background-color: hsl(208deg 35% 11%);
+            border: 1px solid hsl(210deg 36% 4%);
+            color: hsl(236deg 31% 90%);
         }
 
         .sp-picker-container {
-            border-left: solid 1px hsl(210, 36%, 4%);
+            border-left: solid 1px hsl(210deg 36% 4%);
         }
     }
 
@@ -352,18 +356,18 @@
        background colors for these, but this alert feature can't use a
        transparent background without creating other problems */
     .alert-msg {
-        background-color: hsl(212, 28%, 18%);
+        background-color: hsl(212deg 28% 18%);
     }
 
     .private-message .alert-msg {
-        background-color: hsl(208, 17%, 29%);
+        background-color: hsl(208deg 17% 29%);
     }
 
     .active_private_messages_section {
         #private_messages_section,
         #private_messages_list,
         #hide_more_private_messages {
-            background-color: hsla(199, 33%, 46%, 0.2);
+            background-color: hsl(199deg 33% 46% / 20%);
         }
     }
 
@@ -371,11 +375,11 @@
        on a dark background, and don't change the dark labels dark either. */
     .message_header:not(.dark_background)
         a.stream_label:not(.dark_background):hover {
-        color: hsl(212, 28%, 18%);
+        color: hsl(212deg 28% 18%);
     }
 
     .message_header {
-        box-shadow: 0 -1px 0 0 hsl(212, 28%, 18%);
+        box-shadow: 0 -1px 0 0 hsl(212deg 28% 18%);
     }
 
     /* these are converting grey things to "new grey" */
@@ -393,7 +397,7 @@
 
     .rendered_markdown button,
     .new-style .button {
-        background-color: hsla(0, 0%, 0%, 0.2);
+        background-color: hsl(0deg 0% 0% / 20%);
 
         &:not(
                 .sea-green,
@@ -404,27 +408,27 @@
                 button.poll-option,
                 button.add-task
             ) {
-            border-color: hsla(0, 0%, 0%, 0.6);
+            border-color: hsl(0deg 0% 0% / 60%);
             color: inherit;
         }
 
         &.btn-link {
-            border-color: hsla(0, 0%, 0%, 0.6);
-            color: hsl(200, 79%, 66%);
+            border-color: hsl(0deg 0% 0% / 60%);
+            color: hsl(200deg 79% 66%);
         }
 
         &:hover,
         &:focus,
         &:active {
-            background-color: hsla(0, 0%, 0%, 0.15);
+            background-color: hsl(0deg 0% 0% / 15%);
         }
     }
 
     .rendered_markdown .message_inline_image {
-        background: hsla(0, 0%, 100%, 0.03);
+        background: hsl(0deg 0% 100% / 3%);
 
         &:hover {
-            background: hsla(0, 0%, 100%, 0.15);
+            background: hsl(0deg 0% 100% / 15%);
         }
     }
 
@@ -439,21 +443,21 @@
     select,
     .pill-container,
     .user_status_content_wrapper {
-        background-color: hsla(0, 0%, 0%, 0.2);
-        border-color: hsla(0, 0%, 0%, 0.6);
+        background-color: hsl(0deg 0% 0% / 20%);
+        border-color: hsl(0deg 0% 0% / 60%);
         color: inherit;
     }
 
     & select option {
-        background-color: hsl(212, 28%, 18%);
-        color: hsl(236, 33%, 90%);
+        background-color: hsl(212deg 28% 18%);
+        color: hsl(236deg 33% 90%);
     }
 
     .unread_count,
     /* The actions_popover unread_count object has its own variable CSS,
        and thus needs to be repeated here with all three classes for precedence) */
     .actions_popover .mark_as_unread .unread_count {
-        background-color: hsla(105, 2%, 50%, 0.5);
+        background-color: hsl(105deg 2% 50% / 50%);
     }
 
     .pill-container {
@@ -462,22 +466,22 @@
     }
 
     .deactivated-pill {
-        background-color: hsl(0, 86%, 14%) !important;
+        background-color: hsl(0deg 86% 14%) !important;
     }
 
     #search_arrows .pill,
     .pm_recipient .pill-container .pill {
         color: inherit;
-        border: 1px solid hsla(0, 0%, 0%, 0.5);
-        background-color: hsla(0, 0%, 0%, 0.25);
+        border: 1px solid hsl(0deg 0% 0% / 50%);
+        background-color: hsl(0deg 0% 0% / 25%);
         font-weight: 600;
     }
 
     #search_arrows .pill:focus,
     .pm_recipient .pill-container .pill:focus {
-        color: hsl(0, 0%, 100%);
-        border: 1px solid hsla(176, 78%, 28%, 0.6);
-        background-color: hsla(176, 49%, 42%, 0.4);
+        color: hsl(0deg 0% 100%);
+        border: 1px solid hsl(176deg 78% 28% / 60%);
+        background-color: hsl(176deg 49% 42% / 40%);
     }
 
     .new-style .button.no-style {
@@ -486,16 +490,16 @@
 
     .create_user_group_plus_button,
     .create_stream_plus_button {
-        color: hsl(0, 0%, 100%);
-        background-color: hsla(0, 0%, 0%, 0.2);
-        border-color: hsla(0, 0%, 0%, 0.6);
+        color: hsl(0deg 0% 100%);
+        background-color: hsl(0deg 0% 0% / 20%);
+        border-color: hsl(0deg 0% 0% / 60%);
     }
 
     .emoji-info-popover
         .emoji-popover
         .emoji-popover-category-tabs
         .emoji-popover-tab-item.active {
-        background-color: hsla(0, 0%, 0%, 0.5);
+        background-color: hsl(0deg 0% 0% / 50%);
     }
 
     .new-style .tab-switcher .ind-tab.selected,
@@ -503,27 +507,27 @@
     .table-striped thead th,
     .emoji-popover .reaction.reacted,
     .message_reactions .message_reaction.reacted {
-        background-color: hsla(0, 0%, 0%, 0.5);
-        border-color: hsla(0, 0%, 0%, 0.9);
+        background-color: hsl(0deg 0% 0% / 50%);
+        border-color: hsl(0deg 0% 0% / 90%);
     }
 
     .ind-tab.disabled {
-        color: hsla(0, 0%, 42%, 0.9) !important;
+        color: hsl(0deg 0% 42% / 90%) !important;
     }
 
     .message_reactions:hover .message_reaction + .reaction_button,
     .message_reactions .message_reaction {
         background-color: transparent;
-        border-color: hsla(0, 0%, 0%, 0.8);
+        border-color: hsl(0deg 0% 0% / 80%);
         color: inherit;
 
         &:hover {
-            border-color: hsl(236, 33%, 90%);
+            border-color: hsl(236deg 33% 90%);
         }
     }
 
     .emoji-popover .reaction:focus {
-        box-shadow: 0 0 1px hsl(0, 0%, 98%);
+        box-shadow: 0 0 1px hsl(0deg 0% 98%);
     }
 
     & input[type="text"]:focus,
@@ -532,17 +536,17 @@
     textarea:focus,
     textarea.new_message_textarea:focus,
     .compose_table .recipient_box:focus {
-        border-color: hsla(0, 0%, 0%, 0.9);
+        border-color: hsl(0deg 0% 0% / 90%);
     }
 
     .message-header-contents,
     .message_header_private_message .message-header-contents {
-        background-color: hsla(0, 0%, 0%, 0.2);
+        background-color: hsl(0deg 0% 0% / 20%);
         border-color: transparent;
     }
 
     .compose_control_buttons_container .divider {
-        color: hsla(236, 33%, 90%, 0.5);
+        color: hsl(236deg 33% 90% / 50%);
     }
 
     /* Not that .message_row (below) needs to be more contrast on dark theme */
@@ -551,19 +555,19 @@
     .message_row,
     .draft-row .draft-info-box,
     .preview_message_area {
-        border-color: hsla(0, 0%, 0%, 0.2);
+        border-color: hsl(0deg 0% 0% / 20%);
     }
 
     .recipient_row {
         .message_row.unread {
             .date_row {
-                background-color: hsl(212, 28%, 18%);
+                background-color: hsl(212deg 28% 18%);
             }
         }
 
         .private-message.unread {
             .date_row {
-                background-color: hsl(208, 17%, 29%);
+                background-color: hsl(208deg 17% 29%);
             }
         }
 
@@ -575,30 +579,30 @@
 
         .private-message.unread ~ .private-message.unread {
             .date_row {
-                background-color: hsl(208, 17%, 29%);
+                background-color: hsl(208deg 17% 29%);
             }
         }
     }
 
     .spectator_narrow_login_button,
     .top-navbar-border {
-        border-color: hsla(0, 0%, 0%, 0.6);
+        border-color: hsl(0deg 0% 0% / 60%);
     }
 
     #message_view_header .sub_count {
         &::before,
         &::after {
-            color: hsla(0, 0%, 100%, 0.5);
+            color: hsl(0deg 0% 100% / 50%);
         }
     }
 
     #message_view_header .stream {
-        color: hsl(236, 33%, 90%);
+        color: hsl(236deg 33% 90%);
     }
 
     #message_view_header .sub_count,
     #message_view_header .narrow_description {
-        color: hsla(0, 0%, 90%, 1);
+        color: hsl(0deg 0% 90%);
     }
 
     & div.overlay,
@@ -613,14 +617,14 @@
     .emoji-info-popover
         .emoji-popover
         .emoji-popover-emoji:not(.reacted):focus {
-        background-color: hsla(212, 28%, 8%, 0.75);
+        background-color: hsl(212deg 28% 8% / 75%);
     }
 
     & div.overlay .flex.overlay-content > div,
     .dropdown-menu.typeahead,
     #settings_page,
     .informational-overlays .overlay-content {
-        box-shadow: 0 0 30px hsl(212, 32%, 7%);
+        box-shadow: 0 0 30px hsl(212deg 32% 7%);
     }
 
     .tippy-box[data-theme~="light-border"],
@@ -629,7 +633,7 @@
     .popover,
     .popover-title,
     .popover-content {
-        background-color: hsl(212, 32%, 14%);
+        background-color: hsl(212deg 32% 14%);
     }
 
     .dropdown-menu a {
@@ -639,7 +643,7 @@
     .dropdown .dropdown-menu li.divider,
     .popover hr,
     hr {
-        color: hsl(212, 28%, 18%);
+        color: hsl(212deg 28% 18%);
         opacity: 0.2;
     }
 
@@ -660,25 +664,25 @@
         }
 
         .dropdown-menu a:hover {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
         }
     }
 
     .nav .dropdown-menu::after,
     .popover.bottom .arrow {
-        border-bottom-color: hsl(235, 18%, 7%);
+        border-bottom-color: hsl(235deg 18% 7%);
     }
 
     .popover.left .arrow {
-        border-left-color: hsl(235, 18%, 7%);
+        border-left-color: hsl(235deg 18% 7%);
     }
 
     .popover.top .arrow {
-        border-top-color: hsl(235, 18%, 7%);
+        border-top-color: hsl(235deg 18% 7%);
     }
 
     .popover.right .arrow {
-        border-right-color: hsl(235, 18%, 7%);
+        border-right-color: hsl(235deg 18% 7%);
     }
 
     .narrow_to_compose_recipients,
@@ -697,24 +701,24 @@
     li.top_left_drafts:hover .drafts-sidebar-menu-icon,
     #stream_filters li:hover .stream-sidebar-menu-icon,
     li.topic-list-item:hover .topic-sidebar-menu-icon {
-        color: hsl(236, 33%, 80%);
+        color: hsl(236deg 33% 80%);
     }
 
     #message_edit_tooltip:hover,
     .clear_search_button:hover {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
     }
 
     .spectator_login_buttons a {
-        color: hsl(236, 33%, 90%);
+        color: hsl(236deg 33% 90%);
 
         &:hover {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
         }
     }
 
     .spectator_narrow_login_button .login_button i {
-        color: hsl(236, 33%, 90%);
+        color: hsl(236deg 33% 90%);
     }
 
     #user_presences li .user-list-sidebar-menu-icon:hover,
@@ -723,13 +727,13 @@
     .drafts-sidebar-menu-icon:hover,
     .stream-sidebar-menu-icon:hover,
     .topic-sidebar-menu-icon:hover {
-        color: hsl(0, 0%, 100%) !important;
+        color: hsl(0deg 0% 100%) !important;
     }
 
     #streamlist-toggle,
     #userlist-toggle {
         color: inherit;
-        border-color: hsla(0, 0%, 0%, 0.6);
+        border-color: hsl(0deg 0% 0% / 60%);
     }
 
     #streamlist-toggle-button {
@@ -738,7 +742,7 @@
     }
 
     #userlist-toggle-button {
-        color: hsl(221, 9%, 54%);
+        color: hsl(221deg 9% 54%);
 
         &:hover {
             color: inherit;
@@ -747,21 +751,21 @@
 
     & li.active-filter,
     li.active-sub-filter {
-        background-color: hsla(199, 33%, 46%, 0.2);
+        background-color: hsl(199deg 33% 46% / 20%);
     }
 
     :not(.active-sub-filter) {
         &.top_left_row:hover,
         &.bottom_left_row:hover,
         &#stream_filters li.highlighted_stream {
-            background-color: hsla(136, 25%, 73%, 0.2);
+            background-color: hsl(136deg 25% 73% / 20%);
         }
     }
 
     #stream_filters .narrow-filter.active-filter {
         .topic-list .filter-topics,
         > .bottom_left_row {
-            background-color: hsl(208, 31%, 24%);
+            background-color: hsl(208deg 31% 24%);
         }
     }
 
@@ -769,20 +773,20 @@
         #topics_header,
         .narrow-filter > .bottom_left_row,
         #stream_filters .topic-list .filter-topics {
-            background-color: hsl(212, 28%, 18%);
+            background-color: hsl(212deg 28% 18%);
         }
     }
 
     #topics_header {
         .show-all-streams {
-            color: hsl(236, 33%, 90%);
+            color: hsl(236deg 33% 90%);
             opacity: 0.75;
         }
     }
 
     #user_presences li:hover,
     #user_presences li.highlighted_user {
-        background-color: hsla(136, 25%, 73%, 0.2);
+        background-color: hsl(136deg 25% 73% / 20%);
     }
 
     .group-row.active,
@@ -790,21 +794,21 @@
     .emoji-info-popover .emoji-showcase-container,
     .emoji-info-popover .emoji-popover .emoji-popover-category-tabs,
     .emoji-info-popover .emoji-popover .emoji-popover-top {
-        background-color: hsla(0, 0%, 0%, 0.2);
+        background-color: hsl(0deg 0% 0% / 20%);
     }
 
     .recent_topics_participant_overflow {
-        color: hsl(0, 0%, 100%) !important;
-        background-color: hsl(211, 18%, 25%) !important;
+        color: hsl(0deg 0% 100%) !important;
+        background-color: hsl(211deg 18% 25%) !important;
     }
 
     .recent_topics_container #recent_topics_table .btn-recent-filters {
-        background-color: hsl(211, 29%, 14%);
-        border-color: hsl(0, 0%, 0%);
-        color: hsl(0, 0%, 100%);
+        background-color: hsl(211deg 29% 14%);
+        border-color: hsl(0deg 0% 0%);
+        color: hsl(0deg 0% 100%);
 
         &:focus {
-            background-color: hsla(0, 0%, 0%, 0.5) !important;
+            background-color: hsl(0deg 0% 0% / 50%) !important;
             outline: 0;
         }
 
@@ -813,48 +817,48 @@
             opacity: 0.5;
 
             &:hover {
-                background-color: hsla(0, 0%, 0%, 0.5);
-                border-color: hsl(0, 0%, 0%);
+                background-color: hsl(0deg 0% 0% / 50%);
+                border-color: hsl(0deg 0% 0%);
             }
         }
     }
 
     .recent_topics_container {
-        background-color: hsl(212, 28%, 18%) !important;
+        background-color: hsl(212deg 28% 18%) !important;
     }
 
     #recent_topics_table tr {
-        background-color: hsl(212, 28%, 18%);
+        background-color: hsl(212deg 28% 18%);
 
         &:hover {
-            background-color: hsl(208, 26%, 11%, 0.6);
+            background-color: hsl(208deg 26% 11% / 60%);
         }
     }
 
     #recent_topics_table .unread_topic {
-        background-color: hsla(212, 30%, 22%, 0.6);
+        background-color: hsl(212deg 30% 22% / 60%);
     }
 
     .btn-recent-selected,
     #recent_topics_table thead th {
-        background-color: hsl(0, 0%, 0%) !important;
+        background-color: hsl(0deg 0% 0%) !important;
 
         &[data-sort]:hover {
-            background-color: hsl(211, 29%, 14%) !important;
+            background-color: hsl(211deg 29% 14%) !important;
         }
     }
 
     #recent_topics_table td a {
-        color: hsl(206, 89%, 74%);
+        color: hsl(206deg 89% 74%);
         text-decoration: none;
 
         &:hover {
-            color: hsl(208, 64%, 52%);
+            color: hsl(208deg 64% 52%);
         }
     }
 
     #recent_topics_table {
-        border-color: hsla(0, 0%, 0%, 0.6);
+        border-color: hsl(0deg 0% 0% / 60%);
 
         .fa-envelope,
         .fa-group {
@@ -878,12 +882,12 @@
     .table-striped tbody tr:nth-child(odd) th,
     .modal-footer,
     .modal-bg .modal-header {
-        border-color: hsla(0, 0%, 0%, 0.2);
-        background-color: hsla(0, 0%, 0%, 0.2);
+        border-color: hsl(0deg 0% 0% / 20%);
+        background-color: hsl(0deg 0% 0% / 20%);
     }
 
     .table-striped tbody tr:nth-child(odd) td {
-        background-color: hsl(212, 28%, 18%);
+        background-color: hsl(212deg 28% 18%);
     }
 
     .user-groups-container .right .display-type,
@@ -904,7 +908,7 @@
     table,
     table th,
     table td {
-        border-color: hsla(0, 0%, 0%, 0.2);
+        border-color: hsl(0deg 0% 0% / 20%);
     }
 
     .draft-row .draft-info-box,
@@ -924,7 +928,7 @@
 
     .group_mention .messagebox,
     .direct_mention .messagebox {
-        background-color: hsla(8, 78%, 43%, 0.15);
+        background-color: hsl(8deg 78% 43% / 15%);
     }
 
     .rendered_markdown {
@@ -932,112 +936,112 @@
         .user-group-mention {
             background: linear-gradient(
                 to bottom,
-                hsla(0, 0%, 0%, 0.2) 0%,
-                hsla(0, 0%, 0%, 0.1) 100%
+                hsl(0deg 0% 0% / 20%) 0%,
+                hsl(0deg 0% 0% / 10%) 100%
             );
-            box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
+            box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
         }
 
         .user-mention-me :not(.silent) {
-            background-color: hsla(355, 37%, 31%, 1);
-            box-shadow: 0 0 0 1px hsla(330, 40%, 20%, 1);
+            background-color: hsl(355deg 37% 31%);
+            box-shadow: 0 0 0 1px hsl(330deg 40% 20%);
         }
 
         .codehilite code,
         .codehilite pre {
-            color: hsl(212, 100%, 82%);
-            background-color: hsl(212, 25%, 15%);
+            color: hsl(212deg 100% 82%);
+            background-color: hsl(212deg 25% 15%);
         }
 
         .codehilite .hll {
-            background-color: hsl(0, 0%, 13%);
+            background-color: hsl(0deg 0% 13%);
         }
 
         .codehilite .err {
-            color: hsl(1, 67%, 66%);
-            background-color: hsl(0, 7%, 22%);
+            color: hsl(1deg 67% 66%);
+            background-color: hsl(0deg 7% 22%);
         }
 
         .codehilite .k {
-            color: hsl(31, 85%, 59%);
+            color: hsl(31deg 85% 59%);
         }
 
         .codehilite .p {
-            color: hsl(179, 27%, 35%);
+            color: hsl(179deg 27% 35%);
         }
 
         .codehilite .cs {
-            color: hsl(0, 100%, 40%);
+            color: hsl(0deg 100% 40%);
             font-weight: 700;
         }
 
         .codehilite .gd {
-            color: hsl(0, 100%, 40%);
+            color: hsl(0deg 100% 40%);
         }
 
         .codehilite .ge {
-            color: hsl(0, 0%, 80%);
+            color: hsl(0deg 0% 80%);
             font-style: italic;
         }
 
         .codehilite .gr {
-            color: hsl(0, 100%, 50%);
+            color: hsl(0deg 100% 50%);
         }
 
         .codehilite .go {
-            color: hsl(0, 0%, 50%);
+            color: hsl(0deg 0% 50%);
         }
 
         .codehilite .gs {
-            color: hsl(0, 0%, 80%);
+            color: hsl(0deg 0% 80%);
             font-weight: 700;
         }
 
         .codehilite .gu {
-            color: hsl(300, 100%, 25%);
+            color: hsl(300deg 100% 25%);
             font-weight: 700;
         }
 
         .codehilite .gt {
-            color: hsl(222, 100%, 41%);
+            color: hsl(222deg 100% 41%);
         }
 
         .codehilite .kc {
-            color: hsl(0, 45%, 75%);
+            color: hsl(0deg 45% 75%);
         }
 
         .codehilite .kd {
-            color: hsl(60, 100%, 76%);
+            color: hsl(60deg 100% 76%);
         }
 
         .codehilite .kn {
-            color: hsl(24, 56%, 72%);
+            color: hsl(24deg 56% 72%);
             font-weight: 700;
         }
 
         .codehilite .kp {
-            color: hsl(62, 36%, 71%);
+            color: hsl(62deg 36% 71%);
         }
 
         .codehilite .kr {
-            color: hsl(359, 58%, 56%);
+            color: hsl(359deg 58% 56%);
         }
 
         .codehilite .ni {
-            color: hsl(359, 35%, 63%);
+            color: hsl(359deg 35% 63%);
         }
 
         .codehilite .ne {
-            color: hsl(53, 23%, 69%);
+            color: hsl(53deg 23% 69%);
             font-weight: 700;
         }
 
         .codehilite .nn {
-            color: hsl(204, 54%, 72%);
+            color: hsl(204deg 54% 72%);
         }
 
         .codehilite .vi {
-            color: hsl(60, 100%, 89%);
+            color: hsl(60deg 100% 89%);
         }
 
         .codehilite .c,
@@ -1045,7 +1049,7 @@
         .codehilite .cm,
         .codehilite .cp,
         .codehilite .c1 {
-            color: hsl(209, 15%, 55%);
+            color: hsl(209deg 15% 55%);
         }
 
         .codehilite .l,
@@ -1056,29 +1060,29 @@
         .codehilite .nx,
         .codehilite .py,
         .codehilite .w {
-            color: hsl(0, 0%, 80%);
+            color: hsl(0deg 0% 80%);
         }
 
         .codehilite .n,
         .codehilite .nv,
         .codehilite .vg {
-            color: hsl(60, 19%, 83%);
+            color: hsl(60deg 19% 83%);
         }
 
         .codehilite .o,
         .codehilite .ow {
-            color: hsl(58, 52%, 88%);
+            color: hsl(58deg 52% 88%);
         }
 
         .codehilite .gh,
         .codehilite .gp {
-            color: hsl(60, 19%, 83%);
+            color: hsl(60deg 19% 83%);
             font-weight: 700;
         }
 
         .codehilite .gi,
         .codehilite .kt {
-            color: hsl(120, 100%, 40%);
+            color: hsl(120deg 100% 40%);
         }
 
         .codehilite .ld,
@@ -1094,7 +1098,7 @@
         .codehilite .sr,
         .codehilite .s1,
         .codehilite .ss {
-            color: hsl(0, 36%, 69%);
+            color: hsl(0deg 36% 69%);
         }
 
         .codehilite .m,
@@ -1103,12 +1107,12 @@
         .codehilite .mi,
         .codehilite .mo,
         .codehilite .il {
-            color: hsl(183, 45%, 69%);
+            color: hsl(183deg 45% 69%);
         }
 
         .codehilite .na,
         .codehilite .nt {
-            color: hsl(127, 25%, 68%);
+            color: hsl(127deg 25% 68%);
         }
 
         .codehilite .nb,
@@ -1116,49 +1120,49 @@
         .codehilite .nf,
         .codehilite .bp,
         .codehilite .vc {
-            color: hsl(60, 75%, 75%);
+            color: hsl(60deg 75% 75%);
         }
     }
 
     #message-edit-history {
         .message_edit_history_content {
             .highlight_text_inserted {
-                color: hsl(122, 100%, 81%);
-                background-color: hsla(120, 64%, 95%, 0.3);
+                color: hsl(122deg 100% 81%);
+                background-color: hsl(120deg 64% 95% / 30%);
             }
 
             .highlight_text_deleted {
-                color: hsl(0, 90%, 67%);
-                background-color: hsla(7, 54%, 62%, 0.38);
+                color: hsl(0deg 90% 67%);
+                background-color: hsl(7deg 54% 62% / 38%);
             }
         }
     }
 
     & time {
-        background: hsla(0, 0%, 0%, 0.2);
-        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
+        background: hsl(0deg 0% 0% / 20%);
+        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
     }
 
     .upgrade-tip,
     .upgrade-or-sponsorship-tip,
     .tip {
         color: inherit;
-        background-color: hsla(46, 28%, 38%, 0.27);
-        border: 1px solid hsl(49, 38%, 46%);
+        background-color: hsl(46deg 28% 38% / 27%);
+        border: 1px solid hsl(49deg 38% 46%);
     }
 
     #request-progress-status-banner {
-        background-color: hsl(212, 32%, 14%);
+        background-color: hsl(212deg 32% 14%);
 
         .alert-content {
-            color: hsl(236, 33%, 90%);
+            color: hsl(236deg 33% 90%);
         }
     }
 
     .alert.home-error-bar {
-        color: hsl(236, 33%, 90%);
-        background-color: hsla(35, 84%, 62%, 0.25);
-        border: 1px solid hsl(11, 46%, 54%);
+        color: hsl(236deg 33% 90%);
+        background-color: hsl(35deg 84% 62% / 25%);
+        border: 1px solid hsl(11deg 46% 54%);
     }
 
     .alert {
@@ -1176,53 +1180,53 @@
 
     .alert.alert-success {
         color: inherit;
-        background-color: hsla(161, 60%, 46%, 0.2);
-        border-color: hsl(165, 68%, 37%);
+        background-color: hsl(161deg 60% 46% / 20%);
+        border-color: hsl(165deg 68% 37%);
     }
 
     .alert.alert-error,
     .alert.alert-danger {
-        background-color: hsl(318, 12%, 21%);
+        background-color: hsl(318deg 12% 21%);
         color: inherit;
-        border: 1px solid hsl(0, 75%, 65%);
+        border: 1px solid hsl(0deg 75% 65%);
     }
 
     .alert-box .alert,
     .alert-box .stacktrace,
     .alert.alert-error {
-        background-color: hsl(318, 12%, 21%);
+        background-color: hsl(318deg 12% 21%);
         color: inherit;
-        border: 1px solid hsl(0, 75%, 65%);
+        border: 1px solid hsl(0deg 75% 65%);
     }
 
     .alert-box {
         .alert.alert-error::before {
-            color: hsl(0, 75%, 65%);
+            color: hsl(0deg 75% 65%);
         }
 
         .stacktrace {
-            color: hsl(314, 22%, 85%);
+            color: hsl(314deg 22% 85%);
 
             .expand {
-                color: hsl(318, 14%, 36%);
+                color: hsl(318deg 14% 36%);
             }
 
             .subtle {
-                color: hsl(314, 19%, 63%);
+                color: hsl(314deg 19% 63%);
             }
 
             .code-context {
-                color: hsl(314, 27%, 82%);
-                background-color: hsl(312, 7%, 14%);
-                box-shadow: inset 0 11px 10px -10px hsl(0, 0%, 6%),
-                    inset 0 -11px 10px -10px hsl(0, 0%, 6%);
+                color: hsl(314deg 27% 82%);
+                background-color: hsl(312deg 7% 14%);
+                box-shadow: inset 0 11px 10px -10px hsl(0deg 0% 6%),
+                    inset 0 -11px 10px -10px hsl(0deg 0% 6%);
 
                 .line-number {
-                    color: hsl(318, 14%, 44%);
+                    color: hsl(318deg 14% 44%);
                 }
 
                 .focus-line {
-                    background-color: hsl(307, 9%, 19%);
+                    background-color: hsl(307deg 9% 19%);
                 }
             }
         }
@@ -1230,16 +1234,16 @@
 
     /* Popover: */
     .hotspot.overlay .hotspot-popover {
-        border-color: hsla(0, 0%, 0%, 0.2) !important;
+        border-color: hsl(0deg 0% 0% / 20%) !important;
         /* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
     color. */
-        box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.4);
+        box-shadow: 0 5px 10px hsl(0deg 0% 0% / 40%);
     }
 
     #invite-user-modal {
         #clipboard_image {
             & path {
-                fill: hsl(236, 33%, 90%);
+                fill: hsl(236deg 33% 90%);
             }
         }
     }
@@ -1248,7 +1252,7 @@
         #default-section {
             .default-field {
                 .name {
-                    color: hsl(236, 33%, 90%);
+                    color: hsl(236deg 33% 90%);
                 }
             }
         }
@@ -1256,7 +1260,7 @@
         #content {
             .field-section {
                 .name {
-                    color: hsl(236, 33%, 90%);
+                    color: hsl(236deg 33% 90%);
                 }
             }
         }
@@ -1265,81 +1269,81 @@
         .subscription-stream-list,
         .subscription-stream-list .user-stream-list tr,
         .subscription-group-list .user-group-list tr {
-            border-color: hsla(0, 0%, 0%, 0.4);
+            border-color: hsl(0deg 0% 0% / 40%);
         }
     }
 
     /* Arrows: */
     .hotspot.overlay {
         .hotspot-popover.arrow-right::before {
-            border-left-color: hsla(0, 0%, 0%, 0.2);
+            border-left-color: hsl(0deg 0% 0% / 20%);
         }
 
         .hotspot-popover.arrow-right::after {
-            border-left-color: hsl(212, 28%, 18%);
+            border-left-color: hsl(212deg 28% 18%);
         }
 
         .hotspot-popover.arrow-bottom::before {
-            border-top-color: hsla(0, 0%, 0%, 0.2);
+            border-top-color: hsl(0deg 0% 0% / 20%);
         }
 
         .hotspot-popover.arrow-bottom::after {
-            border-top-color: hsl(212, 28%, 18%);
+            border-top-color: hsl(212deg 28% 18%);
         }
 
         .hotspot-popover.arrow-left::before {
-            border-right-color: hsla(0, 0%, 0%, 0.2);
+            border-right-color: hsl(0deg 0% 0% / 20%);
         }
 
         .hotspot-popover.arrow-left::after {
-            border-right-color: hsl(212, 28%, 18%);
+            border-right-color: hsl(212deg 28% 18%);
         }
 
         .hotspot-popover.arrow-top::before {
-            border-bottom-color: hsla(0, 0%, 0%, 0.2);
+            border-bottom-color: hsl(0deg 0% 0% / 20%);
         }
 
         .hotspot-popover.arrow-top::after {
-            border-bottom-color: hsl(212, 28%, 18%);
+            border-bottom-color: hsl(212deg 28% 18%);
         }
     }
 
     /* Content: */
     .hotspot.overlay .hotspot-popover .hotspot-popover-content,
     .hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
-        background-color: hsl(212, 28%, 18%);
+        background-color: hsl(212deg 28% 18%);
     }
 
     .alert-zulip-logo,
     .top-messages-logo,
     .bottom-messages-logo {
         & svg path {
-            fill: hsl(214, 27%, 18%);
-            stroke: hsl(214, 27%, 18%);
+            fill: hsl(214deg 27% 18%);
+            stroke: hsl(214deg 27% 18%);
         }
 
         & svg circle {
-            fill: hsl(0, 0%, 100%);
-            stroke: hsl(0, 0%, 100%);
+            fill: hsl(0deg 0% 100%);
+            stroke: hsl(0deg 0% 100%);
         }
     }
 
     .history-limited-box,
     .all-messages-search-caution {
-        background-color: hsla(0, 0%, 0%, 0.2);
+        background-color: hsl(0deg 0% 0% / 20%);
     }
 
     #feedback_container,
     code,
     .typeahead.dropdown-menu {
-        background-color: hsl(212, 25%, 15%);
-        border-color: hsla(0, 0%, 0%, 0.5);
+        background-color: hsl(212deg 25% 15%);
+        border-color: hsl(0deg 0% 0% / 50%);
         color: inherit;
     }
 
     /* Search highlight used in both topics and rendered_markdown */
     .highlight {
-        background-color: hsla(51, 100%, 64%, 0.42);
+        background-color: hsl(51deg 100% 64% / 42%);
     }
 
     .sub-unsub-message span::before,
@@ -1349,18 +1353,18 @@
     .streams_subheader span::before,
     .streams_subheader span::after {
         opacity: 0.5;
-        border-bottom: 1px solid hsl(0, 0%, 100%);
+        border-bottom: 1px solid hsl(0deg 0% 100%);
     }
 
     .star:not(.empty-star),
     .empty-star:hover {
-        color: hsla(126, 66%, 72%, 0.75);
+        color: hsl(126deg 66% 72% / 75%);
     }
 
     #bots_lists_navbar .active a {
-        color: hsl(0, 0%, 87%);
-        background-color: hsl(212, 28%, 18%);
-        border-color: hsl(0, 0%, 87%);
+        color: hsl(0deg 0% 87%);
+        background-color: hsl(212deg 28% 18%);
+        border-color: hsl(0deg 0% 87%);
         border-bottom-color: transparent;
     }
 
@@ -1369,29 +1373,29 @@
     }
 
     .simplebar-track .simplebar-scrollbar::before {
-        background-color: hsl(0, 0%, 100%);
-        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.33);
+        background-color: hsl(0deg 0% 100%);
+        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 33%);
     }
 
     .collapse-settings-btn:hover {
-        color: hsl(200, 79%, 66%);
+        color: hsl(200deg 79% 66%);
     }
 
     #request-progress-status-banner .loading-indicator,
     #loading_older_messages_indicator,
     #recent_topics_loading_messages_indicator {
         & path {
-            fill: hsl(0, 0%, 100%);
+            fill: hsl(0deg 0% 100%);
         }
     }
 
     .small_square_button {
         &.small_square_x {
-            background-color: hsl(0, 0%, 95%);
-            color: hsl(0, 0%, 42%);
+            background-color: hsl(0deg 0% 95%);
+            color: hsl(0deg 0% 42%);
 
             &:hover {
-                color: hsl(0, 0%, 18%);
+                color: hsl(0deg 0% 18%);
             }
         }
     }
@@ -1403,46 +1407,46 @@
     i.zulip-icon:focus,
     .auto-select:focus,
     [role="button"]:focus {
-        outline-color: hsl(0, 0%, 67%);
+        outline-color: hsl(0deg 0% 67%);
     }
 
     .animated-purple-button:focus {
-        box-shadow: 0 1px 4px 0 hsl(0, 0%, 100%, 0.666);
+        box-shadow: 0 1px 4px 0 hsl(0deg 0% 100% / 66.6%);
     }
 
     .color_animated_button {
-        background-color: hsl(211, 29%, 14%);
+        background-color: hsl(211deg 29% 14%);
 
         * {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
         }
 
         &:hover {
-            background-color: hsl(240, 96%, 68%);
+            background-color: hsl(240deg 96% 68%);
         }
     }
 
     /* Widgets: Poll */
     .poll-widget {
         .poll-vote {
-            color: hsl(185, 35%, 65%);
-            border-color: hsl(185, 35%, 35%);
+            color: hsl(185deg 35% 65%);
+            border-color: hsl(185deg 35% 35%);
 
             &:hover {
-                color: hsl(185, 50%, 70%);
-                border-color: hsl(185, 40%, 40%);
-                background-color: hsl(185, 20%, 20%);
+                color: hsl(185deg 50% 70%);
+                border-color: hsl(185deg 40% 40%);
+                background-color: hsl(185deg 20% 20%);
             }
 
             &:focus {
-                color: hsl(185, 50%, 65%);
-                border-color: hsl(185, 40%, 50%);
-                background-color: hsl(185, 40%, 35%);
+                color: hsl(185deg 50% 65%);
+                border-color: hsl(185deg 40% 50%);
+                background-color: hsl(185deg 40% 35%);
             }
         }
 
         .poll-names {
-            color: hsl(236, 15%, 70%);
+            color: hsl(236deg 15% 70%);
         }
     }
 
@@ -1451,21 +1455,21 @@
         & label.checkbox {
             & input[type="checkbox"] {
                 ~ span {
-                    border-color: hsl(185, 40%, 45%);
+                    border-color: hsl(185deg 40% 45%);
                     opacity: 0.7;
                 }
 
                 &:hover ~ span {
-                    background-color: hsl(185, 20%, 20%);
-                    border-color: hsl(185, 40%, 35%);
+                    background-color: hsl(185deg 20% 20%);
+                    border-color: hsl(185deg 40% 35%);
                 }
 
                 &:checked ~ span {
-                    background-color: hsl(185, 40%, 45%);
+                    background-color: hsl(185deg 40% 45%);
                 }
 
                 &:focus ~ span {
-                    outline-color: hsla(0, 0%, 100%, 0);
+                    outline-color: hsl(0deg 0% 100% / 0%);
                 }
             }
         }
@@ -1476,34 +1480,34 @@
     too light. So, we set the color explicitly to original color of label to
     keep the color of the icon same even when the setting is disabled. */
     #id_realm_enable_spectator_access_label a {
-        color: hsl(236, 33%, 90%);
+        color: hsl(236deg 33% 90%);
     }
 
     #stream-specific-notify-table .unmute_stream {
         &:hover {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
         }
     }
 
     #read_receipts_modal #read_receipts_list li {
         &:hover {
-            background-color: hsla(0, 0%, 100%, 0.05);
+            background-color: hsl(0deg 0% 100% / 5%);
         }
 
         &:active,
         &:focus {
-            background-color: hsla(0, 0%, 100%, 0.1);
+            background-color: hsl(0deg 0% 100% / 10%);
         }
     }
 
     #settings_page,
     #stream_settings {
         .save-button-controls .discard-button {
-            color: hsl(0, 0%, 80%);
+            color: hsl(0deg 0% 80%);
 
             &:hover {
                 .save-discard-widget-button-text {
-                    color: hsl(0, 0%, 100%);
+                    color: hsl(0deg 0% 100%);
                 }
             }
         }
@@ -1512,7 +1516,7 @@
 
 @supports (-moz-appearance: none) {
     %dark-theme #settings_page select {
-        background-color: hsla(0, 0%, 0%, 0.2);
+        background-color: hsl(0deg 0% 0% / 20%);
     }
 }
 
diff --git a/web/styles/drafts.css b/web/styles/drafts.css
index f24863f66f..0ce6d65520 100644
--- a/web/styles/drafts.css
+++ b/web/styles/drafts.css
@@ -1,7 +1,7 @@
 .drafts-container {
     position: relative;
     height: 95%;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     border-radius: 4px;
     padding: 0;
     width: 58%;
@@ -21,7 +21,7 @@
         padding-top: 4px;
         padding-bottom: 8px;
         text-align: center;
-        border-bottom: 1px solid hsl(0, 0%, 87%);
+        border-bottom: 1px solid hsl(0deg 0% 87%);
 
         & h1 {
             margin: 0;
@@ -34,7 +34,7 @@
             position: absolute;
             top: 10px;
             right: 10px;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             cursor: pointer;
 
             .exit-sign {
@@ -58,7 +58,7 @@
             margin-top: calc(45vh - 30px - 1.5em);
             text-align: center;
             font-size: 1.5em;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             pointer-events: none;
         }
 
@@ -66,7 +66,7 @@
             display: block;
             text-align: center;
             font-size: 1em;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             pointer-events: none;
         }
 
@@ -88,11 +88,11 @@
 
     .draft-info-box {
         width: 100%;
-        border: 1px solid hsl(0, 0%, 88%);
+        border: 1px solid hsl(0deg 0% 88%);
         margin-bottom: 10px;
 
         &.active {
-            outline: 2px solid hsl(215, 47%, 50%);
+            outline: 2px solid hsl(215deg 47% 50%);
             /* this offset ensures no gap between the blue box and the draft in active state */
             outline-offset: -1px;
         }
@@ -134,7 +134,7 @@
             .restore-draft {
                 cursor: pointer;
                 margin-right: 5px;
-                color: hsl(170, 48%, 54%);
+                color: hsl(170deg 48% 54%);
                 opacity: 0.7;
 
                 &:hover {
@@ -145,7 +145,7 @@
             .delete-draft {
                 cursor: pointer;
                 margin-left: 5px;
-                color: hsl(357, 52%, 57%);
+                color: hsl(357deg 52% 57%);
                 opacity: 0.7;
 
                 &:hover {
diff --git a/web/styles/hotspots.css b/web/styles/hotspots.css
index 2d4219afa0..9188b61103 100644
--- a/web/styles/hotspots.css
+++ b/web/styles/hotspots.css
@@ -10,8 +10,8 @@
         margin: -12.5px 0 0 -12.5px;
         border-radius: 50%;
         position: absolute;
-        background-color: hsla(196, 100%, 82%, 0.3);
-        border: 2px solid hsl(215, 47%, 50%);
+        background-color: hsl(196deg 100% 82% / 30%);
+        border: 2px solid hsl(215deg 47% 50%);
         top: 50%;
         left: 50%;
     }
@@ -23,9 +23,9 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         border-radius: 50%;
-        border: 1px solid hsl(205, 100%, 70%);
+        border: 1px solid hsl(205deg 100% 70%);
         transform: scale(2.2);
         opacity: 0;
         animation: pulsate 5s ease-out 0.375s 5;
@@ -39,7 +39,7 @@
             left: -5px;
             bottom: 3px;
             transform: rotate(7deg);
-            color: hsl(215, 47%, 50%);
+            color: hsl(215deg 47% 50%);
             font-size: 2.75em;
             font-weight: 600;
         }
@@ -74,14 +74,14 @@
 /* popover */
 .hotspot.overlay {
     z-index: 104;
-    background-color: hsla(191, 7%, 20%, 0.15);
+    background-color: hsl(191deg 7% 20% / 15%);
 
     .hotspot-popover {
         position: fixed;
         width: 250px;
         text-align: left;
-        box-shadow: 0 5px 10px hsla(223, 4%, 54%, 0.2);
-        border: 1px solid hsl(0, 0%, 80%);
+        box-shadow: 0 5px 10px hsl(223deg 4% 54% / 20%);
+        border: 1px solid hsl(0deg 0% 80%);
         border-radius: 4px;
 
         /* arrows */
@@ -111,12 +111,12 @@
             }
 
             &::after {
-                border-bottom-color: hsl(164, 44%, 47%);
+                border-bottom-color: hsl(164deg 44% 47%);
                 margin-right: -12px;
             }
 
             &::before {
-                border-bottom-color: hsl(0, 0%, 80%);
+                border-bottom-color: hsl(0deg 0% 80%);
                 margin-right: -13px;
             }
         }
@@ -129,12 +129,12 @@
             }
 
             &::after {
-                border-right-color: hsl(0, 0%, 100%);
+                border-right-color: hsl(0deg 0% 100%);
                 margin-top: -12px;
             }
 
             &::before {
-                border-right-color: hsl(0, 0%, 80%);
+                border-right-color: hsl(0deg 0% 80%);
                 margin-top: -13px;
             }
         }
@@ -147,12 +147,12 @@
             }
 
             &::after {
-                border-top-color: hsl(0, 0%, 100%);
+                border-top-color: hsl(0deg 0% 100%);
                 margin-right: -12px;
             }
 
             &::before {
-                border-top-color: hsl(0, 0%, 80%);
+                border-top-color: hsl(0deg 0% 80%);
                 margin-right: -13px;
             }
         }
@@ -165,12 +165,12 @@
             }
 
             &::after {
-                border-left-color: hsl(0, 0%, 100%);
+                border-left-color: hsl(0deg 0% 100%);
                 margin-top: -12px;
             }
 
             &::before {
-                border-left-color: hsl(0, 0%, 80%);
+                border-left-color: hsl(0deg 0% 80%);
                 margin-top: -13px;
             }
         }
@@ -180,23 +180,23 @@
         padding: 0 15px;
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
-        background-color: hsl(164, 44%, 47%);
+        background-color: hsl(164deg 44% 47%);
     }
 
     .hotspot-title {
         margin: 0;
         font-size: 1.15em;
         font-weight: 600;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
     }
 
     .hotspot-popover-content {
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         padding: 15px;
     }
 
     .hotspot-popover-bottom {
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         height: 90px;
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
@@ -225,15 +225,15 @@
     border: none;
     font-size: 1.15em;
     font-weight: 600;
-    color: hsl(0, 0%, 100%);
-    background-color: hsl(164, 44%, 47%);
+    color: hsl(0deg 0% 100%);
+    background-color: hsl(164deg 44% 47%);
     border-radius: 4px;
     white-space: normal;
     padding: 7px 20px;
     outline: none;
 
     &:hover {
-        background-color: hsl(164, 44%, 56%);
+        background-color: hsl(164deg 44% 56%);
     }
 }
 
diff --git a/web/styles/image_upload_widget.css b/web/styles/image_upload_widget.css
index e12c804267..2628bdfbed 100644
--- a/web/styles/image_upload_widget.css
+++ b/web/styles/image_upload_widget.css
@@ -2,7 +2,7 @@
 .image_upload_widget {
     position: relative;
     border-radius: 5px;
-    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
     overflow: hidden;
 
     transition: all 0.3s ease;
@@ -14,7 +14,7 @@
 
     .image-hover-background {
         content: "";
-        background-color: hsla(0, 0%, 0%, 0.6);
+        background-color: hsl(0deg 0% 0% / 60%);
         height: 100%;
         width: 100%;
         z-index: 99;
@@ -31,7 +31,7 @@
         align-items: center;
         text-align: center;
         justify-content: center;
-        box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+        box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
         z-index: 99;
     }
 
@@ -39,7 +39,7 @@
         background: none;
         border: none;
         cursor: pointer;
-        color: hsl(0, 0%, 75%);
+        color: hsl(0deg 0% 75%);
         opacity: 0;
         padding: 0;
         position: absolute;
@@ -51,7 +51,7 @@
     }
 
     .image-disabled-text {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         cursor: not-allowed;
         position: absolute;
         text-align: center;
@@ -69,7 +69,7 @@
 
     .image-delete-button:focus,
     .image-delete-button:hover {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
     }
 
     .image-delete-button:hover ~ .image-upload-text {
@@ -81,7 +81,7 @@
     }
 
     .image-delete-text {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         font-size: 0.85rem;
         position: absolute;
         visibility: hidden;
@@ -91,21 +91,21 @@
     .image-upload-text {
         cursor: pointer;
         font-size: 0.85rem;
-        color: hsl(0, 0%, 85%);
+        color: hsl(0deg 0% 85%);
         position: absolute;
         z-index: 99;
         visibility: hidden;
     }
 
     .image-upload-text:hover {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
     }
 
     .upload-spinner-background {
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: hsl(0, 0%, 10%);
+        background-color: hsl(0deg 0% 10%);
         font-size: 0.8rem;
         width: 100%;
         opacity: 0.8;
@@ -164,7 +164,7 @@
 #realm-icon-upload-widget {
     width: 100px;
     height: 100px;
-    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
 
     .image-delete-button {
         top: 5px;
@@ -186,11 +186,11 @@
 }
 
 #realm-day-logo-upload-widget {
-    background-color: hsl(0, 100%, 100%);
+    background-color: hsl(0deg 100% 100%);
 }
 
 #realm-night-logo-upload-widget {
-    background-color: hsl(212, 28%, 18%);
+    background-color: hsl(212deg 28% 18%);
 }
 
 .realm-logo-block {
diff --git a/web/styles/informational_overlays.css b/web/styles/informational_overlays.css
index d6dbd7bcd1..1e84fe5915 100644
--- a/web/styles/informational_overlays.css
+++ b/web/styles/informational_overlays.css
@@ -9,12 +9,12 @@
         border-radius: 4px;
         overflow: hidden;
 
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
     }
 
     .overlay-tabs {
         padding: 10px 0;
-        border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
+        border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
 
         .tab-switcher {
             margin-left: 15px;
@@ -23,7 +23,7 @@
         .exit {
             float: right;
             font-size: 1.5rem;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             font-weight: 600;
             margin: 0 15px;
             cursor: pointer;
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 679069900d..39d49889e2 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -3,7 +3,7 @@
     flex-wrap: wrap;
 
     padding: 2px;
-    border: 1px solid hsla(0, 0%, 0%, 0.15);
+    border: 1px solid hsl(0deg 0% 0% / 15%);
     border-radius: 4px;
     align-items: center;
 
@@ -17,16 +17,16 @@
         margin: 1px 2px;
 
         color: inherit;
-        border: 1px solid hsla(0, 0%, 0%, 0.15);
+        border: 1px solid hsl(0deg 0% 0% / 15%);
 
         border-radius: 4px;
-        background-color: hsla(0, 0%, 0%, 0.07);
+        background-color: hsl(0deg 0% 0% / 7%);
         cursor: pointer;
 
         &:focus {
-            color: hsl(0, 0%, 100%);
-            border: 1px solid hsl(176, 78%, 28%);
-            background-color: hsl(176, 49%, 42%);
+            color: hsl(0deg 0% 100%);
+            border: 1px solid hsl(176deg 78% 28%);
+            background-color: hsl(176deg 49% 42%);
             outline: none;
         }
 
@@ -63,8 +63,8 @@
 
             &:focus {
                 color: inherit;
-                border: 1px solid hsla(0, 0%, 0%, 0.15);
-                background-color: hsla(0, 0%, 0%, 0.07);
+                border: 1px solid hsl(0deg 0% 0% / 15%);
+                background-color: hsl(0deg 0% 0% / 7%);
             }
 
             .exit {
@@ -109,7 +109,7 @@
     padding: 0 2px;
     flex-grow: 1;
     align-content: center;
-    border: 1px solid hsla(0, 0%, 0%, 0.2);
+    border: 1px solid hsl(0deg 0% 0% / 20%);
 
     .input {
         height: 20px;
@@ -127,12 +127,12 @@
 }
 
 .deactivated-pill {
-    background-color: hsl(0, 86%, 86%) !important;
+    background-color: hsl(0deg 86% 86%) !important;
 }
 
 .add_subscribers_container .pill-container {
     width: 100%;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 
     .input:first-child:empty::before {
         opacity: 0.5;
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 41366c19d5..33d49828ad 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -124,7 +124,7 @@ li.show-more-topics {
                     position: sticky;
                     top: calc($sections_vertical_gutter + 43px);
                     z-index: 2;
-                    background-color: hsl(0, 0%, 100%);
+                    background-color: hsl(0deg 0% 100%);
                 }
             }
         }
@@ -180,7 +180,7 @@ li.show-more-topics {
 }
 
 .private_messages_container {
-    background: hsl(0, 0%, 100%);
+    background: hsl(0deg 0% 100%);
     margin-right: 16px;
     margin-left: 6px;
     z-index: 1;
@@ -271,7 +271,7 @@ li.show-more-topics {
     #private_messages_section,
     #private_messages_list,
     #hide_more_private_messages {
-        background-color: hsl(202, 56%, 91%);
+        background-color: hsl(202deg 56% 91%);
     }
 
     #private_messages_section {
@@ -291,7 +291,7 @@ li.show-more-topics {
     &.top_left_row:hover,
     &.bottom_left_row:hover,
     &#stream_filters li.highlighted_stream {
-        background-color: hsla(120, 12.3%, 71.4%, 0.38);
+        background-color: hsl(120deg 12.3% 71.4% / 38%);
         border-radius: 4px;
     }
 }
@@ -347,7 +347,7 @@ ul.filters {
 li.active-filter,
 li.active-sub-filter {
     font-weight: 600 !important;
-    background-color: hsl(202, 56%, 91%);
+    background-color: hsl(202deg 56% 91%);
     position: relative;
     border-radius: 4px;
 }
@@ -355,7 +355,7 @@ li.active-sub-filter {
 #stream_filters .narrow-filter.active-filter {
     .topic-list .filter-topics,
     > .bottom_left_row {
-        background-color: hsl(202, 56%, 91%);
+        background-color: hsl(202deg 56% 91%);
         border-radius: 4px;
     }
 }
@@ -379,7 +379,7 @@ li.active-sub-filter {
     .top_left_drafts .unread_count {
         background-color: inherit;
         color: inherit;
-        border: 0.5px solid hsl(105, 2%, 50%);
+        border: 0.5px solid hsl(105deg 2% 50%);
         /* The border takes up space, so we need to
            subtract 1px from the usual 2px margin-top */
         margin-top: 1px !important;
@@ -483,7 +483,7 @@ li.top_left_recent_topics {
     */
 
     &:hover {
-        color: hsl(0, 0%, 0%) !important;
+        color: hsl(0deg 0% 0%) !important;
     }
 
     /*
@@ -537,7 +537,7 @@ li.top_left_drafts:hover .drafts-sidebar-menu-icon,
 li.topic-list-item:hover .topic-sidebar-menu-icon {
     display: inline;
     cursor: pointer;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
 }
 
 ul.topic-list {
@@ -591,11 +591,11 @@ li.topic-list-item {
 #topics_header {
     position: sticky;
     top: 0;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     z-index: 2;
     margin-right: 10px;
     padding-top: $sections_vertical_gutter;
-    color: hsl(0, 0%, 43%);
+    color: hsl(0deg 0% 43%);
 
     .show-all-streams {
         color: inherit;
@@ -619,7 +619,7 @@ li.topic-list-item {
     /* Ideally, 0px should work here, but maybe simplebar is doing something
        that is creating `0.5px` extra gap in zoomed-in windows. */
     top: -0.5px;
-    background: hsl(0, 0%, 100%);
+    background: hsl(0deg 0% 100%);
     z-index: 1;
 
     & input {
@@ -650,8 +650,8 @@ li.topic-list-item {
         flex: 1 1;
         vertical-align: middle;
         margin: auto;
-        border-top: 1px solid hsl(0, 0%, 88%);
-        border-bottom: 1px solid hsl(0, 0%, 100%);
+        border-top: 1px solid hsl(0deg 0% 88%);
+        border-bottom: 1px solid hsl(0deg 0% 100%);
     }
 
     & span::before {
@@ -693,7 +693,7 @@ li.topic-list-item {
         top: calc($sections_vertical_gutter + 20px);
         z-index: 2;
         padding-bottom: 1px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
     }
 
     #subscribe-to-more-streams,
@@ -722,7 +722,7 @@ li.topic-list-item {
 
         &:hover {
             & span {
-                background-color: hsla(120, 12.3%, 71.4%, 0.38);
+                background-color: hsl(120deg 12.3% 71.4% / 38%);
                 border-radius: 4px;
             }
         }
diff --git a/web/styles/lightbox.css b/web/styles/lightbox.css
index 8629fec771..ff718e8cf5 100644
--- a/web/styles/lightbox.css
+++ b/web/styles/lightbox.css
@@ -1,5 +1,5 @@
 #lightbox_overlay {
-    background-color: hsl(227, 40%, 16%);
+    background-color: hsl(227deg 40% 16%);
 
     .image-preview {
         display: flex;
@@ -33,7 +33,7 @@
     .exit {
         flex-shrink: 0;
 
-        color: hsla(0, 0%, 100%, 0.8);
+        color: hsl(0deg 0% 100% / 80%);
         font-size: 2rem;
         margin: 6px 20px 0 0;
 
@@ -70,18 +70,18 @@
             font-size: 0.9rem;
             min-width: inherit;
             padding: 4px 10px;
-            border: 1px solid hsla(0, 0%, 100%, 0.6);
+            border: 1px solid hsl(0deg 0% 100% / 60%);
             background-color: transparent;
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
             border-radius: 4px;
             text-decoration: none;
             display: inline-block;
             margin: 0 5px;
 
             &:hover {
-                background-color: hsl(0, 0%, 100%);
-                border-color: hsl(0, 0%, 100%);
-                color: hsl(227, 40%, 16%);
+                background-color: hsl(0deg 0% 100%);
+                border-color: hsl(0deg 0% 100%);
+                color: hsl(227deg 40% 16%);
             }
         }
 
@@ -91,8 +91,8 @@
 
             &:hover {
                 background-color: transparent;
-                color: hsl(0, 0%, 100%);
-                border: 1px solid hsla(0, 0%, 100%, 0.6);
+                color: hsl(0deg 0% 100%);
+                border: 1px solid hsl(0deg 0% 100% / 60%);
             }
         }
     }
@@ -107,7 +107,7 @@
         margin-bottom: 15px;
 
         font-size: 1.1rem;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
 
         .title {
             vertical-align: top;
@@ -156,7 +156,7 @@
             margin-top: 25px;
             padding: 5px 10px;
 
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
             font-size: 1.8em;
             font-weight: 100;
 
@@ -189,7 +189,7 @@
                 height: 50px;
                 margin: 0 2px;
 
-                background-color: hsla(0, 0%, 94%, 0.2);
+                background-color: hsl(0deg 0% 94% / 20%);
                 opacity: 0.5;
 
                 background-size: cover;
diff --git a/web/styles/message_edit_history.css b/web/styles/message_edit_history.css
index 19aeb2152d..986dec895f 100644
--- a/web/styles/message_edit_history.css
+++ b/web/styles/message_edit_history.css
@@ -36,13 +36,13 @@
 
     .message_edit_history_content {
         .highlight_text_inserted {
-            color: hsl(122, 72%, 30%);
-            background-color: hsl(120, 64%, 95%);
+            color: hsl(122deg 72% 30%);
+            background-color: hsl(120deg 64% 95%);
         }
 
         .highlight_text_deleted {
-            color: hsl(0, 100%, 50%);
-            background-color: hsl(7, 90%, 92%);
+            color: hsl(0deg 100% 50%);
+            background-color: hsl(7deg 90% 92%);
             text-decoration: line-through;
             word-break: break-all;
         }
diff --git a/web/styles/modal.css b/web/styles/modal.css
index 0658bb45f7..8b753369a0 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -3,14 +3,14 @@
 }
 
 .modal-bg {
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
 }
 
 /* Styles for the Micromodal-based modals */
 .modal__overlay {
     position: fixed;
     inset: 0;
-    background: hsla(0, 0%, 0%, 0.6);
+    background: hsl(0deg 0% 0% / 60%);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -20,7 +20,7 @@
 .modal__container {
     display: flex;
     flex-direction: column;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     max-width: calc(100% - 32px);
     max-height: 96%;
     width: 32.5rem;
@@ -75,7 +75,7 @@
     border: 0;
 
     &:hover {
-        background: hsl(0, 0%, 90%);
+        background: hsl(0deg 0% 90%);
     }
 }
 
@@ -87,14 +87,14 @@
     line-height: 1.5;
 
     &.simplebar-scrollable-y + .modal__footer {
-        border-top: 1px solid hsl(0, 0%, 87%);
+        border-top: 1px solid hsl(0deg 0% 87%);
     }
 }
 
 .modal__btn {
     font-size: 0.875rem;
     padding: 0.5rem 1rem;
-    background-color: hsl(0, 0%, 90%);
+    background-color: hsl(0deg 0% 90%);
     border-radius: 0.25rem;
     border-width: 0;
     cursor: pointer;
@@ -122,21 +122,21 @@
 }
 
 .dialog_cancel_button {
-    background: hsl(0, 0%, 100%);
-    border: 1px solid hsla(300, 2%, 11%, 0.3);
+    background: hsl(0deg 0% 100%);
+    border: 1px solid hsl(300deg 2% 11% / 30%);
 
     &:hover {
-        background: hsl(0, 0%, 97%);
+        background: hsl(0deg 0% 97%);
     }
 }
 
 .dialog_submit_button {
     margin-left: 12px;
-    background-color: hsl(240, 96%, 68%);
-    color: hsl(0, 0%, 100%) !important;
+    background-color: hsl(240deg 96% 68%);
+    color: hsl(0deg 0% 100%) !important;
 
     &:disabled {
-        background-color: hsl(0, 0%, 65%);
+        background-color: hsl(0deg 0% 65%);
     }
 }
 
@@ -212,12 +212,12 @@
             line-height: 26px;
 
             &:hover {
-                background-color: hsla(0, 0%, 0%, 0.05);
+                background-color: hsl(0deg 0% 0% / 5%);
             }
 
             &:active,
             &:focus {
-                background-color: hsla(0, 0%, 0%, 0.1);
+                background-color: hsl(0deg 0% 0% / 10%);
                 outline: none;
             }
         }
@@ -234,7 +234,7 @@
     }
 
     .border-top {
-        border-top: 1px solid hsla(300, 2%, 11%, 0.3);
+        border-top: 1px solid hsl(300deg 2% 11% / 30%);
         padding-top: 10px;
     }
 
@@ -304,7 +304,7 @@
     height: 16px;
 
     & path {
-        fill: hsl(0, 0%, 100%);
+        fill: hsl(0deg 0% 100%);
     }
 }
 
@@ -333,17 +333,17 @@
     height: 30px;
     width: 220px;
     padding: 4px 6px;
-    color: hsl(0, 0%, 33%);
+    color: hsl(0deg 0% 33%);
     border-radius: 4px;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     cursor: pointer;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 
     &:disabled {
         cursor: not-allowed;
 
         /* The background-color of select elements inside modal is different than the others in
         settings pages, because the background of the modal is brighter than the setting page. */
-        background-color: hsla(0, 0%, 90%, 1);
+        background-color: hsl(0deg 0% 90%);
     }
 }
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 0c3e1d17d8..1c039508c1 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -147,7 +147,7 @@
         margin-right: 10px;
 
         .sp-container {
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             cursor: pointer;
             border: none;
 
@@ -163,11 +163,11 @@
             }
 
             & button {
-                background-color: hsl(0, 0%, 100%);
+                background-color: hsl(0deg 0% 100%);
                 background-image: none;
-                border: 1px solid hsl(0, 0%, 80%);
+                border: 1px solid hsl(0deg 0% 80%);
                 border-radius: 4px;
-                color: hsl(0, 0%, 25%);
+                color: hsl(0deg 0% 25%);
                 font-size: 12px;
                 padding: 6px;
                 text-transform: capitalize;
@@ -176,7 +176,7 @@
             }
 
             .sp-picker-container {
-                border-left: solid 1px hsl(0, 0%, 88%);
+                border-left: solid 1px hsl(0deg 0% 88%);
             }
         }
     }
@@ -244,7 +244,7 @@ ul {
             font-size: 11px;
             font-weight: 550;
             margin-right: 2px;
-            background-color: hsl(200, 100%, 40%);
+            background-color: hsl(200deg 100% 40%);
             /* Override random undesired bootstrap style */
             text-shadow: none;
             /* Not center aligned but looks better. */
@@ -266,7 +266,7 @@ ul {
 
     .popover-title {
         padding: 0;
-        border-color: hsla(0, 0%, 0%, 0.2);
+        border-color: hsl(0deg 0% 0% / 20%);
     }
 
     .popover_info li {
@@ -281,7 +281,7 @@ ul {
 
     .popover-title {
         padding: 0;
-        border-color: hsla(0, 0%, 0%, 0.2);
+        border-color: hsl(0deg 0% 0% / 20%);
     }
 }
 
@@ -306,7 +306,7 @@ ul {
         margin-left: 0;
 
         .bot {
-            color: hsl(180, 5%, 74%);
+            color: hsl(180deg 5% 74%);
             vertical-align: top;
             width: 20px;
             padding-top: 3.5px;
@@ -332,7 +332,7 @@ ul {
 
     &:hover {
         cursor: pointer;
-        color: hsl(200, 100%, 40%);
+        color: hsl(200deg 100% 40%);
     }
 }
 
@@ -344,7 +344,7 @@ ul {
     position: relative;
 
     &.guest-avatar::after {
-        outline: 10px solid hsl(0, 0%, 100%);
+        outline: 10px solid hsl(0deg 0% 100%);
     }
 
     .popover-inner {
@@ -380,7 +380,7 @@ ul {
     }
 
     .name {
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
         width: 120px;
         font-weight: 600;
         margin-right: 10px;
@@ -421,10 +421,10 @@ ul {
         background-size: cover;
         background-position: center;
         border-radius: 5px;
-        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2);
+        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 20%);
 
         &.guest-avatar::after {
-            outline: 9px solid hsl(0, 0%, 100%);
+            outline: 9px solid hsl(0deg 0% 100%);
         }
     }
 
@@ -447,7 +447,7 @@ ul {
     }
 
     & hr {
-        border: 1px solid hsl(0, 0%, 93%);
+        border: 1px solid hsl(0deg 0% 93%);
         margin: 5px 0;
     }
 
@@ -456,7 +456,7 @@ ul {
             margin-bottom: 10px;
 
             .name {
-                color: hsl(0, 0%, 20%);
+                color: hsl(0deg 0% 20%);
                 font-weight: 600;
             }
 
@@ -530,7 +530,7 @@ ul {
     .subscription-group-list,
     .subscription-stream-list {
         position: relative;
-        border: 1px solid hsl(0, 0%, 83%);
+        border: 1px solid hsl(0deg 0% 83%);
         border-radius: 4px;
         overflow: auto;
         text-align: left;
@@ -549,7 +549,7 @@ ul {
             border-radius: 6px;
 
             & tr {
-                border-bottom: 1px solid hsl(0, 0%, 87%);
+                border-bottom: 1px solid hsl(0deg 0% 87%);
                 /* Ensure equal height for rows with a remove-subscription-button and
                    those without one. */
                 height: 34px;
@@ -581,7 +581,7 @@ ul {
                 display: block;
 
                 text-align: center;
-                color: hsl(0, 0%, 67%);
+                color: hsl(0deg 0% 67%);
             }
 
             &:empty {
@@ -606,14 +606,14 @@ ul {
         width: 100%;
         height: 100%;
 
-        background-color: hsla(0, 0%, 0%, 0.7);
+        background-color: hsl(0deg 0% 0% / 70%);
         border-radius: 0;
         border: none;
 
         pointer-events: none;
 
         .popover-inner {
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             pointer-events: all;
         }
     }
@@ -630,14 +630,14 @@ ul {
         width: 100%;
         height: 100%;
 
-        background-color: hsla(0, 0%, 0%, 0.7);
+        background-color: hsl(0deg 0% 0% / 70%);
         border-radius: 0;
         border: none;
 
         pointer-events: none;
 
         .popover-inner {
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             pointer-events: all;
         }
 
@@ -664,7 +664,7 @@ ul {
         justify-content: center;
         align-items: center;
 
-        background-color: hsla(0, 0%, 0%, 0.7);
+        background-color: hsl(0deg 0% 0% / 70%);
 
         /* Needs to be higher than the 105 for div.overlay so that the
            emoji picker can render on top of the user status picker. */
@@ -728,7 +728,7 @@ ul {
         /* Red outline for clear visibility
          * of which image is in focus.
          */
-        outline-color: hsl(0, 100%, 50%);
+        outline-color: hsl(0deg 100% 50%);
     }
 
     .search-box {
@@ -750,7 +750,7 @@ ul {
 
             &:focus {
                 .fa-remove {
-                    outline: 2px solid hsl(215, 47%, 50%);
+                    outline: 2px solid hsl(215deg 47% 50%);
                 }
             }
         }
@@ -764,7 +764,7 @@ ul {
 
     .popover-footer {
         text-align: center;
-        background-color: hsl(0, 0%, 0%);
+        background-color: hsl(0deg 0% 0%);
         border-radius: 0 0 6px 6px;
 
         & img {
diff --git a/web/styles/portico/activity.css b/web/styles/portico/activity.css
index 5cd624a67c..f706553253 100644
--- a/web/styles/portico/activity.css
+++ b/web/styles/portico/activity.css
@@ -1,5 +1,5 @@
 .activity_head {
-    background-color: hsl(208, 100%, 97%);
+    background-color: hsl(208deg 100% 97%);
 }
 
 .table td {
@@ -11,11 +11,11 @@
 .table-striped {
     & tr.recently_active {
         & td {
-            background-color: hsl(120, 97%, 83%);
+            background-color: hsl(120deg 97% 83%);
         }
 
         &:nth-child(odd) td {
-            background-color: hsl(120, 70%, 76%);
+            background-color: hsl(120deg 70% 76%);
         }
     }
 }
@@ -31,43 +31,43 @@ td.number {
 
 tr.admin td:first-child {
     font-weight: bold;
-    color: hsl(240, 100%, 50%);
+    color: hsl(240deg 100% 50%);
     font-size: 110%;
 }
 
 .good {
     font-weight: bold;
-    color: hsl(120, 100%, 33%);
+    color: hsl(120deg 100% 33%);
 }
 
 .bad {
     font-weight: bold;
-    color: hsl(0, 100%, 39%);
+    color: hsl(0deg 100% 39%);
 }
 
 .support-query-result {
-    background-color: hsl(210, 100%, 97%);
+    background-color: hsl(210deg 100% 97%);
     padding-left: 15px;
     padding-top: 14px;
     border-radius: 7px;
-    box-shadow: 0 10px 7px -6px hsl(0, 2%, 45%);
+    box-shadow: 0 10px 7px -6px hsl(0deg 2% 45%);
 
     & select {
         height: 30px;
         width: 220px;
         padding: 4px 6px;
         font-size: 14px;
-        color: hsl(0, 0%, 33%);
+        color: hsl(0deg 0% 33%);
         border-radius: 4px;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         margin-bottom: 10px;
         cursor: pointer;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         vertical-align: middle;
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
         &:focus {
-            outline: 1px dotted hsl(0, 0%, 20%);
+            outline: 1px dotted hsl(0deg 0% 20%);
             outline: 5px auto -webkit-focus-ring-color;
             outline-offset: -2px;
         }
@@ -130,13 +130,13 @@ tr.admin td:first-child {
 }
 
 .support-search-button {
-    border-color: hsl(0, 0%, 83%);
+    border-color: hsl(0deg 0% 83%);
     border-radius: 2px;
 }
 
 .support-submit-button {
     position: relative;
     top: -3px;
-    border-color: hsl(0, 0%, 83%);
+    border-color: hsl(0deg 0% 83%);
     border-radius: 2px;
 }
diff --git a/web/styles/portico/billing.css b/web/styles/portico/billing.css
index 37e8e13e7f..4579b16ccb 100644
--- a/web/styles/portico/billing.css
+++ b/web/styles/portico/billing.css
@@ -1,11 +1,11 @@
 .billing-upgrade-page {
     font-family: "Source Sans 3", sans-serif;
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
     height: 100vh;
 
     .hero {
-        background-color: hsl(153, 32%, 55%);
-        color: hsl(153, 32%, 55%);
+        background-color: hsl(153deg 32% 55%);
+        color: hsl(153deg 32% 55%);
         position: absolute;
         top: 0;
         width: 100%;
@@ -40,11 +40,11 @@
     }
 
     .tab-content {
-        border: 1px solid hsl(0, 0%, 87%);
+        border: 1px solid hsl(0deg 0% 87%);
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
         padding: 20px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         font-size: 1.1em;
     }
 
@@ -54,7 +54,7 @@
         & a,
         a:hover,
         a:visited {
-            color: hsl(170, 47%, 33%);
+            color: hsl(170deg 47% 33%);
             font-weight: 500;
         }
     }
@@ -70,9 +70,9 @@
 
             &:checked {
                 + .box {
-                    background-color: hsl(153, 32%, 55%);
-                    color: hsl(0, 0%, 100%);
-                    border-color: hsl(152, 33%, 39%);
+                    background-color: hsl(153deg 32% 55%);
+                    color: hsl(0deg 0% 100%);
+                    border-color: hsl(152deg 33% 39%);
                 }
             }
         }
@@ -80,21 +80,21 @@
         .box {
             width: 120px;
             height: 70px;
-            background-color: hsl(0, 0%, 94%);
+            background-color: hsl(0deg 0% 94%);
             transition: all 0.2s ease;
             display: inline-block;
             text-align: center;
             cursor: pointer;
             position: relative;
-            border: 1px solid hsl(0, 0%, 91%);
+            border: 1px solid hsl(0deg 0% 91%);
             border-radius: 8px;
             margin: 0 10px 5px 0;
             padding: 30px 20px;
             vertical-align: top;
 
             &:hover {
-                background-color: hsl(0, 0%, 91%);
-                border-color: hsl(0, 0%, 80%);
+                background-color: hsl(0deg 0% 91%);
+                border-color: hsl(0deg 0% 80%);
             }
 
             .schedule-time {
@@ -129,13 +129,13 @@
     .stripe-button-el {
         padding: 11px 25px;
         font-weight: 400;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         background: linear-gradient(
             145deg,
-            hsl(191, 56%, 55%),
-            hsl(169, 65%, 42%)
+            hsl(191deg 56% 55%),
+            hsl(169deg 65% 42%)
         );
-        box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.2);
+        box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
         border: 0;
         height: 40px;
         margin: 5px 0 0;
@@ -149,13 +149,13 @@
     }
 
     .stripe-button-el:hover {
-        background-color: hsl(169, 65%, 42%);
-        box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
+        background-color: hsl(169deg 65% 42%);
+        box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
     }
 
     .stripe-button-el:active,
     .stripe-button-el:enabled:active {
-        background-color: hsl(169, 70%, 32%);
+        background-color: hsl(169deg 70% 32%);
 
         & span {
             background: 0;
@@ -171,7 +171,7 @@
 
     .stripe-button-el:hover:disabled {
         box-shadow: none;
-        background-color: hsl(0, 0%, 78%);
+        background-color: hsl(0deg 0% 78%);
         pointer-events: none;
     }
 
@@ -247,13 +247,13 @@
     }
 
     .zulip-loading-logo svg circle {
-        fill: hsl(0, 0%, 27%);
-        stroke: hsl(0, 0%, 27%);
+        fill: hsl(0deg 0% 27%);
+        stroke: hsl(0deg 0% 27%);
     }
 
     .zulip-loading-logo svg path {
-        fill: hsl(0, 0%, 100%);
-        stroke: hsl(0, 0%, 100%);
+        fill: hsl(0deg 0% 100%);
+        stroke: hsl(0deg 0% 100%);
     }
 
     #restartsession_loading_indicator,
@@ -335,29 +335,29 @@ input[name="licenses"] {
 
     & textarea {
         box-sizing: border-box;
-        color: hsl(0, 0%, 33%);
-        background-color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 33%);
+        background-color: hsl(0deg 0% 100%);
         border-radius: 4px;
         vertical-align: middle;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         padding: 4px 6px;
         margin-bottom: 10px;
         line-height: 20px;
 
-        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition: border linear 0.2s, box-shadow linear 0.2s;
 
         &:focus {
-            border-color: hsla(206.5, 80%, 62%, 0.8);
+            border-color: hsl(206.5deg 80% 62% / 80%);
             outline: 0;
 
-            box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
-                0 0 8px hsla(206.5, 80%, 62%, 0.6);
+            box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+                0 0 8px hsl(206.5deg 80% 62% / 60%);
 
             &:invalid {
-                border-color: hsl(2, 81%, 55%);
-                box-shadow: 0 0 6px hsl(2, 82%, 85%);
-                color: hsl(1, 45%, 50%);
+                border-color: hsl(2deg 81% 55%);
+                box-shadow: 0 0 6px hsl(2deg 82% 85%);
+                color: hsl(1deg 45% 50%);
             }
         }
     }
@@ -367,11 +367,11 @@ input[name="licenses"] {
         width: 100%;
         padding: 4px 6px;
         font-size: 14px;
-        color: hsl(0, 0%, 33%);
+        color: hsl(0deg 0% 33%);
         border-radius: 4px;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         margin-bottom: 10px;
         cursor: pointer;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
     }
 }
diff --git a/web/styles/portico/email_log.css b/web/styles/portico/email_log.css
index 505b971a9b..f24f99223e 100644
--- a/web/styles/portico/email_log.css
+++ b/web/styles/portico/email_log.css
@@ -29,7 +29,7 @@
             line-height: normal;
 
             &:focus {
-                outline: 1px dotted hsl(0, 0%, 20%);
+                outline: 1px dotted hsl(0deg 0% 20%);
                 outline: 5px auto -webkit-focus-ring-color;
                 outline-offset: -2px;
             }
@@ -41,7 +41,7 @@
         cursor: pointer;
 
         &:focus {
-            outline: 1px dotted hsl(0, 0%, 20%);
+            outline: 1px dotted hsl(0deg 0% 20%);
             outline: 5px auto -webkit-focus-ring-color;
             outline-offset: -2px;
         }
diff --git a/web/styles/portico/footer.css b/web/styles/portico/footer.css
index 0d2087c666..b8ed18f488 100644
--- a/web/styles/portico/footer.css
+++ b/web/styles/portico/footer.css
@@ -1,9 +1,9 @@
 :root {
-    --color-footer-background: hsl(238, 28%, 27%);
-    --color-links: hsl(238, 100%, 82%);
+    --color-footer-background: hsl(238deg 28% 27%);
+    --color-links: hsl(238deg 100% 82%);
 
     @media (prefers-color-scheme: dark) {
-        --color-footer-background: hsl(238, 28%, 21%);
+        --color-footer-background: hsl(238deg 28% 21%);
     }
 }
 
@@ -38,7 +38,7 @@
         font-size: 18px;
         line-height: 133%;
         letter-spacing: 0.1em;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         opacity: 0.8;
         text-transform: uppercase;
         border-bottom: 0;
@@ -85,7 +85,7 @@
     .footer__legal {
         margin: 24px 0 5px;
         padding: 0 52px;
-        border-top: 1px solid hsl(0, 0%, 100%, 0.1);
+        border-top: 1px solid hsl(0deg 0% 100% / 10%);
 
         & a {
             margin-bottom: 10px;
@@ -121,7 +121,7 @@
     }
 
     .footer__legal-container .copyright {
-        color: hsl(0, 0%, 100%, 0.5);
+        color: hsl(0deg 0% 100% / 50%);
         margin-bottom: 8px;
     }
 
diff --git a/web/styles/portico/integrations.css b/web/styles/portico/integrations.css
index a017f4a716..bbaec3cc45 100644
--- a/web/styles/portico/integrations.css
+++ b/web/styles/portico/integrations.css
@@ -1,11 +1,11 @@
-$light-blue-border: hsl(208, 46%, 93%);
-$border-green: hsl(170, 47%, 53%);
-$hover-green: hsl(170, 65%, 85%);
-$text-green: hsl(170, 72%, 32%);
-$category-text: hsl(219, 23%, 33%);
+$light-blue-border: hsl(208deg 46% 93%);
+$border-green: hsl(170deg 47% 53%);
+$hover-green: hsl(170deg 65% 85%);
+$text-green: hsl(170deg 72% 32%);
+$category-text: hsl(219deg 23% 33%);
 
 .portico-landing.integrations {
-    color: hsl(0, 0%, 27%);
+    color: hsl(0deg 0% 27%);
     font-weight: normal;
 
     & h1,
@@ -25,7 +25,7 @@ $category-text: hsl(219, 23%, 33%);
         max-width: 1170px;
         margin: 0 auto;
         border-radius: 10px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         visibility: hidden;
 
         & img {
@@ -91,7 +91,7 @@ $category-text: hsl(219, 23%, 33%);
     .portico-page-subheading {
         font-weight: 400;
         font-size: 1.1em;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
         line-height: 1.2;
         text-align: center;
     }
@@ -109,7 +109,7 @@ $category-text: hsl(219, 23%, 33%);
                 position: relative;
 
                 & input {
-                    box-shadow: 0 0 7px 2px hsla(0, 0%, 0%, 0.03);
+                    box-shadow: 0 0 7px 2px hsl(0deg 0% 0% / 3%);
 
                     font-size: 1em;
                     font-family: inherit;
@@ -334,7 +334,7 @@ $category-text: hsl(219, 23%, 33%);
             font-size: 0.85em;
             margin-top: 5px;
             font-weight: 400;
-            color: hsla(216, 23%, 13%, 0.5);
+            color: hsl(216deg 23% 13% / 50%);
         }
 
         &.without-category {
@@ -591,20 +591,20 @@ $category-text: hsl(219, 23%, 33%);
     }
 
     .portico-page-heading {
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
         font-size: 44px;
     }
 
     .portico-page-subheading {
         font-weight: 300;
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
         max-width: 800px;
         line-height: 150%;
         margin: auto;
     }
 
     .integration-categories-sidebar h3 {
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
         font-size: 20px;
         font-weight: 600;
     }
@@ -626,7 +626,7 @@ $category-text: hsl(219, 23%, 33%);
             border-radius: 4px;
 
             &:hover {
-                border: 1px solid hsl(167, 34%, 56%);
+                border: 1px solid hsl(167deg 34% 56%);
             }
 
             .eligible_realm_logo {
@@ -644,7 +644,7 @@ $category-text: hsl(219, 23%, 33%);
                 .eligible_realm_name {
                     font-weight: 400;
                     font-size: 21px;
-                    color: hsl(220.6, 20%, 33.3%);
+                    color: hsl(220.6deg 20% 33.3%);
                     line-height: 23px;
                     margin: 0 0 2px;
                 }
@@ -652,7 +652,7 @@ $category-text: hsl(219, 23%, 33%);
                 .eligible_realm_description {
                     font-weight: 400;
                     font-size: 15px;
-                    color: hsl(220, 2.7%, 56.5%);
+                    color: hsl(220deg 2.7% 56.5%);
                     line-height: 19px;
                     margin: 0;
                     /* For restricting text to only two lines.
diff --git a/web/styles/portico/integrations_dev_panel.css b/web/styles/portico/integrations_dev_panel.css
index 52a563c1ca..49f230acff 100644
--- a/web/styles/portico/integrations_dev_panel.css
+++ b/web/styles/portico/integrations_dev_panel.css
@@ -8,29 +8,29 @@
     margin-left: 3%;
     margin-right: 3%;
     padding: 20px 10px 15px;
-    background-color: hsla(0, 0%, 100%, 0.48);
-    box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.06);
+    background-color: hsl(0deg 0% 100% / 48%);
+    box-shadow: 0 0 40px hsl(0deg 0% 0% / 6%);
 
     & textarea {
-        color: hsl(0, 0%, 33%);
-        background-color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 33%);
+        background-color: hsl(0deg 0% 100%);
         border-radius: 4px;
         vertical-align: middle;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         padding: 4px 6px;
         margin-bottom: 10px;
 
         font-size: 14px;
 
-        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition: border linear 0.2s, box-shadow linear 0.2s;
 
         &:focus {
-            border-color: hsla(206.5, 80%, 62%, 0.8);
+            border-color: hsl(206.5deg 80% 62% / 80%);
             outline: 0;
 
-            box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
-                0 0 8px hsla(206.5, 80%, 62%, 0.6);
+            box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+                0 0 8px hsl(206.5deg 80% 62% / 60%);
         }
 
         &:read-only {
@@ -49,12 +49,12 @@
         padding: 4px 6px;
         width: 220px;
         font-size: 14px;
-        color: hsl(0, 0%, 33%);
+        color: hsl(0deg 0% 33%);
         border-radius: 4px;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         margin-bottom: 10px;
         cursor: pointer;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         vertical-align: middle;
     }
 }
@@ -69,7 +69,7 @@
     width: 100%;
     height: 500px;
     resize: vertical;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .top-navbar {
@@ -101,7 +101,7 @@
 }
 
 .optional {
-    color: hsl(0, 0%, 50%);
+    color: hsl(0deg 0% 50%);
 }
 
 .pad-small {
diff --git a/web/styles/portico/landing_page.css b/web/styles/portico/landing_page.css
index 29d46d2649..249a3e1b1c 100644
--- a/web/styles/portico/landing_page.css
+++ b/web/styles/portico/landing_page.css
@@ -5,8 +5,8 @@ html {
 
 body {
     margin: 0;
-    background-color: hsl(0, 0%, 100%) !important;
-    color: hsl(0, 0%, 27%);
+    background-color: hsl(0deg 0% 100%) !important;
+    color: hsl(0deg 0% 27%);
     line-height: normal;
 
     max-width: 100vw;
@@ -44,11 +44,11 @@ ul {
 a {
     position: relative;
     cursor: pointer;
-    color: hsl(170, 47%, 33%);
+    color: hsl(170deg 47% 33%);
 
     &:hover,
     &:visited {
-        color: hsl(170, 47%, 33%);
+        color: hsl(170deg 47% 33%);
     }
 
     &:hover,
@@ -109,15 +109,15 @@ ol a:hover {
 }
 
 .box-shadow {
-    box-shadow: 0 0 80px hsla(0, 0%, 0%, 0.12);
+    box-shadow: 0 0 80px hsl(0deg 0% 0% / 12%);
 }
 
 .grey {
-    color: hsl(0, 0%, 60%);
+    color: hsl(0deg 0% 60%);
 }
 
 .dark-grey {
-    color: hsl(0, 0%, 40%);
+    color: hsl(0deg 0% 40%);
 }
 
 .bold {
@@ -133,7 +133,7 @@ ol a:hover {
 }
 
 *::selection {
-    background-color: hsla(31, 84%, 60%, 0.3);
+    background-color: hsl(31deg 84% 60% / 30%);
 }
 
 .center {
@@ -147,42 +147,42 @@ button {
 
     font-family: inherit;
     font-size: 0.7em;
-    background-color: hsl(0, 0%, 100%);
-    color: hsl(0, 0%, 27%);
+    background-color: hsl(0deg 0% 100%);
+    color: hsl(0deg 0% 27%);
 
     line-height: 20px;
     border-radius: 4px;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     outline: none;
 
     &:active {
-        background-color: hsl(0, 0%, 98%);
-        border-color: hsl(0, 0%, 73%);
+        background-color: hsl(0deg 0% 98%);
+        border-color: hsl(0deg 0% 73%);
     }
 
     &.green {
-        color: hsl(0, 0%, 100%);
-        background-color: hsl(170, 47%, 53%);
-        border-color: hsl(169, 45%, 43%);
+        color: hsl(0deg 0% 100%);
+        background-color: hsl(170deg 47% 53%);
+        border-color: hsl(169deg 45% 43%);
 
         &:hover {
-            background-color: hsl(170, 47%, 58%);
+            background-color: hsl(170deg 47% 58%);
         }
 
         &:active {
-            background-color: hsl(170, 47%, 48%);
+            background-color: hsl(170deg 47% 48%);
         }
     }
 
     &.black-current-value {
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
         background-color: transparent;
-        border-color: hsl(0, 0%, 53%);
+        border-color: hsl(0deg 0% 53%);
     }
 }
 
 .silver {
-    color: hsl(0, 0%, 100%) !important;
+    color: hsl(0deg 0% 100%) !important;
     opacity: 0.8;
 
     &:hover {
@@ -199,7 +199,7 @@ button {
 nav {
     width: calc(100% - 80px);
     position: absolute;
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 
     padding: 40px;
 
@@ -210,13 +210,13 @@ nav {
     }
 
     &.white {
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
 
         & li {
             & a,
             a:hover,
             a:visited {
-                color: hsl(0, 0%, 27%);
+                color: hsl(0deg 0% 27%);
             }
         }
 
@@ -224,7 +224,7 @@ nav {
             & li {
                 &.active {
                     &::after {
-                        color: hsl(0, 0%, 27%);
+                        color: hsl(0deg 0% 27%);
                     }
                 }
             }
@@ -232,18 +232,18 @@ nav {
 
         .brand.logo {
             & span {
-                color: hsl(0, 0%, 27%);
+                color: hsl(0deg 0% 27%);
             }
         }
 
         .hamburger {
-            fill: hsl(0, 0%, 27%);
+            fill: hsl(0deg 0% 27%);
         }
     }
 
     .hamburger {
         display: none;
-        fill: hsl(0, 0%, 100%);
+        fill: hsl(0deg 0% 100%);
         cursor: pointer;
         margin-top: 3px;
     }
@@ -261,7 +261,7 @@ nav {
             position: relative;
             left: 5px;
             top: 1px;
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
             font-weight: 600;
             vertical-align: top;
             text-transform: uppercase;
@@ -294,7 +294,7 @@ nav {
             display: inline-block;
             margin: 10px;
 
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
 
             opacity: 0.7;
 
@@ -367,7 +367,7 @@ nav {
         a:hover,
         a:visited {
             text-decoration: none;
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
             font-size: 1.05em;
         }
     }
@@ -422,7 +422,7 @@ nav {
         justify-content: space-around;
         margin: 40px auto;
         padding: 0 30px;
-        color: hsl(219, 21%, 21%);
+        color: hsl(219deg 21% 21%);
 
         &.hero {
             display: flex;
@@ -436,9 +436,9 @@ nav {
 
             max-width: none;
 
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
 
-            background-color: hsla(0, 0%, 0%, 0.1);
+            background-color: hsl(0deg 0% 0% / 10%);
 
             .copy {
                 max-width: 800px;
@@ -463,7 +463,7 @@ nav {
             .image {
                 height: 400px;
                 width: 40%;
-                background-color: hsla(0, 0%, 0%, 0.05);
+                background-color: hsl(0deg 0% 0% / 5%);
             }
         }
 
@@ -476,8 +476,8 @@ nav {
             padding: 50px;
             /* this should only be a thing if the section above is not white */
             margin-top: 0;
-            background-color: hsl(219, 21%, 21%);
-            color: hsl(219, 76%, 93%);
+            background-color: hsl(219deg 21% 21%);
+            color: hsl(219deg 76% 93%);
 
             & img {
                 &.overflow-wave {
@@ -507,7 +507,7 @@ nav {
 
             & a.cta {
                 font-size: 1em;
-                color: hsl(170, 52%, 70%);
+                color: hsl(170deg 52% 70%);
             }
         }
 
@@ -545,10 +545,10 @@ nav {
             padding: 50px 100px;
             max-width: calc(1000px);
 
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             border-radius: 10px;
 
-            box-shadow: 10px 20px 80px hsla(0, 0%, 0%, 0.15);
+            box-shadow: 10px 20px 80px hsl(0deg 0% 0% / 15%);
             margin: 100px auto 150px;
             text-align: center;
 
@@ -586,7 +586,7 @@ nav {
                     font-size: 1.2em;
                     font-weight: 400;
 
-                    color: hsl(0, 0%, 53%);
+                    color: hsl(0deg 0% 53%);
 
                     &::before {
                         content: " ";
@@ -614,8 +614,8 @@ nav {
 
                 background: linear-gradient(
                     135deg,
-                    hsla(0, 0%, 0%, 0.05),
-                    hsla(0, 0%, 0%, 0.2)
+                    hsl(0deg 0% 0% / 5%),
+                    hsl(0deg 0% 0% / 20%)
                 );
                 border-radius: 4px;
 
@@ -650,11 +650,11 @@ nav {
         & a {
             &.feature-block {
                 &:hover {
-                    box-shadow: 0 3px 10px hsl(0, 0%, 75%);
+                    box-shadow: 0 3px 10px hsl(0deg 0% 75%);
                 }
 
                 &:active {
-                    box-shadow: 0 3px 10px hsl(0, 0%, 50%);
+                    box-shadow: 0 3px 10px hsl(0deg 0% 50%);
                 }
             }
         }
@@ -694,7 +694,7 @@ nav {
 /* -- hello page -- */
 .portico-landing.hello {
     background-color: transparent;
-    color: hsl(219, 23%, 33%);
+    color: hsl(219deg 23% 33%);
 
     .hero-buttons {
         margin-top: 40px;
@@ -705,7 +705,7 @@ nav {
     position: relative;
     padding: 60px 50px 30px;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 
     overflow: hidden;
 
@@ -730,7 +730,7 @@ nav {
             font-size: 3em;
             font-weight: 400;
 
-            text-shadow: 0 0 20px hsla(0, 0%, 100%, 0.2);
+            text-shadow: 0 0 20px hsl(0deg 0% 100% / 20%);
         }
 
         & p {
@@ -739,8 +739,8 @@ nav {
             font-size: 1.5em;
             font-weight: 300;
             line-height: 1.4;
-            text-shadow: 0 0 5px hsla(164, 74%, 15%, 0.3),
-                0 0 20px hsla(0, 0%, 100%, 0.2);
+            text-shadow: 0 0 5px hsl(164deg 74% 15% / 30%),
+                0 0 20px hsl(0deg 0% 100% / 20%);
         }
 
         & a {
@@ -753,23 +753,23 @@ nav {
             margin-top: 0;
             padding: 12px 20px;
 
-            background-color: hsl(0, 0%, 100%);
-            border: 2px solid hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
+            border: 2px solid hsl(0deg 0% 100%);
 
             font-size: 1.2em;
             font-weight: 500;
-            color: hsl(148, 23%, 51%);
+            color: hsl(148deg 23% 51%);
 
-            box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.2);
+            box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
 
             transition: all 0.2s ease;
 
             &:hover {
-                box-shadow: 0 3px 10px hsla(0, 0%, 100%, 0.2);
+                box-shadow: 0 3px 10px hsl(0deg 0% 100% / 20%);
             }
 
             &:active {
-                box-shadow: 0 3px 20px hsla(0, 0%, 100%, 0.5);
+                box-shadow: 0 3px 20px hsl(0deg 0% 100% / 50%);
             }
         }
     }
@@ -784,40 +784,40 @@ nav {
     &.dark-blue {
         background: linear-gradient(
             10deg,
-            hsla(196, 58%, 14%, 0) 50%,
-            hsla(196, 58%, 14%, 0.7)
+            hsl(196deg 58% 14% / 0%) 50%,
+            hsl(196deg 58% 14% / 70%)
         );
     }
 
     &.green {
         background: linear-gradient(
             -25deg,
-            hsla(156, 47%, 47%, 0) 40%,
-            hsl(156, 47%, 47%)
+            hsl(156deg 47% 47% / 0%) 40%,
+            hsl(156deg 47% 47%)
         );
     }
 
     &.blue {
         background: linear-gradient(
             25deg,
-            hsla(196, 38%, 51%, 0) 40%,
-            hsl(196, 38%, 51%)
+            hsl(196deg 38% 51% / 0%) 40%,
+            hsl(196deg 38% 51%)
         );
     }
 
     &.sunburst {
         background: linear-gradient(
             5deg,
-            hsla(49, 71%, 68%, 0) 20%,
-            hsl(49, 71%, 68%)
+            hsl(49deg 71% 68% / 0%) 20%,
+            hsl(49deg 71% 68%)
         );
     }
 
     &.white-fade {
         background: linear-gradient(
             0deg,
-            hsl(0, 0%, 98%) 0%,
-            hsla(0, 0%, 98%, 0) 40%
+            hsl(0deg 0% 98%) 0%,
+            hsl(0deg 0% 98% / 0%) 40%
         );
     }
 }
@@ -853,8 +853,12 @@ nav {
 /* -- compare css -- */
 .compare,
 .compare-education {
-    background: linear-gradient(198deg, hsl(170, 34%, 47%), hsl(146, 31%, 60%));
-    color: hsl(0, 0%, 100%);
+    background: linear-gradient(
+        198deg,
+        hsl(170deg 34% 47%),
+        hsl(146deg 31% 60%)
+    );
+    color: hsl(0deg 0% 100%);
 
     .table-container {
         overflow-x: auto;
@@ -883,7 +887,7 @@ nav {
         text-align: left;
         border-collapse: collapse;
         font-weight: 400;
-        color: hsla(0, 0%, 100%, 0.8);
+        color: hsl(0deg 0% 100% / 80%);
 
         & thead th {
             &:last-of-type {
@@ -902,14 +906,14 @@ nav {
     }
 
     & thead {
-        border-bottom: 3px solid hsla(0, 0%, 0%, 0.1);
+        border-bottom: 3px solid hsl(0deg 0% 0% / 10%);
 
         & th {
             font-weight: 600;
             padding: 15px 0;
             font-size: 18px;
 
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
 
             &.normal {
                 font-weight: normal;
@@ -918,12 +922,12 @@ nav {
 
             &:nth-of-type(1) {
                 width: 28%;
-                background-color: hsl(222, 24%, 31%);
+                background-color: hsl(222deg 24% 31%);
             }
 
             &:nth-of-type(2) {
                 width: 18%;
-                background-color: hsl(187, 94%, 20%);
+                background-color: hsl(187deg 94% 20%);
             }
 
             &:nth-of-type(3),
@@ -931,7 +935,7 @@ nav {
             &:nth-of-type(5),
             &:nth-of-type(6) {
                 width: 18%;
-                background-color: hsl(162, 67%, 25%);
+                background-color: hsl(162deg 67% 25%);
             }
         }
     }
@@ -941,24 +945,24 @@ nav {
     }
 
     & tbody tr {
-        border-bottom: 1px solid hsla(360, 0%, 100%, 0.03);
+        border-bottom: 1px solid hsl(360deg 0% 100% / 3%);
 
         & td {
             padding: 10px 0;
 
             &:nth-of-type(1) {
-                background-color: hsl(222, 20%, 40%);
+                background-color: hsl(222deg 20% 40%);
             }
 
             &:nth-of-type(2) {
-                background-color: hsl(186.9, 90.3%, 28.4%);
+                background-color: hsl(186.9deg 90.3% 28.4%);
             }
 
             &:nth-of-type(3),
             &:nth-of-type(4),
             &:nth-of-type(5),
             &:nth-of-type(6) {
-                background-color: hsl(162, 44%, 38%);
+                background-color: hsl(162deg 44% 38%);
             }
 
             &.no {
@@ -1009,16 +1013,16 @@ nav {
 
         line-height: 1.2;
 
-        color: hsl(0, 24%, 23%);
+        color: hsl(0deg 24% 23%);
 
         & a {
-            color: hsl(170, 47%, 73%);
+            color: hsl(170deg 47% 73%);
         }
     }
 }
 
 .compare-education {
-    color: hsl(0, 0%, 0%);
+    color: hsl(0deg 0% 0%);
     background: none;
 
     & table {
@@ -1028,7 +1032,7 @@ nav {
             font-weight: 800;
 
             &.one {
-                color: hsl(0, 0%, 100%, 0.4);
+                color: hsl(0deg 0% 100% / 40%);
             }
         }
 
@@ -1041,7 +1045,7 @@ nav {
 /* -- faq css -- */
 .faqs {
     position: relative;
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
 
     .padded-content {
         position: relative;
@@ -1061,11 +1065,11 @@ nav {
         margin: 50px auto;
         max-width: 700px;
         font-size: 1.2em;
-        color: hsl(223, 6%, 25%);
+        color: hsl(223deg 6% 25%);
 
         .question {
             font-weight: 600;
-            color: hsl(222, 20%, 40%);
+            color: hsl(222deg 20% 40%);
             font-size: 1.1em;
         }
 
@@ -1081,7 +1085,7 @@ nav {
     }
 
     .faq-header-link {
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
 
         &:hover {
             text-decoration: underline;
@@ -1095,7 +1099,7 @@ nav {
         height: 6px;
         margin: 8px 0;
 
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
         border-radius: 3px;
 
         &.small {
@@ -1121,19 +1125,19 @@ nav {
         }
 
         &.red {
-            background-color: hsl(350, 42%, 77%);
+            background-color: hsl(350deg 42% 77%);
         }
 
         &.blue {
-            background-color: hsl(193, 42%, 77%);
+            background-color: hsl(193deg 42% 77%);
         }
 
         &.green {
-            background-color: hsl(119, 42%, 77%);
+            background-color: hsl(119deg 42% 77%);
         }
 
         &.orange {
-            background-color: hsl(30, 42%, 77%);
+            background-color: hsl(30deg 42% 77%);
         }
     }
 
@@ -1144,7 +1148,7 @@ nav {
 
             width: 20px;
             height: 20px;
-            background-color: hsl(0, 0%, 73%);
+            background-color: hsl(0deg 0% 73%);
             border-radius: 4px;
         }
 
@@ -1155,12 +1159,12 @@ nav {
             width: 50px;
             margin-top: 0;
 
-            background-color: hsl(0, 0%, 73%);
+            background-color: hsl(0deg 0% 73%);
         }
     }
 
     .navbar {
-        background-color: hsl(170, 48%, 54%);
+        background-color: hsl(170deg 48% 54%);
         padding: 10px;
     }
 
@@ -1189,10 +1193,10 @@ nav {
             padding: 3px 5px 0;
             margin: 0 5px;
 
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             border-radius: 4px;
 
-            box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.01);
+            box-shadow: 0 0 15px hsl(0deg 0% 0% / 1%);
         }
     }
 }
@@ -1207,9 +1211,9 @@ nav {
     padding: 10px 30px;
 
     border-radius: 12px;
-    box-shadow: 0 0 50px hsla(0, 0%, 0%, 0.2);
+    box-shadow: 0 0 50px hsl(0deg 0% 0% / 20%);
 
-    background-color: hsl(0, 0%, 27%);
+    background-color: hsl(0deg 0% 27%);
 
     z-index: 1;
 
@@ -1223,7 +1227,7 @@ nav {
         height: 10px;
 
         border-radius: 5px;
-        background-color: hsl(0, 0%, 13%);
+        background-color: hsl(0deg 0% 13%);
     }
 
     &::after {
@@ -1236,7 +1240,7 @@ nav {
         height: 25px;
 
         border-radius: 13px;
-        background-color: hsl(0, 0%, 73%);
+        background-color: hsl(0deg 0% 73%);
     }
 
     .main-page {
@@ -1246,17 +1250,17 @@ nav {
         width: calc(100% - 30px);
         margin: 10px;
 
-        border: 5px solid hsl(0, 0%, 13%);
+        border: 5px solid hsl(0deg 0% 13%);
         border-radius: 4px;
 
-        background-color: hsl(0, 0%, 98%);
+        background-color: hsl(0deg 0% 98%);
     }
 }
 
 .portico-landing.hello .features {
     padding: 50px 0 100px;
 
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.hello .open-source {
@@ -1265,7 +1269,7 @@ nav {
     position: relative;
     z-index: 1;
 
-    background-color: hsl(217, 22%, 93%);
+    background-color: hsl(217deg 22% 93%);
 
     .flex {
         min-height: 0;
@@ -1331,7 +1335,7 @@ nav {
 }
 
 .portico-landing .tour {
-    color: hsl(0, 0%, 0%);
+    color: hsl(0deg 0% 0%);
     width: 1200px;
     max-width: 100%;
     margin: 0 auto;
@@ -1343,11 +1347,11 @@ nav {
     margin: 20px auto;
     padding: 30px 20px;
     background: linear-gradient(
-        hsla(220, 20%, 97%, 0.4),
-        hsla(220, 20%, 97%, 0.9)
+        hsl(220deg 20% 97% / 40%),
+        hsl(220deg 20% 97% / 90%)
     );
     border-radius: 12px;
-    box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.02);
+    box-shadow: 0 3px 10px hsl(0deg 0% 0% / 2%);
     position: relative;
 }
 
@@ -1355,9 +1359,13 @@ nav {
     padding: 11px 25px;
     font-size: 1.2rem;
     font-weight: 400;
-    color: hsl(0, 0%, 100%);
-    background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
-    box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.2);
+    color: hsl(0deg 0% 100%);
+    background: linear-gradient(
+        145deg,
+        hsl(191deg 56% 55%),
+        hsl(169deg 65% 42%)
+    );
+    box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
     border: 0;
     position: absolute;
     left: 50%;
@@ -1369,8 +1377,8 @@ nav {
     z-index: 10;
 
     &:hover {
-        background-color: hsl(169, 65%, 42%);
-        box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
+        background-color: hsl(169deg 65% 42%);
+        box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
     }
 }
 
@@ -1380,7 +1388,7 @@ nav {
     display: block;
     width: 100%;
     max-width: 100%;
-    border: 1px solid hsl(0, 0%, 87%);
+    border: 1px solid hsl(0deg 0% 87%);
     opacity: 0.4;
 }
 
@@ -1447,7 +1455,7 @@ nav {
 }
 
 .tour .carousel-inner img {
-    border: 1px solid hsl(210, 8%, 95%);
+    border: 1px solid hsl(210deg 8% 95%);
 
     &.centered-image {
         display: block;
@@ -1523,22 +1531,26 @@ nav {
     font-size: 1.2rem;
     line-height: 20px;
     font-weight: 400;
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 
-    background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
-    box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.2);
+    background: linear-gradient(
+        145deg,
+        hsl(191deg 56% 55%),
+        hsl(169deg 65% 42%)
+    );
+    box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
     border-radius: 4px;
 
     &:hover {
-        background-color: hsl(169, 65%, 42%);
-        box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
+        background-color: hsl(169deg 65% 42%);
+        box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
     }
 }
 
 .tour .carousel-control {
     background: 0;
     border: 0;
-    color: hsl(223, 13%, 52%);
+    color: hsl(223deg 13% 52%);
     font-size: 2em;
     top: 50%;
     font-weight: 400;
@@ -1546,7 +1558,7 @@ nav {
     border-radius: 0;
 
     &:hover {
-        color: hsl(220, 23%, 33%);
+        color: hsl(220deg 23% 33%);
     }
 
     &.right {
@@ -1578,7 +1590,7 @@ nav {
         margin-left: 10px;
         text-indent: -999px;
         cursor: pointer;
-        background-color: hsl(222, 12%, 66%);
+        background-color: hsl(222deg 12% 66%);
         transition: background 0.1s ease;
 
         &::before {
@@ -1602,14 +1614,14 @@ nav {
         }
 
         &.active {
-            background-color: hsl(220, 23%, 33%);
+            background-color: hsl(220deg 23% 33%);
         }
     }
 }
 
 .portico-landing .testimonials {
-    color: hsl(0, 0%, 100%);
-    background-color: hsl(168, 43%, 24%);
+    color: hsl(0deg 0% 100%);
+    background-color: hsl(168deg 43% 24%);
 }
 
 .portico-landing .testimonials .text-header .text-content {
@@ -1640,7 +1652,7 @@ nav {
 
 .portico-landing .testimonials .fa-chevron-left,
 .portico-landing .testimonials .fa-chevron-right {
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     opacity: 0.5;
     position: absolute;
     font-size: 36px;
@@ -1675,7 +1687,7 @@ nav {
     margin-top: 5px;
     margin-bottom: 30px;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     opacity: 0.7;
     font-weight: 400;
     font-style: normal;
@@ -1696,7 +1708,7 @@ nav {
     width: 60%;
     margin: 0 auto;
     border: none;
-    border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
+    border-bottom: 1px solid hsl(0deg 0% 100% / 20%);
 }
 
 .portico-landing .testimonials .company-container {
@@ -1726,7 +1738,7 @@ nav {
     height: 60px;
     width: calc(25% - 44px);
 
-    background-color: hsl(0, 0%, 67%);
+    background-color: hsl(0deg 0% 67%);
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
@@ -1789,9 +1801,13 @@ nav {
     padding: 200px 80px 100px;
     margin-top: -50px;
 
-    background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
+    background: linear-gradient(
+        145deg,
+        hsl(191deg 56% 55%),
+        hsl(169deg 65% 42%)
+    );
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.hello .apps .triangle {
@@ -1802,16 +1818,16 @@ nav {
     height: 0;
     border-style: solid;
     border-width: 150px 100vw 0 0;
-    border-color: hsl(0, 0%, 98%) transparent transparent transparent;
+    border-color: hsl(0deg 0% 98%) transparent transparent transparent;
 }
 
 .portico-landing.hello .apps .arrow {
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     font-weight: 400;
 }
 
 .portico-landing.hello .apps .arrow::before {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.hello .apps .left-side,
@@ -1892,13 +1908,13 @@ nav {
     padding: 0 5px;
     transition: all 0.3s ease;
     margin: 10px 5px;
-    color: hsl(219, 23%, 33%);
+    color: hsl(219deg 23% 33%);
     border-radius: 5px;
-    border: 1px solid hsl(206, 44%, 93%);
+    border: 1px solid hsl(206deg 44% 93%);
 }
 
 .portico-landing.hello .integrations .integration-icons .group:hover {
-    border: 1px solid hsl(170, 47%, 53%);
+    border: 1px solid hsl(170deg 47% 53%);
 }
 
 .portico-landing.hello .integrations .integration-logo {
@@ -1959,17 +1975,21 @@ nav {
 
 .portico-landing.apps .main,
 .portico-landing.features-app .main {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.apps .hero {
     position: relative;
 
     padding: 100px 50px 50px;
-    background: linear-gradient(35deg, hsl(197, 100%, 16%), hsl(166, 45%, 49%));
+    background: linear-gradient(
+        35deg,
+        hsl(197deg 100% 16%),
+        hsl(166deg 45% 49%)
+    );
     height: 600px;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 
     overflow: hidden;
 }
@@ -2013,7 +2033,7 @@ nav {
 }
 
 .portico-landing.apps .hero .info .cta {
-    text-shadow: 0 0 60px hsla(0, 0%, 0%, 0.3);
+    text-shadow: 0 0 60px hsl(0deg 0% 0% / 30%);
     max-width: 600px;
 }
 
@@ -2040,7 +2060,7 @@ nav {
 }
 
 .portico-landing.apps .other-apps {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     padding: 50px 50px 120px;
 
     text-align: center;
@@ -2066,7 +2086,7 @@ nav {
     border-radius: 70px;
 
     /* Reset color since we don't want default link styling. */
-    color: hsl(0, 0%, 27%);
+    color: hsl(0deg 0% 27%);
 
     font-size: 3em;
     text-align: center;
@@ -2075,7 +2095,7 @@ nav {
 }
 
 .portico-landing.apps .other-apps .apps .icon:hover {
-    background: linear-gradient(-45deg, hsl(0, 0%, 83%), hsl(0, 0%, 98%));
+    background: linear-gradient(-45deg, hsl(0deg 0% 83%), hsl(0deg 0% 98%));
 }
 
 .portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
@@ -2114,7 +2134,7 @@ nav {
 /* -- /for/open-source/ -- */
 .portico-landing.why-page {
     padding-top: 0;
-    color: hsl(223, 6%, 25%);
+    color: hsl(223deg 6% 25%);
 }
 
 .portico-landing.why-page .main {
@@ -2132,8 +2152,8 @@ nav {
         padding: 50px 50px 70px;
     }
 
-    background-color: hsl(153, 32%, 55%);
-    color: hsl(0, 0%, 100%);
+    background-color: hsl(153deg 32% 55%);
+    color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.why-page .hero.small-hero {
@@ -2163,8 +2183,8 @@ nav {
 }
 
 .portico-landing.why-page .main blockquote {
-    background-color: hsl(0, 0%, 100%);
-    border-color: hsl(168, 24%, 51%);
+    background-color: hsl(0deg 0% 100%);
+    border-color: hsl(168deg 24% 51%);
     padding: 20px 30px;
     margin-top: 20px;
     font-size: 1.05em;
@@ -2173,7 +2193,7 @@ nav {
         line-height: 1.5;
         margin: 0;
         font-weight: 400;
-        color: hsl(220, 23%, 33%);
+        color: hsl(220deg 23% 33%);
     }
 
     & p:last-child {
@@ -2209,7 +2229,7 @@ nav {
     font-size: 0.8em;
     font-weight: normal;
     line-height: 100%;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
 }
 
 .portico-landing.why-page .team h2 {
@@ -2240,7 +2260,7 @@ nav {
     background-position: center;
 
     .bg-dimmer {
-        background-color: hsl(224, 52%, 12%, 0.75);
+        background-color: hsl(224deg 52% 12% / 75%);
     }
 }
 
@@ -2275,7 +2295,7 @@ nav {
     top: 0;
     left: 0;
 
-    background-color: hsla(224, 52%, 12%, 0.7);
+    background-color: hsl(224deg 52% 12% / 70%);
 
     z-index: 0;
 }
@@ -2286,8 +2306,8 @@ nav {
 }
 
 .portico-landing.why-page .testimonials {
-    background-color: hsl(168, 43%, 24%);
-    color: hsl(0, 0%, 100%);
+    background-color: hsl(168deg 43% 24%);
+    color: hsl(0deg 0% 100%);
     margin-bottom: 40px;
 }
 
@@ -2324,7 +2344,7 @@ nav {
     margin-top: 5px;
     margin-bottom: 30px;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     opacity: 0.7;
     font-weight: 400;
     line-height: 140%;
@@ -2356,7 +2376,7 @@ nav {
 
     transform: translateY(50px);
 
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.hello .apps .screen.android {
@@ -2369,10 +2389,10 @@ nav {
 
     background: linear-gradient(
         90deg,
-        hsl(0, 0%, 27%) 0%,
-        hsl(0, 0%, 33%) 8%,
-        hsl(0, 0%, 33%) 92%,
-        hsl(0, 0%, 27%) 100%
+        hsl(0deg 0% 27%) 0%,
+        hsl(0deg 0% 33%) 8%,
+        hsl(0deg 0% 33%) 92%,
+        hsl(0deg 0% 27%) 100%
     );
 }
 
@@ -2390,14 +2410,14 @@ nav {
 
     width: 40px;
     height: 5px;
-    background-color: hsl(0, 0%, 80%);
+    background-color: hsl(0deg 0% 80%);
 }
 
 .portico-landing.hello .apps .screen.ios::after {
     top: auto;
     bottom: 7px;
     left: calc(50% - 12.5px);
-    background-color: hsl(0, 0%, 80%);
+    background-color: hsl(0deg 0% 80%);
 }
 
 .portico-landing.hello .apps .screen.android::before {
@@ -2410,17 +2430,17 @@ nav {
     left: calc(50% - 17.5px);
 
     border-radius: 8px;
-    background-color: hsl(0, 0%, 13%);
+    background-color: hsl(0deg 0% 13%);
     width: 35px;
     height: 20px;
 }
 
 .portico-landing.hello .apps .screen.ios .main-page {
-    border-color: hsl(0, 0%, 87%);
+    border-color: hsl(0deg 0% 87%);
 }
 
 .portico-landing.hello .apps .screen.android .main-page {
-    border-color: hsl(0, 0%, 13%);
+    border-color: hsl(0deg 0% 13%);
 }
 
 /* -- gradients -- */
@@ -2441,40 +2461,40 @@ nav {
 .gradients .gradient.dark-blue {
     background: linear-gradient(
         10deg,
-        hsla(196, 58%, 14%, 0) 50%,
-        hsla(196, 58%, 14%, 0.7)
+        hsl(196deg 58% 14% / 0%) 50%,
+        hsl(196deg 58% 14% / 70%)
     );
 }
 
 .gradients .gradient.green {
     background: linear-gradient(
         -25deg,
-        hsla(156, 47%, 47%, 0) 40%,
-        hsl(156, 47%, 47%)
+        hsl(156deg 47% 47% / 0%) 40%,
+        hsl(156deg 47% 47%)
     );
 }
 
 .gradients .gradient.blue {
     background: linear-gradient(
         25deg,
-        hsla(196, 38%, 51%, 0) 40%,
-        hsl(196, 38%, 51%)
+        hsl(196deg 38% 51% / 0%) 40%,
+        hsl(196deg 38% 51%)
     );
 }
 
 .gradients .gradient.sunburst {
     background: linear-gradient(
         5deg,
-        hsla(49, 71%, 68%, 0) 20%,
-        hsl(49, 71%, 68%)
+        hsl(49deg 71% 68% / 0%) 20%,
+        hsl(49deg 71% 68%)
     );
 }
 
 .gradients .gradient.white-fade {
     background: linear-gradient(
         0deg,
-        hsl(0, 0%, 100%) 0%,
-        hsla(0, 0%, 98%, 0) 40%
+        hsl(0deg 0% 100%) 0%,
+        hsl(0deg 0% 98% / 0%) 40%
     );
 }
 
@@ -2488,7 +2508,7 @@ nav {
     font-size: 2.5em;
     margin: 0;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 }
 
 .portico-landing.plans .main .padded-content > h2 {
@@ -2498,7 +2518,7 @@ nav {
 
     margin-bottom: 50px;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 }
 
 .pricing-model .pricing-container {
@@ -2514,7 +2534,7 @@ nav {
     padding: 10px;
     margin-bottom: 3px;
 
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 
     font-size: 2em;
     font-weight: 300;
@@ -2528,10 +2548,10 @@ nav {
     width: 300px;
     height: 500px;
 
-    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
 
     text-align: left;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 
     transition-property: all;
     transition-duration: 0.3s;
@@ -2556,14 +2576,14 @@ nav {
 
 .pricing-model .pricing-container hr {
     border: none;
-    border-bottom: 2px solid hsl(170, 47%, 53%);
+    border-bottom: 2px solid hsl(170deg 47% 53%);
     margin: 15px 0;
 }
 
 .pricing-model .pricing-container .text-content .description {
     font-size: 0.9em;
     font-weight: 400;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
 }
 
 .pricing-model .pricing-container ul.feature-list {
@@ -2602,7 +2622,7 @@ nav {
     width: 100%;
     height: 150px;
 
-    background-color: hsl(0, 0%, 93%);
+    background-color: hsl(0deg 0% 93%);
 }
 
 .pricing-model .pricing-container .text-content .price::before {
@@ -2614,7 +2634,7 @@ nav {
 
     font-size: 2rem;
     font-weight: 300;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
 }
 
 .pricing-model .pricing-container .text-content .price {
@@ -2635,7 +2655,7 @@ nav {
 
     font-size: 0.9em;
     font-weight: 400;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
 
     text-align: left;
     white-space: nowrap;
@@ -2656,7 +2676,7 @@ nav {
 }
 
 .pricing-model .pricing-container .price-box:focus .button {
-    box-shadow: 0 0 25px hsl(169, 48%, 60%);
+    box-shadow: 0 0 25px hsl(169deg 48% 60%);
     animation: box-shadow-pulse 2s infinite;
 }
 
@@ -2665,7 +2685,7 @@ nav {
     height: 55px;
 
     .pricing-period {
-        color: hsl(0, 0%, 27%);
+        color: hsl(0deg 0% 27%);
     }
 }
 
@@ -2684,7 +2704,7 @@ nav {
     &.plans_top_faq {
         font-size: 17px;
         font-weight: 400;
-        color: hsl(0, 0%, 53%);
+        color: hsl(0deg 0% 53%);
         padding-top: 0;
 
         & p {
@@ -2716,7 +2736,7 @@ nav {
     height: 25px;
 
     font-weight: 400;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
     font-style: italic;
     text-align: center;
 
@@ -2744,20 +2764,20 @@ nav {
 }
 
 .portico-landing.jobs .what-were-building {
-    background-color: hsl(217, 22%, 93%);
+    background-color: hsl(217deg 22% 93%);
 }
 
 @keyframes box-shadow-pulse {
     0% {
-        box-shadow: 0 0 0 hsla(170, 47%, 60%, 1);
+        box-shadow: 0 0 0 hsl(170deg 47% 60%);
     }
 
     50% {
-        box-shadow: 0 0 25px hsla(170, 47%, 60%, 0.8);
+        box-shadow: 0 0 25px hsl(170deg 47% 60% / 80%);
     }
 
     100% {
-        box-shadow: 0 0 0 hsla(170, 47%, 60%, 1);
+        box-shadow: 0 0 0 hsl(170deg 47% 60%);
     }
 }
 
@@ -2887,7 +2907,7 @@ nav {
             text-align: center;
 
             & span {
-                color: hsl(0, 0%, 100%);
+                color: hsl(0deg 0% 100%);
             }
         }
 
@@ -3260,7 +3280,7 @@ nav {
             z-index: 11;
 
             > ul.show {
-                outline-color: hsla(203, 43%, 22%, 0.7);
+                outline-color: hsl(203deg 43% 22% / 70%);
             }
         }
 
@@ -3276,10 +3296,10 @@ nav {
             width: 300px;
             padding-left: 30px;
 
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             transform: translate(-350px, 0);
 
-            box-shadow: 0 0 80px hsla(0, 0%, 0%, 0.12);
+            box-shadow: 0 0 80px hsl(0deg 0% 0% / 12%);
 
             overflow-y: auto;
 
@@ -3375,7 +3395,7 @@ nav {
         font-size: 1.5rem;
         line-height: 30px;
         text-align: right;
-        color: hsl(0, 0%, 27%);
+        color: hsl(0deg 0% 27%);
 
         background-size: 40px auto;
         background-image: url("../../images/zulip-logo.svg");
@@ -3393,7 +3413,7 @@ nav {
     nav ul li a,
     nav ul div.dropdown div.dropdown-label,
     .portico-header .dropdown-pill .realm-name {
-        color: hsl(0, 0%, 27%) !important;
+        color: hsl(0deg 0% 27%) !important;
     }
 
     .portico-landing.apps .main ul.sidebar {
@@ -3605,24 +3625,24 @@ nav {
     .gradients .gradient.green {
         background: linear-gradient(
             -25deg,
-            hsla(156, 47%, 47%, 0) 10%,
-            hsl(156, 47%, 47%) 80%
+            hsl(156deg 47% 47% / 0%) 10%,
+            hsl(156deg 47% 47%) 80%
         );
     }
 
     .gradients .gradient.blue {
         background: linear-gradient(
             25deg,
-            hsla(196, 38%, 51%, 0) 10%,
-            hsl(196, 38%, 51%) 80%
+            hsl(196deg 38% 51% / 0%) 10%,
+            hsl(196deg 38% 51%) 80%
         );
     }
 
     .gradients .gradient.sunburst {
         background: linear-gradient(
             5deg,
-            hsla(49, 71%, 68%, 0) 20%,
-            hsl(49, 71%, 68%) 80%
+            hsl(49deg 71% 68% / 0%) 20%,
+            hsl(49deg 71% 68%) 80%
         );
     }
 
@@ -3701,7 +3721,7 @@ nav {
 #download-android-apk,
 #download-mac-arm64 {
     display: inline-block;
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     font-size: 13px;
     padding-left: 10px;
 }
@@ -3818,7 +3838,7 @@ nav {
     }
 
     .topics-image {
-        border: solid 2px hsl(0, 0%, 60%);
+        border: solid 2px hsl(0deg 0% 60%);
     }
 }
 
@@ -3832,7 +3852,7 @@ nav {
     & header {
         & b {
             font-weight: 600;
-            color: hsl(169, 45%, 43%);
+            color: hsl(169deg 45% 43%);
         }
     }
 }
@@ -3858,7 +3878,7 @@ nav {
     border: 2px solid;
     border-radius: 4px;
     background: none;
-    color: hsl(169, 45%, 43%);
+    color: hsl(169deg 45% 43%);
     vertical-align: middle;
     position: relative;
     z-index: 1;
@@ -3882,14 +3902,14 @@ nav {
     }
 
     &:hover {
-        border-color: hsl(169, 45%, 43%);
-        background-color: hsl(170, 47%, 53%);
-        color: hsl(0, 0%, 100%);
+        border-color: hsl(169deg 45% 43%);
+        background-color: hsl(170deg 47% 53%);
+        color: hsl(0deg 0% 100%);
     }
 }
 
 .quote {
-    background: hsl(218, 46%, 43%);
+    background: hsl(218deg 46% 43%);
     padding: 1em;
     border-radius: 1em;
     font-weight: 400;
@@ -3898,7 +3918,7 @@ nav {
     flex-direction: column;
 
     & a {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
 
         &.case-study-link {
             margin-left: 20px;
@@ -3912,7 +3932,7 @@ nav {
 
     .author,
     blockquote {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         margin: 5px 20px 20px;
     }
 
@@ -3934,10 +3954,10 @@ nav {
     & blockquote {
         font-size: 17px;
         font-weight: 400;
-        color: hsl(223, 6%, 25%);
-        border-left: 6px solid hsl(218, 46%, 43%);
+        color: hsl(223deg 6% 25%);
+        border-left: 6px solid hsl(218deg 46% 43%);
         position: relative;
-        background: hsl(0, 0%, 93%);
+        background: hsl(0deg 0% 93%);
         padding: 20px;
     }
 
@@ -3969,7 +3989,7 @@ nav {
 
     .hero {
         & a {
-            color: hsl(170, 76%, 64%);
+            color: hsl(170deg 76% 64%);
         }
     }
 
@@ -3979,15 +3999,15 @@ nav {
         justify-content: center;
 
         & a {
-            color: hsl(170, 47%, 33%);
+            color: hsl(170deg 47% 33%);
             font-weight: 600;
             font-size: 15px;
             margin: 10px;
 
             &:hover {
-                color: hsl(0, 0%, 100%);
-                background-color: hsl(170, 47%, 33%);
-                border-color: hsl(170, 47%, 33%);
+                color: hsl(0deg 0% 100%);
+                background-color: hsl(170deg 47% 33%);
+                border-color: hsl(170deg 47% 33%);
             }
         }
     }
@@ -4103,7 +4123,7 @@ nav {
                     width: 100%;
                     text-align: center;
                     font-weight: 550;
-                    color: hsl(169, 46%, 33%);
+                    color: hsl(169deg 46% 33%);
                 }
             }
         }
@@ -4112,7 +4132,7 @@ nav {
 
 .portico-landing.why-page.case-study-page {
     .bg-dimmer {
-        background-color: hsl(224, 52%, 12%, 0.86);
+        background-color: hsl(224deg 52% 12% / 86%);
     }
 }
 
@@ -4156,7 +4176,7 @@ nav {
             }
 
             .plan-title {
-                color: hsl(0, 0%, 0%);
+                color: hsl(0deg 0% 0%);
             }
         }
     }
@@ -4181,7 +4201,7 @@ nav {
     padding-bottom: 120px;
 
     .bg-dimmer {
-        background-color: hsla(224, 52%, 12%, 0.85);
+        background-color: hsl(224deg 52% 12% / 85%);
     }
 
     .padded-content {
@@ -4196,10 +4216,10 @@ nav {
     }
 
     .discounts-section .register-buttons a {
-        color: hsl(169, 71%, 64%);
+        color: hsl(169deg 71% 64%);
 
         &:hover {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
         }
     }
 }
@@ -4242,7 +4262,7 @@ nav {
             padding: 30px;
 
             &:nth-child(even) {
-                background: hsl(171, 49%, 39%, 0.21);
+                background: hsl(171deg 49% 39% / 21%);
                 border-radius: 10px;
             }
         }
@@ -4260,7 +4280,7 @@ nav {
         height: 0;
         border-style: solid;
         border-width: 150px 100vw 0 0;
-        border-color: hsl(0, 0%, 100%) transparent transparent transparent;
+        border-color: hsl(0deg 0% 100%) transparent transparent transparent;
     }
 
     .quote {
@@ -4272,8 +4292,8 @@ nav {
         border-radius: 0;
         background: linear-gradient(
             145deg,
-            hsl(191, 56%, 55%),
-            hsl(169, 65%, 42%)
+            hsl(191deg 56% 55%),
+            hsl(169deg 65% 42%)
         );
 
         & blockquote {
@@ -4292,7 +4312,7 @@ nav {
         flex-direction: column;
         width: 100%;
         margin: 0;
-        background: hsl(171, 49%, 39%, 0.21);
+        background: hsl(171deg 49% 39% / 21%);
         padding: 50px 0;
 
         .feature-row {
@@ -4311,15 +4331,15 @@ nav {
                 flex-direction: column;
                 width: 40vw;
                 height: 350px;
-                box-shadow: 0 1px 1px 0 hsla(193, 100%, 7.1%, 0.3),
-                    1px 1px 1px 0 hsla(193, 100%, 7.1%, 0.15),
-                    -1px 1px 1px 0 hsla(193, 100%, 7.1%, 0.15);
+                box-shadow: 0 1px 1px 0 hsl(193deg 100% 7.1% / 30%),
+                    1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%),
+                    -1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%);
 
-                background: hsl(0, 0%, 100%);
+                background: hsl(0deg 0% 100%);
                 text-align: left;
                 margin: 10px 0;
                 padding: 50px 30px 0;
-                border-top: 5px solid hsl(171, 49%, 39%);
+                border-top: 5px solid hsl(171deg 49% 39%);
 
                 @media (width < 1000px) {
                     height: 400px;
@@ -4365,8 +4385,8 @@ nav {
             padding: 50px;
             background: linear-gradient(
                 180deg,
-                hsl(191, 56%, 55%),
-                hsl(169, 65%, 42%)
+                hsl(191deg 56% 55%),
+                hsl(169deg 65% 42%)
             );
 
             @media (width <= 540px) {
@@ -4378,7 +4398,7 @@ nav {
             }
 
             & h1 {
-                color: hsl(0, 0%, 100%);
+                color: hsl(0deg 0% 100%);
             }
         }
     }
@@ -4394,13 +4414,13 @@ nav {
         padding: 11px 25px;
         font-size: 1.2rem;
         font-weight: 400;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         background: linear-gradient(
             145deg,
-            hsl(191, 56%, 55%),
-            hsl(169, 65%, 42%)
+            hsl(191deg 56% 55%),
+            hsl(169deg 65% 42%)
         );
-        box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.2);
+        box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
         border: 0;
         width: 200px;
         height: 50px;
@@ -4408,12 +4428,12 @@ nav {
         border-radius: 4px;
 
         &:visited {
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
         }
 
         &:hover {
-            background-color: hsl(169, 65%, 42%);
-            box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
+            background-color: hsl(169deg 65% 42%);
+            box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
         }
     }
 }
diff --git a/web/styles/portico/markdown.css b/web/styles/portico/markdown.css
index 4fe7b0afe9..a2b77f9099 100644
--- a/web/styles/portico/markdown.css
+++ b/web/styles/portico/markdown.css
@@ -25,7 +25,7 @@
     }
 
     & h1 {
-        border-bottom: 1px solid hsl(0, 0%, 93%);
+        border-bottom: 1px solid hsl(0deg 0% 93%);
         padding-bottom: 10px;
         margin-bottom: 15px;
 
@@ -133,8 +133,8 @@
                 vertical-align: top;
                 padding: 3px 6.5px 3px 7.5px;
                 margin-right: 5px;
-                background-color: hsl(170, 48%, 54%);
-                color: hsl(0, 0%, 100%);
+                background-color: hsl(170deg 48% 54%);
+                color: hsl(0deg 0% 100%);
                 border-radius: 100%;
                 font-size: 0.9em;
                 line-height: 1.1;
@@ -142,7 +142,7 @@
             }
 
             .codehilite {
-                background-color: hsl(0, 0%, 100%);
+                background-color: hsl(0deg 0% 100%);
 
                 & pre {
                     white-space: pre;
@@ -190,7 +190,7 @@
     .content {
         padding: 30px;
         max-width: 700px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
 
         & ol li p:not(:first-child) {
             display: block;
@@ -215,11 +215,11 @@
     }
 
     & a {
-        color: hsl(176, 46%, 41%);
+        color: hsl(176deg 46% 41%);
         font-weight: 600;
 
         & code {
-            color: hsl(176, 46%, 41%);
+            color: hsl(176deg 46% 41%);
         }
     }
 
@@ -229,8 +229,8 @@
 
     & img {
         vertical-align: top;
-        box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.05);
-        border: 1px solid hsl(0, 0%, 87%);
+        box-shadow: 0 0 4px hsl(0deg 0% 0% / 5%);
+        border: 1px solid hsl(0deg 0% 87%);
         border-radius: 4px;
 
         &.inline {
@@ -263,8 +263,8 @@
     .keyboard_tip {
         position: relative;
         display: block;
-        background-color: hsl(210, 22%, 96%);
-        border: 1px solid hsl(210, 22%, 90%);
+        background-color: hsl(210deg 22% 96%);
+        border: 1px solid hsl(210deg 22% 90%);
         border-radius: 4px;
         padding: 10px;
         margin: 5px 0;
@@ -280,8 +280,8 @@
 
     .tip,
     .keyboard_tip {
-        background-color: hsl(46, 63%, 95%);
-        border: 1px solid hsl(46, 63%, 84%);
+        background-color: hsl(46deg 63% 95%);
+        border: 1px solid hsl(46deg 63% 84%);
     }
 
     .tip::before {
@@ -306,16 +306,16 @@
         border-radius: 6px;
 
         &.grey {
-            border: 1px solid hsl(0, 0%, 80%);
+            border: 1px solid hsl(0deg 0% 80%);
         }
 
         &.grey-line {
-            border: 1px solid hsl(0, 0%, 80%);
+            border: 1px solid hsl(0deg 0% 80%);
             top: 2px;
 
             &::after {
                 content: "";
-                background: hsl(0, 0%, 80%);
+                background: hsl(0deg 0% 80%);
                 height: 1.5px;
                 width: 6px;
                 display: block;
@@ -324,34 +324,34 @@
         }
 
         &.orange {
-            border: 1px solid hsl(29, 84%, 51%);
+            border: 1px solid hsl(29deg 84% 51%);
             background: linear-gradient(
                 to bottom,
-                hsla(0, 0%, 100%, 0) 50%,
-                hsla(29, 84%, 51%, 1) 50%
+                hsl(0deg 0% 100% / 0%) 50%,
+                hsl(29deg 84% 51%) 50%
             );
         }
 
         &.green {
-            border: 1px solid hsl(106, 74%, 44%);
-            background-color: hsla(106, 74%, 44%, 0.3);
+            border: 1px solid hsl(106deg 74% 44%);
+            background-color: hsl(106deg 74% 44% / 30%);
         }
 
         &.green.solid {
-            background-color: hsl(106, 74%, 44%);
+            background-color: hsl(106deg 74% 44%);
         }
     }
 
     & kbd {
         /* Same as kbd in app_components.css */
         display: inline-block;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         border-radius: 4px;
         font-weight: 600;
         white-space: nowrap;
-        background-color: hsl(0, 0%, 98%);
-        color: hsl(0, 0%, 20%);
-        text-shadow: 0 1px 0 hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 98%);
+        color: hsl(0deg 0% 20%);
+        text-shadow: 0 1px 0 hsl(0deg 0% 100%);
         /* Different from app_components.css */
         /* Removed margin setting */
         font-size: 0.85em;
@@ -373,12 +373,12 @@
         font-size: 0.825em;
         unicode-bidi: embed;
         direction: ltr;
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
         border-radius: 3px;
         /* Different from base rules for code elements in rendered_markdown.css */
         white-space: initial;
         padding: 0 4px;
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 
     & pre {
@@ -409,11 +409,11 @@
                 cursor: pointer;
 
                 &.active {
-                    color: hsl(176, 46%, 41%);
+                    color: hsl(176deg 46% 41%);
                     margin-bottom: -1px;
 
-                    border: 1px solid hsl(0, 0%, 87%);
-                    border-bottom: 1px solid hsl(0, 0%, 100%);
+                    border: 1px solid hsl(0deg 0% 87%);
+                    border-bottom: 1px solid hsl(0deg 0% 100%);
                     border-radius: 4px 4px 0 0;
                 }
             }
@@ -426,7 +426,7 @@
         .blocks {
             padding: 10px;
             margin-bottom: 10px;
-            border: 1px solid hsl(0, 0%, 87%);
+            border: 1px solid hsl(0deg 0% 87%);
 
             & > div {
                 display: none;
diff --git a/web/styles/portico/portico.css b/web/styles/portico/portico.css
index 53cf542725..5cbe440b8e 100644
--- a/web/styles/portico/portico.css
+++ b/web/styles/portico/portico.css
@@ -1,5 +1,5 @@
 body {
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
     font-family: "Source Sans 3", sans-serif;
     line-height: 150%;
     height: 100%;
@@ -18,7 +18,7 @@ html {
 
 .digest-address-link {
     margin-top: 10px;
-    color: hsl(0, 0%, 60%);
+    color: hsl(0deg 0% 60%);
     font-size: 12px;
     text-align: center;
 }
@@ -37,8 +37,8 @@ html {
     padding: 15px 0;
     height: 29px;
 
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1);
+    background-color: hsl(0deg 0% 100%);
+    box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
 
     z-index: 100;
 }
@@ -62,13 +62,13 @@ html {
    which look nicer against a different background */
 .api-center .code-section {
     .blocks {
-        background-color: hsl(0, 0%, 98%);
+        background-color: hsl(0deg 0% 98%);
     }
 
     & ul.nav {
         & li.active {
-            background-color: hsl(0, 0%, 98%);
-            border-bottom: 1px solid hsl(0, 0%, 98%);
+            background-color: hsl(0deg 0% 98%);
+            border-bottom: 1px solid hsl(0deg 0% 98%);
         }
     }
 }
@@ -86,17 +86,17 @@ html {
 
 .digest-email-html {
     padding: 20px;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     border-radius: 5px;
 }
 
 .app.help {
     display: inline-flex;
 
-    box-shadow: 0 -20px 50px hsla(0, 0%, 0%, 0.04);
+    box-shadow: 0 -20px 50px hsl(0deg 0% 0% / 4%);
     overflow: auto;
 
-    color: hsl(0, 0%, 27%);
+    color: hsl(0deg 0% 27%);
 
     .hamburger {
         display: none;
@@ -120,11 +120,11 @@ html {
         /* 100vh - navbar - paddingTop - paddingBottom - bottomNav */
         height: calc(100vh - 59px);
 
-        border-right: 1px solid hsl(219, 10%, 97%);
+        border-right: 1px solid hsl(219deg 10% 97%);
         overflow: auto;
 
-        background-color: hsl(153, 32%, 55%);
-        color: hsl(0, 0%, 100%);
+        background-color: hsl(153deg 32% 55%);
+        color: hsl(0deg 0% 100%);
 
         -webkit-overflow-scrolling: touch;
 
@@ -235,7 +235,7 @@ html {
 
         & a {
             &.highlighted {
-                background-color: hsl(152, 40%, 42%);
+                background-color: hsl(152deg 40% 42%);
 
                 /* Don't show the focus outline for the highlighted page. */
                 outline: 0;
@@ -245,7 +245,7 @@ html {
 }
 
 .help .markdown {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     width: calc(100vw - 300px);
     height: calc(100vh - 59px);
 }
@@ -286,15 +286,15 @@ html {
     font-size: 0.9rem;
 
     &.text-error {
-        color: hsl(1.1, 44.7%, 50.4%);
+        color: hsl(1.1deg 44.7% 50.4%);
     }
 }
 
 a.title {
-    color: hsl(0, 0%, 0%);
+    color: hsl(0deg 0% 0%);
 
     &:hover {
-        color: hsl(0, 0%, 50%);
+        color: hsl(0deg 0% 50%);
         text-decoration: none;
     }
 }
@@ -353,8 +353,8 @@ label.text-error {
 }
 
 input.text-error {
-    border-color: hsl(0, 100%, 50%);
-    outline-color: hsl(0, 100%, 50%);
+    border-color: hsl(0deg 100% 50%);
+    outline-color: hsl(0deg 100% 50%);
 }
 
 .portico-container {
@@ -395,13 +395,13 @@ input.text-error {
         a:focus,
         a:hover {
             text-decoration: none;
-            color: hsl(0, 0%, 20%);
+            color: hsl(0deg 0% 20%);
         }
 
         .light {
             font-size: 1.2rem;
             font-weight: 400;
-            color: hsl(0, 0%, 20%);
+            color: hsl(0deg 0% 20%);
             opacity: 0.7;
         }
     }
@@ -425,11 +425,11 @@ input.text-error {
             margin: 10px 0 0;
             list-style-type: none;
             width: fit-content;
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             padding: 5px 0;
             border-radius: 4px;
-            border: 1px solid hsl(0, 0%, 87%);
-            box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.1);
+            border: 1px solid hsl(0deg 0% 87%);
+            box-shadow: 0 2px 5px hsl(0deg 0% 0% / 10%);
 
             &::before {
                 content: "\25B2";
@@ -437,7 +437,7 @@ input.text-error {
                 top: -4px;
                 right: 9px;
                 font-size: 0.5em;
-                color: hsl(0, 0%, 87%);
+                color: hsl(0deg 0% 87%);
                 line-height: 0;
                 transform: scale(1.8, 1);
             }
@@ -451,7 +451,7 @@ input.text-error {
                 cursor: pointer;
 
                 &:hover {
-                    background-color: hsl(190, 10%, 90%);
+                    background-color: hsl(190deg 10% 90%);
                     transition: none;
                 }
 
@@ -462,7 +462,7 @@ input.text-error {
                     transition: none;
                     font-size: 0.9em;
                     font-weight: 400;
-                    color: hsl(0, 0%, 27%);
+                    color: hsl(0deg 0% 27%);
                 }
 
                 &:hover a {
@@ -492,7 +492,7 @@ input.text-error {
     }
 
     .dropdown-pill {
-        border: 1px solid hsla(0, 0%, 0%, 0.2);
+        border: 1px solid hsl(0deg 0% 0% / 20%);
         border-radius: 4px;
         margin-left: 10px;
         font-weight: 400;
@@ -548,8 +548,8 @@ input.text-error {
 }
 
 .table.table-striped {
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1);
+    background-color: hsl(0deg 0% 100%);
+    box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
 }
 
 .team-profiles {
@@ -613,9 +613,9 @@ input.text-error {
         display: none;
 
         &:checked + label {
-            border: 1px solid hsl(0, 0%, 93%);
-            border-top: 2px solid hsl(80, 61%, 50%);
-            border-bottom-color: hsl(0, 0%, 100%);
+            border: 1px solid hsl(0deg 0% 93%);
+            border-top: 2px solid hsl(80deg 61% 50%);
+            border-bottom-color: hsl(0deg 0% 100%);
         }
     }
 
@@ -643,7 +643,7 @@ input.text-error {
     .person {
         box-sizing: border-box;
         padding: 10px;
-        border: 1px solid hsl(0, 0%, 93%);
+        border: 1px solid hsl(0deg 0% 93%);
         border-radius: 4px;
         transition: all 0.3s ease;
 
@@ -652,7 +652,7 @@ input.text-error {
         }
 
         &:hover {
-            border: 1px solid hsl(0, 0%, 73%);
+            border: 1px solid hsl(0deg 0% 73%);
         }
 
         .avatar {
@@ -701,7 +701,7 @@ input#terminal:checked ~ #tab-terminal {
 
 .tab-loading,
 .last-updated {
-    color: hsl(0, 0%, 67%);
+    color: hsl(0deg 0% 67%);
     font-size: 0.9em !important;
     padding-top: 30px;
     text-align: center;
@@ -795,7 +795,7 @@ input.new-organization-button {
 
     & a {
         display: inline-block;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         padding: 2px 7px 1px 8px;
         font-weight: 600;
         font-size: 16px;
@@ -804,8 +804,8 @@ input.new-organization-button {
 
         &:hover {
             text-decoration: none;
-            background-color: hsla(0, 0%, 100%, 1);
-            color: hsl(170, 50%, 40%);
+            background-color: hsl(0deg 0% 100%);
+            color: hsl(170deg 50% 40%);
         }
     }
 }
@@ -902,7 +902,7 @@ input.new-organization-button {
 
     &.grid {
         padding: 10px 0;
-        border-bottom: 1px solid hsl(0, 0%, 87%);
+        border-bottom: 1px solid hsl(0deg 0% 87%);
 
         & label.inline-block {
             width: 200px;
@@ -960,7 +960,7 @@ input.new-organization-button {
 .error_page {
     min-height: calc(100vh - 290px);
     height: 100%;
-    background-color: hsl(163, 42%, 85%);
+    background-color: hsl(163deg 42% 85%);
     font-family: "Source Sans 3", sans-serif;
 }
 
@@ -982,10 +982,10 @@ input.new-organization-button {
 
 .error_page .errorbox {
     margin: auto;
-    border: 2px solid hsl(163, 43%, 46%);
+    border: 2px solid hsl(163deg 43% 46%);
     max-width: 500px;
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 0 4px hsl(163, 43%, 46%);
+    background-color: hsl(0deg 0% 100%);
+    box-shadow: 0 0 4px hsl(163deg 43% 46%);
     font-size: 18px;
 
     &.config-error {
@@ -994,7 +994,7 @@ input.new-organization-button {
 }
 
 .error_page p {
-    color: hsl(0, 0%, 20%);
+    color: hsl(0deg 0% 20%);
 }
 
 .error_page .errorcontent {
@@ -1003,7 +1003,7 @@ input.new-organization-button {
 }
 
 .error_page .lead {
-    color: hsl(163, 49%, 44%);
+    color: hsl(163deg 49% 44%);
     font-size: 35px;
     margin-bottom: 20px;
     line-height: normal;
@@ -1030,7 +1030,7 @@ input.new-organization-button {
             position: fixed;
             top: 70px;
             left: 9px;
-            fill: hsl(0, 0%, 100%);
+            fill: hsl(0deg 0% 100%);
             z-index: 2;
             transition: all 0.3s ease;
             cursor: pointer;
@@ -1244,7 +1244,7 @@ label.label-title {
 
         &:hover .api-argument-hover-link i.fa {
             opacity: 1;
-            color: hsl(0, 0%, 0%);
+            color: hsl(0deg 0% 0%);
             cursor: pointer;
         }
     }
@@ -1263,26 +1263,26 @@ label.label-title {
         text-transform: uppercase;
         font-weight: 600;
         font-size: 12px;
-        color: hsl(14, 75%, 60%);
+        color: hsl(14deg 75% 60%);
     }
 
     .api-argument-optional {
         text-transform: uppercase;
         font-weight: 400;
         font-size: 12px;
-        color: hsl(0, 0%, 47%);
+        color: hsl(0deg 0% 47%);
     }
 
     .api-argument-deprecated {
         text-transform: uppercase;
         font-weight: 600;
         font-size: 12px;
-        color: hsl(0, 50%, 60%);
+        color: hsl(0deg 50% 60%);
     }
 }
 
 .api-field-type {
-    color: hsl(176, 46.4%, 41%);
+    color: hsl(176deg 46.4% 41%);
 }
 
 .desktop-redirect-box {
@@ -1308,18 +1308,22 @@ label.label-title {
 
 #navbar-custom-message {
     font-size: 1rem;
-    background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
-    color: hsl(0, 0%, 100%);
+    background: linear-gradient(
+        145deg,
+        hsl(191deg 56% 55%),
+        hsl(169deg 65% 42%)
+    );
+    color: hsl(0deg 0% 100%);
     font-weight: 600;
     text-align: center;
     position: relative;
     top: 0;
     padding: 10px;
-    border-bottom: 1px solid hsl(177, 52%, 55%);
+    border-bottom: 1px solid hsl(177deg 52% 55%);
     z-index: 5;
 
     & a {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         text-decoration: underline;
     }
 }
diff --git a/web/styles/portico/portico_signin.css b/web/styles/portico/portico_signin.css
index 0915986387..deeca5d65c 100644
--- a/web/styles/portico/portico_signin.css
+++ b/web/styles/portico/portico_signin.css
@@ -24,9 +24,9 @@ html {
     padding: 30px;
     min-width: 0;
 
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1);
-    border: 1px solid hsl(0, 0%, 87%);
+    background-color: hsl(0deg 0% 100%);
+    box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
+    border: 1px solid hsl(0deg 0% 87%);
     border-radius: 4px;
 }
 
@@ -37,11 +37,11 @@ html {
     font-size: 0.9em;
 
     & a {
-        color: hsl(164, 100%, 23%);
+        color: hsl(164deg 100% 23%);
 
         &:hover {
             text-decoration: none;
-            color: hsl(156, 62%, 61%);
+            color: hsl(156deg 62% 61%);
         }
     }
 }
@@ -53,17 +53,17 @@ html {
     font-size: 1.2em;
 
     & a {
-        color: hsl(164, 100%, 23%);
+        color: hsl(164deg 100% 23%);
 
         &:hover {
             text-decoration: none;
-            color: hsl(156, 62%, 61%);
+            color: hsl(156deg 62% 61%);
         }
     }
 }
 
 .grey {
-    color: hsl(0, 0%, 67%);
+    color: hsl(0deg 0% 67%);
 }
 
 .find-account-page-container #find_account i {
@@ -105,12 +105,12 @@ html {
             padding: 4px 6px;
             width: 220px;
             font-size: 14px;
-            color: hsl(0, 0%, 33%);
+            color: hsl(0deg 0% 33%);
             border-radius: 4px;
-            border: 1px solid hsl(0, 0%, 80%);
+            border: 1px solid hsl(0deg 0% 80%);
             margin-bottom: 10px;
             cursor: pointer;
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         }
     }
@@ -150,13 +150,13 @@ html {
         }
 
         .form-inline .outline {
-            border: 2px inset hsl(213, 23%, 25%);
-            background-color: hsl(0, 0%, 100%);
-            color: hsl(213, 23%, 25%);
+            border: 2px inset hsl(213deg 23% 25%);
+            background-color: hsl(0deg 0% 100%);
+            color: hsl(213deg 23% 25%);
             padding: 13px 20px 11px;
 
             &:hover {
-                background-color: hsl(213, 65%, 97%);
+                background-color: hsl(213deg 65% 97%);
             }
         }
 
@@ -182,8 +182,8 @@ html {
     }
 
     .dev-button {
-        color: hsl(170, 41%, 52%);
-        border: 1px solid hsl(170, 41%, 52%);
+        color: hsl(170deg 41% 52%);
+        border: 1px solid hsl(170deg 41% 52%);
         border-radius: 4px;
         background-color: transparent;
         font-family: inherit;
@@ -196,8 +196,8 @@ html {
         transition: color 0.3s ease, border 0.3s ease;
 
         &:hover {
-            color: hsl(156, 62%, 61%);
-            border-color: hsl(156, 62%, 61%);
+            color: hsl(156deg 62% 61%);
+            border-color: hsl(156deg 62% 61%);
         }
 
         &.dev-login-button {
@@ -235,7 +235,7 @@ html {
         .invite-required {
             display: block;
 
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             font-weight: normal;
         }
     }
@@ -272,22 +272,22 @@ html {
 }
 
 .header {
-    color: hsl(0, 0%, 27%);
-    background-color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 27%);
+    background-color: hsl(0deg 0% 100%);
     position: fixed;
     width: 100%;
     top: 0;
 
     .top-links a,
     .header-main .logo span {
-        color: hsl(0, 0%, 27%);
+        color: hsl(0deg 0% 27%);
     }
 }
 
 .register-form {
     &.new-style {
         text-align: left;
-        color: hsl(0, 0%, 45%);
+        color: hsl(0deg 0% 45%);
     }
 
     #errors {
@@ -395,8 +395,8 @@ html {
         font-weight: 400;
         box-sizing: border-box;
         outline: none;
-        color: hsl(0, 0%, 100%);
-        background-color: hsl(213, 23%, 25%);
+        color: hsl(0deg 0% 100%);
+        background-color: hsl(213deg 23% 25%);
 
         margin: 25px 0 5px;
         height: 50px;
@@ -407,15 +407,15 @@ html {
         transition: all 0.3s ease;
 
         &:hover {
-            background-color: hsl(213, 33%, 31%);
+            background-color: hsl(213deg 33% 31%);
         }
 
         &:active {
-            background-color: hsl(214, 28%, 16%);
+            background-color: hsl(214deg 28% 16%);
         }
 
         &:focus {
-            outline: 3px solid hsl(213, 81%, 79%);
+            outline: 3px solid hsl(213deg 81% 79%);
         }
 
         &.full-width {
@@ -430,15 +430,15 @@ html {
     .demo-organization-warning {
         position: relative;
         display: block;
-        background-color: hsl(360, 100%, 93%);
-        border: 1px solid hsl(0, 0%, 80%);
+        background-color: hsl(360deg 100% 93%);
+        border: 1px solid hsl(0deg 0% 80%);
         border-radius: 4px;
         padding: 10px;
         margin: 10px 0;
         font-size: 1rem;
         font-weight: 500;
         line-height: 1.5;
-        color: hsl(0, 0%, 27%);
+        color: hsl(0deg 0% 27%);
 
         & a {
             text-decoration: none;
@@ -464,7 +464,7 @@ html {
             background-color: transparent;
 
             border: none;
-            color: hsl(0, 44%, 54%);
+            color: hsl(0deg 44% 54%);
         }
 
         &.alert-error {
@@ -479,7 +479,7 @@ html {
     .get-started {
         font-size: 2.5rem;
         text-align: center;
-        color: hsl(0, 0%, 40%);
+        color: hsl(0deg 0% 40%);
         margin-bottom: 20px;
     }
 
@@ -507,21 +507,21 @@ html {
 
             width: 280px;
 
-            border: 1px solid hsl(0, 0%, 87%);
+            border: 1px solid hsl(0deg 0% 87%);
             box-shadow: none;
             border-radius: 4px;
-            background-color: hsl(0, 0%, 100%);
-            color: hsl(0, 0%, 33%);
+            background-color: hsl(0deg 0% 100%);
+            color: hsl(0deg 0% 33%);
 
             transition: border 0.3s ease;
 
             &:focus:invalid {
                 box-shadow: none;
-                color: hsl(0, 0%, 27%);
+                color: hsl(0deg 0% 27%);
             }
 
             &:focus {
-                border: 1px solid hsl(0, 0%, 53%);
+                border: 1px solid hsl(0deg 0% 53%);
             }
         }
 
@@ -546,7 +546,7 @@ html {
                 transform: translateY(39px) translateX(14px);
                 font-size: 1.2rem;
                 font-weight: 400;
-                color: hsl(0, 0%, 67%);
+                color: hsl(0deg 0% 67%);
 
                 pointer-events: none;
             }
@@ -567,7 +567,7 @@ html {
 
             font-size: 1rem;
             font-weight: 600;
-            color: hsl(0, 0%, 27%);
+            color: hsl(0deg 0% 27%);
         }
 
         /* The width of the "Organization name" text box
@@ -581,7 +581,7 @@ html {
             display: block;
             padding: 0;
 
-            color: hsl(1.1, 44.7%, 50.4%);
+            color: hsl(1.1deg 44.7% 50.4%);
             font-size: 0.7em;
             font-weight: 600;
             text-align: left;
@@ -597,7 +597,7 @@ html {
             top: 0;
             right: 0;
             text-align: right;
-            color: hsl(1.1, 44.7%, 50.4%);
+            color: hsl(1.1deg 44.7% 50.4%);
             font-size: 0.7em;
             font-weight: 600;
             padding-left: 0;
@@ -675,7 +675,7 @@ html {
 
         & p {
             font-weight: 400;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
         }
     }
 
@@ -683,7 +683,7 @@ html {
         width: 100%;
         display: block;
         margin: 10px auto;
-        color: hsl(0, 0%, 34%);
+        color: hsl(0deg 0% 34%);
         font-weight: 600;
         text-align: center;
         position: relative;
@@ -699,11 +699,11 @@ html {
             left: 0;
             z-index: -1;
 
-            border-bottom: 2px solid hsl(0, 0%, 87%);
+            border-bottom: 2px solid hsl(0deg 0% 87%);
         }
 
         & span {
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             padding: 0 5px;
         }
     }
@@ -732,7 +732,7 @@ html {
 
     .left-side {
         width: 500px;
-        border-right: 1px solid hsl(0, 0%, 93%);
+        border-right: 1px solid hsl(0deg 0% 93%);
         position: relative;
         left: -1px;
 
@@ -745,7 +745,7 @@ html {
         }
 
         + .right-side {
-            border-left: 1px solid hsl(0, 0%, 93%);
+            border-left: 1px solid hsl(0deg 0% 93%);
             /* this is to make sure the borders of the left and right side overlap
                each other. */
             padding-left: 15px;
@@ -790,7 +790,7 @@ html {
 
     .organization-path {
         font-weight: 400;
-        color: hsl(0, 0%, 47%);
+        color: hsl(0deg 0% 47%);
         margin-top: 5px;
     }
 }
@@ -818,21 +818,21 @@ button.login-social-button {
     background-size: auto 60%;
     background-repeat: no-repeat;
     background-position: 13px 50%;
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.3), 0 0 5px hsla(0, 0%, 0%, 0.1);
+    background-color: hsl(0deg 0% 100%);
+    box-shadow: 0 1px 3px hsl(0deg 0% 0% / 30%), 0 0 5px hsl(0deg 0% 0% / 10%);
     margin-left: 0;
     margin-top: 0;
 
-    color: hsl(0, 0%, 34%);
+    color: hsl(0deg 0% 34%);
 
     &:hover {
-        background-color: hsl(0, 0%, 98%);
-        box-shadow: 1px 2px 5px hsla(0, 0%, 0%, 0.2);
+        background-color: hsl(0deg 0% 98%);
+        box-shadow: 1px 2px 5px hsl(0deg 0% 0% / 20%);
     }
 
     &:active {
-        background-color: hsl(0, 0%, 93%);
-        box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.3);
+        background-color: hsl(0deg 0% 93%);
+        box-shadow: 0 1px 1px hsl(0deg 0% 0% / 30%);
     }
 }
 
@@ -862,7 +862,7 @@ button#register_auth_button_gitlab {
 
 .split-view .actions a,
 .back-to-login {
-    color: hsl(164, 100%, 23%);
+    color: hsl(164deg 100% 23%);
     text-decoration: none;
     font-weight: 600;
     font-size: 0.8em;
@@ -873,7 +873,7 @@ button#register_auth_button_gitlab {
 
     &:hover {
         text-decoration: none;
-        color: hsl(156, 62%, 61%);
+        color: hsl(156deg 62% 61%);
     }
 }
 
@@ -933,9 +933,9 @@ button#register_auth_button_gitlab {
             }
 
             & textarea {
-                color: hsl(0, 0%, 33%);
+                color: hsl(0deg 0% 33%);
                 vertical-align: middle;
-                background-color: hsl(0, 0%, 100%);
+                background-color: hsl(0deg 0% 100%);
 
                 &:focus {
                     outline: 0;
@@ -1016,7 +1016,7 @@ button#register_auth_button_gitlab {
         max-width: none;
         margin: 2px 0;
         text-align: left;
-        color: hsl(0, 0%, 47%);
+        color: hsl(0deg 0% 47%);
         font-size: 0.9rem;
         font-weight: 400;
         line-height: 1.2;
@@ -1033,9 +1033,9 @@ button#register_auth_button_gitlab {
         margin-bottom: 0;
         font-size: 21px;
         line-height: 40px;
-        color: hsla(0, 0%, 0%, 0.5);
+        color: hsl(0deg 0% 0% / 50%);
         border: 0;
-        border-bottom: 1px solid hsla(0, 0%, 90%, 1);
+        border-bottom: 1px solid hsl(0deg 0% 90%);
 
         + .input-box {
             margin-top: 20px;
@@ -1081,7 +1081,7 @@ button#register_auth_button_gitlab {
 
 #profile_info_section {
     #profile_avatar {
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         border-radius: 8px;
         width: 120px;
         height: 120px;
@@ -1138,11 +1138,11 @@ button#register_auth_button_gitlab {
         margin: 0;
 
         &.select-email-form:hover {
-            background-color: hsl(202, 56%, 91%);
+            background-color: hsl(202deg 56% 91%);
             cursor: pointer;
 
             & i.fa {
-                color: hsl(203, 63%, 76%);
+                color: hsl(203deg 63% 76%);
             }
         }
     }
@@ -1150,7 +1150,7 @@ button#register_auth_button_gitlab {
     .choose-email-box {
         padding: 13px 0;
         margin: 0 30px;
-        border-bottom: 1px solid hsl(0, 0%, 95%);
+        border-bottom: 1px solid hsl(0deg 0% 95%);
         display: flex;
         align-items: center;
 
@@ -1177,7 +1177,7 @@ button#register_auth_button_gitlab {
         }
 
         & i.fa {
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             text-align: center;
             line-height: 38px;
 
@@ -1259,7 +1259,7 @@ button#register_auth_button_gitlab {
                 margin: 20px 0;
 
                 & a {
-                    color: hsl(200, 100%, 36%);
+                    color: hsl(200deg 100% 36%);
                 }
             }
         }
diff --git a/web/styles/portico/stats.css b/web/styles/portico/stats.css
index 3930dd19af..1dc42d5fa6 100644
--- a/web/styles/portico/stats.css
+++ b/web/styles/portico/stats.css
@@ -1,6 +1,6 @@
 body {
     font-family: "Source Sans 3", sans-serif !important;
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
 }
 
 p {
@@ -30,8 +30,8 @@ p {
     vertical-align: top;
     margin: 0 auto;
     padding: 20px;
-    border: 2px solid hsl(0, 0%, 93%);
-    background-color: hsl(0, 0%, 100%);
+    border: 2px solid hsl(0deg 0% 93%);
+    background-color: hsl(0deg 0% 100%);
     width: 395px;
 
     & h1 {
@@ -50,8 +50,8 @@ p {
     vertical-align: top;
     margin: 10px 0;
     padding: 20px;
-    border: 2px solid hsl(0, 0%, 93%);
-    background-color: hsl(0, 0%, 100%);
+    border: 2px solid hsl(0deg 0% 93%);
+    background-color: hsl(0deg 0% 100%);
 
     & button {
         position: relative;
@@ -101,10 +101,10 @@ p {
 }
 
 .buttons button {
-    background-color: hsl(0, 0%, 94%);
+    background-color: hsl(0deg 0% 94%);
 
     &.selected {
-        background-color: hsl(0, 0%, 85%);
+        background-color: hsl(0deg 0% 85%);
     }
 }
 
@@ -116,7 +116,7 @@ p {
     padding: 2px 6px;
 
     &:hover {
-        background-color: hsl(0, 0%, 84%) !important;
+        background-color: hsl(0deg 0% 84%) !important;
     }
 }
 
@@ -142,7 +142,7 @@ p {
     font-size: 0.8em;
     font-weight: 400;
     text-align: center;
-    color: hsl(0, 0%, 67%);
+    color: hsl(0deg 0% 67%);
 }
 
 #users_hover_humans,
@@ -211,8 +211,8 @@ p {
     margin-top: -15px;
     margin-left: -15px;
     border-radius: 50%;
-    border: 1px solid hsl(0, 0%, 80%);
-    border-top-color: hsl(155, 93%, 42%);
+    border: 1px solid hsl(0deg 0% 80%);
+    border-top-color: hsl(155deg 93% 42%);
     animation: spinner 1s linear infinite;
 }
 
diff --git a/web/styles/pygments.css b/web/styles/pygments.css
index 370e308b7f..98923ad7a2 100644
--- a/web/styles/pygments.css
+++ b/web/styles/pygments.css
@@ -1,214 +1,214 @@
 .codehilite pre {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .codehilite .hll {
-    background-color: hsl(60, 100%, 90%);
+    background-color: hsl(60deg 100% 90%);
 }
 
 .codehilite {
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
 }
 
 .codehilite .c {
-    color: hsl(180, 33%, 37%);
+    color: hsl(180deg 33% 37%);
     font-style: italic;
 } /* Comment */
 .codehilite .err {
-    border: 1px solid hsl(0, 100%, 50%);
+    border: 1px solid hsl(0deg 100% 50%);
 } /* Error */
 .codehilite .k {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
 } /* Keyword */
 .codehilite .o {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
 } /* Operator */
 .codehilite .cm {
-    color: hsl(180, 33%, 37%);
+    color: hsl(180deg 33% 37%);
     font-style: italic;
 } /* Comment.Multiline */
 .codehilite .cp {
-    color: hsl(38, 100%, 36%);
+    color: hsl(38deg 100% 36%);
 } /* Comment.Preproc */
 .codehilite .c1 {
-    color: hsl(0, 0%, 67%);
+    color: hsl(0deg 0% 67%);
     font-style: italic;
 } /* Comment.Single */
 .codehilite .cs {
-    color: hsl(180, 33%, 37%);
+    color: hsl(180deg 33% 37%);
     font-style: italic;
 } /* Comment.Special */
 .codehilite .gd {
-    color: hsl(0, 100%, 31%);
+    color: hsl(0deg 100% 31%);
 } /* Generic.Deleted */
 .codehilite .ge {
     font-style: italic;
 } /* Generic.Emph */
 .codehilite .gr {
-    color: hsl(0, 100%, 50%);
+    color: hsl(0deg 100% 50%);
 } /* Generic.Error */
 .codehilite .gh {
-    color: hsl(240, 100%, 25%);
+    color: hsl(240deg 100% 25%);
     font-weight: bold;
 } /* Generic.Heading */
 .codehilite .gi {
-    color: hsl(120, 100%, 31%);
+    color: hsl(120deg 100% 31%);
 } /* Generic.Inserted */
 .codehilite .go {
-    color: hsl(0, 0%, 50%);
+    color: hsl(0deg 0% 50%);
 } /* Generic.Output */
 .codehilite .gp {
-    color: hsl(240, 100%, 25%);
+    color: hsl(240deg 100% 25%);
     font-weight: bold;
 } /* Generic.Prompt */
 .codehilite .gs {
     font-weight: bold;
 } /* Generic.Strong */
 .codehilite .gu {
-    color: hsl(300, 100%, 25%);
+    color: hsl(300deg 100% 25%);
     font-weight: bold;
 } /* Generic.Subheading */
 .codehilite .gt {
-    color: hsl(221, 100%, 40%);
+    color: hsl(221deg 100% 40%);
 } /* Generic.Traceback */
 .codehilite .kc {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
     font-weight: bold;
 } /* Keyword.Constant */
 .codehilite .kd {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
 } /* Keyword.Declaration */
 .codehilite .kn {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
     font-weight: bold;
 } /* Keyword.Namespace */
 .codehilite .kp {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
 } /* Keyword.Pseudo */
 .codehilite .kr {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
     font-weight: bold;
 } /* Keyword.Reserved */
 .codehilite .kt {
-    color: hsl(332, 70%, 38%);
+    color: hsl(332deg 70% 38%);
 } /* Keyword.Type */
 .codehilite .m {
-    color: hsl(0, 0%, 40%);
+    color: hsl(0deg 0% 40%);
 } /* Literal.Number */
 .codehilite .s {
-    color: hsl(86, 57%, 40%);
+    color: hsl(86deg 57% 40%);
 } /* Literal.String */
 .codehilite .na {
-    color: hsl(71, 55%, 36%);
+    color: hsl(71deg 55% 36%);
 } /* Name.Attribute */
 .codehilite .nb {
-    color: hsl(195, 100%, 35%);
+    color: hsl(195deg 100% 35%);
 } /* Name.Builtin */
 .codehilite .nc {
-    color: hsl(264, 27%, 50%);
+    color: hsl(264deg 27% 50%);
     font-weight: bold;
 } /* Name.Class */
 .codehilite .no {
-    color: hsl(0, 100%, 26%);
+    color: hsl(0deg 100% 26%);
 } /* Name.Constant */
 .codehilite .nd {
-    color: hsl(276, 100%, 56%);
+    color: hsl(276deg 100% 56%);
 } /* Name.Decorator */
 .codehilite .ni {
-    color: hsl(0, 0%, 60%);
+    color: hsl(0deg 0% 60%);
     font-weight: bold;
 } /* Name.Entity */
 .codehilite .ne {
-    color: hsl(2, 62%, 52%);
+    color: hsl(2deg 62% 52%);
     font-weight: bold;
 } /* Name.Exception */
 .codehilite .nf {
-    color: hsl(264, 27%, 50%);
+    color: hsl(264deg 27% 50%);
 } /* Name.Function */
 .codehilite .nl {
-    color: hsl(60, 100%, 31%);
+    color: hsl(60deg 100% 31%);
 } /* Name.Label */
 .codehilite .nn {
-    color: hsl(264, 27%, 50%);
+    color: hsl(264deg 27% 50%);
     font-weight: bold;
 } /* Name.Namespace */
 .codehilite .nt {
-    color: hsl(120, 100%, 25%);
+    color: hsl(120deg 100% 25%);
     font-weight: bold;
 } /* Name.Tag */
 .codehilite .nv {
-    color: hsl(241, 68%, 28%);
+    color: hsl(241deg 68% 28%);
 } /* Name.Variable */
 .codehilite .nx {
-    color: hsl(0, 0%, 26%);
+    color: hsl(0deg 0% 26%);
 } /* Not sure? */
 .codehilite .ow {
-    color: hsl(276, 100%, 56%);
+    color: hsl(276deg 100% 56%);
     font-weight: bold;
 } /* Operator.Word */
 .codehilite .w {
-    color: hsl(0, 0%, 73%);
+    color: hsl(0deg 0% 73%);
 } /* Text.Whitespace */
 .codehilite .mf {
-    color: hsl(195, 100%, 35%);
+    color: hsl(195deg 100% 35%);
 } /* Literal.Number.Float */
 .codehilite .mh {
-    color: hsl(195, 100%, 35%);
+    color: hsl(195deg 100% 35%);
 } /* Literal.Number.Hex */
 .codehilite .mi {
-    color: hsl(195, 100%, 35%);
+    color: hsl(195deg 100% 35%);
 } /* Literal.Number.Integer */
 .codehilite .mo {
-    color: hsl(195, 100%, 35%);
+    color: hsl(195deg 100% 35%);
 } /* Literal.Number.Oct */
 .codehilite .sb {
-    color: hsl(86, 57%, 40%);
+    color: hsl(86deg 57% 40%);
 } /* Literal.String.Backtick */
 .codehilite .sc {
-    color: hsl(86, 57%, 40%);
+    color: hsl(86deg 57% 40%);
 } /* Literal.String.Char */
 .codehilite .sd {
-    color: hsl(86, 57%, 40%);
+    color: hsl(86deg 57% 40%);
     font-style: italic;
 } /* Literal.String.Doc */
 .codehilite .s2 {
-    color: hsl(225, 71%, 33%);
+    color: hsl(225deg 71% 33%);
 } /* Literal.String.Double */
 .codehilite .se {
-    color: hsl(26, 69%, 43%);
+    color: hsl(26deg 69% 43%);
     font-weight: bold;
 } /* Literal.String.Escape */
 .codehilite .sh {
-    color: hsl(86, 57%, 40%);
+    color: hsl(86deg 57% 40%);
 } /* Literal.String.Heredoc */
 .codehilite .si {
-    color: hsl(336, 38%, 56%);
+    color: hsl(336deg 38% 56%);
     font-weight: bold;
 } /* Literal.String.Interpol */
 .codehilite .sx {
-    color: hsl(120, 100%, 25%);
+    color: hsl(120deg 100% 25%);
 } /* Literal.String.Other */
 .codehilite .sr {
-    color: hsl(189, 54%, 49%);
+    color: hsl(189deg 54% 49%);
 } /* Literal.String.Regex */
 .codehilite .s1 {
-    color: hsl(86, 57%, 40%);
+    color: hsl(86deg 57% 40%);
 } /* Literal.String.Single */
 .codehilite .ss {
-    color: hsl(241, 68%, 28%);
+    color: hsl(241deg 68% 28%);
 } /* Literal.String.Symbol */
 .codehilite .bp {
-    color: hsl(120, 100%, 25%);
+    color: hsl(120deg 100% 25%);
 } /* Name.Builtin.Pseudo */
 .codehilite .vc {
-    color: hsl(241, 68%, 28%);
+    color: hsl(241deg 68% 28%);
 } /* Name.Variable.Class */
 .codehilite .vg {
-    color: hsl(241, 68%, 28%);
+    color: hsl(241deg 68% 28%);
 } /* Name.Variable.Global */
 .codehilite .vi {
-    color: hsl(241, 68%, 28%);
+    color: hsl(241deg 68% 28%);
 } /* Name.Variable.Instance */
 .codehilite .il {
-    color: hsl(0, 0%, 40%);
+    color: hsl(0deg 0% 40%);
 } /* Literal.Number.Integer.Long */
diff --git a/web/styles/reactions.css b/web/styles/reactions.css
index 0a345e1580..130f644db8 100644
--- a/web/styles/reactions.css
+++ b/web/styles/reactions.css
@@ -9,17 +9,17 @@
         margin: 0.15em;
         padding: 0 2px 0 0;
         cursor: pointer;
-        background-color: hsl(0, 0%, 100%);
-        border: 1px solid hsl(194, 37%, 84%);
+        background-color: hsl(0deg 0% 100%);
+        border: 1px solid hsl(194deg 37% 84%);
         border-radius: 4px;
         align-items: center;
 
         &.reacted {
-            background-color: hsl(195, 50%, 95%);
+            background-color: hsl(195deg 50% 95%);
         }
 
         &:hover {
-            border: 1px solid hsl(200, 100%, 40%);
+            border: 1px solid hsl(200deg 100% 40%);
         }
 
         + .reaction_button {
@@ -30,7 +30,7 @@
             height: 13px;
             border-radius: 4px;
             padding-left: 0.3em;
-            border: 1px solid hsl(0, 0%, 73%);
+            border: 1px solid hsl(0deg 0% 73%);
             padding-right: 0.3em;
             float: left;
         }
@@ -58,19 +58,19 @@
     }
 
     .message_reaction:hover .message_reaction_count {
-        color: hsl(200, 100%, 40%);
+        color: hsl(200deg 100% 40%);
     }
 
     & i {
         font-size: 1.3em;
         float: left;
-        color: hsl(0, 0%, 33%);
+        color: hsl(0deg 0% 33%);
     }
 
     &:hover .message_reaction + .reaction_button {
         visibility: visible;
         pointer-events: all;
-        background-color: hsl(0, 0%, 98%);
+        background-color: hsl(0deg 0% 98%);
     }
 
     .reaction_button {
@@ -82,7 +82,7 @@
         }
 
         &:hover i {
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
 
         /* Configure the reaction button to appear if and only if there's an
@@ -95,31 +95,31 @@
         }
 
         &:hover {
-            border: 1px solid hsl(200, 100%, 40%);
-            background-color: hsl(195, 50%, 95%);
+            border: 1px solid hsl(200deg 100% 40%);
+            background-color: hsl(195deg 50% 95%);
             cursor: pointer;
             opacity: 1;
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
 
         .message_reaction_count {
             font-size: 1.1em;
-            color: hsl(0, 0%, 33%);
+            color: hsl(0deg 0% 33%);
             margin-right: 0;
         }
 
         &:hover .message_reaction_count {
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
     }
 }
 
 .private-message .message_reactions .message_reaction {
-    background-color: hsl(192, 20%, 95%);
+    background-color: hsl(192deg 20% 95%);
 
     &.reacted {
-        background-color: hsl(196, 51%, 93%);
-        border-color: hsl(193, 38%, 70%);
+        background-color: hsl(196deg 51% 93%);
+        border-color: hsl(193deg 38% 70%);
     }
 }
 
@@ -139,11 +139,11 @@
     }
 
     &.bottom .arrow {
-        border-bottom-color: hsl(0, 0%, 93%);
+        border-bottom-color: hsl(0deg 0% 93%);
     }
 
     &.top .arrow {
-        border-top-color: hsl(0, 0%, 93%);
+        border-top-color: hsl(0deg 0% 93%);
     }
 
     .emoji-popover {
@@ -151,8 +151,8 @@
         width: 250px;
 
         .reacted {
-            background-color: hsl(195, 50%, 95%);
-            border-color: hsl(195, 52%, 79%);
+            background-color: hsl(195deg 50% 95%);
+            border-color: hsl(195deg 52% 79%);
         }
 
         .emoji-popover-top {
@@ -161,13 +161,13 @@
             padding: 8px 10px;
             margin-bottom: 0;
 
-            background-color: hsl(0, 0%, 93%);
+            background-color: hsl(0deg 0% 93%);
 
             border-radius: 5px 5px 0 0;
 
             .fa-search {
                 position: absolute;
-                color: hsl(0, 0%, 73%);
+                color: hsl(0deg 0% 73%);
                 top: 15px;
                 left: 17px;
                 z-index: 3;
@@ -184,7 +184,7 @@
         .emoji-popover-category-tabs {
             /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
             display: flex;
-            background-color: hsl(0, 0%, 93%);
+            background-color: hsl(0deg 0% 93%);
             width: 100%;
             box-sizing: border-box;
             overflow: hidden;
@@ -201,7 +201,7 @@
                 flex-grow: 1;
 
                 &.active {
-                    background-color: hsla(0, 0%, 100%, 0.2);
+                    background-color: hsl(0deg 0% 100% / 20%);
                 }
             }
         }
@@ -246,12 +246,12 @@
             width: 25px;
 
             &.reacted.reaction:focus {
-                background-color: hsl(195, 55%, 88%);
+                background-color: hsl(195deg 55% 88%);
                 outline: none;
             }
 
             &:not(.reacted):focus {
-                background-color: hsl(0, 0%, 93%);
+                background-color: hsl(0deg 0% 93%);
                 outline: none;
             }
 
@@ -267,7 +267,7 @@
 
     .emoji-showcase-container {
         position: relative;
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
         min-height: 44px;
         width: 250px;
 
diff --git a/web/styles/recent_topics.css b/web/styles/recent_topics.css
index f212682660..0a3880159b 100644
--- a/web/styles/recent_topics.css
+++ b/web/styles/recent_topics.css
@@ -1,7 +1,7 @@
 .recent_topics_container {
     padding: 0;
     border-radius: 4px;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -14,7 +14,7 @@
         display: flex;
         flex-direction: column;
         border-style: solid;
-        border-color: hsl(0, 0%, 88%);
+        border-color: hsl(0deg 0% 88%);
         border-width: 0 1px;
         border-radius: 0;
         margin-top: 40px;
@@ -39,16 +39,16 @@
 
             &:focus-within {
                 /* Use the same color as the message feed pointer */
-                box-shadow: 0 3px 0 hsl(215, 47%, 50%);
+                box-shadow: 0 3px 0 hsl(215deg 47% 50%);
             }
         }
 
         & a {
-            color: hsl(205, 47%, 42%);
+            color: hsl(205deg 47% 42%);
             text-decoration: none;
 
             &:hover {
-                color: hsl(214, 40%, 58%);
+                color: hsl(214deg 40% 58%);
             }
         }
 
@@ -56,7 +56,7 @@
             content: attr(data-empty);
             display: block;
             font-style: italic;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             position: absolute;
         }
 
@@ -129,7 +129,7 @@
             margin: 0 5px 10px 0;
 
             &:focus {
-                background-color: hsl(0, 0%, 80%);
+                background-color: hsl(0deg 0% 80%);
                 outline: 0;
             }
 
@@ -138,14 +138,14 @@
                 opacity: 0.5;
 
                 &:hover {
-                    background-color: hsl(0, 0%, 100%);
-                    border-color: hsl(0, 0%, 80%);
+                    background-color: hsl(0deg 0% 100%);
+                    border-color: hsl(0deg 0% 80%);
                 }
             }
         }
 
         .btn-recent-selected {
-            background-color: hsl(0, 11%, 93%);
+            background-color: hsl(0deg 11% 93%);
         }
 
         .unread_count {
@@ -153,7 +153,7 @@
             margin-right: 1px;
             margin-left: 1px;
             align-self: center;
-            background-color: hsl(105, 2%, 50%);
+            background-color: hsl(105deg 2% 50%);
         }
 
         .unread_mention_info:not(:empty) {
@@ -253,28 +253,28 @@
         .recent_topics_participant_overflow {
             border: 0;
             border-radius: 6px;
-            color: hsl(0, 0%, 100%);
+            color: hsl(0deg 0% 100%);
             display: block;
             height: 24px;
             text-align: center;
-            background-color: hsl(0, 0%, 88%);
+            background-color: hsl(0deg 0% 88%);
         }
 
         .recent_topics_participant_overflow {
-            color: hsl(0, 0%, 0%);
+            color: hsl(0deg 0% 0%);
             line-height: 24px;
         }
 
         & tr {
-            background-color: hsl(100, 11%, 96%);
+            background-color: hsl(100deg 11% 96%);
 
             &:hover {
-                background-color: hsl(210, 100%, 97%);
+                background-color: hsl(210deg 100% 97%);
             }
         }
 
         .unread_topic {
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
         }
 
         .last_msg_time {
@@ -283,10 +283,10 @@
         }
 
         & thead th {
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             color: inherit;
-            border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
-            border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important;
+            border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
+            border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
             position: sticky;
             top: 0;
             z-index: 1;
@@ -313,7 +313,7 @@
 
             &[data-sort]:hover {
                 cursor: pointer;
-                background-color: hsla(0, 0%, 95%);
+                background-color: hsl(0deg 0% 95%);
                 transition: background-color 100ms ease-in-out;
 
                 &:not(.active)::after {
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index ff560192bd..ea9e375244 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -41,8 +41,8 @@
     }
 
     & hr {
-        border-bottom: 1px solid hsl(0, 0%, 87%);
-        border-top: 1px solid hsl(0, 0%, 87%);
+        border-bottom: 1px solid hsl(0deg 0% 87%);
+        border-top: 1px solid hsl(0deg 0% 87%);
     }
 
     /* Headings */
@@ -101,7 +101,7 @@
         margin-left: 10px;
         margin-top: 5px;
         margin-bottom: 6px;
-        border-left-color: hsl(0, 0%, 87%);
+        border-left-color: hsl(0deg 0% 87%);
 
         & p {
             line-height: inherit;
@@ -115,7 +115,7 @@
         margin-left: unset;
         margin-right: 10px;
         border-left: unset;
-        border-right: 5px solid hsl(0, 0%, 87%);
+        border-right: 5px solid hsl(0deg 0% 87%);
     }
 
     /* Formatting for Markdown tables */
@@ -130,7 +130,7 @@
     }
 
     & thead {
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 
     & tr {
@@ -139,13 +139,13 @@
     }
 
     & tr th {
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         padding: 4px;
         text-align: left;
     }
 
     & tr td {
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         padding: 4px;
     }
 
@@ -157,36 +157,36 @@
 
     /* Mentions and alert words */
     .user-mention-me :not(.silent) {
-        background-color: hsl(112, 88%, 87%);
+        background-color: hsl(112deg 88% 87%);
     }
 
     .user-group-mention,
     .user-mention {
         border-radius: 3px;
         padding: 0 0.2em;
-        box-shadow: 0 0 0 1px hsl(0, 0%, 80%);
+        box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
         margin-right: 2px;
         margin-left: 2px;
         white-space: nowrap;
         background: linear-gradient(
             to bottom,
-            hsla(0, 0%, 0%, 0.1) 0%,
-            hsla(0, 0%, 0%, 0) 100%
+            hsl(0deg 0% 0% / 10%) 0%,
+            hsl(0deg 0% 0% / 0%) 100%
         );
         display: inline-block;
         margin-bottom: 1px;
     }
 
     .alert-word {
-        background-color: hsla(102, 85%, 57%, 0.5);
+        background-color: hsl(102deg 85% 57% / 50%);
     }
 
     /* Timestamps */
     & time {
-        background: hsl(0, 0%, 93%);
+        background: hsl(0deg 0% 93%);
         border-radius: 3px;
         padding: 0 0.2em;
-        box-shadow: 0 0 0 1px hsl(0, 0%, 80%);
+        box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
         white-space: nowrap;
         margin-left: 2px;
         margin-right: 2px;
@@ -205,12 +205,12 @@
     }
 
     .tex-error {
-        color: hsl(0, 0%, 50%);
+        color: hsl(0deg 0% 50%);
     }
 
     /* Spoiler styling */
     .spoiler-block {
-        border: hsl(0, 0%, 50%) 1px solid;
+        border: hsl(0deg 0% 50%) 1px solid;
         padding: 2px 8px 2px 10px;
         border-radius: 10px;
         position: relative;
@@ -225,14 +225,14 @@
 
         .spoiler-content {
             overflow: hidden;
-            border-top: hsl(0, 0%, 50%) 0 solid;
+            border-top: hsl(0deg 0% 50%) 0 solid;
             transition: height 0.4s ease-in-out, border-top 0.4s step-end,
                 padding 0.4s step-end;
             padding: 0;
             height: 0;
 
             &.spoiler-content-open {
-                border-top: hsl(0, 0%, 50%) 1px solid;
+                border-top: hsl(0deg 0% 50%) 1px solid;
                 transition: height 0.4s ease-in-out, border-top 0.4s step-start,
                     padding 0.4s step-start;
                 padding: 5px;
@@ -248,7 +248,7 @@
             &:hover .spoiler-arrow {
                 &::before,
                 &::after {
-                    background-color: hsl(0, 0%, 50%);
+                    background-color: hsl(0deg 0% 50%);
                 }
             }
         }
@@ -273,7 +273,7 @@
                 display: inline-block;
                 width: 12px;
                 height: 3px;
-                background-color: hsl(0, 0%, 83%);
+                background-color: hsl(0deg 0% 83%);
                 transition: 0.4s ease;
             }
 
@@ -339,10 +339,10 @@
            container. */
         border: solid 1px transparent;
         transition: background 0.3s ease;
-        background: hsla(0, 0%, 0%, 0.03);
+        background: hsl(0deg 0% 0% / 3%);
 
         &:hover {
-            background: hsla(0, 0%, 0%, 0.15);
+            background: hsl(0deg 0% 0% / 15%);
         }
 
         & a {
@@ -359,7 +359,7 @@
     }
 
     .twitter-tweet {
-        border: 1px solid hsl(0, 0%, 87%);
+        border: 1px solid hsl(0deg 0% 87%);
         padding: 0.5em 0.75em;
         margin-bottom: 0.25em;
         word-break: break-word;
@@ -435,8 +435,8 @@
         padding: 5px 8px 5px 10px;
         font-size: 12px;
         border-radius: 4px;
-        background-color: hsl(0, 0%, 0%);
-        color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 0%);
+        color: hsl(0deg 0% 100%);
         opacity: 0.7;
         top: 0;
         left: 0;
@@ -447,11 +447,11 @@
         position: relative;
         margin: 5px 0;
         border: none;
-        border-left: 3px solid hsl(0, 0%, 93%);
+        border-left: 3px solid hsl(0deg 0% 93%);
         height: 80px;
         padding: 5px;
         z-index: 1;
-        text-shadow: hsla(0, 0%, 0%, 0.01) 0 0 1px;
+        text-shadow: hsl(0deg 0% 0% / 1%) 0 0 1px;
 
         .message_embed_title {
             padding-top: 0;
@@ -503,7 +503,7 @@
 
             background: linear-gradient(
                 0deg,
-                hsl(0, 0%, 100%),
+                hsl(0deg 0% 100%),
                 transparent 100%
             );
         }
@@ -511,7 +511,7 @@
 
     &.rtl .message_embed {
         border-left: unset;
-        border-right: 3px solid hsl(0, 0%, 93%);
+        border-right: 3px solid hsl(0deg 0% 93%);
     }
 
     .message_embed > * {
@@ -521,20 +521,20 @@
     }
 
     & a {
-        color: hsl(200, 100%, 40%);
+        color: hsl(200deg 100% 40%);
         text-decoration: none;
 
         & code {
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
 
         &:hover,
         &:focus {
-            color: hsl(200, 100%, 25%);
+            color: hsl(200deg 100% 25%);
             text-decoration: underline;
 
             & code {
-                color: hsl(200, 100%, 25%);
+                color: hsl(200deg 100% 25%);
             }
         }
     }
@@ -550,9 +550,9 @@
         word-wrap: normal;
         margin: 5px 0;
         padding: 5px 7px 3px;
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
         display: block;
-        border: 1px solid hsla(0, 0%, 0%, 0.15);
+        border: 1px solid hsl(0deg 0% 0% / 15%);
         border-radius: 4px;
 
         &:hover .copy_codeblock,
@@ -577,11 +577,11 @@
         font-size: 0.825em;
         unicode-bidi: embed;
         direction: ltr;
-        color: hsl(0, 0%, 0%);
+        color: hsl(0deg 0% 0%);
         white-space: pre-wrap;
         padding: 0 4px;
-        background-color: hsl(0, 0%, 100%);
-        border: 1px solid hsl(240, 13%, 90%);
+        background-color: hsl(0deg 0% 100%);
+        border: 1px solid hsl(240deg 13% 90%);
         border-radius: 3px;
     }
 
@@ -603,10 +603,10 @@
         font-size: 17px;
         /* The default icon and on-hover colors are inherited from <a> tag.
         so we set our own to match the copy-to-clipbord icon */
-        color: hsl(0, 0%, 47%);
+        color: hsl(0deg 0% 47%);
 
         &:hover {
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
     }
 }
@@ -670,21 +670,21 @@
     &::-webkit-scrollbar {
         height: 8px;
         width: 10px;
-        background-color: hsla(0, 0%, 0%, 0.05);
+        background-color: hsl(0deg 0% 0% / 5%);
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: hsla(0, 0%, 0%, 0.3);
+        background-color: hsl(0deg 0% 0% / 30%);
         border-radius: 20px;
         transition: all 0.2s ease;
     }
 
     &::-webkit-scrollbar-thumb:hover {
-        background-color: hsla(0, 0%, 0%, 0.6);
+        background-color: hsl(0deg 0% 0% / 60%);
     }
 }
 
 /* Search highlight used in both topics and rendered_markdown */
 .highlight {
-    background-color: hsl(51, 94%, 74%);
+    background-color: hsl(51deg 94% 74%);
 }
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 0f26f7ce47..036575e5de 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -47,7 +47,7 @@ $user_status_emoji_width: 24px;
             &:hover {
                 display: inline;
                 cursor: pointer;
-                color: hsl(0, 0%, 0%) !important;
+                color: hsl(0deg 0% 0%) !important;
             }
 
             /*
@@ -66,13 +66,13 @@ $user_status_emoji_width: 24px;
             .user-list-sidebar-menu-icon {
                 display: inline;
                 cursor: pointer;
-                color: hsl(0, 0%, 53%);
+                color: hsl(0deg 0% 53%);
             }
         }
 
         &:hover,
         &.highlighted_user {
-            background-color: hsla(120, 12.3%, 71.4%, 0.38);
+            background-color: hsl(120deg 12.3% 71.4% / 38%);
         }
     }
 
@@ -193,12 +193,12 @@ $user_status_emoji_width: 24px;
     right: 0;
     text-align: center;
     vertical-align: middle;
-    border-left: 1px solid hsl(0, 0%, 88%);
+    border-left: 1px solid hsl(0deg 0% 88%);
 }
 
 #userlist-toggle-button {
     text-decoration: none;
-    color: hsl(0, 0%, 60%);
+    color: hsl(0deg 0% 60%);
     display: block;
     width: 45px;
     height: 19px;
diff --git a/web/styles/search.css b/web/styles/search.css
index 6aed91103f..42b06e0d92 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -81,7 +81,7 @@
     }
 
     #search_arrows:focus {
-        box-shadow: inset 0 0 0 2px hsl(204, 20%, 74%);
+        box-shadow: inset 0 0 0 2px hsl(204deg 20% 74%);
     }
 
     .search_close_button,
diff --git a/web/styles/settings.css b/web/styles/settings.css
index 476f4bb97c..e63aa894cb 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -148,7 +148,7 @@ h3,
 
 .user-avatar-section {
     .inline-block {
-        box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+        box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
     }
 }
 
@@ -207,7 +207,7 @@ h3,
 
 .table {
     & tbody {
-        border-bottom: 1px solid hsl(0, 0%, 87%);
+        border-bottom: 1px solid hsl(0deg 0% 87%);
     }
 }
 
@@ -356,7 +356,7 @@ td .button {
     too light. So, we set the color explicitly to original color of label to
     keep the color of the icon same even when the setting is disabled. */
     #id_realm_enable_spectator_access_label a {
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
     }
 
     .settings_select,
@@ -369,15 +369,15 @@ td .button {
 
 .settings_select {
     padding: 4px 6px;
-    color: hsl(0, 0%, 33%);
+    color: hsl(0deg 0% 33%);
     border-radius: 4px;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     cursor: pointer;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 
     &:disabled {
         cursor: not-allowed;
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 }
 
@@ -456,7 +456,7 @@ input[type="checkbox"] {
     top: 2px;
 
     &:hover {
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
         cursor: pointer;
     }
 }
@@ -483,7 +483,7 @@ input[type="checkbox"] {
 
     .language_selection_button {
         text-decoration: none;
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
 
         .fa.fa-pencil {
             margin-left: 5px;
@@ -520,16 +520,16 @@ input[type="checkbox"] {
     border-radius: 4px;
     margin-top: 14px;
     margin-left: 10px;
-    color: hsl(156, 30%, 50%);
+    color: hsl(156deg 30% 50%);
     padding: 3px 10px;
 
     &:not(:empty) {
-        border: 1px solid hsl(156, 30%, 50%);
+        border: 1px solid hsl(156deg 30% 50%);
     }
 
     &.alert-error {
-        color: hsl(2, 46%, 68%);
-        border-color: hsl(2, 46%, 68%);
+        color: hsl(2deg 46% 68%);
+        border-color: hsl(2deg 46% 68%);
     }
 
     .loading_indicator_spinner {
@@ -540,7 +540,7 @@ input[type="checkbox"] {
 
     /* make the spinner green like the text and box. */
     .loading_indicator_spinner svg path {
-        fill: hsl(178, 100%, 40%);
+        fill: hsl(178deg 100% 40%);
     }
 
     .loading_indicator_text {
@@ -611,10 +611,10 @@ input[type="checkbox"] {
 }
 
 .control-label-disabled {
-    color: hsl(0, 0%, 82%);
+    color: hsl(0deg 0% 82%);
 
     &.enabled {
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
     }
 }
 
@@ -665,7 +665,7 @@ input[type="checkbox"] {
         white-space: nowrap;
         height: 1rem;
         font-style: italic;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
     }
 
     #emoji_preview_text {
@@ -704,7 +704,7 @@ input[type="checkbox"] {
         cursor: move;
 
         .fa-ellipsis-v {
-            color: hsl(0, 0%, 75%);
+            color: hsl(0deg 0% 75%);
             position: relative;
             top: 1px;
 
@@ -758,11 +758,11 @@ input[type="checkbox"] {
     .regenerate_bot_api_key {
         position: relative;
         margin-left: 5px;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
         transition: all 0.3s ease;
 
         &:hover {
-            color: hsl(0, 0%, 27%);
+            color: hsl(0deg 0% 27%);
         }
     }
 
@@ -778,23 +778,23 @@ input[type="checkbox"] {
         }
 
         .sea-green {
-            color: hsl(177, 70%, 46%);
+            color: hsl(177deg 70% 46%);
         }
 
         .blue {
-            color: hsl(203, 77%, 56%);
+            color: hsl(203deg 77% 56%);
         }
 
         .danger-red {
-            color: hsl(0, 56%, 73%);
+            color: hsl(0deg 56% 73%);
         }
 
         .copy-gold {
-            color: hsl(51, 90%, 50%);
+            color: hsl(51deg 90% 50%);
         }
 
         .purple {
-            color: hsl(278, 62%, 68%);
+            color: hsl(278deg 62% 68%);
         }
     }
 
@@ -822,7 +822,7 @@ input[type="checkbox"] {
         width: 50px;
         border-radius: 4px;
         vertical-align: top;
-        box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1);
+        box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
     }
 
     .email,
@@ -852,12 +852,12 @@ input[type="checkbox"] {
     .field {
         text-transform: uppercase;
         font-weight: 600;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
     }
 }
 
 #bots_lists_navbar .active a {
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
 }
 
 #inactive_bots_list .bot_info .reactivate_bot {
@@ -955,7 +955,7 @@ input[type="checkbox"] {
 }
 
 #download_zuliprc {
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     text-decoration: none;
 }
 
@@ -992,7 +992,7 @@ input[type="checkbox"] {
 }
 
 label.display-settings-radio-choice-label {
-    border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
+    border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
     padding: 8px 0 10px;
 
     &:last-of-type {
@@ -1007,7 +1007,7 @@ label.display-settings-radio-choice-label {
         cursor: pointer;
 
         &:focus {
-            outline: 1px dotted hsl(0, 0%, 20%);
+            outline: 1px dotted hsl(0deg 0% 20%);
             outline: 5px auto -webkit-focus-ring-color;
             outline-offset: -2px;
         }
@@ -1120,7 +1120,7 @@ $option_title_width: 180px;
 
         & span[contenteditable]:focus,
         span[contenteditable="true"]:hover {
-            border-bottom: 1px solid hsl(0, 0%, 80%);
+            border-bottom: 1px solid hsl(0deg 0% 80%);
             margin-bottom: -1px;
             outline: none;
         }
@@ -1157,7 +1157,7 @@ $option_title_width: 180px;
             display: none;
 
             &:hover {
-                border-color: hsl(4, 56%, 82%);
+                border-color: hsl(4deg 56% 82%);
             }
         }
     }
@@ -1184,7 +1184,7 @@ $option_title_width: 180px;
     .save-instructions {
         display: none;
         opacity: 0;
-        color: hsl(0, 0%, 20%);
+        color: hsl(0deg 0% 20%);
         font-size: 0.9em;
     }
 }
@@ -1230,14 +1230,14 @@ $option_title_width: 180px;
             box-sizing: border-box;
             height: $settings_header_height;
             padding: 6px;
-            border-bottom: 1px solid hsl(0, 0%, 87%);
+            border-bottom: 1px solid hsl(0deg 0% 87%);
         }
     }
 
     .sidebar {
         height: calc(100% - $settings_header_height);
         overflow-y: auto;
-        border-right: 1px solid hsl(0, 0%, 93%);
+        border-right: 1px solid hsl(0deg 0% 93%);
 
         .header {
             height: auto;
@@ -1247,8 +1247,8 @@ $option_title_width: 180px;
             text-align: center;
             text-transform: uppercase;
 
-            background-color: hsl(180, 6%, 93%);
-            border-bottom: 1px solid hsl(0, 0%, 87%);
+            background-color: hsl(180deg 6% 93%);
+            border-bottom: 1px solid hsl(0deg 0% 87%);
         }
 
         & ul {
@@ -1262,14 +1262,14 @@ $option_title_width: 180px;
             outline: none;
             cursor: pointer;
             transition: all 0.2s ease;
-            border-bottom: 1px solid hsl(0, 0%, 93%);
+            border-bottom: 1px solid hsl(0deg 0% 93%);
 
             &:last-of-type .text {
                 border-bottom: none;
             }
 
             &.active {
-                background-color: hsl(0, 0%, 93%);
+                background-color: hsl(0deg 0% 93%);
                 border-bottom: 1px solid transparent;
             }
 
@@ -1292,7 +1292,7 @@ $option_title_width: 180px;
                 text-align: center;
 
                 font-size: 1.4em;
-                color: hsl(0, 0%, 53%);
+                color: hsl(0deg 0% 53%);
 
                 background-size: cover;
                 background-repeat: no-repeat;
@@ -1304,7 +1304,7 @@ $option_title_width: 180px;
                 margin: 14px 8px 6px;
 
                 font-size: 1em;
-                color: hsl(0, 0%, 62%);
+                color: hsl(0deg 0% 62%);
 
                 background-size: cover;
                 background-repeat: no-repeat;
@@ -1323,7 +1323,7 @@ $option_title_width: 180px;
         .settings-sticky-bar {
             position: sticky;
             z-index: 1;
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
             top: 0;
         }
     }
@@ -1333,7 +1333,7 @@ $option_title_width: 180px;
 
         &.mobile {
             display: none;
-            border-bottom: 1px solid hsl(0, 0%, 87%);
+            border-bottom: 1px solid hsl(0deg 0% 87%);
 
             .fa-chevron-left {
                 float: left;
@@ -1356,7 +1356,7 @@ $option_title_width: 180px;
             position: absolute;
             top: 10px;
             right: 10px;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             cursor: pointer;
         }
 
@@ -1383,7 +1383,7 @@ $option_title_width: 180px;
             width: 100%;
             height: $settings_header_height;
             box-sizing: border-box;
-            border-bottom: 1px solid hsl(0, 0%, 87%);
+            border-bottom: 1px solid hsl(0deg 0% 87%);
 
             & h1 .section {
                 font-weight: 400;
@@ -1400,7 +1400,7 @@ $option_title_width: 180px;
             float: left;
             overflow: auto;
 
-            background-color: hsla(0, 0%, 0%, 0.02);
+            background-color: hsl(0deg 0% 0% / 2%);
         }
     }
 
@@ -1415,7 +1415,7 @@ $option_title_width: 180px;
         padding-bottom: 20px;
 
         .field_hint {
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
         }
 
         & textarea {
@@ -1477,7 +1477,7 @@ $option_title_width: 180px;
             position: relative;
             top: 2px;
             padding-left: 5px;
-            color: hsl(0, 0%, 58%);
+            color: hsl(0deg 0% 58%);
             font-weight: lighter;
         }
 
@@ -1551,17 +1551,17 @@ $option_title_width: 180px;
             clear: both;
             font-weight: normal;
             line-height: 20px;
-            color: hsl(0, 0%, 20%);
+            color: hsl(0deg 0% 20%);
             white-space: nowrap;
 
             &:hover {
-                color: hsl(0, 0%, 100%);
+                color: hsl(0deg 0% 100%);
                 text-decoration: none;
-                background-color: hsl(200, 100%, 38%);
+                background-color: hsl(200deg 100% 38%);
                 background-image: linear-gradient(
                     to bottom,
-                    hsl(200, 100%, 40%),
-                    hsl(200, 100%, 35%)
+                    hsl(200deg 100% 40%),
+                    hsl(200deg 100% 35%)
                 );
             }
         }
@@ -1569,7 +1569,7 @@ $option_title_width: 180px;
 }
 
 .subsection-failed-status p {
-    background-color: hsl(0, 43%, 91%);
+    background-color: hsl(0deg 43% 91%);
     padding: 2px 6px;
     border-radius: 4px;
     margin: 0 0 0 5px;
@@ -1594,7 +1594,7 @@ $option_title_width: 180px;
         display: block;
 
         font-style: italic;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
     }
 
     &.thick:empty::after {
@@ -1616,7 +1616,7 @@ $option_title_width: 180px;
 @supports (-moz-appearance: none) {
     #settings_page select {
         appearance: none;
-        background: hsl(0, 0%, 100%) url("../images/dropdown.png") right / 20px
+        background: hsl(0deg 0% 100%) url("../images/dropdown.png") right / 20px
             no-repeat;
         padding-right: 20px;
     }
@@ -1653,15 +1653,15 @@ $option_title_width: 180px;
         padding: 2px 6px;
         min-height: 24px;
         max-width: 206px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
 
         &:focus-within {
-            border-color: hsla(206, 80%, 62%, 0.8);
+            border-color: hsl(206deg 80% 62% / 80%);
             outline: 0;
             outline: 1px dotted \9;
 
-            box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
-                0 0 8px hsla(206, 80%, 62%, 0.6);
+            box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+                0 0 8px hsl(206deg 80% 62% / 60%);
         }
     }
 }
@@ -1682,11 +1682,11 @@ $option_title_width: 180px;
 
 .collapse-settings-btn {
     margin: 10px 0 0 10px;
-    color: hsl(200, 100%, 40%);
+    color: hsl(200deg 100% 40%);
 
     &:hover {
         cursor: pointer;
-        color: hsl(208, 56%, 38%);
+        color: hsl(208deg 56% 38%);
     }
 }
 
@@ -1700,27 +1700,27 @@ $option_title_width: 180px;
 }
 
 .settings_textarea {
-    color: hsl(0, 0%, 33%);
-    background-color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 33%);
+    background-color: hsl(0deg 0% 100%);
     border-radius: 4px;
     vertical-align: middle;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     padding: 4px 6px;
 
-    box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition: border linear 0.2s, box-shadow linear 0.2s;
 
     &:focus {
-        border-color: hsla(206.5, 80%, 62%, 0.8);
+        border-color: hsl(206.5deg 80% 62% / 80%);
         outline: 0;
 
-        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
-            0 0 8px hsla(206.5, 80%, 62%, 0.6);
+        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+            0 0 8px hsl(206.5deg 80% 62% / 60%);
     }
 
     &:disabled {
         cursor: not-allowed;
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 }
 
@@ -1795,7 +1795,7 @@ $option_title_width: 180px;
             & li.active {
                 /* Don't highlight the active section in the settings list. */
                 background: inherit;
-                border-bottom: 1px solid hsl(0, 0%, 93%);
+                border-bottom: 1px solid hsl(0deg 0% 93%);
             }
         }
     }
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index ca94fb9124..a9dd58efad 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -24,21 +24,21 @@
     font-family: "Source Code Pro", monospace;
     padding: 10px;
     font-size: 0.85rem;
-    background-color: hsl(0, 0%, 98%);
-    border: 1px solid hsl(0, 0%, 87%);
+    background-color: hsl(0deg 0% 98%);
+    border: 1px solid hsl(0deg 0% 87%);
     border-radius: 4px;
 }
 
 .sp-preview {
     width: 20px;
     border: none;
-    box-shadow: 0 0 1px hsla(0, 0%, 0%, 1);
+    box-shadow: 0 0 1px hsl(0deg 0% 0%);
 }
 
 .sp-replacer {
     margin-right: 12px;
     border: none;
-    box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.8);
+    box-shadow: 0 0 2px hsl(0deg 0% 0% / 80%);
 }
 
 .stream-email .email-address {
@@ -51,7 +51,7 @@
 
 .muted-sub,
 .control-label-disabled {
-    color: hsl(0, 0%, 64%);
+    color: hsl(0deg 0% 64%);
 }
 
 .sub_setting_checkbox .muted-sub label,
@@ -79,15 +79,15 @@
     font-weight: 500;
     position: relative;
     top: 2px;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     border-radius: 5px;
-    background-color: hsl(0, 0%, 100%);
-    color: hsl(0, 0%, 0%);
+    background-color: hsl(0deg 0% 100%);
+    color: hsl(0deg 0% 0%);
     margin: 0 0 0 5px;
     height: 27px;
 
     &:hover {
-        border: 1px solid hsl(0, 0%, 47%);
+        border: 1px solid hsl(0deg 0% 47%);
     }
 
     & span {
@@ -111,7 +111,7 @@
 .stream_creation_error {
     display: none;
     margin-left: 2px;
-    color: hsl(0, 100%, 50%);
+    color: hsl(0deg 100% 50%);
 }
 
 /* TODO: Unify with settings.css definition */
@@ -134,8 +134,8 @@ h4.user_group_setting_subsection_title {
 .member-list-box,
 .subscriber-list-box {
     text-align: center;
-    border-left: 1px solid hsl(0, 0%, 87%);
-    border-right: 1px solid hsl(0, 0%, 87%);
+    border-left: 1px solid hsl(0deg 0% 87%);
+    border-right: 1px solid hsl(0deg 0% 87%);
     border-radius: 4px;
 
     .member_list_container,
@@ -162,7 +162,7 @@ h4.user_group_setting_subsection_title {
             }
 
             & tr {
-                border-bottom: 1px solid hsl(0, 0%, 93%);
+                border-bottom: 1px solid hsl(0deg 0% 93%);
 
                 & td,
                 th {
@@ -184,7 +184,7 @@ h4.user_group_setting_subsection_title {
                 content: "No subscribers to this stream.";
                 display: block;
 
-                color: hsl(0, 0%, 67%);
+                color: hsl(0deg 0% 67%);
                 padding: 5px 5px 5px 10px;
             }
 
@@ -272,7 +272,7 @@ h4.user_group_setting_subsection_title {
     position: relative;
     transform: translate(-50px, 0);
     opacity: 0;
-    color: hsl(0, 0%, 67%);
+    color: hsl(0deg 0% 67%);
 
     float: left;
     padding: 2px 10px;
@@ -312,7 +312,7 @@ h4.user_group_setting_subsection_title {
         text-align: center;
         text-transform: uppercase;
         font-weight: 700;
-        border-bottom: 1px solid hsl(0, 0%, 87%);
+        border-bottom: 1px solid hsl(0deg 0% 87%);
 
         .fa-chevron-left {
             display: none;
@@ -330,7 +330,7 @@ h4.user_group_setting_subsection_title {
             position: absolute;
             top: 10px;
             right: 10px;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
             cursor: pointer;
         }
     }
@@ -356,11 +356,11 @@ h4.user_group_setting_subsection_title {
     }
 
     .left {
-        border-right: 1px solid hsl(0, 0%, 87%);
+        border-right: 1px solid hsl(0deg 0% 87%);
 
         .search-container {
             padding: 6px 8px;
-            border-bottom: 1px solid hsl(0, 0%, 87%);
+            border-bottom: 1px solid hsl(0deg 0% 87%);
             display: flex;
             justify-content: space-between;
         }
@@ -378,7 +378,7 @@ h4.user_group_setting_subsection_title {
             margin-right: 2em;
 
             & span {
-                color: hsl(0, 0%, 67%);
+                color: hsl(0deg 0% 67%);
             }
 
             & button {
@@ -392,7 +392,7 @@ h4.user_group_setting_subsection_title {
             padding: 2px;
             text-align: center;
             font-weight: 600;
-            border-bottom: 1px solid hsl(0, 0%, 87%);
+            border-bottom: 1px solid hsl(0deg 0% 87%);
 
             &.preview::after {
                 content: "Preview";
@@ -426,11 +426,11 @@ h4.user_group_setting_subsection_title {
     }
 
     & input[type="text"].small {
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         border-radius: 4px;
         padding: 3px;
         outline: none;
-        color: hsl(0, 0%, 27%);
+        color: hsl(0deg 0% 27%);
         text-align: center;
 
         &:focus {
@@ -467,7 +467,7 @@ h4.user_group_setting_subsection_title {
     justify-content: center;
     margin-bottom: 0;
     height: auto;
-    border-bottom: 1px solid hsl(0, 0%, 87%);
+    border-bottom: 1px solid hsl(0deg 0% 87%);
 }
 
 .user-groups-list,
@@ -517,7 +517,7 @@ h4.user_group_setting_subsection_title {
 .stream-row,
 .group-row {
     padding: 15px 10px 11px;
-    border-bottom: 1px solid hsl(0, 0%, 93%);
+    border-bottom: 1px solid hsl(0deg 0% 93%);
     cursor: pointer;
 
     .check {
@@ -557,13 +557,13 @@ h4.user_group_setting_subsection_title {
             }
 
             .loading_indicator_spinner svg path {
-                fill: hsl(178, 100%, 40%);
+                fill: hsl(178deg 100% 40%);
             }
         }
     }
 
     .checked svg {
-        fill: hsl(170, 48%, 54%);
+        fill: hsl(170deg 48% 54%);
     }
 
     .icon {
@@ -571,9 +571,9 @@ h4.user_group_setting_subsection_title {
         height: 35px;
         margin-right: 8px;
         margin-top: 4px;
-        background-color: hsl(300, 100%, 25%);
+        background-color: hsl(300deg 100% 25%);
         border-radius: 4px;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
 
         .symbol {
             font-weight: 600;
@@ -613,7 +613,7 @@ h4.user_group_setting_subsection_title {
         .top-bar .subscriber-count,
         .bottom-bar .stream-message-count {
             white-space: nowrap;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
         }
 
         .top-bar .subscriber-count-text,
@@ -644,7 +644,7 @@ h4.user_group_setting_subsection_title {
     }
 
     &.active {
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 
     > div {
@@ -654,12 +654,12 @@ h4.user_group_setting_subsection_title {
 
     &:hover .check:not(.checked) svg,
     &.active:hover .check:not(.checked) svg {
-        fill: hsl(0, 0%, 87%);
+        fill: hsl(0deg 0% 87%);
     }
 
     .check:not(.checked):hover svg,
     &.active .check:not(.checked):hover svg {
-        fill: hsl(0, 0%, 72%);
+        fill: hsl(0deg 0% 72%);
     }
 
     &::selection,
@@ -672,7 +672,7 @@ h4.user_group_setting_subsection_title {
 .group-row .group-info-box .description:empty::after {
     content: attr(data-no-description);
     font-style: italic;
-    color: hsl(0, 0%, 67%);
+    color: hsl(0deg 0% 67%);
 }
 
 #groups_overlay,
@@ -736,7 +736,7 @@ h4.user_group_setting_subsection_title {
                     display: flex !important;
                     justify-content: center;
                     align-items: center;
-                    background-color: hsla(0, 0%, 100%, 0.9);
+                    background-color: hsl(0deg 0% 100% / 90%);
                     z-index: 1;
                 }
 
@@ -814,11 +814,11 @@ h4.user_group_setting_subsection_title {
         }
 
         .subscribe-button.unsubscribed {
-            color: hsl(156, 39%, 54%);
-            border-color: hsl(156, 39%, 77%);
+            color: hsl(156deg 39% 54%);
+            border-color: hsl(156deg 39% 77%);
 
             &:active {
-                background-color: hsla(156, 39%, 54%, 0.2);
+                background-color: hsl(156deg 39% 54% / 20%);
             }
         }
 
@@ -853,14 +853,14 @@ h4.user_group_setting_subsection_title {
 
         .no-description {
             font-style: italic;
-            color: hsl(0, 0%, 67%);
+            color: hsl(0deg 0% 67%);
         }
     }
 
     .checkmark {
         display: none;
         margin-left: 5px;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
 
         cursor: pointer;
 
@@ -937,7 +937,7 @@ h4.user_group_setting_subsection_title {
 }
 
 div.settings-radio-input-parent {
-    border-bottom: 1px solid hsl(0, 0%, 87%);
+    border-bottom: 1px solid hsl(0deg 0% 87%);
     margin: 2px 0 2px 5px;
     padding: 2px 0;
 
@@ -957,7 +957,7 @@ div.settings-radio-input-parent {
         margin: 3.5px 0 1px;
 
         &:focus {
-            outline: 1px dotted hsl(0, 0%, 20%);
+            outline: 1px dotted hsl(0deg 0% 20%);
             outline: 5px auto -webkit-focus-ring-color;
             outline-offset: -2px;
         }
@@ -1091,7 +1091,7 @@ div.settings-radio-input-parent {
         left: 101%;
 
         top: 45px;
-        background-color: hsl(0, 0%, 98%);
+        background-color: hsl(0deg 0% 98%);
         border-top: none;
 
         transition: all 0.3s ease;
diff --git a/web/styles/tooltips.css b/web/styles/tooltips.css
index 130d0f5ead..f156f24621 100644
--- a/web/styles/tooltips.css
+++ b/web/styles/tooltips.css
@@ -10,7 +10,7 @@
 
     /* Affects all tippy tooltips not using any theme. */
     .tippy-box:not([data-theme]) {
-        background: hsla(0, 0%, 20%, 1);
+        background: hsl(0deg 0% 20%);
         border-radius: 5px;
         min-height: 25px;
         box-sizing: border-box;
@@ -22,7 +22,7 @@
             padding: 5px 10px;
             font-size: 14px;
             line-height: 20px;
-            color: hsla(0, 0%, 100%, 1);
+            color: hsl(0deg 0% 100%);
         }
 
         .tippy-arrow::before {
@@ -38,19 +38,19 @@
         }
 
         &[data-placement^="top"] > .tippy-arrow::before {
-            border-top-color: hsla(0, 0%, 20%, 1);
+            border-top-color: hsl(0deg 0% 20%);
         }
 
         &[data-placement^="bottom"] > .tippy-arrow::before {
-            border-bottom-color: hsla(0, 0%, 20%, 1);
+            border-bottom-color: hsl(0deg 0% 20%);
         }
 
         &[data-placement^="left"] > .tippy-arrow::before {
-            border-left-color: hsla(0, 0%, 20%, 1);
+            border-left-color: hsl(0deg 0% 20%);
         }
 
         &[data-placement^="right"] > .tippy-arrow::before {
-            border-right-color: hsla(0, 0%, 20%, 1);
+            border-right-color: hsl(0deg 0% 20%);
         }
     }
 
@@ -79,9 +79,9 @@
 
     .tooltip-hotkey-hint {
         box-sizing: inherit;
-        border: 1px solid hsla(225, 100%, 84%, 1);
+        border: 1px solid hsl(225deg 100% 84%);
         border-radius: 3px;
-        color: hsla(225, 100%, 84%, 1);
+        color: hsl(225deg 100% 84%);
         padding: 2px 5px;
         min-width: 20px;
         text-align: center;
diff --git a/web/styles/typing_notifications.css b/web/styles/typing_notifications.css
index cd933c6d1f..ea2811ada4 100644
--- a/web/styles/typing_notifications.css
+++ b/web/styles/typing_notifications.css
@@ -2,7 +2,7 @@
     display: none;
     margin-left: 10px;
     font-style: italic;
-    color: hsl(0, 0%, 53%);
+    color: hsl(0deg 0% 53%);
 }
 
 #typing_notification_list {
diff --git a/web/styles/user_circles.css b/web/styles/user_circles.css
index 31208f2b7a..f374d27ad7 100644
--- a/web/styles/user_circles.css
+++ b/web/styles/user_circles.css
@@ -1,5 +1,5 @@
-$active_color: hsl(106, 74%, 44%);
-$idle_color: hsl(29, 84%, 51%);
+$active_color: hsl(106deg 74% 44%);
+$idle_color: hsl(29deg 84% 51%);
 
 .user_circle_green,
 .user_circle_idle,
@@ -21,22 +21,22 @@ $idle_color: hsl(29, 84%, 51%);
     border-color: $idle_color;
     background: linear-gradient(
         to bottom,
-        hsla(0, 0%, 100%, 0) 50%,
+        hsl(0deg 0% 100% / 0%) 50%,
         $idle_color 50%
     );
 }
 
 .user_circle_empty {
     background-color: transparent;
-    border-color: hsl(0, 0%, 50%);
+    border-color: hsl(0deg 0% 50%);
 }
 
 .user_circle_empty_line {
-    border-color: hsl(0, 0%, 50%);
+    border-color: hsl(0deg 0% 50%);
 
     &::after {
         content: "";
-        background: hsl(0, 0%, 50%);
+        background: hsl(0deg 0% 50%);
         height: 1.5px; /* 1px is too thin, 2px is too thick */
         width: 6px;
         display: block;
diff --git a/web/styles/user_status.css b/web/styles/user_status.css
index 6c54dbf65b..a2d6d2f5fa 100644
--- a/web/styles/user_status.css
+++ b/web/styles/user_status.css
@@ -5,7 +5,7 @@
     .user_status_content_wrapper {
         display: flex;
         border: 1px solid;
-        border-color: hsla(0, 0%, 0%, 0.6);
+        border-color: hsl(0deg 0% 0% / 60%);
         border-radius: 5px;
 
         & input.user_status {
@@ -65,7 +65,7 @@
         & button.user-status-value:hover {
             /* Important is required for generic night them styling to not
                have precedence over this. */
-            color: hsl(200, 100%, 40%) !important;
+            color: hsl(200deg 100% 40%) !important;
         }
 
         .user-status-value {
diff --git a/web/styles/widgets.css b/web/styles/widgets.css
index e4b0cb145d..4c84ed5777 100644
--- a/web/styles/widgets.css
+++ b/web/styles/widgets.css
@@ -10,7 +10,7 @@
 
     & button {
         font-weight: 700;
-        color: hsl(240, 100%, 50%);
+        color: hsl(240deg 100% 50%);
     }
 
     .widget-choices-heading {
@@ -36,7 +36,7 @@
             ~ span {
                 height: 12px;
                 width: 12px;
-                border: 2px solid hsl(156, 28%, 70%);
+                border: 2px solid hsl(156deg 28% 70%);
 
                 border-radius: 4px;
                 filter: brightness(1);
@@ -49,8 +49,8 @@
                 background-size: 75%;
                 background-position: 50% 50%;
                 background-repeat: no-repeat;
-                background-color: hsl(156, 41%, 40%);
-                border: 2px solid hsl(156, 41%, 40%);
+                background-color: hsl(156deg 41% 40%);
+                border: 2px solid hsl(156deg 41% 40%);
             }
 
             &:disabled ~ span {
@@ -59,11 +59,11 @@
             }
 
             &:hover ~ span {
-                border-color: hsl(156, 30%, 50%);
+                border-color: hsl(156deg 30% 50%);
             }
 
             &:focus ~ span {
-                outline-color: hsla(0, 0%, 100%, 0);
+                outline-color: hsl(0deg 0% 100% / 0%);
             }
         }
     }
@@ -114,8 +114,8 @@
         position: relative;
         z-index: 1;
 
-        color: hsl(156, 41%, 40%);
-        border-color: hsl(156, 28%, 70%);
+        color: hsl(156deg 41% 40%);
+        border-color: hsl(156deg 28% 70%);
         border-style: solid;
         font-weight: 600;
         border-radius: 3px;
@@ -125,20 +125,20 @@
         min-width: 25px;
         height: 25px;
         font-size: 13px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
 
         &:hover {
-            border-color: hsl(156, 30%, 50%);
+            border-color: hsl(156deg 30% 50%);
         }
 
         &:focus {
             outline: 0;
-            background-color: hsl(156, 41%, 90%);
+            background-color: hsl(156deg 41% 90%);
         }
     }
 
     .poll-names {
-        color: hsl(0, 0%, 45%);
+        color: hsl(0deg 0% 45%);
         padding-left: 4px;
         padding-top: 28px;
         font-size: 14px;
@@ -150,22 +150,22 @@ button {
         height: 20px;
         width: 20px;
         background-color: transparent;
-        border-color: hsl(156, 28%, 70%);
+        border-color: hsl(156deg 28% 70%);
         margin-right: 4px;
         border-radius: 3px;
 
         &:hover {
-            border: 1px solid hsl(194, 60%, 40%);
+            border: 1px solid hsl(194deg 60% 40%);
         }
     }
 
     &.add-task,
     &.poll-option {
-        color: hsl(156, 41%, 40%);
-        border: 1px solid hsl(156, 28%, 70%);
+        color: hsl(156deg 41% 40%);
+        border: 1px solid hsl(156deg 28% 70%);
         width: 100px;
         border-radius: 3px;
-        background-color: hsl(0, 0%, 100%);
+        background-color: hsl(0deg 0% 100%);
         padding: 4px;
         padding-left: 14px;
         padding-right: 14px;
@@ -174,13 +174,13 @@ button {
         &:hover,
         &:focus {
             outline: 0;
-            border-color: hsl(156, 30%, 50%);
+            border-color: hsl(156deg 30% 50%);
         }
 
         &:active {
-            border-color: hsl(156, 30%, 40%);
-            color: hsl(156, 44%, 43%);
-            background-color: hsl(154, 33%, 96%);
+            border-color: hsl(156deg 30% 40%);
+            color: hsl(156deg 44% 43%);
+            background-color: hsl(154deg 33% 96%);
         }
     }
 }
@@ -197,7 +197,7 @@ button {
 }
 
 .widget-error {
-    color: hsl(1, 45%, 50%);
+    color: hsl(1deg 45% 50%);
     font-size: 12px;
 }
 
@@ -206,11 +206,11 @@ button {
     width: 28px !important;
     height: 28px;
     border-radius: 3px;
-    border: 1px solid hsl(0, 0%, 80%);
-    background-color: hsl(0, 0%, 100%);
+    border: 1px solid hsl(0deg 0% 80%);
+    background-color: hsl(0deg 0% 100%);
 
     &:hover {
-        border-color: hsl(0, 0%, 60%);
+        border-color: hsl(0deg 0% 60%);
     }
 }
 
@@ -229,5 +229,5 @@ button {
 }
 
 .current-user-vote {
-    background-color: hsla(156, 10%, 90%, 0.9);
+    background-color: hsl(156deg 10% 90% / 90%);
 }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 4bef1733a7..4601e8c338 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -21,15 +21,15 @@ body {
 /* Common background color */
 body,
 #message_view_header_underpadding {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     transition: background-color 200ms linear;
 }
 
 :root {
     color-scheme: light;
 
-    --color-default-text: hsl(0, 0%, 15%);
-    --color-date: hsl(0, 0%, 15%, 0.75);
+    --color-default-text: hsl(0deg 0% 15%);
+    --color-date: hsl(0deg 0% 15% / 75%);
 
     /*
     This is the header, aka the navbar.
@@ -59,8 +59,8 @@ body,
 }
 
 %dark-theme {
-    --color-default-text: hsl(0, 0%, 100%);
-    --color-date: hsl(0, 0%, 100%, 0.75);
+    --color-default-text: hsl(0deg 0% 100%);
+    --color-date: hsl(0deg 0% 100% / 75%);
 }
 
 :root.dark-theme {
@@ -93,7 +93,7 @@ a {
 
     &.message_label_clickable:hover {
         cursor: pointer;
-        color: hsl(200, 100%, 40%);
+        color: hsl(200deg 100% 40%);
     }
 }
 
@@ -139,14 +139,14 @@ p.n-margin {
 }
 
 .history-limited-box {
-    color: hsl(16, 60%, 45%);
-    border: 1px solid hsl(16, 60%, 45%);
-    box-shadow: 0 0 2px hsl(16, 60%, 45%);
+    color: hsl(16deg 60% 45%);
+    border: 1px solid hsl(16deg 60% 45%);
+    box-shadow: 0 0 2px hsl(16deg 60% 45%);
 }
 
 .all-messages-search-caution {
-    border: 1px solid hsla(192, 19%, 75%, 0.2);
-    box-shadow: 0 0 2px hsla(192, 19%, 75%, 0.2);
+    border: 1px solid hsl(192deg 19% 75% / 20%);
+    box-shadow: 0 0 2px hsl(192deg 19% 75% / 20%);
 }
 
 .history-limited-box,
@@ -190,13 +190,13 @@ p.n-margin {
 
     & svg {
         & circle {
-            fill: hsl(0, 0%, 27%);
-            stroke: hsl(0, 0%, 27%);
+            fill: hsl(0deg 0% 27%);
+            stroke: hsl(0deg 0% 27%);
         }
 
         & path {
-            fill: hsl(0, 0%, 100%);
-            stroke: hsl(0, 0%, 100%);
+            fill: hsl(0deg 0% 100%);
+            stroke: hsl(0deg 0% 100%);
         }
     }
 }
@@ -209,9 +209,9 @@ p.n-margin {
     left: calc(50vw - 220px);
     padding: 15px;
 
-    background-color: hsl(0, 0%, 98%);
+    background-color: hsl(0deg 0% 98%);
     border-radius: 5px;
-    box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.25);
+    box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
     z-index: 110;
 
     animation-name: pulse;
@@ -240,15 +240,15 @@ p.n-margin {
 
 @keyframes pulse {
     0% {
-        box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.35);
+        box-shadow: 0 0 30px hsl(0deg 0% 0% / 35%);
     }
 
     50% {
-        box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.15);
+        box-shadow: 0 0 30px hsl(0deg 0% 0% / 15%);
     }
 
     100% {
-        box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.35);
+        box-shadow: 0 0 30px hsl(0deg 0% 0% / 35%);
     }
 }
 
@@ -275,11 +275,11 @@ p.n-margin {
     height: var(--header-height);
     padding-bottom: var(--header-padding-bottom);
     /* Since the headers are sticky, we need non-transparent background. */
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 #top_navbar {
-    border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
+    border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
 }
 
 #navbar_alerts_wrapper {
@@ -299,13 +299,13 @@ p.n-margin {
 
         text-align: center;
         text-shadow: none;
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
 
         &.alert-info {
-            background-color: hsl(170, 46%, 54%);
+            background-color: hsl(170deg 46% 54%);
 
             &.red {
-                background-color: hsl(0, 46%, 54%);
+                background-color: hsl(0deg 46% 54%);
             }
         }
 
@@ -318,12 +318,12 @@ p.n-margin {
         }
 
         .alert-link {
-            color: hsl(169, 100%, 88%);
+            color: hsl(169deg 100% 88%);
             font-weight: 600;
         }
 
         &.red .alert-link {
-            color: hsl(0, 100%, 88%);
+            color: hsl(0deg 100% 88%);
         }
 
         .buttons .alert-link {
@@ -353,7 +353,7 @@ p.n-margin {
 
     .org-url {
         line-height: 100%;
-        color: hsl(0, 0%, 52%);
+        color: hsl(0deg 0% 52%);
     }
 
     .org-version {
@@ -362,7 +362,7 @@ p.n-margin {
     }
 
     .org-upgrade {
-        color: hsl(226, 82%, 60%);
+        color: hsl(226deg 82% 60%);
 
         & a {
             padding: 0;
@@ -404,7 +404,7 @@ p.n-margin {
     margin: 0 auto;
     padding: 0;
     position: relative;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .column-right {
@@ -425,11 +425,11 @@ p.n-margin {
         & a {
             font-size: calc(16em / 14);
             font-weight: 600;
-            color: hsl(0, 0%, 20%);
+            color: hsl(0deg 0% 20%);
 
             &:hover {
                 text-decoration: none;
-                color: hsl(0, 0%, 0%);
+                color: hsl(0deg 0% 0%);
             }
 
             & i {
@@ -438,7 +438,7 @@ p.n-margin {
         }
 
         .divider {
-            color: hsl(0, 0%, 88%);
+            color: hsl(0deg 0% 88%);
             font-size: 20px;
             line-height: 1;
         }
@@ -452,7 +452,7 @@ p.n-margin {
         height: 40px;
         /* Width of userlist-toggle button. */
         width: 45px;
-        border-left: 1px solid hsl(0, 0%, 88%);
+        border-left: 1px solid hsl(0deg 0% 88%);
 
         .login_button {
             display: flex;
@@ -467,7 +467,7 @@ p.n-margin {
             }
 
             & i {
-                color: hsl(0, 0%, 20%);
+                color: hsl(0deg 0% 20%);
                 font-size: 1.6em;
             }
         }
@@ -538,7 +538,7 @@ i.fa:focus,
 i.zulip-icon:focus,
 .auto-select:focus,
 [role="button"]:focus {
-    outline: 2px solid hsl(215, 47%, 50%);
+    outline: 2px solid hsl(215deg 47% 50%);
     /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
 }
 
@@ -577,7 +577,7 @@ li,
 
 /* Classes which style copy buttons */
 .copy_button_base {
-    outline-color: hsl(0, 0%, 73%);
+    outline-color: hsl(0deg 0% 73%);
     height: 18px;
     width: 10px;
     padding: 6px;
@@ -592,7 +592,7 @@ li,
     z-index: 2;
 
     &:hover svg path {
-        fill: hsl(200, 100%, 40%);
+        fill: hsl(200deg 100% 40%);
     }
 }
 
@@ -656,7 +656,7 @@ strong {
 }
 
 .sidebar-title {
-    color: hsl(0, 0%, 43%);
+    color: hsl(0deg 0% 43%);
     font-size: inherit;
     font-weight: normal;
     display: inline;
@@ -676,7 +676,7 @@ strong {
     }
 
     .tooltip-inner {
-        background-color: hsla(0, 0%, 7%, 0.8);
+        background-color: hsl(0deg 0% 7% / 80%);
         padding: 3px 5px;
     }
 
@@ -705,7 +705,7 @@ strong {
 
 #message_edit_tooltip {
     float: right;
-    color: hsl(0, 0%, 0%);
+    color: hsl(0deg 0% 0%);
     margin-top: 2px;
     margin-left: 6px;
     opacity: 0.5;
@@ -741,7 +741,7 @@ strong {
             clear: both;
             font-weight: normal;
             line-height: 20px;
-            color: hsl(0, 0%, 20%);
+            color: hsl(0deg 0% 20%);
             white-space: nowrap;
 
             &:hover {
@@ -749,13 +749,13 @@ strong {
             }
 
             &:focus {
-                color: hsl(0, 0%, 100%);
+                color: hsl(0deg 0% 100%);
                 text-decoration: none;
-                background-color: hsl(200, 100%, 38%);
+                background-color: hsl(200deg 100% 38%);
                 background-image: linear-gradient(
                     to bottom,
-                    hsl(200, 100%, 40%),
-                    hsl(200, 100%, 35%)
+                    hsl(200deg 100% 40%),
+                    hsl(200deg 100% 35%)
                 );
             }
 
@@ -776,18 +776,18 @@ strong {
     }
 
     .active > a {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
         text-decoration: none;
-        background-color: hsl(200, 100%, 38%);
+        background-color: hsl(200deg 100% 38%);
         background-image: linear-gradient(
             to bottom,
-            hsl(200, 100%, 40%),
-            hsl(200, 100%, 35%)
+            hsl(200deg 100% 40%),
+            hsl(200deg 100% 35%)
         );
         outline: 0;
 
         .user_circle_empty {
-            border-color: hsl(0, 0%, 25%);
+            border-color: hsl(0deg 0% 25%);
         }
     }
 
@@ -798,7 +798,7 @@ strong {
 
 /* Copied from bootstrap 2.1.1 CSS for dropdown-menu li > a:focus */
 li.actual-dropdown-menu > a:focus {
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
     text-decoration: none;
     background-color: transparent;
     background-image: none;
@@ -844,11 +844,11 @@ li.actual-dropdown-menu i {
 td.pointer {
     vertical-align: top;
     padding-top: 10px;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 }
 
 .new_messages {
-    background-color: hsl(194, 53%, 79%);
+    background-color: hsl(194deg 53% 79%);
 }
 
 .new_messages,
@@ -925,8 +925,8 @@ td.pointer {
    z-index is kinda hacky, and requires some annoying color-matching,
    but it works. */
 .alert-msg {
-    color: hsl(170, 48%, 54%);
-    background-color: hsl(0, 0%, 100%);
+    color: hsl(170deg 48% 54%);
+    background-color: hsl(0deg 0% 100%);
     z-index: 999;
     font-weight: 400;
     display: none;
@@ -953,7 +953,7 @@ td.pointer {
         text-align: center;
         display: inline-block;
         position: relative;
-        color: hsl(0, 0%, 73%);
+        color: hsl(0deg 0% 73%);
 
         > i {
             vertical-align: middle;
@@ -977,7 +977,7 @@ td.pointer {
 
     > .reaction_button {
         &:hover {
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
     }
 
@@ -986,7 +986,7 @@ td.pointer {
         height: 16px;
 
         &:hover {
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
     }
 
@@ -995,7 +995,7 @@ td.pointer {
 
         &:hover {
             cursor: pointer;
-            color: hsl(200, 100%, 40%);
+            color: hsl(200deg 100% 40%);
         }
     }
 
@@ -1024,7 +1024,7 @@ td.pointer {
 
         .failed_message_action {
             opacity: 1 !important;
-            color: hsl(0, 100%, 50%);
+            color: hsl(0deg 100% 50%);
             font-weight: bold;
             padding: 1px;
         }
@@ -1036,7 +1036,7 @@ td.pointer {
 
     .star_container {
         &:not(.empty-star) {
-            color: hsl(106, 77%, 29%);
+            color: hsl(106deg 77% 29%);
 
             /* Opacity/visibility as though the message is hovered. */
             opacity: 1 !important;
@@ -1048,7 +1048,7 @@ td.pointer {
 .star {
     &:hover {
         cursor: pointer;
-        color: hsl(153, 80%, 25%);
+        color: hsl(153deg 80% 25%);
     }
 }
 
@@ -1089,7 +1089,7 @@ td.pointer {
 
 .message_list {
     .recipient_row {
-        border-bottom: 1px solid hsl(0, 0%, 88%);
+        border-bottom: 1px solid hsl(0deg 0% 88%);
         /* This value should be in sync with `margin_between_recipient_rows`
            in `message_list_view`. */
         margin-bottom: 10px;
@@ -1099,7 +1099,7 @@ td.pointer {
         position: sticky;
         top: var(--sidebar-top);
         z-index: 3;
-        box-shadow: 0 -1px 0 0 hsl(0, 0%, 100%);
+        box-shadow: 0 -1px 0 0 hsl(0deg 0% 100%);
     }
 }
 
@@ -1109,9 +1109,9 @@ td.pointer {
     font-weight: normal;
     height: 17px;
     line-height: 17px;
-    border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0)
-        hsl(0, 0%, 88%);
-    background-color: hsl(0, 0%, 88%);
+    border-color: hsl(0deg 0% 0% / 0%) hsl(0deg 0% 0% / 0%) hsl(0deg 0% 0% / 0%)
+        hsl(0deg 0% 88%);
+    background-color: hsl(0deg 0% 88%);
     border-width: 0;
     position: relative;
     text-decoration: none;
@@ -1259,35 +1259,35 @@ td.pointer {
 }
 
 .message_header_private_message {
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
 
     .message_label_clickable {
-        background-color: hsl(0, 0%, 27%);
+        background-color: hsl(0deg 0% 27%);
         display: inline-block;
         padding: 3px 6px 2px;
         font-weight: normal;
         height: 17px;
         line-height: 17px;
-        border-left-color: hsl(0, 0%, 27%);
+        border-left-color: hsl(0deg 0% 27%);
     }
 
     /* Base color backgrounds for message boxes,
        private messages, mentions, and unread messages */
 
     .message-header-contents {
-        background-color: hsla(192, 19%, 75%, 0.2);
-        box-shadow: inset 1px 1px 0 hsl(0, 0%, 88%);
+        background-color: hsl(192deg 19% 75% / 20%);
+        box-shadow: inset 1px 1px 0 hsl(0deg 0% 88%);
     }
 }
 
 .private-message {
     .alert-msg {
-        background-color: hsl(192, 20%, 95%);
+        background-color: hsl(192deg 20% 95%);
     }
 
     .messagebox,
     .date_row {
-        background-color: hsla(192, 19%, 75%, 0.2);
+        background-color: hsl(192deg 19% 75% / 20%);
         /* The 5th parameter here is a spread-radius, which, when negative,
          * causes the shadow to shrink (be smaller than the target
          * element), resulting in a visual width of 3px-1px=2px. This
@@ -1301,8 +1301,8 @@ td.pointer {
          * Handlebars templates, since the color used there is the
          * stream's configured color.
          */
-        box-shadow: inset 3px 0 0 -1px hsl(0, 0%, 27%),
-            -1px 0 0 0 hsl(0, 0%, 27%);
+        box-shadow: inset 3px 0 0 -1px hsl(0deg 0% 27%),
+            -1px 0 0 0 hsl(0deg 0% 27%);
     }
 }
 
@@ -1310,13 +1310,13 @@ td.pointer {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-right: 1px solid hsl(0, 0%, 88%);
-    background-color: hsl(0, 0%, 88%);
+    border-right: 1px solid hsl(0deg 0% 88%);
+    background-color: hsl(0deg 0% 88%);
 }
 
 .group_mention .messagebox,
 .direct_mention .messagebox {
-    background-color: hsl(8, 94%, 94%);
+    background-color: hsl(8deg 94% 94%);
 }
 
 .recipient_row .message_row:first-child .unread_marker {
@@ -1344,7 +1344,7 @@ td.pointer {
 }
 
 .unread-marker-fill {
-    background-color: hsl(107, 74%, 29%);
+    background-color: hsl(107deg 74% 29%);
     width: 3px;
     height: 100%;
 }
@@ -1358,15 +1358,15 @@ td.pointer {
     /* Sticky message header overlaps 1px with the box-shadow, so we add another
        2px wide box-shadow 1px below from top to compensate for that. */
     .messagebox-content {
-        box-shadow: inset 0 1px 0 2px hsl(215, 47%, 50%),
-            inset 0 0 0 2px hsl(215, 47%, 50%), 0 0 0 1px hsl(215, 47%, 50%);
+        box-shadow: inset 0 1px 0 2px hsl(215deg 47% 50%),
+            inset 0 0 0 2px hsl(215deg 47% 50%), 0 0 0 1px hsl(215deg 47% 50%);
     }
 }
 
 .selected_message {
     .messagebox-content {
-        box-shadow: inset 0 0 0 2px hsl(215, 47%, 50%),
-            0 0 0 1px hsl(215, 47%, 50%);
+        box-shadow: inset 0 0 0 2px hsl(215deg 47% 50%),
+            0 0 0 1px hsl(215deg 47% 50%);
     }
 }
 
@@ -1389,12 +1389,12 @@ td.pointer {
 .sender_name_hovered {
     .sender_name,
     .sender_name-in-status {
-        color: hsl(200, 100%, 40%);
+        color: hsl(200deg 100% 40%);
     }
 }
 
 .actions_hover:hover {
-    color: hsl(200, 100%, 40%);
+    color: hsl(200deg 100% 40%);
 }
 
 .always_visible_topic_edit,
@@ -1444,11 +1444,11 @@ td.pointer {
 .dark_background a:hover,
 a.dark_background:hover,
 .dark_background {
-    color: hsl(0, 0%, 100%) !important;
+    color: hsl(0deg 0% 100%) !important;
 }
 
 .dark_background a.message_label_clickable:hover {
-    color: hsl(200, 99%, 60%);
+    color: hsl(200deg 99% 60%);
 }
 
 .small {
@@ -1462,7 +1462,7 @@ a.dark_background:hover,
 .settings-forgot-password {
     display: inline-block;
     position: relative;
-    color: hsl(0, 0%, 73%);
+    color: hsl(0deg 0% 73%);
     bottom: 4px;
 }
 
@@ -1475,8 +1475,8 @@ div.message_table {
 
 .message_row {
     position: relative;
-    border-left: 1px solid hsla(0, 0%, 0%, 0.1);
-    border-right: 1px solid hsla(0, 0%, 0%, 0.1);
+    border-left: 1px solid hsl(0deg 0% 0% / 10%);
+    border-right: 1px solid hsl(0deg 0% 0% / 10%);
 
     .date_row {
         /* We only want padding for the date rows between recipient blocks */
@@ -1535,12 +1535,12 @@ div.focused_table {
 .message_edit_countdown_timer {
     text-align: right;
     display: inline;
-    color: hsl(0, 0%, 63%);
+    color: hsl(0deg 0% 63%);
 }
 
 .message_edit_tooltip {
     display: inline;
-    color: hsl(0, 0%, 63%);
+    color: hsl(0deg 0% 63%);
 }
 
 .message-edit-timer {
@@ -1655,7 +1655,7 @@ div.focused_table {
 .message_length_controller {
     display: none;
     text-align: center;
-    color: hsl(200, 100%, 40%);
+    color: hsl(200deg 100% 40%);
 
     /* to make message-uncollapse easier */
     margin-top: 10px;
@@ -1680,7 +1680,7 @@ div.focused_table {
     overflow: hidden;
 
     &.guest-avatar::after {
-        outline: 2px solid hsl(0, 0%, 100%);
+        outline: 2px solid hsl(0deg 0% 100%);
     }
 }
 
@@ -1698,8 +1698,8 @@ div.focused_table {
 }
 
 .top-navbar-border {
-    border-right: 1px solid hsl(0, 0%, 88%);
-    border-left: 1px solid hsl(0, 0%, 88%);
+    border-right: 1px solid hsl(0deg 0% 88%);
+    border-left: 1px solid hsl(0deg 0% 88%);
 }
 
 .search_icon {
@@ -1790,7 +1790,7 @@ div.focused_table {
     }
 
     .divider {
-        color: hsl(0, 0%, 88%);
+        color: hsl(0deg 0% 88%);
         font-size: 20px;
         margin: 0 3px;
     }
@@ -1799,7 +1799,7 @@ div.focused_table {
     .narrow_description {
         background: none;
         font-size: 14px;
-        color: hsl(0, 0%, 40%);
+        color: hsl(0deg 0% 40%);
         font-weight: 400;
         line-height: 20px;
     }
@@ -1821,7 +1821,7 @@ div.focused_table {
             position: absolute;
             top: 25%;
             height: 50%;
-            color: hsl(0, 0%, 88%);
+            color: hsl(0deg 0% 88%);
             font-size: 20px;
 
             @media (width < $sm_min) {
@@ -1957,10 +1957,10 @@ div.focused_table {
 
 #streamlist-toggle-button {
     text-decoration: none;
-    color: hsl(0, 0%, 52%);
+    color: hsl(0deg 0% 52%);
     display: block;
     position: relative;
-    background-color: hsl(0, 0%, 89%);
+    background-color: hsl(0deg 0% 89%);
     width: 40px;
     height: 19px;
     padding-top: 12px;
@@ -1974,17 +1974,17 @@ div.focused_table {
     height: 12px;
     min-width: 12px;
     line-height: 12px;
-    background-color: hsl(0, 100%, 20%);
+    background-color: hsl(0deg 100% 20%);
     top: 4px;
     right: 4px;
-    border: 1px solid hsl(0, 0%, 93%);
-    box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.2);
+    border: 1px solid hsl(0deg 0% 93%);
+    box-shadow: 0 0 1px hsl(0deg 0% 0% / 20%);
     border-radius: 12px;
     padding: 1px;
     font-size: 9px;
     z-index: 15;
     font-weight: normal;
-    color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 100%);
 }
 
 .nav .dropdown-menu {
@@ -1994,7 +1994,7 @@ div.focused_table {
     /* Match the width of the right sidebar so that we don't have
        the presence dots distracting you when looking at this. */
     min-width: 240px;
-    box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2);
+    box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
 
     &::after {
         position: absolute;
@@ -2004,7 +2004,7 @@ div.focused_table {
         right: 19px;
         display: inline-block;
         border-right: 7px solid transparent;
-        border-bottom: 7px solid hsl(0, 0%, 67%);
+        border-bottom: 7px solid hsl(0deg 0% 67%);
         border-left: 7px solid transparent;
         content: "";
         z-index: 10;
@@ -2024,7 +2024,7 @@ div.focused_table {
 
 .typeahead.dropdown-menu {
     .active {
-        color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 100%);
 
         .unsubscribed_icon {
             display: block;
@@ -2032,7 +2032,7 @@ div.focused_table {
             margin-top: 5px;
             margin-right: -12px;
             font-size: 0.8em;
-            color: hsl(96, 7%, 73%);
+            color: hsl(96deg 7% 73%);
         }
     }
 
@@ -2094,7 +2094,7 @@ nav {
 
 .operator_value {
     font-family: "Source Code Pro", monospace;
-    color: hsl(353, 70%, 65%);
+    color: hsl(353deg 70% 65%);
 }
 
 .operator {
@@ -2169,11 +2169,11 @@ nav {
     }
 
     &.small_square_x {
-        background-color: hsl(0, 0%, 100%);
-        color: hsl(0, 0%, 47%);
+        background-color: hsl(0deg 0% 100%);
+        color: hsl(0deg 0% 47%);
 
         &:hover {
-            color: hsl(0, 0%, 18%);
+            color: hsl(0deg 0% 18%);
         }
     }
 }
@@ -2209,27 +2209,27 @@ textarea.invitee_emails {
     max-width: 96%;
     resize: vertical !important;
 
-    color: hsl(0, 0%, 33%);
-    background-color: hsl(0, 0%, 100%);
+    color: hsl(0deg 0% 33%);
+    background-color: hsl(0deg 0% 100%);
     border-radius: 4px;
     vertical-align: middle;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     padding: 4px 6px;
 
-    box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
     transition: border linear 0.2s, box-shadow linear 0.2s;
 
     &:focus {
-        border-color: hsla(206.5, 80%, 62%, 0.8);
+        border-color: hsl(206.5deg 80% 62% / 80%);
         outline: 0;
 
-        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
-            0 0 8px hsla(206.5, 80%, 62%, 0.6);
+        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+            0 0 8px hsl(206.5deg 80% 62% / 60%);
     }
 
     &:disabled {
         cursor: not-allowed;
-        background-color: hsl(0, 0%, 93%);
+        background-color: hsl(0deg 0% 93%);
     }
 }
 
@@ -2246,11 +2246,11 @@ select.invite-as {
     width: 220px;
     height: 30px;
     padding: 4px 6px;
-    color: hsl(0, 0%, 33%);
+    color: hsl(0deg 0% 33%);
     border-radius: 4px;
-    border: 1px solid hsl(0, 0%, 80%);
+    border: 1px solid hsl(0deg 0% 80%);
     cursor: pointer;
-    background-color: hsl(0, 0%, 100%);
+    background-color: hsl(0deg 0% 100%);
     vertical-align: middle;
 }
 
@@ -2381,7 +2381,7 @@ select.invite-as {
     vertical-align: middle;
     height: 0;
     opacity: 0.35;
-    border-bottom: 1px solid hsl(0, 0%, 0%);
+    border-bottom: 1px solid hsl(0deg 0% 0%);
 }
 
 .sub-unsub-message span::before,
@@ -2441,29 +2441,29 @@ select.invite-as {
         /* Setting resize as none hides the bottom right diagonal box
            (which even has a background color of its own!). */
         resize: none !important;
-        color: hsl(0, 0%, 33%);
-        background-color: hsl(0, 0%, 100%);
+        color: hsl(0deg 0% 33%);
+        background-color: hsl(0deg 0% 100%);
         border-radius: 4px;
         vertical-align: middle;
-        border: 1px solid hsl(0, 0%, 80%);
+        border: 1px solid hsl(0deg 0% 80%);
         padding: 4px 6px;
         margin-bottom: 10px;
 
-        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition: border linear 0.2s, box-shadow linear 0.2s;
 
         &:focus {
-            border-color: hsla(206.5, 80%, 62%, 0.8);
+            border-color: hsl(206.5deg 80% 62% / 80%);
             outline: 0;
 
-            box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
-                0 0 8px hsla(206.5, 80%, 62%, 0.6);
+            box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
+                0 0 8px hsl(206.5deg 80% 62% / 60%);
         }
 
         &:read-only,
         &:disabled {
             cursor: not-allowed;
-            background-color: hsl(0, 0%, 93%);
+            background-color: hsl(0deg 0% 93%);
         }
     }
 }
@@ -2486,7 +2486,7 @@ select.invite-as {
     position: absolute;
     left: 0;
     top: 0;
-    background-color: hsl(0, 0%, 0%);
+    background-color: hsl(0deg 0% 0%);
     z-index: 20000;
 }
 
@@ -2518,7 +2518,7 @@ select.invite-as {
 
 .email_copied,
 .user_popover_email i:hover {
-    color: hsl(170, 48%, 54%);
+    color: hsl(170deg 48% 54%);
 }
 
 .email_copied i {
@@ -2542,8 +2542,8 @@ select.invite-as {
     }
 
     .flatpickr-confirm {
-        color: hsl(0, 0%, 100%);
-        background-color: hsl(213, 90%, 65%);
+        color: hsl(0deg 0% 100%);
+        background-color: hsl(213deg 90% 65%);
         font-size: 18px;
         font-weight: 600;
     }
@@ -2572,7 +2572,7 @@ select.invite-as {
         position: absolute;
         right: 8px;
         z-index: 1;
-        color: hsl(0, 0%, 67%);
+        color: hsl(0deg 0% 67%);
     }
 
     .overlay-content {
@@ -2611,9 +2611,9 @@ select.invite-as {
             top: 0;
 
             .right-sidebar {
-                background-color: hsla(0, 0%, 100%, 1);
-                box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
-                border-left: 1px solid hsl(0, 0%, 87%);
+                background-color: hsl(0deg 0% 100%);
+                box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
+                border-left: 1px solid hsl(0deg 0% 87%);
 
                 /* We use both margin and padding to
                    hide little artifacts from showing up in
@@ -2637,7 +2637,7 @@ select.invite-as {
 
     .nav .dropdown-menu {
         min-width: 180px;
-        box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2);
+        box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
 
         &::after {
             right: 21px;
@@ -2673,9 +2673,9 @@ select.invite-as {
             top: 0;
 
             .left-sidebar {
-                background-color: hsla(0, 0%, 100%, 1);
-                box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
-                border-right: 1px solid hsl(0, 0%, 87%);
+                background-color: hsl(0deg 0% 100%);
+                box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
+                border-right: 1px solid hsl(0deg 0% 87%);
 
                 /* We use both margin and padding to
                    hide little artifacts from showing up in
@@ -2845,18 +2845,18 @@ select.invite-as {
         cursor: pointer;
 
         &:hover #scroll-to-bottom-button {
-            background: hsl(240, 96%, 68%);
+            background: hsl(240deg 96% 68%);
         }
 
         #scroll-to-bottom-button {
             text-align: center;
             width: 40px;
             height: 40px;
-            background: hsl(240, 96%, 68%, 0.5);
+            background: hsl(240deg 96% 68% / 50%);
             border-radius: 50%;
 
             & i {
-                color: hsl(0, 0%, 100%);
+                color: hsl(0deg 0% 100%);
                 margin: 0 auto;
                 font-size: 21px;
                 position: relative;
@@ -2897,13 +2897,13 @@ select.invite-as {
         .date_row {
             position: relative;
             z-index: 3;
-            background-color: hsl(0, 0%, 100%);
+            background-color: hsl(0deg 0% 100%);
         }
     }
 
     .private-message.unread {
         .date_row {
-            background-color: hsl(192, 20%, 95%);
+            background-color: hsl(192deg 20% 95%);
         }
     }
 
@@ -2919,7 +2919,7 @@ select.invite-as {
 
     .private-message.unread ~ .private-message.unread {
         .date_row {
-            background-color: hsl(192, 20%, 95%);
+            background-color: hsl(192deg 20% 95%);
         }
     }
 }