@editora/themes 1.0.3 → 1.0.4

package/README.md

@@ -1,461 +1,183 @@
 # @editora/themes
 
-<div align="center">
-  <img src="../../images/editora_logo_blocks.svg" alt="Editora Logo" width="200" height="auto">
-</div>
+Themes and design tokens for Editora editor UIs (React wrapper + Web Component).
 
-<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
+## Installation
 
 ```bash
 npm install @editora/themes
 ```
 
-## 🎯 Overview
-
-The themes package provides a comprehensive styling system using CSS variables, making it easy to customize the editor's appearance and support multiple themes.
+## Built-in Themes
 
-## ✨ Features
+- `default` (`@editora/themes/themes/default.css`)
+- `dark` (`@editora/themes/themes/dark.css`)
+- `acme` (`@editora/themes/themes/acme.css`)
 
-- **Light & Dark Themes**: Pre-built themes with automatic system detection
-- **CSS Variables**: Fully customizable using CSS custom properties
-- **Responsive**: Mobile-friendly and adaptive layouts
-- **Accessible**: High contrast ratios and WCAG compliance
-- **Modern Design**: Clean, professional appearance
-- **Easy Customization**: Override any variable to match your brand
+## Quick Start
 
-## 🚀 Quick Start
-
-### Basic Usage
+### React
 
 ```tsx
-import "@editora/themes/theme.css";
-OR
-import "@editora/themes/themes/default.css";
-import { EditoraEditor } from '@editora/react';
-
-function App() {
-  return <EditoraEditor theme="light" />;
-}
-```
-
-### With Theme Toggle
+import { EditoraEditor } from "@editora/react";
+import { BoldPlugin, ItalicPlugin } from "@editora/plugins";
 
-```tsx
-import "@editora/themes/theme.css";
-OR
 import "@editora/themes/themes/default.css";
-import { EditoraEditor } from '@editora/react';
-import { useState } from 'react';
-
-function App() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+import "@editora/themes/themes/acme.css";
 
+export default function App() {
   return (
-    <div data-theme={theme}>
-      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-        Toggle Theme
-      </button>
-      
-      <EditoraEditor theme={theme} />
+    <div data-theme="acme">
+      <EditoraEditor plugins={[BoldPlugin(), ItalicPlugin()]} />
     </div>
   );
 }
 ```
 
-### Auto Theme Detection
-
-```tsx
-import "@editora/themes/theme.css";
-OR
-import "@editora/themes/themes/default.css";
-import { EditoraEditor } from '@editora/react';
-
-function App() {
-  return <EditoraEditor theme="auto" />;
-}
-```
-
-## 🎨 Built-in Themes
-
-### Light Theme (Default)
-
-Clean, professional light theme suitable for most applications.
-
-```tsx
-<EditoraEditor theme="light" />
-```
-
-### Dark Theme
-
-Modern dark theme with comfortable colors for low-light environments.
-
-```tsx
-<EditoraEditor theme="dark" />
-```
+Use `data-theme="light"`, `data-theme="dark"`, or `data-theme="acme"` on a wrapper.
 
-### Auto Theme
+### Web Component
 
-Automatically matches system preferences.
+```html
+<link rel="stylesheet" href="/node_modules/@editora/core/dist/webcomponent.min.css" />
+<link rel="stylesheet" href="/node_modules/@editora/themes/themes/acme.css" />
+<script type="module" src="/node_modules/@editora/core/dist/webcomponent.js"></script>
 
-```tsx
-<EditoraEditor theme="auto" />
+<editora-editor
+  theme="acme"
+  plugins="bold italic underline history"
+  toolbar-items="undo redo | bold italic underline"
+  height="320"
+></editora-editor>
 ```
 
-## 🔧 Customization
+Use `theme="light"`, `theme="dark"`, or `theme="acme"` on `<editora-editor>`.
 
-### CSS Variables
+## Create A Custom Theme From Scratch
 
-All theme colors and sizes use CSS variables for easy customization.
+### 1) Start from base theme
 
-#### Color Variables
+Create `my-theme.css` and load `default.css` first:
 
 ```css
-:root {
-  /* Primary colors */
-  --editora-primary: #0066cc;
-  --editora-primary-hover: #0052a3;
-  --editora-primary-active: #003d7a;
-  
-  /* Background colors */
-  --editora-bg: #ffffff;
-  --editora-bg-secondary: #f5f5f5;
-  --editora-bg-tertiary: #e0e0e0;
-  
-  /* Text colors */
-  --editora-text: #000000;
-  --editora-text-secondary: #666666;
-  --editora-text-muted: #999999;
-  
-  /* Border colors */
-  --editora-border: #cccccc;
-  --editora-border-focus: #0066cc;
-  
-  /* Toolbar */
-  --editora-toolbar-bg: #f5f5f5;
-  --editora-toolbar-border: #cccccc;
-  --editora-toolbar-button-hover: #e0e0e0;
-  --editora-toolbar-button-active: #d0d0d0;
-  
-  /* Content area */
-  --editora-content-bg: #ffffff;
-  --editora-content-padding: 16px;
-  
-  /* Selection */
-  --editora-selection-bg: rgba(0, 102, 204, 0.2);
-  
-  /* Status colors */
-  --editora-error: #dc3545;
-  --editora-warning: #ffc107;
-  --editora-success: #28a745;
-  --editora-info: #17a2b8;
-}
+@import "@editora/themes/themes/default.css";
 ```
 
-#### Dark Theme Variables
-
-```css
-[data-theme="dark"] {
-  --editora-primary: #3399ff;
-  --editora-primary-hover: #5cadff;
-  --editora-primary-active: #1f8cff;
-  
-  --editora-bg: #1e1e1e;
-  --editora-bg-secondary: #2d2d2d;
-  --editora-bg-tertiary: #3d3d3d;
-  
-  --editora-text: #ffffff;
-  --editora-text-secondary: #cccccc;
-  --editora-text-muted: #999999;
-  
-  --editora-border: #444444;
-  --editora-border-focus: #3399ff;
-  
-  --editora-toolbar-bg: #2d2d2d;
-  --editora-toolbar-border: #444444;
-  --editora-toolbar-button-hover: #3d3d3d;
-  --editora-toolbar-button-active: #4d4d4d;
-  
-  --editora-content-bg: #1e1e1e;
-  
-  --editora-selection-bg: rgba(51, 153, 255, 0.3);
-}
-```
+### 2) Scope your theme
 
-#### Size Variables
+Choose one scope that works for both React and Web Component:
 
 ```css
-:root {
-  /* Font sizes */
-  --editora-font-size-sm: 12px;
-  --editora-font-size-base: 14px;
-  --editora-font-size-lg: 16px;
-  
-  /* Spacing */
-  --editora-spacing-xs: 4px;
-  --editora-spacing-sm: 8px;
-  --editora-spacing-md: 16px;
-  --editora-spacing-lg: 24px;
-  --editora-spacing-xl: 32px;
-  
-  /* Border radius */
-  --editora-radius-sm: 2px;
-  --editora-radius-md: 4px;
-  --editora-radius-lg: 8px;
-  
-  /* Shadows */
-  --editora-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --editora-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --editora-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
-  
-  /* Z-indexes */
-  --editora-z-dropdown: 1000;
-  --editora-z-modal: 2000;
-  --editora-z-tooltip: 3000;
+:is([data-theme="my-brand"], .editora-theme-my-brand) {
+  /* tokens */
 }
 ```
 
-### Custom Theme Example
+### 3) Override design tokens
 
-```css
-/* custom-theme.css */
-import "@editora/themes/theme.css";
-OR
-import "@editora/themes/themes/default.css";
-
-:root {
-  /* Brand colors */
-  --editora-primary: #7c3aed;
-  --editora-primary-hover: #6d28d9;
-  --editora-primary-active: #5b21b6;
-  
-  /* Custom toolbar */
-  --editora-toolbar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --editora-toolbar-button-hover: rgba(255, 255, 255, 0.1);
-  
-  /* Rounded corners */
-  --editora-radius-md: 12px;
-  
-  /* Custom font */
-  --editora-font-family: 'Inter', system-ui, sans-serif;
-}
-```
-
-## 💡 Usage Examples
-
-### Brand Customization
+Use the real token names used by Editora (`--rte-*`):
 
 ```css
-/* Match your brand colors */
-:root {
-  --editora-primary: #ff6b6b;
-  --editora-primary-hover: #ff5252;
-  --editora-toolbar-bg: #ffffff;
-  --editora-border: #e0e0e0;
-}
-
-.my-editor {
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+:is([data-theme="my-brand"], .editora-theme-my-brand) {
+  --rte-color-primary: #1d4ed8;
+  --rte-color-primary-hover: #1e40af;
+  --rte-color-text-primary: #0f172a;
+  --rte-color-text-secondary: #334155;
+  --rte-color-text-muted: #64748b;
+  --rte-color-bg-primary: #ffffff;
+  --rte-color-bg-secondary: #f8fafc;
+  --rte-color-bg-tertiary: #e2e8f0;
+  --rte-color-border: #cbd5e1;
+  --rte-color-border-light: #dbe3ee;
+  --rte-color-border-focus: #1d4ed8;
+  --rte-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
+  --rte-shadow-lg: 0 16px 28px rgba(15, 23, 42, 0.16);
 }
 ```
 
-### Compact Mode
+### 4) Add component overrides
 
-```css
-/* Smaller toolbar and spacing */
-:root {
-  --editora-toolbar-height: 32px;
-  --editora-spacing-md: 8px;
-  --editora-font-size-base: 12px;
-}
-```
-
-### High Contrast Mode
+Tokens handle most styling, but buttons/dropdowns/content usually need explicit overrides:
 
 ```css
-/* Improve accessibility */
-[data-theme="high-contrast"] {
-  --editora-bg: #000000;
-  --editora-text: #ffffff;
-  --editora-border: #ffffff;
-  --editora-primary: #ffff00;
+:is([data-theme="my-brand"], .editora-theme-my-brand) :is(.rte-toolbar, .editora-toolbar) {
+  background: #f4f8ff;
+  border-color: var(--rte-color-border);
 }
-```
 
-### Minimal Theme
-
-```css
-/* Clean, distraction-free editing */
-:root {
-  --editora-toolbar-bg: transparent;
-  --editora-toolbar-border: none;
-  --editora-border: transparent;
+:is([data-theme="my-brand"], .editora-theme-my-brand) :is(.rte-toolbar-button, .editora-toolbar-button) {
+  background: #ffffff;
+  border-color: var(--rte-color-border);
+  color: var(--rte-color-text-secondary);
 }
 
-.rte-toolbar {
-  border-bottom: 1px solid var(--editora-border);
+:is([data-theme="my-brand"], .editora-theme-my-brand) :is(.rte-content, .editora-content) {
+  background: #ffffff;
+  color: var(--rte-color-text-primary);
 }
 ```
 
-## 📱 Responsive Styles
-
-The theme automatically adapts to different screen sizes:
+### 5) Load and activate the theme
 
-```css
-/* Mobile adjustments */
-@media (max-width: 768px) {
-  :root {
-    --editora-toolbar-height: 48px; /* Larger touch targets */
-    --editora-font-size-base: 16px; /* Prevent zoom on iOS */
-    --editora-spacing-md: 12px;
-  }
-}
-
-/* Tablet */
-@media (min-width: 769px) and (max-width: 1024px) {
-  :root {
-    --editora-content-padding: 20px;
-  }
-}
+- React: import CSS + set wrapper `data-theme="my-brand"`.
+- Web Component: include CSS + set `theme="my-brand"` on `<editora-editor>`.
 
-/* Desktop */
-@media (min-width: 1025px) {
-  :root {
-    --editora-content-padding: 24px;
-  }
-}
-```
+## Modify An Existing Theme
 
-## 🌙 Dark Mode Implementation
+### Option A: Extend dark theme
 
-### System Preference Detection
-
-```tsx
-import { useEffect, useState } from 'react';
-
-function useTheme() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    setTheme(mediaQuery.matches ? 'dark' : 'light');
-
-    const handler = (e: MediaQueryListEvent) => {
-      setTheme(e.matches ? 'dark' : 'light');
-    };
-
-    mediaQuery.addEventListener('change', handler);
-    return () => mediaQuery.removeEventListener('change', handler);
-  }, []);
+```css
+@import "@editora/themes/themes/default.css";
+@import "@editora/themes/themes/dark.css";
 
-  return theme;
+:is([data-theme="dark"], .editora-theme-dark) {
+  --rte-color-primary: #22d3ee;
+  --rte-color-primary-hover: #06b6d4;
 }
 
-function App() {
-  const theme = useTheme();
-  
-  return (
-    <div data-theme={theme}>
-      <EditoraEditor />
-    </div>
-  );
-}
-```
-
-### Manual Theme Toggle
-
-```tsx
-function App() {
-  const [theme, setTheme] = useState(() => {
-    return localStorage.getItem('theme') || 'light';
-  });
-
-  const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-  };
-
-  return (
-    <div data-theme={theme}>
-      <button onClick={toggleTheme}>
-        {theme === 'light' ? '🌙' : '☀️'}
-      </button>
-      <EditoraEditor />
-    </div>
-  );
+:is([data-theme="dark"], .editora-theme-dark) .rte-toolbar-button {
+  border-radius: 8px;
 }
 ```
 
-## 🎨 Component-Specific Styling
-
-### Toolbar Customization
+### Option B: Extend acme theme
 
 ```css
-.rte-toolbar {
-  background: linear-gradient(to right, #667eea, #764ba2);
-  border-radius: 8px 8px 0 0;
-}
-
-.rte-toolbar-button {
-  color: white;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
+@import "@editora/themes/themes/default.css";
+@import "@editora/themes/themes/acme.css";
 
-.rte-toolbar-button:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-1px);
+:is([data-theme="acme"], .editora-theme-acme) {
+  --rte-color-primary: #7c3aed;
+  --rte-color-primary-hover: #6d28d9;
 }
 ```
 
-### Content Area Styling
+### Safe override strategy
 
-```css
-.rte-content {
-  font-family: 'Georgia', serif;
-  font-size: 18px;
-  line-height: 1.6;
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 40px;
-}
+1. Keep selectors scoped (`[data-theme="..."]` / `.editora-theme-...`).
+2. Prefer token overrides first, component selectors second.
+3. Override both React and Web Component class names where needed:
+   - React classes: `.rte-*`
+   - Web Component classes: `.editora-*`
 
-.rte-content h1 {
-  color: var(--editora-primary);
-  border-bottom: 2px solid var(--editora-border);
-  padding-bottom: 0.3em;
-}
-```
+## New `acme` Theme Notes
 
-### Dialog Styling
+`acme.css` is intentionally shared across both renderers:
 
-```css
-.rte-dialog {
-  border-radius: var(--editora-radius-lg);
-  box-shadow: var(--editora-shadow-lg);
-}
+- React support via `[data-theme="acme"]`
+- Web Component support via `.editora-theme-acme` (set automatically from `theme="acme"`)
 
-.rte-dialog-header {
-  background: var(--editora-bg-secondary);
-  border-radius: var(--editora-radius-lg) var(--editora-radius-lg) 0 0;
-}
-```
+## Verification Checklist
 
-## 📄 License
+After adding/changing a theme, verify:
 
-MIT © [Ajay Kumar](https://github.com/ajaykr089)
+1. Toolbar buttons (normal/hover/active/disabled)
+2. Dropdown menus and inputs (including font-size input placeholder)
+3. Editor content colors + placeholder visibility
+4. Status bar + floating toolbar
+5. Dialogs and plugin overlays in both light/dark/custom scopes
+6. Multi-instance behavior with different themes on the same page
 
-## 🔗 Links
+## License
 
-- [Documentation](https://github.com/ajaykr089/Editora#readme)
-- [GitHub Repository](https://github.com/ajaykr089/Editora)
-- [Issue Tracker](https://github.com/ajaykr089/Editora/issues)
-- [npm Package](https://www.npmjs.com/package/@editora/themes)
+MIT

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(e,t){e.setAttribute("data-theme",t),e.classList.toggle("dark",t==="dark")}function m(e){return""}function r(e){document.documentElement.setAttribute("data-theme",e),document.documentElement.classList.toggle("dark",e==="dark")}function n(){return document.documentElement.getAttribute("data-theme")==="dark"?"dark":"light"}function u(){const t=n()==="light"?"dark":"light";return r(t),t}function i(){return n()==="dark"}function o(){return n()==="light"}const a={light:"light",dark:"dark"};exports.applyTheme=h;exports.getCurrentTheme=n;exports.getThemeCSS=m;exports.isDarkTheme=i;exports.isLightTheme=o;exports.setGlobalTheme=r;exports.themes=a;exports.toggleTheme=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m(e,t){e.setAttribute("data-theme",t),e.classList.toggle("dark",t==="dark")}function u(e){return""}function r(e){document.documentElement.setAttribute("data-theme",e),document.documentElement.classList.toggle("dark",e==="dark")}function n(){const e=document.documentElement.getAttribute("data-theme");return e==="dark"||e==="acme"||e==="light"?e:"light"}function a(){const t=n()==="dark"?"light":"dark";return r(t),t}function i(){return n()==="dark"}function h(){return n()==="light"}const o={light:"light",dark:"dark",acme:"acme"};exports.applyTheme=m;exports.getCurrentTheme=n;exports.getThemeCSS=u;exports.isDarkTheme=i;exports.isLightTheme=h;exports.setGlobalTheme=r;exports.themes=o;exports.toggleTheme=a;

package/dist/index.esm.js

@@ -1,36 +1,38 @@
 function u(t, e) {
   t.setAttribute("data-theme", e), t.classList.toggle("dark", e === "dark");
 }
-function o(t) {
+function c(t) {
   return "";
 }
 function r(t) {
   document.documentElement.setAttribute("data-theme", t), document.documentElement.classList.toggle("dark", t === "dark");
 }
 function n() {
-  return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+  const t = document.documentElement.getAttribute("data-theme");
+  return t === "dark" || t === "acme" || t === "light" ? t : "light";
 }
-function c() {
-  const e = n() === "light" ? "dark" : "light";
+function a() {
+  const e = n() === "dark" ? "light" : "dark";
   return r(e), e;
 }
 function i() {
   return n() === "dark";
 }
-function a() {
+function o() {
   return n() === "light";
 }
-const d = {
+const m = {
   light: "light",
-  dark: "dark"
+  dark: "dark",
+  acme: "acme"
 };
 export {
   u as applyTheme,
   n as getCurrentTheme,
-  o as getThemeCSS,
+  c as getThemeCSS,
   i as isDarkTheme,
-  a as isLightTheme,
+  o as isLightTheme,
   r as setGlobalTheme,
-  d as themes,
-  c as toggleTheme
+  m as themes,
+  a as toggleTheme
 };

package/index.d.ts

@@ -0,0 +1,15 @@
+export const themes: {
+  readonly light: "light";
+  readonly dark: "dark";
+  readonly acme: "acme";
+};
+
+export type ThemeName = keyof typeof themes;
+
+export function applyTheme(element: HTMLElement, themeName: ThemeName): void;
+export function getThemeCSS(themeName: ThemeName): string;
+export function setGlobalTheme(themeName: ThemeName): void;
+export function getCurrentTheme(): ThemeName;
+export function toggleTheme(): ThemeName;
+export function isDarkTheme(): boolean;
+export function isLightTheme(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/themes",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Themes and styling system for Editora Rich Text Editor with light/dark mode support",
   "author": "Ajay Kumar <ajaykr089@gmail.com>",
   "license": "MIT",
@@ -24,20 +24,22 @@
   ],
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "index.d.ts",
   "style": "src/index.css",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
     },
-    "./theme.css": "./src/index.css",
     "./themes/*": "./src/themes/*.css",
-    "./themes/default.css": "./src/themes/default.css"
+    "./themes/default.css": "./src/themes/default.css",
+    "./themes/dark.css": "./src/themes/dark.css",
+    "./themes/acme.css": "./src/themes/acme.css"
   },
   "files": [
     "dist",
+    "index.d.ts",
     "src/*.css",
     "src/themes/*.css",
     "README.md",
@@ -57,4 +59,4 @@
     "access": "public"
   },
   "gitHead": "694494db58b809f0dcf24501696284faa1ab68a5"
-}
+}