diff --git a/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss b/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss index 330bfbb4fbb4..d868514877c0 100644 --- a/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss +++ b/browser/components/newtab/content-src/asrouter/components/Button/_Button.scss @@ -25,70 +25,27 @@ &.primary { border: 1px solid var(--newtab-button-primary-color); background-color: var(--newtab-button-primary-color); - color: $grey-10; + color: var(--newtab-button-primary-text-color); &:hover { - background-color: $blue-70; + background-color: var(--newtab-button-primary-hover-color); } &:active { - background-color: $blue-80; - } - } - - &.secondary { - background-color: $grey-90-10; - - &:hover { - background-color: $grey-90-20; - } - - &:active { - background-color: $grey-90-30; - } - - &:focus { - box-shadow: 0 0 0 1px $blue-50 inset, 0 0 0 1px $blue-50, 0 0 0 4px $blue-50-30; + background-color: var(--newtab-button-primary-active-color); } } &.slim { - background-color: $grey-90-10; + border: $border-primary; margin-inline-start: 0; font-size: 12px; padding: 6px 12px; - &:hover { - background-color: $grey-90-20; - } - } -} - -[lwt-newtab-brighttext] { - .secondary { - background-color: $grey-10-10; - - &:hover { - background-color: $grey-10-20; - } - - &:active { - background-color: $grey-10-30; - } - } - - // Snippets scene 2 footer - .footer { - .secondary { - background-color: $grey-10-30; - - &:hover { - background-color: $grey-10-40; - } - - &:active { - background-color: $grey-10-50; - } + &:hover, + &:focus { + box-shadow: $shadow-primary; + transition: box-shadow 150ms; } } } diff --git a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss index 2cdbfcb1db7b..ac515ad08034 100644 --- a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss +++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss @@ -96,8 +96,7 @@ $modal-scrollbar-z-index: 1100; &:focus, &.active, &:hover { - box-shadow: 0 0 0 5px $grey-30; - transition: box-shadow 150ms; + @include fade-in-card; } } } diff --git a/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss b/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss index ef17606e8001..196f407f4b37 100644 --- a/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss +++ b/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss @@ -14,11 +14,11 @@ } .donation-amount { - color: $grey-90; + color: var(--newtab-text-primary-color); margin-inline-end: 18px; - border: 1px solid $grey-40; + border: $input-border; padding: 5px 14px; - background: $grey-10; + background: var(--newtab-textbox-background-color); cursor: pointer; } @@ -28,9 +28,10 @@ margin-inline-end: -18px; &:checked + .donation-amount { - background: $grey-50; - color: $white; - border: 1px solid $grey-60; + // Use a text color for the background to achieve an inverted look. + background: var(--newtab-text-secondary-color); + color: var(--newtab-background-color-secondary); + border: $border-secondary; } // accessibility diff --git a/browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss b/browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss index dd9e6375295f..7faa44730c16 100644 --- a/browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss +++ b/browser/components/newtab/content-src/asrouter/templates/SimpleBelowSearchSnippet/_SimpleBelowSearchSnippet.scss @@ -82,7 +82,7 @@ top: 50%; &:focus { - box-shadow: 0 0 0 1px $blue-50 inset, 0 0 0 1px $blue-50, 0 0 0 4px $blue-50-30; + box-shadow: $shadow-primary; border-radius: 2px; } } diff --git a/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss b/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss index 0e12ec97e7e2..f48742aee615 100644 --- a/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss +++ b/browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss @@ -110,7 +110,7 @@ margin-inline-end: 4px; &:hover { - background-color: $grey-20-60; + background-color: var(--newtab-element-hover-color); box-shadow: none; } } diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss index eb68f68d49bc..e36125a8b394 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -10,10 +10,10 @@ $excerpt-line-height: 20; position: relative; .playhead { - background: $blue-60 url('chrome://activity-stream/content/data/content/assets/glyph-playhead.svg') no-repeat 12px center; + background: var(--newtab-button-primary-color) url('chrome://activity-stream/content/data/content/assets/glyph-playhead.svg') no-repeat 12px center; border-radius: 20px; bottom: -16px; - color: $white-0; + color: color-mix(in srgb, var(--newtab-button-primary-text-color) 0%, transparent); display: flex; flex-direction: column; height: 40px; @@ -25,7 +25,7 @@ $excerpt-line-height: 20; transition: padding 100ms ease-in-out 0ms, color 100ms linear 100ms; &:hover { - color: $white; + color: var(--newtab-button-primary-text-color); padding: 0 20px 0 40px; } @@ -132,11 +132,7 @@ $excerpt-line-height: 20; } .cta-button { - @include dark-theme-only { - color: $grey-10; - background: $grey-90-70; - } - + background-color: var(--newtab-button-secondary-color); width: 100%; margin: 12px 0 4px; box-shadow: none; @@ -145,34 +141,10 @@ $excerpt-line-height: 20; font-size: 14px; font-weight: 600; padding: 5px 8px 7px; - border: 0; - color: $grey-90; - background: $grey-90-10; - - &:focus { - @include dark-theme-only { - background: $grey-90-70; - box-shadow: 0 0 0 2px $grey-80, 0 0 0 5px $blue-50-50; - } - - background: $grey-90-10; - box-shadow: 0 0 0 2px $white, 0 0 0 5px $blue-50-50; - } - - &:hover { - @include dark-theme-only { - background: $grey-90-50; - } - - background: $grey-90-20; - } + border: $border-primary; &:active { - @include dark-theme-only { - background: $grey-90-70; - } - - background: $grey-90-30; + box-shadow: $shadow-primary; } } diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss index 1d28be53a9b7..154f0c43d976 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSDismiss/_DSDismiss.scss @@ -26,43 +26,19 @@ background-color: transparent; .icon { - @include dark-theme-only { - fill: $grey-20; - } - - fill: $grey-50; + fill: var(--newtab-icon-primary-color); } &:hover { - @include dark-theme-only { - background: $grey-90-50; - - .icon { - fill: $grey-10; - } - } - - background: $grey-90-20; - - .icon { - fill: $grey-80; - } + background: var(--newtab-element-hover-color); } &:active { - @include dark-theme-only { - background: $grey-90-70; - } - - background: $grey-90-30; + background: var(--newtab-element-active-color); } &:focus { - @include dark-theme-only { - box-shadow: 0 0 0 2px $grey-80, 0 0 0 5px $blue-50-50; - } - - box-shadow: 0 0 0 2px $white, 0 0 0 5px $blue-50-50; + box-shadow: $shadow-secondary; } } } diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss index 4849941416d5..7a21179b6be3 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss @@ -86,11 +86,7 @@ } &:focus { - @include dark-theme-only { - box-shadow: 0 0 0 2px $grey-80, 0 0 0 5px $blue-50-50; - } - - box-shadow: 0 0 0 2px $white, 0 0 0 5px $blue-50-50; + box-shadow: $shadow-secondary; border-radius: 2px; } diff --git a/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss b/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss index 3a55da911280..9d7bc37db037 100644 --- a/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss +++ b/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss @@ -8,7 +8,7 @@ .pocket-cta-button { white-space: nowrap; - background: $blue-60; + background: var(--newtab-button-primary-color); letter-spacing: -0.34px; color: $white; border-radius: 4px; diff --git a/browser/components/newtab/content-src/components/Search/_Search.scss b/browser/components/newtab/content-src/components/Search/_Search.scss index f44d5d05c769..7ca4b4bb96f0 100644 --- a/browser/components/newtab/content-src/components/Search/_Search.scss +++ b/browser/components/newtab/content-src/components/Search/_Search.scss @@ -97,9 +97,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); border-radius: 8px; color: var(--newtab-search-text-color); -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); - font-weight: 500; - font-size: 15px; + fill: var(--newtab-icon-secondary-color); &:dir(rtl) { background-position-x: right $search-icon-padding; @@ -119,7 +117,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); border: 0; border-radius: 0 $border-radius $border-radius 0; -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); + fill: var(--newtab-icon-secondary-color); height: 100%; inset-inline-end: 0; position: absolute; @@ -127,7 +125,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); &:focus, &:hover { - background-color: $grey-90-10; + background-color: var(--newtab-element-hover-color); cursor: pointer; } @@ -139,7 +137,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); } &:active { - background-color: $grey-90-20; + background-color: var(--newtab-element-hover-color); } &:dir(rtl) { diff --git a/browser/components/newtab/content-src/components/TopSites/_TopSites.scss b/browser/components/newtab/content-src/components/TopSites/_TopSites.scss index 7f105c0e1f7f..7f8663266ddb 100644 --- a/browser/components/newtab/content-src/components/TopSites/_TopSites.scss +++ b/browser/components/newtab/content-src/components/TopSites/_TopSites.scss @@ -223,10 +223,10 @@ $letter-fallback-color: $white; .search-topsite { background-image: url('chrome://global/skin/icons/search-glass.svg'); background-size: 16px; - background-color: $blue-60; + background-color: var(--newtab-button-primary-color); border-radius: $default-icon-wrapper-size; -moz-context-properties: fill; - fill: $white; + fill: var(--newtab-button-primary-text-color); box-shadow: var(--newtab-card-shadow); transition-duration: $hover-transition-duration; transition-property: background-size, bottom, inset-inline-end, height, width; diff --git a/browser/components/newtab/content-src/styles/_activity-stream.scss b/browser/components/newtab/content-src/styles/_activity-stream.scss index 702ef9bdd1f2..93b112dd6753 100644 --- a/browser/components/newtab/content-src/styles/_activity-stream.scss +++ b/browser/components/newtab/content-src/styles/_activity-stream.scss @@ -108,7 +108,7 @@ a { &.done { background-color: var(--newtab-button-primary-color); border: solid 1px var(--newtab-button-primary-color); - color: $white; + color: var(--newtab-button-primary-text-color); margin-inline-start: auto; } } diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss index 0bea49cb81cf..637875801797 100644 --- a/browser/components/newtab/content-src/styles/_theme.scss +++ b/browser/components/newtab/content-src/styles/_theme.scss @@ -47,11 +47,13 @@ body { // Buttons --newtab-button-primary-color: #{$blue-60}; + --newtab-button-primary-hover-color: #{$blue-70}; + --newtab-button-primary-active-color: #{$blue-80}; + --newtab-button-primary-text-color: #{$white}; --newtab-button-secondary-color: inherit; // Feed buttons --newtab-feed-button-background: #{$grey-20}; --newtab-feed-button-text: #{$grey-90}; - --newtab-feed-button-background-faded: #{$grey-20-60}; --newtab-feed-button-text-faded: #{$grey-90-00}; --newtab-feed-button-spinner: #{$grey-50}; @@ -73,7 +75,6 @@ body { --newtab-search-dropdown-color: #{$white}; --newtab-search-dropdown-header-color: #{$grey-10}; --newtab-search-header-background-color: #{$grey-10-95}; - --newtab-search-icon-color: #{$grey-90-40}; // Top Sites --newtab-topsites-background-color: var(--newtab-background-color-secondary); @@ -163,7 +164,6 @@ body { --newtab-search-dropdown-color: #{$grey-70}; --newtab-search-dropdown-header-color: #{$grey-60}; --newtab-search-header-background-color: #{$grey-80-95}; - --newtab-search-icon-color: #{$grey-10-60}; // Top Sites --newtab-topsites-outer-card-hover: #{$newtab-card-darktheme-hover-color}; diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index 755a7c06ffbf..0f35dd60b61c 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -56,10 +56,12 @@ body { --newtab-background-button-hover-color: rgba(196, 196, 196, 0.5); --newtab-background-button-active-color: rgba(151, 151, 151, 0.5); --newtab-button-primary-color: #0060DF; + --newtab-button-primary-hover-color: #003EAA; + --newtab-button-primary-active-color: #002275; + --newtab-button-primary-text-color: #FFF; --newtab-button-secondary-color: inherit; --newtab-feed-button-background: #EDEDF0; --newtab-feed-button-text: #0C0C0D; - --newtab-feed-button-background-faded: rgba(237, 237, 240, 0.6); --newtab-feed-button-text-faded: rgba(12, 12, 13, 0); --newtab-feed-button-spinner: #737373; --newtab-contextmenu-background-color: #F9F9FA; @@ -72,7 +74,6 @@ body { --newtab-search-dropdown-color: #FFF; --newtab-search-dropdown-header-color: #F9F9FA; --newtab-search-header-background-color: rgba(249, 249, 250, 0.95); - --newtab-search-icon-color: rgba(12, 12, 13, 0.4); --newtab-topsites-background-color: var(--newtab-background-color-secondary); --newtab-topsites-outer-card-hover: rgba(0, 0, 0, 0.05); --newtab-topsites-context-menu-hover: rgba(0, 0, 0, 0.05); @@ -142,7 +143,6 @@ body[lwt-newtab-brighttext] { --newtab-search-dropdown-color: #38383D; --newtab-search-dropdown-header-color: #4A4A4F; --newtab-search-header-background-color: rgba(42, 42, 46, 0.95); - --newtab-search-icon-color: rgba(249, 249, 250, 0.6); --newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1); --newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1); --newtab-card-active-outline-color: #4A4A4F; @@ -440,7 +440,7 @@ a { .actions button.done { background-color: var(--newtab-button-primary-color); border: solid 1px var(--newtab-button-primary-color); - color: #FFF; + color: var(--newtab-button-primary-text-color); margin-inline-start: auto; } @@ -803,10 +803,10 @@ main.has-snippet { .top-site-outer .search-topsite { background-image: url("chrome://global/skin/icons/search-glass.svg"); background-size: 16px; - background-color: #0060DF; + background-color: var(--newtab-button-primary-color); border-radius: 32px; -moz-context-properties: fill; - fill: #FFF; + fill: var(--newtab-button-primary-text-color); box-shadow: var(--newtab-card-shadow); transition-duration: 150ms; transition-property: background-size, bottom, inset-inline-end, height, width; @@ -1345,9 +1345,7 @@ main.has-snippet { border-radius: 8px; color: var(--newtab-search-text-color); -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); - font-weight: 500; - font-size: 15px; + fill: var(--newtab-icon-secondary-color); } .search-wrapper .search-handoff-button:dir(rtl), .search-wrapper input:dir(rtl) { @@ -1365,14 +1363,14 @@ main.has-snippet { border: 0; border-radius: 0 3px 3px 0; -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); + fill: var(--newtab-icon-secondary-color); height: 100%; inset-inline-end: 0; position: absolute; width: 48px; } .search-wrapper .search-button:focus, .search-wrapper .search-button:hover { - background-color: rgba(12, 12, 13, 0.1); + background-color: var(--newtab-element-hover-color); cursor: pointer; } .search-wrapper .search-button:focus { @@ -1382,7 +1380,7 @@ main.has-snippet { border-radius: 0 8px 8px 0; } .search-wrapper .search-button:active { - background-color: rgba(12, 12, 13, 0.2); + background-color: var(--newtab-element-hover-color); } .search-wrapper .search-button:dir(rtl) { transform: scaleX(-1); @@ -2453,7 +2451,7 @@ main.has-snippet { margin-inline-end: 4px; } .asrouter-admin .json-button:hover { - background-color: rgba(237, 237, 240, 0.6); + background-color: var(--newtab-element-hover-color); box-shadow: none; } .asrouter-admin table { @@ -2584,7 +2582,7 @@ main.has-snippet { } .pocket-logged-in-cta .pocket-cta-button { white-space: nowrap; - background: #0060DF; + background: var(--newtab-button-primary-color); letter-spacing: -0.34px; color: #FFF; border-radius: 4px; @@ -3586,10 +3584,10 @@ main.has-snippet { position: relative; } .ds-card .playhead { - background: #0060DF url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; + background: var(--newtab-button-primary-color) url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; border-radius: 20px; bottom: -16px; - color: rgba(255, 255, 255, 0); + color: color-mix(in srgb, var(--newtab-button-primary-text-color) 0%, transparent); display: flex; flex-direction: column; height: 40px; @@ -3601,7 +3599,7 @@ main.has-snippet { transition: padding 100ms ease-in-out 0ms, color 100ms linear 100ms; } .ds-card .playhead:hover { - color: #FFF; + color: var(--newtab-button-primary-text-color); padding: 0 20px 0 40px; } .ds-card .playhead span { @@ -3684,6 +3682,7 @@ main.has-snippet { color: #B1B1B3; } .ds-card .meta .cta-button { + background-color: var(--newtab-button-secondary-color); width: 100%; margin: 12px 0 4px; box-shadow: none; @@ -3692,33 +3691,10 @@ main.has-snippet { font-size: 14px; font-weight: 600; padding: 5px 8px 7px; - border: 0; - color: #0C0C0D; - background: rgba(12, 12, 13, 0.1); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button { - color: #F9F9FA; - background: rgba(12, 12, 13, 0.7); -} -.ds-card .meta .cta-button:focus { - background: rgba(12, 12, 13, 0.1); - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:focus { - background: rgba(12, 12, 13, 0.7); - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -.ds-card .meta .cta-button:hover { - background: rgba(12, 12, 13, 0.2); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:hover { - background: rgba(12, 12, 13, 0.5); + border: 1px solid var(--newtab-border-primary-color); } .ds-card .meta .cta-button:active { - background: rgba(12, 12, 13, 0.3); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:active { - background: rgba(12, 12, 13, 0.7); + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); } .ds-card .meta .cta-link { color: var(--newtab-link-primary-color); @@ -3905,34 +3881,16 @@ main.has-snippet { background-color: transparent; } .ds-dismiss .ds-dismiss-button .icon { - fill: #737373; -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button .icon { - fill: #EDEDF0; + fill: var(--newtab-icon-primary-color); } .ds-dismiss .ds-dismiss-button:hover { - background: rgba(12, 12, 13, 0.2); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover { - background: rgba(12, 12, 13, 0.5); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover .icon { - fill: #F9F9FA; -} -.ds-dismiss .ds-dismiss-button:hover .icon { - fill: #2A2A2E; + background: var(--newtab-element-hover-color); } .ds-dismiss .ds-dismiss-button:active { - background: rgba(12, 12, 13, 0.3); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:active { - background: rgba(12, 12, 13, 0.7); + background: var(--newtab-element-active-color); } .ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); } .ds-message { @@ -4146,12 +4104,9 @@ main.has-snippet { background-color: var(--newtab-link-primary-active-color); } .ds-chevron-link:focus { - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); border-radius: 2px; } -[lwt-newtab-brighttext] .ds-chevron-link:focus { - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); -} .ds-chevron-link::after { background-color: var(--newtab-link-primary-color); content: " "; @@ -4277,53 +4232,23 @@ main.has-snippet { .ASRouterButton.primary { border: 1px solid var(--newtab-button-primary-color); background-color: var(--newtab-button-primary-color); - color: #F9F9FA; + color: var(--newtab-button-primary-text-color); } .ASRouterButton.primary:hover { - background-color: #003EAA; + background-color: var(--newtab-button-primary-hover-color); } .ASRouterButton.primary:active { - background-color: #002275; -} -.ASRouterButton.secondary { - background-color: rgba(12, 12, 13, 0.1); -} -.ASRouterButton.secondary:hover { - background-color: rgba(12, 12, 13, 0.2); -} -.ASRouterButton.secondary:active { - background-color: rgba(12, 12, 13, 0.3); -} -.ASRouterButton.secondary:focus { - box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + background-color: var(--newtab-button-primary-active-color); } .ASRouterButton.slim { - background-color: rgba(12, 12, 13, 0.1); + border: 1px solid var(--newtab-border-primary-color); margin-inline-start: 0; font-size: 12px; padding: 6px 12px; } -.ASRouterButton.slim:hover { - background-color: rgba(12, 12, 13, 0.2); -} - -[lwt-newtab-brighttext] .secondary { - background-color: rgba(249, 249, 250, 0.1); -} -[lwt-newtab-brighttext] .secondary:hover { - background-color: rgba(249, 249, 250, 0.2); -} -[lwt-newtab-brighttext] .secondary:active { - background-color: rgba(249, 249, 250, 0.3); -} -[lwt-newtab-brighttext] .footer .secondary { - background-color: rgba(249, 249, 250, 0.3); -} -[lwt-newtab-brighttext] .footer .secondary:hover { - background-color: rgba(249, 249, 250, 0.4); -} -[lwt-newtab-brighttext] .footer .secondary:active { - background-color: rgba(249, 249, 250, 0.5); +.ASRouterButton.slim:hover, .ASRouterButton.slim:focus { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } .SnippetBaseContainer { @@ -4515,7 +4440,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { font-size: 15px; } .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { - box-shadow: 0 0 0 5px #D7D7DB; + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; } @@ -4595,7 +4520,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { top: 50%; } .SimpleBelowSearchSnippet .blockButton:focus { - box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); border-radius: 2px; } .SimpleBelowSearchSnippet .title { @@ -4950,11 +4875,11 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { border-radius: 2px; } .EOYSnippetForm .donation-amount { - color: #0C0C0D; + color: var(--newtab-text-primary-color); margin-inline-end: 18px; - border: 1px solid #B1B1B3; + border: 1px solid var(--newtab-textbox-border); padding: 5px 14px; - background: #F9F9FA; + background: var(--newtab-textbox-background-color); cursor: pointer; } .EOYSnippetForm input[type=radio] { @@ -4962,9 +4887,9 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { margin-inline-end: -18px; } .EOYSnippetForm input[type=radio]:checked + .donation-amount { - background: #737373; - color: #FFF; - border: 1px solid #4A4A4F; + background: var(--newtab-text-secondary-color); + color: var(--newtab-background-color-secondary); + border: 1px solid var(--newtab-border-secondary-color); } .EOYSnippetForm input[type=radio]:checked:focus + .donation-amount, .EOYSnippetForm input[type=radio]:not(:checked):focus + .donation-amount { border: 1px dotted var(--newtab-link-primary-color); diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index c0f37de90388..653b13e49d34 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -60,10 +60,12 @@ body { --newtab-background-button-hover-color: rgba(196, 196, 196, 0.5); --newtab-background-button-active-color: rgba(151, 151, 151, 0.5); --newtab-button-primary-color: #0060DF; + --newtab-button-primary-hover-color: #003EAA; + --newtab-button-primary-active-color: #002275; + --newtab-button-primary-text-color: #FFF; --newtab-button-secondary-color: inherit; --newtab-feed-button-background: #EDEDF0; --newtab-feed-button-text: #0C0C0D; - --newtab-feed-button-background-faded: rgba(237, 237, 240, 0.6); --newtab-feed-button-text-faded: rgba(12, 12, 13, 0); --newtab-feed-button-spinner: #737373; --newtab-contextmenu-background-color: #F9F9FA; @@ -76,7 +78,6 @@ body { --newtab-search-dropdown-color: #FFF; --newtab-search-dropdown-header-color: #F9F9FA; --newtab-search-header-background-color: rgba(249, 249, 250, 0.95); - --newtab-search-icon-color: rgba(12, 12, 13, 0.4); --newtab-topsites-background-color: var(--newtab-background-color-secondary); --newtab-topsites-outer-card-hover: rgba(0, 0, 0, 0.05); --newtab-topsites-context-menu-hover: rgba(0, 0, 0, 0.05); @@ -146,7 +147,6 @@ body[lwt-newtab-brighttext] { --newtab-search-dropdown-color: #38383D; --newtab-search-dropdown-header-color: #4A4A4F; --newtab-search-header-background-color: rgba(42, 42, 46, 0.95); - --newtab-search-icon-color: rgba(249, 249, 250, 0.6); --newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1); --newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1); --newtab-card-active-outline-color: #4A4A4F; @@ -444,7 +444,7 @@ a { .actions button.done { background-color: var(--newtab-button-primary-color); border: solid 1px var(--newtab-button-primary-color); - color: #FFF; + color: var(--newtab-button-primary-text-color); margin-inline-start: auto; } @@ -807,10 +807,10 @@ main.has-snippet { .top-site-outer .search-topsite { background-image: url("chrome://global/skin/icons/search-glass.svg"); background-size: 16px; - background-color: #0060DF; + background-color: var(--newtab-button-primary-color); border-radius: 32px; -moz-context-properties: fill; - fill: #FFF; + fill: var(--newtab-button-primary-text-color); box-shadow: var(--newtab-card-shadow); transition-duration: 150ms; transition-property: background-size, bottom, inset-inline-end, height, width; @@ -1349,9 +1349,7 @@ main.has-snippet { border-radius: 8px; color: var(--newtab-search-text-color); -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); - font-weight: 500; - font-size: 15px; + fill: var(--newtab-icon-secondary-color); } .search-wrapper .search-handoff-button:dir(rtl), .search-wrapper input:dir(rtl) { @@ -1369,14 +1367,14 @@ main.has-snippet { border: 0; border-radius: 0 3px 3px 0; -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); + fill: var(--newtab-icon-secondary-color); height: 100%; inset-inline-end: 0; position: absolute; width: 48px; } .search-wrapper .search-button:focus, .search-wrapper .search-button:hover { - background-color: rgba(12, 12, 13, 0.1); + background-color: var(--newtab-element-hover-color); cursor: pointer; } .search-wrapper .search-button:focus { @@ -1386,7 +1384,7 @@ main.has-snippet { border-radius: 0 8px 8px 0; } .search-wrapper .search-button:active { - background-color: rgba(12, 12, 13, 0.2); + background-color: var(--newtab-element-hover-color); } .search-wrapper .search-button:dir(rtl) { transform: scaleX(-1); @@ -2457,7 +2455,7 @@ main.has-snippet { margin-inline-end: 4px; } .asrouter-admin .json-button:hover { - background-color: rgba(237, 237, 240, 0.6); + background-color: var(--newtab-element-hover-color); box-shadow: none; } .asrouter-admin table { @@ -2588,7 +2586,7 @@ main.has-snippet { } .pocket-logged-in-cta .pocket-cta-button { white-space: nowrap; - background: #0060DF; + background: var(--newtab-button-primary-color); letter-spacing: -0.34px; color: #FFF; border-radius: 4px; @@ -3590,10 +3588,10 @@ main.has-snippet { position: relative; } .ds-card .playhead { - background: #0060DF url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; + background: var(--newtab-button-primary-color) url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; border-radius: 20px; bottom: -16px; - color: rgba(255, 255, 255, 0); + color: color-mix(in srgb, var(--newtab-button-primary-text-color) 0%, transparent); display: flex; flex-direction: column; height: 40px; @@ -3605,7 +3603,7 @@ main.has-snippet { transition: padding 100ms ease-in-out 0ms, color 100ms linear 100ms; } .ds-card .playhead:hover { - color: #FFF; + color: var(--newtab-button-primary-text-color); padding: 0 20px 0 40px; } .ds-card .playhead span { @@ -3688,6 +3686,7 @@ main.has-snippet { color: #B1B1B3; } .ds-card .meta .cta-button { + background-color: var(--newtab-button-secondary-color); width: 100%; margin: 12px 0 4px; box-shadow: none; @@ -3696,33 +3695,10 @@ main.has-snippet { font-size: 14px; font-weight: 600; padding: 5px 8px 7px; - border: 0; - color: #0C0C0D; - background: rgba(12, 12, 13, 0.1); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button { - color: #F9F9FA; - background: rgba(12, 12, 13, 0.7); -} -.ds-card .meta .cta-button:focus { - background: rgba(12, 12, 13, 0.1); - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:focus { - background: rgba(12, 12, 13, 0.7); - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -.ds-card .meta .cta-button:hover { - background: rgba(12, 12, 13, 0.2); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:hover { - background: rgba(12, 12, 13, 0.5); + border: 1px solid var(--newtab-border-primary-color); } .ds-card .meta .cta-button:active { - background: rgba(12, 12, 13, 0.3); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:active { - background: rgba(12, 12, 13, 0.7); + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); } .ds-card .meta .cta-link { color: var(--newtab-link-primary-color); @@ -3909,34 +3885,16 @@ main.has-snippet { background-color: transparent; } .ds-dismiss .ds-dismiss-button .icon { - fill: #737373; -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button .icon { - fill: #EDEDF0; + fill: var(--newtab-icon-primary-color); } .ds-dismiss .ds-dismiss-button:hover { - background: rgba(12, 12, 13, 0.2); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover { - background: rgba(12, 12, 13, 0.5); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover .icon { - fill: #F9F9FA; -} -.ds-dismiss .ds-dismiss-button:hover .icon { - fill: #2A2A2E; + background: var(--newtab-element-hover-color); } .ds-dismiss .ds-dismiss-button:active { - background: rgba(12, 12, 13, 0.3); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:active { - background: rgba(12, 12, 13, 0.7); + background: var(--newtab-element-active-color); } .ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); } .ds-message { @@ -4150,12 +4108,9 @@ main.has-snippet { background-color: var(--newtab-link-primary-active-color); } .ds-chevron-link:focus { - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); border-radius: 2px; } -[lwt-newtab-brighttext] .ds-chevron-link:focus { - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); -} .ds-chevron-link::after { background-color: var(--newtab-link-primary-color); content: " "; @@ -4281,53 +4236,23 @@ main.has-snippet { .ASRouterButton.primary { border: 1px solid var(--newtab-button-primary-color); background-color: var(--newtab-button-primary-color); - color: #F9F9FA; + color: var(--newtab-button-primary-text-color); } .ASRouterButton.primary:hover { - background-color: #003EAA; + background-color: var(--newtab-button-primary-hover-color); } .ASRouterButton.primary:active { - background-color: #002275; -} -.ASRouterButton.secondary { - background-color: rgba(12, 12, 13, 0.1); -} -.ASRouterButton.secondary:hover { - background-color: rgba(12, 12, 13, 0.2); -} -.ASRouterButton.secondary:active { - background-color: rgba(12, 12, 13, 0.3); -} -.ASRouterButton.secondary:focus { - box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + background-color: var(--newtab-button-primary-active-color); } .ASRouterButton.slim { - background-color: rgba(12, 12, 13, 0.1); + border: 1px solid var(--newtab-border-primary-color); margin-inline-start: 0; font-size: 12px; padding: 6px 12px; } -.ASRouterButton.slim:hover { - background-color: rgba(12, 12, 13, 0.2); -} - -[lwt-newtab-brighttext] .secondary { - background-color: rgba(249, 249, 250, 0.1); -} -[lwt-newtab-brighttext] .secondary:hover { - background-color: rgba(249, 249, 250, 0.2); -} -[lwt-newtab-brighttext] .secondary:active { - background-color: rgba(249, 249, 250, 0.3); -} -[lwt-newtab-brighttext] .footer .secondary { - background-color: rgba(249, 249, 250, 0.3); -} -[lwt-newtab-brighttext] .footer .secondary:hover { - background-color: rgba(249, 249, 250, 0.4); -} -[lwt-newtab-brighttext] .footer .secondary:active { - background-color: rgba(249, 249, 250, 0.5); +.ASRouterButton.slim:hover, .ASRouterButton.slim:focus { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } .SnippetBaseContainer { @@ -4519,7 +4444,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { font-size: 15px; } .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { - box-shadow: 0 0 0 5px #D7D7DB; + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; } @@ -4599,7 +4524,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { top: 50%; } .SimpleBelowSearchSnippet .blockButton:focus { - box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); border-radius: 2px; } .SimpleBelowSearchSnippet .title { @@ -4954,11 +4879,11 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { border-radius: 2px; } .EOYSnippetForm .donation-amount { - color: #0C0C0D; + color: var(--newtab-text-primary-color); margin-inline-end: 18px; - border: 1px solid #B1B1B3; + border: 1px solid var(--newtab-textbox-border); padding: 5px 14px; - background: #F9F9FA; + background: var(--newtab-textbox-background-color); cursor: pointer; } .EOYSnippetForm input[type=radio] { @@ -4966,9 +4891,9 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { margin-inline-end: -18px; } .EOYSnippetForm input[type=radio]:checked + .donation-amount { - background: #737373; - color: #FFF; - border: 1px solid #4A4A4F; + background: var(--newtab-text-secondary-color); + color: var(--newtab-background-color-secondary); + border: 1px solid var(--newtab-border-secondary-color); } .EOYSnippetForm input[type=radio]:checked:focus + .donation-amount, .EOYSnippetForm input[type=radio]:not(:checked):focus + .donation-amount { border: 1px dotted var(--newtab-link-primary-color); diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index a3bd704ba87f..af14b93e2270 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -56,10 +56,12 @@ body { --newtab-background-button-hover-color: rgba(196, 196, 196, 0.5); --newtab-background-button-active-color: rgba(151, 151, 151, 0.5); --newtab-button-primary-color: #0060DF; + --newtab-button-primary-hover-color: #003EAA; + --newtab-button-primary-active-color: #002275; + --newtab-button-primary-text-color: #FFF; --newtab-button-secondary-color: inherit; --newtab-feed-button-background: #EDEDF0; --newtab-feed-button-text: #0C0C0D; - --newtab-feed-button-background-faded: rgba(237, 237, 240, 0.6); --newtab-feed-button-text-faded: rgba(12, 12, 13, 0); --newtab-feed-button-spinner: #737373; --newtab-contextmenu-background-color: #F9F9FA; @@ -72,7 +74,6 @@ body { --newtab-search-dropdown-color: #FFF; --newtab-search-dropdown-header-color: #F9F9FA; --newtab-search-header-background-color: rgba(249, 249, 250, 0.95); - --newtab-search-icon-color: rgba(12, 12, 13, 0.4); --newtab-topsites-background-color: var(--newtab-background-color-secondary); --newtab-topsites-outer-card-hover: rgba(0, 0, 0, 0.05); --newtab-topsites-context-menu-hover: rgba(0, 0, 0, 0.05); @@ -142,7 +143,6 @@ body[lwt-newtab-brighttext] { --newtab-search-dropdown-color: #38383D; --newtab-search-dropdown-header-color: #4A4A4F; --newtab-search-header-background-color: rgba(42, 42, 46, 0.95); - --newtab-search-icon-color: rgba(249, 249, 250, 0.6); --newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1); --newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1); --newtab-card-active-outline-color: #4A4A4F; @@ -440,7 +440,7 @@ a { .actions button.done { background-color: var(--newtab-button-primary-color); border: solid 1px var(--newtab-button-primary-color); - color: #FFF; + color: var(--newtab-button-primary-text-color); margin-inline-start: auto; } @@ -803,10 +803,10 @@ main.has-snippet { .top-site-outer .search-topsite { background-image: url("chrome://global/skin/icons/search-glass.svg"); background-size: 16px; - background-color: #0060DF; + background-color: var(--newtab-button-primary-color); border-radius: 32px; -moz-context-properties: fill; - fill: #FFF; + fill: var(--newtab-button-primary-text-color); box-shadow: var(--newtab-card-shadow); transition-duration: 150ms; transition-property: background-size, bottom, inset-inline-end, height, width; @@ -1345,9 +1345,7 @@ main.has-snippet { border-radius: 8px; color: var(--newtab-search-text-color); -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); - font-weight: 500; - font-size: 15px; + fill: var(--newtab-icon-secondary-color); } .search-wrapper .search-handoff-button:dir(rtl), .search-wrapper input:dir(rtl) { @@ -1365,14 +1363,14 @@ main.has-snippet { border: 0; border-radius: 0 3px 3px 0; -moz-context-properties: fill; - fill: var(--newtab-search-icon-color); + fill: var(--newtab-icon-secondary-color); height: 100%; inset-inline-end: 0; position: absolute; width: 48px; } .search-wrapper .search-button:focus, .search-wrapper .search-button:hover { - background-color: rgba(12, 12, 13, 0.1); + background-color: var(--newtab-element-hover-color); cursor: pointer; } .search-wrapper .search-button:focus { @@ -1382,7 +1380,7 @@ main.has-snippet { border-radius: 0 8px 8px 0; } .search-wrapper .search-button:active { - background-color: rgba(12, 12, 13, 0.2); + background-color: var(--newtab-element-hover-color); } .search-wrapper .search-button:dir(rtl) { transform: scaleX(-1); @@ -2453,7 +2451,7 @@ main.has-snippet { margin-inline-end: 4px; } .asrouter-admin .json-button:hover { - background-color: rgba(237, 237, 240, 0.6); + background-color: var(--newtab-element-hover-color); box-shadow: none; } .asrouter-admin table { @@ -2584,7 +2582,7 @@ main.has-snippet { } .pocket-logged-in-cta .pocket-cta-button { white-space: nowrap; - background: #0060DF; + background: var(--newtab-button-primary-color); letter-spacing: -0.34px; color: #FFF; border-radius: 4px; @@ -3586,10 +3584,10 @@ main.has-snippet { position: relative; } .ds-card .playhead { - background: #0060DF url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; + background: var(--newtab-button-primary-color) url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; border-radius: 20px; bottom: -16px; - color: rgba(255, 255, 255, 0); + color: color-mix(in srgb, var(--newtab-button-primary-text-color) 0%, transparent); display: flex; flex-direction: column; height: 40px; @@ -3601,7 +3599,7 @@ main.has-snippet { transition: padding 100ms ease-in-out 0ms, color 100ms linear 100ms; } .ds-card .playhead:hover { - color: #FFF; + color: var(--newtab-button-primary-text-color); padding: 0 20px 0 40px; } .ds-card .playhead span { @@ -3684,6 +3682,7 @@ main.has-snippet { color: #B1B1B3; } .ds-card .meta .cta-button { + background-color: var(--newtab-button-secondary-color); width: 100%; margin: 12px 0 4px; box-shadow: none; @@ -3692,33 +3691,10 @@ main.has-snippet { font-size: 14px; font-weight: 600; padding: 5px 8px 7px; - border: 0; - color: #0C0C0D; - background: rgba(12, 12, 13, 0.1); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button { - color: #F9F9FA; - background: rgba(12, 12, 13, 0.7); -} -.ds-card .meta .cta-button:focus { - background: rgba(12, 12, 13, 0.1); - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:focus { - background: rgba(12, 12, 13, 0.7); - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -.ds-card .meta .cta-button:hover { - background: rgba(12, 12, 13, 0.2); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:hover { - background: rgba(12, 12, 13, 0.5); + border: 1px solid var(--newtab-border-primary-color); } .ds-card .meta .cta-button:active { - background: rgba(12, 12, 13, 0.3); -} -[lwt-newtab-brighttext] .ds-card .meta .cta-button:active { - background: rgba(12, 12, 13, 0.7); + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); } .ds-card .meta .cta-link { color: var(--newtab-link-primary-color); @@ -3905,34 +3881,16 @@ main.has-snippet { background-color: transparent; } .ds-dismiss .ds-dismiss-button .icon { - fill: #737373; -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button .icon { - fill: #EDEDF0; + fill: var(--newtab-icon-primary-color); } .ds-dismiss .ds-dismiss-button:hover { - background: rgba(12, 12, 13, 0.2); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover { - background: rgba(12, 12, 13, 0.5); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:hover .icon { - fill: #F9F9FA; -} -.ds-dismiss .ds-dismiss-button:hover .icon { - fill: #2A2A2E; + background: var(--newtab-element-hover-color); } .ds-dismiss .ds-dismiss-button:active { - background: rgba(12, 12, 13, 0.3); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:active { - background: rgba(12, 12, 13, 0.7); + background: var(--newtab-element-active-color); } .ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); -} -[lwt-newtab-brighttext] .ds-dismiss .ds-dismiss-button:focus { - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); } .ds-message { @@ -4146,12 +4104,9 @@ main.has-snippet { background-color: var(--newtab-link-primary-active-color); } .ds-chevron-link:focus { - box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); border-radius: 2px; } -[lwt-newtab-brighttext] .ds-chevron-link:focus { - box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5); -} .ds-chevron-link::after { background-color: var(--newtab-link-primary-color); content: " "; @@ -4277,53 +4232,23 @@ main.has-snippet { .ASRouterButton.primary { border: 1px solid var(--newtab-button-primary-color); background-color: var(--newtab-button-primary-color); - color: #F9F9FA; + color: var(--newtab-button-primary-text-color); } .ASRouterButton.primary:hover { - background-color: #003EAA; + background-color: var(--newtab-button-primary-hover-color); } .ASRouterButton.primary:active { - background-color: #002275; -} -.ASRouterButton.secondary { - background-color: rgba(12, 12, 13, 0.1); -} -.ASRouterButton.secondary:hover { - background-color: rgba(12, 12, 13, 0.2); -} -.ASRouterButton.secondary:active { - background-color: rgba(12, 12, 13, 0.3); -} -.ASRouterButton.secondary:focus { - box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + background-color: var(--newtab-button-primary-active-color); } .ASRouterButton.slim { - background-color: rgba(12, 12, 13, 0.1); + border: 1px solid var(--newtab-border-primary-color); margin-inline-start: 0; font-size: 12px; padding: 6px 12px; } -.ASRouterButton.slim:hover { - background-color: rgba(12, 12, 13, 0.2); -} - -[lwt-newtab-brighttext] .secondary { - background-color: rgba(249, 249, 250, 0.1); -} -[lwt-newtab-brighttext] .secondary:hover { - background-color: rgba(249, 249, 250, 0.2); -} -[lwt-newtab-brighttext] .secondary:active { - background-color: rgba(249, 249, 250, 0.3); -} -[lwt-newtab-brighttext] .footer .secondary { - background-color: rgba(249, 249, 250, 0.3); -} -[lwt-newtab-brighttext] .footer .secondary:hover { - background-color: rgba(249, 249, 250, 0.4); -} -[lwt-newtab-brighttext] .footer .secondary:active { - background-color: rgba(249, 249, 250, 0.5); +.ASRouterButton.slim:hover, .ASRouterButton.slim:focus { + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); + transition: box-shadow 150ms; } .SnippetBaseContainer { @@ -4515,7 +4440,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { font-size: 15px; } .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { - box-shadow: 0 0 0 5px #D7D7DB; + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; } @@ -4595,7 +4520,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { top: 50%; } .SimpleBelowSearchSnippet .blockButton:focus { - box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); border-radius: 2px; } .SimpleBelowSearchSnippet .title { @@ -4950,11 +4875,11 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { border-radius: 2px; } .EOYSnippetForm .donation-amount { - color: #0C0C0D; + color: var(--newtab-text-primary-color); margin-inline-end: 18px; - border: 1px solid #B1B1B3; + border: 1px solid var(--newtab-textbox-border); padding: 5px 14px; - background: #F9F9FA; + background: var(--newtab-textbox-background-color); cursor: pointer; } .EOYSnippetForm input[type=radio] { @@ -4962,9 +4887,9 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { margin-inline-end: -18px; } .EOYSnippetForm input[type=radio]:checked + .donation-amount { - background: #737373; - color: #FFF; - border: 1px solid #4A4A4F; + background: var(--newtab-text-secondary-color); + color: var(--newtab-background-color-secondary); + border: 1px solid var(--newtab-border-secondary-color); } .EOYSnippetForm input[type=radio]:checked:focus + .donation-amount, .EOYSnippetForm input[type=radio]:not(:checked):focus + .donation-amount { border: 1px dotted var(--newtab-link-primary-color);