@jotx-labs/editor 2.4.161 → 2.4.163

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 (5) hide show
  1. package/dist/styles/JotxLinkNodeView.css +10 -9
  2. package/dist/styles/NodePickerDialog.css +23 -21
  3. package/package.json +1 -1
  4. package/src/styles/JotxLinkNodeView.css +10 -9
  5. package/src/styles/NodePickerDialog.css +23 -21
package/dist/styles/JotxLinkNodeView.css CHANGED
@@ -3,10 +3,11 @@
3
3
  }
4
4
 
5
5
  .jotxlink-box {
6
- border: 1px solid var(--vscode-panel-border);
6
+ border: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
7
7
  border-radius: 6px;
8
8
  overflow: hidden;
9
- background: var(--vscode-editor-background);
9
+ background: var(--vscode-editor-background, hsl(var(--background, 220 15% 10%)));
10
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
10
11
  }
11
12
 
12
13
  .jotxlink-header {
@@ -20,13 +21,13 @@
20
21
  }
21
22
 
22
23
  .jotxlink-header:hover {
23
- background: var(--vscode-list-hoverBackground);
24
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
24
25
  }
25
26
 
26
27
  .toggle-btn {
27
28
  background: none;
28
29
  border: none;
29
- color: var(--vscode-foreground);
30
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
30
31
  cursor: pointer;
31
32
  padding: 0;
32
33
  display: flex;
@@ -41,19 +42,19 @@
41
42
  flex-shrink: 0;
42
43
  }
43
44
 
44
- .node-label {
45
+ .jotxlink-box .node-label {
45
46
  flex: 1;
46
47
  font-size: 14px;
47
48
  font-weight: 500;
48
- color: var(--vscode-foreground);
49
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
49
50
  overflow: hidden;
50
51
  text-overflow: ellipsis;
51
52
  white-space: nowrap;
52
53
  }
53
54
 
54
- .node-meta {
55
+ .jotxlink-box .node-meta {
55
56
  font-size: 12px;
56
- color: var(--vscode-descriptionForeground);
57
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 220 8% 75%)));
57
58
  flex-shrink: 0;
58
59
  }
59
60
 
@@ -82,7 +83,7 @@
82
83
 
83
84
  .jotxlink-content {
84
85
  padding: 0;
85
- border-top: 1px solid var(--vscode-panel-border);
86
+ border-top: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
86
87
  }
87
88
 
88
89
  /* Old styles - kept for backwards compatibility */
package/dist/styles/NodePickerDialog.css CHANGED
@@ -13,8 +13,10 @@
13
13
 
14
14
  .node-picker-dialog {
15
15
  /* Support both VS Code and web */
16
- background: var(--vscode-editor-background, hsl(var(--background)));
17
- border: 1px solid var(--vscode-panel-border, hsl(var(--border)));
16
+ /* Use inherit to get theme colors from parent, with solid dark fallback */
17
+ background: var(--vscode-editor-background, hsl(var(--background, 220 15% 10%)));
18
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
19
+ border: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
18
20
  border-radius: 8px;
19
21
  width: 600px;
20
22
  max-height: 80vh;
@@ -28,20 +30,20 @@
28
30
  justify-content: space-between;
29
31
  align-items: center;
30
32
  padding: 16px 20px;
31
- border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border)));
33
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
32
34
  }
33
35
 
34
36
  .node-picker-header h2 {
35
37
  margin: 0;
36
38
  font-size: 16px;
37
39
  font-weight: 600;
38
- color: var(--vscode-foreground, hsl(var(--foreground)));
40
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
39
41
  }
40
42
 
41
43
  .close-btn {
42
44
  background: none;
43
45
  border: none;
44
- color: var(--vscode-foreground, hsl(var(--foreground)));
46
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
45
47
  font-size: 24px;
46
48
  cursor: pointer;
47
49
  padding: 0;
@@ -54,33 +56,33 @@
54
56
  }
55
57
 
56
58
  .close-btn:hover {
57
- background: var(--vscode-list-hoverBackground, hsl(var(--muted)));
59
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
58
60
  }
59
61
 
60
62
  .node-picker-search {
61
63
  padding: 12px 20px;
62
- border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border)));
64
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
63
65
  }
64
66
 
65
67
  .node-picker-search input {
66
68
  width: 100%;
67
69
  padding: 8px 12px;
68
- background: var(--vscode-input-background, hsl(var(--input)));
69
- border: 1px solid var(--vscode-input-border, hsl(var(--border)));
70
+ background: var(--vscode-input-background, hsl(var(--input, 220 12% 22%)));
71
+ border: 1px solid var(--vscode-input-border, hsl(var(--border, 220 12% 22%)));
70
72
  border-radius: 4px;
71
- color: var(--vscode-input-foreground, hsl(var(--foreground)));
73
+ color: var(--vscode-input-foreground, hsl(var(--foreground, 0 0% 95%)));
72
74
  font-size: 14px;
73
75
  }
74
76
 
75
77
  .node-picker-search input:focus {
76
78
  outline: none;
77
- border-color: var(--vscode-focusBorder, hsl(var(--primary)));
79
+ border-color: var(--vscode-focusBorder, hsl(var(--primary, 175 60% 50%)));
78
80
  }
79
81
 
80
82
  .node-picker-tabs {
81
83
  display: flex;
82
- border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border)));
83
- background: var(--vscode-editor-background, hsl(var(--background)));
84
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
85
+ background: var(--vscode-editor-background, hsl(var(--background, 220 15% 10%)));
84
86
  }
85
87
 
86
88
  .node-picker-tabs button {
@@ -88,7 +90,7 @@
88
90
  padding: 12px 16px;
89
91
  background: none;
90
92
  border: none;
91
- color: var(--vscode-foreground, hsl(var(--foreground)));
93
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
92
94
  cursor: pointer;
93
95
  font-size: 14px;
94
96
  opacity: 0.7;
@@ -98,12 +100,12 @@
98
100
 
99
101
  .node-picker-tabs button:hover {
100
102
  opacity: 1;
101
- background: var(--vscode-list-hoverBackground, hsl(var(--muted)));
103
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
102
104
  }
103
105
 
104
106
  .node-picker-tabs button.active {
105
107
  opacity: 1;
106
- border-bottom-color: var(--vscode-focusBorder, hsl(var(--primary)));
108
+ border-bottom-color: var(--vscode-focusBorder, hsl(var(--primary, 175 60% 50%)));
107
109
  }
108
110
 
109
111
  .node-picker-content {
@@ -127,7 +129,7 @@
127
129
  }
128
130
 
129
131
  .node-item:hover {
130
- background: var(--vscode-list-hoverBackground, hsl(var(--muted)));
132
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
131
133
  }
132
134
 
133
135
  .node-icon {
@@ -143,7 +145,7 @@
143
145
  .node-label {
144
146
  font-size: 14px;
145
147
  font-weight: 500;
146
- color: var(--vscode-foreground, hsl(var(--foreground)));
148
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
147
149
  overflow: hidden;
148
150
  text-overflow: ellipsis;
149
151
  white-space: nowrap;
@@ -151,7 +153,7 @@
151
153
 
152
154
  .node-meta {
153
155
  font-size: 12px;
154
- color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground)));
156
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 220 8% 75%)));
155
157
  margin-top: 4px;
156
158
  overflow: hidden;
157
159
  text-overflow: ellipsis;
@@ -164,13 +166,13 @@
164
166
  align-items: center;
165
167
  justify-content: center;
166
168
  padding: 40px;
167
- color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground)));
169
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 220 8% 75%)));
168
170
  font-size: 14px;
169
171
  }
170
172
 
171
173
  .node-picker-footer {
172
174
  padding: 12px 20px;
173
- border-top: 1px solid var(--vscode-panel-border, hsl(var(--border)));
175
+ border-top: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
174
176
  display: flex;
175
177
  justify-content: flex-end;
176
178
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.161",
3
+ "version": "2.4.163",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/JotxLinkNodeView.css CHANGED
@@ -3,10 +3,11 @@
3
3
  }
4
4
 
5
5
  .jotxlink-box {
6
- border: 1px solid var(--vscode-panel-border);
6
+ border: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
7
7
  border-radius: 6px;
8
8
  overflow: hidden;
9
- background: var(--vscode-editor-background);
9
+ background: var(--vscode-editor-background, hsl(var(--background, 220 15% 10%)));
10
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
10
11
  }
11
12
 
12
13
  .jotxlink-header {
@@ -20,13 +21,13 @@
20
21
  }
21
22
 
22
23
  .jotxlink-header:hover {
23
- background: var(--vscode-list-hoverBackground);
24
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
24
25
  }
25
26
 
26
27
  .toggle-btn {
27
28
  background: none;
28
29
  border: none;
29
- color: var(--vscode-foreground);
30
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
30
31
  cursor: pointer;
31
32
  padding: 0;
32
33
  display: flex;
@@ -41,19 +42,19 @@
41
42
  flex-shrink: 0;
42
43
  }
43
44
 
44
- .node-label {
45
+ .jotxlink-box .node-label {
45
46
  flex: 1;
46
47
  font-size: 14px;
47
48
  font-weight: 500;
48
- color: var(--vscode-foreground);
49
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
49
50
  overflow: hidden;
50
51
  text-overflow: ellipsis;
51
52
  white-space: nowrap;
52
53
  }
53
54
 
54
- .node-meta {
55
+ .jotxlink-box .node-meta {
55
56
  font-size: 12px;
56
- color: var(--vscode-descriptionForeground);
57
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 220 8% 75%)));
57
58
  flex-shrink: 0;
58
59
  }
59
60
 
@@ -82,7 +83,7 @@
82
83
 
83
84
  .jotxlink-content {
84
85
  padding: 0;
85
- border-top: 1px solid var(--vscode-panel-border);
86
+ border-top: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
86
87
  }
87
88
 
88
89
  /* Old styles - kept for backwards compatibility */
package/src/styles/NodePickerDialog.css CHANGED
@@ -13,8 +13,10 @@
13
13
 
14
14
  .node-picker-dialog {
15
15
  /* Support both VS Code and web */
16
- background: var(--vscode-editor-background, hsl(var(--background)));
17
- border: 1px solid var(--vscode-panel-border, hsl(var(--border)));
16
+ /* Use inherit to get theme colors from parent, with solid dark fallback */
17
+ background: var(--vscode-editor-background, hsl(var(--background, 220 15% 10%)));
18
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
19
+ border: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
18
20
  border-radius: 8px;
19
21
  width: 600px;
20
22
  max-height: 80vh;
@@ -28,20 +30,20 @@
28
30
  justify-content: space-between;
29
31
  align-items: center;
30
32
  padding: 16px 20px;
31
- border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border)));
33
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
32
34
  }
33
35
 
34
36
  .node-picker-header h2 {
35
37
  margin: 0;
36
38
  font-size: 16px;
37
39
  font-weight: 600;
38
- color: var(--vscode-foreground, hsl(var(--foreground)));
40
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
39
41
  }
40
42
 
41
43
  .close-btn {
42
44
  background: none;
43
45
  border: none;
44
- color: var(--vscode-foreground, hsl(var(--foreground)));
46
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
45
47
  font-size: 24px;
46
48
  cursor: pointer;
47
49
  padding: 0;
@@ -54,33 +56,33 @@
54
56
  }
55
57
 
56
58
  .close-btn:hover {
57
- background: var(--vscode-list-hoverBackground, hsl(var(--muted)));
59
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
58
60
  }
59
61
 
60
62
  .node-picker-search {
61
63
  padding: 12px 20px;
62
- border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border)));
64
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
63
65
  }
64
66
 
65
67
  .node-picker-search input {
66
68
  width: 100%;
67
69
  padding: 8px 12px;
68
- background: var(--vscode-input-background, hsl(var(--input)));
69
- border: 1px solid var(--vscode-input-border, hsl(var(--border)));
70
+ background: var(--vscode-input-background, hsl(var(--input, 220 12% 22%)));
71
+ border: 1px solid var(--vscode-input-border, hsl(var(--border, 220 12% 22%)));
70
72
  border-radius: 4px;
71
- color: var(--vscode-input-foreground, hsl(var(--foreground)));
73
+ color: var(--vscode-input-foreground, hsl(var(--foreground, 0 0% 95%)));
72
74
  font-size: 14px;
73
75
  }
74
76
 
75
77
  .node-picker-search input:focus {
76
78
  outline: none;
77
- border-color: var(--vscode-focusBorder, hsl(var(--primary)));
79
+ border-color: var(--vscode-focusBorder, hsl(var(--primary, 175 60% 50%)));
78
80
  }
79
81
 
80
82
  .node-picker-tabs {
81
83
  display: flex;
82
- border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border)));
83
- background: var(--vscode-editor-background, hsl(var(--background)));
84
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
85
+ background: var(--vscode-editor-background, hsl(var(--background, 220 15% 10%)));
84
86
  }
85
87
 
86
88
  .node-picker-tabs button {
@@ -88,7 +90,7 @@
88
90
  padding: 12px 16px;
89
91
  background: none;
90
92
  border: none;
91
- color: var(--vscode-foreground, hsl(var(--foreground)));
93
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
92
94
  cursor: pointer;
93
95
  font-size: 14px;
94
96
  opacity: 0.7;
@@ -98,12 +100,12 @@
98
100
 
99
101
  .node-picker-tabs button:hover {
100
102
  opacity: 1;
101
- background: var(--vscode-list-hoverBackground, hsl(var(--muted)));
103
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
102
104
  }
103
105
 
104
106
  .node-picker-tabs button.active {
105
107
  opacity: 1;
106
- border-bottom-color: var(--vscode-focusBorder, hsl(var(--primary)));
108
+ border-bottom-color: var(--vscode-focusBorder, hsl(var(--primary, 175 60% 50%)));
107
109
  }
108
110
 
109
111
  .node-picker-content {
@@ -127,7 +129,7 @@
127
129
  }
128
130
 
129
131
  .node-item:hover {
130
- background: var(--vscode-list-hoverBackground, hsl(var(--muted)));
132
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 220 12% 18%)));
131
133
  }
132
134
 
133
135
  .node-icon {
@@ -143,7 +145,7 @@
143
145
  .node-label {
144
146
  font-size: 14px;
145
147
  font-weight: 500;
146
- color: var(--vscode-foreground, hsl(var(--foreground)));
148
+ color: var(--vscode-foreground, hsl(var(--foreground, 0 0% 95%)));
147
149
  overflow: hidden;
148
150
  text-overflow: ellipsis;
149
151
  white-space: nowrap;
@@ -151,7 +153,7 @@
151
153
 
152
154
  .node-meta {
153
155
  font-size: 12px;
154
- color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground)));
156
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 220 8% 75%)));
155
157
  margin-top: 4px;
156
158
  overflow: hidden;
157
159
  text-overflow: ellipsis;
@@ -164,13 +166,13 @@
164
166
  align-items: center;
165
167
  justify-content: center;
166
168
  padding: 40px;
167
- color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground)));
169
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 220 8% 75%)));
168
170
  font-size: 14px;
169
171
  }
170
172
 
171
173
  .node-picker-footer {
172
174
  padding: 12px 20px;
173
- border-top: 1px solid var(--vscode-panel-border, hsl(var(--border)));
175
+ border-top: 1px solid var(--vscode-panel-border, hsl(var(--border, 220 12% 22%)));
174
176
  display: flex;
175
177
  justify-content: flex-end;
176
178
  }