Potential conversion to CDS color tokens

[androche]

Overview We've been asked by UX if Magna might eventually utilize CDS color tokens. Reasons for prior hesitancies were that dark mode didn't exist, churn as magnetic was developing and iterating, as well as requirements for atomic to magnetic transition and support. Now that CDS has released dark mode, this option can be revisited. Design has also now fully adopted CDS color tokens as well so there's less concern for churn moving forward.

Impact on other teams -Monorepo is adopting palette so we need to follow up as soon as we make a decision. https://github.com/advthreat/securex-ui-monorepo/issues/1425 -All of ribbon would need to be migrated off palette.

Step 1: Research

• Feasibility discussion set for week of 10/23/23
• Attendees @rwharrisjr and @androche

[derrick-snider]

Official color updates align with what XDR adopted in February 2023 https://app.vidcast.io/share/d03cd722-6525-4fab-a469-8d174a866563

At Cisco, one of our core pillars is to “power an inclusive future for all.” That extends to the way we design our products -- making them as accessible as possible for our users so they can be successful in their work.

With that framing, we are excited to announce an important change to the Magnetic color palette based on extensive user research.

Starting Friday, October 20th, we will be using light blue (instead of green) to represent positive status. Below are the guidelines on the change: This includes icons, alerts, banners (anywhere status is communicated) and data visualizations This does not include branding and header colors This does not mean you cannot use green; this does mean you should use the identified light blue color instead of green when conveying positive status

What does this mean for you? On October 20th, you will immediately see the change from green to light blue in components when you open the Magnetic Figma Design Library, and moving forward the new, more accessible light blue will be used to convey positive status in new Magnetic components. We encourage you to check out our Vidcast on the color changes to learn more.

How did we identify the best path forward? Cisco makes accessibility a priority as part of our mission of powering an inclusive future for all. The Magnetic Design Team conducted extensive research to determine status colors that are both accessible and usable in various contexts. This included testing these colors with users with full color vision as well as color deficient users.

We need your support in implementing this change now.

Magnetic Resources: · Color Announcement Vidcast: Magnetic Status Color Updates · Background Research: o Vidcast: Creating an Accessible Color Palette o Figma slides

[androche]

Notes from 10/24 meeting:.

Will move forward with next steps with one caveat. Coincidentally, during this meeting a post went out on CDS notifying the group of breaking changes to tokens. Breaking changes that magna would have to maintain is still a concern so the frequency of these CDS token updates will be more closely monitored before making a final decision to release. With this in mind, we will still move forward with attempting to phase in the token variables into the magna repo. At this stage, there would be no breaking changes. If successful, we would move forward with removing the current theming set up and palette. 

 Next steps:

• Token variables were located in the CDS repo so we will first manually copy in and namespace the variables.


• We will try swapping to css variables while maintaining the current theme mapping. (A full shift away from mapping would require all apps that consume theming maps to refactor as well.)

- As noted above, eventually the goal would be to deprecate theme maps for css variables.



Outstanding questions: 



• Where are the token files getting automatically generated from? Is this something we could generate as well?


• Is there a simple way to import the variables without authentication hoops? This would greatly reduce maintenance.


[androche]

Updated that we've moved forward with CDS integration with magetic tokens through their generated sass variables. There will be no breaking changes to the theming structure, and this also has the benefit of allowing other teams to consume these magnetic variables as well. When we sunset the palette.scss file, this will break anyone using those variables, however we will keep that available until the transition is complete.