feat: ability to drag super list items; secure password generation blocks (#2039)

* feat: ability to drag list item nodes

* fix: issue where editor focus would scroll to bottom

* fix: improve drag icon and prevent from interfering with selection

* fix(super): add 'current' as keyword for bringing up date block options

* fix(super): issue with autocomplete menu width on large screens

* feat(super): ability to generate secure random passwords

packages/blocks-editor/src/Lexical/UI/Button.css

@@ -13,13 +13,13 @@
   padding-left: 15px;
   padding-right: 15px;
   border: 0px;
-  background-color: #eee;
-  border-radius: 5px;
+  background-color: var(--sn-stylekit-contrast-background-color);
   cursor: pointer;
   font-size: 14px;
 }
 .Button__root:hover {
-  background-color: #ddd;
+  background-color: var(--sn-stylekit-info-color);
+  color: var(--sn-stylekit-info-contrast-color);
 }
 .Button__small {
   padding-top: 5px;
@@ -32,5 +32,5 @@
   cursor: not-allowed;
 }
 .Button__disabled:hover {
-  background-color: #eee;
+  background-color: var(--sn-stylekit-secondary-background-color);
 }

packages/blocks-editor/src/Lexical/UI/Input.css

@@ -17,16 +17,17 @@
   display: flex;
   flex: 1;
   color: #666;
+  margin-right: 20px;
 }
 .Input__input {
   display: flex;
   flex: 2;
-  border: 1px solid #999;
+  border: 1px solid var(--sn-stylekit-contrast-border-color);
+  background-color: var(--sn-stylekit-contrast-background-color);
   padding-top: 7px;
   padding-bottom: 7px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 16px;
-  border-radius: 5px;
   min-width: 0;
 }

packages/blocks-editor/src/Lexical/UI/Modal.css

@@ -17,7 +17,7 @@
   bottom: 0px;
   left: 0px;
   right: 0px;
-  background-color: rgba(40, 40, 40, 0.6);
+  background-color: rgba(0, 0, 0, 0.7);
   flex-grow: 0px;
   flex-shrink: 1px;
   z-index: 100;
@@ -28,22 +28,23 @@
   min-width: 300px;
   display: flex;
   flex-grow: 0px;
-  background-color: #fff;
+  background-color: var(--sn-stylekit-background-color);
   flex-direction: column;
   position: relative;
-  box-shadow: 0 0 20px 0 #444;
-  border-radius: 10px;
+  box-shadow: 0 0px 0 var(--sn-stylekit-shadow-color);
+  border-radius: 0px;
 }
 .Modal__title {
-  color: #444;
+  color:var(--sn-stylekit-foreground-color);
   margin: 0px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ccc;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--sn-stylekit-border-color);
 }
 .Modal__closeButton {
   border: 0px;
   position: absolute;
   right: 20px;
+  top: 15px;
   border-radius: 20px;
   justify-content: center;
   align-items: center;
@@ -52,10 +53,11 @@
   height: 30px;
   text-align: center;
   cursor: pointer;
-  background-color: #eee;
+  background-color: var(--sn-stylekit-contrast-background-color);
 }
 .Modal__closeButton:hover {
-  background-color: #ddd;
+  background-color: var(--sn-stylekit-info-color);
+  color: var(--sn-stylekit-info-contrast-color);
 }
 .Modal__content {
   padding-top: 20px;

packages/blocks-editor/src/Lexical/UI/Modal.tsx

@@ -73,7 +73,7 @@ function PortalImpl({
           aria-label="Close modal"
           type="button"
           onClick={onClose}>
-          X
+          ✕
         </button>
         <div className="Modal__content">{children}</div>
       </div>