@datalayer/jupyter-react 2.0.3 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/lib/components/kernel/KernelActionMenu.js +6 -6
  2. package/lib/components/kernel/KernelActionMenu.js.map +1 -1
  3. package/lib/components/lumino/Lumino.js +11 -0
  4. package/lib/components/lumino/Lumino.js.map +1 -1
  5. package/lib/components/lumino/LuminoBox.js +9 -0
  6. package/lib/components/lumino/LuminoBox.js.map +1 -1
  7. package/lib/components/notebook/Notebook.css +6 -9
  8. package/lib/components/notebook/Notebook.js +1 -1
  9. package/lib/components/notebook/NotebookBase.js +59 -6
  10. package/lib/components/notebook/NotebookBase.js.map +1 -1
  11. package/lib/components/notebook/cell/sidebar/CellSidebarExtension.js +11 -1
  12. package/lib/components/notebook/cell/sidebar/CellSidebarExtension.js.map +1 -1
  13. package/lib/components/notebook/toolbar/NotebookToolbar.js +21 -48
  14. package/lib/components/notebook/toolbar/NotebookToolbar.js.map +1 -1
  15. package/lib/components/output/Output.js +1 -7
  16. package/lib/components/output/Output.js.map +1 -1
  17. package/lib/components/terminal/Terminal.d.ts +8 -1
  18. package/lib/components/terminal/Terminal.js +5 -2
  19. package/lib/components/terminal/Terminal.js.map +1 -1
  20. package/lib/jupyter/kernel/Kernel.js +14 -2
  21. package/lib/jupyter/kernel/Kernel.js.map +1 -1
  22. package/lib/lazy/LazyTerminal.d.ts +1 -1
  23. package/lib/state/JupyterReactState.d.ts +7 -0
  24. package/lib/state/JupyterReactState.js +12 -1
  25. package/lib/state/JupyterReactState.js.map +1 -1
  26. package/lib/theme/JupyterLabColormode.d.ts +1 -1
  27. package/lib/theme/JupyterLabCss.js +48 -6
  28. package/lib/theme/JupyterLabCss.js.map +1 -1
  29. package/lib/theme/JupyterReactTheme.d.ts +6 -0
  30. package/lib/theme/JupyterReactTheme.js +97 -50
  31. package/lib/theme/JupyterReactTheme.js.map +1 -1
  32. package/lib/tools/core/executor.d.ts +9 -1
  33. package/lib/tools/core/executor.js.map +1 -1
  34. package/package.json +1 -1
  35. package/style/base.css +133 -0
package/style/base.css CHANGED
@@ -3,3 +3,136 @@
3
3
  *
4
4
  * MIT License
5
5
  */
6
+
7
+ /*
8
+ * Color-mode-aware scrollbar styles for JupyterLab containers.
9
+ *
10
+ * Scoped to elements inside [data-color-mode] (Primer's BaseStyles wrapper)
11
+ * that have JupyterLab classes, so they only apply inside JupyterReactTheme
12
+ * and don't leak to the rest of the page.
13
+ *
14
+ * Uses [data-color-mode="dark"] to switch to the dark palette.
15
+ * In light mode, scrollbars are transparent/subtle (matching browser default).
16
+ * In dark mode, scrollbars use translucent light-grey to blend with dark backgrounds.
17
+ *
18
+ * These replace the unscoped ::-webkit-scrollbar rules that were previously
19
+ * in Notebook.css and didn't adapt to dark mode.
20
+ */
21
+
22
+ /* ── Scrollbar sizing (both modes) ──────────────────────────────────────── */
23
+
24
+ [data-color-mode] .jp-Notebook ::-webkit-scrollbar,
25
+ [data-color-mode] .jp-WindowedPanel-outer::-webkit-scrollbar {
26
+ width: 8px;
27
+ height: 8px;
28
+ }
29
+
30
+ /* ── Light mode ─────────────────────────────────────────────────────────── */
31
+
32
+ [data-color-mode='light'] .jp-Notebook ::-webkit-scrollbar-track,
33
+ [data-color-mode='light'] .jp-WindowedPanel-outer::-webkit-scrollbar-track {
34
+ background: transparent;
35
+ }
36
+
37
+ [data-color-mode='light'] .jp-Notebook ::-webkit-scrollbar-thumb,
38
+ [data-color-mode='light'] .jp-WindowedPanel-outer::-webkit-scrollbar-thumb {
39
+ background-color: rgba(128, 128, 128, 0.35);
40
+ border-radius: 4px;
41
+ border: 2px solid transparent;
42
+ background-clip: content-box;
43
+ }
44
+
45
+ [data-color-mode='light'] .jp-Notebook ::-webkit-scrollbar-thumb:hover,
46
+ [data-color-mode='light']
47
+ .jp-WindowedPanel-outer::-webkit-scrollbar-thumb:hover {
48
+ background-color: rgba(128, 128, 128, 0.55);
49
+ }
50
+
51
+ [data-color-mode='light'] .jp-Notebook ::-webkit-scrollbar-corner,
52
+ [data-color-mode='light'] .jp-WindowedPanel-outer::-webkit-scrollbar-corner {
53
+ background: transparent;
54
+ }
55
+
56
+ /* ── Dark mode ──────────────────────────────────────────────────────────── */
57
+
58
+ [data-color-mode='dark'] .jp-Notebook ::-webkit-scrollbar-track,
59
+ [data-color-mode='dark'] .jp-WindowedPanel-outer::-webkit-scrollbar-track {
60
+ background: transparent;
61
+ }
62
+
63
+ [data-color-mode='dark'] .jp-Notebook ::-webkit-scrollbar-thumb,
64
+ [data-color-mode='dark'] .jp-WindowedPanel-outer::-webkit-scrollbar-thumb {
65
+ background-color: rgba(160, 160, 160, 0.3);
66
+ border-radius: 4px;
67
+ border: 2px solid transparent;
68
+ background-clip: content-box;
69
+ }
70
+
71
+ [data-color-mode='dark'] .jp-Notebook ::-webkit-scrollbar-thumb:hover,
72
+ [data-color-mode='dark']
73
+ .jp-WindowedPanel-outer::-webkit-scrollbar-thumb:hover {
74
+ background-color: rgba(160, 160, 160, 0.5);
75
+ }
76
+
77
+ [data-color-mode='dark'] .jp-Notebook ::-webkit-scrollbar-corner,
78
+ [data-color-mode='dark'] .jp-WindowedPanel-outer::-webkit-scrollbar-corner {
79
+ background: transparent;
80
+ }
81
+
82
+ /* ── Firefox (scrollbar-color / scrollbar-width) ────────────────────────── */
83
+
84
+ [data-color-mode='light'] .jp-WindowedPanel-outer {
85
+ scrollbar-width: thin;
86
+ scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
87
+ }
88
+
89
+ [data-color-mode='dark'] .jp-WindowedPanel-outer {
90
+ scrollbar-width: thin;
91
+ scrollbar-color: rgba(160, 160, 160, 0.3) transparent;
92
+ }
93
+
94
+ /* ── Lumino custom ScrollBar widget ─────────────────────────────────────
95
+ * Override the hardcoded light-grey colors from @lumino/widgets/style/scrollbar.css
96
+ * and @jupyterlab/application/style/scrollbar.css with theme-aware values.
97
+ */
98
+
99
+ [data-color-mode] .lm-ScrollBar-track {
100
+ background: transparent;
101
+ }
102
+
103
+ [data-color-mode] .lm-ScrollBar-thumb {
104
+ background: rgba(128, 128, 128, 0.35);
105
+ border-radius: 4px;
106
+ }
107
+
108
+ [data-color-mode] .lm-ScrollBar-thumb:hover {
109
+ background: rgba(128, 128, 128, 0.55);
110
+ }
111
+
112
+ [data-color-mode] .lm-ScrollBar-button {
113
+ background-color: transparent;
114
+ }
115
+
116
+ [data-color-mode='dark'] .lm-ScrollBar-track {
117
+ background: transparent;
118
+ }
119
+
120
+ [data-color-mode='dark'] .lm-ScrollBar-thumb {
121
+ background: rgba(160, 160, 160, 0.3);
122
+ }
123
+
124
+ [data-color-mode='dark'] .lm-ScrollBar-thumb:hover {
125
+ background: rgba(160, 160, 160, 0.5);
126
+ }
127
+
128
+ [data-color-mode='dark'] .lm-ScrollBar-button {
129
+ background-color: transparent;
130
+ }
131
+
132
+ [data-color-mode='dark'] .lm-ScrollBar[data-orientation='horizontal'] {
133
+ border-top-color: rgba(128, 128, 128, 0.2);
134
+ }
135
+
136
+ [data-color-mode='dark'] .lm-ScrollBar[data-orientation='vertical'] {
137
+ border-left-color: rgba(128, 128, 128, 0.2);
138
+ }