@editora/themes 1.0.0 → 1.0.1
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.
- package/README.md +11 -11
- package/package.json +2 -2
- package/src/index.css +56 -3
- package/src/themes/default.css +32 -3
package/README.md
CHANGED
|
@@ -27,10 +27,10 @@ The themes package provides a comprehensive styling system using CSS variables,
|
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
29
|
import '@editora/themes/styles';
|
|
30
|
-
import {
|
|
30
|
+
import { EditoraEditor } from '@editora/react';
|
|
31
31
|
|
|
32
32
|
function App() {
|
|
33
|
-
return <
|
|
33
|
+
return <EditoraEditor theme="light" />;
|
|
34
34
|
}
|
|
35
35
|
```
|
|
36
36
|
|
|
@@ -38,7 +38,7 @@ function App() {
|
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
40
|
import '@editora/themes/styles';
|
|
41
|
-
import {
|
|
41
|
+
import { EditoraEditor } from '@editora/react';
|
|
42
42
|
import { useState } from 'react';
|
|
43
43
|
|
|
44
44
|
function App() {
|
|
@@ -50,7 +50,7 @@ function App() {
|
|
|
50
50
|
Toggle Theme
|
|
51
51
|
</button>
|
|
52
52
|
|
|
53
|
-
<
|
|
53
|
+
<EditoraEditor theme={theme} />
|
|
54
54
|
</div>
|
|
55
55
|
);
|
|
56
56
|
}
|
|
@@ -60,10 +60,10 @@ function App() {
|
|
|
60
60
|
|
|
61
61
|
```tsx
|
|
62
62
|
import '@editora/themes/styles';
|
|
63
|
-
import {
|
|
63
|
+
import { EditoraEditor } from '@editora/react';
|
|
64
64
|
|
|
65
65
|
function App() {
|
|
66
|
-
return <
|
|
66
|
+
return <EditoraEditor theme="auto" />;
|
|
67
67
|
}
|
|
68
68
|
```
|
|
69
69
|
|
|
@@ -74,7 +74,7 @@ function App() {
|
|
|
74
74
|
Clean, professional light theme suitable for most applications.
|
|
75
75
|
|
|
76
76
|
```tsx
|
|
77
|
-
<
|
|
77
|
+
<EditoraEditor theme="light" />
|
|
78
78
|
```
|
|
79
79
|
|
|
80
80
|
### Dark Theme
|
|
@@ -82,7 +82,7 @@ Clean, professional light theme suitable for most applications.
|
|
|
82
82
|
Modern dark theme with comfortable colors for low-light environments.
|
|
83
83
|
|
|
84
84
|
```tsx
|
|
85
|
-
<
|
|
85
|
+
<EditoraEditor theme="dark" />
|
|
86
86
|
```
|
|
87
87
|
|
|
88
88
|
### Auto Theme
|
|
@@ -90,7 +90,7 @@ Modern dark theme with comfortable colors for low-light environments.
|
|
|
90
90
|
Automatically matches system preferences.
|
|
91
91
|
|
|
92
92
|
```tsx
|
|
93
|
-
<
|
|
93
|
+
<EditoraEditor theme="auto" />
|
|
94
94
|
```
|
|
95
95
|
|
|
96
96
|
## 🔧 Customization
|
|
@@ -346,7 +346,7 @@ function App() {
|
|
|
346
346
|
|
|
347
347
|
return (
|
|
348
348
|
<div data-theme={theme}>
|
|
349
|
-
<
|
|
349
|
+
<EditoraEditor />
|
|
350
350
|
</div>
|
|
351
351
|
);
|
|
352
352
|
}
|
|
@@ -371,7 +371,7 @@ function App() {
|
|
|
371
371
|
<button onClick={toggleTheme}>
|
|
372
372
|
{theme === 'light' ? '🌙' : '☀️'}
|
|
373
373
|
</button>
|
|
374
|
-
<
|
|
374
|
+
<EditoraEditor />
|
|
375
375
|
</div>
|
|
376
376
|
);
|
|
377
377
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@editora/themes",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Themes and styling system for Editora Rich Text Editor with light/dark mode support",
|
|
5
5
|
"author": "Ajay Kumar <ajaykr089@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "694494db58b809f0dcf24501696284faa1ab68a5"
|
|
58
58
|
}
|
package/src/index.css
CHANGED
|
@@ -1,3 +1,52 @@
|
|
|
1
|
+
/* Toolbar group button and group items for native plugin grouping (e.g., font size) */
|
|
2
|
+
.editora-toolbar-group-button {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
border-radius: var(--rte-radius);
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
border: 1px solid var(--rte-color-border-light);
|
|
8
|
+
background: var(--rte-color-bg-secondary, #f9fafb);
|
|
9
|
+
margin-right: 0.5rem;
|
|
10
|
+
padding: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.editora-toolbar-group-items {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.editora-toolbar-group-button .editora-toolbar-button,
|
|
20
|
+
.editora-toolbar-group-button .editora-toolbar-input {
|
|
21
|
+
border-radius: 0;
|
|
22
|
+
border: none;
|
|
23
|
+
margin: 0;
|
|
24
|
+
background: transparent;
|
|
25
|
+
box-shadow: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.editora-toolbar-group-button .editora-toolbar-button:first-child {
|
|
29
|
+
border-radius: var(--rte-radius) 0 0 var(--rte-radius);
|
|
30
|
+
}
|
|
31
|
+
.editora-toolbar-group-button .editora-toolbar-button:last-child {
|
|
32
|
+
border-radius: 0 var(--rte-radius) var(--rte-radius) 0;
|
|
33
|
+
}
|
|
34
|
+
.editora-toolbar-group-button .editora-toolbar-input {
|
|
35
|
+
min-width: 44px;
|
|
36
|
+
width: 44px;
|
|
37
|
+
text-align: center;
|
|
38
|
+
font-size: 15px;
|
|
39
|
+
background: #fff;
|
|
40
|
+
border-left: 1px solid var(--rte-color-border-light);
|
|
41
|
+
border-right: 1px solid var(--rte-color-border-light);
|
|
42
|
+
}
|
|
43
|
+
.editora-toolbar-group-button .editora-toolbar-button:active,
|
|
44
|
+
.editora-toolbar-group-button .editora-toolbar-button:focus {
|
|
45
|
+
background: #e5e7eb;
|
|
46
|
+
}
|
|
47
|
+
.editora-toolbar-group-button .editora-toolbar-input:focus {
|
|
48
|
+
outline: 1.5px solid var(--rte-color-primary, #2563eb);
|
|
49
|
+
}
|
|
1
50
|
/* Rich Text Editor - Base Theme Variables and Styles */
|
|
2
51
|
|
|
3
52
|
/* CSS Custom Properties for Theming */
|
|
@@ -142,12 +191,16 @@
|
|
|
142
191
|
flex-shrink: 0;
|
|
143
192
|
fill: currentColor;
|
|
144
193
|
stroke: currentColor;
|
|
145
|
-
width:
|
|
146
|
-
height:
|
|
194
|
+
width: 20px;
|
|
195
|
+
height: 20px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.rte-toolbar-button svg path {
|
|
199
|
+
fill: currentColor;
|
|
147
200
|
}
|
|
148
201
|
|
|
149
202
|
.rte-toolbar-button:hover svg {
|
|
150
|
-
opacity: 0.
|
|
203
|
+
opacity: 0.9;
|
|
151
204
|
}
|
|
152
205
|
|
|
153
206
|
.rte-toolbar-button[data-active="true"] svg {
|
package/src/themes/default.css
CHANGED
|
@@ -33,7 +33,36 @@
|
|
|
33
33
|
align-items: center;
|
|
34
34
|
white-space: nowrap;
|
|
35
35
|
}
|
|
36
|
-
|
|
36
|
+
.rte-toolbar-group-items.font-size{
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
border: 1px solid #ccc;
|
|
40
|
+
.rte-toolbar-input.font-size{
|
|
41
|
+
width: 40px;
|
|
42
|
+
padding: 0.25rem;
|
|
43
|
+
text-align: center;
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
background: #fff;
|
|
46
|
+
border: 1px solid var(--rte-color-border-light);
|
|
47
|
+
border-radius: var(--rte-radius-sm);
|
|
48
|
+
}
|
|
49
|
+
.rte-toolbar-button {
|
|
50
|
+
border: none;
|
|
51
|
+
border-radius: 0;
|
|
52
|
+
}
|
|
53
|
+
.rte-toolbar-item{
|
|
54
|
+
&:first-child {
|
|
55
|
+
border-right: 1px solid #ccc;
|
|
56
|
+
border-top-left-radius: 3px;
|
|
57
|
+
border-bottom-left-radius: 3px;
|
|
58
|
+
}
|
|
59
|
+
&:last-child {
|
|
60
|
+
border-left: 1px solid #ccc;
|
|
61
|
+
border-top-right-radius: 3px;
|
|
62
|
+
border-bottom-right-radius: 3px;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
37
66
|
.rte-toolbar-button {
|
|
38
67
|
padding: 6px 12px;
|
|
39
68
|
border: 1px solid #ccc;
|
|
@@ -369,8 +398,8 @@
|
|
|
369
398
|
}
|
|
370
399
|
|
|
371
400
|
.rte-color-swatch {
|
|
372
|
-
width:
|
|
373
|
-
height:
|
|
401
|
+
width: 24px;
|
|
402
|
+
height: 24px;
|
|
374
403
|
border: 2px solid #ddd;
|
|
375
404
|
border-radius: 4px;
|
|
376
405
|
cursor: pointer;
|