WEBUI-1935: WEBUI REBRANDING USING SATORI ASSETS [LTS-2023]#2990
Open
naveen-konda wants to merge 50 commits into
Open
WEBUI-1935: WEBUI REBRANDING USING SATORI ASSETS [LTS-2023]#2990naveen-konda wants to merge 50 commits into
naveen-konda wants to merge 50 commits into
Conversation
* WEBUI-1961: Document View And Listing Page Rebranding Changes * WEBUI-1961: Update doc list page padding and remove redundadnt css codE * WEBUI-1961:Refactor styles for document listing and update header background color in suggester * WEBUI-1935: Update ftest selector for profile button in drawer.js * WEBUI-1961: FIX CSS STYLE TO AVOID FTEST FAILURE ON CSV IMPORT FEATURE * WEBUI-1961: UPDATE NUXEO CHECKMARK COLOR CODE AND OTHER CSS IMPROVEMENTS * Update the padding to verify ftest failure
naveen-konda
requested review from
Copilot,
madhurkulshrestha-hyland and
swarnadipa-dev
and removed request for
a team
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces Satori-based rebranding across the Web UI by adding Satori design tokens, updating theme variables/fonts, swapping logos/icons, and aligning key UI components (drawer, headers, tabs, create actions) with the new visual system.
Changes:
- Added a centralized Satori design-tokens stylesheet and wired it into all shipped themes (default/light/dark/kawaii), including typography updates.
- Updated UI styling and assets (logos, wordmark, icons) and adjusted component layouts to match the new branding.
- Updated functional tests and GitHub workflows to support the rebranded navigation/profile entry and a POC branch.
Reviewed changes
Copilot reviewed 36 out of 44 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
themes/satori-design-tokens.css |
Adds Satori design tokens (color + typography custom properties). |
themes/light/theme.html |
Imports Satori tokens; switches app font and adds Satori-specific theme vars. |
themes/light/logo.svg |
Adds rebranded SVG logo for light theme. |
themes/kawaii/theme.html |
Imports Satori tokens; switches app font and adds Satori-specific theme vars. |
themes/kawaii/logo.svg |
Adds rebranded SVG logo for kawaii theme. |
themes/default/theme.html |
Imports Satori tokens; remaps primary/secondary colors and adds Satori-specific vars. |
themes/default/logo.svg |
Adds rebranded SVG logo for default theme. |
themes/dark/theme.html |
Imports Satori tokens; switches app font and adds Satori-specific theme vars. |
themes/dark/logo.svg |
Adds rebranded SVG logo for dark theme. |
themes/base.js |
Adds responsive header padding tweak and adjusts iron-data-table row styling. |
packages/nuxeo-web-ui-ftest/pages/ui/drawer.js |
Updates drawer test navigation to handle profile avatar being an <a> instead of nuxeo-menu-icon. |
index.html |
Loads new Google Fonts (Figtree, Noto Sans) for rebranded typography. |
images/icons/administration.svg |
Adds new administration icon asset. |
images/icons/add.svg |
Adds new add icon asset. |
images/hyland-wordmark.svg |
Adds Hyland wordmark used in the home header. |
images/doctypes/folder.svg |
Updates folder doctype icon styling/shape to match rebrand. |
elements/search/nuxeo-saved-search-actions.js |
Switches “more” menu icon to rebranded icon set reference. |
elements/nuxeo-web-ui-bundle.html |
Updates drawer menu icons and minor formatting adjustments for menu items. |
elements/nuxeo-tasks/nuxeo-tasks-drawer.js |
Applies Satori header mixin to tasks drawer header. |
elements/nuxeo-suggester/nuxeo-suggester.js |
Uses Satori header background token (with fallback) on mobile header search button. |
elements/nuxeo-results/nuxeo-results.js |
Adds padding adjustment to results action icon buttons. |
elements/nuxeo-recent-documents/nuxeo-recent-documents.js |
Applies Satori header mixin; removes list item dividers. |
elements/nuxeo-home.html |
Adds header layout, Hyland wordmark, background, and card radius updates. |
elements/nuxeo-document-tree/nuxeo-document-tree.js |
Restyles drawer tree and adds selection persistence/highlighting behavior. |
elements/nuxeo-document-create-button/nuxeo-document-create-button.js |
Rebrands create FAB styling (shape, colors, shadow) and updates icon usage. |
elements/nuxeo-document-create-actions/nuxeo-document-create-shortcuts.js |
Repositions create shortcuts list near the FAB. |
elements/nuxeo-document-create-actions/nuxeo-document-create-shortcut.js |
Redesigns shortcut UI to include label, new styling, and keyboard handling. |
elements/nuxeo-collections/nuxeo-favorites.js |
Applies Satori header mixin to favorites header. |
elements/nuxeo-collections/nuxeo-collections.js |
Removes list dividers; applies Satori header styling to collections heading. |
elements/nuxeo-clipboard/nuxeo-clipboard.js |
Applies Satori header mixin to clipboard header. |
elements/nuxeo-browser/nuxeo-breadcrumb.js |
Updates breadcrumb typography to rebranded font styling. |
elements/nuxeo-browser.html |
Adds facet-based styling overrides for tabs/content padding and border radius. |
elements/nuxeo-app/nuxeo-page.js |
Adds page layout wrapper and makes toolbar/tabs/content styling more theme-variable-driven. |
elements/nuxeo-app/nuxeo-page-item.js |
Adjusts tab colors to align with new tokens (with fallbacks). |
elements/nuxeo-app.js |
Implements profile avatar UI (image/initials), switches theme logo to SVG, and adds _userInitials. |
elements/document/nuxeo-collapsible-document-page.js |
Adjusts collapsible document page background/padding and card styling. |
.github/workflows/test.yaml |
Adds POC branch to workflow trigger branches. |
.github/workflows/preview.yaml |
Adds POC branch to workflow trigger branches. |
.github/workflows/main.yaml |
Adds POC branch to workflow trigger branches. |
.github/workflows/lint.yaml |
Adds POC branch to workflow trigger branches. |
.github/workflows/ftest.yaml |
Adds POC branch to workflow trigger branches (push + pull_request_target). |
.github/workflows/crowdin.yaml |
Adds POC branch to Crowdin sync branches. |
.github/workflows/clean.yaml |
Adds POC branch to workflow trigger branches. |
.github/workflows/a11y.yaml |
Adds POC branch to workflow trigger branches (push + pull_request_target). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Apply on tap on div tag Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces WEBUI-1935 rebranding by integrating Satori design tokens, updating theme variables/fonts, and refreshing UI visuals (logos/icons) and some layout/styling across core components.
Changes:
- Add Satori design tokens + load new fonts, then wire themes to use Satori variables (colors, typography, spacing).
- Update branding assets (theme logos, Hyland wordmark, icon set updates) and adjust UI styling (headers, tabs, drawer/tree, create button).
- Update navigation UI behavior (profile avatar change + document tree selection persistence) and align ftest selectors.
Reviewed changes
Copilot reviewed 36 out of 44 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| themes/satori-design-tokens.css | Adds Satori token CSS variables (colors, typography, misc tokens). |
| themes/light/theme.html | Imports token CSS; maps theme vars to Satori; adds Satori custom vars. |
| themes/light/logo.svg | Adds new SVG logo for light theme. |
| themes/kawaii/theme.html | Imports token CSS; maps theme vars to Satori; adds Satori custom vars. |
| themes/kawaii/logo.svg | Adds new SVG logo for kawaii theme. |
| themes/default/theme.html | Imports token CSS; maps core brand colors/fonts to Satori; adds Satori custom vars. |
| themes/default/logo.svg | Adds new SVG logo for default theme. |
| themes/dark/theme.html | Imports token CSS; maps font to Satori; adds partial Satori custom vars. |
| themes/dark/logo.svg | Adds new SVG logo for dark theme. |
| themes/base.js | Tweaks responsive header padding and iron-data-table row styling token. |
| packages/nuxeo-web-ui-ftest/pages/ui/drawer.js | Updates selector logic for rebranded profile avatar entry. |
| index.html | Loads Google Fonts for Figtree + Noto Sans. |
| images/icons/administration.svg | Adds new administration icon asset. |
| images/icons/add.svg | Adds new add icon asset. |
| images/hyland-wordmark.svg | Adds Hyland wordmark used in home header. |
| images/doctypes/folder.svg | Updates folder doctype icon asset. |
| elements/search/nuxeo-saved-search-actions.js | Switches “more” icon reference to nuxeo iconset. |
| elements/nuxeo-web-ui-bundle.html | Updates drawer menu icons and some markup formatting. |
| elements/nuxeo-tasks/nuxeo-tasks-drawer.js | Applies Satori header mixin to drawer header. |
| elements/nuxeo-suggester/nuxeo-suggester.js | Uses Satori header background var with fallback for mobile search button. |
| elements/nuxeo-results/nuxeo-results.js | Minor padding tweak on a button. |
| elements/nuxeo-recent-documents/nuxeo-recent-documents.js | Applies Satori header mixin; removes list item border. |
| elements/nuxeo-home.html | Applies Satori styling; adds Hyland wordmark in header; adjusts card styling/background. |
| elements/nuxeo-document-tree/nuxeo-document-tree.js | Restyles drawer tree and adds selection persistence/highlighting logic. |
| elements/nuxeo-document-create-button/nuxeo-document-create-button.js | Restyles create FAB using Satori vars; changes icon. |
| elements/nuxeo-document-create-actions/nuxeo-document-create-shortcuts.js | Repositions create shortcuts stack. |
| elements/nuxeo-document-create-actions/nuxeo-document-create-shortcut.js | Restyles shortcuts to include label; adds keyboard handling. |
| elements/nuxeo-collections/nuxeo-favorites.js | Applies Satori header mixin to header. |
| elements/nuxeo-collections/nuxeo-collections.js | Removes list borders; applies Satori header styling to heading. |
| elements/nuxeo-clipboard/nuxeo-clipboard.js | Applies Satori header mixin to header. |
| elements/nuxeo-browser/nuxeo-breadcrumb.js | Applies Satori font styling to breadcrumb. |
| elements/nuxeo-browser.html | Adds facet-aware styling hooks via document-facets attribute. |
| elements/nuxeo-app/nuxeo-page.js | Updates page layout structure and styling vars (padding/background/tabs). |
| elements/nuxeo-app/nuxeo-page-item.js | Uses Satori tab colors (fallbacks) for unselected/selected tabs. |
| elements/nuxeo-app.js | Replaces profile menu icon with avatar/initials; switches theme logo to SVG; adds initials helper. |
| elements/document/nuxeo-collapsible-document-page.js | Updates document page background/padding and details card styling. |
| .github/workflows/test.yaml | Adds feature branch trigger. |
| .github/workflows/preview.yaml | Adds feature branch trigger. |
| .github/workflows/main.yaml | Adds feature branch trigger. |
| .github/workflows/lint.yaml | Adds feature branch trigger. |
| .github/workflows/ftest.yaml | Adds feature branch trigger. |
| .github/workflows/crowdin.yaml | Adds feature branch trigger. |
| .github/workflows/clean.yaml | Adds feature branch trigger. |
| .github/workflows/a11y.yaml | Adds feature branch trigger. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
naveen-konda
commented
Mar 13, 2026
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
madhurkulshrestha-hyland
requested changes
Mar 23, 2026
madhurkulshrestha-hyland
left a comment
madhurkulshrestha-hyland
left a comment
Contributor
There was a problem hiding this comment.
1 review comment + Copilot comments
| icon="nuxeo:admin" | ||
| ></nuxeo-menu-icon> | ||
| <nuxeo-menu-icon | ||
| <a |
Contributor
There was a problem hiding this comment.
nuxeo-menu-icon usage is being removed ?
naveen-konda
changed the title
- Changed header styles in nuxeo-tasks-drawer.js to use new section header mixin. - Updated list item styles in nuxeo-tasks-list.js and nuxeo-search-form.js to apply new drawer item styles. - Added unit tests for nuxeo-app and nuxeo-document-create-shortcut components, ensuring proper functionality and accessibility. - Enhanced nuxeo-document-tree tests to cover RTL handling, node click behavior, and highlight updates. - Removed unused font weights from base.js and adjusted font-family references in themes. - Updated theme colors and variables to align with Satori design tokens, ensuring consistency across light and dark themes. - Replaced logo images in dark and default themes to reflect new branding.
- Adjusted padding for list items across multiple components to improve layout consistency. - Updated hover styles to apply new selected item mixin for better visual feedback. - Enhanced theme variables in base.js to streamline styling across light and dark themes. - Removed unused logo assets from default and dark themes.
naveen-konda
force-pushed
the
WEBUI-1935-POC-REBRANDING
branch
from
bea9b37 to
3732d62
Compare
- Changed background colors for selected items in base.js to a new color value. - Updated theme variables in theme.html to use a primary color variable for better maintainability. - Removed hardcoded color values in favor of using defined variables for hover and active states.
- Added hover and focus-within states to improve visual feedback for menu items. - Updated selected item styles to ensure consistency across different interaction states.
Integrate WEBUI-2040 drawer resize behavior and latest maintenance changes while preserving rebranding styles and removed light/kawaii themes. Co-authored-by: Cursor <cursoragent@cursor.com>
- Updated test for ArrowDown key event on logo to focus home link when present. - Added new test to ensure ArrowDown from home link focuses the first menu item. - Refactored existing tests to improve reliability and clarity, including stubbing menu item focus behavior.
|
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
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.
No description provided.