Add Firefox Klar wordmark (#932)

added Firefox Klar watermark

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

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);
+}

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';

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' }  %}

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`