@editora/themes 1.0.0 → 1.0.2
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 +20 -11
- package/package.json +2 -2
- package/src/index.css +59 -3
- package/src/themes/default.css +107 -16
package/README.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @editora/themes
|
|
2
2
|
|
|
3
|
+
<div align="center">
|
|
4
|
+
<img src="../../images/editora_logo_blocks.svg" alt="Editora Logo" width="200" height="auto">
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div align="center">
|
|
8
|
+
<img src="../../images/theme-comparison.png" alt="Editora Themes - Light vs Dark Theme Comparison" width="800" style="border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
|
|
9
|
+
<p><em>Themes and styling system with built-in light/dark mode support</em></p>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
3
12
|
Themes and styling system for Editora Rich Text Editor with built-in light/dark mode support and customizable design tokens.
|
|
4
13
|
|
|
5
14
|
## 📦 Installation
|
|
@@ -27,10 +36,10 @@ The themes package provides a comprehensive styling system using CSS variables,
|
|
|
27
36
|
|
|
28
37
|
```tsx
|
|
29
38
|
import '@editora/themes/styles';
|
|
30
|
-
import {
|
|
39
|
+
import { EditoraEditor } from '@editora/react';
|
|
31
40
|
|
|
32
41
|
function App() {
|
|
33
|
-
return <
|
|
42
|
+
return <EditoraEditor theme="light" />;
|
|
34
43
|
}
|
|
35
44
|
```
|
|
36
45
|
|
|
@@ -38,7 +47,7 @@ function App() {
|
|
|
38
47
|
|
|
39
48
|
```tsx
|
|
40
49
|
import '@editora/themes/styles';
|
|
41
|
-
import {
|
|
50
|
+
import { EditoraEditor } from '@editora/react';
|
|
42
51
|
import { useState } from 'react';
|
|
43
52
|
|
|
44
53
|
function App() {
|
|
@@ -50,7 +59,7 @@ function App() {
|
|
|
50
59
|
Toggle Theme
|
|
51
60
|
</button>
|
|
52
61
|
|
|
53
|
-
<
|
|
62
|
+
<EditoraEditor theme={theme} />
|
|
54
63
|
</div>
|
|
55
64
|
);
|
|
56
65
|
}
|
|
@@ -60,10 +69,10 @@ function App() {
|
|
|
60
69
|
|
|
61
70
|
```tsx
|
|
62
71
|
import '@editora/themes/styles';
|
|
63
|
-
import {
|
|
72
|
+
import { EditoraEditor } from '@editora/react';
|
|
64
73
|
|
|
65
74
|
function App() {
|
|
66
|
-
return <
|
|
75
|
+
return <EditoraEditor theme="auto" />;
|
|
67
76
|
}
|
|
68
77
|
```
|
|
69
78
|
|
|
@@ -74,7 +83,7 @@ function App() {
|
|
|
74
83
|
Clean, professional light theme suitable for most applications.
|
|
75
84
|
|
|
76
85
|
```tsx
|
|
77
|
-
<
|
|
86
|
+
<EditoraEditor theme="light" />
|
|
78
87
|
```
|
|
79
88
|
|
|
80
89
|
### Dark Theme
|
|
@@ -82,7 +91,7 @@ Clean, professional light theme suitable for most applications.
|
|
|
82
91
|
Modern dark theme with comfortable colors for low-light environments.
|
|
83
92
|
|
|
84
93
|
```tsx
|
|
85
|
-
<
|
|
94
|
+
<EditoraEditor theme="dark" />
|
|
86
95
|
```
|
|
87
96
|
|
|
88
97
|
### Auto Theme
|
|
@@ -90,7 +99,7 @@ Modern dark theme with comfortable colors for low-light environments.
|
|
|
90
99
|
Automatically matches system preferences.
|
|
91
100
|
|
|
92
101
|
```tsx
|
|
93
|
-
<
|
|
102
|
+
<EditoraEditor theme="auto" />
|
|
94
103
|
```
|
|
95
104
|
|
|
96
105
|
## 🔧 Customization
|
|
@@ -346,7 +355,7 @@ function App() {
|
|
|
346
355
|
|
|
347
356
|
return (
|
|
348
357
|
<div data-theme={theme}>
|
|
349
|
-
<
|
|
358
|
+
<EditoraEditor />
|
|
350
359
|
</div>
|
|
351
360
|
);
|
|
352
361
|
}
|
|
@@ -371,7 +380,7 @@ function App() {
|
|
|
371
380
|
<button onClick={toggleTheme}>
|
|
372
381
|
{theme === 'light' ? '🌙' : '☀️'}
|
|
373
382
|
</button>
|
|
374
|
-
<
|
|
383
|
+
<EditoraEditor />
|
|
375
384
|
</div>
|
|
376
385
|
);
|
|
377
386
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@editora/themes",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
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": "b4a92679b7a31308632c48abd5e536476d58b0c7"
|
|
58
58
|
}
|
package/src/index.css
CHANGED
|
@@ -1,3 +1,55 @@
|
|
|
1
|
+
/* Import default theme styles including dialog overlays */
|
|
2
|
+
@import './themes/default.css';
|
|
3
|
+
|
|
4
|
+
/* Toolbar group button and group items for native plugin grouping (e.g., font size) */
|
|
5
|
+
.editora-toolbar-group-button {
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
border-radius: var(--rte-radius);
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
border: 1px solid var(--rte-color-border-light);
|
|
11
|
+
background: var(--rte-color-bg-secondary, #f9fafb);
|
|
12
|
+
margin-right: 0.5rem;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.editora-toolbar-group-items {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
gap: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.editora-toolbar-group-button .editora-toolbar-button,
|
|
23
|
+
.editora-toolbar-group-button .editora-toolbar-input {
|
|
24
|
+
border-radius: 0;
|
|
25
|
+
border: none;
|
|
26
|
+
margin: 0;
|
|
27
|
+
background: transparent;
|
|
28
|
+
box-shadow: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.editora-toolbar-group-button .editora-toolbar-button:first-child {
|
|
32
|
+
border-radius: var(--rte-radius) 0 0 var(--rte-radius);
|
|
33
|
+
}
|
|
34
|
+
.editora-toolbar-group-button .editora-toolbar-button:last-child {
|
|
35
|
+
border-radius: 0 var(--rte-radius) var(--rte-radius) 0;
|
|
36
|
+
}
|
|
37
|
+
.editora-toolbar-group-button .editora-toolbar-input {
|
|
38
|
+
min-width: 44px;
|
|
39
|
+
width: 44px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
font-size: 15px;
|
|
42
|
+
background: #fff;
|
|
43
|
+
border-left: 1px solid var(--rte-color-border-light);
|
|
44
|
+
border-right: 1px solid var(--rte-color-border-light);
|
|
45
|
+
}
|
|
46
|
+
.editora-toolbar-group-button .editora-toolbar-button:active,
|
|
47
|
+
.editora-toolbar-group-button .editora-toolbar-button:focus {
|
|
48
|
+
background: #e5e7eb;
|
|
49
|
+
}
|
|
50
|
+
.editora-toolbar-group-button .editora-toolbar-input:focus {
|
|
51
|
+
outline: 1.5px solid var(--rte-color-primary, #2563eb);
|
|
52
|
+
}
|
|
1
53
|
/* Rich Text Editor - Base Theme Variables and Styles */
|
|
2
54
|
|
|
3
55
|
/* CSS Custom Properties for Theming */
|
|
@@ -142,12 +194,16 @@
|
|
|
142
194
|
flex-shrink: 0;
|
|
143
195
|
fill: currentColor;
|
|
144
196
|
stroke: currentColor;
|
|
145
|
-
width:
|
|
146
|
-
height:
|
|
197
|
+
width: 20px;
|
|
198
|
+
height: 20px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.rte-toolbar-button svg path {
|
|
202
|
+
fill: currentColor;
|
|
147
203
|
}
|
|
148
204
|
|
|
149
205
|
.rte-toolbar-button:hover svg {
|
|
150
|
-
opacity: 0.
|
|
206
|
+
opacity: 0.9;
|
|
151
207
|
}
|
|
152
208
|
|
|
153
209
|
.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;
|
|
@@ -117,27 +146,25 @@
|
|
|
117
146
|
/* Expanded row for hidden items - Slides down inline */
|
|
118
147
|
.rte-toolbar-expanded-row {
|
|
119
148
|
display: flex;
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
background: #f5f5f5;
|
|
123
|
-
border: 1px solid #ddd;
|
|
124
|
-
border-top: none;
|
|
149
|
+
transform: scaleY(0);
|
|
150
|
+
transform-origin: top;
|
|
125
151
|
max-height: 0;
|
|
152
|
+
padding: 0;
|
|
126
153
|
overflow: hidden;
|
|
127
154
|
opacity: 0;
|
|
128
|
-
|
|
129
|
-
transform: scaleY(0);
|
|
130
|
-
transform-origin: top;
|
|
131
|
-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
132
|
-
flex-wrap: wrap;
|
|
133
|
-
align-items: center;
|
|
155
|
+
transition: transform 0.25s ease, opacity 0.2s ease, max-height 0.25s ease;
|
|
134
156
|
}
|
|
135
157
|
|
|
136
158
|
.rte-toolbar-expanded-row.show {
|
|
159
|
+
transform: scaleY(1);
|
|
137
160
|
max-height: 200px;
|
|
161
|
+
padding: 8px;
|
|
162
|
+
padding-top:1px;
|
|
138
163
|
opacity: 1;
|
|
139
|
-
|
|
140
|
-
|
|
164
|
+
background: #f5f5f5;
|
|
165
|
+
border: 1px solid #ddd;
|
|
166
|
+
border-top: none;
|
|
167
|
+
gap: 4px;
|
|
141
168
|
}
|
|
142
169
|
|
|
143
170
|
.rte-content {
|
|
@@ -369,8 +396,8 @@
|
|
|
369
396
|
}
|
|
370
397
|
|
|
371
398
|
.rte-color-swatch {
|
|
372
|
-
width:
|
|
373
|
-
height:
|
|
399
|
+
width: 24px;
|
|
400
|
+
height: 24px;
|
|
374
401
|
border: 2px solid #ddd;
|
|
375
402
|
border-radius: 4px;
|
|
376
403
|
cursor: pointer;
|
|
@@ -510,3 +537,67 @@
|
|
|
510
537
|
text-decoration: line-through;
|
|
511
538
|
color: #666;
|
|
512
539
|
}
|
|
540
|
+
|
|
541
|
+
/* Status bar container */
|
|
542
|
+
.editora-statusbar-container {
|
|
543
|
+
display: flex;
|
|
544
|
+
flex-direction: column;
|
|
545
|
+
}
|
|
546
|
+
.rte-editor {
|
|
547
|
+
.editora-statusbar-bottom{
|
|
548
|
+
top: -32px;
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
.editora-statusbar-bottom{
|
|
552
|
+
position: relative;
|
|
553
|
+
border-left: 1px solid rgb(221, 221, 221);
|
|
554
|
+
border-right: 1px solid rgb(221, 221, 221);
|
|
555
|
+
}
|
|
556
|
+
/* Status bar */
|
|
557
|
+
.editora-statusbar {
|
|
558
|
+
display: flex;
|
|
559
|
+
align-items: center;
|
|
560
|
+
gap: 12px;
|
|
561
|
+
padding: 6px 12px;
|
|
562
|
+
background: #f5f5f5;
|
|
563
|
+
border-top: 1px solid #ddd;
|
|
564
|
+
font-size: 12px;
|
|
565
|
+
color: #666;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.editora-theme-dark .editora-statusbar {
|
|
569
|
+
background: #252526;
|
|
570
|
+
border-top-color: #3c3c3c;
|
|
571
|
+
color: #9a9a9a;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.editora-statusbar-top {
|
|
575
|
+
border-top: none;
|
|
576
|
+
border-bottom: 1px solid #e0e0e0;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.editora-statusbar-left {
|
|
580
|
+
display: flex;
|
|
581
|
+
align-items: center;
|
|
582
|
+
gap: 8px;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.editora-statusbar-right {
|
|
586
|
+
display: flex;
|
|
587
|
+
align-items: center;
|
|
588
|
+
gap: 8px;
|
|
589
|
+
margin-left: auto;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.editora-statusbar-item {
|
|
593
|
+
white-space: nowrap;
|
|
594
|
+
padding: 2px 4px;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.editora-statusbar-separator {
|
|
598
|
+
color: #ddd;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.editora-theme-dark .editora-statusbar-separator {
|
|
602
|
+
color: #3c3c3c;
|
|
603
|
+
}
|