Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

3 files changed, 1359 insertions, 69 deletions

diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css
index 131ffac535..248de6cf21 100644
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -42,6 +42,16 @@ input {
   --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
   --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
   --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
+  --newtab-button-background: var(--button-background-color);
+  --newtab-button-focus-background: var(--newtab-button-background);
+  --newtab-button-focus-border: var(--focus-outline-color);
+  --newtab-button-hover-background: var(--button-background-color-hover);
+  --newtab-button-active-background: var(--button-background-color-active);
+  --newtab-button-text: var(--button-text-color);
+  --newtab-button-static-background: #F0F0F4;
+  --newtab-button-static-focus-background: var(--newtab-button-static-background);
+  --newtab-button-static-hover-background: #E0E0E6;
+  --newtab-button-static-active-background: #CFCFD8;
   --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
   --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
   --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -79,6 +89,9 @@ input {
   --newtab-primary-element-text-color: #2b2a33;
   --newtab-wordmark-color: #fbfbfe;
   --newtab-status-success: #7C6;
+  --newtab-button-static-background: #2B2A33;
+  --newtab-button-static-hover-background: #52525E;
+  --newtab-button-static-active-background: #5B5B66;
 }
 
 @media (prefers-contrast) {
@@ -92,7 +105,7 @@ input {
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
-  color: var(--newtab-text-primary-color);
+  color: var(--icon-color);
   fill: currentColor;
   height: 16px;
   vertical-align: middle;
@@ -142,6 +155,9 @@ input {
 .icon.icon-info {
   background-image: url("chrome://global/skin/icons/info.svg");
 }
+.icon.icon-info-critical {
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-info-critical-16.svg");
+}
 .icon.icon-help {
   background-image: url("chrome://global/skin/icons/help.svg");
 }
@@ -222,6 +238,9 @@ input {
 .icon.icon-webextension {
   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg");
 }
+.icon.icon-weather {
+  background-image: url("chrome://browser/skin/weather/sunny.svg");
+}
 .icon.icon-highlights {
   background-image: url("chrome://global/skin/icons/highlights.svg");
 }
@@ -659,12 +678,17 @@ main section {
 .top-site-outer:is(:hover) .context-menu-button {
   opacity: 1;
 }
+.top-site-outer.active .context-menu-button {
+  opacity: 1;
+  background-color: var(--newtab-button-active-background);
+}
 .top-site-outer .context-menu-button {
   background-image: url("chrome://global/skin/icons/more.svg");
+  background-color: var(--newtab-button-background);
   border: 0;
   border-radius: 4px;
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  fill: var(--newtab-button-text);
   -moz-context-properties: fill;
   height: 20px;
   width: 20px;
@@ -674,11 +698,16 @@ main section {
   top: -20px;
   transition: opacity 200ms;
 }
-.top-site-outer .context-menu-button:is(:active, :focus) {
-  outline: 0;
+.top-site-outer .context-menu-button:hover {
+  background-color: var(--newtab-button-hover-background);
+}
+.top-site-outer .context-menu-button:hover:active {
+  background-color: var(--newtab-button-active-background);
+}
+.top-site-outer .context-menu-button:focus-visible {
+  background-color: var(--newtab-button-focus-background);
+  border-color: var(--newtab-button-focus-border);
   opacity: 1;
-  background-color: var(--newtab-element-hover-color);
-  fill: var(--newtab-primary-action-background);
 }
 .top-site-outer .tile {
   border-radius: 8px;
@@ -1675,7 +1704,8 @@ main section {
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
-  padding: 16px;
+  padding-block: 0 var(--space-large);
+  padding-inline: var(--space-large);
   overflow: auto;
   transform: translateX(435px);
   visibility: hidden;
@@ -1702,9 +1732,16 @@ main section {
 .customize-menu.customize-animate-exit-active {
   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
 }
+.customize-menu .close-button-wrapper {
+  position: sticky;
+  top: 0;
+  padding-block-start: var(--space-large);
+  background-color: var(--newtab-background-color-secondary);
+  z-index: 1;
+}
 .customize-menu .close-button {
   margin-inline-start: auto;
-  margin-bottom: 28px;
+  margin-inline-end: var(--space-large);
   white-space: nowrap;
   display: block;
   background-color: var(--newtab-element-secondary-color);
@@ -1731,7 +1768,7 @@ main section {
   grid-template-columns: 1fr;
   grid-template-rows: repeat(4, auto);
   grid-row-gap: 32px;
-  padding: 0 16px;
+  padding: var(--space-large);
 }
 .home-section .wallpapers-section h2 {
   font-size: inherit;
@@ -1978,6 +2015,333 @@ main section {
   text-decoration: none;
 }
 
+:root {
+  --newtab-weather-content-font-size: 11px;
+  --newtab-weather-sponsor-font-size: 8px;
+}
+
+.weather {
+  font-size: var(--font-size-root);
+  position: absolute;
+  left: var(--space-xlarge);
+  top: var(--space-xlarge);
+  z-index: 1;
+}
+
+.weatherNotAvailable {
+  font-size: var(--newtab-weather-content-font-size);
+  color: var(--text-color-error);
+  display: flex;
+  align-items: center;
+}
+.weatherNotAvailable .icon {
+  fill: var(--icon-color-critical);
+  -moz-context-properties: fill;
+}
+
+.weatherCard {
+  margin-block-end: var(--space-xsmall);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;
+}
+.weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText {
+  visibility: visible;
+}
+.weatherCard:focus-within {
+  overflow: visible;
+}
+.weatherCard:hover {
+  box-shadow: var(--box-shadow-10);
+  background: var(--background-color-box);
+}
+.weatherCard a {
+  color: var(--text-color);
+}
+
+.weatherSponsorText {
+  visibility: hidden;
+  font-size: var(--newtab-weather-sponsor-font-size);
+  color: var(--text-color-deemphasized);
+}
+
+.weatherInfoLink, .weatherButtonContextMenuWrapper {
+  appearance: none;
+  background-color: var(--background-color-ghost);
+  border: 0;
+  padding: var(--space-small);
+  cursor: pointer;
+}
+.weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover {
+  background-color: var(--button-background-color-ghost-hover);
+}
+.weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after {
+  background-color: transparent;
+}
+.weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active {
+  background-color: var(--button-background-color-ghost-active);
+}
+.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
+  outline: var(--focus-outline);
+}
+@media (prefers-color-scheme: dark) {
+  .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
+    background-color: rgba(35, 34, 43, 0.7);
+  }
+  .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
+    background-color: var(--newtab-button-static-hover-background);
+  }
+  .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
+    background-color: var(--newtab-button-static-active-background);
+  }
+}
+@media (prefers-contrast) and (prefers-color-scheme: dark) {
+  .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
+    background-color: var(--background-color-box);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+  .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
+    background-color: var(--newtab-button-static-hover-background);
+  }
+  .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
+    background-color: var(--newtab-button-static-active-background);
+  }
+}
+@media (prefers-contrast) and (prefers-color-scheme: light) {
+  .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+    background-color: var(--background-color-box);
+  }
+}
+
+.weatherInfoLink {
+  display: flex;
+  gap: var(--space-medium);
+  padding: var(--space-small) var(--space-medium);
+  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+  text-decoration: none;
+  color: var(--text-color);
+  min-width: 130px;
+  max-width: 190px;
+  text-overflow: ellipsis;
+}
+@media (min-width: 610px) {
+  .weatherInfoLink {
+    min-width: unset;
+  }
+}
+.weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after {
+  background-color: transparent;
+}
+.weatherInfoLink:focus-visible {
+  border-radius: var(--border-radius-medium);
+}
+.weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after {
+  background-color: transparent;
+}
+
+.weatherButtonContextMenuWrapper {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+  display: flex;
+  align-items: stretch;
+  width: 50px;
+  padding: 0;
+}
+.weatherButtonContextMenuWrapper::after {
+  content: "";
+  left: 0;
+  top: 10px;
+  height: calc(100% - 20px);
+  width: 1px;
+  background-color: var(--newtab-button-static-background);
+  display: block;
+  position: absolute;
+  z-index: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .weatherButtonContextMenuWrapper::after {
+    background-color: var(--color-gray-70);
+  }
+}
+.weatherButtonContextMenuWrapper:hover::after {
+  background-color: transparent;
+}
+.weatherButtonContextMenuWrapper:focus-visible {
+  border-radius: var(--border-radius-medium);
+}
+.weatherButtonContextMenuWrapper:focus-visible::after {
+  background-color: transparent;
+}
+
+.weatherButtonContextMenu {
+  background-image: url("chrome://global/skin/icons/more.svg");
+  background-repeat: no-repeat;
+  background-size: var(--size-item-small) auto;
+  background-position: center;
+  background-color: transparent;
+  cursor: pointer;
+  fill: var(--icon-color);
+  -moz-context-properties: fill;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  appearance: none;
+  min-width: var(--size-item-large);
+}
+
+.weatherText {
+  height: min-content;
+}
+
+.weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-small);
+}
+
+.weatherForecastRow {
+  text-transform: uppercase;
+  font-weight: var(--font-weight-bold);
+}
+
+.weatherCityRow {
+  color: var(--text-color-deemphasized);
+}
+
+.weatherCity {
+  text-overflow: ellipsis;
+  font-size: var(--font-size-small);
+}
+
+.weatherCityRow + .weatherDetailedSummaryRow {
+  margin-block-start: var(--space-xsmall);
+}
+
+.weatherDetailedSummaryRow {
+  font-size: var(--newtab-weather-content-font-size);
+  gap: var(--space-large);
+}
+
+.weatherHighLowTemps {
+  display: flex;
+  gap: var(--space-xxsmall);
+  text-transform: uppercase;
+  word-spacing: var(--space-xxsmall);
+}
+
+.weatherTextSummary {
+  text-align: center;
+  max-width: 90px;
+}
+
+.weatherTemperature {
+  font-size: var(--font-size-large);
+}
+
+.weatherIconCol {
+  width: var(--size-item-large);
+  height: var(--size-item-large);
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.weatherIcon {
+  width: var(--size-item-large);
+  height: auto;
+  vertical-align: middle;
+}
+@media (prefers-contrast) {
+  .weatherIcon {
+    -moz-context-properties: fill, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+.weatherIcon.iconId1 {
+  content: url("chrome://browser/skin/weather/sunny.svg");
+}
+.weatherIcon.iconId2 {
+  content: url("chrome://browser/skin/weather/mostly-sunny.svg");
+}
+.weatherIcon:is(.iconId3, .iconId4, .iconId6) {
+  content: url("chrome://browser/skin/weather/partly-sunny.svg");
+}
+.weatherIcon.iconId5 {
+  content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
+}
+.weatherIcon:is(.iconId7, .iconId8) {
+  content: url("chrome://browser/skin/weather/cloudy.svg");
+}
+.weatherIcon.iconId11 {
+  content: url("chrome://browser/skin/weather/fog.svg");
+}
+.weatherIcon.iconId12 {
+  content: url("chrome://browser/skin/weather/showers.svg");
+}
+.weatherIcon:is(.iconId13, .iconId14) {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
+}
+.weatherIcon.iconId15 {
+  content: url("chrome://browser/skin/weather/thunderstorms.svg");
+}
+.weatherIcon:is(.iconId16, .iconId17) {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
+}
+.weatherIcon.iconId18 {
+  content: url("chrome://browser/skin/weather/rain.svg");
+}
+.weatherIcon:is(.iconId19, .iconId20, .iconId25) {
+  content: url("chrome://browser/skin/weather/flurries.svg");
+}
+.weatherIcon.iconId21 {
+  content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
+}
+.weatherIcon:is(.iconId22, .iconId23) {
+  content: url("chrome://browser/skin/weather/snow.svg");
+}
+.weatherIcon:is(.iconId24, .iconId31) {
+  content: url("chrome://browser/skin/weather/ice.svg");
+}
+.weatherIcon:is(.iconId26, .iconId29) {
+  content: url("chrome://browser/skin/weather/freezing-rain.svg");
+}
+.weatherIcon.iconId30 {
+  content: url("chrome://browser/skin/weather/hot.svg");
+}
+.weatherIcon.iconId32 {
+  content: url("chrome://browser/skin/weather/windy.svg");
+}
+.weatherIcon.iconId33 {
+  content: url("chrome://browser/skin/weather/night-clear.svg");
+}
+.weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) {
+  content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
+}
+.weatherIcon.iconId37 {
+  content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
+}
+.weatherIcon:is(.iconId39, .iconId40) {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
+  height: var(--size-item-large);
+}
+.weatherIcon:is(.iconId41, .iconId42) {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
+}
+.weatherIcon:is(.iconId43, .iconId44) {
+  content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
+}
+
 /* stylelint-disable max-nesting-depth */
 .card-outer {
   background: var(--newtab-background-color-secondary);
@@ -1990,14 +2354,17 @@ main section {
 }
 .card-outer .context-menu-button {
   background-clip: padding-box;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: var(--newtab-button-background);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-position: 55%;
-  border: 1px solid var(--newtab-border-color);
+  border: 0;
+  outline: 1px solid var(--newtab-border-color);
+  outline-width: 0;
   border-radius: 100%;
   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  color: var(--button-text-color);
+  fill: var(--newtab-button-text);
   height: 27px;
   inset-inline-end: -13.5px;
   opacity: 0;
@@ -2008,10 +2375,21 @@ main section {
   transition-property: transform, opacity;
   width: 27px;
 }
-.card-outer .context-menu-button:is(:active, :focus) {
+.card-outer .context-menu-button:is(:active, :focus-visible, :hover) {
   opacity: 1;
   transform: scale(1);
 }
+.card-outer .context-menu-button:is(:hover) {
+  background-color: var(--newtab-button-hover-background);
+}
+.card-outer .context-menu-button:is(:focus-visible) {
+  outline-color: var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-focus-background);
+  outline-width: 4px;
+}
+.card-outer .context-menu-button:is(:active) {
+  background-color: var(--newtab-button-active-background);
+}
 .card-outer:is(:focus):not(.placeholder) {
   border: 0;
   outline: 0;
@@ -2618,6 +2996,15 @@ main section {
   width: auto;
   flex-grow: 1;
 }
+.discoverystream-admin .weather-section {
+  margin-block-end: 24px;
+}
+.discoverystream-admin .weather-section form {
+  display: flex;
+}
+.discoverystream-admin .weather-section form label {
+  margin-inline-end: 12px;
+}
 
 .pocket-logged-in-cta {
   font-size: 13px;
@@ -3305,6 +3692,18 @@ main section {
 .ds-highlights .section .section-list .card-outer a {
   text-decoration: none;
 }
+.ds-highlights .section .section-list .card-outer .context-menu-button {
+  background-color: var(--newtab-button-static-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:hover {
+  background-color: var(--newtab-button-static-hover-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:hover:active {
+  background-color: var(--newtab-button-static-active-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible {
+  background-color: var(--newtab-button-static-focus-background);
+}
 .ds-highlights .hide-for-narrow {
   display: block;
 }
@@ -3566,14 +3965,17 @@ main section {
 .ds-card .context-menu-button,
 .ds-signup .context-menu-button {
   background-clip: padding-box;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: var(--newtab-button-background);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-position: 55%;
-  border: 1px solid var(--newtab-border-color);
+  border: 0;
+  outline: 1px solid var(--newtab-border-color);
+  outline-width: 0;
   border-radius: 100%;
   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  color: var(--button-text-color);
+  fill: var(--newtab-button-text);
   height: 27px;
   inset-inline-end: -13.5px;
   opacity: 0;
@@ -3584,11 +3986,25 @@ main section {
   transition-property: transform, opacity;
   width: 27px;
 }
-.ds-card .context-menu-button:is(:active, :focus),
-.ds-signup .context-menu-button:is(:active, :focus) {
+.ds-card .context-menu-button:is(:active, :focus-visible, :hover),
+.ds-signup .context-menu-button:is(:active, :focus-visible, :hover) {
   opacity: 1;
   transform: scale(1);
 }
+.ds-card .context-menu-button:is(:hover),
+.ds-signup .context-menu-button:is(:hover) {
+  background-color: var(--newtab-button-hover-background);
+}
+.ds-card .context-menu-button:is(:focus-visible),
+.ds-signup .context-menu-button:is(:focus-visible) {
+  outline-color: var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-focus-background);
+  outline-width: 4px;
+}
+.ds-card .context-menu-button:is(:active),
+.ds-signup .context-menu-button:is(:active) {
+  background-color: var(--newtab-button-active-background);
+}
 .ds-card .context-menu,
 .ds-signup .context-menu {
   opacity: 0;
@@ -3663,11 +4079,6 @@ main section {
   background-size: 15px;
   fill: #FFF;
 }
-.ds-card .card-stp-button-hover-background .context-menu-button {
-  position: static;
-  transition: none;
-  border-radius: 3px;
-}
 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   position: relative;
 }
@@ -3690,6 +4101,9 @@ main section {
   white-space: nowrap;
   color: #FFF;
 }
+.ds-card .card-stp-button-hover-background .card-stp-button:focus-visible {
+  outline: 2px solid var(--newtab-button-focus-border);
+}
 .ds-card .card-stp-button-hover-background button,
 .ds-card .card-stp-button-hover-background .context-menu {
   pointer-events: auto;
@@ -3697,6 +4111,22 @@ main section {
 .ds-card .card-stp-button-hover-background button {
   cursor: pointer;
 }
+.ds-card .context-menu-button {
+  position: static;
+  transition: none;
+  border-radius: 3px;
+  background-color: var(--newtab-button-static-background);
+}
+.ds-card .context-menu-button:hover {
+  background-color: var(--newtab-button-static-hover-background);
+}
+.ds-card .context-menu-button:hover:active {
+  background-color: var(--newtab-button-static-active-background);
+}
+.ds-card .context-menu-button:focus-visible {
+  outline: 2px solid var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-static-focus-background);
+}
 .ds-card.last-item .card-stp-button-hover-background .context-menu {
   margin-inline-start: auto;
   margin-inline-end: 18.5px;
diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css
index 416209d511..7b5ef57cb5 100644
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -46,6 +46,16 @@ input {
   --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
   --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
   --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
+  --newtab-button-background: var(--button-background-color);
+  --newtab-button-focus-background: var(--newtab-button-background);
+  --newtab-button-focus-border: var(--focus-outline-color);
+  --newtab-button-hover-background: var(--button-background-color-hover);
+  --newtab-button-active-background: var(--button-background-color-active);
+  --newtab-button-text: var(--button-text-color);
+  --newtab-button-static-background: #F0F0F4;
+  --newtab-button-static-focus-background: var(--newtab-button-static-background);
+  --newtab-button-static-hover-background: #E0E0E6;
+  --newtab-button-static-active-background: #CFCFD8;
   --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
   --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
   --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -83,6 +93,9 @@ input {
   --newtab-primary-element-text-color: #2b2a33;
   --newtab-wordmark-color: #fbfbfe;
   --newtab-status-success: #7C6;
+  --newtab-button-static-background: #2B2A33;
+  --newtab-button-static-hover-background: #52525E;
+  --newtab-button-static-active-background: #5B5B66;
 }
 
 @media (prefers-contrast) {
@@ -96,7 +109,7 @@ input {
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
-  color: var(--newtab-text-primary-color);
+  color: var(--icon-color);
   fill: currentColor;
   height: 16px;
   vertical-align: middle;
@@ -146,6 +159,9 @@ input {
 .icon.icon-info {
   background-image: url("chrome://global/skin/icons/info.svg");
 }
+.icon.icon-info-critical {
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-info-critical-16.svg");
+}
 .icon.icon-help {
   background-image: url("chrome://global/skin/icons/help.svg");
 }
@@ -226,6 +242,9 @@ input {
 .icon.icon-webextension {
   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg");
 }
+.icon.icon-weather {
+  background-image: url("chrome://browser/skin/weather/sunny.svg");
+}
 .icon.icon-highlights {
   background-image: url("chrome://global/skin/icons/highlights.svg");
 }
@@ -663,12 +682,17 @@ main section {
 .top-site-outer:is(:hover) .context-menu-button {
   opacity: 1;
 }
+.top-site-outer.active .context-menu-button {
+  opacity: 1;
+  background-color: var(--newtab-button-active-background);
+}
 .top-site-outer .context-menu-button {
   background-image: url("chrome://global/skin/icons/more.svg");
+  background-color: var(--newtab-button-background);
   border: 0;
   border-radius: 4px;
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  fill: var(--newtab-button-text);
   -moz-context-properties: fill;
   height: 20px;
   width: 20px;
@@ -678,11 +702,16 @@ main section {
   top: -20px;
   transition: opacity 200ms;
 }
-.top-site-outer .context-menu-button:is(:active, :focus) {
-  outline: 0;
+.top-site-outer .context-menu-button:hover {
+  background-color: var(--newtab-button-hover-background);
+}
+.top-site-outer .context-menu-button:hover:active {
+  background-color: var(--newtab-button-active-background);
+}
+.top-site-outer .context-menu-button:focus-visible {
+  background-color: var(--newtab-button-focus-background);
+  border-color: var(--newtab-button-focus-border);
   opacity: 1;
-  background-color: var(--newtab-element-hover-color);
-  fill: var(--newtab-primary-action-background);
 }
 .top-site-outer .tile {
   border-radius: 8px;
@@ -1679,7 +1708,8 @@ main section {
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
-  padding: 16px;
+  padding-block: 0 var(--space-large);
+  padding-inline: var(--space-large);
   overflow: auto;
   transform: translateX(435px);
   visibility: hidden;
@@ -1706,9 +1736,16 @@ main section {
 .customize-menu.customize-animate-exit-active {
   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
 }
+.customize-menu .close-button-wrapper {
+  position: sticky;
+  top: 0;
+  padding-block-start: var(--space-large);
+  background-color: var(--newtab-background-color-secondary);
+  z-index: 1;
+}
 .customize-menu .close-button {
   margin-inline-start: auto;
-  margin-bottom: 28px;
+  margin-inline-end: var(--space-large);
   white-space: nowrap;
   display: block;
   background-color: var(--newtab-element-secondary-color);
@@ -1735,7 +1772,7 @@ main section {
   grid-template-columns: 1fr;
   grid-template-rows: repeat(4, auto);
   grid-row-gap: 32px;
-  padding: 0 16px;
+  padding: var(--space-large);
 }
 .home-section .wallpapers-section h2 {
   font-size: inherit;
@@ -1982,6 +2019,333 @@ main section {
   text-decoration: none;
 }
 
+:root {
+  --newtab-weather-content-font-size: 11px;
+  --newtab-weather-sponsor-font-size: 8px;
+}
+
+.weather {
+  font-size: var(--font-size-root);
+  position: absolute;
+  left: var(--space-xlarge);
+  top: var(--space-xlarge);
+  z-index: 1;
+}
+
+.weatherNotAvailable {
+  font-size: var(--newtab-weather-content-font-size);
+  color: var(--text-color-error);
+  display: flex;
+  align-items: center;
+}
+.weatherNotAvailable .icon {
+  fill: var(--icon-color-critical);
+  -moz-context-properties: fill;
+}
+
+.weatherCard {
+  margin-block-end: var(--space-xsmall);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;
+}
+.weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText {
+  visibility: visible;
+}
+.weatherCard:focus-within {
+  overflow: visible;
+}
+.weatherCard:hover {
+  box-shadow: var(--box-shadow-10);
+  background: var(--background-color-box);
+}
+.weatherCard a {
+  color: var(--text-color);
+}
+
+.weatherSponsorText {
+  visibility: hidden;
+  font-size: var(--newtab-weather-sponsor-font-size);
+  color: var(--text-color-deemphasized);
+}
+
+.weatherInfoLink, .weatherButtonContextMenuWrapper {
+  appearance: none;
+  background-color: var(--background-color-ghost);
+  border: 0;
+  padding: var(--space-small);
+  cursor: pointer;
+}
+.weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover {
+  background-color: var(--button-background-color-ghost-hover);
+}
+.weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after {
+  background-color: transparent;
+}
+.weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active {
+  background-color: var(--button-background-color-ghost-active);
+}
+.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
+  outline: var(--focus-outline);
+}
+@media (prefers-color-scheme: dark) {
+  .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
+    background-color: rgba(35, 34, 43, 0.7);
+  }
+  .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
+    background-color: var(--newtab-button-static-hover-background);
+  }
+  .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
+    background-color: var(--newtab-button-static-active-background);
+  }
+}
+@media (prefers-contrast) and (prefers-color-scheme: dark) {
+  .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
+    background-color: var(--background-color-box);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+  .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
+    background-color: var(--newtab-button-static-hover-background);
+  }
+  .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
+    background-color: var(--newtab-button-static-active-background);
+  }
+}
+@media (prefers-contrast) and (prefers-color-scheme: light) {
+  .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+    background-color: var(--background-color-box);
+  }
+}
+
+.weatherInfoLink {
+  display: flex;
+  gap: var(--space-medium);
+  padding: var(--space-small) var(--space-medium);
+  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+  text-decoration: none;
+  color: var(--text-color);
+  min-width: 130px;
+  max-width: 190px;
+  text-overflow: ellipsis;
+}
+@media (min-width: 610px) {
+  .weatherInfoLink {
+    min-width: unset;
+  }
+}
+.weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after {
+  background-color: transparent;
+}
+.weatherInfoLink:focus-visible {
+  border-radius: var(--border-radius-medium);
+}
+.weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after {
+  background-color: transparent;
+}
+
+.weatherButtonContextMenuWrapper {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+  display: flex;
+  align-items: stretch;
+  width: 50px;
+  padding: 0;
+}
+.weatherButtonContextMenuWrapper::after {
+  content: "";
+  left: 0;
+  top: 10px;
+  height: calc(100% - 20px);
+  width: 1px;
+  background-color: var(--newtab-button-static-background);
+  display: block;
+  position: absolute;
+  z-index: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .weatherButtonContextMenuWrapper::after {
+    background-color: var(--color-gray-70);
+  }
+}
+.weatherButtonContextMenuWrapper:hover::after {
+  background-color: transparent;
+}
+.weatherButtonContextMenuWrapper:focus-visible {
+  border-radius: var(--border-radius-medium);
+}
+.weatherButtonContextMenuWrapper:focus-visible::after {
+  background-color: transparent;
+}
+
+.weatherButtonContextMenu {
+  background-image: url("chrome://global/skin/icons/more.svg");
+  background-repeat: no-repeat;
+  background-size: var(--size-item-small) auto;
+  background-position: center;
+  background-color: transparent;
+  cursor: pointer;
+  fill: var(--icon-color);
+  -moz-context-properties: fill;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  appearance: none;
+  min-width: var(--size-item-large);
+}
+
+.weatherText {
+  height: min-content;
+}
+
+.weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-small);
+}
+
+.weatherForecastRow {
+  text-transform: uppercase;
+  font-weight: var(--font-weight-bold);
+}
+
+.weatherCityRow {
+  color: var(--text-color-deemphasized);
+}
+
+.weatherCity {
+  text-overflow: ellipsis;
+  font-size: var(--font-size-small);
+}
+
+.weatherCityRow + .weatherDetailedSummaryRow {
+  margin-block-start: var(--space-xsmall);
+}
+
+.weatherDetailedSummaryRow {
+  font-size: var(--newtab-weather-content-font-size);
+  gap: var(--space-large);
+}
+
+.weatherHighLowTemps {
+  display: flex;
+  gap: var(--space-xxsmall);
+  text-transform: uppercase;
+  word-spacing: var(--space-xxsmall);
+}
+
+.weatherTextSummary {
+  text-align: center;
+  max-width: 90px;
+}
+
+.weatherTemperature {
+  font-size: var(--font-size-large);
+}
+
+.weatherIconCol {
+  width: var(--size-item-large);
+  height: var(--size-item-large);
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.weatherIcon {
+  width: var(--size-item-large);
+  height: auto;
+  vertical-align: middle;
+}
+@media (prefers-contrast) {
+  .weatherIcon {
+    -moz-context-properties: fill, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+.weatherIcon.iconId1 {
+  content: url("chrome://browser/skin/weather/sunny.svg");
+}
+.weatherIcon.iconId2 {
+  content: url("chrome://browser/skin/weather/mostly-sunny.svg");
+}
+.weatherIcon:is(.iconId3, .iconId4, .iconId6) {
+  content: url("chrome://browser/skin/weather/partly-sunny.svg");
+}
+.weatherIcon.iconId5 {
+  content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
+}
+.weatherIcon:is(.iconId7, .iconId8) {
+  content: url("chrome://browser/skin/weather/cloudy.svg");
+}
+.weatherIcon.iconId11 {
+  content: url("chrome://browser/skin/weather/fog.svg");
+}
+.weatherIcon.iconId12 {
+  content: url("chrome://browser/skin/weather/showers.svg");
+}
+.weatherIcon:is(.iconId13, .iconId14) {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
+}
+.weatherIcon.iconId15 {
+  content: url("chrome://browser/skin/weather/thunderstorms.svg");
+}
+.weatherIcon:is(.iconId16, .iconId17) {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
+}
+.weatherIcon.iconId18 {
+  content: url("chrome://browser/skin/weather/rain.svg");
+}
+.weatherIcon:is(.iconId19, .iconId20, .iconId25) {
+  content: url("chrome://browser/skin/weather/flurries.svg");
+}
+.weatherIcon.iconId21 {
+  content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
+}
+.weatherIcon:is(.iconId22, .iconId23) {
+  content: url("chrome://browser/skin/weather/snow.svg");
+}
+.weatherIcon:is(.iconId24, .iconId31) {
+  content: url("chrome://browser/skin/weather/ice.svg");
+}
+.weatherIcon:is(.iconId26, .iconId29) {
+  content: url("chrome://browser/skin/weather/freezing-rain.svg");
+}
+.weatherIcon.iconId30 {
+  content: url("chrome://browser/skin/weather/hot.svg");
+}
+.weatherIcon.iconId32 {
+  content: url("chrome://browser/skin/weather/windy.svg");
+}
+.weatherIcon.iconId33 {
+  content: url("chrome://browser/skin/weather/night-clear.svg");
+}
+.weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) {
+  content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
+}
+.weatherIcon.iconId37 {
+  content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
+}
+.weatherIcon:is(.iconId39, .iconId40) {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
+  height: var(--size-item-large);
+}
+.weatherIcon:is(.iconId41, .iconId42) {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
+}
+.weatherIcon:is(.iconId43, .iconId44) {
+  content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
+}
+
 /* stylelint-disable max-nesting-depth */
 .card-outer {
   background: var(--newtab-background-color-secondary);
@@ -1994,14 +2358,17 @@ main section {
 }
 .card-outer .context-menu-button {
   background-clip: padding-box;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: var(--newtab-button-background);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-position: 55%;
-  border: 1px solid var(--newtab-border-color);
+  border: 0;
+  outline: 1px solid var(--newtab-border-color);
+  outline-width: 0;
   border-radius: 100%;
   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  color: var(--button-text-color);
+  fill: var(--newtab-button-text);
   height: 27px;
   inset-inline-end: -13.5px;
   opacity: 0;
@@ -2012,10 +2379,21 @@ main section {
   transition-property: transform, opacity;
   width: 27px;
 }
-.card-outer .context-menu-button:is(:active, :focus) {
+.card-outer .context-menu-button:is(:active, :focus-visible, :hover) {
   opacity: 1;
   transform: scale(1);
 }
+.card-outer .context-menu-button:is(:hover) {
+  background-color: var(--newtab-button-hover-background);
+}
+.card-outer .context-menu-button:is(:focus-visible) {
+  outline-color: var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-focus-background);
+  outline-width: 4px;
+}
+.card-outer .context-menu-button:is(:active) {
+  background-color: var(--newtab-button-active-background);
+}
 .card-outer:is(:focus):not(.placeholder) {
   border: 0;
   outline: 0;
@@ -2622,6 +3000,15 @@ main section {
   width: auto;
   flex-grow: 1;
 }
+.discoverystream-admin .weather-section {
+  margin-block-end: 24px;
+}
+.discoverystream-admin .weather-section form {
+  display: flex;
+}
+.discoverystream-admin .weather-section form label {
+  margin-inline-end: 12px;
+}
 
 .pocket-logged-in-cta {
   font-size: 13px;
@@ -3309,6 +3696,18 @@ main section {
 .ds-highlights .section .section-list .card-outer a {
   text-decoration: none;
 }
+.ds-highlights .section .section-list .card-outer .context-menu-button {
+  background-color: var(--newtab-button-static-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:hover {
+  background-color: var(--newtab-button-static-hover-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:hover:active {
+  background-color: var(--newtab-button-static-active-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible {
+  background-color: var(--newtab-button-static-focus-background);
+}
 .ds-highlights .hide-for-narrow {
   display: block;
 }
@@ -3570,14 +3969,17 @@ main section {
 .ds-card .context-menu-button,
 .ds-signup .context-menu-button {
   background-clip: padding-box;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: var(--newtab-button-background);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-position: 55%;
-  border: 1px solid var(--newtab-border-color);
+  border: 0;
+  outline: 1px solid var(--newtab-border-color);
+  outline-width: 0;
   border-radius: 100%;
   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  color: var(--button-text-color);
+  fill: var(--newtab-button-text);
   height: 27px;
   inset-inline-end: -13.5px;
   opacity: 0;
@@ -3588,11 +3990,25 @@ main section {
   transition-property: transform, opacity;
   width: 27px;
 }
-.ds-card .context-menu-button:is(:active, :focus),
-.ds-signup .context-menu-button:is(:active, :focus) {
+.ds-card .context-menu-button:is(:active, :focus-visible, :hover),
+.ds-signup .context-menu-button:is(:active, :focus-visible, :hover) {
   opacity: 1;
   transform: scale(1);
 }
+.ds-card .context-menu-button:is(:hover),
+.ds-signup .context-menu-button:is(:hover) {
+  background-color: var(--newtab-button-hover-background);
+}
+.ds-card .context-menu-button:is(:focus-visible),
+.ds-signup .context-menu-button:is(:focus-visible) {
+  outline-color: var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-focus-background);
+  outline-width: 4px;
+}
+.ds-card .context-menu-button:is(:active),
+.ds-signup .context-menu-button:is(:active) {
+  background-color: var(--newtab-button-active-background);
+}
 .ds-card .context-menu,
 .ds-signup .context-menu {
   opacity: 0;
@@ -3667,11 +4083,6 @@ main section {
   background-size: 15px;
   fill: #FFF;
 }
-.ds-card .card-stp-button-hover-background .context-menu-button {
-  position: static;
-  transition: none;
-  border-radius: 3px;
-}
 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   position: relative;
 }
@@ -3694,6 +4105,9 @@ main section {
   white-space: nowrap;
   color: #FFF;
 }
+.ds-card .card-stp-button-hover-background .card-stp-button:focus-visible {
+  outline: 2px solid var(--newtab-button-focus-border);
+}
 .ds-card .card-stp-button-hover-background button,
 .ds-card .card-stp-button-hover-background .context-menu {
   pointer-events: auto;
@@ -3701,6 +4115,22 @@ main section {
 .ds-card .card-stp-button-hover-background button {
   cursor: pointer;
 }
+.ds-card .context-menu-button {
+  position: static;
+  transition: none;
+  border-radius: 3px;
+  background-color: var(--newtab-button-static-background);
+}
+.ds-card .context-menu-button:hover {
+  background-color: var(--newtab-button-static-hover-background);
+}
+.ds-card .context-menu-button:hover:active {
+  background-color: var(--newtab-button-static-active-background);
+}
+.ds-card .context-menu-button:focus-visible {
+  outline: 2px solid var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-static-focus-background);
+}
 .ds-card.last-item .card-stp-button-hover-background .context-menu {
   margin-inline-start: auto;
   margin-inline-end: 18.5px;
diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css
index f6118e3c18..96b27e6b5f 100644
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -42,6 +42,16 @@ input {
   --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
   --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
   --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
+  --newtab-button-background: var(--button-background-color);
+  --newtab-button-focus-background: var(--newtab-button-background);
+  --newtab-button-focus-border: var(--focus-outline-color);
+  --newtab-button-hover-background: var(--button-background-color-hover);
+  --newtab-button-active-background: var(--button-background-color-active);
+  --newtab-button-text: var(--button-text-color);
+  --newtab-button-static-background: #F0F0F4;
+  --newtab-button-static-focus-background: var(--newtab-button-static-background);
+  --newtab-button-static-hover-background: #E0E0E6;
+  --newtab-button-static-active-background: #CFCFD8;
   --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
   --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
   --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -79,6 +89,9 @@ input {
   --newtab-primary-element-text-color: #2b2a33;
   --newtab-wordmark-color: #fbfbfe;
   --newtab-status-success: #7C6;
+  --newtab-button-static-background: #2B2A33;
+  --newtab-button-static-hover-background: #52525E;
+  --newtab-button-static-active-background: #5B5B66;
 }
 
 @media (prefers-contrast) {
@@ -92,7 +105,7 @@ input {
   background-size: 16px;
   -moz-context-properties: fill;
   display: inline-block;
-  color: var(--newtab-text-primary-color);
+  color: var(--icon-color);
   fill: currentColor;
   height: 16px;
   vertical-align: middle;
@@ -142,6 +155,9 @@ input {
 .icon.icon-info {
   background-image: url("chrome://global/skin/icons/info.svg");
 }
+.icon.icon-info-critical {
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-info-critical-16.svg");
+}
 .icon.icon-help {
   background-image: url("chrome://global/skin/icons/help.svg");
 }
@@ -222,6 +238,9 @@ input {
 .icon.icon-webextension {
   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg");
 }
+.icon.icon-weather {
+  background-image: url("chrome://browser/skin/weather/sunny.svg");
+}
 .icon.icon-highlights {
   background-image: url("chrome://global/skin/icons/highlights.svg");
 }
@@ -659,12 +678,17 @@ main section {
 .top-site-outer:is(:hover) .context-menu-button {
   opacity: 1;
 }
+.top-site-outer.active .context-menu-button {
+  opacity: 1;
+  background-color: var(--newtab-button-active-background);
+}
 .top-site-outer .context-menu-button {
   background-image: url("chrome://global/skin/icons/more.svg");
+  background-color: var(--newtab-button-background);
   border: 0;
   border-radius: 4px;
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  fill: var(--newtab-button-text);
   -moz-context-properties: fill;
   height: 20px;
   width: 20px;
@@ -674,11 +698,16 @@ main section {
   top: -20px;
   transition: opacity 200ms;
 }
-.top-site-outer .context-menu-button:is(:active, :focus) {
-  outline: 0;
+.top-site-outer .context-menu-button:hover {
+  background-color: var(--newtab-button-hover-background);
+}
+.top-site-outer .context-menu-button:hover:active {
+  background-color: var(--newtab-button-active-background);
+}
+.top-site-outer .context-menu-button:focus-visible {
+  background-color: var(--newtab-button-focus-background);
+  border-color: var(--newtab-button-focus-border);
   opacity: 1;
-  background-color: var(--newtab-element-hover-color);
-  fill: var(--newtab-primary-action-background);
 }
 .top-site-outer .tile {
   border-radius: 8px;
@@ -1675,7 +1704,8 @@ main section {
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
-  padding: 16px;
+  padding-block: 0 var(--space-large);
+  padding-inline: var(--space-large);
   overflow: auto;
   transform: translateX(435px);
   visibility: hidden;
@@ -1702,9 +1732,16 @@ main section {
 .customize-menu.customize-animate-exit-active {
   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
 }
+.customize-menu .close-button-wrapper {
+  position: sticky;
+  top: 0;
+  padding-block-start: var(--space-large);
+  background-color: var(--newtab-background-color-secondary);
+  z-index: 1;
+}
 .customize-menu .close-button {
   margin-inline-start: auto;
-  margin-bottom: 28px;
+  margin-inline-end: var(--space-large);
   white-space: nowrap;
   display: block;
   background-color: var(--newtab-element-secondary-color);
@@ -1731,7 +1768,7 @@ main section {
   grid-template-columns: 1fr;
   grid-template-rows: repeat(4, auto);
   grid-row-gap: 32px;
-  padding: 0 16px;
+  padding: var(--space-large);
 }
 .home-section .wallpapers-section h2 {
   font-size: inherit;
@@ -1978,6 +2015,333 @@ main section {
   text-decoration: none;
 }
 
+:root {
+  --newtab-weather-content-font-size: 11px;
+  --newtab-weather-sponsor-font-size: 8px;
+}
+
+.weather {
+  font-size: var(--font-size-root);
+  position: absolute;
+  left: var(--space-xlarge);
+  top: var(--space-xlarge);
+  z-index: 1;
+}
+
+.weatherNotAvailable {
+  font-size: var(--newtab-weather-content-font-size);
+  color: var(--text-color-error);
+  display: flex;
+  align-items: center;
+}
+.weatherNotAvailable .icon {
+  fill: var(--icon-color-critical);
+  -moz-context-properties: fill;
+}
+
+.weatherCard {
+  margin-block-end: var(--space-xsmall);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;
+}
+.weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText {
+  visibility: visible;
+}
+.weatherCard:focus-within {
+  overflow: visible;
+}
+.weatherCard:hover {
+  box-shadow: var(--box-shadow-10);
+  background: var(--background-color-box);
+}
+.weatherCard a {
+  color: var(--text-color);
+}
+
+.weatherSponsorText {
+  visibility: hidden;
+  font-size: var(--newtab-weather-sponsor-font-size);
+  color: var(--text-color-deemphasized);
+}
+
+.weatherInfoLink, .weatherButtonContextMenuWrapper {
+  appearance: none;
+  background-color: var(--background-color-ghost);
+  border: 0;
+  padding: var(--space-small);
+  cursor: pointer;
+}
+.weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover {
+  background-color: var(--button-background-color-ghost-hover);
+}
+.weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after {
+  background-color: transparent;
+}
+.weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active {
+  background-color: var(--button-background-color-ghost-active);
+}
+.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
+  outline: var(--focus-outline);
+}
+@media (prefers-color-scheme: dark) {
+  .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
+    background-color: rgba(35, 34, 43, 0.7);
+  }
+  .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
+    background-color: var(--newtab-button-static-hover-background);
+  }
+  .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
+    background-color: var(--newtab-button-static-active-background);
+  }
+}
+@media (prefers-contrast) and (prefers-color-scheme: dark) {
+  .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
+    background-color: var(--background-color-box);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+  .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
+    background-color: var(--newtab-button-static-hover-background);
+  }
+  .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
+    background-color: var(--newtab-button-static-active-background);
+  }
+}
+@media (prefers-contrast) and (prefers-color-scheme: light) {
+  .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+    background-color: var(--background-color-box);
+  }
+}
+
+.weatherInfoLink {
+  display: flex;
+  gap: var(--space-medium);
+  padding: var(--space-small) var(--space-medium);
+  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+  text-decoration: none;
+  color: var(--text-color);
+  min-width: 130px;
+  max-width: 190px;
+  text-overflow: ellipsis;
+}
+@media (min-width: 610px) {
+  .weatherInfoLink {
+    min-width: unset;
+  }
+}
+.weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after {
+  background-color: transparent;
+}
+.weatherInfoLink:focus-visible {
+  border-radius: var(--border-radius-medium);
+}
+.weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after {
+  background-color: transparent;
+}
+
+.weatherButtonContextMenuWrapper {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+  display: flex;
+  align-items: stretch;
+  width: 50px;
+  padding: 0;
+}
+.weatherButtonContextMenuWrapper::after {
+  content: "";
+  left: 0;
+  top: 10px;
+  height: calc(100% - 20px);
+  width: 1px;
+  background-color: var(--newtab-button-static-background);
+  display: block;
+  position: absolute;
+  z-index: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .weatherButtonContextMenuWrapper::after {
+    background-color: var(--color-gray-70);
+  }
+}
+.weatherButtonContextMenuWrapper:hover::after {
+  background-color: transparent;
+}
+.weatherButtonContextMenuWrapper:focus-visible {
+  border-radius: var(--border-radius-medium);
+}
+.weatherButtonContextMenuWrapper:focus-visible::after {
+  background-color: transparent;
+}
+
+.weatherButtonContextMenu {
+  background-image: url("chrome://global/skin/icons/more.svg");
+  background-repeat: no-repeat;
+  background-size: var(--size-item-small) auto;
+  background-position: center;
+  background-color: transparent;
+  cursor: pointer;
+  fill: var(--icon-color);
+  -moz-context-properties: fill;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  appearance: none;
+  min-width: var(--size-item-large);
+}
+
+.weatherText {
+  height: min-content;
+}
+
+.weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-small);
+}
+
+.weatherForecastRow {
+  text-transform: uppercase;
+  font-weight: var(--font-weight-bold);
+}
+
+.weatherCityRow {
+  color: var(--text-color-deemphasized);
+}
+
+.weatherCity {
+  text-overflow: ellipsis;
+  font-size: var(--font-size-small);
+}
+
+.weatherCityRow + .weatherDetailedSummaryRow {
+  margin-block-start: var(--space-xsmall);
+}
+
+.weatherDetailedSummaryRow {
+  font-size: var(--newtab-weather-content-font-size);
+  gap: var(--space-large);
+}
+
+.weatherHighLowTemps {
+  display: flex;
+  gap: var(--space-xxsmall);
+  text-transform: uppercase;
+  word-spacing: var(--space-xxsmall);
+}
+
+.weatherTextSummary {
+  text-align: center;
+  max-width: 90px;
+}
+
+.weatherTemperature {
+  font-size: var(--font-size-large);
+}
+
+.weatherIconCol {
+  width: var(--size-item-large);
+  height: var(--size-item-large);
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.weatherIcon {
+  width: var(--size-item-large);
+  height: auto;
+  vertical-align: middle;
+}
+@media (prefers-contrast) {
+  .weatherIcon {
+    -moz-context-properties: fill, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+.weatherIcon.iconId1 {
+  content: url("chrome://browser/skin/weather/sunny.svg");
+}
+.weatherIcon.iconId2 {
+  content: url("chrome://browser/skin/weather/mostly-sunny.svg");
+}
+.weatherIcon:is(.iconId3, .iconId4, .iconId6) {
+  content: url("chrome://browser/skin/weather/partly-sunny.svg");
+}
+.weatherIcon.iconId5 {
+  content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
+}
+.weatherIcon:is(.iconId7, .iconId8) {
+  content: url("chrome://browser/skin/weather/cloudy.svg");
+}
+.weatherIcon.iconId11 {
+  content: url("chrome://browser/skin/weather/fog.svg");
+}
+.weatherIcon.iconId12 {
+  content: url("chrome://browser/skin/weather/showers.svg");
+}
+.weatherIcon:is(.iconId13, .iconId14) {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
+}
+.weatherIcon.iconId15 {
+  content: url("chrome://browser/skin/weather/thunderstorms.svg");
+}
+.weatherIcon:is(.iconId16, .iconId17) {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
+}
+.weatherIcon.iconId18 {
+  content: url("chrome://browser/skin/weather/rain.svg");
+}
+.weatherIcon:is(.iconId19, .iconId20, .iconId25) {
+  content: url("chrome://browser/skin/weather/flurries.svg");
+}
+.weatherIcon.iconId21 {
+  content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
+}
+.weatherIcon:is(.iconId22, .iconId23) {
+  content: url("chrome://browser/skin/weather/snow.svg");
+}
+.weatherIcon:is(.iconId24, .iconId31) {
+  content: url("chrome://browser/skin/weather/ice.svg");
+}
+.weatherIcon:is(.iconId26, .iconId29) {
+  content: url("chrome://browser/skin/weather/freezing-rain.svg");
+}
+.weatherIcon.iconId30 {
+  content: url("chrome://browser/skin/weather/hot.svg");
+}
+.weatherIcon.iconId32 {
+  content: url("chrome://browser/skin/weather/windy.svg");
+}
+.weatherIcon.iconId33 {
+  content: url("chrome://browser/skin/weather/night-clear.svg");
+}
+.weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) {
+  content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
+}
+.weatherIcon.iconId37 {
+  content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
+}
+.weatherIcon:is(.iconId39, .iconId40) {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
+  height: var(--size-item-large);
+}
+.weatherIcon:is(.iconId41, .iconId42) {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
+}
+.weatherIcon:is(.iconId43, .iconId44) {
+  content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
+}
+
 /* stylelint-disable max-nesting-depth */
 .card-outer {
   background: var(--newtab-background-color-secondary);
@@ -1990,14 +2354,17 @@ main section {
 }
 .card-outer .context-menu-button {
   background-clip: padding-box;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: var(--newtab-button-background);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-position: 55%;
-  border: 1px solid var(--newtab-border-color);
+  border: 0;
+  outline: 1px solid var(--newtab-border-color);
+  outline-width: 0;
   border-radius: 100%;
   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  color: var(--button-text-color);
+  fill: var(--newtab-button-text);
   height: 27px;
   inset-inline-end: -13.5px;
   opacity: 0;
@@ -2008,10 +2375,21 @@ main section {
   transition-property: transform, opacity;
   width: 27px;
 }
-.card-outer .context-menu-button:is(:active, :focus) {
+.card-outer .context-menu-button:is(:active, :focus-visible, :hover) {
   opacity: 1;
   transform: scale(1);
 }
+.card-outer .context-menu-button:is(:hover) {
+  background-color: var(--newtab-button-hover-background);
+}
+.card-outer .context-menu-button:is(:focus-visible) {
+  outline-color: var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-focus-background);
+  outline-width: 4px;
+}
+.card-outer .context-menu-button:is(:active) {
+  background-color: var(--newtab-button-active-background);
+}
 .card-outer:is(:focus):not(.placeholder) {
   border: 0;
   outline: 0;
@@ -2618,6 +2996,15 @@ main section {
   width: auto;
   flex-grow: 1;
 }
+.discoverystream-admin .weather-section {
+  margin-block-end: 24px;
+}
+.discoverystream-admin .weather-section form {
+  display: flex;
+}
+.discoverystream-admin .weather-section form label {
+  margin-inline-end: 12px;
+}
 
 .pocket-logged-in-cta {
   font-size: 13px;
@@ -3305,6 +3692,18 @@ main section {
 .ds-highlights .section .section-list .card-outer a {
   text-decoration: none;
 }
+.ds-highlights .section .section-list .card-outer .context-menu-button {
+  background-color: var(--newtab-button-static-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:hover {
+  background-color: var(--newtab-button-static-hover-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:hover:active {
+  background-color: var(--newtab-button-static-active-background);
+}
+.ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible {
+  background-color: var(--newtab-button-static-focus-background);
+}
 .ds-highlights .hide-for-narrow {
   display: block;
 }
@@ -3566,14 +3965,17 @@ main section {
 .ds-card .context-menu-button,
 .ds-signup .context-menu-button {
   background-clip: padding-box;
-  background-color: var(--newtab-background-color-secondary);
+  background-color: var(--newtab-button-background);
   background-image: url("chrome://global/skin/icons/more.svg");
   background-position: 55%;
-  border: 1px solid var(--newtab-border-color);
+  border: 0;
+  outline: 1px solid var(--newtab-border-color);
+  outline-width: 0;
   border-radius: 100%;
   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
   cursor: pointer;
-  fill: var(--newtab-text-primary-color);
+  color: var(--button-text-color);
+  fill: var(--newtab-button-text);
   height: 27px;
   inset-inline-end: -13.5px;
   opacity: 0;
@@ -3584,11 +3986,25 @@ main section {
   transition-property: transform, opacity;
   width: 27px;
 }
-.ds-card .context-menu-button:is(:active, :focus),
-.ds-signup .context-menu-button:is(:active, :focus) {
+.ds-card .context-menu-button:is(:active, :focus-visible, :hover),
+.ds-signup .context-menu-button:is(:active, :focus-visible, :hover) {
   opacity: 1;
   transform: scale(1);
 }
+.ds-card .context-menu-button:is(:hover),
+.ds-signup .context-menu-button:is(:hover) {
+  background-color: var(--newtab-button-hover-background);
+}
+.ds-card .context-menu-button:is(:focus-visible),
+.ds-signup .context-menu-button:is(:focus-visible) {
+  outline-color: var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-focus-background);
+  outline-width: 4px;
+}
+.ds-card .context-menu-button:is(:active),
+.ds-signup .context-menu-button:is(:active) {
+  background-color: var(--newtab-button-active-background);
+}
 .ds-card .context-menu,
 .ds-signup .context-menu {
   opacity: 0;
@@ -3663,11 +4079,6 @@ main section {
   background-size: 15px;
   fill: #FFF;
 }
-.ds-card .card-stp-button-hover-background .context-menu-button {
-  position: static;
-  transition: none;
-  border-radius: 3px;
-}
 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   position: relative;
 }
@@ -3690,6 +4101,9 @@ main section {
   white-space: nowrap;
   color: #FFF;
 }
+.ds-card .card-stp-button-hover-background .card-stp-button:focus-visible {
+  outline: 2px solid var(--newtab-button-focus-border);
+}
 .ds-card .card-stp-button-hover-background button,
 .ds-card .card-stp-button-hover-background .context-menu {
   pointer-events: auto;
@@ -3697,6 +4111,22 @@ main section {
 .ds-card .card-stp-button-hover-background button {
   cursor: pointer;
 }
+.ds-card .context-menu-button {
+  position: static;
+  transition: none;
+  border-radius: 3px;
+  background-color: var(--newtab-button-static-background);
+}
+.ds-card .context-menu-button:hover {
+  background-color: var(--newtab-button-static-hover-background);
+}
+.ds-card .context-menu-button:hover:active {
+  background-color: var(--newtab-button-static-active-background);
+}
+.ds-card .context-menu-button:focus-visible {
+  outline: 2px solid var(--newtab-button-focus-border);
+  background-color: var(--newtab-button-static-focus-background);
+}
 .ds-card.last-item .card-stp-button-hover-background .context-menu {
   margin-inline-start: auto;
   margin-inline-end: 18.5px;