[DPEDE-5316] Adjusted styles to new connect styles in solid tabs#1934
Open
wojciechwlodarczyklumen wants to merge 3 commits intoCenturyLink:masterfrom
Open
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refines the “solid” variant of the Tabs component to align with updated Connect visual styles while making the state styling fully theme-driven via new SCSS variables. It also refreshes SRI hashes to match the rebuilt CSS/JS bundles.
Changes:
- Added detailed state-specific styles (default, hover, active, disabled) for
.chi-tabs.-solidintabs.scss, wired to new SCSS variables instead of hard-coded values. - Introduced a full set of
tabs-solid-*variables across all major themes (lumen, connect, brightspeed, centurylink, colt, portal, test) to control colors, borders, radii, font sizes, and opacities per state. - Updated
sri.jsonSRI hashes for CSS and JS assets to reflect the new builds.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| sri.json | Updates SRI hashes for theme CSS bundles and CE JS bundles so integrity checks match the new compiled assets. |
| src/chi/components/tabs/tabs.scss | Implements theme-variable-driven styling for solid tabs, covering base, hover, active, disabled, and active+disabled states plus solid sliding border colors. |
| src/chi/themes/lumen/_variables.scss | Defines the new tabs-solid-* variables for the lumen (default) theme, keeping the existing visual style but exposing more granular control. |
| src/chi/themes/connect/_variables.scss | Defines connect-specific tabs-solid-* variables (e.g., primary-light background, rounded top radius, custom disabled styles) to match the new Connect solid tab look. |
| src/chi/themes/test/_variables.scss | Mirrors the connect tabs-solid-* variables for the test theme so visual regression tests reflect the new Connect styling. |
| src/chi/themes/portal/_variables.scss | Adds portal-theme tabs-solid-* variables preserving its existing appearance while aligning to the new variable contract. |
| src/chi/themes/brightspeed/_variables.scss | Adds brightspeed-theme tabs-solid-* variables for solid tabs, mapping prior hard-coded values into the new variable set. |
| src/chi/themes/centurylink/_variables.scss | Adds centurylink-theme tabs-solid-* variables, maintaining the existing centurylink look via the new configuration knobs. |
| src/chi/themes/colt/_variables.scss | Adds colt-theme tabs-solid-* variables to drive solid tab colors, borders, and disabled styling via the shared pattern. |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1934/1/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1934/2/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1934/3/. ❌ |
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.
IMPORTANDO!
This PR doesnt change the borders around new tabs - only it added focus. As for now it was left for other task. We need to adjust how we use the borders (now we use :before to show a line, instead of borders).
This pull request updates the styling and variables for the "solid" variant of the Tabs component, enhancing its appearance and state handling (active, hover, disabled) across multiple themes. The changes introduce new SCSS variables for more granular control and update the component's styles to utilize these variables, ensuring consistent behavior and easier theme customization.
Tabs Component Styling Enhancements:
tabs.scss. This improves accessibility and visual feedback for users. [1] [2]Theme Variable Updates:
brightspeed,centurylink,colt,connect,lumen,portal,test). These variables provide fine-grained control over colors, borders, radii, font sizes, and opacities for various tab states, and remove or replace older, less specific variables. [1] [2] [3] [4] [5] [6] [7]Build and Integrity Updates:
sri.jsonto reflect the new CSS and JS builds generated by these styling changes, ensuring clients can verify the integrity of the assets. [1] [2]Minor Code Clean-up:
tabs.scssfor improved code clarity. [1] [2]