@editora/themes 1.0.3 → 1.0.5

package/src/index.css

@@ -189,16 +189,20 @@
   font-size: 14px;
   line-height: 1;
 }
+.rte-toolbar-button span{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-.rte-toolbar-button svg {
+.rte-toolbar-button svg,
+.editora-toolbar-button svg,
+.editora-toolbar-icon svg {
   flex-shrink: 0;
-  fill: currentColor;
-  stroke: currentColor;
   width: 20px;
   height: 20px;
-}
-
-.rte-toolbar-button svg path {
+  display: block;
+  color: currentColor;
   fill: currentColor;
 }
 
@@ -206,9 +210,8 @@
   opacity: 0.9;
 }
 
-.rte-toolbar-button[data-active="true"] svg {
-  fill: var(--rte-color-text-inverse);
-  stroke: var(--rte-color-text-inverse);
+:is(.rte-toolbar-button[data-active="true"], .editora-toolbar-button.active) svg {
+  color: var(--rte-color-text-inverse);
 }
 
 .rte-toolbar-button:hover {
@@ -321,7 +324,8 @@
 }
 
 /* Placeholder Styles */
-.rte-content:empty:before {
+.rte-content:empty:before,
+.rte-content.rte-content-empty:before {
   content: attr(data-placeholder);
   color: var(--rte-color-text-muted);
   pointer-events: none;

package/src/themes/acme.css

@@ -0,0 +1,212 @@
+/* Rich Text Editor - Acme Theme */
+
+:is([data-theme="acme"], .editora-theme-acme) {
+  /* Colors */
+  --rte-color-primary: #0f766e;
+  --rte-color-primary-hover: #0d5f59;
+  --rte-color-secondary: #5b6478;
+  --rte-color-success: #15803d;
+  --rte-color-danger: #b91c1c;
+  --rte-color-warning: #b45309;
+  --rte-color-info: #0f766e;
+
+  /* Text Colors */
+  --rte-color-text-primary: #0f172a;
+  --rte-color-text-secondary: #334155;
+  --rte-color-text-muted: #64748b;
+  --rte-color-text-inverse: #ffffff;
+
+  /* Background Colors */
+  --rte-color-bg-primary: #f8fafc;
+  --rte-color-bg-secondary: #eef2f7;
+  --rte-color-bg-tertiary: #e2e8f0;
+  --rte-color-bg-hover: #e6edf6;
+  --rte-color-bg-active: #dbe7f2;
+
+  /* Border Colors */
+  --rte-color-border: #cbd5e1;
+  --rte-color-border-light: #dbe3ee;
+  --rte-color-border-focus: #0f766e;
+
+  /* Shadows */
+  --rte-shadow-sm: 0 1px 2px rgba(2, 8, 20, 0.08);
+  --rte-shadow: 0 6px 16px rgba(2, 8, 20, 0.08);
+  --rte-shadow-lg: 0 14px 28px rgba(2, 8, 20, 0.14);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-editor, .editora-editor) {
+  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
+  border-color: var(--rte-color-border);
+  color: var(--rte-color-text-primary);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-toolbar, .editora-toolbar) {
+  background: linear-gradient(180deg, #eef4fb 0%, #e8f0f9 100%);
+  border-color: var(--rte-color-border);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-toolbar-button, .editora-toolbar-button) {
+  background: linear-gradient(180deg, #fefefe 0%, #f4f8fc 100%);
+  border-color: var(--rte-color-border);
+  color: var(--rte-color-text-secondary);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-button, .editora-toolbar-button):hover {
+  background: linear-gradient(180deg, #f5faf9 0%, #e9f5f4 100%);
+  border-color: #a7cfc8;
+  color: #115e59;
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-button, .editora-toolbar-button):active,
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-button, .editora-toolbar-button)[data-active="true"],
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-button, .editora-toolbar-button).active {
+  background: linear-gradient(180deg, #ccfbf1 0%, #b7f3e7 100%);
+  border-color: #64c9b4;
+  color: #0f4f4a;
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-button, .editora-toolbar-button):disabled {
+  background: #e2e8f0;
+  color: #94a3b8;
+  border-color: #cbd5e1;
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-input, .editora-toolbar-input, .editora-toolbar-input.font-size) {
+  background: #ffffff;
+  color: var(--rte-color-text-primary);
+  border-color: var(--rte-color-border);
+  caret-color: var(--rte-color-text-primary);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-input, .editora-toolbar-input, .editora-toolbar-input.font-size)::placeholder {
+  color: var(--rte-color-text-muted);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-dropdown-menu, .editora-toolbar-dropdown-menu) {
+  background: #ffffff;
+  border-color: var(--rte-color-border);
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.15);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-dropdown-item, .editora-toolbar-dropdown-item) {
+  color: var(--rte-color-text-secondary);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-dropdown-item, .editora-toolbar-dropdown-item):hover {
+  background: #f0f8f6;
+  color: #0f4f4a;
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-more-button, .editora-toolbar-more-button) {
+  background: linear-gradient(180deg, #fefefe 0%, #f4f8fc 100%);
+  border-color: var(--rte-color-border);
+  color: var(--rte-color-text-secondary);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-more-button, .editora-toolbar-more-button):hover {
+  background: linear-gradient(180deg, #f5faf9 0%, #e9f5f4 100%);
+  border-color: #a7cfc8;
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-toolbar-more-button, .editora-toolbar-more-button).active {
+  background: linear-gradient(180deg, #ccfbf1 0%, #b7f3e7 100%);
+  border-color: #64c9b4;
+  color: #0f4f4a;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .rte-toolbar-expanded-row {
+  background: #edf4fa;
+  border-color: var(--rte-color-border);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-content, .editora-content) {
+  color: var(--rte-color-text-primary);
+  background: #fdfefe;
+  border-color: var(--rte-color-border) !important;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-content, .editora-content) blockquote {
+  border-left-color: #14b8a6;
+  background: #f0fdfa;
+  color: #0f4f4a;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-content, .editora-content) code {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-content, .editora-content) :is(a, .rte-link) {
+  color: #0f766e;
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-content, .editora-content)
+  :is(a, .rte-link):hover {
+  color: #0d5f59;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) :is(.rte-content, .editora-content) ::selection {
+  background: rgba(20, 184, 166, 0.24);
+}
+
+:is([data-theme="acme"], .editora-theme-acme)
+  :is(.rte-content:empty::before, .rte-content.rte-content-empty::before, .editora-content:empty::before) {
+  color: #7f8ea3;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .editora-statusbar {
+  background: #eff5fb;
+  color: #3b4b61;
+  border-top-color: var(--rte-color-border);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .editora-statusbar-separator {
+  color: #a1afc2;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .rte-inline-menu {
+  background: #ffffff;
+  border-color: var(--rte-color-border);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .rte-inline-menu-item {
+  color: #334155;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .rte-inline-menu-item:hover {
+  background: #f0f8f6;
+  color: #0f4f4a;
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .floating-toolbar {
+  --rte-floating-toolbar-bg: #ffffff;
+  --rte-floating-toolbar-border: #c3d3e5;
+  --rte-floating-toolbar-text: #334155;
+  --rte-floating-toolbar-hover-bg: #ecf8f5;
+  --rte-floating-toolbar-hover-text: #0f4f4a;
+  --rte-floating-toolbar-active-bg: #dff7f1;
+  --rte-floating-toolbar-separator: #d4e1ee;
+  --rte-floating-toolbar-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+}
+
+:is([data-theme="acme"], .editora-theme-acme) .editora-floating-toolbar {
+  background: #ffffff;
+  border-color: var(--rte-color-border);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+}