From 2323edf81188297fff3b94e4dcb791b4f9a4448e Mon Sep 17 00:00:00 2001 From: Hanna Jones Date: Thu, 20 Mar 2025 15:15:33 +0000 Subject: [PATCH] Bug 1942110 - Part 1: create our icon-size token scale r=reusable-components-reviewers,desktop-theme-reviewers,mtigley,settings-reviewers,credential-management-reviewers,fxview-reviewers,mstriemer,dao,nsharpley Differential Revision: https://phabricator.services.mozilla.com/D241682 --- .../aboutlogins/content/components/login-item.css | 6 +++--- .../content/components/remove-logins-dialog.css | 4 ++-- .../components/firefoxview/fxview-empty-state.css | 4 ++-- browser/themes/shared/preferences/preferences.css | 12 ++++++------ .../themes/shared/design-system/design-tokens.json | 12 ++++++++++++ .../themes/shared/design-system/tokens-shared.css | 6 +++++- .../themes/shared/design-system/tokens-storybook.mjs | 12 ++++++++++-- 7 files changed, 40 insertions(+), 16 deletions(-) diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css index e9e91f78edff..584f14967d09 100644 --- a/browser/components/aboutlogins/content/components/login-item.css +++ b/browser/components/aboutlogins/content/components/login-item.css @@ -228,8 +228,8 @@ moz-button-group, .login-item-favicon { margin-inline-end: 12px; - height: 24px; - width: 24px; + height: var(--icon-size-large); + width: var(--icon-size-large); flex-shrink: 0; -moz-context-properties: fill, fill-opacity; fill: currentColor; @@ -275,7 +275,7 @@ login-command-button { inset-inline-start: 32px; -moz-context-properties: fill; fill: currentColor; - width: 24px; + width: var(--icon-size-large); } .alert-learn-more-link:hover, diff --git a/browser/components/aboutlogins/content/components/remove-logins-dialog.css b/browser/components/aboutlogins/content/components/remove-logins-dialog.css index 9cbf8b6c0280..6fd8a6fe3c96 100644 --- a/browser/components/aboutlogins/content/components/remove-logins-dialog.css +++ b/browser/components/aboutlogins/content/components/remove-logins-dialog.css @@ -63,8 +63,8 @@ .warning-icon { -moz-context-properties: fill; fill: currentColor; - width: 32px; - height: 32px; + width: var(--icon-size-xlarge); + height: var(--icon-size-xlarge); margin: 8px; } diff --git a/browser/components/firefoxview/fxview-empty-state.css b/browser/components/firefoxview/fxview-empty-state.css index 6fde0e929ecd..ff37f4f5e4ab 100644 --- a/browser/components/firefoxview/fxview-empty-state.css +++ b/browser/components/firefoxview/fxview-empty-state.css @@ -64,8 +64,8 @@ .icon { background-position: center center; background-repeat: no-repeat; - width: 20px; - height: 20px; + width: var(--icon-size-medium); + height: var(--icon-size-medium); &:not([hidden]) { display: inline-block; diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css index adcff4bded19..641c9365332f 100644 --- a/browser/themes/shared/preferences/preferences.css +++ b/browser/themes/shared/preferences/preferences.css @@ -278,10 +278,10 @@ radio { } .extension-controlled-icon { - height: 20px; + height: var(--icon-size-medium); margin: 2px 0 6px; vertical-align: middle; - width: 20px; + width: var(--icon-size-medium); -moz-context-properties: fill; fill: currentColor; } @@ -679,8 +679,8 @@ html|dialog, background-color: transparent; /* override common.css, but keep hover/active states */ min-width: 0; min-height: auto; - width: 20px; - height: 20px; + width: var(--icon-size-medium); + height: var(--icon-size-medium); padding: 0; margin-inline: 0 8px; } @@ -919,8 +919,8 @@ dialog > .sync-engines-list + hbox { .androidIcon, .iOSIcon { margin-inline: 2px 4px; - width: 20px; - height: 20px; + width: var(--icon-size-medium); + height: var(--icon-size-medium); vertical-align: text-bottom; } diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json index 493215c1e35a..40836905f850 100644 --- a/toolkit/themes/shared/design-system/design-tokens.json +++ b/toolkit/themes/shared/design-system/design-tokens.json @@ -836,7 +836,19 @@ }, "size": { "default": { + "value": "{icon.size.small}" + }, + "small": { "value": "{size.item.small}" + }, + "medium": { + "value": "20px" + }, + "large": { + "value": "24px" + }, + "xlarge": { + "value": "{size.item.large}" } } }, diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css index d6ece97114d3..f4026695a310 100644 --- a/toolkit/themes/shared/design-system/tokens-shared.css +++ b/toolkit/themes/shared/design-system/tokens-shared.css @@ -157,7 +157,11 @@ --icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30)); --icon-color-success: light-dark(var(--color-green-50), var(--color-green-30)); --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30)); - --icon-size-default: var(--size-item-small); + --icon-size-default: var(--icon-size-small); + --icon-size-small: var(--size-item-small); + --icon-size-medium: 20px; + --icon-size-large: 24px; + --icon-size-xlarge: var(--size-item-large); /** Input - Text **/ --input-text-min-height: var(--button-min-height); diff --git a/toolkit/themes/shared/design-system/tokens-storybook.mjs b/toolkit/themes/shared/design-system/tokens-storybook.mjs index b3a8db6f6c13..eeee6873c858 100644 --- a/toolkit/themes/shared/design-system/tokens-storybook.mjs +++ b/toolkit/themes/shared/design-system/tokens-storybook.mjs @@ -759,7 +759,11 @@ export const storybookTables = { }, ], "icon-size": [ - { value: "var(--size-item-small)", name: "--icon-size-default" }, + { value: "var(--icon-size-small)", name: "--icon-size-default" }, + { value: "var(--size-item-small)", name: "--icon-size-small" }, + { value: "20px", name: "--icon-size-medium" }, + { value: "24px", name: "--icon-size-large" }, + { value: "var(--size-item-large)", name: "--icon-size-xlarge" }, ], "input-space": [ { value: "var(--space-xsmall)", name: "--input-space-block" }, @@ -1306,7 +1310,11 @@ export const variableLookupTable = { prefersContrast: "var(--icon-color)", default: "light-dark(var(--color-red-50), var(--color-red-30))", }, - "icon-size-default": "var(--size-item-small)", + "icon-size-default": "var(--icon-size-small)", + "icon-size-small": "var(--size-item-small)", + "icon-size-medium": "20px", + "icon-size-large": "24px", + "icon-size-xlarge": "var(--size-item-large)", "input-text-min-height": "var(--button-min-height)", "input-space-block": "var(--space-xsmall)", "link-color": {