From 87930a574667f8ff0ac1ba785c7c6001798cfa55 Mon Sep 17 00:00:00 2001
From: Reem H <42309026+reemhamz@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:34:48 +1000
Subject: [PATCH] added Firefox Klar watermark

---
 CHANGELOG.md                                         |  7 ++++++-
 .../components/logos/_wordmark-product-klar.scss     | 12 ++++++++++++
 assets/sass/protocol/protocol-components.scss        |  1 +
 components/branding/wordmark/wordmark--products.html |  1 +
 .../branding/wordmark/wordmark--products.readme.md   |  1 +
 5 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 assets/sass/protocol/components/logos/_wordmark-product-klar.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe1bbcec..e1a4575e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,13 @@
+# HEAD
+
+## Features
+* **component:** Add Firefox Klar wordmark for the Wordmark component
+
 # 19.1.0
 
 ## Features
 
-* **component** Remove the format option from Newsletter component (#926)
+* **component:** Remove the format option from Newsletter component (#926)
 * **component:** Allow an optional icon in buttons (#893)
 
 # 19.0.0
diff --git a/assets/sass/protocol/components/logos/_wordmark-product-klar.scss b/assets/sass/protocol/components/logos/_wordmark-product-klar.scss
new file mode 100644
index 00000000..5cda0b97
--- /dev/null
+++ b/assets/sass/protocol/components/logos/_wordmark-product-klar.scss
@@ -0,0 +1,12 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use 'wordmark';
+
+$class: 'klar';
+$dir: 'firefox/browser/klar';
+
+@each $layout-size, $logo-size in wordmark.$logo-sizes {
+    @include wordmark.wordmark($class, $dir, $layout-size, $logo-size);
+}
diff --git a/assets/sass/protocol/protocol-components.scss b/assets/sass/protocol/protocol-components.scss
index 9e4cf8c6..e535421f 100644
--- a/assets/sass/protocol/protocol-components.scss
+++ b/assets/sass/protocol/protocol-components.scss
@@ -66,6 +66,7 @@
 @use 'components/logos/wordmark-product-developer';
 @use 'components/logos/wordmark-product-nightly';
 @use 'components/logos/wordmark-product-focus';
+@use 'components/logos/wordmark-product-klar';
 
 @use 'components/logos/wordmark-product-family';
 @use 'components/logos/wordmark-product-lockwise';
diff --git a/components/branding/wordmark/wordmark--products.html b/components/branding/wordmark/wordmark--products.html
index b89dbfca..0ca239c7 100644
--- a/components/branding/wordmark/wordmark--products.html
+++ b/components/branding/wordmark/wordmark--products.html
@@ -4,6 +4,7 @@
 {% render '@wordmark', { product: 'developer', label: 'Firefox Developer Edition' }  %}
 {% render '@wordmark', { product: 'nightly', label: 'Firefox Nightly' }  %}
 {% render '@wordmark', { product: 'focus', label: 'Firefox Focus' }  %}
+{% render '@wordmark', { product: 'klar', label: 'Firefox Klar' }  %}
 {% render '@wordmark', { product: 'lockwise', label: 'Firefox Lockwise' }  %}
 {% render '@wordmark', { product: 'monitor', label: 'Firefox Monitor' }  %}
 {% render '@wordmark', { product: 'relay', label: 'Firefox Relay' }  %}
diff --git a/components/branding/wordmark/wordmark--products.readme.md b/components/branding/wordmark/wordmark--products.readme.md
index 58352e9f..70ccdb0c 100644
--- a/components/branding/wordmark/wordmark--products.readme.md
+++ b/components/branding/wordmark/wordmark--products.readme.md
@@ -5,6 +5,7 @@ Product classes:
 - `mzp-t-product-developer`
 - `mzp-t-product-nightly`
 - `mzp-t-product-focus`
+- `mzp-t-product-klar`
 - `mzp-t-product-lockwise`
 - `mzp-t-product-monitor`
 - `mzp-t-product-mozilla`