// Salience — mashups of Lit Row (01) + Aperture (05)
// Eight variations exploring the hybrid space
const A = {
amber: "#f5a623",
amberLight: "#ffc266",
amberDeep: "#c77a0a",
ink: "#0e0a1e",
bone: "#f4f2ff",
dim: "#3a3358",
dimLight: "#c5c0dc",
};
const dimOf = (v) => v === "onDark" ? A.dim : A.dimLight;
const inkOf = (v) => v === "onDark" ? A.bone : A.ink;
function halo(id, opacity = 0.55) {
return (
);
}
/* =========================================================
M1 — "Aperture Row"
Lit Row centred inside the aperture brackets.
Row sits horizontally between the corner brackets.
========================================================= */
function MashA({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
const dim = dimOf(variant);
return (
);
}
/* =========================================================
M2 — "Aperture Lock"
Square brackets hugging tight to a single lit dot (no row).
The most icon-friendly.
========================================================= */
// Original (reference)
function MashB({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
return (
);
}
// B1 — brackets pushed out, dot grown
function MashB1({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
return (
);
}
// B2 — brackets to the very edge, bigger dot, chunkier stroke
function MashB2({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
return (
);
}
// B3 — edge brackets, biggest sphere, sphere nearly touches brackets
function MashB3({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
return (
);
}
/* =========================================================
M3 — "Vertical Row"
Rotate the row 90° to make it more icon-square.
Brackets frame the stack.
========================================================= */
function MashC({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
const dim = dimOf(variant);
return (
);
}
/* =========================================================
M4 — "Four-Point"
Lit dot at center with 4 quiet dots at N/S/E/W (cross formation).
Reads as both a row and reticle.
========================================================= */
function MashD({ size = 64, variant = "onDark" }) {
const dim = dimOf(variant);
return (
);
}
/* =========================================================
M5 — "Bracketed Dot"
Just 2 brackets (L + R) and a single lit dot.
Extremely minimal — like an attention marker.
========================================================= */
function MashE({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
return (
);
}
/* =========================================================
M6 — "Progress Row"
Lit Row where the left dots are solid (past) and right are
hollow (future). Lit dot is the "now". Bracketed top+bottom.
========================================================= */
function MashF({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
const dim = dimOf(variant);
return (
);
}
/* =========================================================
M7 — "Asymmetric Row"
Lit dot on the LEFT (like the head of a row), trailing dim
dots falling away. Framed by a single corner bracket.
Reads as motion/direction.
========================================================= */
function MashG({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
const dim = dimOf(variant);
return (
);
}
/* =========================================================
M8 — "Solid Bar"
Minimal monogram: a thick amber horizontal bar with brackets.
More wordmark-friendly. Pure geometry.
========================================================= */
function MashH({ size = 64, variant = "onDark" }) {
const ink = inkOf(variant);
return (
);
}
/* =========================================================
Wordmark + AppIcon + Dock + ScaleRow (shared from logos.jsx)
We re-use them since they're on window.*
========================================================= */
Object.assign(window, {
MashA, MashB, MashB1, MashB2, MashB3, MashC, MashD, MashE, MashF, MashG, MashH,
});