Minor Changes
-
#1270
65bf3bc1Thanks @tenphi! - Breaking: removeCloudLogo. It shipped the previous brand artwork with hard-coded hexes (#ff6492,#141446,#7a77ff,#a14474) and the retired "Cube Cloud" wordmark, so it could neither adapt to a colour scheme nor be recoloured.Replaced by two
Icon-based marks:CubeLogo— the square cube mark.sizedrives both axes, like any other icon.CubeFullLogo— mark plus wordmark on one canvas.sizesets the height only; the width follows the artwork's98 / 28ratio viaaspect-ratio, so the wordmark is never squashed. Do not set an explicitwidth.
Both draw every path with
currentColor, so they inherit the surrounding text colour or take an explicitcolor, and both fall back to$icon-sizewhen nosizeis given.The mark is two different drawings rather than one recoloured — the dark variant is filled differently to hold its weight on a dark surface — and the
@darkstate swaps them in CSS. That costs no re-render, needs no scheme prop, and is correct during SSR. Both paths are always present in the DOM, so assert on[data-element="LightMark"]/[data-element="DarkMark"]rather than a singlepath.Migrating:
<CloudLogo to="/" />became a logo inside an interactive element rather than being one itself, since the old component was aButton. Wrap it yourself and keep the accessible name on the control:<Button aria-label="Cube home" to="/"> <CubeFullLogo aria-hidden /> </Button>