enhancement(#2351):Adopt uPortal CSS Variables for Web Components to Simplify Skin Management

[555vedant]

currently, web components require individual CSS variiables to be defined separately, which adds complexity when integrating with uPortal skins. To streamline styling and ensure consistency, uPortal CSS variables (like those used for portlets) should be directly exposed and defined. This will allow web components to inherit styles such as header text color, content background color, and more, from the uPortal skin without requiring redundant definitions. The solution involves defining key CSS variables in the :root scope that web components can automatically use, improving maintainability and reducing duplication

[555vedant]

@jonathanmtran sir please tell me is there any improvement or suggestion for this PR because from 10th onwards i have MIDSEM exam of college.

[jonathanmtran]

In the enhancement request two examples were given.

:root {
   --portlet-header-text-color: #000000
   --portlet-content-bg-color: #d0d0d0
...
}

--portlet-header-text-color would correspond to @portlet-titlebar-link-color found in https://github.com/uPortal-Project/uPortal/blob/HEAD/uPortal-webapp/src/main/webapp/media/skins/respondr/common/less/content.less#L165

    > a {
      color: @portlet-titlebar-link-color;

      &:hover {
        color: darken(@portlet-titlebar-link-color, 20%);
      }
    }

The end result would be an appropriate modification that would include something like the following:
NOTE: I did not try this so I am not sure if this would even compile/work

:root {
  --uP-portlet-header-text-color: @portlet-titlebar-link-color;
}

[555vedant]

@jonathanmtran is it fine ?

[555vedant]

@jonathanmtran PR ready to merge ??

[jonathanmtran]

I do not feel that this PR is ready to merge.

• The modifications were made to autosuggest.css which is NOT a file that is related to what I feel the enhancement would be
• The UNTESTED fragment I provided contains a LESS variable. Since the modified file is not a .less file, it would never be compiled into CSS at build time. Therefore, the changes need to be made to the appropriate file, pre-existing or new

[555vedant]

@jonathanmtran i also noticed the same problem with less variables we cant do without less , now whats the solution for this PR ??

[jonathanmtran]

I have already described my guess as to what an implementation could look like.

In order to make meaningful progress on implementing this enhancement and if you have not set up an instance of uPortal: you should set up an instance of uPortal using uPortal-start and work on this.