Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Color Picker: add neutral colors (#30233)

Browse source
This commit is contained in:
Michael Geers 2026-05-26 17:18:02 +02:00 • committed by GitHub
parent 20afb737ce
commit 45ee243be0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/js/colors.test.ts
View file

@ -27,7 +27,7 @@ describe("setAlpha helpers", () => {
});
describe("resolveColors", () => {
const palette = colors.palette; // 18 entries
const palette = colors.palette;
it("returns empty map for empty ids", () => {
expect(resolveColors([], {})).toEqual({});

3
assets/js/colors.ts
View file

@ -51,6 +51,7 @@ const colors: {
"#F472B6", // pink
"#34D399", // green
"#A78BFA", // violet
"#94A3B8", // gray
// mid
"#2563EB", // blue
"#F59E0B", // amber
@ -58,6 +59,7 @@ const colors: {
"#EC4899", // pink
"#10B981", // green
"#8B5CF6", // violet
"#64748B", // gray
// dark
"#1E40AF", // blue
"#B45309", // amber
@ -65,6 +67,7 @@ const colors: {
"#BE185D", // pink
"#047857", // green
"#6D28D9", // violet
"#334155", // gray
],
});

14
assets/js/components/Helper/ColorPickerPopover.vue
View file

@ -106,12 +106,12 @@ export default defineComponent({
},
computed: {
palette(): string[] {
// de-interleave warm/cool palette into 3×6 grid (rows: light/mid/dark, cols: hue)
const grid: string[][] = Array.from({ length: 3 }, () => Array(6).fill(""));
// de-interleave warm/cool palette into 3×7 grid (rows: light/mid/dark, cols: hue)
const grid: string[][] = Array.from({ length: 3 }, () => Array(7).fill(""));
colors.palette.forEach((hex, i) => {
const row = Math.floor(i / 6);
const step = i % 6;
const col = Math.floor(step / 2) + (step % 2) * 3;
const row = Math.floor(i / 7);
const step = i % 7;
const col = step < 6 ? Math.floor(step / 2) + (step % 2) * 3 : 6;
grid[row][col] = hex;
});
return grid.flat();
@ -240,8 +240,8 @@ export default defineComponent({
}
.swatch-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
grid-template-columns: repeat(7, 1fr);
gap: 0.4rem;
}
.swatch {
cursor: pointer;