colorsbymax 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colorsbymax",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A live theme switcher for any website: site themes, 700+ palettes, for light/dark modes and WCAG contrast checks.",
   "keywords": [
     "theme",
@@ -32,6 +32,9 @@
     "*": {
       "pdf": [
         "./types/pdf.d.ts"
+      ],
+      "auto": [
+        "./types/auto.d.ts"
       ]
     }
   },
@@ -41,6 +44,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./auto": {
+      "types": "./types/auto.d.ts",
+      "import": "./dist/auto.js",
+      "default": "./dist/auto.js"
+    },
     "./pdf": {
       "types": "./types/pdf.d.ts",
       "import": "./dist/pdf.js",
@@ -49,17 +57,21 @@
     "./tokens.css": "./src/tokens.css",
     "./package.json": "./package.json"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/auto.js"
+  ],
   "engines": {
     "node": ">=18"
   },
   "files": [
     "dist",
     "types/index.d.ts",
+    "types/auto.d.ts",
     "types/pdf.d.ts",
     "src/tokens.css",
     "LICENSE",
-    "THIRD_PARTY_NOTICES.md"
+    "THIRD_PARTY_NOTICES.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dev": "vite",

package/types/auto.d.ts

@@ -0,0 +1,10 @@
+// Type declarations for 'colorsbymax/auto'. Importing the module mounts the colour button by
+// itself once the page has rendered: `import 'colorsbymax/auto'`.
+
+import type { ColorsByMaxConfig } from './index.js'
+
+/**
+ * Mounts the colour button and panel with settings, instead of the automatic mount. Calling it
+ * again replaces the previous mount. Returns a function that removes it.
+ */
+export function autoMount(config?: ColorsByMaxConfig): () => void

package/types/index.d.ts

@@ -69,6 +69,17 @@ export interface ColorsByMaxConfig {
   scrollbars?: boolean
   /** Enables PDF uploads: pass `loadPdf` from 'colorsbymax/pdf' (needs pdfjs-dist installed). */
   pdf?: () => Promise<unknown>
+  /**
+   * Re-colour a site that doesn't paint with the --color-* variables, by swapping the colours
+   * actually on the page. 'auto' (the default) does it only when the site doesn't define
+   * --color-primary itself; false never does.
+   */
+  recolour?: boolean | 'auto'
+  /**
+   * Where the colour button starts. Default 'bottom-right', like chat and help widgets;
+   * 'top-right' sits just under a floating nav bar. Visitors can still drag it anywhere.
+   */
+  position?: 'bottom-right' | 'bottom-left' | 'top-left' | 'top-right'
 }
 
 export interface ThemeProviderProps {
@@ -102,6 +113,9 @@ export interface ThemeApi {
   siteName: string
   usage: Partial<Record<TokenKey, string>>
   loadPdf: (() => Promise<unknown>) | null
+  position: 'bottom-right' | 'bottom-left' | 'top-left' | 'top-right'
+  /** True when colorsbymax is swapping the page's own colours (the site isn't using the variables). */
+  recolouring: boolean
   /** The site's own themes, then any scan suggestions. */
   siteThemes: Theme[]
   defaultTheme: Theme