Would anyone using Core Framework be willing to run a 5-minute check for me?
I’m building a free CSS add-on for Bricksforge Pro Forms. Pro Forms doesn’t come with much built-in styling, and none of the big frameworks style it either — Advanced Themer has a whole form component, but its rules only target Bricks’ native form element, so they never reach Pro Forms.
My add-on fills that gap: consistent field styling, multi-step layouts, card-style choices, error states.
It’s designed to pick up your colours and spacing rather than impose its own, by reading your framework’s CSS variables. That part is the problem. I’ve tested it thoroughly on Advanced Themer, but I’ve written the Automatic.css and Core Framework versions from documentation without ever running them on a real site.
Here’s the catch that makes this worth asking about. If I’ve got a variable name wrong, nothing looks broken. The add-on falls back to its own default colours and quietly ignores yours. On Advanced Themer I discovered every single one of my nineteen guesses was wrong — for weeks it had been rendering in my fallback green instead of the site’s palette, and it looked completely fine the whole time.
So I can’t spot the problem by looking. I need someone with a real Core Framework install to paste two lines into their browser console and tell me what comes back.
What I need:
-
Load any page on your site
-
Open the browser console (F12, then the Console tab)
-
Paste this and hit enter:
js
const s = getComputedStyle(document.documentElement);
console.log(['--primary','--action','--base-ultra-light','--base-light',
'--neutral-light','--neutral','--danger','--success','--text-color',
'--space-s','--space-m','--space-l','--text-s','--radius','--radius-m']
.map(v => v.padEnd(22) + (s.getPropertyValue(v).trim() || '(not defined)'))
.join('\n'));
- Paste me what it prints
That’s it. No install, no changes to your site, nothing to undo. It just reads variables that are already there.
If you’re up for a bit more, I’d also love to know whether your framework styles form inputs itself — that affects whether my add-on’s styles win or lose against yours.
Happy to share the add-on with anyone who’s interested. MIT licensed, free, and it’ll stay that way.
Part 2
Could I ask a further dump of some css for my framework? If so…
Full variable dump — follow-up ask
Probing one name at a time is slow, and --danger coming back undefined while --success exists shows the naming isn’t guessable. This script lists every CSS variable the site defines, so there’s nothing left to guess.
Send this to whoever ran the first snippet.
Paste this into the browser console on any page of the site:
(() => {
const names = new Set();
for (const sheet of document.styleSheets) {
let rules;
try { rules = sheet.cssRules; } catch { continue; } // skip cross-origin
const walk = rs => {
for (const r of rs) {
if (r.style) for (const p of r.style) if (p.startsWith('--')) names.add(p);
if (r.cssRules) walk(r.cssRules);
}
};
walk(rules);
}
const s = getComputedStyle(document.documentElement);
const out = [...names].sort()
.map(n => n.padEnd(38) + s.getPropertyValue(n).trim().slice(0, 60))
.join('\n');
console.log(`${names.size} variables found\n\n${out}`);
copy(out); // also copied to clipboard
return `${names.size} variables — copied to clipboard`;
})();
It reads only; it changes nothing. The output is copied to the clipboard automatically, so it can be pasted straight into a reply.
If the list is huge, this filters it to just the colours, which is the part I’m missing:
// colours only
[...document.styleSheets].flatMap(sh => { try { return [...sh.cssRules] } catch { return [] } })
.flatMap(r => r.style ? [...r.style] : [])
.filter(p => p.startsWith('--'))
.filter((v,i,a) => a.indexOf(v) === i)
.map(n => [n, getComputedStyle(document.documentElement).getPropertyValue(n).trim()])
.filter(([,v]) => /^(#|rgb|hsl|oklch|color-mix)/i.test(v))
.sort()
.forEach(([n,v]) => console.log(n.padEnd(38), v));
What I’m looking for specifically
Nine gaps, all colour or naming:
| What it’s for | Best guess | Notes |
|—|—|—|
| Error / invalid colour | --danger? --error? | --success exists but --danger doesn’t — so it’s under some other name |
| Body / label text colour | --text-color? --neutral-900? | |
| Muted text (hints, placeholders) | ? | |
| Input background | --white? --base? | |
| Recessed / sunk background | ? | Must differ from input background or one skin goes invisible |
| Border colour | --neutral-300? | |
| Stronger border (hover) | ? | |
| Text on a coloured button | --white? | |
| Heading size for fieldset legends | --text-l? --h5? | |
Confirmed already, no need to re-check: --primary, --success, --space-s/m/l, --text-s, --radius-m.
One extra question worth asking, since the docs don’t settle it: does Core Framework style form inputs itself? Its documentation mentions components for buttons, forms and badges. If those rules exist, they’ll compete with the add-on and may override it — which changes the install instructions, not just the colours.
The quickest way to check:
// does anything style inputs already?
[...document.styleSheets].flatMap(sh => { try { return [...sh.cssRules] } catch { return [] } })
.filter(r => r.selectorText && /input|\.form|textarea|select/i.test(r.selectorText))
.forEach(r => console.log(r.selectorText));
If that prints nothing, the add-on has a clear run. If it prints a lot, I need to think about specificity.
Many thanks
Pete