feat(palette): desaturate the cube faces and add NoDataIcon - #1334
Merged
Conversation
The three isometric cube-face tokens took a fraction of the brand seed saturation, putting the shadowed face at eight times `border`'s chroma — a purple gradient beside a monochrome `CubeLogo`. They now take the same normalised share of the surface saturation the neutral chrome takes. Their position is stated as a WCAG floor against `surface` instead of a tone delta: the dark scheme resolved a delta inside the `darkTone` window and flattened the ramp to ~75% of its light span, and Glaze has no per-color `darkTone`. Light and dark now agree to within 1%, and high contrast escalates instead of matching the normal tier. `NoDataIcon` — the empty isometric crate Cube Cloud carried locally with hard-coded hexes and a JS-derived dark variant — ships here drawn from the same three tokens. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 8d32692 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 NPM canary releaseDeployed canary version 0.0.0-canary-795e47c. |
Contributor
🏋️ Size limit report
Compared against main at cd07258 — run 32285841581, 2026-08-19T18:10:32Z.To see which modules changed, download the size-limit-statoscope-report artifact from this run and open report.html. |
Contributor
🧪 Storybook is successfully deployed!
|
It is not an icon in the two ways that matter: it is a three-tone drawing rather than a `currentColor` glyph, and it is drawn full-bleed rather than inset in a 24x24 grid. So it moves out of `src/icons/` and in beside `CubeLogo` — the existing precedent for `Icon`-based artwork that is not part of the set — with its own stories and docs page. The icons barrel and the icons story go back to what they were. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
LoadingAnimationis retuned to sit next to the current monochromeCubeLogo, and the empty-crate illustrationcubejs-enterprisehas been carrying locally ships asNoDataIcon, drawn from the same three tokens.The faces are near-neutral now
loading-face-1..3took a fraction of the brand seed saturation (0.3 / 0.62 / 0.66), which put the shadowed face at chroma 0.0676 — eight timesborder— so a spinner rendered as a purple gradient beside a logo drawn incurrentColor. They now takebaseChroma(0.2), the same normalised share of the surface saturation the neutral chrome takes (border,placeholder, the text ramp), landing at 0.0059 / 0.0161 / 0.0248. The brand hue still carries, as a tint rather than as a color, and still follows a re-seeded palette.Contrast, not tone, is the spec
A relative tone delta is uniform on the OKHST scale, but the dark scheme resolves it inside the
darkTonewindow, which compressed the ramp to ~75% of its light span. Measured againstsurface:Glaze has no per-color
darkTone, so the intent moves into a WCAG floor againstsurfaceand each scheme solves for it. The authoredtone: '-2'is deliberately short of every floor, so all three faces are pinned by the ratio rather than by a delta that means something different in each scheme — light and dark now agree to within 1%, and the whole ramp is roughly a third stronger than it was (Oklab ΔL 0.271 in light, 0.231 in dark, against 0.204 / 0.154).WCAG rather than APCA, against the grain of the accent tokens: APCA's low-contrast clamp scores every step of a ramp this subtle as Lc 0, so it cannot express the difference between these three faces at all. Polarity-blindness — the reason APCA wins for text — costs nothing for a decorative fill whose only job is to separate from the page.
High contrast used to be identical to the normal tier here, because an unconstrained tone delta had nothing to escalate. The
[1.35, 2.1, 3.2]HC entries roughly double each step's distance from the page.NoDataIconThe isometric open crate used for empty tables and empty lists, moved off
cubejs-enterprise's local copy — which hard-coded#e5e5ec/#b4b4c5/#69697cand re-derived a dark variant in JS on every scheme change — and onto the shared tokens.It ships as an illustration component under
src/components/other/alongsideCubeLogo, not as a member of the icon set, because it is not an icon in the two ways that matter: it is a three-tone drawing rather than acurrentColorglyph (so it ignorescolor— flattening the faces to one tone loses the box), and it is drawn full-bleed rather than inset in a 24×24 grid (so it belongs atsize="8x"and up, not inline with text). It is still built onIcon, so sizing and style props behave exactly as they do for one. Own stories and docs page underOther/NoDataIcon; the icons barrel and the icons story are untouched.<NoDataIcon />is a drop-in for Cloud's@/icons/NoData, so that file and itsadaptiveColorResolvedplumbing can go.Verified
pnpm probe:browser render --screenshotin all three schemes — the animation and the crate side by side, reading with the same weight in each:Two new tests in
palette.test.tspin the property rather than only the colors: each face holds its floor (and does not overshoot it by more than 2%) in all four scheme variants, and no face is more tinted than#disabled, the most tinted of the greys. So a regression reads as "dark went flat again" instead of as three changed oklch strings.pnpm test1990 passed ·pnpm size499.77 kB / 505 kB ·tsc --noEmitclean for the touched files.Follow-up outside this PR
Token names stay
loading-face-*so Cloud's theme color map keeps resolving. That map (packages/console-ui/src/modules/app-theme/engine/default-color-map.ts) mirrors the recipe by hand, including the oldtone: '-2' / '-9' / '-21'andsaturation: 0.3 / 0.62 / 0.66entries — it needs the same edit, or a themed Cloud will keep emitting the old purple ramp.🤖 Generated with Claude Code
Note
Cursor Bugbot is generating a summary for commit cc9f7ea. Configure here.