Bug 1822094 - Add a shared class for deemphasized text in the new Migration Wizard. r=kpatenio,desktop-theme-reviewers,dao

Notably, this also updates the em ratio of the "base" font size and the deemphasized font-size.

In the Figma specification, the base font size is 13px, and the deemphasized font-size is 10px,
which is ~84% of 13px.

Differential Revision: https://phabricator.services.mozilla.com/D172443
This commit is contained in:
Mike Conley 2023-03-13 21:04:59 +00:00
parent f63433d7a5
commit d74d2de3fc
2 changed files with 10 additions and 7 deletions

View File

@ -46,7 +46,7 @@ export class MigrationWizard extends HTMLElement {
<details class="resource-selection-details" open="true">
<summary>
<div class="selected-data-header" data-l10n-id="migration-all-available-data-label"></div>
<div class="selected-data">&nbsp;</div>
<div class="selected-data deemphasized-text">&nbsp;</div>
<span class="dropdown-icon" role="img"></span>
</summary>
<fieldset id="resource-type-list">
@ -80,25 +80,25 @@ export class MigrationWizard extends HTMLElement {
<div data-resource-type="BOOKMARKS" class="resource-progress-group">
<span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
<span data-l10n-id="migration-bookmarks-option-label"></span>
<span class="success-text">&nbsp;</span>
<span class="success-text deemphasized-text">&nbsp;</span>
</div>
<div data-resource-type="PASSWORDS" class="resource-progress-group">
<span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
<span data-l10n-id="migration-logins-and-passwords-option-label"></span>
<span class="success-text">&nbsp;</span>
<span class="success-text deemphasized-text">&nbsp;</span>
</div>
<div data-resource-type="HISTORY" class="resource-progress-group">
<span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
<span data-l10n-id="migration-history-option-label"></span>
<span class="success-text">&nbsp;</span>
<span class="success-text deemphasized-text">&nbsp;</span>
</div>
<div data-resource-type="FORMDATA" class="resource-progress-group">
<span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
<span data-l10n-id="migration-form-autofill-option-label"></span>
<span class="success-text">&nbsp;</span>
<span class="success-text deemphasized-text">&nbsp;</span>
</div>
</div>
<moz-button-group class="buttons">

View File

@ -39,6 +39,11 @@ div[name="page-loading"] > .buttons > button {
margin-block-start: 16px;
}
.deemphasized-text {
font-size: 0.84em;
color: var(--in-content-deemphasized-text);
}
fieldset {
border: 0;
}
@ -108,8 +113,6 @@ details:not([open]) summary {
.success-text {
grid-area: status;
font-size: 0.81em;
color: var(--in-content-deemphasized-text);
}
.progress-icon {