@jotx-labs/editor 2.4.169 → 2.4.170

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/LinkDialog.css +41 -49
  2. package/package.json +1 -1
  3. package/src/styles/LinkDialog.css +41 -49
package/dist/styles/LinkDialog.css CHANGED
@@ -2,71 +2,63 @@
2
2
  position: fixed;
3
3
  inset: 0;
4
4
  z-index: 99999;
5
- /* Must be very high to appear above everything including jotxlink preview */
6
5
  display: flex;
7
6
  align-items: center;
8
7
  justify-content: center;
9
8
  background: rgba(0, 0, 0, 0.35);
10
- /* Keep generic overlay */
11
9
  }
12
10
 
13
11
  .jotx-link-dialog {
14
12
  position: relative;
15
13
  z-index: 100000;
16
- /* Must be higher than backdrop z-index to ensure dialog is on top */
17
14
  width: 420px;
18
15
  max-width: calc(100vw - 24px);
19
- border-radius: 6px;
20
- /* VS Code style */
21
- border: 1px solid var(--vscode-widget-border);
22
- background: var(--vscode-editorWidget-background);
23
- color: var(--vscode-editorWidget-foreground);
24
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
25
- /* More VS Code-like shadow */
26
- padding: 14px;
16
+ border-radius: 8px;
17
+ /* Web fallbacks: light border, white background, dark text */
18
+ border: 1px solid var(--vscode-widget-border, hsl(220 13% 80%));
19
+ background: var(--vscode-editorWidget-background, hsl(0 0% 100%));
20
+ color: var(--vscode-editorWidget-foreground, hsl(222 47% 11%));
21
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
22
+ padding: 16px;
27
23
  }
28
24
 
29
25
  .jotx-link-dialog-title {
30
- font-size: 13px;
31
- /* VS Code often uses 13px */
26
+ font-size: 14px;
32
27
  font-weight: 600;
33
- color: var(--vscode-editorWidget-foreground);
34
- margin-bottom: 10px;
28
+ color: var(--vscode-editorWidget-foreground, hsl(222 47% 11%));
29
+ margin-bottom: 12px;
35
30
  }
36
31
 
37
32
  .jotx-link-dialog-field {
38
33
  display: block;
39
- margin-bottom: 10px;
34
+ margin-bottom: 12px;
40
35
  }
41
36
 
42
37
  .jotx-link-dialog-label {
43
38
  font-size: 12px;
44
- color: var(--vscode-descriptionForeground);
39
+ color: var(--vscode-descriptionForeground, hsl(215 14% 45%));
45
40
  margin-bottom: 6px;
46
41
  }
47
42
 
48
43
  .jotx-link-dialog-input {
49
44
  width: 100%;
50
- padding: 6px 8px;
51
- /* Tighter padding */
52
- border-radius: 2px;
53
- /* VS Code inputs are usually squarer */
54
- border: 1px solid var(--vscode-input-border);
55
- background: var(--vscode-input-background);
56
- color: var(--vscode-input-foreground);
45
+ padding: 8px 10px;
46
+ border-radius: 6px;
47
+ border: 1px solid var(--vscode-input-border, hsl(220 13% 80%));
48
+ background: var(--vscode-input-background, hsl(210 20% 98%));
49
+ color: var(--vscode-input-foreground, hsl(222 47% 11%));
57
50
  outline: none;
58
51
  font-family: inherit;
59
52
  font-size: 13px;
60
53
  }
61
54
 
62
55
  .jotx-link-dialog-input::placeholder {
63
- color: var(--vscode-input-placeholderForeground);
56
+ color: var(--vscode-input-placeholderForeground, hsl(215 14% 65%));
64
57
  }
65
58
 
66
59
  .jotx-link-dialog-input:focus {
67
- border-color: var(--vscode-focusBorder);
68
- outline: 1px solid var(--vscode-focusBorder);
69
- /* Standard outline focus */
60
+ border-color: var(--vscode-focusBorder, hsl(221 83% 53%));
61
+ outline: 2px solid var(--vscode-focusBorder, hsl(221 83% 53%));
70
62
  outline-offset: -1px;
71
63
  }
72
64
 
@@ -74,49 +66,49 @@
74
66
  display: flex;
75
67
  justify-content: flex-end;
76
68
  gap: 8px;
77
- margin-top: 12px;
69
+ margin-top: 16px;
78
70
  }
79
71
 
80
72
  .jotx-link-dialog-btn {
81
- padding: 6px 12px;
82
- border-radius: 2px;
83
- border: 1px solid transparent;
84
- /* Default */
73
+ padding: 8px 14px;
74
+ border-radius: 6px;
75
+ border: 1px solid var(--vscode-button-secondaryBackground, hsl(220 13% 80%));
85
76
  background: var(--vscode-button-secondaryBackground, transparent);
86
- color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
77
+ color: var(--vscode-button-secondaryForeground, hsl(222 47% 11%));
87
78
  cursor: pointer;
88
- font-weight: 400;
79
+ font-weight: 500;
89
80
  font-size: 13px;
81
+ transition: background 0.15s, border-color 0.15s;
90
82
  }
91
83
 
92
84
  .jotx-link-dialog-btn:hover {
93
- background: var(--vscode-button-secondaryHoverBackground, rgba(90, 93, 94, 0.31));
85
+ background: var(--vscode-button-secondaryHoverBackground, hsl(220 13% 95%));
94
86
  }
95
87
 
96
88
  .jotx-link-dialog-btn.primary {
97
- background: var(--vscode-button-background);
98
- color: var(--vscode-button-foreground);
89
+ background: var(--vscode-button-background, hsl(221 83% 53%));
90
+ color: var(--vscode-button-foreground, hsl(0 0% 100%));
99
91
  border-color: transparent;
100
92
  }
101
93
 
102
94
  .jotx-link-dialog-btn.primary:hover {
103
- background: var(--vscode-button-hoverBackground);
95
+ background: var(--vscode-button-hoverBackground, hsl(221 83% 45%));
104
96
  }
105
97
 
106
98
  .jotx-link-dialog-hint {
107
- margin-top: 10px;
99
+ margin-top: 12px;
108
100
  font-size: 11px;
109
- color: var(--vscode-descriptionForeground);
101
+ color: var(--vscode-descriptionForeground, hsl(215 14% 45%));
110
102
  }
111
103
 
112
104
  .jotx-link-dialog-hint kbd {
113
- padding: 2px 4px;
105
+ padding: 2px 6px;
114
106
  font-size: 10px;
115
- font-family: var(--vscode-font-family, inherit);
116
- color: var(--vscode-editor-foreground);
117
- background-color: var(--vscode-keybindingLabel-background, rgba(128, 128, 128, 0.17));
118
- border: 1px solid var(--vscode-keybindingLabel-border, rgba(128, 128, 128, 0.35));
119
- border-bottom-color: var(--vscode-keybindingLabel-bottomBorder, rgba(128, 128, 128, 0.35));
120
- border-radius: 3px;
121
- box-shadow: inset 0 -1px 0 var(--vscode-keybindingLabel-bottomBorder, rgba(128, 128, 128, 0.35));
107
+ font-family: inherit;
108
+ color: var(--vscode-editor-foreground, hsl(222 47% 11%));
109
+ background-color: var(--vscode-keybindingLabel-background, hsl(220 13% 93%));
110
+ border: 1px solid var(--vscode-keybindingLabel-border, hsl(220 13% 80%));
111
+ border-bottom-color: var(--vscode-keybindingLabel-bottomBorder, hsl(220 13% 75%));
112
+ border-radius: 4px;
113
+ box-shadow: inset 0 -1px 0 var(--vscode-keybindingLabel-bottomBorder, hsl(220 13% 75%));
122
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.169",
3
+ "version": "2.4.170",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/LinkDialog.css CHANGED
@@ -2,71 +2,63 @@
2
2
  position: fixed;
3
3
  inset: 0;
4
4
  z-index: 99999;
5
- /* Must be very high to appear above everything including jotxlink preview */
6
5
  display: flex;
7
6
  align-items: center;
8
7
  justify-content: center;
9
8
  background: rgba(0, 0, 0, 0.35);
10
- /* Keep generic overlay */
11
9
  }
12
10
 
13
11
  .jotx-link-dialog {
14
12
  position: relative;
15
13
  z-index: 100000;
16
- /* Must be higher than backdrop z-index to ensure dialog is on top */
17
14
  width: 420px;
18
15
  max-width: calc(100vw - 24px);
19
- border-radius: 6px;
20
- /* VS Code style */
21
- border: 1px solid var(--vscode-widget-border);
22
- background: var(--vscode-editorWidget-background);
23
- color: var(--vscode-editorWidget-foreground);
24
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
25
- /* More VS Code-like shadow */
26
- padding: 14px;
16
+ border-radius: 8px;
17
+ /* Web fallbacks: light border, white background, dark text */
18
+ border: 1px solid var(--vscode-widget-border, hsl(220 13% 80%));
19
+ background: var(--vscode-editorWidget-background, hsl(0 0% 100%));
20
+ color: var(--vscode-editorWidget-foreground, hsl(222 47% 11%));
21
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
22
+ padding: 16px;
27
23
  }
28
24
 
29
25
  .jotx-link-dialog-title {
30
- font-size: 13px;
31
- /* VS Code often uses 13px */
26
+ font-size: 14px;
32
27
  font-weight: 600;
33
- color: var(--vscode-editorWidget-foreground);
34
- margin-bottom: 10px;
28
+ color: var(--vscode-editorWidget-foreground, hsl(222 47% 11%));
29
+ margin-bottom: 12px;
35
30
  }
36
31
 
37
32
  .jotx-link-dialog-field {
38
33
  display: block;
39
- margin-bottom: 10px;
34
+ margin-bottom: 12px;
40
35
  }
41
36
 
42
37
  .jotx-link-dialog-label {
43
38
  font-size: 12px;
44
- color: var(--vscode-descriptionForeground);
39
+ color: var(--vscode-descriptionForeground, hsl(215 14% 45%));
45
40
  margin-bottom: 6px;
46
41
  }
47
42
 
48
43
  .jotx-link-dialog-input {
49
44
  width: 100%;
50
- padding: 6px 8px;
51
- /* Tighter padding */
52
- border-radius: 2px;
53
- /* VS Code inputs are usually squarer */
54
- border: 1px solid var(--vscode-input-border);
55
- background: var(--vscode-input-background);
56
- color: var(--vscode-input-foreground);
45
+ padding: 8px 10px;
46
+ border-radius: 6px;
47
+ border: 1px solid var(--vscode-input-border, hsl(220 13% 80%));
48
+ background: var(--vscode-input-background, hsl(210 20% 98%));
49
+ color: var(--vscode-input-foreground, hsl(222 47% 11%));
57
50
  outline: none;
58
51
  font-family: inherit;
59
52
  font-size: 13px;
60
53
  }
61
54
 
62
55
  .jotx-link-dialog-input::placeholder {
63
- color: var(--vscode-input-placeholderForeground);
56
+ color: var(--vscode-input-placeholderForeground, hsl(215 14% 65%));
64
57
  }
65
58
 
66
59
  .jotx-link-dialog-input:focus {
67
- border-color: var(--vscode-focusBorder);
68
- outline: 1px solid var(--vscode-focusBorder);
69
- /* Standard outline focus */
60
+ border-color: var(--vscode-focusBorder, hsl(221 83% 53%));
61
+ outline: 2px solid var(--vscode-focusBorder, hsl(221 83% 53%));
70
62
  outline-offset: -1px;
71
63
  }
72
64
 
@@ -74,49 +66,49 @@
74
66
  display: flex;
75
67
  justify-content: flex-end;
76
68
  gap: 8px;
77
- margin-top: 12px;
69
+ margin-top: 16px;
78
70
  }
79
71
 
80
72
  .jotx-link-dialog-btn {
81
- padding: 6px 12px;
82
- border-radius: 2px;
83
- border: 1px solid transparent;
84
- /* Default */
73
+ padding: 8px 14px;
74
+ border-radius: 6px;
75
+ border: 1px solid var(--vscode-button-secondaryBackground, hsl(220 13% 80%));
85
76
  background: var(--vscode-button-secondaryBackground, transparent);
86
- color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
77
+ color: var(--vscode-button-secondaryForeground, hsl(222 47% 11%));
87
78
  cursor: pointer;
88
- font-weight: 400;
79
+ font-weight: 500;
89
80
  font-size: 13px;
81
+ transition: background 0.15s, border-color 0.15s;
90
82
  }
91
83
 
92
84
  .jotx-link-dialog-btn:hover {
93
- background: var(--vscode-button-secondaryHoverBackground, rgba(90, 93, 94, 0.31));
85
+ background: var(--vscode-button-secondaryHoverBackground, hsl(220 13% 95%));
94
86
  }
95
87
 
96
88
  .jotx-link-dialog-btn.primary {
97
- background: var(--vscode-button-background);
98
- color: var(--vscode-button-foreground);
89
+ background: var(--vscode-button-background, hsl(221 83% 53%));
90
+ color: var(--vscode-button-foreground, hsl(0 0% 100%));
99
91
  border-color: transparent;
100
92
  }
101
93
 
102
94
  .jotx-link-dialog-btn.primary:hover {
103
- background: var(--vscode-button-hoverBackground);
95
+ background: var(--vscode-button-hoverBackground, hsl(221 83% 45%));
104
96
  }
105
97
 
106
98
  .jotx-link-dialog-hint {
107
- margin-top: 10px;
99
+ margin-top: 12px;
108
100
  font-size: 11px;
109
- color: var(--vscode-descriptionForeground);
101
+ color: var(--vscode-descriptionForeground, hsl(215 14% 45%));
110
102
  }
111
103
 
112
104
  .jotx-link-dialog-hint kbd {
113
- padding: 2px 4px;
105
+ padding: 2px 6px;
114
106
  font-size: 10px;
115
- font-family: var(--vscode-font-family, inherit);
116
- color: var(--vscode-editor-foreground);
117
- background-color: var(--vscode-keybindingLabel-background, rgba(128, 128, 128, 0.17));
118
- border: 1px solid var(--vscode-keybindingLabel-border, rgba(128, 128, 128, 0.35));
119
- border-bottom-color: var(--vscode-keybindingLabel-bottomBorder, rgba(128, 128, 128, 0.35));
120
- border-radius: 3px;
121
- box-shadow: inset 0 -1px 0 var(--vscode-keybindingLabel-bottomBorder, rgba(128, 128, 128, 0.35));
107
+ font-family: inherit;
108
+ color: var(--vscode-editor-foreground, hsl(222 47% 11%));
109
+ background-color: var(--vscode-keybindingLabel-background, hsl(220 13% 93%));
110
+ border: 1px solid var(--vscode-keybindingLabel-border, hsl(220 13% 80%));
111
+ border-bottom-color: var(--vscode-keybindingLabel-bottomBorder, hsl(220 13% 75%));
112
+ border-radius: 4px;
113
+ box-shadow: inset 0 -1px 0 var(--vscode-keybindingLabel-bottomBorder, hsl(220 13% 75%));
122
114
  }