@datalayer/jupyter-lexical 1.0.11 → 1.0.13

package/style/lexical/Rich.css

@@ -6,12 +6,12 @@
 
 .other h2 {
   font-size: 18px;
-  color: #444;
+  color: var(--fgColor-muted, #444);
   margin-bottom: 7px;
 }
 
 .other a {
-  color: #777;
+  color: var(--fgColor-muted, #777);
   text-decoration: underline;
   font-size: 14px;
 }
@@ -29,7 +29,7 @@
 
 h1 {
   font-size: 24px;
-  color: #333;
+  color: var(--fgColor-default, #333);
 }
 
 .ltr {
@@ -44,7 +44,7 @@ h1 {
   margin: 20px auto 20px auto;
   border-radius: 2px;
   max-width: 100%;
-  color: #000;
+  color: var(--fgColor-default, #000);
   position: relative;
   line-height: 20px;
   font-weight: 400;
@@ -54,7 +54,7 @@ h1 {
 }
 
 .editor-inner {
-  background: #fff;
+  background: var(--bgColor-default, #fff);
   position: relative;
 }
 
@@ -62,16 +62,16 @@ h1 {
   min-height: 150px;
   resize: none;
   font-size: 15px;
-  caret-color: rgb(5, 5, 5);
+  caret-color: var(--fgColor-default, rgb(5, 5, 5));
   position: relative;
   tab-size: 1;
   outline: 0;
   padding: 15px 10px;
-  caret-color: #444;
+  caret-color: var(--fgColor-default, #444);
 }
 
 .editor-placeholder {
-  color: #999;
+  color: var(--fgColor-muted, #999);
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -104,21 +104,21 @@ h1 {
 }
 
 .editor-text-code {
-  background-color: rgb(240, 242, 245);
+  background-color: var(--bgColor-muted, rgb(240, 242, 245));
   padding: 1px 0.25rem;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 94%;
 }
 
 .editor-link {
-  color: rgb(33, 111, 219);
+  color: var(--fgColor-accent, rgb(33, 111, 219));
   text-decoration: none;
 }
 
 .tree-view-output {
   display: block;
-  background: #222;
-  color: #fff;
+  background: var(--bgColor-emphasis, #222);
+  color: var(--fgColor-onEmphasis, #fff);
   padding: 5px;
   font-size: 12px;
   white-space: pre-wrap;
@@ -132,7 +132,7 @@ h1 {
 }
 
 .editor-code {
-  background-color: rgb(240, 242, 245);
+  background-color: var(--bgColor-muted, rgb(240, 242, 245));
   font-family: Menlo, Consolas, Monaco, monospace;
   display: block;
   padding: 8px 8px 8px 52px;
@@ -150,12 +150,12 @@ h1 {
 .editor-code:before {
   content: attr(data-gutter);
   position: absolute;
-  background-color: #eee;
+  background-color: var(--bgColor-muted, #eee);
   left: 0;
   top: 0;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--borderColor-default, #ccc);
   padding: 8px;
-  color: #777;
+  color: var(--fgColor-muted, #777);
   white-space: pre-wrap;
   text-align: right;
   min-width: 25px;
@@ -168,39 +168,39 @@ h1 {
   font-size: 10px;
   text-transform: uppercase;
   position: absolute;
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--fgColor-muted, rgba(0, 0, 0, 0.5));
 }
 
 .editor-tokenComment {
-  color: slategray;
+  color: var(--codeMirror-syntax-fgColor-comment, slategray);
 }
 
 .editor-tokenPunctuation {
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 
 .editor-tokenProperty {
-  color: #905;
+  color: var(--codeMirror-syntax-fgColor-constant, #905);
 }
 
 .editor-tokenSelector {
-  color: #690;
+  color: var(--codeMirror-syntax-fgColor-string, #690);
 }
 
 .editor-tokenOperator {
-  color: #9a6e3a;
+  color: var(--codeMirror-syntax-fgColor-variable, #9a6e3a);
 }
 
 .editor-tokenAttr {
-  color: #07a;
+  color: var(--codeMirror-syntax-fgColor-keyword, #07a);
 }
 
 .editor-tokenVariable {
-  color: #e90;
+  color: var(--codeMirror-syntax-fgColor-variable, #e90);
 }
 
 .editor-tokenFunction {
-  color: #dd4a68;
+  color: var(--codeMirror-syntax-fgColor-entity, #dd4a68);
 }
 
 .editor-paragraph {
@@ -215,7 +215,7 @@ h1 {
 
 .editor-heading-h1 {
   font-size: 24px;
-  color: rgb(5, 5, 5);
+  color: var(--fgColor-default, rgb(5, 5, 5));
   font-weight: 400;
   margin: 0;
   margin-bottom: 12px;
@@ -224,7 +224,7 @@ h1 {
 
 .editor-heading-h2 {
   font-size: 15px;
-  color: rgb(101, 103, 107);
+  color: var(--fgColor-muted, rgb(101, 103, 107));
   font-weight: 700;
   margin: 0;
   margin-top: 10px;
@@ -236,8 +236,8 @@ h1 {
   margin: 0;
   margin-left: 20px;
   font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
+  color: var(--fgColor-muted, rgb(101, 103, 107));
+  border-left-color: var(--borderColor-default, rgb(206, 208, 212));
   border-left-width: 4px;
   border-left-style: solid;
   padding-left: 16px;
@@ -269,7 +269,7 @@ pre::-webkit-scrollbar {
 }
 
 pre::-webkit-scrollbar-thumb {
-  background: #999;
+  background: var(--fgColor-muted, #999);
 }
 
 .debug-timetravel-panel {
@@ -289,7 +289,7 @@ pre::-webkit-scrollbar-thumb {
   border: 0;
   background: none;
   flex: 1;
-  color: #fff;
+  color: var(--fgColor-onEmphasis, #fff);
   font-size: 12px;
 }
 
@@ -305,7 +305,7 @@ pre::-webkit-scrollbar-thumb {
   right: 15px;
   position: absolute;
   background: none;
-  color: #fff;
+  color: var(--fgColor-onEmphasis, #fff);
 }
 
 .debug-timetravel-button:hover {
@@ -343,7 +343,7 @@ pre::-webkit-scrollbar-thumb {
   display: flex;
   box-sizing: content-box !important;
   margin-bottom: 1px;
-  background: #fff;
+  background: var(--bgColor-default, #fff);
   padding: 4px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
@@ -384,7 +384,7 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
+  background-color: var(--bgColor-accent-muted, rgba(223, 232, 250, 0.3));
 }
 
 .toolbar button.toolbar-item.active i {
@@ -392,12 +392,12 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+  background-color: var(--bgColor-muted, #eee);
 }
 
 .toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--borderColor-muted, #eee);
   margin: 0 4px;
 }
 
@@ -412,7 +412,7 @@ pre::-webkit-scrollbar-thumb {
   -moz-appearance: none;
   width: 70px;
   font-size: 14px;
-  color: #777;
+  color: var(--fgColor-muted, #777);
   text-overflow: ellipsis;
 }
 
@@ -427,7 +427,7 @@ pre::-webkit-scrollbar-thumb {
   width: 200px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--fgColor-muted, #777);
   text-overflow: ellipsis;
   width: 70px;
   overflow: hidden;
@@ -473,7 +473,7 @@ i.chevron-down {
 }
 
 #block-controls button:hover {
-  background-color: #efefef;
+  background-color: var(--bgColor-muted, #efefef);
 }
 
 #block-controls button:focus-visible {
@@ -519,19 +519,21 @@ i.chevron-down {
   z-index: 100;
   display: block;
   position: fixed;
-  box-shadow:
+  box-shadow: var(
+    --shadow-floating-medium,
     0 12px 28px 0 rgba(0, 0, 0, 0.2),
     0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5)
+  );
   border-radius: 8px;
   min-height: 40px;
-  background-color: #fff;
+  background-color: var(--overlay-bgColor, #fff);
 }
 
 .dropdown .item {
   margin: 0 8px 0 8px;
   padding: 8px;
-  color: #050505;
+  color: var(--fgColor-default, #050505);
   cursor: pointer;
   line-height: 16px;
   font-size: 15px;
@@ -540,7 +542,7 @@ i.chevron-down {
   flex-direction: row;
   flex-shrink: 0;
   justify-content: space-between;
-  background-color: #fff;
+  background-color: var(--overlay-bgColor, #fff);
   border-radius: 8px;
   border: 0;
   max-width: 264px;
@@ -561,7 +563,7 @@ i.chevron-down {
 }
 
 .dropdown .item .shortcut {
-  color: #939393;
+  color: var(--fgColor-muted, #939393);
   align-self: flex-end;
 }
 
@@ -581,7 +583,7 @@ i.chevron-down {
 }
 
 .dropdown .item:hover {
-  background-color: #eee;
+  background-color: var(--bgColor-muted, #eee);
 }
 
 .dropdown .item .text {
@@ -605,7 +607,7 @@ i.chevron-down {
 
 .dropdown .divider {
   width: auto;
-  background-color: #eee;
+  background-color: var(--borderColor-muted, #eee);
   margin: 4px 8px;
   height: 1px;
 }

package/style/lexical/TableNode.css

@@ -13,12 +13,12 @@
   table-layout: fixed !important;
   width: max-content !important;
   margin: 20px 0 !important;
-  border: 1px solid var(--vscode-editorGroup-border, rgba(128, 128, 128, 0.35)) !important;
+  border: 1px solid var(--borderColor-default, rgba(128, 128, 128, 0.35)) !important;
 }
 
 /* Table cell styles */
 .PlaygroundEditorTheme__tableCell {
-  border: 1px solid var(--vscode-editorGroup-border, rgba(128, 128, 128, 0.35)) !important;
+  border: 1px solid var(--borderColor-default, rgba(128, 128, 128, 0.35)) !important;
   min-width: 75px !important;
   width: 75px !important;
   vertical-align: top !important;
@@ -26,13 +26,13 @@
   padding: 8px 10px !important;
   position: relative !important;
   outline: none !important;
-  background-color: var(--vscode-editor-background, transparent) !important;
-  color: var(--vscode-editor-foreground, inherit) !important;
+  background-color: var(--bgColor-default, transparent) !important;
+  color: var(--fgColor-default, inherit) !important;
 }
 
 /* Table header cell styles */
 .PlaygroundEditorTheme__tableCellHeader {
-  border: 1px solid var(--vscode-editorGroup-border, rgba(128, 128, 128, 0.35)) !important;
+  border: 1px solid var(--borderColor-default, rgba(128, 128, 128, 0.35)) !important;
   min-width: 75px !important;
   width: 75px !important;
   vertical-align: top !important;
@@ -40,25 +40,22 @@
   padding: 8px 10px !important;
   position: relative !important;
   outline: none !important;
-  background-color: var(
-    --vscode-editorGroupHeader-tabsBackground,
-    rgba(128, 128, 128, 0.1)
-  ) !important;
-  color: var(--vscode-editor-foreground, inherit) !important;
+  background-color: var(--bgColor-muted, rgba(128, 128, 128, 0.1)) !important;
+  color: var(--fgColor-default, inherit) !important;
   font-weight: bold !important;
 }
 
 /* Cell focus styles */
 .PlaygroundEditorTheme__tableCell:focus,
 .PlaygroundEditorTheme__tableCellHeader:focus {
-  outline: 2px solid var(--vscode-focusBorder, rgb(60, 132, 244)) !important;
+  outline: 2px solid var(--borderColor-accent-emphasis, rgb(60, 132, 244)) !important;
   outline-offset: -2px;
 }
 
 /* Cell selection styles */
 .PlaygroundEditorTheme__tableCellSelected {
   background-color: var(
-    --vscode-list-activeSelectionBackground,
+    --bgColor-accent-muted,
     rgba(60, 132, 244, 0.15)
   ) !important;
 }
@@ -94,7 +91,7 @@
 
 .PlaygroundEditorTheme__tableCellResizer:hover:after,
 .PlaygroundEditorTheme__tableCellResizer:active:after {
-  background-color: var(--vscode-focusBorder, #3c84f4);
+  background-color: var(--borderColor-accent-emphasis, #3c84f4);
 }
 
 /* Table action menu - CHEVRON BUTTON */
@@ -110,16 +107,22 @@
   opacity: 1 !important;
 }
 
+/* Ensure ActionMenu anchor wrapper doesn't add extra height */
+.PlaygroundEditorTheme__tableCellActionButtonContainer > * {
+  display: flex !important;
+  align-items: center !important;
+}
+
 .PlaygroundEditorTheme__tableCellActionButton {
   background-color: var(
-    --vscode-button-secondaryBackground,
+    --control-bgColor-rest,
     rgba(128, 128, 128, 0.1)
   ) !important;
-  color: var(--vscode-button-secondaryForeground, inherit) !important;
+  color: var(--fgColor-default, inherit) !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
-  border: 1px solid var(--vscode-editorGroup-border, rgba(128, 128, 128, 0.35)) !important;
+  border: 1px solid var(--borderColor-default, rgba(128, 128, 128, 0.35)) !important;
   position: relative !important;
   border-radius: 4px !important;
   cursor: pointer !important;
@@ -142,7 +145,7 @@
 
 .PlaygroundEditorTheme__tableCellActionButton:hover {
   background-color: var(
-    --vscode-button-secondaryHoverBackground,
+    --control-bgColor-hover,
     rgba(128, 128, 128, 0.2)
   ) !important;
 }
@@ -200,7 +203,7 @@
 
 .PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td {
   overflow: clip;
-  background-color: var(--vscode-editor-background, #ffffff);
+  background-color: var(--bgColor-default, #ffffff);
   position: sticky;
   z-index: 2;
   top: 44px;
@@ -209,7 +212,7 @@
 /* Table hover action buttons - Add Column */
 .PlaygroundEditorTheme__tableAddColumns {
   position: absolute !important;
-  background-color: var(--vscode-button-secondaryBackground, #eee) !important;
+  background-color: var(--control-bgColor-rest, #eee) !important;
   /* Let plugin set dimensions, just constrain them */
   min-width: 15px !important;
   max-width: 20px !important;
@@ -230,13 +233,13 @@
   font-size: 14px !important;
   text-align: center !important;
   line-height: 20px !important;
-  color: var(--vscode-editor-foreground, #666) !important;
+  color: var(--fgColor-default, #666) !important;
   opacity: 0.7 !important;
 }
 
 .PlaygroundEditorTheme__tableAddColumns:hover,
 .PlaygroundEditorTheme__tableAddRows:hover {
-  background-color: var(--vscode-button-hoverBackground, #c9dbf0) !important;
+  background-color: var(--control-bgColor-hover, #c9dbf0) !important;
 }
 
 /* Table hover action buttons - Add Row */
@@ -246,7 +249,7 @@
   min-width: 50px !important;
   min-height: 15px !important;
   max-height: 20px !important;
-  background-color: var(--vscode-button-secondaryBackground, #eee) !important;
+  background-color: var(--control-bgColor-rest, #eee) !important;
   animation: table-controls 0.2s ease !important;
   border: 0 !important;
   cursor: pointer !important;
@@ -263,7 +266,7 @@
   font-size: 14px !important;
   text-align: center !important;
   line-height: 20px !important;
-  color: var(--vscode-editor-foreground, #666) !important;
+  color: var(--fgColor-default, #666) !important;
   opacity: 0.7 !important;
 }
 
@@ -281,7 +284,7 @@
   display: block;
   position: absolute;
   width: 1px;
-  background-color: var(--vscode-focusBorder, rgb(60, 132, 244));
+  background-color: var(--borderColor-accent-emphasis, rgb(60, 132, 244));
   height: 100%;
   top: 0;
 }

package/style/lexical/Theme.css

@@ -23,15 +23,15 @@
   margin-left: 20px;
   margin-bottom: 10px;
   font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
+  color: var(--fgColor-muted, rgb(101, 103, 107));
+  border-left-color: var(--borderColor-default, rgb(206, 208, 212));
   border-left-width: 4px;
   border-left-style: solid;
   padding-left: 16px;
 }
 .PlaygroundEditorTheme__h1 {
   font-size: 24px;
-  color: rgb(5, 5, 5);
+  color: var(--fgColor-default, rgb(5, 5, 5));
   font-weight: 400;
   margin: 0;
   margin-bottom: 12px;
@@ -39,7 +39,7 @@
 }
 .PlaygroundEditorTheme__h2 {
   font-size: 15px;
-  color: rgb(101, 103, 107);
+  color: var(--fgColor-muted, rgb(101, 103, 107));
   font-weight: 700;
   margin: 0;
   margin-top: 10px;
@@ -77,24 +77,25 @@
   vertical-align: super;
 }
 .PlaygroundEditorTheme__textCode {
-  background-color: rgb(240, 242, 245);
+  background-color: var(--bgColor-muted, rgb(240, 242, 245));
   padding: 1px 0.25rem;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 94%;
 }
 .PlaygroundEditorTheme__hashtag {
-  background-color: rgba(88, 144, 255, 0.15);
-  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+  background-color: var(--bgColor-accent-muted, rgba(88, 144, 255, 0.15));
+  border-bottom: 1px solid
+    var(--borderColor-accent-muted, rgba(88, 144, 255, 0.3));
 }
 .PlaygroundEditorTheme__link {
-  color: rgb(33, 111, 219);
+  color: var(--fgColor-accent, rgb(33, 111, 219));
   text-decoration: none;
 }
 .PlaygroundEditorTheme__link:hover {
   text-decoration: underline;
 }
 .PlaygroundEditorTheme__code {
-  background-color: rgb(240, 242, 245);
+  background-color: var(--bgColor-muted, rgb(240, 242, 245));
   font-family: Menlo, Consolas, Monaco, monospace;
   display: block;
   padding: 8px 8px 8px 52px;
@@ -111,12 +112,12 @@
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
   position: absolute;
-  background-color: #eee;
+  background-color: var(--bgColor-muted, #eee);
   left: 0;
   top: 0;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--borderColor-default, #ccc);
   padding: 8px;
-  color: #777;
+  color: var(--fgColor-muted, #777);
   white-space: pre-wrap;
   text-align: right;
   min-width: 25px;
@@ -130,19 +131,19 @@
   width: 100%;
 }
 .PlaygroundEditorTheme__tableCell {
-  border: 1px solid black;
+  border: 1px solid var(--borderColor-default, black);
   padding: 6px 8px;
   min-width: 75px;
   vertical-align: top;
   text-align: start;
 }
 .PlaygroundEditorTheme__tableCellHeader {
-  background-color: #f2f3f5;
+  background-color: var(--bgColor-muted, #f2f3f5);
   text-align: start;
 }
 .PlaygroundEditorTheme__characterLimit {
   display: inline;
-  background-color: #ffbbbb !important;
+  background-color: var(--bgColor-danger-muted, #ffbbbb) !important;
 }
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
@@ -221,23 +222,23 @@
 }
 .PlaygroundEditorTheme__listItemUnchecked:focus:before,
 .PlaygroundEditorTheme__listItemChecked:focus:before {
-  box-shadow: 0 0 0 2px #a6cdfe;
+  box-shadow: 0 0 0 2px var(--focus-outlineColor, #a6cdfe);
   border-radius: 2px;
 }
 .PlaygroundEditorTheme__listItemUnchecked:before {
-  border: 1px solid #999;
+  border: 1px solid var(--borderColor-default, #999);
   border-radius: 2px;
 }
 .PlaygroundEditorTheme__listItemChecked:before {
-  border: 1px solid rgb(61, 135, 245);
+  border: 1px solid var(--bgColor-accent-emphasis, rgb(61, 135, 245));
   border-radius: 2px;
-  background-color: #3d87f5;
+  background-color: var(--bgColor-accent-emphasis, #3d87f5);
   background-repeat: no-repeat;
 }
 .PlaygroundEditorTheme__listItemChecked:after {
   content: '';
   cursor: pointer;
-  border-color: #fff;
+  border-color: var(--fgColor-onEmphasis, #fff);
   border-style: solid;
   position: absolute;
   display: block;
@@ -256,28 +257,28 @@
   display: none;
 }
 .PlaygroundEditorTheme__tokenComment {
-  color: slategray;
+  color: var(--codeMirror-syntax-fgColor-comment, slategray);
 }
 .PlaygroundEditorTheme__tokenPunctuation {
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 .PlaygroundEditorTheme__tokenProperty {
-  color: #905;
+  color: var(--codeMirror-syntax-fgColor-constant, #905);
 }
 .PlaygroundEditorTheme__tokenSelector {
-  color: #690;
+  color: var(--codeMirror-syntax-fgColor-string, #690);
 }
 .PlaygroundEditorTheme__tokenOperator {
-  color: #9a6e3a;
+  color: var(--codeMirror-syntax-fgColor-variable, #9a6e3a);
 }
 .PlaygroundEditorTheme__tokenAttr {
-  color: #07a;
+  color: var(--codeMirror-syntax-fgColor-keyword, #07a);
 }
 .PlaygroundEditorTheme__tokenVariable {
-  color: #e90;
+  color: var(--codeMirror-syntax-fgColor-variable, #e90);
 }
 .PlaygroundEditorTheme__tokenFunction {
-  color: #dd4a68;
+  color: var(--codeMirror-syntax-fgColor-entity, #dd4a68);
 }
 .PlaygroundEditorTheme__mark {
   background: rgba(255, 212, 0, 0.14);
@@ -300,5 +301,5 @@
   user-select: none;
 }
 .PlaygroundEditorTheme__embedBlockFocus {
-  outline: 2px solid rgb(60, 132, 244);
+  outline: 2px solid var(--borderColor-accent-emphasis, rgb(60, 132, 244));
 }

package/style/lexical/index.css

@@ -4,32 +4,13 @@
  * MIT License
  */
 
-@import url('Button.css');
-@import url('CodeActionMenuPlugin.css');
-/* Collapsible.css - now imported directly in src/plugins/CollapsiblePlugin/index.ts */
 @import url('CommentEditorTheme.css');
-@import url('CommentPlugin.css');
 @import url('ContentEditable.css');
-@import url('Dialog.css');
 @import url('DraggableBlockPlugin.css');
 @import url('Editor.css');
 @import url('EquationEditor.css');
-@import url('ExcalidrawModal.css');
-@import url('ExcalidrawNode.css');
-@import url('FloatingTextFormatToolbarPlugin.css');
 @import url('ImageNode.css');
-@import url('Input.css');
-@import url('Jupyter.css');
-@import url('KatexEquationAlterer.css');
-@import url('Modal.css');
-@import url('FontSize.css');
 @import url('Placeholder.css');
-@import url('PrettierButton.css');
 @import url('Rich.css');
 @import url('TableNode.css');
-@import url('TableInsertModal.css');
-/* TableCellResizer.css - now imported directly in src/plugins/TableCellResizer/index.tsx */
-@import url('ColorPicker.css');
-@import url('TableOfContentsPlugin.css');
 @import url('Theme.css');
-@import url('ToolbarPlugin.css');