1 files changed, 187 insertions, 0 deletions
diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css
new file mode 100644
index 0000000000..48cf5a9490
--- /dev/null
+++ b/browser/components/firefoxview/firefoxview.css
@@ -0,0 +1,187 @@
+/* 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/. */
+
+ @import url("chrome://global/skin/in-content/common.css");
+
+:root {
+  /* override --in-content-page-background from common-shared.css */
+  background-color: transparent;
+  --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
+  --fxview-background-color-secondary: var(--newtab-background-color-secondary, #FFFFFF);
+  --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
+  --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
+  --fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color));
+  --fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent);
+  --fxview-text-color-hover: var(--newtab-text-primary-color);
+  --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
+  --fxview-border: var(--fc-border-light, #CFCFD8);
+
+  /* ensure utility button hover states match those of the rest of the page */
+  --in-content-button-background-hover: var(--fxview-element-background-hover);
+  --in-content-button-background-active: var(--fxview-element-background-active);
+  --in-content-button-text-color-hover: var(--fxview-text-color-hover);
+
+  --fxview-sidebar-width: 288px;
+  --fxview-margin-top: 72px;
+  --fxview-card-padding-inline: 4px;
+
+  /* copy over newtab background color from activity-stream-[os].css files */
+  --newtab-background-color: #F9F9FB;
+
+  --fxview-card-header-font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
+    --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
+    --fxview-border: #8F8F9D;
+
+    /* copy over newtab colors from activity-stream-[os].css files */
+    --newtab-background-color: #2B2A33;
+    --newtab-background-color-secondary: #42414d;
+    --newtab-primary-action-background: #00ddff;
+  }
+}
+
+@media (prefers-contrast) {
+  :root {
+    --fxview-element-background-hover: ButtonText;
+    --fxview-element-background-active: ButtonText;
+    --fxview-text-color-hover: ButtonFace;
+    --fxview-border: var(--fc-border-hcm, -moz-dialogtext);
+    --newtab-primary-action-background: LinkText;
+    --newtab-background-color: Canvas;
+    --newtab-background-color-secondary: Canvas;
+  }
+}
+
+@media (max-width: 52rem) {
+  :root {
+    --fxview-sidebar-width: 82px;
+  }
+}
+
+body {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: var(--fxview-sidebar-width) 1fr;
+  background-color: var(--fxview-background-color);
+  color: var(--fxview-text-primary-color);
+}
+
+.main-container {
+  width: 90%;
+  margin: 0 auto;
+  min-width: 43rem;
+  max-width: 71rem;
+}
+
+@media (min-width: 120rem) {
+  .main-container {
+    margin-inline-start: 148px;
+  }
+}
+
+.page-header {
+  margin: 0;
+}
+
+fxview-category-button:focus-visible {
+  outline-offset: var(--in-content-focus-outline-inset);
+}
+
+fxview-category-button[name="recentbrowsing"]::part(icon) {
+  background-image: url("chrome://browser/content/firefoxview/category-recentbrowsing.svg");
+}
+fxview-category-button[name="opentabs"]::part(icon) {
+  background-image: url("chrome://browser/content/firefoxview/category-opentabs.svg");
+}
+fxview-category-button[name="recentlyclosed"]::part(icon) {
+  background-image: url("chrome://browser/content/firefoxview/category-recentlyclosed.svg");
+}
+fxview-category-button[name="syncedtabs"]::part(icon) {
+  background-image: url("chrome://browser/content/firefoxview/category-syncedtabs.svg");
+}
+fxview-category-button[name="history"]::part(icon) {
+  background-image: url("chrome://browser/content/firefoxview/category-history.svg");
+}
+
+fxview-tab-list.with-dismiss-button::part(secondary-button) {
+  background-image: url("chrome://global/skin/icons/close.svg");
+}
+
+fxview-tab-list.with-context-menu::part(secondary-button) {
+  background-image: url("chrome://global/skin/icons/more.svg");
+}
+
+.sticky-container {
+  position: sticky;
+  top: 0;
+  padding-block: var(--fxview-margin-top) 33px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+}
+
+.sticky-container.bottom-fade {
+  /*
+   * padding-inline is doubled to allow for the negative margin below to offset the
+   * container so that the box-shadows on the cards are hidden as they pass underneath.
+   */
+  padding-inline: calc(var(--fxview-card-padding-inline) * 2);
+  margin: 0 calc(var(--fxview-card-padding-inline) * -1);
+
+  background:
+  linear-gradient(
+    to bottom,
+    var(--fxview-background-color) 0%,
+    var(--fxview-background-color) 95%,
+    transparent 100%
+  );
+  /* When you use HCM or set custom colors, you can't use a gradient. */
+  @media (forced-colors) {
+    background: var(--fxview-background-color);
+  }
+}
+
+.cards-container {
+  padding-inline: var(--fxview-card-padding-inline);
+}
+
+view-opentabs-contextmenu {
+  display: contents;
+}
+
+/* This should be supported within panel-{item,list} rather than modifying it */
+panel-item::part(button) {
+  padding-inline-start: 12px;
+  cursor: pointer;
+}
+
+panel-item::part(button):hover {
+  background-color: var(--fxview-element-background-hover);
+  color: var(--fxview-text-color-hover);
+}
+
+panel-item::part(button):hover:active {
+  background-color: var(--fxview-element-background-active);
+}
+
+panel-list {
+  overflow-y: visible;
+}
+
+fxview-category-navigation {
+  overflow-y: auto;
+}
+
+fxview-category-navigation h1 {
+  margin-block: 0;
+}
+
+fxview-empty-state:not([isSelectedTab]) button[slot="primary-action"] {
+  margin-inline-start: 0;
+}