Started working on the gradient generation

src/browser/base/content/zen-assets.inc.xhtml

@@ -9,6 +9,7 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-toolbar.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-gradient-generator.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-panel-ui.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-single-components.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-container.css" />

src/browser/base/content/zen-popupset.inc.xhtml

@@ -105,9 +105,6 @@
   <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
     <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
       <hbox class="zen-theme-picker-gradient">
-        <hbox class="zen-theme-picker-gradient-container">
-        </hbox>
-        <html:canvas class="zen-theme-picker-gradient-canvas" width="180" height="180"></html:canvas>
       </hbox>
     </panelview>
   </panelmultiview>

src/browser/base/content/zen-styles/zen-animations.css

@@ -13,6 +13,18 @@
   }
 }
 
+@keyframes zen-theme-picker-dot-animation {
+  from {
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
 @keyframes zen-jello-out-animation {
   0% {
     transform: scale3d(1, 1, 1);

src/browser/base/content/zen-styles/zen-gradient-generator.css

@@ -1,54 +1,32 @@
 
+#PanelUI-zen-gradient-generator {
+  --panel-width: 300px;
+  min-width: var(--panel-width);
+}
+
 .zen-theme-picker-gradient {
-  border-radius: 10px;
   position: relative;
-  overflow: hidden;
+  border-radius: var(--zen-border-radius);
-  background: white;
+  border: 1px solid var(--zen-colors-border);
+  background: var(--zen-themed-toolbar-bg);
 
-  & .zen-theme-picker-gradient-container {
+  min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
-    --zen-gradient-picker-padding: 10px;
+  min-width: calc(var(--panel-width) - var(--panel-padding) * 2);
+
+  & .zen-theme-picker-dot {
     position: absolute;
-    top: var(--zen-gradient-picker-padding);
+    width: 16px;
-    left: var(--zen-gradient-picker-padding);
+    height: 16px;
-    height: calc(100% - 2 * var(--zen-gradient-picker-padding));
+    border-radius: 50%;
-    width: calc(100% - 2 * var(--zen-gradient-picker-padding));
+    background: var(--zen-theme-picker-dot-color);
-    display: flex;
+    box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
+    cursor: pointer;
+    border: 3px solid var(--zen-colors-border);
+    animation: zen-theme-picker-dot-animation .5s;
+    transition: transform .2s;
 
-    background: color-mix(in srgb, var(--zen-colors-primary) 70%, transparent 30%);
+    &[dragging='true'] {
-    border-radius: 10px;
+      transform: scale(1.2);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-
-    backdrop-filter: blur(20px);
-
-    border: 1px solid var(--zen-colors-border);
-
-    & .zen-theme-picker-gradient-color {
-      &[primary='true'] {
-        width: 30px;
-        height: 30px;
-        border-width: 6px;
-      }
-
-      &:not([primary='true']) {
-        width: 20px;
-        height: 20px;
-        border-width: 4px;
-      }
-
-      border-radius: 50%;
-      border-style: solid;
-      border-color: white;
-      background: var(--zen-chosen-color, black);
-
-      transform: translate(-50%, -50%);
-
-      cursor: move;
-      position: absolute;
-
-      transition: transform 0.2s;
-      &[dragging='true'] {
-        transform: scale(1.2) translate(-50%, -50%);
-      }
     }
   }
 }

src/browser/components/preferences/zen-preferences-links.xhtml

@@ -3,9 +3,5 @@
   rel="stylesheet"
   href="chrome://browser/skin/preferences/zen-preferences.css"
 />
-<link
-  rel="stylesheet"
-  href="chrome://browser/content/zen-styles/zen-gradient-generator.css"
-/>
 <script src="chrome://browser/content/zenThemeModifier.js"/>
 <link rel="localization" href="browser/preferences/zen-preferences.ftl"/>