corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D222698
This commit is contained in:
Hanna Jones
2024-09-27 14:58:41 +00:00
parent e98c8e4379
commit 53da99d2a0
7 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss
View File

@@ -31,11 +31,11 @@
background-size: var(--icon-size-default); background-size: var(--icon-size-default);
background-position: center; background-position: center;
padding: var(--space-small); 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; transition: fill 0.3s ease-in-out;
&:hover { &:hover {
fill: light-dark(var(--color-gray-100), var(--text-color)); fill: var(--text-color-deemphasized);
} }
&:hover:active { &:hover:active {

2
browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss
View File

@@ -99,7 +99,7 @@
.topic-item { .topic-item {
align-items: center; align-items: center;
border-radius: 40px; border-radius: 40px;
border: 1px solid var(--color-gray-60); border: var(--border-width) solid var(--border-color-interactive);
display: flex; display: flex;
justify-self: center; justify-self: center;
max-width: fit-content; max-width: fit-content;

4
browser/components/newtab/content-src/components/Weather/_Weather.scss
View File

@@ -579,7 +579,7 @@
.search-icon { .search-icon {
content: url('chrome://global/skin/icons/search-glass.svg'); content: url('chrome://global/skin/icons/search-glass.svg');
-moz-context-properties: fill; -moz-context-properties: fill;
fill: light-dark(var(--color-gray-70), var(--color-gray-05)); fill: var(--icon-color);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@@ -589,7 +589,7 @@
.close-icon { .close-icon {
background-image: url('chrome://global/skin/icons/close.svg'); background-image: url('chrome://global/skin/icons/close.svg');
-moz-context-properties: fill; -moz-context-properties: fill;
fill: light-dark(var(--color-gray-70), var(--color-gray-05)); fill: var(--icon-color);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);

10
browser/components/newtab/css/activity-stream.css
View File

@@ -2864,7 +2864,7 @@ main section {
.location-input-wrapper .search-icon { .location-input-wrapper .search-icon {
content: url("chrome://global/skin/icons/search-glass.svg"); content: url("chrome://global/skin/icons/search-glass.svg");
-moz-context-properties: fill; -moz-context-properties: fill;
fill: light-dark(var(--color-gray-70), var(--color-gray-05)); fill: var(--icon-color);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@@ -2873,7 +2873,7 @@ main section {
.location-input-wrapper .close-icon { .location-input-wrapper .close-icon {
background-image: url("chrome://global/skin/icons/close.svg"); background-image: url("chrome://global/skin/icons/close.svg");
-moz-context-properties: fill; -moz-context-properties: fill;
fill: light-dark(var(--color-gray-70), var(--color-gray-05)); fill: var(--icon-color);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@@ -5495,12 +5495,12 @@ main section {
background-size: var(--icon-size-default); background-size: var(--icon-size-default);
background-position: center; background-position: center;
padding: var(--space-small); 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; transition: fill 0.3s ease-in-out;
} }
.card-stp-thumbs-buttons-wrapper .icon-thumbs-up:hover, .card-stp-thumbs-buttons-wrapper .icon-thumbs-up:hover,
.card-stp-thumbs-buttons-wrapper .icon-thumbs-down: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-up:hover:active,
.card-stp-thumbs-buttons-wrapper .icon-thumbs-down:hover:active { .card-stp-thumbs-buttons-wrapper .icon-thumbs-down:hover:active {
@@ -6011,7 +6011,7 @@ main section {
.topic-list .topic-item { .topic-list .topic-item {
align-items: center; align-items: center;
border-radius: 40px; border-radius: 40px;
border: 1px solid var(--color-gray-60); border: var(--border-width) solid var(--border-color-interactive);
display: flex; display: flex;
justify-self: center; justify-self: center;
max-width: fit-content; max-width: fit-content;

4
browser/components/screenshots/screenshots-buttons.css
View File

@@ -3,6 +3,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host { :host {
--screenshots-icon-background-color: var(--color-gray-60);
position: absolute; position: absolute;
/* position about 4px above the container ensuring overlap with toolbar/chrome */ /* position about 4px above the container ensuring overlap with toolbar/chrome */
top: -8px; top: -8px;
@@ -26,7 +28,7 @@
-moz-context-properties: fill, stroke; -moz-context-properties: fill, stroke;
fill: currentColor; fill: currentColor;
/* stroke is the secondary fill color used to define the viewport shape in the SVGs */ /* 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-position: center top;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 46px 46px; background-size: 46px 46px;

2
browser/themes/shared/preferences/translations.css
View File

@@ -74,5 +74,5 @@
} }
.translations-settings-download-size { .translations-settings-download-size {
color: var(--color-gray-60); color: var(--text-color-deemphasized);
} }

88
toolkit/themes/shared/design-system/tokens-table.css
View File

@@ -3,10 +3,25 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host { :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, --table-background-color: color-mix(in srgb,
var(--color-gray-50) 20%, var(--color-gray-50) 20%,
transparent); 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 */ /* Wrapper and filter styles */
@@ -30,14 +45,13 @@ fieldset {
flex: 1; flex: 1;
margin: 0; margin: 0;
padding-block: var(--space-small); padding-block: var(--space-small);
height: var(--input-text-min-height);
box-sizing: border-box; box-sizing: border-box;
gap: var(--space-medium); gap: var(--space-medium);
} }
fieldset, fieldset,
.search-wrapper { .search-wrapper {
border: 1px solid var(--border-color-interactive); border: var(--table-border-inner);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
height: var(--input-text-min-height); height: var(--input-text-min-height);
display: inline-flex; display: inline-flex;
@@ -85,8 +99,8 @@ input[type="search"] {
.table-wrapper { .table-wrapper {
box-sizing: border-box; box-sizing: border-box;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
border: var(--table-border); border: var(--table-border-outer);
margin-block: 1em; margin-block: var(--space-large);
width: 100%; width: 100%;
& > summary { & > summary {
@@ -100,10 +114,10 @@ input[type="search"] {
background-image: url("chrome://global/skin/icons/arrow-down.svg"); background-image: url("chrome://global/skin/icons/arrow-down.svg");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 16px; height: var(--size-item-small);
width: 16px; width: var(--size-item-small);
position: absolute; position: absolute;
inset-inline-start: 8px; inset-inline-start: var(--space-small);
} }
} }
@@ -114,12 +128,12 @@ input[type="search"] {
.table-heading { .table-heading {
background-color: var(--table-background-color); background-color: var(--table-background-color);
border-radius: var(---border-radius-small); border-radius: var(--border-radius-small);
padding: 0 24px; padding: 0 var(--space-xlarge);
& h3 { & h3 {
margin: 0; margin: 0;
padding: 0.5em; padding: var(--space-small);
font-size: var(--font-size-large); font-size: var(--font-size-large);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
text-transform: uppercase; text-transform: uppercase;
@@ -138,7 +152,7 @@ table {
thead { thead {
background-color: var(--table-background-color); background-color: var(--table-background-color);
border-bottom: 1px solid var(--color-gray-50); border-bottom: var(--table-border-inner);
& tr { & tr {
border-block-end: var(--table-border); border-block-end: var(--table-border);
@@ -147,11 +161,11 @@ thead {
tbody td { tbody td {
vertical-align: top; vertical-align: top;
color: var(--color-gray-100); color: var(--text-color);
border-bottom: var(--border-width) solid var(--color-gray-50); border-bottom: var(--table-border-inner);
&.hcm-theme { &.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 { tr td:first-of-type {
border-inline-start: 0; border-inline-start: 0;
color-scheme: light;
} }
tbody tr:first-of-type td { 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 { tbody tr:last-of-type {
@@ -190,11 +205,11 @@ th {
tr td, tr td,
tr th { tr th {
padding: 8px; padding: var(--space-small);
} }
td { td {
background: var(--color-white); background-color: var(--background-color-box);
text-align: center; text-align: center;
} }
@@ -204,18 +219,16 @@ td:first-of-type {
} }
.light-theme { .light-theme {
background: var(--color-white); color-scheme: light;
color: var(--color-gray-100);
} }
.dark-theme { .dark-theme {
background-color: var(--color-gray-90); color-scheme: dark;
color: var(--color-gray-05);
} }
.hcm-theme { .hcm-theme {
background-color: #000000; background-color: #000000;
color: #ffffff; color: var(--color-white);
} }
.preview-wrapper { .preview-wrapper {
@@ -223,7 +236,7 @@ td:first-of-type {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8px; gap: var(--space-small);
height: 100%; height: 100%;
} }
@@ -240,8 +253,8 @@ td:first-of-type {
height: 50px; height: 50px;
width: 100px; width: 100px;
background-color: var(--button-background-color); background-color: var(--button-background-color);
border: 1px solid var(--color-gray-60); border: var(--table-border-inner);
border-radius: 4px; border-radius: var(--border-radius-small);
} }
/** Outline **/ /** Outline **/
@@ -250,7 +263,7 @@ td:first-of-type {
height: 50px; height: 50px;
width: 100px; width: 100px;
background-color: color-mix(in srgb, currentColor 20%, transparent); background-color: color-mix(in srgb, currentColor 20%, transparent);
outline: 2px solid var(--color-gray-60); outline: var(--outline-preview);
} }
/** Font **/ /** Font **/
@@ -264,7 +277,7 @@ td:first-of-type {
/** Icon **/ /** Icon **/
.icon-preview { .icon-preview {
background-color: var(--color-gray-60); background-color: var(--background-color-icon-demo);
height: var(--size-item-large); height: var(--size-item-large);
width: var(--size-item-large); width: var(--size-item-large);
/* FIXME: our icons don't seem to work when used as a mask */ /* FIXME: our icons don't seem to work when used as a mask */
@@ -277,7 +290,7 @@ td:first-of-type {
text-decoration: underline; text-decoration: underline;
&.outline { &.outline {
outline: 2px solid var(--color-blue-50); outline: var(--link-outline-demo);
outline-offset: var(--link-focus-outline-offset); outline-offset: var(--link-focus-outline-offset);
} }
} }
@@ -295,24 +308,17 @@ td:first-of-type {
& .item { & .item {
height: 50%; height: 50%;
width: 40%; width: 40%;
background-color: var(--color-blue-60); background-color: var(--background-color-padding-demo);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
} }
} }
.space-size-background { .space-size-background {
background-color: var(--color-blue-05); background-color: var(--background-color-space-demo);
background-image: linear-gradient(135deg, background-image: var(--background-image-space-demo);
var(--color-blue-30) 10%,
#0000 0,
#0000 50%,
var(--color-blue-30) 0,
var(--color-blue-30) 60%,
#0000 0,
#0000);
background-size: 8px 8px; background-size: 8px 8px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
border: var(--border-width) solid var(--color-gray-50); border: var(--table-border-inner);
} }
/** Padding **/ /** Padding **/
@@ -326,7 +332,7 @@ td:first-of-type {
align-items: center; align-items: center;
&.inner { &.inner {
background-color: var(--color-blue-60); background-color: var(--background-color-padding-demo);
opacity: 0.5; opacity: 0.5;
border-radius: 3px; border-radius: 3px;
} }