feat: rebuild visual language around Databricks' own product UI#9
Merged
Conversation
Repointed from the datapal-access Databricks App to Databricks' own workspace UI, per explicit user direction: the current look didn't feel native, and config forms needed a real tabular editing pattern instead of free-text key=value fields. See theme.py's updated docstring for what the new tokens are grounded in (not a pixel-exact extraction — no live workspace to sample from here; bring reference screenshots if you want it matched more precisely). theme.py: Inter font, "Lava" red-orange (#FF3621) reserved for primary actions only (not spread across every accent like the old teal was), 13px dense base font size, 3-6px radii instead of 6-8px, per-library header accents desaturated so they don't compete with Lava. components.py: - Real input styling — bordered/rounded text/password/textarea/select with a Lava focus ring; previously these rendered as unstyled raw browser form controls - ToggleButtons restyled as a Databricks-style segmented control (filled-when-selected, not default browser radio-button-adjacent look) - Tab widget restyled to underline-active-tab (targets both .lm-TabBar and .p-TabBar classes for ipywidgets 7/8 compat), matching the workspace's own nav pattern instead of boxed tabs - New editable_table()/EditableTable — an add/remove-row key-value grid, Databricks' own pattern for job parameters/cluster tags/env vars, for any dash-* config that's naturally tabular instead of a single "key=value, key=value" text field - Tightened card padding/button height for a denser, more product-like feel instead of a marketing-site look Regenerated docs/screenshots/components_preview.png against the new theme (previous one showed the old teal/IBM-Plex-Sans look). Bumped to 0.2.0 given the breadth of the visual change and the new public component. Verified: ruff clean, 14 tests pass (4 new for editable_table), wheel builds as dash_uis-0.2.0.
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
2 participants
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.
Summary
Repoints dash-ui's visual language from the datapal-access Databricks App to Databricks' own workspace UI, per explicit user direction — the previous look didn't feel native, and config forms needed a real tabular editing pattern instead of free-text
key=valuefields.#FF3621) reserved for primary actions only, 13px dense base size, 3-6px radii. See the docstring for what this is actually grounded in (not a pixel-exact extraction like datapal-access was — bring reference screenshots if you want it matched more precisely).editable_table()— an add/remove-row key-value grid (Databricks' own job-parameters/cluster-tags pattern) for any tabular config.docs/screenshots/components_preview.pngagainst the new theme (rendered via the same Playwright/Chromium screenshot process this suite already uses).Test plan
ruff check dashui/passespytest tests/— 14 passed (4 new foreditable_table)python -m build --wheelsucceeds🤖 Generated with Claude Code