@rathkit/rte-themes 0.0.0 → 0.1.0-alpha.3

package/README.md

@@ -1,11 +1,41 @@
 # @rathkit/rte-themes
 
-This version is an empty placeholder. It holds no code.
+> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
 
-@rathkit/rte-themes is in alpha. Install the alpha with the `next` tag:
+Preset themes (light, dark, auto, high contrast) and a density setting, as CSS files of `--rk-*` custom properties, with tests that every pair of colors meets its contrast ratio.
+
+## Install
 
 ```sh
 npm install @rathkit/rte-themes@next
 ```
 
-About the project: https://rathkit.com
+No dependencies, and nothing runs when it is installed.
+
+## Example
+
+```js
+import { createEditor } from "@rathkit/rte-core/standard";
+import { createStandardUi } from "@rathkit/rte-ui/standard";
+import "@rathkit/rte-ui/base.css";
+import "@rathkit/rte-themes/dark.css";
+
+const root = document.createElement("div");
+document.body.append(root);
+const surface = document.createElement("div");
+surface.setAttribute("aria-label", "Body");
+
+const editor = createEditor({ element: surface, html: "<p>Hello</p>" });
+editor.subscribe(() => console.log(editor.getHtml()));
+createStandardUi(editor, { root, style: { theme: "dark" } });
+```
+
+The other presets are `light.css`, `auto.css` (follows the system's dark setting) and `high-contrast.css`, with `density.css` for compact and comfortable spacing; the token names are also exported from the package entry point (`TOKENS`).
+
+## More
+
+Documentation: <https://rathkit.com>. Source and issues: <https://github.com/rathkit/rte>. What is checked: [SUPPORT.md](https://github.com/rathkit/rte/blob/main/docs/SUPPORT.md). Changes: [CHANGELOG.md](https://github.com/rathkit/rte/blob/main/CHANGELOG.md). How a release is verified: [VERIFY.md](https://github.com/rathkit/rte/blob/main/docs/VERIFY.md).
+
+## License
+
+[Apache-2.0](LICENSE)

package/css/auto.css

@@ -0,0 +1,86 @@
+/* Rathkit RTE theme: auto. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
+   Scope: any element with data-rk-theme="auto" (normally the .rk-root of an editor), never :root. */
+:where([data-rk-theme="auto"]) {
+  --rk-space-1: 4px;
+  --rk-space-2: 8px;
+  --rk-space-3: 12px;
+  --rk-space-4: 16px;
+  --rk-control-size: 32px;
+  --rk-radius-s: 4px;
+  --rk-radius-m: 8px;
+  --rk-border-width: 1px;
+  --rk-focus-width: 2px;
+  --rk-focus-offset: 2px;
+  --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
+  --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --rk-font-size: 16px;
+  --rk-line-height: 1.55;
+  --rk-motion-duration: 120ms;
+  --rk-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
+  --rk-bg: #ffffff;
+  --rk-surface: #f4f6f9;
+  --rk-surface-raised: #ffffff;
+  --rk-fg: #14181f;
+  --rk-fg-muted: #505b6b;
+  --rk-border: #78849a;
+  --rk-border-subtle: #d4dae3;
+  --rk-accent: #17408b;
+  --rk-accent-fg: #ffffff;
+  --rk-accent-subtle: #e3ecfa;
+  --rk-danger: #b3261e;
+  --rk-selection-bg: #cddffa;
+  --rk-control-hover: #e6ebf3;
+  --rk-control-active: #d3dcec;
+  --rk-brand: #b9812a;
+  --rk-brand-text: #86590f;
+  --rk-focus-color: #17408b;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where([data-rk-theme="auto"]:not([data-rk-scheme="light"])) {
+    --rk-bg: #10151d;
+    --rk-surface: #171e29;
+    --rk-surface-raised: #1d2633;
+    --rk-fg: #eaeef4;
+    --rk-fg-muted: #a9b4c3;
+    --rk-border: #6b7789;
+    --rk-border-subtle: #2b3646;
+    --rk-accent: #6fa0e8;
+    --rk-accent-fg: #0b1a33;
+    --rk-accent-subtle: #1d3257;
+    --rk-danger: #ff8f86;
+    --rk-selection-bg: #294a80;
+    --rk-control-hover: #243044;
+    --rk-control-active: #2f3e57;
+    --rk-brand: #e0a850;
+    --rk-brand-text: #e0a850;
+    --rk-focus-color: #9bc0f5;
+    --rk-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
+    color-scheme: dark;
+  }
+}
+
+:where([data-rk-theme="auto"][data-rk-scheme="dark"]) {
+  --rk-bg: #10151d;
+  --rk-surface: #171e29;
+  --rk-surface-raised: #1d2633;
+  --rk-fg: #eaeef4;
+  --rk-fg-muted: #a9b4c3;
+  --rk-border: #6b7789;
+  --rk-border-subtle: #2b3646;
+  --rk-accent: #6fa0e8;
+  --rk-accent-fg: #0b1a33;
+  --rk-accent-subtle: #1d3257;
+  --rk-danger: #ff8f86;
+  --rk-selection-bg: #294a80;
+  --rk-control-hover: #243044;
+  --rk-control-active: #2f3e57;
+  --rk-brand: #e0a850;
+  --rk-brand-text: #e0a850;
+  --rk-focus-color: #9bc0f5;
+  --rk-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
+  color-scheme: dark;
+}

package/css/dark.css

@@ -0,0 +1,40 @@
+/* Rathkit RTE theme: dark. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
+   Scope: any element with data-rk-theme="dark" (normally the .rk-root of an editor), never :root. */
+:where([data-rk-theme="dark"]) {
+  --rk-space-1: 4px;
+  --rk-space-2: 8px;
+  --rk-space-3: 12px;
+  --rk-space-4: 16px;
+  --rk-control-size: 32px;
+  --rk-radius-s: 4px;
+  --rk-radius-m: 8px;
+  --rk-border-width: 1px;
+  --rk-focus-width: 2px;
+  --rk-focus-offset: 2px;
+  --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
+  --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --rk-font-size: 16px;
+  --rk-line-height: 1.55;
+  --rk-motion-duration: 120ms;
+  --rk-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
+  --rk-bg: #10151d;
+  --rk-surface: #171e29;
+  --rk-surface-raised: #1d2633;
+  --rk-fg: #eaeef4;
+  --rk-fg-muted: #a9b4c3;
+  --rk-border: #6b7789;
+  --rk-border-subtle: #2b3646;
+  --rk-accent: #6fa0e8;
+  --rk-accent-fg: #0b1a33;
+  --rk-accent-subtle: #1d3257;
+  --rk-danger: #ff8f86;
+  --rk-selection-bg: #294a80;
+  --rk-control-hover: #243044;
+  --rk-control-active: #2f3e57;
+  --rk-brand: #e0a850;
+  --rk-brand-text: #e0a850;
+  --rk-focus-color: #9bc0f5;
+  color-scheme: dark;
+}

package/css/density.css

@@ -0,0 +1,18 @@
+/* Density: set data-rk-density="compact" or "comfortable" on the root. It changes space and control size only, whatever the theme. */
+:where([data-rk-density="compact"]) {
+  --rk-space-1: 2px;
+  --rk-space-2: 4px;
+  --rk-space-3: 8px;
+  --rk-space-4: 12px;
+  --rk-control-size: 28px;
+  --rk-font-size: 15px;
+  --rk-line-height: 1.5;
+}
+
+:where([data-rk-density="comfortable"]) {
+  --rk-space-1: 6px;
+  --rk-space-2: 10px;
+  --rk-space-3: 14px;
+  --rk-space-4: 20px;
+  --rk-control-size: 40px;
+}

package/css/high-contrast.css

@@ -0,0 +1,40 @@
+/* Rathkit RTE theme: high-contrast. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
+   Scope: any element with data-rk-theme="high-contrast" (normally the .rk-root of an editor), never :root. */
+:where([data-rk-theme="high-contrast"]) {
+  --rk-space-1: 4px;
+  --rk-space-2: 8px;
+  --rk-space-3: 12px;
+  --rk-space-4: 16px;
+  --rk-control-size: 32px;
+  --rk-radius-s: 4px;
+  --rk-radius-m: 8px;
+  --rk-border-width: 2px;
+  --rk-focus-width: 3px;
+  --rk-focus-offset: 2px;
+  --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
+  --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --rk-font-size: 16px;
+  --rk-line-height: 1.55;
+  --rk-motion-duration: 0ms;
+  --rk-shadow-popover: none;
+  --rk-bg: #000000;
+  --rk-surface: #000000;
+  --rk-surface-raised: #000000;
+  --rk-fg: #ffffff;
+  --rk-fg-muted: #e6e6e6;
+  --rk-border: #ffffff;
+  --rk-border-subtle: #ffffff;
+  --rk-accent: #ffd54a;
+  --rk-accent-fg: #000000;
+  --rk-accent-subtle: #2a2a00;
+  --rk-danger: #ff9a9a;
+  --rk-selection-bg: #0a3cff;
+  --rk-control-hover: #1f1f1f;
+  --rk-control-active: #3a3a3a;
+  --rk-brand: #ffd54a;
+  --rk-brand-text: #ffd54a;
+  --rk-focus-color: #ffd54a;
+  color-scheme: dark;
+}

package/css/light.css

@@ -0,0 +1,40 @@
+/* Rathkit RTE theme: light. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
+   Scope: any element with data-rk-theme="light" (normally the .rk-root of an editor), never :root. */
+:where([data-rk-theme="light"]) {
+  --rk-space-1: 4px;
+  --rk-space-2: 8px;
+  --rk-space-3: 12px;
+  --rk-space-4: 16px;
+  --rk-control-size: 32px;
+  --rk-radius-s: 4px;
+  --rk-radius-m: 8px;
+  --rk-border-width: 1px;
+  --rk-focus-width: 2px;
+  --rk-focus-offset: 2px;
+  --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
+  --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --rk-font-size: 16px;
+  --rk-line-height: 1.55;
+  --rk-motion-duration: 120ms;
+  --rk-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
+  --rk-bg: #ffffff;
+  --rk-surface: #f4f6f9;
+  --rk-surface-raised: #ffffff;
+  --rk-fg: #14181f;
+  --rk-fg-muted: #505b6b;
+  --rk-border: #78849a;
+  --rk-border-subtle: #d4dae3;
+  --rk-accent: #17408b;
+  --rk-accent-fg: #ffffff;
+  --rk-accent-subtle: #e3ecfa;
+  --rk-danger: #b3261e;
+  --rk-selection-bg: #cddffa;
+  --rk-control-hover: #e6ebf3;
+  --rk-control-active: #d3dcec;
+  --rk-brand: #b9812a;
+  --rk-brand-text: #86590f;
+  --rk-focus-color: #17408b;
+  color-scheme: light;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { THEMES, TOKENS, type ThemeName, type TokenName } from "./tokens.ts";

package/dist/index.js

@@ -0,0 +1 @@
+export { THEMES, TOKENS } from "./tokens.js";

package/dist/tokens.d.ts

@@ -0,0 +1,5 @@
+export declare const TOKENS: readonly ["--rk-accent", "--rk-accent-fg", "--rk-accent-subtle", "--rk-bg", "--rk-border", "--rk-border-subtle", "--rk-border-width", "--rk-brand", "--rk-brand-text", "--rk-control-active", "--rk-control-hover", "--rk-control-size", "--rk-danger", "--rk-fg", "--rk-fg-muted", "--rk-focus-color", "--rk-focus-offset", "--rk-focus-width", "--rk-font-content", "--rk-font-heading", "--rk-font-mono", "--rk-font-size", "--rk-font-ui", "--rk-line-height", "--rk-motion-duration", "--rk-radius-m", "--rk-radius-s", "--rk-selection-bg", "--rk-shadow-popover", "--rk-space-1", "--rk-space-2", "--rk-space-3", "--rk-space-4", "--rk-surface", "--rk-surface-raised"];
+export type TokenName = (typeof TOKENS)[number];
+/** Themes that ship as CSS files in this package. */
+export declare const THEMES: readonly ["light", "dark", "auto", "high-contrast"];
+export type ThemeName = (typeof THEMES)[number];

package/dist/tokens.js

@@ -0,0 +1,38 @@
+export const TOKENS = [
+    "--rk-accent",
+    "--rk-accent-fg",
+    "--rk-accent-subtle",
+    "--rk-bg",
+    "--rk-border",
+    "--rk-border-subtle",
+    "--rk-border-width",
+    "--rk-brand",
+    "--rk-brand-text",
+    "--rk-control-active",
+    "--rk-control-hover",
+    "--rk-control-size",
+    "--rk-danger",
+    "--rk-fg",
+    "--rk-fg-muted",
+    "--rk-focus-color",
+    "--rk-focus-offset",
+    "--rk-focus-width",
+    "--rk-font-content",
+    "--rk-font-heading",
+    "--rk-font-mono",
+    "--rk-font-size",
+    "--rk-font-ui",
+    "--rk-line-height",
+    "--rk-motion-duration",
+    "--rk-radius-m",
+    "--rk-radius-s",
+    "--rk-selection-bg",
+    "--rk-shadow-popover",
+    "--rk-space-1",
+    "--rk-space-2",
+    "--rk-space-3",
+    "--rk-space-4",
+    "--rk-surface",
+    "--rk-surface-raised",
+];
+export const THEMES = ["light", "dark", "auto", "high-contrast"];

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@rathkit/rte-themes",
-  "version": "0.0.0",
-  "description": "Placeholder. @rathkit/rte-themes is in alpha: install it with the next tag.",
+  "version": "0.1.0-alpha.3",
+  "description": "Preset themes for the Rathkit RTE interface: design token values, as plain CSS.",
+  "keywords": [
+    "rich-text",
+    "editor",
+    "wysiwyg",
+    "contenteditable",
+    "zero-dependencies",
+    "typescript",
+    "themes",
+    "css-variables"
+  ],
   "license": "Apache-2.0",
   "homepage": "https://rathkit.com",
   "repository": {
@@ -12,7 +22,41 @@
   "bugs": {
     "url": "https://github.com/rathkit/rte/issues"
   },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=22.14.0"
+  },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true,
+    "tag": "next"
+  },
+  "files": [
+    "dist",
+    "NOTICE",
+    "css",
+    "!dist/**/*.map"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./light.css": "./css/light.css",
+    "./dark.css": "./css/dark.css",
+    "./auto.css": "./css/auto.css",
+    "./high-contrast.css": "./css/high-contrast.css",
+    "./density.css": "./css/density.css"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && tsc -p tsconfig.build.js.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "node --test \"src/**/*.test.ts\""
+  },
+  "rathkit": {
+    "budgets": []
   }
 }