@jotx-labs/editor 2.4.149 → 2.4.150

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 (3) hide show
  1. package/dist/styles/DocumentHeader.css +29 -110
  2. package/package.json +1 -1
  3. package/src/styles/DocumentHeader.css +29 -110
package/dist/styles/DocumentHeader.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /**
2
- * Document Header Styles - Web Compatible
2
+ * Document Header Styles - Knowledge Hub Theme Compatible
3
+ * Uses app's CSS custom properties for seamless theming
3
4
  */
4
5
 
5
6
  .jotx-header {
@@ -13,19 +14,11 @@
13
14
  justify-content: space-between;
14
15
  height: 60px;
15
16
  padding: 0 24px;
16
- background-color: #ffffff;
17
- border-bottom: 1px solid #dee2e6;
17
+ background-color: hsl(var(--background));
18
+ border-bottom: 1px solid hsl(var(--border));
18
19
  backdrop-filter: blur(8px);
19
20
  }
20
21
 
21
- /* Dark mode support */
22
- @media (prefers-color-scheme: dark) {
23
- .jotx-header {
24
- background-color: #1e1e1e;
25
- border-bottom-color: #3e3e3e;
26
- }
27
- }
28
-
29
22
  .jotx-header-left {
30
23
  display: flex;
31
24
  align-items: center;
@@ -48,8 +41,7 @@
48
41
  width: 32px;
49
42
  height: 32px;
50
43
  flex-shrink: 0;
51
- color: #14b8a6;
52
- /* Teal brand color */
44
+ color: hsl(var(--accent));
53
45
  }
54
46
 
55
47
  .jotx-header-logo-svg {
@@ -66,33 +58,20 @@
66
58
  align-items: center;
67
59
  gap: 6px;
68
60
  padding: 6px 12px;
69
- border: 1px solid #e5e7eb;
70
- background: #f9fafb;
61
+ border: 1px solid hsl(var(--border));
62
+ background: hsl(var(--muted));
71
63
  border-radius: 6px;
72
64
  cursor: pointer;
73
65
  transition: all 0.2s;
74
- color: #4b5563;
66
+ color: hsl(var(--muted-foreground));
75
67
  font-size: 13px;
76
68
  font-weight: 500;
77
69
  }
78
70
 
79
71
  .jotx-header-type-button:hover {
80
- background: #f3f4f6;
81
- border-color: #d1d5db;
82
- color: #1f2937;
83
- }
84
-
85
- @media (prefers-color-scheme: dark) {
86
- .jotx-header-type-button {
87
- background: #2d2d2d;
88
- border-color: #4a4a4a;
89
- color: #d4d4d4;
90
- }
91
-
92
- .jotx-header-type-button:hover {
93
- background: #373737;
94
- border-color: #5a5a5a;
95
- }
72
+ background: hsl(var(--accent) / 0.1);
73
+ border-color: hsl(var(--accent) / 0.3);
74
+ color: hsl(var(--foreground));
96
75
  }
97
76
 
98
77
  .jotx-header-type-label {
@@ -110,42 +89,26 @@
110
89
  top: 100%;
111
90
  left: 0;
112
91
  margin-top: 4px;
113
- background: #ffffff;
114
- border: 1px solid #e5e7eb;
92
+ background: hsl(var(--popover));
93
+ border: 1px solid hsl(var(--border));
115
94
  border-radius: 8px;
116
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
95
+ box-shadow: var(--shadow-md);
117
96
  width: 200px;
118
97
  z-index: 200;
119
98
  overflow: hidden;
120
99
  }
121
100
 
122
- @media (prefers-color-scheme: dark) {
123
- .jotx-header-type-menu {
124
- background: #2d2d2d;
125
- border-color: #4a4a4a;
126
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
127
- }
128
- }
129
-
130
101
  .jotx-type-menu-header {
131
102
  padding: 8px 12px;
132
103
  font-size: 11px;
133
104
  font-weight: 600;
134
- color: #6b7280;
135
- border-bottom: 1px solid #e5e7eb;
136
- background: #f9fafb;
105
+ color: hsl(var(--muted-foreground));
106
+ border-bottom: 1px solid hsl(var(--border));
107
+ background: hsl(var(--muted) / 0.5);
137
108
  text-transform: uppercase;
138
109
  letter-spacing: 0.5px;
139
110
  }
140
111
 
141
- @media (prefers-color-scheme: dark) {
142
- .jotx-type-menu-header {
143
- background: #1e1e1e;
144
- border-bottom-color: #3e3e3e;
145
- color: #9ca3af;
146
- }
147
- }
148
-
149
112
  .jotx-type-menu-list {
150
113
  padding: 4px;
151
114
  }
@@ -158,7 +121,7 @@
158
121
  width: 100%;
159
122
  border: none;
160
123
  background: transparent;
161
- color: #1f2937;
124
+ color: hsl(var(--foreground));
162
125
  font-size: 13px;
163
126
  text-align: left;
164
127
  cursor: pointer;
@@ -167,22 +130,12 @@
167
130
  }
168
131
 
169
132
  .jotx-type-menu-item:hover {
170
- background: #f3f4f6;
133
+ background: hsl(var(--muted));
171
134
  }
172
135
 
173
136
  .jotx-type-menu-item.active {
174
- background: #14b8a6;
175
- color: #ffffff;
176
- }
177
-
178
- @media (prefers-color-scheme: dark) {
179
- .jotx-type-menu-item {
180
- color: #e5e7eb;
181
- }
182
-
183
- .jotx-type-menu-item:hover {
184
- background: #373737;
185
- }
137
+ background: hsl(var(--accent));
138
+ color: hsl(var(--accent-foreground));
186
139
  }
187
140
 
188
141
  /* Title */
@@ -195,7 +148,7 @@
195
148
  margin: 0;
196
149
  font-size: 18px;
197
150
  font-weight: 600;
198
- color: #1f2937;
151
+ color: hsl(var(--foreground));
199
152
  cursor: text;
200
153
  white-space: nowrap;
201
154
  overflow: hidden;
@@ -207,17 +160,7 @@
207
160
 
208
161
  .jotx-header-title:hover {
209
162
  opacity: 0.7;
210
- background: #f9fafb;
211
- }
212
-
213
- @media (prefers-color-scheme: dark) {
214
- .jotx-header-title {
215
- color: #f3f4f6;
216
- }
217
-
218
- .jotx-header-title:hover {
219
- background: #2d2d2d;
220
- }
163
+ background: hsl(var(--muted) / 0.5);
221
164
  }
222
165
 
223
166
  .jotx-header-title-input {
@@ -225,22 +168,14 @@
225
168
  padding: 6px 12px;
226
169
  font-size: 18px;
227
170
  font-weight: 600;
228
- color: #1f2937;
229
- background-color: #f9fafb;
230
- border: 2px solid #14b8a6;
171
+ color: hsl(var(--foreground));
172
+ background-color: hsl(var(--muted));
173
+ border: 2px solid hsl(var(--accent));
231
174
  border-radius: 6px;
232
175
  outline: none;
233
176
  font-family: inherit;
234
177
  }
235
178
 
236
- @media (prefers-color-scheme: dark) {
237
- .jotx-header-title-input {
238
- background: #2d2d2d;
239
- color: #f3f4f6;
240
- border-color: #14b8a6;
241
- }
242
- }
243
-
244
179
  /* Buttons */
245
180
  .jotx-header-button,
246
181
  .jotx-header-graph-btn,
@@ -251,7 +186,7 @@
251
186
  width: 36px;
252
187
  height: 36px;
253
188
  padding: 0;
254
- color: #6b7280;
189
+ color: hsl(var(--muted-foreground));
255
190
  background-color: transparent;
256
191
  border: none;
257
192
  border-radius: 6px;
@@ -262,8 +197,8 @@
262
197
  .jotx-header-button:hover:not(:disabled),
263
198
  .jotx-header-graph-btn:hover,
264
199
  .jotx-header-help-btn:hover {
265
- color: #1f2937;
266
- background-color: #f3f4f6;
200
+ color: hsl(var(--foreground));
201
+ background-color: hsl(var(--muted));
267
202
  }
268
203
 
269
204
  .jotx-header-button:active:not(:disabled) {
@@ -275,22 +210,6 @@
275
210
  cursor: not-allowed;
276
211
  }
277
212
 
278
- @media (prefers-color-scheme: dark) {
279
-
280
- .jotx-header-button,
281
- .jotx-header-graph-btn,
282
- .jotx-header-help-btn {
283
- color: #9ca3af;
284
- }
285
-
286
- .jotx-header-button:hover:not(:disabled),
287
- .jotx-header-graph-btn:hover,
288
- .jotx-header-help-btn:hover {
289
- color: #e5e7eb;
290
- background-color: #373737;
291
- }
292
- }
293
-
294
213
  .jotx-header-button svg {
295
214
  width: 16px;
296
215
  height: 16px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.149",
3
+ "version": "2.4.150",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/DocumentHeader.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /**
2
- * Document Header Styles - Web Compatible
2
+ * Document Header Styles - Knowledge Hub Theme Compatible
3
+ * Uses app's CSS custom properties for seamless theming
3
4
  */
4
5
 
5
6
  .jotx-header {
@@ -13,19 +14,11 @@
13
14
  justify-content: space-between;
14
15
  height: 60px;
15
16
  padding: 0 24px;
16
- background-color: #ffffff;
17
- border-bottom: 1px solid #dee2e6;
17
+ background-color: hsl(var(--background));
18
+ border-bottom: 1px solid hsl(var(--border));
18
19
  backdrop-filter: blur(8px);
19
20
  }
20
21
 
21
- /* Dark mode support */
22
- @media (prefers-color-scheme: dark) {
23
- .jotx-header {
24
- background-color: #1e1e1e;
25
- border-bottom-color: #3e3e3e;
26
- }
27
- }
28
-
29
22
  .jotx-header-left {
30
23
  display: flex;
31
24
  align-items: center;
@@ -48,8 +41,7 @@
48
41
  width: 32px;
49
42
  height: 32px;
50
43
  flex-shrink: 0;
51
- color: #14b8a6;
52
- /* Teal brand color */
44
+ color: hsl(var(--accent));
53
45
  }
54
46
 
55
47
  .jotx-header-logo-svg {
@@ -66,33 +58,20 @@
66
58
  align-items: center;
67
59
  gap: 6px;
68
60
  padding: 6px 12px;
69
- border: 1px solid #e5e7eb;
70
- background: #f9fafb;
61
+ border: 1px solid hsl(var(--border));
62
+ background: hsl(var(--muted));
71
63
  border-radius: 6px;
72
64
  cursor: pointer;
73
65
  transition: all 0.2s;
74
- color: #4b5563;
66
+ color: hsl(var(--muted-foreground));
75
67
  font-size: 13px;
76
68
  font-weight: 500;
77
69
  }
78
70
 
79
71
  .jotx-header-type-button:hover {
80
- background: #f3f4f6;
81
- border-color: #d1d5db;
82
- color: #1f2937;
83
- }
84
-
85
- @media (prefers-color-scheme: dark) {
86
- .jotx-header-type-button {
87
- background: #2d2d2d;
88
- border-color: #4a4a4a;
89
- color: #d4d4d4;
90
- }
91
-
92
- .jotx-header-type-button:hover {
93
- background: #373737;
94
- border-color: #5a5a5a;
95
- }
72
+ background: hsl(var(--accent) / 0.1);
73
+ border-color: hsl(var(--accent) / 0.3);
74
+ color: hsl(var(--foreground));
96
75
  }
97
76
 
98
77
  .jotx-header-type-label {
@@ -110,42 +89,26 @@
110
89
  top: 100%;
111
90
  left: 0;
112
91
  margin-top: 4px;
113
- background: #ffffff;
114
- border: 1px solid #e5e7eb;
92
+ background: hsl(var(--popover));
93
+ border: 1px solid hsl(var(--border));
115
94
  border-radius: 8px;
116
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
95
+ box-shadow: var(--shadow-md);
117
96
  width: 200px;
118
97
  z-index: 200;
119
98
  overflow: hidden;
120
99
  }
121
100
 
122
- @media (prefers-color-scheme: dark) {
123
- .jotx-header-type-menu {
124
- background: #2d2d2d;
125
- border-color: #4a4a4a;
126
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
127
- }
128
- }
129
-
130
101
  .jotx-type-menu-header {
131
102
  padding: 8px 12px;
132
103
  font-size: 11px;
133
104
  font-weight: 600;
134
- color: #6b7280;
135
- border-bottom: 1px solid #e5e7eb;
136
- background: #f9fafb;
105
+ color: hsl(var(--muted-foreground));
106
+ border-bottom: 1px solid hsl(var(--border));
107
+ background: hsl(var(--muted) / 0.5);
137
108
  text-transform: uppercase;
138
109
  letter-spacing: 0.5px;
139
110
  }
140
111
 
141
- @media (prefers-color-scheme: dark) {
142
- .jotx-type-menu-header {
143
- background: #1e1e1e;
144
- border-bottom-color: #3e3e3e;
145
- color: #9ca3af;
146
- }
147
- }
148
-
149
112
  .jotx-type-menu-list {
150
113
  padding: 4px;
151
114
  }
@@ -158,7 +121,7 @@
158
121
  width: 100%;
159
122
  border: none;
160
123
  background: transparent;
161
- color: #1f2937;
124
+ color: hsl(var(--foreground));
162
125
  font-size: 13px;
163
126
  text-align: left;
164
127
  cursor: pointer;
@@ -167,22 +130,12 @@
167
130
  }
168
131
 
169
132
  .jotx-type-menu-item:hover {
170
- background: #f3f4f6;
133
+ background: hsl(var(--muted));
171
134
  }
172
135
 
173
136
  .jotx-type-menu-item.active {
174
- background: #14b8a6;
175
- color: #ffffff;
176
- }
177
-
178
- @media (prefers-color-scheme: dark) {
179
- .jotx-type-menu-item {
180
- color: #e5e7eb;
181
- }
182
-
183
- .jotx-type-menu-item:hover {
184
- background: #373737;
185
- }
137
+ background: hsl(var(--accent));
138
+ color: hsl(var(--accent-foreground));
186
139
  }
187
140
 
188
141
  /* Title */
@@ -195,7 +148,7 @@
195
148
  margin: 0;
196
149
  font-size: 18px;
197
150
  font-weight: 600;
198
- color: #1f2937;
151
+ color: hsl(var(--foreground));
199
152
  cursor: text;
200
153
  white-space: nowrap;
201
154
  overflow: hidden;
@@ -207,17 +160,7 @@
207
160
 
208
161
  .jotx-header-title:hover {
209
162
  opacity: 0.7;
210
- background: #f9fafb;
211
- }
212
-
213
- @media (prefers-color-scheme: dark) {
214
- .jotx-header-title {
215
- color: #f3f4f6;
216
- }
217
-
218
- .jotx-header-title:hover {
219
- background: #2d2d2d;
220
- }
163
+ background: hsl(var(--muted) / 0.5);
221
164
  }
222
165
 
223
166
  .jotx-header-title-input {
@@ -225,22 +168,14 @@
225
168
  padding: 6px 12px;
226
169
  font-size: 18px;
227
170
  font-weight: 600;
228
- color: #1f2937;
229
- background-color: #f9fafb;
230
- border: 2px solid #14b8a6;
171
+ color: hsl(var(--foreground));
172
+ background-color: hsl(var(--muted));
173
+ border: 2px solid hsl(var(--accent));
231
174
  border-radius: 6px;
232
175
  outline: none;
233
176
  font-family: inherit;
234
177
  }
235
178
 
236
- @media (prefers-color-scheme: dark) {
237
- .jotx-header-title-input {
238
- background: #2d2d2d;
239
- color: #f3f4f6;
240
- border-color: #14b8a6;
241
- }
242
- }
243
-
244
179
  /* Buttons */
245
180
  .jotx-header-button,
246
181
  .jotx-header-graph-btn,
@@ -251,7 +186,7 @@
251
186
  width: 36px;
252
187
  height: 36px;
253
188
  padding: 0;
254
- color: #6b7280;
189
+ color: hsl(var(--muted-foreground));
255
190
  background-color: transparent;
256
191
  border: none;
257
192
  border-radius: 6px;
@@ -262,8 +197,8 @@
262
197
  .jotx-header-button:hover:not(:disabled),
263
198
  .jotx-header-graph-btn:hover,
264
199
  .jotx-header-help-btn:hover {
265
- color: #1f2937;
266
- background-color: #f3f4f6;
200
+ color: hsl(var(--foreground));
201
+ background-color: hsl(var(--muted));
267
202
  }
268
203
 
269
204
  .jotx-header-button:active:not(:disabled) {
@@ -275,22 +210,6 @@
275
210
  cursor: not-allowed;
276
211
  }
277
212
 
278
- @media (prefers-color-scheme: dark) {
279
-
280
- .jotx-header-button,
281
- .jotx-header-graph-btn,
282
- .jotx-header-help-btn {
283
- color: #9ca3af;
284
- }
285
-
286
- .jotx-header-button:hover:not(:disabled),
287
- .jotx-header-graph-btn:hover,
288
- .jotx-header-help-btn:hover {
289
- color: #e5e7eb;
290
- background-color: #373737;
291
- }
292
- }
293
-
294
213
  .jotx-header-button svg {
295
214
  width: 16px;
296
215
  height: 16px;