Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Firefox Klar wordmark #932

Merged
merged 1 commit into from
May 1, 2024
Merged

Add Firefox Klar wordmark #932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
12 changes: 12 additions & 0 deletions assets/sass/protocol/components/logos/_wordmark-product-klar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thought: Is there any benefit to including the klar classes in the focus file? Are we likely to use one without the other?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Benefit? Probably, but I didn't want to mess up how the CSS variables are structured for wordmarks! I'm also not sure I know how to set up conditional logic to extract the Klar workmark only in German only through this file. Because we import one wordmark per file, we'd make to use more specification in how we import this into Bedrock's CSS file, too.

I'm happy to merge for now. Let me know if you think there's a way to cleanly do the above and we can implement that in another PR

}
1 change: 1 addition & 0 deletions assets/sass/protocol/protocol-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions components/branding/wordmark/wordmark--products.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' } %}
Expand Down
1 change: 1 addition & 0 deletions components/branding/wordmark/wordmark--products.readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Product classes:
- `mzp-t-product-developer`
- `mzp-t-product-nightly`
- `mzp-t-product-focus`
- `mzp-t-product-klar`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI there's the same list also in wordmark/readme.md that could benefit from this addition for consistency, if you think it's worth it.

I'm actually thinking about how to document properly that the Klar component is only among the wordmarks, and trying to use the product class with another branding element will fail and folks have to remember to use Focus classes for all other branding needs — so this is an odd duck, existing only for the text difference here, and not elsewhere where it has no use. Some kind of a note to warn people of how specific it is?

- `mzp-t-product-lockwise`
- `mzp-t-product-monitor`
- `mzp-t-product-mozilla`
Expand Down
Loading