1 files changed, 217 insertions, 0 deletions
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..321b1ff7b8
--- /dev/null
+++ b/browser/components/newtab/content-src/styles/_variables.scss
@@ -0,0 +1,217 @@
+@use 'sass:math';
+
+$primary-blue: rgb(0, 97, 224);
+$primary-green: rgb(0, 128, 120);
+$primary-blue-dark: rgb(0, 221, 255);
+$primary-text-color-dark: rgb(43, 42, 51);
+
+// -------------------------------------------------------------------------- //
+// Photon colors from http://design.firefox.com/photon/visuals/color.html
+
+$blue-40: #45A1FF;
+$blue-50: #0A84FF;
+$grey-30: #D7D7DB;
+$grey-60: #4A4A4F;
+$grey-90: #0C0C0D;
+$red-60: #D70022;
+$yellow-50: #FFE900;
+
+$grey-90-10: rgba($grey-90, 0.1);
+$grey-90-20: rgba($grey-90, 0.2);
+
+$blue-40-40: rgba($blue-40, 0.4);
+$blue-50-30: rgba($blue-50, 0.3);
+
+$black: #000;
+$black-10: rgba($black, 0.1);
+$black-15: rgba($black, 0.15);
+$black-20: rgba($black, 0.2);
+$black-30: rgba($black, 0.3);
+$black-40: rgba($black, 0.4);
+
+// -------------------------------------------------------------------------- //
+// Other colors
+
+$white: #FFF;
+$status-green: #058B00;
+$status-dark-green: #7C6;
+$bookmark-icon-fill: #0A84FF;
+$download-icon-fill: #12BC00;
+$pocket-icon-fill: #EF4056;
+$email-input-invalid: rgba($red-60, 0.3);
+
+$newtab-wordmark-default-color: #20123A;
+$newtab-wordmark-darktheme-color: rgb(251, 251, 254);
+
+$in-content-page-color: rgb(21, 20, 26);
+$in-content-page-color-dark: rgb(251, 251, 254);
+
+// -------------------------------------------------------------------------- //
+// These colors should match the colors in the default themes
+// (toolkit/mozapps/extensions/...). Note that they could get replaced by other
+// themes. The color set in --tabpanel-background-color (tabs.inc.css) should
+// match these colors here to avoid flashing.
+
+$in-content-page-background: #F9F9FB;
+$in-content-page-background-dark: #2B2A33;
+
+$newtab-background-secondary: #FFF;
+$newtab-background-secondary-dark: rgb(66, 65, 77);
+
+// 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) - 24px;
+$searchbar-width-medium: ($grid-unit * 4 + $base-gutter * 3) - 120px;
+$searchbar-width-large: ($grid-unit * 6 + $base-gutter * 5) - 136px;
+$searchbar-width-largest: ($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: 17px;
+
+$card-width: $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 rgba(0, 0, 0, 15%);
+
+@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 {
+  border: 0;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
+}
+
+@mixin context-menu-button {
+  .context-menu-button {
+    background-clip: padding-box;
+    background-color: var(--newtab-background-color-secondary);
+    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-text-primary-color);
+    height: $context-menu-button-size;
+    inset-inline-end: math.div(-$context-menu-button-size, 2);
+    opacity: 0;
+    position: absolute;
+    top: math.div(-$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 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);
+  }
+}