@maildeno/editor 0.1.0

package/dist/theme.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Theming via CSS custom properties.
+ *
+ * Setting variables rather than regenerating a stylesheet is what makes this
+ * work in the custom-element build: the bundled shadow-root CSS is static and
+ * cannot be re-emitted at runtime, but a custom property set on the host
+ * cascades into the shadow tree and updates every rule reading it, live.
+ */
+/**
+ * Every themeable token.
+ *
+ * Two layers, deliberately. Core tokens (`primary`, `surface`, `text`, …)
+ * re-theme the whole editor coherently. Semantic tokens (`headerBg`,
+ * `inputBg`, `overlayBg`, …) default to the core ones and exist for hosts
+ * that want to change one surface without redefining everything else.
+ *
+ * Anything left out keeps its default, so a partial theme is always coherent
+ * rather than half-applied — setting only `primary` cannot produce unreadable
+ * text, and setting only `headerBg` cannot leave the rest inconsistent.
+ */
+export interface ThemeTokens {
+    /** Brand/accent colour. Drives the primary button, focus rings, selection. */
+    primary?: string;
+    primaryHover?: string;
+    /** Text/icon colour on top of `primary`. Set this when using a light brand
+     *  colour, or the primary button's label will be unreadable. */
+    onPrimary?: string;
+    /** Page background behind the canvas. */
+    background?: string;
+    /** Panels, header, toolbars, popovers. */
+    surface?: string;
+    /** Subtle fills — inactive tabs, secondary buttons. */
+    surfaceMuted?: string;
+    surfaceHover?: string;
+    text?: string;
+    textMuted?: string;
+    textSubtle?: string;
+    border?: string;
+    borderStrong?: string;
+    danger?: string;
+    onDanger?: string;
+    success?: string;
+    warning?: string;
+    info?: string;
+    /** Focus ring colour. Defaults to `primary`. */
+    ring?: string;
+    /** Box-shadow used by popovers and dialogs. */
+    shadow?: string;
+    /** Backdrop behind modal dialogs. */
+    scrim?: string;
+    headerBg?: string;
+    headerText?: string;
+    headerBorder?: string;
+    sidebarBg?: string;
+    sidebarText?: string;
+    sidebarBorder?: string;
+    /** Selected tab / segmented-control fill. Defaults to `primary`. */
+    accentBg?: string;
+    accentText?: string;
+    canvasBg?: string;
+    inputBg?: string;
+    inputText?: string;
+    inputBorder?: string;
+    inputPlaceholder?: string;
+    /** Dialogs, toasts, dropdowns, date picker and floating toolbars. */
+    overlayBg?: string;
+    overlayText?: string;
+    overlayBorder?: string;
+    overlayShadow?: string;
+    toolbarBg?: string;
+    toolbarText?: string;
+    toolbarBorder?: string;
+    /** The Save / Update button — the most commonly branded control. */
+    buttonPrimaryBg?: string;
+    buttonPrimaryText?: string;
+    buttonPrimaryHoverBg?: string;
+    buttonSecondaryBg?: string;
+    buttonSecondaryText?: string;
+    buttonSecondaryHoverBg?: string;
+    successBg?: string;
+    successFg?: string;
+    successBorder?: string;
+    infoBg?: string;
+    infoFg?: string;
+    infoBorder?: string;
+    warningBg?: string;
+    warningFg?: string;
+    warningBorder?: string;
+    dangerBg?: string;
+    dangerFg?: string;
+    dangerBorder?: string;
+}
+export interface ThemeOptions extends ThemeTokens {
+    /** Tokens applied only in light mode. */
+    light?: ThemeTokens;
+    /**
+     * Tokens applied only when the editor has the `dark` class.
+     *
+     * Dark mode has its own complete set of defaults, so overriding a couple of
+     * tokens here is enough — you do not have to restate a whole palette.
+     */
+    dark?: ThemeTokens;
+    /** @deprecated Use `primary`. */
+    primaryColor?: string;
+    /** @deprecated Use `surface`. */
+    surfaceColor?: string;
+}
+/**
+ * Applies theme tokens.
+ *
+ * ```ts
+ * setEditorTheme({
+ *   primary: "#6366f1",
+ *   buttonPrimaryText: "#ffffff",
+ *   dark: { primary: "#818cf8", headerBg: "#0f172a" },
+ * });
+ * ```
+ *
+ * @param target For the plain Vue build, omit — defaults to
+ *   `document.documentElement`. For the custom-element build, pass the
+ *   `<maildeno-editor>` element, so the properties cascade into its shadow
+ *   tree. `handle.setTheme()` does this for you.
+ */
+export declare function setEditorTheme(options: ThemeOptions, target?: HTMLElement): void;
+/**
+ * Expands one hex colour into a 50–950 shade scale.
+ *
+ * The editor's own tokens no longer need this — `primary` and
+ * `primaryHover` are set directly — but it stays exported because hosts use
+ * it to derive matching shades for their own UI around the editor.
+ */
+export declare function palette(hex: string): Record<string, string>;