930 accent color should be implemented as a global variable #1131
Conversation
In this commit: - Author image - Author - Author card - Progress bar navigation
…ion page to accent control.
…and without emphasis) to accent color control
Deploying with
|
| Latest commit: |
46784e4
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8406638f.design-system.pages.dev |
| Branch Preview URL: | https://930-accent-color-should-be-i.design-system.pages.dev |
There was a problem hiding this comment.
@paboden , I like the button on the toolbar for choosing color, this is good. However, implementation of that parameter is not exactly aligned with our intention. What it should do is to add ".accent-[color]" class to the topmost element relevant for content, in case of Storybook implementation it can be <body> tag, and all widgets inside that container will appear using that color without a need to update their markup. Main focus here is on setting this once for the entire container. Current implementation adds color code as class name to each widget, which is exactly what we wanted to avoid.
Another angle here is the following - every widget should follow the closest setting if provided. i mean if there is a .accent-red class set on <body> element - every card should use reddish accent for hover effect. If one of the cards in that setup will have its own .accent-green class set - all cards should be red, but one - it has to follow more specific class and use green
…ass if applied to a higher html container, like the body tag. Cleaned up some of the accent related code for the component, and implemented a body tag class that pulls from the global "Accent color" settings.
|
@paboden , we need to make sure that every widget which is using accent color is following page level settings. For example, here https://930-accent-color-should-be-i.design-system.pages.dev/?path=/story/templates-project-page--project-page&globals=accent:red Stat cards are using red accent color, but Explore more widget (grid with a mix of Content cards) is still using default yellow: |
…or the component and for the any parent/global class. Cleanup of code and names to try to bring consistency to the global accent color system.
|
@paboden , please resolve conflicts and also add compile and commit production .css and .js files as per other comment |
…-a-global-variable
|
Not ready for merging yet. Need to an issue on the country page. |
…s and better default color setup for those items Country homepage, Global homepage, and publication page had alterations to help more efficiently pass a desired hovercolor per item or with global accent setting. Included some fixes from develop branch to help with visual regression testing
…-a-global-variable
|
@Jura This is ready for review once the dev build has finished. |
…-a-global-variable
There was a problem hiding this comment.
@paboden for the Featured content card, when the image option is used it is not showing a color gradient atop an image. See screen capture here of the current implementation vs. the correct approach.
accent-color.mov
… source of image_variant setting. Removed some console.log snippets
…-a-global-variable
…he color bg on hover and revert back to gray bg on hover.
Accent color control is updated for the following elements and ready for review
Components
Author image (hover color)
Author (hover color)
Author card (hover color)
Bio card (hover color)
Content card with image (hover color)
Content card without image with emphasize
Publication module (hover color)
Card module (hover color)
Featured card (hover color)
Image reveal card (hover color)
Publication card (hover color)
Stats card (hover color)
Pagewide featured content card (hover color)
Stats (hover color)
Stats card slider (imports individual stats cards)
Callout (when the color background is used it should reference the global variable)
Patterns
Content cards (imports content card with image)
Content cards with and without images (imports multiple cards)
Featured cards (imports featured card)
Image reveal cards (imports image reveal card)
Stats slider (two rows) (imports stats card)
Progress bar navigation
Templates
All template pages