From 6bc39d66dc9d2ab0c7d9ecd5d869f319fe5faa83 Mon Sep 17 00:00:00 2001 From: naveen-konda Date: Tue, 24 Feb 2026 12:39:33 +0530 Subject: [PATCH 01/35] WEBUI-1935: Remove satori theme and use nuxeo default theme. --- elements/nuxeo-app.js | 142 ++++++- elements/nuxeo-app/nuxeo-menu-icon.js | 72 +++- elements/nuxeo-app/nuxeo-page.js | 8 +- elements/nuxeo-clipboard/nuxeo-clipboard.js | 4 + .../nuxeo-collections/nuxeo-collections.js | 6 +- elements/nuxeo-collections/nuxeo-favorites.js | 4 + .../nuxeo-document-create-shortcut.js | 64 +++- .../nuxeo-document-create-shortcuts.js | 5 +- .../nuxeo-document-create-button.js | 37 +- .../nuxeo-document-tree.js | 164 ++++++++- elements/nuxeo-home.html | 19 +- .../nuxeo-recent-documents.js | 6 +- elements/nuxeo-tasks/nuxeo-tasks-drawer.js | 3 + elements/nuxeo-web-ui-bundle.html | 97 ++++- images/hyland-wordmark.svg | 9 + images/icons/add.svg | 3 + images/icons/administration.svg | 4 + index.html | 8 + themes/base.js | 6 + themes/dark/logo.svg | 13 + themes/dark/theme.html | 22 +- themes/default/logo.svg | 13 + themes/default/theme.html | 56 ++- themes/kawaii/logo.svg | 13 + themes/kawaii/theme.html | 29 +- themes/light/logo.svg | 13 + themes/light/theme.html | 31 +- themes/satori-design-tokens.css | 346 ++++++++++++++++++ 28 files changed, 1112 insertions(+), 85 deletions(-) create mode 100644 images/hyland-wordmark.svg create mode 100644 images/icons/add.svg create mode 100644 images/icons/administration.svg create mode 100644 themes/dark/logo.svg create mode 100644 themes/default/logo.svg create mode 100644 themes/kawaii/logo.svg create mode 100644 themes/light/logo.svg create mode 100644 themes/satori-design-tokens.css diff --git a/elements/nuxeo-app.js b/elements/nuxeo-app.js index cf7a697ff2..1200d47736 100644 --- a/elements/nuxeo-app.js +++ b/elements/nuxeo-app.js @@ -116,6 +116,62 @@ Polymer({ } } + /* Profile avatar with initials */ + .profile-avatar { + display: flex; + align-items: center; + justify-content: center; + color: var(--nuxeo-sidebar-menu); + padding: 12px 13px; + width: var(--nuxeo-sidebar-width); + cursor: pointer; + background: transparent; + border: none; + outline: none; + text-decoration: none; + box-sizing: border-box; + } + + .profile-avatar:hover { + background: rgba(0, 0, 0, 0.2); + color: var(--nuxeo-sidebar-menu-hover); + } + + :host([sidebar-expanded]) .profile-avatar:hover, + .profile-avatar.selected { + background: rgba(0, 0, 0, 0.2); + color: var(--nuxeo-sidebar-menu-hover); + } + + .profile-initials { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--sat-profile-avatar-bg); + color: var(--nuxeo-sidebar-menu); + border: none; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0; + flex-shrink: 0; + } + + .profile-avatar-image { + width: 32px; + height: 32px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + } + + .profile-avatar-label { + display: none; + } + /* Layout base */ app-drawer-layout { display: flex; @@ -263,7 +319,7 @@ Polymer({ width: calc(100% - var(--nuxeo-sidebar-width)); height: calc(100vh - (var(--nuxeo-app-top, 0) + var(--nuxeo-app-bottom, 0))); margin-left: var(--nuxeo-sidebar-width); - background-color: var(--nuxeo-drawer-background); + background-color: var(--sat-drawer-content-background, var(--nuxeo-drawer-background)); } :host([dir='rtl']) #drawer iron-pages { @@ -303,7 +359,14 @@ Polymer({ top: 5px; left: 6px; z-index: 99; - background-color: var(--nuxeo-drawer-background); + background-color: var(--sat-drawer-toggle-bg, var(--nuxeo-drawer-background)); + } + + .header h5 { + font-weight: var(--sat-home-header-font-weight); + font-size: var(--sat-home-header-font-size); + color: var(--sat-home-header-color, var(--nuxeo-drawer-text)); + font-family: var(--sat-font-family-primary); } #drawerToggle svg, @@ -448,18 +511,38 @@ Polymer({ - + class="settings profile-avatar" + href="[[urlFor('page', 'profile')]]" + id="profileWrapper" + role="option" + > + + + + [[i18n('app.account')]] @@ -1152,7 +1235,46 @@ Polymer({ }, _logo(baseUrl) { - return `${baseUrl}themes/${localStorage.getItem('theme') || 'default'}/logo.png`; + return `${baseUrl}themes/${localStorage.getItem('theme') || 'default'}/logo.svg`; + }, + + _userInitials(user) { + if (!user) { + return ''; + } + const firstName = user.properties && user.properties.firstName ? user.properties.firstName.trim() : ''; + const lastName = user.properties && user.properties.lastName ? user.properties.lastName.trim() : ''; + + // Case 1: Both first and last name - use first letter of each + if (firstName && lastName) { + return (firstName.charAt(0) + lastName.charAt(0)).toUpperCase(); + } + + // Case 2: Only first name with 2+ characters - use first two + if (firstName && firstName.length >= 2) { + return firstName.substring(0, 2).toUpperCase(); + } + + // Case 3: Only first name with 1 character + if (firstName) { + return firstName.charAt(0).toUpperCase(); + } + + // Case 4: Only last name + if (lastName && lastName.length >= 2) { + return lastName.substring(0, 2).toUpperCase(); + } + + if (lastName) { + return lastName.charAt(0).toUpperCase(); + } + + // Fallback to user id first two characters + if (user.id) { + return user.id.substring(0, 2).toUpperCase(); + } + + return '??'; }, showHome(e) { diff --git a/elements/nuxeo-app/nuxeo-menu-icon.js b/elements/nuxeo-app/nuxeo-menu-icon.js index de357195ed..7bbe7aedbc 100644 --- a/elements/nuxeo-app/nuxeo-menu-icon.js +++ b/elements/nuxeo-app/nuxeo-menu-icon.js @@ -44,6 +44,10 @@ Polymer({ outline: auto; } + #button { + display: inline-block; + } + :host(.selected) paper-icon-button { background: rgba(0, 0, 0, 0.2); color: var(--nuxeo-sidebar-menu-hover); @@ -74,17 +78,50 @@ Polymer({ paper-icon-button path { tabindex: -1; } + + #button { + display: flex; + align-items: center; + justify-content: center; + color: var(--nuxeo-sidebar-menu); + height: 48px; + padding: 12px 13px; + width: var(--nuxeo-sidebar-width); + cursor: pointer; + background: transparent; + border: none; + outline: none; + } + + #button:hover { + background: rgba(0, 0, 0, 0.2); + color: var(--nuxeo-sidebar-menu-hover); + } + + :host(.selected) #button { + background: rgba(0, 0, 0, 0.2); + color: var(--nuxeo-sidebar-menu-hover); + } + + #button svg { + width: 24px; + height: 24px; + fill: currentColor; + } + + #button svg path { + fill: currentColor; + } + + :host(.selected) paper-icon-button { + background: rgba(0, 0, 0, 0.2); + color: var(--nuxeo-sidebar-menu-hover); + } - - + [[i18n(label)]] diff --git a/elements/nuxeo-collections/nuxeo-favorites.js b/elements/nuxeo-collections/nuxeo-favorites.js index 1dbf8d7a36..09e67ef4b2 100644 --- a/elements/nuxeo-collections/nuxeo-favorites.js +++ b/elements/nuxeo-collections/nuxeo-favorites.js @@ -113,6 +113,10 @@ Polymer({ margin: 0; background-color: transparent; } + + .header h5 { + @apply --sat-header-h5; + } diff --git a/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcut.js b/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcut.js index 73b418be40..e607dd44d9 100644 --- a/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcut.js +++ b/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcut.js @@ -35,26 +35,59 @@ Polymer({ display: inline-block; } - #createBtn { - color: var(--nuxeo-button-primary-text); - --paper-fab-background: var(--nuxeo-button-primary); - --paper-fab-keyboard-focus-background: var(--nuxeo-button-primary-focus); + .shortcut-container { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 4px 6px; + border-radius: 16px; + background-color: var(--sat-document-create-button-background, var(--nuxeo-button-primary)); + transition: background-color 0.2s ease; + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); } - paper-fab:hover, - paper-fab:focus { - background-color: var(--nuxeo-button-primary-focus); + .shortcut-container:hover { + background-color: var(--sat-document-create-button-hover-background, var(--nuxeo-button-primary-focus)); } - paper-fab { - --paper-fab-iron-icon: { - filter: brightness(100); - } + .shortcut-label { + font-size: 14px; + font-weight: 500; + line-height: 20px; + color: var(--sat-create-button-shortcut-label-color, var(--nuxeo-button-primary-text)); + white-space: nowrap; + letter-spacing: 0.1px; + } + + /* Icon styling - simple image without background */ + .shortcut-icon { + height: 40px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-family: var(--sat-font-family-primary, var(--nuxeo-app-font)); + } + + .shortcut-icon img { + width: 24px; + height: 24px; + } + + .shortcut-icon img[src=''], + .shortcut-icon img:not([src]) { + display: none; } - - [[i18n(label)]] +
+
+ +
+ [[i18n(label)]] +
`, is: 'nuxeo-document-create-shortcut', @@ -66,6 +99,11 @@ Polymer({ label: String, }, + _handleImageError(e) { + // Hide the image if it fails to load + e.target.style.display = 'none'; + }, + _tap() { this.fire('create-document', { type: this.type }); }, diff --git a/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcuts.js b/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcuts.js index 4902c6a564..982c52ede1 100644 --- a/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcuts.js +++ b/elements/nuxeo-document-create-actions/nuxeo-document-create-shortcuts.js @@ -34,8 +34,11 @@ Polymer({
diff --git a/elements/nuxeo-web-ui-bundle.html b/elements/nuxeo-web-ui-bundle.html index aeaef719c6..5f30342d3c 100644 --- a/elements/nuxeo-web-ui-bundle.html +++ b/elements/nuxeo-web-ui-bundle.html @@ -474,7 +474,12 @@ @@ -490,7 +495,12 @@ @@ -506,7 +516,12 @@ @@ -522,7 +537,13 @@ @@ -541,7 +562,22 @@ @@ -562,11 +598,13 @@ @@ -577,7 +615,13 @@ @@ -588,7 +632,13 @@ @@ -599,7 +649,16 @@ @@ -617,10 +676,12 @@ @@ -631,7 +692,17 @@ diff --git a/images/hyland-wordmark.svg b/images/hyland-wordmark.svg new file mode 100644 index 0000000000..4866ff82f9 --- /dev/null +++ b/images/hyland-wordmark.svg @@ -0,0 +1,9 @@ + + Hyland + + + + + + + diff --git a/images/icons/add.svg b/images/icons/add.svg new file mode 100644 index 0000000000..4863e63bc5 --- /dev/null +++ b/images/icons/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/administration.svg b/images/icons/administration.svg new file mode 100644 index 0000000000..655bf4d97d --- /dev/null +++ b/images/icons/administration.svg @@ -0,0 +1,4 @@ + + + + diff --git a/index.html b/index.html index 53e6ace819..11b69b9b9a 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,14 @@ + + diff --git a/themes/base.js b/themes/base.js index c19cde66a4..6c8438aab7 100644 --- a/themes/base.js +++ b/themes/base.js @@ -135,6 +135,12 @@ const template = html` text-overflow: ellipsis; color: var(--nuxeo-drawer-header); } + /* Responsive adjustments for dashboard header title */ + @media (max-width: 720px) { + .header { + padding-left: 48px; + } + } /* layouts */ div[role='widget'] > div.multiline { diff --git a/themes/dark/logo.svg b/themes/dark/logo.svg new file mode 100644 index 0000000000..680fab5f4f --- /dev/null +++ b/themes/dark/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/themes/dark/theme.html b/themes/dark/theme.html index 618d1a50e6..2683ff0526 100644 --- a/themes/dark/theme.html +++ b/themes/dark/theme.html @@ -15,11 +15,14 @@ See the License for the specific language governing permissions and limitations under the License. --> + + + diff --git a/themes/default/logo.svg b/themes/default/logo.svg new file mode 100644 index 0000000000..680fab5f4f --- /dev/null +++ b/themes/default/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/themes/default/theme.html b/themes/default/theme.html index 5e84e9639d..2122c7db3b 100644 --- a/themes/default/theme.html +++ b/themes/default/theme.html @@ -15,15 +15,18 @@ See the License for the specific language governing permissions and limitations under the License. --> + + + diff --git a/themes/kawaii/logo.svg b/themes/kawaii/logo.svg new file mode 100644 index 0000000000..680fab5f4f --- /dev/null +++ b/themes/kawaii/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/themes/kawaii/theme.html b/themes/kawaii/theme.html index 27db0f634d..b2a273f7e7 100644 --- a/themes/kawaii/theme.html +++ b/themes/kawaii/theme.html @@ -15,11 +15,14 @@ See the License for the specific language governing permissions and limitations under the License. --> + + + diff --git a/themes/light/logo.svg b/themes/light/logo.svg new file mode 100644 index 0000000000..680fab5f4f --- /dev/null +++ b/themes/light/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/themes/light/theme.html b/themes/light/theme.html index 7454eea4d8..5bf522737a 100644 --- a/themes/light/theme.html +++ b/themes/light/theme.html @@ -15,11 +15,14 @@ See the License for the specific language governing permissions and limitations under the License. --> + + + diff --git a/themes/satori-design-tokens.css b/themes/satori-design-tokens.css new file mode 100644 index 0000000000..50ce1b2f77 --- /dev/null +++ b/themes/satori-design-tokens.css @@ -0,0 +1,346 @@ +/** + * Satori Design System - Official Hyland Design Tokens + * Single source of truth for all design values + * + * SOURCE: https://satori.hyland.com/latest/styles-and-tokens/color-tokens-AzpINh1D + * All color tokens are imported directly from the official Satori Design System documentation + * + * USAGE: + * Import this file in your theme, then reference variables in components + * Example: color: var(--mat-sys-primary); + * + * CUSTOMER OVERRIDE: + * Customers can override any token in Studio Designer + * Example: html { --mat-sys-primary: #CustomColor !important; } + * + * LIGHT/DARK MODE: + * Tokens with '-dark' suffix are for dark mode + * Example: --mat-sys-primary (light mode), --mat-sys-primary-dark (dark mode) + */ + +:root { + /* ======================================== + PRIMARY COLORS + ======================================== */ + + --mat-sys-primary: #5654ac; + --mat-sys-primary-dark: #c3c0ff; + + --mat-sys-on-primary: #ffffff; + --mat-sys-on-primary-dark: #26227b; + + --sat-sys-primary-loud: #322f86; + --sat-sys-primary-loud-dark: #e2dfff; + + --mat-sys-primary-container: #e2dfff; + --mat-sys-primary-container-dark: #3e3b92; + + --mat-sys-on-primary-container: #3e3b92; + --mat-sys-on-primary-container-dark: #e2dfff; + + /* ======================================== + SECONDARY COLORS + ======================================== */ + + --mat-sys-secondary: #5c5b7f; + --mat-sys-secondary-dark: #c5c2ec; + + --mat-sys-on-secondary: #ffffff; + --mat-sys-on-secondary-dark: #2e2d4e; + + --mat-sys-secondary-container: #e2dfff; + --mat-sys-secondary-container-dark: #444366; + + --mat-sys-on-secondary-container: #444366; + --mat-sys-on-secondary-container-dark: #e2dfff; + + /* ======================================== + TERTIARY COLORS + ======================================== */ + + --mat-sys-tertiary: #006b61; + --mat-sys-tertiary-dark: #6fd9bf; + + --mat-sys-on-tertiary: #ffffff; + --mat-sys-on-tertiary-dark: #003735; + + --mat-sys-tertiary-container: #b3efdb; + --mat-sys-tertiary-container-dark: #00504b; + + --mat-sys-on-tertiary-container: #00504b; + --mat-sys-on-tertiary-container-dark: #b3efdb; + + /* ======================================== + SURFACE COLORS + ======================================== */ + + --mat-sys-surface: #f9f9fc; + --mat-sys-surface-dark: #101112; + + --mat-sys-on-surface: #1a1c1e; + --mat-sys-on-surface-dark: #e2e2e5; + + --mat-sys-on-surface-variant: #474551; + --mat-sys-on-surface-variant-dark: #e4e0f0; + + --mat-sys-surface-container: #eeedf1; + --mat-sys-surface-container-dark: #1e2022; + + --mat-sys-surface-container-lowest: #ffffff; + --mat-sys-surface-container-lowest-dark: #0a0b0c; + + --mat-sys-surface-container-low: #f4f3f7; + --mat-sys-surface-container-low-dark: #1a1c1e; + + --mat-sys-surface-container-high: #e8e8eb; + --mat-sys-surface-container-high-dark: #292a2d; + + --mat-sys-surface-container-highest: #e2e2e5; + --mat-sys-surface-container-highest-dark: #333437; + + --mat-sys-surface-dim: #dadadd; + --mat-sys-surface-dim-dark: #101112; + + --mat-sys-surface-bright: #f9f9fc; + --mat-sys-surface-bright-dark: #38393c; + + /* ======================================== + STATUS COLORS + ======================================== */ + + --sat-sys-on-status-icon: #ffffff; + + /* Neutral */ + --sat-sys-neutral-icon: #828282; + --sat-sys-neutral-container: #f0f0f0; + --sat-sys-neutral-container-dark: #292929; + --sat-sys-on-neutral-container: #5e5e5e; + --sat-sys-on-neutral-container-dark: #adadad; + + /* Info */ + --sat-sys-info-icon: #4383ff; + --sat-sys-info-icon-dark: #528bf6; + --sat-sys-info-container: #e3f3fd; + --sat-sys-info-container-dark: #1d283e; + --sat-sys-on-info-container: #0057d1; + --sat-sys-on-info-container-dark: #7dadff; + + /* Success */ + --sat-sys-success-icon: #379f36; + --sat-sys-success-icon-dark: #4b9344; + --sat-sys-success-container: #eafce3; + --sat-sys-success-container-dark: #1a2c16; + --sat-sys-on-success-container: #007f00; + --sat-sys-on-success-container-dark: #2db934; + + /* Warning */ + --sat-sys-warning-icon: #9a7b13; + --sat-sys-warning-icon-dark: #a08019; + --sat-sys-warning-container: #fff6d9; + --sat-sys-warning-container-dark: #332602; + --sat-sys-on-warning-container: #816400; + --sat-sys-on-warning-container-dark: #c5a23b; + + /* Important */ + --sat-sys-important-icon: #d2444c; + --sat-sys-important-icon-dark: #d04048; + --sat-sys-important-container: #ffe9e7; + --sat-sys-important-container-dark: #440e11; + --sat-sys-on-important-container: #b93b3f; + --sat-sys-on-important-container-dark: #fc6d70; + + --sat-sys-important-loud-container: #cf424a; + --sat-sys-important-loud-container-dark: #9c0020; + --sat-sys-on-important-loud-container: #ffffff; + + /* ======================================== + CATEGORY COLORS + ======================================== */ + + --sat-sys-on-cat-icon: #ffffff; + + /* Purple */ + --sat-sys-cat-purple-icon: #6763e8; + --sat-sys-cat-purple-icon-dark: #7773f9; + --sat-sys-cat-purple-container: #f2efff; + --sat-sys-cat-purple-container-dark: #262363; + --sat-sys-on-cat-purple-container: #514bce; + --sat-sys-on-cat-purple-container-dark: #a3a1ff; + + /* Blue */ + --sat-sys-cat-blue-icon: #4383ff; + --sat-sys-cat-blue-icon-dark: #528bf6; + --sat-sys-cat-blue-container: #e3f3fd; + --sat-sys-cat-blue-container-dark: #1d283e; + --sat-sys-on-cat-blue-container: #0057d1; + --sat-sys-on-cat-blue-container-dark: #7dadff; + + /* Pink */ + --sat-sys-cat-pink-icon: #c84ca5; + --sat-sys-cat-pink-icon-dark: #bc399a; + --sat-sys-cat-pink-container: #ffe8ff; + --sat-sys-cat-pink-container-dark: #430c36; + --sat-sys-on-cat-pink-container: #aa288a; + --sat-sys-on-cat-pink-container-dark: #ff84e1; + + /* Teal */ + --sat-sys-cat-teal-icon: #00999b; + --sat-sys-cat-teal-icon-dark: #009d7b; + --sat-sys-cat-teal-container: #dafdfd; + --sat-sys-cat-teal-container-dark: #003335; + --sat-sys-on-cat-teal-container: #007c7e; + --sat-sys-on-cat-teal-container-dark: #00c9a3; + + /* Yellow */ + --sat-sys-cat-yellow-icon: #9a7b13; + --sat-sys-cat-yellow-icon-dark: #a08019; + --sat-sys-cat-yellow-container: #fff6d9; + --sat-sys-cat-yellow-container-dark: #332602; + --sat-sys-on-cat-yellow-container: #816400; + --sat-sys-on-cat-yellow-container-dark: #c5a23b; + + /* Green */ + --sat-sys-cat-green-icon: #379f36; + --sat-sys-cat-green-icon-dark: #4b9344; + --sat-sys-cat-green-container: #eafce3; + --sat-sys-cat-green-container-dark: #1a2c16; + --sat-sys-on-cat-green-container: #007f00; + --sat-sys-on-cat-green-container-dark: #2db934; + + /* Red */ + --sat-sys-cat-red-icon: #d2444c; + --sat-sys-cat-red-icon-dark: #d04048; + --sat-sys-cat-red-container: #ffe9e7; + --sat-sys-cat-red-container-dark: #491215; + --sat-sys-on-cat-red-container: #b93b3f; + --sat-sys-on-cat-red-container-dark: #fc6d70; + + /* Orange */ + --sat-sys-cat-orange-icon: #c96b15; + --sat-sys-cat-orange-icon-dark: #cd752e; + --sat-sys-cat-orange-container: #ffeece; + --sat-sys-cat-orange-container-dark: #4e1800; + --sat-sys-on-cat-orange-container: #ac5000; + --sat-sys-on-cat-orange-container-dark: #e38b4b; + + /* Gray */ + --sat-sys-cat-gray-icon: #828282; + --sat-sys-cat-gray-container: #f0f0f0; + --sat-sys-cat-gray-container-dark: #292929; + --sat-sys-on-cat-gray-container: #5e5e5e; + --sat-sys-on-cat-gray-container-dark: #adadad; + + /* ======================================== + OUTLINE COLORS + ======================================== */ + + --sys-outline-variant: #c8c5d3; + --sys-outline-variant-dark: #474551; + + --sys-outline: #777683; + --sys-outline-dark: #918f9d; + + /* ======================================== + INVERSE COLORS + ======================================== */ + + --sys-inverse-surface: #2f3033; + --sys-inverse-surface-dark: #e2e2e5; + + --sat-surface-loud: #101112; + --sat-surface-loud-dark: #f1f0f4; + + --sys-inverse-primary: #c3c0ff; + --sys-inverse-primary-dark: #5654ac; + + --sys-inverse-on-surface: #f1f0f4; + --sys-inverse-on-surface-dark: #2f3033; + + /* ======================================== + TINT BASES + ======================================== */ + + --sys-scrim: #000000; + --sys-shadow: #000000; + --sys-surface-tint: #5654ac; + --sys-surface-tint-dark: #c3c0ff; + + /* ======================================== + FIXED COLORS + ======================================== */ + + --sys-primary-fixed: #e2dfff; + --sys-primary-fixed-dim: #c3c0ff; + --sys-on-primary-fixed: #0f0268; + --sys-on-primary-fixed-variant: #3e3b92; + + --sys-secondary-fixed: #e2dfff; + --sys-secondary-fixed-dim: #c5c2ec; + --sys-on-secondary-fixed: #181838; + --sys-on-secondary-fixed-variant: #444366; + + --sys-tertiary-fixed: #b3efdb; + --sys-tertiary-fixed-dim: #6fd9bf; + --sys-on-tertiary-fixed: #002020; + --sys-on-tertiary-fixed-variant: #00504b; + + /* ======================================== + ERROR COLORS + ======================================== */ + + --sys-error: #b02b36; + --sys-error-dark: #ffb3b2; + + --sys-on-error: #ffffff; + --sys-on-error-dark: #680012; + + --sys-error-container: #ffdad8; + --sys-error-container-dark: #8e0f21; + + --sys-on-error-container: #8e0f21; + --sys-on-error-container-dark: #ffdad8; + + /* ======================================== + DEPRECATED COLORS (for backward compatibility) + ======================================== */ + + --sys-background: #f9f9fc; + --sys-background-dark: #101112; + + --sys-on-background: #1a1c1e; + --sys-on-background-dark: #e2e2e5; + + --sys-surface-variant: #e4e0f0; + --sys-surface-variant-dark: #474551; + + /* ======================================== + ILLUSTRATION COLORS + ======================================== */ + + --sat-illustration-gradient-dark: #5654ac; + --sat-illustration-gradient-light: #8987e3; + --sat-illustration-medium: #a3a2ff; + --sat-illustration-light: #c3c0ff; + --sat-illustration-lighter: #e2dfff; + --sat-illustration-lightest: #f2efff; + --sat-illustration-white: #ffffff; + --sat-illustration-accent: #13dab4; + + + /* ======================================== + CUSTOM TOKENS + ======================================== */ + + /* User Avatar */ + --sat-profile-avatar-bg: rgba(255, 255, 255, 0.15); + + /* Drawer Toggle */ + --sat-drawer-toggle-bg: transparent; + + /*Font Styles*/ + --sat-font-family-primary: 'Figtree'; + --sat-font-family-secondary: 'Noto Sans'; + + + +} \ No newline at end of file From 87644a1ac9e5d51edbee7eb5f8fae1effb6707f7 Mon Sep 17 00:00:00 2001 From: naveen-konda Date: Tue, 24 Feb 2026 13:04:51 +0530 Subject: [PATCH 02/35] WEBUI-1935: Address a11y issue --- elements/nuxeo-app/nuxeo-menu-icon.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/elements/nuxeo-app/nuxeo-menu-icon.js b/elements/nuxeo-app/nuxeo-menu-icon.js index 7bbe7aedbc..c0049e0074 100644 --- a/elements/nuxeo-app/nuxeo-menu-icon.js +++ b/elements/nuxeo-app/nuxeo-menu-icon.js @@ -120,7 +120,13 @@ Polymer({ - + [[i18n(label)]] From 170c1516875c90ce5d614642969f7049354706a9 Mon Sep 17 00:00:00 2001 From: naveen-konda Date: Tue, 10 Mar 2026 16:49:25 +0530 Subject: [PATCH 03/35] WEBUI-1935: Update ftest selector for profile button in drawer.js --- packages/nuxeo-web-ui-ftest/pages/ui/drawer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/nuxeo-web-ui-ftest/pages/ui/drawer.js b/packages/nuxeo-web-ui-ftest/pages/ui/drawer.js index 0c67ce25ce..0db74d1068 100644 --- a/packages/nuxeo-web-ui-ftest/pages/ui/drawer.js +++ b/packages/nuxeo-web-ui-ftest/pages/ui/drawer.js @@ -74,7 +74,10 @@ export default class Drawer extends BasePage { const isVisible = await section.isVisible(); if (!isVisible) { const menu = await this.menu; - const buttonToclick = await menu.$(`nuxeo-menu-icon[name='${name}']`); + // The profile avatar was rebranded from to + // ; all other items remain nuxeo-menu-icon. + const selector = name === 'profile' ? '#profileWrapper' : `nuxeo-menu-icon[name='${name}']`; + const buttonToclick = await menu.$(selector); await buttonToclick.click(); } return section; From 4bd866ca27022bfa84de4adc01d79cd5c10d33c3 Mon Sep 17 00:00:00 2001 From: Naveen Konda Date: Wed, 11 Mar 2026 15:10:02 +0530 Subject: [PATCH 04/35] WEBUI-1935 : UPDATE ICON LOGIC TO USE NEW SATORI ICONS AND REMOVE HARDCODE SVG PATH --- elements/nuxeo-app.js | 2 +- elements/nuxeo-app/nuxeo-menu-icon.js | 70 +----------- elements/nuxeo-web-ui-bundle.html | 102 ++---------------- elements/search/nuxeo-saved-search-actions.js | 2 +- 4 files changed, 15 insertions(+), 161 deletions(-) diff --git a/elements/nuxeo-app.js b/elements/nuxeo-app.js index 1200d47736..0b48ffd8de 100644 --- a/elements/nuxeo-app.js +++ b/elements/nuxeo-app.js @@ -514,7 +514,7 @@ Polymer({ label="app.administration" class="settings" hidden$="[[!hasAdministrationPermissions(currentUser)]]" - icon="images/icons/administration.svg" + icon="nuxeo:admin" > - + [[i18n(label)]] @@ -159,14 +110,6 @@ Polymer({ value: '', }, - /** - * Inline SVG icon markup - */ - svgIcon: { - type: String, - value: '', - }, - /** * A named route and arguments. Route syntax is ://.../. */ @@ -221,19 +164,10 @@ Polymer({ } }, - async _srcOrIcon() { + _srcOrIcon() { if (this.src && this.src.length > 0) { this.$.button.icon = ''; this.$.button.src = this.src; - } else if (this.icon && this.icon.endsWith('.svg')) { - // Fetch SVG file and set as svgIcon - try { - const response = await fetch(this.icon); - const svgText = await response.text(); - this.svgIcon = svgText; - } catch (error) { - console.error('Failed to load SVG icon:', this.icon, error); - } } else if (!this.$.button.src || this.$.button.src.length === 0) { this.$.button.icon = this.icon; } diff --git a/elements/nuxeo-web-ui-bundle.html b/elements/nuxeo-web-ui-bundle.html index 5f30342d3c..0fb77bece2 100644 --- a/elements/nuxeo-web-ui-bundle.html +++ b/elements/nuxeo-web-ui-bundle.html @@ -474,12 +474,7 @@ @@ -495,12 +490,7 @@ @@ -516,12 +506,7 @@ @@ -537,13 +522,7 @@ @@ -562,22 +541,7 @@ @@ -596,14 +560,7 @@ @@ -615,13 +572,7 @@ @@ -632,13 +583,7 @@ @@ -649,16 +594,7 @@ @@ -674,13 +610,7 @@ @@ -692,17 +622,7 @@ diff --git a/elements/search/nuxeo-saved-search-actions.js b/elements/search/nuxeo-saved-search-actions.js index 51138a46ad..fbd6a24e70 100644 --- a/elements/search/nuxeo-saved-search-actions.js +++ b/elements/search/nuxeo-saved-search-actions.js @@ -72,7 +72,7 @@ Polymer({ hidden$="[[!_showOtherSearchActions(searchDoc, isSavedSearch, _dirty, _isSearchFormVisible)]]" > From c60b1e00d11185cca7bd055409ca84f118f5be61 Mon Sep 17 00:00:00 2001 From: Naveen Konda Date: Wed, 11 Mar 2026 15:15:22 +0530 Subject: [PATCH 05/35] ADDED MISSING TABINDEX ID --- elements/nuxeo-app/nuxeo-menu-icon.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/elements/nuxeo-app/nuxeo-menu-icon.js b/elements/nuxeo-app/nuxeo-menu-icon.js index 5caa9ff4ac..de357195ed 100644 --- a/elements/nuxeo-app/nuxeo-menu-icon.js +++ b/elements/nuxeo-app/nuxeo-menu-icon.js @@ -44,6 +44,11 @@ Polymer({ outline: auto; } + :host(.selected) paper-icon-button { + background: rgba(0, 0, 0, 0.2); + color: var(--nuxeo-sidebar-menu-hover); + } + paper-badge { --paper-badge-background: var(--nuxeo-badge-background); --paper-badge-margin-left: -24px; @@ -69,16 +74,17 @@ Polymer({ paper-icon-button path { tabindex: -1; } - - :host(.selected) paper-icon-button { - background: rgba(0, 0, 0, 0.2); - color: var(--nuxeo-sidebar-menu-hover); - } - [[i18n(label)]]