1 files changed, 67 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss b/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
new file mode 100644
index 0000000000..015cb57a8b
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
@@ -0,0 +1,67 @@
+$ds-width: 936px;
+
+.discovery-stream.ds-layout {
+  $columns: 12;
+  --gridColumnGap: 48px;
+  --gridRowGap: 24px;
+
+  grid-template-columns: repeat($columns, 1fr);
+  grid-column-gap: var(--gridColumnGap);
+  grid-row-gap: var(--gridRowGap);
+  margin: 0 auto;
+
+  @while $columns > 0 {
+    .ds-column-#{$columns} {
+      grid-column-start: auto;
+      grid-column-end: span $columns;
+    }
+
+    $columns: $columns - 1;
+  }
+
+  .ds-column-grid {
+    display: grid;
+    grid-row-gap: var(--gridRowGap);
+
+    // We want to completely hide components with no content,
+    // otherwise, it creates grid-row-gap gaps around nothing.
+    > div:empty {
+      display: none;
+    }
+  }
+}
+
+.ds-header {
+  margin: 8px 0;
+
+  .ds-context {
+    font-weight: 400;
+  }
+}
+
+.ds-header,
+.ds-layout .section-title span {
+  color: var(--newtab-text-primary-color);
+  font-size: $section-title-font-size;
+  font-weight: 600;
+  line-height: 20px;
+
+  .icon {
+    fill: var(--newtab-text-secondary-color);
+  }
+}
+
+.collapsible-section.ds-layout {
+  margin: auto;
+
+  .section-top-bar {
+    .learn-more-link a {
+      color: var(--newtab-primary-action-background);
+      font-weight: 500;
+
+      &:is(:focus, :hover) {
+        text-decoration: none;
+      }
+    }
+  }
+}