Adding upstream version 86.0.1.upstream/86.0.1upstream

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

10 files changed, 1134 insertions, 0 deletions

diff --git a/browser/components/newtab/content-src/styles/_OnboardingImages.scss b/browser/components/newtab/content-src/styles/_OnboardingImages.scss
new file mode 100644
index 0000000000..cd7fa48ad2
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_OnboardingImages.scss
@@ -0,0 +1,71 @@
+// Used for Trailhead and about:welcome
+
+.onboardingMessageImage {
+  &.addons {
+    background-image: url('chrome://activity-stream/content/data/content/assets/illustration-addons@2x.png');
+  }
+
+  &.privatebrowsing {
+    background-image: url('chrome://activity-stream/content/data/content/assets/illustration-privatebrowsing@2x.png');
+  }
+
+  &.screenshots {
+    background-image: url('chrome://activity-stream/content/data/content/assets/illustration-screenshots@2x.png');
+  }
+
+  &.gift {
+    background-image: url('chrome://activity-stream/content/data/content/assets/illustration-gift@2x.png');
+  }
+
+  &.sync {
+    background-image: url('chrome://activity-stream/content/data/content/assets/illustration-sync@2x.png');
+  }
+
+  &.devices {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-devices.svg');
+  }
+
+  &.fbcont {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-fbcont.svg');
+  }
+
+  &.import {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-import.svg');
+  }
+
+  &.ffmonitor {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-ffmonitor.svg');
+  }
+
+  &.ffsend {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-ffsend.svg');
+  }
+
+  &.lockwise {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-lockwise.svg');
+  }
+
+  &.mobile {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-mobile.svg');
+  }
+
+  &.pledge {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-pledge.svg');
+  }
+
+  &.pocket {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-pocket.svg');
+  }
+
+  &.private {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-private.svg');
+  }
+
+  &.sendtab {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-sendtab.svg');
+  }
+
+  &.tracking {
+    background-image: url('chrome://activity-stream/content/data/content/assets/trailhead/card-illo-tracking.svg');
+  }
+}
diff --git a/browser/components/newtab/content-src/styles/_activity-stream.scss b/browser/components/newtab/content-src/styles/_activity-stream.scss
new file mode 100644
index 0000000000..702ef9bdd1
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_activity-stream.scss
@@ -0,0 +1,179 @@
+@import './normalize';
+@import './variables';
+@import './theme';
+@import './icons';
+@import './mixins';
+
+html {
+  height: 100%;
+}
+
+body,
+#root { // sass-lint:disable-line no-ids
+  min-height: 100vh;
+}
+
+#root { // sass-lint:disable-line no-ids
+  position: relative;
+}
+
+body {
+  background-color: var(--newtab-background-color);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+}
+
+.no-scroll {
+  overflow: hidden;
+}
+
+h1,
+h2 {
+  font-weight: normal;
+}
+
+a {
+  text-decoration: none;
+}
+
+.inner-border {
+  border: $border-secondary;
+  border-radius: $border-radius;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.show-on-init {
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+
+  &.on {
+    animation: fadeIn 0.2s;
+    opacity: 1;
+  }
+}
+
+.actions {
+  border-top: $border-secondary;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 15px 25px 0;
+}
+
+// Default button (grey)
+.button,
+.actions button {
+  background-color: var(--newtab-button-secondary-color);
+  border: $border-primary;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  margin-bottom: 15px;
+  padding: 10px 30px;
+  white-space: nowrap;
+
+  &:hover:not(.dismiss),
+  &:focus:not(.dismiss) {
+    box-shadow: $shadow-primary;
+    transition: box-shadow 150ms;
+  }
+
+  &.dismiss {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    text-decoration: underline;
+  }
+
+  // Blue button
+  &.primary,
+  &.done {
+    background-color: var(--newtab-button-primary-color);
+    border: solid 1px var(--newtab-button-primary-color);
+    color: $white;
+    margin-inline-start: auto;
+  }
+}
+
+input {
+  &[type='text'],
+  &[type='search'] {
+    border-radius: $border-radius;
+  }
+}
+
+// These styles are needed for -webkit-line-clamp to work correctly, so reuse
+// this class name while separately setting a clamp value via CSS or JS.
+.clamp {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+// Components
+@import '../components/A11yLinkButton/A11yLinkButton';
+@import '../components/Base/Base';
+@import '../components/ErrorBoundary/ErrorBoundary';
+@import '../components/TopSites/TopSites';
+@import '../components/Sections/Sections';
+@import '../components/Topics/Topics';
+@import '../components/Search/Search';
+@import '../components/ContextMenu/ContextMenu';
+@import '../components/ConfirmDialog/ConfirmDialog';
+@import '../components/CustomizeMenu/CustomizeMenu';
+@import '../components/Card/Card';
+@import '../components/CollapsibleSection/CollapsibleSection';
+@import '../components/ASRouterAdmin/ASRouterAdmin';
+@import '../components/PocketLoggedInCta/PocketLoggedInCta';
+@import '../components/MoreRecommendations/MoreRecommendations';
+@import '../components/DiscoveryStreamBase/DiscoveryStreamBase';
+
+// Discovery Stream Components
+@import '../components/DiscoveryStreamComponents/CardGrid/CardGrid';
+@import '../components/DiscoveryStreamComponents/CollectionCardGrid/CollectionCardGrid';
+@import '../components/DiscoveryStreamComponents/Hero/Hero';
+@import '../components/DiscoveryStreamComponents/Highlights/Highlights';
+@import '../components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule';
+@import '../components/DiscoveryStreamComponents/List/List';
+@import '../components/DiscoveryStreamComponents/Navigation/Navigation';
+@import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle';
+@import '../components/DiscoveryStreamComponents/TopSites/TopSites';
+@import '../components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu';
+@import '../components/DiscoveryStreamComponents/DSCard/DSCard';
+@import '../components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter';
+@import '../components/DiscoveryStreamComponents/DSImage/DSImage';
+@import '../components/DiscoveryStreamComponents/DSDismiss/DSDismiss';
+@import '../components/DiscoveryStreamComponents/DSMessage/DSMessage';
+@import '../components/DiscoveryStreamImpressionStats/ImpressionStats';
+@import '../components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState';
+@import '../components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo';
+@import '../components/DiscoveryStreamComponents/DSSignup/DSSignup';
+@import '../components/DiscoveryStreamComponents/DSPrivacyModal/DSPrivacyModal';
+
+// AS Router
+@import '../asrouter/components/Button/Button';
+@import '../asrouter/components/SnippetBase/SnippetBase';
+@import '../asrouter/components/ModalOverlay/ModalOverlay';
+@import '../asrouter/templates/SimpleBelowSearchSnippet/SimpleBelowSearchSnippet';
+@import '../asrouter/templates/SimpleSnippet/SimpleSnippet';
+@import '../asrouter/templates/SubmitFormSnippet/SubmitFormSnippet';
+@import '../asrouter/templates/EOYSnippet/EOYSnippet';
diff --git a/browser/components/newtab/content-src/styles/_icons.scss b/browser/components/newtab/content-src/styles/_icons.scss
new file mode 100644
index 0000000000..f665dc5fb3
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_icons.scss
@@ -0,0 +1,208 @@
+.icon {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: $icon-size;
+  -moz-context-properties: fill;
+  display: inline-block;
+  color: var(--newtab-icon-primary-color);
+  fill: currentColor;
+  height: $icon-size;
+  vertical-align: middle;
+  width: $icon-size;
+
+  // helper classes
+  &.icon-spacer {
+    margin-inline-end: 8px;
+  }
+
+  &.icon-small-spacer {
+    margin-inline-end: 6px;
+  }
+
+  &.icon-button-style {
+    fill: var(--newtab-icon-secondary-color);
+    border: 0;
+
+    &:focus,
+    &:hover {
+      fill: var(--newtab-text-primary-color);
+    }
+  }
+
+  // icon images
+  &.icon-bookmark-added {
+    background-image: url('chrome://browser/skin/bookmark.svg');
+  }
+
+  &.icon-bookmark-hollow {
+    background-image: url('chrome://browser/skin/bookmark-hollow.svg');
+  }
+
+  &.icon-clear-input {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-cancel-16.svg');
+  }
+
+  &.icon-delete {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-delete-16.svg');
+  }
+
+  &.icon-search {
+    background-image: url('chrome://browser/skin/search-glass.svg');
+  }
+
+  &.icon-modal-delete {
+    flex-shrink: 0;
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-modal-delete-32.svg');
+    background-size: $larger-icon-size;
+    height: $larger-icon-size;
+    width: $larger-icon-size;
+  }
+
+  &.icon-mail {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg');
+  }
+
+  &.icon-dismiss {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-dismiss-16.svg');
+  }
+
+  &.icon-info {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-info-16.svg');
+  }
+
+  &.icon-new-window {
+    @include flip-icon;
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg');
+  }
+
+  &.icon-new-window-private {
+    background-image: url('chrome://browser/skin/privateBrowsing.svg');
+  }
+
+  &.icon-settings {
+    background-image: url('chrome://global/skin/icons/settings.svg');
+  }
+
+  &.icon-pin {
+    @include flip-icon;
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg');
+  }
+
+  &.icon-unpin {
+    @include flip-icon;
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg');
+  }
+
+  &.icon-edit {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg');
+  }
+
+  &.icon-pocket {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-16.svg');
+  }
+
+  &.icon-pocket-save {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-save-16.svg');
+  }
+
+  &.icon-pocket-delete {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg');
+  }
+
+  &.icon-pocket-archive {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg');
+  }
+
+  &.icon-history-item {
+    background-image: url('chrome://browser/skin/history.svg');
+  }
+
+  &.icon-trending {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-trending-16.svg');
+    transform: translateY(2px); // trending bolt is visually top heavy
+  }
+
+  &.icon-now {
+    background-image: url('chrome://browser/skin/history.svg');
+  }
+
+  &.icon-topsites {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-topsites-16.svg');
+  }
+
+  &.icon-pin-small {
+    @include flip-icon;
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-pin-12.svg');
+    background-size: $smaller-icon-size;
+    height: $smaller-icon-size;
+    width: $smaller-icon-size;
+  }
+
+  &.icon-check {
+    background-image: url('chrome://global/skin/icons/check.svg');
+  }
+
+  &.icon-download {
+    background-image: url('chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar');
+  }
+
+  &.icon-copy {
+    background-image: url('chrome://browser/skin/edit-copy.svg');
+  }
+
+  &.icon-open-file {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg');
+  }
+
+  &.icon-webextension {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg');
+  }
+
+  &.icon-highlights {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg');
+  }
+
+  &.icon-arrowhead-down {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg');
+  }
+
+  &.icon-arrowhead-down-small {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg');
+    background-size: $smaller-icon-size;
+    height: $smaller-icon-size;
+    width: $smaller-icon-size;
+  }
+
+  &.icon-arrowhead-forward-small {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg');
+    background-size: $smaller-icon-size;
+    height: $smaller-icon-size;
+    transform: rotate(-90deg);
+    width: $smaller-icon-size;
+
+    &:dir(rtl) {
+      transform: rotate(90deg);
+    }
+  }
+
+  &.icon-arrowhead-up {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg');
+    transform: rotate(180deg);
+  }
+
+  &.icon-add {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-add-16.svg');
+  }
+
+  &.icon-minimize {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg');
+  }
+
+  &.icon-maximize {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg');
+  }
+
+  &.icon-arrow {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrow.svg');
+  }
+}
diff --git a/browser/components/newtab/content-src/styles/_mixins.scss b/browser/components/newtab/content-src/styles/_mixins.scss
new file mode 100644
index 0000000000..0189408b06
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_mixins.scss
@@ -0,0 +1,50 @@
+// Shared styling of article images shown as background
+@mixin image-as-background {
+  background-color: var(--newtab-card-placeholder-color);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 0.5px $black-15;
+}
+
+// Note: lineHeight and fontSize should be unitless but can be derived from pixel values
+// Bug 1550624 to clean up / remove this mixin to avoid duplicate styles
+@mixin limit-visible-lines($line-count, $line-height, $font-size) {
+  font-size: $font-size * 1px;
+  -webkit-line-clamp: $line-count;
+  line-height: $line-height * 1px;
+}
+
+@mixin dark-theme-only {
+  [lwt-newtab-brighttext] & {
+    @content;
+  }
+}
+
+@mixin ds-border-top {
+  @content;
+
+  @include dark-theme-only {
+    border-top: 1px solid $grey-60;
+  }
+
+  border-top: 1px solid $grey-30;
+}
+
+@mixin ds-border-bottom {
+  @content;
+
+  @include dark-theme-only {
+    border-bottom: 1px solid $grey-60;
+  }
+
+  border-bottom: 1px solid $grey-30;
+}
+
+@mixin ds-fade-in($halo-color: $blue-50-30) {
+  box-shadow: 0 0 0 5px $halo-color;
+  transition: box-shadow 150ms;
+  border-radius: 4px;
+  outline: none;
+}
diff --git a/browser/components/newtab/content-src/styles/_normalize.scss b/browser/components/newtab/content-src/styles/_normalize.scss
new file mode 100644
index 0000000000..32f5ef3677
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_normalize.scss
@@ -0,0 +1,29 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+*::-moz-focus-inner {
+  border: 0;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input {
+  background-color: inherit;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+[hidden] {
+  display: none !important; // sass-lint:disable-line no-important
+}
diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss
new file mode 100644
index 0000000000..29e313873e
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_theme.scss
@@ -0,0 +1,231 @@
+@function textbox-shadow($color) {
+  @return 0 0 0 1px $color, 0 0 0 $textbox-shadow-size rgba($color, 0.3);
+}
+
+@mixin textbox-focus($color) {
+  --newtab-textbox-focus-color: #{$color};
+  --newtab-textbox-focus-boxshadow: #{textbox-shadow($color)};
+}
+
+// scss variables related to the theme.
+$border-primary: 1px solid var(--newtab-border-primary-color);
+$border-secondary: 1px solid var(--newtab-border-secondary-color);
+$inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color);
+$inner-box-shadow-nte: 0 3px 8px var(--newtab-inner-box-shadow-color-nte);
+$tile-shadow-second: 0 0 2px var(--newtab-tile-shadow-secondary);
+$input-border: 1px solid var(--newtab-textbox-border);
+$input-border-active: 1px solid var(--newtab-textbox-focus-color);
+$input-error-border: 1px solid $red-60;
+$input-error-boxshadow: textbox-shadow($red-60);
+$shadow-primary: 0 0 0 5px var(--newtab-card-active-outline-color);
+$shadow-secondary: 0 1px 4px 0 $grey-90-20;
+
+// Default theme
+body {
+  // General styles
+  --newtab-background-color: #{$grey-10};
+  --newtab-border-primary-color: #{$grey-40};
+  --newtab-border-secondary-color: #{$grey-30};
+  --newtab-element-active-color: #{$grey-30-60};
+  --newtab-element-hover-color: #{$grey-20};
+  --newtab-icon-primary-color: #{$grey-90-80};
+  --newtab-icon-secondary-color: #{$grey-90-60};
+  --newtab-icon-tertiary-color: #{$grey-30};
+  --newtab-inner-box-shadow-color: #{$black-10};
+  --newtab-inner-box-shadow-color-nte: #{$newtab-card-firstshadow};
+  --newtab-tile-shadow-secondary: #{$newtab-tile-shadow-secondary};
+
+  --newtab-link-primary-color: #{$blue-60};
+  --newtab-link-secondary-color: #{$teal-70};
+  --newtab-text-conditional-color: #{$grey-60};
+  --newtab-text-primary-color: #{$grey-90};
+  --newtab-text-secondary-color: #{$grey-50};
+  --newtab-textbox-background-color: #{$white};
+  --newtab-textbox-border: #{$grey-90-20};
+  @include textbox-focus($blue-60); // sass-lint:disable-line mixins-before-declarations
+
+  // Background buttons
+  --newtab-background-button-color: #{$newtab-background-button-default-color};
+  --newtab-background-button-text-color: #{$newtab-background-button-default-text-color};
+  --newtab-background-button-hover-color: #{$newtab-background-button-default-hover-color};
+  --newtab-background-button-active-color: #{$newtab-background-button-default-active-color};
+
+  // Buttons
+  --newtab-button-primary-color: #{$blue-60};
+  --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};
+
+
+  // Context menu
+  --newtab-contextmenu-background-color: #{$grey-10};
+  --newtab-contextmenu-button-color: #{$white};
+
+  // Modal + overlay
+  --newtab-modal-color: #{$white};
+  --newtab-overlay-color: #{$grey-20-80};
+
+  // Sections
+  --newtab-section-header-text-color: #{$grey-50};
+  --newtab-section-navigation-text-color: #{$grey-50};
+  --newtab-section-active-contextmenu-color: #{$grey-90};
+
+  // Search
+  --newtab-search-border-color: transparent;
+  --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};
+  --newtab-search-wordmark-color: #{$firefox-wordmark-default-color};
+
+  // Top Sites
+  --newtab-topsites-background-color: #{$white};
+  --newtab-topsites-icon-shadow: inset #{$inner-box-shadow};
+  --newtab-topsites-label-color: inherit;
+  --newtab-topsites-outer-card-hover: #{$newtab-card-hover-color};
+  --newtab-topsites-context-menu-hover: #{$newtab-card-hover-color};
+
+  // Cards
+  --newtab-card-active-outline-color: #{$grey-30};
+  --newtab-card-background-color: #{$white};
+  --newtab-card-hairline-color: #{$black-10};
+  --newtab-card-placeholder-color: #{$grey-30};
+  --newtab-card-shadow: 0 1px 4px 0 #{$grey-90-10};
+
+  // Snippets
+  --newtab-snippets-background-color: #{$white};
+  --newtab-snippets-hairline-color: transparent;
+
+  // New New Tab
+  --newtab-background-primary-text-color: #{$newtab-background-primary-text-color};
+  --newtab-focus-outline: #{$newtab-focus-outline-color};
+  --newtab-focus-border: #{$blue-60};
+  --newtab-focus-border-selected: #{$newtab-card-tint};
+  --newtab-seperator-line-color: #{$newtab-card-separator-line-color};
+  --newtab-primary-action-background: #{$blue-60};
+  --newtab-primary-action-background-off: #{$newtab-primary-action-background-off};
+  --customize-menu-primary-text-color: #{$newtab-card-primary-text-color};
+  --customize-menu-check-fill: #{$white};
+  --customize-menu-background: #{$white};
+  --customize-menu-secondary-action-background: #{$grey-10};
+  --customize-menu-secondary-action-background-hover: #{$grey-20};
+  --customize-menu-secondary-action-background-active: #{$newtab-card-secondary-action-background-active};
+  --customize-menu-seperator-line-color: #{$newtab-card-separator-line-color};
+  --customize-menu-first-shadow: #{$newtab-card-firstshadow};
+  --customize-menu-second-shadow: #{$newtab-card-secondshadow};
+  --customize-menu-primary-action-text: #{$white};
+  --customize-menu-line-color: #{$newtab-card-line-color};
+  --newtab-search-first-shadow: #{$newtab-card-firstshadow};
+  --newtab-search-second-shadow: #{$newtab-card-secondshadow};
+  --newtab-search-text-color: #{$newtab-card-secondary-text-color};
+  --newtab-card-first-shadow: #{$newtab-card-firstshadow};
+  --newtab-card-second-shadow: #{$newtab-card-secondshadow};
+  --newtab-wordmark-color: #{$newtab-wordmark-default-color};
+
+  &[lwt-newtab-brighttext] {
+    // General styles
+    --newtab-background-color: #{$grey-80};
+    --newtab-border-primary-color: #{$grey-10-80};
+    --newtab-border-secondary-color: #{$grey-10-10};
+    --newtab-button-primary-color: #{$blue-60};
+    --newtab-button-secondary-color: #{$grey-70};
+    --newtab-element-active-color: #{$grey-10-20};
+    --newtab-element-hover-color: #{$grey-10-10};
+    --newtab-icon-primary-color: #{$grey-10-80};
+    --newtab-icon-secondary-color: #{$grey-10-40};
+    --newtab-icon-tertiary-color: #{$grey-10-40};
+    --newtab-inner-box-shadow-color: #{$grey-10-20};
+    --newtab-inner-box-shadow-color-nte: #{$newtab-card-darktheme-firstshadow};
+    --newtab-tile-shadow-secondary: #{$newtab-tile-darktheme-shadow-secondary};
+    --newtab-link-primary-color: #{$blue-40};
+    --newtab-link-secondary-color: #{$pocket-teal};
+    --newtab-text-conditional-color: #{$grey-10};
+    --newtab-text-primary-color: #{$grey-10};
+    --newtab-text-secondary-color: #{$grey-10-80};
+    --newtab-textbox-background-color: #{$grey-70};
+    --newtab-textbox-border: #{$grey-10-20};
+    @include textbox-focus($blue-40); // sass-lint:disable-line mixins-before-declarations
+
+    // Background buttons.
+    --newtab-background-button-color: #{$newtab-background-button-darktheme-color};
+    --newtab-background-button-text-color: #{$newtab-background-button-darktheme-text-color};
+    --newtab-background-button-hover-color: #{$newtab-background-button-darktheme-hover-color};
+    --newtab-background-button-active-color: #{$newtab-background-button-darktheme-active-color};
+
+    // Feed buttons
+    --newtab-feed-button-background: #{$grey-70};
+    --newtab-feed-button-text: #{$grey-10};
+    --newtab-feed-button-background-faded: #{$grey-70-60};
+    --newtab-feed-button-text-faded: #{$grey-10-00};
+    --newtab-feed-button-spinner: #{$grey-30};
+
+    // Context menu
+    --newtab-contextmenu-background-color: #{$grey-60};
+    --newtab-contextmenu-button-color: #{$grey-80};
+
+    // Modal + overlay
+    --newtab-modal-color: #{$grey-80};
+    --newtab-overlay-color: #{$grey-90-80};
+
+    // Sections
+    --newtab-section-header-text-color: #{$grey-10-80};
+    --newtab-section-navigation-text-color: #{$grey-10-80};
+    --newtab-section-active-contextmenu-color: #{$white};
+
+    // Search
+    --newtab-search-border-color: #{$grey-10-20};
+    --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};
+    --newtab-search-wordmark-color: #{$firefox-wordmark-darktheme-color};
+
+    // Top Sites
+    --newtab-topsites-background-color: #{$grey-70};
+    --newtab-topsites-icon-shadow: none;
+    --newtab-topsites-label-color: #{$grey-10-80};
+    --newtab-topsites-outer-card-hover: #{$newtab-card-darktheme-hover-color};
+    --newtab-topsites-context-menu-hover: #{$newtab-card-darktheme-hover-color};
+
+    // Cards
+    --newtab-card-active-outline-color: #{$grey-60};
+    --newtab-card-background-color: #{$grey-70};
+    --newtab-card-hairline-color: #{$grey-10-10};
+    --newtab-card-placeholder-color: #{$grey-60};
+    --newtab-card-shadow: 0 1px 8px 0 #{$grey-90-20};
+
+    // Snippets
+    --newtab-snippets-background-color: #{$grey-70};
+    --newtab-snippets-hairline-color: #{$white-10};
+
+    // New New Tab
+    --newtab-background-primary-text-color: #{$newtab-background-darktheme-primary-text-color};
+    --newtab-focus-outline: #{$newtab-darktheme-focus-outline-color};
+    --newtab-focus-border: #{$newtab-darktheme-focus-border};
+    --newtab-focus-border-selected: #{$newtab-darktheme-focus-border-selected};
+    --newtab-primary-action-background: #{$newtab-darktheme-primary-action-background};
+    --newtab-primary-action-background-off: #{$newtab-darktheme-primary-action-background-off};
+    --newtab-seperator-line-color: #{$newtab-card-darktheme-separator-line-color};
+    --customize-menu-primary-text-color: #{$newtab-card-darktheme-primary-text-color};
+    --customize-menu-check-fill: #{$newtab-card-darktheme-primary-text-color};
+    --customize-menu-background: #{$grey-70};
+    --customize-menu-secondary-action-background: #{$newtab-card-darktheme-secondary-action-background};
+    --customize-menu-secondary-action-background-hover: #{$newtab-card-darktheme-secondary-action-background-hover};
+    --customize-menu-secondary-action-background-active: #{$newtab-card-darktheme-secondary-action-background-active};
+    --customize-menu-seperator-line-color: #{$newtab-card-darktheme-separator-line-color};
+    --customize-menu-first-shadow: #{$newtab-card-darktheme-firstshadow};
+    --customize-menu-second-shadow: #{$newtab-darktheme-card-secondshadow};
+    --customize-menu-primary-action-text: #{$newtab-card-darktheme-primary-text-color};
+    --customize-menu-line-color: #{$newtab-card-darktheme-line-color};
+    --newtab-search-first-shadow: #{$newtab-card-darktheme-firstshadow};
+    --newtab-search-second-shadow: #{$newtab-darktheme-card-secondshadow};
+    --newtab-search-text-color: #{$newtab-card-darktheme-secondary-text-color};
+    --newtab-card-first-shadow: #{$newtab-card-darktheme-firstshadow};
+    --newtab-card-second-shadow: #{$newtab-darktheme-card-secondshadow};
+    --newtab-wordmark-color: #{$firefox-wordmark-darktheme-color};
+  }
+}
diff --git a/browser/components/newtab/content-src/styles/_variables.scss b/browser/components/newtab/content-src/styles/_variables.scss
new file mode 100644
index 0000000000..b43b9fe924
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_variables.scss
@@ -0,0 +1,323 @@
+// Photon colors from http://design.firefox.com/photon/visuals/color.html
+$blue-40: #45A1FF;
+$blue-50: #0A84FF;
+$blue-60: #0060DF;
+$blue-70: #003EAA;
+$blue-80: #002275;
+$grey-10: #F9F9FA;
+$grey-20: #EDEDF0;
+$grey-30: #D7D7DB;
+$grey-40: #B1B1B3;
+$grey-50: #737373;
+$grey-60: #4A4A4F;
+$grey-70: #38383D;
+$grey-80: #2A2A2E;
+$grey-90: #0C0C0D;
+$teal-10: #A7FFFE;
+$teal-60: #00C8D7;
+$teal-70: #008EA4;
+$teal-80: #005A71;
+$red-60: #D70022;
+$yellow-50: #FFE900;
+$violet-20: #CB9EFF;
+
+// Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
+$grey-10-00: rgba($grey-10, 0);
+$grey-10-10: rgba($grey-10, 0.1);
+$grey-10-20: rgba($grey-10, 0.2);
+$grey-10-30: rgba($grey-10, 0.3);
+$grey-10-40: rgba($grey-10, 0.4);
+$grey-10-50: rgba($grey-10, 0.5);
+$grey-10-60: rgba($grey-10, 0.6);
+$grey-10-80: rgba($grey-10, 0.8);
+$grey-10-95: rgba($grey-10, 0.95);
+$grey-20-60: rgba($grey-20, 0.6);
+$grey-20-80: rgba($grey-20, 0.8);
+$grey-30-60: rgba($grey-30, 0.6);
+$grey-60-60: rgba($grey-60, 0.6);
+$grey-60-70: rgba($grey-60, 0.7);
+$grey-70-40: rgba($grey-70, 0.4);
+$grey-70-60: rgba($grey-70, 0.6);
+$grey-80-95: rgba($grey-80, 0.95);
+$grey-90-00: rgba($grey-90, 0);
+$grey-90-10: rgba($grey-90, 0.1);
+$grey-90-20: rgba($grey-90, 0.2);
+$grey-90-30: rgba($grey-90, 0.3);
+$grey-90-40: rgba($grey-90, 0.4);
+$grey-90-50: rgba($grey-90, 0.5);
+$grey-90-60: rgba($grey-90, 0.6);
+$grey-90-70: rgba($grey-90, 0.7);
+$grey-90-80: rgba($grey-90, 0.8);
+$grey-90-90: rgba($grey-90, 0.9);
+
+$blue-40-40: rgba($blue-40, 0.4);
+$blue-50-50: rgba($blue-50, 0.5);
+$blue-50-30: rgba($blue-50, 0.3);
+$blue-50-50: rgba($blue-50, 0.5);
+
+$black: #000;
+$black-5: rgba($black, 0.05);
+$black-10: rgba($black, 0.1);
+$black-12: rgba($black, 0.12);
+$black-15: rgba($black, 0.15);
+$black-20: rgba($black, 0.2);
+$black-25: rgba($black, 0.25);
+$black-30: rgba($black, 0.3);
+
+// Other colors
+$white: #FFF;
+$white-0: rgba($white, 0);
+$white-10: rgba($white, 0.1);
+$white-50: rgba($white, 0.5);
+$white-60: rgba($white, 0.6);
+$white-70: rgba($white, 0.7);
+$white-100: rgba($white, 1);
+$ghost-white: #FAFAFC;
+$pocket-teal: #50BCB6;
+$pocket-red: #EF4056;
+$shadow-10: rgba(12, 12, 13, 0.1);
+$bookmark-icon-fill: #0A84FF;
+$download-icon-fill: #12BC00;
+$pocket-icon-fill: #D70022;
+$email-input-focus: rgba($blue-50, 0.3);
+$email-input-invalid: rgba($red-60, 0.3);
+$aw-extra-blue-1: #004EC2;
+$aw-extra-blue-2: #0080FF;
+$aw-extra-blue-3: #00C7FF;
+$about-welcome-gradient: linear-gradient(to bottom, $blue-70 40%, $aw-extra-blue-1 60%, $blue-60 80%, $aw-extra-blue-2 90%, $aw-extra-blue-3 100%);
+$about-welcome-extra-links: #676F7E;
+$firefox-wordmark-default-color: #363959;
+$firefox-wordmark-darktheme-color: $white;
+
+// New New Tab Experience colors.
+$newtab-background-button-default-color: rgba(223, 223, 223, 0.5);
+$newtab-background-button-darktheme-color: rgba(80, 80, 80, 0.5);
+$newtab-background-button-default-text-color: #484848;
+$newtab-background-button-darktheme-text-color: #CDCDD4;
+$newtab-background-button-default-hover-color: rgba(196, 196, 196, 0.5);
+$newtab-background-button-darktheme-hover-color: rgba(114, 114, 114, 0.5);
+$newtab-background-button-default-active-color: rgba(151, 151, 151, 0.5);
+$newtab-background-button-darktheme-active-color: rgba(173, 173, 173, 0.5);
+$newtab-background-primary-text-color: #151515;
+$newtab-background-darktheme-primary-text-color: #CDCDD4;
+$newtab-wordmark-default-color: #20123A;
+
+$newtab-card-primary-text-color: #20123A;
+$newtab-card-darktheme-primary-text-color: #E0E0E6;
+$newtab-card-line-color: #716F87;
+$newtab-card-darktheme-line-color: #B9B7CC;
+$newtab-card-separator-line-color: #E1E0E6;
+$newtab-card-darktheme-separator-line-color: #53515F;
+$newtab-card-tint: rgba(0, 0, 0, 0.15);
+$newtab-card-firstshadow: rgba(9, 32, 77, 0.12);
+$newtab-card-darktheme-firstshadow: rgba(21, 20, 26, 0.5);
+$newtab-card-secondshadow: rgba(29, 17, 51, 0.12);
+$newtab-darktheme-card-secondshadow: rgba(21, 20, 26, 0.75);
+$newtab-focus-outline-color: rgba(0, 96, 223, 0.25);
+$newtab-darktheme-focus-outline-color: rgba(80, 145, 241, 0.5);
+$newtab-darktheme-focus-border: #B5D3FF;
+$newtab-darktheme-focus-border-selected: #B5D3FF;
+$newtab-darktheme-primary-action-background: #4484E2;
+$newtab-primary-action-background-off: #E9E9E9;
+$newtab-darktheme-primary-action-background-off: #6A6A6F;
+$newtab-card-darktheme-secondary-action-background: #515156;
+$newtab-card-darktheme-secondary-action-background-hover: #606065;
+$newtab-card-secondary-action-background-active: #E2E2E6;
+$newtab-card-darktheme-secondary-action-background-active: #6F6F74;
+$newtab-card-darktheme-hover-color: rgba(180, 180, 180, 0.1);
+$newtab-card-hover-color: rgba(0, 0, 0, 0.05);
+$newtab-tile-shadow-secondary: rgba(29, 17, 51, 0.2);
+$newtab-tile-darktheme-shadow-secondary: rgba(21, 20, 26, 0.75);
+$newtab-card-secondary-text-color: #585165;
+$newtab-card-darktheme-secondary-text-color: #B1B1BD;
+
+// Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html
+$photon-easing: cubic-bezier(0.07, 0.95, 0, 1);
+
+$border-radius: 3px;
+$border-radius-new: 8px;
+
+// Grid related styles
+$base-gutter: 32px;
+$section-horizontal-padding: 25px;
+$section-vertical-padding: 10px;
+$section-spacing: 40px - $section-vertical-padding * 2;
+$grid-unit: 96px; // 1 top site
+// New Tab Experience grid unit needs to be smaller, but for now we are changing this UI with a pref, so requires duplication.
+$grid-unit-small: 80px; // 1 top site 
+
+$icon-size: 16px;
+$smaller-icon-size: 12px;
+$larger-icon-size: 32px;
+
+$searchbar-width-small: $grid-unit * 2 + $base-gutter * 1;
+$searchbar-width-medium: $grid-unit * 4 + $base-gutter * 3;
+$searchbar-width-large: $grid-unit * 6 + $base-gutter * 5;
+
+$searchbar-width-small-new: ($grid-unit * 2 + $base-gutter * 1) - 24px;
+$searchbar-width-medium-new: ($grid-unit * 4 + $base-gutter * 3) - 120px;
+$searchbar-width-large-new: ($grid-unit * 6 + $base-gutter * 5) - 136px;
+$searchbar-width-largest-new: ($grid-unit * 6 + $base-gutter * 5) - 16px;
+
+$wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $section-horizontal-padding * 2; // 2 top sites
+$wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $section-horizontal-padding * 2; // 4 top sites
+$wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $section-horizontal-padding * 2; // 6 top sites
+$wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $section-horizontal-padding * 2; // 8 top sites
+// For the breakpoints, we need to add space for the scrollbar to avoid weird
+// layout issues when the scrollbar is visible. 16px is wide enough to cover all
+// OSes and keeps it simpler than a per-OS value.
+$scrollbar-width: 16px;
+
+// Breakpoints
+// If updating these breakpoints, don't forget to update uses of DSImage, which
+// might choose the right image src to use depending on the viewport size.
+$break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width; // 610px
+$break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px
+$break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px
+
+$section-title-font-size: 13px;
+
+$card-width: $grid-unit * 2 + $base-gutter;
+$card-width-nte: $grid-unit-small * 2 + $base-gutter;
+
+$card-height: 266px;
+$card-preview-image-height: 122px;
+$card-title-margin: 2px;
+$card-text-line-height: 19px;
+// Larger cards for wider screens:
+$card-width-large: 309px;
+$card-height-large: 370px;
+$card-preview-image-height-large: 155px;
+// Compact cards for Highlights
+$card-height-compact: 160px;
+$card-preview-image-height-compact: 108px;
+
+$topic-margin-top: 12px;
+
+$context-menu-button-size: 27px;
+$context-menu-button-boxshadow: 0 2px $grey-90-10;
+$context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20;
+$context-menu-font-size: 14px;
+$context-menu-border-radius: 5px;
+$context-menu-outer-padding: 5px;
+$context-menu-item-padding: 3px 12px;
+
+$error-fallback-font-size: 12px;
+$error-fallback-line-height: 1.5;
+
+$image-path: 'chrome://activity-stream/content/data/content/assets/';
+
+$snippets-container-height: 120px;
+
+$textbox-shadow-size: 4px;
+
+$customize-menu-slide-bezier: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+$customize-menu-expand-bezier: cubic-bezier(0.82, 0.085, 0.395, 0.895);
+$customize-menu-border-tint: 1px solid $newtab-card-tint;
+
+@mixin fade-in {
+  box-shadow: inset $inner-box-shadow, $shadow-primary;
+  transition: box-shadow 150ms;
+}
+
+@mixin fade-in-card {
+  box-shadow: $shadow-primary;
+  transition: box-shadow 150ms;
+}
+
+@mixin ds-focus-nte {
+  border: 0;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
+}
+
+@mixin context-menu-button-newtab-experience {
+  .context-menu-button {
+    background-image: url('chrome://global/skin/icons/more.svg');
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    fill: var(--newtab-icon-primary-color);
+    -moz-context-properties: fill;
+    height: 20px;
+    width: 20px;
+    inset-inline-end: -9px;
+    opacity: 0;
+    position: absolute;
+    top: -20px;
+    transition: opacity 200ms;
+
+    &:is(:active, :focus) {
+      outline: 0;
+      opacity: 1;
+      background-color: var(--newtab-topsites-context-menu-hover);
+      fill: var(--newtab-primary-action-background);
+    }
+  }
+}
+
+@mixin context-menu-button {
+  .context-menu-button {
+    background-clip: padding-box;
+    background-color: var(--newtab-contextmenu-button-color);
+    background-image: url('chrome://global/skin/icons/more.svg');
+    background-position: 55%;
+    border: $border-primary;
+    border-radius: 100%;
+    box-shadow: $context-menu-button-boxshadow;
+    cursor: pointer;
+    fill: var(--newtab-icon-primary-color);
+    height: $context-menu-button-size;
+    inset-inline-end: -($context-menu-button-size / 2);
+    opacity: 0;
+    position: absolute;
+    top: -($context-menu-button-size / 2);
+    transform: scale(0.25);
+    transition-duration: 150ms;
+    transition-property: transform, opacity;
+    width: $context-menu-button-size;
+
+    &:is(:active, :focus) {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+@mixin context-menu-button-hover {
+  .context-menu-button {
+    opacity: 1;
+    transform: scale(1);
+    transition-delay: 333ms;
+  }
+}
+
+@mixin nt-experience-context-menu-button-hover {
+  .context-menu-button {
+    opacity: 1;
+  }
+}
+
+@mixin context-menu-open-middle {
+  .context-menu {
+    margin-inline-end: auto;
+    margin-inline-start: auto;
+    inset-inline-end: auto;
+    inset-inline-start: -$base-gutter;
+  }
+}
+
+@mixin context-menu-open-left {
+  .context-menu {
+    margin-inline-end: 5px;
+    margin-inline-start: auto;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+  }
+}
+
+@mixin flip-icon {
+  &:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}
diff --git a/browser/components/newtab/content-src/styles/activity-stream-linux.scss b/browser/components/newtab/content-src/styles/activity-stream-linux.scss
new file mode 100644
index 0000000000..aaff2d2efe
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/activity-stream-linux.scss
@@ -0,0 +1,13 @@
+// sass-lint:disable no-css-comments
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* This is the linux variant */
+// sass-lint:enable no-css-comments
+
+$os-infopanel-arrow-height: 10px;
+$os-infopanel-arrow-offset-end: 6px;
+$os-infopanel-arrow-width: 20px;
+
+@import './activity-stream';
diff --git a/browser/components/newtab/content-src/styles/activity-stream-mac.scss b/browser/components/newtab/content-src/styles/activity-stream-mac.scss
new file mode 100644
index 0000000000..1c19e514fb
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/activity-stream-mac.scss
@@ -0,0 +1,17 @@
+// sass-lint:disable no-css-comments
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* This is the mac variant */
+// sass-lint:enable no-css-comments
+
+$os-infopanel-arrow-height: 10px;
+$os-infopanel-arrow-offset-end: 7px;
+$os-infopanel-arrow-width: 18px;
+
+[lwt-newtab-brighttext] {
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@import './activity-stream';
diff --git a/browser/components/newtab/content-src/styles/activity-stream-windows.scss b/browser/components/newtab/content-src/styles/activity-stream-windows.scss
new file mode 100644
index 0000000000..10b8f61ef4
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/activity-stream-windows.scss
@@ -0,0 +1,13 @@
+// sass-lint:disable no-css-comments
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* This is the windows variant */
+// sass-lint:enable no-css-comments
+
+$os-infopanel-arrow-height: 10px;
+$os-infopanel-arrow-offset-end: 6px;
+$os-infopanel-arrow-width: 20px;
+
+@import './activity-stream';