feat: [M3-7579] - Design Tokens (CDS 2.0)

[jaalah-akamai]

Description 📝

Initial pass to replace the hard-coded styles in the light.ts theme file with their corresponding design tokens, so that we can achieve consistency in styling and facilitate future theming. We will be doing more structural changes to the theme files in the near future. These design tokens are in sync with Core Design System (CDS) 2.0 decisions being made for Akamai.

Benefits:

• Single source of truth for design decisions
• Autocompletion
• Type Checking / Inference
• Design consistency across Akamai projects

Changes 🔄

• New dependency "@linode/design-language-system": "^1.0.0"
  • https://github.com/linode/design-language-system
• Updated some of our status colors in the app to use the equivalent design token
• Storybook color palettes have been updated automatically.

Preview 📷

Before	After

How to test 🧪

Prerequisites

• Checkout branch
• yarn install && yarn build && yarn dev

Reproduction steps

• Go to http://localhost:3000

Verification steps

• Observe differences compared to https://cloud.linode.com/

As an Author I have considered 🤔

Check all that apply

• [x] 👀 Doing a self review
• [x] ❔ Our contribution guidelines
• [x] 🤏 Splitting feature into small PRs
• [x] ➕ Adding a changeset
• [ ] 🧪 Providing/Improving test coverage
• [ ] 🔐 Removing all sensitive information from the code and PR description
• [ ] 🚩 Using a feature flag to protect the release
• [x] 👣 Providing comprehensive reproduction steps
• [ ] 📑 Providing or updating our documentation
• [x] 🕛 Scheduling a pair reviewing session
• [ ] 📱 Providing mobile support
• [ ] ♿ Providing accessibility support

[jaalah-akamai]

The table header looks much different, and slightly less appealing now in my opinion. Is this change to bring us into alignment with Akamai's tables?

Yes! The table will look much different once we actually apply the Table tokens. We can either decide to make that change now or in an upcoming PR. I was hesitant in doing anything drastic with this first PR and was more trying to do a 1:1 mapping.

[jaalah-akamai]

For our Button, the dark mode hover state is much less obvious than before. Do we need to change the colors so that there is more of a difference when you hover in dark mode?

@bnussman-akamai Good catch, we don't have dark mode designed yet and our dark mode inherits from the light theme. I'll see what else may have been affected.

[abailly-akamai]

@jaalah-akamai also you'll need a rebase

[jaalah-akamai]

@abailly-akamai Reverted borders on several components until we can review them later and fixed the marketplace reference since our brand blues have changed. It's looking good now 👍

[abailly-akamai]

@jaalah-akamai do we want to wait for the next version of https://github.com/linode/design-language-system and update this PR with the latest lib improvement?

[github-actions[bot]]

Coverage Report: ❌
Base Coverage: 83.12%
Current Coverage: 82.39%

[abailly-akamai]

Addressed some of the feedback from @dwiley-akamai & @bnussman-akamai which I will list here (dark theme only, did not touch light theme):

Do we expect to keep the jet black background? It feels a bit jarring. And it looks like we have some stray miscoloration in the bottom left.

• miscoloration (also mentioned by Banks) has been fixed
• i had to re-work the jet-black/primary nav/top nav handling cause styling was a bit broken - eventually the jet black will be our top bar bg (CDS styles) but we will have to rework how the primary nav is built to make them work together. for now i lightened it some to transition over smoothly to the future CDS styles and kept the sidebar somewhat similar to what it is now (darker) to minimize impact and keep experience nice

Do we expect to keep the light gray borders/outlines on the elements? It makes the app look busier than the current dark gray borders/outlines IMO.

yes, these are the styles for CDS 2.0 which Cloud Manager is adopting now and will increase adoption in the next major update

Popovers/Menus have no contrast

yeah i agree this isn't the best experience so I added contrast back

Top Nav icon colors inconsistent

fixed!

Can we add a contrasting background color to the footer?

leaving this one out cause the light theme does not have it and i don't think we need to in the dark mode either (trying to keep themes consistent in terms of main elements)

Can we make entity icons not green?

That will be coming in the future but for now marketing/product styling is out of scope.