1 files changed, 87 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss b/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss
new file mode 100644
index 0000000000..689661750b
--- /dev/null
+++ b/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss
@@ -0,0 +1,87 @@
+.wallpaper-list {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-rows: 86px;
+  margin: 16px 0;
+  padding: 0;
+  border: none;
+
+  .wallpaper-input,
+  .sr-only {
+    &.theme-light {
+      display: inline-block;
+
+      @include dark-theme-only {
+        display: none;
+      }
+    }
+
+    &.theme-dark {
+      display: none;
+
+      @include dark-theme-only {
+        display: inline-block;
+      }
+    }
+  }
+
+  .wallpaper-input {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    height: 86px;
+    width: 100%;
+    box-shadow: $shadow-secondary;
+    border-radius: 8px;
+    background-clip: content-box;
+    background-repeat: no-repeat;
+    background-size: cover;
+    cursor: pointer;
+    outline: 2px solid transparent;
+
+    $wallpapers: dark-landscape, dark-color, dark-mountain, dark-panda, dark-sky, dark-beach, light-beach, light-color, light-landscape, light-mountain, light-panda, light-sky;
+
+    @each $wallpaper in $wallpapers {
+      &.#{$wallpaper} {
+        background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/#{$wallpaper}.avif')
+      }
+    }
+
+    &:checked {
+      outline-color: var(--color-accent-primary-active);
+    }
+
+    &:focus-visible {
+      outline-color: var(--newtab-primary-action-background);
+    }
+
+    &:hover {
+      filter: brightness(55%);
+      outline-color: transparent;
+    }
+  }
+
+  // visually hide label, but still read by screen readers
+  .sr-only {
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    pointer-events: none;
+  }
+}
+
+.wallpapers-reset {
+  background: none;
+  border: none;
+  text-decoration: underline;
+  margin-inline: auto;
+  display: block;
+  font-size: var(--font-size-small);
+  color: var(--newtab-text-primary-color);
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+  }
+}