@editora/themes 1.0.1 → 1.0.2

package/README.md

@@ -1,5 +1,14 @@
 # @editora/themes
 
+<div align="center">
+  <img src="../../images/editora_logo_blocks.svg" alt="Editora Logo" width="200" height="auto">
+</div>
+
+<div align="center">
+  <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);">
+  <p><em>Themes and styling system with built-in light/dark mode support</em></p>
+</div>
+
 Themes and styling system for Editora Rich Text Editor with built-in light/dark mode support and customizable design tokens.
 
 ## 📦 Installation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/themes",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Themes and styling system for Editora Rich Text Editor with light/dark mode support",
   "author": "Ajay Kumar <ajaykr089@gmail.com>",
   "license": "MIT",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "694494db58b809f0dcf24501696284faa1ab68a5"
+  "gitHead": "b4a92679b7a31308632c48abd5e536476d58b0c7"
 }

package/src/index.css

@@ -1,3 +1,6 @@
+/* Import default theme styles including dialog overlays */
+@import './themes/default.css';
+
 /* Toolbar group button and group items for native plugin grouping (e.g., font size) */
 .editora-toolbar-group-button {
   display: flex;

package/src/themes/default.css

@@ -146,27 +146,25 @@
 /* Expanded row for hidden items - Slides down inline */
 .rte-toolbar-expanded-row {
   display: flex;
-  gap: 4px;
-  padding: 8px;
-  background: #f5f5f5;
-  border: 1px solid #ddd;
-  border-top: none;
+  transform: scaleY(0);
+  transform-origin: top;
   max-height: 0;
+  padding: 0;
   overflow: hidden;
   opacity: 0;
-  visibility: hidden;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  flex-wrap: wrap;
-  align-items: center;
+  transition: transform 0.25s ease, opacity 0.2s ease, max-height 0.25s ease;
 }
 
 .rte-toolbar-expanded-row.show {
+  transform: scaleY(1);
   max-height: 200px;
+  padding: 8px;
+  padding-top:1px;
   opacity: 1;
-  visibility: visible;
-  transform: scaleY(1);
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-top: none;
+  gap: 4px;
 }
 
 .rte-content {
@@ -539,3 +537,67 @@
   text-decoration: line-through;
   color: #666;
 }
+
+/* Status bar container */
+.editora-statusbar-container {
+  display: flex;
+  flex-direction: column;
+}
+.rte-editor {
+  .editora-statusbar-bottom{
+    top: -32px;
+  }
+}
+.editora-statusbar-bottom{
+  position: relative;
+  border-left: 1px solid rgb(221, 221, 221);
+  border-right: 1px solid rgb(221, 221, 221);
+}
+/* Status bar */
+.editora-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  background: #f5f5f5;
+  border-top: 1px solid #ddd;
+  font-size: 12px;
+  color: #666;
+}
+
+.editora-theme-dark .editora-statusbar {
+  background: #252526;
+  border-top-color: #3c3c3c;
+  color: #9a9a9a;
+}
+
+.editora-statusbar-top {
+  border-top: none;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.editora-statusbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editora-statusbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.editora-statusbar-item {
+  white-space: nowrap;
+  padding: 2px 4px;
+}
+
+.editora-statusbar-separator {
+  color: #ddd;
+}
+
+.editora-theme-dark .editora-statusbar-separator {
+  color: #3c3c3c;
+}