colorsbymax 0.3.3 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 What changed in each colorsbymax release. Update with `npm install colorsbymax@latest`.
 
+## 0.4.1 (2026-09-27)
+
+- **Export as CSS.** Import / export now has a JSON / CSS switch: CSS gives the current theme as `--color-*` variables on `:root`, to copy or download as a `.css` file.
+- **Room for a bar above your nav.** Set `--colorsbymax-offset-top` on `<html>` (in px) to the height of anything pinned to the top of your page, such as an announcement banner, and the colour button and its panel move down by it instead of sitting on top of it.
+
+## 0.4.0 (2026-09-26)
+
+- **`features` config option: switch parts of the panel off for everyone,** e.g. `{ scan: false, audit: false }`: Max's picks, the library, search, Surprise me, Scan site, custom palettes, single-colour overrides, import / export, Audit, Add to site, the Subtle / Colourful switch and colour counts. It's read live, so a site can turn things off from its own settings without a redeploy.
+- **Choose how many colours a theme uses, 5 to 10.** Every theme starts with its five core colours (brand, gradient partner, deep brand, background and text), for a calm, cohesive site. − and + on the theme in use add or remove colours for that theme, and the panel's settings set the count for every theme, with a sample palette. Extras come back in order of how well they fit the theme (in a forest theme, green chart colours before a bright blue), and a colour that's left out is painted with the ones that remain, so the site really uses fewer. Every one of the 715 library themes, light and dark, at every count, keeps its contrast.
+- **The panel starts folded.** Preset themes, Custom palettes, Override a single colour and Import / export all start closed on a first look, so it isn't overwhelming; each opens with a tap (and, like everything else, stays as you left it when you close and reopen the panel).
+- **Search by colour.** Typing clears the way: the groups and the library step aside so only matching themes show, with a count and a Light / Dark switch above them. A colour word ("red", "navy") finds themes by their actual colours, not only their names, and suggestions finish the word as you type ("b": blue, brown, black…), mood names included.
+- **Closing the panel is like minimising it.** Open it again and it's just as you left it: the same group or library mood, search, open sections and scroll position.
+- **Colourful and Subtle.** On a site colorsbymax re-colours (one that doesn't paint with the --color-* variables), themes used to only swap the colours the site already had, so a plain white-and-black site barely changed. The new **Colourful** style, now the default, paints the page by role, like colorsbymax's own site: the header, a hero lit with the brand colour (with any emphasis in its headline as a gradient), sections taking turns with a soft tint, cards, brand-coloured buttons and links, deep-brand headings, badges, fields, tables and quotes, a brand-gradient call to action, and a footer in the secondary colour, with hover effects. Every text colour is checked against what it sits on. **Subtle** keeps the old behaviour there. The switch is in the panel on every site: on one painted with the colour tokens (like colorsbymax's own), Subtle calms the page's backgrounds, cards and tints to near-neutral and keeps the theme's colour for buttons, links and highlights, and the finish screen's CSS follows it. The new `colourStyle` config option sets the default.
+- **Black or grey logos stay readable on dark themes.** A logo keeps its own colours, but a plain black or grey one now follows the theme's text colour instead of vanishing on a dark background.
+- **The panel's header fits on a phone.** On a narrow panel the Light / Dark / Auto, Add to site, Audit and settings buttons no longer sit on top of the colorsbymax title; they sit on their own centred row below it, with a little more room. Reported through the site's feedback form.
+- **Picking colorsbymax, Max’s picks or Yours scrolls to its themes,** as picking a library mood already did, so the colours are right there. The scroll now also lands clear of the panel's header.
+- **The panel's header is centred on a phone:** the logo, name and "by mrmaxdesigns" on top, the tools on their own row below.
+- **A clearer library.** It sits in a box of its own with a heading that says what it is ("715 palettes sorted by mood"), so it reads as one place to browse.
+- **Nothing cut off on a phone:** the colorsbymax / Max’s picks / Yours labels wrap under their icons instead of being cut off, and the search box says "Search 700+ themes…" in full.
+- **Surprise me bursts with colour,** like the colour button, in the theme it just picked. When the group showing has a single theme it picks from the whole library, and never the theme already on.
+
 ## 0.3.3 (2026-09-25)
 
 - **The panel's header shows the mrmaxdesigns mark** (three slanted bars) before "colorsbymax", in the current theme's colours, deepened or lightened so each bar stands out on the light or dark panel.

package/README.md

@@ -241,7 +241,7 @@ When you're done choosing colours, the panel's **I'm done** button gives you rea
 - **Site themes first.** The panel opens on a group named after the site, holding its own colours. If those fail contrast, an accessible version is generated automatically.
 - **Scan the site.** Press "Scan site" and colorsbymax reads the colours actually painted on the page (ignoring any theme it has applied, and including gradients). It works out the page background, surfaces, text and brand colours, then adds themes named after the site: Scanned (as found), Accessible, Soft, Bold, Complementary, and the closest library matches. Scans run only when asked, and the results are remembered.
 - **Max’s picks and library.** 5 hand-tuned picks, plus 715 library themes (Bright, Fun, Pastel, Earth tones, Summer, Autumn, Winter, Spring, Ocean, Warm, Nature, Moody, Monochrome, Eclectic) with search and "Surprise me". The library loads only when the panel opens.
-- **Custom palettes, single-colour overrides, JSON import/export.**
+- **Custom palettes, single-colour overrides, import and export as JSON or CSS.**
 - **Palettes from images and PDFs.** In Import / export, upload or drop a mood board, screenshot or photo, or paste one straight from the clipboard: take a screenshot, open the panel and press Ctrl+V (⌘V on a Mac), or use **Paste image**. colorsbymax picks out its main colours, lets you leave any out, previews the palette it builds around them and saves it as a custom palette. Nothing leaves the browser. PDFs, such as brand guides, work where the site [turns them on](#pdf-uploads); hex codes written in a PDF take priority.
 - **Contrast checks.** Problems show as a badge on the theme; the breakdown offers per-item fixes or "Fix all automatically", which changes lightness only.
 - **No flash on reload.** An inline pre-paint script applies the saved theme before the page draws.
@@ -330,11 +330,23 @@ Without a `siteName`, the site group is named from the page's `og:site_name`, it
                                     // 'dark', or 'system' to follow their device
   colourLogo: false,                // themes colour the logo too, for first-time visitors (default
                                     // false: it keeps its own colours); visitors can change it
+  features: { scan: false },        // parts of the panel to switch off for everyone (all on by default):
+                                    // picks, library, search, surprise, scan, custom, overrides,
+                                    // importExport, audit, addToSite, colourStyle, colourCount
+  colourStyle: 'colourful',         // on a site colorsbymax re-colours: 'colourful' (default) paints
+                                    // its header, hero, sections, cards, buttons and footer by role;
+                                    // 'subtle' only swaps the colours it already has
   intro: true,                      // the button pops in with a burst of the theme's colours a moment
                                     // after the page loads (default); reduced motion fades it in
 }
 ```
 
+A bar pinned above your nav (an announcement, a cookie notice)? Set its height on `<html>` and the colour button and panel make room for it:
+
+```js
+document.documentElement.style.setProperty('--colorsbymax-offset-top', `${bar.offsetHeight}px`)
+```
+
 ### Dark mode
 
 Dark mode works on any site: every theme has a dark twin, so choosing Dark (or Auto, on a device set to dark) re-colours the whole page, and text, buttons and icons are checked for contrast on the dark background. It applies on every page load, and keeps working when the switcher is hidden in production.