From ad580d441e8310f64bf580235bdf85d43df71f68 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Mon, 30 Sep 2024 08:59:31 -0500
Subject: [PATCH] Merge pull request #20701 from overleaf/jel-styled-latex-cms

[web] Render new styled text option

GitOrigin-RevId: 5e9ae7825fdd0daa5a1ea81345a0bc5d3a86ce5c
---
 .../stylesheets/bootstrap-5/foundations/colors.scss  |  4 ++++
 .../bootstrap-5/pages/website-redesign.scss          | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss b/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss
index 019b40bbea..75a5dfe244 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss
@@ -61,6 +61,8 @@ $ceil: #9597c9;
 $caramel: #f9d38f;
 $dark-jungle-green: #0f271a;
 $sapphire-blue: #4354a3;
+$purple-bright: #939aff;
+$green-bright: #13c965;
 
 /* ====== Semantic Sass color variables ====== */
 $bg-light-primary: $white;
@@ -178,6 +180,8 @@ $link-ui-visited-dark: $blue-40;
   --caramel: #{$caramel};
   --dark-jungle-green: #{$dark-jungle-green};
   --sapphire-blue: #{$sapphire-blue};
+  --green-bright: #{$green-bright};
+  --purple-bright: #{$purple-bright};
 
   /* ====== Semantic CSS color variables ====== */
   --bg-light-primary: var(--white);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
index 57241fe304..d85b2c3558 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
@@ -204,6 +204,18 @@
     }
   }
 
+  .font-size-display-xs {
+    @include display-xs;
+  }
+
+  .text-purple-bright {
+    color: var(--purple-bright);
+  }
+
+  .text-green-bright {
+    color: var(--green-bright);
+  }
+
   .card {
     --bs-card-bg: var(--neutral-10);
     --bs-card-border-radius: var(--border-radius-large);