Add README, move long comment, update refs
This commit is contained in:
John Whitlock
Родитель
504c09f9f9
Коммит
dda727db1e
|
|
@ -9,30 +9,27 @@ How to test:
|
|||
- [ ] l10n changes have been submitted to the l10n repository, if any.
|
||||
- [ ] I've added a unit test to test for potential regressions of this bug.
|
||||
- [ ] I've added or updated relevant docs in the docs/ directory.
|
||||
- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol tokens where applicable (see `/frontend/src/styles/tokens.scss`).
|
||||
- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol / Nebula colors where applicable (see `/frontend/src/styles/colors.scss`).
|
||||
- [ ] Commits in this PR are minimal and [have descriptive commit messages](https://chris.beams.io/posts/git-commit/).
|
||||
|
||||
<!-- When adding a new feature: -->
|
||||
|
||||
# New feature description
|
||||
|
||||
|
||||
|
||||
# Screenshot (if applicable)
|
||||
|
||||
Not applicable.
|
||||
|
||||
# How to test
|
||||
|
||||
|
||||
|
||||
# Checklist (Definition of Done)
|
||||
|
||||
- [ ] Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
|
||||
- [ ] Customer Experience team has seen or waived a demo of functionality.
|
||||
- [ ] All acceptance criteria are met.
|
||||
- [ ] Jira ticket has been updated (if needed) to match changes made during the development process.
|
||||
- [ ] I've added or updated relevant docs in the docs/ directory
|
||||
- [ ] Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.
|
||||
- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol tokens where applicable (see `/frontend/src/styles/tokens.scss`).
|
||||
- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol / Nebula colors where applicable (see `/frontend/src/styles/colors.scss`).
|
||||
- [ ] Commits in this PR are minimal and [have descriptive commit messages](https://chris.beams.io/posts/git-commit/).
|
||||
- [ ] l10n changes have been submitted to the l10n repository, if any.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
# Relay Styles
|
||||
|
||||
This folder contains style definitions used across the Relay dashboard:
|
||||
|
||||
- `globals.scss` - Implements a [CSS Reset][], adds some top-level styles.
|
||||
- `colors.scss` - Implements the colors for the [Nebula Design System][],
|
||||
overriding the [Mozilla Protocol colors][].
|
||||
- `text.scss` - Implements typography mixins that extend [Mozilla Protocol typography][] to take a [content block][] to avoid [mixed declarations][].
|
||||
|
||||
[CSS Reset]: https://en.wikipedia.org/wiki/Reset_style_sheet
|
||||
[Mozilla Protocol colors]: https://protocol.mozilla.org/docs/fundamentals/color
|
||||
[Mozilla Protocol typography]: https://protocol.mozilla.org/docs/fundamentals/typography
|
||||
[Nebula Design System]: https://www.peterbenvenuto.com/nebula
|
||||
[content block]: https://sass-lang.com/documentation/at-rules/mixin/#content-blocks
|
||||
[mixed declarations]: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
|
||||
|
||||
## Colors
|
||||
|
||||
The [Nebula Design System][] was launched in 2023 to implement a shared style across the Privacy and Security products ([Mozilla VPN][], [Mozilla Monitor][], and Firefox Relay). It defines a consistent typography and color scheme for applications, web pages, and marketing materials.
|
||||
|
||||
The system is implemented by defining the colors in `colors.scss`, and adjusting other styles as needed. These colors are used with this pattern:
|
||||
|
||||
```scss
|
||||
@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
|
||||
@use "../styles/color";
|
||||
|
||||
.warning {
|
||||
background-color: color.$white;
|
||||
border-color: color.$yellow-50;
|
||||
}
|
||||
```
|
||||
|
||||
When using the [Mozilla Protocol colors][], the pattern is:
|
||||
|
||||
```scss
|
||||
@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
|
||||
@use "../styles/color";
|
||||
|
||||
.warning {
|
||||
background-color: $color-white;
|
||||
border-color: $color-yellow-50;
|
||||
}
|
||||
```
|
||||
|
||||
[Mozilla VPN]: https://www.mozilla.org/en-US/products/vpn/
|
||||
[Mozilla Monitor]: https://monitor.mozilla.org/
|
||||
|
||||
## Text
|
||||
|
||||
[Mozilla Protocol typography][] defines [@mixins][] that are used to apply standard text styles to elements, as well as vary them for desktop-sized displays. For example, here is [text-title-xs][], for extra-small titles:
|
||||
|
||||
```scss
|
||||
@mixin text-title-xs {
|
||||
@include font-size(type-scale("title-2xs-size"));
|
||||
line-height: type-scale("title-2xs-line-height");
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(type-scale("title-xs-size"));
|
||||
line-height: type-scale("title-xs-line-height");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is used with an `@include` statement, like:
|
||||
|
||||
```scss
|
||||
@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
|
||||
|
||||
.headline {
|
||||
@include text-title-xs;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm 0;
|
||||
gap: $spacing-sm;
|
||||
font-weight: 100;
|
||||
}
|
||||
```
|
||||
|
||||
This is complied to CSS such as:
|
||||
|
||||
```css
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.08;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
gap: 8px;
|
||||
font-weight: 100;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 28px;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.07;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Dart Sass 1.77.7 deprecated [mixing declarations with nested rules][]. This
|
||||
will allow Sass to adopt CSS rules for declaration order. After the change, this
|
||||
would instead be compiled to:
|
||||
|
||||
```css
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.08;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 28px;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.07;
|
||||
}
|
||||
}
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
gap: 8px;
|
||||
font-weight: 100;
|
||||
}
|
||||
```
|
||||
|
||||
Due to the change in [property order][], this may change the type display. For example,
|
||||
`font-weight: 100` may no longer apply at desktop resolutions. The problem is tracked in [mozilla/protocol issue #998][].
|
||||
|
||||
Relay's local solution is in `text.scss`. It re-implements the `@mixin`s
|
||||
to take a [content block][]:
|
||||
|
||||
```scss
|
||||
@mixin title-xs {
|
||||
@include font-size(type-scale("title-2xs-size"));
|
||||
line-height: type-scale("title-2xs-line-height");
|
||||
@content;
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(type-scale("title-xs-size"));
|
||||
line-height: type-scale("title-xs-line-height");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is used in a similar way to generate the same CSS as before:
|
||||
|
||||
```scss
|
||||
@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
|
||||
@use "../../styles/text" .headline {
|
||||
@include text.title-xs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm 0;
|
||||
gap: $spacing-sm;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This also means that `text.scss` is tied to a specific version of `@mozilla-protocol`,
|
||||
and must be updated when that package is updated. The work for the next update,
|
||||
to [v18.0.0][], is tracked in [MPP-3946][].
|
||||
|
||||
[@mixins]: https://sass-lang.com/documentation/at-rules/mixin/
|
||||
[MPP-3946]: https://mozilla-hub.atlassian.net/browse/MPP-3946
|
||||
[mixing declarations with nested rules]: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
|
||||
[mozilla/protocol issue #998]: https://github.com/mozilla/protocol/issues/998
|
||||
[property order]: https://stackoverflow.com/questions/13080220/how-important-is-css-property-order
|
||||
[text-title-xs]: https://github.com/mozilla/protocol/blob/f318aafa0f3b5ff8815c4b859d5a2de9146657f4/assets/sass/protocol/includes/mixins/_typography.scss#L100-L108
|
||||
[v18.0.0]: https://github.com/mozilla/protocol/releases/tag/v18.0.0
|
||||
|
|
@ -22,6 +22,7 @@ a {
|
|||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
TODO: Try changes from June 2023 and later
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
|
|
|
|||
|
|
@ -1,170 +1,17 @@
|
|||
@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
|
||||
|
||||
/*
|
||||
Re-declare mozilla-protocol typography:
|
||||
* text-title-* becomes title-*
|
||||
* title-* mixins to take a content block
|
||||
Re-declare mozilla-protocol v17.0.1 typography:
|
||||
* text-title-* becomes title-*, text-display-xss becomes display-xss
|
||||
* Mixins now take a @content block
|
||||
|
||||
TODO MPP-3946: Replace with mozilla-protocol v18.0.x overrides
|
||||
TODO MPP-3946: Replace with mozilla-protocol v18.0.0 overrides
|
||||
|
||||
The v17.0.1 typography mixins are at:
|
||||
https://github.com/mozilla/protocol/blob/v17.0.1/assets/sass/protocol/includes/mixins/_typography.scss
|
||||
|
||||
A typical mixin text-title-xs looks like:
|
||||
|
||||
@mixin text-title-xs {
|
||||
@include font-size(type-scale('title-2xs-size'));
|
||||
line-height: type-scale('title-2xs-line-height');
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(type-scale('title-xs-size'));
|
||||
line-height: type-scale('title-xs-line-height');
|
||||
}
|
||||
}
|
||||
|
||||
Here's a typical usage, such as in
|
||||
components/dashboard/EmailForwardingModal.module.scss:
|
||||
|
||||
.headline {
|
||||
@include text-title-xs;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm 0;
|
||||
gap: $spacing-sm;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
This compiles to the CSS:
|
||||
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.08;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
gap: 8px;
|
||||
font-weight: 100
|
||||
}
|
||||
@media(min-width:768px)
|
||||
{
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 28px;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.07
|
||||
}
|
||||
}
|
||||
|
||||
However, it also triggers the Sass deprecation warning about mixed declarations:
|
||||
https://sass-lang.com/documentation/breaking-changes/mixed-decls/
|
||||
|
||||
There are three ways to eliminate the warning. The first two result in the same CSS that is different from the original.
|
||||
|
||||
The first is to move the `@import` down in the original ruleset:
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm 0;
|
||||
gap: $spacing-sm;
|
||||
font-weight: 100;
|
||||
@include text-title-xs;
|
||||
}
|
||||
|
||||
The second is opt-in to the new CSS ordering behaviour with the `&` operator:
|
||||
|
||||
.headline {
|
||||
@{@include text-title-xs;}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm 0;
|
||||
gap: $spacing-sm;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
Both result in this slightly different CSS:
|
||||
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
gap: 8px;
|
||||
font-weight: 100
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.08;
|
||||
}
|
||||
@media(min-width:768px)
|
||||
{
|
||||
.EmailForwardingModal_headline__VgCSC {
|
||||
font-size: 28px;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.07
|
||||
}
|
||||
}
|
||||
|
||||
The change is that the font-size and line-height elements have moved
|
||||
from the top to the bottom of the ruleset. This can change the style
|
||||
due to browser difference and later properties overriding previous
|
||||
properties. See this Stack Overflow question for some of the subtleties:
|
||||
|
||||
https://stackoverflow.com/questions/13080220/how-important-is-css-property-order
|
||||
|
||||
This file implements a third method, overriding the mozilla-protocol mixins to
|
||||
accept a content;. Documentation at:
|
||||
https://sass-lang.com/documentation/at-rules/mixin/#content-blocks
|
||||
|
||||
@mixin title-xs {
|
||||
@include font-size(type-scale('title-2xs-size'));
|
||||
line-height: type-scale('title-2xs-line-height');
|
||||
@content;
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(type-scale('title-xs-size'));
|
||||
line-height: type-scale('title-xs-line-height');
|
||||
}
|
||||
}
|
||||
|
||||
The .headline declaration changes to:
|
||||
|
||||
.headline {
|
||||
@include text.title-xs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm 0;
|
||||
gap: $spacing-sm;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
This results in identical output CSS but without the warning.
|
||||
|
||||
These mixins an also be used to inject the protocol properties in the middle of
|
||||
the ruleset, such as .menu-item in:
|
||||
components/layout/navigation/MobileNavigation.module.scss
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
|
||||
@include text.display-xxs {
|
||||
font-family: $font-stack-firefox;
|
||||
border-bottom: 2px solid $color-light-gray-20;
|
||||
}
|
||||
|
||||
&.sign-up-menu-item {
|
||||
padding: $spacing-md;
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
An experienced CSS author may prefer this form, to only include the properties
|
||||
that they are using to override the base text-* mixin.
|
||||
The next v18.0.0 typography mixins are at:
|
||||
https://github.com/mozilla/protocol/blob/v18.0.0/assets/sass/protocol/includes/mixins/_typography.scss
|
||||
*/
|
||||
|
||||
@forward "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" show
|
||||
|
|
@ -181,8 +28,7 @@ that they are using to override the base text-* mixin.
|
|||
}
|
||||
}
|
||||
|
||||
// @mixin text-title-xl is not used by Relay
|
||||
// @mixin text-title-lg is not used by Relay
|
||||
// @mixins text-title-xl and text-title-lg are not used by Relay
|
||||
|
||||
@mixin title-md {
|
||||
@include font-size(type-scale("title-sm-size"));
|
||||
|
|
@ -228,12 +74,7 @@ that they are using to override the base text-* mixin.
|
|||
}
|
||||
}
|
||||
|
||||
// @mixin text-display-xxl is not used by Relay
|
||||
// @mixin text-display-xl is not used by Relay
|
||||
// @mixin text-display-lg is not used by Relay
|
||||
// @mixin text-display-md is not used by Relay
|
||||
// @mixin text-display-sm is not used by Relay
|
||||
// @mixin text-display-xs is not used by Relay
|
||||
// @mixins text-display-xxl through text-display-xs are not used by Relay
|
||||
|
||||
@mixin display-xxs {
|
||||
@include title-2xs {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ class RelayStaticFilesStorage(CompressedManifestStaticFilesStorage):
|
|||
Convert Next.js source map URL to absolute URL.
|
||||
|
||||
If this changes, or other django.contrib.staticfiles changes adjust CSS output,
|
||||
then update the cache version in globals.scss and tokens.scss to bust the cache.
|
||||
then update the cache version in globals.scss and colors.scss to bust the cache.
|
||||
"""
|
||||
if (
|
||||
name.startswith("_next/static/css/")
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче