colorsbymax 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/README.md +500 -488
- package/THIRD_PARTY_NOTICES.md +1 -1
- package/dist/{ThemeSwitcher-BFOWqFUZ.js → ThemeSwitcher-Cns36kps.js} +4899 -1884
- package/dist/auto.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/types/index.d.ts +27 -8
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
What changed in each colorsbymax release. Update with `npm install colorsbymax@latest`.
|
|
4
4
|
|
|
5
|
+
## 0.5.0 (2026-10-01)
|
|
6
|
+
|
|
7
|
+
- **Studio.** A new **Studio** button in the panel header opens a deeper way to colour a site, with **Back to the switcher** to return to the quick one. It starts with where the colours go: the whole site, or only some pages. Studio offers the site's own pages (the ones the page links to, and the ones you've opened), and `/*` covers a whole section. The choice is saved on your device, and Studio gives you the config line and an AI-editor prompt that make it everyone's. Pages left out keep their own colours, dark mode included; the quick switcher says so when you open it there. Switch Studio off with `features: { studio: false }`.
|
|
8
|
+
- **Studio: point and click.** Click any part of the page (a button, a card, a heading, the footer) and give it its own background, text and border, from the theme's colours or any colour. Change just that part or every part like it, step out to the part around it or back into the part inside it, and see at once whether its text is readable: every piece of text in it is checked against what it really sits on, and **Fix** picks a text colour that reads on all of it and checks the result. Swatches that would be hard to read are marked. Picking another theme while you have Studio changes asks whether to keep or clear them. Changes are listed page by page, kept on your device and drawn before the page first shows, and **Keep them for good** turns them into a prompt for your AI editor, or plain CSS.
|
|
9
|
+
- **Subtle, Balanced and Colourful, on every site.** The colour style now makes a clear difference everywhere. **Subtle** keeps your site's own backgrounds, cards and text; the theme's colour comes in on buttons, links and highlights, with only a quiet hint of it on badges and tints (on a plain black-and-white site too). **Balanced** (new) is the theme in every role, with a soft wash of it across the page, cards and borders, so it shows even where a theme's own backgrounds are nearly white. Your site's own colours stay exactly as designed. **Colourful** is an overhaul: the page, cards and borders take a clear tint of the brand, light or dark, and text and headings a hint of it. On a site that paints with the colour variables it works through them alone, so the site's own design decides where each colour goes; on a site colorsbymax re-colours it also paints the page by role (header, hero, tinted sections, headings, cards, buttons and footer).
|
|
10
|
+
- **A contrast guard, on every site and in every style.** After the colours change, every piece of text and every icon is checked against what it really sits on, see-through layers and gradients included, and anything hard to read is brought up to WCAG (4.5:1 for text, 3:1 for large text and icons), keeping its own hue where it can so status colours keep their meaning. It never runs while you scroll. Mark a deliberate example of poor contrast `data-colorsbymax-contrast="keep"` to leave it as it is.
|
|
11
|
+
- **A bell for updates and news.** When a newer colorsbymax is published, the panel's bell (and a red dot on the colour button) says so, with what changed, `npm install colorsbymax@latest` to copy, a prompt for your AI editor and a link to the changelog. It also shows news from mrmaxdesigns. It checks once a day, and by default only on development addresses, never to a live site's visitors; set `updates: true` or `false` to choose.
|
|
12
|
+
- **A strength slider for Colourful,** from a light wash to bold: how much the page, sections and cards are tinted, whether headings take the brand colour, and how deep the footer goes. `colourStrength` (0 to 100) sets where first-time visitors start.
|
|
13
|
+
- **Tints from your pictures.** Colourful can take its washes from your logo and photos, so they feel made for your site; buttons and links keep the theme's colours. It's on by default, and the panel shows the colours it found. Pictures from another site that doesn't allow reading them are skipped.
|
|
14
|
+
- **Studio learns across pages.** A change can go on just one part, every part like it on the page, or every part like it on every page of your site. Those show on every page as you open them, and the prompt asks your AI editor to change the shared component.
|
|
15
|
+
- **Colourful reads the page more deeply,** on sites colorsbymax re-colours. Besides the header, hero, sections, cards and footer, it now recognises pricing tables (plans as cards, the most popular one ringed in the brand colour), testimonials (on their own wash, with a brand bar on each), forms (a tinted band, a raised form box, readable labels), image-led sections (kept on the plain page colour so pictures show true, with a soft shadow) and the current page in the menu.
|
|
16
|
+
- **`pages` config option: only colour some pages,** e.g. `pages: ['/', '/pricing', '/blog/*']`. Every other page keeps its own colours. Single-page apps are followed as they change page, and the pre-paint script leaves those pages alone too, so they never flash in the theme.
|
|
17
|
+
- **A calmer panel header:** just Light, Dark and Auto, Studio and settings. **Audit** moved into Studio (it stays in the header if a site switches Studio off), and **Add a light and dark switch to your site** into settings and the I'm done screen.
|
|
18
|
+
- **A tidier panel.** The Subtle / Colourful switch and Scan site have their own **Colour style** section above Preset themes, so Preset themes opens straight onto search, Surprise me and the themes. The current theme's name shows beside Preset themes.
|
|
19
|
+
- The panel's heading reads plain "colorsbymax", without the ™.
|
|
20
|
+
- **Upgrading:** sites that paint with the `--color-*` variables now start in Balanced: their own colours look exactly as before, and other themes take a soft wash. Sites colorsbymax re-colours still start in Colourful. Set `colourStyle` to choose. A visitor who had picked Colourful on a variables site now sees its stronger tints.
|
|
21
|
+
- **Upgrading:** if you copied the pre-paint script into your HTML by hand, copy the new one from `prePaintScript()`. The old one still works, but it would briefly paint the theme on pages left out.
|
|
22
|
+
|
|
5
23
|
## 0.4.1 (2026-09-27)
|
|
6
24
|
|
|
7
25
|
- **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.
|