colorsbymax 0.4.0 → 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 +133 -110
- package/README.md +26 -8
- package/THIRD_PARTY_NOTICES.md +1 -1
- package/dist/{ThemeSwitcher-DB_-2YB8.js → ThemeSwitcher-Cns36kps.js} +4971 -1896
- 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
|
@@ -1,110 +1,133 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
What changed in each colorsbymax release. Update with `npm install colorsbymax@latest`.
|
|
4
|
-
|
|
5
|
-
## 0.
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
- **
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
11
|
-
- **
|
|
12
|
-
- **
|
|
13
|
-
- **
|
|
14
|
-
- **
|
|
15
|
-
- **
|
|
16
|
-
-
|
|
17
|
-
- **A
|
|
18
|
-
- **
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
- **
|
|
38
|
-
- **
|
|
39
|
-
- **
|
|
40
|
-
- **
|
|
41
|
-
- **
|
|
42
|
-
- **
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
- **The
|
|
47
|
-
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
-
|
|
52
|
-
- The
|
|
53
|
-
|
|
54
|
-
## 0.
|
|
55
|
-
|
|
56
|
-
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
- **
|
|
62
|
-
- **
|
|
63
|
-
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
- **
|
|
68
|
-
- **
|
|
69
|
-
- **
|
|
70
|
-
-
|
|
71
|
-
-
|
|
72
|
-
- **
|
|
73
|
-
-
|
|
74
|
-
- Fixed:
|
|
75
|
-
-
|
|
76
|
-
|
|
77
|
-
## 0.2.
|
|
78
|
-
|
|
79
|
-
**
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
-
|
|
103
|
-
|
|
104
|
-
- **
|
|
105
|
-
-
|
|
106
|
-
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
What changed in each colorsbymax release. Update with `npm install colorsbymax@latest`.
|
|
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
|
+
|
|
23
|
+
## 0.4.1 (2026-09-27)
|
|
24
|
+
|
|
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.
|
|
26
|
+
- **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.
|
|
27
|
+
|
|
28
|
+
## 0.4.0 (2026-09-26)
|
|
29
|
+
|
|
30
|
+
- **`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.
|
|
31
|
+
- **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.
|
|
32
|
+
- **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).
|
|
33
|
+
- **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.
|
|
34
|
+
- **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.
|
|
35
|
+
- **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.
|
|
36
|
+
- **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.
|
|
37
|
+
- **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.
|
|
38
|
+
- **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.
|
|
39
|
+
- **The panel's header is centred on a phone:** the logo, name and "by mrmaxdesigns" on top, the tools on their own row below.
|
|
40
|
+
- **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.
|
|
41
|
+
- **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.
|
|
42
|
+
- **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.
|
|
43
|
+
|
|
44
|
+
## 0.3.3 (2026-09-25)
|
|
45
|
+
|
|
46
|
+
- **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.
|
|
47
|
+
- The colorsbymax site: feedback reports are now emailed straight to Max (through Resend), screenshots attached; the floating tags around the hero are gone.
|
|
48
|
+
|
|
49
|
+
## 0.3.2 (2026-09-25)
|
|
50
|
+
|
|
51
|
+
- **`defaultMode` config option:** the mode first-time visitors start in, `'light'` (the default), `'dark'` or `'system'` to follow their device. Any site can start dark, since every theme has a dark twin, and visitors can still switch. The colorsbymax site now opens in dark mode.
|
|
52
|
+
- The colorsbymax site's browser-tab icon is the mrmaxdesigns logo mark in the current theme's colours, with a version for light tabs and one for dark tabs, each checked to stand out.
|
|
53
|
+
|
|
54
|
+
## 0.3.1 (2026-09-25)
|
|
55
|
+
|
|
56
|
+
- **`colourLogo` config option:** start with "Colour the logo too" on, for sites whose logo is drawn in the theme's colours. It's off by default, so logos keep their own colours, and visitors can still change it in settings. It also applies when the switcher is hidden. The colorsbymax site turns it on for its wordmark.
|
|
57
|
+
|
|
58
|
+
## 0.3.0 (2026-09-25)
|
|
59
|
+
|
|
60
|
+
- **Dark mode for every site, on every load.** The mode now lives in the theme provider: a saved Dark (or Auto on a dark device) turns the whole site dark as soon as it loads, not only when the mode is changed, and it keeps working when the switcher is hidden. Before, the panel could go dark while the site stayed light. Sites without a dark mode of their own get one: every theme's dark twin re-colours the page, contrast-checked.
|
|
61
|
+
- **A light and dark switch for your site:** mark any element with `data-colorsbymax-mode="toggle"` (or `light`, `dark`, `system`) and colorsbymax wires it up and remembers the choice. `<html>` gets `data-colorsbymax-scheme` with the current mode, and `useTheme()` has `mode`, `modeSetting` and `setMode`.
|
|
62
|
+
- **Light, Dark and Auto in the panel's header**, next to Audit, so they're one click away.
|
|
63
|
+
- **"Add to site": a light and dark switch for your site.** Next to the mode buttons, it previews a working switch in your page's top bar (until reload) and gives the code (HTML or React, plus styles) and a prompt for Claude, Cursor or Copilot to add it for good.
|
|
64
|
+
- **Plain sites show off a theme.** On a site with no brand colour of its own (greys and text), grey icons and plain text links now take the theme's brand colour, contrast-checked, so a theme visibly changes the page.
|
|
65
|
+
- **A burst of colour on every click** of the colour button, not only when it first appears.
|
|
66
|
+
- **The panel stays open while you drag the button**, and moves with it.
|
|
67
|
+
- **Picking a library category scrolls to its themes**, so the colours are in view straight away.
|
|
68
|
+
- **Feedback on the colorsbymax site:** a Feedback button in the top bar (and the menu and footer) opens a form for bug reports, suggestions, praise and questions, with the areas it's about, a rating, steps to reproduce, expected and actual results, severity, several screenshots (pasted, dropped, chosen or captured from the page) and technical details attached automatically. The coffee and bakery demo pages are gone: the colorsbymax site is the demo. The site also asks for feedback in its own section, and has a support page (buy Max a coffee, coming soon).
|
|
69
|
+
- **The colour button makes an entrance.** A moment after the page loads, it pops in with a burst of squiggles, dots and dashes in the theme's colours, so visitors notice it arrive. With reduced motion it simply fades in. Turn it off with `intro: false`.
|
|
70
|
+
- **A new colorsbymax site** at [mrmaxdesigns.com/colorsbymax](https://mrmaxdesigns.com/colorsbymax): what colorsbymax does and why, every colour role explained with a live preview, the rules of good colour (with a little history), setup guides, coding-agent setup, and a way back to mrmaxdesigns.com. Every colour on it follows the theme you pick.
|
|
71
|
+
- **Set-up steps for many more coding agents,** in the README, the MCP README and the site: GitHub Copilot CLI, Codex, Google Antigravity, Gemini CLI, Grok Build, Windsurf, Kiro, Zed, JetBrains, Cline and Roo, and opencode, alongside Claude Code, Cursor, VS Code and Claude Desktop. The MCP server's docs tool has a new `agents` topic with all of them (colorsbymax-mcp 0.1.3).
|
|
72
|
+
- **Dark themes always read.** A dark twin's brand, data and status colours are now lifted until they measurably pass against the dark background, and buttons get whichever text colour (dark or white) reads best. Before, a few vivid blues and violets stayed too dark to read (7 of the 720 built-in themes, and some sites' own colours); now every built-in theme passes every check in both light and dark.
|
|
73
|
+
- The colorsbymax site's own colours now pass every contrast check in light and dark.
|
|
74
|
+
- Fixed: when the colour button was hidden on a device, the next page load could stop the switcher with an error.
|
|
75
|
+
- The demo is live at [mrmaxdesigns.com/colorsbymax](https://mrmaxdesigns.com/colorsbymax), now the package's homepage.
|
|
76
|
+
|
|
77
|
+
## 0.2.3 (2026-09-25)
|
|
78
|
+
|
|
79
|
+
- **Paste an image to build a palette.** Took a screenshot of something whose colours you like? Open the panel and press Ctrl+V (⌘V on a Mac), or use the new **Paste image** button in Import / export. Import / export opens by itself and shows a thumbnail of the image, marked "Image pasted", with its size and a button to remove it (dropped and chosen images get the same preview). Pasting text into a field still works as usual.
|
|
80
|
+
- The README and the MCP README now explain the steps after adding the MCP server: start a new session, ask your agent to add colorsbymax, and run your site.
|
|
81
|
+
|
|
82
|
+
## 0.2.2 (2026-09-25)
|
|
83
|
+
|
|
84
|
+
- **MCP server for AI agents.** [colorsbymax-mcp](mcp/) lets Claude Code, Cursor, VS Code Copilot and other agents set colorsbymax up in a project (with the right edits for Vite, Next.js, Remix, Astro, Nuxt, SvelteKit, plain HTML and more), find themes, build one from brand colours, check contrast and finish. Add it with `claude mcp add colorsbymax -- npx -y colorsbymax-mcp`.
|
|
85
|
+
- **A new README** with colour-coded sections and navigation, and a full guide to using colorsbymax with Claude Code, Cursor, VS Code Copilot, Claude Desktop, Windsurf, Cline and Codex, with or without the MCP server.
|
|
86
|
+
- Fixed: on sites whose body text is a warm or tinted dark (such as dark brown), re-colouring could take the text colour for the brand colour, so brand areas came out far too light or garish. The text colour is no longer a brand candidate.
|
|
87
|
+
|
|
88
|
+
## 0.2.1 (2026-09-25)
|
|
89
|
+
|
|
90
|
+
- **Smarter colours when re-colouring a site.** After swapping, text and icons are only adjusted to undo harm the swap did: a pair that reads as well as the site's original design did is left alone (so deliberately soft icons stay soft), and a fix keeps the design's intent, so white icons on a coloured pill stay white, using the nearest theme colour that works. Icon-only buttons are judged as icons (3:1), not text (4.5:1). Across 59 themes on a test site, nothing reads worse than the original design.
|
|
91
|
+
- **Audit.** A new Audit button in the panel header checks the page in the chosen colours and pins numbered notes to what won't look right: a logo that's hard to see (offering "Colour the logo", or, for picture logos colorsbymax can't re-colour, advice and a "Preview inverted" look), pictures whose solid background shows as a box against the theme, and text or icons below readable contrast. A bar by the colour button shows the count and the theme's own contrast issues, with Re-check and Close; it re-checks by itself when the colours or settings change.
|
|
92
|
+
- **"I'm done": finish without the switcher popping up in production.** A new button at the bottom of the panel shows your chosen colours and three ways to finish, each with code to copy and a prompt for Claude, Cursor or Copilot: keep the colours as the site's default and hide the switcher in production (it still shows in development), hide it on this device only (Alt+Shift+C or `?colorsbymax` brings it back), or remove colorsbymax and keep the colours in your CSS. Cancel goes back.
|
|
93
|
+
- **`hidden` config option:** hides the colour button while the theme still applies, e.g. `hidden: import.meta.env.PROD`.
|
|
94
|
+
- A `defaultTheme` in the config is now applied on re-coloured sites too (it used to be treated as the page's original look), and the page's own colours stay available as "… original".
|
|
95
|
+
- **"Colour the logo too" setting**, off by default: the site's logo keeps its own colours whatever the theme. It works on re-coloured sites and on sites using the colour variables. colorsbymax finds logos by `data-colorsbymax-logo`, or "logo" in a class, id or label, or common brand classes.
|
|
96
|
+
- Fixed: content that appeared while a theme was showing could be re-coloured from the theme's colours instead of the site's, giving the wrong colour (for example buttons turning blue).
|
|
97
|
+
- Fixed: decorative gradient strips, like animated underlines, were treated as the background behind text and icons.
|
|
98
|
+
- When an element changes class (a nav item becoming active), its contents are re-checked too.
|
|
99
|
+
|
|
100
|
+
## 0.2.0 (2026-09-25)
|
|
101
|
+
|
|
102
|
+
**Upgrading from 0.1.x:** the colour button moves to the bottom-right corner; add `position: 'top-right'` to keep it where it was. If your site doesn't use colorsbymax's `--color-*` variables, themes now re-colour it automatically; to keep the old behaviour (themes set only the variables), pass `recolour: false` in the config.
|
|
103
|
+
|
|
104
|
+
- **One-line setup.** `import 'colorsbymax/auto'` puts the colour button on the page with no wrapping or config. `autoMount(config)` from the same entry takes settings.
|
|
105
|
+
- **Re-colours any site.** Sites with hard-coded colours are re-coloured by swapping the colours actually on the page for the chosen theme's, including gradients, borders and SVG icons, and content that appears later. Sites that use the colour variables work exactly as before.
|
|
106
|
+
- **The colour button now starts in the bottom-right corner**, where chat and help widgets usually sit, and the panel opens above it. `position` picks another corner; `position: 'top-right'` keeps 0.1's spot just under a floating nav bar. Visitors can still drag it anywhere.
|
|
107
|
+
- The site's own group shows its original colours ("… original") when colorsbymax is re-colouring it.
|
|
108
|
+
|
|
109
|
+
## 0.1.1 (2026-09-25)
|
|
110
|
+
|
|
111
|
+
**Upgrading from 0.1.0:** nothing to change for most sites. The one exception: PDF uploads are now opt-in. To keep them, install `pdfjs-dist` and pass the loader in your config:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm install pdfjs-dist
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
import { loadPdf } from 'colorsbymax/pdf'
|
|
119
|
+
|
|
120
|
+
<ThemeProvider config={{ ...config, pdf: loadPdf }}>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Without it, "Palette from an image" still works; it just takes images only. If you call `coloursFromFile` yourself, pass `{ loadPdf }` as its second argument for PDFs.
|
|
124
|
+
|
|
125
|
+
- **TypeScript types included.** No more "Could not find a declaration file for module 'colorsbymax'" (TS7016) in strict projects; `useTheme()`, the config and the colour helpers are fully typed.
|
|
126
|
+
- **Much smaller install.** No runtime dependencies besides React: about 440 KB instead of 44 MB. The panel's icons are built in, so it no longer adds a second copy of `lucide-react` next to your own, and PDF.js is no longer installed unless you opt in.
|
|
127
|
+
- **No install scripts**, so npm has nothing to ask you to approve for colorsbymax.
|
|
128
|
+
- Site scans ignore colour transitions, so sites that animate colour changes scan their own colours rather than the applied theme's.
|
|
129
|
+
- README: an "At a glance" section (Tailwind is optional, ESM only, types included) and PDF opt-in docs.
|
|
130
|
+
|
|
131
|
+
## 0.1.0 (2026-09-25)
|
|
132
|
+
|
|
133
|
+
First release: the floating colour button and panel, site themes and scan, Max's picks and the 715-theme library, custom palettes, overrides, JSON import/export, palettes from images and PDFs, light and dark mode, visitor settings, and WCAG contrast checks with one-click fixes.
|
package/README.md
CHANGED
|
@@ -241,16 +241,19 @@ When you're done choosing colours, the panel's **I'm done** button gives you rea
|
|
|
241
241
|
- **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.
|
|
242
242
|
- **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.
|
|
243
243
|
- **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.
|
|
244
|
-
- **Custom palettes, single-colour overrides, JSON
|
|
244
|
+
- **Custom palettes, single-colour overrides, import and export as JSON or CSS.**
|
|
245
245
|
- **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.
|
|
246
246
|
- **Contrast checks.** Problems show as a badge on the theme; the breakdown offers per-item fixes or "Fix all automatically", which changes lightness only.
|
|
247
247
|
- **No flash on reload.** An inline pre-paint script applies the saved theme before the page draws.
|
|
248
248
|
- **Works on any site.** The panel carries its own stylesheet inside a shadow root, so it needs no Tailwind or other CSS from the site, and the site's CSS can't restyle it.
|
|
249
249
|
- **Movable colour button.** The floating button starts in the corner; visitors can drag it anywhere (mouse or touch; a tooltip says so on hover, and an open panel moves with it) and it stays there, remembered across reloads. The panel then opens beside it, on whichever side has room. Its dot cycles through the current theme's colours.
|
|
250
|
+
- **Three colour styles.** In the panel's **Colour style** section: **Subtle** keeps the site's own backgrounds, cards and text and brings the theme's colour in on buttons, links and highlights, with only a quiet hint of it on badges and tints; **Balanced** is the theme in every role, with a soft wash of it across the page, cards and borders, so it shows even where the theme's own backgrounds are nearly white (the site's own colours stay exactly as designed); **Colourful** is an overhaul: the page, cards and borders take a clear tint of the brand (soft in light mode, deeper in 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 still decides where each colour goes. On a site colorsbymax re-colours, it also paints the page's header, hero, sections, headings, cards, buttons and footer by role, as a designer would, and reads what each section is: a pricing table (the most popular plan ringed in the brand colour), testimonials, a form, an image-led section (kept plain so pictures show true), and the page you're on in the menu. A **Strength** slider runs it from a light wash to bold, and **Tint with my pictures' colours** takes its washes from the site's logo and photos, so they feel made for it, while buttons and links keep the theme's. - **Know when there's an update.** A bell in the panel's header (and a red dot on the colour button) says when a newer colorsbymax is out, with what changed, the command to update and a prompt for your AI editor, plus news from mrmaxdesigns. It shows only on development addresses (localhost, `.local`, `.test` and private networks), so a live site's visitors never see it; `updates: true` shows it everywhere and `updates: false` turns it off. Once a day at most it asks the npm registry for the latest version and mrmaxdesigns.com for the news; those requests carry nothing but the usual details of any web request, and nothing is stored about you.
|
|
251
|
+
- **A contrast guard, on every site and in every style.** Once the colours are on the page, colorsbymax checks every piece of text and every icon against what it really sits on (see-through layers and gradients included) and brings anything hard to read up to WCAG: 4.5:1 for text, 3:1 for large text and icons. It keeps the colour's own hue where it can, so a green "Paid" stays green, and otherwise uses the theme's nearest readable colour. It runs when the colours or the page's content change, never while you scroll. To keep a deliberate example of poor contrast as it is, mark it `data-colorsbymax-contrast="keep"`.
|
|
250
252
|
- **Light and dark mode, for any site.** Every built-in theme is designed light and has a generated dark twin (dark surfaces, light text, brand colours lifted until they read on dark, then contrast-checked). Switching to Dark, one click in the panel's header, turns the whole site dark, even one that never had a dark mode. Auto follows the visitor's device, and a light and dark switch can go anywhere on the site (see [Dark mode](#dark-mode)). Custom palettes stay as they were made.
|
|
251
253
|
- **Visitor settings.** The gear in the panel header opens settings: theme mode (Light, Dark, Auto), panel size (Compact, Standard, Large), which groups and sections to show, whether the button can be dragged or its dot animates, and moving the button back to its corner. Saved per site.
|
|
252
254
|
- **Resizable panel.** Drag the panel's free edges or corner (the ones away from the colour button) to any size, or pick a size in settings; double-click an edge to reset it. The layout follows the panel's width, so a large panel shows three theme cards a row.
|
|
253
|
-
- **
|
|
255
|
+
- **Studio: go deeper.** The **Studio** button in the panel header opens a second, more detailed way of working, and **Back to the switcher** returns to the quick one. **Point and click** any part of the page (a button, a card, a heading, the footer) to give it its own background, text and border, from the current theme's colours or any colour. As soon as you pick something, Studio checks every piece of text in it (and in every part like it) against what it really sits on, see-through layers included, and says whether it's easy or hard to read. **Fix** picks the text colour that reads on all of it, preferring the theme's own, and checks the result. Swatches that would make the text hard to read are marked before you choose them. Pick just that part, every part like it on the page, or every part like it **on every page** of the site; **The part around it** steps out to the card or section it sits in, and **The part inside it** steps back in, down to the text itself. Clicks on the page pick instead of following links while it's on. Picking another theme while you have Studio changes asks first: keep them (the ones in theme colours take the new theme's) or clear them. Your changes are listed page by page and saved on your device (and drawn before the page first shows, like the theme), and **Keep them for good** turns them into a prompt for Claude, Cursor or Copilot that makes them in your code, or plain CSS. Studio also chooses **where the colours go**: the whole site, or only some pages (a landing page, say, while the app inside keeps its own colours). Studio reads the site to offer its pages: the ones the current page links to and the ones you've opened. A path ending in `/*` covers a whole section, such as `/blog/*`. The choice is saved on your device, and Studio gives you the config line, and a prompt for Claude, Cursor or Copilot, that make it the same for every visitor (the `pages` option). Pages outside the chosen ones are left exactly as the site made them, dark mode included, and the quick switcher says so when you open it there. A map of the whole site, and colouring a kind of part on every page at once, are coming next.
|
|
256
|
+
- **Audit the page.** **Audit this page**, in Studio, looks at the page in the chosen colours and pins notes to what won't look right: a logo that disappears against its background (with a one-click "Colour the logo", or tips when it's a picture colorsbymax can't re-colour, plus "Preview inverted"), pictures whose solid background shows as a box, and text or icons too faint to read. The notes stay on the page as you scroll; **Re-check** after a fix (it also re-checks when the colours change) and close it from its bar.
|
|
254
257
|
- **Clear groups and feedback.** The site's own group (globe), Max’s picks (paintbrush) and Yours (person) sit in their own row, apart from the library's categories. Toasts confirm what just happened; saving, importing or building a palette says it went to Yours and offers "Show" to jump straight to it. Tooltips are drawn in the panel's colours.
|
|
255
258
|
- **Themed scrollbars.** The page's scrollbars and the panel's slim one take the selected theme's primary colour. Turn the page's off with `scrollbars: false`.
|
|
256
259
|
- **Accessible panel.** A labelled dialog with focus trap, Escape, the colour button or an outside click to close, keyboard operable, and reduced-motion support.
|
|
@@ -332,15 +335,30 @@ Without a `siteName`, the site group is named from the page's `og:site_name`, it
|
|
|
332
335
|
// false: it keeps its own colours); visitors can change it
|
|
333
336
|
features: { scan: false }, // parts of the panel to switch off for everyone (all on by default):
|
|
334
337
|
// picks, library, search, surprise, scan, custom, overrides,
|
|
335
|
-
// importExport, audit, addToSite, colourStyle, colourCount
|
|
336
|
-
|
|
337
|
-
//
|
|
338
|
-
|
|
338
|
+
// importExport, audit, addToSite, colourStyle, colourCount, studio
|
|
339
|
+
pages: ['/', '/pricing'], // only colour these pages; the rest keep their own colours (default:
|
|
340
|
+
// the whole site). '/blog/*' is /blog and every page under it
|
|
341
|
+
updates: 'dev', // the bell (new versions, news): 'dev' only on development
|
|
342
|
+
// addresses (default), true everywhere, false never
|
|
343
|
+
colourStrength: 50, // how strongly Colourful paints for first-time visitors, 0 (a light
|
|
344
|
+
// wash) to 100 (bold); visitors can change it
|
|
345
|
+
colourStyle: 'balanced', // how boldly the site takes a theme, for first-time visitors:
|
|
346
|
+
// 'subtle' keeps the site's own backgrounds and text and brings the
|
|
347
|
+
// theme in on buttons, links and highlights; 'balanced' is the
|
|
348
|
+
// theme with a soft wash (the default on a site that paints with the
|
|
349
|
+
// variables); 'colourful' is an overhaul: tinted backgrounds and the
|
|
350
|
+
// page painted by role (the default on a site colorsbymax re-colours)
|
|
339
351
|
intro: true, // the button pops in with a burst of the theme's colours a moment
|
|
340
352
|
// after the page loads (default); reduced motion fades it in
|
|
341
353
|
}
|
|
342
354
|
```
|
|
343
355
|
|
|
356
|
+
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:
|
|
357
|
+
|
|
358
|
+
```js
|
|
359
|
+
document.documentElement.style.setProperty('--colorsbymax-offset-top', `${bar.offsetHeight}px`)
|
|
360
|
+
```
|
|
361
|
+
|
|
344
362
|
### Dark mode
|
|
345
363
|
|
|
346
364
|
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.
|
|
@@ -351,7 +369,7 @@ Give visitors a light and dark switch anywhere, styled your way, by marking an e
|
|
|
351
369
|
<button data-colorsbymax-mode="toggle">Light / dark</button>
|
|
352
370
|
```
|
|
353
371
|
|
|
354
|
-
|
|
372
|
+
**Add a light and dark switch to your site**, in the panel's settings (under Theme mode) and on the **I'm done** screen, previews one in your top bar and gives you ready-made code and an AI-editor prompt. `toggle` switches between light and dark; `light`, `dark` and `system` set one mode. colorsbymax wires the click, remembers the choice and sets `aria-pressed`. The page is marked with the current mode, for anything your CSS wants to adjust, like photos:
|
|
355
373
|
|
|
356
374
|
```css
|
|
357
375
|
html[data-colorsbymax-scheme="dark"] .hero-photo {
|
|
@@ -479,4 +497,4 @@ PDF reading uses [pdfjs-dist](https://github.com/mozilla/pdf.js) (Apache-2.0), i
|
|
|
479
497
|
|
|
480
498
|
## Licence
|
|
481
499
|
|
|
482
|
-
colorsbymax is released under the [MIT Licence](LICENSE). The names colorsbymax
|
|
500
|
+
colorsbymax is released under the [MIT Licence](LICENSE). The names colorsbymax and mrmaxdesigns are marks of Max Muyalwa and aren't covered by the code licence.
|
package/THIRD_PARTY_NOTICES.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Third-party notices
|
|
2
2
|
|
|
3
|
-
colorsbymax
|
|
3
|
+
colorsbymax includes material from the following projects. Their licences require these notices to ship with every copy of the product.
|
|
4
4
|
|
|
5
5
|
## nice-color-palettes
|
|
6
6
|
|