From 53da99d2a00e4be5deefb417a6555d0517e3afb7 Mon Sep 17 00:00:00 2001 From: Hanna Jones Date: Fri, 27 Sep 2024 14:58:41 +0000 Subject: [PATCH] Bug 1838298 - Part 2: fix color token usage in line with new Stylelint rule r=desktop-theme-reviewers,settings-reviewers,reusable-components-reviewers,home-newtab-reviewers,dao,thecount Differential Revision: https://phabricator.services.mozilla.com/D222698 --- .../_DSThumbsUpDownButtons.scss | 4 +- .../TopicSelection/_TopicSelection.scss | 2 +- .../components/Weather/_Weather.scss | 4 +- .../components/newtab/css/activity-stream.css | 10 +-- .../screenshots/screenshots-buttons.css | 4 +- .../shared/preferences/translations.css | 2 +- .../shared/design-system/tokens-table.css | 88 ++++++++++--------- 7 files changed, 61 insertions(+), 53 deletions(-) diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss index ff4529d9b9d1..97cf83f84a92 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss @@ -31,11 +31,11 @@ background-size: var(--icon-size-default); background-position: center; padding: var(--space-small); - fill: light-dark(var(--color-gray-70), var(--color-gray-05)); + fill: var(--icon-color); transition: fill 0.3s ease-in-out; &:hover { - fill: light-dark(var(--color-gray-100), var(--text-color)); + fill: var(--text-color-deemphasized); } &:hover:active { diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss index 9a7b80b41ea2..c6716c70b8f8 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss @@ -99,7 +99,7 @@ .topic-item { align-items: center; border-radius: 40px; - border: 1px solid var(--color-gray-60); + border: var(--border-width) solid var(--border-color-interactive); display: flex; justify-self: center; max-width: fit-content; diff --git a/browser/components/newtab/content-src/components/Weather/_Weather.scss b/browser/components/newtab/content-src/components/Weather/_Weather.scss index 3627b9bdeea2..931da636f082 100644 --- a/browser/components/newtab/content-src/components/Weather/_Weather.scss +++ b/browser/components/newtab/content-src/components/Weather/_Weather.scss @@ -579,7 +579,7 @@ .search-icon { content: url('chrome://global/skin/icons/search-glass.svg'); -moz-context-properties: fill; - fill: light-dark(var(--color-gray-70), var(--color-gray-05)); + fill: var(--icon-color); position: absolute; top: 50%; transform: translateY(-50%); @@ -589,7 +589,7 @@ .close-icon { background-image: url('chrome://global/skin/icons/close.svg'); -moz-context-properties: fill; - fill: light-dark(var(--color-gray-70), var(--color-gray-05)); + fill: var(--icon-color); position: absolute; top: 50%; transform: translateY(-50%); diff --git a/browser/components/newtab/css/activity-stream.css b/browser/components/newtab/css/activity-stream.css index 6435f8f196e1..f287183e0470 100644 --- a/browser/components/newtab/css/activity-stream.css +++ b/browser/components/newtab/css/activity-stream.css @@ -2864,7 +2864,7 @@ main section { .location-input-wrapper .search-icon { content: url("chrome://global/skin/icons/search-glass.svg"); -moz-context-properties: fill; - fill: light-dark(var(--color-gray-70), var(--color-gray-05)); + fill: var(--icon-color); position: absolute; top: 50%; transform: translateY(-50%); @@ -2873,7 +2873,7 @@ main section { .location-input-wrapper .close-icon { background-image: url("chrome://global/skin/icons/close.svg"); -moz-context-properties: fill; - fill: light-dark(var(--color-gray-70), var(--color-gray-05)); + fill: var(--icon-color); position: absolute; top: 50%; transform: translateY(-50%); @@ -5495,12 +5495,12 @@ main section { background-size: var(--icon-size-default); background-position: center; padding: var(--space-small); - fill: light-dark(var(--color-gray-70), var(--color-gray-05)); + fill: var(--icon-color); transition: fill 0.3s ease-in-out; } .card-stp-thumbs-buttons-wrapper .icon-thumbs-up:hover, .card-stp-thumbs-buttons-wrapper .icon-thumbs-down:hover { - fill: light-dark(var(--color-gray-100), var(--text-color)); + fill: var(--text-color-deemphasized); } .card-stp-thumbs-buttons-wrapper .icon-thumbs-up:hover:active, .card-stp-thumbs-buttons-wrapper .icon-thumbs-down:hover:active { @@ -6011,7 +6011,7 @@ main section { .topic-list .topic-item { align-items: center; border-radius: 40px; - border: 1px solid var(--color-gray-60); + border: var(--border-width) solid var(--border-color-interactive); display: flex; justify-self: center; max-width: fit-content; diff --git a/browser/components/screenshots/screenshots-buttons.css b/browser/components/screenshots/screenshots-buttons.css index ccb092174ed6..c74d7059fb3a 100644 --- a/browser/components/screenshots/screenshots-buttons.css +++ b/browser/components/screenshots/screenshots-buttons.css @@ -3,6 +3,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ :host { + --screenshots-icon-background-color: var(--color-gray-60); + position: absolute; /* position about 4px above the container ensuring overlap with toolbar/chrome */ top: -8px; @@ -26,7 +28,7 @@ -moz-context-properties: fill, stroke; fill: currentColor; /* stroke is the secondary fill color used to define the viewport shape in the SVGs */ - stroke: var(--color-gray-60); + stroke: var(--screenshots-icon-background-color); background-position: center top; background-repeat: no-repeat; background-size: 46px 46px; diff --git a/browser/themes/shared/preferences/translations.css b/browser/themes/shared/preferences/translations.css index 81afadc04fe6..c9aa68b444e0 100644 --- a/browser/themes/shared/preferences/translations.css +++ b/browser/themes/shared/preferences/translations.css @@ -74,5 +74,5 @@ } .translations-settings-download-size { - color: var(--color-gray-60); + color: var(--text-color-deemphasized); } diff --git a/toolkit/themes/shared/design-system/tokens-table.css b/toolkit/themes/shared/design-system/tokens-table.css index 54f01a962a6e..4cb0e7a5ccbb 100644 --- a/toolkit/themes/shared/design-system/tokens-table.css +++ b/toolkit/themes/shared/design-system/tokens-table.css @@ -3,10 +3,25 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ :host { - --table-border: 2px solid var(--color-gray-50); + --border-color-tokens-table: var(--color-gray-50); + --table-border-outer: 2px solid var(--border-color-tokens-table); + --table-border-inner: var(--border-width) solid var(--border-color-tokens-table); --table-background-color: color-mix(in srgb, var(--color-gray-50) 20%, transparent); + --outline-preview: 2px solid var(--color-gray-60); + --background-color-icon-demo: var(--color-gray-60); + --background-color-padding-demo: var(--color-blue-60); + --background-color-space-demo: var(--color-blue-05); + --background-image-space-demo: linear-gradient(135deg, + var(--color-blue-30) 10%, + #0000 0, + #0000 50%, + var(--color-blue-30) 0, + var(--color-blue-30) 60%, + #0000 0, + #0000); + --link-outline-demo: 2px solid var(--color-blue-50); } /* Wrapper and filter styles */ @@ -30,14 +45,13 @@ fieldset { flex: 1; margin: 0; padding-block: var(--space-small); - height: var(--input-text-min-height); box-sizing: border-box; gap: var(--space-medium); } fieldset, .search-wrapper { - border: 1px solid var(--border-color-interactive); + border: var(--table-border-inner); border-radius: var(--border-radius-small); height: var(--input-text-min-height); display: inline-flex; @@ -85,8 +99,8 @@ input[type="search"] { .table-wrapper { box-sizing: border-box; border-radius: var(--border-radius-small); - border: var(--table-border); - margin-block: 1em; + border: var(--table-border-outer); + margin-block: var(--space-large); width: 100%; & > summary { @@ -100,10 +114,10 @@ input[type="search"] { background-image: url("chrome://global/skin/icons/arrow-down.svg"); background-position: center; background-repeat: no-repeat; - height: 16px; - width: 16px; + height: var(--size-item-small); + width: var(--size-item-small); position: absolute; - inset-inline-start: 8px; + inset-inline-start: var(--space-small); } } @@ -114,12 +128,12 @@ input[type="search"] { .table-heading { background-color: var(--table-background-color); - border-radius: var(---border-radius-small); - padding: 0 24px; + border-radius: var(--border-radius-small); + padding: 0 var(--space-xlarge); & h3 { margin: 0; - padding: 0.5em; + padding: var(--space-small); font-size: var(--font-size-large); font-weight: var(--font-weight-bold); text-transform: uppercase; @@ -138,7 +152,7 @@ table { thead { background-color: var(--table-background-color); - border-bottom: 1px solid var(--color-gray-50); + border-bottom: var(--table-border-inner); & tr { border-block-end: var(--table-border); @@ -147,11 +161,11 @@ thead { tbody td { vertical-align: top; - color: var(--color-gray-100); - border-bottom: var(--border-width) solid var(--color-gray-50); + color: var(--text-color); + border-bottom: var(--table-border-inner); &.hcm-theme { - border-inline-start: var(--border-width) solid var(--color-gray-50); + border-inline-start: var(--table-border-inner); } } @@ -161,10 +175,11 @@ tr td:last-of-type { tr td:first-of-type { border-inline-start: 0; + color-scheme: light; } tbody tr:first-of-type td { - border-block-start: 2px solid var(--color-gray-50); + border-block-start: var(--table-border); } tbody tr:last-of-type { @@ -190,11 +205,11 @@ th { tr td, tr th { - padding: 8px; + padding: var(--space-small); } td { - background: var(--color-white); + background-color: var(--background-color-box); text-align: center; } @@ -204,18 +219,16 @@ td:first-of-type { } .light-theme { - background: var(--color-white); - color: var(--color-gray-100); + color-scheme: light; } .dark-theme { - background-color: var(--color-gray-90); - color: var(--color-gray-05); + color-scheme: dark; } .hcm-theme { background-color: #000000; - color: #ffffff; + color: var(--color-white); } .preview-wrapper { @@ -223,7 +236,7 @@ td:first-of-type { flex-direction: column; justify-content: center; align-items: center; - gap: 8px; + gap: var(--space-small); height: 100%; } @@ -240,8 +253,8 @@ td:first-of-type { height: 50px; width: 100px; background-color: var(--button-background-color); - border: 1px solid var(--color-gray-60); - border-radius: 4px; + border: var(--table-border-inner); + border-radius: var(--border-radius-small); } /** Outline **/ @@ -250,7 +263,7 @@ td:first-of-type { height: 50px; width: 100px; background-color: color-mix(in srgb, currentColor 20%, transparent); - outline: 2px solid var(--color-gray-60); + outline: var(--outline-preview); } /** Font **/ @@ -264,7 +277,7 @@ td:first-of-type { /** Icon **/ .icon-preview { - background-color: var(--color-gray-60); + background-color: var(--background-color-icon-demo); height: var(--size-item-large); width: var(--size-item-large); /* FIXME: our icons don't seem to work when used as a mask */ @@ -277,7 +290,7 @@ td:first-of-type { text-decoration: underline; &.outline { - outline: 2px solid var(--color-blue-50); + outline: var(--link-outline-demo); outline-offset: var(--link-focus-outline-offset); } } @@ -295,24 +308,17 @@ td:first-of-type { & .item { height: 50%; width: 40%; - background-color: var(--color-blue-60); + background-color: var(--background-color-padding-demo); border-radius: var(--border-radius-small); } } .space-size-background { - background-color: var(--color-blue-05); - background-image: linear-gradient(135deg, - var(--color-blue-30) 10%, - #0000 0, - #0000 50%, - var(--color-blue-30) 0, - var(--color-blue-30) 60%, - #0000 0, - #0000); + background-color: var(--background-color-space-demo); + background-image: var(--background-image-space-demo); background-size: 8px 8px; border-radius: var(--border-radius-small); - border: var(--border-width) solid var(--color-gray-50); + border: var(--table-border-inner); } /** Padding **/ @@ -326,7 +332,7 @@ td:first-of-type { align-items: center; &.inner { - background-color: var(--color-blue-60); + background-color: var(--background-color-padding-demo); opacity: 0.5; border-radius: 3px; }